/* ===== OSMSim / Arayüz ===== */
:root{
  --bg:#0c1015; --bg2:#11171f; --panel:#151d27; --panel2:#1b2532;
  --line:#26323f; --line2:#33424f;
  --txt:#e6edf3; --dim:#8b9bab; --dim2:#5f7183;
  --home:#3ddc84; --away:#4aa8ff;
  --warn:#f5c542; --hot:#f59042; --bad:#f2555a; --good:#3ddc84;
  --r:12px; --r2:9px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 600px at 15% -10%, #16283a 0%, transparent 60%),
    radial-gradient(900px 500px at 92% 0%, #1a2430 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; padding:0 0 80px;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}

/* ---- Başlık ---- */
header{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(12,16,21,.82);border-bottom:1px solid var(--line);
  padding:13px 0;margin-bottom:24px;
}
header .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:-.2px}
.brand .dot{font-size:18px;line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--dim2);letter-spacing:.3px}
.spacer{flex:1}

/* ---- Butonlar & kontroller ---- */
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.btn{
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r2);
  padding:9px 15px;font-size:13.5px;font-weight:500;transition:.15s;white-space:nowrap;
}
.btn:hover{background:#233040;border-color:#43566a}
.btn.primary{
  background:linear-gradient(135deg,#3ddc84,#2fb96c);color:#06210f;
  border-color:transparent;font-weight:700;box-shadow:0 3px 18px rgba(61,220,132,.24);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{padding:15px 44px;font-size:16.5px;border-radius:11px}
input,select{font:inherit;outline:none}
input:focus,select:focus{border-color:var(--home)}

/* ---- Panel düzeni ---- */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.teams{grid-template-columns:1fr}}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.panel > .head{
  display:flex;align-items:center;gap:11px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--panel2);
}
.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.9px;padding:4px 9px;border-radius:5px;
}
.badge.h{background:rgba(61,220,132,.15);color:var(--home)}
.badge.a{background:rgba(74,168,255,.15);color:var(--away)}
.panel .body{padding:16px}
.panel[data-side=A]{border-top:2px solid var(--home)}
.panel[data-side=B]{border-top:2px solid var(--away)}

.tname{
  flex:1;background:transparent;border:0;border-bottom:1px dashed var(--line2);
  color:var(--txt);font-size:16.5px;font-weight:700;padding:3px 2px;min-width:0;
}
.tname:focus{border-bottom-color:var(--home)}

/* Ekran görüntüsünden kadro okuma: paneldeki ana giriş noktası. Başlıktaki
   küçük simge kaybolduğu için gövdenin en üstünde kendi bölümü var. */
.shotcta{
  display:flex;align-items:center;gap:11px;margin-bottom:15px;padding:11px 12px;
  border:1px solid var(--line2);border-radius:10px;background:var(--panel2);
}
.shotcta .ic{font-size:19px;line-height:1;flex:none}
.shotcta .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shotcta .tx b{font-size:13px;font-weight:600}
.shotcta .tx span{font-size:11.5px;color:var(--dim2);line-height:1.4}
.shotcta .btn{flex:none}
@media(max-width:520px){
  .shotcta{flex-wrap:wrap}
  .shotcta .btn{width:100%}
}
/* Takım gücü slider'ı sahanın üstünde durur: oyuncu değerlerini o belirlediği
   için önce o ayarlanır. */
.strbox{margin-bottom:14px}
.strbox .slider{margin-bottom:0}

/* ---- Uzmanlıklar (kaptan / duran toplar) ---- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.specrow{background:var(--panel2);border:1px solid var(--line2);
  border-radius:9px;padding:8px 9px}
.specrow .hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.specrow .mk{flex:none;width:17px;height:17px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font:700 9.5px var(--mono);color:var(--dim);
  background:var(--bg2);border:1px solid var(--line2)}
.specrow .lb{flex:1;min-width:0;font-size:11.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specrow .tag{flex:none;margin-left:0}
.specrow select{padding:6px 8px;font-size:12px;
  background-position:right 8px center;padding-right:24px}
.specfoot{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.specfoot .hint{flex:1;margin-top:0}
.specfoot .btn{flex:none}
@media(max-width:520px){ .specs{grid-template-columns:1fr} }
table.pt small.dt{font:700 9px var(--mono);color:var(--warn);margin-left:6px;
  letter-spacing:.5px}

/* ---- Form alanları ---- */
.field{margin-bottom:15px}
.field > label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.7px;
  color:var(--dim2);text-transform:uppercase;margin-bottom:6px;
}
select{
  width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:8px;padding:9px 11px;font-size:14px;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%238b9bab' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;
}
.hint{font-size:11.5px;color:var(--dim2);margin-top:5px;line-height:1.45}

