:root{
  --bg:#0b0e13; --bg2:#10151d; --card:#151c26; --card2:#1a2330;
  --line:#25313f; --ink:#f2f6f9; --muted:#8d99a6; --dim:#5c6875;
  --green:#35d07f; --gold:#ffb224; --red:#ff6b6b;
  --qb:#5aa7ff; --rb:#35d07f; --wr:#ffb224; --te:#b98cff; --k:#ff8fa3;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height:100vh; overflow-x:hidden;
}
.field-lines{
  position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(255,255,255,.025) 118px 120px),
    radial-gradient(1200px 500px at 50% -10%, rgba(53,208,127,.08), transparent 60%),
    radial-gradient(900px 400px at 85% 110%, rgba(255,178,36,.06), transparent 60%);
}
/* ---------- header ---------- */
.site-header{position:relative; z-index:2; padding:26px 16px 0; text-align:center}
.wordmark{
  font-weight:900; font-style:italic; letter-spacing:.06em;
  font-size:clamp(30px,7vw,46px); line-height:1;
}
.wordmark span{color:var(--gold)}
.wordmark::after{
  content:""; display:block; height:4px; width:120px; margin:10px auto 0;
  background:linear-gradient(90deg, transparent, var(--green), var(--gold), transparent);
  border-radius:2px;
}
.tagline{color:var(--muted); font-size:13px; margin-top:10px; letter-spacing:.12em; text-transform:uppercase}
.tabs{
  position:relative; display:flex; gap:4px; justify-content:center; margin:22px auto 0;
  max-width:520px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:5px;
}
.tab{
  flex:1; position:relative; z-index:1; background:none; border:0; color:var(--muted);
  font:inherit; font-weight:700; font-size:13.5px; padding:10px 4px; border-radius:10px;
  cursor:pointer; transition:color .25s;
}
.tab.active{color:#0b0e13}
.tab-glider{
  position:absolute; top:5px; bottom:5px; border-radius:10px; z-index:0;
  background:linear-gradient(135deg, var(--green), #28b06a);
  transition:left .3s cubic-bezier(.4,1.4,.4,1), width .3s cubic-bezier(.4,1.4,.4,1);
  box-shadow:0 4px 18px rgba(53,208,127,.35);
}
/* ---------- layout / panels ---------- */
main{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:22px 14px 60px}
.panel{display:none}
.panel.active{display:block; animation:panelIn .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes panelIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
/* ---------- controls ---------- */
.controls{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.controls input[type=text], .controls select{
  background:var(--bg2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.controls input[type=text]{flex:1; min-width:160px}
.controls input:focus, .controls select:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(53,208,127,.18)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  background:var(--bg2); border:1px solid var(--line); color:var(--muted); border-radius:999px;
  padding:8px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .2s;
}
.chip.active{background:var(--green); border-color:var(--green); color:#0b0e13}
/* ---------- player rows / grid ---------- */
.count{color:var(--dim); font-size:12.5px; margin:2px 2px 12px; letter-spacing:.04em}
.pgrid{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
.prow{
  display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; cursor:pointer;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  animation:rowIn .4s cubic-bezier(.2,.9,.3,1) both;
}
.prow:hover{transform:translateY(-2px); border-color:var(--green); box-shadow:0 8px 24px rgba(0,0,0,.35)}
@keyframes rowIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rank-badge{
  min-width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--line); font-weight:900; font-size:15px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.rank-badge.top{background:linear-gradient(135deg, rgba(255,178,36,.25), rgba(255,178,36,.08)); border-color:rgba(255,178,36,.5)}
.pinfo{flex:1; min-width:0}
.pname{font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pmeta{color:var(--muted); font-size:12px; margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.pos-tag{font-weight:900; font-size:11px; padding:2px 7px; border-radius:6px; color:#0b0e13}
.pos-QB{background:var(--qb)} .pos-RB{background:var(--rb)} .pos-WR{background:var(--wr)} .pos-TE{background:var(--te)} .pos-K{background:var(--k)}
.team-tag{display:inline-flex; align-items:center; gap:5px}
.team-dot{width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,.35)}
.ppts{text-align:right; flex-shrink:0}
.ppts b{font-size:16px; font-variant-numeric:tabular-nums}
.ppts small{display:block; color:var(--dim); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase}
.btn{
  background:var(--green); color:#0b0e13; border:0; border-radius:10px; padding:9px 14px;
  font:inherit; font-weight:800; font-size:13px; cursor:pointer; transition:filter .2s, transform .15s;
}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.97)}
.btn.ghost{background:var(--bg2); color:var(--ink); border:1px solid var(--line)}
.btn.gold{background:var(--gold)}
.btn.big{width:100%; padding:13px; font-size:15px; border-radius:12px}
/* ---------- draft ---------- */
.clock{
  position:relative; overflow:hidden; text-align:center; padding:18px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, var(--card2), var(--card));
}
.clock.live{border-color:var(--green); animation:clockPulse 1.6s ease-in-out infinite}
@keyframes clockPulse{0%,100%{box-shadow:0 0 0 0 rgba(53,208,127,.35)}50%{box-shadow:0 0 0 12px rgba(53,208,127,0)}}
.clock .label{color:var(--muted); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase}
.clock .main{font-size:24px; font-weight:900; margin-top:6px}
.clock .sub{color:var(--gold); font-size:13px; font-weight:700; margin-top:4px}
.draft-cols{display:grid; gap:14px}
@media(min-width:860px){.draft-cols{grid-template-columns:1.5fr 1fr}}
.feed{max-height:520px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px}
.feed-item{
  display:flex; gap:10px; align-items:center; background:var(--bg2); border:1px solid var(--line);
  border-radius:12px; padding:9px 12px; font-size:13px;
  animation:pickIn .45s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes pickIn{from{opacity:0; transform:translateX(26px) scale(.96)}to{opacity:1; transform:none}}
.feed-item.me{border-color:rgba(53,208,127,.5); background:rgba(53,208,127,.06)}
.feed-item .num{color:var(--dim); font-weight:800; min-width:26px; font-variant-numeric:tabular-nums}
.feed-item .who{flex:1}
.feed-item .by{color:var(--dim); font-size:11.5px}
/* ---------- lineup ---------- */
.slotrow{
  display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:11px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .2s, transform .15s;
}
.slotrow:hover{border-color:var(--gold); transform:translateX(3px)}
.slot-label{min-width:52px; font-weight:900; font-size:12px; color:#0b0e13; text-align:center; padding:5px 8px; border-radius:8px; background:var(--gold)}
.slot-label.bench{background:var(--bg2); color:var(--muted); border:1px solid var(--line)}
.slot-empty{color:var(--dim); font-style:italic; font-size:13.5px}
/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center;
  background:rgba(5,8,12,.72); backdrop-filter:blur(6px); padding:0;
}
@media(min-width:640px){.modal-overlay{align-items:center; padding:24px}}
.modal-overlay.open{display:flex; animation:fadeIn .25s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:20px 20px 0 0; padding:22px 20px 28px;
  animation:cardUp .35s cubic-bezier(.2,1.1,.3,1) both;
}
@media(min-width:640px){.modal-card{border-radius:20px}}
@keyframes cardUp{from{opacity:0; transform:translateY(46px) scale(.97)}to{opacity:1; transform:none}}
.pc-head{display:flex; gap:14px; align-items:center; margin-bottom:6px}
.pc-rank{
  width:58px; height:58px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,178,36,.22), rgba(255,178,36,.05)); border:1px solid rgba(255,178,36,.45);
  font-weight:900; color:var(--gold); flex-shrink:0;
}
.pc-rank small{font-size:9px; color:var(--muted); letter-spacing:.08em}
.pc-name{font-size:21px; font-weight:900; line-height:1.15}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.statcell{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center}
.statcell b{font-size:17px; font-variant-numeric:tabular-nums}
.statcell small{display:block; color:var(--dim); font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px}
.no-stats{color:var(--muted); font-size:13px; text-align:center; padding:16px; background:var(--bg2); border-radius:12px; margin-top:14px}
.modal-close{margin-top:18px}
/* ---------- setup ---------- */
.setup{max-width:460px; margin:24px auto 0; text-align:center}
.setup h2{font-size:22px; font-weight:900; margin-bottom:6px}
.setup p{color:var(--muted); font-size:13.5px; margin-bottom:18px}
.setup label{display:block; text-align:left; font-size:12px; color:var(--muted); font-weight:700; margin:14px 0 6px; letter-spacing:.05em; text-transform:uppercase}
.setup input[type=text], .setup select{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font:inherit; font-size:14px; outline:none;
}
/* ---------- scoring table ---------- */
.score-table{width:100%; border-collapse:collapse; font-size:14px}
.score-table td{padding:10px 6px; border-bottom:1px solid var(--line)}
.score-table td:last-child{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--gold)}
.note{font-size:12.5px; color:var(--muted); background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:14px; line-height:1.55}
.note b{color:var(--ink)}
h3.sec{font-size:15px; font-weight:900; margin:20px 0 10px; letter-spacing:.03em}
.empty{color:var(--dim); text-align:center; padding:26px 10px; font-size:14px}
::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} }

.freeze *, .freeze *::before, .freeze *::after{animation:none !important; transition:none !important}

.site-footer{position:relative; z-index:1; text-align:center; color:var(--dim); font-size:12px; line-height:1.6; padding:18px 20px 34px; max-width:760px; margin:0 auto}