/* MULLIGAN picking: swipe deck, quick grid, board matrix. Game-day feel: stadium lights, big logo circles, neon pot. */
:root { --f-cond: 'Barlow Condensed', 'Bebas Neue', Impact, sans-serif; }

/* mode switch */
.pmode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 12px; background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 4px; }
.pmode button { border: 0; background: none; color: var(--mute); font: 700 14px var(--f-cond); letter-spacing: .08em; text-transform: uppercase; padding: 10px 0; border-radius: 11px; transition: .2s; }
.pmode button.on { background: var(--gold); color: #1a1200; box-shadow: 0 4px 16px rgba(245, 197, 66, .35); }
.qp-slim { display: none !important; }

/* ---- deck ---- */
.deck { position: relative; }
.dk-dots { display: flex; gap: 4px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.dot { width: 18px; height: 6px; border-radius: 4px; border: 0; background: rgba(255, 255, 255, .16); padding: 0; transition: .25s; }
.dot.got { background: #797b80; }
.dot.ok { background: #22c55e; } .dot.no { background: #ef4444; }
.dot.cur { background: var(--gold); width: 30px; box-shadow: 0 0 10px rgba(245, 197, 66, .7); }
.dot.fin { width: auto; height: auto; background: none; font-size: 13px; line-height: 6px; opacity: .55; }
.dot.fin.cur { opacity: 1; box-shadow: none; width: auto; }
.dk-count { display: none; position: absolute; right: 4px; top: 22px; z-index: 3; font: 800 15px var(--f-cond); color: var(--mute); letter-spacing: .06em; }
.dk-count b { color: var(--gold); font-size: 26px; margin-right: 3px; }

.dk-card { position: relative; border-radius: 28px; padding: 16px 12px 18px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(245, 197, 66, .22), transparent 60%), linear-gradient(180deg, #161717, #0c0817);
  border: 1px solid rgba(245, 197, 66, .28); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); animation: dkin .35s cubic-bezier(.2, .9, .3, 1.2); }
.dk-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .025) 46px 48px); pointer-events: none; }
@keyframes dkin { from { opacity: 0; transform: translateX(34px) scale(.96); } to { opacity: 1; transform: none; } }
.dk-top { display: flex; justify-content: space-between; gap: 8px; font: 600 12px var(--f-body); color: var(--mute); margin-bottom: 10px; position: relative; }
.dk-top .st.in { color: #ff6b6b; font-weight: 800; }
.dk-vsrow { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; position: relative; }
.dk-t { position: relative; border: 0; background: none; color: inherit; display: grid; justify-items: center; gap: 4px; padding: 6px 2px 4px; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dk-t:disabled { cursor: default; }
.dk-lg { position: relative; width: min(30vw, 128px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 14%;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--tc) 55%, #fff 12%), color-mix(in srgb, var(--tc) 70%, #000 45%) 78%);
  border: 3px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 28px color-mix(in srgb, var(--tc) 45%, transparent), inset 0 -8px 18px rgba(0, 0, 0, .35); transition: transform .28s cubic-bezier(.2, .9, .3, 1.5), border-color .2s, box-shadow .2s; }
.dk-lg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.dk-lg span { font: 800 22px var(--f-cond); }
.dk-ck { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #052b12; font-style: normal; font-weight: 900; font-size: 20px; border: 3px solid #0c0817; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.8); }
.dk-t:not(:disabled):active .dk-lg { transform: scale(.93); }
.dk-t.on .dk-lg { transform: scale(1.1); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245, 197, 66, .3), 0 0 40px color-mix(in srgb, var(--tc) 70%, var(--gold)); }
.dk-t.on .dk-ck { transform: scale(1); }
.dk-t.pop .dk-lg { animation: dkpop .42s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes dkpop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1.1); } }
.dk-t b { font: 800 clamp(20px, 6vw, 26px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.dk-t small { font: 600 11px var(--f-body); color: var(--mute); }
.dk-t.on b { color: var(--gold); }
.dk-t.lose { opacity: .45; } .dk-t.win .dk-lg { border-color: #22c55e; }
.dk-mid { text-align: center; display: grid; gap: 3px; }
.dk-vs { font: 800 26px var(--f-cond); color: rgba(255, 255, 255, .35); letter-spacing: .08em; }
.dk-sc { font: 800 26px var(--f-cond); } .dk-sc i { font-style: normal; color: var(--mute); margin: 0 2px; }
.dk-mid small { font: 700 11px var(--f-body); color: var(--gold); line-height: 1.2; }
.dk-hint { text-align: center; margin-top: 12px; font: 600 13px var(--f-body); color: var(--mute); position: relative; }
.dk-hint .ok { color: #22c55e; font-weight: 800; } .dk-hint .no { color: #ef6b6b; font-weight: 800; }
.dk-card.has .dk-hint { color: #cfc4ea; }
.dk-glow { position: absolute; top: 0; bottom: 0; width: 40%; opacity: 0; transition: opacity .15s; pointer-events: none; }
.dk-glow.l { left: 0; background: linear-gradient(90deg, rgba(245, 197, 66, .4), transparent); }
.dk-glow.r { right: 0; background: linear-gradient(270deg, rgba(245, 197, 66, .4), transparent); }
.dk-card.go-l .dk-glow.l, .dk-card.go-r .dk-glow.r { opacity: 1; }
.dk-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.dk-nav .mini:disabled { opacity: .3; }

/* final check + locked */
.dk-card.fin, .dk-card.done { text-align: center; padding: 22px 16px; }
.dk-card h3 { font: 800 34px var(--f-cond); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; position: relative; }
.fin-ring { --p: 0; width: 120px; height: 120px; margin: 4px auto 14px; border-radius: 50%; display: grid; place-content: center; position: relative;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.fin-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #0f0a1d; }
.fin-ring b, .fin-ring span { position: relative; } .fin-ring b { font: 800 46px/1 var(--f-cond); } .fin-ring span { font: 600 12px var(--f-body); color: var(--mute); }
.fin-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; position: relative; }
.fc { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); background: #18191a; display: grid; place-items: center; padding: 6px; color: var(--mute); font: 800 18px var(--f-cond); }
.fc.none { border-style: dashed; border-color: #ef6b6b; color: #ef6b6b; animation: nudge 1.2s infinite; }
.fc.ok { border-color: #22c55e; } .fc.no { border-color: #ef4444; }
.fc .fl, .fc img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes nudge { 50% { transform: scale(1.08); } }
.miss { color: #ef9a9a; font-size: 14px; margin: 0 0 10px; }
.tbs { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 12px; margin: 8px 0 14px; position: relative; font-size: 13px; color: var(--mute); }
.tbs b { color: var(--txt, #f6f0e4); font: 800 18px var(--f-cond); text-transform: uppercase; }
.stp { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; }
.stp button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: #18191a; color: #fff; font: 800 18px var(--f-cond); }
.stp input { width: 86px; height: 52px; text-align: center; font: 800 34px var(--f-cond); border-radius: 14px; border: 2px solid var(--gold); background: #0c0817; color: var(--gold); }
.lockit { width: 100%; font-size: 18px; position: relative; }
.lockit:disabled { opacity: .4; }
.boom { font-size: 64px; animation: dkpop .6s cubic-bezier(.2, .9, .3, 1.5); }
.dk-card.done p { color: var(--mute); margin: 0 0 12px; position: relative; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px; animation: cf 2s ease-in forwards; }
@keyframes cf { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); opacity: .9; } }

/* ---- quick grid ---- */
.gpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gcell { display: grid; grid-template-columns: 1fr 14px 1fr; align-items: center; gap: 2px; padding: 8px 6px 6px; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.gcell em { font: 700 11px var(--f-body); color: var(--mute); text-align: center; font-style: normal; }
.gcell small { grid-column: 1 / -1; text-align: center; font: 600 10px var(--f-body); color: var(--mute); margin-top: 4px; }
.gc { position: relative; border: 0; background: none; color: inherit; display: grid; justify-items: center; gap: 2px; padding: 0; }
.gc span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 9px; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--tc) 55%, #fff 10%), color-mix(in srgb, var(--tc) 70%, #000 45%) 80%); border: 2px solid rgba(255, 255, 255, .12); transition: transform .22s cubic-bezier(.2, .9, .3, 1.6), box-shadow .2s, border-color .2s; }
.gc span img { width: 100%; height: 100%; object-fit: contain; }
.gc b { font: 800 14px var(--f-cond); letter-spacing: .05em; }
.gc i { position: absolute; top: -3px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: #052b12; font-style: normal; font-weight: 900; font-size: 12px; display: grid; place-items: center; border: 2px solid #0c0817; transform: scale(0); transition: transform .25s cubic-bezier(.2, .9, .3, 1.8); }
.gc:not(:disabled):active span { transform: scale(.9); }
.gc.on span { transform: scale(1.1); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 197, 66, .3), 0 0 22px color-mix(in srgb, var(--tc) 60%, var(--gold)); }
.gc.on i { transform: scale(1); }
.gc:not(.on):not(:disabled) { opacity: .92; }
.gcell:has(.gc.on) .gc:not(.on) { opacity: .45; }
.gc.win span { border-color: #22c55e; } .gc.lose { opacity: .4; } .gc:disabled { cursor: default; }
.gcell.lk { opacity: .75; }

/* ---- the board matrix ---- */
.bx-wrap { margin: 0 -16px 8px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bx { --nw: 124px; --cw: 54px; display: grid; min-width: calc(var(--nw) + var(--n) * var(--cw)); background: #070510; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.bx-hd, .bx-r { display: grid; grid-template-columns: var(--nw) repeat(var(--n), var(--cw)); align-items: stretch; }
.bx-hd { background: #0d0a18; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bx-pot { position: sticky; left: 0; z-index: 2; background: #0a1a10; display: grid; place-items: center; border-right: 1px solid rgba(255, 255, 255, .08); }
.bx-pot b { font: 800 30px var(--f-cond); color: #6df0a0; text-shadow: 0 0 16px rgba(34, 197, 94, .7), 0 0 4px rgba(34, 197, 94, .9); }
.bx-h { display: grid; gap: 2px; padding: 6px 2px 4px; justify-items: center; }
.bx-h span { display: flex; align-items: center; gap: 3px; font: 800 12px var(--f-cond); }
.bx-h img { width: 17px; height: 17px; object-fit: contain; }
.bx-h em { font: 700 8px var(--f-body); color: var(--mute); font-style: normal; letter-spacing: .06em; }
.bx-h.live em { color: #ff6b6b; }
.bx-r { border-top: 1px solid rgba(255, 255, 255, .06); }
.bx-r.me { background: rgba(245, 197, 66, .07); }
.bx-n { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #0b0814; border-right: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.bx-r.me .bx-n { background: #1a1408; }
.bx-n .rk { font: 800 11px var(--f-cond); color: var(--mute); width: 12px; }
.bx-n b { display: block; font: 800 15px var(--f-cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
.bx-n small { font: 600 10px var(--f-body); color: var(--mute); } .bx-n small em { font: 800 13px var(--f-cond); color: var(--gold); font-style: normal; }
.bx-c { position: relative; display: grid; place-items: center; padding: 5px 0; }
.bx-c span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 6px; background: #1a1528; border: 2px solid rgba(255, 255, 255, .12); }
.bx-c span img { width: 100%; height: 100%; object-fit: contain; }
.bx-c.ok span { border-color: #22c55e; } .bx-c.no span { border-color: #ef4444; opacity: .55; }
.bx-c i { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 900; border: 2px solid #070510; }
.bx-c.ok i { background: #22c55e; color: #052b12; } .bx-c.no i { background: #ef4444; color: #fff; }
.bx-c.hid { font-size: 14px; opacity: .55; } .bx-c.none::after { content: ''; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .04); }

@media (prefers-reduced-motion: reduce) { .dk-card, .dk-t.pop .dk-lg, .boom, .fc.none, .confetti i { animation: none !important; } }

/* ---- the lounge (chat) ---- */
.lounge { display: grid; gap: 10px; }
.lg-hd b { font: 800 26px var(--f-cond); text-transform: uppercase; letter-spacing: .03em; display: block; }
.lg-hd small { color: var(--mute); font-size: 12px; }
.lg-warn { font-size: 12px; color: #d9c58a; background: rgba(245, 197, 66, .09); border: 1px solid rgba(245, 197, 66, .25); border-radius: 12px; padding: 8px 10px; }
.lg-feed { display: flex; flex-direction: column; gap: 3px; max-height: 52vh; min-height: 220px; overflow-y: auto; padding: 10px 6px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .08); scrollbar-width: thin; }
.cdiv { text-align: center; margin: 8px 0 4px; } .cdiv span { font: 700 11px var(--f-body); color: var(--mute); background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 3px 10px; }
.csys { text-align: center; font: 600 12px var(--f-body); color: var(--gold); margin: 6px 0; }
.cm { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; max-width: 92%; }
.cm.grp { margin-top: 1px; } .cm.mine { align-self: flex-end; flex-direction: row-reverse; }
.cav, .cav-sp { flex: none; width: 34px; height: 34px; }
.cav { border: 0; background: none; padding: 0; border-radius: 50%; } .cav .av { width: 34px; height: 34px; }
.cb { min-width: 0; }
.cn { display: flex; align-items: center; gap: 6px; margin: 0 0 2px 4px; flex-wrap: wrap; }
.cn button { border: 0; background: none; color: var(--gold); font: 800 14px var(--f-cond); letter-spacing: .04em; padding: 0; text-transform: uppercase; }
.cs { font: 600 10px var(--f-body); color: var(--mute); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 2px 7px; }
.bub { position: relative; background: #1a1b1c; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px 18px 18px 6px; padding: 8px 12px 18px; min-width: 70px; }
.cm.mine .bub { background: linear-gradient(180deg, #5d5f62, #3f4043); border-color: rgba(168, 171, 179, .5); border-radius: 18px 18px 6px 18px; }
.cm.grp .bub { border-radius: 8px 18px 18px 8px; } .cm.mine.grp .bub { border-radius: 18px 8px 8px 18px; }
.ct { font: 500 15px/1.35 var(--f-body); word-break: break-word; white-space: pre-wrap; } .ct a { color: #ffd964; }
.cimg { display: block; max-width: min(260px, 64vw); max-height: 300px; border-radius: 12px; margin: 2px 0 6px; cursor: zoom-in; }
.ctime { position: absolute; right: 10px; bottom: 3px; font: 600 10px var(--f-body); color: rgba(255, 255, 255, .45); }
.quote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--gold); background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 4px 8px; margin: 0 0 6px; color: #d8cfee; font: 500 12px var(--f-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quote b { display: block; color: var(--gold); font: 800 12px var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.cacts { position: absolute; top: -20px; right: 6px; display: none; gap: 2px; background: #120d20; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 2px 4px; z-index: 3; }
.cm.mine .cacts { right: auto; left: 6px; }
.bub:hover .cacts, .bub:focus-within .cacts { display: flex; }
.cacts button { border: 0; background: none; font-size: 16px; padding: 3px 4px; border-radius: 8px; color: #fff; }
.rxs { display: flex; gap: 4px; flex-wrap: wrap; margin: 3px 4px 0; }
.rx { border: 1px solid rgba(255, 255, 255, .15); background: #1a1b1c; border-radius: 999px; padding: 2px 8px; font-size: 13px; color: #fff; display: inline-flex; gap: 4px; align-items: center; }
.rx b { font: 700 11px var(--f-body); color: var(--mute); } .rx.me { border-color: var(--gold); background: rgba(245, 197, 66, .15); }
.cm.flash .bub { animation: cflash 1.1s; } @keyframes cflash { 30% { box-shadow: 0 0 0 4px rgba(245, 197, 66, .5); } }
.lg-rp, .lg-pv { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--gold); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: #d8cfee; }
.lg-rp span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-rp button, .lg-pv button { border: 0; background: none; color: #fff; font-size: 15px; }
.lg-pv { border-left: 0; } .lg-pv img { height: 70px; border-radius: 10px; }
.lg-bar { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 78px; background: #0c0814; padding: 8px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); z-index: 5; }
.lg-bar textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: #171819; color: #fff; border-radius: 16px; padding: 11px 14px; font: 500 15px/1.3 var(--f-body); max-height: 120px; }
.lg-ph, .lg-send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; border: 0; cursor: pointer; background: #1a1b1c; color: #fff; }
.lg-send { background: linear-gradient(180deg, #ffd964, #e0a216); color: #1a1200; font-weight: 900; }
.lg-big { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 16px; } .lg-big img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.cstat .cs-hd { display: flex; align-items: center; gap: 12px; } .cstat .cs-hd > div { flex: 1; } .cstat .cs-hd b { font: 800 26px var(--f-cond); text-transform: uppercase; display: block; } .cstat .cs-hd small { color: var(--mute); }
.cstat .cs-hd .av { width: 64px; height: 64px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.cs-grid div { background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 10px 6px; text-align: center; }
.cs-grid b { font: 800 24px var(--f-cond); display: block; color: var(--gold); } .cs-grid span { font: 600 11px var(--f-body); color: var(--mute); }
@media (hover: none) { .cacts { display: flex; position: static; background: none; border: 0; padding: 0; margin-top: 4px; opacity: .55; } .bub { padding-bottom: 20px; } .cacts button { font-size: 14px; } .ctime { bottom: 4px; } }
.sheet-bg { z-index: 400; }
.cstat { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* pop-up sheets (stat card, matchup picker) must sit above the footer */
main.mg.lp { isolation: auto; z-index: auto; position: relative; }
.lg-live { font-size: 12px; color: #7ef0a5; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3); border-radius: 12px; padding: 8px 10px; }
.lg-gif { font: 800 13px var(--f-cond); letter-spacing: .05em; }
.cimg.gif { max-width: min(240px, 60vw); }
.gifsheet { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.gif-q { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: #171819; color: #fff; font: 500 15px var(--f-body); margin-bottom: 10px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; max-height: 50vh; align-content: start; }
.gif-grid button { border: 0; padding: 0; background: #171819; border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-by { text-align: center; font: 700 10px var(--f-body); color: var(--mute); margin-top: 8px; letter-spacing: .1em; text-transform: uppercase; }

/* ===== the Sunday Board look (follows gameday.grok.me): pure black, stadium video, WEEK header, grid of logo circles ===== */
.pmode.two { grid-template-columns: 1fr 1fr; }
.sb-full { margin-inline: calc(50% - 50vw); background: #000; font-family: 'Barlow', system-ui, sans-serif; position: relative; }
.sb-hero { height: clamp(150px, 38vw, 250px); overflow: hidden; background: radial-gradient(70% 90% at 30% 0, #5b4a1c 0, transparent 60%), radial-gradient(70% 90% at 80% 0, #4a4a2a 0, transparent 55%), linear-gradient(180deg, #14180f, #06080a); position: relative; }
.sb-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, #000); }
.sb-week { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; background: #000; }
.sb-week > div { text-align: center; line-height: 1; }
.sb-week b { display: block; font: 700 26px 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9dff9a; text-shadow: 0 0 14px rgba(157, 255, 154, .45); }
.sb-week small { font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .18em; color: #8a8a8a; }
.sb-week small.op { color: #9dff9a; } .sb-week small.lk { color: #ff8a8a; }
.sb-week button { width: 44px; height: 44px; border: 0; background: none; color: #9dff9a; font: 400 44px/1 'Barlow Condensed', sans-serif; padding: 0; }
.sb-week button:disabled { color: #3a3a3a; }

.sb-wrap { overflow-x: auto; padding: 0 0 6px; background: #000; scrollbar-width: thin; scrollbar-color: #bbb #111; -webkit-overflow-scrolling: touch; }
.sb { --nw: 98px; --cw: 70px; display: grid; min-width: calc(var(--nw) + var(--n) * var(--cw)); }
.sb-hd, .sb-r { display: grid; grid-template-columns: var(--nw) repeat(var(--n), var(--cw)); align-items: stretch; }
.sb-hd { border-bottom: 1px solid #1a1a1a; }
.sb-pot { position: sticky; left: 0; z-index: 3; background: #0d0d0d; display: grid; place-items: center; border-right: 1px solid #1a1a1a; }
.sb-pot b { font: 700 34px 'Barlow Condensed', sans-serif; color: #9dff9a; text-shadow: 0 0 18px rgba(157, 255, 154, .6), 0 0 4px rgba(157, 255, 154, .8); letter-spacing: .02em; }
.sb-h { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 0 6px; }
.sb-h em { font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .12em; color: #6c6c6c; font-style: normal; text-transform: uppercase; margin-top: 2px; }
.sb-h em.live { color: #ff5d5d; animation: sbblink 1.2s infinite; }
@keyframes sbblink { 50% { opacity: .35; } }
.sb-t { display: flex; align-items: center; justify-content: center; gap: 4px; width: 62px; height: 44px; border: 2px solid transparent; border-radius: 22px; background: #111; padding: 0 6px 0 4px; color: #e8e8e8; transition: transform .15s, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.sb-t:not(:disabled):active { transform: scale(.9); }
.sb-t .lg { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.sb-t .lg img { width: 100%; height: 100%; object-fit: contain; } .sb-t .lg span { font: 700 11px 'Barlow Condensed'; }
.sb-t b { font: 700 17px 'Barlow Condensed', sans-serif; min-width: 14px; text-align: center; }
.sb-t.on { border-color: #9dff9a; background: #0f1d0f; box-shadow: 0 0 14px rgba(157, 255, 154, .45); }
.sb-t.win:not(.on) { border-color: #3a5a3a; }
.sb-t:disabled { opacity: 1; } .sb-t:disabled:not(.on) { color: #8a8a8a; }

.sb-r { border-top: 1px solid #141414; }
.sb-r.me { background: linear-gradient(90deg, rgba(157, 255, 154, .07), transparent 70%); }
.sb-n { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 8px; background: #0a0a0a; border-right: 1px solid #1a1a1a; min-width: 0; }
.sb-r.me .sb-n { background: #0e150e; }
.sb-n .rk { font: 700 12px 'Barlow Condensed'; color: #6c6c6c; width: 10px; }
.sb-n .av { width: 34px; height: 34px; flex: none; }
.sb-n .nm { min-width: 0; line-height: 1.05; } .sb-n b { display: block; font: 700 15px 'Barlow Condensed', sans-serif; color: #f1f1f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48px; }
.sb-n small { font: 600 11px 'Barlow Condensed', sans-serif; color: #7a7a7a; letter-spacing: .03em; } .sb-n small em { color: #f6d14a; font-style: normal; font-weight: 800; font-size: 13px; }
.sb-c { position: relative; display: grid; place-items: center; padding: 6px 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.sb-c::before { content: ''; position: absolute; width: 52px; height: 52px; border-radius: 50%; background: #141414; transition: background .2s, box-shadow .2s; }
.sb-c .lg, .sb-c > span { position: relative; width: 52px; height: 52px; display: grid; place-items: center; padding: 9px; border-radius: 50%; }
.sb-c .lg img { width: 100%; height: 100%; object-fit: contain; }
.sb-c .plus { font-size: 22px; color: #3a3a3a; padding: 0; }
.sb-c.has::before { background: #1d1d1d; box-shadow: inset 0 0 0 2px #2c2c2c; }
.sb-c.ok::before { box-shadow: inset 0 0 0 2px #2f9d4e; } .sb-c.no::before { box-shadow: inset 0 0 0 2px #b83a3a; } .sb-c.no .lg { opacity: .55; }
.sb-c i { position: absolute; right: 6px; bottom: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 900; border: 2px solid #000; }
.sb-c.ok i { background: #3ddc6a; color: #04210d; } .sb-c.no i { background: #ef4444; color: #fff; }
.sb-c.hid { opacity: .6; } .sb-c.hid span { font-size: 15px; padding: 0; }
button.sb-c:not(:disabled):active::before { background: #2a3a2a; }
button.sb-c.has:not(:disabled)::before { box-shadow: inset 0 0 0 2px #9dff9a55; }
.sb-hint { padding: 10px 16px 4px; font: 600 13px 'Barlow', sans-serif; color: #8a8a8a; } .sb-hint b { color: #9dff9a; font: 700 18px 'Barlow Condensed'; } .sb-hint span { color: #9dff9a; font-weight: 800; letter-spacing: .08em; }
.sb-tb { display: flex; align-items: center; gap: 12px; margin: 10px 16px 14px; padding: 12px 14px; background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 16px; }
.sb-tb > span { flex: 1; font: 700 15px 'Barlow Condensed'; letter-spacing: .1em; color: #e6e6e6; } .sb-tb small { display: block; font: 500 12px 'Barlow'; letter-spacing: 0; color: #7a7a7a; margin-top: 2px; }
.sb-tb input { width: 92px; height: 50px; text-align: center; font: 700 30px 'Barlow Condensed'; background: #000; color: #9dff9a; border: 2px solid #2b3d2b; border-radius: 14px; }
.sb-tb input:focus { outline: 0; border-color: #9dff9a; }
.quick-picks { margin: 8px 0 !important; }
.prog[hidden] { display: none !important; }

/* notifications card */
.nt { margin: 0 0 14px; padding: 14px; }
.nt-hd b { font: 800 20px var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.nt-state { margin: 10px 0 4px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.nt-state.on { color: #7ef0a5; background: rgba(34, 197, 94, .1); } .nt-state.off { color: #ef9a9a; background: rgba(239, 68, 68, .1); } .nt-state.warn { color: #f5d27a; background: rgba(245, 197, 66, .1); }
.nt-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; color: inherit; padding: 10px 2px; border-top: 1px solid rgba(255, 255, 255, .07); }
.nt-row .ic { font-size: 22px; width: 30px; text-align: center; } .nt-row span:nth-child(2) { flex: 1; } .nt-row b { display: block; font-size: 15px; } .nt-row small { color: var(--mute); font-size: 12px; }
.sw { width: 46px; height: 28px; border-radius: 999px; background: #262728; position: relative; transition: background .2s; flex: none; }
.sw u { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.2, .9, .3, 1.4); }
.nt-row.on .sw { background: #f5c542; } .nt-row.on .sw u { transform: translateX(18px); }
.nt-foot { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }

.demo-pill { font: 800 9px var(--f-body); letter-spacing: .14em; background: rgba(246, 207, 95, .18); color: var(--gold); border: 1px solid rgba(246, 207, 95, .4); border-radius: 999px; padding: 2px 7px; font-style: normal; vertical-align: middle; }
/* the three how-it-works tiles stay in one row on phones */
.how { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; margin: 14px 0 2px; } .how div { padding: 10px 6px !important; font-size: 11px !important; line-height: 1.25; } .how span { font-size: 22px !important; margin-bottom: 2px; }
.sb-week small.ip { color: #f6cf5f; }
/* the pool tabs stick right under the header (it's shorter now), never over it */
.tabs { top: calc(46px + max(0px, calc(env(safe-area-inset-top) - 15px))) !important; z-index: 20; }