/* segment kontrol */
.seg{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:9px;
  border:1px solid var(--line)}
.seg button{
  flex:1;padding:7px 4px;border-radius:6px;font-size:12.5px;color:var(--dim);
  transition:.13s;text-align:center;
}
.seg button:hover{color:var(--txt)}
/* Dil seçici artık <select>: 7 dil segment düğmesi olarak satıra sığmıyor.
   Ok işareti data: URI ile gömülü; CSP img-src'de data: zaten açık. */
.seg.lang{padding:0;background:none}
.seg.lang select{background:var(--bg2);border:1px solid var(--line2);color:var(--dim);
  border-radius:9px;padding:6px 24px 6px 10px;font:600 12px var(--mono);cursor:pointer;
  appearance:none;line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d8794' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.seg.lang select:hover{color:var(--txt);border-color:var(--home)}
.seg.lang select:focus-visible{outline:2px solid var(--home);outline-offset:1px}
.seg button.on{background:var(--panel2);color:var(--txt);font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.panel[data-side=A] .seg button.on{color:var(--home)}
.panel[data-side=B] .seg button.on{color:var(--away)}

/* slider */
.slider{margin-bottom:16px}
.slider .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.slider .top b{font-size:12.5px;font-weight:600}
.slider .top span{font:12px var(--mono);color:var(--dim)}
.slider .ends{display:flex;justify-content:space-between;font-size:10.5px;
  color:var(--dim2);margin-top:4px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:var(--line2);cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--txt);border:3px solid var(--panel);box-shadow:0 1px 5px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;background:var(--txt);
  border:3px solid var(--panel);box-shadow:0 1px 5px rgba(0,0,0,.5);
}
.panel[data-side=A] input[type=range]::-webkit-slider-thumb{background:var(--home)}
.panel[data-side=B] input[type=range]::-webkit-slider-thumb{background:var(--away)}
.panel[data-side=A] input[type=range]::-moz-range-thumb{background:var(--home)}
.panel[data-side=B] input[type=range]::-moz-range-thumb{background:var(--away)}

/* switch */
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;background:var(--bg2);border:1px solid var(--line);border-radius:9px}
.switch .t{font-size:13.5px;font-weight:500}
.switch .t small{display:block;font-size:11px;color:var(--dim2);font-weight:400;margin-top:2px}
.tog{width:44px;height:25px;border-radius:13px;background:var(--line2);
  position:relative;flex:none;transition:.18s}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:var(--txt);transition:.18s}
