:root{ --bg:#07070F; /* ── GAME SHOW ENERGY PALETTE ── */ /* Gold → Bright Prize Gold */ --gold:#FFD700;--gold-light:#FFE85A;--gold-dark:#B8960C;--gold-dim:rgba(255,215,0,0.13); /* Teal → Electric Cyan (primary) */ --teal:#00C8E8;--teal-light:#5ADFFF;--teal-dim:rgba(0,200,232,0.13); /* Burgundy → Electric Purple (secondary action) */ --burgundy:#7C3AED;--burgundy-light:#A78BFA; /* Background layers — deep space */ --navy:#07070F;--navy-mid:#0D0D20;--navy-light:#14143A;--navy-card:#0A0A1C; /* Text */ --cream:#DDE0FF;--white:#FFFFFF;--dim:#6060A0; /* Semantic */ --danger:#EF4444;--danger-dim:rgba(239,68,68,0.13); --success:#10B981;--success-dim:rgba(16,185,129,0.13); /* MC answer button colors */ --mc-a:#0EA5E9;--mc-a-dim:rgba(14,165,233,0.15); --mc-b:#EAB308;--mc-b-dim:rgba(234,179,8,0.15); --mc-c:#F97316;--mc-c-dim:rgba(249,115,22,0.15); --mc-d:#A855F7;--mc-d-dim:rgba(168,85,247,0.15); /* Hot accent (for highlights/badges) */ --hot:#FF2D9B;--hot-dim:rgba(255,45,155,0.13); /* Hard mode overrides (applied via .hard-mode class on body — UNCHANGED) */ --hm-bg:#0E000D;--hm-red:#C02850;--hm-red-dim:rgba(192,40,80,0.13); } /* ═══════════════════════════════════════════════════════════════════════════ RESKIN THEME TOKENS (2026-06) — dark = default (:root); neon/sky/tonka via . Colors-only; the original components are preserved and their hard-coded literals are promoted to these tokens. The 4 names that would collide with the app's existing :root (teal/gold/gold-2/success/danger) are namespaced --ac-*. dark values == the app's current literals, so data-theme="dark" renders identically to before. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* surfaces */ --bg:#07070F; --stage-1:#160B2C; --stage-2:#0A0518; --rail-1:#180A2C; --rail-2:#120722; --topbar-1:#12071F; --topbar-2:#1A0D2E; --row-bg:rgba(255,255,255,0.025); --card:rgba(22,11,40,0.80); /* text */ --text:#F0EEFF; /* primary on stage (question, mc text) */ --text-strong:#FFFFFF; --text-2:#8AADFF; /* secondary — periwinkle */ --text-3:#6E78C8; /* meta / ticker / timestamps */ --text-tile:#FFFFFF; /* text on MC tiles */ /* holographic accents (the broadcast identity) */ --pink:#FF6BEF; --violet:#C359E3; --purple:#9161FF; --blue:#547AFF; --blue-2:#8AADFF; --ac-teal:#2DD4BF; --lav:#D4AAFF; --ac-gold:#FFD700; --ac-gold-2:#FFE85A; --rank-silver:#C0C0C0; --rank-bronze:#CD7F32; --ac-success:#10B981; --ac-danger:#EF4444; /* z-index ladder — the ONLY place stacking is decided. Keep the order: content < present bar < float msgs < chat sheet/bubble < drawer < deco < modal < broadcast pill < hard-mode lockout < celebration < score floats < toast < theme switch */ --z-presentbar:60; --z-floatmsg:200; --z-chatsheet:300; --z-chatbubble:310; --z-drawer:400; --z-deco:7000; --z-modal:8000; --z-pill:9000; --z-lockout:9100; --z-confetti:9300; --z-float:9400; --z-toast:9500; --z-top:10000; /* MC answer tiles — baseline keeps the lilac/periwinkle holographic family */ --mc-grad-1:linear-gradient(125deg,#6facff 0%,#9670ff 38%,#d77fff 100%); --mc-grad-2:linear-gradient(125deg,#d77fff 0%,#9670ff 40%,#6facff 100%); --mc-grad-3:linear-gradient(125deg,#6697ff 0%,#7b58ff 40%,#c97bff 100%); --mc-grad-4:linear-gradient(125deg,#c97bff 0%,#7b58ff 42%,#6697ff 100%); --mc-tile-op:0.72; /* component gradients (text-clip friendly) */ --brand-grad:linear-gradient(90deg,#FF6BEF,#C359E3,#9161FF); --rail-label-grad:linear-gradient(90deg,#FF6BEF,#9161FF); --standby-grad:linear-gradient(135deg,#2DD4BF 0%,#547AFF 22%,#9161FF 48%,#C359E3 72%,#FF6BEF 100%); --timer-grad:linear-gradient(90deg,#2DD4BF,#547AFF,#C359E3,#FF6BEF); --timer-track:rgba(255,255,255,0.06); --vote-fill:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.18) 80%,rgba(255,255,255,.34) 100%); /* effect knobs */ --fx-glow:rgba(255,107,239,0.35); /* holo glow color (kill = transparent) */ --fx-border:rgba(255,255,255,0.06); /* base hairline */ --fx-vignette:rgba(0,0,0,0.55); /* corner darkening */ --fx-scanline:0.06; /* scanline opacity */ /* spacing + type ramp (spacing-type-tokens) — use these for NEW rules and when touching old ones; existing values were substituted only where the shared pattern already agreed (cards, rail sections, micro labels). */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --fs-micro:9px; /* Space Mono eyebrows / rail labels */ --fs-label:11px; /* bumped panel/section labels (panel-type-bump) */ --fs-body:13px; /* Quicksand body/sub-lines */ --ls-wide:3px; --ls-xwide:4px; --r-card:18px; --r-ctl:8px; --pad-card:26px 28px 24px; /* hj/hs setup-style cards */ --pad-rail:14px 16px; /* host rail sections */ /* chat author colors */ --chat-a:#FFE85A; --chat-b:#5ADFFF; --chat-c:#A78BFA; } /* ───────────────────────────────────────────────────────────────────────── 2 · NEON (brighter-but-still-dark — PRIORITY) Deep indigo base (lifted off near-black so panels separate), full-strength accents, much brighter secondary text, punchier vote/timer/leaderboard. ───────────────────────────────────────────────────────────────────────── */ [data-theme="neon"]{ --bg:#0E0B26; --stage-1:#241452; --stage-2:#190E3A; --rail-1:#281658; --rail-2:#1C1042; --topbar-1:#1C1142; --topbar-2:#271858; --row-bg:rgba(255,255,255,0.06); --card:rgba(40,22,84,0.85); --text:#FFFFFF; --text-strong:#FFFFFF; --text-2:#BCC8FF; /* secondary lifted hard — reads on a crushed stream */ --text-3:#9AA6E8; --text-tile:#FFFFFF; --pink:#FF7DF2; --violet:#D072F0; --purple:#A98CFF; --blue:#7C9BFF; --blue-2:#AEC2FF; --ac-teal:#45E9D2; --lav:#E2C9FF; --ac-gold:#FFE04A; --ac-gold-2:#FFF07A; --ac-success:#1FD896; --ac-danger:#FF5A5A; /* original holographic lilac / periwinkle family (reverted per request) */ --mc-grad-1:linear-gradient(125deg,#6facff 0%,#9670ff 38%,#d77fff 100%); --mc-grad-2:linear-gradient(125deg,#d77fff 0%,#9670ff 40%,#6facff 100%); --mc-grad-3:linear-gradient(125deg,#6697ff 0%,#7b58ff 40%,#c97bff 100%); --mc-grad-4:linear-gradient(125deg,#c97bff 0%,#7b58ff 42%,#6697ff 100%); --mc-tile-op:1; --brand-grad:linear-gradient(90deg,#FF5CC8,#B362FF,#4CC9FF); /* cosmic wordmark: magenta→violet→cyan */ --rail-label-grad:linear-gradient(90deg,#FF7DF2,#A98CFF); --standby-grad:linear-gradient(135deg,#45E9D2 0%,#7C9BFF 24%,#A98CFF 50%,#D072F0 74%,#FF7DF2 100%); --timer-grad:linear-gradient(90deg,#45E9D2,#7C9BFF,#D072F0,#FF7DF2); --timer-track:rgba(255,255,255,0.12); --vote-fill:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.30) 78%,rgba(255,255,255,.52) 100%); --fx-glow:rgba(255,125,242,0.55); --fx-border:rgba(255,255,255,0.12); --fx-vignette:rgba(0,0,0,0.34); --fx-scanline:0.035; --chat-a:#FFE04A; --chat-b:#6FE9FF; --chat-c:#C6A9FF; } /* ───────────────────────────────────────────────────────────────────────── 3 · SKY (deep electric cobalt — midnight navy + vivid azure / cyan) Rich navy ground with aurora blooms, four distinct blue answer tiles, and a cyan winner pop so the whole theme stays in the blue family. Bold + high contrast — nothing pale about it. ───────────────────────────────────────────────────────────────────────── */ [data-theme="sky"]{ --bg:#0E2C56; --stage-1:#2A63A8; --stage-2:#16456F; --rail-1:#1C4E8C; --rail-2:#123A68; --topbar-1:#184475; --topbar-2:#2A63A8; --row-bg:rgba(150,200,255,0.09); --card:rgba(30,72,124,0.85); --text:#EAF3FF; --text-strong:#FFFFFF; --text-2:#9CC4F7; /* bright sky-blue secondary */ --text-3:#6E94CC; --text-tile:#FFFFFF; --pink:#3D8BFF; --violet:#5AA0FF; --purple:#4C7DFF; --blue:#2DD4FF; --blue-2:#7FC8FF; --ac-teal:#22E0D0; --lav:#9CC4F7; --ac-gold:#46E0FF; --ac-gold-2:#8AEEFF; /* winner pop = cyan (keeps it all-blue) */ --ac-success:#1FD8A0; --ac-danger:#FF6B7A; /* four distinct blues — royal · cyan · indigo · azure */ --mc-grad-1:linear-gradient(125deg,#2E5BFF 0%,#5A86FF 100%); /* A · royal */ --mc-grad-2:linear-gradient(125deg,#0FA8D8 0%,#36D8F2 100%); /* B · cyan */ --mc-grad-3:linear-gradient(125deg,#4348C8 0%,#6E78F0 100%); /* C · indigo */ --mc-grad-4:linear-gradient(125deg,#1C86E0 0%,#58B6F5 100%); /* D · azure */ --mc-tile-op:1; --brand-grad:linear-gradient(90deg,#46E0FF,#5A92FF,#7C8CFF); --rail-label-grad:linear-gradient(90deg,#46E0FF,#5A92FF); --standby-grad:linear-gradient(135deg,#22E0D0 0%,#2DD4FF 28%,#3D8BFF 58%,#5A86FF 100%); --timer-grad:linear-gradient(90deg,#22E0D0,#2DD4FF,#3D8BFF,#5A86FF); --timer-track:rgba(125,185,255,0.12); --vote-fill:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.30) 78%,rgba(255,255,255,.52) 100%); --fx-glow:rgba(70,210,255,0.50); --fx-border:rgba(160,205,255,0.16); --fx-vignette:rgba(8,34,68,0.32); --fx-scanline:0.03; --chat-a:#46E0FF; --chat-b:#5A92FF; --chat-c:#7C8CFF; } /* ───────────────────────────────────────────────────────────────────────── 4 · TONKA (modern editorial — cool slate + warm coral / amber pop) Desaturated graphite surfaces, crisp off-white text, a confident coral primary with marigold amber and a cool teal. Sophisticated, high-contrast. ───────────────────────────────────────────────────────────────────────── */ [data-theme="tonka"]{ --bg:#14171C; --stage-1:#222730; --stage-2:#191D24; --rail-1:#21262F; --rail-2:#181C22; --topbar-1:#1C2129; --topbar-2:#262C36; --row-bg:rgba(255,255,255,0.05); --card:rgba(34,40,49,0.88); --text:#EEF1F5; /* crisp off-white */ --text-strong:#FFFFFF; --text-2:#A8B2C0; /* cool grey secondary — bright */ --text-3:#737D8B; --text-tile:#FF9436; /* glowing orange text on black-glass tiles */ /* coral primary + amber + cool teal (token names kept) */ --pink:#FF6B5C; --violet:#FFA552; --purple:#FF6B5C; --blue:#46C4C4; --blue-2:#84D8D8; --ac-teal:#FFA552; --lav:#FFC9A8; --ac-gold:#FFB347; --ac-gold-2:#FFCB73; --ac-success:#4ECB8E; --ac-danger:#FF5A52; /* sunset-jewel tones \u2014 soft, luminous, hue-shifting (premium, not primary) */ --mc-grad-1:linear-gradient(0deg,rgba(7,7,10,0.5),rgba(7,7,10,0.5)); --mc-grad-2:linear-gradient(0deg,rgba(7,7,10,0.5),rgba(7,7,10,0.5)); --mc-grad-3:linear-gradient(0deg,rgba(7,7,10,0.5),rgba(7,7,10,0.5)); --mc-grad-4:linear-gradient(0deg,rgba(7,7,10,0.5),rgba(7,7,10,0.5)); /* D - right (= B) */ --mc-tile-op:1; /* black->orange, mirrored left/right columns (A=C left, B=D right) */ --brand-grad:linear-gradient(90deg,#FF6B5C,#FFA552); --rail-label-grad:linear-gradient(90deg,#FF6B5C,#FFA552); --standby-grad:linear-gradient(135deg,#46C4C4 0%,#FF6B5C 35%,#FFA552 70%,#FF6B5C 100%); --timer-grad:linear-gradient(90deg,#FF6B5C,#FFA552,#FFB347); --timer-track:rgba(255,255,255,0.10); --vote-fill:linear-gradient(90deg,rgba(255,230,210,.10) 0%,rgba(255,230,210,.30) 78%,rgba(255,255,255,.50) 100%); --fx-glow:rgba(255,107,92,0.45); --fx-border:rgba(255,255,255,0.10); --fx-vignette:rgba(8,10,14,0.45); --fx-scanline:0.03; --chat-a:#FFB347; --chat-b:#46C4C4; --chat-c:#FF8A6B; } *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;max-width:100%;height:100%;} html{scroll-behavior:smooth;} body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--white);min-height:100vh;min-height:100dvh;overflow-x:hidden;} body::before{content:'';position:fixed;inset:0;background-image: radial-gradient(ellipse 55% 45% at 15% 10%,rgba(0,200,232,0.07) 0%,transparent 65%), radial-gradient(ellipse 45% 55% at 85% 90%,rgba(124,58,237,0.07) 0%,transparent 65%), radial-gradient(ellipse 40% 40% at 85% 15%,color-mix(in srgb, var(--pink) 5%, transparent) 0%,transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%,rgba(0,200,232,0.04) 0%,transparent 60%); pointer-events:none;z-index:0;} /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: HARD MODE OVERRIDES Applies when body.hard-mode — all colors, cards, buttons, timer ════════════════════════════════════════════════════════════════════ */ /* ── HARD MODE BODY ── */ body.hard-mode{background:var(--hm-bg);} body.hard-mode::before{background-image: radial-gradient(ellipse 80% 50% at 50% 0%,rgba(192,40,80,0.07) 0%,transparent 70%), repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(192,40,80,0.025) 40px,rgba(192,40,80,0.025) 41px), repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(192,40,80,0.025) 40px,rgba(192,40,80,0.025) 41px);} body.hard-mode .topbar{background:linear-gradient(90deg,#12000F,#1C0018);border-bottom-color:rgba(192,40,80,0.22);} body.hard-mode .logo-title{background:linear-gradient(135deg,#D44068,#A01840,#6A1030);-webkit-background-clip:text;background-clip:text;} body.hard-mode .tb-badge.live{background:rgba(192,40,80,0.15);border-color:rgba(192,40,80,0.38);color:#D86080;} body.hard-mode .card,body.hard-mode .builder-box,body.hard-mode .theme-selector{background:linear-gradient(160deg,#160012,#1A0018);border-color:rgba(192,40,80,0.18);} body.hard-mode .card::before{background:linear-gradient(90deg,#6A1030,#C02850,#6A1030);} body.hard-mode .section-hdr{color:#922840;border-bottom-color:rgba(192,40,80,0.14);} body.hard-mode .lb-row{background:rgba(22,8,20,0.7);border-color:rgba(192,40,80,0.09);} body.hard-mode .team-card{background:rgba(22,8,20,0.7);border-color:rgba(192,40,80,0.11);} body.hard-mode .ans-entry{background:rgba(20,6,18,0.6);border-color:rgba(192,40,80,0.07);} body.hard-mode input,body.hard-mode select,body.hard-mode textarea{background:rgba(18,6,16,0.85);border-color:rgba(192,40,80,0.18);} body.hard-mode input:focus,body.hard-mode select:focus{border-color:var(--hm-red);box-shadow:0 0 0 3px rgba(192,40,80,0.10);} body.hard-mode .btn-gold{background:linear-gradient(135deg,#6A1030,#A01840,#D44068);color:#fff;} body.hard-mode .btn-teal{background:linear-gradient(135deg,#6A1030,#922840);} /* Hard mode: override all colored nth-child MC styles back to red theme */ body.hard-mode .active-q-panel{background:linear-gradient(135deg,rgba(192,40,80,0.06),rgba(8,0,10,0.8));border-color:rgba(192,40,80,0.22);} body.hard-mode .hm-badge{display:flex!important;} /* Hard mode timer */ .hm-timer-num{ font-family:'Creepster',cursive!important; font-size:96px!important; color:var(--hm-red)!important; text-shadow:0 0 20px rgba(192,40,80,0.55),0 0 40px rgba(192,40,80,0.28)!important; line-height:1!important; animation:hm-pulse 1s infinite!important; } @keyframes hm-pulse{0%,100%{text-shadow:0 0 20px rgba(192,40,80,0.55),0 0 40px rgba(192,40,80,0.28);}50%{text-shadow:0 0 40px rgba(192,40,80,0.85),0 0 80px rgba(192,40,80,0.45),0 0 2px #fff;}} @keyframes hm-ring-pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(192,40,80,0.5));}50%{filter:drop-shadow(0 0 22px rgba(192,40,80,0.95));}} body.hard-mode .timer-bar-fill{background:linear-gradient(90deg,#6A1030,#C02850)!important;} body.hard-mode .timer-bar-bg{background:rgba(192,40,80,0.08)!important;} body.hard-mode .timer-num{font-family:'Creepster',cursive;color:var(--hm-red);text-shadow:0 0 15px rgba(192,40,80,0.45);} /* Hard mode blocked overlay */ .hm-blocked{ display:none; position:fixed;inset:0;z-index:var(--z-lockout); background:rgba(5,0,2,0.92); align-items:center;justify-content:center; flex-direction:column;gap:20px; } .hm-blocked.show{display:flex;} .hm-blocked-icon{font-size:80px;animation:hm-shake 0.5s infinite;} @keyframes hm-shake{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}} .hm-blocked-title{font-family:'Creepster',cursive;font-size:52px;color:var(--hm-red);text-shadow:0 0 30px rgba(192,40,80,0.65);letter-spacing:4px;} .hm-blocked-sub{font-family:'Special Elite',cursive;font-size:18px;color:#D07090;letter-spacing:2px;text-align:center;max-width:400px;} /* HM badge */ .hm-badge{ display:none;align-items:center;gap:6px; background:rgba(192,40,80,0.15);border:1px solid rgba(192,40,80,0.38); border-radius:20px;padding:0 14px;height:26px;font-size:11px;color:#D86080; letter-spacing:1px;font-weight:700;white-space:nowrap; } /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: SCREENS, NAVIGATION, LAYOUT UTILITIES .screen, LB rail, forms, buttons ════════════════════════════════════════════════════════════════════ */ /* ── SCREENS ── */ .screen{display:none;min-height:100vh;min-height:100dvh;position:relative;z-index:1;} .screen.active{display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:20px;} .screen.full-layout{display:none;position:relative;z-index:1;padding:0;width:100%;height:100vh;height:100dvh;} .screen.full-layout.active{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;} /* Landing page inherits global background */ #screen-landing{z-index:1;} body.on-landing::before, body.on-prejoin::before{display:block;} /* ── PERSISTENT LEADERBOARD RAIL ── */ .lb-rail{ width:200px;flex-shrink:0; background:var(--navy-card); border-left:1px solid rgba(0,200,232,0.1); display:flex;flex-direction:column; overflow:hidden; height:100%; min-height:0; } .lb-rail-header{ padding:14px 14px 10px; border-bottom:1px solid rgba(0,200,232,0.08); font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:var(--teal);flex-shrink:0;opacity:0.85; } .lb-rail-body{flex:1;overflow-y:auto;padding:10px 10px;} .lb-rail-row{ display:flex;align-items:center;gap:8px; padding:9px 10px;border-radius:8px;margin-bottom:5px; background:rgba(13,13,32,0.6);border:1px solid rgba(0,200,232,0.07); transition:all 0.3s; } .lb-rail-row.mine{border-color:rgba(0,200,232,0.3);background:rgba(0,200,232,0.06);} .lb-rail-pos{width:22px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--dim);text-align:center;flex-shrink:0;} .lb-rail-pos.p1{color:var(--gold);text-shadow:0 0 8px color-mix(in srgb, var(--ac-gold) 40%, transparent);} .lb-rail-pos.p2{color:#A0C8FF;} .lb-rail-pos.p3{color:var(--mc-c);} .lb-rail-name{flex:1;font-size:14px;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lb-rail-pts{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--gold);white-space:nowrap;text-shadow:0 0 8px color-mix(in srgb, var(--ac-gold) 20%, transparent);} body.hard-mode .lb-rail{background:#130012;border-left-color:rgba(192,40,80,0.12);} body.hard-mode .lb-rail-row{background:rgba(22,8,20,0.6);border-color:rgba(192,40,80,0.08);} body.hard-mode .lb-rail-row.mine{border-color:rgba(192,40,80,0.28);} /* ── FORMS ── */ .form-group{margin-bottom:16px;} label{display:block;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal-light);margin-bottom:8px;opacity:0.9;} input,select,textarea{width:100%;background:rgba(13,13,32,0.9);border:1px solid rgba(0,200,232,0.2);border-radius:8px;padding:15px 18px;color:var(--white);font-family:'Space Grotesk',sans-serif;font-size:17px;letter-spacing:0.3px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;} input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,200,232,0.12),0 0 16px rgba(0,200,232,0.08);} input::placeholder,textarea::placeholder{color:var(--dim);} select option{background:var(--navy-mid);} textarea{resize:vertical;min-height:70px;line-height:1.5;} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.22s cubic-bezier(0.34,1.56,0.64,1);width:100%;} /* Gold = prize/action CTA */ .btn-gold{background:linear-gradient(135deg,#B8960C,var(--gold),var(--gold-light));color:#0A0A00;box-shadow:0 4px 24px color-mix(in srgb, var(--ac-gold) 28%, transparent);} .btn-gold:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 36px color-mix(in srgb, var(--ac-gold) 45%, transparent);} /* Teal = primary action (electric cyan) */ .btn-teal{background:linear-gradient(135deg,#0088AA,var(--teal),var(--teal-light));color:#03040F;box-shadow:0 4px 24px rgba(0,200,232,0.28);} .btn-teal:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 36px rgba(0,200,232,0.45);} /* Burgundy = electric purple */ .btn-burgundy{background:linear-gradient(135deg,#5B21B6,var(--burgundy),var(--burgundy-light));color:var(--white);box-shadow:0 4px 24px rgba(124,58,237,0.28);} .btn-burgundy:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 36px rgba(124,58,237,0.4);} .btn-outline{background:transparent;border:1px solid rgba(0,200,232,0.3);color:var(--teal-light);} .btn-outline:hover{background:var(--teal-dim);border-color:var(--teal);transform:translateY(-1px);} .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--dim);} .btn-ghost:hover{border-color:rgba(255,255,255,0.25);color:var(--white);} .btn-danger{background:var(--danger-dim);border:1px solid rgba(239,68,68,0.35);color:#FCA5A5;} .btn-danger:hover{background:rgba(239,68,68,0.22);} .btn-sm{padding:7px 14px;font-size:10px;width:auto;letter-spacing:1.5px;} .btn:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;box-shadow:none!important;} /* ── DIVIDER ── */ .divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--dim);font-size:10px;letter-spacing:2px;text-transform:uppercase;} .divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(201,168,76,0.15);} /* ── TOAST ── (updated version is in the animations block below) ── */ /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: LANDING SCREEN Hero block, ticket role picker (Host / Player / Spectator) ════════════════════════════════════════════════════════════════════ */ /* ── LANDING ── */ #screen-landing.active{padding:0;justify-content:flex-start;overflow:hidden;} /* Spotlight beam from above */ #screen-landing::after{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:900px;height:65vh; background:radial-gradient(ellipse 50% 70% at 50% 0%,color-mix(in srgb, var(--ac-gold) 8%, transparent) 0%,rgba(0,200,232,0.05) 45%,transparent 72%); pointer-events:none;z-index:0; } /* Hero block */ .landing-hero{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(22px,4.5vh,56px) 24px clamp(8px,1.5vh,18px); position:relative;z-index:1;flex-shrink:0; } .hero-eyebrow{ font-family:'Josefin Sans',sans-serif;font-size:10px;font-weight:700; letter-spacing:6px;text-transform:uppercase;color:var(--teal);opacity:0.6; margin-bottom:10px; } .hero-title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(88px,17vw,196px);line-height:0.83;letter-spacing:6px; background:linear-gradient(155deg,var(--gold-light) 0%,var(--gold) 38%,var(--hot) 72%,var(--burgundy-light) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; filter:drop-shadow(0 0 44px color-mix(in srgb, var(--ac-gold) 18%, transparent)); } .hero-title-show{ font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,6vw,68px);line-height:1;letter-spacing:20px; color:var(--teal-light);opacity:0.8;margin-top:2px; } .hero-rule{ display:flex;align-items:center;gap:16px;justify-content:center; margin:clamp(8px,1.5vh,18px) 0 clamp(4px,0.8vh,10px);width:260px; } .hero-rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);} .hero-rule em{color:var(--gold);font-style:normal;font-size:10px;} .hero-tagline{ font-family:'Space Grotesk',sans-serif;font-size:12px; color:var(--dim);letter-spacing:1.5px; } /* ── PW ── */ @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-8px);}50%{transform:translateX(4px);}75%{transform:translateX(-4px);}90%{transform:translateX(2px);}} /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: CHAT SYSTEM Chat scope tags, scope toggle buttons, extras panel (color/emoji) NOTE: .color-swatch defined here is shared by host + player chat ════════════════════════════════════════════════════════════════════ */ /* Chat scope tag on messages */ .chat-scope-tag{display:inline-block;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;} .scope-team{background:rgba(42,127,127,0.25);color:var(--teal-light);border:1px solid rgba(42,127,127,0.3);} .scope-everyone{background:rgba(201,168,76,0.2);color:var(--gold);border:1px solid rgba(201,168,76,0.3);} .scope-host{background:rgba(255,182,193,0.2);color:#FFB6C1;border:1px solid rgba(255,182,193,0.3);} /* Chat scope toggle buttons */ .scope-btn{flex:1;padding:5px 8px;border-radius:5px;border:1px solid rgba(201,168,76,0.15);background:transparent;color:var(--dim);font-family:'Josefin Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;} .scope-btn.active-team{background:rgba(42,127,127,0.15);border-color:rgba(42,127,127,0.4);color:var(--teal-light);} .scope-btn.active-everyone{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.4);color:var(--gold-light);} /* REMOVED: duplicate .chat-extras block (max-height:200px — wrong value). Correct definition below at "Chat extras: color picker + emoji panel" */ /* ── RULES MODAL ── */ /* ── Landing footer + ToS modal (were inline-styled and theme-blind) ── */ .landing-footer{position:absolute;bottom:10px;left:0;right:0;text-align:center;opacity:0.3;font-size:11px;color:color-mix(in srgb, var(--text) 60%, transparent);pointer-events:auto;user-select:none;} .landing-footer span{cursor:pointer;text-decoration:underline;} .landing-footer span:hover{color:var(--text);} .tos-overlay{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:rgba(0,0,0,0.85);align-items:center;justify-content:center;} .tos-card{background:var(--card);border:1px solid color-mix(in srgb, var(--purple) 28%, transparent);border-radius:12px;padding:32px;max-width:540px;width:90%;max-height:80vh;max-height:80dvh;overflow-y:auto;color:var(--text);font-size:13px;line-height:1.7;position:relative;} .tos-title{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--pink);} /* Section label inside the Controls drawer (was an inline #FF6BEF→#9161FF gradient) */ .spec-bc-menu-section-lbl{margin-top:18px;margin-bottom:10px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:5px;text-transform:uppercase;background:var(--rail-label-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .rules-overlay{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:rgba(5,10,18,0.88);align-items:center;justify-content:center;padding:20px;} .rules-overlay.show{display:flex;animation:rules-bg-in 0.25s ease forwards;} @keyframes rules-bg-in{from{opacity:0}to{opacity:1}} .rules-overlay.show .rules-modal{animation:rules-modal-in 0.38s cubic-bezier(0.22,1,0.36,1) forwards;} @keyframes rules-modal-in{from{opacity:0;transform:translateY(22px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}} .rules-modal{background:linear-gradient(160deg,var(--navy-mid),var(--navy-light));border:1px solid rgba(201,168,76,0.3);border-radius:16px;width:100%;max-width:720px;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,0.7);position:relative;overflow:hidden;} .rules-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--burgundy),var(--gold),var(--teal));} .rules-modal-header{padding:24px 28px 14px;flex-shrink:0;border-bottom:1px solid rgba(201,168,76,0.1);} .rules-modal-title{font-family:'Playfair Display',serif;font-size:32px;font-weight:900;color:var(--gold-light);margin-bottom:3px;} .rules-modal-sub{font-family:'Quicksand',sans-serif;font-style:italic;font-size:18px;color:var(--teal-light);letter-spacing:2px;} /* was 'Cormorant Garamond' — never loaded by the font links */ .rules-modal-body{flex:1;overflow-y:auto;padding:18px 28px 8px;} .rules-section{margin-bottom:20px;} .rules-section-title{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);padding-bottom:7px;border-bottom:1px solid rgba(201,168,76,0.12);margin-bottom:10px;} .rules-list{list-style:none;padding:0;} .rules-list li{font-size:17px;color:var(--cream);line-height:1.9;padding:4px 0 4px 20px;position:relative;} .rules-list li::before{content:'◆';position:absolute;left:0;color:var(--gold-dark);font-size:10px;top:10px;} .rules-hm-block{background:rgba(192,40,80,0.06);border:1px solid rgba(192,40,80,0.22);border-radius:9px;padding:14px 16px;margin-bottom:16px;} .rules-hm-title{font-family:'Creepster',cursive;font-size:28px;color:#C84068;letter-spacing:2px;margin-bottom:8px;} .rules-modal-footer{padding:14px 28px 20px;flex-shrink:0;border-top:1px solid rgba(201,168,76,0.1);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .rules-dont-show{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;color:var(--dim);user-select:none;} .rules-dont-show input{width:16px;height:16px;cursor:pointer;accent-color:var(--gold);} body.hard-mode .rules-modal{background:linear-gradient(160deg,#160012,#1A0018);border-color:rgba(192,40,80,0.22);} body.hard-mode .rules-modal::before{background:linear-gradient(90deg,#6A1030,#C02850,#6A1030);} body.hard-mode .rules-hm-block{background:rgba(192,40,80,0.09);border-color:rgba(192,40,80,0.32);} /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: HOST GAME SCREEN LAYOUT Three-column grid, section headers, teams, LB, Q controls, timer ════════════════════════════════════════════════════════════════════ */ /* ── HOST LAYOUT ── */ .section-hdr{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(0,200,232,0.1);display:flex;align-items:center;justify-content:space-between;opacity:0.85;} /* Teams */ .team-card{background:rgba(13,13,32,0.8);border:1px solid rgba(0,200,232,0.1);border-radius:10px;padding:11px 13px;margin-bottom:9px;transition:border-color 0.2s,box-shadow 0.2s;} .team-card:hover{border-color:rgba(0,200,232,0.3);box-shadow:0 0 12px rgba(0,200,232,0.06);} .team-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} .team-card-name{font-weight:700;font-size:15px;color:var(--cream);} .team-score-pill{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#050500;font-weight:800;font-size:12px;padding:3px 11px;border-radius:10px;font-family:'Space Grotesk',sans-serif;letter-spacing:0.5px;} .team-card-members{font-size:12px;color:var(--dim);line-height:1.7;} /* Leaderboard */ .lb-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;margin-bottom:6px;background:rgba(13,13,32,0.6);border:1px solid rgba(0,200,232,0.07);transition:all 0.3s;} .lb-row.my-team{border-color:rgba(0,200,232,0.3);background:rgba(0,200,232,0.06);} .lb-pos{font-family:'Bebas Neue',sans-serif;width:22px;font-size:18px;letter-spacing:1px;color:var(--dim);text-align:center;flex-shrink:0;} .lb-pos.p1{color:var(--gold);text-shadow:0 0 8px color-mix(in srgb, var(--ac-gold) 40%, transparent);} .lb-pos.p2{color:#A0C8FF;} .lb-pos.p3{color:var(--mc-c);} .lb-name{flex:1;font-size:14px;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lb-pts{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:var(--gold);text-shadow:0 0 8px color-mix(in srgb, var(--ac-gold) 20%, transparent);} /* ── QUESTION CONTROLS ── */ .q-mode-tabs{display:flex;gap:8px;margin-bottom:16px;} /* .q-tab base lives with the host panel rules (flatten-important-layers) */ .theme-selector{background:rgba(22,15,6,0.6);border:1px solid rgba(201,168,76,0.2);border-radius:10px;padding:16px;margin-bottom:12px;} .theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;} .theme-btn{padding:11px 10px;border-radius:7px;border:1px solid rgba(201,168,76,0.15);background:rgba(10,21,32,0.7);color:var(--cream);font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center;letter-spacing:0.5px;} .theme-btn:hover{border-color:rgba(201,168,76,0.4);background:var(--gold-dim);color:var(--gold-light);} .theme-btn.selected{border-color:var(--gold);background:var(--gold-dim);color:var(--gold-light);} .theme-icon{display:block;font-size:20px;margin-bottom:5px;} .q-set-list{max-height:200px;overflow-y:auto;} .q-set-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:7px;margin-bottom:6px;background:rgba(22,15,6,0.5);border:1px solid rgba(201,168,76,0.1);cursor:pointer;transition:all 0.2s;} .q-set-item:hover{border-color:rgba(201,168,76,0.35);} .q-set-item.active-q{border-color:rgba(42,127,127,0.45);background:var(--teal-dim);} .q-set-item-text{font-size:12px;color:var(--cream);flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .q-set-item-type{font-size:10px;color:var(--dim);white-space:nowrap;} .builder-box{background:rgba(22,15,6,0.5);border:1px solid rgba(201,168,76,0.15);border-radius:10px;padding:18px;margin-bottom:16px;} .ans-type-row{display:flex;gap:8px;margin-bottom:14px;} .ans-type-btn{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(201,168,76,0.15);background:transparent;color:var(--dim);font-family:'Josefin Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;} .ans-type-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);} .opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;} .opt-wrap{display:flex;align-items:center;gap:7px;} .opt-pill{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;} .pA{background:rgba(14,165,233,0.22);color:#7DD3FC;border:1px solid rgba(14,165,233,0.5);} .pB{background:rgba(234,179,8,0.2);color:#FDE68A;border:1px solid rgba(234,179,8,0.5);} .pC{background:rgba(249,115,22,0.2);color:#FDBA74;border:1px solid rgba(249,115,22,0.5);} .pD{background:rgba(168,85,247,0.2);color:#D8B4FE;border:1px solid rgba(168,85,247,0.5);} .opt-wrap input{margin-bottom:0;} .correct-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .correct-row label{margin:0;white-space:nowrap;} .correct-row select{flex:1;} /* Active Q */ .active-q-panel{background:linear-gradient(135deg,rgba(0,200,232,0.07),rgba(13,13,32,0.9));border:1px solid rgba(0,200,232,0.22);border-radius:12px;padding:18px;margin-bottom:12px;box-shadow:0 0 20px rgba(0,200,232,0.04);} .aq-text{font-family:'Playfair Display',serif;font-size:17px;color:var(--white);margin-bottom:10px;line-height:1.4;} .aq-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .aq-opt{background:rgba(13,13,32,0.7);border:1px solid rgba(0,200,232,0.1);border-radius:6px;padding:6px 10px;font-size:11px;color:var(--cream);display:flex;align-items:center;gap:7px;} .aq-opt.correct{border-color:rgba(16,185,129,0.5);background:var(--success-dim);color:#6EE7B7;} /* Timer */ .timer-wrap{margin-bottom:14px;} .timer-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;} .timer-num{font-family:'Bebas Neue',sans-serif;font-size:96px;color:var(--gold);transition:color 0.5s,text-shadow 0.5s;line-height:1;letter-spacing:2px;text-shadow:0 0 20px color-mix(in srgb, var(--ac-gold) 35%, transparent);} .timer-num.urgent{color:#FF4444;animation:t-pulse 0.6s infinite;text-shadow:0 0 24px rgba(255,68,68,0.7),0 0 48px rgba(255,68,68,0.3);} @keyframes t-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}} @keyframes timer-pulse{0%,100%{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--pink) 50%, transparent));}50%{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--pink) 95%, transparent));}} .timer-bar-bg{height:8px;background:rgba(255,255,255,0.05);border-radius:6px;overflow:hidden;} .timer-bar-fill{height:100%;border-radius:6px;transition:width 1s linear,background 0.5s;background:linear-gradient(90deg,var(--teal),var(--teal-light));} .timer-bar-fill.urgent{background:linear-gradient(90deg,#991B1B,#FF4444);} /* Custom timer input */ .timer-custom-row{display:flex;align-items:center;gap:8px;margin-top:10px;} .timer-custom-row input{flex:1;padding:8px 10px;font-size:13px;} .timer-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;} .timer-preset{padding:5px 10px;border-radius:5px;border:1px solid rgba(201,168,76,0.2);background:transparent;color:var(--dim);font-family:'Josefin Sans',sans-serif;font-size:10px;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:1px;} .timer-preset:hover,.timer-preset.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold-light);} .score-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;} .score-preset{padding:5px 10px;border-radius:5px;border:1px solid color-mix(in srgb, var(--purple) 22%, transparent);background:transparent;color:color-mix(in srgb, var(--lav) 55%, transparent);font-family:'Space Mono',monospace;font-size:9px;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:1px;} .score-preset:hover,.score-preset.active{background:color-mix(in srgb, var(--pink) 14%, transparent);border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:var(--pink);} /* Answer feed */ .answer-feed{max-height:240px;overflow-y:auto;} .ans-entry{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;margin-bottom:7px;border:1px solid rgba(201,168,76,0.08);background:rgba(22,15,6,0.5);animation:slideIn 0.25s ease;} /* Question history */ .qh-entry{padding:9px 11px;border-radius:7px;margin-bottom:7px;border:1px solid rgba(201,168,76,0.08);background:rgba(22,15,6,0.5);font-size:12px;} .qh-num{font-size:9px;letter-spacing:2px;color:var(--teal-light);text-transform:uppercase;margin-bottom:3px;} .qh-q{color:var(--cream);font-weight:600;margin-bottom:4px;line-height:1.4;} .qh-answer{color:var(--gold);font-size:11px;} .qh-winner{color:var(--teal-light);font-size:11px;margin-top:2px;} /* Used questions */ .q-used{opacity:0.45;} .q-used .q-set-item-type{color:var(--teal-light)!important;} @keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}} .ans-rank{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;} .r1{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:var(--navy);} .r2{background:rgba(180,180,180,0.2);color:#DDD;border:1px solid #AAA;} .r3{background:rgba(180,100,40,0.25);color:#E0A060;border:1px solid #C07030;} .rN{background:rgba(255,255,255,0.04);color:var(--dim);border:1px solid rgba(255,255,255,0.08);} .ans-info{flex:1;min-width:0;} .ans-team{font-weight:700;font-size:14px;color:var(--gold-light);} .ans-by{font-size:12px;color:var(--dim);} .ans-val{font-size:14px;font-weight:700;} .ans-correct{color:var(--teal-light);} .ans-wrong{color:#FF9090;} .ans-ts{font-size:10px;color:var(--dim);white-space:nowrap;text-align:right;} /* Chat monitor */ .chat-monitor{max-height:300px;overflow-y:auto;} .cm-text{color:var(--cream);} .cm-text.sys{color:var(--teal-light);} /* Chat extras: color picker + emoji panel */ .chat-extras{overflow:hidden;transition:max-height 0.25s ease,opacity 0.2s;max-height:0;opacity:0;} .chat-extras.open{max-height:120px;opacity:1;} .chat-extras-inner{padding:8px 0 6px;} .chat-extra-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;} .chat-extra-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);white-space:nowrap;min-width:40px;} .color-swatches{display:flex;gap:5px;flex-wrap:wrap;} .color-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.15s,border-color 0.15s;flex-shrink:0;} .color-swatch:hover{transform:scale(1.2);} .color-swatch.active{border-color:#fff;transform:scale(1.15);} .emoji-grid{display:flex;gap:5px;flex-wrap:wrap;} .emoji-btn{background:none;border:1px solid rgba(201,168,76,0.12);border-radius:5px;padding:3px 5px;font-size:16px;cursor:pointer;transition:background 0.15s,transform 0.1s;line-height:1;} .emoji-btn:hover{background:var(--gold-dim);transform:scale(1.2);} .chat-extras-toggle{background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;padding:0 2px;letter-spacing:0.5px;transition:color 0.15s;font-family:'Josefin Sans',sans-serif;} .chat-extras-toggle:hover{color:var(--gold-light);} .chat-extras-toggle.active{color:var(--gold);} /* ════════════════════════════════════════════════════════════════════ CSS DOMAIN: PLAYER GAME SCREEN LAYOUT Three-column grid, question area, rename footer MC buttons use the shared spec-mc-wrap/inner/label/text/pct/vote system ════════════════════════════════════════════════════════════════════ */ /* Rename footer trigger */ .rename-footer{ position:absolute;bottom:16px;left:50%;transform:translateX(-50%); width:100%;max-width:400px;padding:0 24px; } .rename-trigger{ display:flex;align-items:center;justify-content:center;gap:7px; padding:8px 16px;border-radius:7px; background:rgba(22,15,6,0.6);border:1px solid rgba(201,168,76,0.15); color:var(--dim);font-family:'Josefin Sans',sans-serif;font-size:10px; font-weight:700;letter-spacing:2px;text-transform:uppercase; cursor:pointer;transition:all 0.2s;width:100%; } .rename-trigger:hover{border-color:rgba(201,168,76,0.35);color:var(--gold-light);} .rename-expand{ display:none;margin-top:8px; background:var(--navy-mid);border:1px solid rgba(201,168,76,0.25); border-radius:9px;padding:14px; box-shadow:0 -8px 30px rgba(0,0,0,0.4); } .rename-expand.open{display:block;animation:slideIn 0.2s ease;} .rename-expand-row{display:flex;gap:8px;} .rename-expand-row input{flex:1;padding:9px 12px;font-size:13px;margin-bottom:0;} .rename-expand-row button{width:auto;padding:9px 14px;font-size:10px;letter-spacing:1px;} /* Q display */ .q-num-tag{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;color:var(--teal-light);text-transform:uppercase;margin-bottom:16px;text-align:center;background:rgba(0,200,232,0.1);border:1px solid rgba(0,200,232,0.25);padding:5px 16px;border-radius:20px;} .q-text-big{font-family:'Playfair Display',serif;font-size:clamp(26px,3.2vw,50px);font-weight:700;color:var(--white);text-align:center;margin-bottom:34px;line-height:1.35;max-width:700px;text-shadow:0 2px 20px rgba(0,0,0,0.5);} /* FT input area */ .ft-area{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:14px;} .ft-meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} .ft-attempt-counter{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 68%, transparent);} .ft-meta-note{font-size:12px;color:color-mix(in srgb, var(--lav) 50%, transparent);} .ft-meta-note.success{color:#6EE7B7;} .ft-input{width:100%;padding:22px 26px;font-size:24px;border-radius:12px;text-align:center;letter-spacing:1px;font-family:'Space Grotesk',sans-serif;font-weight:600;} /* ft-zero-shift: one attempt line is reserved up-front so the first wrong guess doesn't grow the card */ .ft-attempts{min-height:38px;max-height:140px;overflow-y:auto;width:100%;display:flex;flex-direction:column;gap:7px;} .ft-attempt{padding:9px 16px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px;animation:slideIn 0.2s ease;} .ft-attempt.wrong{background:var(--danger-dim);border:1px solid rgba(239,68,68,0.3);color:#FCA5A5;} #ft-player-input.ft-shake{border-color:color-mix(in srgb, var(--pink) 85%, transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent)!important;animation:shake 0.4s ease;} .ft-attempt.correct{background:color-mix(in srgb, var(--lav) 7%, transparent);border:1px solid color-mix(in srgb, var(--lav) 20%, transparent);color:var(--cream);} /* Result banners */ .result-banner{padding:18px 28px;border-radius:12px;text-align:center;margin-top:18px;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;max-width:580px;width:100%;letter-spacing:0.5px;} .result-banner.correct{background:linear-gradient(135deg,rgba(16,185,129,0.15),rgba(16,185,129,0.08));border:1px solid rgba(16,185,129,0.45);color:#6EE7B7;box-shadow:0 0 30px rgba(16,185,129,0.15),inset 0 0 20px rgba(16,185,129,0.04);animation:correctFlash 0.5s ease;} @keyframes correctFlash{0%{transform:scale(0.96);}60%{transform:scale(1.02);}100%{transform:scale(1);}} .result-banner.locked{background:rgba(60,60,90,0.2);border:1px solid rgba(100,100,150,0.2);color:var(--dim);} .timer-status-slot{width:100%;display:flex;justify-content:center;align-items:center;} .timer-status-slot:empty{display:none;} /* Team chat */ .chat-wrap{display:flex;flex-direction:column;flex:1;min-height:0;} .chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:5px;min-height:0;} .chat-msg{padding:9px 12px;border-radius:7px;background:rgba(22,15,6,0.6);font-size:15px;animation:slideIn 0.2s ease;} .chat-msg-author{font-weight:700;color:var(--gold-light);font-size:13px;margin-bottom:2px;} .chat-msg-text{color:var(--cream);} .chat-input-row{display:flex;gap:6px;flex-shrink:0;} .chat-input-row input{flex:1;padding:11px 14px;font-size:15px;} .chat-send{background:color-mix(in srgb, var(--pink) 12%, transparent);border:1px solid color-mix(in srgb, var(--pink) 25%, transparent);border-radius:6px;padding:8px 12px;color:var(--pink);cursor:pointer;font-size:14px;transition:background 0.2s;flex-shrink:0;} .chat-send:hover{background:color-mix(in srgb, var(--pink) 22%, transparent);} /* Team name edit */ .team-name-edit{display:flex;align-items:center;gap:6px;margin-top:6px;} .team-name-edit input{flex:1;padding:6px 9px;font-size:12px;margin-bottom:0;} .team-name-edit button{padding:6px 10px;font-size:10px;width:auto;letter-spacing:1px;} /* Pre-built teams list (host setup) */ .pre-team-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:200px;overflow-y:auto;} .pre-team-row{display:flex;align-items:center;gap:8px;} .pre-team-row input{flex:1;padding:8px 11px;font-size:13px;} .pre-team-del{background:var(--danger-dim);border:1px solid rgba(192,64,64,0.3);border-radius:5px;padding:6px 10px;color:#FF9090;font-size:16px;cursor:pointer;transition:background 0.2s;flex-shrink:0;} .pre-team-del:hover{background:rgba(192,64,64,0.25);} /* ── REVEAL ── */ /* ── PODIUM ── */ #screen-podium{background:radial-gradient(ellipse 70% 50% at 50% 0%,color-mix(in srgb, var(--ac-gold) 6%, transparent) 0%,rgba(0,200,232,0.03) 40%,var(--navy) 70%);} /* Wrap-up stat cards */ /* Wrap-up stat cards — FLATTENED (flatten-important-layers): the old legacy-gold base + later '#screen-wrapup … !important' re-skin merged into one layer. Card accents cycle Host (pink) · Player (lavender) · Spectator (blue-teal). */ .stat-card{background:linear-gradient(140deg,var(--card) 0%,var(--card) 100%);border:1px solid color-mix(in srgb, var(--purple) 16%, transparent);border-radius:14px;padding:18px;text-align:center;position:relative;overflow:hidden;transition:border-color 0.2s;} .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;} .stat-card.gold::before{background:linear-gradient(90deg,var(--pink),var(--pink),var(--violet));} .stat-card.teal::before{background:linear-gradient(90deg,var(--blue-2),var(--blue),var(--ac-teal));} .stat-card.burgundy::before{background:linear-gradient(90deg,var(--lav),var(--purple),var(--violet));} .stat-card.purple::before{background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple));} .stat-card.funny::before{background:linear-gradient(90deg,var(--ac-teal),var(--blue),var(--blue-2));} .stat-label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--text-3) 55%, transparent);margin-bottom:10px;font-weight:700;} .stat-winner{font-family:'Oxanium',sans-serif;font-weight:800;font-size:22px;letter-spacing:1px;color:var(--cream);margin-bottom:4px;line-height:1.2;} .stat-card.gold .stat-winner{background:linear-gradient(135deg,var(--pink) 0%,var(--pink) 40%,var(--violet) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .stat-detail{font-family:'Quicksand',sans-serif;font-size:12px;font-weight:500;color:color-mix(in srgb, var(--text-3) 50%, transparent);} .podium-wrap{width:100%;max-width:720px;text-align:center;} .podium-subtitle{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;color:var(--teal-light);margin-bottom:32px;letter-spacing:4px;text-transform:uppercase;} .podium-stage{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-bottom:36px;} .podium-block{text-align:center;} .podium-empty{visibility:hidden;pointer-events:none;} .podium-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--cream);margin-bottom:8px;} .podium-score{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--dim);margin-bottom:6px;} .podium-bar{border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;font-size:34px;} .pb-1st{width:180px;height:200px;background:linear-gradient(180deg,color-mix(in srgb, var(--ac-gold) 35%, transparent),color-mix(in srgb, var(--ac-gold) 8%, transparent));border:1px solid color-mix(in srgb, var(--ac-gold) 40%, transparent);box-shadow:0 0 30px color-mix(in srgb, var(--ac-gold) 12%, transparent);} .pb-2nd{width:150px;height:155px;background:linear-gradient(180deg,rgba(0,200,232,0.2),rgba(0,200,232,0.05));border:1px solid rgba(0,200,232,0.3);} .pb-3rd{width:135px;height:120px;background:linear-gradient(180deg,rgba(249,115,22,0.18),rgba(249,115,22,0.05));border:1px solid rgba(249,115,22,0.3);} .podium-rest-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:10px;margin-bottom:7px;background:rgba(13,13,32,0.6);border:1px solid rgba(0,200,232,0.08);} .pr-pos{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--dim);width:24px;text-align:center;} .pr-name{flex:1;font-size:13px;color:var(--cream);} .pr-pts{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:var(--gold);} /* ── MANAGE PLAYERS MODAL ── */ .mp-overlay{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:rgba(10,4,22,0.93);align-items:center;justify-content:center;padding:20px;} .mp-overlay.show{display:flex;} .mp-modal{background:linear-gradient(160deg,var(--card) 0%,var(--card) 55%,#0E0520 100%);border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);border-radius:16px;width:100%;max-width:600px;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,0.75),0 0 60px color-mix(in srgb, var(--purple) 6%, transparent),inset 0 1px 0 color-mix(in srgb, var(--pink) 8%, transparent);position:relative;overflow:hidden;} .mp-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple),var(--blue),var(--ac-teal));} .mp-header{padding:20px 24px 14px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent);} .mp-title{font-family:'Oxanium',sans-serif;font-size:22px;font-weight:800;background:linear-gradient(90deg,var(--pink),var(--pink),var(--lav),var(--blue-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .mp-sub{font-family:'Quicksand',sans-serif;font-style:normal;font-size:13px;color:color-mix(in srgb, var(--text-3) 52%, transparent);letter-spacing:0.5px;margin-top:4px;} .mp-tabs{display:flex;gap:6px;padding:12px 24px 0;flex-shrink:0;border-bottom:1px solid color-mix(in srgb, var(--pink) 8%, transparent);} .mp-tab{padding:7px 18px;border-radius:6px 6px 0 0;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:1px solid color-mix(in srgb, var(--pink) 12%, transparent);border-bottom:none;background:color-mix(in srgb, var(--pink) 3%, transparent);color:color-mix(in srgb, var(--text-3) 42%, transparent);font-family:'Space Mono',monospace;transition:all 0.2s;} .mp-tab.active{background:color-mix(in srgb, var(--pink) 9%, transparent);color:var(--pink);border-color:color-mix(in srgb, var(--pink) 30%, transparent);} .mp-body{flex:1;overflow-y:auto;padding:18px 24px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--pink) 18%, transparent) transparent;} .mp-panel{display:none;} .mp-panel.active{display:block;} .mp-footer{padding:12px 24px 18px;flex-shrink:0;border-top:1px solid color-mix(in srgb, var(--pink) 8%, transparent);display:flex;justify-content:flex-end;gap:8px;} /* Auto-balance preview */ .ab-current{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:16px;} .ab-team-chip{background:color-mix(in srgb, var(--purple) 6%, transparent);border:1px solid color-mix(in srgb, var(--purple) 20%, transparent);border-radius:8px;padding:10px 12px;} .ab-chip-name{font-size:12px;font-weight:700;color:var(--lav);margin-bottom:4px;} .ab-chip-members{font-size:11px;color:color-mix(in srgb, var(--text-3) 50%, transparent);line-height:1.6;} .ab-arrow{text-align:center;font-size:18px;color:color-mix(in srgb, var(--pink) 55%, transparent);margin:8px 0;} .ab-result{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:16px;} .ab-result-chip{background:color-mix(in srgb, var(--ac-teal) 6%, transparent);border:1px solid color-mix(in srgb, var(--ac-teal) 28%, transparent);border-radius:8px;padding:10px 12px;} /* Move player rows */ .mp-player-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:color-mix(in srgb, var(--purple) 4%, transparent);border:1px solid color-mix(in srgb, var(--purple) 12%, transparent);border-radius:7px;margin-bottom:6px;transition:border-color 0.2s;} .mp-player-row:hover{border-color:color-mix(in srgb, var(--pink) 28%, transparent);} .mp-player-name{flex:1;font-size:13px;color:rgba(230,205,255,0.88);font-weight:600;} .mp-player-team{font-size:11px;color:color-mix(in srgb, var(--text-3) 45%, transparent);margin-top:1px;} .mp-player-select{flex-shrink:0;width:150px;padding:6px 8px;font-size:12px;background:rgba(28,15,46,0.90);border:1px solid color-mix(in srgb, var(--purple) 24%, transparent);border-radius:5px;color:rgba(230,205,255,0.85);} .mp-move-btn{background:color-mix(in srgb, var(--purple) 10%, transparent);border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);border-radius:5px;padding:5px 10px;color:var(--lav);font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer;text-transform:uppercase;transition:all 0.2s;flex-shrink:0;} .mp-move-btn:hover{background:color-mix(in srgb, var(--purple) 22%, transparent);color:#E8D4FF;} .mp-move-btn.moved{background:color-mix(in srgb, var(--ac-teal) 9%, transparent);border-color:color-mix(in srgb, var(--ac-teal) 35%, transparent);color:var(--ac-teal);} .mp-info-box{background:color-mix(in srgb, var(--purple) 6%, transparent);border:1px solid color-mix(in srgb, var(--purple) 18%, transparent);border-radius:8px;padding:11px 14px;font-size:12px;color:color-mix(in srgb, var(--text-3) 65%, transparent);line-height:1.6;margin-bottom:14px;} /* ── Adjust Points panel (host point grants/deductions) ── */ .mp-pts-amount-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;} .mp-pts-amount-lbl{font-family:'Space Mono',monospace;font-size:var(--fs-micro);letter-spacing:var(--ls-wide);text-transform:uppercase;color:color-mix(in srgb, var(--lav) 60%, transparent);} .mp-pts-amount-row input{width:80px;background:rgba(255,255,255,0.05);border:1px solid color-mix(in srgb, var(--purple) 35%, transparent);border-radius:var(--r-ctl);color:var(--text);font-family:'Oxanium',sans-serif;font-weight:700;font-size:15px;padding:7px 10px;text-align:center;} .mp-pts-amount-row input:focus{outline:none;border-color:color-mix(in srgb, var(--pink) 50%, transparent);} .mp-pts-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--row-bg);border:1px solid color-mix(in srgb, var(--purple) 14%, transparent);margin-bottom:7px;} .mp-pts-name{flex:1;min-width:0;font-family:'Quicksand',sans-serif;font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mp-pts-score{flex-shrink:0;font-family:'Oxanium',sans-serif;font-weight:800;font-size:14px;color:var(--ac-gold);} .mp-pts-btn{flex-shrink:0;width:34px;height:30px;border-radius:var(--r-ctl);border:1px solid color-mix(in srgb, var(--purple) 40%, transparent);background:color-mix(in srgb, var(--purple) 12%, transparent);color:var(--lav);font-family:'Oxanium',sans-serif;font-weight:800;font-size:16px;line-height:1;cursor:pointer;transition:all 0.15s ease;} .mp-pts-btn.plus:hover{border-color:color-mix(in srgb, var(--ac-teal) 55%, transparent);color:var(--ac-teal);background:color-mix(in srgb, var(--ac-teal) 12%, transparent);} .mp-pts-btn.minus:hover{border-color:color-mix(in srgb, var(--ac-danger) 55%, transparent);color:var(--ac-danger);background:color-mix(in srgb, var(--ac-danger) 10%, transparent);} .mp-pts-btn:active{transform:scale(0.93);} /* ── SPECTATOR ── */ .choice-card.spectator::before{background:linear-gradient(90deg,var(--burgundy),var(--burgundy-light));} .choice-card.spectator .choice-label{color:var(--burgundy-light);} /* Spectator topbar badge */ .spec-badge{ display:flex;align-items:center;gap:6px; background:rgba(123,45,66,0.2);border:1px solid rgba(192,80,112,0.45); border-radius:20px;padding:5px 14px;font-size:11px;color:var(--burgundy-light); letter-spacing:1.5px;font-weight:700;text-transform:uppercase; } /* Spectator question styles — significantly bigger than player */ .spec-q-num{ font-size:11px;letter-spacing:4px;text-transform:uppercase; color:var(--gold-dark);margin-bottom:14px;font-weight:700; } .spec-q-text{ font-family:'Playfair Display',serif; font-size:clamp(26px,3.5vw,48px); font-weight:700;color:var(--white); line-height:1.35;margin-bottom:32px; max-width:760px; } /* Spectator MC grid — bigger buttons, view-only */ .spec-mc-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px; width:100%;max-width:720px; } /* Spectator FT placeholder */ .spec-ft-area{ width:100%;max-width:600px; background:rgba(22,15,6,0.5); border:1px solid rgba(201,168,76,0.15); border-radius:10px;padding:18px 24px; color:var(--dim);font-size:14px;letter-spacing:1px; text-align:center; } /* Spectator waiting state — bigger */ .spec-waiting{ display:flex;flex-direction:column;align-items:center;gap:16px; } .spec-waiting-icon{width:112px;height:112px;object-fit:contain;animation:specPulse 3s ease-in-out infinite;image-rendering:auto;filter:drop-shadow(0 0 16px color-mix(in srgb, var(--blue) 50%, transparent));} @keyframes specPulse{0%,100%{opacity:0.4;transform:scale(1);}50%{opacity:0.7;transform:scale(1.06);}} .spec-waiting-text{ font-family:'Space Grotesk',sans-serif; font-size:20px;font-weight:500;color:var(--dim);letter-spacing:1px; } .spec-chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-height:0;} /* Hard mode spectator */ body.hard-mode .spec-badge{background:rgba(255,0,0,0.15);border-color:rgba(255,0,0,0.4);color:#FF6060;} /* Upload */ .upload-zone{border:2px dashed rgba(201,168,76,0.25);border-radius:9px;padding:20px;text-align:center;cursor:pointer;transition:all 0.2s;margin-bottom:12px;} .upload-zone:hover{border-color:rgba(201,168,76,0.5);background:var(--gold-dim);} .upload-zone input{display:none;} .upload-icon{font-size:28px;margin-bottom:6px;} .upload-text{font-size:11px;color:var(--dim);letter-spacing:0.5px;} /* Scrollbar */ ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(0,200,232,0.2);border-radius:2px;} /* Pts float */ @keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-80px) scale(1.6);}} .pts-float{position:fixed;font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:var(--gold);pointer-events:none;animation:floatUp 1.4s ease forwards;z-index:var(--z-float);text-shadow:0 0 20px color-mix(in srgb, var(--ac-gold) 60%, transparent);} /* ── GAME SHOW ENERGY — NEW ANIMATIONS ── */ /* Question entrance */ @keyframes qEntrance{ 0%{opacity:0;transform:translateY(18px) scale(0.97);} 60%{transform:translateY(-3px) scale(1.01);} 100%{opacity:1;transform:translateY(0) scale(1);} } .q-entrance{animation:qEntrance 0.45s cubic-bezier(0.22,1,0.36,1) forwards;} /* Confetti particle */ @keyframes confettiDrop{ 0%{transform:translateY(0) rotate(0deg);opacity:1;} 100%{transform:translateY(280px) rotate(720deg);opacity:0;} } .confetti-piece{position:fixed;width:10px;height:10px;pointer-events:none;z-index:var(--z-confetti);border-radius:2px;animation:confettiDrop 1.2s ease-in forwards;} /* Score pulse on update */ @keyframes scorePop{0%{transform:scale(1);}40%{transform:scale(1.35);}70%{transform:scale(0.95);}100%{transform:scale(1);}} .score-pop{animation:scorePop 0.5s cubic-bezier(0.34,1.56,0.64,1);} /* Neon pulse for "live" indicators */ @keyframes neonBlink{0%,100%{opacity:1;text-shadow:0 0 8px rgba(0,200,232,0.8);}50%{opacity:0.4;text-shadow:none;}} /* Toast updated */ /* Toast: top-CENTRE, below the top bar (never overlaps top-bar buttons or the right rail). Universal. */ #toast{position:fixed;top:78px;left:50%;right:auto;z-index:var(--z-toast);background:var(--card);border:1px solid color-mix(in srgb, var(--purple) 28%, transparent);border-radius:10px;padding:12px 20px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,0.5),0 0 20px color-mix(in srgb, var(--purple) 10%, transparent);transform:translateX(-50%) translateY(-16px);opacity:0;pointer-events:none;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.25s ease;max-width:min(440px,90vw);text-align:center;} #toast.show{transform:translateX(-50%) translateY(0);opacity:1;} /* Broadcast pill + toast both live at top:78px — when the pill is up, the toast steps below it */ body:has(#bc-alert.show) #toast{top:132px;} #toast.error{border-color:color-mix(in srgb, var(--ac-danger) 50%, transparent);color:color-mix(in srgb, var(--ac-danger) 60%, var(--text));} #toast.success{border-color:color-mix(in srgb, var(--ac-success) 50%, transparent);color:color-mix(in srgb, var(--ac-success) 60%, var(--text));} /* Player lb-rail is ALWAYS visible — never hidden */ /* ── BREAKPOINT STRATEGY (breakpoint-unify): two steps only — 768px (phone) + 480px (small phone). Every screen's MC grid stacks to 1 column at the SAME ≤768px step (player/host previously stacked at 640, spectator at 768 — the 641-768 band now stacks everywhere). Landing keeps ONE documented exception: its 2-col hero/tickets grid collapses at 880px because 2-col below that is genuinely cramped (tickets ~317px at 800). ── */ @media(max-width:768px){ .spec-mc-grid{grid-template-columns:1fr!important;} /* Stacked (1-column) MC layout — pct label above its own pill, left-aligned + smaller, with grid row-gap reserved up-front so reveal never shifts buttons. The `body` prefix bumps specificity above #screen-* gap overrides (~5911/~6019) which would otherwise clobber row-gap. Host pct stays inside the pill — only its corners get unified. */ body #screen-player-game .spec-mc-grid{padding:14px 4px 6px!important;row-gap:28px!important;column-gap:0!important;gap:28px 0!important;} body #screen-player-game .spec-mc-wrap, body #screen-player-game .spec-mc-wrap:nth-child(1), body #screen-player-game .spec-mc-wrap:nth-child(2), body #screen-player-game .spec-mc-wrap:nth-child(3), body #screen-player-game .spec-mc-wrap:nth-child(4){border-radius:18px!important;} body #screen-player-game .spec-mc-wrap .spec-mc-pct, body #screen-player-game .spec-mc-wrap:nth-child(1) .spec-mc-pct, body #screen-player-game .spec-mc-wrap:nth-child(2) .spec-mc-pct, body #screen-player-game .spec-mc-wrap:nth-child(3) .spec-mc-pct, body #screen-player-game .spec-mc-wrap:nth-child(4) .spec-mc-pct{ top:auto!important;bottom:calc(100% + 3px)!important; left:6px!important;right:auto!important; text-align:left!important; font-size:clamp(10px,2.4vw,13px)!important; transform-origin:left bottom!important; } /* Spectator — same stacked treatment (its own padding step) */ body #screen-spectator-game .spec-mc-grid{padding:20px 4px 6px!important;row-gap:28px!important;column-gap:0!important;gap:28px 0!important;} body #screen-spectator-game .spec-mc-wrap, body #screen-spectator-game .spec-mc-wrap:nth-child(1), body #screen-spectator-game .spec-mc-wrap:nth-child(2), body #screen-spectator-game .spec-mc-wrap:nth-child(3), body #screen-spectator-game .spec-mc-wrap:nth-child(4){border-radius:18px!important;} body #screen-spectator-game .spec-mc-wrap .spec-mc-pct, body #screen-spectator-game .spec-mc-wrap:nth-child(1) .spec-mc-pct, body #screen-spectator-game .spec-mc-wrap:nth-child(2) .spec-mc-pct, body #screen-spectator-game .spec-mc-wrap:nth-child(3) .spec-mc-pct, body #screen-spectator-game .spec-mc-wrap:nth-child(4) .spec-mc-pct{ top:auto!important;bottom:calc(100% + 3px)!important; left:6px!important;right:auto!important; text-align:left!important; font-size:clamp(10px,2.4vw,13px)!important; transform-origin:left bottom!important; } /* (former ≤600px strays, unified to 768. The old .hg-pg-qzone padding rules here and at ≤480 were DEAD — the later ≤768 player block's !important padding always won — so they were deleted, not migrated.) */ .lb-rail-name{font-size:10px;} .lb-rail-pts{font-size:12px;} } /* ══════════════════════════════════════════════════════ HOLOGRAPHIC NIGHT — LANDING REDESIGN Uses the exact class names from holographic-night-preview.html. Scoped to body.on-landing so nothing below bleeds into other screens. Hard Mode (body.hard-mode) is completely untouched. ══════════════════════════════════════════════════════ */ /* ── HOLOGRAPHIC NIGHT: exact CSS from preview, scoped to landing ── */ /* ════════════════════════════════════════════════════════ LANDING BG — CONSTELLATION (editorial: grid + horizon + stars) Replaces the 4 corner conics + dot-pattern w/ a starry holo room ════════════════════════════════════════════════════════ */ /* Base: plum well + warm pink horizon glow at the bottom. Brightness pass (round 6): the well's old hard-coded hexes (#1F0E40/#150829/#0A0318) kept the landing dark on every theme — now theme-driven and lifted to match the brightened player/spec surfaces. */ body.on-landing, body.on-prejoin { background: #1A0D32; } body.on-landing::before, body.on-prejoin::before { background: radial-gradient(ellipse 70% 40% at 50% 105%, color-mix(in srgb, var(--pink) 26%, transparent) 0%, transparent 55%), radial-gradient(ellipse 90% 70% at 50% 50%, color-mix(in srgb, var(--purple) 22%, var(--bg)) 0%, color-mix(in srgb, var(--purple) 10%, var(--bg)) 65%, var(--bg) 100%); } /* Faint guide grid, masked toward the edges so it never hits the tickets hard */ body.on-landing::after, body.on-prejoin::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--pink) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--purple) 6%, transparent) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%); mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%); } /* Constellation decorative layers — stars show on every screen; horizon only on prejoin */ .cn-horizon { display: none; } body.on-prejoin .cn-horizon { display: block; } /* Soft pink horizon haze rising from the bottom 40% of the screen */ .cn-horizon { position: fixed; left: 0; right: 0; bottom: 0; height: 40%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 6%, transparent) 45%, color-mix(in srgb, var(--pink) 18%, transparent) 100%); } /* Layer 1 — saturated holo "named" stars (pink/teal/gold/lavender), 6s pulse */ .cn-stars { position: fixed; inset: 0; z-index: var(--z-deco); pointer-events: none; background-image: radial-gradient(circle 1.5px at 8% 18%, color-mix(in srgb, var(--pink) 95%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 14% 24%, color-mix(in srgb, var(--lav) 70%, transparent) 0%, transparent 100%), radial-gradient(circle 2px at 22% 14%, rgba(255,255,255,0.85) 0%, transparent 100%), radial-gradient(circle 1px at 28% 22%, color-mix(in srgb, var(--lav) 55%, transparent) 0%, transparent 100%), radial-gradient(circle 1.5px at 72% 8%, color-mix(in srgb, var(--ac-gold) 90%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 80% 16%, rgba(255,255,255,0.70) 0%, transparent 100%), radial-gradient(circle 2px at 90% 22%, color-mix(in srgb, var(--blue-2) 85%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 4% 62%, color-mix(in srgb, var(--ac-teal) 65%, transparent) 0%, transparent 100%), radial-gradient(circle 1.5px at 12% 72%, color-mix(in srgb, var(--pink) 60%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 50% 32%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 1px at 56% 26%, color-mix(in srgb, var(--lav) 50%, transparent) 0%, transparent 100%), radial-gradient(circle 2px at 62% 38%, rgba(255,148,244,0.75) 0%, transparent 100%), radial-gradient(circle 1px at 86% 64%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 1.5px at 92% 76%, color-mix(in srgb, var(--blue-2) 65%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 36% 88%, color-mix(in srgb, var(--lav) 50%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 44% 94%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 2px at 66% 92%, color-mix(in srgb, var(--ac-teal) 55%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 78% 50%, rgba(255,255,255,0.50) 0%, transparent 100%); animation: cn-sparkle 6s ease-in-out infinite; } /* Layer 2 — fine white background stars, 8s pulse on a different rhythm */ .cn-stars-fine { position: fixed; inset: 0; z-index: var(--z-deco); pointer-events: none; background-image: radial-gradient(circle 1px at 6% 8%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(circle 1px at 18% 6%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 1px at 32% 12%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(circle 1px at 46% 8%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(circle 1px at 60% 14%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1px at 74% 22%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 1px at 88% 8%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(circle 1px at 8% 32%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1px at 24% 46%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(circle 1px at 40% 56%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(circle 1px at 58% 64%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1px at 72% 70%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(circle 1px at 86% 82%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(circle 1px at 4% 88%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(circle 1px at 20% 92%, rgba(255,255,255,0.45) 0%, transparent 100%); animation: cn-sparkle-2 8s ease-in-out infinite; } /* Twinkling SVG "+" sparkle accents — sits in z:1 with the stars */ .cn-plus { position: fixed; inset: 0; z-index: var(--z-deco); pointer-events: none; color: rgba(255,255,255,0.55); } .cn-plus svg { width: 100%; height: 100%; opacity: 0.6; } .cn-plus .pl { animation: cn-plus-twinkle 3.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes cn-sparkle { 0%,100% { opacity: 0.35; } 25% { opacity: 0.80; } 50% { opacity: 0.50; } 75% { opacity: 0.90; } } @keyframes cn-sparkle-2 { 0%,100% { opacity: 0.6; } 33% { opacity: 0.25; } 66% { opacity: 0.95; } } @keyframes cn-plus-twinkle { 0%,100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } } /* Kill old spotlight on landing */ #screen-landing::after { display: none; } /* Screen layout */ #screen-landing.active { align-items: stretch; padding: 0; overflow: hidden; } /* Animations */ @keyframes holo-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hl-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes hl-ticket-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } @keyframes hl-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* Top bar */ .hl-top-bar { position: relative; z-index: 2; width: 100%; max-width: 1300px; margin: 0 auto; padding: clamp(18px,2.5vw,26px) clamp(24px,4vw,56px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); animation: hl-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) 0s both; } .hl-top-bar .tbm { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-3); } .hl-top-bar .tbl { display: flex; align-items: center; gap: 7px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); opacity: 0.8; } .hl-top-bar .tbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: hl-blink 1.6s ease-in-out infinite; flex-shrink: 0; } /* Main grid */ .hl-landing { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px,4vw,60px); align-items: center; align-content: center; padding: clamp(20px,3vw,40px) clamp(24px,4vw,56px) clamp(28px,3.5vw,48px); } /* Hero */ .hl-hero { display: flex; flex-direction: column; align-items: flex-start; animation: hl-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; } .hl-eyebrow { font-family: 'Space Mono', monospace; font-size: var(--fs-micro); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } /* (eyebrow diamond removed — star glyph retired app-wide) */ /* TRIVIA — solid holo */ .hl-title-solid { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(72px,12vw,148px); line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; display: block; background: linear-gradient(90deg,var(--pink) 0%,var(--violet) 18%,var(--purple) 36%,var(--blue) 54%,var(--ac-teal) 72%,var(--pink) 90%,var(--pink) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: holo-shift 5s ease infinite; } /* NIGHT. — ghost outline */ .hl-title-outline { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(72px,12vw,148px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; -webkit-text-stroke: 2px color-mix(in srgb, var(--pink) 55%, transparent); color: transparent; display: block; margin-bottom: 28px; } /* Rule */ /* Separator: dot trio (was a diamond + gradient line — lines clash with the bg grid) */ .hl-rule { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .hl-rule-dot { width: 10px; height: 10px; border-radius: 50%; animation: sb-dot 1.4s ease-in-out infinite; } .hl-rule-dot:nth-child(1) { background: var(--pink); box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 65%, transparent); } .hl-rule-dot:nth-child(2) { background: var(--purple); box-shadow: 0 0 14px color-mix(in srgb, var(--purple) 65%, transparent); animation-delay: .2s; } .hl-rule-dot:nth-child(3) { background: var(--blue); box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 65%, transparent); animation-delay: .4s; } /* Tagline */ .hl-tagline { font-family: 'Quicksand', sans-serif; font-size: clamp(14px,1.7vw,17px); line-height: 1.75; color: color-mix(in srgb, var(--lav) 72%, transparent); max-width: 32ch; margin-bottom: 26px; font-weight: 500; } /* Badges */ .hl-badges { display: flex; flex-wrap: wrap; gap: 8px; } .hl-badge { padding: 6px 13px; border-radius: 999px; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--pink) 20%, transparent); background: color-mix(in srgb, var(--pink) 5%, transparent); color: color-mix(in srgb, var(--lav) 68%, transparent); transition: border-color 0.2s, color 0.2s, background 0.2s; } .hl-badge:hover { border-color: color-mix(in srgb, var(--pink) 50%, transparent); color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, transparent); } .hl-badge:nth-child(2) { border-color: color-mix(in srgb, var(--purple) 20%, transparent); background: color-mix(in srgb, var(--purple) 5%, transparent); } .hl-badge:nth-child(2):hover { border-color: color-mix(in srgb, var(--purple) 50%, transparent); color: var(--lav); background: color-mix(in srgb, var(--purple) 10%, transparent); } .hl-badge:nth-child(3) { border-color: color-mix(in srgb, var(--blue) 20%, transparent); background: color-mix(in srgb, var(--blue) 5%, transparent); } .hl-badge:nth-child(3):hover { border-color: color-mix(in srgb, var(--blue) 50%, transparent); color: var(--blue-2); background: color-mix(in srgb, var(--blue) 10%, transparent); } /* Tickets */ .hl-ticket-stack { display: flex; flex-direction: column; gap: 14px; } .hl-ticket:nth-child(1) { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.30s both; } .hl-ticket:nth-child(2) { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.45s both; } .hl-ticket:nth-child(3) { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.60s both; } .hl-ticket { display: flex; cursor: pointer; border-radius: 18px; position: relative; padding: 1.5px; background: linear-gradient(135deg,color-mix(in srgb, var(--pink) 22%, transparent),color-mix(in srgb, var(--violet) 18%, transparent),color-mix(in srgb, var(--purple) 22%, transparent),color-mix(in srgb, var(--blue) 18%, transparent),color-mix(in srgb, var(--pink) 20%, transparent)); background-size: 300% 300%; animation: holo-shift 10s ease infinite; will-change: transform; transform-style: preserve-3d; } .hl-ticket.host:hover, .hl-ticket.host:focus-visible { box-shadow: 0 0 0 1.5px var(--pink), 0 16px 48px color-mix(in srgb, var(--pink) 22%, transparent), 0 4px 16px color-mix(in srgb, var(--purple) 14%, transparent); } .hl-ticket.player:hover, .hl-ticket.player:focus-visible { box-shadow: 0 0 0 1.5px var(--lav), 0 16px 48px color-mix(in srgb, var(--lav) 20%, transparent), 0 4px 16px color-mix(in srgb, var(--purple) 12%, transparent); } .hl-ticket.spectator:hover, .hl-ticket.spectator:focus-visible { box-shadow: 0 0 0 1.5px var(--blue-2), 0 16px 48px color-mix(in srgb, var(--blue) 22%, transparent), 0 4px 16px color-mix(in srgb, var(--blue) 14%, transparent); } /* Keyboard + touch affordance: glow ring on focus, press-down on tap */ .hl-ticket:focus-visible { outline: none; } .hl-ticket:active { transform: translateY(2px) scale(0.99); transition: transform 0.08s ease; } .hl-ticket-inner { display: flex; width: 100%; } /* Remove overflow:hidden so stub can rip outward on hover */ .hl-ticket-main { flex: 1; padding: 20px 20px 18px; display: flex; align-items: center; gap: 15px; position: relative; background: linear-gradient(140deg,var(--card) 0%,var(--card) 100%); overflow: hidden; border-radius: 16px 0 0 16px; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); --mx: 85%; --my: 15%; } .hl-ticket-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb, var(--pink) 13%, transparent),transparent 58%); pointer-events: none; z-index: 0; transition: background 0.08s linear; } .hl-ticket.player .hl-ticket-main::before { background: radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb, var(--purple) 12%, transparent),transparent 58%); } .hl-ticket.spectator .hl-ticket-main::before { background: radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb, var(--blue) 12%, transparent),transparent 58%); } /* Perf strip — split into two halves so each side tears with its panel on hover */ .hl-ticket-perf-l, .hl-ticket-perf-r { width: 5px; flex-shrink: 0; position: relative; background-size: 100% 300%; animation: holo-shift 3.5s ease infinite; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); } .hl-ticket.host .hl-ticket-perf-l, .hl-ticket.host .hl-ticket-perf-r { background: linear-gradient(180deg,var(--pink),var(--pink),var(--pink),var(--pink),var(--pink),var(--pink),var(--pink)); } .hl-ticket.player .hl-ticket-perf-l, .hl-ticket.player .hl-ticket-perf-r { background: linear-gradient(180deg,var(--lav),var(--purple),var(--violet),var(--lav),var(--purple),var(--violet),var(--lav)); } .hl-ticket.spectator .hl-ticket-perf-l, .hl-ticket.spectator .hl-ticket-perf-r { background: linear-gradient(180deg,var(--blue-2),var(--blue),var(--ac-teal),var(--blue-2),var(--blue),var(--ac-teal),var(--blue-2)); } /* Dotted cut line sits on the right edge of the left half */ .hl-ticket-perf-l::before { content: ''; position: absolute; top: 8px; bottom: 8px; right: 0; width: 1px; background: repeating-linear-gradient(to bottom,rgba(0,0,0,0.5) 0 5px,transparent 5px 10px); z-index: 1; } .hl-notch { display: none; } /* Stub */ .hl-ticket-stub { width: 80px; flex-shrink: 0; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(165deg,#1E1030,#160A28); position: relative; overflow: hidden; border-radius: 0 16px 16px 0; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); } .hl-ticket-stub::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg,transparent 15%,color-mix(in srgb, var(--pink) 7%, transparent) 35%,color-mix(in srgb, var(--purple) 9%, transparent) 50%,color-mix(in srgb, var(--blue) 7%, transparent) 65%,transparent 85%); background-size: 200% 200%; animation: holo-shift 7s ease infinite; } .hl-ticket:hover .hl-ticket-stub::before { animation: holo-shift 1.8s ease infinite; } /* Rip effect — ticket tears at the cut line on hover */ .hl-ticket:hover .hl-ticket-main { transform: translateX(-4px); } .hl-ticket:hover .hl-ticket-perf-l { transform: translateX(-4px); } .hl-ticket:hover .hl-ticket-perf-r { transform: translateX(10px) rotate(2.5deg); } .hl-ticket:hover .hl-ticket-stub { transform: translateX(10px) rotate(2.5deg); } /* Icon */ .hl-ticket-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); border: 1px solid color-mix(in srgb, var(--pink) 16%, transparent); background: color-mix(in srgb, var(--pink) 7%, transparent); color: var(--pink); } .hl-ticket:hover .hl-ticket-icon { transform: scale(1.14) rotate(-5deg); } .hl-ticket.player .hl-ticket-icon { border-color: color-mix(in srgb, var(--purple) 18%, transparent); background: color-mix(in srgb, var(--purple) 8%, transparent); color: var(--lav); } .hl-ticket.spectator .hl-ticket-icon { border-color: color-mix(in srgb, var(--blue) 18%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue-2); } .hl-ticket-icon svg { width: 22px; height: 22px; } /* Info */ .hl-ticket-info { flex: 1; min-width: 0; position: relative; z-index: 1; } /* Host + spectator have no mobile tag — pad to match the player ticket height */ .hl-ticket.host .hl-ticket-info, .hl-ticket.spectator .hl-ticket-info { padding-bottom: 18px; } .hl-event-label { font-family: 'Space Mono', monospace; font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 35%, transparent); margin-bottom: 6px; } .hl-ticket-role { font-family: 'Oxanium', sans-serif; font-weight: 700; font-size: clamp(24px,3.2vw,34px); line-height: 1; letter-spacing: -0.01em; margin-bottom: 5px; } .hl-ticket.host .hl-ticket-role { color: var(--pink); } .hl-ticket.player .hl-ticket-role { color: var(--lav); } .hl-ticket.spectator .hl-ticket-role { color: var(--blue-2); } .hl-ticket:hover .hl-ticket-role { text-shadow: 0 0 20px currentColor; } .hl-ticket-desc { font-family: 'Quicksand', sans-serif; font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--text-3) 50%, transparent); font-weight: 500; } /* Barcode */ .hl-barcode { display: flex; gap: 2px; align-items: flex-end; height: 16px; margin-bottom: 6px; position: relative; z-index: 1; } .hl-barcode span { width: 2px; background: color-mix(in srgb, var(--text-3) 25%, transparent); border-radius: 1px; display: block; } .hl-barcode span:nth-child(1) { height: 100%; } .hl-barcode span:nth-child(2) { height: 60%; width: 1px; } .hl-barcode span:nth-child(3) { height: 85%; } .hl-barcode span:nth-child(4) { height: 45%; width: 1px; } .hl-barcode span:nth-child(5) { height: 100%; } .hl-barcode span:nth-child(6) { height: 70%; width: 1px; } .hl-barcode span:nth-child(7) { height: 55%; } .hl-barcode span:nth-child(8) { height: 90%; } .hl-barcode span:nth-child(9) { height: 40%; width: 1px; } .hl-barcode span:nth-child(10) { height: 75%; } .hl-stub-label { font-family: 'Space Mono', monospace; font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 32%, transparent); position: relative; z-index: 1; } .hl-stub-num { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: 28px; line-height: 1; position: relative; z-index: 1; } .hl-ticket.host .hl-stub-num { color: var(--pink); text-shadow: 0 0 14px color-mix(in srgb, var(--pink) 35%, transparent); } .hl-ticket.player .hl-stub-num { color: var(--lav); text-shadow: 0 0 14px color-mix(in srgb, var(--lav) 30%, transparent); } .hl-ticket.spectator .hl-stub-num { color: var(--blue-2); text-shadow: 0 0 14px color-mix(in srgb, var(--blue) 35%, transparent); } .hl-ticket:hover .hl-stub-num { text-shadow: 0 0 22px currentColor !important; } /* Credit */ .hl-credit { grid-column: 1/-1; text-align: center; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--pink) 6%, transparent); font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 55%, transparent); animation: hl-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) 0.7s both; } /* Responsive — DELIBERATE EXCEPTION to the 768/480 strategy: the 2-col hero/tickets grid is genuinely cramped below ~880 (tickets ≈317px @ 800), so the landing collapses to 1-col earlier than the global phone step. */ @media (max-width: 880px) { .hl-landing { grid-template-columns: 1fr; align-items: flex-start; } .hl-hero { align-items: center; text-align: center; } .hl-eyebrow { justify-content: center; } .hl-rule { margin: 0 auto 20px; } .hl-tagline { max-width: 30ch; } .hl-badges { justify-content: center; } .hl-feats { margin: 0 auto; justify-content: center; } } @media (max-width: 480px) { /* breakpoint-unify: was 520 */ .hl-title-solid, .hl-title-outline { font-size: clamp(54px,17vw,88px); } .hl-ticket-main { padding: 15px; gap: 11px; } .hl-ticket-stub { width: 66px; } .hl-ticket-role { font-size: 22px; } } /* ═══════════════════════════════════════════════════════ LANDING v2 UPGRADES — background lift, shimmer, showinfo, entry pulse, barcode shuffle, harmonization ═══════════════════════════════════════════════════════ */ /* #1 — Paper fiber noise on ticket main */ .hl-ticket-main::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.18; } .hl-ticket.player .hl-ticket-main::after { filter: hue-rotate(30deg); } .hl-ticket.spectator .hl-ticket-main::after { filter: hue-rotate(70deg); } /* #1 — Stub paper grain */ .hl-ticket-stub::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.22; } /* #1 — Allow shimmer to clip within both perf halves */ .hl-ticket-perf-l, .hl-ticket-perf-r { overflow: hidden; } /* #2 — Idle traveling shimmer on both perf strips */ .hl-ticket-perf-l .perf-shimmer, .hl-ticket-perf-r .perf-shimmer { position: absolute; left: -30%; right: -30%; height: 28%; top: -40%; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%); filter: blur(2px); mix-blend-mode: screen; pointer-events: none; animation: perf-travel 3.6s cubic-bezier(0.65,0,0.35,1) infinite; } .hl-ticket:nth-child(2) .perf-shimmer { animation-delay: 1.2s; } .hl-ticket:nth-child(3) .perf-shimmer { animation-delay: 2.4s; } @keyframes perf-travel { 0% { top: -40%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100%{ top: 120%; opacity: 0; } } /* #2 — Entry pulse (overrides nth-child ticket animations) */ @keyframes entry-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 0%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 18%, transparent), 0 0 40px color-mix(in srgb, var(--pink) 35%, transparent); } 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 0%, transparent); } } @keyframes entry-pulse-p { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lav) 0%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lav) 18%, transparent), 0 0 40px color-mix(in srgb, var(--lav) 35%, transparent); } 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--lav) 0%, transparent); } } @keyframes entry-pulse-s { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-2) 0%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-2) 18%, transparent), 0 0 40px color-mix(in srgb, var(--blue-2) 35%, transparent); } 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-2) 0%, transparent); } } .hl-ticket.host { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.30s both, entry-pulse 1.2s ease-out 0.90s 1; } .hl-ticket.player { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.45s both, entry-pulse-p 1.2s ease-out 1.05s 1; } .hl-ticket.spectator { animation: hl-ticket-in 0.65s cubic-bezier(0.16,1,0.3,1) 0.60s both, entry-pulse-s 1.2s ease-out 1.20s 1; } /* #5 — SHOW INFO rows replace badges */ /* Feature credits roll — chrome-free small caps separated by glowing brand dots (replaces the placeholder spec-sheet; true features only) */ .hl-feats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 12px; margin-top: 4px; max-width: 420px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.9; } .hl-feat { color: color-mix(in srgb, var(--lav) 78%, transparent); white-space: nowrap; } .hl-feat-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .hl-feat-dot.d1 { background: var(--pink); box-shadow: 0 0 7px color-mix(in srgb, var(--pink) 60%, transparent); } .hl-feat-dot.d2 { background: var(--purple); box-shadow: 0 0 7px color-mix(in srgb, var(--purple) 60%, transparent); } .hl-feat-dot.d3 { background: var(--blue); box-shadow: 0 0 7px color-mix(in srgb, var(--blue) 60%, transparent); } /* #7 — Barcode shuffle on hover */ .hl-barcode span { transform-origin: bottom; transition: transform 0.2s; } .hl-ticket:hover .hl-barcode span { animation: bar-shuffle 0.55s steps(5) 1; background: currentColor; } @keyframes bar-shuffle { 0% { transform: scaleY(1); } 20% { transform: scaleY(0.4); } 40% { transform: scaleY(1.1); } 60% { transform: scaleY(0.6); } 80% { transform: scaleY(0.95); }100%{ transform: scaleY(1); } } .hl-ticket.host .hl-barcode { color: color-mix(in srgb, var(--pink) 75%, transparent); } .hl-ticket.player .hl-barcode { color: color-mix(in srgb, var(--lav) 75%, transparent); } .hl-ticket.spectator .hl-barcode { color: color-mix(in srgb, var(--blue-2) 75%, transparent); } .hl-ticket-icon, .hl-ticket-info { z-index: 1; } /* ── v2 HARMONIZATION — tune tickets to lifted bg ── */ /* 1 · Ticket-main: warmer plum */ .hl-ticket-main { background: linear-gradient(140deg, var(--card) 0%, var(--card) 55%, var(--card) 100%) !important; } /* 2 · Outer holo foil border */ .hl-ticket { background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 55%, transparent) 0%, color-mix(in srgb, var(--violet) 30%, transparent) 22%, color-mix(in srgb, var(--purple) 55%, transparent) 45%, color-mix(in srgb, var(--blue) 30%, transparent) 72%, color-mix(in srgb, var(--pink) 55%, transparent) 100% ) !important; background-size: 250% 250% !important; animation: holo-shift 8s ease infinite !important; } /* 3 · Stub: brighter foil-like inner gradient */ .hl-ticket-stub { background: linear-gradient(165deg, var(--card) 0%, #1F1238 60%, var(--card) 100%) !important; } .hl-ticket-stub::before { background: linear-gradient(140deg, transparent 10%, color-mix(in srgb, var(--pink) 14%, transparent) 30%, color-mix(in srgb, var(--purple) 18%, transparent) 50%, color-mix(in srgb, var(--blue) 14%, transparent) 70%, transparent 90%) !important; background-size: 220% 220% !important; animation: holo-shift 9s ease infinite !important; opacity: 0.85; } /* 4 · Notch color matches new bg */ .hl-notch { background: #1A0D32 !important; } /* Per-ticket border hue bias */ .hl-ticket.host { background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 62%, transparent) 0%, color-mix(in srgb, var(--pink) 35%, transparent) 30%, color-mix(in srgb, var(--violet) 55%, transparent) 60%, rgba(255,148,244,0.45) 100%) !important; } .hl-ticket.player { background: linear-gradient(135deg, color-mix(in srgb, var(--lav) 55%, transparent) 0%, color-mix(in srgb, var(--purple) 38%, transparent) 30%, color-mix(in srgb, var(--violet) 55%, transparent) 60%, color-mix(in srgb, var(--lav) 45%, transparent) 100%) !important; } .hl-ticket.spectator { background: linear-gradient(135deg, color-mix(in srgb, var(--blue-2) 55%, transparent) 0%, color-mix(in srgb, var(--blue) 38%, transparent) 30%, color-mix(in srgb, var(--ac-teal) 40%, transparent) 60%, color-mix(in srgb, var(--blue-2) 50%, transparent) 100%) !important; } .hl-ticket.host, .hl-ticket.player, .hl-ticket.spectator { background-size: 250% 250% !important; animation: holo-shift 8s ease infinite !important; } /* 5 · Hero title gradient harmonized */ .hl-title-solid { background-image: linear-gradient(92deg, var(--pink) 0%, var(--pink) 20%, var(--violet) 45%, var(--purple) 65%, var(--blue-2) 90%) !important; background-size: 180% 100% !important; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--pink) 22%, transparent)); animation: holo-shift 9s ease infinite; } .hl-title-outline { -webkit-text-stroke: 1.5px color-mix(in srgb, var(--lav) 55%, transparent) !important; } /* 6 · Icon tiles — denser fills */ .hl-ticket.host .hl-ticket-icon { background: color-mix(in srgb, var(--pink) 14%, transparent) !important; border-color: color-mix(in srgb, var(--pink) 38%, transparent) !important; } .hl-ticket.player .hl-ticket-icon { background: color-mix(in srgb, var(--purple) 14%, transparent) !important; border-color: color-mix(in srgb, var(--purple) 38%, transparent) !important; } .hl-ticket.spectator .hl-ticket-icon { background: color-mix(in srgb, var(--blue) 14%, transparent) !important; border-color: color-mix(in srgb, var(--blue) 38%, transparent) !important; } /* 7 · Perf divider seam */ .hl-ticket-perf::before { background: repeating-linear-gradient(to bottom, rgba(20,10,40,0.65) 0 5px, transparent 5px 10px) !important; } /* v2 responsive */ @media (max-width: 480px) { /* breakpoint-unify: was 520 */ .hl-feats { justify-content: center; max-width: 300px; margin-inline: auto; } .hl-hero { align-items: center !important; } } /* ══════════════════════════════════════════════ HJ — HOLOGRAPHIC JOIN (screen-player-join) Prefix: hj- | No overlap with existing CSS ══════════════════════════════════════════════ */ #screen-player-join.active { align-items: stretch; padding: 0; overflow: hidden; } .hj-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px,4vw,48px) clamp(20px,5vw,40px); gap: 0; } /* ── Header ── */ .hj-header { text-align: center; margin-bottom: 28px; animation: hj-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; } .hj-eyebrow { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 45%, transparent); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; } .hj-eyebrow::before, .hj-title { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(38px,7vw,56px); line-height: 1; letter-spacing: -0.01em; background: linear-gradient(90deg,var(--pink) 0%,var(--violet) 18%,var(--purple) 36%,var(--blue) 54%,var(--ac-teal) 72%,var(--pink) 90%,var(--pink) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: holo-shift 5s ease infinite; margin-bottom: 10px; } .hj-step-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 40%, transparent); } /* ── Card panel ── */ .hj-card { width: 100%; max-width: 440px; background: linear-gradient(140deg, var(--card) 0%, var(--card) 100%); border-radius: var(--r-card); padding: var(--pad-card); position: relative; animation: hj-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) 0.12s both; } /* Gradient border via mask */ .hj-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: linear-gradient(135deg,color-mix(in srgb, var(--pink) 38%, transparent),color-mix(in srgb, var(--purple) 32%, transparent),color-mix(in srgb, var(--blue) 22%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ── Card eyebrow label ── */ .hj-card-label { font-family: 'Space Mono', monospace; font-size: var(--fs-micro); /* was 8px — converged to the 9px micro token */ letter-spacing: var(--ls-wide); text-transform: uppercase; color: color-mix(in srgb, var(--pink) 38%, transparent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .hj-card-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,color-mix(in srgb, var(--pink) 20%, transparent),transparent); } /* ── Code input (Step 1) ── */ #join-code.hj-code-input { width: 100%; box-sizing: border-box; background: rgba(9,4,15,0.7); border: 1.5px solid color-mix(in srgb, var(--pink) 22%, transparent); border-radius: 12px; color: var(--pink); font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(26px,7vw,38px); text-align: center; letter-spacing: 10px; padding: 16px 12px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 18px; display: block; } /* Bad-code feedback: danger ring + shake (paired with the toast) */ #join-code.hj-code-input.hj-shake { border-color: color-mix(in srgb, var(--ac-danger) 70%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-danger) 18%, transparent) !important; animation: shake 0.4s ease; } #join-code.hj-code-input::placeholder { color: color-mix(in srgb, var(--pink) 18%, transparent); letter-spacing: 4px; font-size: 17px; } #join-code.hj-code-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 12%, transparent), 0 0 24px color-mix(in srgb, var(--pink) 7%, transparent); } /* ── Info banner (Step 2) ── */ #join-game-info.hj-info, #join-game-info-ffa.hj-info { font-family: 'Space Mono', monospace; font-size: 10px; line-height: 1.6; letter-spacing: 0.8px; color: color-mix(in srgb, var(--lav) 78%, transparent); padding: 10px 14px; background: color-mix(in srgb, var(--purple) 7%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent); border-radius: 9px; margin-bottom: 18px; display: block; } /* ── Form fields ── */ .hj-field { margin-bottom: 16px; } .hj-field-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 40%, transparent); margin-bottom: 7px; display: block; } #join-name.hj-input, #join-name-ffa.hj-input, #join-new-team.hj-input { width: 100%; box-sizing: border-box; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent); border-radius: 10px; color: var(--text); font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 600; padding: 11px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; display: block; } #join-name.hj-input:focus, #join-name-ffa.hj-input:focus, #join-new-team.hj-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 11%, transparent); } #join-name.hj-input::placeholder, #join-name-ffa.hj-input::placeholder, #join-new-team.hj-input::placeholder { color: color-mix(in srgb, var(--text-3) 25%, transparent); } /* Team select */ #join-team-select.hj-select { width: 100%; box-sizing: border-box; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent); border-radius: 10px; color: var(--text); font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 600; padding: 11px 14px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23B8A9D6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-color: rgba(22,8,36,0.85); display: block; transition: border-color 0.2s, box-shadow 0.2s; } #join-team-select.hj-select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 11%, transparent); } #join-team-select.hj-select option { background: var(--card); color: var(--text); } /* ── Divider ── */ .hj-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 28%, transparent); } .hj-divider::before, .hj-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--purple) 12%, transparent); } /* ── Buttons ── */ /* ── UNIFIED CTA SYSTEM ────────────────────────────────── One primary + one quiet button for the whole app. .btn-holo — holographic gradient pill (Find Game, Launch, Unlock, Watch Game, Next Question, Close Game, …) .btn-quiet — quiet ghost secondary (Back, Change Code, …) Context overrides (set on any parent): --cta-grad swaps the gradient; --quiet-ac / --quiet-ink / --quiet-hover-ink recolor the quiet button. Modifiers: .btn-wide (block, full width) · .btn-lg (larger pill) */ .btn-holo { display: inline-block; padding: 14px 28px; background: var(--cta-grad, linear-gradient(90deg,var(--pink) 0%,var(--violet) 18%,var(--purple) 36%,var(--blue) 54%,var(--ac-teal) 72%,var(--pink) 90%,var(--pink) 100%)); background-size: 200% 200%; animation: holo-shift 4s ease infinite; border: none; border-radius: 12px; color: var(--cta-ink, #09040F); font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.3px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; } .btn-holo:hover { opacity: 0.88; transform: translateY(-1px); } .btn-holo:active { opacity: 0.95; transform: translateY(0); } .btn-holo:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } .btn-quiet { display: inline-block; padding: 11px 20px; background: transparent; border: 1px solid color-mix(in srgb, var(--quiet-ac, var(--pink)) 16%, transparent); border-radius: 12px; color: color-mix(in srgb, var(--quiet-ink, var(--lav)) 50%, transparent); font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .btn-quiet:hover { border-color: color-mix(in srgb, var(--quiet-ac, var(--pink)) 35%, transparent); color: var(--quiet-hover-ink, var(--pink)); background: color-mix(in srgb, var(--quiet-ac, var(--pink)) 6%, transparent); } .btn-wide { display: block; width: 100%; } .btn-lg { padding: 16px 52px; font-size: 16px; } /* Join-card spacing (was baked into the old hj-btn-* rules) */ .hj-card .btn-holo { margin-top: 6px; } .hj-card .btn-quiet, .hsp-card .btn-quiet { margin-top: 10px; } /* Spectator accent: blue/teal */ .hsp-card { --cta-grad: linear-gradient(90deg,var(--blue) 0%,var(--ac-teal) 50%,var(--blue) 100%); --quiet-ac: var(--blue); --quiet-ink: var(--blue-2); --quiet-hover-ink: var(--blue-2); } /* ── FFA Emoji picker override ── */ #ffa-emoji-picker.hj-emoji-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; } /* Override inline-styled emoji buttons from JS */ #ffa-emoji-picker button { border-radius: 10px !important; transition: transform 0.1s, box-shadow 0.15s !important; } #ffa-emoji-picker button:hover { transform: scale(1.15); } .hj-emoji-preview-row { margin-top: 10px; font-family: 'Quicksand', sans-serif; font-size: 13px; color: color-mix(in srgb, var(--text-3) 50%, transparent); font-weight: 600; } /* ── Animation ── */ @keyframes hj-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════ HS — HOLOGRAPHIC HOST (screen-host-auth + screen-host-setup) Prefix: hs- | "Backstage Pass" vibe ══════════════════════════════════════════════ */ #screen-host-auth.active, #screen-host-setup.active { align-items: stretch; padding: 0; overflow-y: auto; overflow-x: hidden; } .hs-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px,4vw,48px) clamp(20px,5vw,40px); gap: 0; } /* Setup screen needs top-aligned scroll, not centred */ #screen-host-setup .hs-wrap { justify-content: flex-start; padding-top: clamp(20px,3vw,36px); } /* ── Header ── */ .hs-header { text-align: center; margin-bottom: 24px; animation: hs-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; } .hs-eyebrow { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 45%, transparent); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; } .hs-eyebrow::before, .hs-title { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(36px,7vw,52px); line-height: 1; letter-spacing: -0.01em; background: linear-gradient(90deg,var(--pink) 0%,var(--violet) 18%,var(--purple) 36%,var(--blue) 54%,var(--ac-teal) 72%,var(--pink) 90%,var(--pink) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: holo-shift 5s ease infinite; margin-bottom: 10px; } .hs-subtitle { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 40%, transparent); } /* ── Card panel ── */ .hs-card { width: 100%; max-width: 440px; background: linear-gradient(140deg, var(--card) 0%, var(--card) 100%); border-radius: var(--r-card); padding: var(--pad-card); position: relative; animation: hs-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) 0.12s both; } .hs-card.wide { max-width: 580px; } .hs-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: linear-gradient(135deg,color-mix(in srgb, var(--pink) 38%, transparent),color-mix(in srgb, var(--purple) 32%, transparent),color-mix(in srgb, var(--blue) 22%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ── Lock icon (host auth) ── */ .hs-lock-icon { font-size: 44px; text-align: center; margin-bottom: 14px; animation: hs-fade-up 0.4s cubic-bezier(0.16,1,0.3,1) 0.1s both; transition: transform 0.3s; } .hs-lock-icon.shake { animation: hs-shake 0.45s ease; } @keyframes hs-shake { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-8px) rotate(-4deg); } 30% { transform: translateX(8px) rotate(4deg); } 45% { transform: translateX(-6px) rotate(-2deg); } 60% { transform: translateX(6px) rotate(2deg); } 75% { transform: translateX(-2px); } } /* ── Card labels ── */ .hs-card-label { font-family: 'Space Mono', monospace; font-size: var(--fs-micro); /* was 8px — converged to the 9px micro token */ letter-spacing: var(--ls-wide); text-transform: uppercase; color: color-mix(in srgb, var(--pink) 38%, transparent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .hs-card-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,color-mix(in srgb, var(--pink) 20%, transparent),transparent); } /* ── Form fields ── */ .hs-field { margin-bottom: 16px; } .hs-field-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 40%, transparent); margin-bottom: 7px; display: block; } /* Text inputs */ .hs-input { width: 100%; box-sizing: border-box; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent); border-radius: 10px; color: var(--text); font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 600; padding: 11px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; display: block; } .hs-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 11%, transparent); } .hs-input::placeholder { color: color-mix(in srgb, var(--text-3) 25%, transparent); } /* Password input */ #host-pw-input.hs-pw-input { width: 100%; box-sizing: border-box; background: rgba(9,4,15,0.7); border: 1.5px solid color-mix(in srgb, var(--pink) 22%, transparent); border-radius: 12px; color: var(--lav); font-family: 'Space Mono', monospace; font-weight: 700; font-size: 22px; text-align: center; letter-spacing: 6px; padding: 14px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 18px; display: block; } #host-pw-input.hs-pw-input:focus { border-color: var(--lav); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav) 14%, transparent), 0 0 20px color-mix(in srgb, var(--lav) 6%, transparent); } #host-pw-input.hs-pw-input::placeholder { color: color-mix(in srgb, var(--text-3) 22%, transparent); letter-spacing: 3px; font-size: 15px; } /* Select dropdowns */ .hs-select { width: 100%; box-sizing: border-box; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent); border-radius: 10px; color: var(--text); font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 600; padding: 10px 14px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23B8A9D6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-color: rgba(22,8,36,0.85); display: block; transition: border-color 0.2s, box-shadow 0.2s; } .hs-select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 11%, transparent); } .hs-select option { background: var(--card); color: var(--text); } /* Settings grid */ .hs-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; } /* ── Toggle panels (hard mode, game mode) ── */ .hs-toggle-panel { margin-top: 16px; padding: 14px 16px; border-radius: 10px; position: relative; } .hs-toggle-panel.danger { background: color-mix(in srgb, var(--pink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent); } .hs-toggle-panel.mode { background: color-mix(in srgb, var(--purple) 5%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent); } .hs-toggle-title { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .hs-toggle-panel.danger .hs-toggle-title { color: var(--pink); } .hs-toggle-panel.mode .hs-toggle-title { color: var(--lav); } .hs-toggle-desc { font-family: 'Quicksand', sans-serif; font-size: 11px; color: color-mix(in srgb, var(--text-3) 45%, transparent); margin-top: 3px; font-weight: 500; } .hs-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hs-toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--pink); text-transform: uppercase; } .hs-toggle-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--pink); } /* ── Mode buttons (overrides for JS className swaps) ── */ .hs-mode-btns { display: flex; gap: 8px; margin-top: 10px; } #screen-host-setup #mode-btn-teams, #screen-host-setup #mode-btn-ffa { flex: 1 !important; padding: 10px !important; font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.5px !important; border-radius: 10px !important; cursor: pointer !important; transition: all 0.2s !important; } /* Active state (btn-teal set by JS) */ #screen-host-setup .btn.btn-teal.btn-sm { background: linear-gradient(135deg,color-mix(in srgb, var(--purple) 20%, transparent),color-mix(in srgb, var(--pink) 15%, transparent)) !important; border: 1.5px solid color-mix(in srgb, var(--pink) 40%, transparent) !important; color: var(--pink) !important; } /* Inactive state (btn-ghost set by JS) */ #screen-host-setup .btn.btn-ghost.btn-sm { background: transparent !important; border: 1px solid color-mix(in srgb, var(--purple) 15%, transparent) !important; color: color-mix(in srgb, var(--text-3) 45%, transparent) !important; } #screen-host-setup .btn.btn-ghost.btn-sm:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; color: color-mix(in srgb, var(--lav) 65%, transparent) !important; } .hs-mode-desc { font-family: 'Quicksand', sans-serif; font-size: 11px; color: color-mix(in srgb, var(--text-3) 42%, transparent); margin-top: 8px; font-weight: 500; } /* ── Pre-built teams (overrides for JS-generated HTML) ── */ .hs-teams-section { margin-top: 18px; } .hs-teams-section-hdr { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: color-mix(in srgb, var(--lav) 45%, transparent); margin-bottom: 8px; } .hs-teams-section-desc { font-family: 'Quicksand', sans-serif; font-size: 11px; color: color-mix(in srgb, var(--text-3) 38%, transparent); margin-bottom: 12px; font-weight: 500; } /* Override pre-team-row inner styles within host-setup */ #screen-host-setup .pre-team-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } #screen-host-setup .pre-team-row { display: flex; align-items: center; gap: 8px; } #screen-host-setup .pre-team-row input { flex: 1; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--purple) 15%, transparent); border-radius: 8px; color: var(--text); font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 600; padding: 8px 12px; outline: none; transition: border-color 0.2s; } #screen-host-setup .pre-team-row input:focus { border-color: var(--pink); } #screen-host-setup .pre-team-del { background: color-mix(in srgb, var(--pink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent); border-radius: 7px; padding: 6px 10px; color: var(--pink); font-size: 14px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } #screen-host-setup .pre-team-del:hover { background: color-mix(in srgb, var(--pink) 18%, transparent); } /* Add Team button inside setup */ .hs-btn-outline { display: inline-block; padding: 8px 16px; background: transparent; border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); border-radius: 8px; color: color-mix(in srgb, var(--lav) 55%, transparent); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1.5px; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; margin-top: 8px; } .hs-btn-outline:hover { border-color: color-mix(in srgb, var(--pink) 35%, transparent); color: var(--pink); background: color-mix(in srgb, var(--pink) 6%, transparent); } /* ── Buttons ── */ /* hs-btn-primary/-ghost retired → unified .btn-holo/.btn-quiet (see CTA system) */ .hs-btn-row { display: flex; gap: 10px; margin-top: 22px; } /* setup-card-sectioning: numbered scan-stops on the setup card */ .hs-section-lbl{display:flex;align-items:center;gap:12px;margin:22px 0 12px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:color-mix(in srgb, var(--pink) 55%, transparent);} .hs-section-lbl::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb, var(--purple) 24%, transparent),transparent);} /* ── Rejoin Active Game bar (was inline-styled with teal literals) ── */ .hs-rejoin-toggle{display:block;margin:18px auto 0;background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 55%, transparent);transition:color 0.2s;} .hs-rejoin-toggle:hover,.hs-rejoin-toggle.open{color:var(--ac-teal);} .hs-rejoin-bar { display: none; margin-top: 18px; padding: 16px 20px; background: color-mix(in srgb, var(--ac-teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ac-teal) 22%, transparent); border-radius: 12px; flex-direction: column; gap: 10px; } .hs-rejoin-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ac-teal); } .hs-rejoin-note { font-family: 'Quicksand', sans-serif; font-size: 13px; color: color-mix(in srgb, var(--lav) 60%, transparent); } .hs-rejoin-row { display: flex; gap: 8px; align-items: center; } .hs-rejoin-input { flex: 1; background: rgba(0,0,0,0.35); border: 1px solid color-mix(in srgb, var(--ac-teal) 25%, transparent); border-radius: 8px; color: var(--text); font-family: 'Space Mono', monospace; font-size: 16px; letter-spacing: 4px; padding: 10px 14px; text-transform: uppercase; } .hs-rejoin-btn { background: color-mix(in srgb, var(--ac-teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac-teal) 35%, transparent); border-radius: 8px; color: var(--ac-teal); font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 18px; cursor: pointer; transition: background 0.15s; } .hs-rejoin-btn:hover { background: color-mix(in srgb, var(--ac-teal) 22%, transparent); } /* ── Animation ── */ @keyframes hs-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════ HSP — HOLOGRAPHIC SPECTATOR JOIN (screen-spectator-join) Prefix: hsp- | "Press Box" / observer vibe ══════════════════════════════════════════════ */ #screen-spectator-join.active { align-items: stretch; padding: 0; overflow: hidden; } .hsp-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px,4vw,48px) clamp(20px,5vw,40px); } .hsp-header { text-align: center; margin-bottom: 28px; animation: hs-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; } .hsp-eyebrow { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--blue) 50%, transparent); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; } .hsp-eyebrow::before, .hsp-title { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(36px,7vw,52px); line-height: 1; letter-spacing: -0.01em; color: var(--blue-2); margin-bottom: 10px; } .hsp-subtitle { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--blue) 35%, transparent); } /* Card — blue accent */ .hsp-card { width: 100%; max-width: 420px; background: linear-gradient(140deg, var(--card) 0%, var(--card) 100%); border-radius: 18px; padding: 26px 28px 24px; position: relative; animation: hs-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) 0.12s both; } .hsp-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: linear-gradient(135deg,color-mix(in srgb, var(--blue) 38%, transparent),color-mix(in srgb, var(--ac-teal) 28%, transparent),color-mix(in srgb, var(--purple) 20%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hsp-card-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--blue) 40%, transparent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .hsp-card-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,color-mix(in srgb, var(--blue) 25%, transparent),transparent); } /* Code input — blue tint */ #spec-code.hsp-code-input { width: 100%; box-sizing: border-box; background: rgba(9,4,15,0.7); border: 1.5px solid color-mix(in srgb, var(--blue) 25%, transparent); border-radius: 12px; color: var(--blue-2); font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(22px,6vw,32px); text-align: center; letter-spacing: 8px; padding: 14px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 14px; display: block; text-transform: uppercase; } #spec-code.hsp-code-input::placeholder { color: color-mix(in srgb, var(--blue) 18%, transparent); letter-spacing: 4px; font-size: 15px; } #spec-code.hsp-code-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent), 0 0 20px color-mix(in srgb, var(--blue) 7%, transparent); } .hsp-note { font-family: 'Quicksand', sans-serif; font-size: 11px; color: color-mix(in srgb, var(--blue-2) 40%, transparent); text-align: center; margin-bottom: 16px; font-weight: 500; line-height: 1.55; } /* Buttons — blue accent */ /* hsp-btn-primary/-ghost retired → unified .btn-holo/.btn-quiet with .hsp-card accent overrides (--cta-grad blue/teal, --quiet-ac blue — see CTA system) */ /* ═══════════════════════════════════════════════════════ HG — IN-GAME SCREENS (prefix: hg-) Screen: screen-player-game ═══════════════════════════════════════════════════════ */ /* ── Screen-level reset: override .screen.active cascade ── */ #screen-player-game.active { align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; font-family: 'Quicksand', sans-serif !important; /* Holographic Night background */ background: conic-gradient(from 220deg at 8% -5%, transparent 0deg, color-mix(in srgb, var(--pink) 10%, transparent) 30deg, transparent 60deg), conic-gradient(from 145deg at 94% 8%, transparent 0deg, color-mix(in srgb, var(--purple) 9%, transparent) 40deg, transparent 80deg), conic-gradient(from 300deg at 50% 108%, transparent 0deg, color-mix(in srgb, var(--blue) 7%, transparent) 55deg, transparent 110deg), radial-gradient(ellipse 30% 60% at 0% 55%, color-mix(in srgb, var(--violet) 6%, transparent) 0%, transparent 60%), radial-gradient(ellipse 100% 80% at 50% 35%, #14082A 0%, #09040F 100%) !important; color: var(--text) !important; overflow: hidden !important; } /* Dot grid overlay on the screen */ #screen-player-game.active::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--pink) 5%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); } /* ── Top bar ── */ .hg-top-bar { width: 100%; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(9,4,15,0.92); border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); backdrop-filter: blur(12px); position: relative; z-index: 10; box-sizing: border-box; } .hg-tb-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .hg-tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hg-tb-mark { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .hg-tb-sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--pink) 10%, transparent); flex-shrink: 0; } .hg-tb-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 70%, transparent); white-space: nowrap; flex-shrink: 0; } .hg-tb-value { font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; color: var(--lav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .hg-tb-player { color: color-mix(in srgb, var(--lav) 55%, transparent); font-size: 13px; } .hg-tb-pill { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 10px; border-radius: 20px; height: 26px; background: linear-gradient(rgba(9,4,20,0.88), rgba(9,4,20,0.88)) padding-box, linear-gradient(135deg, var(--ac-teal) 0%, var(--purple) 50%, var(--pink) 100%) border-box; border: 1px solid transparent; color: color-mix(in srgb, var(--lav) 75%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.04); display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; } .hg-tb-pill strong { font-family: 'Quicksand', sans-serif; font-size: 11px; font-weight: 700; color: var(--lav); letter-spacing: 0; } .hg-tb-score { background: linear-gradient(rgba(9,4,20,0.88), rgba(9,4,20,0.88)) padding-box, linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%) border-box; border: 1px solid transparent; box-shadow: 0 0 12px color-mix(in srgb, var(--purple) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.04); } .hg-tb-score strong { color: #C084FC; font-size: 12px; } .hg-tb-mute { cursor: pointer; font-size: 13px; padding: 0 10px; background: linear-gradient(rgba(9,4,20,0.88), rgba(9,4,20,0.88)) padding-box, linear-gradient(135deg, var(--ac-teal) 0%, var(--purple) 100%) border-box; border: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; } .hg-tb-mute:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--ac-teal) 25%, transparent); } .hg-tb-btn { font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: 700; height: 26px; padding: 0 14px; border-radius: 8px; cursor: pointer; background: rgba(9,4,20,0.40); border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent); color: color-mix(in srgb, var(--lav) 50%, transparent); display: flex; align-items: center; gap: 6px; transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s; } .hg-tb-btn:hover { border-color: color-mix(in srgb, var(--pink) 50%, transparent); color: var(--pink); background: color-mix(in srgb, var(--pink) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--pink) 15%, transparent); } /* .tb-btn-label and .tb-pill-lbl are hidden on mobile (see media query) */ /* ── Root 2-zone layout ── */ /* z-index:3 lifts the entire content layer above .spec-scanlines (z-index:2), so the rank text gradient is no longer overlaid by the scanline texture. */ .hg-pg-root { flex: 1; display: flex; width: 100%; min-height: 0; overflow: hidden; position: relative; z-index: 3; align-self: stretch; } /* ── Stage (left) ── */ .hg-pg-stage { flex: 1; display: flex; flex-direction: column; padding: clamp(16px, 3.4vh, 40px) clamp(20px, 4vw, 60px) clamp(12px, 2.2vh, 24px); min-width: 0; min-height: 0; overflow: hidden; position: relative; z-index: 1; } /* Broadcast alert */ /* ── Broadcast / reminder banner — floating toast-style pill (host messages + ⏳ auto reminders). A single body-level element (#bc-alert), shown on the player + audience screens. position:fixed so it floats ABOVE all content like the system toast pills — no layout shift, never clipped by a stage's overflow:hidden. Centering stays in BOTH the base and .show transform (like #toast) so the slide-in transition can't snap it sideways the way the old keyframe did. ── */ .bc-pill { position: fixed; top: 78px; left: 50%; z-index: var(--z-pill); transform: translateX(-50%) translateY(-16px); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 11px 24px; background: rgba(28,11,50,0.92); border: 1px solid color-mix(in srgb, var(--purple) 42%, transparent); border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 26px color-mix(in srgb, var(--purple) 30%, transparent); max-width: min(560px, 92vw); text-align: center; opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease; } .bc-pill.show { transform: translateX(-50%) translateY(0); opacity: 1; } .bc-pill-tag { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #C9A8FF; flex-shrink: 0; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 18%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 34%, transparent); } .bc-pill-text { font-family: 'Oxanium', sans-serif; font-size: clamp(15px, 1.5vw, 22px); font-weight: 700; letter-spacing: 0.5px; color: #EBDCFF; } /* Audience screen: centre the body-level pill over the STAGE, not the viewport. The right rail takes clamp(200px,24vw,380px), so plain viewport-centring sits noticeably right of the question. Shift left by half the rail. Only while the rail is beside the stage (≥769px); below that the spectator view stacks and the stage is full width, so viewport-centring is correct. */ @media (min-width: 769px) { body.is-spectator .bc-pill { left: calc(50% - clamp(100px, 12vw, 190px)); } } /* Question zone — z-index:3 keeps it above the fixed scanlines overlay (z-index:2). Horizontal padding gives box-shadow glows room to fade before the overflow clip boundary of .hg-pg-stage (overflow:hidden). Mirrors the 44px padding on spec-q-area. */ .hg-pg-qzone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--purple) 32%, transparent) transparent; position: relative; z-index: 3; padding: clamp(16px, 3.4vh, 40px) 32px clamp(20px, 3vh, 32px); } .hg-pg-qzone::-webkit-scrollbar{width:4px;} .hg-pg-qzone::-webkit-scrollbar-track{background:transparent;} .hg-pg-qzone::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--purple) 32%, transparent);border-radius:999px;} .hg-pg-fit-viewport{ width:100%; min-height:0; display:flex; justify-content:center; align-items:flex-start; overflow:visible; flex-shrink:0; } .hg-pg-fit-content{ width:100%; display:flex; flex-direction:column; align-items:center; transform-origin:center top; will-change:transform; } /* Timer */ .hg-pg-timer-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--lav) 30%, transparent); text-align: center; margin-bottom: 12px; } .hg-pg-timer-num { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(96px, 14vw, 156px); line-height: 1; text-align: center; margin-bottom: clamp(8px, 1.4vh, 14px); background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 25%, var(--purple) 50%, var(--blue) 75%, var(--ac-teal) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: holo-shift 4s ease infinite; } .hg-pg-timer-num.urgent { background: linear-gradient(90deg, var(--pink), var(--pink)) !important; background-size: 200% 200% !important; animation: holo-shift 0.8s ease infinite !important; } /* ── Question content: scoped overrides for JS-generated classes ── */ #screen-player-game .q-num-tag { font-family: 'Space Mono', monospace !important; font-size: 11px !important; letter-spacing: 3px !important; color: color-mix(in srgb, var(--pink) 45%, transparent) !important; background: color-mix(in srgb, var(--pink) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pink) 15%, transparent) !important; border-radius: 20px !important; margin-bottom: clamp(12px,2.6vh,28px) !important; } /* Player pills sit smaller than spec — both num + cat share the same size on this screen */ #screen-player-game .spec-bc-q-header .q-num-tag, #screen-player-game .spec-bc-q-header .spec-bc-q-cat-pill { margin-bottom: 0 !important; padding: 6px 16px !important; font-size: 11px !important; letter-spacing: 3px !important; line-height: 1.2 !important; white-space: nowrap !important; } body.mobile-preview #screen-player-game .spec-bc-q-header .q-num-tag, body.mobile-preview #screen-player-game .spec-bc-q-header .spec-bc-q-cat-pill { margin-bottom: 0 !important; padding: 6px 16px !important; font-size: 11px !important; letter-spacing: 3px !important; line-height: 1.2 !important; white-space: nowrap !important; } #screen-player-game .q-text-big { font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: clamp(20px, min(3.4vw, 5vh), 44px) !important; color: var(--text) !important; text-shadow: none !important; margin-bottom: clamp(14px, 3vh, 32px) !important; line-height: 1.3 !important; -webkit-text-fill-color: var(--text) !important; } /* ── Player / spec waiting state — rotating thinking text + rank ── */ /* No overflow:hidden / fixed height — text rides on top of layout, single-line, never clipped by an "invisible edge". min-height reserves vertical space so the rank below doesn't jump as spans fade in/out. */ .wait-think-wrap { position: relative; width: 100%; max-width: 720px; margin: 0 auto 18px; padding: 0; box-sizing: border-box; min-height: 44px; z-index: 5; } .wait-think-wrap span { position: absolute; left: 0; right: 0; text-align: center; font-family: 'Space Mono', monospace; font-size: 15px; line-height: 1.4; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 38%, transparent); padding: 0 16px; box-sizing: border-box; opacity: 0; transform: translateY(6px); animation: wait-line-cycle 56s ease-in-out infinite; } .wait-think-wrap span:nth-child(2) { animation-delay: 4s; } .wait-think-wrap span:nth-child(3) { animation-delay: 8s; } .wait-think-wrap span:nth-child(4) { animation-delay: 12s; } .wait-think-wrap span:nth-child(5) { animation-delay: 16s; } .wait-think-wrap span:nth-child(6) { animation-delay: 20s; } .wait-think-wrap span:nth-child(7) { animation-delay: 24s; } .wait-think-wrap span:nth-child(8) { animation-delay: 28s; } .wait-think-wrap span:nth-child(9) { animation-delay: 32s; } .wait-think-wrap span:nth-child(10) { animation-delay: 36s; } .wait-think-wrap span:nth-child(11) { animation-delay: 40s; } .wait-think-wrap span:nth-child(12) { animation-delay: 44s; } .wait-think-wrap span:nth-child(13) { animation-delay: 48s; } .wait-think-wrap span:nth-child(14) { animation-delay: 52s; } @keyframes wait-line-cycle { 0%,100% { opacity: 0; transform: translateY(6px); } 1.79% { opacity: 1; transform: translateY(0); } 5.36% { opacity: 1; transform: translateY(0); } 7.14% { opacity: 0; transform: translateY(-6px); } } .wait-rank-section { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; } .wait-rank-pregame-msg { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; padding: 0 16px; max-width: 560px; margin: 4px auto 0; } .wait-rank-title { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(11px, 1.5vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(135deg, var(--ac-gold) 0%, var(--pink) 35%, var(--violet) 55%, var(--purple) 75%, var(--ac-teal) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: holo-shift 5s ease infinite; margin-bottom: 4px; } .wait-rank-pos { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(48px, min(15vw, 16vh), 112px); line-height: 1; background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--ac-teal) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: holo-shift 4s ease infinite; } .wait-rank-pts { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--lav) 50%, transparent); margin-top: 4px; } .wait-rank-team { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; color: color-mix(in srgb, var(--lav) 32%, transparent); letter-spacing: 0.2px; } .wait-tied-badge { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; background: color-mix(in srgb, var(--ac-gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ac-gold) 28%, transparent); color: color-mix(in srgb, var(--ac-gold) 65%, transparent); border-radius: 4px; padding: 1px 7px; margin-left: 10px; vertical-align: middle; -webkit-text-fill-color: initial; background-clip: initial; -webkit-background-clip: initial; } .wait-rank-others { width: 100%; max-width: 320px; margin-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--lav) 7%, transparent); padding-top: 10px; max-height: 120px; overflow-y: auto; overscroll-behavior: contain; } .wait-rank-others::-webkit-scrollbar{width:5px;} .wait-rank-others::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--purple) 32%, transparent);border-radius:999px;} .wait-rank-other-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .wait-rank-other-pos { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; color: color-mix(in srgb, var(--lav) 22%, transparent); min-width: 32px; text-align: right; } .wait-rank-other-pts { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px; color: color-mix(in srgb, var(--lav) 20%, transparent); min-width: 50px; text-align: right; } .wait-rank-other-name { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 12px; color: color-mix(in srgb, var(--lav) 38%, transparent); flex: 1; text-align: left; } /* Hide the old broadcast-alert if JS ever creates it */ #screen-player-game .broadcast-alert { display: none !important; } /* Rename footer */ /* rename-into-controls: the rename block now lives inside the Controls drawer */ #screen-player-game .rename-footer { flex-shrink: 0; margin: 0; display: flex !important; flex-direction: column; align-items: stretch; position: static !important; transform: none !important; width: auto !important; padding: 0 !important; bottom: auto !important; left: auto !important; } #screen-player-game .rename-expand { padding: 12px; } .hg-pg-rename-btn { font-family: 'Quicksand', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; text-transform: none !important; padding: 6px 16px !important; border-radius: 8px !important; background: transparent !important; border: 1px solid color-mix(in srgb, var(--pink) 10%, transparent) !important; color: color-mix(in srgb, var(--lav) 28%, transparent) !important; cursor: pointer !important; transition: border-color 0.2s, color 0.2s !important; } .hg-pg-rename-btn:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; color: var(--pink) !important; } #screen-player-game .rename-expand { background: linear-gradient(140deg, var(--card) 0%, var(--card) 100%) !important; border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent) !important; border-radius: 10px !important; width: 100%; max-width: 360px; margin-top: 8px; } #screen-player-game .rename-expand input { background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent) !important; border-radius: 8px !important; color: var(--text) !important; font-family: 'Quicksand', sans-serif !important; width: auto !important; flex: 1 !important; } #screen-player-game .rename-expand input:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent) !important; } /* ── Right panel ── */ .hg-pg-panel { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid color-mix(in srgb, var(--pink) 7%, transparent); background: rgba(13,6,22,0.7); overflow: hidden; height: 100%; } /* Standings */ .hg-pg-standings { flex-shrink: 0; padding: 20px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 7%, transparent); max-height: 44%; overflow-y: auto; } .hg-pg-panel-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 35%, transparent); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .hg-pg-panel-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 12%, transparent), transparent); } #screen-player-game .lb-rail-row { display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 10px !important; border-radius: 8px !important; margin-bottom: 4px !important; background: transparent !important; border: none !important; transition: background 0.2s !important; } #screen-player-game .lb-rail-row:hover { background: color-mix(in srgb, var(--pink) 4%, transparent) !important; } #screen-player-game .lb-rail-row.mine { background: color-mix(in srgb, var(--purple) 10%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent) !important; } #screen-player-game .lb-rail-pos { font-family: 'Space Mono', monospace !important; font-size: 9px !important; font-weight: 700 !important; color: color-mix(in srgb, var(--lav) 35%, transparent) !important; width: 16px !important; text-align: center !important; flex-shrink: 0 !important; font-size: 14px !important; letter-spacing: 0 !important; } #screen-player-game .lb-rail-row.p1 .lb-rail-pos { color: #F5C542 !important; } #screen-player-game .lb-rail-row.p2 .lb-rail-pos { color: color-mix(in srgb, var(--lav) 60%, transparent) !important; } #screen-player-game .lb-rail-row.p3 .lb-rail-pos { color: #FF8C42 !important; } #screen-player-game .lb-rail-name { flex: 1 !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--text) 75%, transparent) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #screen-player-game .lb-rail-row.mine .lb-rail-name { color: var(--lav) !important; } #screen-player-game .lb-rail-pts { font-family: 'Space Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; color: color-mix(in srgb, var(--lav) 45%, transparent) !important; letter-spacing: 0 !important; } #screen-player-game .lb-rail-row.mine .lb-rail-pts { color: var(--purple) !important; } /* Chat panel */ .hg-pg-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 16px 12px; min-height: 0; } .hg-pg-chat-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-shrink: 0; } .hg-pg-tab { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--pink) 12%, transparent); background: transparent; color: color-mix(in srgb, var(--lav) 38%, transparent); transition: all 0.2s; } .hg-pg-tab.active-team, .hg-pg-tab.active-everyone { background: color-mix(in srgb, var(--pink) 10%, transparent); border-color: color-mix(in srgb, var(--pink) 30%, transparent); color: var(--pink); } .hg-pg-chat-msgs { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } #screen-player-game .cm-text { font-family: 'Quicksand', sans-serif !important; color: color-mix(in srgb, var(--lav) 70%, transparent) !important; } #screen-player-game .cm-text.sys { font-family: 'Space Mono', monospace !important; font-size: 9px !important; color: color-mix(in srgb, var(--text-3) 80%, transparent) !important; text-align: center !important; font-style: italic !important; } .hg-pg-chat-input-row { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } #screen-player-game #p-chat-input { flex: 1 !important; width: auto !important; min-width: 0 !important; background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; border-radius: 8px !important; color: var(--text) !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 13px !important; outline: none !important; } #screen-player-game #p-chat-input:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent) !important; } #screen-player-game #p-chat-input::placeholder { color: color-mix(in srgb, var(--text-3) 22%, transparent) !important; } #screen-player-game .chat-send { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 18%, transparent), color-mix(in srgb, var(--purple) 18%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent) !important; border-radius: 8px !important; color: var(--pink) !important; cursor: pointer !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #screen-player-game .chat-send:hover { background: color-mix(in srgb, var(--pink) 28%, transparent) !important; } #screen-player-game .chat-extras-toggle { color: color-mix(in srgb, var(--text-3) 70%, transparent) !important; font-size: 14px !important; flex-shrink: 0 !important; } #screen-player-game .chat-extras-toggle:hover { color: var(--pink) !important; } /* Hard mode overrides for hg- in-game elements */ body.hard-mode .hg-top-bar { background: linear-gradient(90deg, #180008, #200010); border-bottom-color: rgba(255,0,0,0.25); } body.hard-mode .hg-pg-timer-num { font-family: 'Creepster', cursive !important; -webkit-text-fill-color: var(--hm-red) !important; background: none !important; color: var(--hm-red) !important; text-shadow: 0 0 20px rgba(255,0,0,0.6), 0 0 40px rgba(255,0,0,0.3) !important; animation: hm-pulse 1s infinite !important; } body.hard-mode .hg-pg-panel { background: #100008; border-left-color: rgba(255,0,0,0.12); } body.hard-mode .hg-pg-standings { border-bottom-color: rgba(255,0,0,0.10); } body.hard-mode .bc-pill { background: rgba(40,6,12,0.92); border-color: rgba(255,0,0,0.34); } /* ══════════════════════════════════════════════════════ PLAYER BROADCAST SKIN (overrides scoped to #screen-player-game) ══════════════════════════════════════════════════════ */ #screen-player-game.active{background:var(--stage-1)!important;} #screen-player-game.active::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 45% at 50% 0%,color-mix(in srgb, var(--ac-gold) 10%, transparent) 0%,transparent 55%),radial-gradient(ellipse 55% 70% at 8% 75%,color-mix(in srgb, var(--pink) 8%, transparent) 0%,transparent 55%),radial-gradient(ellipse 50% 65% at 95% 25%,color-mix(in srgb, var(--purple) 8%, transparent) 0%,transparent 55%),radial-gradient(ellipse 60% 40% at 50% 110%,color-mix(in srgb, var(--ac-teal) 5%, transparent) 0%,transparent 55%);} #screen-player-game.active::after{mask-image:none!important;-webkit-mask-image:none!important;background-image:radial-gradient(circle,color-mix(in srgb, var(--pink) 8%, transparent) 1px,transparent 1px)!important;background-size:52px 52px!important;} /* Top bar */ #screen-player-game .hg-top-bar{height:56px!important;background:linear-gradient(90deg,color-mix(in srgb, var(--rail-2) 96%, transparent),color-mix(in srgb, var(--topbar-2) 94%, transparent),color-mix(in srgb, var(--rail-2) 96%, transparent))!important;border-bottom:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;} #screen-player-game .hg-tb-mark{background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} #screen-player-game .hg-tb-pill{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 22%, transparent)!important;} #screen-player-game .hg-tb-score{background:color-mix(in srgb, var(--ac-gold) 8%, transparent)!important;border-color:color-mix(in srgb, var(--ac-gold) 25%, transparent)!important;color:color-mix(in srgb, var(--ac-gold) 90%, transparent)!important;} /* Hot Streak — fires at 3+ consecutive correct answers */ #ptb-score-badge.hot-streak { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 18%, transparent), rgba(255,180,80,0.18)) !important; border-color: rgba(255,180,80,0.55) !important; color: #FFE0B0 !important; box-shadow: 0 0 18px rgba(255,180,80,0.45), 0 0 36px color-mix(in srgb, var(--pink) 25%, transparent) !important; animation: hot-streak-pulse 1.6s ease-in-out infinite; } #ptb-score-badge.hot-streak::before { content: '🔥'; margin-right: 4px; filter: drop-shadow(0 0 6px rgba(255,180,80,0.85)); } @keyframes hot-streak-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(255,180,80,0.45), 0 0 36px color-mix(in srgb, var(--pink) 25%, transparent); } 50% { box-shadow: 0 0 24px rgba(255,180,80,0.65), 0 0 48px color-mix(in srgb, var(--pink) 40%, transparent); } } /* Hard Mode variant: red flame */ body.hard-mode #ptb-score-badge.hot-streak { background: linear-gradient(90deg, rgba(255,40,40,0.20), rgba(255,80,0,0.20)) !important; border-color: rgba(255,80,40,0.65) !important; color: #FFD0A0 !important; box-shadow: 0 0 18px rgba(255,80,40,0.55), 0 0 36px rgba(192,40,80,0.30) !important; font-family: 'Creepster', cursive; } #screen-player-game .hg-tb-btn{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;color:color-mix(in srgb, var(--lav) 70%, transparent)!important;font-family:'Space Mono',monospace!important;font-size:9px!important;letter-spacing:2px!important;} #screen-player-game .hg-tb-btn:hover{background:color-mix(in srgb, var(--pink) 16%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 45%, transparent)!important;color:var(--pink)!important;} /* Player desktop sizing trims — shift content up + smaller % numbers */ #screen-player-game .hg-pg-qzone{padding-top:clamp(8px,1.4vh,18px)!important;} #screen-player-game .q-text-big{margin-bottom:14px!important;} /* widen-question-stage: desktop players stop getting a 560px phone column — the question and the 2×2 tiles scale to the stage (!important beats the inline max-width:600px the renderer emits) */ @media(min-width:900px){ #screen-player-game .spec-mc-grid{max-width:min(1040px,90%)!important;} #screen-player-game .q-text-big{font-size:clamp(24px,min(3.6vw,6vh),52px)!important;max-width:1000px!important;} } #screen-player-game .spec-mc-pct{font-size:clamp(15px,min(1.7vw,2.4vh),20px)!important;} /* Player interactive spec-mc buttons — constellation hover + selected ring */ #screen-player-game .spec-mc-grid{max-width:560px;} #screen-player-game .pmc-live{cursor:pointer;} /* Constellation hover: hovered button lifts, non-hovered siblings dim */ /* Hover-driven sibling shrink — only on real-hover devices. On touch screens this rule would briefly fire on tap and visibly squash the 3 non-selected cards. */ @media (hover: hover) and (pointer: fine) { #screen-player-game .spec-mc-grid:has(.pmc-live:hover) .pmc-live:hover{transform:translateY(-6px) scale(1.028);filter:saturate(1.18) brightness(1.08);box-shadow:0 26px 54px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)!important;} #screen-player-game .spec-mc-grid:has(.pmc-live:hover) .pmc-live:not(:hover){transform:scale(.965) translateY(4px);opacity:.62;filter:saturate(.82) brightness(.82) blur(.2px);box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)!important;} #screen-player-game .spec-mc-grid:has(.pmc-live:hover) .pmc-live:hover .spec-mc-inner::after{top:14px;bottom:14px;} } #screen-player-game .pmc-live:active{transform:translateY(0) scale(1)!important;opacity:1!important;filter:none!important;} /* Selected: lifted + white ring + pop */ #screen-player-game .pmc-selected{animation:pmc-select-pop 0.35s cubic-bezier(0.34,1.56,0.64,1);transform:translateY(-3px) scale(1.012)!important;filter:saturate(1.12) brightness(1.05)!important;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 32px rgba(255,255,255,.35),0 20px 42px rgba(0,0,0,.32)!important;} @keyframes pmc-select-pop{0%{transform:scale(1) translateY(0);}50%{transform:scale(1.022) translateY(-2px);}100%{transform:scale(1.012) translateY(-3px);}} body.hard-mode #screen-player-game .pmc-selected{box-shadow:0 0 0 3px rgba(255,180,200,.85),0 0 32px rgba(255,90,130,.45),0 20px 42px rgba(0,0,0,.32)!important;} /* Reveal shift fix: pct floats absolutely in the grid corner; text no longer needs right reservation */ #screen-player-game .spec-mc-text{padding-right:6px;} /* Result pill flows below MC grid; min-height locks the box so wrapping content never grows it past the placeholder. (max-width 420→640: the band now carries the timer + question meta at all widths) */ #screen-player-game #pmc-result-pill{margin-top:clamp(2px,0.6vh,6px);width:calc(100% - 64px);max-width:640px;align-self:center;} /* Free-text input — broadcast glass style */ #screen-player-game .ft-area{background:rgba(14,6,26,0.85)!important;border:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;border-radius:14px!important;padding:20px 24px!important;max-width:560px!important;} #screen-player-game .ft-input{background:rgba(22,11,40,0.80)!important;border:2px solid color-mix(in srgb, var(--pink) 25%, transparent)!important;color:var(--text)!important;font-family:'Oxanium',sans-serif!important;border-radius:12px!important;} #screen-player-game .ft-input:focus{border-color:color-mix(in srgb, var(--pink) 55%, transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-player-game .ft-attempt-counter{color:color-mix(in srgb, var(--pink) 65%, transparent)!important;} #screen-player-game .ft-attempt.locked-in{background:color-mix(in srgb, var(--pink) 5%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 18%, transparent)!important;color:color-mix(in srgb, var(--lav) 50%, transparent)!important;} #screen-player-game .ft-attempt.wrong{background:rgba(239,68,68,0.08)!important;border-color:rgba(239,68,68,0.28)!important;color:#FCA5A5!important;} /* Right panel */ #screen-player-game .hg-pg-panel{background:linear-gradient(180deg,color-mix(in srgb, var(--rail-1) 88%, transparent),color-mix(in srgb, var(--rail-2) 92%, transparent))!important;border-left:1px solid color-mix(in srgb, var(--pink) 16%, transparent)!important;box-shadow:inset 1px 0 0 color-mix(in srgb, var(--purple) 10%, transparent)!important;} #screen-player-game .hg-pg-standings{border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-player-game .hg-pg-panel-label{font-family:'Space Mono',monospace!important;font-size:11px!important;letter-spacing:4px!important;background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;} /* Leaderboard rail */ #screen-player-game .lb-rail-row{background:color-mix(in srgb, var(--rail-1) 55%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;border-left:3px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;border-radius:8px!important;} #screen-player-game .lb-rail-row.mine{background:color-mix(in srgb, var(--pink) 10%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 28%, transparent)!important;} #screen-player-game .lb-rail-pos{font-family:'Bebas Neue',cursive,sans-serif!important;font-size:22px!important;color:color-mix(in srgb, var(--lav) 50%, transparent)!important;} #screen-player-game .lb-rail-row.p1{border-left:3px solid var(--ac-gold)!important;} #screen-player-game .lb-rail-row.p2{border-left:3px solid var(--rank-silver)!important;} #screen-player-game .lb-rail-row.p3{border-left:3px solid var(--rank-bronze)!important;} #screen-player-game .lb-rail-row.p1 .lb-rail-pos{color:var(--ac-gold)!important;text-shadow:0 0 10px color-mix(in srgb, var(--ac-gold) 50%, transparent)!important;} #screen-player-game .lb-rail-row.p2 .lb-rail-pos{color:var(--rank-silver)!important;} #screen-player-game .lb-rail-row.p3 .lb-rail-pos{color:var(--rank-bronze)!important;} #screen-player-game .lb-rail-name{font-family:'Oxanium',sans-serif!important;font-weight:700!important;color:rgba(230,205,255,0.88)!important;font-size:14px!important;} #screen-player-game .lb-rail-pts{font-family:'Oxanium',sans-serif!important;font-weight:800!important;color:color-mix(in srgb, var(--ac-gold) 90%, transparent)!important;} /* Chat */ #screen-player-game .hg-pg-tab{background:color-mix(in srgb, var(--pink) 6%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 15%, transparent)!important;color:color-mix(in srgb, var(--lav) 65%, transparent)!important;font-size:10px!important;} #screen-player-game .hg-pg-tab.active-team,#screen-player-game .hg-pg-tab.active-everyone{background:color-mix(in srgb, var(--pink) 16%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 38%, transparent)!important;color:var(--pink)!important;} #screen-player-game #p-chat-input{background:rgba(22,11,40,0.80)!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;color:var(--text)!important;} #screen-player-game .chat-send{background:color-mix(in srgb, var(--pink) 12%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 25%, transparent)!important;color:var(--pink)!important;} /* Mobile tabs */ .mob-tabs{background:linear-gradient(90deg,color-mix(in srgb, var(--rail-2) 96%, transparent),color-mix(in srgb, var(--topbar-2) 94%, transparent))!important;border-bottom:1px solid color-mix(in srgb, var(--pink) 18%, transparent)!important;} .mob-tab{background:transparent!important;color:color-mix(in srgb, var(--lav) 55%, transparent)!important;border:none!important;font-family:'Space Mono',monospace!important;font-size:10px!important;letter-spacing:2px!important;} .mob-tab.active{color:var(--pink)!important;box-shadow:inset 0 -2px 0 var(--pink)!important;} /* Mobile chat bubble */ .mob-chat-bubble{background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue))!important;box-shadow:0 4px 20px color-mix(in srgb, var(--pink) 35%, transparent)!important;} /* Mobile chat overlay */ .mob-chat-overlay{background:linear-gradient(180deg,color-mix(in srgb, var(--rail-2) 97%, transparent),rgba(10,4,20,0.99))!important;border-top:1px solid color-mix(in srgb, var(--pink) 28%, transparent)!important;} .mob-chat-header{border-bottom:1px solid color-mix(in srgb, var(--pink) 14%, transparent)!important;} .mob-chat-title{font-family:'Space Mono',monospace!important;font-size:10px!important;letter-spacing:3px!important;color:color-mix(in srgb, var(--lav) 80%, transparent)!important;} .mob-chat-close{color:color-mix(in srgb, var(--lav) 60%, transparent)!important;background:transparent!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;border-radius:6px!important;} #mob-chat-input{background:rgba(22,11,40,0.80)!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;color:var(--text)!important;} /* ═══════════════════════════════════════════════════════ HG — RULES MODAL (scoped to #rules-overlay) ═══════════════════════════════════════════════════════ */ #rules-overlay { background: rgba(9,4,15,0.92) !important; backdrop-filter: blur(16px) !important; } #rules-overlay .rules-modal { background: linear-gradient(140deg, var(--card) 0%, var(--card) 100%) !important; border: none !important; border-radius: 20px !important; box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 60px color-mix(in srgb, var(--pink) 6%, transparent) !important; position: relative; overflow: hidden !important; } /* Holo top-edge line */ #rules-overlay .rules-modal::before { content: '' !important; position: absolute !important; top: 0; left: 0; right: 0; height: 2px !important; background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 18%, var(--purple) 36%, var(--blue) 54%, var(--ac-teal) 72%, var(--pink) 90%, var(--pink) 100%) !important; background-size: 200% 200% !important; animation: holo-shift 4s ease infinite !important; border-radius: 20px 20px 0 0 !important; } /* Gradient border wrapper trick */ #rules-overlay .rules-modal::after { content: '' !important; position: absolute !important; inset: 0; border-radius: 20px !important; padding: 1.5px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 22%, transparent), color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blue) 14%, transparent)) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; } #rules-overlay .rules-modal-header { border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent) !important; padding: 28px 32px 18px !important; } #rules-overlay .rules-modal-title { font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; font-size: clamp(28px, 4vw, 38px) !important; background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 25%, var(--purple) 50%, var(--blue) 75%, var(--ac-teal) 100%) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: holo-shift 5s ease infinite !important; margin-bottom: 6px !important; } #rules-overlay .rules-modal-sub { font-family: 'Space Mono', monospace !important; font-size: 9px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--lav) 35%, transparent) !important; font-style: normal !important; } #rules-overlay .rules-modal-body { padding: 20px 32px 12px !important; } /* Rules sections and list items (JS populated) */ #rules-overlay .rules-section-title { font-family: 'Space Mono', monospace !important; font-size: 8px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 45%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--pink) 10%, transparent) !important; padding-bottom: 8px !important; margin-bottom: 12px !important; } #rules-overlay .rules-list li { font-family: 'Quicksand', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: color-mix(in srgb, var(--text) 82%, transparent) !important; line-height: 1.8 !important; } #rules-overlay .rules-list li::before { color: color-mix(in srgb, var(--pink) 40%, transparent) !important; } #rules-overlay .rules-hm-block { background: rgba(255,0,0,0.06) !important; border-color: rgba(255,0,0,0.22) !important; } #rules-overlay .rules-hm-title { font-family: 'Creepster', cursive !important; color: #FF4040 !important; } #rules-overlay .rules-modal-footer { border-top: 1px solid color-mix(in srgb, var(--pink) 8%, transparent) !important; padding: 16px 32px 24px !important; } #rules-overlay .rules-dont-show { font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--lav) 40%, transparent) !important; } #rules-overlay .rules-dont-show input { width: auto !important; accent-color: var(--pink) !important; } /* Override the Let's Play button */ #rules-overlay .btn.btn-gold { background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 18%, var(--purple) 36%, var(--blue) 54%, var(--ac-teal) 72%, var(--pink) 90%, var(--pink) 100%) !important; background-size: 200% 200% !important; animation: holo-shift 4s ease infinite !important; color: #09040F !important; font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; letter-spacing: 0.5px !important; border-radius: 12px !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--pink) 25%, transparent) !important; border: none !important; } #rules-overlay .btn.btn-gold:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; box-shadow: 0 8px 36px color-mix(in srgb, var(--pink) 38%, transparent) !important; } /* Hard mode rules override preserved */ body.hard-mode #rules-overlay .rules-modal { background: linear-gradient(160deg, #180008, #1A0010) !important; border-color: rgba(255,0,0,0.25) !important; } body.hard-mode #rules-overlay .rules-modal::before { background: linear-gradient(90deg, #880000, #FF2020, #880000) !important; animation: none !important; } body.hard-mode #rules-overlay .rules-modal-title { background: linear-gradient(135deg, #FF4040, #CC0000) !important; -webkit-background-clip: text !important; background-clip: text !important; animation: none !important; } body.hard-mode #rules-overlay .btn.btn-gold { background: linear-gradient(135deg, #880000, #CC0000, #FF4040) !important; color: #fff !important; animation: none !important; } /* ══ BUG FIX: JS overwrites className on timer — anchor styles to IDs ══ */ body.hard-mode #p-timer-num { font-family: 'Creepster', cursive !important; font-size: 90px !important; background-image: linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--hm-red) !important; text-shadow: none !important; animation: holo-shift 6s linear infinite !important; } body.hard-mode #p-timer-fill { background: linear-gradient(90deg, #880000, #FF2020) !important; } /* ═══════════════════════════════════════════════════════ HG — SPECTATOR GAME SCREEN (hg-spec-*) ═══════════════════════════════════════════════════════ */ /* Screen-level reset */ #screen-spectator-game.active { display: flex !important; flex-direction: column; background: conic-gradient(from 220deg at 8% -5%, transparent 0deg, color-mix(in srgb, var(--blue) 18%, transparent) 34deg, transparent 68deg), conic-gradient(from 145deg at 94% 8%, transparent 0deg, color-mix(in srgb, var(--ac-teal) 10%, transparent) 42deg, transparent 84deg), conic-gradient(from 300deg at 50% 108%, transparent 0deg, color-mix(in srgb, var(--blue-2) 11%, transparent) 55deg, transparent 110deg), radial-gradient(ellipse 32% 60% at 0% 55%, rgba(56,104,214,0.08) 0%, transparent 60%), radial-gradient(ellipse 100% 80% at 50% 35%, #0D1730 0%, #070D1E 100%); font-family: 'Quicksand', sans-serif; overflow: hidden; position: relative; } #screen-spectator-game.active::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--pink) 5%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); } /* ID-anchored timer (JS-safe) */ /* Spectator waiting state */ #screen-spectator-game .spec-waiting { text-align: center; } #screen-spectator-game .spec-waiting-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.5; } #screen-spectator-game .spec-waiting-text { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; color: var(--dim); } /* Spectator question area */ #screen-spectator-game .q-text-big { font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: clamp(22px, 3vw, 32px) !important; color: var(--cream) !important; line-height: 1.4 !important; text-align: center; margin-bottom: 20px; } /* Spectator leaderboard rows (override old styles) */ #screen-spectator-game .lb-rail-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 7px 10px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--blue) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--blue) 8%, transparent) !important; margin-bottom: 4px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; } #screen-spectator-game .lb-rail-rank { font-family: 'Space Mono', monospace !important; font-size: 10px !important; color: color-mix(in srgb, var(--blue) 50%, transparent) !important; width: 18px !important; text-align: center !important; flex-shrink: 0 !important; } #screen-spectator-game .lb-rail-name { flex: 1 !important; color: var(--cream) !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #screen-spectator-game .lb-rail-pts { font-family: 'Space Mono', monospace !important; font-size: 11px !important; color: rgba(133,170,255,0.55) !important; flex-shrink: 0 !important; letter-spacing: 0 !important; } #screen-spectator-game .spec-chat-msgs, #screen-spectator-game #spec-chat-msgs { flex: 1 !important; overflow-y: auto !important; padding: 0 16px 10px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: color-mix(in srgb, var(--text) 74%, transparent) !important; } /* Spectator question overrides — full versions are in the hg-ring block near end of styles */ /* Spectator hard mode overrides */ body.hard-mode #screen-spectator-game.active { background: #0A0004; } body.hard-mode #sp-timer-num { font-family: 'Creepster', cursive !important; color: var(--hm-red) !important; text-shadow: none !important; } /* ══════════════════════════════════════════════════════ SPECTATOR BROADCAST SKIN (spec-bc-*) Full cinematic redesign, scoped to #screen-spectator-game ══════════════════════════════════════════════════════ */ #screen-spectator-game.active{background:var(--stage-1);display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;overflow:hidden;position:relative;} #screen-spectator-game.active::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 45% at 50% 0%,color-mix(in srgb, var(--ac-gold) 13%, transparent) 0%,transparent 55%),radial-gradient(ellipse 55% 70% at 8% 75%,color-mix(in srgb, var(--pink) 10%, transparent) 0%,transparent 55%),radial-gradient(ellipse 50% 65% at 95% 25%,color-mix(in srgb, var(--purple) 10%, transparent) 0%,transparent 55%),radial-gradient(ellipse 60% 40% at 50% 110%,color-mix(in srgb, var(--ac-teal) 6%, transparent) 0%,transparent 55%),conic-gradient(from 0deg at 50% -8%,color-mix(in srgb, var(--pink) 6%, transparent) 0deg,transparent 45deg,color-mix(in srgb, var(--ac-gold) 7%, transparent) 80deg,transparent 130deg,color-mix(in srgb, var(--purple) 5%, transparent) 195deg,transparent 255deg,color-mix(in srgb, var(--ac-teal) 4%, transparent) 310deg,transparent 360deg);} #screen-spectator-game.active::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;mask-image:none;-webkit-mask-image:none;background-image:radial-gradient(circle,color-mix(in srgb, var(--pink) 8%, transparent) 1px,transparent 1px);background-size:52px 52px;animation:spec-grid-drift 30s linear infinite;} @keyframes spec-grid-drift{from{background-position:0 0;}to{background-position:52px 52px;}} .spec-sparkles{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle 2px at 11% 16%,color-mix(in srgb, var(--pink) 90%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 87% 11%,color-mix(in srgb, var(--lav) 80%, transparent) 0%,transparent 100%),radial-gradient(circle 2.5px at 4% 54%,color-mix(in srgb, var(--ac-teal) 75%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 95% 63%,color-mix(in srgb, var(--pink) 65%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 50% 7%,color-mix(in srgb, var(--ac-gold) 90%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 29% 91%,color-mix(in srgb, var(--blue-2) 70%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 73% 87%,color-mix(in srgb, var(--lav) 60%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 17% 41%,color-mix(in srgb, var(--ac-teal) 60%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 81% 37%,color-mix(in srgb, var(--ac-gold) 75%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 62% 71%,color-mix(in srgb, var(--pink) 55%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 39% 27%,color-mix(in srgb, var(--blue-2) 65%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 91% 47%,color-mix(in srgb, var(--pink) 50%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 24% 74%,color-mix(in srgb, var(--ac-gold) 55%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 59% 14%,color-mix(in srgb, var(--lav) 70%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 7% 82%,color-mix(in srgb, var(--ac-teal) 55%, transparent) 0%,transparent 100%),radial-gradient(circle 2px at 45% 95%,color-mix(in srgb, var(--pink) 50%, transparent) 0%,transparent 100%),radial-gradient(circle 1.5px at 68% 48%,color-mix(in srgb, var(--ac-gold) 60%, transparent) 0%,transparent 100%);animation:spec-sparkle-pulse 5s ease-in-out infinite;} @keyframes spec-sparkle-pulse{0%,100%{opacity:0.30;}25%{opacity:0.85;}55%{opacity:0.45;}75%{opacity:0.95;}} /* projector-contrast-pass: softened so projector light loss doesn't wash out edges (was 0.06 / 0.55) */ .spec-scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent,transparent 3px,rgba(0,0,0,0.035) 3px,rgba(0,0,0,0.035) 4px);} .spec-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 120% 120% at 50% 50%,transparent 52%,rgba(0,0,0,0.34) 100%);} /* standby-top3-recap: mid-game standby shows the race */ .spec-standby-top3{display:flex;gap:18px;justify-content:center;margin:8px 0 2px;flex-wrap:wrap;} .spec-standby-top3-card{min-width:150px;padding:14px 20px;border-radius:14px;background:var(--row-bg);border:1px solid rgba(255,255,255,0.07);text-align:center;} .spec-standby-top3-card.r1{background:linear-gradient(135deg,color-mix(in srgb, var(--ac-gold) 12%, transparent),transparent);border-color:color-mix(in srgb, var(--ac-gold) 30%, transparent);box-shadow:0 0 24px color-mix(in srgb, var(--ac-gold) 8%, transparent);} .sst-pos{font-size:22px;line-height:1;} .sst-name{font-family:'Oxanium',sans-serif;font-weight:700;font-size:18px;color:var(--text);margin-top:6px;} .sst-pts{font-family:'Space Mono',monospace;font-size:13px;color:color-mix(in srgb, var(--lav) 70%, transparent);margin-top:3px;} /* reveal-verdict-banner: stage-wide success glow (was display:none'd) + answer-in-words banner */ #spec-score-flash{position:fixed;inset:0;z-index:var(--z-deco);pointer-events:none;opacity:0;background:radial-gradient(ellipse 72% 60% at 50% 44%, color-mix(in srgb, var(--ac-success) 15%, transparent), transparent 72%);transition:opacity 0.35s ease;} #spec-score-flash.show{opacity:1;} /* Controls menu slide-in */ .spec-bc-menu{position:fixed;top:0;right:0;width:300px;height:100%;background:linear-gradient(180deg,color-mix(in srgb, var(--rail-2) 98%, transparent),rgba(10,4,20,0.99));border-left:1px solid color-mix(in srgb, var(--pink) 28%, transparent);z-index:var(--z-drawer);transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;padding:28px 24px;box-shadow:-8px 0 40px rgba(0,0,0,0.6);overflow-y:auto;} /* the drawer is a flex column: when content overflows, flex-shrink was CRUSHING height-flexible children (the timer-preset row collapsed to its 8px padding) — children keep their natural height, the drawer itself scrolls */ .spec-bc-menu > *{flex-shrink:0;} .spec-bc-menu.open{transform:translateX(0);} .spec-bc-menu-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;} .spec-bc-menu-title{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:5px;text-transform:uppercase;background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .spec-bc-menu-close{background:transparent;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent);border-radius:6px;color:color-mix(in srgb, var(--lav) 60%, transparent);font-size:14px;cursor:pointer;padding:5px 9px;line-height:1;transition:all 0.2s;} .spec-bc-menu-close:hover{border-color:color-mix(in srgb, var(--pink) 50%, transparent);color:var(--pink);} .spec-bc-menu-code-box{background:color-mix(in srgb, var(--pink) 6%, transparent);border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);border-radius:12px;padding:18px 20px;margin-bottom:22px;text-align:center;} .spec-bc-menu-code-lbl{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:4px;text-transform:uppercase;color:color-mix(in srgb, var(--blue-2) 60%, transparent);margin-bottom:10px;} .spec-bc-menu-code-val{font-family:'Bebas Neue',cursive,sans-serif;font-size:44px;letter-spacing:10px;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;} .spec-bc-menu-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:color-mix(in srgb, var(--pink) 5%, transparent);border:1px solid color-mix(in srgb, var(--pink) 12%, transparent);border-radius:10px;color:color-mix(in srgb, var(--lav) 80%, transparent);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;cursor:pointer;transition:all 0.2s;width:100%;margin-bottom:10px;text-align:left;} .spec-bc-menu-row:hover{background:color-mix(in srgb, var(--pink) 12%, transparent);border-color:color-mix(in srgb, var(--pink) 38%, transparent);color:var(--pink);} .spec-bc-menu-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;} .spec-bc-menu-vol-row{display:flex;align-items:center;gap:14px;padding:10px 16px;background:color-mix(in srgb, var(--pink) 4%, transparent);border:1px solid color-mix(in srgb, var(--pink) 10%, transparent);border-radius:10px;margin-bottom:10px;} .spec-bc-menu-vol-lbl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 55%, transparent);white-space:nowrap;} .sfx-vol-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--pink) 0%,var(--purple) 100%);outline:none;cursor:pointer;} .sfx-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px color-mix(in srgb, var(--pink) 60%, transparent);cursor:pointer;} .sfx-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--pink);border:none;box-shadow:0 0 6px color-mix(in srgb, var(--pink) 60%, transparent);cursor:pointer;} /* Broadcast top bar */ .spec-bc-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 36px;height:56px;flex-shrink:0;background:linear-gradient(90deg,color-mix(in srgb, var(--rail-2) 96%, transparent),color-mix(in srgb, var(--topbar-2) 94%, transparent),color-mix(in srgb, var(--rail-2) 96%, transparent));border-bottom:1px solid color-mix(in srgb, var(--pink) 22%, transparent);box-shadow:0 1px 0 color-mix(in srgb, var(--purple) 12%, transparent),0 4px 32px rgba(0,0,0,0.5);} .spec-bc-tb-left{display:flex;align-items:center;gap:16px;} .spec-bc-brand{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:5px;text-transform:uppercase;background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .spec-bc-tb-sep{width:1px;height:18px;background:color-mix(in srgb, var(--pink) 22%, transparent);} @keyframes spec-dot-pulse{0%,100%{opacity:1;}50%{opacity:0.12;}} .spec-bc-tb-center{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;color:color-mix(in srgb, var(--lav) 60%, transparent);position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;} .spec-bc-tb-right{display:flex;align-items:center;gap:8px;} #screen-spectator-game .spec-bc-topbar .hg-tb-btn{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;border-radius:8px!important;color:color-mix(in srgb, var(--lav) 70%, transparent)!important;font-family:'Space Mono',monospace!important;font-size:9px!important;letter-spacing:2px!important;padding:7px 16px!important;transition:all 0.2s!important;} #screen-spectator-game .spec-bc-topbar .hg-tb-btn:hover{background:color-mix(in srgb, var(--pink) 16%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 45%, transparent)!important;color:var(--pink)!important;} #screen-spectator-game .spec-bc-topbar .hg-tb-pill{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;border-radius:8px!important;color:color-mix(in srgb, var(--lav) 65%, transparent)!important;font-family:'Space Mono',monospace!important;font-size:10px!important;padding:6px 14px!important;} #screen-spectator-game .spec-bc-topbar .hm-badge{background:rgba(239,68,68,0.12)!important;border:1px solid rgba(239,68,68,0.35)!important;border-radius:6px!important;color:#FCA5A5!important;font-size:9px!important;letter-spacing:2px!important;padding:5px 12px!important;} /* 2-zone layout */ .spec-bc-main{flex:1;display:flex;min-height:0;position:relative;z-index:3;} .spec-bc-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,2.2vh,20px) clamp(20px,4vw,56px) clamp(20px,4.5vh,48px);position:relative;min-width:0;min-height:0;overflow:hidden;} .spec-bc-stage::after{content:'';position:absolute;top:6%;right:0;bottom:6%;width:1px;background:linear-gradient(to bottom,transparent,color-mix(in srgb, var(--pink) 20%, transparent) 25%,color-mix(in srgb, var(--purple) 28%, transparent) 60%,color-mix(in srgb, var(--blue) 16%, transparent) 82%,transparent);} .spec-bc-fit-viewport{ width:100%; min-height:0; display:flex; justify-content:center; align-items:flex-start; overflow:visible; flex-shrink:0; } .spec-bc-fit-content{ width:100%; display:flex; flex-direction:column; align-items:center; transform-origin:center top; will-change:transform; } /* Broadcast timer */ .spec-bc-timer-block{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(8px,1.8vh,18px);width:100%;} #screen-spectator-game #sp-timer-num{display:block!important;text-align:center!important;position:static!important;font-family:'Oxanium',sans-serif!important;font-weight:800!important;font-size:clamp(48px,min(7vw,9vh),96px)!important;letter-spacing:-1px!important;background:linear-gradient(135deg,var(--pink) 0%,var(--violet) 25%,var(--purple) 50%,var(--blue) 75%,var(--ac-teal) 100%)!important;background-size:200% 200%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:holo-shift 4s ease infinite!important;text-shadow:none!important;} #screen-spectator-game #sp-timer-num.urgent{background:none!important;-webkit-text-fill-color:#EF4444!important;animation:spec-timer-throb 0.45s ease-in-out infinite!important;text-shadow:0 0 30px rgba(239,68,68,0.8)!important;} #screen-spectator-game #sp-timer-num.warn{background:none!important;-webkit-text-fill-color:#F97316!important;animation:none!important;} @keyframes spec-timer-throb{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}} #screen-spectator-game #sp-timer-fill{background:linear-gradient(90deg,var(--ac-teal),var(--blue),var(--violet),var(--pink))!important;box-shadow:0 0 14px color-mix(in srgb, var(--pink) 45%, transparent)!important;} #screen-spectator-game #sp-timer-fill.urgent{background:linear-gradient(90deg,#991B1B,#EF4444)!important;box-shadow:0 0 16px rgba(239,68,68,0.6)!important;} /* Q header + text */ .spec-bc-q-header{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-bottom:clamp(10px,2.2vh,22px);} .spec-bc-q-header > *{display:inline-flex;align-items:center;} .spec-bc-q-num-pill,.spec-bc-q-cat-pill{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:5px;text-transform:uppercase;border-radius:999px;padding:11px 28px;line-height:1.2;white-space:nowrap;} .spec-bc-q-num-pill{background:color-mix(in srgb, var(--pink) 10%, transparent);border:1px solid color-mix(in srgb, var(--pink) 25%, transparent);color:color-mix(in srgb, var(--pink) 75%, transparent);} .spec-bc-q-cat-pill{background:color-mix(in srgb, var(--blue) 10%, transparent);border:1px solid color-mix(in srgb, var(--blue) 25%, transparent);color:color-mix(in srgb, var(--blue-2) 75%, transparent);} #screen-spectator-game #spectator-status-slot{width:100%;margin-bottom:6px;text-align:center;} #screen-spectator-game .spec-q-text{font-family:'Oxanium',sans-serif!important;font-weight:700!important;font-size:clamp(22px,min(3.2vw,5vh),56px)!important;line-height:1.18!important;color:var(--text)!important;text-align:center!important;max-width:920px!important;margin-bottom:clamp(10px,2.2vh,22px)!important;text-shadow:0 0 80px color-mix(in srgb, var(--purple) 20%, transparent),0 2px 8px rgba(0,0,0,0.6)!important;} #screen-spectator-game .spec-q-num{font-family:'Space Mono',monospace!important;font-size:10px!important;letter-spacing:4px!important;text-transform:uppercase!important;color:color-mix(in srgb, var(--pink) 55%, transparent)!important;background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;border-radius:999px!important;padding:6px 18px!important;margin-bottom:18px!important;display:inline-block!important;text-align:center!important;} .spec-bc-ans-count{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:color-mix(in srgb, var(--blue-2) 45%, transparent);margin-top:14px;} /* meta slot — CONSTANT height across push↔reveal (strict no-shift): the answer-info text is mounted in-flow but hidden from PUSH so it reserves its wrapped height; the live "X of Y answered" count is overlaid absolutely (contributes no layout height) and is removed at reveal. The slot height therefore never changes through the flow. */ .spec-bc-meta-slot{min-height:22px;display:flex;align-items:center;justify-content:center;margin-top:14px;position:relative;} .spec-meta-info{display:block;width:100%;text-align:center;visibility:hidden;} .spec-meta-info.is-shown{visibility:visible;} .spec-meta-count{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;text-align:center;} .spec-meta-count.is-hidden{display:none;} /* MC grid — broadcast style */ /* Spectator-scoped MC tweaks — inherit the new global design, just adjust sizing for broadcast view */ #screen-spectator-game .spec-mc-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:clamp(10px,1.6vh,16px)!important;width:100%!important;max-width:760px!important;--mc-badge-w:clamp(68px,7.5vw,94px);} /* max-height:none — let the pill grow to contain long answers. The base .spec-mc-inner caps max-height, so long answer text used to escape the pill top+bottom on tall viewports; the stage fit-scaler now governs overall size by scaling the whole grid down when the taller grid overflows the stage. */ #screen-spectator-game .spec-mc-inner{padding:clamp(16px,2.2vh,24px) clamp(18px,2.2vw,26px) clamp(16px,2.2vh,24px) var(--mc-badge-w);min-height:clamp(82px,10vh,112px);max-height:none;} #screen-spectator-game .spec-mc-text{font-size:clamp(15px,min(2vw,2.8vh),26px);} #screen-spectator-game .spec-mc-label{font-size:clamp(24px,min(2.8vw,3.8vh),32px);} #screen-spectator-game .spec-mc-pct{font-size:clamp(22px,min(2.6vw,3.6vh),32px);min-width:clamp(50px,5.2vw,68px);pointer-events:none;} @keyframes spec-correct-pop{from{transform:scale(1);}40%{transform:scale(1.025);}to{transform:scale(1);}} @keyframes spec-shimmer{0%{left:-120%;}60%,100%{left:200%;}} /* Free-text broadcast area */ #screen-spectator-game .spec-ft-area{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;max-width:880px!important;} .spec-bc-ft-input-mock{width:100%;background:rgba(22,11,40,0.80);border:2px solid color-mix(in srgb, var(--pink) 25%, transparent);border-radius:20px;padding:22px 30px;display:flex;align-items:center;gap:14px;box-shadow:0 0 40px color-mix(in srgb, var(--pink) 6%, transparent),inset 0 1px 0 color-mix(in srgb, var(--pink) 8%, transparent);margin-bottom:18px;} .spec-bc-ft-input-mock.revealed{background:rgba(18,9,34,0.90);border-color:color-mix(in srgb, var(--purple) 34%, transparent);box-shadow:0 0 18px color-mix(in srgb, var(--purple) 10%, transparent),inset 0 1px 0 color-mix(in srgb, var(--lav) 8%, transparent);} .spec-bc-ft-cursor{width:3px;height:38px;background:var(--pink);box-shadow:0 0 12px color-mix(in srgb, var(--pink) 80%, transparent);border-radius:2px;animation:spec-cursor-blink 1s ease-in-out infinite;flex-shrink:0;} .spec-bc-ft-input-mock.revealed .spec-bc-ft-cursor{opacity:0;animation:none;} @keyframes spec-cursor-blink{0%,100%{opacity:1;}50%{opacity:0;}} .spec-bc-ft-placeholder{font-family:'Oxanium',sans-serif;font-size:24px;font-weight:600;color:color-mix(in srgb, var(--lav) 28%, transparent);letter-spacing:0.02em;} .spec-bc-ft-placeholder.revealed{color:var(--text);text-shadow:0 0 24px color-mix(in srgb, var(--purple) 20%, transparent);font-size:clamp(22px,3vw,44px);font-weight:700;} .spec-bc-ft-answers{display:flex;flex-direction:column;gap:8px;width:100%;max-height:clamp(140px,24vh,240px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding-right:6px;} .spec-bc-ft-answers::-webkit-scrollbar{width:6px;} .spec-bc-ft-answers::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--purple) 35%, transparent);border-radius:999px;} .spec-bc-ft-answers::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);} .spec-bc-ft-answer-row{display:flex;align-items:center;gap:12px;padding:10px 20px;border-radius:12px;background:rgba(22,11,40,0.60);border:1px solid color-mix(in srgb, var(--pink) 10%, transparent);animation:spec-ft-answer-in 0.4s cubic-bezier(0.16,1,0.3,1) both;transition:background 0.3s ease,border-color 0.3s ease,opacity 0.3s ease;} @keyframes spec-ft-answer-in{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}} .spec-bc-ft-team{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--blue-2) 55%, transparent);flex-shrink:0;width:140px;} .spec-bc-ft-answer-text{font-family:'Oxanium',sans-serif;font-size:20px;font-weight:600;color:rgba(240,234,255,0.88);flex:1;} .spec-bc-ft-status{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;color:color-mix(in srgb, var(--pink) 40%, transparent);flex-shrink:0;} .spec-bc-ft-answer-row.is-pending{background:rgba(18,26,52,0.56);border-color:color-mix(in srgb, var(--blue) 20%, transparent);} .spec-bc-ft-answer-row.is-pending .spec-bc-ft-status{color:color-mix(in srgb, var(--blue-2) 72%, transparent);} .spec-bc-ft-answer-row.is-correct{background:rgba(20,10,36,0.76);border-color:color-mix(in srgb, var(--ac-teal) 28%, transparent);} .spec-bc-ft-answer-row.is-correct .spec-bc-ft-answer-text{color:var(--text);} .spec-bc-ft-answer-row.is-correct .spec-bc-ft-status{color:rgba(115,235,221,0.84);} .spec-bc-ft-answer-row.is-incorrect{background:rgba(44,12,26,0.62);border-color:rgba(255,107,139,0.22);} .spec-bc-ft-answer-row.is-incorrect .spec-bc-ft-status{color:rgba(252,165,165,0.72);} .spec-bc-ft-answer-row.is-empty{background:rgba(20,12,34,0.46);border-color:color-mix(in srgb, var(--lav) 8%, transparent);opacity:0.78;} .spec-bc-ft-answer-row.is-empty .spec-bc-ft-answer-text{color:color-mix(in srgb, var(--lav) 42%, transparent);} .spec-bc-ft-answer-row.is-empty .spec-bc-ft-status{color:color-mix(in srgb, var(--lav) 34%, transparent);} .spec-bc-ft-waiting{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 30%, transparent);margin-top:20px;animation:spec-ft-wait-pulse 2s ease-in-out infinite;} @keyframes spec-ft-wait-pulse{0%,100%{opacity:0.30;}50%{opacity:0.70;}} /* Waiting / standby state */ .spec-bc-standby{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;} .spec-bc-standby-title{font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(48px,7vw,96px);letter-spacing:-0.02em;background:linear-gradient(135deg,var(--ac-teal) 0%,var(--blue) 22%,var(--purple) 48%,var(--violet) 72%,var(--pink) 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:holo-shift 5s ease infinite;} .spec-bc-standby-sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:8px;text-transform:uppercase;color:color-mix(in srgb, var(--pink) 40%, transparent);animation:spec-ft-wait-pulse 2.5s ease-in-out infinite;} /* Right rail — broadcast */ .spec-bc-rail{width:clamp(200px,24vw,380px);flex-shrink:0;background:linear-gradient(180deg,color-mix(in srgb, var(--rail-1) 88%, transparent),color-mix(in srgb, var(--rail-2) 92%, transparent));border-left:1px solid color-mix(in srgb, var(--pink) 16%, transparent);display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:3;box-shadow:inset 1px 0 0 color-mix(in srgb, var(--purple) 10%, transparent);} .spec-bc-rail::before{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;z-index:0;background:linear-gradient(to bottom,transparent,color-mix(in srgb, var(--pink) 45%, transparent) 30%,color-mix(in srgb, var(--purple) 50%, transparent) 60%,transparent);} .spec-bc-rail-hdr{padding:18px 20px 14px;border-bottom:1px solid color-mix(in srgb, var(--pink) 12%, transparent);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:1;background:linear-gradient(90deg,color-mix(in srgb, var(--pink) 4%, transparent),transparent);} .spec-bc-rail-lbl{font-family:'Space Mono',monospace;font-size:var(--fs-micro);letter-spacing:var(--ls-xwide);text-transform:uppercase;background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:10px;} .spec-bc-rail-lbl-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);animation:spec-dot-pulse 1.5s ease-in-out infinite;flex-shrink:0;} .spec-bc-rail-tag{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:2px;color:color-mix(in srgb, var(--blue-2) 55%, transparent);} .spec-bc-lb-scroll{flex:1;overflow-y:auto;padding:12px 14px 12px;position:relative;z-index:1;box-sizing:border-box;} /* Spectator rail: Live Chat below standings (mirrors the host panel) */ .spec-bc-chat-hdr{border-top:1px solid color-mix(in srgb, var(--pink) 16%, transparent);padding-top:12px;padding-bottom:10px;} /* rail-standings-priority: chat demoted to a slim strip; standings get the height + distance-legible rows */ .spec-bc-rail .spec-chat-msgs{flex:0 1 24%;min-height:64px;max-height:220px;border-top:none;padding:8px 14px 52px;} #screen-spectator-game .spec-bc-lb-pos{font-size:18px;min-width:34px;} #screen-spectator-game .spec-bc-lb-name{font-size:17px;} #screen-spectator-game .spec-bc-lb-pts{font-size:18px;} .spec-bc-lb-more{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 45%, transparent);text-align:center;padding:8px 0 4px;} .chat-sys-msg{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.5px;color:color-mix(in srgb, var(--lav) 72%, transparent);text-align:center;padding:3px 6px;line-height:1.4;} /* ════════ PRESENTATION MODE — host shows the REAL spectator view + a floating control bar ════════ */ .spec-present-bar{display:none;} /* Centre the bar within the STAGE (left of the rail), not the viewport — offset by half the rail width (keep in sync with .spec-bc-rail width). */ body.present-mode .spec-present-bar{display:flex;gap:8px;align-items:center;position:fixed;left:calc((100% - clamp(200px,24vw,380px))/2);transform:translateX(-50%);bottom:16px;z-index:var(--z-presentbar);padding:7px 9px;background:rgba(14,7,28,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);border-radius:12px;box-shadow:0 12px 44px rgba(0,0,0,0.55);} .spec-present-btn{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 78%, transparent);background:color-mix(in srgb, var(--pink) 6%, transparent);border:1px solid color-mix(in srgb, var(--pink) 20%, transparent);border-radius:8px;padding:8px 13px;cursor:pointer;white-space:nowrap;transition:all 0.18s;} .spec-present-btn:hover{background:color-mix(in srgb, var(--pink) 13%, transparent);border-color:color-mix(in srgb, var(--pink) 40%, transparent);color:#fff;} .spec-present-btn.primary{background:linear-gradient(90deg,color-mix(in srgb, var(--pink) 22%, transparent),color-mix(in srgb, var(--purple) 22%, transparent));border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:#fff;} .spec-present-btn.on{background:rgba(46,157,143,0.18);border-color:rgba(78,205,196,0.5);color:#9defdf;} body.present-mode .spec-bc-ticker{display:none;} @media(max-width:768px){body.present-mode .spec-present-bar{left:50%;}} .hg-tb-present.on{background:color-mix(in srgb, var(--pink) 22%, transparent);border-color:color-mix(in srgb, var(--pink) 45%, transparent);} .spec-bc-lb-row{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;border-radius:14px;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.025);transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;} .spec-bc-lb-row.r1{background:linear-gradient(135deg,color-mix(in srgb, var(--ac-gold) 13%, transparent),rgba(255,160,0,0.06));border-color:color-mix(in srgb, var(--ac-gold) 28%, transparent);box-shadow:0 0 30px color-mix(in srgb, var(--ac-gold) 6%, transparent),inset 0 1px 0 color-mix(in srgb, var(--ac-gold) 10%, transparent);border-left:3px solid color-mix(in srgb, var(--ac-gold) 60%, transparent);} .spec-bc-lb-row.r2{background:rgba(192,200,216,0.06);border-color:rgba(192,200,216,0.15);border-left:3px solid rgba(192,200,216,0.40);} .spec-bc-lb-row.r3{background:rgba(180,100,40,0.08);border-color:rgba(180,100,40,0.20);border-left:3px solid rgba(180,100,40,0.45);} .spec-bc-lb-pos{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,min(2.4vw,3vh),34px);letter-spacing:1px;color:rgba(255,255,255,0.16);width:clamp(24px,2.6vw,32px);text-align:center;flex-shrink:0;line-height:1;} .spec-bc-lb-row.r1 .spec-bc-lb-pos{color:var(--ac-gold);text-shadow:0 0 16px color-mix(in srgb, var(--ac-gold) 65%, transparent);} .spec-bc-lb-row.r2 .spec-bc-lb-pos{color:#C0C8D8;} .spec-bc-lb-row.r3 .spec-bc-lb-pos{color:var(--rank-bronze);} .spec-bc-lb-name{flex:1;font-family:'Oxanium',sans-serif;font-weight:700;font-size:clamp(13px,min(1.4vw,1.8vh),18px);color:rgba(240,234,255,0.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .spec-bc-lb-pts{font-family:'Oxanium',sans-serif;font-weight:700;font-size:clamp(14px,min(1.7vw,2.2vh),22px);color:color-mix(in srgb, var(--ac-gold) 75%, transparent);flex-shrink:0;} .spec-bc-lb-row.r1 .spec-bc-lb-pts{color:var(--ac-gold);text-shadow:0 0 10px color-mix(in srgb, var(--ac-gold) 40%, transparent);} /* Score delta */ .spec-bc-delta{position:fixed;font-family:'Oxanium',sans-serif;font-weight:700;font-size:18px;color:#10B981;text-shadow:0 0 16px rgba(16,185,129,0.7);pointer-events:none;white-space:nowrap;z-index:var(--z-float);animation:spec-delta-rise 2.2s cubic-bezier(0.16,1,0.3,1) forwards;} @keyframes spec-delta-rise{0%{opacity:0;transform:translateY(0px);}15%{opacity:1;}70%{opacity:1;}100%{opacity:0;transform:translateY(-60px);}} /* Bottom ticker */ .spec-bc-ticker{position:absolute;bottom:0;left:0;right:0;height:40px;border-top:1px solid color-mix(in srgb, var(--pink) 10%, transparent);display:flex;align-items:center;overflow:hidden;background:rgba(0,0,0,0.15);z-index:5;} .spec-bc-ticker-track{display:flex;align-items:center;animation:spec-ticker-scroll 22s linear infinite;white-space:nowrap;} @keyframes spec-ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .spec-bc-ticker-item{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:5px;text-transform:uppercase;color:color-mix(in srgb, var(--pink) 35%, transparent);padding:0 48px;} /* spec-mc-* card rules — constellation focus glass button design. Lilac/periwinkle/violet/midnight gradient palette per option, alternating diagonal corners, glass pill badge, dark divider, constellation hover, white-wash vote sweep on reveal. */ .spec-mc-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.6vh,16px);width:100%; --mc-badge-w:clamp(72px,7.5vw,98px); --mc-r:30px; } /* Per-option gradient color tokens (from constellation focus palette) */ .spec-mc-wrap:nth-child(1){--c1:#d77fff;--c2:#9670ff;--c3:#6facff;--c4:#e59fff;border-radius:0 var(--mc-r) 0 var(--mc-r);} .spec-mc-wrap:nth-child(2){--c1:#6facff;--c2:#9670ff;--c3:#d77fff;--c4:#e59fff;border-radius:var(--mc-r) 0 var(--mc-r) 0;} .spec-mc-wrap:nth-child(3){--c1:#c97bff;--c2:#7b58ff;--c3:#6697ff;--c4:#dd92ff;border-radius:var(--mc-r) 0 var(--mc-r) 0;} .spec-mc-wrap:nth-child(4){--c1:#6697ff;--c2:#7b58ff;--c3:#c97bff;--c4:#dd92ff;border-radius:0 var(--mc-r) 0 var(--mc-r);} /* Dark glass base */ .spec-mc-wrap{ padding:0;position:relative;overflow:visible;isolation:isolate;cursor:default; background:rgba(14,20,42,.14); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); box-shadow:0 20px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05); transition:transform .38s cubic-bezier(.22,1,.36,1),filter .35s ease,box-shadow .35s ease,opacity .35s ease; } /* Gradient fill on ::before */ .spec-mc-wrap::before{ content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none; background: linear-gradient(118deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.015) 16%,rgba(255,255,255,0) 32%), linear-gradient(125deg,color-mix(in srgb,var(--c4) 84%,var(--c1) 16%) 0%,rgba(255,255,255,0) 22%), linear-gradient(92deg,var(--c1) 0%,var(--c2) 36%,var(--c3) 100%); opacity:.72; } /* Correct: deep forest-teal gradient + glow + pop */ .spec-mc-wrap.spec-correct-wrap{ box-shadow:0 0 28px rgba(5,150,105,.55),0 0 56px rgba(5,150,105,.22),0 20px 42px rgba(0,0,0,.30)!important; animation:spec-correct-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.10s both; } .spec-mc-wrap.spec-correct-wrap::before{ background: linear-gradient(118deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.015) 16%,rgba(255,255,255,0) 32%), linear-gradient(92deg,#064E3B 0%,#059669 50%,#34D399 100%)!important; } /* Wrong: fade + desaturate */ .spec-mc-wrap.spec-wrong-wrap{opacity:.22;filter:grayscale(.7);transition:opacity 0.6s ease,filter 0.6s ease;} /* Mobile-only: shrink box-shadow blur radii so the glow doesn't clip on narrow viewports. Halves the blur values on .spec-mc-wrap base + .spec-correct-wrap variant. Desktop untouched. */ @media (max-width: 768px) { .spec-mc-wrap{ box-shadow:0 12px 24px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important; } .spec-mc-wrap.spec-correct-wrap{ box-shadow:0 0 14px rgba(5,150,105,.55),0 0 24px rgba(5,150,105,.22),0 12px 24px rgba(0,0,0,.30)!important; } } /* Inner: transparent flex container; top-edge shine on ::before; dark divider on ::after */ .spec-mc-inner{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);padding:clamp(14px,2vh,22px) clamp(16px,2vw,24px) clamp(14px,2vh,22px) var(--mc-badge-w);background:transparent;position:relative;overflow:visible;min-height:clamp(74px,9.5vh,104px);max-height:clamp(96px,12vh,132px);height:100%;box-sizing:border-box;border-radius:inherit;z-index:1;} /* Top-edge shine */ .spec-mc-inner::before{content:'';position:absolute;inset:1px 1px auto 1px;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 60%,rgba(255,255,255,0));pointer-events:none;border-radius:inherit;opacity:.55;z-index:2;} /* Vertical divider — purple matching top bar accent */ .spec-mc-inner::after{content:'';position:absolute;left:var(--mc-badge-w);top:18px;bottom:18px;width:1.5px;border-radius:999px;background:color-mix(in srgb, var(--purple) 55%, transparent);z-index:5;pointer-events:none;transform:translateX(-1px);} /* Letter — clean, no frosted-glass background */ .spec-mc-label{ position:absolute; left:calc(var(--mc-badge-w) / 2);top:50%;transform:translate(-50%,-50%); width:52px;height:52px; display:grid;place-items:center; font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px); color:rgba(248,250,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.35); letter-spacing:-.05em;z-index:6;pointer-events:none; } .spec-mc-label::before{display:none;} /* Answer text */ .spec-mc-text{font-family:'Oxanium',sans-serif;font-weight:600;font-size:clamp(14px,min(1.7vw,2.6vh),24px);color:#FFFFFF;letter-spacing:.01em;line-height:1.25;flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word;position:relative;z-index:3;text-shadow:0 1px 2px rgba(0,0,0,.28);padding-left:6px;padding-right:clamp(8px,1.4vw,16px);} /* Percentage — placed in the OUTER corners of the 2×2 grid (above-left of A, above-right of B, below-left of C, below-right of D). The fill bar inside each pill is unchanged; only the inline text moved out. */ .spec-mc-pct{font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(20px,min(2.4vw,3.4vh),30px);letter-spacing:.02em;opacity:0;transition:opacity 0.5s 0.55s;position:absolute;z-index:6;color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.30);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";will-change:transform;pointer-events:none;line-height:1;} .spec-mc-wrap:nth-child(1) .spec-mc-pct{bottom:calc(100% + 6px);left:4px;text-align:left;transform-origin:left bottom;} .spec-mc-wrap:nth-child(2) .spec-mc-pct{bottom:calc(100% + 6px);right:4px;text-align:right;transform-origin:right bottom;} .spec-mc-wrap:nth-child(3) .spec-mc-pct{top:calc(100% + 6px);left:4px;text-align:left;transform-origin:left top;} .spec-mc-wrap:nth-child(4) .spec-mc-pct{top:calc(100% + 6px);right:4px;text-align:right;transform-origin:right top;} /* Burst pop on snap to whole number — text stays white (the holo gradient looked bad over the green/red wraps and was hard to read). Pop animation only. */ .spec-mc-pct.is-burst{ animation: pct-burst 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes pct-burst{ 0% { transform: scale(1.35); } 35% { transform: scale(1.65); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pink) 55%, transparent)); } 100% { transform: scale(1.00); filter: drop-shadow(0 0 0 color-mix(in srgb, var(--pink) 0%, transparent)); } } /* Make room around the grid so corner labels don't get clipped by parent containers */ .spec-mc-grid{padding:2.4em 0.4em;} /* Player desktop/tablet (>640px): trim the question→options gap. The 2.4em base top padding reserves room for the reveal % labels that pop in ABOVE the top-row tiles (~23px tall there); 16px still clears them (grid overflow is visible, so any spill lands harmlessly in the question's own margin) while tightening the pre-reveal gap from ~52px to ~30px. Phones (≤640px) keep their own 14px rule; spectator/host stages keep the roomy 2.4em. */ #screen-player-game .spec-mc-grid{padding-top:16px;} /* Vote sweep: white wash L→R proportional to votes */ .spec-mc-vote{position:absolute;inset:0;overflow:hidden;background:transparent;z-index:1;pointer-events:none;border-radius:inherit;} .spec-mc-vote-fill{height:100%;width:0%;transition:width 2s cubic-bezier(0.16,1,0.3,1);background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.18) 80%,rgba(255,255,255,.34) 100%);box-shadow:inset -1px 0 0 rgba(255,255,255,.55),0 0 18px rgba(255,255,255,.20);} /* ═══════════════════════════════════════════════════════ HG — HOST GAME SCREEN (hg-host-*) ═══════════════════════════════════════════════════════ */ /* Screen-level reset */ #screen-host.active { display: flex !important; flex-direction: column; background: var(--bg); font-family: 'Quicksand', sans-serif; overflow: hidden; position: relative; margin: 0; padding: 0; top: 0; left: 0; height: 100vh; height: 100dvh; width: 100%; } #screen-host.active > .hg-top-bar { margin-top: 0; } #screen-host.active::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--pink) 5%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 80%); } /* 2-zone layout */ .hg-host-root { flex: 1; display: flex; width: 100%; min-height: 0; overflow: hidden; position: relative; z-index: 1; align-self: stretch; } .hg-host-stage { flex: 1; display: flex; flex-direction: column; padding: 20px 28px 24px; min-width: 0; overflow-y: auto; position: relative; } /* Right panel — FLATTENED (was base + !important reskin + a dead rgba layer) */ .hg-host-panel { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--rail-1); border-left: 1px solid color-mix(in srgb, var(--pink) 22%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--pink) 12%, transparent), -8px 0 32px color-mix(in srgb, var(--purple) 6%, transparent); overflow: hidden; } /* Section labels in stage */ .hg-host-section-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 40%, transparent); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); } /* Host broadcast input row */ #screen-host .hg-host-bc-row { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; } /* Host timer area */ .hg-host-timer-box { background: var(--card); border: 1px solid color-mix(in srgb, var(--purple) 15%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } #host-timer-num { font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; font-size: 38px !important; line-height: 1 !important; color: rgba(255,196,235,0.95) !important; background: linear-gradient(180deg,var(--pink) 0%,var(--pink) 38%,var(--pink) 72%,var(--purple) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 22px color-mix(in srgb, var(--pink) 28%, transparent),0 0 40px color-mix(in srgb, var(--pink) 16%, transparent) !important; } #host-timer-num.urgent { background: none !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; animation: t-pulse 0.6s ease infinite !important; text-shadow: 0 0 20px color-mix(in srgb, var(--pink) 45%, transparent),0 0 40px color-mix(in srgb, var(--pink) 18%, transparent) !important; } #host-timer-fill { height: 100% !important; border-radius: 4px !important; background: linear-gradient(90deg, var(--pink), var(--pink), var(--pink), var(--purple)) !important; transition: width 1s linear !important; } #host-timer-fill.urgent { background: linear-gradient(90deg, #880000, var(--pink)) !important; } /* Timer presets */ #screen-host .timer-preset { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 1px !important; padding: 6px 10px !important; border-radius: 6px !important; background: color-mix(in srgb, var(--purple) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 14%, transparent) !important; color: color-mix(in srgb, var(--lav) 50%, transparent) !important; cursor: pointer !important; transition: all 0.2s !important; } #screen-host .timer-preset:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; color: var(--pink) !important; } #screen-host .timer-preset.active { background: color-mix(in srgb, var(--pink) 12%, transparent) !important; border-color: color-mix(in srgb, var(--pink) 35%, transparent) !important; color: var(--pink) !important; } /* Timer bar background */ #screen-host .timer-bar-bg { background: color-mix(in srgb, var(--purple) 8%, transparent) !important; border-radius: 4px !important; overflow: hidden !important; } /* Active question */ #screen-host .q-text-big { font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: clamp(20px, 2.5vw, 28px) !important; color: var(--cream) !important; line-height: 1.4 !important; text-align: center; margin-bottom: 14px; } /* Reveal button */ #screen-host #reveal-btn { background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 18%, var(--purple) 36%, var(--blue) 54%, var(--ac-teal) 72%, var(--pink) 90%, var(--pink) 100%) !important; background-size: 200% 200% !important; animation: holo-shift 4s ease infinite !important; color: #09040F !important; font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; border-radius: 12px !important; border: none !important; /* reveal-dominance: THE one big action on the stage */ padding: 18px 24px !important; font-size: 17px !important; letter-spacing: 0.4px !important; } /* Answer feed */ #screen-host .ans-entry { padding: 8px 12px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--purple) 4%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 8%, transparent) !important; margin-bottom: 4px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: var(--cream) !important; } /* Section headers in host stage (override old .section-hdr) */ #screen-host .section-hdr { font-family: 'Space Mono', monospace !important; font-size: 8px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 40%, transparent) !important; margin-bottom: 10px !important; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent) !important; padding-bottom: 6px !important; } /* Question tabs */ /* Question-source tabs — FLATTENED from 4 layers (legacy gold base, audit reskin, type bump, quiet layer). Values = the computed winners pre-flatten. */ #screen-host .q-tab{flex:1;padding:9px 16px;border:none;border-radius:6px;background:transparent;color:color-mix(in srgb, var(--lav) 60%, transparent);font-family:'Space Mono',monospace;font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;} #screen-host .q-tab:hover{color:color-mix(in srgb, var(--lav) 70%, transparent);} #screen-host .q-tab.active{background:color-mix(in srgb, var(--pink) 16%, transparent);color:var(--pink);box-shadow:0 0 12px color-mix(in srgb, var(--pink) 15%, transparent);} /* Theme grid buttons */ #screen-host .theme-btn { font-family: 'Quicksand', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; padding: 10px 14px !important; border-radius: 10px !important; background: var(--card) !important; border: 1px solid color-mix(in srgb, var(--purple) 12%, transparent) !important; color: color-mix(in srgb, var(--lav) 70%, transparent) !important; cursor: pointer !important; transition: all 0.2s !important; } #screen-host .theme-btn:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; background: color-mix(in srgb, var(--pink) 6%, transparent) !important; color: var(--pink) !important; } /* Category shelves (question-set hierarchy): shelf cards + the full-width back row */ .cat-count { display: block; margin-top: 4px; font-family: 'Space Mono', monospace; font-size: var(--fs-micro, 8px); letter-spacing: var(--ls-wide, 1.5px); text-transform: uppercase; color: color-mix(in srgb, var(--lav) 40%, transparent); } #screen-host .cat-back { grid-column: 1 / -1; text-align: left; font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 60%, transparent) !important; } /* Builder box (manual + upload tabs) */ #screen-host .builder-box { background: var(--card) !important; border: 1px solid color-mix(in srgb, var(--purple) 12%, transparent) !important; border-radius: 12px !important; padding: 18px !important; } #screen-host .builder-box label { font-family: 'Space Mono', monospace !important; font-size: 8px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 40%, transparent) !important; margin-bottom: 6px !important; display: block !important; } #screen-host .builder-box textarea, #screen-host .builder-box input[type="text"], #screen-host .builder-box input[type="number"] { background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; border-radius: 8px !important; color: var(--cream) !important; font-family: 'Quicksand', sans-serif !important; font-size: 14px !important; padding: 10px 12px !important; } #screen-host .builder-box textarea:focus, #screen-host .builder-box input:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent) !important; outline: none !important; } /* Answer type buttons */ #screen-host .ans-type-btn { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 1px !important; padding: 7px 14px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--purple) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 12%, transparent) !important; color: color-mix(in srgb, var(--lav) 40%, transparent) !important; cursor: pointer !important; } #screen-host .ans-type-btn.active { background: color-mix(in srgb, var(--pink) 10%, transparent) !important; border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; color: var(--pink) !important; } /* Option pills (A/B/C/D) */ #screen-host .opt-pill { font-family: 'Space Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; width: 24px !important; height: 24px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #screen-host .opt-wrap input { background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; border-radius: 8px !important; color: var(--cream) !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; } /* Correct row select */ #screen-host .correct-row select, #screen-host select { background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 18%, transparent) !important; border-radius: 8px !important; color: var(--cream) !important; font-family: 'Quicksand', sans-serif !important; padding: 8px 12px !important; } /* Upload zone */ #screen-host .upload-zone { background: var(--card) !important; border: 2px dashed color-mix(in srgb, var(--purple) 20%, transparent) !important; border-radius: 12px !important; padding: 24px !important; text-align: center !important; cursor: pointer !important; transition: border-color 0.2s !important; } #screen-host .upload-zone:hover { border-color: color-mix(in srgb, var(--pink) 35%, transparent) !important; } /* Question set list items */ #screen-host .q-set-item { padding: 9px 13px !important; border-radius: 8px !important; background: rgba(180,130,255,0.07) !important; border: 1px solid rgba(180,130,255,0.13) !important; margin-bottom: 5px !important; cursor: pointer !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: rgba(230,205,255,0.82) !important; transition: all 0.2s !important; } #screen-host .q-set-item:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; background: color-mix(in srgb, var(--pink) 9%, transparent) !important; color: var(--cream) !important; } #screen-host .q-set-item.selected, #screen-host .q-set-item.active-q { border-color: color-mix(in srgb, var(--pink) 50%, transparent) !important; background: color-mix(in srgb, var(--pink) 13%, transparent) !important; color: var(--pink) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--pink) 18%, transparent) inset !important; } #screen-host .q-set-item.q-used { opacity: 0.45 !important; } /* Question history entries */ #screen-host .qh-entry { padding: 6px 10px !important; border-radius: 6px !important; background: color-mix(in srgb, var(--purple) 3%, transparent) !important; margin-bottom: 3px !important; font-family: 'Quicksand', sans-serif !important; font-size: 12px !important; color: color-mix(in srgb, var(--lav) 45%, transparent) !important; } /* Host buttons (override old btn styles) */ #screen-host .btn { font-family: 'Quicksand', sans-serif !important; font-weight: 700 !important; border-radius: 10px !important; cursor: pointer !important; transition: all 0.2s !important; } #screen-host .btn-gold { background: linear-gradient(90deg, var(--pink), var(--violet), var(--purple), var(--blue), var(--ac-teal), var(--pink), var(--pink)) !important; background-size: 200% 200% !important; animation: holo-shift 4s ease infinite !important; color: #09040F !important; border: none !important; } #screen-host .btn-ghost { background: transparent !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; color: color-mix(in srgb, var(--lav) 50%, transparent) !important; } #screen-host .btn-ghost:hover { border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important; color: var(--pink) !important; } #screen-host .btn-danger { background: color-mix(in srgb, var(--pink) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pink) 30%, transparent) !important; color: var(--pink) !important; } #screen-host .btn-danger:hover { background: color-mix(in srgb, var(--pink) 22%, transparent) !important; } #screen-host .btn-burgundy { background: color-mix(in srgb, var(--pink) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pink) 25%, transparent) !important; color: var(--pink) !important; } #screen-host .btn-teal { background: color-mix(in srgb, var(--ac-teal) 10%, transparent) !important; border: 1px solid color-mix(in srgb, var(--ac-teal) 25%, transparent) !important; color: var(--ac-teal) !important; } #screen-host .btn-outline { background: transparent !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; color: color-mix(in srgb, var(--lav) 50%, transparent) !important; } /* Host input fields (global for screen-host) */ #screen-host input[type="text"], #screen-host input[type="number"], #screen-host textarea { background: rgba(22,8,36,0.85) !important; border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent) !important; border-radius: 8px !important; color: var(--cream) !important; font-family: 'Quicksand', sans-serif !important; } #screen-host input[type="text"]:focus, #screen-host input[type="number"]:focus, #screen-host textarea:focus { border-color: var(--pink) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent) !important; outline: none !important; } #screen-host input::placeholder, #screen-host textarea::placeholder { color: color-mix(in srgb, var(--text-3) 22%, transparent) !important; } /* Host panel: teams section */ .hg-host-teams-section { padding: var(--pad-rail); border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); overflow-y: auto; flex: 0 1 25%; } /* Panel labels — FLATTENED from 4 layers; values = pre-flatten computed winners (the 11px 'bump' never actually won here — the gradient layer outranked it) */ .hg-host-panel-label { font-family: 'Space Mono', monospace; font-size: var(--fs-micro); letter-spacing: var(--ls-xwide); text-transform: uppercase; background: linear-gradient(90deg, var(--pink), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; border-bottom: 1px solid color-mix(in srgb, var(--pink) 10%, transparent); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .hg-host-panel-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 18%, transparent), transparent); } /* Team cards in panel */ #screen-host .team-card { padding: 8px 10px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--purple) 4%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 8%, transparent) !important; margin-bottom: 4px !important; font-family: 'Quicksand', sans-serif !important; font-size: 12px !important; color: color-mix(in srgb, var(--lav) 70%, transparent) !important; } /* Host panel: leaderboard */ .hg-host-lb-section { padding: var(--pad-rail); border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); overflow-y: auto; flex: 0 1 20%; } #screen-host .lb-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 10px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--purple) 3%, transparent) !important; margin-bottom: 3px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: var(--cream) !important; } /* Host panel: chat (bottom, flex:1) */ .hg-host-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .hg-host-chat-header { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 40%, transparent); padding: 14px 16px 10px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 6%, transparent); } #screen-host #host-chat-monitor { flex: 1 !important; overflow-y: auto !important; padding: 12px 14px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: color-mix(in srgb, var(--text) 70%, transparent) !important; } .hg-host-chat-input { flex-shrink: 0; padding: 8px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); display: flex; flex-direction: column; gap: 6px; } .hg-host-chat-input-row { display: flex; gap: 6px; align-items: center; } #screen-host .chat-send { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 18%, transparent), color-mix(in srgb, var(--purple) 18%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent) !important; border-radius: 8px !important; color: var(--pink) !important; cursor: pointer !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #screen-host .chat-send:hover { background: color-mix(in srgb, var(--pink) 28%, transparent) !important; } #screen-host .chat-extras-toggle { color: color-mix(in srgb, var(--text-3) 70%, transparent) !important; font-size: 14px !important; flex-shrink: 0 !important; } #screen-host .chat-extras-toggle:hover { color: var(--pink) !important; } /* Manage button override */ #screen-host .hg-host-manage-btn { background: color-mix(in srgb, var(--pink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent); border-radius: 6px; padding: 3px 8px; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 1px; color: color-mix(in srgb, var(--pink) 55%, transparent); cursor: pointer; text-transform: uppercase; transition: all 0.2s; } #screen-host .hg-host-manage-btn:hover { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); } /* Host hard mode overrides */ body.hard-mode #screen-host.active { background: #0A0004; } body.hard-mode .hg-host-teams-section { border-bottom-color: rgba(192,40,80,0.10); } body.hard-mode .hg-host-lb-section { border-bottom-color: rgba(255,0,0,0.10); } body.hard-mode #host-timer-num { font-family: 'Creepster', cursive !important; -webkit-text-fill-color: var(--hm-red) !important; background: none !important; color: var(--hm-red) !important; text-shadow: 0 0 20px rgba(255,0,0,0.6), 0 0 40px rgba(255,0,0,0.3) !important; animation: hm-pulse 1s infinite !important; } body.hard-mode #host-timer-fill { background: linear-gradient(90deg, #880000, #FF2020) !important; } body.hard-mode #screen-host .section-hdr { color: rgba(255,60,60,0.5) !important; border-bottom-color: rgba(255,0,0,0.08) !important; } /* ═══════════════════════════════════════════════════════ HG — HOST UTILITY ROW (Broadcast + Timer side by side) ═══════════════════════════════════════════════════════ */ .hg-host-utility-row { display: grid; grid-template-columns: 1fr 260px; gap: 16px; margin-bottom: 4px; align-items: start; } .hg-host-utility-block { display: flex; flex-direction: column; gap: 8px; } .hg-host-utility-bc input { font-size: 14px !important; padding: 10px 14px !important; } .hg-host-utility-timer .timer-presets { display: flex; gap: 4px; flex-wrap: wrap; } /* ── Answer Feed section in panel ── */ .hg-host-ans-section { padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); /* rail-standings-merge: Live Answers inherits the height freed by the merged Leaderboard (22%→40%) */ overflow-y: auto; flex: 0 1 40%; min-height: 0; } .hg-host-ans-section .answer-feed { max-height: 100%; } #screen-host .ans-entry { padding: 7px 10px !important; border-radius: 7px !important; background: color-mix(in srgb, var(--purple) 4%, transparent) !important; border: 1px solid color-mix(in srgb, var(--purple) 8%, transparent) !important; margin-bottom: 3px !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; color: var(--cream) !important; } /* ═══════════════════════════════════════════════════════ UI SCALE — bigger text and spacing across all hg- screens ═══════════════════════════════════════════════════════ */ /* Section labels: 8px → 11px (panel-label removed — its bump was dead, see flattened rule) */ .hg-host-section-label, .hg-host-chat-header { font-size: var(--fs-label) !important; letter-spacing: 2px !important; } /* Host stage section-hdr override: bigger and more visible */ #screen-host .section-hdr { font-size: var(--fs-label) !important; letter-spacing: 2px !important; color: color-mix(in srgb, var(--pink) 50%, transparent) !important; margin-bottom: 12px !important; padding-bottom: 8px !important; } /* Top bar pills and text: slightly bigger */ .hg-tb-pill { font-size: 13px !important; } .hg-tb-mark { font-size: 15px !important; } .hg-tb-label, .hg-tb-value { font-size: 14px !important; } /* Host timer running: bigger number */ #host-timer-num { font-size: 52px !important; } /* Panel body text sizes */ #screen-host .team-card { font-size: 14px !important; padding: 9px 12px !important; } #screen-host .lb-row { font-size: 14px !important; padding: 8px 12px !important; } #screen-host .lb-name { font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--text) 75%, transparent) !important; } #screen-host .lb-pts { font-family: 'Space Mono', monospace !important; font-size: 11px !important; letter-spacing: 0 !important; color: color-mix(in srgb, var(--lav) 45%, transparent) !important; text-shadow: none !important; } #screen-host .lb-pos { font-family: 'Space Mono', monospace !important; font-size: 12px !important; letter-spacing: 0 !important; color: color-mix(in srgb, var(--lav) 35%, transparent) !important; text-shadow: none !important; } #screen-host .lb-row.p1 .lb-pos { color: #F5C542 !important; } #screen-host .lb-row.p2 .lb-pos { color: color-mix(in srgb, var(--lav) 60%, transparent) !important; } #screen-host .lb-row.p3 .lb-pos { color: #FF8C42 !important; } #screen-host .qh-entry { font-size: 13px !important; } #screen-host .q-set-item { font-size: 14px !important; padding: 9px 14px !important; } #screen-host .builder-box label { font-size: 10px !important; letter-spacing: 2px !important; } #screen-host .builder-box textarea, #screen-host .builder-box input[type="text"] { font-size: 15px !important; } #screen-host .ans-type-btn { font-size: 12px !important; padding: 9px 16px !important; } #screen-host .timer-preset { font-size: 11px !important; padding: 7px 11px !important; } #screen-host .theme-btn { font-size: 13px !important; padding: 12px 16px !important; } /* Host chat input larger */ #screen-host #host-chat-input { font-size: 14px !important; padding: 10px 14px !important; } #screen-host #host-chat-monitor { font-size: 14px !important; } /* Player screen: standings and chat slightly bigger */ .hg-pg-panel-label { font-size: 11px !important; letter-spacing: 2px !important; } .hg-pg-chat-msgs { font-size: 14px !important; } #screen-player-game .lb-rail-row { font-size: 14px !important; } #screen-player-game .hg-pg-rename-btn { font-size: 13px !important; padding: 10px 18px !important; } /* FFA mode: hide rename footer + team chat tab (no teams in FFA) */ #screen-player-game.ffa-mode #rename-footer { display: none !important; } #screen-player-game.ffa-mode .mob-chat-tabs { display: none !important; } #screen-player-game.ffa-mode .hg-pg-chat-tabs { display: none !important; } /* ══════════════════════════════════════════════════════ HOST BROADCAST SKIN (overrides scoped to #screen-host) ══════════════════════════════════════════════════════ */ #screen-host.active{background:var(--stage-1)!important;align-items:stretch!important;justify-content:flex-start!important;} #screen-host.active::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 90% 55% at 50% 0%,color-mix(in srgb, var(--ac-gold) 18%, transparent) 0%,transparent 55%),radial-gradient(ellipse 60% 75% at 5% 80%,color-mix(in srgb, var(--pink) 14%, transparent) 0%,transparent 55%),radial-gradient(ellipse 55% 70% at 97% 20%,color-mix(in srgb, var(--purple) 14%, transparent) 0%,transparent 55%),radial-gradient(ellipse 65% 45% at 50% 110%,color-mix(in srgb, var(--ac-teal) 10%, transparent) 0%,transparent 55%);} #screen-host.active::after{mask-image:none!important;-webkit-mask-image:none!important;background-image:radial-gradient(circle,color-mix(in srgb, var(--pink) 10%, transparent) 1px,transparent 1px)!important;background-size:52px 52px!important;} /* Top bar */ #screen-host .hg-top-bar{height:56px!important;background:linear-gradient(90deg,color-mix(in srgb, var(--rail-2) 96%, transparent),color-mix(in srgb, var(--topbar-2) 94%, transparent),color-mix(in srgb, var(--rail-2) 96%, transparent))!important;border-bottom:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;} #screen-host .hg-tb-mark{background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} #screen-host .hg-tb-pill{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 22%, transparent)!important;} #screen-host .hg-tb-btn{background:color-mix(in srgb, var(--pink) 8%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 22%, transparent)!important;color:color-mix(in srgb, var(--lav) 70%, transparent)!important;font-family:'Space Mono',monospace!important;font-size:9px!important;letter-spacing:2px!important;} #screen-host .hg-tb-btn:hover{background:color-mix(in srgb, var(--pink) 16%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 45%, transparent)!important;color:var(--pink)!important;} /* Stage layout */ #screen-host .hg-host-root{position:relative;z-index:3;} #screen-host .hg-host-stage{background:radial-gradient(ellipse 80% 40% at 50% 0%,color-mix(in srgb, var(--pink) 4%, transparent) 0%,transparent 60%)!important;} /* Stage cards */ #screen-host .hg-host-aq-card{background:linear-gradient(140deg,var(--card),var(--card))!important;border:1px solid color-mix(in srgb, var(--pink) 28%, transparent)!important;border-radius:14px!important;box-shadow:0 0 40px color-mix(in srgb, var(--pink) 12%, transparent),0 0 80px color-mix(in srgb, var(--purple) 6%, transparent),inset 0 1px 0 color-mix(in srgb, var(--pink) 14%, transparent)!important;} #screen-host .hg-host-q-card{background:linear-gradient(140deg,var(--card),var(--card))!important;border:1px solid color-mix(in srgb, var(--purple) 22%, transparent)!important;border-radius:14px!important;box-shadow:0 2px 24px rgba(0,0,0,0.35)!important;} #screen-host .hg-host-hist-card{background:var(--card)!important;border:1px solid color-mix(in srgb, var(--purple) 14%, transparent)!important;border-radius:12px!important;} #screen-host .hg-host-bc-bar{background:var(--rail-1)!important;border:1px solid color-mix(in srgb, var(--pink) 16%, transparent)!important;border-radius:10px!important;} #screen-host .hg-host-bc-bar input{background:rgba(14,6,26,0.70)!important;border:1px solid color-mix(in srgb, var(--pink) 18%, transparent)!important;color:var(--text)!important;border-radius:8px!important;} #screen-host .hg-host-bc-bar input:focus{border-color:color-mix(in srgb, var(--pink) 45%, transparent)!important;} /* Section labels */ #screen-host .hg-host-section-label{font-family:'Space Mono',monospace!important;color:color-mix(in srgb, var(--pink) 60%, transparent)!important;letter-spacing:4px!important;} /* Active question display (host reference view) */ #screen-host .active-q-panel{background:rgba(14,6,26,0.80)!important;border:1px solid color-mix(in srgb, var(--pink) 14%, transparent)!important;border-radius:10px!important;} #screen-host .aq-text{font-family:'Oxanium',sans-serif!important;font-weight:700!important;color:var(--text)!important;} #screen-host .aq-opt{background:rgba(14,6,26,0.80)!important;border:1px solid color-mix(in srgb, var(--pink) 12%, transparent)!important;color:color-mix(in srgb, var(--lav) 80%, transparent)!important;position:relative!important;} #screen-host .aq-opt::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background-image:linear-gradient(135deg,var(--blue),var(--ac-teal),var(--blue-2),var(--blue));background-size:300% 300%;animation:holo-shift 4s ease infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;} #screen-host .aq-opts .aq-opt:nth-child(2)::before{background-image:linear-gradient(135deg,#F5C542,#FDE68A,#FF8C42,#F5C542);} #screen-host .aq-opts .aq-opt:nth-child(3)::before{background-image:linear-gradient(135deg,#FF8C42,#FDBA74,#F5C542,#FF8C42);} #screen-host .aq-opts .aq-opt:nth-child(4)::before{background-image:linear-gradient(135deg,var(--purple),var(--lav),var(--pink),var(--purple));} #screen-host .aq-opt.correct{border-color:color-mix(in srgb, var(--ac-teal) 35%, transparent)!important;background:rgba(6,24,14,0.80)!important;color:#6EE7B7!important;} #screen-host .aq-opt.correct::before{background-image:linear-gradient(135deg,#10B981,#6EE7B7,var(--ac-teal),#10B981)!important;} #screen-host .opt-pill{font-family:'Space Mono',monospace!important;} #screen-host .opt-pill.pA{background:color-mix(in srgb, var(--blue) 22%, transparent)!important;color:var(--blue-2)!important;border-color:color-mix(in srgb, var(--blue) 40%, transparent)!important;} #screen-host .opt-pill.pB{background:rgba(245,197,66,0.22)!important;color:#FDE68A!important;border-color:rgba(245,197,66,0.40)!important;} #screen-host .opt-pill.pC{background:rgba(255,140,66,0.22)!important;color:#FDBA74!important;border-color:rgba(255,140,66,0.40)!important;} #screen-host .opt-pill.pD{background:color-mix(in srgb, var(--purple) 22%, transparent)!important;color:var(--lav)!important;border-color:color-mix(in srgb, var(--purple) 40%, transparent)!important;} /* Tabs */ #screen-host .q-mode-tabs{background:rgba(14,6,26,0.60)!important;border:1px solid color-mix(in srgb, var(--pink) 12%, transparent)!important;border-radius:8px!important;padding:3px!important;} /* (q-tab quiet layer folded into the flattened rule above) */ /* (host MC grid + its sizing layer retired — the Now Playing card renders options inline at every width) */ /* Right panel */ /* (panel reskin layer folded into .hg-host-panel base) */ /* (panel-label gradient layer folded into the flattened base rule) */ /* Panel sections */ #screen-host .hg-host-teams-section{border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-host .hg-host-lb-section{border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-host .hg-host-ans-section{border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-host .lb-row{background:color-mix(in srgb, var(--rail-1) 55%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;border-left:3px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;border-radius:6px!important;} #screen-host .lb-row.p1{border-left-color:var(--ac-gold)!important;} #screen-host .lb-row.p2{border-left-color:var(--rank-silver)!important;} #screen-host .lb-row.p3{border-left-color:var(--rank-bronze)!important;} /* Answer feed */ #screen-host .ans-entry{background:color-mix(in srgb, var(--rail-1) 55%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;border-radius:6px!important;} /* Chat */ #screen-host .hg-host-chat{background:rgba(14,6,26,0.50)!important;} #screen-host .hg-host-chat-header{font-family:'Space Mono',monospace!important;color:color-mix(in srgb, var(--pink) 60%, transparent)!important;letter-spacing:3px!important;border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent)!important;} #screen-host #host-chat-input{background:rgba(22,11,40,0.80)!important;border:1px solid color-mix(in srgb, var(--pink) 20%, transparent)!important;color:var(--text)!important;} #screen-host .hg-host-chat-send{background:color-mix(in srgb, var(--pink) 12%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 25%, transparent)!important;color:var(--pink)!important;} /* Buttons */ #screen-host .btn-burgundy{background:color-mix(in srgb, var(--pink) 12%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 35%, transparent)!important;color:var(--pink)!important;} #screen-host .btn-ghost{border-color:color-mix(in srgb, var(--pink) 30%, transparent)!important;color:color-mix(in srgb, var(--lav) 75%, transparent)!important;} #screen-host .btn-teal{background:color-mix(in srgb, var(--ac-teal) 12%, transparent)!important;border-color:color-mix(in srgb, var(--ac-teal) 35%, transparent)!important;color:var(--ac-teal)!important;} /* Question list items */ #screen-host .q-set-item{background:color-mix(in srgb, var(--rail-1) 60%, transparent)!important;border:1px solid color-mix(in srgb, var(--pink) 8%, transparent)!important;color:color-mix(in srgb, var(--lav) 80%, transparent)!important;} #screen-host .q-set-item:hover{background:color-mix(in srgb, var(--pink) 10%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 22%, transparent)!important;} #screen-host .q-set-item.active{background:color-mix(in srgb, var(--pink) 14%, transparent)!important;border-color:color-mix(in srgb, var(--pink) 35%, transparent)!important;color:var(--pink)!important;} /* Host reveal-nav: primary is unified .btn-holo; wrapup is the mid-tier outline */ .hr-btn-wrapup { display: inline-block; background: color-mix(in srgb, var(--pink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 28%, transparent); color: var(--pink); font-family: 'Oxanium', sans-serif; font-weight: 700; padding: 14px 28px; font-size: 15px; width: auto; border-radius: 12px; cursor: pointer; transition: background 0.2s, transform 0.15s; } .hr-btn-wrapup:hover { background: color-mix(in srgb, var(--pink) 20%, transparent); } .hr-waiting { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--purple) 42%, transparent) !important; } /* The status band SLOT owns the layout height: every state (count / submitted / verdict / countdown) renders inside the same 66px, so the question below never moves. */ #screen-player-game .timer-status-slot{min-height:66px;align-items:flex-start;} /* answered-count-live: quiet variant of the status band while the question is live */ .prv-result.prv-count{background:transparent!important;border-color:color-mix(in srgb, var(--purple) 20%, transparent)!important;color:color-mix(in srgb, var(--lav) 75%, transparent)!important;box-shadow:none!important;animation:none!important;} /* rank-delta-on-reveal chips inside the verdict pill */ .prv-result .prv-rank{font-weight:700;white-space:nowrap;} .prv-result .prv-rank.up{color:var(--ac-success);} .prv-result .prv-rank.down{color:var(--ac-danger);} .prv-result .prv-rank.hold{opacity:0.8;} /* ── PLAYER IN-PLACE REVEAL result card ── */ /* Status band (mockup style): fixed-height horizontal card — icon | two ellipsizing lines | big score. Rows NEVER wrap, the card NEVER grows → structurally zero-shift. */ .prv-result { display: flex; align-items: center; gap: 12px; text-align: left; width: min(640px, 96%); height: 72px; padding: 0 14px 0 12px; margin: 0 auto; border-radius: 14px; overflow: hidden; font-family: 'Oxanium', sans-serif; font-weight: 700; font-size: clamp(14px,min(1.5vw,2.2vh),17px); letter-spacing: 0.02em; } /* The band carries the timer + question meta at ALL widths (round 5: desktop unified onto the mobile layout) — the player's separate timer row and the QUESTION/CATEGORY header pills are retired. */ #screen-player-game #p-timer-wrap, #screen-player-game #player-q-header-slot{display:none!important;} #screen-player-game #pmc-result-pill{margin-bottom:12px;} .prv-result.prv-band-live{border:none!important;} .prv-ico{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;background:rgba(255,255,255,0.08);} .prv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .prv-line1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;} .prv-line2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Quicksand',sans-serif;font-size:12px;font-weight:600;opacity:0.85;line-height:1.3;} .prv-score{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1;font-family:'Oxanium',sans-serif;font-weight:800;font-size:24px;color:var(--ac-gold);text-shadow:0 0 16px color-mix(in srgb, var(--ac-gold) 35%, transparent);} .prv-score-cap{font-family:'Space Mono',monospace;font-size:7.5px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb, var(--text-3) 85%, transparent);text-shadow:none;} .prv-correct .prv-ico{background:rgba(5,150,105,0.30);color:#6EE7B7;} .prv-wrong .prv-ico{background:rgba(159,18,57,0.30);color:#FDA4AF;} .prv-pending .prv-ico{background:color-mix(in srgb, var(--ac-teal) 22%, transparent);color:var(--ac-teal);} /* Live-band timer strip — the band's only body, every width */ .prv-tbody{display:flex;align-items:center;gap:14px;flex:1;min-width:0;} .prv-tnum{font-family:'Oxanium',sans-serif;font-weight:800;font-size:44px;line-height:1;width:68px;text-align:center;flex-shrink:0;background:linear-gradient(180deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .prv-tnum.urgent{background:none;-webkit-text-fill-color:var(--ac-danger);} .prv-tmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .prv-tbar{display:block;height:6px;border-radius:3px;background:var(--timer-track);overflow:hidden;} .prv-tbar i{display:block;height:100%;border-radius:3px;background:var(--timer-grad);transition:width 1s linear;} /* 1s linear = the spectator bar's smooth glide */ .prv-tbar i.urgent{background:var(--ac-danger);} .prv-tmeta{display:flex;justify-content:space-between;gap:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--text-3) 80%, transparent);white-space:nowrap;overflow:hidden;} .prv-tq{overflow:hidden;text-overflow:ellipsis;} .prv-tin{color:var(--pink);flex-shrink:0;} .prv-tin .tin-short,.prv-tq .tq-short{display:none;} /* condensed forms are a phone-only swap */ /* Change-answer chip (locked-in band) — band is pointer-events:none, the chip opts back in */ .prv-change{pointer-events:auto;flex-shrink:0;margin-left:8px;background:color-mix(in srgb, var(--purple) 14%, transparent);border:1px solid color-mix(in srgb, var(--purple) 45%, transparent);color:var(--lav);padding:6px 14px;border-radius:999px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.15s ease;white-space:nowrap;} .prv-change:hover{border-color:color-mix(in srgb, var(--pink) 55%, transparent);color:var(--pink);} .prv-change:active{transform:scale(0.95);} .prv-correct { color:#6EE7B7; background:rgba(5,150,105,0.14); border:1px solid rgba(5,150,105,0.32); text-shadow:0 0 20px rgba(5,150,105,0.35); } .prv-wrong { color:#FDA4AF; background:rgba(159,18,57,0.14); border:1px solid rgba(159,18,57,0.30); } .prv-missed { color:color-mix(in srgb, var(--lav) 45%, transparent); background:color-mix(in srgb, var(--purple) 6%, transparent); border:1px solid color-mix(in srgb, var(--purple) 15%, transparent); } .prv-pending { color:color-mix(in srgb, var(--lav) 70%, transparent); background:color-mix(in srgb, var(--purple) 8%, transparent); border:1px solid color-mix(in srgb, var(--purple) 22%, transparent); } /* Cold Read Bonus chip — fires on correct answer submitted in first 4s */ .cr-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; background:color-mix(in srgb, var(--blue) 15%, transparent); border:1px solid color-mix(in srgb, var(--blue) 45%, transparent); color:var(--blue); font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; margin-left:6px; white-space:nowrap; vertical-align:middle; } body.hard-mode .cr-chip { background:rgba(192,40,80,0.15); border-color:rgba(192,40,80,0.45); color:var(--hm-red); font-family:'Creepster',cursive; font-size:12px; letter-spacing:2px; text-transform:none; } /* ═══════════════════════════════════════════════════════ HW — WRAP-UP / FINAL RESULTS SCREEN ═══════════════════════════════════════════════════════ */ #screen-wrapup.active { display: flex !important; flex-direction: column; /* brightness pass: was hard-coded #1A0D32 — the reskin never reached this screen */ background: radial-gradient(ellipse 90% 70% at 50% 30%, color-mix(in srgb, var(--purple) 18%, var(--bg)) 0%, color-mix(in srgb, var(--purple) 8%, var(--bg)) 60%, var(--bg) 100%) !important; font-family: 'Quicksand', sans-serif; padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; } #screen-wrapup.active::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--ac-gold) 7%, transparent) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 10% 75%, color-mix(in srgb, var(--pink) 5%, transparent) 0%, transparent 50%), radial-gradient(ellipse 45% 55% at 92% 30%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 55%); } .hw-wrap { /* Page-scroll model (matches the other screens): no inner scroll box. The old overflow-y:auto + max-height made a 900px-wide scroll container, so its scrollbar landed mid-screen on wide displays and the content never went full-width. */ flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 52px; max-width: 1200px; width: 100%; margin: 0 auto; position: relative; z-index: 1; gap: 28px; } /* Panel wrappers: invisible on host/player (display:contents = zero layout change). SPECTATOR projector mode (50+ rooms): viewport-locked stage — headline pinned, the stage auto-rotates STANDINGS (credits-style auto-scroll when tall) ↔ AWARDS, with the standby-dots indicator announcing the flip. Driven by startWrapRotation(). */ .hw-panel { display: contents; } .hw-rotator { display: none; } body.is-spectator #screen-wrapup.active { height: 100vh; height: 100dvh; overflow: hidden; } body.is-spectator #screen-wrapup .hw-wrap { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 12px; } body.is-spectator #screen-wrapup .hw-header { flex-shrink: 0; } body.is-spectator #screen-wrapup .hw-panel { display: none; } body.is-spectator #screen-wrapup[data-hw-tab="standings"] .hw-panel-standings, body.is-spectator #screen-wrapup[data-hw-tab="awards"] .hw-panel-awards { display: flex; flex-direction: column; align-items: center; gap: 24px; flex: 1; min-height: 0; width: 100%; overflow: hidden; /* no scrollbar — the engine drives scrollTop */ animation: hw-panel-in 0.55s cubic-bezier(0.16,1,0.3,1); } @keyframes hw-panel-in { 0%{opacity:0;transform:translateY(14px);} 100%{opacity:1;transform:translateY(0);} } body.is-spectator #screen-wrapup .hw-rotator { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; } body.is-spectator #screen-wrapup .hw-rotator .spec-bc-standby-dots { margin: 0; } .hw-rotator-label { font-family: 'Space Mono', monospace; font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: color-mix(in srgb, var(--lav) 55%, transparent); } /* spectator projector: no Return-Home / game-over footer — alexi drives via F2; the whole lower stage belongs to the standings/awards panels */ body.is-spectator #screen-wrapup #wrapup-player-msg { display: none !important; } /* Header */ .hw-header { text-align: center; } .hw-eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 72%, transparent); margin-bottom: 12px; } .hw-title { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(52px, 9vw, 96px); line-height: 0.95; text-transform: uppercase; word-break: break-word; background: linear-gradient(92deg, var(--pink) 0%, var(--pink) 20%, var(--violet) 45%, var(--purple) 65%, var(--blue-2) 90%); background-size: 180% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--pink) 22%, transparent)); letter-spacing: 3px; animation: holo-shift 9s ease infinite; } /* Long winner names step the headline down a size so it stays on ~one line */ .hw-title.long { font-size: clamp(36px, 6.5vw, 68px); } .hw-subtitle { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: color-mix(in srgb, var(--lav) 68%, transparent); margin-top: 12px; } /* Podium stage */ .hw-podium-stage { display: flex !important; align-items: flex-end !important; justify-content: center !important; gap: 14px !important; width: 100% !important; margin-bottom: 0 !important; } #screen-wrapup .podium-block { text-align: center; } /* Crown above every rank-1 plinth (one per winner on a tie) */ #screen-wrapup .podium-crown { font-size: 30px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ac-gold) 55%, transparent)); animation: crown-bob 2.6s ease-in-out infinite; } @keyframes crown-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } #screen-wrapup .podium-block.podium-empty { width: 130px !important; } #screen-wrapup .podium-name { font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: var(--cream) !important; margin-bottom: 4px !important; } #screen-wrapup .podium-score { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 1.5px !important; color: color-mix(in srgb, var(--lav) 50%, transparent) !important; margin-bottom: 8px !important; } #screen-wrapup .podium-bar { border-radius: 12px 12px 0 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 36px !important; } #screen-wrapup .pb-1st { width: 170px !important; height: 195px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--ac-gold) 22%, transparent) 0%, color-mix(in srgb, var(--ac-gold) 5%, transparent) 100%) !important; border: 1px solid color-mix(in srgb, var(--ac-gold) 42%, transparent) !important; box-shadow: 0 0 44px color-mix(in srgb, var(--ac-gold) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ac-gold) 22%, transparent) !important; } #screen-wrapup .pb-2nd { width: 145px !important; height: 150px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 16%, transparent) 0%, color-mix(in srgb, var(--purple) 4%, transparent) 100%) !important; border: 1px solid color-mix(in srgb, var(--lav) 32%, transparent) !important; box-shadow: 0 0 26px color-mix(in srgb, var(--purple) 8%, transparent) !important; } #screen-wrapup .pb-3rd { width: 130px !important; height: 118px !important; background: linear-gradient(180deg, rgba(249,115,22,0.16) 0%, rgba(249,115,22,0.04) 100%) !important; border: 1px solid rgba(249,115,22,0.30) !important; box-shadow: 0 0 22px rgba(249,115,22,0.08) !important; } /* Rest of leaderboard */ .hw-rest-board { width: 100%; max-width: 520px; } #screen-wrapup .podium-rest-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 16px !important; border-radius: 10px !important; margin-bottom: 6px !important; background: var(--card) !important; border: 1px solid color-mix(in srgb, var(--purple) 12%, transparent) !important; } #screen-wrapup .pr-pos { font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; color: color-mix(in srgb, var(--purple) 48%, transparent) !important; width: 28px !important; text-align: center !important; flex-shrink: 0 !important; } #screen-wrapup .pr-name { flex: 1 !important; font-family: 'Quicksand', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(230,205,255,0.80) !important; } #screen-wrapup .pr-pts { font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; color: color-mix(in srgb, var(--text) 50%, transparent) !important; text-shadow: none !important; } /* Stats divider */ .hw-divider { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 520px; } .hw-divider::before, .hw-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pink) 18%, transparent), transparent); } .hw-divider-text { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 3.5px; text-transform: uppercase; color: color-mix(in srgb, var(--pink) 40%, transparent); } /* Stat cards */ .hw-stats-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; width: 100% !important; /* wrapup-column-rhythm: stats share the centre spine instead of sprawling full-bleed */ max-width: 760px !important; margin: 0 auto !important; } /* (wrap-up stat layer folded into the base .stat-* rules — flatten-important-layers) */ /* Close button: unified .btn-holo.btn-lg */ .hw-close-wrap { text-align: center; } .hw-waiting { padding-bottom: 8px !important; } /* Hard mode — wrapup */ body.hard-mode #screen-wrapup.active { background: var(--hm-bg) !important; } body.hard-mode #screen-wrapup .stat-card { background: linear-gradient(140deg,#180008,#120006); border-color: rgba(255,0,0,0.14); } body.hard-mode #screen-wrapup .stat-card::before { background: linear-gradient(90deg,#880000,#FF2020); } body.hard-mode #screen-wrapup .podium-rest-row { background: rgba(22,0,8,0.65) !important; border-color: rgba(255,0,0,0.12) !important; } body.hard-mode #screen-wrapup .pb-1st { background: linear-gradient(180deg,rgba(255,0,0,0.20) 0%,rgba(255,0,0,0.05) 100%) !important; border-color: rgba(255,0,0,0.42) !important; box-shadow: 0 0 44px rgba(255,0,0,0.10) !important; } body.hard-mode #screen-wrapup .pb-2nd { background: linear-gradient(180deg,rgba(255,0,0,0.14) 0%,rgba(255,0,0,0.04) 100%) !important; border-color: rgba(255,0,0,0.28) !important; } body.hard-mode #screen-wrapup .pb-3rd { background: linear-gradient(180deg,rgba(255,0,0,0.10) 0%,rgba(255,0,0,0.03) 100%) !important; border-color: rgba(255,0,0,0.22) !important; } /* ── Apply balance button + done msg ── */ #ab-apply-btn { background: linear-gradient(135deg, var(--violet), var(--purple), var(--blue)) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent) !important; } #ab-apply-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 36px color-mix(in srgb, var(--purple) 45%, transparent) !important; } #ab-done-msg { color: var(--ac-teal) !important; } .mp-body .section-hdr { color: color-mix(in srgb, var(--pink) 45%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--pink) 9%, transparent) !important; font-family: 'Space Mono', monospace !important; } @media (max-height: 820px) { .pg-timer-bar{height:clamp(7px,1vh,11px);} .spec-bc-timer-bar{height:clamp(8px,1.1vh,13px);} #p-timer-num{font-size:clamp(28px,min(4vw,5vh),48px)!important;} #screen-spectator-game #sp-timer-num{font-size:clamp(40px,min(6vw,7.5vh),72px)!important;} } /* ═══════════════════════════════════════════════════════ HOLOGRAPHIC NIGHT — WRAP-UP / FINAL RESULTS SCREEN Vivid backdrop + star sparkle celebration layer ═══════════════════════════════════════════════════════ */ /* Ambient backdrop gradients */ #screen-wrapup.active::after { background: radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--ac-gold) 11%, transparent) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 8% 80%, color-mix(in srgb, var(--pink) 8%, transparent) 0%, transparent 50%), radial-gradient(ellipse 45% 55% at 94% 28%, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 55%), conic-gradient(from 0deg at 50% -10%, color-mix(in srgb, var(--pink) 5%, transparent) 0deg, transparent 50deg, color-mix(in srgb, var(--ac-gold) 5%, transparent) 90deg, transparent 140deg, color-mix(in srgb, var(--purple) 4%, transparent) 200deg, transparent 260deg) !important; } /* Star sparkle layer on the wrapup div itself */ #screen-wrapup.active::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 1.5px at 12% 18%, color-mix(in srgb, var(--pink) 85%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 88% 12%, color-mix(in srgb, var(--lav) 70%, transparent) 0%, transparent 100%), radial-gradient(circle 2px at 5% 55%, color-mix(in srgb, var(--ac-teal) 60%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 95% 65%, color-mix(in srgb, var(--pink) 55%, transparent) 0%, transparent 100%), radial-gradient(circle 1.5px at 50% 8%, color-mix(in srgb, var(--ac-gold) 80%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 30% 90%, color-mix(in srgb, var(--blue-2) 65%, transparent) 0%, transparent 100%), radial-gradient(circle 2px at 72% 85%, color-mix(in srgb, var(--lav) 55%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 18% 42%, color-mix(in srgb, var(--ac-teal) 50%, transparent) 0%, transparent 100%), radial-gradient(circle 1.5px at 80% 38%, color-mix(in srgb, var(--ac-gold) 65%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 62% 72%, color-mix(in srgb, var(--pink) 45%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 40% 28%, color-mix(in srgb, var(--blue-2) 55%, transparent) 0%, transparent 100%), radial-gradient(circle 2px at 92% 48%, color-mix(in srgb, var(--pink) 40%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 25% 75%, color-mix(in srgb, var(--ac-gold) 50%, transparent) 0%, transparent 100%), radial-gradient(circle 1.5px at 60% 15%, color-mix(in srgb, var(--lav) 60%, transparent) 0%, transparent 100%), radial-gradient(circle 1px at 8% 82%, color-mix(in srgb, var(--ac-teal) 45%, transparent) 0%, transparent 100%); animation: hw-sparkle 5s ease-in-out infinite; } @keyframes hw-sparkle { 0%,100% { opacity: 0.35; } 25% { opacity: 0.80; } 50% { opacity: 0.50; } 75% { opacity: 0.90; } } /* Fireworks canvas — layered above stars (::before) but below the .hw-wrap content */ #hw-fireworks-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.92; display: none; } #screen-wrapup.active #hw-fireworks-canvas { display: block; } /* 1st place podium — more vivid glow to celebrate the winner */ body:not(.hard-mode) #screen-wrapup .pb-1st { box-shadow: 0 0 44px color-mix(in srgb, var(--ac-gold) 20%, transparent), 0 0 80px color-mix(in srgb, var(--pink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ac-gold) 28%, transparent) !important; } /* Hard mode preserves its own styles — no override needed */ /* ── Spectator (broadcast) wrap-up sizing — bigger podium + stats ── */ body.is-spectator #screen-wrapup .podium-subtitle { font-size: clamp(13px,1.4vw,18px) !important; letter-spacing: 5px !important; } body.is-spectator #screen-wrapup .podium-name { font-size: clamp(20px,2vw,28px) !important; margin-bottom: 6px !important; } body.is-spectator #screen-wrapup .podium-score { font-size: clamp(14px,1.3vw,18px) !important; letter-spacing: 2px !important; margin-bottom: 12px !important; } body.is-spectator #screen-wrapup .podium-bar { font-size: clamp(48px,4.5vw,68px) !important; } body.is-spectator #screen-wrapup .pb-1st { width: clamp(200px,18vw,260px) !important; height: clamp(230px,21vw,300px) !important; } body.is-spectator #screen-wrapup .pb-2nd { width: clamp(170px,15vw,220px) !important; height: clamp(180px,16vw,230px) !important; } body.is-spectator #screen-wrapup .pb-3rd { width: clamp(150px,13vw,195px) !important; height: clamp(140px,12vw,180px) !important; } body.is-spectator #screen-wrapup .hw-podium-stage { gap: clamp(18px,2vw,28px) !important; } body.is-spectator #screen-wrapup .hw-rest-board { max-width: clamp(620px,55vw,820px) !important; } body.is-spectator #screen-wrapup .podium-rest-row { padding: 14px 22px !important; margin-bottom: 8px !important; } body.is-spectator #screen-wrapup .pr-pos { font-size: clamp(20px,1.8vw,26px) !important; width: 36px !important; } body.is-spectator #screen-wrapup .pr-name { font-size: clamp(16px,1.4vw,20px) !important; } body.is-spectator #screen-wrapup .pr-pts { font-size: clamp(22px,2vw,28px) !important; } body.is-spectator #screen-wrapup .hw-stats-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px !important; max-width: clamp(720px,62vw,960px) !important; } body.is-spectator #screen-wrapup .stat-card { padding: 22px !important; } body.is-spectator #screen-wrapup .stat-label { font-size: 11px !important; letter-spacing: 2.5px !important; margin-bottom: 12px !important; } body.is-spectator #screen-wrapup .stat-winner { font-size: clamp(22px,2vw,30px) !important; } /* ── Wrap-up at phone widths — players see this screen on their phones. !important needed to outrank the !important plinth rules above. ── */ @media(max-width:480px){ #screen-wrapup .hw-wrap { padding: 22px 14px 40px; gap: 20px; } #screen-wrapup .hw-podium-stage { gap: 8px !important; } #screen-wrapup .podium-bar { font-size: 26px !important; } #screen-wrapup .pb-1st { width: 112px !important; height: 138px !important; } #screen-wrapup .pb-2nd { width: 96px !important; height: 104px !important; } #screen-wrapup .pb-3rd { width: 88px !important; height: 82px !important; } #screen-wrapup .podium-crown { font-size: 22px; } #screen-wrapup .podium-name { font-size: 12px !important; } #screen-wrapup .podium-score { font-size: 11px !important; } } /* ── Stage padding increase across all screens ── */ .hg-host-stage { padding: 16px 24px 24px !important; } .hg-pg-stage { padding: 44px 64px 28px !important; } /* ═══════════════════════════════════════════════════════ HG HOST — REDESIGNED STAGE COMPONENTS ═══════════════════════════════════════════════════════ */ /* ── Broadcast bar ── */ .hg-host-bc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--pink) 14%, transparent); border-radius: 12px; } .hg-host-bc-icon { font-size: 15px; flex-shrink: 0; opacity: 0.8; } .hg-host-bc-bar input { flex: 1 !important; background: transparent !important; border: none !important; padding: 4px 0 !important; font-size: 14px !important; box-shadow: none !important; } .hg-host-bc-bar input:focus { border: none !important; box-shadow: none !important; outline: none !important; } /* ── Active Question card ── */ .hg-host-aq-card { background: linear-gradient(140deg, #221240 0%, #18092E 100%); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; position: relative; } .hg-host-aq-card::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 22%, transparent), color-mix(in srgb, var(--purple) 15%, transparent), color-mix(in srgb, var(--blue) 10%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hg-host-aq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .hg-host-aq-title { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 50%, transparent) !important; flex-shrink: 0; padding-top: 5px; } .hg-host-aq-timer-set { flex-shrink: 0; } .hg-host-aq-next-timer { text-align: right; font-size: 11px; color: color-mix(in srgb, var(--purple) 45%, transparent); margin-top: 5px; font-family: 'Space Mono', monospace; } .hg-host-aq-timer-running { margin-bottom: 10px; } /* ── Questions unified card ── */ .hg-host-q-card { background: linear-gradient(140deg, #1E0E38 0%, #15082A 100%); border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; position: relative; } .hg-host-q-card::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 16%, transparent), color-mix(in srgb, var(--purple) 12%, transparent), color-mix(in srgb, var(--blue) 8%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hg-host-q-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent); } .hg-host-q-title { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 50%, transparent) !important; flex-shrink: 0; } /* ── Hide theme grid when a theme is selected (CSS :has trick) ── */ #qtab-themes:has(.theme-btn.selected) .theme-selector { display: none !important; } /* ── Question set header (theme name + action buttons) ── */ .hg-host-qset-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-top: 1px solid color-mix(in srgb, var(--purple) 12%, transparent); padding-top: 14px; } .hg-host-qset-name { font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--lav) 80%, transparent) !important; } .hg-host-qset-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* ── Question list: scrollable with max height ── */ #screen-host #q-set-list, #screen-host #upload-q-list { max-height: 36vh !important; max-height: 36dvh !important; overflow-y: auto !important; padding-right: 2px !important; } #screen-host #q-set-list::-webkit-scrollbar, #screen-host #upload-q-list::-webkit-scrollbar { width: 4px; } #screen-host #q-set-list::-webkit-scrollbar-track, #screen-host #upload-q-list::-webkit-scrollbar-track { background: transparent; } #screen-host #q-set-list::-webkit-scrollbar-thumb, #screen-host #upload-q-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 4px; } /* ── Question history card ── */ .hg-host-hist-card { background: rgba(16,8,26,0.70); border: 1px solid color-mix(in srgb, var(--purple) 11%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 6px; } .hg-host-hist-hdr { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--pink) 45%, transparent) !important; margin-bottom: 10px !important; padding-bottom: 7px !important; border-bottom: 1px solid color-mix(in srgb, var(--pink) 7%, transparent) !important; } /* ── Question item inner text — override old global Space Grotesk ── */ #screen-host .q-set-item { display: flex !important; align-items: center !important; justify-content: space-between !important; } #screen-host .q-set-item-text { font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(230,205,255,0.88) !important; flex: 1 !important; margin-right: 10px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 1.4 !important; } #screen-host .q-set-item-type { font-family: 'Space Mono', monospace !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--purple) 60%, transparent) !important; white-space: nowrap !important; flex-shrink: 0 !important; } #screen-host .q-set-item.selected .q-set-item-text, #screen-host .q-set-item.active-q .q-set-item-text { color: var(--pink) !important; } #screen-host .q-set-item.selected .q-set-item-type, #screen-host .q-set-item.active-q .q-set-item-type { color: color-mix(in srgb, var(--pink) 65%, transparent) !important; } #screen-host .q-used .q-set-item-text { color: rgba(180,150,210,0.45) !important; } #screen-host .q-used .q-set-item-type { color: color-mix(in srgb, var(--ac-teal) 55%, transparent) !important; /* teal "Used" tick */ } /* ── Theme selector: strip old gold background ── */ #screen-host .theme-selector { background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 0 !important; } #screen-host .theme-selector > div:first-child { font-family: 'Space Mono', monospace !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--purple) 50%, transparent) !important; margin-bottom: 12px !important; } /* ── Right panel: more contrast ── */ .hg-host-teams-section, .hg-host-lb-section, .hg-host-ans-section { padding: var(--pad-rail) !important; } /* ── AUTO MODE — toggle, banner, skip button ── */ #screen-host .hg-am-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(22,8,36,0.85); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--lav) 78%, transparent); font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: all 0.18s ease; flex-shrink: 0; align-self: flex-start; margin-top: 2px; } #screen-host .hg-am-toggle:hover { border-color: color-mix(in srgb, var(--pink) 55%, transparent); color: var(--cream); } #screen-host .hg-am-toggle .hg-am-dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--purple) 40%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 0%, transparent); transition: all 0.18s ease; } #screen-host .hg-am-toggle.on { background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 22%, transparent), color-mix(in srgb, var(--purple) 20%, transparent)); border-color: color-mix(in srgb, var(--pink) 65%, transparent); color: var(--cream); box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 25%, transparent); } #screen-host .hg-am-toggle.on .hg-am-dot { background: var(--pink); box-shadow: 0 0 8px color-mix(in srgb, var(--pink) 85%, transparent), 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); animation: hg-am-pulse 1.4s ease-in-out infinite; } #screen-host .hg-am-toggle.disabled { opacity: 0.35; cursor: not-allowed; } @keyframes hg-am-pulse { 0%,100% { box-shadow: 0 0 8px color-mix(in srgb, var(--pink) 85%, transparent), 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); } 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 100%, transparent), 0 0 0 5px color-mix(in srgb, var(--pink) 10%, transparent); } } #screen-host .hg-am-banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 10%, transparent), color-mix(in srgb, var(--purple) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--pink) 32%, transparent); border-radius: 10px; font-family: 'Quicksand', sans-serif; font-size: 12px; color: var(--cream); } #screen-host .hg-am-banner-icon { font-size: 14px; flex-shrink: 0; } #screen-host .hg-am-banner-text { flex: 1; font-weight: 600; letter-spacing: 0.3px; } #screen-host .hg-am-banner-stop { background: color-mix(in srgb, var(--pink) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 50%, transparent); color: #FFB8D0; padding: 4px 12px; border-radius: 6px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.15s ease; } #screen-host .hg-am-banner-stop:hover { background: color-mix(in srgb, var(--pink) 40%, transparent); color: #fff; } /* automode-end-toggle: what happens after the last question */ #screen-host .hg-am-endmode { background: color-mix(in srgb, var(--purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); color: var(--lav); padding: 4px 12px; border-radius: 6px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; } #screen-host .hg-am-endmode:hover { background: color-mix(in srgb, var(--purple) 28%, transparent); color: var(--text); } #screen-host .hg-am-endmode.stay { background: color-mix(in srgb, var(--ac-teal) 14%, transparent); border-color: color-mix(in srgb, var(--ac-teal) 45%, transparent); color: var(--ac-teal); } #screen-host .hg-am-skip { background: linear-gradient(90deg, color-mix(in srgb, var(--lav) 18%, transparent), color-mix(in srgb, var(--purple) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--lav) 45%, transparent); color: var(--cream); font-family: 'Quicksand', sans-serif; font-weight: 700; padding: 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.15s ease; } #screen-host .hg-am-skip:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 30%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); border-color: var(--pink); } #screen-host .hg-am-skip .hg-am-skip-num { font-family: 'Space Mono', monospace; font-size: 11px; background: rgba(0,0,0,0.30); padding: 2px 8px; border-radius: 999px; color: var(--lavender); letter-spacing: 1px; } /* ── ALL-IN pill — host cue when every team is answered ── */ #screen-host .hg-allin-pill { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac-teal) 20%, transparent), color-mix(in srgb, var(--blue) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--ac-teal) 55%, transparent); color: #FFFFFF; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0; transform: scale(0.85); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); vertical-align: middle; } #screen-host .hg-allin-pill.show { opacity: 1; transform: scale(1); animation: hg-allin-pulse 1.6s ease-in-out infinite; } #screen-host .hg-allin-pill .hg-allin-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px color-mix(in srgb, var(--ac-teal) 85%, transparent), 0 0 0 3px color-mix(in srgb, var(--ac-teal) 18%, transparent); } /* Stage-level ALL IN cue above the Reveal bar — same fade mechanic (space reserved up-front so the reveal bar never shifts), slightly larger than the rail pill */ #screen-host .hg-allin-stage { margin: 0 0 8px; font-size: 10px; padding: 4px 14px; } @keyframes hg-allin-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac-teal) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ac-teal) 6%, transparent); } } body.hard-mode #screen-host .hg-allin-pill { background: linear-gradient(90deg, rgba(255,180,80,0.18), color-mix(in srgb, var(--pink) 16%, transparent)); border-color: rgba(255,180,80,0.55); color: #FFE0B0; } body.hard-mode #screen-host .hg-allin-pill .hg-allin-dot { background: #FFB450; box-shadow: 0 0 6px rgba(255,180,80,0.85), 0 0 0 3px rgba(255,180,80,0.18); } /* Hard mode overrides for new cards */ body.hard-mode .hg-host-aq-card { background: linear-gradient(140deg, #200008, #160006) !important; border-color: rgba(255,0,0,0.20) !important; } body.hard-mode .hg-host-aq-card::before { background: linear-gradient(135deg, rgba(255,0,0,0.24), rgba(180,0,0,0.16)) !important; } body.hard-mode .hg-host-q-card { background: linear-gradient(140deg, #1C0008, #130006) !important; border-color: rgba(255,0,0,0.16) !important; } body.hard-mode .hg-host-q-card::before { background: linear-gradient(135deg, rgba(255,0,0,0.18), rgba(180,0,0,0.12)) !important; } body.hard-mode .hg-host-bc-bar { background: rgba(22,0,8,0.80) !important; border-color: rgba(255,0,0,0.14) !important; } body.hard-mode .hg-host-hist-card { background: rgba(18,0,6,0.80) !important; border-color: rgba(255,0,0,0.10) !important; } body.hard-mode .hg-host-aq-title, body.hard-mode .hg-host-q-title, body.hard-mode .hg-host-hist-hdr { color: rgba(255,60,60,0.50) !important; } body.hard-mode #screen-host .q-set-item { background: rgba(255,0,0,0.06) !important; border-color: rgba(255,0,0,0.12) !important; color: rgba(255,180,180,0.80) !important; } body.hard-mode #screen-host .q-set-item:hover { background: rgba(255,0,0,0.10) !important; border-color: rgba(255,0,0,0.22) !important; } body.hard-mode #screen-host .q-set-item.selected, body.hard-mode #screen-host .q-set-item.active-q { background: rgba(255,0,0,0.14) !important; border-color: rgba(255,0,0,0.40) !important; color: #FF6060 !important; } /* ═══ FLAT TIMER BAR — player + spectator (mirrors host pattern) ═══ */ .pg-timer-bar { position: relative; width: 100%; max-width: clamp(360px, 88vw, 760px); height: clamp(10px, 1.4vh, 16px); margin: 0 auto clamp(4px, 0.8vh, 10px); background: color-mix(in srgb, var(--pink) 8%, transparent); border-radius: 999px; overflow: hidden; flex-shrink: 0; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pink) 22%, transparent)); animation: timer-pulse 2s ease infinite; } .pg-timer-bar-fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--pink),var(--purple),var(--ac-teal)); transition: width 1s linear, background 0.4s; box-shadow: 0 0 12px color-mix(in srgb, var(--pink) 45%, transparent); } .pg-timer-bar-fill.urgent { background: linear-gradient(90deg,#991B1B,var(--pink)) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--pink) 50%, transparent) !important; } /* Player: breathing room under the timer bar (the "seconds left" label that used to sit here was removed, leaving the bar too close to the question). */ #screen-player-game #p-timer-wrap{padding-bottom:7px;} /* Spectator: cool palette + blue glow */ #sp-timer-wrap .pg-timer-bar, .spec-bc-timer-bar { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--blue) 26%, transparent)); } .spec-bc-timer-bar { position: relative; width: 100%; max-width: clamp(320px, 65vw, 640px); height: clamp(10px, 1.4vh, 16px); margin: 0 auto clamp(6px, 1vh, 12px); background: color-mix(in srgb, var(--pink) 8%, transparent); border-radius: 999px; overflow: hidden; animation: timer-pulse 2s ease infinite; } .spec-bc-timer-bar-fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--ac-teal),var(--blue),var(--violet),var(--pink)); transition: width 1s linear, background 0.4s; box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 50%, transparent); } .spec-bc-timer-bar-fill.urgent { background: linear-gradient(90deg,#991B1B,var(--pink)) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--pink) 55%, transparent) !important; } .pg-timer-num { display: block; text-align: center; font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: clamp(28px, min(4.4vw, 5.6vh), 56px); line-height: 1; color: color-mix(in srgb, var(--lav) 90%, transparent); } .pg-timer-num.urgent { color: var(--pink); animation: t-pulse 0.6s ease infinite; } /* Hard mode */ body.hard-mode .pg-timer-bar-fill, body.hard-mode .spec-bc-timer-bar-fill { background: linear-gradient(90deg,#6A1030,#FF2020) !important; box-shadow: 0 0 14px rgba(255,32,32,0.55) !important; } body.hard-mode .pg-timer-bar, body.hard-mode .spec-bc-timer-bar { animation: hm-ring-pulse 2s ease infinite !important; background: rgba(192,40,80,0.10) !important; } /* JS calls el.className = 'timer-num' which strips .pg-timer-num. Pin styling to IDs so the number keeps its appearance after re-render. */ #p-timer-num, #sp-timer-num { display: block !important; text-align: center !important; position: static !important; font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; font-size: clamp(26px, min(3.8vw, 4.8vh), 48px) !important; line-height: 1 !important; color: color-mix(in srgb, var(--lav) 90%, transparent) !important; background-image: linear-gradient(180deg,#FFD7FF 0%,var(--pink) 24%,var(--violet) 52%,var(--purple) 76%,var(--ac-teal) 100%) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 24px color-mix(in srgb, var(--pink) 26%, transparent),0 0 42px color-mix(in srgb, var(--purple) 12%, transparent) !important; letter-spacing: 0 !important; } #sp-timer-num { font-size: clamp(48px, min(7vw, 9vh), 96px) !important; background-image: linear-gradient(180deg,#DDE8FF 0%,#85AAFF 40%,var(--blue) 75%,var(--ac-teal) 100%) !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 24px color-mix(in srgb, var(--blue) 34%, transparent),0 0 42px color-mix(in srgb, var(--ac-teal) 14%, transparent) !important; } #p-timer-num.urgent, #sp-timer-num.urgent { background-image: none !important; color: var(--pink) !important; -webkit-text-fill-color: var(--pink) !important; animation: t-pulse 0.6s ease infinite !important; text-shadow: 0 0 22px color-mix(in srgb, var(--pink) 45%, transparent),0 0 40px color-mix(in srgb, var(--pink) 18%, transparent) !important; } body.hard-mode #p-timer-num, body.hard-mode #sp-timer-num { font-family: 'Creepster', cursive !important; background-image: linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--hm-red) !important; } /* Spectator hard-mode: holo-shift animation on the digit */ body.hard-mode #screen-spectator-game #sp-timer-num{font-family:'Creepster',cursive!important;background-image:linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:var(--hm-red)!important;text-shadow:none!important;animation:holo-shift 6s linear infinite!important;} /* Spectator bar fill in hard mode */ body.hard-mode #screen-spectator-game #sp-timer-fill, body.hard-mode #screen-spectator-game #sp-timer-fill.urgent{ background: linear-gradient(90deg,#6A1030,#FF2020)!important; box-shadow: 0 0 14px rgba(255,32,32,0.6)!important; } /* ═══ HOST ACTIVE QUESTION — fix old fonts ═══ */ #screen-host .active-q-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 7%, transparent), var(--card)) !important; border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent) !important; } #screen-host .aq-text { font-family: 'Quicksand', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--text) 88%, transparent) !important; line-height: 1.4 !important; margin-bottom: 10px !important; } #screen-host .aq-opt { font-family: 'Quicksand', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: rgba(230,205,255,0.72) !important; background: color-mix(in srgb, var(--purple) 4%, transparent) !important; border-color: color-mix(in srgb, var(--purple) 12%, transparent) !important; } #screen-host .aq-opt.correct { border-color: color-mix(in srgb, var(--ac-teal) 35%, transparent) !important; background: color-mix(in srgb, var(--ac-teal) 6%, transparent) !important; color: var(--ac-teal) !important; } /* ═══ SPECTATOR: broadcast skin background (old override neutralised) ═══ */ #screen-spectator-game.active { background: var(--stage-1) !important; } #screen-spectator-game .hg-top-bar { background: rgba(6,12,28,0.94) !important; border-bottom-color: color-mix(in srgb, var(--blue) 12%, transparent) !important; } #screen-spectator-game .hg-tb-mark { color: color-mix(in srgb, var(--blue-2) 72%, transparent) !important; } #screen-spectator-game .hg-tb-sep { background: color-mix(in srgb, var(--blue) 14%, transparent) !important; } #screen-spectator-game .hg-tb-label { color: color-mix(in srgb, var(--blue-2) 52%, transparent) !important; } #screen-spectator-game .hg-tb-pill { background: linear-gradient(rgba(9,4,20,0.88), rgba(9,4,20,0.88)) padding-box, linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 50%, var(--ac-teal) 100%) border-box !important; border: 1px solid transparent !important; color: rgba(221,232,255,0.75) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.04) !important; } #screen-spectator-game .hg-tb-pill strong { color: #DDE8FF !important; } #screen-spectator-game .hg-tb-btn { background: linear-gradient(rgba(9,4,20,0.40), rgba(9,4,20,0.40)) padding-box, linear-gradient(135deg, var(--blue), var(--ac-teal)) border-box !important; border: 1px solid transparent !important; color: color-mix(in srgb, var(--blue-2) 60%, transparent) !important; } #screen-spectator-game .hg-tb-btn:hover { background: linear-gradient(color-mix(in srgb, var(--blue) 12%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)) padding-box, linear-gradient(135deg, var(--blue-2), var(--ac-teal)) border-box !important; border: 1px solid transparent !important; color: #DDE8FF !important; box-shadow: 0 0 12px color-mix(in srgb, var(--blue) 20%, transparent) !important; } /* Spec-q-num: pill badge like player */ #screen-spectator-game .spec-q-num { font-family: 'Space Mono', monospace !important; font-size: 10px !important; letter-spacing: 3px !important; color: color-mix(in srgb, var(--blue-2) 68%, transparent) !important; text-transform: uppercase !important; background: color-mix(in srgb, var(--blue) 8%, transparent) !important; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent) !important; border-radius: 20px !important; padding: 4px 14px !important; display: inline-block !important; margin-bottom: 24px !important; } /* widen-stage-canvas: let the projector use its real width — the fit scaler already shrinks anything too tall, so bigger caps are layout-safe */ #screen-spectator-game .spec-q-text { font-family: 'Oxanium', sans-serif !important; font-weight: 700 !important; font-size: clamp(30px, 4.6vw, 72px) !important; color: color-mix(in srgb, var(--text) 95%, transparent) !important; line-height: 1.25 !important; margin-bottom: 32px !important; max-width: min(1380px, 92%) !important; text-align: center !important; } #screen-spectator-game .spec-mc-grid { max-width: min(1240px, 88%) !important; width: 100% !important; } #screen-spectator-game .spec-ft-area { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 10%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent) !important; border-radius: 14px !important; padding: 22px 32px !important; font-family: 'Quicksand', sans-serif !important; font-size: 16px !important; color: rgba(221,232,255,0.68) !important; letter-spacing: 0.5px !important; } /* projector-type-floor: nothing informational under ~16px at viewing distance */ #screen-spectator-game .spec-bc-ans-count{font-size:16px!important;letter-spacing:2px!important;} #screen-spectator-game .spec-bc-meta-slot{min-height:30px!important;} #screen-spectator-game .spec-bc-ft-waiting{font-size:16px!important;letter-spacing:3px!important;} #screen-spectator-game .spec-bc-ft-team{font-size:16px!important;width:190px!important;} #screen-spectator-game .spec-bc-standby-sub{font-size:14px!important;letter-spacing:6px!important;} #screen-spectator-game .spec-bc-rail-lbl{font-size:12px!important;} #screen-spectator-game .spec-bc-ticker-item{font-size:12px!important;letter-spacing:4px!important;} /* Spectator q-area: centered */ #screen-spectator-game #spec-q-area { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; max-width: min(1460px, 96%) !important; /* widen-stage-canvas */ padding: 40px 44px !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(10,19,44,0.66), rgba(8,15,34,0.28)) !important; border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.24), inset 0 1px 0 rgba(221,232,255,0.04) !important; backdrop-filter: blur(16px) saturate(1.1) !important; position: relative !important; overflow: hidden !important; } #screen-spectator-game #spec-q-area::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 0%, transparent), color-mix(in srgb, var(--blue-2) 92%, transparent), color-mix(in srgb, var(--ac-teal) 35%, transparent), color-mix(in srgb, var(--blue) 0%, transparent)) !important; } #screen-spectator-game #spec-q-area > * { position: relative !important; z-index: 1 !important; } /* Spectator waiting text: match player */ #screen-spectator-game .spec-waiting-text { font-family: 'Space Grotesk', sans-serif !important; font-size: 20px !important; font-weight: 500 !important; color: var(--dim) !important; } #screen-spectator-game .spec-mc-grid { gap: 18px !important; } #screen-spectator-game .spec-ft-area { min-width: min(720px,100%) !important; } /* Spectator broadcast polish — broadcast skin background (old override neutralised) */ #screen-spectator-game.active { background: var(--stage-1) !important; } #screen-spectator-game .hg-top-bar { height: 54px !important; padding: 0 24px !important; background: rgba(9,4,15,0.92) !important; border-bottom: 1px solid color-mix(in srgb, var(--pink) 8%, transparent) !important; backdrop-filter: blur(12px) !important; box-shadow: none !important; } #screen-spectator-game .hg-tb-mark { color: var(--text-3) !important; } #screen-spectator-game .hg-tb-sep { background: color-mix(in srgb, var(--pink) 10%, transparent) !important; } #screen-spectator-game .hg-tb-label { color: color-mix(in srgb, var(--text-3) 70%, transparent) !important; letter-spacing: 2px !important; } #screen-spectator-game .hg-tb-right { gap: 8px !important; } #screen-spectator-game .hg-tb-pill { padding: 0 10px !important; height: 26px !important; border-radius: 20px !important; background: linear-gradient(rgba(9,4,20,0.88), rgba(9,4,20,0.88)) padding-box, linear-gradient(135deg, var(--ac-teal) 0%, var(--purple) 50%, var(--pink) 100%) border-box !important; border: 1px solid transparent !important; color: color-mix(in srgb, var(--lav) 75%, transparent) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.04) !important; } #screen-spectator-game .hg-tb-pill strong { margin-left: 0 !important; font-family: 'Quicksand', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--lav) !important; text-shadow: none !important; } #screen-spectator-game .hg-tb-btn { border-color: color-mix(in srgb, var(--pink) 12%, transparent) !important; background: transparent !important; color: color-mix(in srgb, var(--lav) 38%, transparent) !important; } #screen-spectator-game .hg-tb-btn:hover { border-color: color-mix(in srgb, var(--pink) 32%, transparent) !important; background: color-mix(in srgb, var(--pink) 5%, transparent) !important; color: var(--pink) !important; } #screen-spectator-game .spec-q-num { color: color-mix(in srgb, var(--pink) 45%, transparent) !important; background: color-mix(in srgb, var(--pink) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pink) 15%, transparent) !important; } #screen-spectator-game #sp-timer-wrap { position: relative !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } #screen-spectator-game #sp-timer-wrap::before { display: none !important; } #screen-spectator-game #spec-q-area { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } #screen-spectator-game #spec-q-area::before { display: none !important; } #screen-spectator-game .spec-q-text { color: var(--text) !important; max-width: min(1380px, 96%) !important; /* widen-stage-canvas */ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--text) !important; animation: none !important; text-shadow: none !important; } #screen-spectator-game .spec-mc-grid { max-width: min(1240px, 94%) !important; /* widen-stage-canvas */ gap: 18px !important; } #screen-spectator-game .spec-ft-area { min-width: min(720px,100%) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 10%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent) !important; color: rgba(221,232,255,0.68) !important; box-shadow: none !important; } #screen-spectator-game .lb-rail-row { display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 10px !important; border-radius: 8px !important; margin-bottom: 4px !important; background: transparent !important; border: none !important; transition: background 0.2s !important; } #screen-spectator-game .lb-rail-row:hover { background: color-mix(in srgb, var(--pink) 4%, transparent) !important; } #screen-spectator-game .lb-rail-rank { font-family: 'Space Mono', monospace !important; font-size: 14px !important; font-weight: 700 !important; color: color-mix(in srgb, var(--lav) 35%, transparent) !important; width: 16px !important; text-align: center !important; flex-shrink: 0 !important; letter-spacing: 0 !important; } #screen-spectator-game .lb-rail-row:nth-child(1) .lb-rail-rank { color: #F5C542 !important; } #screen-spectator-game .lb-rail-row:nth-child(2) .lb-rail-rank { color: color-mix(in srgb, var(--lav) 60%, transparent) !important; } #screen-spectator-game .lb-rail-row:nth-child(3) .lb-rail-rank { color: #FF8C42 !important; } #screen-spectator-game .lb-rail-name { color: color-mix(in srgb, var(--text) 75%, transparent) !important; font-family: 'Quicksand', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; } #screen-spectator-game .lb-rail-pts { font-family: 'Space Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; color: color-mix(in srgb, var(--lav) 45%, transparent) !important; letter-spacing: 0 !important; } #screen-spectator-game .spec-chat-msgs, #screen-spectator-game #spec-chat-msgs { color: color-mix(in srgb, var(--lav) 70%, transparent) !important; } #screen-spectator-game .chat-notif { color: color-mix(in srgb, var(--ac-teal) 55%, transparent) !important; } /* ═══ FFA MODE — hide team references ═══ */ #screen-player-game.ffa-mode .hg-tb-sep { display: none !important; } #screen-player-game.ffa-mode .hg-tb-left .hg-tb-label { display: none !important; } #screen-player-game.ffa-mode #ptb-team { display: none !important; } /* FFA — hide Team chat tab, only show Everyone */ #screen-player-game.ffa-mode #scope-team-btn { display: none !important; } /* ═══ COPY CODE BUTTON ═══ */ .hg-tb-copy-btn { background: none; border: none; cursor: pointer; padding: 0 0 0 5px; color: color-mix(in srgb, var(--lav) 30%, transparent); font-size: 13px; line-height: 1; transition: color 0.2s; vertical-align: middle; } .hg-tb-copy-btn:hover { color: color-mix(in srgb, var(--pink) 65%, transparent) !important; } /* ═══ CHAT NOTIFICATION (correct answer) ═══ */ .chat-notif { text-align: center; padding: 4px 0; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; color: color-mix(in srgb, var(--ac-teal) 55%, transparent); } #screen-spectator-game .chat-notif { color: rgba(84,170,255,0.5); } /* ── QR MODAL ── */ .qr-overlay{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:rgba(4,2,12,0.88);align-items:center;justify-content:center;padding:20px;} .qr-overlay.show{display:flex;} .qr-modal{ background:linear-gradient(160deg,var(--card) 0%,var(--card) 55%,#0E0520 100%); border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);border-radius:18px; width:100%;max-width:340px;position:relative;overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.75),0 0 60px color-mix(in srgb, var(--purple) 6%, transparent),inset 0 1px 0 color-mix(in srgb, var(--pink) 8%, transparent); } /* Desktop: wider modal so the doubled (400px) QR fits + is scannable from across the room */ @media(min-width:769px){ .qr-modal{ max-width:480px; } } /* Gradient border mask — matches hs-card / hj-card */ .qr-modal::before{ content:'';position:absolute;inset:0;border-radius:18px;padding:1.5px; background:linear-gradient(135deg,color-mix(in srgb, var(--pink) 38%, transparent),color-mix(in srgb, var(--purple) 32%, transparent),color-mix(in srgb, var(--blue) 22%, transparent)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } /* Rainbow top bar — matches mp-modal */ .qr-top-bar{height:3px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--purple),var(--blue),var(--ac-teal));flex-shrink:0;} .qr-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px;position:relative;z-index:1;} .qr-title{ font-family:'Space Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase; color:color-mix(in srgb, var(--pink) 45%, transparent);display:flex;align-items:center;gap:10px; } .qr-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb, var(--pink) 20%, transparent),transparent);} .qr-close{background:none;border:none;color:color-mix(in srgb, var(--lav) 30%, transparent);font-size:16px;cursor:pointer;line-height:1;padding:4px 7px;border-radius:6px;transition:color 0.2s;} .qr-close:hover{color:var(--pink);} .qr-body{display:flex;flex-direction:column;align-items:center;padding:4px 24px 24px;gap:16px;position:relative;z-index:1;} .qr-canvas-wrap{background:#fff;padding:10px;border-radius:12px;line-height:0;box-shadow:0 4px 24px rgba(0,0,0,0.45);} .qr-code-badge{ font-family:'Space Mono',monospace;font-size:26px;font-weight:700;letter-spacing:8px; color:var(--pink);text-shadow:0 0 20px color-mix(in srgb, var(--pink) 40%, transparent); } .qr-hint{ font-family:'Space Mono',monospace;font-size:8.5px;color:color-mix(in srgb, var(--lav) 38%, transparent); letter-spacing:0.3px;text-align:center;line-height:1.8;max-width:240px; } .qr-url-row{display:flex;align-items:center;gap:8px;width:100%;} .qr-url-box{ flex:1;background:rgba(22,8,36,0.85);border:1px solid color-mix(in srgb, var(--pink) 14%, transparent);border-radius:8px; padding:7px 10px;font-family:'Space Mono',monospace;font-size:8.5px; color:color-mix(in srgb, var(--lav) 45%, transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .qr-copy-btn{ background:transparent;border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);border-radius:8px; padding:7px 14px;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:1.5px; text-transform:uppercase;color:color-mix(in srgb, var(--lav) 50%, transparent); cursor:pointer;white-space:nowrap;transition:border-color 0.2s,color 0.2s,background 0.2s; } .qr-copy-btn:hover{border-color:color-mix(in srgb, var(--pink) 42%, transparent);color:var(--pink);background:color-mix(in srgb, var(--pink) 6%, transparent);} /* ── MOBILE CHAT BUBBLE — hidden on desktop ── */ .mob-chat-bubble { display: none; } .mob-chat-overlay { display: none; } #mob-float-msgs { display: none; } .mob-float-msg { background: rgba(12, 6, 28, 0.78); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent); color: rgba(255,255,255,0.82); font-size: 12px; padding: 6px 14px; border-radius: 20px; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; font-family: inherit; } .mob-float-msg.visible { animation: mob-float-rise 4s ease-out forwards; } @keyframes mob-float-rise { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 0.88; transform: translateY(-10px); } 55% { opacity: 0.50; transform: translateY(-58px); } 85% { opacity: 0.12; transform: translateY(-92px); } 100% { opacity: 0; transform: translateY(-112px); } } @keyframes bubble-glow { 0%,100% { box-shadow: 0 4px 18px color-mix(in srgb, var(--pink) 50%, transparent), 0 0 0 0px color-mix(in srgb, var(--pink) 15%, transparent); } 50% { box-shadow: 0 6px 28px color-mix(in srgb, var(--ac-teal) 60%, transparent), 0 0 0 5px color-mix(in srgb, var(--ac-teal) 10%, transparent); } } /* ── MOBILE TAB BAR — hidden on desktop ── */ .mob-tabs{ display:none; /* mobile media query overrides to flex */ flex-shrink:0;width:100%; background:rgba(9,4,15,0.97); border-bottom:1px solid color-mix(in srgb, var(--pink) 10%, transparent); } .mob-tab{ flex:1;padding:11px 0; background:none;border:none;border-bottom:2px solid transparent; font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2.5px;text-transform:uppercase; color:color-mix(in srgb, var(--lav) 32%, transparent);cursor:pointer; transition:color 0.2s,border-color 0.2s; } .mob-tab.active{color:var(--pink);border-bottom-color:var(--pink);} /* ── MOBILE BOTTOM DOCK (player) — hidden on desktop; ≤768px it replaces the top Answer/Standings tabs + the floating chat bubble (mockup dock pattern) ── */ .pg-mob-dock{display:none;} .pg-mob-dock.dock-hidden{display:none!important;} /* steps aside while the chat sheet is open */ .pg-dock-pill{ /* mock nx-pill recipe: translucent, living IN the background — not an opaque card */ position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:12px 0;border-radius:999px;cursor:pointer; background:color-mix(in srgb, var(--bg) 55%, transparent); border:1px solid rgba(255,255,255,0.10); font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:color-mix(in srgb, var(--lav) 72%, transparent); transition:color 0.2s,border-color 0.2s,background 0.2s; } .pg-dock-pill:active{transform:scale(0.97);} .pg-dock-pill.active{color:var(--pink);border-color:color-mix(in srgb, var(--pink) 55%, transparent);background:color-mix(in srgb, var(--pink) 10%, transparent);} .pg-dock-pill .mob-chat-badge{top:-5px;right:12px;} /* ── MEDIUM VIEWPORT — spec rail now uses continuous clamp() (see .spec-bc-rail). Below ~820px we tighten internal rail padding so names don't get squeezed. ── */ @media(min-width:769px) and (max-width:820px){ .spec-bc-rail-hdr{padding:14px 14px 10px;} .spec-bc-lb-scroll{padding:10px 10px;} .spec-bc-lb-row{padding:10px 10px;gap:8px;} } /* ── PLAYER LAYOUT — single-pane + tabs at ALL viewport sizes ── Player screen always uses tabbed/stacked layout (Answer / Standings tabs), with chat as a floating bubble. The panel-only-when-tab-active pattern keeps the question stage at full width on every screen size. The mobile @media block below adds further size compression on phones (≤768px). ── */ .mob-tabs{display:flex;} #screen-player-game .hg-pg-root{flex-direction:column;overflow:hidden;} #screen-player-game .hg-pg-stage{flex:1;overflow:hidden;min-height:0;} #screen-player-game .hg-pg-panel{width:100%;flex:1;height:auto;border-left:none;border-top:1px solid color-mix(in srgb, var(--pink) 12%, transparent);overflow-y:auto;} #screen-player-game[data-mob-tab="answer"] .hg-pg-panel{display:none;} #screen-player-game[data-mob-tab="standings"] .hg-pg-stage{display:none;} /* Chat moves to the floating bubble */ #screen-player-game .hg-pg-chat{display:none;} .mob-chat-bubble{display:flex;align-items:center;justify-content:center;position:fixed;bottom:22px;right:18px;z-index:var(--z-chatbubble);width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--ac-teal),var(--blue),var(--pink),var(--ac-gold));background-size:300% 300%;background-position:0% 50%;border:none;cursor:pointer;font-size:20px;box-shadow:0 4px 18px color-mix(in srgb, var(--pink) 50%, transparent);transition:transform 0.15s,opacity 0.2s;animation:bubble-glow 2.5s ease-in-out infinite;} .mob-chat-bubble:active{transform:scale(0.90);} .mob-chat-bubble.hidden{opacity:0;pointer-events:none;transform:scale(0.75);} .mob-chat-badge{position:absolute;top:-3px;right:-3px;background:var(--pink);color:#fff;font-size:9px;font-family:'Space Mono',monospace;min-width:18px;height:18px;border-radius:9px;padding:0 3px;display:flex;align-items:center;justify-content:center;border:2px solid #07070F;} /* chat-bubble-clearance: verdict/Submit scroll clear of the bubble; bubble dips while a question is live */ body.q-live .mob-chat-bubble{opacity:0.45;} body.q-live .mob-chat-bubble:hover, body.q-live .mob-chat-bubble:active{opacity:1;} @media(max-width:768px){ #screen-player-game .hg-pg-stage{padding-bottom:104px !important;} } .mob-chat-overlay{display:flex;flex-direction:column;position:fixed;bottom:0;left:50%;right:auto;width:min(480px,92%);z-index:var(--z-chatsheet);height:62vh;height:62dvh;background:rgba(9,4,20,0.92);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb, var(--purple) 24%, transparent);border-radius:20px 20px 0 0;transform:translate(-50%,100%);transition:transform 0.30s cubic-bezier(0.16,1,0.3,1);} .mob-chat-overlay.open{transform:translate(-50%,0);} .mob-chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb, var(--purple) 12%, transparent);} .mob-chat-title{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 65%, transparent);} .mob-chat-close{background:none;border:none;color:color-mix(in srgb, var(--lav) 45%, transparent);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1;} .mob-chat-tabs{display:flex;flex-shrink:0;padding:0 12px;border-bottom:1px solid color-mix(in srgb, var(--purple) 10%, transparent);} .mob-chat-msgs{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:5px;} .mob-chat-input-row{display:flex;gap:8px;padding:10px 12px;flex-shrink:0;border-top:1px solid color-mix(in srgb, var(--purple) 12%, transparent);align-items:center;} .mob-chat-input-row input{flex:1;background:rgba(255,255,255,0.04);border:1px solid color-mix(in srgb, var(--purple) 18%, transparent);border-radius:10px;color:#fff;font-size:14px;padding:9px 12px;font-family:inherit;} .mob-chat-input-row input:focus{outline:none;border-color:color-mix(in srgb, var(--purple) 40%, transparent);} .mob-chat-input-row input::placeholder{color:color-mix(in srgb, var(--text-3) 22%, transparent);} /* Float-up host messages above the bubble */ #mob-float-msgs{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;bottom:88px;left:50%;transform:translateX(-50%);width:min(360px,90vw);z-index:var(--z-floatmsg);pointer-events:none;} /* Hide rename footer to keep the question stage clean */ #screen-player-game .rename-footer{display:none!important;} /* ── iOS STANDALONE MODE (added to homescreen) — safe-area insets ── Only applies when JS detects navigator.standalone === true. Browser Safari handles this natively; standalone PWA mode does not. */ body.ios-standalone{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } /* ── MOBILE RESPONSIVE — Player Game ── */ @media(max-width:768px){ /* Pull all centered screens up to start nearer the top (host excluded — has its own full-bleed layout) */ .screen.active:not(#screen-player-game):not(#screen-spectator-game):not(#screen-landing):not(#screen-host) { justify-content: flex-start !important; padding-top: 20px !important; } /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */ input, textarea, select { font-size: 16px !important; } #screen-player-game #p-chat-input { font-size: 16px !important; } /* Tabs + chat bubble retire on phones — the bottom dock takes over (mockup pattern) */ .mob-tabs{display:none;} #screen-player-game .pg-mob-dock{ display:flex;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-chatbubble); gap:8px;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--bg) 92%, transparent) 48%); } #screen-player-game .mob-chat-bubble{display:none;} /* keep the last standings rows clear of the dock */ #screen-player-game .hg-pg-panel{padding-bottom:84px;} /* Topbar: compact player name/team; keep On Air on spectator */ #screen-player-game .hg-tb-mark{display:none;} #screen-player-game .hg-tb-left .hg-tb-sep{display:none;} #screen-player-game .hg-tb-left .hg-tb-label{display:none;} #screen-player-game .hg-tb-value{font-size:11px;max-width:72px;} #screen-player-game .hg-top-bar{padding:0 10px;justify-content:space-between;} #screen-spectator-game .hg-tb-left{display:none;} #screen-spectator-game .hg-top-bar{padding:0 10px;justify-content:space-between;} /* Topbar: icon-only buttons + condensed pills — guaranteed 20px edge padding */ .hg-top-bar{height:46px;} .hg-tb-right{gap:5px;max-width:calc(100% - 40px);overflow:visible;} .tb-btn-label{display:none;} .tb-pill-lbl{display:none;} /* mobile-status-strip: player count stays visible on phones (was display:none) */ .hg-tb-pill{font-size:7px;padding:0 8px;height:20px;letter-spacing:1px;flex-shrink:1;min-width:0;} .hg-tb-pill strong{font-size:9px;} /* Fix pill sizes for player + spectator on mobile — needs higher specificity to beat desktop !important overrides */ #screen-player-game .hg-tb-pill,#screen-spectator-game .hg-tb-pill{height:20px!important;padding:0 8px!important;font-size:7px!important;letter-spacing:1px!important;flex-shrink:1!important;min-width:0!important;} #screen-player-game .hg-tb-pill strong,#screen-spectator-game .hg-tb-pill strong{font-size:9px!important;} /* Hard mode timers: uniform digit size on mobile */ body.hard-mode #screen-player-game #p-timer-num{font-size:48px!important;background-image:linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;animation:holo-shift 6s linear infinite!important;} body.hard-mode #screen-spectator-game #sp-timer-num{font-size:56px!important;background-image:linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;animation:holo-shift 6s linear infinite!important;} .hg-tb-copy-btn{font-size:9px;padding:0 2px 0 3px;} .hg-tb-btn{font-size:13px;height:20px;padding:0 9px;letter-spacing:0;border-radius:6px;flex-shrink:0;} /* Root: full-height, no scroll — tabs control what's visible */ #screen-player-game .hg-pg-root{flex-direction:column;overflow:hidden;} /* Stage fills available height; no scrollbar — content compressed below */ #screen-player-game .hg-pg-stage{flex:1;padding:4px 6px 10px;overflow:hidden;min-height:0;} #screen-player-game .hg-pg-panel{width:100%;flex:1;height:auto;border-left:none;overflow-y:auto;} #screen-player-game .hg-pg-qzone{padding:4px 4px 8px!important;gap:3px!important;} /* Tab switching via data attribute */ #screen-player-game[data-mob-tab="answer"] .hg-pg-panel{display:none;} #screen-player-game[data-mob-tab="standings"] .hg-pg-stage{display:none;} /* Scale down question text and spacing */ #screen-player-game .q-text-big{font-size:18px!important;margin-bottom:12px!important;line-height:1.3!important;} #screen-player-game .q-num-tag{font-size:9px!important;margin-bottom:8px!important;padding:3px 12px!important;} /* Mobile: shrink BOTH spec pills together so they keep matching heights */ #screen-player-game .spec-bc-q-header .q-num-tag, #screen-player-game .spec-bc-q-header .spec-bc-q-cat-pill{padding:3px 10px!important;font-size:8px!important;letter-spacing:2.5px!important;} #screen-spectator-game .spec-bc-q-num-pill, #screen-spectator-game .spec-bc-q-cat-pill{padding:5px 14px!important;font-size:10px!important;letter-spacing:3px!important;} .spec-bc-q-header{gap:6px!important;margin-bottom:10px!important;} /* Mobile: longer bar, smaller number. Tighter label margin so auto-fit doesn't have to scale the whole player stack — bar reads at its true CSS width. */ #screen-player-game #p-timer-wrap{width:100%!important;} #screen-player-game .pg-timer-bar{height:8px!important;max-width:none!important;width:calc(100% - 18px)!important;margin:0 auto 6px!important;} #screen-player-game .pg-timer-num{font-size:18px!important;margin-bottom:4px!important;} #screen-player-game #p-timer-num{font-size:18px!important;} #screen-spectator-game .spec-bc-timer-bar{height:10px!important;} #screen-spectator-game #sp-timer-num{font-size:44px!important;} /* MC tiles — comfy spacing on mobile: bigger gap between options + explicit min/max height so the 4 tiles stay readable even when one is selected (selection no longer makes non-selected cards visibly compress). */ #screen-player-game .spec-mc-grid{gap:12px!important;margin-bottom:10px!important;--mc-badge-w:38px!important;--mc-r:22px!important;} #screen-player-game .spec-mc-inner{padding:12px 14px 12px 38px!important;min-height:60px!important;max-height:84px!important;} #screen-player-game .spec-mc-inner::after{top:12px!important;bottom:12px!important;} #screen-player-game .spec-mc-text{font-size:14px!important;line-height:1.25!important;padding-right:54px!important;} #screen-player-game .spec-mc-label{font-size:15px!important;width:28px!important;height:28px!important;border-radius:9px!important;} #screen-player-game .spec-mc-pct{font-size:18px!important;right:10px!important;} /* Compress FT area */ #screen-player-game .ft-area{padding:10px 14px!important;gap:8px!important;max-width:100%!important;} #screen-player-game .ft-input{padding:10px 14px!important;font-size:16px!important;} #screen-player-game .ft-attempts{max-height:60px!important;gap:4px!important;} #screen-player-game .ft-attempt{padding:5px 10px!important;font-size:11px!important;} #screen-player-game .ft-meta{gap:6px!important;} /* Compress status band (fixed-height flex card — scale, don't re-pad). 64px constant across ALL states: the live state hosts the mock's timer strip. */ #screen-player-game #pmc-result-pill{margin-top:8px!important;margin-bottom:10px!important;width:calc(100% - 16px)!important;} .prv-result{font-size:13px!important;height:64px!important;padding:0 10px!important;gap:10px!important;} .prv-result .prv-ico{width:30px!important;height:30px!important;font-size:14px!important;} .prv-result .prv-score{font-size:20px!important;} .prv-result .cr-chip{font-size:8px!important;letter-spacing:0.5px!important;padding:2px 5px!important;margin-left:4px!important;} /* (timer-band display rules now live at base — desktop unified onto this layout) */ .prv-result .prv-tnum{font-size:36px!important;width:58px!important;} /* phones: tighter meta + condensed wording so long categories don't clip */ .prv-result .prv-tmeta{font-size:8px!important;letter-spacing:1.2px!important;} .prv-tin .tin-full,.prv-tq .tq-full{display:none;} .prv-tin .tin-short,.prv-tq .tq-short{display:inline;} /* Hide rename footer */ #screen-player-game .rename-footer{display:none!important;} /* Hide chat from panel — lives in bubble instead */ #screen-player-game .hg-pg-chat { display: none; } /* Float messages container */ #mob-float-msgs { display: flex; flex-direction: column; align-items: center; gap: 8px; position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); width: min(320px, 90vw); z-index: var(--z-floatmsg); pointer-events: none; } /* Chat bubble button */ .mob-chat-bubble { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 22px; right: 18px; z-index: var(--z-chatbubble); width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--ac-teal), var(--blue), var(--pink), var(--ac-gold)); background-size: 300% 300%; background-position: 0% 50%; border: none; cursor: pointer; font-size: 20px; box-shadow: 0 4px 18px color-mix(in srgb, var(--pink) 50%, transparent); transition: transform 0.15s, opacity 0.2s; animation: bubble-glow 2.5s ease-in-out infinite; } .mob-chat-bubble:active { transform: scale(0.90); } .mob-chat-bubble.hidden { opacity: 0; pointer-events: none; transform: scale(0.75); } .mob-chat-badge { position: absolute; top: -3px; right: -3px; background: var(--pink); color: #fff; font-size: 9px; font-family: 'Space Mono', monospace; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border: 2px solid #07070F; } /* Chat overlay panel */ .mob-chat-overlay { display: flex; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-chatsheet); height: 62vh; height: 62dvh; background: rgba(9, 4, 20, 0.92); backdrop-filter: blur(16px); border-top: 1px solid color-mix(in srgb, var(--purple) 24%, transparent); border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.30s cubic-bezier(0.16,1,0.3,1); } .mob-chat-overlay.open { transform: translateY(0); } .mob-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; flex-shrink: 0; border-bottom: 1px solid color-mix(in srgb, var(--purple) 12%, transparent); } .mob-chat-title { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: color-mix(in srgb, var(--lav) 65%, transparent); } .mob-chat-close { background: none; border: none; color: color-mix(in srgb, var(--lav) 45%, transparent); font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1; } .mob-chat-tabs { display: flex; flex-shrink: 0; padding: 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--purple) 10%, transparent); } .mob-chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; } .mob-chat-input-row { display: flex; gap: 8px; padding: 10px 12px; flex-shrink: 0; border-top: 1px solid color-mix(in srgb, var(--purple) 12%, transparent); align-items: center; } .mob-chat-input-row input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent); border-radius: 10px; color: #fff; font-size: 16px; padding: 9px 12px; font-family: inherit; } .mob-chat-input-row input:focus { outline: none; border-color: color-mix(in srgb, var(--purple) 40%, transparent); } .mob-chat-input-row input::placeholder { color: color-mix(in srgb, var(--text-3) 22%, transparent); } /* Spectator: stack vertically on mobile (spec-bc-* layout) */ #screen-spectator-game .spec-bc-main{flex-direction:column;overflow:hidden;} #screen-spectator-game .spec-bc-stage{padding:12px 14px 10px;overflow:hidden;min-height:0;flex:1;} #screen-spectator-game .spec-bc-rail{width:100%;max-height:38vh;max-height:38dvh;border-left:none;border-top:1px solid color-mix(in srgb, var(--pink) 16%, transparent);} #screen-spectator-game .spec-bc-lb-name{font-size:14px;} #screen-spectator-game .spec-bc-lb-pts{font-size:16px;} /* Spec compress question + MC + FT to fit without scroll */ #screen-spectator-game .spec-q-text{font-size:18px!important;margin-bottom:12px!important;line-height:1.25!important;} #screen-spectator-game .spec-mc-grid{grid-template-columns:1fr!important;gap:6px!important;--mc-badge-w:46px!important;--mc-r:22px!important;} #screen-spectator-game .spec-mc-inner{padding:8px 12px 8px 46px!important;min-height:0!important;} #screen-spectator-game .spec-mc-inner::after{top:10px!important;bottom:10px!important;} #screen-spectator-game .spec-mc-label{font-size:16px!important;width:34px!important;height:34px!important;border-radius:11px!important;} #screen-spectator-game .spec-mc-text{font-size:13px!important;line-height:1.2!important;} #screen-spectator-game .spec-mc-pct{font-size:18px!important;min-width:38px!important;} #screen-spectator-game .spec-bc-ft-input-mock{padding:10px 14px!important;margin-bottom:8px!important;} #screen-spectator-game .spec-bc-ft-answer-row{padding:5px 10px!important;gap:8px!important;} #screen-spectator-game .spec-bc-ft-team{width:80px!important;font-size:9px!important;} #screen-spectator-game .spec-bc-ft-answer-text{font-size:13px!important;} #screen-spectator-game .spec-bc-ft-status{font-size:8px!important;} #screen-spectator-game .spec-bc-ft-answers{gap:4px!important;} } /* ── SMALL MONITOR / SHORT VIEWPORT — player + spectator content scaling ── Fires at any viewport ≤ 800px tall (desktop laptop, small monitor). Goal: everything stays visible without scrolling. NO scrollbars — content shrinks instead. Same overrides apply to question and reveal states because they share the same DOM elements (.q-text-big, .spec-mc-*, .ft-*, etc), guaranteeing dimensions are uniform across both states. ──────────────────────────────────────────────────────────────────────── */ @media(max-height:800px) and (min-width:769px){ /* Reduce stage padding */ .hg-pg-stage { padding: 18px 48px 12px !important; } .hg-pg-qzone { padding: clamp(14px,2.6vh,32px) 24px clamp(10px,2vh,20px) !important; gap: 10px !important; } /* Compress question text + tag */ #screen-player-game .q-text-big { font-size: clamp(18px,2.4vw,30px) !important; margin-bottom: clamp(12px,2vh,22px) !important; line-height: 1.25 !important; } #screen-spectator-game .q-text-big { font-size: clamp(20px,2.8vw,36px) !important; margin-bottom: clamp(14px,2.2vh,22px) !important; line-height: 1.22 !important; } #screen-player-game .q-num-tag { margin-bottom: 14px !important; padding: 4px 14px !important; } #screen-spectator-game .spec-q-text { font-size: clamp(20px,2.6vw,38px) !important; margin-bottom: clamp(14px,2.2vh,22px) !important; line-height: 1.18 !important; } /* Compress MC tiles */ #screen-player-game .spec-mc-grid { gap: 8px !important; margin-bottom: 10px !important; --mc-badge-w: 56px !important; } #screen-player-game .spec-mc-inner { padding: 12px 16px 12px 56px !important; min-height: 0 !important; } #screen-player-game .spec-mc-text { font-size: clamp(13px,1.4vw,18px) !important; line-height: 1.2 !important; } #screen-player-game .spec-mc-label { font-size: 20px !important; width: 44px !important; height: 44px !important; border-radius: 14px !important; } #screen-spectator-game .spec-mc-grid { gap: 10px !important; --mc-badge-w: 64px !important; } #screen-spectator-game .spec-mc-inner { padding-left: 64px !important; } #screen-spectator-game .spec-mc-label { font-size: 20px !important; width: 46px !important; height: 46px !important; border-radius: 14px !important; } #screen-spectator-game .spec-mc-text { font-size: clamp(14px,1.6vw,20px) !important; } #screen-spectator-game .spec-mc-pct { font-size: 26px !important; min-width: 54px !important; } /* Compress FT area + input + attempts */ #screen-player-game .ft-area { padding: 12px 18px !important; gap: 10px !important; max-width: 520px !important; } #screen-player-game .ft-input { padding: 14px 20px !important; font-size: 18px !important; } #screen-player-game .ft-attempts { max-height: clamp(54px,10vh,110px) !important; gap: 5px !important; } #screen-player-game .ft-attempt { padding: 6px 12px !important; font-size: 12px !important; } #screen-player-game .ft-meta { gap: 8px !important; } /* Compress status band (fixed-height flex card — scale, don't re-pad) */ #screen-player-game #pmc-result-pill { margin-top: 10px !important; } .prv-result { font-size: clamp(13px,1.3vw,16px) !important; height: 56px !important; padding: 0 12px !important; } .prv-result .prv-score { font-size: 20px !important; } /* Spec FT reveal rows + input mock */ #screen-spectator-game .spec-bc-ft-input-mock { padding: 14px 22px !important; margin-bottom: 12px !important; } #screen-spectator-game .spec-bc-ft-answer-row { padding: 7px 16px !important; gap: 10px !important; } #screen-spectator-game .spec-bc-ft-answer-text { font-size: clamp(14px,1.5vw,18px) !important; } #screen-spectator-game .spec-bc-ft-team { width: 110px !important; } #screen-spectator-game .spec-bc-ft-answers { gap: 5px !important; } } @media(max-height:620px) and (min-width:769px){ /* Even tighter viewport — further compress */ .hg-pg-stage { padding: 10px 32px 6px !important; } .hg-pg-qzone { padding: 10px 16px 6px !important; gap: 6px !important; } #screen-player-game .q-text-big { font-size: clamp(15px,1.9vw,22px) !important; margin-bottom: 10px !important; } #screen-player-game .q-num-tag { margin-bottom: 8px !important; font-size: 9px !important; } #screen-spectator-game .q-text-big { font-size: clamp(16px,2.1vw,26px) !important; margin-bottom: 12px !important; } #screen-spectator-game .spec-q-text { font-size: clamp(17px,2.2vw,28px) !important; margin-bottom: 12px !important; } .hg-top-bar { height: 42px !important; } /* MC tighter */ #screen-player-game .spec-mc-grid { --mc-badge-w: 46px !important; } #screen-player-game .spec-mc-inner { padding: 8px 12px 8px 46px !important; } #screen-player-game .spec-mc-label { font-size: 16px !important; width: 34px !important; height: 34px !important; border-radius: 11px !important; } #screen-player-game .spec-mc-text { font-size: 13px !important; } #screen-spectator-game .spec-mc-grid { --mc-badge-w: 54px !important; } #screen-spectator-game .spec-mc-inner { padding-left: 54px !important; } #screen-spectator-game .spec-mc-label { font-size: 18px !important; width: 40px !important; height: 40px !important; border-radius: 13px !important; } #screen-spectator-game .spec-mc-text { font-size: 14px !important; } /* FT tighter */ #screen-player-game .ft-area { padding: 10px 14px !important; gap: 8px !important; } #screen-player-game .ft-input { padding: 10px 16px !important; font-size: 16px !important; } #screen-player-game .ft-attempts { max-height: 60px !important; } #screen-player-game .ft-attempt { padding: 4px 10px !important; font-size: 11px !important; } /* Status band tighter */ .prv-result { font-size: 13px !important; height: 50px !important; padding: 0 10px !important; } .prv-result .prv-ico { width: 26px !important; height: 26px !important; font-size: 12px !important; } .prv-result .prv-score { font-size: 18px !important; } #screen-player-game #pmc-result-pill { margin-top: 6px !important; } /* Spec FT tighter */ #screen-spectator-game .spec-bc-ft-input-mock { padding: 10px 18px !important; margin-bottom: 8px !important; } #screen-spectator-game .spec-bc-ft-answer-row { padding: 5px 12px !important; } #screen-spectator-game .spec-bc-ft-answer-text { font-size: 14px !important; } } /* User feedback (post-initial-polish): pills near topbar (with a little breathing room), separator above timer, bigger timer number, smaller chat bubble, further-reduced MC glow — mobile only. */ @media (max-width: 768px) { #screen-player-game .hg-pg-stage { padding-top: 6px !important; } #screen-player-game .hg-pg-qzone { padding-top: 6px !important; } #screen-player-game #p-timer-wrap { margin-top: 16px !important; } #screen-player-game .pg-timer-num, #screen-player-game #p-timer-num { font-size: 22px !important; } .mob-chat-bubble { width: 42px !important; height: 42px !important; font-size: 16px !important; } /* Further-contained MC button glow so it stops clipping on narrow viewports */ .spec-mc-wrap { box-shadow: 0 8px 16px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important; } .spec-mc-wrap.spec-correct-wrap { box-shadow: 0 0 10px rgba(5,150,105,.55), 0 0 12px rgba(5,150,105,.22), 0 8px 16px rgba(0,0,0,.30) !important; } } /* User feedback (round 2): same treatment for desktop player game screen. Trim top stage/qzone padding so pills sit close to topbar (slight padding), decouple timer from pills via margin-top, and force #p-timer-wrap to full width so .pg-timer-bar can extend to its 760px max-width cap on wide screens instead of being constrained by .hg-pg-fit-content's align-items:center default. */ @media (min-width: 769px) { #screen-player-game .hg-pg-stage { padding-top: 12px !important; } #screen-player-game .hg-pg-qzone { padding-top: 8px !important; } #screen-player-game #p-timer-wrap { width: 100% !important; margin-top: 24px !important; } } /* ── MOBILE PREVIEW MODE (class injected by INDEX - Mobile Preview.html) ── Mirrors the @media(max-width:768px) block so it fires at any viewport width. The JS toggle (1111) has been removed — this class is only applied by the preview wrapper file and never present in production. ───────────────────────────────────────────────────────────────────────── */ body.mobile-preview{overflow:hidden;} body.mobile-preview #screen-player-game{max-width:390px;width:390px;margin:0 auto;border-left:1.5px solid color-mix(in srgb, var(--pink) 25%, transparent);border-right:1.5px solid color-mix(in srgb, var(--pink) 25%, transparent);position:relative;} body.mobile-preview .mob-tabs{display:none;} body.mobile-preview #screen-player-game .pg-mob-dock{display:flex;position:absolute;bottom:0;left:0;right:0;z-index:var(--z-chatbubble);gap:8px;padding:10px 16px 16px;background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--bg) 92%, transparent) 48%);} body.mobile-preview #screen-player-game .mob-chat-bubble{display:none;} body.mobile-preview #screen-player-game .hg-pg-panel{padding-bottom:84px;} body.mobile-preview #screen-player-game .hg-tb-mark{display:none;} body.mobile-preview #screen-player-game .hg-tb-left .hg-tb-sep{display:none;} body.mobile-preview #screen-player-game .hg-tb-left .hg-tb-label{display:none;} body.mobile-preview #screen-player-game .hg-tb-value{font-size:11px;max-width:72px;} body.mobile-preview #screen-player-game .hg-top-bar{padding:0 10px;justify-content:space-between;} body.mobile-preview #screen-spectator-game .hg-tb-left{display:none;} body.mobile-preview #screen-spectator-game .hg-top-bar{padding:0 10px;justify-content:space-between;} body.mobile-preview .hg-top-bar{height:46px;} body.mobile-preview .hg-tb-right{gap:5px;max-width:calc(100% - 40px);} body.mobile-preview .tb-btn-label{display:none;} body.mobile-preview .tb-pill-lbl{display:none;} body.mobile-preview .hg-tb-pill{font-size:7px;padding:0 8px;height:20px;letter-spacing:1px;flex-shrink:1;min-width:0;} body.mobile-preview .hg-tb-pill strong{font-size:9px;} /* Fix pill sizes for mobile-preview — matches @media block above */ body.mobile-preview #screen-player-game .hg-tb-pill,body.mobile-preview #screen-spectator-game .hg-tb-pill{height:20px!important;padding:0 8px!important;font-size:7px!important;letter-spacing:1px!important;flex-shrink:1!important;min-width:0!important;} body.mobile-preview #screen-player-game .hg-tb-pill strong,body.mobile-preview #screen-spectator-game .hg-tb-pill strong{font-size:9px!important;} body.mobile-preview.hard-mode #screen-player-game #p-timer-num{font-size:48px!important;background-image:linear-gradient(90deg,#FFA040 0%,#FF5028 17%,#FF2020 34%,#CC0018 51%,#880010 68%,#FF8030 85%,#FFA040 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;animation:holo-shift 6s linear infinite!important;} body.mobile-preview.hard-mode #screen-spectator-game #sp-timer-num{font-size:56px!important;} body.mobile-preview .hg-tb-copy-btn{font-size:9px;padding:0 2px 0 3px;} body.mobile-preview .hg-tb-btn{font-size:13px;height:20px;padding:0 9px;letter-spacing:0;border-radius:6px;flex-shrink:0;} body.mobile-preview #screen-player-game .hg-pg-root{flex-direction:column;overflow:hidden;} body.mobile-preview #screen-player-game .hg-pg-stage{flex:1;padding:4px 6px 10px;overflow:hidden;min-height:0;} body.mobile-preview #screen-player-game .hg-pg-panel{width:100%;flex:1;height:auto;border-left:none;overflow-y:auto;} body.mobile-preview #screen-player-game .hg-pg-qzone{padding:4px 4px 8px!important;gap:3px!important;} body.mobile-preview #screen-player-game[data-mob-tab="answer"] .hg-pg-panel{display:none;} body.mobile-preview #screen-player-game[data-mob-tab="standings"] .hg-pg-stage{display:none;} body.mobile-preview #screen-player-game .q-text-big{font-size:18px!important;margin-bottom:12px!important;line-height:1.3!important;} body.mobile-preview #screen-player-game .q-num-tag{font-size:9px!important;margin-bottom:8px!important;padding:3px 12px!important;} body.mobile-preview #screen-player-game .spec-bc-q-header .q-num-tag, body.mobile-preview #screen-player-game .spec-bc-q-header .spec-bc-q-cat-pill{padding:3px 10px!important;font-size:8px!important;letter-spacing:2.5px!important;} body.mobile-preview #screen-spectator-game .spec-bc-q-num-pill, body.mobile-preview #screen-spectator-game .spec-bc-q-cat-pill{padding:5px 14px!important;font-size:10px!important;letter-spacing:3px!important;} body.mobile-preview .spec-bc-q-header{gap:6px!important;margin-bottom:10px!important;} body.mobile-preview #screen-player-game #p-timer-wrap{width:100%!important;} body.mobile-preview #screen-player-game .pg-timer-bar{height:8px!important;max-width:none!important;width:calc(100% - 18px)!important;margin:0 auto 6px!important;} body.mobile-preview #screen-player-game .pg-timer-num{font-size:18px!important;margin-bottom:4px!important;} body.mobile-preview #screen-player-game #p-timer-num{font-size:18px!important;} body.mobile-preview #screen-player-game .pg-timer-num{font-size:24px!important;} body.mobile-preview #screen-player-game #p-timer-num{font-size:24px!important;} body.mobile-preview #screen-spectator-game .spec-bc-timer-bar{height:10px!important;} body.mobile-preview #screen-spectator-game #sp-timer-num{font-size:44px!important;} body.mobile-preview #screen-player-game .spec-mc-grid{gap:6px!important;margin-bottom:8px!important;--mc-badge-w:38px!important;--mc-r:22px!important;} body.mobile-preview #screen-player-game .spec-mc-inner{padding:9px 12px 9px 38px!important;min-height:0!important;} body.mobile-preview #screen-player-game .spec-mc-inner::after{top:10px!important;bottom:10px!important;} body.mobile-preview #screen-player-game .spec-mc-text{font-size:13px!important;line-height:1.2!important;padding-right:46px!important;} body.mobile-preview #screen-player-game .spec-mc-label{font-size:15px!important;width:28px!important;height:28px!important;border-radius:9px!important;} body.mobile-preview #screen-player-game .spec-mc-pct{font-size:18px!important;min-width:38px!important;right:10px!important;} body.mobile-preview #screen-player-game .ft-area{padding:10px 14px!important;gap:8px!important;max-width:100%!important;} body.mobile-preview #screen-player-game .ft-input{padding:10px 14px!important;font-size:16px!important;} body.mobile-preview #screen-player-game .ft-attempts{max-height:60px!important;gap:4px!important;} body.mobile-preview #screen-player-game .ft-attempt{padding:5px 10px!important;font-size:11px!important;} body.mobile-preview #screen-player-game #pmc-result-pill{margin-top:8px!important;margin-bottom:10px!important;width:calc(100% - 16px)!important;} body.mobile-preview .prv-result{font-size:14px!important;height:64px!important;padding:0 12px 0 10px!important;} body.mobile-preview .prv-result .prv-ico{width:30px!important;height:30px!important;font-size:14px!important;} body.mobile-preview .prv-result .prv-score{font-size:20px!important;} body.mobile-preview .prv-result .prv-tnum{font-size:36px!important;width:58px!important;} body.mobile-preview .prv-result .prv-tmeta{font-size:8px!important;letter-spacing:1.2px!important;} body.mobile-preview .prv-tin .tin-full,body.mobile-preview .prv-tq .tq-full{display:none;} body.mobile-preview .prv-tin .tin-short,body.mobile-preview .prv-tq .tq-short{display:inline;} body.mobile-preview #screen-player-game .rename-footer{display:none!important;} body.mobile-preview #screen-player-game .hg-pg-chat{display:none;} body.mobile-preview #mob-float-msgs{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;bottom:88px;left:50%;transform:translateX(-50%);width:min(320px,90vw);z-index:var(--z-floatmsg);pointer-events:none;} body.mobile-preview .mob-chat-bubble{display:flex;align-items:center;justify-content:center;position:fixed;bottom:22px;right:18px;z-index:var(--z-chatbubble);width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--ac-teal),var(--blue),var(--pink),var(--ac-gold));border:none;cursor:pointer;font-size:20px;box-shadow:0 4px 18px color-mix(in srgb, var(--pink) 50%, transparent);transition:transform 0.15s,opacity 0.2s;animation:bubble-glow 2.5s ease-in-out infinite;} body.mobile-preview .mob-chat-bubble.hidden{opacity:0;pointer-events:none;transform:scale(0.75);} body.mobile-preview .mob-chat-overlay{display:flex;flex-direction:column;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-chatsheet);height:62vh;height:62dvh;background:rgba(9,4,20,0.92);backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb, var(--purple) 24%, transparent);border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform 0.30s cubic-bezier(0.16,1,0.3,1);} body.mobile-preview .mob-chat-overlay.open{transform:translateY(0);} body.mobile-preview .mob-chat-input-row{display:flex;gap:8px;padding:10px 12px;flex-shrink:0;border-top:1px solid color-mix(in srgb, var(--purple) 12%, transparent);align-items:center;} body.mobile-preview .mob-chat-input-row input{flex:1;background:rgba(255,255,255,0.04);border:1px solid color-mix(in srgb, var(--purple) 18%, transparent);border-radius:10px;color:#fff;font-size:13px;padding:9px 12px;font-family:inherit;} body.mobile-preview #screen-spectator-game .spec-bc-main{flex-direction:column;overflow:hidden;} body.mobile-preview #screen-spectator-game .spec-bc-stage{padding:12px 14px 10px;overflow:hidden;min-height:0;flex:1;} body.mobile-preview #screen-spectator-game .spec-bc-rail{width:100%;max-height:38vh;max-height:38dvh;border-left:none;border-top:1px solid color-mix(in srgb, var(--pink) 16%, transparent);} body.mobile-preview #screen-spectator-game .spec-q-text{font-size:18px!important;margin-bottom:12px!important;line-height:1.25!important;} body.mobile-preview #screen-spectator-game .spec-mc-grid{grid-template-columns:1fr!important;gap:6px!important;--mc-badge-w:46px!important;--mc-r:22px!important;} body.mobile-preview #screen-spectator-game .spec-mc-inner{padding:8px 12px 8px 46px!important;min-height:0!important;} body.mobile-preview #screen-spectator-game .spec-mc-inner::after{top:10px!important;bottom:10px!important;} body.mobile-preview #screen-spectator-game .spec-mc-label{font-size:16px!important;width:34px!important;height:34px!important;border-radius:11px!important;} body.mobile-preview #screen-spectator-game .spec-mc-text{font-size:13px!important;line-height:1.2!important;} body.mobile-preview #screen-spectator-game .spec-mc-pct{font-size:18px!important;min-width:38px!important;} body.mobile-preview #screen-spectator-game .spec-bc-ft-input-mock{padding:10px 14px!important;margin-bottom:8px!important;} body.mobile-preview #screen-spectator-game .spec-bc-ft-answer-row{padding:5px 10px!important;gap:8px!important;} body.mobile-preview #screen-spectator-game .spec-bc-ft-team{width:80px!important;font-size:9px!important;} body.mobile-preview #screen-spectator-game .spec-bc-ft-answer-text{font-size:13px!important;} body.mobile-preview #screen-spectator-game .spec-bc-ft-status{font-size:8px!important;} /* ── MOBILE HOST MODE ── body.host-mobile = desktop 📲 toggle for testing @media(max-width:768px) = auto-fires on actual phones Shows: topbar · code · QR · active Q · timer · reveal · question picker · end game Hides: broadcast bar · right panel (teams/LB/answers/chat) · question history ─────────────────────────────────────────────────────────────────────────────── */ /* Toggle button only useful on desktop — hide it on actual phones */ @media(max-width:768px){.tb-btn-hostmob{display:none!important;}} /* ── host cockpit at narrow widths ── ONE ruleset serves real phones (body.is-narrow, set by matchMedia in app-2.js) AND the desktop "Mobile View" preview (body.host-mobile). ── */ :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-bc-bar, :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel, :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-hist-card{display:none!important;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-tb-left{display:none;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-top-bar{justify-content:flex-end;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-tb-right{max-width:100%;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-stage{padding:14px 16px 80px!important;width:100%;overflow-y:auto;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-aq-header{flex-direction:column;gap:10px;align-items:flex-start;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-aq-timer-set{width:100%;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-aq-next-timer{text-align:left;} :is(body.host-mobile,body.is-narrow) #screen-host #host-timer-num{font-size:60px!important;} :is(body.host-mobile,body.is-narrow) #screen-host .timer-preset{padding:10px 16px!important;font-size:14px!important;} :is(body.host-mobile,body.is-narrow) #screen-host #reveal-btn{font-size:16px!important;padding:16px!important;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-q-header{flex-direction:column;gap:8px;align-items:flex-start;} :is(body.host-mobile,body.is-narrow) #screen-host .q-mode-tabs{width:100%;} :is(body.host-mobile,body.is-narrow) #screen-host .q-tab{flex:1;text-align:center;} :is(body.host-mobile,body.is-narrow) #screen-host #q-set-list, :is(body.host-mobile,body.is-narrow) #screen-host #upload-q-list{max-height:none!important;} :is(body.host-mobile,body.is-narrow) #screen-host .q-set-item{padding:12px 14px!important;} /* cockpit-bottom-sheets: Standings / Answers pills in the dock open the (hidden) right panel as a 70vh bottom sheet — same DOM the renderers already keep up to date. */ .hg-dock-pills{display:none;gap:8px;justify-content:center;margin-bottom:8px;} .hg-dock-pill{background:rgba(10,6,22,0.85);border:1px solid color-mix(in srgb, var(--purple) 40%, transparent);color:var(--lav);border-radius:999px;padding:7px 16px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;} .hg-panel-sheet-close{display:none;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-dock-pills{display:flex;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open{ display:flex!important;position:fixed;left:0;right:0;bottom:0;height:70vh;height:70dvh; z-index:var(--z-drawer);border-radius:20px 20px 0 0; border-top:1px solid color-mix(in srgb, var(--pink) 30%, transparent); box-shadow:0 -18px 60px rgba(0,0,0,0.6); background:linear-gradient(180deg,color-mix(in srgb, var(--rail-1) 97%, transparent),color-mix(in srgb, var(--rail-2) 99%, transparent)); } :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open .hg-panel-sheet-close{ display:block;flex-shrink:0;width:100%;padding:12px;background:transparent;border:none;border-bottom:1px solid color-mix(in srgb, var(--purple) 20%, transparent); color:var(--lav);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer; } /* show only the picked section inside the sheet */ :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open[data-sheet="standings"] :is(.hg-host-ans-section,.hg-host-chat){display:none!important;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open[data-sheet="answers"] :is(.hg-host-teams-section,.hg-host-chat){display:none!important;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open .hg-host-teams-section, :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-panel.sheet-open .hg-host-ans-section{flex:1!important;overflow-y:auto!important;max-height:none!important;} /* pinned-reveal-dock: Reveal / Continue / Next / Wrap Up live at the thumb, stage scrolls under */ :is(body.host-mobile,body.is-narrow) #screen-host #reveal-wrap{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-chatbubble);margin:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent 0%,rgba(8,4,18,0.88) 26%,rgba(8,4,18,0.97) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-stage{padding-bottom:170px!important;} /* keyboard-answer-keys: visible focus ring for tab navigation on live tiles */ #screen-player-game .spec-mc-wrap.pmc-live:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:inherit;} /* topbar-priorities-390: phone hosts — Audience + Mobile-View rows are meaningless on a real phone; the drawer instead carries Broadcast + Manage Teams (hidden on desktop, which has both) */ .spec-bc-menu-bc-row{display:none;gap:6px;margin:4px 0;} .spec-bc-menu-bc-row input{flex:1;background:rgba(0,0,0,0.35);border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);border-radius:8px;color:var(--text);font-family:'Quicksand',sans-serif;font-size:13px;padding:9px 12px;} .spec-bc-menu-bc-row button{background:color-mix(in srgb, var(--purple) 18%, transparent);border:1px solid color-mix(in srgb, var(--purple) 45%, transparent);border-radius:8px;color:var(--lav);font-size:15px;padding:6px 12px;cursor:pointer;} #host-menu-manage-btn{display:none;} body.is-narrow #screen-host .spec-bc-menu-bc-row{display:flex;} body.is-narrow #screen-host #host-menu-manage-btn{display:flex;} body.is-narrow #screen-host #present-toggle{display:none!important;} body.is-narrow #screen-host #host-menu-mob-btn{display:none!important;} /* mobile-status-strip: answered-count chip beside the running timer (shown on phones only — desktop has the Live Answers rail) */ .hg-host-in-chip{display:none;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb, var(--purple) 40%, transparent);color:var(--lav);white-space:nowrap;align-self:center;} .hg-host-in-chip.all-in{border-color:color-mix(in srgb, var(--ac-teal) 55%, transparent);color:var(--ac-teal);background:color-mix(in srgb, var(--ac-teal) 12%, transparent);animation:hg-allin-pulse 1.6s ease-in-out infinite;} :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-in-chip{display:inline-flex;} /* Now Playing card (host, EVERY width — alexi round 9): label + Qn + big timer, timer bar, question text, all four options inline (correct tagged; pct slots reserved and filled IN PLACE at reveal — zero shift), answered progress. */ #screen-host .hm-np-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;} #screen-host .hm-np-label{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:2px;text-transform:uppercase;background:var(--rail-label-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} #screen-host .hm-np-qn{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:2px;color:color-mix(in srgb, var(--text-3) 80%, transparent);} #screen-host .hm-np-timer{margin-left:auto;font-family:'Oxanium',sans-serif;font-weight:800;font-size:26px;line-height:1;min-height:26px;background:linear-gradient(180deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} #screen-host .hm-np-timer.urgent{background:none;-webkit-text-fill-color:var(--ac-danger);} #screen-host .hm-np-bar{display:block;height:5px;border-radius:3px;background:var(--timer-track);overflow:hidden;margin-bottom:10px;} #screen-host .hm-np-bar i{display:block;height:100%;border-radius:3px;background:var(--timer-grad);transition:width 1s linear;} #screen-host .hm-np-bar i.urgent{background:var(--ac-danger);} #screen-host .hm-np-opts{display:flex;flex-direction:column;gap:6px;margin-top:10px;} #screen-host .hm-np-opt{display:flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb, var(--purple) 22%, transparent);background:color-mix(in srgb, var(--purple) 6%, transparent);border-radius:10px;padding:8px 11px;min-width:0;} #screen-host .hm-np-opt.correct{background:rgba(5,150,105,0.12);border-color:rgba(52,211,153,0.35);} #screen-host .hm-np-opt-letter{font-family:'Oxanium',sans-serif;font-weight:800;font-size:13px;color:color-mix(in srgb, var(--lav) 70%, transparent);flex-shrink:0;width:14px;} #screen-host .hm-np-opt.correct .hm-np-opt-letter{color:#34D399;} #screen-host .hm-np-opt-text{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:color-mix(in srgb, var(--lav) 80%, transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #screen-host .hm-np-opt.correct .hm-np-opt-text{color:#C8F5E4;} #screen-host .hm-np-opt-pct{flex-shrink:0;min-width:40px;text-align:right;font-family:'Oxanium',sans-serif;font-weight:800;font-size:13px;color:var(--text);} #screen-host .hm-np-opt.correct .hm-np-opt-pct{color:#34D399;} #screen-host .hm-np-key{display:flex;align-items:center;gap:8px;background:rgba(5,150,105,0.12);border:1px solid rgba(52,211,153,0.35);border-radius:10px;padding:8px 11px;margin-top:10px;min-width:0;} #screen-host .hm-np-key-letter{font-family:'Oxanium',sans-serif;font-weight:800;font-size:13px;color:#34D399;flex-shrink:0;} #screen-host .hm-np-key-text{font-size:12.5px;font-weight:600;color:#C8F5E4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #screen-host .hm-np-key-tag{margin-left:auto;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:#34D399;flex-shrink:0;} #screen-host .hm-np-opt .hm-np-key-tag{margin-left:0;} #screen-host .hm-np-progress{display:flex;align-items:center;gap:10px;margin-top:10px;} #screen-host .hm-np-in{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);flex-shrink:0;} #screen-host .hm-np-bar2{flex:1;height:4px;border-radius:2px;background:var(--timer-track);overflow:hidden;} #screen-host .hm-np-bar2 i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--ac-teal),var(--blue));transition:width 0.3s ease;} #screen-host .hm-np-think{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb, var(--text-3) 75%, transparent);flex-shrink:0;} #screen-host .hm-np-in.all-in{color:var(--ac-teal);animation:hg-allin-pulse 1.6s ease-in-out infinite;} /* …and the stage timer row slims down everywhere — the card carries the digit + bar + answered count; only the Stop Timer control stays. */ #screen-host #host-timer-num{display:none;} #screen-host #host-timer-running .timer-bar-bg{display:none;} #screen-host .hg-host-in-chip{display:none!important;} /* collapse-qcard-mid-question: stage = question + answers + reveal while live. The Questions card folds to its header (click it to peek); history hides. */ body.host-q-live #screen-host .hg-host-q-card:not(.peek) > *:not(.hg-host-q-header){display:none!important;} body.host-q-live #screen-host .hg-host-q-card{opacity:0.8;} body.host-q-live #screen-host .hg-host-q-card .hg-host-q-header{cursor:pointer;} body.host-q-live #screen-host .hg-host-q-card:not(.peek) .hg-host-q-header::after{content:'live — tap to peek';font-family:'Space Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 40%, transparent);margin-left:auto;} body.host-q-live #screen-host .hg-host-hist-card{display:none!important;} /* thinking-rows-feed: dimmed placeholder rows for teams still answering */ #screen-host .ans-entry.ans-thinking{opacity:0.45;} #screen-host .ans-entry.ans-thinking .ans-by{font-style:italic;} .ans-think-dots{display:inline-block;animation:think-dots 1.4s steps(4,end) infinite;} @keyframes think-dots{0%{opacity:0.2;}50%{opacity:1;}100%{opacity:0.2;}} /* topbar-autopilot-pill: persistent engine-beat status in the host top bar */ #screen-host .hg-tb-auto{cursor:pointer;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 55%, transparent);white-space:nowrap;transition:color .2s, background .2s, border-color .2s;} #screen-host .hg-tb-auto.on{background:color-mix(in srgb, var(--ac-teal) 14%, transparent);border-color:color-mix(in srgb, var(--ac-teal) 50%, transparent);color:var(--ac-teal);} #screen-host .hg-tb-wrapup{color:color-mix(in srgb, var(--ac-gold) 80%, var(--text));border-color:color-mix(in srgb, var(--ac-gold) 30%, transparent);} #screen-host .hg-tb-wrapup:hover{background:color-mix(in srgb, var(--ac-gold) 14%, transparent);} /* phones: the cockpit banner already shows auto state; keep the top bar lean */ :is(body.host-mobile,body.is-narrow) #screen-host #hd-auto-pill, :is(body.host-mobile,body.is-narrow) #screen-host #hd-wrapup-btn{display:none!important;} /* compact-timer-row: presets become one swipeable row instead of a ragged 2-3 row wrap */ :is(body.host-mobile,body.is-narrow) #screen-host .timer-presets{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;} :is(body.host-mobile,body.is-narrow) #screen-host .timer-presets::-webkit-scrollbar{display:none;} :is(body.host-mobile,body.is-narrow) #screen-host .timer-preset, :is(body.host-mobile,body.is-narrow) #screen-host #custom-timer-input{flex-shrink:0;} /* sticky-start-row: the Start/Shuffle header stays pinned while scrolling a long question list */ :is(body.host-mobile,body.is-narrow) #screen-host .hg-host-qset-hdr{position:sticky;top:0;z-index:5;background:rgba(14,7,28,0.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 8px;margin:0 -8px 4px;border-radius:10px;} /* Glittery Rain — holo-palette pixel sparkles, fires on correct answer */ @keyframes glr-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } 90% { opacity: 1; } 100% { transform: translate3d(var(--glr-x, 0px), 110vh, 0) rotate(360deg); opacity: 0; } } .glr-particle { position: fixed; top: -8px; width: 4px; height: 4px; pointer-events: none; z-index: var(--z-confetti); background: currentColor; border-radius: 1px; animation: glr-fall var(--glr-dur, 2.8s) ease-in forwards; } /* Hard Mode palette swap */ body.hard-mode .glr-particle { color: var(--hm-red, #C02850); } @media (prefers-reduced-motion: reduce) { .glr-particle { animation-duration: 0.01ms; } } /* ════════ PLAYER MOBILE — full-width content + natural scroll (retire the fit-scaler on phones) ════════ */ /* On phones the player's content shrink-wrapped to the tile width and the fit-scaler shrank it to ~70%, leaving big side gaps + a scrollbar + clipping the submit state. Here we fill the width, kill the transform (CSS !important beats the scaler's inline style), and let the qzone scroll naturally. */ @media(max-width:768px){ #screen-player-game .hg-pg-stage{padding-left:8px!important;padding-right:8px!important;} #screen-player-game .hg-pg-qzone{display:block!important;width:100%!important;overflow-y:auto!important;padding:10px 10px 16px!important;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--pink) 35%, transparent) transparent;} #screen-player-game .hg-pg-qzone::-webkit-scrollbar{width:5px;} #screen-player-game .hg-pg-qzone::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--pink) 30%, transparent);border-radius:3px;} #screen-player-game .hg-pg-qzone [data-fit-viewport]{width:100%!important;height:auto!important;display:block!important;} #screen-player-game .hg-pg-qzone [data-fit-content]{width:100%!important;transform:none!important;display:block!important;} #screen-player-game #player-q-area{width:100%!important;} #screen-player-game .spec-mc-grid{grid-template-columns:1fr!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;} } /* ── THEME SWITCHER (reskin playtest control) ── */ /* Theme switcher is INLINE now (host drawer + setup card) — floating pill removed */ .hcm-theme-btns{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;} .theme-switch-btn{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;color:rgba(255,255,255,0.65);background:transparent;border:1px solid rgba(255,255,255,0.10);border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .15s,background .15s,border-color .15s;} .theme-switch-btn:hover{color:#fff;background:rgba(255,255,255,0.08);} .theme-switch-btn.active{color:#fff;background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.32);} /* Pre-game (landing/join/setup) bg follows the theme on neon/sky/tonka; dark keeps its #1A0D32 */ [data-theme="neon"] body.on-landing,[data-theme="neon"] body.on-prejoin,[data-theme="sky"] body.on-landing,[data-theme="sky"] body.on-prejoin,[data-theme="tonka"] body.on-landing,[data-theme="tonka"] body.on-prejoin{background:var(--bg)!important;} /* Standby 3-dot loader (ported from the reskin handoff; dots theme via --pink/--purple/--blue) */ .spec-bc-standby-dots{display:flex;gap:10px;justify-content:center;margin:2px 0;} .spec-bc-standby-dots i{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:sb-dot 1.4s ease-in-out infinite;} .spec-bc-standby-dots i:nth-child(2){animation-delay:.2s;background:var(--purple);box-shadow:0 0 10px var(--purple);} .spec-bc-standby-dots i:nth-child(3){animation-delay:.4s;background:var(--blue);box-shadow:0 0 10px var(--blue);} @keyframes sb-dot{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-6px);}} /* Tonka MC tiles — flat black glass + glowing orange text (only theme that recolors the tiles) */ [data-theme="tonka"] .spec-mc-wrap{background:rgba(7,7,10,0.5);box-shadow:0 10px 24px rgba(0,0,0,.34);border:1px solid rgba(255,150,70,.28);} [data-theme="tonka"] .spec-mc-wrap::before{display:none;} [data-theme="tonka"] .spec-mc-inner::before{display:none;} [data-theme="tonka"] .spec-mc-inner::after{background:rgba(255,140,50,.45);} [data-theme="tonka"] .spec-mc-label{color:#FF9436;text-shadow:0 0 22px rgba(255,140,50,.55),0 1px 2px rgba(0,0,0,.5);} [data-theme="tonka"] .spec-mc-text{color:#FF9436;text-shadow:0 0 16px rgba(255,140,50,.30),0 1px 2px rgba(0,0,0,.5);} [data-theme="tonka"] .spec-mc-pct{color:#FF9436;text-shadow:0 0 16px rgba(255,140,50,.40),0 1px 2px rgba(0,0,0,.5);} /* Sky: rotating standby text needs more contrast vs the bright navy bg (other themes read fine) */ [data-theme="sky"] .wait-think-wrap span{color:color-mix(in srgb, var(--text-2) 82%, transparent);} /* Player standby: dots aren't in a flex-gap container like the audience, so give them breathing room */ #screen-player-game .spec-bc-standby-dots{margin:22px 0 16px;} /* Sky: lift the muted host-chrome labels (—lav goes light-blue on sky, washes out on navy) */ [data-theme="sky"] #screen-host .hg-tb-btn,[data-theme="sky"] #screen-host .btn-ghost,[data-theme="sky"] #screen-host .btn-outline,[data-theme="sky"] #screen-host .timer-preset,[data-theme="sky"] #screen-host .ans-type-btn,[data-theme="sky"] #screen-host .hg-host-manage-btn{color:color-mix(in srgb, var(--text-2) 85%, transparent);} /* lobby-stage-hero: the empty host stage becomes the join moment */ .hlh{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px 14px;text-align:center;} .hlh-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:color-mix(in srgb, var(--lav) 55%, transparent);} .hlh-code{font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(44px,6vw,72px);letter-spacing:14px;line-height:1;margin-left:14px;background:linear-gradient(92deg,var(--pink),var(--violet),var(--purple),var(--blue-2));background-size:180% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:holo-shift 9s ease infinite;filter:drop-shadow(0 0 20px color-mix(in srgb, var(--pink) 20%, transparent));} .hlh-actions{display:flex;gap:8px;} .hlh-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:640px;margin-top:4px;} .hlh-chip{background:color-mix(in srgb, var(--purple) 12%, transparent);border:1px solid color-mix(in srgb, var(--purple) 35%, transparent);color:var(--text);border-radius:999px;padding:6px 14px;font-family:'Quicksand',sans-serif;font-size:13px;font-weight:600;animation:hlh-chip-in 0.35s cubic-bezier(0.34,1.56,0.64,1);} @keyframes hlh-chip-in{0%{opacity:0;transform:scale(0.7);}100%{opacity:1;transform:scale(1);}} .hlh-waiting{font-family:'Quicksand',sans-serif;font-size:13px;font-style:italic;color:color-mix(in srgb, var(--lav) 50%, transparent);} /* spectator pre-game join hero: code + QR on the projector until Q1 */ .spec-join-hero{gap:14px;} .spec-join-qr-card{background:#FFFFFF;padding:12px;border-radius:18px;box-shadow:0 0 40px color-mix(in srgb, var(--pink) 22%, transparent);line-height:0;} .spec-join-qr-card img,.spec-join-qr-card canvas{width:clamp(170px,26vh,300px)!important;height:auto!important;} .spec-join-sub{font-family:'Quicksand',sans-serif;font-size:14px;color:color-mix(in srgb, var(--lav) 65%, transparent);} .spec-join-sub strong{color:var(--text);} /* controls-menu-four-groups: drawer rows + state chips */ .hcm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;} .hcm-row-lbl{font-family:'Quicksand',sans-serif;font-size:13px;color:color-mix(in srgb, var(--lav) 75%, transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hcm-chip{flex-shrink:0;background:color-mix(in srgb, var(--purple) 14%, transparent);border:1px solid color-mix(in srgb, var(--purple) 45%, transparent);color:var(--lav);padding:5px 14px;border-radius:999px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.15s ease;white-space:nowrap;} .hcm-chip:hover{background:color-mix(in srgb, var(--purple) 28%, transparent);color:var(--text);} .hcm-chip.on{background:color-mix(in srgb, var(--ac-teal) 14%, transparent);border-color:color-mix(in srgb, var(--ac-teal) 50%, transparent);color:var(--ac-teal);} .hcm-chip.stay{background:color-mix(in srgb, var(--ac-teal) 14%, transparent);border-color:color-mix(in srgb, var(--ac-teal) 45%, transparent);color:var(--ac-teal);} .hcm-now{float:right;font-size:8px;opacity:0.7;letter-spacing:1px;} .hcm-timer-row{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;} .hcm-timer-row::-webkit-scrollbar{display:none;} .hcm-timer-row .timer-preset{flex-shrink:0;} .hcm-end-row{border:1px solid color-mix(in srgb, var(--ac-gold) 30%, transparent)!important;color:color-mix(in srgb, var(--ac-gold) 80%, var(--text))!important;} /* Two-tap-armed end-game buttons (see armConfirm) */ .ec-armed{background:color-mix(in srgb, var(--ac-danger) 18%, transparent)!important;border-color:color-mix(in srgb, var(--ac-danger) 55%, transparent)!important;color:color-mix(in srgb, var(--ac-danger) 60%, var(--text))!important;animation:ec-armed-pulse 1s ease-in-out infinite;} @keyframes ec-armed-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ac-danger) 35%, transparent);}50%{box-shadow:0 0 0 5px transparent;}} /* ── Answer-info line (optional q.info) ── Player: rides in under the MC grid / FT area at the colour pop. Host: quiet row inside the Now Playing card, visible from question push. Spectator: reuses the reserved meta slot (no new class needed). */ .rv-info{margin:14px auto 0;max-width:640px;width:100%;padding:10px 14px;border-radius:10px;background:var(--card);border:1px solid color-mix(in srgb, var(--purple) 14%, transparent);border-left:3px solid color-mix(in srgb, var(--ac-teal) 60%, transparent);font-family:'Quicksand',sans-serif;font-size:13px;line-height:1.5;color:color-mix(in srgb, var(--lav) 82%, transparent);text-align:left;animation:rvInfoIn 0.45s ease;} @keyframes rvInfoIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} .hm-np-info{margin-top:8px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb, var(--ac-teal) 6%, transparent);border-left:2px solid color-mix(in srgb, var(--ac-teal) 50%, transparent);font-family:'Quicksand',sans-serif;font-size:12px;line-height:1.45;color:color-mix(in srgb, var(--lav) 80%, transparent);text-align:left;}