: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; --gold:#b8860b;
}
: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);
  --gold:#ffd84d;
}
@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);
    --gold:#ffd84d;
  }
}

*{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)}

/* ---------- 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)}
.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):not(.on){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}

/* 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}
}

/* --- kabine masası --- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk { border: 1px solid var(--line); border-radius: 10px; padding: 10px;
      background: var(--panel); min-height: 64px; cursor: default; position: relative; }
.mk .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
           color: var(--muted); text-transform: uppercase; }
.mk .kim { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.mk .pts { position: absolute; right: 10px; bottom: 8px; font-weight: 900;
           font-size: 14px; color: var(--gold, #b8860b); }
.mk.cb { grid-column: 1 / -1; min-height: 76px; border-width: 2px; }
.mk.cb .lbl { font-size: 12px; }
.mk.cb .kim { font-size: 17px; }
.mk.open { border-color: #d8a013; box-shadow: 0 0 0 2px rgba(216,160,19,.25); cursor: pointer; }
.mk.filled { border-color: var(--line); }
.mk.filled .kim { color: var(--ink); }
.mk.empty .kim { color: var(--muted); font-weight: 500; }
.donem-card { display: flex; gap: 12px; align-items: center; padding: 10px;
              border: 1px solid var(--line); border-radius: 10px; }
.donem-card .yil { font-weight: 900; font-size: 22px; min-width: 74px; text-align: center;
                   border-right: 1px solid var(--line); padding-right: 10px; }
.fz { display: flex; gap: 10px; align-items: baseline; padding: 8px 0;
      border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fz .no { font-weight: 900; color: var(--muted); min-width: 22px; }
.fz .dr { font-weight: 800; min-width: 96px; }
.fz.d0 .dr { color: #c0392b; } .fz.d1 .dr { color: #d8a013; }
.fz.d2 .dr { color: #2e8b57; } .fz.d3 .dr { color: #1f7a3d; }