.tog.on{background:var(--home)}
.tog.on::after{transform:translateX(19px);background:#06210f}

/* ---- Saha ---- */
.pitch{
  position:relative;width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#143d26,#0f2e1d);border:1px solid var(--line);
  margin-bottom:14px;
}
.pitch svg{position:absolute;inset:0;width:100%;height:100%}
.pl{position:absolute;transform:translate(-50%,-50%);text-align:center;width:52px}
.pl .n{
  width:29px;height:29px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:600 11.5px var(--mono);color:#06210f;
  border:1.5px solid rgba(255,255,255,.5);box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.panel[data-side=A] .pl .n{background:var(--home)}
.panel[data-side=B] .pl .n{background:var(--away);color:#04203c}
.pl .l{font-size:9px;color:rgba(255,255,255,.82);margin-top:2px;
  text-shadow:0 1px 3px #000;letter-spacing:.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ---- Tikla-takas ----
   Secim halkasi OUTLINE ile ciziliyor, box-shadow ile degil: uyum halkalari
   (.pl .n.fit-good / .fit-bad) box-shadow kullaniyor, dosyada daha asagida
   duruyor ve ayni ozgullukte, yani secim golgesini eziyordu. Outline ayri bir
   ozellik oldugu icin catisma kalmiyor. */
.pl{cursor:pointer}
.pl.sel .n{outline:3px solid var(--warn);outline-offset:2px}
.pl.sel .l{color:var(--warn)}

/* Tablolarda tutamak satirin kendisi; form alanlarina yapilan tiklamalar
   disarida birakiliyor (bkz. app.js click dinleyicisi). Mevki hucresi
   dugme gorunumunde ki nereye basilacagi bakinca anlasilsin. */
.sq .row[data-pick]{cursor:pointer}
.sq .row[data-pick] .pos{border:1px solid var(--line2);border-radius:5px;
  padding:2px 3px;text-align:center;transition:border-color .12s,color .12s}
.sq .row[data-pick]:hover .pos{border-color:var(--warn);color:var(--warn)}
.sq .row.sel{background:rgba(245,197,66,.13);box-shadow:inset 3px 0 0 var(--warn)}
.sq .row.sel .pos{border-color:var(--warn);color:var(--warn)}

/* Bir oyuncu secilince hedefler kendini belli ediyor: ikinci tiklamanin
   nereye yapilacagi tarif edilmeden gorunur olsun. */
.panel.picking .pl:not(.sel) .n{outline:1px dashed rgba(245,197,66,.6);outline-offset:2px}
.panel.picking .sq .row[data-pick]:not(.sel) .pos{border-style:dashed;
  border-color:rgba(245,197,66,.6)}
.hint.swaphint{margin:6px 0 0;text-align:center}

/* ---- Kadro ---- */
details.squad{border:1px solid var(--line);border-radius:9px;background:var(--bg2)}
details.squad summary{padding:11px 13px;cursor:pointer;font-size:13px;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;align-items:center}
details.squad summary::-webkit-details-marker{display:none}
details.squad summary::after{content:'▾';color:var(--dim2);font-size:11px}
details.squad[open] summary::after{content:'▴'}
.sq{padding:0 13px 13px}
.sq .row{display:flex;align-items:center;gap:9px;padding:5px 0;
  border-top:1px solid var(--line)}
.sq .pos{font:600 10px var(--mono);width:34px;color:var(--dim2);flex:none}
/* Adlar OSM kadro ekranındaki gibi büyük harf görünür. Kutudaki değer odak
   kaybında da büyük harfe çevrilir (bkz. change dinleyicisi), yazarken imleç
   kaçmasın diye görünüm CSS'ten. */
.sq .nm,.shotrow .nmcell .nm{text-transform:uppercase}
.sq .nm{flex:1;background:transparent;border:0;color:var(--txt);font-size:13px;
  min-width:0;padding:2px}
.sq .rt{width:52px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt);border-radius:6px;padding:4px;text-align:center;
  font:600 12.5px var(--mono);flex:none}

/* ---- Aksiyon ---- */
.action{display:flex;justify-content:center;align-items:center;gap:14px;
  margin:26px 0;flex-wrap:wrap}

/* ---- Sonuçlar ---- */
#result{margin-top:26px;display:none}
#result.on{display:block;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.score{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
}
.score .t{font-size:19px;font-weight:700;line-height:1.25}
.score .t.r{text-align:right}
.score .t small{display:block;font-size:11.5px;color:var(--dim2);font-weight:500;margin-top:4px}
.score .nums{font:800 46px/1 var(--mono);letter-spacing:-2px;white-space:nowrap;text-align:center}
.score .nums .sep{color:var(--dim2);margin:0 9px;font-weight:400}
.score .ht{text-align:center;font-size:11px;color:var(--dim2);margin-top:8px;letter-spacing:.5px}
@media(max-width:620px){
  .score{grid-template-columns:1fr;text-align:center;gap:12px}
  .score .t.r{text-align:center}
  .score .nums{font-size:40px}
}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card > h3{font-size:12px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim);padding:13px 17px;border-bottom:1px solid var(--line);
  background:var(--panel2)}
.card .in{padding:15px 17px}

/* olay akışı */
.tl{max-height:390px;overflow-y:auto}
.tl .ev{display:flex;align-items:flex-start;gap:11px;padding:9px 17px;
  border-bottom:1px solid rgba(38,50,63,.5);font-size:13.5px}
.tl .ev:last-child{border-bottom:0}
.tl .ev .m{font:600 12px var(--mono);color:var(--dim);width:36px;flex:none;padding-top:1px}
.tl .ev .ic{width:19px;flex:none;text-align:center;font-size:13px;padding-top:1px}
.tl .ev .tx{flex:1;min-width:0}
.tl .ev .tx b{font-weight:600}
.tl .ev .tx small{display:block;color:var(--dim2);font-size:11.5px;margin-top:1px}
.tl .ev.A{border-left:2px solid var(--home)}
.tl .ev.B{border-left:2px solid var(--away)}
.tl .ev .sc{font:700 12px var(--mono);color:var(--dim);flex:none;padding-top:1px}
.yc{display:inline-block;width:9px;height:13px;border-radius:1.5px;background:var(--warn);
  vertical-align:-2px}
.rc{display:inline-block;width:9px;height:13px;border-radius:1.5px;background:var(--bad);
  vertical-align:-2px}
.half{padding:7px 17px;background:var(--bg2);font-size:10.5px;letter-spacing:1px;
  color:var(--dim2);font-weight:700;border-bottom:1px solid var(--line)}

/* istatistik barları */
.st{margin-bottom:13px}
.st .lab{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;margin-bottom:5px}
.st .lab .c{color:var(--dim2);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.st .lab b{font:600 13px var(--mono)}
.st .bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.st .bar i{display:block;transition:width .5s ease}
.st .bar .a{background:var(--home)}
.st .bar .b{background:var(--away)}

/* analiz */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.lines .lb{background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:10px;text-align:center}
.lines .lb .k{font-size:10px;letter-spacing:1px;color:var(--dim2);font-weight:700}
.lines .lb .v{font:700 17px var(--mono);margin-top:3px}
.note{display:flex;gap:9px;padding:9px 11px;border-radius:8px;font-size:12.5px;
  line-height:1.45;margin-bottom:7px;background:var(--bg2);border-left:2px solid var(--line2)}
.note.good{border-left-color:var(--good);background:rgba(61,220,132,.06)}
.note.bad{border-left-color:var(--bad);background:rgba(242,85,90,.06)}
.note .s{flex:none;font-weight:700}
.subh{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--dim2);
  font-weight:700;margin:15px 0 9px}
.subh:first-child{margin-top:0}

/* motm + oyuncu tablosu */
.motm{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:10px;
  background:linear-gradient(135deg,rgba(245,197,66,.13),transparent);
  border:1px solid rgba(245,197,66,.28);margin-bottom:15px}
.motm .med{font-size:26px;flex:none}
.motm .nm{font-weight:700;font-size:15px}
.motm .dt{font-size:11.5px;color:var(--dim);margin-top:2px}
.motm .rt{margin-left:auto;font:800 21px var(--mono);color:var(--warn);flex:none}
.ptwrap{overflow-x:auto}
table.pt{width:100%;min-width:300px;border-collapse:collapse;font-size:12.5px}
table.pt th{text-align:left;font-size:10px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--dim2);padding:6px 5px;border-bottom:1px solid var(--line);font-weight:700}
table.pt td{padding:6px 5px;border-bottom:1px solid rgba(38,50,63,.45)}
table.pt td.n{font:600 11px var(--mono);color:var(--dim2)}
table.pt td.r{text-align:right;font:600 12px var(--mono)}
table.pt tr.off{opacity:.45}
.scr{display:flex;gap:3px;align-items:center}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg2);border-radius:8px;
  border:1px solid var(--line);margin-bottom:13px}
