/* League Nights (2026-10-21). App shell per the PWA playbook: one scroller, fixed tab bar as its SIBLING,
   form fields >= 16px (no iOS zoom), no overflow:hidden on html/body, dvh in a browser tab. Brand = the lap
   passport's dark look (public_html/p/index.html). */
@font-face { font-family:'Outfit'; src:url('/assets/fonts/Outfit-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root { --bg:#0D0C0C; --card:#171514; --card2:#1f1b19; --line:#2a2523; --fg:#F3F1F0; --dim:#A39E9C; --o:#FF6800;
        --ok:#4cd28a; --bad:#ff5d5d; --tab-h:62px; --app-h:100vh; }
@supports (height:100dvh) { :root { --app-h:100dvh; } }
html.pwa-standalone { --app-h:100vh; }

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); -webkit-text-size-adjust:100%; }
body { font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg); background:var(--bg); line-height:1.45; }
a { color:var(--o); }
b { font-weight:700; }
input, select, textarea, button { font-family:inherit; }
input, select, textarea { font-size:16px !important; }

.app { position:relative; height:var(--app-h); }
.scroll { height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
          background:radial-gradient(90% 32% at 50% 0%, #241d19 0%, rgba(13,12,12,0) 70%), var(--bg);
          padding:calc(env(safe-area-inset-top) + 14px) 18px calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px); }
.scroll > * { max-width:560px; margin-left:auto; margin-right:auto; }

.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:3px solid var(--o); }
.top img { width:132px; height:auto; display:block; }
.tag { text-align:right; font-size:12px; letter-spacing:2.2px; text-transform:uppercase; font-weight:700; color:var(--fg); line-height:1.3; }
.tag span { color:var(--dim); font-weight:600; letter-spacing:1.6px; }

