/* School + program pages — Jumbotron.
   Tokens and components mirror jumbotron.css from the Claude Design
   "Jumbotron — locked direction" group. Additions beyond that card are marked
   DEGRADED and exist because production data is patchier than the mocks:
   about half of games have no score, most programs have no statted games, and
   thumbnails are frequently missing. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0c14;--panel:#111527;--panel2:#161b33;--line:#232a4a;
  --ink:#eef0fa;--mut:#7d84a8;--blue:#3b63d8;--glow:#5b83f5;--gold:#f2b632;
  --red:#e1261c;--win:#3ac776;--lose:#ef6060;
  --disp:'Chakra Petch',sans-serif;--body:'Inter Tight',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 500px at 50% -100px,#141b3a,var(--bg) 60%);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--glow)}
h1,h2,h3,p{margin:0}
.num{font-variant-numeric:tabular-nums}
.is-hidden{display:none !important}
.ph{background:repeating-linear-gradient(135deg,#161b30 0 14px,#1c2240 14px 28px);display:flex;align-items:center;justify-content:center;color:#5a6288;font:10px/1 ui-monospace,monospace;letter-spacing:.05em}

/* chrome */
.chrome-in{max-width:1220px;margin:0 auto;min-height:60px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.chrome img{height:29px;display:block}
.school{display:flex;align-items:center;gap:10px}
.crest{width:34px;height:34px;border-radius:50%;background:#fff;color:#1b3b8f;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:12px;box-shadow:0 0 14px #5b83f566;overflow:hidden;flex-shrink:0}
.crest img{width:100%;height:100%;object-fit:cover}
.school b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* school hero */
.hero{max-width:1220px;margin:14px auto 0;padding:0 24px;display:flex;align-items:center;gap:20px}
.hero .bigcrest{width:76px;height:76px;border-radius:50%;background:#fff;color:#1b3b8f;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:24px;flex-shrink:0;box-shadow:0 0 34px #5b83f566;overflow:hidden}
.hero .bigcrest img{width:100%;height:100%;object-fit:cover}
.hero h1{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 30px #5b83f544}
.hero .sub{font-size:13px;color:var(--mut);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap}
.hero .sub b{color:var(--ink)}

/* board */
.board{max-width:1220px;margin:18px auto 0;padding:0 24px}
.board-in{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;box-shadow:0 0 40px #3b63d81f, inset 0 1px 0 #ffffff0d}
.bt{display:flex;align-items:center;gap:14px;min-width:0}
.bt.right{flex-direction:row-reverse}
.bt .lg{width:46px;height:46px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:13px;flex-shrink:0}
.bt .nm{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt .sub{font-size:11px;color:var(--mut);margin-top:2px}
.bmid{text-align:center}
.bmid .sc{font-family:var(--disp);font-weight:700;font-size:46px;letter-spacing:.05em;text-shadow:0 0 24px #5b83f588}
.bmid .st{font-family:var(--disp);font-size:11px;letter-spacing:.24em;color:var(--gold);margin-top:2px}
.bmid .lv{display:inline-flex;align-items:center;gap:6px;background:var(--red);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em;border-radius:3px;padding:3px 10px;margin-top:8px}
.bmid .lv i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pl 1.4s infinite}
.bmid .lv.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.cdb{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
.cdb span{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 14px;text-align:center}
.cdb b{font-family:var(--disp);font-weight:700;font-size:26px;display:block;text-shadow:0 0 18px #5b83f566}
.cdb i{font-style:normal;font-size:8.5px;letter-spacing:.2em;color:var(--mut)}
.board .tagline{font-family:var(--disp);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);text-align:center;margin-top:8px}
@keyframes pl{50%{opacity:.3}}
/* Board status states — warming up + delayed. One grammar in the score slot; only the
   tone colour and motion change. Design: jumbotron-board-status. */
/* 1 · Warming up — a stadium powering up */
.warm{display:flex;flex-direction:column;align-items:center;gap:9px}
.warm .kick{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eq{display:flex;align-items:flex-end;gap:4px;height:44px}
.eq i{display:block;width:7px;border-radius:2px;background:linear-gradient(180deg,#f2b632,#ff7a3d);box-shadow:0 0 10px #f2b6326b;animation:eqb 1.15s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:0s}.eq i:nth-child(2){animation-delay:.09s}.eq i:nth-child(3){animation-delay:.18s}.eq i:nth-child(4){animation-delay:.27s}.eq i:nth-child(5){animation-delay:.36s}.eq i:nth-child(6){animation-delay:.45s}.eq i:nth-child(7){animation-delay:.54s}.eq i:nth-child(8){animation-delay:.63s}.eq i:nth-child(9){animation-delay:.72s}.eq i:nth-child(10){animation-delay:.81s}.eq i:nth-child(11){animation-delay:.9s}.eq i:nth-child(12){animation-delay:.99s}
@keyframes eqb{0%,100%{height:9px;opacity:.55}50%{height:42px;opacity:1}}
.warm .hl{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 22px #f2b63273;animation:hlb 2.1s ease-in-out infinite}
@keyframes hlb{50%{text-shadow:0 0 34px #f2b632b3}}
.ticks{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);flex-wrap:wrap;justify-content:center}
.ticks .ok{color:var(--win)}
.ticks .sp2{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pl 1s infinite}
/* 2 · Delayed — calmer gold caution */
.dly{display:flex;flex-direction:column;align-items:center;gap:8px}
.dly .chip{display:inline-flex;align-items:center;gap:8px;background:#f2b6321f;border:1px solid #f2b63273;border-radius:6px;padding:6px 14px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);box-shadow:0 0 22px #f2b6322e}
.dly .chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pl 1.5s infinite}
.dly p{font-size:12.5px;color:var(--mut);line-height:1.45;max-width:330px;text-align:center;margin:0}
.dly .el{font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--mut)}
.dly .cta{height:34px;padding:0 16px;border-radius:9px;border:1px solid var(--gold);background:transparent;color:var(--gold);font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.dly .cta.done{border-color:var(--line);color:var(--mut);cursor:default}
.sweep{position:relative;height:2px;width:200px;max-width:70%;border-radius:1px;background:#232a4a;overflow:hidden}
.sweep i{position:absolute;top:0;bottom:0;width:64px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sw 1.9s linear infinite}
@keyframes sw{0%{left:-64px}100%{left:100%}}
/* Message Board banner — above the board. Design §4a. */
.board-msg{max-width:1172px;margin:14px auto 0}
.board-msg.mbn{display:flex;align-items:center;gap:13px;border-radius:14px;padding:13px 18px;border:1px solid}
.mbn .ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;border:1px solid}
.mbn .tx{min-width:0}
.mbn .tx b{display:block;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.mbn .tx span{display:block;font-size:12px;color:var(--mut);margin-top:3px;line-height:1.45}
.mbn .when{margin-left:auto;font-family:var(--disp);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);flex-shrink:0;white-space:nowrap}
.mbn .x{color:var(--mut);font-size:16px;cursor:pointer;flex-shrink:0;margin-left:6px}
.mbn.alert{border-color:#e1261c7a;background:linear-gradient(100deg,#e1261c26,#11152700);box-shadow:0 0 26px #e1261c1f}
.mbn.alert .ic{border-color:#e1261c8f;background:#e1261c26}
.mbn.alert .tx b{color:#ff8478}
.mbn.caution{border-color:#f2b63273;background:linear-gradient(100deg,#f2b63221,#11152700);box-shadow:0 0 26px #f2b6321f}
.mbn.caution .ic{border-color:#f2b6328f;background:#f2b6321f}
.mbn.caution .tx b{color:var(--gold)}
.mbn.info{border-color:#5b83f57a;background:linear-gradient(100deg,#5b83f521,#11152700)}
.mbn.info .ic{border-color:#5b83f58f;background:#5b83f521}
.mbn.info .tx b{color:var(--glow)}
.board-in.muted{opacity:.42;transition:opacity .2s}
@media(max-width:640px){.board-msg{margin-top:10px}.mbn{padding:11px 13px;gap:10px}.mbn .tx b{font-size:12.5px}.mbn .when{display:none}}

/* DEGRADED: no live game and no fixture scheduled. The board is always present in
   this design, so it states the situation rather than collapsing. */
.board-quiet{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px}
.board-quiet .qh{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.05em;text-transform:uppercase}
.board-quiet .qs{font-size:12.5px;color:var(--mut);margin-top:6px}

/* filters */
.filters{max-width:1220px;margin:0 auto;padding:18px 24px 0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.sp{flex-shrink:0;white-space:nowrap;height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--mut);display:inline-flex;align-items:center;gap:7px}
.sp:hover{color:var(--ink);border-color:#39447a}
.sp.on{border-color:var(--glow);color:var(--ink);box-shadow:0 0 16px #5b83f533, inset 0 0 12px #5b83f51f}
.sp .dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pl 1.4s infinite}
.chip{height:30px;padding:0 15px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--mut);font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;cursor:pointer}
.chip.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px #f2b6322b}
.sel{height:36px;border-radius:8px;border:1px solid var(--line);background:var(--panel);padding:0 12px;font-family:var(--body);font-size:12.5px;color:var(--ink);margin-left:auto;max-width:100%}
.hint{max-width:1220px;margin:0 auto;padding:10px 24px 0;font-size:12px;color:var(--mut)}

/* crumb + tabs */
.crumb{max-width:1220px;margin:0 auto;padding:20px 24px 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.crumb h1{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.04em;text-transform:uppercase}
.crumb .rec{font-size:12.5px;color:var(--mut)}
.crumb .rec b{color:var(--ink)}
.tabs{max-width:1220px;margin:8px auto 0;padding:0 24px;display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px 12px;color:var(--mut);border-bottom:2px solid transparent;cursor:pointer}
.tab.on{color:var(--ink);border-color:var(--gold)}
/* DEGRADED: Stats is not wired to real data yet and the existing stats view is a
   hardcoded mock, so the tab is shown but inert rather than linking to it. */
.tab.off{opacity:.4;cursor:default}
.tab.off:hover{color:var(--mut)}

/* schedule rows (from the jumbotron schedule mocks) */
.subfilters{max-width:1220px;margin:0 auto;padding:14px 24px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.subfilters .lbl{font-family:var(--disp);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-left:8px}
.srow{display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.srow:hover{border-color:#39447a;box-shadow:0 0 24px #3b63d822}
.srow .cal{text-align:center}
.srow .cal b{font-family:var(--disp);font-weight:700;font-size:19px;display:block}
.srow .cal span{font-family:var(--disp);font-size:9.5px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.srow .who{min-width:0}
.srow .who b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .who span{font-size:11.5px;color:var(--mut);margin-top:2px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .prgt{display:inline-block;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:3px}
.srow .fl{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;padding:3px 10px;border-radius:4px;color:#05060c;white-space:nowrap}
.srow .fl.w{background:var(--win)}.srow .fl.l{background:var(--lose)}
.srow .fl.up{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.srow .fl.lv{background:var(--red);color:#fff}
.srow .fl.watch{background:transparent;border:1px solid var(--glow);color:var(--glow)}
.srow .scr{font-family:var(--disp);font-weight:700;font-size:22px;white-space:nowrap;min-width:78px;text-align:right}
.srow .scr small{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--mut);font-weight:600}
.srow .acts{display:flex;gap:6px;justify-content:flex-end}
.srow .acts .sact{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.srow .acts .sact:hover{border-color:var(--glow);color:var(--ink)}
.srow.live{border-color:var(--red);box-shadow:0 0 24px #e1261c22}

/* stats (from jumbotron-stats mock; sit inside .main, which provides width+padding) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-align:center}
.kpi b{font-family:var(--disp);font-weight:700;font-size:30px;display:block;text-shadow:0 0 20px #5b83f555}
.kpi span{font-family:var(--disp);font-size:9.5px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
.stcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stcard .hd{padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.lead-row{display:grid;grid-template-columns:26px 1fr auto 90px;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
.lead-row:last-child{border-bottom:none}
.lead-row .rk{font-family:var(--disp);font-size:11px;color:var(--mut)}
.lead-row .nm{font-size:13px;font-weight:600}
.lead-row .nm span{display:block;font-size:10.5px;color:var(--mut);font-weight:500}
.lead-row .val{font-family:var(--disp);font-weight:700;font-size:16px}
.lead-row .meter{height:6px;border-radius:3px;background:#232a4a;overflow:hidden}
.lead-row .meter i{display:block;height:100%;background:var(--glow);box-shadow:0 0 8px #5b83f5}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font-family:var(--disp);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);text-align:right;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
.tbl th:first-child{text-align:left}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:right;color:var(--ink)}
.tbl td:first-child{text-align:left;font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#161b3355}
/* program-scope stat cards (from jumbotron-program-stats mock) */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.tcard:hover{border-color:#39447a;box-shadow:0 0 24px #3b63d822}
.tcard .hd2{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.tcard .hd2 b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .rec2{font-family:var(--disp);font-size:11px;color:var(--gold);flex-shrink:0}
.tcard .krow{display:flex;padding:14px 8px}
.tcard .krow div{flex:1;text-align:center}
.tcard .krow b{font-family:var(--disp);font-weight:700;font-size:20px;display:block;text-shadow:0 0 16px #5b83f544}
.tcard .krow span{font-size:8.5px;letter-spacing:.16em;color:var(--mut)}
.tcard .ft{padding:10px 16px;border-top:1px solid var(--line);font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.tcard.lim .krow b{color:var(--mut);text-shadow:none}
.tcard.lim .note{padding:0 16px 12px;font-size:11px;color:var(--mut);line-height:1.45}
/* scoring-leader line on a school-scope program card */
.tcard .ldr{padding:0 16px 12px;font-size:11px;color:var(--mut);line-height:1.45}
.tcard .ldr b{color:var(--ink);font-family:var(--disp);letter-spacing:.03em}
.foot-note{margin-top:14px;font-size:11.5px;color:var(--mut);line-height:1.5}
/* roster player cards (from jumbotron-roster mock) */
.players{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pl{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
.pl .photo{aspect-ratio:4/4.4;position:relative;background:repeating-linear-gradient(135deg,#161b30 0 14px,#1c2240 14px 28px)}
.pl .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl .no{position:absolute;top:10px;left:12px;font-family:var(--disp);font-weight:700;font-size:26px;color:#fff;text-shadow:0 0 18px #5b83f5aa}
.pl .bd{padding:11px 13px 13px}
.pl .nm{font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:.02em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .pos{font-size:11px;color:var(--mut);margin-top:3px}
@media(max-width:900px){.players{grid-template-columns:repeat(2,1fr)}}
/* settings page */
.setwrap{max-width:820px;margin:0 auto;padding:26px 24px 100px}
.sethead h1{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.sethead p{font-size:13px;color:var(--mut);margin-top:6px}
.spanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-top:22px;overflow:hidden}
.spanel-hd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.spanel-hd h2{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.spanel-hd span{display:block;font-size:12px;color:var(--mut);margin-top:4px}
.badge-q{flex-shrink:0;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid #f2b63244;border-radius:20px;padding:4px 10px;margin-top:2px}
.spanel-note{padding:14px 18px;font-size:12.5px;color:var(--mut)}
.order-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.order-row:last-child{border-bottom:none}
.order-pos{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--gold);text-align:center}
.order-nm{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.order-btns{display:flex;gap:6px}
.mini{height:30px;width:34px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--mut);font-size:14px;cursor:pointer}
.mini:hover:not(:disabled){border-color:var(--glow);color:var(--ink)}
.mini:disabled{opacity:.3;cursor:default}
.savebar{position:sticky;bottom:0;background:#0a0c14ee;border-top:1px solid var(--line);backdrop-filter:blur(6px);margin-top:22px;padding:14px 0;display:flex;align-items:center;gap:14px;justify-content:flex-end}
.savenote{font-size:12px;color:var(--mut);margin-right:auto}
.btn-save{height:38px;padding:0 20px;border-radius:8px;border:1px solid var(--glow);background:#5b83f51f;color:var(--ink);font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn-save:disabled{opacity:.4;cursor:default;border-color:var(--line)}
.settings-denied{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-top:22px;padding:36px 28px;text-align:center}
.settings-denied h2{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.settings-denied p{font-size:13.5px;color:var(--mut);margin:10px auto 20px;max-width:460px;line-height:1.55}
.settings-denied .btn-save{display:inline-block;text-decoration:none;line-height:38px}
.vis-grp{padding:11px 18px;background:var(--panel2);border-bottom:1px solid var(--line);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.vis-row{display:grid;grid-template-columns:1fr auto 46px;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}
.vis-row:last-child{border-bottom:none}
.vis-nm{font-size:13.5px;font-weight:600}
.vis-state{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tgl{width:44px;height:24px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s,border-color .15s}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--mut);transition:left .15s,background .15s}
.tgl.on{background:#5b83f52e;border-color:var(--glow)}
.tgl.on::after{left:22px;background:var(--glow);box-shadow:0 0 8px #5b83f5}
.tgl.busy{opacity:.5;cursor:default}

/* settings: exit, rename, program hide, bulk select, page status */
.sethead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.btn-exit{flex-shrink:0;height:36px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;text-decoration:none}
.btn-exit:hover{border-color:var(--glow);color:var(--ink)}
.order-row.is-off{opacity:.45}
.order-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.order-real{font-size:10.5px;color:var(--mut);font-style:italic}
.order-btns{display:flex;gap:6px;align-items:center}
.order-btns .mini[data-act=rename],.order-btns .mini[data-act=vis]{width:auto;padding:0 10px;font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mini svg{width:13px;height:13px}
.mini.inline{width:auto;height:22px;padding:0 6px;border:none;background:transparent;color:var(--mut);vertical-align:middle}
.mini.inline:hover{color:var(--glow)}
.vis-grp{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grp-bulk{display:flex;gap:6px}
.grp-bulk .mini{width:auto;height:24px;padding:0 10px;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* page status */
.sd-row{display:grid;grid-template-columns:1fr 46px;gap:10px 14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}
.sd-row:last-child{border-bottom:none}
.sd-row.on{background:#f2b6320d}
.sd-nm{font-size:13.5px;font-weight:600}
.sd-tag{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid #f2b63244;border-radius:20px;padding:2px 8px;margin-left:6px}
.sd-state{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.sd-row.on .sd-state{color:var(--gold)}
.sd-cfg{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;padding-top:4px}
.sd-cfg label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sd-cfg select,.sd-cfg input{height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-family:var(--body);font-size:13px}
.sd-cfg select:focus,.sd-cfg input:focus{outline:none;border-color:var(--glow)}
.sd-save{height:36px}
@media(max-width:640px){.sd-cfg{grid-template-columns:1fr}}

/* Sponsors admin panel (phase 7) */
.sponsor-empty{padding:14px 18px;font-size:12.5px;color:var(--mut)}
.sponsor-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
.sponsor-row:last-of-type{border-bottom:none}
.sponsor-info{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sponsor-info b{font-size:13.5px;font-weight:600}
.sponsor-tier{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid #f2b63244;border-radius:20px;padding:3px 9px}
.sponsor-off{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.sponsor-link{flex-basis:100%;font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sponsor-acts{display:flex;gap:8px;flex-shrink:0}
.sponsor-acts .mini,.sf-acts .mini{width:auto;padding:0 12px;font-size:11px;font-family:var(--disp);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mini.danger{border-color:#ef606044;color:var(--lose)}
.mini.danger[data-armed="1"]{background:#ef606018;border-color:var(--lose);color:var(--lose)}
.btn-add{margin:14px 18px;height:36px;padding:0 16px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--mut);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn-add:hover{border-color:var(--glow);color:var(--ink)}
.sponsor-fm{padding:16px 18px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.sponsor-fm label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sponsor-fm input[type=text],.sponsor-fm input[type=url],.sponsor-fm select{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-family:var(--body);font-size:13px}
.sponsor-fm input:focus,.sponsor-fm select:focus{outline:none;border-color:var(--glow)}
.sponsor-fm .sf-active{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;font-family:var(--body);font-size:12.5px;color:var(--ink)}
.sponsor-fm .sf-acts{grid-column:1/-1;display:flex;align-items:center;gap:10px;justify-content:flex-end}
.sponsor-fm .sf-note{margin-right:auto;font-size:12px;color:var(--mut)}
@media(max-width:640px){.sponsor-fm{grid-template-columns:1fr}}

/* inline fan player (vp-) — from jumbotron-player mock */
.vp{background:#05060c;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 0 50px #3b63d826;position:relative;max-width:100%}
.vp-stage{position:relative;aspect-ratio:16/9;background:#05060c;cursor:pointer}
.vp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vp-top{position:absolute;top:0;left:0;right:0;padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:linear-gradient(180deg,#05060cd9,transparent);transition:opacity .25s;pointer-events:none}
.vp-title{min-width:0}
.vp-title b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px #000c}
.vp-title span{font-size:11px;color:#aab1d4;display:block;margin-top:2px}
.vp-badges{display:flex;gap:8px;flex-shrink:0}
.vp-cam{display:inline-flex;align-items:center;gap:6px;background:#05060cd0;border:1px solid var(--line);color:#aab1d4;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:4px 10px}
.vp-unmute{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:#05060ce6;border:1px solid var(--glow);color:var(--ink);font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:7px 16px;cursor:pointer;box-shadow:0 0 20px #5b83f544;z-index:3}
.vp-unmute svg{width:14px;height:14px;color:var(--glow)}
.vp-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#05060c99;border:1px solid #ffffff2e;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);pointer-events:none;z-index:2}
.vp-flash svg{width:24px;height:24px;color:#fff;margin-left:2px}
.vp-ctrl{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(0deg,#05060cf0 30%,transparent);transition:opacity .25s}
.vp-seekrow{display:flex;align-items:center;gap:10px;padding:0 4px}
.vp-seek{flex:1;height:14px;display:flex;align-items:center;cursor:pointer;position:relative}
.vp-seek .tr{width:100%;height:4px;border-radius:2px;background:#ffffff26;position:relative;transition:height .12s}
.vp-seek:hover .tr{height:6px}
.vp-seek .buf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#ffffff33}
.vp-seek .cur{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--glow);box-shadow:0 0 10px #5b83f5}
.vp-seek .knob{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 10px #5b83f5cc}
.vp-seek.live .cur{background:var(--red);box-shadow:0 0 10px #e1261c;width:96%}
.vp-seek.live .knob{left:96%;box-shadow:0 0 10px #e1261ccc}
.vp-buttons{display:flex;align-items:center;gap:2px;margin-top:2px}
.vp-btn{width:38px;height:38px;border:none;background:transparent;color:#e6e9f7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;position:relative}
.vp-btn:hover{background:#ffffff14;color:#fff}
.vp-btn svg{width:19px;height:19px}
.vp-btn.sm svg{width:16px;height:16px}
.vp-btn .k{position:absolute;bottom:3px;right:4px;font-family:var(--disp);font-size:7.5px;font-weight:700;color:#aab1d4}
.vp-time{font-family:var(--disp);font-size:11.5px;color:#c9cee6;padding:0 8px;white-space:nowrap}
.vp-time b{color:#fff;font-weight:600}
.vp-spacer{flex:1}
.vp-rate{height:28px;padding:0 10px;border:1px solid #ffffff2e;border-radius:14px;background:transparent;color:#e6e9f7;font-family:var(--disp);font-size:11px;font-weight:600;cursor:pointer;margin:0 4px}
.vp-rate:hover{border-color:var(--glow);color:#fff}
.vp-vol{display:flex;align-items:center;gap:6px}
.vp-volrange{width:64px;accent-color:#fff;cursor:pointer}
.vp-livechip{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.12em;color:#fff;padding:0 8px;cursor:pointer}
.vp-livechip i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.vp-menu{position:absolute;right:12px;bottom:76px;z-index:4;background:#0b0f1ff2;border:1px solid var(--line);border-radius:12px;min-width:210px;box-shadow:0 10px 40px #000a;overflow:hidden;backdrop-filter:blur(8px)}
.vp-menu .mh{padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.vp-menu .mi{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12.5px;color:var(--ink);cursor:pointer}
.vp-menu .mi:hover{background:#ffffff0a}
.vp-menu .mi .tick{width:16px;color:var(--glow);font-weight:700}
.vp-menu .mi .who{flex:1}
.vp-loadwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#05060cb8;z-index:1}
.vp-spin{width:44px;height:44px;border-radius:50%;border:3px solid #232a4a;border-top-color:var(--glow);animation:vspin 1s linear infinite;box-shadow:0 0 20px #5b83f533}
@keyframes vspin{to{transform:rotate(360deg)}}
.vp-loadwrap span{font-family:var(--disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.vp-novid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#141b3a,#0d1120);z-index:1;text-align:center;padding:0 20px}
.vp-novid .mini-crest{width:56px;height:56px;border-radius:50%;background:#ffffff14;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:16px;color:#aab1d4}
.vp-novid b{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.vp-novid span{font-size:11.5px;color:var(--mut)}
/* Restricted lock pane (live-only) — an invitation in gold, not a red wall. Design §5. */
.vp-novid.vp-lock{gap:11px;background:linear-gradient(180deg,#05060cd9,#05060cf2);padding:20px}
.vp-lock .lk{width:44px;height:44px;border-radius:50%;border:1px solid #f2b63273;background:#f2b6321a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 26px #f2b6322e}
.vp-lock .lk svg{width:19px;height:19px;color:var(--gold)}
.vp-lock .lk-kick{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.vp-lock b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.1em;text-transform:uppercase}
.vp-lock .lk-p{font-size:12.5px;color:var(--mut);max-width:400px;line-height:1.5}
.vp-lock .lk-btns{display:flex;gap:9px;margin-top:3px}
.vp-lock .lk-b1{height:38px;padding:0 20px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 20px #5b83f542}
.vp-lock .lk-b2{height:38px;padding:0 18px;border-radius:9px;background:transparent;border:1px solid var(--line);color:var(--mut);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
/* Stream-closing ribbon over the player. Design §3. */
.vp-closing{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;padding:8px 14px;background:linear-gradient(90deg,#f2b6322e,#05060cd6);border-bottom:1px solid #f2b63259;backdrop-filter:blur(4px)}
.vp-closing b{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.vp-closing span[data-s]{font-size:11.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-closing .x{margin-left:auto;color:var(--mut);font-size:15px;cursor:pointer;flex-shrink:0}
.vp-closing.urgent{background:linear-gradient(90deg,#e1261c33,#05060cd6);border-color:#e1261c7a;animation:urg 1.4s ease-in-out infinite}
.vp-closing.urgent b{color:#ff7a6b}
@keyframes urg{50%{background:linear-gradient(90deg,#e1261c4d,#05060cd6)}}
@media(max-width:560px){.vp-rate,.vp-vol .vp-volrange,.vp-btn[data-vp=pip]{display:none}
  .vp-lock b{font-size:15px}.vp-lock .lk-p{font-size:11.5px}.vp-closing span[data-s]{display:none}}

/* layout */
.main{max-width:1220px;margin:0 auto;padding:22px 24px 56px;display:grid;grid-template-columns:1fr 316px;gap:22px}
.sect{display:flex;align-items:center;margin:26px 0 12px;gap:10px}
.sect h2{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sect .bar{flex:1;height:1px;background:var(--line)}
.sect a{font-size:12px;color:var(--mut)}

/* player */
.player{display:block;background:#05060c;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 0 50px #3b63d826}
.stage{position:relative;aspect-ratio:16/8.2}
.stage .ph{position:absolute;inset:0}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.ptag{position:absolute;top:12px;right:12px;background:#05060cd0;color:#aab1d4;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:4px}
.bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:#5b83f52e;border:1px solid #5b83f57a;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);box-shadow:0 0 30px #5b83f544}
.bigplay svg{width:28px;height:28px;margin-left:4px;color:#fff}
.pbar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.seek{flex:1;height:4px;border-radius:2px;background:#232a4a;position:relative}
.seek i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--glow);box-shadow:0 0 10px #5b83f5}
.ptime{font-family:var(--disp);font-size:11px;color:var(--mut)}
.pmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.pmeta .t{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.pmeta .sub{font-size:11.5px;color:var(--mut);margin-top:2px}

/* game cards */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gc{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.gc:hover{border-color:#39447a;box-shadow:0 0 24px #3b63d822}
/* The game currently in the player (flow 9): accent the card and badge its thumb, so
   the feed always shows which game you are watching. Bottom-left keeps it clear of the
   program/home-away and W/L corners. */
.gc.is-playing{border-color:var(--glow);box-shadow:0 0 22px #5b83f544,inset 0 0 0 1px #5b83f52e}
.gc.is-playing .gthumb::after{content:"● NOW PLAYING";position:absolute;left:8px;bottom:8px;z-index:2;background:var(--glow);color:#fff;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.14em;border-radius:4px;padding:4px 9px}
/* A game-by-game row that opens in the player — hinted as tappable. */
.tbl td a.glink{border-bottom:1px solid #ffffff24}
.tbl td a.glink:hover{border-bottom-color:var(--glow)}
.gthumb{aspect-ratio:16/9;position:relative}
.gthumb .ph{position:absolute;inset:0}
.gthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.res{position:absolute;top:9px;right:9px;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:4px;color:#05060c}
.res.w{background:var(--win);box-shadow:0 0 12px #3ac77655}
.res.l{background:var(--lose);box-shadow:0 0 12px #ef606055}
.res.t{background:var(--mut)}
.ha,.prg{position:absolute;top:9px;left:9px;background:#05060cd0;color:#aab1d4;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;max-width:calc(100% - 76px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb{padding:11px 13px 13px}
.gdte{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--disp);font-size:10px;color:var(--mut);letter-spacing:.08em}
.gdte span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdte .gn{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;flex-shrink:0;margin-left:8px}
/* DEGRADED: no scoreline. Roughly half of games cannot resolve which side the team
   was on, so this is the normal state — a quiet watch affordance, not a gap. */
.gdte .gn.none{font-family:var(--body);font-weight:600;font-size:10px;color:var(--mut);letter-spacing:.1em}
.gm{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;margin-top:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmeta{display:flex;gap:12px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;color:var(--mut);flex-wrap:wrap}

/* rail */
.rail .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.rail .hd{padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.rail .bd{padding:14px 16px}
.nextg .who{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.nextg .when{font-size:12px;color:var(--mut);margin-top:4px}
.nextg .cd{display:flex;gap:8px;margin-top:14px}
.nextg .cd div{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 0;text-align:center}
.nextg .cd b{font-family:var(--disp);font-weight:700;font-size:20px;display:block;text-shadow:0 0 16px #5b83f566}
.nextg .cd span{font-size:9px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.nextg .acts{display:flex;gap:8px;margin-top:14px}
.nextg .acts a{flex:1;height:34px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.nextg .acts .hot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px #f2b6322b}
.upx .up-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--mut)}
.upx .up-row:last-child{border-bottom:none}
.upx .d{font-family:var(--disp);font-weight:700;font-size:11px;color:var(--gold);width:50px;letter-spacing:.06em;flex-shrink:0}
.upx .d.lv{color:var(--red)}
.upx .w{flex:1;min-width:0}
.upx .w b{color:var(--ink);display:block;font-size:12.5px;font-weight:600}
.upx .prgtag{display:block;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:2px}

/* Sponsors card (phase 7): a title sponsor headline + supporting sponsors. */
.spn-lead{display:block;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--ink)}
a.spn-lead:hover{color:var(--glow)}
.spn-tier{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.spn-sup{margin-top:10px;font-size:11.5px;color:var(--mut);line-height:1.55}
.spn-sup a.spn-name{color:var(--ink)}
.spn-sup a.spn-name:hover{color:var(--glow)}

/* DEGRADED: empty states. Published schools with no film are common. */
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:34px 24px;text-align:center;color:var(--mut)}
.empty p{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.empty span{display:block;margin-top:8px;font-size:12.5px}
.empty.small{padding:18px 16px}
.empty.small p{font-size:12px;letter-spacing:.08em}

.footer{border-top:1px solid var(--line)}
.footer-in{max-width:1220px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--mut);flex-wrap:wrap}

@media(max-width:1000px){
  .main{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(2,1fr)}
  .board-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .bt,.bt.right{flex-direction:row}
  .hero h1{font-size:24px}
}
@media(max-width:620px){
  .games{grid-template-columns:1fr}
  .filters,.main,.crumb,.hero,.board,.hint{padding-left:14px;padding-right:14px}
  .sel{margin-left:0;width:100%}
  .bmid .sc{font-size:34px}
  .hero .bigcrest{width:56px;height:56px;font-size:18px}
}

/* ---------------------------------------------------------- setup guide (wizard) */

/* Fan-page nudge. Gold left edge rather than red: this is "look at this", not an
   error - the page is working exactly as intended, it just went public without the
   coach choosing the settings. */
/* Outer block: same 1220 centre + 24px gutter as .board, so the banner lines up with
   the page content instead of spanning the full viewport. */
.setup-nudge{max-width:1220px;margin:18px auto 0;padding:0 24px}
.setup-nudge-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;background:var(--panel)}
.setup-nudge-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.setup-nudge-txt strong{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.04em}
.setup-nudge-txt span{font-size:12.5px;color:var(--mut)}
.setup-nudge-acts{display:flex;align-items:center;gap:8px;flex-shrink:0}

.sethead-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-wiz{height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--mut);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.btn-wiz:hover{border-color:var(--glow);color:var(--ink)}

.btn-ghost{height:34px;padding:0 14px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--mut);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.btn-ghost:hover{color:var(--ink);border-color:var(--line)}

/* Intro sits inline above the panels rather than as a blocking overlay - a coach who
   opened settings to change one thing should not have to dismiss a dialog first. */
.wiz-intro{max-width:1080px;margin:0 auto 18px;padding:0 24px}
.wiz-card{padding:20px;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;background:var(--panel)}
.wiz-card h2{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.03em}
.wiz-card p{margin-top:8px;font-size:13px;color:var(--mut);line-height:1.55;max-width:60ch}
.wiz-intro-acts{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}

/* Docked so it stays reachable while the coach works down a long panel - a 290-team
   list would otherwise scroll the Next button off the screen entirely. */
.wiz-bar{position:sticky;bottom:0;z-index:40;margin-top:18px;
  border-top:1px solid var(--line);background:rgba(17,21,39,.97);backdrop-filter:blur(6px)}
.wiz-bar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;padding:12px 20px}
.wiz-step{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);flex-shrink:0}
.wiz-copy{font-size:12.5px;color:var(--mut);flex:1 1 240px;min-width:0}
.wiz-acts{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* The highlight is the whole point of walking the real panels: it says "this one" while
   leaving every control live and usable. */
.spanel.is-wiz{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 30px rgba(0,0,0,.45)}
.panel.is-wiz{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 30px rgba(0,0,0,.45)}

@media (max-width:640px){
  .setup-nudge-card,.wiz-bar-in{align-items:flex-start}
  .setup-nudge-acts,.wiz-acts{width:100%;margin-left:0}
  .wiz-copy{flex-basis:100%}
}

/* ------------------------------------------------------------------ closed page */

/* A closed page should read as a deliberate choice, not a failure to load. Panel
   language matches the board it replaces, so the page still looks like itself. */
.closed-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.closed-panel{margin:24px 0;padding:56px 32px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));text-align:center}
.closed-ttl{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3.4vw,30px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.closed-msg{margin:14px auto 0;max-width:56ch;font-size:14.5px;line-height:1.6;color:var(--mut)}

/* Admin-only, and visually separated from the fan-facing message so it never reads
   as part of what the public sees. */
.closed-admin{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 0 24px;padding:12px 16px;border:1px dashed var(--line);border-radius:10px;
  font-size:12.5px;color:var(--mut);text-align:center}

/* ------------------------------------------------- navigation at scale (nav.js) */

/* The measured row. overflow:hidden is a safety net only — fitBar removes what does
   not fit, so nothing should ever be clipped; if it is, that is a measurement bug
   worth seeing rather than hiding. */
.pnbar{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1 1 auto;min-width:0}

/* Overflow control. Dashed and glow-coloured so it reads as "more of these" rather
   than as another program. */
.sp.more{border-style:dashed;color:var(--glow);background:transparent}
.sp.more:hover{color:var(--ink);border-color:var(--glow)}
.sp.more b{font-weight:700;margin-left:2px}

.navpnl{position:absolute;z-index:60;background:#0b0f1ff2;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 50px #000c;backdrop-filter:blur(8px);
  width:640px;max-width:calc(100vw - 24px);overflow:hidden}
.navpnl-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.navpnl-hd b{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navpnl-srch{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel2);height:32px;padding:0 10px;min-width:200px}
.navpnl-srch svg{width:13px;height:13px;color:var(--mut);flex-shrink:0}
.navpnl-srch input{border:0;background:transparent;color:var(--ink);font-family:var(--body);
  font-size:12px;outline:none;width:100%}
.navpnl-bd{max-height:min(60vh,520px);overflow-y:auto}
.navpnl-grp{padding:10px 16px 4px;font-family:var(--disp);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.navpnl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 16px 14px}
.navpnl-i{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);font-size:12.5px;font-weight:600;color:var(--ink);min-width:0}
.navpnl-i:hover{border-color:var(--glow);color:var(--ink)}
.navpnl-i.on{border-color:var(--glow);box-shadow:inset 0 0 12px #5b83f51f}
.navpnl-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navpnl-i .dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pl 1.4s infinite}
.navpnl-i .n{margin-left:auto;font-family:var(--disp);font-size:9.5px;color:var(--mut);flex-shrink:0}
/* Dimmed, not removed: a program a fan knows exists should not look deleted for
   being out of season. It still navigates — to the closed-page message. */
.navpnl-i.closed{opacity:.5}
.navpnl-i .off{margin-left:auto;font-family:var(--disp);font-size:8.5px;letter-spacing:.1em;
  color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:2px 6px;flex-shrink:0;text-transform:uppercase}

@media (max-width:720px){
  /* Anchoring a 640px panel to a small trigger is unusable; the sheet is the mobile
     form of the same component (design E). */
  .navpnl{position:fixed;left:0 !important;top:auto !important;bottom:0;width:100%;max-width:100%;
    border-radius:16px 16px 0 0;max-height:80vh}
  .navpnl-grid{grid-template-columns:1fr}
  .navpnl-bd{max-height:calc(80vh - 57px)}
  .navpnl-srch{min-width:0}
}

/* --------------------------------------------------------- team chips (design C) */

/* Sits under the crumb, attached to the program it belongs to — the old <select>
   floated at the right of the filters row, visually disconnected from it. */
.tlrow{max-width:1220px;margin:10px auto 0;padding:0 24px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.tlbl{flex-shrink:0;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut)}
.tlbar{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1 1 auto;min-width:0}
.tl{flex-shrink:0;white-space:nowrap;height:32px;padding:0 16px;border-radius:16px;border:1px solid var(--line);
  background:var(--panel);font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tl:hover{color:var(--ink);border-color:#39447a}
/* Gold rather than the program bar's blue: a team is a selection WITHIN the program
   already marked blue above, so the two rows never read as the same control. */
.tl.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px #f2b6322b}
.tl .yr{font-size:9px;color:var(--mut);letter-spacing:.04em}
.tl.more{border-style:dashed;color:var(--glow);background:transparent}
.tl.more:hover{color:var(--ink);border-color:var(--glow)}
.tl.more b{font-weight:700;margin-left:2px}

@media (max-width:720px){
  .tlrow{padding:0 16px}
}

/* ------------------------------------------------------- mobile selectors (E) */

/* Reads as a dropdown, opens the same panel the desktop overflow control does -
   which is a bottom sheet at this width. A native <select> would be familiar but
   unusable at 26 programs, with no search, no grouping and no live indicator. */
.msel{width:100%;display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);padding:0 14px;font-family:var(--body);font-size:14px;
  font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.msel:hover{border-color:var(--glow)}
.msel-v{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-c{flex-shrink:0;color:var(--mut);font-size:11px}
.msel .dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pl 1.4s infinite}

@media (max-width:720px){
  /* Both rows become full-width fields, stacked and labelled, under the board. */
  .filters{padding:14px 16px 0;flex-direction:column;align-items:stretch;gap:6px}
  .filters::before{content:"Program";font-family:var(--disp);font-size:9px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
  .pnbar{flex:0 0 auto;overflow:visible}
  .tlrow{margin-top:12px;flex-direction:column;align-items:stretch;gap:6px}
  .tlbar{flex:0 0 auto;overflow:visible}
}

/* ------------------------------------------------- AI summary action (admins) */

/* The card stays a link; the action sits beneath it, so the button is not nested
   inside an anchor where a click would navigate instead of generating. */
.gcw{display:flex;flex-direction:column;min-width:0}
.gcw .gc{flex:1 1 auto}
.gcai{margin-top:8px}
.gcai-btn{width:100%;height:32px;border-radius:8px;border:1px dashed var(--line);background:transparent;
  color:var(--mut);font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.gcai-btn:hover:not(:disabled){color:var(--ink);border-color:var(--glow)}
.gcai-btn:disabled{opacity:.6;cursor:default}
/* AI recap modal — a centred popup so the recap reads large and nothing reshifts. */
.aimodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.aimodal-back{position:absolute;inset:0;background:#05060ccc;backdrop-filter:blur(3px)}
.aimodal-card{position:relative;z-index:1;width:640px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #000c;overflow:hidden}
.aimodal-hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.aimodal-hd .kick{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);flex-shrink:0}
.aimodal-hd b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aimodal-x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mut);font-size:14px;cursor:pointer;flex-shrink:0}
.aimodal-x:hover{color:var(--ink);border-color:#39447a}
.aimodal-body{padding:18px 20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.aimodal-body p{font-size:15.5px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.aimodal-body p:last-child{margin-bottom:0}
body.aimodal-open{overflow:hidden}
@media(max-width:640px){.aimodal-card{width:100%;max-height:90vh}.aimodal-body p{font-size:15px}}

/* ------------------------------------------------------ player profile v1 (pf-) */

.pfwrap{max-width:760px;margin:0 auto;padding:20px 24px 40px}
.pf{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pf-id{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.pf-id img{width:64px;height:64px;border-radius:50%;flex-shrink:0}
.pf-who{min-width:0;flex:1}
.pf-who h1{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.1}
.pf-who .sub{font-size:12px;color:var(--mut);margin-top:4px}
.pf-who .sub a{color:var(--glow)}
.pf-num{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--glow);
  text-shadow:0 0 18px #5b83f566;flex-shrink:0}
.pf-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pf-tag{font-family:var(--disp);font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:3px 8px;color:var(--mut)}
.pf-tag.hl{border-color:var(--gold);color:var(--gold)}
.pf-bd{padding:16px 20px;display:flex;flex-direction:column;gap:13px}

/* The player's own words — gold rule, italic, visually separate from system facts. */
.quote{border-left:3px solid var(--gold);padding:4px 0 4px 14px;font-size:15px;
  line-height:1.5;color:var(--ink);font-style:italic}
.quote small{display:block;font-style:normal;font-family:var(--disp);font-size:9px;
  letter-spacing:.16em;color:var(--mut);margin-top:5px;text-transform:uppercase}

.pf-sect{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.pf-sect .bar{flex:1;height:1px;background:var(--line)}
.pf-sect a{font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--glow);font-weight:600}
.phys{display:flex;gap:10px;flex-wrap:wrap}
.phys div{border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  padding:7px 12px;font-size:11px;color:var(--mut)}
.phys b{color:var(--ink);font-family:var(--disp);font-size:12px;margin-right:5px}
.socials{display:flex;gap:8px}
.soc2{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:flex;
  align-items:center;justify-content:center;color:var(--mut);font-family:var(--disp);
  font-size:11px;font-weight:700;text-decoration:none}
.soc2:hover{border-color:var(--glow);color:var(--ink)}
.pf-bd .gx{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--mut);text-decoration:none}
.pf-bd .gx:last-child{border-bottom:none}
.pf-bd .gx:hover b{color:var(--glow)}
.pf-bd .gx .d{font-family:var(--disp);font-weight:700;font-size:10px;color:var(--gold);width:46px;flex-shrink:0}
.pf-bd .gx b{color:var(--ink);font-weight:600}
.pf-bd .gx .w3{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-bd .gx .watch{font-family:var(--disp);font-size:9px;color:var(--glow);letter-spacing:.12em;flex-shrink:0}
.mates{display:flex;gap:8px;flex-wrap:wrap}
.mate{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);padding:5px 10px 5px 5px;font-size:11.5px;font-weight:600;
  color:var(--ink);text-decoration:none}
.mate img{width:24px;height:24px;border-radius:50%}
.mate:hover{border-color:var(--glow)}

/* Roster cards are links now that players have pages. */
a.pl{text-decoration:none;color:inherit;display:block}
a.pl:hover{border-color:var(--glow)}

@media (max-width:640px){
  .pfwrap{padding:14px 16px 32px}
  .pf-id{padding:14px}
  .pf-bd{padding:14px}
}

/* ------------------------------------------------------------- loading skeletons */

/* A sweep rather than a pulse: the highlight travels left-to-right, which reads as
   "something is arriving" instead of "something is broken and blinking". Angled to
   match the arena-glow language rather than sitting flat. */
.sk{position:relative;overflow:hidden;background:var(--panel2);border-radius:6px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 20%,#5b83f51f 50%,transparent 80%);
  animation:sk-sweep 1.25s ease-in-out infinite}
@keyframes sk-sweep{to{transform:translateX(100%)}}

/* Reduced motion still needs to say "loading" — a static tint that differs from a real
   panel, rather than an animation removed and nothing put in its place. */
@media (prefers-reduced-motion:reduce){
  .sk::after{animation:none;background:#5b83f514}
}

.sk-line{height:11px;margin:7px 0}
.sk-line.tall{height:16px}
.sk-disc{width:56px;height:56px;border-radius:50%;flex-shrink:0}
.sk-disc.lg{width:64px;height:64px}
.w15{width:15%}.w25{width:25%}.w40{width:40%}.w50{width:50%}
.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}

/* rows — schedule, stats tables, game lists */
.sk-rows{display:flex;flex-direction:column}
.sk-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:none}
.sk-row .sk-line{margin:0}

/* cards — the film feed */
.sk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sk-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.sk-thumb{aspect-ratio:16/9;border-radius:0}
.sk-card-bd{padding:12px}

/* roster */
.sk-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sk-player{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.sk-player .sk-line{margin:4px 0 0}

/* profile */
.sk-profile{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.sk-pf-id{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.sk-pf-bd{padding:16px 20px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------- profile editors (ed-) */

.edwrap{max-width:520px;margin:0 auto;padding:20px 20px 48px;display:flex;flex-direction:column;gap:10px}
.ed-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.ed-head{display:flex;align-items:center;gap:12px}
.ed-head img{width:48px;height:48px;border-radius:50%}
.ed-head b{font-family:var(--disp);font-size:14px;letter-spacing:.05em;text-transform:uppercase;display:block}
.ed-head span{font-size:11px;color:var(--mut);display:block;margin-top:2px}

.avpick{display:flex;gap:10px;align-items:center;margin-top:14px;padding:10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.avpick img{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.avpick .lbl2{font-size:11.5px;color:var(--mut);line-height:1.45}
.avpick .lbl2 a{color:var(--glow);font-weight:600}

.fld{margin-top:14px}
.fld label{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
/* Green, and at the point of entry — a player typing their height should see who will
   read it before they finish typing, not in a policy page afterwards. */
.fld label .pub3{color:var(--win);letter-spacing:.08em;flex-shrink:0}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;
  padding:11px 12px;resize:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--glow);
  box-shadow:0 0 0 3px #5b83f52b}
.fld .duo{display:flex;gap:8px}
.fld .duo input{flex:1;min-width:0}
.fld .duo select{width:auto;flex:0 0 92px}
.fld .cnt{text-align:right;font-family:var(--disp);font-size:9.5px;color:var(--mut);margin-top:4px}
.fld-err{margin-top:6px;font-size:11.5px;color:var(--lose)}
.duo-fields{display:flex;gap:10px}
.duo-fields .fld{flex:1;min-width:0}

.privacynote{border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  padding:11px 12px;font-size:11.5px;color:var(--mut);line-height:1.5;margin-top:16px}
.privacynote b{color:var(--ink)}
.cta2{width:100%;height:46px;border-radius:9px;border:1px solid var(--gold);
  background:#f2b6321a;color:var(--gold);font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 20px #f2b6322b;
  margin-top:14px}
.cta2:disabled{opacity:.6;cursor:default}
.ed-note{margin-top:10px;font-size:12px;color:var(--lose);text-align:center}

/* Coach mode — gold and persistent, so editing someone else never looks like editing
   your own page. */
.coachbar{background:#f2b6321a;border:1px solid #f2b63255;border-radius:10px;padding:11px 12px;
  display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--gold);flex-wrap:wrap}
.coachbar b{font-family:var(--disp);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.coachbar span b{color:var(--ink);font-family:var(--body);font-size:11.5px;letter-spacing:0;
  text-transform:none}
.coachbar .x2{margin-left:auto;font-family:var(--disp);font-size:9px;letter-spacing:.1em;
  border:1px solid #f2b63255;border-radius:6px;padding:4px 10px;color:var(--gold);
  text-decoration:none;flex-shrink:0}
.coachbar .x2:hover{background:#f2b63222;color:var(--gold)}

.pstep{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px}
.pstep img{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.pstep b{font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pstep .nav2{display:flex;gap:6px;flex-shrink:0}
.pstep .nav2 a{font-family:var(--disp);font-size:10px;color:var(--glow);border:1px solid var(--line);
  border-radius:6px;padding:5px 10px;text-decoration:none;white-space:nowrap}
.pstep .nav2 a:hover{border-color:var(--glow)}

@media (max-width:520px){
  .edwrap{padding:14px 14px 36px}
  .duo-fields{flex-direction:column;gap:0}
  .pstep .nav2 a{padding:5px 8px}
}

/* --------------------------------------------- profile stats, photo, exit links */

.pf-back,.ed-back{display:inline-block;font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-decoration:none;
  padding:6px 0;margin-bottom:4px}
.pf-back:hover,.ed-back:hover{color:var(--glow)}
.ed-back{display:block;text-align:center;margin-top:14px;padding:10px 0}

/* Season line. Per-game figures lead because that is what a parent or recruiter reads
   first; the season total sits alongside as the supporting number. */
.statrow{display:flex;gap:10px;flex-wrap:wrap}
.statrow .stat{flex:1 1 68px;min-width:68px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);padding:10px 8px;text-align:center}
.statrow .stat b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);
  line-height:1.1}
.statrow .stat span{display:block;font-family:var(--disp);font-size:8.5px;font-weight:600;
  letter-spacing:.14em;color:var(--mut);margin-top:4px}
.statrow .stat.tot b{color:var(--gold)}

.avpick-acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.btn-photo{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;
  border:1px solid var(--glow);background:#5b83f51a;color:var(--glow);font-family:var(--disp);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.btn-photo:hover{background:#5b83f52b}
.btn-photo.ghost{border-color:var(--line);background:transparent;color:var(--mut)}
.btn-photo.ghost:hover{border-color:var(--lose);color:var(--lose);background:transparent}
.btn-photo.busy{opacity:.7;pointer-events:none}

/* ============================================================ admin settings v2
   Restyled to jumbotron-admin.html. The live panels' inner markup is emitted by
   settings.js (.order-row, .vis-row, .sd-row, .sponsor-row, .tgl) — those classes are
   restyled here to the mock's row/toggle/group language, so the JS is untouched. */

.ahead{max-width:1080px;margin:0 auto;padding:24px 24px 0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.ahead h1{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.05em;text-transform:uppercase}
.ahead p{font-size:13px;color:var(--mut);margin-top:4px}
.ahead-acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Whole-page live/closed shortcut, beside the title. Mirrors the school Page Status row. */
.title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagelive{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.pagelive-lbl{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--win)}
.pagelive.closed{border-color:#f2b6323d;background:#f2b6320a}
.pagelive.closed .pagelive-lbl{color:var(--gold)}

.amain{max-width:1080px;margin:0 auto;padding:20px 24px 60px;display:flex;flex-direction:column;gap:18px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.phead{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.phead h2{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.phead p{font-size:11.5px;color:var(--mut);margin-top:3px;max-width:62ch}
.phead .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}

.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:8px;
  border:1px solid var(--gold);background:transparent;color:var(--gold);font-family:var(--disp);
  font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 0 14px #f2b6322b;text-decoration:none}
.btn:hover{background:#f2b6321a;color:var(--gold)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.ghost{border-color:var(--line);color:var(--mut);box-shadow:none}
.btn.ghost:hover{border-color:var(--glow);color:var(--ink);background:transparent}

.badge{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:4px;padding:3px 9px;flex-shrink:0}
.badge.pub{background:#1d3a2a;color:var(--win)}
.badge.hid{background:#232a4a;color:var(--mut)}
.badge.q{background:#3a2f14;color:var(--gold)}
.badge.soon{background:#232a4a;color:var(--glow);border:1px solid #2f3a63}

/* the mock's toggle — settings.js already emits <div class="tgl [on] [busy]"> */
.tgl{width:42px;height:23px;border-radius:12px;background:#232a4a;position:relative;cursor:pointer;
  flex-shrink:0;transition:background .15s}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#7d84a8;transition:left .15s,background .15s}
.tgl.on{background:#1d3a2a}
.tgl.on::after{left:21px;background:var(--win);box-shadow:0 0 10px #3ac77688}
.tgl.busy{opacity:.55;pointer-events:none}

/* generic static row (coming-soon panels) */
.row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:12px 20px;
  border-bottom:1px solid var(--line);font-size:13px}
.row:last-child{border-bottom:none}
.row .nm{font-weight:600}
.row .nm span{display:block;font-size:11px;color:var(--mut);margin-top:2px;font-weight:500}

.grphead,.vis-grp{padding:9px 20px;background:#0d1120;border-bottom:1px solid var(--line);
  font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center}

.pnote{padding:10px 20px;font-size:12px;color:var(--lose);border-top:1px solid var(--line)}
/* Film Access — stream-window minutes input */
.winput{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.winput input{width:70px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;text-align:center;padding:0 6px}
.winput .wunit{font-family:var(--disp);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.btn-save.sm{height:34px;padding:0 14px;font-size:11px}

.savebar-inline{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:12px 20px;border-top:1px solid var(--line)}
.savebar-inline .savenote{margin-right:auto;font-size:11.5px;color:var(--mut)}

/* ---- Program Order rows (.order-row from settings.js) ---- */
#order-list .order-row{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--line)}
#order-list .order-row:last-child{border-bottom:none}
#order-list .order-row.is-off{opacity:.5}
.order-pos{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--gold);text-align:center}
.order-nm{font-weight:600;font-size:13px;min-width:0}
.order-real{display:block;font-size:11px;color:var(--mut);font-weight:500;margin-top:2px}
.order-btns{display:flex;gap:6px;flex-shrink:0}

/* ---- Team Visibility / Roster rows (.vis-row from settings.js) ---- */
.vis-grp .grp-bulk{margin-left:auto;display:flex;gap:6px}
.vis-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--line);font-size:13px}
.vis-row:last-child{border-bottom:none}
.vis-nm{font-weight:600;min-width:0;display:flex;align-items:center;gap:6px}
.vis-state{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* ---- Page Status rows (.sd-row from settings.js) ---- */
.sd-row{padding:12px 20px;border-bottom:1px solid var(--line)}
.sd-row:last-child{border-bottom:none}
.sd-row .sd-main{display:inline-flex;flex-direction:column;vertical-align:middle}
.sd-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.sd-nm{font-weight:600;font-size:13px}
.sd-tag{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid #f2b63255;border-radius:4px;padding:2px 7px;margin-left:8px}
.sd-state{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-top:3px}
.sd-row.on .sd-state{color:var(--gold)}
.sd-cfg{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.sd-cfg label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);flex:1;min-width:180px}
.sd-cfg select,.sd-cfg input{border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none}
.sd-cfg .sd-save{flex:0 0 auto}

/* ---- Sponsors (.sponsor-row from settings.js) ---- */
.sponsor-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.sponsor-row:last-child{border-bottom:none}
.sponsor-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sponsor-info b{font-size:13px;font-weight:600}
.sponsor-tier{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid #f2b63255;border-radius:4px;padding:2px 7px}
.sponsor-off{font-family:var(--disp);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sponsor-link{font-size:11px;color:var(--glow);width:100%}
.sponsor-acts{display:flex;gap:6px;flex-shrink:0}
.sponsor-empty{padding:16px 20px;font-size:12.5px;color:var(--mut)}
.sponsor-fm{display:flex;flex-direction:column;gap:12px;padding:16px 20px;border-top:1px solid var(--line)}
.sponsor-fm label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.sponsor-fm input,.sponsor-fm select{border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none}
.sponsor-fm .sf-active{flex-direction:row;align-items:center;gap:8px;letter-spacing:.04em}
.sf-acts{display:flex;align-items:center;gap:10px}
.sf-note{margin-right:auto;font-size:11.5px;color:var(--mut)}

/* small buttons used throughout the JS panels */
.mini{height:28px;padding:0 11px;border-radius:6px;border:1px solid var(--line);background:transparent;
  color:var(--mut);font-family:var(--body);font-size:11.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px}
.mini:hover{border-color:var(--glow);color:var(--ink)}
.mini:disabled{opacity:.35;cursor:default}
.mini.danger:hover{border-color:var(--lose);color:var(--lose)}
.mini svg{width:13px;height:13px}
.mini.inline{height:22px;padding:0 6px;border:none}

/* ---- coming-soon panels ---- */
.cs-divider{max-width:1080px;margin:8px auto 0;padding:0 24px;display:flex;align-items:center;gap:14px}
.cs-divider::before,.cs-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.cs-divider span{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut)}
.panel.is-soon{opacity:.72}
.panel.is-soon .row,.panel.is-soon .field,.panel.is-soon .spopt,.panel.is-soon .gamelbl,
.panel.is-soon .tgl,.panel.is-soon .adcard,.panel.is-soon .newad{pointer-events:none}
.panel.is-soon input,.panel.is-soon select,.panel.is-soon textarea{opacity:.7}

.spopts{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px}
.spopt{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.fields{padding:16px 20px;display:flex;flex-direction:column;gap:13px}
.field label{display:block;font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-family:var(--body);font-size:13px;color:var(--ink);background:var(--panel2)}
.gamelbl{display:grid;grid-template-columns:56px 1fr 1fr 120px 1fr;gap:12px;align-items:center;
  padding:11px 20px;border-bottom:1px solid var(--line)}
.gamelbl:last-child{border-bottom:none}
.gamelbl .d{font-family:var(--disp);font-weight:700;font-size:11px;color:var(--gold)}
.gamelbl .who{font-size:13px;font-weight:600}
.gamelbl .who span{display:block;font-size:10.5px;color:var(--mut);font-weight:500}
.gamelbl input,.gamelbl select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-family:var(--body);font-size:12px;color:var(--ink);background:var(--panel2);width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 20px}
.adcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel2)}
.adcard .thumb{aspect-ratio:16/6;position:relative;background:#0d1120}
.adcard .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--mut);text-align:center;padding:0 10px}
.adbd{padding:11px 13px}
.adttl{font-weight:600;font-size:13px}
.adsub{font-size:11px;color:var(--mut);margin-top:2px}
.newad{border:2px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;min-height:130px;color:var(--mut);font-size:12px;font-weight:600;text-align:center;padding:0 12px}
.newad .plus{font-size:18px}
.newad .sm{font-weight:500;font-size:10.5px}

@media (max-width:640px){
  .ahead,.amain,.cs-divider,.wiz-intro{padding-left:16px;padding-right:16px}
  .gamelbl{grid-template-columns:44px 1fr;gap:8px}
  .gamelbl select,.gamelbl input:not(:nth-child(2)){grid-column:2}
  .grid2{grid-template-columns:1fr}
  .sd-cfg label{min-width:100%}
}

/* ==================================================== admin settings — tabbed (v3)
   Adds the tab bar and the Coming Soon row/badge pattern on top of the v2 panel styles.
   Six deep-linkable tabs; the header + Managing scope sit above; a sticky footer notes
   auto-save. settings.js drives tab switching and hash deep-linking. */

.ahead-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scope{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--panel)}
.scope b{color:var(--ink);font-weight:600}

.atabs{max-width:1080px;margin:18px auto 0;padding:0 24px;display:flex;gap:4px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.atab{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px 12px;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;display:flex;align-items:center;gap:7px;white-space:nowrap;user-select:none}
.atab:hover{color:var(--ink)}
.atab.on{color:var(--ink);border-color:var(--glow)}
.atab:focus-visible{outline:2px solid var(--glow);outline-offset:2px;border-radius:4px}
.atab .c{font-family:var(--body);font-size:10px;font-weight:600;background:#232a4a;color:var(--mut);
  border-radius:9px;padding:1px 7px;letter-spacing:0}
.atab.on .c{background:#16224a;color:var(--glow)}

/* Only the active tab's section is in the flow; the rest are removed so a tall panel in
   one tab never pushes the sticky footer around while another tab is showing. */
.tabsec{display:none;flex-direction:column;gap:18px}
.tabsec.on{display:flex}

/* Coming Soon — the design's pattern: dashed badge, dimmed inert row. */
.badge.cs{background:#232a4a;color:var(--glow);border:1px dashed #39447a}
.row.cs{opacity:.6}
.row.cs .tgl{pointer-events:none}
/* Whole coming-soon control groups: shown in full, but inert and dimmed so nothing
   clickable does nothing. */
.is-cs{opacity:.6;pointer-events:none}

/* Sticky auto-save footer (our saves are immediate; there is nothing to batch). */
.asavebar{position:sticky;bottom:0;z-index:30;background:#0a0c14ee;border-top:1px solid var(--line);
  backdrop-filter:blur(6px)}
.asavebar-in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:12px}
.asave-note{margin-right:auto;font-size:11.5px;color:var(--mut)}

@media (max-width:640px){
  .atabs{padding:0 12px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .atab{padding:10px 11px 12px}
  .asavebar-in{padding:12px 16px}
  .ahead-right{width:100%}
  .scope{flex:1}
}

/* ---------------------------------------------------------- highlight reels (pf) */

.reelrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.reel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel2);
  cursor:pointer;text-align:left;padding:0;color:inherit;display:flex;flex-direction:column}
.reel:hover{border-color:var(--glow)}
.reel-thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--panel2),#0d1120)}
.reel-play{width:40px;height:40px;border-radius:50%;background:#0a0c14cc;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;padding-left:2px}
.reel:hover .reel-play{border-color:var(--glow);color:var(--glow)}
.reel-cap{padding:9px 11px;font-size:12px;font-weight:600;line-height:1.3;
  display:flex;flex-direction:column;gap:5px}
.reel-badge{align-self:flex-start;font-family:var(--disp);font-size:8px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);border-radius:4px;padding:2px 6px}

/* Frame themes — functional placeholders in the jumbotron palette; design refines the
   final look. Each is a coloured frame + matching play-button glow. */
.reel.theme-fire{border-color:#e1261c}.reel.theme-fire .reel-thumb{background:linear-gradient(135deg,#2a1410,#e1261c22)}
.reel.theme-fire .reel-play{border-color:#e1261c;color:#ff6a4d}
.reel.theme-ice{border-color:#38c5d8}.reel.theme-ice .reel-thumb{background:linear-gradient(135deg,#0e2a30,#38c5d822)}
.reel.theme-ice .reel-play{border-color:#38c5d8;color:#7fe6f2}
.reel.theme-gold{border-color:var(--gold)}.reel.theme-gold .reel-thumb{background:linear-gradient(135deg,#2a2110,#f2b63222)}
.reel.theme-gold .reel-play{border-color:var(--gold);color:var(--gold)}
.reel.theme-neon{border-color:#a78bfa}.reel.theme-neon .reel-thumb{background:linear-gradient(135deg,#221643,#a78bfa22)}
.reel.theme-neon .reel-play{border-color:#a78bfa;color:#c4b5fd}
.reel.theme-storm{border-color:#5b83f5}.reel.theme-storm .reel-thumb{background:linear-gradient(135deg,#16224a,#5b83f522)}
.reel.theme-storm .reel-play{border-color:var(--glow);color:var(--glow)}
.reel.theme-clean{border-color:var(--line)}

/* Reel lightbox — plays a plain mp4. */
.reel-lb{position:fixed;inset:0;z-index:80;background:#05060cee;display:flex;align-items:center;
  justify-content:center;padding:20px}
.reel-lb-in{width:min(900px,100%);position:relative}
.reel-lb-ttl{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin-bottom:10px;padding-right:40px}
.reel-lb video{width:100%;border-radius:12px;background:#000;max-height:78vh}
.reel-lb-x{position:absolute;top:-4px;right:0;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.reel-lb-x:hover{border-color:var(--glow);color:var(--glow)}

/* ---------------------------------------------------- editor: highlights curation */
.ed-hl{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden}
.ed-hl-hd{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ed-hl-hd b{font-family:var(--disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:block}
.ed-hl-hd span{font-size:11px;color:var(--mut);display:block;margin-top:2px}
.ed-hl-hd .tgl{margin-left:auto}
.ed-hl-note{padding:10px 14px;font-size:11.5px;color:var(--gold);border-bottom:1px solid var(--line)}
.ed-hl-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.ed-hl-row:last-child{border-bottom:none}
.ed-hl-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* Method 3: upload a video reel (curation screen) */
.ed-reel-up{margin-top:12px;border:1px dashed #39447a;border-radius:12px;background:#5b83f50a;padding:16px 14px;text-align:center}
.btn-reel-up{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:11px;background:var(--glow);color:#05060c;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.06em;cursor:pointer}
.btn-reel-up.busy{opacity:.7;cursor:default}
.btn-reel-up .up-ic{font-size:15px}
.ed-reel-hint{font-size:11px;color:var(--mut);margin-top:9px;line-height:1.4}
.ed-reel-prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.ed-reel-prog .rp-track{flex:1;height:6px;border-radius:3px;background:#232a4a;overflow:hidden}
.ed-reel-prog .rp-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b63d8,#5b83f5);box-shadow:0 0 8px #5b83f5;transition:width .15s}
.ed-reel-prog .rp-pct{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--glow);flex-shrink:0}

/* ============================================================ fan engagement
   RSVP button (schedule rows + upcoming rail) and the cheer bar under the player.
   Phase 1: RSVP + Cheer. */

/* RSVP — a compact toggle that lives in the schedule row's .acts group and, standalone,
   at the end of an upcoming rail row. Off state matches .sact; on state fills gold. */
.rsvp{height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;
  display:inline-flex;align-items:center;gap:6px;background:transparent;cursor:pointer;
  font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);transition:border-color .18s,color .18s,background .18s}
.rsvp:hover{border-color:#39447a;color:var(--ink)}
.rsvp .ic{font-size:12px;line-height:1}
.rsvp .n{font-family:var(--disp);font-weight:700;color:var(--ink)}
.rsvp .n:empty{display:none}
.rsvp.on{background:var(--gold);border-color:var(--gold);color:#05060c}
.rsvp.on .n{color:#05060c}
.rsvp.on:hover{filter:brightness(1.05)}
/* Rail rows: RSVP sits at the far right, shrunk to fit the narrow card. */
.upx .up-row .rsvp{flex-shrink:0;height:26px;padding:0 9px;font-size:9px}

/* Cheer — "the crowd" (live games only). Named reactions rise over the video; the deck
   below carries a crowd meter, a five-button tap deck, a burst banner and an avatar
   identity cluster. Design: jumbotron-cheer.html. */

/* rising reactions — a pointer-events:none overlay in the player stage's bottom band */
.vp-stage .lane{position:absolute;left:0;right:0;bottom:0;height:74%;pointer-events:none;z-index:3;overflow:hidden}
.lane .rise{position:absolute;bottom:-40px;display:flex;align-items:center;gap:7px;animation:rise 5.4s linear forwards}
.lane .rise.named{max-width:200px}
.lane .rise .em{font-size:26px;line-height:1;filter:drop-shadow(0 2px 6px #000a)}
.lane .rise .who{display:flex;align-items:center;gap:6px;background:#05060cb8;border:1px solid #ffffff24;border-radius:20px;padding:3px 10px 3px 3px;backdrop-filter:blur(4px);white-space:nowrap}
.lane .rise .who img{width:20px;height:20px;border-radius:50%;flex-shrink:0}
.lane .rise .who b{font-size:11.5px;font-weight:600;color:#fff}
.lane .rise.self .em{font-size:34px}
.lane .rise.self .who{border-color:#f2b632a8;box-shadow:0 0 18px #f2b6323d}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}
  8%{transform:translateY(calc(var(--travel,180px) * -.07)) scale(1);opacity:1}
  42%{opacity:1}78%{opacity:0}
  100%{transform:translateY(calc(var(--travel,180px) * -1)) scale(.92);opacity:0}}

/* the deck (#fan-cheer) */
.fan-cheer{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px 13px;margin:10px 0 4px}
.fan-cheer .dhead{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.fan-cheer .mtr{flex:1;min-width:0}
.fan-cheer .mrow2{display:flex;align-items:baseline;gap:8px}
.fan-cheer .lv{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.fan-cheer .rate{font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fan-cheer .track{height:6px;border-radius:3px;background:#1a2140;overflow:hidden;margin-top:6px}
.fan-cheer .track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#5b83f5,#f2b632);box-shadow:0 0 10px #f2b6326b;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fan-cheer .track.hot i{background:linear-gradient(90deg,#f2b632,#ff5a1f,#e1261c);box-shadow:0 0 16px #ff5a1f8f;animation:hotpulse 1.1s ease-in-out infinite}
@keyframes hotpulse{50%{filter:brightness(1.25)}}
.fan-cheer .track.quiet i{background:#39447a;box-shadow:none}
.fan-cheer .tot{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.02em;text-align:right;flex-shrink:0;line-height:1.05}
.fan-cheer .tot span{display:block;font-family:var(--body);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-top:1px}
/* tap deck */
.fan-cheer .taps{display:flex;gap:8px}
.fan-cheer .tap{flex:1;height:56px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform .12s cubic-bezier(.2,.9,.2,1),border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.fan-cheer .tap .e{font-size:22px;line-height:1}
.fan-cheer .tap .c{font-family:var(--disp);font-size:9.5px;font-weight:600;color:var(--mut);letter-spacing:.06em}
.fan-cheer .tap:hover{border-color:#39447a}
.fan-cheer .tap.pressed{transform:scale(1.1) translateY(-2px);border-color:var(--gold);box-shadow:0 0 22px #f2b63252,inset 0 0 16px #f2b6321f}
.fan-cheer .tap.pressed .c{color:var(--gold)}
.fan-cheer .tap.dim{opacity:.45;pointer-events:none}
/* burst */
.fan-cheer .burst{display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,#e1261c26,#f2b63226);border:1px solid #f2b63259;border-radius:10px;padding:9px 13px;margin-top:11px;box-shadow:0 0 24px #ff5a1f2e}
.fan-cheer .burst .bg2{font-size:17px}
.fan-cheer .burst b{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.fan-cheer .burst span{font-size:11.5px;color:var(--mut);margin-left:auto;white-space:nowrap}
/* crowd identity area: cluster / first-cheer prompt / gate + maxed note */
.fan-cheer .crowd{margin-top:11px}
.fan-cheer .crowd:empty{display:none;margin:0}
.fan-cheer .crowd.cluster{display:flex;align-items:center;gap:9px;padding-top:11px;border-top:1px solid var(--line)}
.fan-cheer .stack{display:flex;flex-shrink:0}
.fan-cheer .stack img{width:24px;height:24px;border-radius:50%;border:2px solid var(--panel);margin-left:-8px;background:var(--panel2)}
.fan-cheer .stack img:first-child{margin-left:0}
.fan-cheer .crowd .txt{font-size:11.5px;color:var(--mut);line-height:1.4;min-width:0}
.fan-cheer .crowd .txt b{color:var(--ink);font-weight:600}
.fan-cheer .join{margin-left:auto;font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);flex-shrink:0}
.fan-cheer .firstprompt{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border:1px dashed #39447a;border-radius:11px;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fan-cheer .firstprompt em{font-style:normal;color:var(--gold)}
.fan-cheer .crowd.note{display:flex;align-items:center;gap:11px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--mut);line-height:1.45}
.fan-cheer .crowd.note .ic{width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.fan-cheer .crowd.note b{color:var(--ink)}
.fan-cheer .crowd.note .cta{margin-left:auto;height:34px;padding:0 15px;border-radius:9px;background:var(--glow);color:#05060c;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0;box-shadow:0 0 18px #5b83f542}
@media (max-width:640px){
  .fan-cheer .tap{height:52px}
  .fan-cheer .tot{font-size:17px}
  .lane .rise .em{font-size:22px}
  .fan-cheer .burst span{display:none}
}

/* ============================================== Message Board settings tab */
#msgboard-panel .mb-body{padding:2px 20px 6px}
.flabel{display:block;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:16px 0 8px}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pst{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;background:var(--panel2)}
.pst:hover{border-color:#39447a}
.pst.sel{border-color:var(--glow);box-shadow:inset 0 0 14px #5b83f51f}
.pst .rd{width:14px;height:14px;border-radius:50%;border:1px solid #4a5488;flex-shrink:0}
.pst.sel .rd{border-color:var(--glow);box-shadow:inset 0 0 0 3px var(--panel2),inset 0 0 0 7px var(--glow)}
.pst b{font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pst .tn{margin-left:auto;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:4px;flex-shrink:0}
.tn.a{background:#e1261c2e;color:#ff8478}.tn.c{background:#f2b6322e;color:var(--gold)}.tn.i{background:#5b83f52e;color:var(--glow)}
#msg-text{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-family:var(--body);font-size:13px;resize:vertical;min-height:66px}
.cc{text-align:right;font-size:10px;color:var(--mut);margin-top:4px}
.tonepick{display:flex;gap:8px}
.tonepick .tb{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tonepick .tb i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tonepick .tb.sel{color:var(--ink)}
.tonepick .tb.sel.a{border-color:#e1261c8f;box-shadow:inset 0 0 14px #e1261c1f}
.tonepick .tb.sel.c{border-color:#f2b6328f;box-shadow:inset 0 0 14px #f2b6321f}
.tonepick .tb.sel.i{border-color:#5b83f58f;box-shadow:inset 0 0 14px #5b83f51f}
.optrow{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 0;font-size:12.5px;font-weight:600}
.optrow .ot span{display:block;font-size:11px;color:var(--mut);font-weight:500;margin-top:2px}
.optrow .tgl{margin-left:auto;flex-shrink:0}
.tgl.locked{opacity:.4;pointer-events:none}
#msg-preview .mbn{margin:0;max-width:none}
.mb-empty{font-size:11.5px;color:var(--mut);border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center}
.savebar2{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:13px 18px;background:var(--panel2)}
.savebar2 .n{font-size:11.5px;color:var(--mut);margin-right:auto}
.savebar2 .b1{height:36px;padding:0 20px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.savebar2 .b2{height:36px;padding:0 16px;border-radius:9px;background:transparent;border:1px solid var(--line);color:var(--mut);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.savebar2 .busy{opacity:.6;pointer-events:none}
@media(max-width:640px){.presets{grid-template-columns:1fr}.savebar2{flex-wrap:wrap}.savebar2 .n{width:100%;margin-bottom:6px}}

/* ============================================= Follow Requests admin tab */
.fa-warn{display:flex;gap:9px;background:#f2b6321a;border:1px solid #f2b63259;border-radius:10px;
  padding:11px 14px;margin:0 20px 14px;font-size:12px;color:var(--mut);line-height:1.5}
.fa-warn b{color:var(--ink)}
.fa-search{padding:0 20px 12px}
.fa-search input{width:100%;box-sizing:border-box;height:38px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;padding:0 13px}
.fa-list{padding:0 12px 8px}
.fa-empty{padding:16px 8px;text-align:center;font-size:12px;color:var(--mut)}
.fa-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line)}
.fa-row:last-child{border-bottom:none}
.fa-row img{width:34px;height:34px;border-radius:50%;background:var(--panel2);flex-shrink:0}
.fa-who{min-width:0;flex:1}
.fa-who b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-who span{display:block;font-size:11px;color:var(--mut);margin-top:1px}
.fa-acts{display:flex;gap:7px;flex-shrink:0}
.fa-acts button{height:32px;padding:0 14px;border-radius:8px;font-family:var(--disp);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:1px solid var(--line);background:transparent}
.fa-acts button:disabled{opacity:.5;cursor:default}
.fa-ok{color:#05060c !important;background:var(--win) !important;border-color:var(--win) !important}
.fa-no{color:var(--mut)}
.fa-no:hover{color:var(--lose);border-color:var(--lose)}
.fa-rm{color:var(--mut)}
.fa-rm:hover{color:var(--lose);border-color:var(--lose)}
@media(max-width:640px){.fa-warn{margin:0 14px 12px}.fa-list,.fa-search{padding-left:12px;padding-right:12px}}

/* ================================================== Pick'em (fan poll card) */
.card.pickem .bd{padding:0}
.poll{padding:13px 15px;border-bottom:1px solid var(--line)}
.poll:last-child{border-bottom:none}
.poll .pq{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;line-height:1.35;margin-bottom:10px}
.popts{display:flex;flex-direction:column;gap:7px}
.popt.vote{text-align:left;width:100%;height:38px;padding:0 13px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.popt.vote:hover{border-color:var(--glow);background:#5b83f512}
.popt.res{position:relative;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);overflow:hidden;display:flex;align-items:center;padding:0 11px}
.popt.res .pbar{position:absolute;left:0;top:0;bottom:0;background:#3b63d833;z-index:0}
.popt.res.mine .pbar{background:#5b83f552}
.popt.res.correct{border-color:var(--win)}
.popt.res.correct .pbar{background:#3ac77640}
.popt.res .plabel{position:relative;z-index:1;font-size:12px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popt.res .ppct{position:relative;z-index:1;margin-left:auto;font-family:var(--disp);font-weight:700;font-size:12px;color:var(--mut);flex-shrink:0;padding-left:8px}
.popt.res.mine .ppct{color:var(--glow)}
.popt.res.correct .ppct{color:var(--win)}
.poll .pfoot{font-size:10.5px;color:var(--mut);margin-top:9px;letter-spacing:.04em}

/* ============================================= Pick'em admin (settings) */
.pk-form{padding:2px 20px 6px}
#pk-q,#pk-closes,.pk-opt{width:100%;box-sizing:border-box;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;padding:0 13px}
#pk-opts{display:flex;flex-direction:column;gap:8px}
#pk-add-opt{margin-top:8px;height:32px;padding:0 14px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--mut);font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#pk-add-opt:hover{color:var(--ink);border-color:var(--glow)}
.pk-list{padding:0 12px 8px}
.pkr{padding:12px 8px;border-bottom:1px solid var(--line)}
.pkr:last-child{border-bottom:none}
.pkr-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.pkr-hd b{font-family:var(--disp);font-size:13.5px;font-weight:700;min-width:0}
.pkr-meta{margin-left:auto;font-size:10.5px;color:var(--mut);flex-shrink:0;white-space:nowrap}
.pkr-opts{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.pkr-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mut);padding:5px 10px;border-radius:7px;background:var(--panel2)}
.pkr-opt.win{color:var(--win);border:1px solid #1d3b2a}
.pkr-opt b{font-family:var(--disp);color:var(--ink)}
.pkr-opt.win b{color:var(--win)}
.pkr-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pkr-ans{height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:12px;padding:0 8px;flex:1;min-width:130px}
.pkr-btn{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mut);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pkr-btn:hover{color:var(--ink);border-color:#39447a}
.pkr-btn.del:hover{color:var(--lose);border-color:var(--lose)}
.pkr-btn:disabled{opacity:.5;cursor:default}

/* ================================================ fan wall + snips (phase 3) === */
.fan-wall,.fan-snips{margin:0 0 18px}
.fan-wall.is-hidden,.fan-snips.is-hidden{display:none}

/* ---- fan wall ---- */
.wall{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.whd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.whd b{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.whd .wct{font-family:var(--disp);font-size:10px;color:var(--mut);letter-spacing:.06em}
.whd .wmod{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mut)}
.whd .wmod svg{width:12px;height:12px;color:var(--gold)}
.wcompose{padding:13px 16px;border-bottom:1px solid var(--line)}
.wta{width:100%;box-sizing:border-box;min-height:46px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--ink);font-family:var(--body);font-size:13.5px;line-height:1.45;resize:vertical}
.wta:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px #5b83f51f}
.wcrow{display:flex;align-items:center;gap:10px;margin-top:9px}
.wcc{font-family:var(--disp);font-size:10px;color:var(--mut)}
.whint{font-size:10.5px;color:var(--mut)}
.wpost{margin-left:auto;height:36px;padding:0 18px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 18px #5b83f542;flex-shrink:0}
.wpost:disabled{background:#232a4a;color:var(--mut);box-shadow:none;cursor:default}
.wgate{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.wgate .ic{width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.wgate .tx{font-size:12px;color:var(--mut);line-height:1.45;min-width:0}
.wgate .tx b{color:var(--ink)}
.wgate .wcta{margin-left:auto;height:34px;padding:0 15px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;flex-shrink:0;box-shadow:0 0 18px #5b83f542}
.wclosed{padding:14px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.wrow{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:none}
.wrow.pending{background:#5b83f50a;border-left:2px solid var(--glow)}
.wrow.rejected{background:#3a2f140f;border-left:2px solid var(--gold)}
.wav{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.wpb{flex:1;min-width:0}
.wwho{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wwho b{font-size:12.5px;font-weight:600}
.wtag{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid #f2b63259;border-radius:3px;padding:1px 6px}
.wtm{font-family:var(--disp);font-size:10px;color:var(--mut);letter-spacing:.04em}
.wchip{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:4px;padding:3px 8px}
.wchip.pend{background:#16224a;color:var(--glow);border:1px dashed #39447a}
.wchip.gone{background:#232a4a;color:var(--mut)}
.wbody{font-size:13.5px;line-height:1.5;margin-top:4px;overflow-wrap:anywhere}
.wnote{margin-top:9px;padding:9px 11px;border:1px solid #f2b63244;background:#f2b6320d;border-radius:9px;font-size:12px;color:var(--mut);line-height:1.45}
.wnote b{display:block;font-family:var(--disp);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.wacts{display:flex;align-items:center;gap:16px;margin-top:8px}
.wacts span{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);cursor:pointer}
.wacts span.mut{cursor:default}
.wacts span:not(.mut):hover{color:var(--glow)}
.wacts .rep:hover{color:var(--gold)}
.wacts .done{color:var(--gold);cursor:default}
.wthread{margin-top:11px;padding-left:13px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:11px}
.wreply{display:flex;gap:9px}
.wreply img{width:24px;height:24px;border-radius:50%;flex-shrink:0}
.wrb{min-width:0}
.wreplybox{display:flex;gap:8px;margin-top:10px}
.wreplybox input{flex:1;height:34px;border:1px solid var(--line);border-radius:17px;background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:12.5px;padding:0 13px}
.wreplybox input:focus{outline:none;border-color:var(--glow)}
.wreplybox button{height:34px;padding:0 14px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.wempty{padding:26px 20px;text-align:center}
.wempty .big{font-size:26px}
.wempty b{display:block;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.wempty p{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5}

/* ---- fan snips gallery ---- */
.gal{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ghd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ghd b{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ghd .gct{font-family:var(--disp);font-size:10px;color:var(--mut)}
.ghd .gadd{margin-left:auto;height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--glow);background:transparent;color:var(--glow);font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px #5b83f52b}
.gmod{display:flex;align-items:center;gap:7px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--mut);background:#0d1120}
.gmod svg{width:12px;height:12px;color:var(--gold);flex-shrink:0}
.fsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:14px 16px}
.snip{cursor:pointer;min-width:0}
.snip.pending,.snip.rejected{cursor:default}
.sthumb{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#05060c;border:1px solid var(--line)}
.sph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sph.noimg{background:linear-gradient(135deg,#161b33,#0d1120)}
.snip.pending .sthumb{border-style:dashed;border-color:#39447a}
.src{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:#05060cd6;border:1px solid #ffffff26;color:var(--ink)}
.src.fan{border-color:#5b83f57a;color:#a9c0ff}
.src.photo{border-color:#5b83f57a;color:#a9c0ff}
.splay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#05060c99;border:1px solid #ffffff3d;display:flex;align-items:center;justify-content:center}
.splay svg{width:13px;height:13px;margin-left:2px;color:#fff}
.sdur{position:absolute;bottom:7px;right:7px;background:#05060cd6;font-family:var(--disp);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px}
.pendwash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#05060cad;text-align:center;padding:0 8px}
.pendwash b{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.pendwash span{font-size:10px;color:var(--mut)}
.rejwash{position:absolute;inset:0;background:#05060cc9;display:flex;align-items:center;justify-content:center}
.rejwash b{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sb{padding:8px 2px 0}
.scap{display:block;font-size:12.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sby{display:flex;align-items:center;gap:6px;margin-top:5px}
.sby img{width:18px;height:18px;border-radius:50%}
.sby span{font-family:var(--disp);font-size:9.5px;letter-spacing:.06em;color:var(--mut)}
.sreport{display:inline-block;margin-top:6px;font-family:var(--disp);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);cursor:pointer}
.sreport:hover{color:var(--gold)}
.sreport.done{color:var(--gold);cursor:default}
.rejnote{margin-top:7px;padding:8px 10px;border:1px solid #f2b63244;background:#f2b6320d;border-radius:9px;font-size:11.5px;color:var(--mut);line-height:1.42}
.rejnote b{display:block;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.rejacts{display:flex;gap:8px;margin-top:8px}
.rejacts span{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);cursor:pointer}
.gempty{padding:26px 20px;text-align:center}
.gempty .big{font-size:26px}
.gempty b{display:block;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.gempty p{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5;max-width:420px;margin-left:auto;margin-right:auto}
.gcta{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:9px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:13px;box-shadow:0 0 18px #5b83f542;cursor:pointer}
.myctx{display:block;font-family:var(--disp);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.myempty{padding:24px;text-align:center;font-size:12px;color:var(--mut)}

/* ---- fan modal (submit sheet, snip lightbox, my snips) ---- */
.fanmodal{position:fixed;inset:0;z-index:120;background:#05060ccc;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.fm-card{position:relative;width:100%;max-width:420px;max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.fm-card.snipview{max-width:760px;background:#0b0f1f}
.fm-card.mysnips{max-width:760px}
.fm-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--mut);font-size:14px;cursor:pointer;z-index:2}
.fm-h{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.bigbtns{display:flex;flex-direction:column;gap:10px}
.bigbtn{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);padding:0 15px;cursor:pointer}
.bigbtn.primary{border-color:var(--glow);box-shadow:0 0 18px #5b83f52b,inset 0 0 14px #5b83f512}
.bigbtn .ic2{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.bigbtn b{display:block;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bigbtn span{display:block;font-size:10.5px;color:var(--mut);margin-top:2px}
.snippreview{margin-bottom:12px;border-radius:11px;overflow:hidden;background:#05060c;border:1px solid var(--line)}
.snippreview video,.snippreview img{width:100%;display:block;max-height:300px;object-fit:contain;background:#05060c}
.capwrap .flabel{display:block;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:4px 0 7px}
.snipcap-in{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--glow);border-radius:10px;padding:11px 12px;color:var(--ink);font-family:var(--body);font-size:13px;box-shadow:0 0 0 3px #5b83f51f}
.snipcap-in:focus{outline:none}
.modnote{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:10px 12px;margin-top:12px;font-size:11px;color:var(--mut);line-height:1.45}
.modnote svg{width:14px;height:14px;color:var(--gold);flex-shrink:0;margin-top:1px}
.snipsubmit{width:100%;height:46px;border-radius:11px;background:var(--glow);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;cursor:pointer;box-shadow:0 0 20px #5b83f542}
.snipsubmit:disabled{background:#232a4a;color:var(--mut);box-shadow:none;cursor:default}
.upstate{margin-top:6px}
.pbar2{height:6px;border-radius:3px;background:#232a4a;overflow:hidden}
.pbar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b63d8,#5b83f5);box-shadow:0 0 8px #5b83f5;transition:width .2s}
.uptxt{display:block;font-family:var(--disp);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.donepane{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:14px 6px}
.donepane .tick{width:52px;height:52px;border-radius:50%;border:2px solid var(--win);color:var(--win);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 22px #3ac77642}
.donepane b{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.donepane p{font-size:11.5px;color:var(--mut);line-height:1.5}
.donepane .ghost2{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--mut);font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-top:4px}
.snipmedia{border-radius:11px;overflow:hidden;background:#000}
.snipmedia video,.snipmedia img{width:100%;display:block;max-height:70vh;object-fit:contain;background:#000}
.snipcap{margin-top:10px;font-size:13px;color:var(--ink)}
.snipcap .by{display:block;font-family:var(--disp);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.mybody .fsgrid{grid-template-columns:repeat(3,1fr);padding:0}

/* ---- toast ---- */
.fan-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);z-index:130;background:#0b0f1ff5;border:1px solid var(--glow);border-radius:10px;padding:11px 16px;font-size:12.5px;color:var(--ink);box-shadow:0 8px 30px #05060ccc;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}
.fan-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================================================ moderation (settings tab) === */
.atab .qc{font-family:var(--body);font-size:10px;font-weight:600;background:#3a2f14;color:var(--gold);border-radius:9px;padding:1px 7px;letter-spacing:0;margin-left:4px}
.badge.live{background:#1d3a2a;color:var(--win)}
.tgl.locked{opacity:.6;cursor:not-allowed;pointer-events:none}
.qfilters{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:#0d1120}
.qchip{height:30px;padding:0 13px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--mut);font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.qchip.on{border-color:var(--glow);color:var(--ink)}
.qchip b{font-family:var(--body);font-weight:600}
.grphead .cnt{margin-left:auto;letter-spacing:.04em;text-transform:none;font-family:var(--body);font-weight:500;color:var(--mut)}
.grphead .allbtn{margin-left:12px;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--win);cursor:pointer;border:1px solid #3ac7765c;border-radius:5px;padding:3px 9px}
.qrow{display:grid;grid-template-columns:120px 1fr 180px;gap:14px;align-items:start;padding:14px 20px;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:none}
.qmedia{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#05060c;border:1px solid var(--line)}
.qmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qmedia .qplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#05060c9e;border:1px solid #ffffff3d;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.qmedia .qt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px}
.qmedia .qdur{position:absolute;bottom:5px;right:5px;background:#05060cd6;font-family:var(--disp);font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px}
.qtype{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:9px;border:1px dashed #39447a;background:var(--panel2);font-size:19px;color:var(--mut)}
.qbody{min-width:0}
.qwho{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qwho img{width:20px;height:20px;border-radius:50%}
.qwho b{font-size:12.5px;font-weight:600}
.qtm{font-family:var(--disp);font-size:9.5px;color:var(--mut);letter-spacing:.04em}
.qctx{font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);border:1px solid #39447a;border-radius:3px;padding:2px 7px}
.qtext{font-size:13.5px;line-height:1.5;margin-top:6px;overflow-wrap:anywhere}
.qcap{font-size:13px;line-height:1.45;margin-top:6px}
.qcap em{font-style:normal;color:var(--mut);font-size:11.5px;display:block;margin-top:3px}
.flagline{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:11px;color:var(--gold)}
.qacts{display:flex;flex-direction:column;gap:7px}
.qacts .r3{display:flex;gap:7px}
.qacts .ap{flex:1;height:36px;border-radius:8px;border:1px solid var(--win);background:#3ac7761a;color:var(--win);font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.qacts .rj{flex:1;height:36px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mut);font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.qacts .rj:hover{border-color:var(--gold);color:var(--gold)}
.qacts .takedown{height:36px;border-radius:8px;border:1px solid #e1261c7a;background:#e1261c14;color:#ff8a80;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.rejopen{grid-column:1/-1;margin-top:11px;border:1px solid #f2b63244;background:#f2b6320d;border-radius:11px;padding:12px 14px}
.rejopen .rt{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rejopen .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.rejopen .chips span{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--mut);display:inline-flex;align-items:center;cursor:pointer}
.rejopen .chips span.on{border-color:var(--gold);color:var(--gold)}
.rejopen .ta2{width:100%;box-sizing:border-box;margin-top:10px;background:var(--panel);border:1px solid var(--glow);border-radius:9px;padding:10px 12px;font-size:12.5px;color:var(--ink);line-height:1.45;box-shadow:0 0 0 3px #5b83f51f;resize:vertical;min-height:44px}
.rejopen .ta2:focus{outline:none}
.rejopen .frow{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rejopen .frow .n2{font-size:11px;color:var(--mut);line-height:1.4}
.rejopen .frow .send2{margin-left:auto;height:34px;padding:0 16px;border-radius:8px;background:var(--gold);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.rejopen .frow .cancel{height:34px;padding:0 13px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mut);font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.modempty{padding:34px 20px;text-align:center}
.modempty .big{font-size:30px}
.modempty b{display:block;font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:9px}
.modempty p{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.5}

/* ---- cross-game aggregates: Fan Wall rail card + From the Crowd row ---- */
.card.fanwall .hd{display:flex;align-items:center}
.card.fanwall .hd .n{margin-left:auto;font-family:var(--body);font-weight:600;font-size:10.5px;color:var(--mut);letter-spacing:0;text-transform:none}
.card.fanwall .bd{padding:0}
.fwrow{display:flex;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line)}
.fwrow img{width:26px;height:26px;border-radius:50%;flex-shrink:0}
.fwm{min-width:0}
.fww{display:flex;align-items:baseline;gap:7px}
.fww b{font-size:11.5px;font-weight:600}
.fwt{font-family:var(--disp);font-size:9px;color:var(--mut)}
.fwb{font-size:12px;line-height:1.4;margin-top:2px;color:#cfd4ea;overflow-wrap:anywhere}
.fwctx{font-family:var(--disp);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.fwadd{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);cursor:pointer}
.fromcrowd{margin:18px 0 0}
.fromcrowd.is-hidden{display:none}

@media(max-width:720px){
  .fsgrid{grid-template-columns:repeat(2,1fr)}
  .mybody .fsgrid{grid-template-columns:repeat(2,1fr)}
  .qrow{grid-template-columns:96px 1fr;gap:11px}
  .qacts{grid-column:1/-1;flex-direction:row}
  .qacts .r3{flex:1}
}

/* ================================================ game wall + tagging (phase 4) === */
/* ---- tag picker in the fan snip submit sheet ---- */
.tagpick{margin-bottom:6px}
.tagsel{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.tagsel:empty{display:none}
.tagchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 4px;border-radius:14px;border:1px solid var(--glow);background:#5b83f51f;font-size:11.5px;color:var(--ink)}
.tagchip img{width:20px;height:20px;border-radius:50%}
.tagchip b{cursor:pointer;color:var(--mut);font-weight:400;font-size:12px;padding:0 2px}
.tagsearch{width:100%;box-sizing:border-box;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;padding:0 12px}
.tagsearch:focus{outline:none;border-color:var(--glow)}
.tagres{display:flex;flex-direction:column;gap:2px;max-height:168px;overflow:auto;margin-top:6px}
.tagres:empty{display:none}
.tagopt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.tagopt:hover{background:var(--panel2)}
.tagopt.on{border-color:var(--glow);background:#5b83f514}
.tagopt img{width:26px;height:26px;border-radius:50%;flex-shrink:0}
.tagopt span{font-size:12.5px}
.tagopt .tjr{font-family:var(--disp);font-weight:700;font-size:11px;color:var(--gold);min-width:26px}

/* ---- reel source attribution (promoted fan snip) ---- */
.reel-src{display:block;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a9c0ff;margin-top:4px}
.reel-src.mine{color:#7de2b8}
.reel-src.up{color:#7de2b8}
.reel-src.coach{color:var(--gold)}
.reel-src.auto{color:var(--mut)}

/* ---- game wall on the player profile ---- */
.gw-waiting{display:flex;align-items:center;gap:12px;border:1px solid #5b83f56b;background:#5b83f50f;border-radius:12px;padding:12px 15px;margin:0 0 14px;box-shadow:0 0 22px #5b83f51f}
.gw-waiting.is-hidden{display:none}
.gw-ic{width:32px;height:32px;border-radius:9px;background:#16224a;border:1px solid #39447a;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.gw-wt b{font-size:13px}
.gw-wt span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.4}
.pf-wall-n{font-family:var(--disp);font-size:10px;color:var(--mut)}
.gwrap.is-hidden{display:none}
.gwrap .ggrp{margin-bottom:18px}
.gwrap .gh{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.gwrap .gh b{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.gwrap .gh .dt{font-family:var(--disp);font-size:10px;color:var(--mut);letter-spacing:.08em}
.gwrap .gh .bar2{flex:1;height:1px;background:var(--line)}
.gwrap .gh .cnt3{font-size:11px;color:var(--mut)}
.gwrow{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.wcard{min-width:0}
.wthumb{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#05060c;border:1px solid var(--line)}
.wt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wt-ph{position:absolute;inset:0;background:linear-gradient(135deg,#161b33,#0d1120)}
.wcard.pend2 .wthumb{border-style:dashed;border-color:var(--glow)}
.wthumb .wsrc{position:absolute;top:7px;left:7px;font-family:var(--disp);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:#05060cd6;border:1px solid #5b83f57a;color:#a9c0ff}
.wthumb .pl2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#05060c99;border:1px solid #ffffff3d;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wthumb .pl2 svg{width:13px;height:13px;margin-left:2px;color:#fff}
.wthumb .wdur{position:absolute;bottom:7px;right:7px;background:#05060cd6;font-family:var(--disp);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px}
.tagwash{position:absolute;inset:0;background:#05060cb3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:0 12px}
.tagwash b{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.tagwash span{font-size:10px;color:var(--mut)}
.wcard .wb{padding:8px 2px 0}
.wcard .wcap{display:block;font-size:12.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wby{display:flex;align-items:center;gap:6px;margin-top:5px}
.wby img{width:18px;height:18px;border-radius:50%}
.wby span{font-family:var(--disp);font-size:9px;letter-spacing:.04em;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wacc{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.wacc span{height:30px;padding:0 10px;border-radius:8px;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;cursor:pointer}
.wyes{border:1px solid var(--win);background:#3ac7761f;color:var(--win)}
.wreel2{border:1px solid var(--gold);color:var(--gold)}
.wno{border:1px solid var(--line);color:var(--mut)}
.wacts2{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;align-items:center}
.wacts2 span{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.wpromote{height:28px;padding:0 10px;border:1px solid #f2b63278;border-radius:7px;color:var(--gold);display:inline-flex;align-items:center}
.wpromote:hover{box-shadow:0 0 12px #f2b6322b}
.winreel{color:var(--gold);cursor:default}
.wact{color:var(--mut)}
.wact:hover{color:var(--ink)}
/* ---- promote modal ---- */
.gw-modal{position:fixed;inset:0;z-index:120;background:#05060ccc;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.gwm-card{position:relative;width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.gwm-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--mut);font-size:14px;cursor:pointer}
.gwm-h{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.gwm-l{display:block;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:4px 0 7px}
.gwm-cap{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--glow);border-radius:10px;padding:11px 12px;color:var(--ink);font-family:var(--body);font-size:13px;box-shadow:0 0 0 3px #5b83f51f}
.gwm-cap:focus{outline:none}
.gwm-themes{display:flex;flex-wrap:wrap;gap:6px}
.gwm-themes span{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;cursor:pointer}
.gwm-themes span.on{border-color:var(--gold);color:var(--gold)}
.gwm-go{width:100%;height:46px;border-radius:11px;background:var(--gold);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:16px;cursor:pointer}
@media(max-width:720px){ .gwrow{grid-template-columns:repeat(2,1fr)} }

/* ---- Tags & My Wall prefs panel (player self-editor) ---- */
.wp-panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:16px 0;overflow:hidden}
.wp-panel.is-hidden{display:none}
.wp-hd{padding:13px 16px;border-bottom:1px solid var(--line)}
.wp-hd b{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.wp-hd span{display:block;font-size:11.5px;color:var(--mut);margin-top:3px}
.wp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wp-row:last-child{border-bottom:none}
.wp-nm{flex:1;min-width:180px;font-size:13px;font-weight:600}
.wp-nm span{display:block;font-size:11px;color:var(--mut);margin-top:2px;font-weight:500;line-height:1.45}
.wp-seg{display:flex;gap:6px;flex-wrap:wrap}
.wp-seg span{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;cursor:pointer}
.wp-seg span.on{border-color:var(--glow);color:var(--ink);box-shadow:inset 0 0 12px #5b83f51f}
.wp-badge{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:3px 9px}
.wp-badge.on{background:#1d3a2a;color:var(--win)}
.wp-badge.q{background:#3a2f14;color:var(--gold)}
.wp-stat{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* ================================================ fan PPV lock pane (phase 5) === */
.vp-novid.vp-ppv{gap:9px;background:linear-gradient(180deg,#05060cd9,#05060cf2);padding:20px}
.vp-ppv .pk{width:46px;height:46px;border-radius:50%;border:1px solid #f2b63278;background:#f2b6320f;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 0 26px #f2b6322b}
.vp-ppv b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.vp-ppv .pk-price{font-family:var(--disp);font-weight:700;font-size:34px;color:var(--gold);text-shadow:0 0 24px #f2b6323d;line-height:1.05}
.vp-ppv .pk-p{font-size:12.5px;color:var(--mut);max-width:420px;line-height:1.5}
.vp-ppv .pk-btns{margin-top:4px}
.vp-ppv .pk-b1{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:11px;background:var(--gold);border:none;color:#05060c;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 26px #f2b6324d}
.vp-ppv .pk-b1:disabled{opacity:.75;cursor:default}
.vp-ppv .pk-alt{font-size:11px;color:var(--mut)}
.vp-ppv .pk-free{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--win);border:1px solid #3ac7765c;border-radius:4px;padding:3px 9px;margin-top:3px}
.vp-ppv-wait .pk-spin{width:46px;height:46px;border-radius:50%;border:3px solid #232a4a;border-top-color:var(--glow);animation:spin 900ms linear infinite}
.vp-ppv-wait b{color:var(--glow)}
@media(max-width:520px){
  .vp-ppv .pk-price{font-size:29px}
  .vp-ppv .pk-b1{width:100%;height:50px;padding:0}
}

/* ---- My Purchases ---- */
.pbtot{font-family:var(--disp);font-size:11px;letter-spacing:.06em;color:var(--win);padding:2px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.pbrow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.pbrow:last-child{border-bottom:none}
.pbnm{flex:1;min-width:0}
.pbnm b{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbnm span{font-family:var(--disp);font-size:11px;color:var(--mut)}
.pbst{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:3px 9px;background:#1d3a2a;color:var(--win)}
.pbst.ref{background:#232a4a;color:var(--mut)}
.pbst.pend{background:#16224a;color:var(--glow)}
.pbwatch{height:32px;padding:0 13px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);cursor:pointer}
.pbwatch:hover{border-color:#39447a;color:var(--ink)}

@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================ Access & Passes (admin) === */
.connect{padding:18px 20px;display:flex;gap:16px;align-items:flex-start}
.connect.gate{border-left:3px solid var(--gold);background:#f2b6320a}
.cic{width:44px;height:44px;border-radius:11px;border:1px solid #f2b63278;background:#f2b6320f;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:0 0 20px #f2b6322b}
.cic.gr{border-color:#3ac77670;background:#3ac7760f;box-shadow:0 0 20px #3ac7762b}
.cic.bl{border-color:#5b83f57a;background:#5b83f512;box-shadow:0 0 20px #5b83f52b}
.cbd{min-width:0}
.cbd h3{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.cbd p{font-size:12.5px;color:var(--mut);line-height:1.55;margin-top:6px;max-width:640px}
.ap-onboard-msg{margin-top:12px;padding:10px 13px;border:1px solid #f2b63278;border-left:3px solid var(--gold);border-radius:9px;background:#f2b6320f;font-size:12px;color:var(--ink);line-height:1.5;max-width:640px}
.cacts{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.btn.solid{background:var(--glow);border-color:var(--glow);color:#05060c;box-shadow:0 0 18px #5b83f542}
.btn.big{height:44px;padding:0 22px;font-size:12px}
.splitrow{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:14px}
.splitrow span{flex:1;padding:12px 15px;font-size:10.5px;color:var(--mut);line-height:1.4;border-left:1px solid var(--line)}
.splitrow span:first-child{border-left:none}
.splitrow b{font-family:var(--disp);font-weight:700;font-size:22px;display:block;color:var(--ink);margin-bottom:3px}
.splitrow .keep{background:#3ac7760d}
.splitrow .keep b{color:var(--win)}
.priceset{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px}
.winput .cur2{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--mut)}
.quick{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.quick span{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-family:var(--disp);font-size:11px;font-weight:700;color:var(--mut);display:inline-flex;align-items:center;cursor:pointer}
.quick span:hover{border-color:#39447a;color:var(--ink)}
.quick .free{color:var(--win);border-color:#3ac7765c}
.calc{border:1px solid var(--line);border-radius:11px;background:var(--panel2);padding:13px 15px}
.calc .cr{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--mut);padding:5px 0;gap:12px}
.calc .cr b{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink)}
.calc .cr.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
.calc .cr.tot b{font-size:19px;color:var(--win)}
#ap-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
#ap-kpis .kpi{padding:15px 16px;border-right:1px solid var(--line)}
#ap-kpis .kpi:last-child{border-right:none}
#ap-kpis .kpi b{font-family:var(--disp);font-weight:700;font-size:24px;display:block}
#ap-kpis .kpi b.gr{color:var(--win)}
#ap-kpis .kpi span{font-family:var(--disp);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.grow{display:grid;grid-template-columns:1fr 118px 80px 100px;gap:14px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line);font-size:12.5px}
.grow:last-child{border-bottom:none}
.grow.hd2{background:#0d1120;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.grow .g3 b{font-weight:600}
.gpwrap{display:inline-flex;align-items:center;gap:5px}
.gpwrap .cur2{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--mut)}
.gprice{width:66px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;padding:0 8px}
.gprice:focus{outline:none;border-color:var(--glow)}
.gprice.saved{border-color:var(--win)}
.grow .free2{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
@media(max-width:640px){
  .priceset{grid-template-columns:1fr}
  #ap-kpis{grid-template-columns:repeat(2,1fr)}
  .grow{grid-template-columns:1fr auto;gap:8px}
}

/* ================================================ season passes (phase 5b) === */
/* Cross-sell link on the PPV lock pane — hidden until school.js confirms this
   school sells passes (body.has-passes), so it never dangles with nothing behind it. */
.vp-ppv .pk-passes{display:none}
body.has-passes .vp-ppv .pk-passes{display:block;margin-top:2px}
.vp-ppv .pk-passes a{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--gold);text-decoration:none;border-bottom:1px dashed #f2b6324d;padding-bottom:1px}
.vp-ppv .pk-passes a:hover{color:#ffd166;border-bottom-color:var(--gold)}

/* ---- fan compare modal ---- */
.fm-card.passes{max-width:720px}
.passbody{padding-top:2px}
.passgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:6px}
.ptile{border:1px solid var(--line);border-radius:14px;padding:16px 15px;display:flex;flex-direction:column;gap:7px;background:var(--panel2)}
.ptile.anchor{background:transparent;border-style:dashed}
.ptile.prog{border-color:#5b83f55c;box-shadow:0 0 22px #5b83f51f}
.ptile.school{border-color:#f2b6325c;box-shadow:0 0 22px #f2b6321f}
.pt-tag{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.ptile.prog .pt-tag{color:var(--glow)}
.ptile.school .pt-tag{color:var(--gold)}
.pt-title{font-size:13.5px;font-weight:600;line-height:1.3}
.pt-price{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;color:var(--ink)}
.ptile.school .pt-price{color:var(--gold)}
.pt-price span{font-family:var(--body);font-size:12px;font-weight:400;color:var(--mut);margin-left:2px}
.pt-sub{font-size:11.5px;color:var(--mut);line-height:1.45}
.pt-save{font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--win);align-self:flex-start;border:1px solid #3ac7765c;border-radius:5px;padding:3px 8px}
.pt-end{font-size:10.5px;color:var(--mut);margin-top:auto}
.pt-buy{margin-top:6px;height:42px;border:none;border-radius:10px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.06em;cursor:pointer}
.ptile.prog .pt-buy{background:var(--glow);color:#05060c;box-shadow:0 0 18px #5b83f542}
.ptile.school .pt-buy{background:var(--gold);color:#05060c;box-shadow:0 0 18px #f2b6324d}
.pt-buy:disabled{opacity:.7;cursor:default}
.pt-have{margin-top:6px;height:42px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--win);border:1px solid #3ac7765c;border-radius:10px}
.passfoot{font-size:11px;color:var(--mut);text-align:center;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.passfoot .pass-mine{color:var(--glow);text-decoration:none}
.passfoot .pass-mine:hover{text-decoration:underline}
.pbsub{flex-basis:100%;font-size:11px;color:var(--mut);margin-top:-4px}

/* ---- admin: pass list + form + passholders ---- */
.passlist{display:flex;flex-direction:column}
.passrow{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line)}
.passrow:last-child{border-bottom:none}
.pr-main{flex:1;min-width:0}
.pr-main b{font-size:13.5px;font-weight:600;margin-right:8px}
.pr-sub{font-size:11.5px;color:var(--mut);margin-top:4px}
.pr-sold{text-align:center;flex-shrink:0}
.pr-sold b{font-family:var(--disp);font-weight:700;font-size:20px;display:block}
.pr-sold span{font-family:var(--disp);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pr-acts{display:flex;gap:6px;flex-shrink:0}
.mini.danger{color:#f2848a;border-color:#f2848a3d}
.mini.danger:hover{border-color:#f2848a;color:#ff9ca1}
.passform{padding:18px 20px;max-width:560px}
.passform h3{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.pf-row{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.pf-scope{display:flex;gap:16px;flex-wrap:wrap}
.pf-scope label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer}
.pf-prog select,#pf-title,#pf-ends{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:13px;padding:0 11px;max-width:340px}
.pf-prog select:focus,#pf-title:focus,#pf-ends:focus,#pf-price:focus{outline:none;border-color:var(--glow)}
#pf-price{width:96px;height:38px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:var(--body);font-size:14px;padding:0 10px;border-radius:0 9px 9px 0;border-left:none}
.passform .winput{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding-left:11px;max-width:130px}
.passform .winput:focus-within{border-color:var(--glow)}
.passform .winput #pf-price{border:none;background:transparent}
.pf-check{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer}
.pf-hint{font-size:11px;color:var(--mut);line-height:1.45}
.pf-acts{display:flex;gap:10px;margin-top:6px}
.btn.sm{height:34px;padding:0 15px;font-size:11px}
.holdhd{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:4px}
.holdhd span{font-family:var(--disp);font-size:11px;letter-spacing:.06em;color:var(--mut)}
.holdrow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.holdrow:last-child{border-bottom:none}
.holdrow .hn{flex:1;min-width:0}
.holdrow .hn b{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holdrow .hn span{font-family:var(--disp);font-size:11px;color:var(--mut)}

/* School Info contacts + School Admins forms (settings page) */
.contact-fm{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:14px 2px;border-top:1px solid var(--line);margin-top:10px}
.contact-fm .field{display:flex;flex-direction:column;gap:5px}
.contact-fm .field label{font-family:var(--disp);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.contact-fm input[type=text],.contact-fm input[type=email],.contact-fm select{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-family:var(--body);font-size:13px}
.contact-fm input:focus,.contact-fm select:focus{outline:none;border-color:var(--glow)}
.contact-fm .cf-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center}

/* Sponsor banner strip — paid image placements directly under the fan player.
   Distinct from the rail .sponsors card, which is a text credit list. */
.ad-strip{position:relative;margin:14px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.ad-slide{display:none;position:relative}
.ad-slide.on{display:block}
.ad-slide a{display:block;line-height:0}
.ad-img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;background:var(--bg)}
/* Paid placements have to be identifiable as such, not mistaken for school content. */
.ad-mark{position:absolute;top:8px;right:10px;font-family:var(--disp);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);background:var(--bg);opacity:.9;padding:2px 7px;border-radius:20px;line-height:1.6}
@media (max-width:700px){.ad-img{max-height:120px}}

/* Ad banner admin rows (settings > Ads & Announcements) */
.sponsor-fm input[type=date],.sponsor-fm input[type=file]{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-family:var(--body);font-size:13px}
.sponsor-fm input[type=file]{padding:7px 10px;height:auto}
.sponsor-fm label.bf-file{grid-column:1/-1}
.banner-row{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line)}
.banner-row:last-child{border-bottom:none}
.banner-thumb{width:104px;height:44px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:var(--bg);flex:none}
.banner-thumb.empty{display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.banner-stats{display:block;font-family:var(--disp);font-size:11.5px;color:var(--mut);margin-top:3px}
.banner-stats i{font-style:normal;opacity:.7}