.tabs button{flex:1;padding:6px;border-radius:5px;font-size:12.5px;color:var(--dim)}
.tabs button.on{background:var(--panel2);color:var(--txt);font-weight:600}
.empty{color:var(--dim2);font-size:12.5px;text-align:center;padding:16px}

/* ===== Mevki uyumu ===== */
.pl{width:58px}
.pl .n{background:#121a24;color:#fff;border:2px solid rgba(255,255,255,.22);
  width:30px;height:30px}
.panel[data-side=A] .pl .n{background:#121a24;color:var(--home)}
.panel[data-side=B] .pl .n{background:#121a24;color:var(--away)}
.pl .n.fit-good{border-color:var(--good);box-shadow:0 0 10px rgba(61,220,132,.55),0 2px 6px rgba(0,0,0,.45)}
.pl .n.fit-bad{border-color:var(--bad);box-shadow:0 0 10px rgba(242,85,90,.55),0 2px 6px rgba(0,0,0,.45)}
.pl .p{font:700 8.5px var(--mono);letter-spacing:.3px;color:var(--dim);margin-top:1px;
  text-shadow:0 1px 3px #000}
.pl .p.fit-good{color:var(--good)}
.pl .p.fit-bad{color:var(--bad)}

.legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  font-size:10.5px;color:var(--dim2);margin:-6px 0 14px}
.legend span{display:flex;align-items:center;gap:5px}
.legend b{font:600 10.5px var(--mono);color:var(--dim)}
.legend .rg{width:11px;height:11px;border-radius:50%;background:#121a24;
  border:2px solid rgba(255,255,255,.22);flex:none}
.legend .rg.good{border-color:var(--good)}
.legend .rg.bad{border-color:var(--bad)}

/* ===== Kadro tablosu ===== */
.sq .row{display:grid;grid-template-columns:38px 1fr 62px 46px 46px 52px;
  gap:6px;align-items:center;padding:5px 0;border-top:1px solid var(--line)}
.sq .row.hd{border-top:0;font:700 9.5px var(--mono);color:var(--dim2);
  letter-spacing:.5px;padding-bottom:6px}
.sq .row.hd span{background:none;border:0;padding:0;text-align:left}
.sq .row.hd .rt,.sq .row.hd .ov{text-align:center}
/* Sayı kutuları esnek satırdan kalma 52px genişlikle geliyordu; ızgarada yaş
   sütunu 36, HÜC/DEF 44 piksel, yani kutu komşusunun üstüne biniyordu.
   Genişliği sütun belirlesin. */
.sq .rt{width:100%;min-width:0}
/* Ok tuşları dar kutuda üç haneyi eziyor (255'e kadar değer var); sayı elle
   yazılıyor, mobilde de böyleydi. */
.sq input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sq input[type=number]::-webkit-outer-spin-button,
.sq input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sq .pos{font:700 9.5px var(--mono);color:var(--dim);text-align:center;
  padding:3px 2px;border-radius:4px;background:var(--panel2);border:1px solid var(--line2)}
.sq .pos.fit-good,td .pos.fit-good{color:var(--good);border-color:rgba(61,220,132,.45);
  background:rgba(61,220,132,.10)}
.sq .pos.fit-bad,td .pos.fit-bad{color:var(--bad);border-color:rgba(242,85,90,.45);
  background:rgba(242,85,90,.10)}
.sq .ps{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:6px;padding:3px 4px;font:600 11px var(--mono);cursor:pointer;
  appearance:none;text-align:center;background-image:none}
.sq .ov{font:700 12.5px var(--mono);text-align:center;position:relative}
.sq .ov i{display:block;font:600 8.5px var(--mono);font-style:normal;margin-top:-2px}
.sq .ov i.up{color:var(--good)} .sq .ov i.dn{color:var(--bad)}
.tag{font:600 9.5px var(--mono);padding:2px 6px;border-radius:4px;margin-left:5px}
.tag.good{background:rgba(61,220,132,.14);color:var(--good)}
.tag.bad{background:rgba(242,85,90,.14);color:var(--bad)}
details.squad summary span:last-child{display:flex;align-items:center}
table.pt td .pos{font:700 9.5px var(--mono);padding:2px 5px;border-radius:4px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--dim)}
table.pt small.np{font:600 9.5px var(--mono);color:var(--dim2);margin-left:6px}
table.pt small.np.fit-good{color:var(--good)}
table.pt small.np.fit-bad{color:var(--bad)}

/* ===== Maç kurulumu ===== */
.matchcard{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);margin-top:22px;padding:18px}
.matchcfg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:6px}
@media(max-width:760px){.matchcfg{grid-template-columns:1fr}}
.matchcfg .mc > label{display:block;font-size:11px;font-weight:600;letter-spacing:.7px;
  color:var(--dim2);text-transform:uppercase;margin-bottom:6px}
