:root{
  --bg: #0B1F17;
  --surface: #12291F;
  --surface-2: #17352A;
  --line: rgba(242,239,230,0.12);
  --ink: #F2EFE6;
  --ink-dim: rgba(242,239,230,0.58);
  --amber: #E8A33D;
  --amber-dim: rgba(232,163,61,0.16);
  --danger: #D6544B;
  --danger-dim: rgba(214,84,75,0.16);
  --good: #6FBF8B;
  --display: 'Oswald', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at top, rgba(232,163,61,0.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
  line-height:1.45;
}
::selection{background:var(--amber-dim);}
a{color:var(--amber);}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 80px;}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); margin:0 0 6px;
}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; letter-spacing:.01em;}
h1{font-size:clamp(28px,4vw,40px); text-transform:uppercase; letter-spacing:.03em;}
h2{font-size:22px; text-transform:uppercase; letter-spacing:.02em;}
h3{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim);}
p{color:var(--ink-dim); margin:6px 0 0;}
.top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:24px; flex-wrap:wrap;
}
.card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 22px; }
.card + .card{margin-top:16px;}
.grid2{display:grid; grid-template-columns:1.3fr 1fr; gap:16px;}
@media (max-width:820px){ .grid2{grid-template-columns:1fr;} }
button{
  font-family:var(--body); font-weight:600; font-size:14px;
  background:var(--amber); color:#1a1208; border:none; border-radius:7px;
  padding:10px 16px; cursor:pointer; transition:transform .12s ease, filter .12s ease;
}
button:hover{filter:brightness(1.08);}
button:active{transform:scale(.98);}
button.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
button.ghost:hover{border-color:var(--amber); color:var(--amber); filter:none;}
button.danger{background:var(--danger); color:#2a0d0a;}
button:disabled{opacity:.35; cursor:not-allowed;}
input,select{
  font-family:var(--body); font-size:14px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:9px 11px; width:100%;
}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--amber); outline-offset:1px;}
label{font-size:12px; color:var(--ink-dim); display:block; margin-bottom:4px; letter-spacing:.02em;}
.row{display:flex; gap:10px; align-items:center;}
.row.between{justify-content:space-between;}
.field{margin-bottom:14px;}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; border:1px solid var(--line); color:var(--ink-dim);
}
.pill.pos-GK{color:#E8A33D; border-color:rgba(232,163,61,.4);}
.pill.pos-DEF{color:#6FBF8B; border-color:rgba(111,191,139,.4);}
.pill.pos-MID{color:#7BB2E8; border-color:rgba(123,178,232,.4);}
.pill.pos-FWD{color:#E87B7B; border-color:rgba(232,123,123,.4);}
.scoreboard{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  background:#0A1A13; border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; text-align:center;
}
.scoreboard .big{ font-size:clamp(34px,7vw,54px); font-weight:600; letter-spacing:.03em; color:var(--amber); line-height:1; }
.scoreboard .big.low{color:var(--danger);}
.scoreboard .cap{font-size:12px; color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:8px;}
.list{list-style:none; margin:0; padding:0;}
.list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.list li:last-child{border-bottom:none;}
.team-order{display:flex; flex-direction:column; gap:8px;}
.team-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); font-size:13px;
}
.team-chip.active{border-color:var(--amber); background:var(--amber-dim);}
.muted{color:var(--ink-dim); font-size:13px;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--surface-2); border:1px solid var(--amber); color:var(--ink);
  padding:10px 18px; border-radius:8px; font-size:13px; z-index:50; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.tabs button{background:transparent; border:1px solid var(--line); color:var(--ink-dim); padding:7px 12px; font-size:12px;}
.tabs button.active{border-color:var(--amber); color:var(--amber); background:var(--amber-dim);}
.player-row{display:flex; align-items:center; justify-content:space-between; padding:8px 4px; border-bottom:1px solid var(--line);}
.player-row:last-child{border-bottom:none;}
.player-name{font-weight:600;}
.player-meta{font-size:12px; color:var(--ink-dim);}
.stack{display:flex; flex-direction:column; gap:10px;}
.badge-turn{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:20px;
  background:var(--amber-dim); color:var(--amber); font-family:var(--mono); font-size:12px; letter-spacing:.05em;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--amber); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}
.empty{ border:1px dashed var(--line); border-radius:10px; padding:30px 20px; text-align:center; color:var(--ink-dim); }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; }
::placeholder{color:rgba(242,239,230,0.35);}
@media (prefers-reduced-motion: reduce){ .dot{animation:none;} button{transition:none;} }