.mode { margin-top:12px; padding:9px 12px; border-radius:10px; background:#3a2a00; border:1px solid #8a6400; color:#ffd77a; font-size:13px; font-weight:600; }
.wx { margin-top:12px; padding:11px 13px; border-radius:12px; font-size:14px; border:1px solid #6b4a1e; background:#2a1d10; color:#ffd7a8; }
.wx.cancelled { border-color:#7a2626; background:#2a1010; color:#ffc2c2; }

main { padding-top:16px; }
.view[hidden] { display:none; }
.kicker { font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:var(--o); font-weight:700; }
h1 { font-size:32px; font-weight:800; line-height:1.08; margin-top:4px; letter-spacing:-.4px; }
h2 { font-size:24px; font-weight:800; line-height:1.15; margin-top:4px; }
.sub { font-size:16px; color:var(--fg); margin-top:8px; }
.dim { color:var(--dim); }
.small { font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chip { font-size:12px; font-weight:700; letter-spacing:.3px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--dim); background:#121010; }
.chip.hot { color:#0D0C0C; background:var(--o); border-color:var(--o); }

.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 13px; min-width:0; }
.tile.wide { grid-column:1 / -1; }
.tile .lbl, .card .lbl, form .lbl { font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--dim); font-weight:700; }
.tile .v { font-size:20px; font-weight:800; margin-top:2px; line-height:1.15; }
.tile .s { font-size:13px; color:var(--dim); margin-top:2px; }
.tile.seats .v { color:var(--o); }
.tile.soldout .v { color:var(--bad); }
.skel { color:var(--dim); }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin-top:12px; }
.card p { margin-top:6px; font-size:15px; }
.card .v { font-size:18px; font-weight:800; margin-top:2px; }
.card .dim { font-size:14px; }
.prize-img { display:block; width:100%; max-width:440px; height:auto; margin:10px auto 2px; background:#fff; border-radius:12px; }
.card .prize-link { text-align:center; margin-top:0; }
.prize-link a { display:inline-block; padding:10px 14px; color:var(--o); font-weight:700; text-decoration:underline; }
.list { list-style:none; margin-top:6px; }
.list li { position:relative; padding-left:16px; margin-top:6px; font-size:15px; }
.list li::before { content:''; position:absolute; left:2px; top:.6em; width:6px; height:6px; border-radius:2px; background:var(--o); }

.btn { display:block; width:100%; text-align:center; text-decoration:none; border-radius:14px; padding:15px 16px; font-size:17px; font-weight:800;
       border:1px solid var(--line); background:var(--card2); color:var(--fg); margin-top:12px; cursor:pointer; }
.btn.primary { background:var(--o); border-color:var(--o); color:#0D0C0C; }
.btn.ghost { background:transparent; }
.btn[disabled] { opacity:.5; cursor:default; }
.btn.dis { opacity:.45; pointer-events:none; }
.link { background:none; border:0; color:var(--o); font-size:15px; font-weight:700; margin:14px auto 0; display:block; cursor:pointer; padding:6px; }

.rounds { list-style:none; margin-top:14px; }
.rounds li { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 13px; margin-top:8px; font-size:15px; }
.rounds .rd { flex:0 0 38px; height:38px; border-radius:10px; background:#2a1d10; color:var(--o); font-weight:800; display:grid; place-items:center; }
.rounds .rd.fin { background:var(--o); color:#0D0C0C; }
.rounds .dim { display:block; font-size:13px; margin-top:1px; }
.rounds li.off { opacity:.55; }

.foot { color:var(--dim); font-size:12px; text-align:center; margin-top:26px; }
.foot a { color:var(--dim); }

/* Tab bar: fixed, opaque, SIBLING of .scroll */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:center; background:#121010; border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom); }
.tabs a { flex:1 1 0; max-width:112px; height:var(--tab-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
          color:var(--dim); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.3px; -webkit-tap-highlight-color:transparent; }
.tabs svg { width:24px; height:24px; fill:currentColor; }
.tabs a.on { color:var(--o); }

/* Booking sheet: full screen; the keyboard overlays it */
.sheet { position:fixed; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; }
.sheet[hidden] { display:none; }
.sheet-bar { flex:0 0 auto; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:calc(env(safe-area-inset-top) + 6px) 10px 8px;
             border-bottom:1px solid var(--line); background:#121010; }
.sheet-title { text-align:center; font-weight:800; font-size:17px; }
.x { width:40px; height:40px; border-radius:20px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:16px; cursor:pointer; }
.sheet-body { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
              padding:16px 18px calc(env(safe-area-inset-bottom) + 28px); }
.sheet-body > * { max-width:520px; margin-left:auto; margin-right:auto; }
form .lbl { margin-top:18px; margin-bottom:6px; }
form .lbl:first-child { margin-top:0; }

.opts { display:grid; gap:8px; }
.opt { position:relative; display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer; }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt .dot { flex:0 0 20px; height:20px; border-radius:50%; border:2px solid var(--dim); }
.opt .t { flex:1 1 auto; min-width:0; }
.opt .t b { display:block; font-size:16px; }
.opt .t span { display:block; font-size:13px; color:var(--dim); }
.opt .p { font-size:18px; font-weight:800; }
.opt.on { border-color:var(--o); background:#21160f; }
.opt.on .dot { border-color:var(--o); background:radial-gradient(circle, var(--o) 0 45%, transparent 50%); }
.opt.dis { opacity:.45; cursor:default; }

.row.qty { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.row.qty .lbl { margin:0 0 2px; }
.step { display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px; }
.step button { width:44px; height:44px; border-radius:11px; border:0; background:var(--card2); color:var(--fg); font-size:22px; font-weight:700; cursor:pointer; }
.step button[disabled] { opacity:.35; }
.step output { min-width:34px; text-align:center; font-size:20px; font-weight:800; }

.f { display:block; margin-top:8px; }
.f span { display:block; font-size:13px; color:var(--dim); margin:0 0 4px 2px; }
.f input, .f select { width:100%; height:50px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:0 14px; outline:none; -webkit-appearance:none; appearance:none; }
.f input:focus, .f select:focus { border-color:var(--o); }
.f input.bad { border-color:var(--bad); }
.suggest { margin-top:6px; font-size:14px; color:#ffd7a8; }
.suggest button { margin-left:6px; border:1px solid var(--line); background:var(--card2); color:var(--fg); border-radius:8px; padding:5px 9px; font-size:14px; cursor:pointer; }

.check { display:flex; gap:12px; align-items:flex-start; margin-top:14px; font-size:15px; cursor:pointer; }
.check input { flex:0 0 22px; width:22px; height:22px; margin-top:1px; accent-color:var(--o); }

.err { margin-top:14px; padding:10px 12px; border-radius:10px; background:#2a1010; border:1px solid #7a2626; color:#ffc2c2; font-size:14px; }
.ok { margin-top:14px; padding:10px 12px; border-radius:10px; background:#0f2418; border:1px solid #23683f; color:#bff0d2; font-size:15px; font-weight:600; }
.total { display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:12px; border-top:1px solid var(--line); font-size:16px; }
.total b { font-size:24px; }
.fine { font-size:13px; color:var(--dim); margin-top:12px; }

.testbox { margin-top:14px; padding:12px 14px; border-radius:12px; background:#3a2a00; border:1px solid #8a6400; color:#ffd77a; font-size:14px; }
.timer { font-size:44px; font-weight:800; text-align:center; margin-top:14px; font-variant-numeric:tabular-nums; }

.ticket { margin-top:14px; border-radius:16px; border:1.5px solid var(--o); background:linear-gradient(160deg, #241812, #171514 60%); padding:14px 16px; }
.ticket .ref { font-size:13px; color:var(--dim); letter-spacing:1.5px; }
.ticket .ref b { color:var(--fg); font-size:20px; letter-spacing:2px; display:block; }
.ticket .ln { margin-top:10px; font-size:15px; }
.ticket .ln .lbl { font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--dim); font-weight:700; }
.ticket .st { display:inline-block; margin-top:10px; font-size:12px; font-weight:800; letter-spacing:1px; padding:4px 10px; border-radius:999px; background:var(--ok); color:#0D0C0C; }
.ticket .st.test { background:#ffd77a; }
.ticket .st.no { background:var(--bad); }

/* Media (10/21): still first, muted loop fades in over it once it plays (league.js wires loading/playing). */
.media { position:relative; overflow:hidden; background:#121010; }
.media .still { display:block; width:100%; height:auto; }
.media .loop { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s; pointer-events:none; }
.media .loop.on { opacity:1; }
.hero { margin:14px 0 0; border-radius:16px; border:1px solid var(--line); aspect-ratio:854/338; }
.hero figcaption { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:18px 12px 8px; font-size:11px; font-weight:600; letter-spacing:.3px;
                   color:#e9e5e3; background:linear-gradient(to top, rgba(13,12,12,.85), rgba(13,12,12,0)); }
.hero + .partner-strip, .hero + .kicker { margin-top:14px; }

.partner-strip { display:flex; align-items:center; gap:10px; margin-top:10px; margin-bottom:10px; padding:8px 12px 8px 8px; border-radius:12px;
                 background:var(--card); border:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:14px; }
.partner-strip[hidden] { display:none; }
.partner-strip img { flex:0 0 40px; width:40px; height:40px; border-radius:9px; }
.partner-strip > div { flex:1 1 auto; min-width:0; }
.partner-strip b { display:block; font-size:15px; }
.partner-strip > div span { display:block; color:var(--dim); font-size:12px; }
.draft { flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 8px; border-radius:6px;
         background:#3a2a00; border:1px solid #8a6400; color:#ffd77a; }

.sec { font-size:20px; margin-top:24px; }
.reel { display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:10px -18px 0; padding:0 18px 4px; scroll-padding:0 18px; }
.reel::-webkit-scrollbar { display:none; }
.scard { scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:0; }
.scard .frame { aspect-ratio:640/270; }
.scard .cap { padding:9px 12px 11px; }
.scard .cap b { display:block; font-size:17px; font-weight:800; margin-top:1px; }
.scard .cap span { display:block; font-size:13px; color:var(--dim); margin-top:2px; }
.scard .lbl { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--o); font-weight:700; }

.venue .pics { display:grid; grid-template-columns:1fr; gap:6px; margin:-13px -15px 12px; }
.venue .pics.two { grid-template-columns:1fr 1fr; }
.venue .pics img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.venue .pics.two img { aspect-ratio:4/3; }
.venue .pics > :first-child { border-top-left-radius:14px; }
.venue .pics > :last-child { border-top-right-radius:14px; }
.venue .pics:not(.two) > * { border-radius:14px 14px 0 0; }
.venue .pics .tclip { aspect-ratio:4/3; }
.venue .pics .tclip .still { aspect-ratio:4/3; }
#v-schedule .sec { margin-top:14px; }
.venue .map { font-weight:700; }
.venue p.small { margin-top:8px; font-size:13px; }

@media (min-width:600px) {
  .reel { grid-auto-columns:46%; margin-left:auto; margin-right:auto; padding:0 0 4px; scroll-padding:0; }
}
@media (prefers-reduced-motion:reduce) { .media .loop { display:none; } }

@media (min-width:900px) {
  .scroll { padding-top:28px; }
  h1 { font-size:38px; }
}
@media print {
  .tabs, .sheet, .mode { display:none !important; }
  .app, .scroll { height:auto; overflow:visible; }
  .view[hidden] { display:block !important; }
}
/* Friday season (10/22): pills for unconfirmed / not-yet-on-sale rounds, the dashed make-up-night row, the season line */
.rounds .tbc { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--o); border:1px solid var(--o); border-radius:999px; padding:1px 7px; margin-left:4px; vertical-align:2px; }
.rounds .tbc.soon { color:var(--dim); border-color:var(--line); }
.rounds li.brk { background:transparent; border-style:dashed; }
.rounds li.brk .rd { background:transparent; color:var(--dim); border:1px dashed var(--line); }
#v-next .season { margin-top:10px; text-align:center; }

/* Trailer (10/22): play pill over the hero, full-screen sheet with the reel */
.reel-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-62%); z-index:2; display:flex; align-items:center; gap:8px;
             padding:10px 16px 10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(13,12,12,.72);
             color:var(--fg); font:inherit; font-size:14px; font-weight:800; white-space:nowrap; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.reel-play svg { width:22px; height:22px; fill:var(--o); flex:0 0 auto; }
.reel-hero { position:relative; margin:14px auto 0; width:min(100%, calc(68dvh * 9 / 16)); aspect-ratio:9/16; border-radius:16px; overflow:hidden;
             background:#000; border:1px solid var(--line); }
.reel-hero[hidden] { display:none; }
.reel-hero video { display:block; width:100%; height:100%; object-fit:cover; }
.rh-ctrl { position:absolute; top:10px; right:10px; display:flex; gap:8px; z-index:2; }
.rh-btn { width:42px; height:42px; border-radius:21px; display:grid; place-items:center; padding:0; cursor:pointer; color:#fff;
          border:1px solid rgba(255,255,255,.25); background:rgba(13,12,12,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rh-btn svg { width:22px; height:22px; fill:currentColor; }
.rh-btn .i-play, .rh-btn.paused .i-pause { display:none; }
.rh-btn.paused .i-play { display:block; }
.rh-sound { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; white-space:nowrap;
            padding:10px 16px 10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(13,12,12,.72); color:var(--fg);
            font:inherit; font-size:14px; font-weight:800; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rh-sound svg { width:20px; height:20px; fill:var(--o); }
.rh-sound .i-on, .rh-sound.on .i-off { display:none; }
.rh-sound.on .i-on { display:block; }
.rh-sound.on { left:auto; right:10px; transform:none; padding:10px; }
.rh-sound.on span { display:none; }
.rh-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18); z-index:2; }
.rh-bar i { display:block; height:100%; width:0; background:var(--o); }

/* Season standings (11/9) */
.stand { list-style:none; display:grid; gap:0; }
.stand li { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.stand li:first-child { border-top:0; }
.stand .p { flex:0 0 24px; font-weight:800; color:var(--o); text-align:right; }
.stand .n { flex:1 1 auto; min-width:0; }
.stand .n b { display:block; font-size:16px; }
.stand .n .small { display:block; font-size:12px; line-height:1.5; }
.stand .n .small b { display:inline; font-size:inherit; color:var(--fg); }
.stand .t { flex:0 0 auto; font-weight:800; font-size:20px; }