:root{
  --bg:#f2efe8; --panel:#fffdf8; --ink:#15120f; --muted:#7a736a;
  --line:#ddd6c9; --accent:#12100e; --accent-ink:#fff;
  --red:#c8202a; --green:#2f7d4f; --amber:#c8871a;
  --pitch1:#3f7a48; --pitch2:#397041; --shadow:0 2px 0 rgba(0,0,0,.10);
  --radius:12px;
}
:root[data-theme="dark"]{
  --bg:#121110; --panel:#1c1a17; --ink:#f2efe8; --muted:#9a938a;
  --line:#332f2a; --accent:#f2efe8; --accent-ink:#15120f;
  --red:#ef4b52; --green:#4fbf82; --amber:#e0a63a;
  --pitch1:#2b5a33; --pitch2:#26512e; --shadow:0 2px 0 rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --panel:#1c1a17; --ink:#f2efe8; --muted:#9a938a;
    --line:#332f2a; --accent:#f2efe8; --accent-ink:#15120f;
    --red:#ef4b52; --green:#4fbf82; --amber:#e0a63a;
    --pitch1:#2b5a33; --pitch2:#26512e; --shadow:0 2px 0 rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font-family:inherit;font-size:inherit;cursor:pointer}

.wrap{max-width:1240px;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
header{border-bottom:2px solid var(--ink);background:var(--panel)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:19px;text-decoration:none}
.crest{width:26px;height:26px;border-radius:5px;overflow:hidden;display:block;flex:none;border:1px solid var(--ink)}
.crest i{display:block;height:100%;width:100%;
  background:repeating-linear-gradient(90deg,#111 0 4px,#fff 4px 8px)}
.hd .sp{color:var(--muted);font-weight:600}
.hd-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* canlı online sayacı */
.online{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  font-weight:600;padding:5px 11px;border:1.5px solid var(--line);border-radius:999px;white-space:nowrap}
.online b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.online .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;animation:live 2.2s infinite}
@keyframes live{
  0%{box-shadow:0 0 0 0 rgba(47,125,79,.55)}
  70%{box-shadow:0 0 0 7px rgba(47,125,79,0)}
  100%{box-shadow:0 0 0 0 rgba(47,125,79,0)}
}
@media (prefers-reduced-motion: reduce){ .online .dot{animation:none} }
@media (max-width:420px){ .online{font-size:11.5px;padding:4px 9px} }
.btn{border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);
  padding:7px 13px;border-radius:9px;font-weight:700;box-shadow:var(--shadow);
  transition:transform .06s ease}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.solid{background:var(--accent);color:var(--accent-ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:52px 0}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
h1.big{font-size:clamp(38px,6vw,66px);line-height:.98;margin:14px 0 18px;letter-spacing:-.035em;font-weight:900}
h1.big em{font-style:normal;display:block;color:var(--red)}
.lede{font-size:17px;color:var(--muted);max-width:46ch;margin-bottom:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn.big{padding:15px 28px;font-size:16px;border-radius:12px;font-weight:800;letter-spacing:.01em}

.hero-card{background:var(--panel);border:2px solid var(--ink);border-radius:18px;padding:14px;box-shadow:6px 6px 0 var(--ink)}
.mini-pitch{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:3/4}

/* ---------- game layout ---------- */
.game{display:grid;grid-template-columns:308px minmax(0,1fr) 268px;gap:22px;padding:20px 0 60px;align-items:start}
.panel{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px}
.panel h3{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.opt{border:1.5px solid var(--line);background:transparent;color:var(--ink);
  padding:7px 4px;border-radius:8px;font-size:12px;font-weight:700;text-align:center}
.opt.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.opts.c3{grid-template-columns:repeat(3,1fr)}

.dice-box{margin-top:6px}
.dice-hint{font-size:13px;color:var(--muted);margin:10px 0 10px;line-height:1.45}
.btn.dice{width:100%;padding:16px;font-size:18px;font-weight:900;letter-spacing:.05em}

.season-card{border:2px solid var(--ink);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center;background:var(--panel);box-shadow:4px 4px 0 var(--ink)}
.jersey{width:38px;height:44px;flex:none;border-radius:4px;border:1.5px solid var(--ink);
  background:repeating-linear-gradient(90deg,#141414 0 5px,#fafafa 5px 10px)}
.season-card b{display:block;font-size:16px;letter-spacing:-.02em;line-height:1.1}
.season-card span{font-size:12px;color:var(--muted)}
.season-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4}

.plist{margin-top:12px;max-height:52vh;overflow:auto;border-top:1px solid var(--line)}
.prow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 6px;
  background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink)}
.prow:hover:not(:disabled){background:rgba(200,32,42,.08)}
.prow.on{background:var(--accent);color:var(--accent-ink)}
.prow:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.prow .no{font-size:11px;color:var(--muted);width:26px;flex:none;font-variant-numeric:tabular-nums}
.prow.on .no,.prow.on .pos{color:var(--accent-ink);opacity:.75}
.prow .nm{flex:1;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.prow .pos{font-size:10px;color:var(--muted);letter-spacing:.06em;font-weight:700}
.prow .rt{font-weight:900;font-size:15px;width:28px;text-align:right;font-variant-numeric:tabular-nums}

/* pitch */
.pitch-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.pitch{position:relative;aspect-ratio:68/100;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);max-width:440px;margin:0 auto}
.turf{position:absolute;inset:0;background:repeating-linear-gradient(180deg,var(--pitch1) 0 9%,var(--pitch2) 9% 18%)}
.lines{position:absolute;inset:0}
.lines div{position:absolute;border:2px solid rgba(255,255,255,.30)}
.slot{position:absolute;transform:translate(-50%,-50%);width:58px;text-align:center;cursor:default}
.slot .disc{width:38px;height:38px;margin:0 auto;border-radius:50%;
  border:2px dashed rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:rgba(255,255,255,.85);background:rgba(0,0,0,.14)}
.slot.open .disc{border-style:solid;border-color:#ffe14d;background:rgba(255,225,77,.25);
  animation:pulse 1.1s infinite;cursor:pointer}
.slot.filled .disc{border:2px solid #fff;border-style:solid;
  background:repeating-linear-gradient(90deg,#141414 0 4px,#fafafa 4px 8px);color:transparent}
.slot .nmx{font-size:9.5px;font-weight:800;color:#fff;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.8);
  line-height:1.1;letter-spacing:-.01em}
.slot .rtx{font-size:9px;font-weight:800;color:#ffe14d;text-shadow:0 1px 2px rgba(0,0,0,.8)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* squad col */
.sq{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.sq .c{color:var(--muted);font-weight:700;font-size:10.5px;letter-spacing:.06em;width:34px}
.sq .v{flex:1;text-align:right;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meters{margin-bottom:10px}
.meter{margin-bottom:7px}
.meter i{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;font-style:normal}
.meter .bar{height:7px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:3px}
.meter .bar b{display:block;height:100%;background:var(--ink);border-radius:4px;transition:width .35s ease}

/* league */
.lg-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wk{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:6px 4px;border-bottom:1.5px solid var(--line);font-weight:700}
table.tbl td{padding:6px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.tbl td.tn{font-weight:600;letter-spacing:-.01em}
table.tbl tr.me td{background:rgba(200,32,42,.09);font-weight:800}
.pos-tag{display:inline-block;width:20px;font-weight:800;color:var(--muted)}
.zone-ucl{box-shadow:inset 3px 0 0 var(--green)}
.zone-rel{box-shadow:inset 3px 0 0 var(--red)}
.frm{display:inline-flex;gap:2px}
.frm b{width:14px;height:14px;border-radius:3px;font-size:9px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800}
.frm b.G{background:var(--green)} .frm b.B{background:var(--amber)} .frm b.M{background:var(--red)}

.fx{display:flex;justify-content:space-between;align-items:center;padding:7px 8px;border-bottom:1px solid var(--line);font-size:13px}
.fx.mine{background:rgba(200,32,42,.08);font-weight:700;border-radius:6px}
.fx .sc{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}

/* sezon sonu bandı */
.done{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.done .rank{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.done .rank.champ{color:#ffd84d}
.done .sub{font-size:14px;opacity:.72;margin-top:4px}
.done .dstats{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.done .dstat i{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;opacity:.6;font-weight:700}
.done .dstat b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.done .hint{width:100%;font-size:12.5px;opacity:.62;border-top:1px solid rgba(128,128,128,.35);padding-top:10px}

/* result card */
.card-out{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0 60px}
canvas#card{max-width:min(100%,420px);height:auto;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}

footer{border-top:1.5px solid var(--line);padding:18px 0 30px;font-size:12px;color:var(--muted);text-align:center}
footer a{color:var(--muted)}
.legal{max-width:60ch;margin:8px auto 0;line-height:1.5}

.howto{max-width:760px;margin:0 auto;padding:36px 0 60px}
.howto h2{font-size:32px;letter-spacing:-.03em;margin:0 0 6px}
.step{border-left:2px solid var(--ink);padding:0 0 22px 18px;position:relative;margin-left:12px}
.step b{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.02em}
.step p{margin:0 0 6px;color:var(--muted);font-size:14px}
.step ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px}
.step:before{content:attr(data-n);position:absolute;left:-14px;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;display:flex;
  align-items:center;justify-content:center}

.hide{display:none !important}
.scr{overflow-x:auto}

@media (max-width:1000px){
  .game{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .hero-card{max-width:340px}
  .two{grid-template-columns:1fr}
  .plist{max-height:none}
  .pitch{max-width:460px;margin:0 auto}
}