.matchcfg .seg button.on{background:var(--panel2);color:var(--home);font-weight:600}
.matchcfg .hint{text-align:center}
.sq .rt:disabled{opacity:.45;cursor:not-allowed}
.sq .ov i{font-size:9px}

/* ===== Yaş, kulübe, oyuncu değişikliği ===== */
.sq .row{grid-template-columns:34px 1fr 50px 42px 36px 44px 44px 40px}
.sq .rt.age{color:var(--dim)}
.sq .row.hd .ps{text-align:center}
.tl .ev .tx b.in{color:var(--good)}
.tl .ev .tx b.out{color:var(--bad);font-weight:500;margin-left:5px}
.sub-ic{color:var(--dim);font-size:14px}
table.pt small.mn{font:600 9.5px var(--mono);margin-left:6px}
table.pt small.mn.in{color:var(--good)}
table.pt small.mn.out{color:var(--bad)}
details.squad summary .tag{background:var(--panel2);color:var(--dim2);font-weight:600}

/* ===== Sakatlık şiddeti ===== */
.tl .ev .tx b.inj-hafif{color:var(--warn)}
.tl .ev .tx b.inj-orta{color:#ff9d4d}
.tl .ev .tx b.inj-agir{color:var(--bad)}
.scr .inj{font-size:11px;font-weight:700;letter-spacing:-.5px;white-space:nowrap}
.scr .inj-hafif{color:var(--warn)}
.scr .inj-orta{color:#ff9d4d}
.scr .inj-agir{color:var(--bad)}

/* ===== Hakem ===== */
.matchcfg .mc.wide{grid-column:1/-1}
.seg.ref button{display:flex;align-items:center;justify-content:center;gap:6px}
.seg.ref button i{width:9px;height:9px;border-radius:50%;flex:none;opacity:.55}
.seg.ref button[data-tone=green]  i{background:var(--home)}
.seg.ref button[data-tone=blue]   i{background:var(--away)}
.seg.ref button[data-tone=yellow] i{background:var(--warn)}
.seg.ref button[data-tone=orange] i{background:var(--hot)}
.seg.ref button[data-tone=red]    i{background:var(--bad)}
.seg.ref button.on i{opacity:1}
.seg.ref button.on[data-tone=green] {color:var(--home)}
.seg.ref button.on[data-tone=blue]  {color:var(--away)}
.seg.ref button.on[data-tone=yellow]{color:var(--warn)}
.seg.ref button.on[data-tone=orange]{color:var(--hot)}
.seg.ref button.on[data-tone=red]   {color:var(--bad)}
.ref-tag{margin-top:4px;font-weight:600;letter-spacing:.3px}
.ref-tag[data-tone=green] {color:var(--home)}
.ref-tag[data-tone=blue]  {color:var(--away)}
.ref-tag[data-tone=yellow]{color:var(--warn)}
.ref-tag[data-tone=orange]{color:var(--hot)}
.ref-tag[data-tone=red]   {color:var(--bad)}

/* Uyruk sütunu bayrak emojisi gösteriyor. Emoji fontu açıkça yazılmazsa bazı
   sistemlerde mono font devreye girip bayrağı iki harfe düşürüyor. Bayrağı
   olmayan ülkelerde (K. İrlanda) kısaltma metni çıkıyor, ona da yer kalsın
   diye punto çok büyütülmedi. */
.sq .ps.ctry{font-size:13px;line-height:1;letter-spacing:0;padding:2px 2px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--mono)}

/* ===== Kayıt kütüphanesi ===== */
.modal{position:fixed;inset:0;z-index:100;background:rgba(6,9,13,.72);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{width:100%;max-width:640px;max-height:82vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 17px;border-bottom:1px solid var(--line);background:var(--panel2);font-size:15px;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* min-height:0 olmadan esnek sütunda gövde küçülemez ve kendi kaydırması
   çalışmaz; eskiden kutunun overflow:hidden'ı bunu örtüyordu. */
.modal-body{overflow-y:auto;min-height:0;padding:8px 12px}
.modal-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 17px;border-top:1px solid var(--line);background:var(--bg2);
  border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.modal-foot .hint{flex:1;min-width:160px;margin:0}
.lib-row{display:grid;grid-template-columns:1fr 74px auto auto auto auto;gap:7px;align-items:center;
  padding:7px 5px;border-bottom:1px solid rgba(38,50,63,.55)}
.lib-row:last-child{border-bottom:0}
.lib-name{background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--txt);font-size:13.5px;padding:5px 7px;min-width:0}
.lib-name:hover{border-color:var(--line2)}
.lib-name:focus{border-color:var(--home);background:var(--bg2)}
.lib-meta{font:11px var(--mono);color:var(--dim2);text-align:right}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:6px}
.btn.sm.danger{color:var(--bad);border-color:rgba(242,85,90,.35)}
.btn.sm.danger:hover{background:rgba(242,85,90,.14);border-color:var(--bad)}
#libIO{width:100%;height:150px;background:var(--bg);border:0;border-top:1px solid var(--line);
  color:var(--dim);font:11px/1.45 var(--mono);padding:10px 14px;resize:vertical}
