/*
 * TipsyRounds.com — design system.
 * Mobile-first (designed at 360–430px), scaling up to desktop for site, library and admin pages.
 * Re-skin by editing the tokens in :root.
 */
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Monoton"; src: url("../fonts/monoton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0d0a1c;
  --bg-2: #15102b;
  --surface: rgba(38, 29, 72, .72);
  --surface-solid: #221a40;
  --surface-2: #2d2452;
  --surface-3: #3a2f68;
  --line: rgba(166, 107, 255, .22);
  --line-strong: rgba(166, 107, 255, .42);
  --text: #f7f4ff;
  --muted: #aba3d2;
  --dim: #7d74a8;
  --pink: #ff4f8b;
  --coral: #ff7a59;
  --amber: #ffc53d;
  --cyan: #3de0ff;
  --lime: #b6ff3d;
  --violet: #a66bff;
  --accent: var(--pink);
  --accent-2: var(--amber);
  --ok: #2fd57a;
  --bad: #ff5a6a;
  --warn: #ffb020;
  --c0: #ff4f6d; --c1: #3d8bff; --c2: #22c55e; --c3: #f5a524; --c4: #a855f7; --c5: #ec4899;
  --grad-hot: linear-gradient(135deg, #ff4f8b 0%, #ff7a59 100%);
  --grad-cool: linear-gradient(135deg, #3de0ff 0%, #a66bff 100%);
  --grad-gold: linear-gradient(135deg, #ffe07a 0%, #ffc53d 45%, #ff9f1c 100%);
  --radius: 20px;
  --radius-sm: 12px;
  --tap: 54px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage", "Inter", system-ui, sans-serif;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .75);
  --glow-pink: 0 0 0 1px rgba(255, 79, 139, .35), 0 10px 40px -10px rgba(255, 79, 139, .65);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); font: 16px/1.5 var(--font);
  background: var(--bg); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}
/* Neon night-sky backdrop */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 12% 8%, rgba(166, 107, 255, .30), transparent 60%),
    radial-gradient(38vmax 28vmax at 92% 18%, rgba(255, 79, 139, .22), transparent 60%),
    radial-gradient(40vmax 30vmax at 50% 105%, rgba(61, 224, 255, .14), transparent 60%),
    linear-gradient(180deg, #120d27 0%, var(--bg) 60%);
  animation: drift 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px);
  background-size: 34px 34px; mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
}
@keyframes drift { to { transform: translate3d(2vmax, -2vmax, 0) scale(1.05); } }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 7.5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
h4 { font-size: .95rem; font-weight: 700; }
p { margin: 0 0 .8em; }
small, .muted { color: var(--muted); }
.dim { color: var(--dim); }
.center { text-align: center; }
.hidden { display: none !important; }
.ok-text { color: var(--ok); font-weight: 700; }
.bad-text { color: var(--bad); font-weight: 700; }
.warn-text { color: var(--warn); font-weight: 700; }
.nowrap { white-space: nowrap; }
.eyebrow { font: 700 .74rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; display: inline-flex; gap: 8px; align-items: center; }
.grad-text { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neon { text-shadow: 0 0 12px rgba(255, 79, 139, .7), 0 0 32px rgba(255, 79, 139, .35); }
.neon-cyan { text-shadow: 0 0 12px rgba(61, 224, 255, .7), 0 0 30px rgba(61, 224, 255, .3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 16px 16px calc(28px + var(--safe-b)); }
.wrap-wide { width: 100%; max-width: 1160px; margin: 0 auto; padding: 16px 16px calc(28px + var(--safe-b)); }
.screen { width: 100%; max-width: 600px; margin: 0 auto; padding: 14px 16px calc(var(--tabbar-h) + 28px + var(--safe-b)); }
.screen.has-actions { padding-bottom: calc(var(--tabbar-h) + 104px + var(--safe-b)); }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.grow { flex: 1; }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.section { margin: 34px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------------------------ site header / footer */
.announce { background: var(--grad-hot); color: #fff; text-align: center; font-weight: 700; font-size: .88rem; padding: 8px 16px; }
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(13, 10, 28, .72); border-bottom: 1px solid rgba(166,107,255,.14); padding-top: var(--safe-t); }
.site-header .bar { display: flex; align-items: center; gap: 12px; max-width: 1160px; margin: 0 auto; padding: 10px 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font: 800 1.28rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(255, 79, 139, .45)); }
.brand .wm > span { color: var(--pink); text-shadow: 0 0 14px rgba(255, 79, 139, .55); }
.site-nav { display: none; gap: 4px; margin-left: 18px; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .94rem; padding: 8px 12px; border-radius: 10px; }
.site-nav a:hover, .site-nav a.active { color: var(--text); background: rgba(166,107,255,.14); }
.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.header-actions .btn { min-height: 40px; padding: 0 14px; font-size: .9rem; }
@media (min-width: 860px) { .site-nav { display: flex; } .only-mobile { display: none !important; } }
@media (max-width: 859px) { .only-desktop { display: none !important; } }

.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(5, 3, 14, .7); backdrop-filter: blur(4px); animation: fade .2s; }
.drawer .panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 340px); background: linear-gradient(180deg, #1c1538, #120d27); border-left: 1px solid var(--line); padding: calc(18px + var(--safe-t)) 18px 18px; display: flex; flex-direction: column; gap: 4px; animation: slideIn .25s cubic-bezier(.2,.8,.2,1); overflow-y: auto; }
.drawer .panel a, .drawer .panel button.link { display: flex; gap: 12px; align-items: center; padding: 14px 12px; border-radius: 14px; color: var(--text); text-decoration: none; font: 600 1.02rem var(--font); background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.drawer .panel a:hover { background: rgba(166,107,255,.14); }
.drawer .panel hr { border: 0; height: 1px; background: var(--line); margin: 8px 0; width: 100%; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(45, 36, 82, .6); color: var(--text); font-size: 1.2rem; cursor: pointer; }

.site-footer { border-top: 1px solid rgba(166,107,255,.14); margin-top: 40px; padding: 28px 16px calc(28px + var(--safe-b)); color: var(--muted); font-size: .9rem; }
.site-footer .inner { max-width: 1160px; margin: 0 auto; display: grid; gap: 18px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ------------------------------------------------------------------ cards & surfaces */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 12px 0; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card .sub { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 14px; }
.card-glow { border-color: rgba(255, 79, 139, .45); box-shadow: var(--glow-pink); }
.card-flat { background: rgba(34, 26, 64, .55); box-shadow: none; }
.card-link { display: block; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.card-link:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.count { background: var(--surface-2); color: var(--muted); border-radius: 99px; padding: 1px 9px; font: 700 .78rem var(--font); }
.hint { color: var(--muted); font-size: .9rem; }
.kbd { font: 700 .8rem ui-monospace, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px; border-radius: 16px; border: 0; overflow: hidden;
  font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform .1s ease, box-shadow .2s, opacity .15s, background .2s; touch-action: manipulation; color: var(--text);
}
.btn:active { transform: scale(.965); }
.btn:disabled, .btn.disabled { opacity: .42; pointer-events: none; filter: saturate(.4); }
.btn-primary { background: var(--grad-hot); color: #fff; box-shadow: 0 10px 28px -10px rgba(255, 79, 139, .85), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.btn-secondary { background: rgba(45, 36, 82, .85); border: 1px solid var(--line-strong); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }
.btn-cool { background: var(--grad-cool); color: #0d0a1c; box-shadow: 0 10px 28px -12px rgba(61, 224, 255, .8); }
.btn-gold { background: var(--grad-gold); color: #2a1600; box-shadow: 0 10px 28px -12px rgba(255, 197, 61, .9); }
.btn-danger { background: linear-gradient(135deg, #ff5a6a, #d61f45); color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 64px; font-size: 1.12rem; border-radius: 18px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; border-radius: 12px; }
.btn-xs { min-height: 30px; padding: 0 10px; font-size: .78rem; border-radius: 9px; }
.btn.loading { opacity: .7; pointer-events: none; }
.btn.loading::before { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ forms */
label, .lbl { display: block; font-weight: 600; margin: 0 0 7px; font-size: .95rem; }
.field { margin-bottom: 16px; }
.field small { display: block; margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input:not([type]), select, textarea {
  width: 100%; min-height: var(--tap); padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: rgba(13, 10, 28, .6); color: var(--text);
  font: 16px/1.3 var(--font); appearance: none; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 100px; resize: vertical; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 79, 139, .18); }
input::placeholder, textarea::placeholder { color: var(--dim); }
input[type=file] { color: var(--muted); font-size: .9rem; }
.field-error { color: var(--bad); font-size: .86rem; margin-top: 5px; font-weight: 600; }
.inline-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form input { flex: 1; min-width: 0; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); cursor: pointer; }
.toggle input { appearance: none; width: 54px; height: 32px; border-radius: 99px; background: var(--surface-3); position: relative; flex: none; transition: background .2s; cursor: pointer; border: 1px solid var(--line); }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.3,1.4,.6,1); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.toggle input:checked { background: var(--ok); }
.toggle input:checked::after { transform: translateX(22px); }
.code-input { text-align: center; font: 800 1.9rem/1 var(--display) !important; letter-spacing: .32em; text-transform: uppercase; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: .85rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.search-box { position: relative; }
.search-box input { padding-left: 44px; }
.search-box::before { content: "🔍"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: .95rem; opacity: .7; }

/* Segmented control & chips */
.seg { display: flex; gap: 4px; padding: 4px; background: rgba(13, 10, 28, .6); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button, .seg label { flex: 1 0 auto; text-align: center; padding: 9px 12px; border-radius: 10px; color: var(--muted); font: 700 .88rem var(--font); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; margin: 0; }
.seg .active, .seg input:checked + span { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.seg label { padding: 0; }
.seg label span { display: block; padding: 9px 12px; border-radius: 10px; }
.seg input { display: none; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 6px; margin: 0 -16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.filter-chips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(34, 26, 64, .6); color: var(--text); font: 600 .9rem var(--font); text-decoration: none; cursor: pointer; scroll-snap-align: start; }
.fchip.active, .fchip:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.fchip input { display: none; }
.fchip img { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ flash / toast / banners */
.flash { padding: 13px 16px; border-radius: 14px; margin: 0 0 12px; font-weight: 600; border: 1px solid; }
.flash-success { background: rgba(47, 213, 122, .12); border-color: rgba(47, 213, 122, .4); }
.flash-error { background: rgba(255, 90, 106, .13); border-color: rgba(255, 90, 106, .45); }
.flash-warning, .flash-info { background: rgba(255, 176, 32, .1); border-color: rgba(255, 176, 32, .4); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 110px + var(--safe-b)); transform: translate(-50%, 20px); background: rgba(20, 14, 40, .95); border: 1px solid var(--line-strong); color: #fff; padding: 13px 20px; border-radius: 16px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.2,.8,.2,1); z-index: 80; max-width: calc(100% - 32px); text-align: center; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { border-color: rgba(255, 90, 106, .6); background: rgba(80, 12, 30, .95); }
.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 16px; background: rgba(45, 36, 82, .8); border-bottom: 1px solid var(--line); font-size: .92rem; }
.banner-warn { background: rgba(255, 176, 32, .14); }
.banner-link { width: 100%; border: 0; color: var(--amber); font: 700 .92rem var(--font); cursor: pointer; }
#offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: var(--warn); color: #000; text-align: center; font-weight: 800; font-size: .85rem; padding: calc(5px + var(--safe-t)) 0 5px; }
#offline-bar[hidden] { display: none; }

/* ------------------------------------------------------------------ badges: ratings, difficulty, avatars */
.rating { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 22px; padding: 0 7px; border-radius: 6px; font: 900 .72rem/1 var(--font); letter-spacing: .04em; border: 1.5px solid currentColor; background: rgba(0,0,0,.3); }
.rating-PG { color: #2fd57a; }
.rating-PG-13 { color: #3de0ff; }
.rating-R { color: #ffc53d; }
.rating-NR { color: #ff7a59; }
.rating-XXX { color: #ff4f8b; box-shadow: 0 0 10px rgba(255, 79, 139, .45); }
.diff { display: inline-flex; align-items: center; gap: 3px; font: 700 .75rem var(--font); color: var(--muted); }
.diff i { width: 7px; height: 13px; border-radius: 2px; background: var(--surface-3); display: inline-block; }
.diff i.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 197, 61, .6); }
.diff-4 i.on { background: var(--pink); box-shadow: 0 0 6px rgba(255, 79, 139, .6); }
.tag { display: inline-block; padding: 3px 9px; border-radius: 99px; background: rgba(61, 224, 255, .1); color: var(--cyan); font: 600 .76rem var(--font); text-decoration: none; }
.avatar { --c: var(--pink); display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%), var(--c); font-size: 1.15rem; line-height: 1; box-shadow: 0 0 0 2px rgba(13,10,28,.8), 0 0 14px -2px var(--c); }
.avatar-sm { width: 26px; height: 26px; font-size: .85rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 2rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 3rem; }

/* ------------------------------------------------------------------ live app chrome */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px; background: rgba(13, 10, 28, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(166,107,255,.18); }
.tb-back { font-size: 1.9rem; line-height: 1; color: var(--muted); text-decoration: none; width: 36px; height: 44px; display: grid; place-items: center; }
.tb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-title strong { font-family: var(--display); font-size: 1.06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.tb-title small { font-size: .78rem; display: flex; gap: 6px; align-items: center; }
.code { color: var(--amber); letter-spacing: .1em; font-weight: 800; }
.tb-score { text-align: right; display: flex; flex-direction: column; line-height: 1.05; }
.tb-score b { font: 800 1.4rem var(--display); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-score small { font-size: .72rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); display: inline-block; animation: pulseDot 1.6s infinite; }
body:not(.live-push) .live-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@keyframes pulseDot { 50% { opacity: .35; } }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; background: rgba(18, 13, 38, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(166,107,255,.2); padding-bottom: var(--safe-b); }
.tabbar button { position: relative; flex: 1; max-width: 140px; height: var(--tabbar-h); background: none; border: 0; color: var(--dim); font: 700 .7rem var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; letter-spacing: .02em; }
.tabbar button span { font-size: 1.35rem; filter: grayscale(.8) opacity(.7); transition: transform .2s; }
.tabbar button.active { color: var(--text); }
.tabbar button.active span { filter: none; transform: translateY(-2px) scale(1.08); }
.tabbar button.active::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad-hot); box-shadow: 0 0 12px var(--pink); }

.action-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 25; padding: 12px 12px 10px; background: linear-gradient(to top, var(--bg) 55%, rgba(13,10,28,0)); }
.action-inner { max-width: 600px; margin: 0 auto; display: flex; gap: 8px; }
.action-inner .btn { min-height: 60px; white-space: nowrap; }
.action-inner .btn-ghost, .action-inner .btn-secondary { flex: none; padding: 0 14px; background: rgba(45, 36, 82, .95); font-size: .9rem; color: var(--text); }

details.menu { position: relative; }
details.menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.4rem; border-radius: 12px; cursor: pointer; color: var(--muted); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary { background: var(--surface-2); color: var(--text); }
.menu-pop { position: absolute; right: 0; top: 50px; z-index: 50; min-width: 240px; background: rgba(30, 23, 58, .98); border: 1px solid var(--line-strong); border-radius: 16px; padding: 6px; box-shadow: 0 24px 50px -12px #000e; animation: pop .15s ease-out; }
@keyframes pop { from { transform: scale(.95) translateY(-4px); opacity: 0; } }
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: left; padding: 12px; border-radius: 11px; color: var(--text); text-decoration: none; background: none; border: 0; font: 600 .95rem var(--font); cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-3); }
.menu-sm > summary { width: 36px; height: 36px; font-size: 1.1rem; }

/* ------------------------------------------------------------------ chips / pills / dots */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: none; box-shadow: 0 0 8px currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(45, 36, 82, .85); border: 1px solid var(--line); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.chip:not(:has(.avatar)) { padding-left: 12px; }
.chip .avatar { width: 26px; height: 26px; font-size: .85rem; box-shadow: none; }
.chip-done { background: rgba(47, 213, 122, .16); border-color: rgba(47, 213, 122, .4); }
.chip-wait { opacity: .75; }
.chip-off { opacity: .38; filter: grayscale(.7); }
.chip-me { outline: 2px solid var(--amber); outline-offset: 1px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; background: var(--surface-2); font-size: .76rem; font-weight: 800; letter-spacing: .03em; border: 1px solid var(--line); }
.pill-soft { background: transparent; color: var(--muted); }
.pill-hot { background: var(--grad-hot); border-color: transparent; color: #fff; }
.badge { font-size: .68rem; background: var(--pink); color: #fff; padding: 2px 8px; border-radius: 99px; font-weight: 800; letter-spacing: .02em; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); flex: none; }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 213, 122, .2), 0 0 10px var(--ok); }

/* ------------------------------------------------------------------ game common */
.q-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.q-head .report { margin-left: auto; }
.prompt { font: 800 clamp(1.45rem, 6vw, 2.05rem)/1.2 var(--display); margin: 12px 0 20px; text-wrap: balance; letter-spacing: -.02em; animation: rise .45s cubic-bezier(.2,.8,.2,1); }
.prompt-sm { color: var(--muted); font-size: 1rem; margin-bottom: 10px; }
.blank { color: var(--amber); letter-spacing: .05em; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.big-msg { text-align: center; padding: 26px 8px 10px; animation: rise .4s ease-out; }
.big-msg img.art { width: min(62vw, 240px); height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 10px 30px rgba(166,107,255,.35)); }
.big-emoji { font-size: 3.6rem; line-height: 1; margin-bottom: 10px; animation: popIn .5s cubic-bezier(.3,1.5,.6,1); }
.big-msg h2 { font-size: 1.6rem; }

.timer { position: relative; display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.timer-track { flex: 1; height: 12px; border-radius: 99px; background: rgba(45, 36, 82, .8); overflow: hidden; border: 1px solid var(--line); }
.timer-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); border-radius: 99px; transition: width .2s linear; box-shadow: 0 0 14px rgba(255, 79, 139, .6); }
.timer-num { min-width: 48px; text-align: right; font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.timer-big .timer-track { height: 16px; }
.timer-big .timer-num { font-size: 1.6rem; }
.timer.low .timer-bar { background: var(--bad); box-shadow: 0 0 16px var(--bad); }
.timer.low .timer-num { color: var(--bad); animation: pulse .5s ease-in-out infinite alternate; }
.timer.paused { opacity: .7; }
@keyframes pulse { to { transform: scale(1.14); } }

.waiting { margin: 16px 0; }
.waiting-count { font-size: 1rem; margin-bottom: 10px; color: var(--muted); }
.waiting-count strong { color: var(--text); font: 800 1.7rem var(--display); }

/* Tappable answers */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.choice { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px; border-radius: 20px; border: 0; color: #fff; font: 700 1.1rem/1.25 var(--font); text-align: left; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.25), 0 12px 24px -14px currentColor; transition: transform .1s; animation: rise .35s cubic-bezier(.2,.8,.2,1) backwards; }
.choice:nth-child(2) { animation-delay: .05s; } .choice:nth-child(3) { animation-delay: .1s; } .choice:nth-child(4) { animation-delay: .15s; }
.choice b { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .25); font-family: var(--display); }
.choice:active { transform: scale(.97) translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.28); }
.choice.loading { opacity: .6; }
.c0 { background: linear-gradient(135deg, #ff5f7e, #e3264d); } .c1 { background: linear-gradient(135deg, #4d9bff, #2563eb); } .c2 { background: linear-gradient(135deg, #34d67a, #149a4e); }
.c3 { background: linear-gradient(135deg, #ffb938, #e0850b); } .c4 { background: linear-gradient(135deg, #b872ff, #8a3ff0); } .c5 { background: linear-gradient(135deg, #ff6bbd, #d6338d); }
.choice-grid.tf { grid-template-columns: 1fr 1fr; }
.choice-grid.tf .choice { min-height: 130px; flex-direction: column; justify-content: center; text-align: center; font-size: 1.35rem; }
@media (min-width: 420px) { .choice-grid:not(.tf):not(.many) { grid-template-columns: 1fr 1fr; } .choice-grid:not(.tf):not(.many) .choice { min-height: 104px; flex-direction: column; align-items: flex-start; justify-content: space-between; } }

.choices-static { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.choices-static li { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.choices-static li.c0, .choices-static li.c1, .choices-static li.c2, .choices-static li.c3, .choices-static li.c4, .choices-static li.c5 { background: var(--surface); }
.choices-static li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.choices-static li.c0::before { background: var(--c0); } .choices-static li.c1::before { background: var(--c1); } .choices-static li.c2::before { background: var(--c2); } .choices-static li.c3::before { background: var(--c3); } .choices-static li.c4::before { background: var(--c4); } .choices-static li.c5::before { background: var(--c5); }
.choices-static b { width: 26px; flex: none; font-family: var(--display); }
.choices-static span { flex: 1; position: relative; z-index: 1; font-weight: 600; }
.choices-static em { font-style: normal; font-weight: 800; position: relative; z-index: 1; }
.choices-static .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .07); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.choices-static li.right { border-color: var(--ok); background: rgba(47, 213, 122, .14); box-shadow: 0 0 20px -6px var(--ok); }
.choices-static li.dim { opacity: .5; }

.answer-reveal { text-align: center; padding: 18px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(47, 213, 122, .22), rgba(47, 213, 122, .06)); border: 1px solid rgba(47, 213, 122, .5); margin: 12px 0; animation: popIn .45s cubic-bezier(.3,1.4,.6,1); box-shadow: 0 0 30px -10px var(--ok); }
.answer-reveal small { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--ok); font-weight: 800; }
.answer-reveal strong { font: 800 1.6rem var(--display); }

.answer-form { display: grid; gap: 10px; margin: 8px 0; }
.answer-form input { font-size: 1.2rem !important; min-height: 62px; }

.locked { text-align: center; padding: 28px 14px; background: var(--surface); border-radius: var(--radius); border: 1px dashed var(--line-strong); animation: popIn .4s; }
.locked-ans { font: 800 1.4rem var(--display); color: var(--amber); }

.result-hero { position: relative; text-align: center; padding: 24px 14px; border-radius: var(--radius); background: var(--surface); margin: 8px 0 14px; border: 1px solid var(--line); overflow: hidden; animation: popIn .5s cubic-bezier(.3,1.4,.6,1); }
.result-hero.win { background: linear-gradient(160deg, rgba(47, 213, 122, .28), rgba(34,26,64,.8)); border-color: rgba(47, 213, 122, .5); box-shadow: 0 0 40px -12px var(--ok); }
.result-hero.lose { background: linear-gradient(160deg, rgba(255, 90, 106, .22), rgba(34,26,64,.8)); border-color: rgba(255, 90, 106, .4); }
.result-hero h2 { font-size: 1.55rem; }
.points-pop { display: inline-block; font: 800 2.6rem var(--display); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,197,61,.5)); animation: popIn .6s cubic-bezier(.3,1.6,.6,1); }

.results { list-style: none; padding: 0; margin: 0; }
.results li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.results li:last-child { border-bottom: 0; }
.results .who { display: flex; flex-direction: column; gap: 2px; }
.results .ans { flex: 1; min-width: 80px; color: var(--muted); }
.results .pts { font-weight: 800; }
.results li.ok .pts { color: var(--ok); }
.results li.no .ans { text-decoration: line-through; text-decoration-color: var(--bad); }

.pick-list { display: grid; gap: 9px; margin: 10px 0; }
.pick { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); font: 700 1.05rem/1.3 var(--font); text-align: left; cursor: pointer; touch-action: manipulation; transition: transform .1s, border-color .15s; }
.pick:active { transform: scale(.98); }
.pick.selected { border-color: var(--pink); background: rgba(255, 79, 139, .16); box-shadow: 0 0 20px -6px var(--pink); }
.pick:disabled { opacity: .42; }
.pick .tick { margin-left: auto; color: var(--pink); font-weight: 900; }

.tally { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 9px; }
.tally li { display: grid; grid-template-columns: minmax(90px, 32%) 1fr 30px; gap: 10px; align-items: center; font-weight: 600; }
.tally .bar { height: 14px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.tally .bar i { display: block; height: 100%; background: var(--grad-hot); border-radius: 99px; animation: grow .8s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }

/* Leaderboard rows */
.board { list-style: none; padding: 0; margin: 0; }
.board li { display: flex; align-items: center; gap: 11px; padding: 11px 6px; border-bottom: 1px solid var(--line); animation: rise .4s backwards; }
.board li:nth-child(2) { animation-delay: .04s; } .board li:nth-child(3) { animation-delay: .08s; } .board li:nth-child(4) { animation-delay: .12s; } .board li:nth-child(5) { animation-delay: .16s; }
.board li:last-child { border-bottom: 0; }
.board li.me { background: rgba(255, 197, 61, .09); border-radius: 12px; }
.board .rank { width: 32px; text-align: center; font: 800 1.05rem var(--display); color: var(--muted); flex: none; }
.board .who { flex: 1; display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.board .who small { font-weight: 500; font-size: .78rem; }
.ptag { font-weight: 600; font-size: .72em; color: var(--muted); letter-spacing: .02em; }
.board .nm { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .pts { font: 800 1.08rem var(--display); font-variant-numeric: tabular-nums; color: var(--amber); }
.board .pts small { display: block; font: 600 .7rem var(--font); color: var(--dim); text-align: right; }

/* Podium */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 20px 0 10px; }
.podium > div { flex: 1; max-width: 132px; text-align: center; background: linear-gradient(180deg, rgba(58, 47, 104, .95), rgba(34,26,64,.7)); border: 1px solid var(--line); border-radius: 18px 18px 6px 6px; padding: 14px 6px 12px; animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
.podium .p1 { min-height: 172px; background: linear-gradient(180deg, rgba(255, 197, 61, .38), rgba(34,26,64,.8)); border-color: rgba(255, 197, 61, .6); box-shadow: 0 0 40px -10px rgba(255,197,61,.7); animation-delay: .25s; }
.podium .p2 { min-height: 134px; animation-delay: .1s; }
.podium .p3 { min-height: 108px; animation-delay: .4s; }
.podium .medal { display: block; font-size: 1.8rem; line-height: 1; margin-bottom: 6px; }
.podium .nm { display: block; font-weight: 800; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .pt { font: 800 1rem var(--display); color: var(--amber); }

/* ------------------------------------------------------------------ lobby / QR */
.qr-card { position: relative; text-align: center; background: linear-gradient(160deg, rgba(58,47,104,.9), rgba(34,26,64,.8)); border: 1px solid var(--line-strong); border-radius: 26px; padding: 22px 18px; margin: 12px 0; box-shadow: var(--shadow), 0 0 60px -30px var(--pink); overflow: hidden; }
.qr-card::before { content: ""; position: absolute; inset: 0; background: url("../img/scenes/confetti.svg") center/cover no-repeat; opacity: .35; pointer-events: none; }
.qr-card > * { position: relative; }
.qr-card .scan { font: 800 .8rem var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.qr-card img.qr { display: block; margin: 0 auto; width: min(70vw, 290px); height: auto; aspect-ratio: 1; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 0 0 4px rgba(255,79,139,.5), 0 0 40px rgba(255, 79, 139, .45); }
.qr-big img.qr { width: min(78vw, 330px); }
.qr-code { font: 800 2.6rem/1 var(--display); letter-spacing: .2em; margin-top: 16px; padding-left: .2em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(255, 197, 61, .35)); }
.qr-url { color: var(--muted); font-size: .9rem; word-break: break-all; margin-top: 4px; }
.team-block { margin: 12px 0; }
.team-name { font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.queue { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.queue li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: rgba(13,10,28,.35); font-weight: 700; }
.queue li img { width: 64px; height: 40px; object-fit: contain; }
.queue li > span { flex: 1; min-width: 0; }
.queue li > .btn { flex: none; }
.queue-manage li { flex-wrap: wrap; }
.queue-manage li.q-done { opacity: .7; }
.queue-manage .inline-form { flex-basis: 100%; margin: 0; }
.queue-manage .inline-form .btn-primary { flex: 1; }
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chip { min-height: 46px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--c, var(--line)); background: transparent; color: var(--text); font: 700 .95rem var(--font); cursor: pointer; }
.team-chip.selected, .team-chip:has(input:checked) { background: var(--c, var(--surface-2)); box-shadow: 0 0 18px -4px var(--c); }

.plist { list-style: none; padding: 0; margin: 0; }
.plist-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plist-row:last-child { border-bottom: 0; }
.plist-name { flex: 1; display: flex; flex-direction: column; font-weight: 700; }
.plist-name small { font-weight: 500; display: flex; align-items: center; }

/* Avatar picker (join) */
.avatar-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-picker label { margin: 0; }
.avatar-picker input { display: none; }
.avatar-picker span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; font-size: 1.45rem; background: rgba(13,10,28,.5); border: 2px solid transparent; cursor: pointer; transition: transform .12s; }
.avatar-picker input:checked + span { border-color: var(--pink); background: rgba(255,79,139,.2); transform: scale(1.08); box-shadow: 0 0 16px -4px var(--pink); }
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-picker label { margin: 0; }
.color-picker input { display: none; }
.color-picker span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 12px -2px var(--c); }
.color-picker input:checked + span { border-color: #fff; transform: scale(1.1); }
.join-preview { display: flex; align-items: center; gap: 14px; padding: 12px; background: rgba(13,10,28,.45); border-radius: 16px; margin-bottom: 16px; border: 1px solid var(--line); }
.join-preview b { font: 800 1.3rem var(--display); }
.age-gate { border: 1px solid rgba(255, 79, 139, .5); background: linear-gradient(160deg, rgba(255,79,139,.16), rgba(34,26,64,.7)); border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; }
.age-gate .toggle { min-height: 44px; font-weight: 700; }

/* ------------------------------------------------------------------ hidden-self grid */
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
@media (min-width: 480px) { .hgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hg-slot { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 10px; min-height: 116px; display: flex; flex-direction: column; animation: rise .4s backwards; }
.hg-name { font-size: .8rem; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-name em { font-style: normal; color: var(--amber); }
.hg-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding-top: 6px; }
.hg-content img { max-height: 70px; border-radius: 10px; object-fit: cover; }
.hg-word { font: 800 1.15rem/1.12 var(--display); word-break: break-word; }
.hg-content small { font-size: .72rem; }
.hg-hidden { border-style: dashed; border-color: var(--line-strong); background: repeating-linear-gradient(45deg, rgba(34,26,64,.8), rgba(34,26,64,.8) 10px, rgba(21,16,43,.9) 10px, rgba(21,16,43,.9) 20px); }
.hg-q { font: 800 2.6rem var(--display); color: var(--violet); text-shadow: 0 0 20px rgba(166,107,255,.6); }
.hg-turn { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 197, 61, .2), 0 0 24px -6px var(--amber); }
.hg-solved { opacity: .72; }
.hg-badge { position: absolute; top: 6px; right: 9px; color: var(--ok); font-weight: 900; }
.grid-title { font-size: .85rem; color: var(--muted); font-weight: 700; margin-top: 16px; }
.turn-banner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; margin: 10px 0; }
.turn-banner .chip { font-size: 1.05rem; background: var(--grad-hot); border: 0; }
.your-turn { text-align: center; padding: 20px 14px; background: linear-gradient(160deg, rgba(255, 197, 61, .24), rgba(34,26,64,.8)); border: 1px solid rgba(255, 197, 61, .55); border-radius: var(--radius); margin: 8px 0; box-shadow: 0 0 30px -12px var(--amber); }
.your-turn .answer-form { margin: 12px 0 8px; }
.bs-hint { display: block; color: var(--muted); margin: 4px 0; }
.bs-hint b { color: var(--amber); }
.bs-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 14px; margin: 10px 0; border-radius: var(--radius); background: linear-gradient(160deg, rgba(61, 224, 255, .18), rgba(34,26,64,.85)); border: 1px solid rgba(61, 224, 255, .5); box-shadow: 0 0 30px -14px var(--cyan); }
.bs-spot small { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--cyan); font-weight: 800; }
.bs-spot strong { font: 800 2rem/1.1 var(--display); word-break: break-word; }
.bs-spot span { color: var(--muted); }
.bs-spot em { font-style: normal; font-size: .85rem; color: var(--muted); margin-top: 4px; }
.bs-mine .answer-form { margin-top: 12px; }
.bs-was b { color: var(--amber); }
.guess-feed { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.guess-feed li { padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.guess-feed li.right { border-color: var(--ok); }
.guess-feed li.wrong b { text-decoration: line-through; text-decoration-color: var(--hot, #ff4f8b); }
.hg-mark { margin-top: 6px; align-self: center; }

/* ------------------------------------------------------------------ fibbage / mole / spy */
.fib-options { padding-left: 26px; margin: 0 0 12px; }
.fib-options li { padding: 11px 4px; font: 700 1.12rem var(--display); border-bottom: 1px solid var(--line); }
.fib-reveal { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fib-reveal li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px; animation: rise .45s backwards; }
.fib-reveal li:nth-child(2) { animation-delay: .1s; } .fib-reveal li:nth-child(3) { animation-delay: .2s; } .fib-reveal li:nth-child(4) { animation-delay: .3s; } .fib-reveal li:nth-child(5) { animation-delay: .4s; }
.fib-reveal li.truth { border-color: var(--ok); background: rgba(47, 213, 122, .14); box-shadow: 0 0 24px -8px var(--ok); }
.fib-text { font: 800 1.12rem var(--display); }
.fib-meta, .fib-pickers { margin-top: 7px; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.secret-card { position: relative; text-align: center; padding: 26px 18px; border-radius: 24px; background: linear-gradient(160deg, #3b2a78, rgba(34,26,64,.9)); border: 1px solid #6b55c0; margin: 10px 0 16px; overflow: hidden; box-shadow: 0 0 40px -16px var(--violet); }
.secret-card small { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--cyan); font-weight: 800; }
.secret-card p { font: 800 1.55rem/1.2 var(--display); margin: 8px 0; text-wrap: balance; }
.secret-card em { font-style: normal; color: var(--muted); }
.secret-card.spy { background: linear-gradient(160deg, #6b1230, rgba(34,26,64,.9)); border-color: #c0305f; box-shadow: 0 0 40px -12px var(--pink); }
.tap-reveal { position: relative; cursor: pointer; }
.tap-reveal .tap-cover { position: absolute; inset: 10px 0 16px; z-index: 2; display: grid; place-items: center; text-align: center; background: linear-gradient(160deg, #2d2452, #1c1538); border: 2px dashed var(--line-strong); border-radius: 24px; font-weight: 800; }
.tap-reveal.shown .tap-cover { display: none; }
.answers { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.answers li { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; animation: rise .35s backwards; }
.answers .ans { font: 800 1.12rem var(--display); flex: 1; }
.history { list-style: none; padding: 0; margin: 0; }
.history li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.mole-line { color: var(--pink); }
.loc-list { margin: 12px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.loc-list summary { padding: 15px 16px; font-weight: 800; cursor: pointer; }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.loc { display: block; padding: 10px; border-radius: 11px; background: var(--surface-2); border: 0; color: var(--text); font: 600 .88rem var(--font); text-align: center; }
button.loc { cursor: pointer; border: 1px solid var(--pink); }
.roles { list-style: none; padding: 0; margin: 0; }
.roles li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---- Most Likely To (games/MostLikely) */
.ml-q { text-align: center; margin: 6px 0 4px; }
.ml-q small { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 800; color: var(--cyan); }
.ml-q .prompt { margin: 6px 0 14px; }
.ml-q.big .prompt { font-size: clamp(1.7rem, 7.5vw, 2.5rem); }
.result-hero.ml-crown { background: linear-gradient(160deg, rgba(255, 197, 61, .26), rgba(34,26,64,.85)); border-color: rgba(255, 197, 61, .55); box-shadow: 0 0 44px -12px var(--amber); }
.ml-crown h2 { text-wrap: balance; }
.ml-crown-emoji { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 0 14px rgba(255,197,61,.7)); animation: mlDrop .7s cubic-bezier(.3,1.5,.6,1) .15s backwards; }
.ml-winners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 0 10px; }
.ml-winner { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 800 1.05rem var(--display); }
.ml-me { display: grid; gap: 2px; text-align: center; padding: 13px 14px; margin: 0 0 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); animation: rise .4s .2s backwards; }
.ml-me.ok { border-color: rgba(47, 213, 122, .5); background: rgba(47, 213, 122, .12); }
.ml-me small { color: var(--muted); }
.ml-pts { font: 800 1.2rem var(--display); color: var(--amber); }
@keyframes mlDrop { from { transform: translateY(-40px) rotate(-20deg) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ml-crown-emoji, .ml-me { animation: none; } }

/* closest wins (games/Closest) */
.cw-hint { text-align: center; color: var(--muted); margin: -8px 0 14px; }
.cw-hint b { color: var(--amber); }
.cw-input-wrap { position: relative; }
.cw-input-wrap .cw-input { font: 800 1.7rem var(--display) !important; text-align: center; min-height: 70px; font-variant-numeric: tabular-nums; }
.cw-input-wrap:has(.cw-suffix) .cw-input { padding-right: 96px; }
.cw-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 700; pointer-events: none; }
.cw-scale label span { padding: 11px 6px; }
.cw-preview { text-align: center; margin: 0; min-height: 1.4em; color: var(--cyan); font-weight: 700; }
.cw-preview.bad { color: var(--bad); }
.cw-answer strong { font-size: 2.3rem; font-variant-numeric: tabular-nums; }
.cw-unit { font-size: 1.05rem; color: var(--muted); font-family: var(--font); font-weight: 700; }
.cw-note { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.cw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cw-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); animation: rise .35s backwards; }
.cw-list li:nth-child(2) { animation-delay: .06s; } .cw-list li:nth-child(3) { animation-delay: .12s; } .cw-list li:nth-child(4) { animation-delay: .18s; }
.cw-list li.best { border-color: var(--ok); background: rgba(47, 213, 122, .16); box-shadow: 0 0 22px -8px var(--ok); }
.cw-list li.over { opacity: .6; }
.cw-list li.me { outline: 2px solid var(--amber); outline-offset: -2px; }
.cw-list .cw-rank { width: 30px; flex: none; text-align: center; font: 800 1.15rem var(--display); color: var(--muted); }
.cw-list .who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 88px; flex: 1 1 auto; }
.cw-list .who .chip { max-width: 100%; }
.cw-list .cw-guess { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 0 1 auto; min-width: 0; }
.cw-list .cw-guess b { font: 800 1.15rem var(--display); font-variant-numeric: tabular-nums; }
.cw-list .cw-guess small { color: var(--muted); font-size: .78rem; }
.cw-list .cw-guess small b { font: 700 .78rem var(--font); }
.cw-list .pts { width: 48px; flex: none; text-align: right; font-weight: 800; color: var(--muted); }
.cw-list .pts.pos { color: var(--ok); }

/* ---- Never Have I Ever (games/Never) */
.never-card { text-align: center; padding: 22px 18px; border-radius: 24px; background: linear-gradient(160deg, #3b2a78, rgba(34,26,64,.9)); border: 1px solid #6b55c0; margin: 8px 0 16px; box-shadow: 0 0 40px -16px var(--violet); animation: rise .45s cubic-bezier(.2,.8,.2,1); }
.never-card small { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--cyan); font-weight: 800; }
.never-card p { font: 800 clamp(1.4rem, 6vw, 1.95rem)/1.2 var(--display); margin: 8px 0 0; text-wrap: balance; }
.never-card-sm { padding: 14px 16px; margin-bottom: 12px; }
.never-card-sm p { font-size: 1.15rem; }
.never-pick .choice { transition: transform .1s, opacity .15s, box-shadow .15s; }
.never-pick .choice.selected { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 28px -4px currentColor; }
.never-pick .choice.never-off { opacity: .45; }
.never-q { margin: 18px 0 8px; }
.never-guess { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; margin: 0 0 12px; }
.never-guess button { min-height: 52px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); font: 800 1.2rem var(--display); cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums; }
.never-guess.many button { min-height: 46px; font-size: 1.05rem; }
.never-guess button:active { transform: scale(.95); }
.never-guess button.selected { border-color: var(--pink); background: rgba(255, 79, 139, .22); box-shadow: 0 0 18px -4px var(--pink); }
.never-count { text-align: center; margin: 4px 0 14px; animation: popIn .5s cubic-bezier(.3,1.4,.6,1); }
.never-num b { display: block; font: 800 4.2rem/1 var(--display); color: var(--amber); text-shadow: 0 0 30px rgba(255, 197, 61, .5); }
.never-num span { font-weight: 700; color: var(--muted); }
.never-bar { height: 14px; margin: 12px 0 8px; border-radius: 99px; background: linear-gradient(135deg, #ff5f7e, #e3264d); overflow: hidden; }
.never-bar i { display: block; height: 100%; background: linear-gradient(135deg, #34d67a, #149a4e); animation: grow .8s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
.never-legend { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 700; color: var(--muted); }
.never-mine { margin: 4px 0 12px; }
.never-hl, .never-hist { list-style: none; padding: 0; margin: 0; }
.never-hl li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.never-hl li:last-child, .never-hist li:last-child { border-bottom: 0; }
.never-hl .who { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.never-hl-emoji { font-size: 1.8rem; }
.never-hist li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.never-hist-n { flex: none; min-width: 44px; font: 800 1rem var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }

/* Two Truths & a Lie (games/Truths) */
.tl-spot { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.tl-spot .avatar { width: 52px; height: 52px; font-size: 1.6rem; }
.tl-spot .prompt { margin: 8px 0 12px; font-size: clamp(1.3rem, 5.4vw, 1.8rem); }
.tl-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.tl-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font: 700 1.1rem/1.3 var(--font); animation: rise .4s backwards; }
.tl-list li:nth-child(2) { animation-delay: .08s; } .tl-list li:nth-child(3) { animation-delay: .16s; }
.tl-list li > b, .tl-letter { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); font-family: var(--display); color: var(--cyan); }
.tl-list li > span { flex: 1; }
.tl-list em { font-style: normal; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); align-self: center; }
.tl-list li.tl-mine-lie { border-color: var(--pink); background: rgba(255, 79, 139, .12); }
.tl-reveal li.tl-lie { border-color: var(--pink); background: rgba(255, 79, 139, .16); box-shadow: 0 0 26px -8px var(--pink); }
.tl-reveal li.tl-truth { opacity: .88; }
.tl-body { flex: 1; display: grid; gap: 6px; }
.tl-tag { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
.tl-lie .tl-tag { color: var(--pink); }
.tl-votes { display: flex; align-items: center; gap: 8px; }
.tl-votes .bar { flex: 1; height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.tl-votes .bar i { display: block; height: 100%; background: var(--grad-hot); border-radius: 99px; animation: grow .8s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
.tl-votes small { color: var(--muted); min-width: 52px; text-align: right; }
.tl-pick { align-items: flex-start; min-height: 68px; padding: 13px 14px; }
.tl-pick > span:not(.tick) { flex: 1; }
.tl-form .tl-field { display: grid; gap: 6px; margin: 0; }
.tl-form .tl-field .lbl { margin: 0; }
.tl-f-true .lbl { color: var(--ok); }
.tl-f-lie .lbl { color: var(--pink); }
.tl-f-lie input { border-color: rgba(255, 79, 139, .55); }
.tl-secret p { font-size: 1.3rem; }
.tl-explain { font-size: 1.15rem !important; line-height: 1.3; }
.tl-summary { font-weight: 700; margin: 4px 0 14px; }
.tl-last { color: var(--amber); font-weight: 800; }
.tl-liar { text-align: center; }
.tl-liar h3 { justify-content: center; }
.tl-dots { color: var(--muted); font-weight: 600; }
.tl-pick > span:not(.tick), .tl-list li > span { padding-top: 4px; }
.tl-liar .big-emoji { font-size: 2.6rem; margin-bottom: 4px; }

/* ---- Would You Rather (games/WouldRather) — A = pink, B = blue */
.wyr-twist { display: grid; gap: 2px; text-align: center; padding: 10px 14px; margin: 0 0 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 197, 61, .22), rgba(255, 122, 89, .16)); border: 1px solid rgba(255, 197, 61, .55); box-shadow: 0 0 26px -10px var(--amber); animation: popIn .5s cubic-bezier(.3,1.4,.6,1); }
.wyr-twist b { font: 800 1.1rem var(--display); color: var(--amber); }
.wyr-twist span { font-size: .92rem; font-weight: 600; }
.wyr-twist em { font-style: normal; color: var(--amber); font-weight: 800; }
.wyr-card { text-align: center; padding: 18px 14px; border-radius: 24px; background: linear-gradient(160deg, #3b2a78, rgba(34,26,64,.9)); border: 1px solid #6b55c0; margin: 8px 0 16px; box-shadow: 0 0 40px -16px var(--violet); animation: rise .45s cubic-bezier(.2,.8,.2,1); }
.wyr-card > small, .wyr-lead { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--cyan); font-weight: 800; }
.wyr-lead { text-align: center; margin: 4px 0 10px; font-size: .8rem; }
.wyr-opts { display: grid; gap: 8px; margin-top: 10px; }
.wyr-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.wyr-opt b, .wyr-btn b, .wyr-side h3 b { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-family: var(--display); color: #fff; }
.wyr-opt.wyr-a b, .wyr-side.wyr-a h3 b { background: var(--pink); }
.wyr-opt.wyr-b b, .wyr-side.wyr-b h3 b { background: #3d8bff; }
.wyr-opt p { margin: 0; font: 800 clamp(1.15rem, 5vw, 1.6rem)/1.2 var(--display); text-wrap: balance; }
.wyr-card-sm { padding: 12px; margin-bottom: 12px; }
.wyr-card-sm .wyr-opt { padding: 8px 10px; }
.wyr-card-sm .wyr-opt p { font-size: 1rem; }
.wyr-card-sm .wyr-opt b { width: 28px; height: 28px; border-radius: 9px; }
.wyr-or { justify-self: center; font: 800 .8rem var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
/* Player split-screen buttons */
.wyr-pick { display: grid; gap: 6px; margin: 0 0 12px; }
.wyr-pick .wyr-or { position: relative; z-index: 1; margin: -16px 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line-strong); color: var(--text); }
.wyr-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 18px 16px; border: 0; border-radius: 22px; color: #fff; font: 800 clamp(1.2rem, 5.4vw, 1.5rem)/1.22 var(--display); text-align: center; text-wrap: balance; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.25), 0 12px 24px -14px currentColor; transition: transform .1s, opacity .15s; animation: rise .35s cubic-bezier(.2,.8,.2,1) backwards; }
.wyr-btn b { background: rgba(0, 0, 0, .25); }
.wyr-btn.wyr-a { background: linear-gradient(160deg, #ff4f8b, #d61f63); color: #fff; }
.wyr-btn.wyr-b { background: linear-gradient(160deg, #3d8bff, #1f5fd6); color: #fff; animation-delay: .06s; }
.wyr-btn:active { transform: scale(.97) translateY(2px); }
.wyr-btn.selected { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 30px -4px rgba(255, 255, 255, .45); }
.wyr-btn.off { opacity: .42; }
.wyr-btn.loading { opacity: .6; }
/* Reveal */
.wyr-headline { text-align: center; font: 800 clamp(1.25rem, 5.6vw, 1.75rem)/1.25 var(--display); margin: 6px 0 12px; text-wrap: balance; animation: popIn .5s cubic-bezier(.3,1.4,.6,1); }
.wyr-headline b { color: var(--amber); font-size: 1.35em; text-shadow: 0 0 24px rgba(255, 197, 61, .45); }
.wyr-headline em { font-style: normal; }
.wyr-a-text { color: #ff8fb4; }
.wyr-b-text { color: #8dbbff; }
.wyr-split { display: flex; height: 54px; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: 0 10px 30px -16px #000; }
.wyr-seg { display: flex; align-items: center; min-width: 0; overflow: hidden; animation: wyrGrow 1s cubic-bezier(.2,.8,.2,1) both; }
.wyr-seg b { font: 800 1.25rem var(--display); padding: 0 12px; white-space: nowrap; }
.wyr-seg.wyr-a { background: linear-gradient(135deg, #ff4f8b, #d61f63); }
.wyr-seg.wyr-b { background: linear-gradient(135deg, #1f5fd6, #3d8bff); justify-content: flex-end; }
@keyframes wyrGrow { from { flex-basis: 50%; } }
.wyr-legend { display: flex; justify-content: space-between; gap: 8px; margin: 8px 2px 14px; font-size: .9rem; font-weight: 700; }
.wyr-sides { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 700px) { .wyr-sides { grid-template-columns: 1fr 1fr; } }
.wyr-side { padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); animation: rise .45s .2s cubic-bezier(.2,.8,.2,1) backwards; }
.wyr-side h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 1rem/1.25 var(--font); }
.wyr-side h3 b { width: 28px; height: 28px; border-radius: 9px; }
.wyr-side h3 span { flex: 1; }
.wyr-side h3 em { font: 800 .95rem var(--display); font-style: normal; color: var(--ok); padding: 2px 10px; border-radius: 99px; background: rgba(47, 213, 122, .16); }
.wyr-side.wyr-win { border-color: rgba(47, 213, 122, .55); box-shadow: 0 0 24px -10px var(--ok); }
.wyr-mine { margin: 4px 0 12px; }
.wyr-hl, .wyr-hist { list-style: none; padding: 0; margin: 0; }
.wyr-hl li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wyr-hl .who { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.wyr-hl-emoji { font-size: 1.8rem; }
.wyr-hist li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wyr-hl li:last-child, .wyr-hist li:last-child { border-bottom: 0; }
.wyr-hist-q { display: flex; gap: 8px; align-items: baseline; font-weight: 600; font-size: .92rem; }
.wyr-hist-q span { flex: 1; }
.wyr-hist-q span:last-child { text-align: right; }
.wyr-hist-q small { color: var(--dim); }
.wyr-mini { height: 8px; border-radius: 99px; background: #3d8bff; overflow: hidden; }
.wyr-mini i { display: block; height: 100%; background: var(--pink); }

/* ---- Who Said That? (games/WhoSaid) */
.ws-quote { position: relative; margin: 6px 0 16px; padding: 20px 18px; border-radius: 24px 24px 24px 6px; background: linear-gradient(160deg, rgba(61, 224, 255, .18), rgba(34,26,64,.9)); border: 1px solid rgba(61, 224, 255, .5); box-shadow: 0 0 36px -14px var(--cyan); font: 800 clamp(1.3rem, 5.8vw, 1.8rem)/1.25 var(--display); text-align: center; text-wrap: balance; overflow-wrap: anywhere; animation: popIn .45s cubic-bezier(.3,1.4,.6,1); }
.ws-quote.big { font-size: clamp(1.6rem, 7vw, 2.4rem); padding: 26px 20px; }
.ws-prompt small { letter-spacing: .1em; }
.ws-hero .avatar-lg { margin: 0 auto 8px; }
.ws-hero h2 { margin: 4px 0 6px; }
.ws-guesses .ans { font-size: .95rem; }
.ws-mine { background: linear-gradient(160deg, #6b1230, rgba(34,26,64,.9)); border-color: #c0305f; box-shadow: 0 0 40px -12px var(--pink); }
.ws-mine small { color: var(--pink); }
.ws-mine em { display: block; }
.ws-recap { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ws-recap li { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; animation: rise .4s backwards; }
.ws-recap li:nth-child(2) { animation-delay: .08s; } .ws-recap li:nth-child(3) { animation-delay: .16s; } .ws-recap li:nth-child(4) { animation-delay: .24s; }
.ws-recap-text { font: 800 1.1rem/1.3 var(--display); overflow-wrap: anywhere; }
.ws-perfect { color: var(--amber); font-size: .85rem; }

/* ---- Emoji Decode (games/Emoji) */
.emo-clue { text-align: center; padding: 16px 12px 20px; margin: 6px 0 12px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 197, 61, .16), rgba(34,26,64,.9) 70%); border: 1px solid rgba(255, 197, 61, .38); box-shadow: 0 0 40px -16px var(--amber); animation: popIn .5s cubic-bezier(.3,1.4,.6,1); }
.emo-cat { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 99px; background: rgba(0, 0, 0, .25); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.emo-emoji { font-size: clamp(2.9rem, 15vw, 4.4rem); line-height: 1.2; letter-spacing: .06em; overflow-wrap: anywhere; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.emo-xl .emo-emoji { font-size: clamp(3.4rem, 17vw, 6.5rem); }
.emo-sm { padding: 10px 12px 12px; }
.emo-sm .emo-emoji { font-size: clamp(2rem, 10vw, 2.8rem); }
/* Shrink long clues so they stay on one line (--n = emoji count, set by client.js). */
.emo-clue { container-type: inline-size; }
@supports (width: 1cqw) {
  .emo-emoji { font-size: min(4.4rem, calc(76cqw / var(--n, 3))); }
  .emo-xl .emo-emoji { font-size: min(6.5rem, calc(76cqw / var(--n, 3))); }
  .emo-sm .emo-emoji { font-size: min(2.8rem, calc(60cqw / var(--n, 3))); }
}
.emo-hint { text-align: center; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(61, 224, 255, .12); border: 1px solid rgba(61, 224, 255, .4); font-weight: 600; animation: popIn .45s cubic-bezier(.3,1.4,.6,1); }
.emo-hint b { color: var(--cyan); margin-right: 4px; }
.emo-hint-wait { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--muted); font-size: .9rem; padding: 6px 12px; animation: none; }
.emo-hint-wait .timer-num { min-width: 0; font-size: .9rem; color: var(--text); }
.emo-first { text-align: center; margin: 0 0 12px; color: var(--amber); font-weight: 700; animation: popIn .45s; }
.emo-first b { font: 800 1.05rem var(--display); }
.emo-nope { text-align: center; margin: 0 0 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 90, 106, .16); border: 1px solid rgba(255, 90, 106, .45); overflow-wrap: anywhere; animation: emoShake .4s; }
.emo-nope b { color: var(--bad); margin-right: 4px; }
@keyframes emoShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.emo-left { margin: 2px 0 8px; font-size: .9rem; }
.emo-wrong { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; color: var(--muted); overflow-wrap: anywhere; }
.emo-wrong li { text-decoration: line-through; text-decoration-color: rgba(255, 90, 106, .6); }
.emo-wrong small { text-decoration: none; }
.emo-got { padding: 18px 14px; }
.emo-prog { font-size: .9rem; }
.emo-sts { display: flex; flex-wrap: wrap; gap: 6px; }
.emo-st { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: .88rem; font-weight: 700; }
.emo-st.solved { background: rgba(47, 213, 122, .16); border-color: rgba(47, 213, 122, .5); }
.emo-st.out { opacity: .55; }
.emo-st.off { opacity: .45; }
.emo-answer strong { display: block; overflow-wrap: anywhere; }
.emo-solvers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.emo-solvers li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); animation: rise .35s backwards; }
.emo-solvers li:nth-child(2) { animation-delay: .06s; } .emo-solvers li:nth-child(3) { animation-delay: .12s; }
.emo-solvers li.first { border-color: var(--amber); background: rgba(255, 197, 61, .14); box-shadow: 0 0 22px -8px var(--amber); }
.emo-solvers li.me { outline: 2px solid var(--pink); outline-offset: -2px; }
.emo-solvers .emo-rank { width: 26px; flex: none; text-align: center; font-size: 1.1rem; }
.emo-solvers .who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
.emo-solvers .who .chip { max-width: 100%; }
.emo-solvers .emo-time { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.emo-solvers .emo-time b { font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.emo-solvers .emo-time small { color: var(--muted); font-size: .76rem; }
.emo-solvers .pts { width: 46px; flex: none; text-align: right; font-weight: 800; color: var(--ok); }

/* ------------------------------------------------------------------ marketing */
.hero { position: relative; display: grid; gap: 18px; padding: 22px 0 6px; align-items: center; }
.hero h1 { margin-bottom: 12px; }
.hero h1 .neon-word { font-family: "Monoton", var(--display); font-weight: 400; letter-spacing: .02em; color: var(--pink); text-shadow: 0 0 10px rgba(255,79,139,.9), 0 0 36px rgba(255,79,139,.55); animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.hero .lede { color: var(--muted); font-size: 1.12rem; max-width: 34em; }
.hero-art { width: 100%; max-width: 560px; margin: 0 auto; display: block; filter: drop-shadow(0 30px 60px rgba(166, 107, 255, .35)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero-cta { display: grid; gap: 10px; margin-top: 18px; }
.join-strip { display: flex; gap: 8px; background: rgba(13,10,28,.6); border: 1px solid var(--line-strong); border-radius: 20px; padding: 6px; }
.join-strip input { border: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 1.35rem var(--display) !important; letter-spacing: .25em; text-transform: uppercase; }
.join-strip .btn { flex: none; }
.trust { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; font-weight: 600; margin-top: 14px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 1fr; padding: 48px 0 20px; } .hero-cta { grid-template-columns: auto auto; justify-content: start; } }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.stat-strip > div { text-align: center; padding: 14px 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.stat-strip b { display: block; font: 800 1.6rem var(--display); }
.stat-strip small { font-size: .78rem; }

.steps { display: grid; gap: 12px; counter-reset: step; }
.step { position: relative; padding: 18px 18px 18px 70px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 800 1.2rem var(--display); background: var(--grad-hot); box-shadow: 0 0 20px -4px var(--pink); }
.step h3 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--muted); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.game-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 12px; overflow-x: auto; padding: 4px 16px 12px; margin: 0 -16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.game-rail::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .game-rail { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; } }
.game-tile { scroll-snap-align: start; border-radius: 24px; background: linear-gradient(170deg, rgba(58,47,104,.95), rgba(28,21,56,.95)); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.game-tile .art { background: radial-gradient(120% 90% at 50% 0%, rgba(166,107,255,.35), transparent 70%); padding: 10px 10px 0; }
.game-tile .art img { width: 100%; height: auto; display: block; }
.game-tile .body { padding: 14px 16px 18px; }
.game-tile h3 { font-size: 1.2rem; margin-bottom: 4px; }
.game-tile p { color: var(--muted); font-size: .92rem; margin: 0 0 10px; }

.rating-ladder { display: grid; gap: 8px; }
.rating-ladder > div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rating-ladder .rating { min-width: 48px; height: 28px; font-size: .82rem; }
.rating-ladder b { display: block; }
.rating-ladder small { color: var(--muted); }
@media (min-width: 860px) { .rating-ladder { grid-template-columns: repeat(5, 1fr); } .rating-ladder > div { flex-direction: column; text-align: center; } }

.cta-panel { position: relative; overflow: hidden; text-align: center; padding: 34px 20px; border-radius: 28px; background: linear-gradient(140deg, rgba(255,79,139,.35), rgba(166,107,255,.3) 55%, rgba(61,224,255,.22)); border: 1px solid rgba(255,79,139,.45); box-shadow: 0 0 80px -30px var(--pink); }
.cta-panel::before { content: ""; position: absolute; inset: 0; background: url("../img/scenes/confetti.svg") center/cover; opacity: .4; }
.cta-panel > * { position: relative; }

/* ------------------------------------------------------------------ pack covers & library */
.pack-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pack-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 210px); gap: 12px; overflow-x: auto; padding: 4px 16px 12px; margin: 0 -16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pack-rail::-webkit-scrollbar { display: none; }
.pack { scroll-snap-align: start; display: flex; flex-direction: column; color: var(--text); text-decoration: none; border-radius: 20px; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); transition: transform .15s, box-shadow .2s; }
.pack:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px var(--tc, var(--pink)); }
.cover { --tc: #a66bff; position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--tc) 55%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tc) 38%, #1a1433), #120d27 85%); }
.cover::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size: 16px 16px; mask-image: linear-gradient(180deg, #000, transparent 75%); }
.cover::after { content: ""; position: absolute; width: 140%; height: 40%; bottom: -12%; left: -20%; background: color-mix(in srgb, var(--tc) 30%, transparent); filter: blur(30px); }
.cover img { position: relative; z-index: 1; width: 50%; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); transition: transform .3s; margin-bottom: 14%; }
.cover.cv1 { background: radial-gradient(80% 60% at 20% 20%, color-mix(in srgb, var(--tc2) 45%, transparent), transparent 70%), radial-gradient(90% 70% at 80% 60%, color-mix(in srgb, var(--tc) 50%, transparent), transparent 70%), linear-gradient(200deg, color-mix(in srgb, var(--tc) 30%, #1a1433), #120d27 85%); }
.cover.cv2 { background: conic-gradient(from 210deg at 50% 38%, color-mix(in srgb, var(--tc) 45%, transparent), color-mix(in srgb, var(--tc2) 38%, transparent), color-mix(in srgb, var(--tc) 45%, transparent)), #140f2c; }
.cover.cv2 img { transform: rotate(-8deg); }
.cover.cv3 { background: radial-gradient(70% 55% at 50% 30%, color-mix(in srgb, var(--tc2) 42%, transparent), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px), linear-gradient(160deg, color-mix(in srgb, var(--tc) 35%, #1a1433), #120d27 85%); }
.cover.cv3 img { transform: rotate(7deg) scale(.95); }
.cover-title { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 34px; text-align: center; font: 800 .82rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px var(--tc2), 0 2px 6px rgba(0,0,0,.7); opacity: .95; }
.cover-game img { width: 92%; margin-bottom: 8%; }
.cover:not(.cover-game) .feat { top: 10px; right: 10px; left: auto; bottom: auto; }
.cover-lg .cover-title { font-size: 1.3rem; bottom: 12%; }
.mini-cover img { width: 64%; margin: 0; }
.pack:hover .cover img { transform: scale(1.06) rotate(-3deg); }
.cover .rating { position: absolute; z-index: 2; top: 10px; left: 10px; }
.cover .game-badge { position: absolute; z-index: 2; top: 10px; right: 10px; font: 800 .66rem var(--font); letter-spacing: .06em; text-transform: uppercase; background: rgba(13,10,28,.7); padding: 4px 8px; border-radius: 99px; }
.cover .feat { position: absolute; z-index: 2; bottom: 10px; left: 10px; font: 800 .66rem var(--font); letter-spacing: .06em; text-transform: uppercase; background: var(--grad-gold); color: #2a1600; padding: 4px 8px; border-radius: 99px; }
.pack .meta { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.pack .meta b { font: 800 1rem/1.2 var(--display); }
.pack .meta small { font-size: .78rem; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.cover-lg { border-radius: 28px; max-width: 360px; margin: 0 auto; box-shadow: 0 30px 60px -20px var(--tc); border: 1px solid rgba(255,255,255,.1); }
.cover-lg img { width: 56%; }

.library-filters { display: grid; gap: 10px; margin-bottom: 16px; }
.facet-row { display: flex; gap: 8px; align-items: center; }
.facet-row label { margin: 0; font-size: .8rem; color: var(--muted); min-width: 64px; }

/* ------------------------------------------------------------------ builder */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.picker button { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; background: linear-gradient(170deg, rgba(58,47,104,.95), rgba(28,21,56,.95)); border: 1px solid var(--line); border-radius: 20px; padding: 0 0 12px; color: var(--text); font: inherit; cursor: pointer; overflow: hidden; transition: transform .12s, border-color .15s; }
.picker button:active { transform: scale(.97); }
.picker button:hover { border-color: var(--line-strong); }
.picker button img { width: 100%; height: auto; display: block; background: radial-gradient(120% 90% at 50% 0%, rgba(166,107,255,.3), transparent 70%); }
.picker button b { font: 800 1.02rem var(--display); padding: 0 12px; }
.picker button small { font-size: .76rem; line-height: 1.3; padding: 0 12px; }
.picker button .added { position: absolute; top: 8px; right: 8px; display: none; }
.picker button.in-queue .added { display: inline-block; }
.queue-item { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); margin: 12px 0; overflow: hidden; animation: rise .35s; }
.queue-item > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(58,47,104,.6); }
.queue-item > header img { width: 58px; height: 36px; object-fit: contain; }
.queue-item > header b { flex: 1; font-family: var(--display); font-size: 1.05rem; }
.queue-item > header button { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-solid); color: var(--text); font-size: 1rem; cursor: pointer; }
.queue-item .settings { padding: 14px; }
.sticky-submit { position: sticky; bottom: 0; padding: 14px 0 calc(14px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 5; }
.rating-select { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rating-select label { margin: 0; }
.rating-select input { display: none; }
.rating-select span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px 9px; border-radius: 14px; border: 2px solid var(--line); background: rgba(13,10,28,.45); cursor: pointer; font-size: .68rem; color: var(--muted); font-weight: 700; text-align: center; line-height: 1.15; }
.rating-select input:checked + span { border-color: currentColor; background: rgba(255,255,255,.05); color: var(--text); box-shadow: 0 0 18px -6px currentColor; }
.topic-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.set-filter { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.set-filter select { max-width: 46vw; }
.set-picker { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.set-option { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: rgba(13,10,28,.35); cursor: pointer; margin: 0; }
.set-option:has(input:checked) { border-color: var(--pink); background: rgba(255,79,139,.12); }
.set-option input { display: none; }
.set-option .mini-cover { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.set-option .mini-cover img { width: 64%; }
.set-option .txt { flex: 1; min-width: 0; }
.set-option .txt b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-option .txt small { display: flex; gap: 8px; align-items: center; font-size: .75rem; }
.set-option.locked { opacity: .4; pointer-events: none; }
.set-option[hidden], .set-none[hidden] { display: none; }

/* ------------------------------------------------------------------ dashboard & stats */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { padding: 15px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.kpi small { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.kpi b { display: block; font: 800 1.75rem/1.1 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: .78rem; font-weight: 700; }
.kpi .delta.up { color: var(--ok); } .kpi .delta.down { color: var(--bad); }
.kpi svg.spark { position: absolute; right: 10px; bottom: 10px; width: 70px; height: 26px; opacity: .9; }
.session-list { list-style: none; padding: 0; margin: 0; }
.session-list li { border-bottom: 1px solid var(--line); }
.session-list li:last-child { border-bottom: 0; }
.session-list a { display: flex; align-items: center; gap: 12px; padding: 13px 0; color: var(--text); text-decoration: none; }
.session-list .meta { flex: 1; min-width: 0; }
.session-list .meta small { display: block; }
.status { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.status-waiting { background: rgba(255, 197, 61, .18); color: var(--amber); }
.status-active, .status-live, .status-published, .status-open { background: rgba(47, 213, 122, .18); color: var(--ok); }
.status-ended, .status-draft, .status-dismissed { background: var(--surface-2); color: var(--muted); }
.status-hidden, .status-suspended, .status-banned { background: rgba(255, 90, 106, .18); color: var(--bad); }
.status-resolved { background: rgba(61, 224, 255, .15); color: var(--cyan); }
.empty { text-align: center; padding: 26px 12px; color: var(--muted); }
.empty img { width: 150px; display: block; margin: 0 auto 6px; }

/* Charts (server-rendered SVG) */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font: 600 15px var(--font); }
.chart .mark:hover path { filter: brightness(1.25); }
.chart .pt circle { opacity: 0; transition: opacity .1s; }
.chart .pt:hover circle { opacity: 1; }
.chart .pt:hover rect { fill: rgba(166,107,255,.08); }
.chart .grid line { stroke: rgba(166,107,255,.14); }
.hbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: .9rem; }
.hbars .lbl { margin: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.hbars .val { font-weight: 800; font-variant-numeric: tabular-nums; }
.hbars .track { grid-column: 1 / -1; height: 8px; background: rgba(45,36,82,.8); border-radius: 99px; overflow: hidden; }
.hbars .track i { display: block; height: 100%; border-radius: 99px; background: var(--grad-cool); }
.heat { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 2px; font-size: .62rem; color: var(--dim); }
.heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(166,107,255,var(--a, .06)); }
.funnel { display: grid; gap: 8px; }
.funnel > div { position: relative; padding: 12px 14px; border-radius: 14px; background: rgba(45,36,82,.6); overflow: hidden; display: flex; justify-content: space-between; font-weight: 700; }
.funnel > div i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,79,139,.45), rgba(166,107,255,.35)); z-index: 0; }
.funnel > div span { position: relative; z-index: 1; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; font: 700 .72rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: rgba(166,107,255,.06); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { color: var(--text); font-weight: 700; text-decoration: none; }
table.data a:hover { color: var(--amber); }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 14px; align-items: center; }

/* Content editor */
.item-list { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.item-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item-list li::before { counter-increment: item; content: counter(item); color: var(--dim); font-size: .8rem; min-width: 22px; padding-top: 2px; }
.item-list .body { flex: 1; min-width: 0; }
.item-list .body small { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item-list a.edit { color: var(--muted); text-decoration: none; padding: 4px 8px; }
.tabs-inline { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.tabs-inline a { flex: none; padding: 9px 15px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 700; font-size: .9rem; }
.tabs-inline a.active { background: var(--grad-hot); border-color: transparent; color: #fff; }
pre.sample { background: rgba(13,10,28,.6); padding: 12px; border-radius: 12px; overflow-x: auto; font-size: .8rem; border: 1px solid var(--line); }

/* ------------------------------------------------------------------ profile */
.profile-hero { text-align: center; padding: 24px 0 8px; }
.profile-hero .avatar-xl { margin: 0 auto 12px; animation: popIn .5s; }
.profile-hero h1 { font-size: 2rem; margin-bottom: 4px; }
.trophy-case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trophy-case > div { text-align: center; padding: 14px 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.trophy-case b { display: block; font: 800 1.5rem var(--display); }

/* ------------------------------------------------------------------ admin */
.admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.admin-side { position: sticky; top: 0; z-index: 30; background: rgba(13,10,28,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: calc(8px + var(--safe-t)) 12px 8px; }
.admin-side .side-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-side .brand { font-size: 1.05rem; white-space: nowrap; min-width: 0; }
.admin-side .brand img { width: 30px; height: 30px; }
.admin-side .brand small { font: 800 .62rem var(--font); letter-spacing: .12em; color: var(--cyan); background: rgba(61,224,255,.12); padding: 3px 7px; border-radius: 6px; margin-left: 4px; }
.navtoggle { display: inline-flex; gap: 6px; align-items: center; max-width: 60%; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface-solid); color: var(--text); font: 600 .85rem var(--font, inherit); cursor: pointer; }
.navtoggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.navwrap { display: none; padding-top: 10px; }
.admin-side.open .navwrap { display: block; max-height: calc(100dvh - 70px); overflow-y: auto; }
.navq { width: 100%; min-height: 40px; margin-bottom: 8px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: .92rem; }
.admin-nav a.active, .admin-nav a:hover, .admin-nav a:focus-visible { background: rgba(166,107,255,.16); color: var(--text); }
.admin-nav a .count, .subtabs .count { margin-left: auto; background: var(--pink); color: #fff; }
.admin-nav .navsec { margin-left: auto; color: var(--dim); font-weight: 600; font-size: .75rem; }
.side-foot { margin-top: 16px; padding: 12px; border-top: 1px solid var(--line); font-size: .82rem; }
.side-foot a { color: var(--muted); }
.subtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 16px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border-radius: 11px 11px 0 0; color: var(--muted); text-decoration: none; font-weight: 700; font-size: .9rem; border-bottom: 3px solid transparent; }
.subtabs a.active { color: var(--text); border-bottom-color: var(--pink); }
.subtabs a:hover { color: var(--text); background: rgba(166,107,255,.1); }
.admin-main { padding: 18px 16px calc(40px + var(--safe-b)); max-width: 1240px; width: 100%; margin: 0 auto; }
.admin-main h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.admin-grid { display: grid; gap: 14px; }
@media (min-width: 1000px) {
  .admin-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .admin-side { position: sticky; top: 0; height: 100dvh; border-bottom: 0; border-right: 1px solid var(--line); padding: 20px 14px; overflow-y: auto; display: flex; flex-direction: column; }
  .navtoggle { display: none; }
  .navwrap, .admin-side.open .navwrap { display: flex; flex-direction: column; flex: 1; max-height: none; padding-top: 18px; overflow: visible; }
  .side-foot { margin-top: auto; }
  .admin-main { padding: 28px 32px 60px; }
  .admin-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .admin-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .admin-grid.cols-21 { grid-template-columns: 2fr 1fr; }
}
.admin-grid .card { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search], .toolbar select { min-height: 44px; width: auto; flex: 1 1 160px; }
.toolbar .btn { min-height: 44px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .92rem; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 600; word-break: break-word; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.timeline li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.timeline time { color: var(--dim); font-variant-numeric: tabular-nums; }
.health-ok { color: var(--ok); font-weight: 800; }
.health-bad { color: var(--bad); font-weight: 800; }

/* ------------------------------------------------------------------ confetti canvas */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media print { body { background: #fff; color: #000; } body::before, body::after { display: none; } .no-print { display: none !important; } }
@media (min-width: 720px) { .screen, .wrap { padding-left: 24px; padding-right: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- sponsors (reserved heights: no layout jump) */
.ad { position: relative; margin: 16px 0; }
.ad-tag { position: absolute; top: 8px; right: 10px; z-index: 1; font: 700 .62rem/1 var(--body, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ad-link { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; height: 100%; }
.ad-box, .ad-strip { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 16px; overflow: hidden; }
.ad-box { min-height: 100px; }
.ad-strip { min-height: 50px; padding: 8px 14px; }
.ad-box img { width: 96px; height: 72px; object-fit: contain; border-radius: 10px; flex: none; }
.ad-strip img { width: 64px; height: 34px; object-fit: contain; flex: none; }
.ad-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ad-txt b { font-family: var(--display); font-size: 1.02rem; }
.ad-txt small { color: var(--muted); line-height: 1.35; }
.ad-cta { flex: none; }
.ad-line { text-align: center; font-size: .9rem; color: var(--muted); margin: 10px 0; }
.ad-line .ad-by { color: var(--text); font-weight: 700; }
.ad-line a { color: inherit; text-decoration: none; }
.ad-test { outline: 2px dashed var(--amber); outline-offset: 3px; }
@media (min-width: 760px) { .ad-box { min-height: 160px; } .ad-strip { min-height: 90px; } .ad-box img { width: 160px; height: 120px; } }

/* ---------------------------------------------------------------- tip jar */
.tip-jar { display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, rgba(255, 79, 139, .16), rgba(255, 197, 61, .12)), var(--surface); border-color: rgba(255, 197, 61, .35); }
.tip-jar img { flex: none; width: 96px; height: 72px; }
.tip-jar h3 { margin: 0 0 4px; }
.tip-jar p { margin: 0 0 12px; }
@media (max-width: 420px) { .tip-jar { flex-direction: column; text-align: center; } .tip-jar .row-wrap { justify-content: center; } }

/* ---------------------------------------------------------------- contact / advertise */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pitch-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pitch-grid .card { margin: 0; }
.pitch-grid .card h3 { margin-top: 0; }
.inbox-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.inbox-row.unread b { color: var(--text); }
.inbox-row .dot-new { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); margin-top: 6px; }
.inbox-row .dot-old { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); margin-top: 6px; }
.mail-body { white-space: pre-wrap; background: rgba(13, 10, 28, .5); border-radius: var(--radius-sm); padding: 14px; font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }
.thread-reply { border-left: 3px solid var(--cyan); padding-left: 12px; margin: 12px 0; }
@media print { .admin-side, .no-print, .flash { display: none !important; } .admin-main { padding: 0 !important; } body { background: #fff !important; color: #111 !important; } .card { border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important; } }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 10px; }
.faq details { margin: 0; padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font: 700 1.02rem var(--display); display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--pink); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0; padding: 0 18px 16px; }
.ad-box:has(.ad-tag), .ad-strip:has(.ad-tag) { padding-top: 26px; }

/* ---------------------------------------------------------------- support / tips */
.tip-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tip-amount input { position: absolute; opacity: 0; pointer-events: none; }
.tip-amount span { display: grid; gap: 2px; text-align: center; padding: 14px 8px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface-solid); cursor: pointer; }
.tip-amount b { font: 800 1.35rem var(--display); }
.tip-amount small { color: var(--muted); }
.tip-amount input:checked + span { border-color: var(--amber); background: rgba(255, 197, 61, .12); box-shadow: 0 0 0 4px rgba(255, 197, 61, .15); }
.tip-amount input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.perk-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.plan-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan { margin: 0; position: relative; display: flex; flex-direction: column; }
.plan h3 { margin: 0; }
.plan .price { font: 800 2rem var(--display); margin: 6px 0; }
.plan .price small { font: 600 .9rem var(--font, inherit); color: var(--muted); }
.plan p { flex: 1; }
.plan-best { border-color: var(--amber); }
.plan .badge { position: absolute; top: 12px; right: 12px; }
.tip-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }

.admin-main { min-width: 0; }
.admin-main .seg { max-width: 100%; }
.admin-main .row-wrap > .seg { flex: 0 1 auto; min-width: 0; }
.admin-main .table-wrap { max-width: 100%; }
.admin-main > .eyebrow { display: flex; margin-bottom: 6px; }

/* ---------- Phone scenes: real screenshots in phone frames (home, How to play) ---------- */
.phone-scene { margin: 0; }
.phone-scene .phones { display: flex; justify-content: center; align-items: flex-end; padding: 18px 0 8px; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.phone-wrap.is-player { --w: 28vw; z-index: 1; }
.phone-wrap.is-host { --w: 37vw; z-index: 2; margin: 0 -4vw; }
.phone-wrap.is-player:first-child .phone { transform: rotate(-4deg) translateY(4%); }
.phone-wrap.is-player:last-child .phone { transform: rotate(4deg) translateY(4%); }
.phone { width: var(--w); max-width: 250px; aspect-ratio: 390 / 844; padding: calc(min(var(--w), 250px) * .035); border-radius: calc(min(var(--w), 250px) * .15); background: linear-gradient(150deg, #3a3156, #120e22 55%, #2a2344); box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 50px -18px rgba(0,0,0,.85); position: relative; }
.phone::after { content: ""; position: absolute; top: calc(min(var(--w), 250px) * .055); z-index: 1; left: 50%; width: 30%; height: calc(min(var(--w), 250px) * .06); transform: translateX(-50%); border-radius: 99px; background: #05040a; }
.phone .phone-screen { height: 100%; border-radius: calc(min(var(--w), 250px) * .12); background: #0b0916; overflow: hidden; padding-top: 8%; position: relative; }
.phone .phone-screen::before { content: "9:41"; position: absolute; top: 2.2%; left: 11%; font: 700 calc(min(var(--w), 250px) * .05)/1 var(--font); color: #fff; opacity: .9; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--bg); }
.is-host .phone { max-width: 290px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 0 5px rgba(255,79,139,.18), 0 0 60px -8px rgba(255,79,139,.55), 0 34px 60px -18px rgba(0,0,0,.9); }
.is-player .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 44px -12px rgba(61,224,255,.5), 0 30px 50px -18px rgba(0,0,0,.85); }
.phone-role { font: 700 .72rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); background: var(--surface); border: 1px solid var(--line); padding: 7px 11px; border-radius: 99px; white-space: nowrap; }
.is-host .phone-role { color: var(--amber); border-color: rgba(255,197,61,.35); }
.phone-scene figcaption { text-align: center; color: var(--muted); max-width: 34em; margin: 12px auto 0; }
@media (min-width: 720px) { .phone-wrap.is-player { --w: 200px; } .phone-wrap.is-host { --w: 250px; margin: 0 -26px; } }
.scene-pair { display: grid; gap: 30px; }
@media (min-width: 1100px) { .scene-pair { grid-template-columns: 1fr 1fr; gap: 20px; } .scene-pair .phone-wrap.is-player { --w: 160px; } .scene-pair .phone-wrap.is-host { --w: 205px; margin: 0 -20px; } }
.scene-steps { counter-reset: scene; display: grid; gap: 34px; }
.scene-step h3 { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; }
.scene-step h3::before { counter-increment: scene; content: counter(scene); width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font: 800 1.05rem var(--display); background: var(--grad-hot); box-shadow: 0 0 20px -4px var(--pink); }
.guide-list { color: var(--muted); max-width: 44em; padding-left: 20px; }
.guide-list li { margin-bottom: 8px; }
.guide-list b { color: var(--text); }
.guide .phone-scene { margin: 10px 0 20px; }
@media (min-width: 1000px) {
  .scene-steps .phone-scene { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; }
  .scene-steps .phone-scene figcaption { text-align: left; font-size: 1.2rem; margin: 0; }
  .scene-steps .scene-step:nth-child(even) .phones { order: 2; }
  .scene-steps .scene-step h3 { justify-content: flex-start; }
  .scene-steps .phone-wrap.is-player { --w: 180px; } .scene-steps .phone-wrap.is-host { --w: 225px; margin: 0 -22px; }
}

/* ---------- Games gallery (/games) and game pages (/games/{slug}) ---------- */
.game-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 18px; }
.game-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; background: linear-gradient(170deg, rgba(58,47,104,.95), rgba(28,21,56,.95)); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.game-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 40px -18px rgba(255,79,139,.5); }
.game-card .art { background: radial-gradient(120% 90% at 50% 0%, rgba(166,107,255,.35), transparent 70%); padding: 10px 10px 0; }
.game-card .art img { width: 100%; height: auto; display: block; }
.game-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game-card h2 { font-size: 1.2rem; margin: 0; }
.game-card p { color: var(--muted); font-size: .92rem; margin: 0 0 6px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.facts span { font-size: .8rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; white-space: nowrap; }
.crumbs { font-size: .85rem; color: var(--dim); margin: 4px 0 12px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs span { margin: 0 6px; }
.game-hero { display: grid; gap: 20px; align-items: center; }
.game-hero .art { border-radius: 24px; background: radial-gradient(120% 90% at 50% 10%, rgba(166,107,255,.4), transparent 70%), var(--surface); border: 1px solid var(--line); padding: 16px; }
.game-hero .art img { width: 100%; height: auto; display: block; }
.game-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 10px; }
.game-hero .facts { margin: 14px 0 4px; }
@media (min-width: 900px) { .game-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; } }
.game-cols { display: grid; gap: 0 36px; }
@media (min-width: 900px) { .game-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.rule-steps { list-style: none; counter-reset: rule; padding: 0; margin: 0; display: grid; gap: 10px; }
.rule-steps li { counter-increment: rule; position: relative; padding: 14px 16px 14px 60px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.rule-steps li::before { content: counter(rule); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 800 1rem var(--display); background: var(--grad-hot); box-shadow: 0 0 18px -4px var(--pink); }

/* ---------- How to play ---------- */
.htp-hero { text-align: center; max-width: 720px; margin: 10px auto 10px; }
.htp-hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 10px; }
.htp-hero .eyebrow { justify-content: center; }
.htp-hero .lede { font-size: 1.1rem; }
.htp-hero .facts { justify-content: center; margin-top: 14px; }
.htp-steps { list-style: none; padding: 0; margin: 26px 0 10px; display: grid; gap: 18px; }
.htp-step { display: grid; gap: 8px; align-items: center; padding: 20px 18px; border-radius: 26px; background: linear-gradient(160deg, rgba(58,47,104,.55), rgba(21,16,43,.55)); border: 1px solid var(--line); overflow: hidden; }
.htp-text { position: relative; }
.htp-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font: 800 1.15rem var(--display); background: var(--grad-hot); box-shadow: 0 0 20px -4px var(--pink); margin-bottom: 10px; }
.htp-text h2 { font-size: 1.35rem; margin: 0 0 6px; }
.htp-text p { color: var(--muted); margin: 0 0 10px; }
.htp-text ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.htp-text ul li { font-size: .92rem; color: var(--text); padding-left: 24px; position: relative; }
.htp-text ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.htp-visual .phone-scene .phones { padding: 6px 0 0; }
@media (min-width: 720px) {
  .htp-visual .phone-wrap.is-player { --w: 165px; } .htp-visual .phone-wrap.is-host { --w: 210px; margin: 0 -18px; }
}
@media (min-width: 1000px) {
  .htp-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; padding: 28px 34px; }
  .htp-step:nth-child(even) .htp-text { order: 2; }
  .htp-step.no-scene { grid-template-columns: 1fr; }
  .htp-visual .phone-wrap.is-player { --w: 150px; } .htp-visual .phone-wrap.is-host { --w: 190px; margin: 0 -16px; }
  .htp-text h2 { font-size: 1.6rem; }
}
.feature-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin-top: 12px; }
.feature { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.feature b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.feature p { margin: 0; color: var(--muted); font-size: .92rem; }
.mini-games { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.mini-games a { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.mini-games a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.mini-games img { width: 96px; height: 60px; object-fit: contain; flex: none; border-radius: 10px; background: rgba(166,107,255,.12); }
.mini-games b { display: block; }
.mini-games small { color: var(--muted); font-size: .84rem; line-height: 1.35; display: block; }
.phone-scene-host .phone-wrap.is-host { margin: 0; }
/* Pack rails: swipeable row on phones (with a fade hinting there's more), a tidy wrapping grid on desktop. */
.pack-rail { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
@media (min-width: 1000px) {
  .pack-rail { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 4px 0 0; -webkit-mask-image: none; mask-image: none; }
}

/* ================================================================== Part B · geo-targeted ads */
.tgt { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 0 0 16px; background: rgba(13, 10, 28, .35); min-width: 0; }
.tgt legend { padding: 0 6px; font-weight: 800; font-size: .95rem; }
.tgt .tgt-modes { margin-bottom: 10px; flex-wrap: wrap; overflow: visible; }
.tgt .tgt-modes label { flex: 1 1 auto; }
.tgt .tgt-modes label span { padding: 8px 10px; font-size: .84rem; }
.tgt .tgt-panel[hidden] { display: none; }
.tgt .hint.tgt-panel { margin: 4px 2px 0; }
.tgt-states-head { margin-bottom: 8px; align-items: center; }
.tgt-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.tgt-states .fchip { justify-content: center; padding: 7px 6px; font-size: .82rem; border-radius: 10px; }
.tgt-states .tgt-name { display: none; }
@media (min-width: 720px) {
  .tgt-states { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tgt-states .fchip { justify-content: flex-start; }
  .tgt-states .tgt-code { font-weight: 800; min-width: 2.1em; }
  .tgt-states .tgt-name { display: inline; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.tgt .tgt-radii label span { padding: 8px 10px; }
.tgt-note { margin: 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--amber); background: rgba(255, 197, 61, .09); color: var(--text); font-size: .86rem; line-height: 1.45; }
.tgt-pill { margin-top: 5px; font-weight: 700; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-targeting { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.report-targeting small { flex-basis: 100%; }
.report-geo { margin-top: 14px; }
.report-geo > * { min-width: 0; }
.reach-band { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 26px; border-color: var(--line-strong); background: linear-gradient(135deg, rgba(61, 224, 255, .10), rgba(166, 107, 255, .14)); }
.reach-band h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; }
.reach-band p { margin: 0 0 10px; }
.reach-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 1.6rem; background: rgba(13, 10, 28, .5); border: 1px solid var(--line); }
@media (max-width: 480px) { .reach-band { flex-direction: column; gap: 10px; } }
/* ================================================================== end Part B */
/* ================================================================== Part A: ad-free plans, usage meter, time zones */
.linklike { background: none; border: 0; padding: 0; color: var(--cyan); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.plans .billing-toggle { display: flex; justify-content: center; margin: 4px 0 14px; }
.plans .billing-toggle .seg { max-width: 340px; width: 100%; }
.save-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: rgba(182, 255, 61, .14); color: var(--lime); font-size: .68rem; font-weight: 800; }
.plans .py { display: none; }
.plans:has(#bill-year:checked) .py { display: revert; }
.plans:has(#bill-year:checked) .pm { display: none; }
.plans:has(#bill-year:checked) .btn.py { display: flex; }
.plan-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan .price { margin: 8px 0 0; line-height: 1.1; }
.plan .price-alt { flex: none; margin: 4px 0 12px; font-size: .86rem; color: var(--muted); }
.plan-feats { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 7px; font-size: .94rem; }
.plan-feats li { position: relative; padding-left: 24px; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 800; }
.plan-feats b { color: var(--text); }
.plan .plan-blurb { font-size: .88rem; margin: 0 0 14px; }
.plan .btn + .btn, .plan .btn + .plan-pass { margin-top: 8px; }
.plan-pass { display: block; margin: 10px auto 0; font-size: .86rem; color: var(--muted); }
.plan-best { background: linear-gradient(180deg, rgba(255, 197, 61, .10), rgba(38, 29, 72, .72) 45%); box-shadow: 0 0 0 1px rgba(255, 197, 61, .35), 0 18px 50px -18px rgba(255, 159, 28, .45); }
.plan-pick { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(61, 224, 255, .35), var(--shadow); }
.plan-mine { border-color: var(--ok); }
.badge-gold { background: var(--grad-gold); color: #1c1200; }
.compare-card { margin-top: 18px; }
table.compare th, table.compare td { text-align: center; white-space: nowrap; }
table.compare tbody th { text-align: left; color: var(--muted); font-weight: 600; white-space: normal; min-width: 110px; text-transform: none; letter-spacing: 0; font-size: .86rem; }
table.compare td { white-space: normal; }
table.compare .col-best { color: var(--amber); }
@media (max-width: 480px) { table.compare { font-size: .8rem; } table.compare th, table.compare td { padding: 8px 6px; } }
/* usage meter (dashboard, account, /support) */
.plan-meter { margin: 12px 0; }
.plan-meter-ok { border-color: rgba(47, 213, 122, .35); }
.plan-meter-over { border-color: rgba(255, 176, 32, .55); }
.plan-meter-line { margin: 8px 0 8px; }
.meter { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad-cool); }
.plan-meter-over .meter i { background: var(--grad-gold); }
.plan-meter-nudge { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--amber); background: rgba(255, 197, 61, .09); font-size: .9rem; }
.plan-meter-nudge a { font-weight: 700; color: var(--amber); white-space: nowrap; }
/* host screen: "Ad-free tonight" / over-limit nudge */
.plan-note { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 12px 0; padding: 11px 14px; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.4; border: 1px solid var(--line); background: var(--surface); }
.plan-note span { flex: 1 1 200px; }
.plan-note-ok { border-color: rgba(47, 213, 122, .4); color: var(--text); }
.plan-note-over { border-color: rgba(255, 176, 32, .55); background: rgba(255, 197, 61, .08); }
/* admin plans editor */
.plan-edit { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.plan-edit:last-of-type { border-bottom: 0; }
.usage-bar { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-left: 6px; }
.usage-bar i { display: block; height: 100%; background: var(--grad-cool); }
/* ================================================================== end Part A */

/* ================================================================== Part C: venues, rewards, share cards */
/* venue page */
.venue-page { max-width: 1040px; }
.venue-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start; padding: 20px; background: linear-gradient(140deg, rgba(255,79,139,.16), rgba(166,107,255,.14) 50%, rgba(38,29,72,.72)); }
.venue-hero h1 { font-size: clamp(1.7rem, 6vw, 2.5rem); margin: 0 0 4px; overflow-wrap: anywhere; }
.venue-hero .eyebrow { margin-bottom: 6px; }
.venue-addr { margin: 0 0 8px; font-size: .92rem; }
.venue-stats, .venue-links { margin-top: 8px; }
.venue-links .pill { text-decoration: none; color: var(--text); }
.venue-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.venue-actions .btn { flex: 1 1 auto; }
.venue-logo { width: 84px; height: 84px; flex: none; border-radius: 22px; display: grid; place-items: center; overflow: hidden; font-size: 2.6rem; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 60%), var(--surface-3); border: 1px solid var(--line-strong); box-shadow: 0 0 30px -10px var(--pink); margin: 0 auto; }
.venue-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-logo.sm { width: 52px; height: 52px; border-radius: 15px; font-size: 1.6rem; margin: 0; }
.venue-logo.xs { width: 40px; height: 40px; border-radius: 12px; font-size: 1.25rem; margin: 0; box-shadow: none; }
.venue-grid { display: grid; gap: 0 16px; }
.venue-grid > * { min-width: 0; }
.venue-schedule { list-style: none; margin: 0; padding: 0; }
.venue-schedule li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line); position: relative; font-weight: 600; }
.venue-schedule li:last-child { border-bottom: 0; }
.venue-schedule li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.venue-rewards { list-style: none; margin: 0; padding: 0; }
.venue-rewards li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.venue-rewards li:last-child { border-bottom: 0; }
.venue-rewards li > span:not(.vr-emoji) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.venue-rewards small { color: var(--muted); font-size: .84rem; }
.venue-rewards li.off { opacity: .55; }
.venue-rewards.manage form { margin: 0; }
.vr-emoji { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; font-size: 1.35rem; background: rgba(255, 197, 61, .14); border: 1px solid rgba(255, 197, 61, .35); }
.venue-wall { list-style: none; margin: 0; padding: 0; }
.venue-wall li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.venue-wall li:last-child { border-bottom: 0; }
.venue-wall li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.venue-wall small { color: var(--dim); font-size: .78rem; }
.venue-tag { margin: -4px 0 6px; }
.venue-tag a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 99px; background: rgba(255, 197, 61, .12); border: 1px solid rgba(255, 197, 61, .4); color: var(--amber); font-weight: 700; text-decoration: none; font-size: .9rem; }
@media (min-width: 720px) {
  .venue-hero { grid-template-columns: auto 1fr auto; align-items: center; padding: 24px 26px; }
  .venue-logo { width: 104px; height: 104px; font-size: 3.2rem; }
  .venue-actions { grid-column: auto; flex-direction: column; min-width: 190px; }
}
@media (min-width: 900px) { .venue-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
/* host: my venues, venue dashboard */
.venue-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.venue-row .grow small { display: block; }
.venue-row-name { font: 800 1.12rem var(--display); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-row-btns { display: flex; gap: 6px; margin-left: auto; }
.venue-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.venue-type label span { font-size: .88rem; padding: 10px 8px; }
@media (min-width: 520px) { .venue-type { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.redeem-box .inline-form { margin-top: 4px; }
.redeem-box .code-input { font-size: 1.35rem !important; letter-spacing: .16em; }
.award-list { list-style: none; margin: 0; padding: 0; }
.award-list li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.award-list li:last-child { border-bottom: 0; }
.award-list li.done { opacity: .6; }
.aw-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.aw-main small { font-size: .82rem; color: var(--muted); }
.aw-main small.dim { color: var(--dim); }
.aw-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-left: auto; }
.aw-side form { margin: 0; }
.aw-code, .t-code code { font: 800 .95rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding: 4px 9px; border-radius: 9px; background: rgba(13,10,28,.65); border: 1px dashed rgba(255,197,61,.55); color: var(--amber); }
.kind-picker { display: grid; gap: 8px; grid-template-columns: 1fr; }
.kind-picker label { margin: 0; cursor: pointer; }
.kind-picker input { position: absolute; opacity: 0; pointer-events: none; }
.kind-picker span { display: flex; flex-direction: column; padding: 11px 13px; border-radius: 14px; background: rgba(13,10,28,.5); border: 1.5px solid var(--line); transition: border-color .15s, background .15s; }
.kind-picker small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.kind-picker input:checked + span { border-color: var(--pink); background: rgba(255,79,139,.14); box-shadow: 0 0 18px -8px var(--pink); }
.kind-picker input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (min-width: 560px) { .kind-picker { grid-template-columns: 1fr 1fr; } }
.rule-form { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
/* player profile: reward tickets */
.reward-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticket { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,197,61,.16), rgba(255,79,139,.12)); border: 1px solid rgba(255,197,61,.45); }
.ticket.used { filter: saturate(.3); opacity: .6; }
.t-emoji { font-size: 1.9rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(13,10,28,.45); }
.t-main { display: flex; flex-direction: column; min-width: 0; }
.t-main a { color: var(--amber); }
.t-main small { font-size: .82rem; color: var(--muted); }
.t-main small.dim { color: var(--dim); }
.t-code { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(255,197,61,.4); }
.t-code small { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--muted); font-weight: 700; }
.t-code code { font-size: 1.2rem; }
/* leaderboards: tabs, near me, venue search */
.lb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.lb-tabs a { font-size: .84rem; padding: 9px 4px; white-space: nowrap; }
@media (max-width: 400px) { .lb-tabs a { font-size: .78rem; } }
.near-card h3 { font-size: 1.15rem; }
.near-pick select { min-width: 170px; }
.venue-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.venue-search input[type=search] { flex: 1 1 200px; min-width: 0; }
.venue-search select { flex: 1 1 140px; }
.venue-board .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* share sheet (share-card.js) */
.share-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.share-sheet .ss-scrim { position: absolute; inset: 0; background: rgba(5, 3, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.share-sheet .ss-panel { position: relative; width: 100%; max-width: 460px; max-height: 94dvh; overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 24px 24px 0 0; padding: 14px 16px calc(16px + var(--safe-b)); transform: translateY(40px); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s; box-shadow: 0 -20px 60px -20px rgba(255,79,139,.4); }
.share-sheet.open .ss-scrim { opacity: 1; }
.share-sheet.open .ss-panel { transform: none; opacity: 1; }
.ss-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 800 1.1rem var(--display); }
.ss-preview { display: grid; place-items: center; aspect-ratio: 4 / 5; max-height: 52dvh; margin: 0 auto 12px; border-radius: 16px; overflow: hidden; background: rgba(13,10,28,.6); border: 1px solid var(--line); }
.ss-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ss-loading { color: var(--muted); font-weight: 600; padding: 20px; text-align: center; }
.ss-btns { display: grid; gap: 8px; }
.ss-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ss-row .btn { padding: 0 6px; font-size: .82rem; }
.ss-row [aria-disabled=true] { opacity: .45; pointer-events: none; }
.ss-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-row [hidden] { display: none; }
@media (min-width: 700px) { .share-sheet { align-items: center; } .share-sheet .ss-panel { border-radius: 24px; } }
/* ================================================================== end Part C */
/* ================================================================== Part D: team play */
/* Team vote: my team's live picks, tie box, captain */
.tv-panel { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.tv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tv-head > b { display: inline-flex; }
.tv-head small { flex: 1 1 auto; }
.tv-head .tv-cap summary { font-size: .8rem; font-weight: 700; color: var(--amber); cursor: pointer; list-style: none; padding: 4px 10px; border: 1px solid rgba(255,197,61,.45); border-radius: 99px; }
.tv-head .tv-cap summary::-webkit-details-marker { display: none; }
.tv-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-pick { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .88rem; max-width: 100%; }
.tv-pick b { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.tv-pick.in { color: var(--text); }
.tv-pick.in b { color: var(--cyan); }
.tv-pick.me { outline: 1px solid var(--line-strong); }
.tv-pick i { font-style: normal; }
.tv-median { margin: 10px 0 0; font-size: .95rem; }
.tv-median b { color: var(--amber); }
.tv-fine { font-size: .82rem; margin: 10px 0 0; }
.tv-note { font-size: .82rem; margin: 12px 0 6px; }
.tv-on { position: absolute; right: 10px; bottom: 8px; max-width: 60%; font: 600 .72rem var(--font); font-style: normal; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-grid.tf .tv-on { position: static; margin-top: 6px; max-width: 100%; }
.choice.selected { outline: 3px solid #fff; outline-offset: 2px; }
.choice.selected b::after { content: '✓'; position: absolute; top: 8px; right: 10px; font-size: .9rem; }
.tv-same { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tv-same .btn { white-space: normal; height: auto; min-height: 40px; padding: 8px 14px; text-align: left; justify-content: flex-start; }
.tv-tie { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,197,61,.16), rgba(255,79,139,.12)); border: 1px solid rgba(255,197,61,.5); animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.tv-tie h3 { margin: 0 0 4px; color: var(--amber); }
.tv-tie p { margin: 0 0 10px; }
.tv-tie-opts { display: grid; gap: 8px; }
.tv-tie-opts .btn small { color: rgba(40,20,0,.7); font-weight: 700; margin-left: 4px; }
.tv-banner { margin: 10px 0; }
.tv-captain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--muted); }
.tv-captain span { flex: 1 1 200px; }
.tv-captain b { color: var(--text); }
.tv-captain summary { font-size: .82rem; font-weight: 700; color: var(--amber); cursor: pointer; }
/* team size cap */
.team-chip small { opacity: .7; font-weight: 600; margin-left: 2px; }
.team-chip.team-full { opacity: .45; border-style: dashed; cursor: not-allowed; }
.team-full-note { margin: 0 0 8px; font-size: .85rem; color: var(--warn); }
/* host lobby: "teams have formed → Team vote" */
.team-hint { border-color: rgba(255,197,61,.45); }
.team-hint h3 { margin-bottom: 4px; }
.team-hint p { margin: 0 0 12px; }
/* boards: average points label */
.pts-avg { display: block; font: 700 .62rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
/* session builder: one line per mode, the chosen one highlighted */
.option-help { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: var(--dim); }
.option-help li { padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; }
.option-help li b { color: var(--muted); }
.field:has(select option[value="individual"]:checked) .option-help li[data-opt="individual"],
.field:has(select option[value="vote"]:checked) .option-help li[data-opt="vote"],
.field:has(select option[value="team"]:checked) .option-help li[data-opt="team"] { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.field:has(select option:checked) .option-help li[data-opt] b { color: inherit; }
.team-play-card { margin-top: 16px; }
details.menu.tv-cap > summary, .tv-captain details.menu > summary { width: auto; height: 32px; padding: 0 12px; font: 700 .8rem var(--font); color: var(--amber); border: 1px solid rgba(255,197,61,.45); border-radius: 99px; white-space: nowrap; }
.tv-captain details.menu, .tv-head details.menu { position: relative; }
/* ================================================================== end Part D */

/* ================================================================== Part E: scheduled nights, venue QR, join protection, 👀 */
.status-scheduled { background: rgba(61, 224, 255, .14); color: var(--cyan); }
.btn-ok { background: var(--ok); color: #05210f; border: 0; font-weight: 800; }
/* session builder: When? / Who can join? */
.seg-choice { margin-top: 2px; }
.seg-choice label span { font-size: .92rem; }
.seg-choice input:disabled + span { opacity: .45; cursor: not-allowed; }
.seg-sm label span { padding: 7px 10px; font-size: .82rem; }
.when-later { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.when-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.when-row input, .when-row select { min-width: 0; width: 100%; }
.when-row .field { margin-bottom: 12px; }
.join-card { margin-top: 12px; }
.join-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.join-mode { margin: 0; cursor: pointer; }
.join-mode input { position: absolute; opacity: 0; pointer-events: none; }
.join-mode span, .join-mode-btn { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(13, 10, 28, .45); text-align: left; transition: border-color .15s, background .15s; }
.join-mode b, .join-mode-btn b { font-size: .92rem; color: var(--text); }
.join-mode small, .join-mode-btn small { font-size: .76rem; color: var(--muted); font-weight: 500; line-height: 1.3; }
.join-mode input:checked + span, .join-mode-btn.selected { border-color: var(--pink); background: rgba(255, 79, 139, .12); box-shadow: 0 0 0 1px rgba(255, 79, 139, .35); }
.join-mode input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.join-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.join-mode-btn { font: inherit; color: inherit; cursor: pointer; }
.join-mode-btn.selected { cursor: default; }
.toggle-btn { width: 100%; background: none; border: 0; color: inherit; font: 700 .95rem var(--font); text-align: left; padding: 0; margin-top: 8px; }
.toggle-btn small { display: block; font-weight: 500; font-size: .8rem; }
.switch { position: relative; width: 54px; height: 32px; flex: none; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(22px); }
/* host screen: room PIN on the QR card (big enough for a TV across the bar) */
.room-pin { display: inline-flex; flex-direction: column; align-items: center; margin: 14px auto 0; padding: 10px 22px 12px; border-radius: 18px; background: rgba(13, 10, 28, .7); border: 1px solid rgba(61, 224, 255, .45); box-shadow: 0 0 30px -10px var(--cyan); }
.room-pin small { font: 800 .72rem var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.room-pin b { font: 800 clamp(2.6rem, 11vw, 4.6rem)/1.05 var(--display); letter-spacing: .16em; padding-left: .16em; color: #fff; text-shadow: 0 0 22px rgba(61, 224, 255, .55); font-variant-numeric: tabular-nums; }
.room-pin span { font-size: .78rem; color: var(--muted); }
.join-badge { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 99px; background: rgba(13, 10, 28, .6); border: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--muted); }
.pending-card .plist-row .btn { min-width: 44px; }
.pending-card .plist-name small { color: var(--muted); }
/* 👀 left-the-app flags (host only) */
.away-flag { font-style: normal; margin-left: 4px; font-size: .95em; cursor: help; }
.away-flag.away-now { animation: away-pulse 1.4s ease-in-out infinite; }
@keyframes away-pulse { 50% { opacity: .35; } }
.away-strip { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 197, 61, .4); background: rgba(255, 197, 61, .08); }
.away-strip b { display: block; font-size: .85rem; margin-bottom: 6px; color: var(--amber); }
.away-strip .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.away-tally { color: var(--amber) !important; font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { .away-flag.away-now { animation: none; } }
/* scheduled night: host card, early-scan page, upcoming lists */
.sched-lead { font: 800 1.35rem/1.2 var(--display); margin: 0 0 8px; background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sched-msg h2 { font-size: 1.45rem; line-height: 1.2; }
.sched-card { display: grid; gap: 12px; }
.sched-when { display: flex; align-items: center; gap: 14px; }
.sched-when > div { display: flex; flex-direction: column; gap: 2px; }
.sched-when > div > b { font: 800 1.5rem var(--display); }
.sched-cal { flex: none; width: 58px; border-radius: 14px; overflow: hidden; text-align: center; background: rgba(13, 10, 28, .6); border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.sched-cal b { display: block; background: var(--grad-hot); color: #fff; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 0; }
.sched-cal i { font: 800 1.45rem/1.2 var(--display); font-style: normal; padding-top: 2px; }
.sched-cal small { font-size: .66rem; color: var(--muted); padding-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; }
.sched-cal-rep b { background: var(--grad-cool); }
.sched-venue { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--text); text-decoration: none; background: rgba(13, 10, 28, .35); }
.sched-venue > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sched-venue > span:first-child { font-size: 1.6rem; }
.night-list { list-style: none; margin: 0; padding: 0; }
.night-list > li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.night-list > li:last-child { border-bottom: 0; }
.night-list > li.dimmed { opacity: .55; }
.night-meta { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.night-meta small { display: block; }
.night-meta .status { align-self: flex-start; margin-top: 3px; }
.night-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.night-actions form { margin: 0; }
.night-list-sm > li { padding: 10px 0; align-items: center; }
@media (min-width: 520px) { .night-actions { padding-left: 70px; } }
/* join page: PIN, nearby & 👀 notes, waiting room */
.pin-input { text-align: center; font: 800 2rem/1 var(--display) !important; letter-spacing: .5em; padding-left: .5em !important; font-variant-numeric: tabular-nums; }
.join-note { margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid rgba(61, 224, 255, .35); background: rgba(61, 224, 255, .07); font-size: .88rem; line-height: 1.45; }
.join-note-soft { border-color: var(--line); background: rgba(13, 10, 28, .35); color: var(--muted); }
.wait-spinner { font-size: 3.4rem; display: inline-block; animation: wait-wave 1.6s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes wait-wave { 0%, 60%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .wait-spinner { animation: none; } }
/* venue: permanent QR */
.venue-play .lead-next { font-size: 1.1rem; margin: 6px 0 0; }
.venue-play .session-list { padding: 4px 16px; }
.venue-qr-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.venue-qr-card img { width: 120px; height: 120px; background: #fff; border-radius: 14px; padding: 6px; flex: none; }
.venue-qr-card > div { flex: 1 1 220px; }
.venue-qr-card .row-btns { justify-content: flex-start; margin-top: 0; }
@media (max-width: 380px) { .join-modes, .join-mode-grid { grid-template-columns: 1fr; } }
/* ================================================================== end Part E */

/* ================================================================== Part F: host review of disputed answers ("🙋 I think I got it") */
.appeal-card { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); animation: appealIn .35s ease-out; }
.appeal-card b { display: block; font: 800 1.05rem/1.25 var(--display); }
.appeal-card small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.appeal-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; background: rgba(13, 10, 28, .45); }
.appeal-ask { display: block; border-color: rgba(255, 197, 61, .5); background: linear-gradient(160deg, rgba(255, 197, 61, .12), rgba(38, 29, 72, .72) 60%); box-shadow: 0 10px 30px -18px rgba(255, 197, 61, .8); }
.appeal-q { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.appeal-q small { font-size: .8rem; }
.appeal-guess { margin: 8px 0 10px; font: 700 1.1rem/1.3 var(--display); text-align: center; overflow-wrap: anywhere; }
.appeal-btn { min-height: var(--tap); font-size: 1.05rem; }
.appeal-pick { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.appeal-pick li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(13, 10, 28, .4); }
.appeal-pick li > span { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.appeal-pick .btn { flex: none; }
.appeal-wait { border-color: rgba(61, 224, 255, .4); background: rgba(61, 224, 255, .07); }
.appeal-wait .appeal-ico { animation: wait-wave 1.6s ease-in-out infinite; transform-origin: 70% 80%; }
.appeal-yes { border-color: rgba(47, 213, 122, .55); background: rgba(47, 213, 122, .12); }
.appeal-yes .appeal-ico { background: var(--ok); color: #05210f; }
.appeal-pts { color: var(--ok); margin-left: 4px; }
.appeal-no { border-color: rgba(255, 90, 106, .4); background: rgba(255, 90, 106, .08); }
.appeal-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 999px; font-size: .86rem; text-align: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); overflow-wrap: anywhere; }
.appeal-note-yes { color: var(--text); border-color: rgba(47, 213, 122, .5); background: rgba(47, 213, 122, .1); }
.appeal-note-yes b { color: var(--ok); }
/* host tray */
.appeal-tray.has-pending { border-color: rgba(255, 197, 61, .55); box-shadow: 0 0 0 1px rgba(255, 197, 61, .18), 0 14px 36px -20px rgba(255, 197, 61, .9); }
.appeal-tray h3 { margin-bottom: 2px; }
.appeal-hint { margin: 0 0 10px; }
.appeal-list { list-style: none; margin: 0; padding: 0; }
.appeal-row { padding: 11px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.appeal-row:first-child { border-top: 0; padding-top: 4px; }
.appeal-who { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.appeal-who .pill { margin-left: auto; }
.appeal-vs { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 12px; background: rgba(13, 10, 28, .45); }
.appeal-typed { font: 700 1.05rem/1.3 var(--display); overflow-wrap: anywhere; }
.appeal-real { font-size: .86rem; color: var(--ok); overflow-wrap: anywhere; }
.appeal-acts { display: flex; gap: 8px; }
.appeal-acts .btn-ok { flex: 1; }
.appeal-acts .btn-ok small { color: #05210f; opacity: .7; font-weight: 800; margin-left: 6px; font-size: .85em; }
.appeal-acts .btn-ghost { flex: 0 0 auto; min-width: 92px; }
.appeal-counted { margin-top: 8px; font-size: .88rem; }
.appeal-counted summary { cursor: pointer; color: var(--ok); font-weight: 700; }
.appeal-counted ul, .appeal-wrong-list { list-style: none; margin: 8px 0 0; padding: 0; }
.appeal-counted li, .appeal-wrong-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.appeal-counted li > span { min-width: 0; overflow-wrap: anywhere; }
.appeal-tray:not(.has-pending) { padding: 8px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.appeal-tray:not(.has-pending) .appeal-counted { margin-top: 0; }
/* host: the reveal's wrong guesses, tap to count */
.appeal-wrong > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; cursor: pointer; font-weight: 700; list-style: none; }
.appeal-wrong > summary > span { white-space: nowrap; }
.appeal-wrong > summary::-webkit-details-marker { display: none; }
.appeal-wrong > summary::after { content: '▾'; color: var(--dim); }
.appeal-wrong[open] > summary::after { content: '▴'; }
.appeal-wrong > summary small { font-weight: 500; flex: 1 1 auto; }
.appeal-wrong-list li .who { flex: 0 1 auto; min-width: 0; }
.appeal-wrong-list li .appeal-typed { flex: 1 1 auto; font-size: .95rem; text-align: right; min-width: 0; }
.appeal-wrong-list li .btn { flex: none; }
.variants-table code { font-size: .8rem; }
@keyframes appealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .appeal-card, .appeal-wait .appeal-ico { animation: none; } }
/* ================================================================== end Part F */

/* ================================================================== Part G: player accounts, ✓ names, nights near you, weekly email */
.vtick { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; margin-left: .3em; border-radius: 50%; background: var(--cyan); color: #0d0a1c; font: 900 .68em/1 var(--font); font-style: normal; vertical-align: .12em; box-shadow: 0 0 10px rgba(61, 224, 255, .55); flex: none; }
.chip .vtick { margin-left: -2px; }
h1 .vtick, h2 .vtick { font-size: .5em; vertical-align: .4em; }
.pill-verified { background: rgba(61, 224, 255, .12); border-color: rgba(61, 224, 255, .45); color: var(--cyan); }
.name-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.name-idea { cursor: pointer; padding: 8px 14px; font: 700 .92rem var(--font); color: var(--text); }
.name-idea:hover, .name-idea:focus-visible { border-color: var(--cyan); }
.vtick-upsell a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.me-page .profile-hero .row-btns { gap: 8px; flex-wrap: wrap; }
.me-signup-h { font-size: 1.45rem; line-height: 1.2; margin: 0 0 14px; }
.benefits { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.benefits li { display: flex; gap: 12px; align-items: flex-start; }
.benefits b { display: block; font-size: 1rem; }
.benefits small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.b-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--surface-2); border: 1px solid var(--line); }
.b-ico.b-tick { background: var(--cyan); color: #0d0a1c; font-weight: 900; border-color: transparent; box-shadow: 0 0 16px rgba(61, 224, 255, .45); }
.me-signup-form { border-top: 1px solid var(--line); padding-top: 14px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-weight: 600; cursor: pointer; line-height: 1.35; }
.check-row input { width: 22px; height: 22px; flex: none; accent-color: var(--pink); margin: 0; }
.me-verify h3 { margin-top: 0; }
.me-link { margin-top: 12px; }
.me-link summary, #account details summary { cursor: pointer; color: var(--muted); }
.reward-progress { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.reward-progress li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.reward-progress li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.reward-progress .rp-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.reward-progress .rp-bar i { display: block; height: 100%; background: var(--grad-hot); border-radius: inherit; }
.reward-progress small { color: var(--amber); font-weight: 700; white-space: nowrap; }
.nearby-list { list-style: none; margin: 0 0 14px; padding: 0; }
.nearby-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nearby-list li:last-child { border-bottom: 0; }
.nb-date { flex: none; width: 52px; text-align: center; border-radius: 12px; background: var(--surface-2); padding: 6px 0; border: 1px solid var(--line); }
.nb-date b { display: block; font: 800 .8rem var(--font); text-transform: uppercase; color: var(--pink); letter-spacing: .06em; }
.nb-date small { display: block; font-weight: 700; font-size: .82rem; }
.nb-main { flex: 1; min-width: 0; }
.nb-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-main small { color: var(--muted); }
.nb-main a { color: var(--cyan); text-decoration: none; }
.nb-dist { flex: none; font-size: .8rem; font-weight: 800; color: var(--lime); white-space: nowrap; }
.area-form { border-top: 1px solid var(--line); padding-top: 12px; }
.we-preview-head { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; margin: 14px 0 10px; }
.we-preview { width: 100%; height: 900px; border: 1px solid var(--line); border-radius: 14px; background: #0d0a1c; }
/* ================================================================== end Part G */

/* ================================================================== Part H: plan features, upsells, preview banner, pricing, TV screen */
/* --- upsells: small, friendly, dismissible */
.upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; padding: 8px 10px 8px 12px; border-radius: 12px; background: rgba(255, 197, 61, .07); border: 1px dashed rgba(255, 197, 61, .35); color: var(--muted); font-size: .84rem; line-height: 1.35; }
.upsell[hidden] { display: none; }
.upsell > span { flex: 1 1 220px; min-width: 0; }
.upsell .btn { flex: none; }
.upsell-x { flex: none; background: none; border: 0; color: var(--dim); font-size: .9rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.upsell-x:hover { color: var(--text); background: var(--surface-2); }
.upsell-mini { color: var(--amber) !important; font-weight: 700; }
.join-mode.is-locked span, .join-mode-btn.is-locked { opacity: .62; border-style: dashed; cursor: pointer; text-decoration: none; }
.join-mode.is-locked input:checked + span { border-color: var(--line); background: rgba(13, 10, 28, .45); box-shadow: none; }
.toggle-btn.is-locked { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; opacity: .7; }
.picker .picker-locked { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; background: rgba(28, 21, 56, .7); border: 1px dashed var(--line-strong); border-radius: 20px; padding: 0 0 12px; color: var(--text); text-decoration: none; overflow: hidden; }
.picker .picker-locked img { width: 100%; height: auto; display: block; filter: grayscale(.7) brightness(.7); }
.picker .picker-locked b { font: 800 1.02rem var(--display); padding: 0 12px; }
.picker .picker-locked small { font-size: .76rem; line-height: 1.3; padding: 0 12px; }
.locked-page { text-align: center; padding: 30px 20px; margin-top: 18px; }
.locked-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; }
/* --- admin preview banner */
.preview-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 7px 14px; background: var(--grad-gold); color: #2a1600; font: 700 .86rem var(--font); }
.preview-banner a { color: #2a1600; }
.preview-banner button { background: #2a1600; color: #ffe07a; border: 0; border-radius: 99px; padding: 4px 14px; font: 800 .8rem var(--font); cursor: pointer; }
/* --- admin feature matrix */
.feature-matrix td, .feature-matrix th { vertical-align: middle; }
.feature-matrix select { min-width: 215px; }
.feature-matrix .fm-group th { background: rgba(166, 107, 255, .08); color: var(--cyan); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.fm-changed { display: inline-block; margin-left: 6px; color: var(--amber); font-weight: 700; font-size: .72rem; }
.preview-card .seg button { min-height: 36px; }
/* --- host screen: TV card */
.tv-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
.tv-card .tv-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: var(--grad-cool); box-shadow: 0 8px 24px -10px rgba(61, 224, 255, .8); }
.tv-card > span:nth-child(2) { flex: 1; min-width: 0; }
.tv-card b { display: block; font: 800 1.02rem var(--display); }
.tv-card small { display: block; font-size: .82rem; line-height: 1.35; }
.tv-card .tv-go { flex: none; font-size: 1.6rem; color: var(--muted); }
.tv-card.is-locked { opacity: .8; border-style: dashed; }
.tv-code-input { font: 800 2rem var(--display); letter-spacing: .3em; text-align: center; }
.tv-steps { margin: 0 0 6px; padding-left: 20px; color: var(--muted); }
.tv-steps li { margin: 6px 0; }
.tv-steps b { color: var(--text); }
.tv-targets { border: 0; padding: 0; margin: 0 0 12px; }
.tv-targets legend { font-weight: 700; margin-bottom: 6px; }
.tv-target { display: block; margin: 0 0 8px; cursor: pointer; }
.tv-target input { position: absolute; opacity: 0; }
.tv-target span { display: block; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(13, 10, 28, .45); }
.tv-target small { display: block; color: var(--muted); font-size: .8rem; }
.tv-target input:checked + span { border-color: var(--pink); background: rgba(255, 79, 139, .12); }
.tv-venue-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tv-venue-row:last-child { border-bottom: 0; }
/* --- /support → /pricing card */
.support-pricing { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-decoration: none; color: var(--text); }
.support-pricing > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.support-pricing b { display: block; font: 800 1.05rem var(--display); }
.support-pricing small { display: block; }
.sp-ico { font-size: 1.8rem; }
/* --- /pricing */
.pricing-hero { text-align: center; padding: 18px 0 8px; max-width: 760px; margin: 0 auto; }
.pricing-hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.05; margin: 0 0 12px; }
.pricing-hero .hl { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pricing-hero .lead { color: var(--muted); font-size: 1.08rem; margin: 0 auto 14px; max-width: 36em; }
.pricing-promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pricing-promises span { padding: 6px 12px; border-radius: 99px; background: rgba(47, 213, 122, .1); color: var(--ok); font: 700 .82rem var(--font); border: 1px solid rgba(47, 213, 122, .25); }
.pricing .billing-toggle { display: flex; justify-content: center; margin: 18px 0 14px; }
.pricing .plan-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pricing .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pricing .plan-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pricing .plan-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-free { border-color: rgba(47, 213, 122, .45); background: linear-gradient(180deg, rgba(47, 213, 122, .09), rgba(38, 29, 72, .72) 45%); }
.badge-free { background: var(--ok); color: #04220f; }
.plan .plan-feats { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.plan .plan-feats li { padding-left: 22px; position: relative; }
.plan .plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 900; }
.guest-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(61, 224, 255, .08); border: 1px solid rgba(61, 224, 255, .25); color: var(--text); }
.compare-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.compare-switch .seg { flex: 1; min-width: 0; }
@media (min-width: 900px) { .compare-switch { display: none; } }
.compare-card { padding: 6px 10px 14px; overflow: visible; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.compare-table .c-feat { text-align: left; width: 46%; }
@media (min-width: 900px) { .compare-table .c-feat { width: 34%; } }
.compare-table .c-feat .cf-l { display: block; font-weight: 700; color: var(--text); }
.compare-table .c-feat small { display: block; color: var(--dim); font-size: .76rem; font-weight: 500; line-height: 1.35; margin-top: 2px; }
.compare-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-solid); vertical-align: bottom; }
.compare-table thead th b { display: block; font: 800 1rem var(--display); }
.compare-table thead th small { display: block; color: var(--muted); font-weight: 700; font-size: .78rem; }
.compare-table thead th small.lim { color: var(--dim); font-weight: 600; font-size: .7rem; }
.compare-table thead .col-free b { color: var(--ok); }
.compare-table .col-best { background: rgba(255, 197, 61, .07); }
.compare-table thead th.col-best { background: #2e2447; box-shadow: inset 0 3px 0 var(--amber); }
.compare-table thead th.col-best b { color: var(--amber); }
.compare-table tr.cg th { text-align: left; padding: 16px 8px 6px; color: var(--cyan); font: 800 .74rem var(--font); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
.compare-table .yes { color: var(--ok); font-weight: 900; font-size: 1.1rem; }
.compare-table .no { color: var(--dim); }
.compare-table td { font-weight: 700; font-size: .84rem; }
.compare-table .players-row th { text-align: left; background: rgba(47, 213, 122, .06); }
.pricing-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0 30px; background: linear-gradient(135deg, rgba(255, 79, 139, .16), rgba(166, 107, 255, .14)); }

/* --- the TV screen (/tv): its layout moved to the "Part J" block at the end of this file (fluid, any display). */
.tv-card small b { display: inline; font: inherit; font-weight: 800; color: var(--text); }
/* pricing table: sit under the sticky site header; on phones only Free + one plan, sized to fit */
.compare-table thead th { top: 61px; }
@media (max-width: 899px) {
  .compare-table thead th { top: 65px; }
  .compare-table { table-layout: auto; }
  .compare-table .c-feat { width: 52%; }
  .compare-table [data-col] { width: 24%; }
  .compare-table thead th b { font-size: .92rem; overflow-wrap: normal; word-break: normal; }
  .compare-table th, .compare-table td { overflow-wrap: normal; }
  .compare-table .c-feat, .compare-table .c-feat small { overflow-wrap: anywhere; }
}
.pricing .plan .badge { position: static; align-self: flex-start; margin: 0 0 8px; }
/* ================================================================== end Part H */

/* ================================================================== Part J: mobile-first polish — /pricing fixes and a TV screen that fits any display */
/*
 * TV screen (/tv, views/tv.php + public/assets/js/tv.js). One design unit: the root font size, taken from the
 * smaller of width and height so 720p, 1080p, 4K, laptops, iPads and propped-up phones all get the same composition.
 * Inside each [data-fit] box everything is sized in em; tv.js shrinks the box's font until it fits (no scrolling,
 * no clipped text), and [data-trim] lists hide what doesn't fit behind "+N more".
 * Landscape = side panels on the right; portrait / square-ish (aspect ≤ 6:5) = stacked, choices one per row.
 */
html.tv-html { height: 100%; font-size: clamp(8px, min(1.25vw, 2.2vh), 72px); }
@media (max-aspect-ratio: 6/5) { html.tv-html { font-size: clamp(8px, min(3.1vw, 1.85vh), 72px); } }
body.tv { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(90% 70% at 15% 0%, rgba(166, 107, 255, .28), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(255, 79, 139, .22), transparent 60%), var(--bg); color: var(--text); font-family: var(--font); cursor: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.tv:hover { cursor: default; }
.tv { --tv-a: var(--tv-accent, var(--pink)); --tv-b: var(--tv-accent-2, var(--amber));
  /* overscan-safe margins: ~4.5% of each side (TVs crop 2.5–5%), never under the notch / home bar */
  --tv-py: clamp(10px, 4.5vh, 120px); --tv-px: clamp(12px, 4.5vw, 200px); }
.tv .tv-root { position: fixed; inset: 0; box-sizing: border-box; display: flex; flex-direction: column;
  padding: max(env(safe-area-inset-top), var(--tv-py)) max(env(safe-area-inset-right), var(--tv-px)) max(env(safe-area-inset-bottom), var(--tv-py)) max(env(safe-area-inset-left), var(--tv-px)); }
.tv .tv-root > * { flex: 1 1 auto; min-height: 0; min-width: 0; }
.tv [data-fit] { min-width: 0; min-height: 0; overflow: hidden; }
.tv [data-trim] { position: relative; min-height: 0; overflow: hidden; }
/* centred boxes centre with auto margins, so a box that is too full overflows at the bottom (where tv.js can measure it) */
.tv [data-fit="center"] { justify-content: flex-start !important; }
.tv [data-fit="center"] > :first-child { margin-top: auto; }
.tv [data-fit="center"] > :last-child { margin-bottom: auto; }
.tv .tv-more { color: var(--muted); font-weight: 800; }
.tv h1, .tv h2, .tv h3 { font-family: var(--display); margin: 0; overflow-wrap: break-word; }
.tv p { margin: 0; }
.tv-noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 2rem; }
.tv .tv-boot, .tv .tv-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1em; }
.tv .tv-boot img { width: 8rem; height: 8rem; animation: tvPulse 1.6s ease-in-out infinite; }
.tv .tv-boot p { font-size: 1.6rem; color: var(--muted); }
@keyframes tvPulse { 50% { transform: scale(1.08); opacity: .8; } }
/* entrance animations only scale down (never push content past its box while tv.js measures it) */
@keyframes tvPop { from { transform: scale(.94); opacity: 0; } }
.tv .tv-net { position: fixed; top: max(1.5vh, 8px); right: max(1.5vw, 8px); padding: .5rem 1.2rem; border-radius: 99px; background: var(--warn); color: #2a1600; font: 800 max(12px, 1rem) var(--font); z-index: 10; }
.tv .tv-fs { position: fixed; bottom: max(1vh, 6px); right: max(1vw, 6px); opacity: 0; transition: opacity .3s; padding: .5em 1em; min-height: 36px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-solid); color: var(--text); font: 700 max(13px, .9rem) var(--font); cursor: pointer; z-index: 10; pointer-events: none; }
.tv .tv-fs.on { opacity: 1; pointer-events: auto; }
.tv .tv-dim { color: var(--muted); }
.tv .tv-big-emoji { font-size: 6em; line-height: 1; }
.tv .tv-center h1 { font-size: 3.2em; max-width: 24em; text-wrap: balance; }
.tv .tv-lead { font-size: 1.55em; color: var(--muted); line-height: 1.35; }
.tv .tv-lead b { color: var(--text); }
.tv .tv-brand { display: flex; align-items: center; gap: .6em; font: 800 1.5em var(--display); min-width: 0; }
.tv .tv-brand > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv .tv-logo { flex: none; height: 2.1em; width: auto; max-width: 8em; object-fit: contain; border-radius: .4em; }
.tv .wm > span { color: var(--tv-a); text-shadow: 0 0 14px rgba(255, 79, 139, .55); }
/* QR codes: vector (inline SVG or an SVG <img>), white quiet zone, never smaller than a phone can read across a table */
.tv .tv-qr { box-sizing: border-box; background: #fff; border-radius: 1.2rem; padding: max(6px, 3.5%); box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .08), 0 2rem 5rem -2rem rgba(0, 0, 0, .9); line-height: 0; aspect-ratio: 1; flex: none; }
.tv .tv-qr svg, .tv .tv-qr img { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.tv .tv-av { flex: none; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c, #a66bff); color: #fff; font: 800 1em/1 var(--display); box-shadow: 0 0 0 .13em rgba(255, 255, 255, .12); }
.tv .tv-av.big { width: 2.6em; height: 2.6em; font-size: 1.9em; }
.tv .tv-chips { display: flex; flex-wrap: wrap; gap: .5em; align-content: flex-start; min-width: 0; }
.tv .tv-chip { display: inline-flex; align-items: center; gap: .45em; max-width: 100%; box-sizing: border-box; padding: .25em .8em .25em .25em; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font: 700 1.3em var(--font); animation: tvPop .35s ease-out both; }
.tv .tv-chip > span:not(.tv-av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv .tv-chip small { flex: none; color: var(--tv-b); font-weight: 800; font-size: .8em; }
.tv .tv-chip.tv-more { padding-left: .8em; background: none; border-style: dashed; }
.tv .tv-eyebrow { font: 800 1.1em var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.tv .tv-title { font-size: 3.6em; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.tv .tv-pill { flex: none; padding: .3em .9em; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font: 800 1.1em var(--font); white-space: nowrap; }
.tv .tv-pill-dim { color: var(--muted); font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* --- pairing */
.tv .tv-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5vw; align-items: center; }
.tv .tv-pair-qr { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.tv .tv-pair-qr .tv-qr { width: clamp(150px, min(34vw, 62vh), 1400px); }
.tv .tv-pair-qr small { font-size: max(12px, 1.2rem); color: var(--muted); text-align: center; }
.tv .tv-pair-main { display: flex; flex-direction: column; justify-content: center; gap: .9em; max-height: 100%; }
.tv .tv-pair-main h1 { font-size: 4.2em; line-height: 1.05; }
.tv .tv-paircode { display: flex; align-items: center; gap: .15em; font: 800 8.4em/1 var(--display); letter-spacing: .06em; white-space: nowrap; background: linear-gradient(135deg, #fff, #d9ccff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv .tv-paircode i { flex: none; width: .24em; height: .06em; border-radius: 99px; background: var(--tv-a); }
.tv .tv-expire { height: .45em; width: min(100%, 36em); border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tv .tv-expire i { display: block; height: 100%; background: var(--grad-cool); transition: width .25s linear; }
.tv .tv-note { font-size: 1.15em; color: var(--dim); max-width: 34em; }
/* --- lobby */
.tv .tv-lobby { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4vw; align-items: stretch; }
.tv .tv-lobby-qr { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5em; min-height: 0; min-width: 0; }
.tv .tv-qr-join { width: clamp(150px, min(36vw, 56vh), 1400px); }
.tv .tv-code { font: 800 5.2rem/1 var(--display); letter-spacing: .12em; color: #fff; text-shadow: 0 0 2rem rgba(255, 79, 139, .45); white-space: nowrap; }
.tv .tv-url { font-size: max(12px, 1.35rem); color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.tv .tv-url b { color: var(--text); letter-spacing: .08em; }
.tv .tv-lobby-main { display: flex; flex-direction: column; gap: 1em; }
.tv .tv-lobby-main > * { flex: none; }
.tv .tv-count { font-size: 1.6em; color: var(--muted); }
.tv .tv-count > b:first-child { font: 800 1.9em var(--display); color: var(--tv-b); vertical-align: -.12em; margin-right: .15em; }
.tv .tv-lobby-main .tv-chips { flex: 0 1 auto; min-height: 2.2em; }
.tv .tv-lobby-foot { display: flex; gap: 1.2em; align-items: flex-end; margin-top: auto; min-height: 0; }
.tv .tv-lobby-foot > * { flex: 1 1 0; min-width: 0; }
/* --- a game: header / stage / footer */
.tv .tv-game-screen, .tv .tv-final { display: flex; flex-direction: column; gap: 1.6vh; }
.tv .tv-head { flex: none; display: flex; align-items: center; gap: .8em; flex-wrap: nowrap; min-width: 0; font-size: 1rem; }
.tv .tv-head .tv-brand { font-size: 1.2em; flex: 0 1 auto; min-width: 2.1em; }
.tv .tv-head .tv-brand .tv-logo { height: 2.1em; }
.tv .tv-head .grow { flex: 1 1 0; min-width: 0; }
.tv .tv-game { flex: none; font: 800 1.6em var(--display); white-space: nowrap; }
.tv .tv-joinmini { flex: none; display: flex; align-items: center; gap: .6em; padding: .3em .8em .3em .3em; border-radius: .9em; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 1.1em; color: var(--muted); white-space: nowrap; }
.tv .tv-joinmini img { width: 3.4em; height: 3.4em; background: #fff; border-radius: .35em; padding: .2em; box-sizing: border-box; }
.tv .tv-joinmini b { color: var(--text); }
.tv .tv-stage { flex: 1 1 auto; min-height: 0; display: flex; gap: 3vw; }
.tv .tv-q { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: .9em; }
.tv .tv-q > * { flex: none; }
.tv .tv-side { flex: 0 0 28%; display: flex; flex-direction: column; gap: 1em; justify-content: flex-start; }
.tv .tv-side > * { flex: none; }
.tv .tv-prompt { font-size: 4em; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.tv .tv-prompt.long { font-size: 3.2em; }
.tv .tv-prompt.small { font-size: 2.5em; }
.tv .tv-emoji-clue { font-size: 9em; line-height: 1.1; letter-spacing: .06em; text-align: center; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .5)); overflow-wrap: anywhere; }
.tv .is-reveal .tv-emoji-clue { font-size: 5em; }
.tv .tv-hint { font-size: 1.7em; color: var(--tv-b); text-align: center; }
.tv .tv-sub { font-size: 1.55em; color: var(--muted); }
.tv .tv-spot { display: flex; align-items: center; gap: .8em; }
.tv .tv-spot small { font: 800 1.3em var(--font); color: var(--tv-b); text-transform: uppercase; letter-spacing: .1em; }
.tv .tv-q.has-emoji { align-items: center; text-align: center; }
.tv .tv-q.has-emoji .tv-answer { align-self: center; }
.tv .tv-q.has-emoji .tv-winners .tv-chips { justify-content: center; }
/* choices: 2×2 in landscape (3 across for 3, 2 across for 5–8), one per row in portrait */
.tv .tv-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.tv .tv-choices.n3, .tv .tv-choices.n5, .tv .tv-choices.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv .tv-choice { position: relative; display: flex; align-items: center; gap: .8em; padding: .8em 1.1em; border-radius: 1em; background: rgba(255, 255, 255, .06); border: .12em solid rgba(255, 255, 255, .12); overflow: hidden; min-height: 4.2em; min-width: 0; box-sizing: border-box; }
.tv .tv-choice .k { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .7em; font: 800 1.5em/1 var(--display); color: #0d0a1c; background: var(--c0); position: relative; }
.tv .tv-choice.c1 .k { background: var(--c1); } .tv .tv-choice.c2 .k { background: var(--c2); } .tv .tv-choice.c3 .k { background: var(--c3); } .tv .tv-choice.c4 .k { background: var(--c4); } .tv .tv-choice.c5 .k { background: var(--c5); }
.tv .tv-choice .t { position: relative; flex: 1 1 auto; min-width: 0; font: 700 2.2em/1.18 var(--font); overflow-wrap: break-word; }
.tv .tv-choices-many { gap: .6em; }
.tv .tv-choices.tv-choices-lots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.tv .tv-choices-lots .tv-choice { min-height: 2.6em; padding: .4em .8em; }
.tv .tv-choices-many .tv-choice { min-height: 3.2em; padding: .5em .9em; }
.tv .tv-choices-many .tv-choice .t { font-size: 1.6em; }
.tv .tv-choices-many .tv-choice .k { font-size: 1.2em; }
.tv .tv-choice small { position: relative; flex: 0 1 auto; min-width: 0; max-width: 40%; font-size: 1.05em; color: var(--muted); font-weight: 700; overflow-wrap: break-word; text-align: right; }
.tv .tv-choice .n { position: relative; flex: none; font: 800 1.9em var(--display); color: var(--muted); }
.tv .tv-choice .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .07); transition: width .8s ease-out; }
.tv .tv-choice.right { border-color: var(--ok); background: rgba(47, 213, 122, .16); box-shadow: 0 0 2em -.5em rgba(47, 213, 122, .8); }
.tv .tv-choice.right .bar { background: rgba(47, 213, 122, .25); }
.tv .tv-choice.right .n, .tv .tv-choice.right small { color: var(--ok); }
.tv .tv-choice.wrong { opacity: .5; }
.tv .tv-answer { display: inline-flex; flex-direction: column; gap: .25em; align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: .9em 1.5em; border-radius: 1.2em; background: rgba(47, 213, 122, .14); border: .15em solid var(--ok); box-shadow: 0 0 2.6em -.7em rgba(47, 213, 122, .8); animation: tvPop .4s ease-out both; }
.tv .tv-answer small { font: 800 1em var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.tv .tv-answer b { font: 800 3.2em/1.1 var(--display); overflow-wrap: break-word; }
.tv .tv-answer span { font-size: 1.4em; color: var(--muted); }
.tv .tv-answer.quote { background: rgba(255, 255, 255, .06); border-color: var(--line-strong); box-shadow: none; }
.tv .tv-answer.quote b { font-size: 2.8em; font-style: italic; }
/* the "who got it" list gives way first: it shrinks to what's left and hides the rest behind "+N more" */
.tv .tv-q > .tv-winners { flex: 0 1 auto; min-height: 4.6em; display: flex; flex-direction: column; overflow: hidden; }
.tv .tv-winners h3 { flex: none; font: 800 1.1em var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tv-b); margin-bottom: .6em; }
.tv .tv-winners .tv-chips { flex: 0 1 auto; }
.tv .tv-winners p { font-size: 1.5em; }
.tv .tv-foot { flex: none; display: flex; align-items: center; gap: 2rem; min-height: 3rem; }
.tv .tv-timer { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1.1rem; }
.tv .tv-timer-track { flex: 1; height: 1rem; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tv .tv-timer-track i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tv-a), var(--tv-b)); transition: width .25s linear; }
.tv .tv-timer b { font: 800 2.8rem/1 var(--display); min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.tv .tv-timer.low b { color: var(--bad); animation: tvPulse .5s ease-in-out infinite; }
.tv .tv-timer.low i { background: var(--bad); }
.tv .tv-timer.paused b { color: var(--muted); font-size: 2.1rem; }
.tv .tv-progress { flex: none; font-size: 1.5rem; color: var(--muted); white-space: nowrap; margin-left: auto; }
.tv .tv-progress b { font: 800 2.4rem var(--display); color: var(--text); }
/* --- boards, podium, sponsor */
.tv .tv-board { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 1.2em; padding: .9em 1.1em; overflow: hidden; }
.tv .tv-side > .tv-board, .tv .tv-idle-main > .tv-board, .tv .tv-idle-side > .tv-board { flex: 0 1 auto; min-height: 6em; }
.tv .tv-board h3 { flex: none; font: 800 1.05em var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv .tv-board ol { flex: 0 1 auto; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4em; }
.tv .tv-board li { display: flex; align-items: center; gap: .6em; min-width: 0; font: 700 1.4em var(--font); }
.tv .tv-board li.tv-more { justify-content: center; font-size: 1.1em; }
.tv .tv-board .rk { flex: none; width: 1.6em; text-align: center; font-weight: 800; color: var(--muted); }
.tv .tv-board .nm { flex: 1 1 auto; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv .tv-board .pt { flex: none; font: 800 1.1em var(--display); color: var(--tv-b); font-variant-numeric: tabular-nums; }
.tv .tv-board .tv-av { width: 1.6em; height: 1.6em; font-size: .8em; }
.tv .tv-board-sm li { font-size: 1.2em; }
.tv .tv-podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.5em; margin: 1em 0; }
.tv .tv-step { display: flex; flex-direction: column; align-items: center; gap: .4em; width: 12em; min-width: 0; flex: 0 1 12em; animation: tvPop .6s ease-out both; }
.tv .tv-step b { font: 800 1.8em/1.15 var(--display); max-width: 100%; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv .tv-step .pt { font-size: 1.3em; color: var(--muted); font-weight: 700; }
.tv .tv-step .blk { width: 100%; display: grid; place-items: start center; padding-top: .3em; font-size: 2.8em; border-radius: .4em .4em 0 0; background: linear-gradient(180deg, rgba(166, 107, 255, .45), rgba(166, 107, 255, .08)); }
.tv .tv-step.p1 .blk { height: 4.4em; background: linear-gradient(180deg, rgba(255, 197, 61, .6), rgba(255, 159, 28, .08)); }
.tv .tv-step.p2 .blk { height: 3.1em; }
.tv .tv-step.p3 .blk { height: 2.1em; }
.tv .tv-step.p1 .tv-av { width: 3em; height: 3em; font-size: 2.2em; box-shadow: 0 0 0 .12em var(--amber), 0 0 1.2em rgba(255, 197, 61, .6); }
.tv .tv-final-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 3vw; align-items: stretch; }
.tv .tv-final-main > .tv-final-hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .6em; }
.tv .tv-final-main > .tv-side { flex: none; justify-content: center; }
.tv .tv-next { font-size: 1.7em; color: var(--muted); }
.tv .tv-next b { color: var(--text); }
.tv .tv-ad { box-sizing: border-box; display: flex; align-items: center; gap: .9em; padding: .8em 1em; border-radius: 1em; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); position: relative; min-width: 0; max-width: 100%; }
.tv .tv-ad img { width: 4.4em; height: 4.4em; object-fit: contain; border-radius: .5em; background: #fff; flex: none; }
.tv .tv-ad-txt { min-width: 0; }
.tv .tv-ad-txt b { display: block; font: 800 1.35em var(--display); overflow-wrap: break-word; }
.tv .tv-ad-txt small { display: block; font-size: 1.05em; color: var(--muted); }
.tv .tv-ad-tag { position: absolute; top: .4em; right: .7em; font: 800 .7em var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tv .tv-ad-big { padding: 1.1em; }
.tv .tv-ad-big img { width: 6em; height: 6em; }
.tv .tv-center > .tv-board, .tv .tv-center > .tv-ad { width: min(100%, 34em); text-align: left; }
/* --- venue between nights */
.tv .tv-idle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4vw; align-items: stretch; }
.tv .tv-idle-main { display: flex; flex-direction: column; justify-content: center; gap: 1.3em; }
.tv .tv-idle-main > * { flex: none; }
.tv .tv-venue { display: flex; align-items: center; gap: 1.2em; min-width: 0; }
.tv .tv-venue > div:last-child { min-width: 0; }
.tv .tv-venue-logo { flex: none; width: 6.4em; height: 6.4em; object-fit: contain; border-radius: 1.1em; background: rgba(255, 255, 255, .06); }
.tv .tv-venue-ph { display: grid; place-items: center; font-size: 3.6em; width: 1.8em; height: 1.8em; border-radius: .3em; }
.tv .tv-venue p { font-size: 1.6em; margin-top: .2em; }
.tv .tv-next-night { display: inline-flex; flex-direction: column; align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: 1.1em 1.6em; border-radius: 1.3em; background: linear-gradient(135deg, rgba(255, 79, 139, .22), rgba(166, 107, 255, .2)); border: 1px solid var(--line-strong); }
.tv .tv-next-night small { font: 800 1.1em var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tv-b); }
.tv .tv-next-night b { font: 800 4.4em/1.05 var(--display); }
.tv .tv-next-night span { font-size: 1.45em; color: var(--muted); }
.tv .tv-idle-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em; text-align: center; width: clamp(150px, min(30vw, 50vh), 1300px); }
.tv .tv-idle-side .tv-qr { width: 100%; }
.tv .tv-idle-side > * { flex: none; }
.tv .tv-idle-side .tv-board, .tv .tv-idle-side .tv-ad { width: 100%; text-align: left; }
.tv .tv-idle-side .tv-lead { font-size: 1.3em; }
/* narrow screens: drop the least useful header bits first */
@media (max-width: 1100px) { .tv .tv-head .tv-pill-dim { display: none; } }
@media (max-width: 760px) { .tv .tv-head .tv-brand > span { display: none; } .tv .tv-joinmini > span { display: none; } .tv .tv-joinmini { padding: .3em; } }
/* short landscape (phone on its side, 1024×600 tablets) */
@media (min-aspect-ratio: 6/5) and (max-height: 620px) {
  .tv .tv-game-screen, .tv .tv-final { gap: 1vh; }
  .tv .tv-qr-join { width: clamp(140px, 60vh, 1400px); }
  .tv .tv-code { font-size: 4.2rem; }
}
/* portrait and square-ish screens: stack everything */
@media (max-aspect-ratio: 6/5) {
  .tv .tv-pair, .tv .tv-lobby, .tv .tv-idle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 3vh; }
  .tv .tv-pair { align-items: stretch; }
  .tv .tv-pair-qr .tv-qr { width: clamp(150px, min(60vw, 34vh), 1400px); }
  .tv .tv-pair-main { align-items: center; text-align: center; }
  .tv .tv-pair-main .tv-brand { justify-content: center; }
  .tv .tv-qr-join { width: clamp(150px, min(62vw, 32vh), 1400px); }
  .tv .tv-lobby-qr { gap: .3em; }
  .tv .tv-code { font-size: 4.6rem; }
  .tv .tv-idle-side { order: -1; width: auto; }
  .tv .tv-idle-side .tv-qr { width: clamp(150px, min(56vw, 30vh), 1400px); }
  .tv .tv-idle-side > .tv-board, .tv .tv-idle-side > .tv-ad { display: none; }
  .tv .tv-idle-main { justify-content: flex-start; }
  .tv .tv-stage { flex-direction: column; gap: 2vh; }
  .tv .tv-side { flex: 0 1 auto; max-height: 42%; }
  .tv .tv-q { flex: 1 1 0; } /* basis 0: its height never depends on its own (fitted) text */
  .tv .tv-choices, .tv .tv-choices.n3, .tv .tv-choices.n5, .tv .tv-choices.n6 { grid-template-columns: minmax(0, 1fr); }
  .tv .tv-choices.n2, .tv .tv-choices.n7, .tv .tv-choices.n8, .tv .tv-choices.tv-choices-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv .tv-final-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 2vh; }
  .tv .tv-final-main > .tv-side { max-height: 40vh; justify-content: flex-start; }
  .tv .tv-foot { gap: 1.2rem; }
}
.tv [hidden] { display: none !important; }
/* ================================================================== (end of the TV screen) */
/* --- /pricing (Part J): the "Compare Free with" switcher fits a 360 px phone, a compact sticky header on phones */
.compare-switch { flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 10px; }
.compare-switch .cs-label { font: 700 .84rem var(--font); color: var(--muted); }
.compare-switch .cs-label b { color: var(--ok); }
.compare-switch .cs-seg { overflow: visible; }
.compare-switch .cs-seg button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 6px; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
.compare-table .c-feat small { color: var(--muted); font-size: .8rem; }
.compare-table td { line-height: 1.3; }
.compare-table thead th small.lim { color: var(--muted); font-size: .72rem; line-height: 1.3; margin-top: 2px; }
@media (max-width: 899px) {
  .compare-table thead th { padding: 8px 4px; }
  .compare-table thead th b { font-size: .9rem; line-height: 1.15; }
  .compare-table thead th small.lim { display: none; } /* the "Ads & limits" rows say it in full */
  .compare-table td { padding: 10px 4px; font-size: .8rem; }
}
/* --- mobile sweep (Part J) */
@media (max-width: 374px) {
  .site-header .bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 1.1rem; gap: 6px; }
  .brand img { width: 30px; height: 30px; }
  .header-actions .btn-sm { padding-left: 12px; padding-right: 12px; }
}
/* big bar nights (Venue plan: up to 250 players): long player lists scroll inside their card instead of stretching the page */
.card > .chips, .team-block > .chips { max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* touch screens: small buttons still get a 44 px tap target */
@media (pointer: coarse), (max-width: 700px) {
  .btn-sm { min-height: 44px; }
  .preview-card .seg button { min-height: 44px; }
  input[type=color] { min-height: 44px; min-width: 64px; }
}
/* Admin → Money → Plan features on a phone: each feature stacks (name, then who gets it + how many hosts) — no sideways scroll */
@media (max-width: 640px) {
  .feature-matrix, .feature-matrix tbody, .feature-matrix tr, .feature-matrix td, .feature-matrix th { display: block; width: auto; }
  .feature-matrix { min-width: 0 !important; }
  .feature-matrix thead { display: none; }
  .feature-matrix tr:not(.fm-group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .feature-matrix tr:not(.fm-group) > td { border: 0; padding: 0; }
  .feature-matrix tr:not(.fm-group) > td:first-child { grid-column: 1 / -1; }
  .feature-matrix td.num { text-align: right; white-space: nowrap; }
  .feature-matrix select { min-width: 0; width: 100%; min-height: 44px; }
}
/* ================================================================== end Part J */

/* ================================================================== Part I: "🙋 I'm playing too" (host plays) */
.hp-card .hp-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.hp-card button.hp-head { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hp-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.hp-card.is-on .hp-ico, .hp-card.is-open .hp-ico { background: var(--grad-hot); border-color: transparent; }
.hp-txt { flex: 1; min-width: 0; }
.hp-txt b { display: block; font-size: 1.02rem; }
.hp-txt small { display: block; line-height: 1.35; margin-top: 2px; }
.hp-txt .avatar { width: 22px; height: 22px; font-size: .8rem; vertical-align: -5px; }
.hp-card.is-on { border-color: rgba(255, 79, 139, .45); }
.hp-form { display: grid; gap: 10px; margin-top: 14px; }
.hp-label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hp-avatars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.hp-av { aspect-ratio: 1; min-height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 1.25rem; cursor: pointer; padding: 0; }
.hp-av.selected { border: 2px solid var(--pink); background: rgba(255, 79, 139, .18); box-shadow: 0 0 14px -4px var(--pink); }
.hp-row { display: grid; gap: 8px; margin-top: 14px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip { min-height: 38px; min-width: 52px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 700 .88rem var(--font); cursor: pointer; }
.hp-chip.selected { background: var(--grad-hot); border-color: transparent; }
.hp-card .inline-form { margin-top: 8px; }
.hp-venue-note { margin-bottom: 0; }
.tb-score.hp-me { flex: none; margin-right: 2px; }
.tb-score.hp-me small { white-space: nowrap; color: var(--muted); }
.menu-auto { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-auto > span { font: 700 .82rem var(--font); color: var(--muted); }
.menu-auto .hp-chip { display: inline-block; width: auto; min-height: 34px; min-width: 44px; padding: 0 10px; margin: 0 4px 0 0; text-align: center; }
.menu-pop .menu-auto button.hp-chip { display: inline-block; width: auto; padding: 0 10px; }
.hp-lineup { padding: 12px 16px; }
.hp-lineup > summary { cursor: pointer; font-weight: 700; color: var(--muted); list-style: none; }
.hp-lineup > summary::-webkit-details-marker { display: none; }
.hp-lineup > summary::after { content: " ▾"; }
.hp-lineup[open] > summary::after { content: " ▴"; }
.hp-lineup > .card { margin: 10px -6px 0; box-shadow: none; background: transparent; border: 0; padding: 6px; }
/* the slim strip during a question: small, one line, clear of the answer buttons */
.screen.has-strip { padding-bottom: calc(var(--tabbar-h) + 76px + var(--safe-b)); }
.hp-strip { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 25; padding: 0 10px 6px; pointer-events: none; }
.hp-strip-inner { pointer-events: auto; max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 10px; border-radius: 16px; background: rgba(24, 18, 50, .96); border: 1px solid var(--line); box-shadow: 0 -8px 24px -12px #000; }
.hp-tag { flex: none; font-size: 1rem; opacity: .85; }
.hp-prog { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-prog b { color: var(--text); font-size: .95rem; }
.hp-btns { flex: none; display: flex; gap: 6px; }
.hp-btns .btn { min-height: 36px; padding: 0 11px; font-size: .8rem; }
.hp-btns .hp-main { border-color: var(--line-strong); }
/* after a reveal: one big Next */
.hp-bar .hp-next { font-size: 1.12rem; }
.hp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(42, 22, 0, .2); font-size: .88rem; }
.hp-count .timer-num { font-variant-numeric: tabular-nums; }
.hp-auto { margin: 0 0 10px; padding: 9px 14px; border-radius: var(--radius-sm); background: rgba(255, 197, 61, .12); border: 1px solid rgba(255, 197, 61, .35); color: var(--amber); font-weight: 700; font-size: .92rem; text-align: center; }
.hp-auto-held { background: var(--surface); border-color: var(--line); color: var(--muted); }
@media (min-width: 720px) {
  .hp-avatars { grid-template-columns: repeat(16, minmax(0, 1fr)); }
}
/* ================================================================== end Part I */

/* ================================================================== Part K: 📺 Cast to TV (host card / ⋯ menu, /host/{code}/tv, TV notice, admin) */
.tv-card-group { margin: 12px 0; }
.tv-card-group > .tv-card { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tv-cast-row { padding: 10px 14px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); }
.cast-btn { min-height: 48px; border-color: rgba(61, 224, 255, .45); box-shadow: 0 8px 24px -14px rgba(61, 224, 255, .9); }
.cast-on { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 12px; border-radius: var(--radius-sm); background: rgba(61, 224, 255, .1); border: 1px solid rgba(61, 224, 255, .4); }
.cast-on .cast-txt { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.cast-on .cast-txt b { display: block; }
.cast-on .cast-txt b { color: var(--cyan); }
.cast-on .btn { flex: none; }
.cast-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(61, 224, 255, .2), 0 0 10px var(--cyan); animation: cast-pulse 1.6s ease-in-out infinite; }
@keyframes cast-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cast-dot { animation: none; } }
.tv-cast h3 { margin-top: 0; }
.tv-cast-lead { margin: 0 0 12px; font-size: .92rem; }
.tv-cast-none { margin: 0; font-size: .88rem; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--line); }
.tv-warn { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 176, 32, .1); border: 1px solid rgba(255, 176, 32, .4); color: var(--text); font-size: .9rem; line-height: 1.45; }
.tv-warn b:first-child { color: var(--amber); }
.tv-warn small { display: block; margin-top: 6px; color: var(--muted); font-size: .84rem; }
.tv-or { margin: 6px 0 8px; font-size: 1.02rem; }
.pill-cast { padding: 2px 8px; font-size: .68rem; vertical-align: 2px; background: rgba(61, 224, 255, .14); border-color: rgba(61, 224, 255, .45); color: var(--cyan); }
.menu-pop [data-cast], .menu-pop [data-cast-stop] { color: var(--cyan); }
.cast-help { margin-top: 4px; }
.cast-help > summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.cast-help ol { padding-left: 20px; margin: 10px 0; font-size: .9rem; }
.cast-help li { margin: 6px 0; }
.cast-url { word-break: break-all; user-select: all; }
/* the TV itself: a short "connected by Cast" / "link didn't work" notice */
.tv .tv-castnote { position: fixed; left: 50%; top: max(3vh, 12px); transform: translateX(-50%); max-width: min(80vw, 60em); padding: .6rem 1.4rem; border-radius: 24px; background: #10324a; box-shadow: 0 10px 40px -10px #000; border: 1px solid rgba(61, 224, 255, .5); color: var(--text); font: 700 max(13px, 1.05rem) var(--font); text-align: center; z-index: 11; }
.tv .tv-castnote.bad { background: #4a1822; border-color: rgba(255, 90, 106, .55); }
/* ================================================================== end Part K */