/* The Fellas Games — page styles. Tokens + base utilities live in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
a:hover { color: #9db1ff; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px 64px; display: flex; flex-direction: column; gap: 28px; }
.wrap.narrow { max-width: 760px; }
.row { display: flex; gap: 12px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.muted { color: var(--muted); }
.wrap-flex { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.center { text-align: center; }
.hide { display: none !important; }
.gold-t { color: var(--gold); }
.accent-t { color: var(--accent-text); }
.rad-t { color: var(--radiant); }
.dire-t { color: var(--dire-text); }
.pen-t { color: #ff8f92; }
.spoon-t { color: var(--spoon); }
h2.d { font-size: 26px; }

/* ------------------------------------------------ header / nav */
.top { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--border); }
.brand { color: var(--text); text-decoration: none; font-size: 22px; }
.brand:hover { color: var(--text); }
.brand span { color: var(--accent); }
.top nav { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px 4px; }
.top nav a:hover, .top nav a.on { color: var(--text); }
.top .gamecount { display: none; }
.me-av { text-decoration: none; }

.tabbar { display: none; }

/* ------------------------------------------------ avatars, chips, buttons */
.av { width: 40px; height: 40px; font-size: 13px; text-decoration: none; }
.av.s { width: 28px; height: 28px; font-size: 10px; }
.av.m32 { width: 32px; height: 32px; font-size: 11px; }
.av.l { width: 56px; height: 56px; font-size: 18px; }
.ref { border-radius: 50%; padding: 4px; flex: none; }
.ref > div { width: 100%; height: 100%; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--text); }
.chip.g { background: var(--border); color: var(--text); }
.mv-up { background: var(--tint-accent); color: var(--accent-text); }
.mv-dn { background: rgba(255,90,95,.12); color: #ff8f92; }
.mv-eq { background: var(--border); color: var(--muted); }
.tag-PENALTY { background: rgba(255,90,95,.14); color: #ff8f92; }
.tag-BONUS { background: var(--tint-gold); color: var(--gold); }
.tag-SCHEDULE { background: var(--tint-accent); color: var(--accent-text); }
.tag-RULING { background: var(--border); color: var(--text); }
.tag-RESULT { background: var(--tint-radiant); color: var(--radiant); }

.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       min-height: 48px; padding: 0 16px; border-radius: 14px; font-weight: 900; font-size: 15px; background: var(--border); color: var(--text);
       transition: transform .1s; text-align: center; text-decoration: none; }
.btn:hover { color: var(--text); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.light { background: var(--text); color: var(--on-fill); }
.btn.gold { background: var(--gold); color: var(--on-fill); }
.btn.acc { background: var(--accent); color: var(--on-fill); }
.btn.pen { background: #ff8f92; color: var(--on-fill); }
.btn.small { min-height: 40px; font-size: 13px; padding: 0 12px; border-radius: 12px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { background: var(--muted); color: var(--on-fill); cursor: not-allowed; }
.linkbtn { all: unset; cursor: pointer; color: var(--accent); font-weight: 800; font-size: 13px; }
.linkbtn.danger { color: #ff8f92; }

/* ------------------------------------------------ live bug */
.live.big { font-size: 16px; padding: 8px 16px; }

/* ------------------------------------------------ hero intro */
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.intro h1 { font-size: clamp(48px, 7vw, 96px); }
.stat-box { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat-box .m { font-size: 30px; font-weight: 700; }

/* ------------------------------------------------ now playing */
.np { overflow: hidden; border-color: #3a3320; box-shadow: 0 0 0 1px rgba(255,194,61,.35), 0 30px 80px rgba(0,0,0,.5); display: block; color: var(--text); text-decoration: none; }
.np:hover { color: var(--text); }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border); }
.np-title { font-weight: 900; font-size: 20px; }
.np-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; background: #11141c; font-size: 14px; color: var(--muted); }
.np-foot a, .np-foot .go { font-weight: 800; text-decoration: none; color: var(--accent); }
.np-ffa { padding: 28px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(120deg, rgba(255,194,61,.08), transparent 60%); }
.np-ffa .d { font-size: clamp(36px, 5vw, 64px); }

.vs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.vs .side { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.vs .side.a { background: linear-gradient(90deg, rgba(61,220,132,.2), rgba(61,220,132,.04)); }
.vs .side.b { background: linear-gradient(270deg, rgba(255,90,95,.2), rgba(255,90,95,.04)); align-items: flex-end; text-align: right; }
.vs .tname { font-size: clamp(28px, 3.4vw, 44px); }
.vs .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; background: var(--bg); transform: skewX(var(--vs-skew)); margin: 0 -14px; z-index: 1; }
.vs .mid > div { transform: skewX(14deg); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vs .score { font-size: 64px; font-weight: 800; line-height: 1; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.side.b .pills { justify-content: flex-end; }
.pill { display: flex; align-items: center; gap: 8px; background: rgba(11,13,18,.5); border-radius: 999px; padding: 4px 12px 4px 4px; font-weight: 800; font-size: 14px; color: var(--text); text-decoration: none; }
.pill:hover { color: var(--text); }

/* phone stacked version of the matchup */
.vs-stack { display: none; flex-direction: column; }
.vs-stack .s { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.vs-stack .s.a { background: linear-gradient(90deg, rgba(61,220,132,.22), rgba(61,220,132,.04)); }
.vs-stack .s.b { background: linear-gradient(90deg, rgba(255,90,95,.22), rgba(255,90,95,.04)); }
.vs-stack .stackav { display: flex; }
.vs-stack .stackav .av { margin-right: -6px; box-shadow: 0 0 0 2px #16211c; }
.vs-stack .s.b .stackav .av { box-shadow: 0 0 0 2px #221619; }
.vs-stack .knot { display: flex; justify-content: center; margin: -11px 0; position: relative; z-index: 1; }
.vs-stack .knot span { background: var(--bg); padding: 4px 12px; transform: skewX(var(--vs-skew)); font-size: 16px; }
.vs-stack .big { font-size: 44px; }

/* ------------------------------------------------ kickoff countdown */
.kick { position: relative; overflow: hidden; border-color: #2e3a66; box-shadow: 0 0 0 1px rgba(108,140,255,.25), 0 30px 80px rgba(0,0,0,.5); }
.kick:hover { transform: none; box-shadow: 0 0 0 1px rgba(108,140,255,.25), 0 30px 80px rgba(0,0,0,.5); }
.kick-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, rgba(108,140,255,.2), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }
.kick-in { position: relative; padding: 36px 28px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.kick-title { font-size: clamp(40px, 7vw, 88px); }
.kick-live { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kick-tiles { display: flex; align-items: flex-start; gap: clamp(6px, 1.5vw, 16px); }
.kick-tile { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 10px 12px; min-width: clamp(70px, 12vw, 140px);
             display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: inset 0 -40px 40px -40px rgba(108,140,255,.25); }
.kick-tile .num { font-size: clamp(40px, 8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kick-tile .num.tick { animation: tickIn .35s ease-out; }
.kick-tile:last-child .num { color: var(--accent-text); }
.kick-sep { font-size: clamp(32px, 6vw, 72px); font-weight: 800; color: #2b3145; line-height: 1; padding-top: 18px; }
.kick-zero { font-size: clamp(44px, 8vw, 104px); }
.kick-msg { font-size: 15px; max-width: 520px; }
.kick.final-hour .kick-tile { border-color: rgba(108,140,255,.5); }
@keyframes tickIn { from { transform: translateY(-30%); opacity: .2; } to { transform: none; opacity: 1; } }
.lineup { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 230px)); justify-content: center; gap: 10px; padding: 0 20px 22px; }
.lineup-card { display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--border);
               color: var(--text); text-decoration: none; transition: transform var(--ease), border-color var(--ease); }
.lineup-card:hover { transform: var(--lift); border-color: var(--accent); color: var(--text); }
.lineup-card img, .lineup-card .noart { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; display: block; }
.lineup-card .noart { display: flex; align-items: center; justify-content: center; font-size: 40px; color: #2b3145;
                      background: repeating-linear-gradient(135deg, #1b2030 0 10px, #161a24 10px 20px); }
.lc-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; text-align: left; }

/* steam art */
.art-thumb { width: 64px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
.art-thumb.none { display: flex; align-items: center; justify-content: center; font-weight: 900; color: #2b3145; background: repeating-linear-gradient(135deg, #1b2030 0 6px, #161a24 6px 12px); }
.art-banner { display: block; aspect-ratio: 460 / 215; max-height: 320px; width: 100%; border-radius: var(--radius); background-size: cover; background-position: center;
              border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.chip.steam { background: #171d25; color: #c7d5e0; text-decoration: none; border: 1px solid #2a475e; }
.chip.steam:hover { color: #fff; border-color: #66c0f4; }

/* ------------------------------------------------ timeline */
.tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px,100%),1fr)); gap: 10px; }
.tl a { padding: 14px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.tl .t { font-size: 12px; }
.tl .st { font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.tl .n { font-weight: 900; font-size: 15px; line-height: 1.15; }
.tl .f { font-size: 12px; color: var(--muted); }
.s-done { opacity: .55; }
.s-live { border-color: var(--gold) !important; }
.s-live .t, .s-live .st { color: var(--gold); }
.s-next { border-color: var(--accent) !important; }
.s-next .t, .s-next .st { color: var(--accent-text); }
.s-done .t, .s-done .st, .s-later .t, .s-later .st { color: var(--muted); }

.vtl { display: none; flex-direction: column; position: relative; padding-left: 18px; }
.vtl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.vtl a { display: flex; align-items: center; gap: 12px; padding: 9px 0; position: relative; text-decoration: none; color: var(--text); min-height: 44px; }
.vtl .dotm { position: absolute; left: -18px; width: 12px; height: 12px; border-radius: 50%; background: #2b3145; box-shadow: 0 0 0 3px var(--bg); }
.vtl .s-done { opacity: .5; }
.vtl .s-done .dotm { background: var(--border); }
.vtl .s-live .dotm { background: var(--gold); }
.vtl .s-next .dotm { background: var(--accent); }
.vtl .t { font-size: 12px; width: 40px; }
.vtl .n { flex: 1; font-weight: 800; font-size: 15px; }
.vtl .f { font-size: 12px; font-weight: 700; }
.vtl .s-live .t, .vtl .s-live .f { color: var(--gold); }
.vtl .s-next .t, .vtl .s-next .f { color: var(--accent-text); }
.vtl .s-done .t, .vtl .s-done .f, .vtl .s-later .t, .vtl .s-later .f { color: var(--muted); }

/* ------------------------------------------------ standings */
.cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cols > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cols > .side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.board { display: flex; flex-direction: column; gap: 8px; }
.prow { padding: 12px 16px; display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.prow:hover { color: var(--text); }
.prow .rk { font-size: 24px; width: 30px; color: var(--muted); }
.prow .nm { font-weight: 900; font-size: 16px; }
.prow .sub { font-size: 12px; font-weight: 500; letter-spacing: .05em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pts { font-size: 22px; font-weight: 700; min-width: 40px; text-align: right; }
.prow.first { background: linear-gradient(90deg, rgba(255,194,61,.14), var(--card) 60%); }
.prow.first .rk { color: var(--gold); }
.prow.first .sub { color: var(--gold); font-weight: 900; }
.prow.last .sub { color: var(--spoon); font-weight: 900; }
.prow.me { background: linear-gradient(90deg, rgba(108,140,255,.16), var(--card) 70%); box-shadow: 0 0 0 2px var(--accent); }
.prow.flash-up { animation: flashUp 2s ease-out; }
.prow.flash-dn { animation: flashDn 2s ease-out; }
@keyframes flashUp { 0%, 60% { background: rgba(108,140,255,.24); } }
@keyframes flashDn { 0%, 60% { background: rgba(255,90,95,.16); } }

.you { padding: 14px 16px; display: none; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(108,140,255,.18), var(--card) 75%); border-color: #2e3a66; text-decoration: none; color: var(--text); }
.you:hover { color: var(--text); }

/* ------------------------------------------------ commissioner feed */
.cid { padding: 18px; display: flex; gap: 14px; align-items: center; }
.fitem { padding: 14px 16px 14px 20px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.fitem:hover { transform: none; box-shadow: none; }
.fitem .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.fitem .txt { font-size: 15px; line-height: 1.4; }
.react { all: unset; cursor: pointer; background: var(--border); border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 800; min-height: 20px; }
.react.on { background: var(--tint-accent); }

/* ------------------------------------------------ toast + reveal */
.toast { position: fixed; top: 84px; right: 32px; width: 380px; max-width: calc(100% - 24px); border-radius: 16px; background: var(--text); color: var(--on-fill);
         padding: 16px 18px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 18px 40px rgba(0,0,0,.6); overflow: hidden; z-index: 50;
         text-decoration: none; animation: drop 6s ease-out forwards; }
.toast:hover { color: var(--on-fill); }
.toast .edge { position: absolute; left: 0; right: 0; top: 0; height: 5px; }
.toast .k { font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.toast .t { font-weight: 800; font-size: 15px; }

.reveal { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
          text-align: center; padding: 24px; animation: revealOut 5.2s forwards; cursor: pointer; overflow: hidden; }
.reveal .k { color: var(--gold); opacity: 0; animation: fadeIn .3s 1s forwards; }
.reveal .who { line-height: 1.05; padding-bottom: .08em; font-size: clamp(56px, 12vw, 160px); transform: scale(.4); opacity: 0; animation: scaleIn .6s 1s cubic-bezier(.2,1.4,.4,1) forwards;
               background: linear-gradient(100deg, var(--gold) 40%, #fff1c4 50%, var(--gold) 60%); background-size: 200% 100%;
               -webkit-background-clip: text; background-clip: text; color: transparent; }
.reveal .who.sweep { animation: scaleIn .6s 1s cubic-bezier(.2,1.4,.4,1) forwards, sweep 1.6s 1.6s linear 2; }
.reveal .sub { color: var(--muted); max-width: 640px; font-size: 18px; opacity: 0; animation: fadeIn .3s 1.5s forwards; }
.confetti { position: absolute; top: -20px; width: 10px; height: 10px; opacity: 0; animation: fall 2.6s 1.4s ease-in forwards; }
@keyframes scaleIn { to { transform: none; opacity: 1; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes revealOut { 0%, 92% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(110vh) rotate(540deg); } }
@keyframes sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.goldsweep, .podium .block.goldsweep { background: linear-gradient(100deg, var(--gold) 40%, #fff1c4 50%, var(--gold) 60%); background-size: 200% 100%; animation: sweep 3s linear infinite; }

/* ------------------------------------------------ match card */
.mc-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.seg { width: 28px; height: 8px; border-radius: 4px; background: var(--border); display: inline-block; }
.seg.a { background: var(--radiant); }
.seg.b { background: var(--dire); }
.seg.now { background: var(--gold); animation: pulse 1.2s infinite; }
.mc-vs { display: grid; grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr); }
.mc-vs .side { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.mc-vs .side.a { background: linear-gradient(90deg, rgba(61,220,132,.18), rgba(61,220,132,.03)); }
.mc-vs .side.b { background: linear-gradient(270deg, rgba(255,90,95,.18), rgba(255,90,95,.03)); text-align: right; }
.mc-vs .side.b .pl { flex-direction: row-reverse; }
.mc-vs .pl { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.mc-vs .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg); }
.statrow { display: grid; grid-template-columns: minmax(0,1fr) 70px 70px; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.final-head { padding: 18px 20px; display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(255,194,61,.16), rgba(61,220,132,.08) 60%, var(--card)); }
.final-head.b { background: linear-gradient(90deg, rgba(255,194,61,.16), rgba(255,90,95,.08) 60%, var(--card)); }
.maps { display: flex; flex-direction: column; }
.maps > div { display: flex; gap: 12px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }

/* ------------------------------------------------ draft */
.clock { border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid; }
.clock.A { background: rgba(61,220,132,.1); border-color: var(--radiant); }
.clock.B { background: rgba(255,90,95,.1); border-color: var(--dire); }
.clock.done { background: rgba(255,194,61,.1); border-color: var(--gold); }
.clock.A .c { color: var(--radiant); } .clock.B .c { color: var(--dire-text); } .clock.done .c { color: var(--gold); }
.teamcol { flex: 1 1 260px; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--border); }
.teamcol.on.A { border-color: var(--radiant); } .teamcol.on.B { border-color: var(--dire); }
.teamcol .bar { height: 6px; }
.teamcol .in { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.slot { display: flex; align-items: center; gap: 10px; min-height: 44px; border-radius: 12px; padding: 6px 10px; background: var(--bg); border: 1px dashed transparent; animation: pop .35s ease-out; }
.slot.open { background: transparent; border-color: #2b3145; color: var(--muted); }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(124px,100%),1fr)); gap: 10px; }
.pick { all: unset; box-sizing: border-box; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex;
        flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 100%; transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s; }
.pick:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.45); border-color: var(--accent); }
.pick[disabled] { cursor: default; }
.pick[disabled]:hover { transform: none; box-shadow: none; border-color: var(--border); }

/* ------------------------------------------------ profile */
.phero { position: relative; padding: 16px 16px 26px; border-radius: 0 0 24px 24px; }
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.statgrid .card { padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.statgrid .m { font-size: 26px; font-weight: 800; }
.bar8 { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.bar8 > div { height: 100%; border-radius: 4px; }
.iconbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card); color: var(--text); }

/* ------------------------------------------------ recap */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 20px); }
.podium > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.podium .block { width: 100%; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--border); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%),1fr)); gap: 14px; }
.awards .card { padding: 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr)); gap: 14px; }
.clip { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.clip .thumb { aspect-ratio: 16/9; background: repeating-linear-gradient(135deg,#1b2030 0 10px,#161a24 10px 20px); display: flex; align-items: center; justify-content: center; position: relative; }
.clip .play { width: 52px; height: 52px; border-radius: 50%; background: rgba(232,234,240,.92); display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------ table rows */
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); min-height: 44px; text-decoration: none; color: var(--text); }
.trow:first-child { border-top-color: transparent; }
.trow:hover { color: var(--text); }

/* ------------------------------------------------ commissioner panel */
.cp { max-width: 560px; margin: 0 auto; padding-bottom: 140px; }
.cp-head { padding: 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); position: relative; }
.cp-head .edge { position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.cp-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px; }
.tabs a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; border-radius: 10px; color: var(--muted); text-decoration: none; }
.tabs a.on { background: var(--text); color: var(--on-fill); }
.thumb-zone { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px 22px; background: linear-gradient(transparent, var(--bg) 30%); z-index: 20; }
.thumb-zone > div { max-width: 528px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.thumb-zone .btn { min-height: 64px; font-size: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5); width: 100%; }
.flash { text-align: center; font-size: 13px; font-weight: 800; color: var(--radiant); }

/* radio-chip choosers (pure CSS selection state) */
.choose input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.choose label { cursor: pointer; }
.winpick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.winpick label { min-height: 96px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column;
                 align-items: center; justify-content: center; gap: 4px; font-weight: 900; font-size: 17px; text-align: center; padding: 8px; }
.winpick input[value=A]:checked + label { background: rgba(61,220,132,.22); box-shadow: 0 0 0 2px var(--radiant); }
.winpick input[value=B]:checked + label { background: rgba(255,90,95,.22); box-shadow: 0 0 0 2px var(--dire); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips label { min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 14px; font-weight: 900; background: var(--border); display: inline-flex; align-items: center; gap: 8px; }
.chips.txt label { padding: 0 14px; min-height: 40px; font-size: 13px; }
.chips input:checked + label { background: var(--gold); color: var(--on-fill); }
.chips.txt input:checked + label { background: var(--text); color: var(--on-fill); }
.pgrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.pgrid label { min-height: 62px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column; align-items: center;
               justify-content: center; gap: 4px; font-size: 10px; font-weight: 900; padding: 6px 2px; overflow: hidden; }
.pgrid input:checked + label { background: var(--border); box-shadow: 0 0 0 2px var(--accent); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .btn { width: 64px; min-height: 64px; font-size: 28px; padding: 0; }
.ffa-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 8px; }
.ffa-pick button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 72px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
                   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 900; position: relative; }
.ffa-pick button.on { box-shadow: 0 0 0 2px var(--gold); background: var(--tint-gold); }
.ffa-pick .place { position: absolute; top: 4px; right: 6px; font-size: 12px; color: var(--gold); }
.sidepick { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; }
.seg3 { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg3 label { min-width: 44px; min-height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 900; color: var(--muted); }
.seg3 input[value=A]:checked + label { background: var(--tint-radiant); color: var(--radiant); }
.seg3 input[value=B]:checked + label { background: var(--tint-dire); color: var(--dire-text); }
.seg3 input[value=out]:checked + label { background: var(--border); color: var(--text); }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; }
input[type=color] { width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 4px; }
textarea { min-height: 80px; resize: vertical; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
details.card > summary { cursor: pointer; padding: 14px 16px; list-style: none; display: flex; align-items: center; gap: 12px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { border-bottom: 1px solid var(--border); }
details.card > form, details.card > div { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card:hover.nohover, details.card:hover, .cp .card:hover, .setup .card:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------ phone */
@media (max-width: 760px) {
  .wrap { padding: 0 16px 104px; gap: 22px; }
  .top { padding: 16px 0 12px; gap: 10px; justify-content: space-between; }
  .top nav { display: none; }
  .top .gamecount { display: inline; }
  .brand { font-size: 20px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(17,20,28,.96); border-top: 1px solid var(--border);
            padding: 4px 6px calc(10px + env(safe-area-inset-bottom)); z-index: 30; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; justify-content: center; color: var(--muted);
              text-decoration: none; font-size: 11px; font-weight: 800; }
  .tabbar a.on { color: var(--text); }
  .intro .stats { display: none; }
  .intro h1 { font-size: 44px; }
  .you { display: flex; }
  .np-head { padding: 14px 16px; }
  .np-foot { padding: 12px 16px; font-size: 13px; }
  .vs { display: none; }
  .vs-stack { display: flex; }
  .tl { display: none; }
  .kick-in { padding: 28px 14px 22px; }
  .kick-tile { padding: 12px 4px 8px; }
  .kick-tile .lbl { font-size: 10px; letter-spacing: .1em; }
  .kick-sep { display: none; }
  .lineup { padding: 0 12px 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .art-thumb { width: 52px; height: 24px; }
  .vtl { display: flex; }
  .board.compact { gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 4px 0; }
  .board.compact .prow { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 10px 14px; gap: 12px; background-color: transparent; }
  .board.compact .prow:first-child { border-top: 0; }
  .board.compact .prow:hover { transform: none; box-shadow: none; }
  .board.compact .prow.me { box-shadow: none; background: rgba(108,140,255,.12); }
  .board.compact .prow.first { background: linear-gradient(90deg, rgba(255,194,61,.14), transparent 70%); }
  .board.compact .rk { font-size: 16px; width: 20px; }
  .board.compact .av { width: 32px; height: 32px; font-size: 11px; }
  .board.compact .nm { font-size: 15px; }
  .board.compact .sub { font-size: 11px; }
  .board.compact .chip { background: none !important; padding: 0; width: 28px; justify-content: flex-end; }
  .board.compact .pts { font-size: 17px; min-width: 28px; }
  .cid { display: none; }
  .desk { display: none !important; }
  .phone { display: flex; }
  .np-ffa .d { display: none; }
  .cid-mini { display: flex !important; }
  .toast { top: 10px; left: 12px; right: 12px; width: auto; }
  .mc-vs { grid-template-columns: 1fr; }
  .mc-vs .side.b { text-align: left; }
  .mc-vs .side.b .pl { flex-direction: row; }
  .mc-vs .mid { flex-direction: row; padding: 10px; }
  .statgrid .m { font-size: 22px; }
  .pgrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.cid-mini { display: none; }
.phone { display: none; }