#libIO[hidden]{display:none}

/* ===== Dil seçimi ===== */
.seg.lang{padding:3px;gap:2px}
.seg.lang button{padding:6px 12px;font:600 12px var(--mono);flex:none}

/* ===== Mobil ===== */
@media(max-width:600px){
  .wrap{padding:0 11px}
  /* Kadro satırı iki satıra bölünür: üstte isim + OVR, altta mevki/uyruk/sayılar.
     Sekiz sütun 360px'e sığmıyordu; isim sütunu 0'a çöküyordu. */
  .sq .row{grid-template-columns:52px 1fr 46px 46px 46px;gap:5px 6px;padding:7px 0}
  .sq .row > :nth-child(1){grid-area:1/1/2/2}
  .sq .row > :nth-child(2){grid-area:1/2/2/5}
  .sq .row > :nth-child(8){grid-area:1/5/2/6}
  .sq .row > :nth-child(3){grid-area:2/1/3/2}
  .sq .row > :nth-child(4){grid-area:2/2/3/3}
  .sq .row > :nth-child(5){grid-area:2/3/3/4}
  .sq .row > :nth-child(6){grid-area:2/4/3/5}
  .sq .row > :nth-child(7){grid-area:2/5/3/6}
  .sq .row.hd{padding-bottom:7px}
  .sq .rt{text-align:center}
  table.pt{font-size:11.5px;min-width:0}
  table.pt th,table.pt td{padding:6px 2px}
  table.pt th{font-size:9px;letter-spacing:.2px}
  /* İsim hücresi tek satırda ad + mevki + değişiklik dakikası taşıyordu;
     dar ekranda mevkiyi alt satıra alınca sütun belirgin daralıyor. */
  table.pt td:nth-child(2) small.np{display:block;margin-left:0}
  /* Maç sonu tablosunda yaş sütunu dar ekranda taşırıyordu; en az gerekli olan o. */
  table.pt th:nth-child(3),table.pt td:nth-child(3){display:none}
  /* Kütüphane satırı: isim üstte, düğmeler altta sarmalanarak. Grid yerine flex,
     çünkü düğme metinleri dile göre uzuyor ve 320px'de sığmıyordu. */
  .lib-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .lib-name{flex:1 1 100%}
  .lib-meta{flex:1 1 100%;text-align:left}
  .lib-row > button{flex:0 0 auto}
  .lib-row .btn.sm{padding:5px 7px}
}

/* Dar telefonlarda dörtlü seçim şeritleri (stadyum, hakem, mücadele) tek sıraya
   sığmıyor ve kartı taşırıyordu; ikişerli iki sıraya bölünüyorlar. */
@media(max-width:380px){
  .seg{flex-wrap:wrap}
  .seg button{flex:1 1 calc(50% - 6px);min-width:0}
  /* Hakem beş tane: ikişerli sarınca sonuncusu tek başına ortada kalıyordu,
     tam genişliğe alındı. */
  .seg.ref button:last-child{flex-basis:100%}
}

/* ===== Alt bilgi / sorumluluk reddi ===== */
#foot{margin-top:38px;padding:22px 0 34px;border-top:1px solid var(--line);
  background:var(--bg2)}
#foot .wrap{max-width:820px}
#foot p{margin:0 0 9px;font-size:12px;line-height:1.6;color:var(--dim2)}
#foot p:last-child{margin-bottom:0}
#foot b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
#foot a{color:var(--home);text-decoration:none;border-bottom:1px solid rgba(61,220,132,.35)}
#foot a:hover{border-bottom-color:var(--home)}
.brand h1{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit}

/* ===== Maç paylaşımı ===== */
.sharebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 18px}
.sharebar .shareurl{flex:1;min-width:200px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--r2);color:var(--dim);padding:8px 11px;font:11.5px var(--mono)}
.sharebar .hint{margin:0}
.sharednote{background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.30);
  border-left-width:3px;border-radius:var(--r2);padding:11px 14px;margin-bottom:16px;
  font-size:12.5px;line-height:1.55;color:var(--dim)}

/* ===== Hakkında sayfası ===== */
a.brand{color:inherit;text-decoration:none}
.footlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px!important}
.prose{max-width:760px;padding-top:34px;padding-bottom:46px}
.prose h1{font-size:26px;letter-spacing:-.4px;margin:0 0 14px}
.prose h2{font-size:13px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dim);margin:28px 0 8px}
.prose p{margin:0;font-size:14px;line-height:1.75;color:var(--dim2)}
.prose .lead{font-size:15.5px;color:var(--txt)}
.prose a{color:var(--home);text-decoration:none;border-bottom:1px solid rgba(61,220,132,.35)}
.prose a:hover{border-bottom-color:var(--home)}
.prose .back{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:600px){
  .prose{padding-top:24px}
  .prose h1{font-size:22px}
}

/* ===== Ekran görüntüsünden kadro okuma ===== */
.modal-box.wide{max-width:820px}
/* Seçim satırı kaydırılan gövdenin DIŞINDA: bilgi baloncuğu overflow'a takılıp
   kırpılmasın. Gövde overflow-y:auto olduğu için içinden taşan hiçbir şey
   görünmüyordu. */
.shotbar{padding:10px 12px 0}
.shotpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shotpick label.btn{cursor:pointer}
/* Bilgi baloncuğu: hem fareyle üzerine gelince hem klavyeyle odaklanınca açılır */
.info{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  font:700 11px var(--mono);cursor:help;position:relative;flex:none}
.info:hover,.info:focus-visible{color:var(--txt);border-color:var(--home);outline:none}
.info .tip{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);
  width:300px;max-width:78vw;background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;padding:11px 12px;box-shadow:0 12px 32px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:120;text-align:left;cursor:auto}
.info:hover .tip,.info:focus-visible .tip,.info .tip:hover{opacity:1;visibility:visible}
/* İkon ile baloncuk arasındaki 10px'lik boşluk baloncuğun kendi alanı
   sayılıyor; yoksa fare aşağı inerken imleç ikisinin de dışında kalıp
   baloncuğu kapatıyordu (dokunmatikte sorun yok, orada odak tutuyor). */
.info .tip::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
.info .tip::after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-bottom-color:var(--line2)}
.info .tip b{display:block;font:700 11px var(--mono);letter-spacing:.4px;
  color:var(--dim2);text-transform:uppercase;margin-bottom:7px}
.info .tip ol{margin:8px 0 0;padding-left:17px;font-size:11.5px;line-height:1.55;color:var(--dim)}
.info .tip .excap{display:block;font-size:10.5px;color:var(--dim2);margin-top:5px;text-align:center}
.exsvg{width:100%;height:auto;border-radius:5px;border:1px solid var(--line2);display:block}
.exsvg .exh{font:700 7px var(--mono);fill:#fff}
.exsvg .ext rect{fill:#9aa4b2}
.exsvg .exc rect{fill:#7d8794} .exsvg .exf rect{fill:#4d7fc4}
.exsvg .exhl{fill:none;stroke:var(--good);stroke-width:2;rx:3}
/* Okunan satırlar */
.shotrow{display:grid;grid-template-columns:1fr 62px 54px 46px 52px 52px 30px;gap:7px;
  align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.shotrow.hd{border-top:0;font:700 9.5px var(--mono);color:var(--dim2);letter-spacing:.5px}
.shotrow.hd span{text-align:center} .shotrow.hd span:first-child{text-align:left}
.shotrow img{width:100%;height:22px;object-fit:contain;object-position:left center;
  background:var(--panel2);border-radius:4px;padding:2px 4px}
.shotrow select,.shotrow input{background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt);border-radius:6px;padding:3px 4px;font:600 11px var(--mono);
  text-align:center;width:100%;appearance:none}
.shotrow select.ctry{font-size:13px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--mono)}
.shotrow.warn{background:rgba(242,85,90,.07)}
.shotrow.warn select.bad,.shotrow.warn input.bad{border-color:rgba(242,85,90,.55);color:var(--bad)}
.shotrow button.drop{background:none;border:0;color:var(--dim2);cursor:pointer;font-size:14px;padding:0}
.shotrow button.drop:hover{color:var(--bad)}
.shotgrp{font:700 9.5px var(--mono);color:var(--dim2);letter-spacing:.5px;
  margin:12px 0 2px;padding-top:8px;border-top:1px solid var(--line2)}
#shotMsg .m{font-size:11.5px;padding:6px 9px;border-radius:6px;margin-bottom:6px;line-height:1.5}
#shotMsg .m.ok{background:rgba(61,220,132,.10);color:var(--good)}
#shotMsg .m.er{background:rgba(242,85,90,.10);color:var(--bad)}
#shotMsg .m.wr{background:rgba(240,180,60,.10);color:var(--warn)}
@media(max-width:620px){
  .shotrow{grid-template-columns:1fr 56px 46px 40px 46px 46px 26px;gap:5px}
  .info .tip{width:260px}
}
.info .tip .excap.note{text-align:left;margin-top:8px;line-height:1.5;color:var(--dim2)}
/* İsim hücresi: solda görüntüden kırpılan resim (kullanıcı kendi oyuncusunu
   tanısın), sağda okunan ad, düzeltilebilir. */
.shotrow .nmcell{display:flex;align-items:center;gap:7px;min-width:0}
.shotrow .nmcell img{width:96px;flex:none}
.shotrow input.nm{flex:1;min-width:0;text-align:left;font:600 12px var(--mono);letter-spacing:.2px}
.shotrow input.nm::placeholder{color:var(--dim2);font-weight:400}

/* ---------- CSP: satır içi stil yok ----------
   style-src'de 'unsafe-inline' kapalı olduğu için HTML metnine style=""
   yazılamıyor. Eskiden satır içi olan kurallar buraya taşındı; ölçüye bağlı
   olanlar (yüzde genişlik, saha üstündeki konum) data-w / data-xy ile
   taşınıp app.js -> applyMetrics içinde CSSOM üzerinden set ediliyor. */
.frow{display:flex;gap:8px}
.frow .grow{flex:1}
.lgrid{display:grid;gap:9px}
.hint.lbl{margin:0 0 4px}
.hint.foot{margin-top:12px}
details.squad.gap{margin-top:9px}
th.r{text-align:right}
.c-home{color:var(--home)} .c-away{color:var(--away)}
.c-good{color:var(--good)} .c-bad{color:var(--bad)}
.c-warn{color:var(--warn)} .c-dim{color:var(--dim2)}