:root{color-scheme:dark;--bg:#061018;--card:#0d2230;--card2:#102d3b;--text:#f6fbff;--muted:#9fc0cc;--cyan:#2ff3ff;--gold:#ffd166;--pink:#ff4fd8;--danger:#ff6b6b;--ok:#63e6be}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#123848,#061018 62%);color:var(--text);min-height:100vh}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px clamp(18px,4vw,54px);border-bottom:1px solid #234}.eyebrow{margin:0;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;font-size:12px}.slogan{margin:8px 0 0;color:var(--muted);font-weight:700}h1{margin:.15em 0 0;font-size:clamp(34px,7vw,78px);line-height:1}h2,h3{margin:.2em 0 .6em}.header-pills{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.pill{padding:8px 12px;border:1px solid var(--cyan);border-radius:999px;color:var(--cyan)}.watermark{border-color:rgba(255,209,102,.65);color:var(--gold)}.card{background:linear-gradient(145deg,rgba(16,45,59,.95),rgba(8,25,35,.96));border:1px solid rgba(47,243,255,.24);box-shadow:0 12px 44px rgba(0,0,0,.32);border-radius:24px;padding:20px}.screen-card{position:relative}.screen-footer{margin-top:18px;padding-top:12px;border-top:1px solid rgba(159,192,204,.22);color:var(--muted);font-size:13px}small.muted{color:#94a3b8;font-size:.85rem;display:block;margin-top:4px}.login-card{max-width:980px;margin:28px auto}.layout{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(260px,.8fr);gap:18px;padding:20px}.master-panel{grid-column:1/-1}.hidden{display:none!important}label{display:block;margin:10px 0;color:var(--muted)}input,select,button{font:inherit;border-radius:14px;border:1px solid #315260;background:#07151d;color:var(--text);padding:12px 14px}input,select{width:100%;margin-top:6px}button{cursor:pointer;font-weight:800}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:linear-gradient(135deg,var(--cyan),#1676ff);color:#021014}.secondary{background:#123848}.ghost{background:transparent}.error{color:var(--danger);min-height:1.4em}.muted{color:var(--muted)}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px;margin:14px 0}.avatar-choice{padding:6px;border-radius:18px;border:2px solid transparent;background:#07151d}.avatar-choice img{width:100%;display:block;border-radius:14px}.avatar-choice.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,209,102,.18)}.avatar-choice.taken{opacity:.42}.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.mini-avatar{width:42px;height:42px;border-radius:12px;vertical-align:middle}.status-text{font-weight:800;color:var(--gold)}.scene{min-height:280px;display:grid;place-items:center;border-radius:22px;background:radial-gradient(circle,#173f50,#07151d);overflow:hidden;margin:16px 0;padding:18px;border:1px solid rgba(47,243,255,.18)}.scene audio{width:min(100%,420px);margin-top:14px}.object3d{width:140px;height:140px;background:linear-gradient(135deg,var(--cyan),var(--pink));clip-path:polygon(50% 0,90% 25%,75% 100%,25% 100%,10% 25%);animation:spin 3.5s linear infinite;box-shadow:0 0 38px rgba(47,243,255,.55)}.frozen .object3d{animation-play-state:paused;filter:saturate(1.4)} .object-stage{display:flex;justify-content:center;align-items:center;width:100%;min-height:280px} .object-image{width:min(100%,340px);height:min(54vw,340px);object-fit:contain;border-radius:24px;background:#0d2230;box-shadow:0 0 32px rgba(47,243,255,.25);will-change:transform,filter} .object-stage.spinning .object-image{animation:obj-spin 5s linear infinite} .frozen .object-image{animation-play-state:paused!important} .revealed .object-image{animation:none!important;filter:blur(0)!important} .celebrity-stage{display:flex;justify-content:center;align-items:center;width:100%} .celebrity-placeholder{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--pink));display:grid;place-items:center;font-size:80px;font-weight:900;color:#021014} .music-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;gap:8px} .music-stage .music-note{font-size:120px;color:var(--gold);text-shadow:0 0 32px rgba(255,209,102,.65)} .music-stage .music-note.pulse{animation:pulse 1.2s ease-in-out infinite} .music-stage .music-comic-image { display: block; margin: 0 auto 12px; width: min(100%, 440px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.35); animation: musicComicFadeIn 320ms ease-out; } @keyframes musicComicFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .reveal-master-layout.music .music-stage .music-comic-image { width: min(100%, 380px); } .paused .music-stage .music-note{animation-play-state:paused;color:var(--pink)} .reveal-callout{margin-top:16px;padding:14px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(255,209,102,.20),rgba(47,243,255,.18));border:1px solid var(--gold);font-size:clamp(18px,3vw,26px);text-align:center;line-height:1.4} .music-note{font-size:120px;color:var(--gold);text-shadow:0 0 32px rgba(255,209,102,.65);animation:pulse 1.2s ease-in-out infinite}.paused .music-note{animation-play-state:paused;color:var(--pink)}.celebrity-image{width:min(100%,440px);height:min(70vw,560px);object-fit:contain;background:#0d2230;border-radius:28px;transition:transform .8s ease;transform:scale(1.02);box-shadow:0 0 42px rgba(255,79,216,.28)}.revealed .celebrity-image{filter:blur(0)!important;transform:scale(1)}.buzzer{width:100%;font-size:clamp(26px,5vw,54px);padding:26px;border-radius:28px;background:linear-gradient(135deg,var(--gold),#ff7a00);color:#160900;box-shadow:0 0 34px rgba(255,209,102,.35)}.leaderboard{list-style:none;padding:0;margin:0;display:grid;gap:10px}.leaderboard li{display:grid;grid-template-columns:auto 42px 1fr auto;gap:10px;align-items:center;background:#07151d;border-radius:16px;padding:10px}.leaderboard img,.roster-item img{width:42px;height:42px;border-radius:12px}.roster{display:grid;gap:10px}.roster-item{display:flex;gap:10px;align-items:center;background:#07151d;border-radius:16px;padding:10px}.master-badge{color:#061018;background:var(--gold);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:900}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.controls label{min-width:220px;flex:1}.danger-zone button{border-color:var(--danger);color:#ffdede}.slots{display:grid;gap:10px}.slot{background:#07151d;border:1px solid #264a58;border-radius:16px;padding:12px}.slot-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.audit{max-height:260px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#d9f7ff}.master-row{display:flex;gap:8px;align-items:center}.master-row input{width:auto;margin:0}@keyframes spin{to{transform:rotateY(360deg) rotateZ(360deg)}}@keyframes obj-spin{from{transform:rotate3d(1,1,0.3,0deg)}to{transform:rotate3d(1,1,0.3,360deg)}}@keyframes pulse{50%{transform:scale(1.12);opacity:.78}}@media(max-width:760px){.hero{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr;padding:12px}.controls{display:grid}.controls label{min-width:0}.header-pills{justify-content:flex-start}} /* v0.6.0 Master command desk and participant responsive refinements */ :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 6px rgba(47,243,255,.14)} .master-hero{min-height:64px;padding:10px clamp(16px,3vw,32px)} .master-hero h1{font-size:clamp(28px,3vw,42px)} .master-hero .slogan{margin-top:2px}.master-hero .eyebrow{font-size:11px} .master-shell{display:grid;grid-template-columns:minmax(420px,520px) minmax(360px,450px) minmax(260px,300px);gap:16px;padding:16px;align-items:start;container-type:inline-size} .master-stage-card{grid-column:1}.command-center{grid-column:2}.master-leaderboard{grid-column:3;position:sticky;top:12px;max-height:calc(100vh - 92px);overflow:auto}.master-panel{grid-column:auto}.master-secondary{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px}.master-secondary details{padding:14px}.master-secondary summary{cursor:pointer;font-weight:900;color:var(--gold)}.danger-zone-card{grid-column:1/-1;border-color:rgba(255,107,107,.55);margin-top:20px}.danger-zone-card h2{color:#ffdede}.compact-master-meta{font-size:14px;color:var(--muted)} .master-control-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}.master-control-bar label{grid-column:1/-1;min-width:0;margin:0}.master-control-bar button{padding:10px 12px}.master-top-slots{gap:8px}.master-top-slots .slot{min-height:68px;padding:8px 10px}.master-top-slots .slot-actions{gap:6px;margin-top:5px}.master-top-slots .slot-actions button{padding:6px 8px;border-radius:10px;font-size:13px}.master-stage-card .scene{min-height:360px}.scene[data-idle="true"]{min-height:80px;padding:12px}.master-stage-card .scene[data-idle="true"]{min-height:80px}.master-stage-card .scene[data-idle="true"] p{margin:0;text-align:center}.master-stage-card .object-image{width:min(100%,430px);height:min(42vw,360px)} .tooltip-catalogue,.tooltip-offscreen{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gz-tooltip{position:fixed;z-index:9999;max-width:320px;padding:10px 12px;border-radius:12px;background:#021014;color:var(--text);border:1px solid var(--cyan);box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:13px;line-height:1.35}.audio-unlock{margin:10px 0}.reveal-playback{margin:12px 0;padding:12px;border:1px solid rgba(255,209,102,.45);border-radius:16px;background:rgba(255,209,102,.08)}.reveal-playback input[type="range"]{accent-color:var(--gold);width:100%}.reveal-playback audio{width:100%;margin-top:8px} .layout{container-type:inline-size}.status-card,.leaderboard-card,.roster-card,.login-card,.scene{container-type:inline-size}.buzzer{min-width:80px;min-height:80px}.object-image{transition:none!important}.music-volume-container input[type="range"],input[data-testid="music-volume"]{accent-color:var(--gold)} @media(max-width:600px){.hero{padding:16px;align-items:flex-start}.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.layout{display:flex;flex-direction:column;padding:12px}.card{padding:16px;border-radius:18px}.buzzer{min-height:96px;font-size:clamp(30px,13vw,58px)}.scene{min-height:220px}.leaderboard li{grid-template-columns:auto 34px 1fr auto}.leaderboard img,.roster-item img{width:34px;height:34px}} @media(min-width:601px) and (max-width:1024px){.avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.layout{grid-template-columns:1fr 1fr}.status-card{grid-column:1/-1}.buzzer{min-height:88px}.scene{min-height:260px}} @media(min-width:1025px) and (max-width:1599px){.avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.layout{grid-template-columns:minmax(420px,1.15fr) minmax(300px,.85fr)}.buzzer{min-height:86px}} @media(min-width:1600px){.avatar-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.layout{grid-template-columns:minmax(520px,1.2fr) minmax(340px,.8fr) minmax(340px,.8fr)}.status-card{grid-column:auto}.roster-card{grid-column:auto}.buzzer{min-height:110px}.scene{min-height:420px}.master-shell{grid-template-columns:minmax(560px,1.25fr) minmax(440px,.9fr) minmax(320px,.65fr)}} @container (max-width:420px){.buzzer{min-height:90px}.slot-actions button{width:100%}.controls{display:grid}} @media(max-width:1180px){.master-shell{grid-template-columns:1fr}.master-stage-card,.command-center,.master-leaderboard,.master-secondary,.danger-zone-card{grid-column:1}.command-center{order:1}.master-stage-card{order:2}.master-leaderboard{order:3;position:static;max-height:none}.master-secondary{order:4;grid-template-columns:1fr}.danger-zone-card{order:5}} .music-volume-container{margin:12px 0;padding:14px;border:1px solid rgba(255,209,102,.55);border-radius:16px;background:rgba(255,209,102,.10)}.music-volume-container label{margin:0;color:var(--gold);font-weight:900}.music-volume-container input[type="range"],input[data-testid="music-volume"]{accent-color:var(--gold);width:100%}.audio-unlock-banner{display:block;width:100%;min-height:68px;margin:12px 0;padding:16px 20px;border:0;border-radius:16px;background:#FFD166;color:#1a1a2e;text-align:center;font-weight:1000;font-size:clamp(17px,3.8vw,24px);box-shadow:0 10px 28px rgba(255,209,102,.32)} /* v0.6.0 fixes and finale */ .continue-controls{display:contents}.dual-continue-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}.dual-continue-controls button{width:100%} .celebrity-stage{min-height:280px;background-color:#0a1620;border-radius:28px;transform:translateZ(0);position:relative;overflow:hidden}.celebrity-stage.celebrity-loading::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1620,#102d3b,#0a1620);background-size:220% 100%;animation:loading-sheen 1.2s linear infinite}.celebrity-image-placeholder{width:min(100%,520px);height:min(54vw,360px);border-radius:28px;background:#0a1620}.celebrity-image{background-color:#0a1620;will-change:filter,transform}.leaderboard{--leaderboard-row-gap:10px;--leaderboard-row-body:62px;--row-height:calc(var(--leaderboard-row-body) + var(--leaderboard-row-gap));--header-padding:24px;position:relative;max-height:calc(var(--row-height) * 16 + var(--header-padding));overflow-y:auto;overflow-x:visible;padding:12px;margin:-12px;scrollbar-color:rgba(47,243,255,.55) rgba(7,21,29,.6)}.leaderboard::before,.leaderboard::after{content:"";position:sticky;display:block;height:18px;z-index:3;pointer-events:none;grid-column:1/-1}.leaderboard::before{top:0;margin-bottom:-18px;background:linear-gradient(to bottom,rgba(13,34,48,.95),rgba(13,34,48,0))}.leaderboard::after{bottom:0;margin-top:-18px;background:linear-gradient(to top,rgba(13,34,48,.95),rgba(13,34,48,0))}.leaderboard li{min-height:var(--leaderboard-row-body);border:1px solid rgba(47,243,255,.10);position:relative;overflow:visible}.leaderboard li.rank-1{border-color:#FFD166;animation:rank-gold-pulse 2s ease-in-out infinite alternate}.leaderboard li.rank-2{border-color:#C0C7D1;animation:rank-silver-pulse 2s ease-in-out infinite alternate}.leaderboard li.rank-3{border-color:#CD7F32;animation:rank-bronze-pulse 2s ease-in-out infinite alternate}.leaderboard li.rank-1::after,.leaderboard li.rank-2::after,.leaderboard li.rank-3::after{content:"✦ ✧ ✦";position:absolute;right:10px;top:-10px;font-size:16px;letter-spacing:3px;opacity:.75;animation:sparkle-spin 2.4s ease-in-out infinite}.leaderboard li.rank-1::after{color:#FFD166}.leaderboard li.rank-2::after{color:#C0C7D1}.leaderboard li.rank-3::after{color:#CD7F32}.finale-overlay{position:fixed;inset:0;z-index:9998;background:rgba(2,8,14,.86);display:grid;place-items:center;padding:24px;overflow:hidden}.finale-fireworks{position:absolute;inset:0;width:100%;height:100%}.finale-content{position:relative;z-index:1;text-align:center;width:min(980px,96vw)}.finale-content h2{font-size:clamp(38px,8vw,86px);text-shadow:0 0 34px rgba(255,209,102,.6)}.finale-winners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,28px);align-items:end}.finale-card{background:linear-gradient(145deg,rgba(16,45,59,.96),rgba(8,25,35,.96));border:3px solid rgba(47,243,255,.3);border-radius:30px;padding:clamp(16px,3vw,34px);min-height:260px;display:grid;place-items:center;position:relative;overflow:visible}.finale-card strong{font-size:clamp(34px,6vw,70px)}.finale-card img,.finale-avatar-placeholder{width:clamp(92px,16vw,160px);height:clamp(92px,16vw,160px);border-radius:32px;background:#07151d;display:grid;place-items:center;font-size:64px}.finale-card h3{font-size:clamp(24px,4vw,46px);margin:.3em 0}.finale-card p{font-size:clamp(18px,3vw,28px);font-weight:900}.finale-card.rank-1{border-color:#FFD166;box-shadow:0 0 60px rgba(255,209,102,.7),0 0 130px rgba(255,209,102,.35);transform:scale(1.08)}.finale-card.rank-2{border-color:#C0C7D1;box-shadow:0 0 50px rgba(192,199,209,.65),0 0 110px rgba(192,199,209,.32)}.finale-card.rank-3{border-color:#CD7F32;box-shadow:0 0 50px rgba(205,127,50,.65),0 0 110px rgba(205,127,50,.32)}.finale-card::after{content:"✦ ✧ ✦ ✧";position:absolute;top:-24px;right:18px;font-size:32px;animation:sparkle-spin 2.1s ease-in-out infinite;color:inherit}.finale-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:22px}.finale-anthem-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}.finale-anthem-controls .ghost{min-width:150px}.finale-card.rank-1::after{color:#FFD166}.finale-card.rank-2::after{color:#C0C7D1}.finale-card.rank-3::after{color:#CD7F32}@keyframes loading-sheen{to{background-position:-220% 0}}@keyframes rank-gold-pulse{from{box-shadow:0 0 12px rgba(255,209,102,.35),0 0 24px rgba(255,209,102,.18)}to{box-shadow:0 0 22px rgba(255,209,102,.75),0 0 44px rgba(255,209,102,.32)}}@keyframes rank-silver-pulse{from{box-shadow:0 0 12px rgba(192,199,209,.32),0 0 24px rgba(192,199,209,.16)}to{box-shadow:0 0 22px rgba(192,199,209,.70),0 0 44px rgba(192,199,209,.30)}}@keyframes rank-bronze-pulse{from{box-shadow:0 0 12px rgba(205,127,50,.32),0 0 24px rgba(205,127,50,.16)}to{box-shadow:0 0 22px rgba(205,127,50,.70),0 0 44px rgba(205,127,50,.30)}}@keyframes sparkle-spin{0%{transform:rotate(0deg) scale(.92);opacity:.35}50%{opacity:1}100%{transform:rotate(22deg) scale(1.08);opacity:.55}}@media(max-width:600px){.leaderboard{max-height:calc(var(--row-height) * 8 + var(--header-padding))}.finale-winners{grid-template-columns:1fr}.finale-card{min-height:190px}.dual-continue-controls{grid-template-columns:1fr}}@media(min-width:601px) and (max-width:1024px){.leaderboard{max-height:calc(var(--row-height) * 12 + var(--header-padding))}}@media(min-width:1025px){.leaderboard{max-height:calc(var(--row-height) * 16 + var(--header-padding))}} /* v0.8.0 master-only reveal bio panel for celebrities and objects */ .reveal-image{object-fit:contain;background:#0d2230}.revealed .reveal-image{filter:blur(0)!important;transform:scale(1)} .reveal-master-bio{margin-top:16px;padding:16px;border:1px solid rgba(47,243,255,.34);border-radius:20px;background:linear-gradient(145deg,rgba(7,21,29,.92),rgba(16,45,59,.86));box-shadow:0 12px 32px rgba(0,0,0,.24);text-align:left} .reveal-master-bio .eyebrow{color:var(--gold);margin-bottom:10px} .reveal-master-bio-row{margin:10px 0}.reveal-master-bio-row strong{display:block;color:var(--cyan);margin-bottom:4px}.reveal-master-bio-row p{margin:0;color:var(--text);line-height:1.35}.reveal-master-bio-row ul{margin:6px 0 0 18px;padding:0;color:var(--text);line-height:1.35}.reveal-master-bio-row li{margin:4px 0} .reveal-master-layout{display:flex;flex-direction:column;gap:14px}.reveal-master-layout .reveal-master-bio{margin-top:0} .reveal-master-layout.celebrity,.reveal-master-layout.object,.reveal-master-layout.music{min-width:0}.reveal-master-layout.object .object-stage{min-height:220px} @container (min-width:380px){.reveal-master-layout{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:12px;align-items:start}.reveal-master-layout .reveal-image{width:100%;height:auto;max-height:340px;object-fit:contain}.reveal-master-layout.celebrity .reveal-image{aspect-ratio:4/5}.reveal-master-layout.object .reveal-image{aspect-ratio:1/1}.reveal-master-layout.music .music-stage{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border-radius:14px;background:linear-gradient(135deg,#1b2540,#0d1428);border:1px solid #2b3a5f}.reveal-master-layout.music .music-stage .music-note{font-size:88px;line-height:1}.reveal-master-layout .reveal-callout{margin:0 0 10px;padding:10px 12px;font-size:16px}.reveal-master-layout .reveal-master-bio{max-height:520px;overflow:auto}} @container (min-width:560px){.reveal-master-layout{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:14px}.reveal-master-layout .reveal-image{max-height:380px}} @container (min-width:720px){.reveal-master-layout{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px}.reveal-master-layout .reveal-image{max-height:440px}.reveal-master-layout .reveal-master-bio{max-height:520px;overflow:auto}} @media(min-width:1181px){.master-shell:has(.reveal-master-layout){grid-template-columns:minmax(560px,1.6fr) minmax(320px,1fr) minmax(260px,.9fr)}} @media(min-width:1600px){.master-shell:has(.reveal-master-layout){grid-template-columns:minmax(720px,1.8fr) minmax(380px,1fr) minmax(300px,.8fr)}} .reveal-master-details{margin-top:8px}.reveal-master-details summary{cursor:pointer;user-select:none;font-weight:600;font-size:.9rem;color:#aab8d4;padding:4px 0}.reveal-master-details[open] summary{margin-bottom:8px} /* v0.9.4 Trivia layout: module-agnostic — keeps default 3-col master shell (parity with Music Trivia / Object / Celebrity). The previous 2-col master-shell override on .trivia was removed in v0.9.4. AI Trivia now renders inside the default master Round Stage column. Countdown font-size switched from 36vmin to container-query units so it scales relative to the .scene inline-size (container-type:inline-size on .scene) instead of viewport. */ .reveal-master-layout.trivia { display: block; position: relative; min-width: 0; } .trivia-stage { position: relative; min-height: clamp(380px, 60vh, 720px); padding: clamp(1rem, 2.5vw, 1.5rem); overflow: visible; } .trivia-stage[data-has-cheatsheet="false"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .trivia-stage[data-has-cheatsheet="true"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 1.25rem; align-items: start; } /* v0.17.1: .trivia-bg-countdown replaced by .countdown-badge — see vegetarian-myths corrections doc. Legacy `.trivia-bg-countdown { position:absolute; inset:0; font-size: clamp(96px,56cqi,380px); ... }` and `.reveal-active .trivia-bg-countdown { display:none }` removed in v0.17.1. */ .countdown-badge { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; background: rgba(20, 24, 41, 0.78); border: 2px solid rgba(255, 209, 102, 0.55); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); z-index: 3; pointer-events: none; } .countdown-badge.urgent { background: rgba(255, 92, 122, 0.85); border-color: rgba(255, 200, 0, 0.95); animation: countdown-pulse 0.6s ease-in-out infinite alternate; } @keyframes countdown-pulse { to { transform: scale(1.08); box-shadow: 0 4px 24px rgba(255, 92, 122, 0.55); } } @container (max-width: 519px) { .countdown-badge { width: 52px; height: 52px; font-size: 1.5rem; top: 8px; right: 8px; } } .reveal-active .countdown-badge { display: none; } .trivia-question-panel, .trivia-cheatsheet, .trivia-winners, .session-settings-card { border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 1rem; background: rgba(255,255,255,0.04); } .trivia-question-panel { width: min(720px, 100%); max-width: 100%; margin-inline: auto; position: relative; z-index: 2; overflow: hidden; isolation: isolate; background: rgba(20, 24, 41, 0.20); backdrop-filter: blur(2px) saturate(120%); -webkit-backdrop-filter: blur(2px) saturate(120%); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .trivia-question-panel > .eyebrow, .trivia-question-panel > h2, .trivia-question-panel > .trivia-options, .trivia-question-panel > .trivia-tally { position: relative; z-index: 2; } /* v0.17.1: reserve top-right corner for .countdown-badge (64x64 + 12px gutter) so the question heading text never bleeds under the badge. Phone size badge is 52x52, so 80px margin-right is sufficient. Uses margin (shrinks the box bounding-rect) not padding (which leaves the box unchanged). */ .trivia-question-panel > .eyebrow, .trivia-question-panel > h2 { margin-right: 80px; } .trivia-side-panel { position: relative; z-index: 2; display: grid; gap: 1rem; } .trivia-cheatsheet { position: relative; z-index: 2; background: rgba(20,24,41,0.85); box-shadow: 0 12px 32px rgba(0,0,0,0.32); } .trivia-options { display: grid; gap: 0.75rem; margin-top: 1rem; } .trivia-option { position: relative; z-index: 2; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 0.75rem; width: 100%; text-align: left; border-radius: 16px; padding: 0.9rem 1rem; background: rgba(20, 24, 41, 0.18); backdrop-filter: blur(1px) saturate(110%); -webkit-backdrop-filter: blur(1px) saturate(110%); border: 1px solid rgba(255,255,255,0.10); } .trivia-option:hover:not(:disabled) { background: rgba(20, 24, 41, 0.32); } .trivia-option:focus-visible { z-index: 3; } .trivia-option strong { display: inline-grid; place-items: center; min-width: 2.2rem; min-height: 2.2rem; border-radius: 999px; background: rgba(255,255,255,0.12); } .trivia-option.selected { outline: 2px solid var(--accent, #72f1b8); } .trivia-option.correct { background: rgba(82, 255, 168, 0.22); border-color: rgba(82, 255, 168, 0.65); box-shadow: inset 0 0 0 1px rgba(82, 255, 168, 0.22), 0 0 24px rgba(82, 255, 168, 0.14); } .trivia-option.wrong { background: rgba(255, 92, 122, 0.22); border-color: rgba(255, 92, 122, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 92, 122, 0.22), 0 0 24px rgba(255, 92, 122, 0.14); } .trivia-cheatsheet a { color: inherit; text-decoration: underline; } .reveal-active .trivia-question-panel { background: rgba(20,24,41,0.92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .trivia-question-panel { background: rgba(20, 24, 41, 0.85); } .trivia-option { background: rgba(20, 24, 41, 0.42); } .trivia-option:hover:not(:disabled) { background: rgba(20, 24, 41, 0.48); } .trivia-option.correct { background: rgba(82, 255, 168, 0.36); } .trivia-option.wrong { background: rgba(255, 92, 122, 0.36); } } /* v0.17.1 Finding A: legacy trivia-stage collapse rules removed. The role-aware grid at end-of-file (lines ~1258+) supersedes them via higher specificity (body[data-login-mode="X"] .reveal-master-layout.Y .trivia-stage) and applies to both AI-Trivia (.trivia) and Vegetarian-Myths (.vegetarian-myths) module stages. */ .session-settings-card label { display: grid; gap: 0.35rem; margin: 0.75rem 0; } .session-settings-card input { width: 100%; } .session-settings-card .actions { margin-top: 0.75rem; } @media (max-width: 600px) { .trivia-stage { min-height: clamp(260px, 58vh, 520px); padding: 0.75rem; } .trivia-question-panel { width: 100%; padding: 0.85rem; } .trivia-option { grid-template-columns: 2.4rem 1fr; padding: 0.75rem; } } /* v0.9.3 Opening Ceremony overlay */ .welcome-overlay { position: fixed; inset: 0; z-index: 9997; background: radial-gradient(ellipse at center, rgba(20,30,55,0.92), rgba(2,8,14,0.96)); display: grid; place-items: center; padding: 24px; overflow: hidden; pointer-events: none; animation: welcome-fade-in 0.45s ease-out; } .welcome-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .welcome-content { position: relative; z-index: 1; text-align: center; width: min(900px, 96vw); pointer-events: none; } .welcome-actions, .welcome-actions * { pointer-events: auto; } .welcome-content h2 { font-size: clamp(38px, 7vw, 78px); text-shadow: 0 0 28px rgba(255,209,102,0.55), 0 0 60px rgba(47,243,255,0.3); margin: 0.2em 0 0.4em; } .welcome-content .eyebrow { letter-spacing: 0.18em; opacity: 0.85; } .welcome-subtitle { font-size: clamp(18px, 2.4vw, 26px); opacity: 0.92; margin-bottom: 1.4em; } .welcome-roster { display: flex; flex-direction: column; align-items: center; gap: 0.6em; } .welcome-roster .roster-avatars { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 100%; } .welcome-roster .roster-avatar { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,0.10); font-weight: 700; font-size: 14px; border: 2px solid rgba(47,243,255,0.45); box-shadow: 0 0 12px rgba(47,243,255,0.25); overflow: hidden; } .welcome-roster .roster-avatar img { width: 100%; height: 100%; object-fit: cover; } .welcome-count { font-weight: 700; opacity: 0.95; font-size: 1.05em; } .welcome-actions { margin-top: 1.4em; } @keyframes welcome-fade-in { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} } @media (max-width: 600px) { .welcome-content h2 { font-size: clamp(28px, 9vw, 48px); } .welcome-roster .roster-avatar { width: 36px; height: 36px; font-size: 12px; } } /* v0.9.11 Responsive layout hardening: login width + finale no-overflow grid. */ .login-card{ width:min(calc(100% - 24px),clamp(680px,88vw,1440px)); max-width:clamp(680px,88vw,1440px); margin:28px auto; } html:has(#finaleOverlay),body:has(#finaleOverlay){overflow:hidden;max-width:100vw} .finale-overlay{ background:rgba(2,8,14,.98); backdrop-filter:blur(6px) saturate(115%); -webkit-backdrop-filter:blur(6px) saturate(115%); padding:clamp(10px,2vw,24px); } .finale-content{ width:min(1280px,94vw); max-height:100%; display:flex; flex-direction:column; justify-content:center; } .finale-content .eyebrow{margin:.2em 0 .3em}.finale-content h2{margin:.08em 0 .22em} .finale-winners{align-items:stretch;gap:clamp(10px,2vw,24px);min-width:0} .finale-card{ display:grid; grid-template-areas:"rank" "avatar" "name" "score"; align-content:center; justify-items:center; row-gap:clamp(6px,1.1vw,12px); max-height:460px; min-height:clamp(220px,26vw,360px); min-width:0; width:100%; padding:clamp(14px,2.2vw,28px); } .finale-card strong{grid-area:rank;line-height:1}.finale-card img,.finale-avatar-placeholder{grid-area:avatar}.finale-card h3{grid-area:name;margin:.12em 0 0;line-height:1.05;min-width:0;max-width:100%;width:100%;text-align:center;overflow-wrap:anywhere}.finale-card p{grid-area:score;margin:.05em 0 0;line-height:1.1;min-width:0;max-width:100%} .finale-card.rank-1{transform:none;box-shadow:0 0 64px rgba(255,209,102,.76),0 0 140px rgba(255,209,102,.38),0 0 0 1px rgba(255,209,102,.32) inset} @media(min-width:601px){.finale-card.rank-1{transform:translateY(-8px)}} @media(max-width:600px){ .finale-overlay{padding:10px;place-items:center;overflow:hidden} .finale-content{width:min(100%,94vw);gap:6px} .finale-content .eyebrow{font-size:10px;margin:0}.finale-content h2{font-size:clamp(28px,9vw,40px);margin:0 0 4px;line-height:1} .finale-winners{grid-template-columns:1fr;gap:8px;align-items:stretch} .finale-card{ grid-template-columns:64px minmax(0,1fr) auto; grid-template-areas:"avatar name rank" "avatar score rank"; column-gap:10px; row-gap:2px; justify-items:start; align-items:center; min-height:0; max-height:116px; padding:9px 10px; border-width:2px; border-radius:18px; text-align:left; } .finale-card::after{display:none} .finale-card strong{justify-self:end;font-size:clamp(26px,9vw,36px)} .finale-card img,.finale-avatar-placeholder{width:58px;height:58px;border-radius:16px;font-size:28px} .finale-card h3{font-size:clamp(19px,6vw,25px);max-width:100%;overflow-wrap:anywhere} .finale-card p{font-size:clamp(16px,4.8vw,20px)} .finale-actions{margin-top:4px;gap:6px}.finale-anthem-controls{gap:6px}.finale-actions button{padding:8px 10px;border-radius:12px;font-size:13px}.finale-anthem-controls .ghost{min-width:0} } @media(min-width:601px) and (max-height:820px){.finale-card{min-height:clamp(210px,30vh,300px)}.finale-card img,.finale-avatar-placeholder{width:clamp(86px,12vw,132px);height:clamp(86px,12vw,132px)}.finale-card h3{font-size:clamp(22px,3vw,36px)}.finale-card p{font-size:clamp(17px,2.3vw,24px)}} .co-master-promotion-banner{display:grid;gap:10px;margin:0 0 16px;padding:14px 16px;border:1px solid rgba(255,209,102,.75);border-radius:18px;background:linear-gradient(135deg,rgba(255,209,102,.20),rgba(47,243,255,.12));box-shadow:0 12px 30px rgba(0,0,0,.24)}.co-master-promotion-banner strong{color:var(--gold);font-size:1.05rem}.co-master-promotion-banner span{color:var(--text);line-height:1.35}.co-master-promotion-banner a{display:inline-block;width:max-content;text-decoration:none;font-weight:900;padding:10px 14px;border-radius:14px} /* ============================================================ * * v0.9.17 -- Hero Constellation Background + Glassmorphism * Appended at end of styles.css to override existing body bg. * Pure visual upgrade: no functional change. * ============================================================ */ body { background: #050814 !important; background-image: none !important; } body::before { content: ""; position: fixed; inset: 0; background-image: url('/img/hero-constellation.png'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: contain; opacity: 0.55; z-index: -1; pointer-events: none; } /* Glassmorphism on all module/panel surfaces. Existing rules use --card (#0d2230). We convert to rgba + blur. */ .card, .master-stage-card, .master-panel, .master-leaderboard, .master-secondary, .login-card, .status-card, .leaderboard-card, .roster-card, .session-settings-card, .danger-zone-card, .command-center, .reveal-master-layout, .reveal-master-bio, .reveal-master-bio-row, .reveal-master-details, .trivia-question-panel, .trivia-side-panel, .celebrity-stage, .music-stage, .object-stage, .trivia-stage, .welcome-roster, .finale-card, .finale-content { background-color: rgba(13, 34, 48, 0.78); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); } /* Hero header (top) -- slight glass too so it does not block the constellation */ .hero, .master-hero { background-color: rgba(6, 16, 24, 0.55); backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Buttons (default look) -- subtle translucency, primary/danger stay solid */ button.secondary, button.ghost, .controls button:not(.primary):not(.danger), .controls button:not(.primary):not([class*="danger"]) { background-color: rgba(40, 50, 80, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Scene container (the round display) -- keep it semi-clear */ .scene { background-color: rgba(13, 34, 48, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* v0.17.3 mobile view-jump defense in depth: keep browser scroll-anchoring enabled around the scene so any residual DOM mutation (e.g. surgical button class toggles) does not shift the participant's viewport. Browser default is `auto`, but we declare it explicitly so a future CSS reset or `* { overflow-anchor: none }` cannot regress mobile behaviour. Scoped to `.scene` only (NOT html/body) to avoid known iOS Safari <16 anchoring quirks when combined with `-webkit-overflow-scrolling: touch`. */ overflow-anchor: auto; } /* Phone (<=519px): smaller constellation, much higher opacity for readability */ @media (max-width: 519px) { body::before { background-size: 70% auto; background-position: center 18%; opacity: 0.42; } .card, .master-stage-card, .master-panel, .master-leaderboard, .master-secondary, .login-card, .status-card, .leaderboard-card, .roster-card, .reveal-master-layout, .reveal-master-bio, .trivia-question-panel, .celebrity-stage, .music-stage, .object-stage, .trivia-stage, .finale-card, .finale-content { background-color: rgba(13, 34, 48, 0.80); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero, .master-hero { background-color: rgba(6, 16, 24, 0.72); } } /* Tablet (520-1023px) */ @media (min-width: 520px) and (max-width: 1023px) { body::before { background-size: contain; opacity: 0.45; } } /* Laptop (1024-1599px) */ @media (min-width: 1024px) and (max-width: 1599px) { body::before { background-size: auto 88vh; opacity: 0.55; } } /* Workstation (>=1600px) */ @media (min-width: 1600px) { body::before { background-size: auto 95vh; opacity: 0.60; } } /* Finale overlay: keep it almost solid (fireworks need contrast) */ .finale-overlay { background-color: rgba(5, 8, 20, 0.95) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ============================================================ * * v0.9.17.1 -- Force >=20% transparency on ALL holdout modules. * Uses !important to defeat more-specific solid bg rules. * Appended after the v0.9.17 patch. * ============================================================ */ /* TOP-4 buzzer slots (the master "orange" slot card) */ .slot { background-color: rgba(7, 21, 29, 0.78) !important; backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); } /* Leaderboard individual rank rows */ .leaderboard li { background-color: rgba(7, 21, 29, 0.72) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Roster individual player tiles */ .roster-item { background-color: rgba(7, 21, 29, 0.72) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Secondary action buttons (Reveal, Skip, Next) */ button.secondary, .secondary { background-color: rgba(18, 56, 72, 0.78) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Ghost buttons (Logout, ...) */ button.ghost, .ghost { background-color: rgba(18, 56, 72, 0.60) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Trivia question panel was 0.92 -- bring down to 0.78 */ .trivia-question-panel { background-color: rgba(20, 24, 41, 0.78) !important; background-image: none !important; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } /* Music stage was solid linear-gradient -- glass replacement */ .music-stage { background: rgba(27, 37, 64, 0.62) !important; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } /* Celebrity stage + image wrapper + placeholder */ .celebrity-stage, .celebrity-image-placeholder { background-color: rgba(10, 22, 32, 0.62) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Celebrity image (only matters during load) */ .celebrity-image { background-color: rgba(10, 22, 32, 0.50) !important; } /* Reveal image bg (only matters during load) */ .reveal-image { background-color: rgba(13, 34, 48, 0.62) !important; } /* Finale avatar placeholders */ .finale-card img, .finale-avatar-placeholder { background-color: rgba(7, 21, 29, 0.78) !important; } /* Avatar tiles in login screen */ .avatar-choice { background-color: rgba(7, 21, 29, 0.72) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Finale overlay: keep it near-solid so fireworks/readability survive every viewport. */ .finale-overlay { background-color: rgba(2, 8, 14, 0.96) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Audio unlock banner */ .audio-unlock-banner { background-color: rgba(20, 24, 41, 0.78) !important; background-image: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Co-master promotion banner */ .co-master-promotion-banner { background-color: rgba(20, 24, 41, 0.78) !important; background-image: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Reveal callout (the answer banner) */ .reveal-callout { background-color: rgba(20, 24, 41, 0.72) !important; background-image: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* Buzzer — restore gold gradient (v0.9.17.4 hotfix) */ .buzzer:not(:disabled) { background: linear-gradient(135deg, var(--gold), #ff7a00) !important; background-image: linear-gradient(135deg, var(--gold), #ff7a00) !important; color: #160900 !important; box-shadow: 0 0 34px rgba(255, 209, 102, 0.55), inset 0 1px 0 rgba(255,255,255,0.25) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 2px solid rgba(255, 209, 102, 0.7) !important; } .buzzer:disabled { background: rgba(13, 34, 48, 0.7) !important; background-image: none !important; color: rgba(255, 255, 255, 0.35) !important; box-shadow: none !important; border: 1px solid rgba(47, 243, 255, 0.15) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: not-allowed; } /* Music volume container (the volume slider wrapper) */ .music-volume-container { background-color: rgba(20, 24, 41, 0.62) !important; background-image: none !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Reveal playback active banner */ .reveal-playback { background-color: rgba(20, 24, 41, 0.62) !important; background-image: none !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Phone (<=519px): slightly higher opacity on small cards for readability */ @media (max-width: 519px) { .slot, .leaderboard li, .roster-item, .avatar-choice { background-color: rgba(7, 21, 29, 0.80) !important; } .ghost { background-color: rgba(18, 56, 72, 0.72) !important; } } /* v0.9.17.2 — kill the linear-gradient background-image on all card surfaces. The base .card rule uses background: linear-gradient(rgba(.95), rgba(.96)) which is a SHORTHAND setting background-image. Our v0.9.17 patch only set background-color, so the gradient kept painting on top -> 95-96% opaque. This patch forces background-image: none !important on every card variant plus the .scene placeholder which also uses a radial-gradient. */ .card, .master-stage-card, .master-panel, .master-leaderboard, .master-secondary, .login-card, .screen-card, .status-card, .leaderboard-card, .roster-card, .session-settings-card, .danger-zone-card, .command-center, .reveal-master-layout, .reveal-master-bio, .reveal-master-bio-row, .reveal-master-details, .trivia-question-panel, .trivia-side-panel, .celebrity-stage, .music-stage, .object-stage, .trivia-stage, .welcome-roster, .finale-card, .finale-content { background-image: none !important; background-color: rgba(13, 34, 48, 0.72) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } /* Scene placeholder also uses radial-gradient background */ .scene { background-image: none !important; background-color: rgba(13, 34, 48, 0.60) !important; backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; } /* Hero header strip: also gradient. Make it glass too so heroine head/shoulder is visible at top of screen. */ .hero, .master-hero { background-image: none !important; background-color: rgba(6, 16, 24, 0.45) !important; backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; border-bottom: 1px solid rgba(47, 243, 255, 0.18) !important; } /* Phone: bump opacity for readability but stay under 80% (max 80% opaque per spec) */ @media (max-width: 519px) { .card, .master-stage-card, .master-panel, .master-leaderboard, .master-secondary, .login-card, .screen-card, .status-card, .leaderboard-card, .roster-card, .reveal-master-layout, .reveal-master-bio, .trivia-question-panel, .celebrity-stage, .music-stage, .object-stage, .trivia-stage, .finale-card, .finale-content { background-color: rgba(13, 34, 48, 0.78) !important; backdrop-filter: blur(8px) saturate(130%) !important; -webkit-backdrop-filter: blur(8px) saturate(130%) !important; } .hero, .master-hero { background-color: rgba(6, 16, 24, 0.62) !important; } } /* Tablet: 25% transparency */ @media (min-width: 520px) and (max-width: 1023px) { .card, .master-stage-card, .master-panel, .login-card, .screen-card, .leaderboard-card, .status-card, .roster-card, .command-center, .finale-card, .finale-content { background-color: rgba(13, 34, 48, 0.75) !important; } } /* Laptop/Workstation: 30% transparency */ @media (min-width: 1024px) { .card, .master-stage-card, .master-panel, .login-card, .screen-card, .leaderboard-card, .status-card, .roster-card, .command-center, .finale-card, .finale-content { background-color: rgba(13, 34, 48, 0.70) !important; } } /* v0.9.17.3 — final glass polish: kill remaining linear-gradient overlays that hide the heroine background. */ .reveal-callout, .reveal-master-bio, .reveal-master-layout .reveal-master-bio, .reveal-master-bio-row .reveal-master-bio, .music-stage, .reveal-master-layout.music .music-stage, .finale-card, .finale-content, .celebrity-stage, .celebrity-image-placeholder, .co-master-promotion-banner { background-image: none !important; } /* Reveal master bio: was rgba(.92)/rgba(.86) gradient — too opaque */ .reveal-master-bio { background-color: rgba(13, 34, 48, 0.72) !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; } /* Music stage: was solid gradient (#1b2540 → #0d1428) — fully opaque */ .music-stage, .reveal-master-layout.music .music-stage { background-color: rgba(27, 37, 64, 0.65) !important; backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; } /* Finale podium cards: was rgba(.96)/rgba(.96) gradient — almost solid */ .finale-card { background-color: rgba(13, 34, 48, 0.62) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } /* Reveal callout: was golden tint gradient — keep golden tint, just kill the gradient so heroine breathes through */ .reveal-callout { background-color: rgba(255, 209, 102, 0.18) !important; backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; } /* Celebrity stage container: was #0a1620 solid */ .celebrity-stage { background-color: rgba(10, 22, 32, 0.68) !important; backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; } /* Phone: bump finale podium / music stage / reveal bio readability */ @media (max-width: 519px) { .reveal-master-bio { background-color: rgba(13, 34, 48, 0.78) !important; } .music-stage, .reveal-master-layout.music .music-stage { background-color: rgba(27, 37, 64, 0.75) !important; } .finale-card { background-color: rgba(13, 34, 48, 0.72) !important; } } /* Audio ON/OFF Toggle Buttons (v0.9.17.4 participant UX) */ .audio-toggle-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .audio-toggle-btn { flex: 1; padding: 8px 12px; border-radius: 12px; font-weight: 900; font-size: 14px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } .audio-toggle-btn.on { background: rgba(0, 200, 83, 0.15); color: rgba(0, 200, 83, 0.5); border-color: rgba(0, 200, 83, 0.25); } .audio-toggle-btn.on.hot { background: rgba(0, 255, 100, 0.25); color: #00ff64; border-color: #00ff64; box-shadow: 0 0 18px rgba(0, 255, 100, 0.45), 0 0 6px rgba(0, 255, 100, 0.3); text-shadow: 0 0 8px rgba(0, 255, 100, 0.6); } .audio-toggle-btn.on.active { background: rgba(0, 200, 83, 0.12); color: rgba(0, 200, 83, 0.45); border-color: rgba(0, 200, 83, 0.2); cursor: default; } .audio-toggle-btn.off { background: rgba(255, 70, 70, 0.15); color: rgba(255, 70, 70, 0.5); border-color: rgba(255, 70, 70, 0.25); } .audio-toggle-btn.off.hot { background: rgba(255, 50, 50, 0.25); color: #ff3232; border-color: #ff3232; box-shadow: 0 0 18px rgba(255, 50, 50, 0.45), 0 0 6px rgba(255, 50, 50, 0.3); text-shadow: 0 0 8px rgba(255, 50, 50, 0.6); } .audio-toggle-btn.off.active { background: rgba(255, 70, 70, 0.12); color: rgba(255, 70, 70, 0.45); border-color: rgba(255, 70, 70, 0.2); cursor: default; } .music-volume-label.disabled { opacity: 0.4; pointer-events: none; } .music-volume-label.disabled input[type="range"] { cursor: not-allowed; } /* Module mode badge (static/dynamic) */ .module-mode-badge { display: inline-block; padding: 2px 8px; margin-left: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; vertical-align: middle; } .module-mode-badge.module-mode-static { background: #2a2f3a; color: #8a93a3; border: 1px solid #3a4250; } .module-mode-badge.module-mode-dynamic { background: rgba(0, 212, 255, 0.18); color: #00d4ff; border: 1px solid #00d4ff; box-shadow: 0 0 8px rgba(0, 212, 255, 0.25); } #difficultySelect:disabled { opacity: 0.4; cursor: not-allowed; } .pending-proposals-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 400px; overflow-y: auto; } .pending-proposal { border: 1px solid #2a2f3a; border-radius: 6px; padding: 0.5rem 0.75rem; background: #1a1f2e; } .pending-proposal .pill { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .pending-proposal .pill-easy { background: #2d5a3d; color: #c8f7d4; } .pending-proposal .pill-hard { background: #5a2d2d; color: #f7c8c8; } .pending-proposal .pp-q { font-weight: 500; margin: 0.4rem 0; } .pending-proposal .pp-choices { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; } .pending-proposal .pp-answer { color: #00d4ff; margin: 0.25rem 0; font-size: 0.9rem; } .pending-proposal .small { font-size: 0.75rem; } .row.gap { display: flex; gap: 0.5rem; margin-top: 0.5rem; } #pendingProposalsCount { background: #00d4ff; color: #0a0d14; border-radius: 10px; padding: 1px 8px; font-size: 0.75rem; font-weight: 700; margin-left: 0.5rem; } #pendingProposalsCount[data-zero="true"] { background: #2a2f3a; color: #8a93a3; } /* Phase 6 — Verification UI styles */ .verification-footer { margin-top: 8px; padding: 6px 10px; border-top: 1px dotted rgba(255,255,255,0.18); border-radius: 4px; font-size: 0.78em; opacity: 0.9; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .verification-footer .verification-source-link, .verification-footer a { color: #87b4ff; text-decoration: underline; } .verification-footer .verification-source-link:hover, .verification-footer a:hover { color: #b9d4ff; } .verification-footer .verification-checked, .verification-footer .verification-next-due, .verification-footer .verification-source, .verification-footer .verification-status-text, .verification-footer .verification-verifier { white-space: nowrap; } .verification-footer.status-verified { color: #b8e8c2; border-top-color: rgba(76,175,80,0.55); } .verification-footer.status-needs-update { color: #ffd591; border-top-color: rgba(255,167,38,0.65); } .verification-footer.status-locked { color: #bdbdbd; border-top-color: rgba(150,150,150,0.55); } .verification-footer.status-unknown { color: #bdbdbd; border-top-color: rgba(150,150,150,0.4); } .verification-footer .verification-status-text { font-weight: 600; } .verification-footer .verification-verifier { font-style: italic; opacity: 0.85; } @media (max-width: 480px) { .verification-footer { font-size: 0.72em; padding: 4px 6px; gap: 2px 8px; } } .pending-proposal.pp-type-update { border-left: 4px solid #f5a623; } .pending-proposal.pp-type-add { border-left: 4px solid #4caf50; } .pp-typebadge { font-weight: 600; font-size: 0.85em; letter-spacing: 0.04em; } .pp-type-update .pp-typebadge { color: #f5a623; } .pp-type-add .pp-typebadge { color: #4caf50; } .pp-sources { margin-top: 8px; font-size: 0.85em; } .pp-sources summary { cursor: pointer; opacity: 0.85; } .pp-sources ul { margin: 6px 0 0 18px; padding: 0; } .pp-sources a { color: #87b4ff; } .tz-toast { position: fixed; top: 1.5rem; right: 1.5rem; background: #1a1d2e; color: #e8eaf6; padding: 0.9rem 1.2rem; border-radius: 0.5rem; box-shadow: 0 4px 24px rgba(0,0,0,0.4); display: flex; gap: 0.6rem; align-items: center; opacity: 0; transform: translateX(20px); transition: all 0.3s ease; z-index: 9999; } .tz-toast-visible { opacity: 1; transform: translateX(0); } .tz-toast-icon { font-size: 1.3em; } /* v0.16.0 Chunk 3 — Master Game Role + self-grading */ .game-role-section { background:#1a1d2e; padding:1.5rem; border-radius:0.75rem; margin:1rem 0; border-left:4px solid #00d4ff; } .game-role-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .game-role-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.9rem; border-radius:999px; font-weight:600; background:#2a2f44; } .game-role-badge[data-mode="playing"] { background:#0a3b4d; color:#5feaff; } .game-role-badge[data-mode="master"] { background:#3a2e0a; color:#ffd166; } .game-role-icon { font-size:1.2em; } .game-role-controls { display:flex; flex-direction:column; gap:0.75rem; } .game-role-nickname { display:flex; flex-direction:column; gap:0.3rem; } .game-role-nickname input { padding:0.5rem; border-radius:0.3rem; border:1px solid #444; background:#0e1124; color:#e8eaf6; } .game-role-actions { display:flex; gap:0.6rem; } .btn-primary { background:#00d4ff; color:#061018; } .btn-primary:hover { background:#5feaff; } .game-role-hint { font-size:0.85rem; color:#8b92a8; margin:0.5rem 0 0 0; } .btn-warning { background:#d4881f; color:#0e1124; } .btn-warning:hover { background:#e8a040; } .self-grade-banner { background:#0a3b4d; color:#5feaff; padding:0.9rem; border-radius:0.5rem; margin:1rem 0; font-weight:600; text-align:center; } /* v0.16.1: no-players warning banner */ .no-players-warning{margin:8px 0 12px;padding:10px 14px;background:rgba(212,136,31,.18);border:1px solid #d4881f;border-radius:8px;color:#ffdc8a;font-weight:600;font-size:14px;line-height:1.35} .no-players-warning[hidden]{display:none!important} /* ============================================================ * v0.16.3 — Master Cockpit Layout ("Desk + Rail + Side-Role") * * Three-agent design review consensus (Copilot CLI + Claude CLI + Hermes): * - Use grid-template-areas for explicit adjacency (Stage <-> Command Center) * - Move Game Role out of the hot interaction zone into the rail column * - Constellation background masked at edges to stop wide-screen bleed * - Idle stage collapses naturally (content-driven heights, align-self:start) * - Leaderboard is a true viewport-sticky rail with real scroll runway * * Behavior change: NONE. Pure layout/CSS refactor. * Rules appended at end so source-order overrides earlier .master-shell rules. * ============================================================ */ @media (min-width:1181px){ .master-shell{ display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr) minmax(280px, 340px); grid-template-areas: "stage command role" "stage command rail" "second second rail" "danger danger rail"; gap:16px; padding:16px 24px; max-width:1760px; margin-inline:auto; align-items:start; } .master-stage-card { grid-area:stage; grid-column:auto; align-self:start; } .master-panel.command-center { grid-area:command; grid-column:auto; align-self:start; } .game-role-section { grid-area:role; align-self:start; margin:0; } .master-leaderboard { grid-area:rail; grid-column:auto; align-self:start; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; } .master-secondary { grid-area:second; grid-column:auto; } .danger-zone-card { grid-area:danger; grid-column:auto; } /* Reveal layouts (object/celebrity reveal in Stage) need extra Stage width */ .master-shell:has(.reveal-master-layout){ grid-template-columns: minmax(0, 1.7fr) minmax(380px, 1fr) minmax(280px, 340px); } } @media (min-width:1600px){ .master-shell{ grid-template-columns: minmax(0, 1.6fr) minmax(440px, 1fr) minmax(320px, 380px); } .master-shell:has(.reveal-master-layout){ grid-template-columns: minmax(0, 1.85fr) minmax(440px, 1fr) minmax(320px, 380px); } } /* Stage: idle collapses naturally */ .master-stage-card .scene[data-idle="true"]{ min-height:96px; } /* Game Role: compact panel for Master-only AND Playing modes. - Master-only: header (label + badge), nickname input, Join button - Playing: BUZZ mount appears inline; nickname input still visible for re-roles */ .game-role-section{ padding:14px 16px; border-radius:20px; border:1px solid rgba(47,243,255,.24); border-left:4px solid #00d4ff; background:linear-gradient(145deg,rgba(16,45,59,.95),rgba(8,25,35,.96)); display:flex; flex-direction:column; gap:10px; } .game-role-section .game-role-header{ display:flex; align-items:center; justify-content:space-between; margin:0; gap:8px; } .game-role-section h2{ font-size:13px; margin:0; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .game-role-section .game-role-badge{ padding:.3rem .65rem; font-size:11.5px; white-space:nowrap; } .game-role-section .game-role-controls{ display:flex; flex-direction:column; gap:8px; } .game-role-section .game-role-nickname{ display:flex; flex-direction:column; gap:4px; margin:0; } .game-role-section .game-role-nickname span{ font-size:11.5px; color:var(--muted); } .game-role-section .game-role-nickname input{ margin:0; padding:8px 12px; font-size:13.5px; width:100%; } .game-role-section .game-role-actions{ margin:0; display:flex; gap:6px; flex-wrap:wrap; } .game-role-section .game-role-actions button{ padding:8px 14px; font-size:13.5px; flex:1 1 auto; } .game-role-section .game-role-hint{ margin:0; font-size:11.5px; line-height:1.35; color:var(--muted); } .game-role-section .buzzer-mount:empty{ display:none; } .game-role-section .buzzer-mount{ margin-top:6px; } /* Constellation: mask the edges so the wide-screen bleed disappears without removing the background art entirely. */ body::before{ max-width:1760px; left:50%; transform:translateX(-50%); -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* Narrow viewport (<=1180px): keep the existing single-column collapse, add grid-template-areas so the order is explicit and the constellation mask is disabled (no max-width constraint on phone). */ @media (max-width:1180px){ .master-shell{ grid-template-columns:1fr; grid-template-areas: "command" "stage" "role" "rail" "second" "danger"; max-width:none; padding:16px; margin-inline:0; } .master-stage-card, .master-panel.command-center, .game-role-section, .master-leaderboard, .master-secondary, .danger-zone-card{ grid-column:auto; } .master-leaderboard{ position:static; max-height:none; } .master-secondary{ grid-template-columns:1fr; } body::before{ max-width:none; left:0; transform:none; -webkit-mask-image:none; mask-image:none; } } /* v0.16.3 hotfix: grid-area assignments must apply at ALL viewports so the grid-template-areas in BOTH the wide and narrow media queries can place items by name. Otherwise items auto-place by DOM order and the named areas are ignored. Without this fix the narrow-viewport order is wrong: Game Role bubbles to the top because it has no order/grid-area. */ .master-stage-card { grid-area: stage; } .master-panel.command-center { grid-area: command; } .game-role-section { grid-area: role; } .master-leaderboard { grid-area: rail; } .master-secondary { grid-area: second; } .danger-zone-card { grid-area: danger; } /* ============================================================================ Vegetarian Myths module — forest-green theme + comic art + fun fact callout ============================================================================ */ .scene[data-module="vegetarian-myths"] { background: linear-gradient(135deg, #1f5a3a 0%, #0e3924 50%, #08180e 100%); } .scene[data-module="vegetarian-myths"] .trivia-question-panel, .scene[data-module="vegetarian-myths"] .vmyth-question-panel { background: rgba(8, 24, 14, 0.78) !important; border-color: rgba(120, 200, 140, 0.18) !important; } .scene[data-module="vegetarian-myths"] .trivia-cheatsheet { background: rgba(15, 35, 22, 0.92); border-color: rgba(120, 200, 140, 0.28); } .vmyth-comic { margin: 0.75rem auto 0.85rem; max-width: 380px; width: min(100%, 380px); display: block; } .vmyth-comic img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(120, 200, 140, 0.2); } .vmyth-myth { color: #c4e6cf; font-size: 0.95em; margin: 0.5rem 0 0.5rem; line-height: 1.45; font-style: italic; } .vmyth-myth strong { font-style: normal; color: #ffd166; } .funfact-callout { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem auto 0.5rem; max-width: 720px; padding: 0.9rem 1.05rem; background: linear-gradient(90deg, rgba(255, 209, 102, 0.16), rgba(82, 200, 130, 0.14)); border-left: 4px solid #ffd166; border-radius: 10px; color: #fff8e1; font-size: 1.02em; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .funfact-callout .funfact-icon { font-size: 1.4em; line-height: 1; } .funfact-callout strong { color: #ffd166; } @media (max-width: 600px) { .vmyth-comic { max-width: 280px; } .funfact-callout { font-size: 0.97em; padding: 0.75rem 0.9rem; } } /* ============================================================================ v0.17.1 · Vegetarian-Myths + AI-Trivia module-stage role-aware layout ---------------------------------------------------------------------------- Architecture (per docs/VEGETARIAN-MYTHS-CORRECTIONS-v0.17.1.md §3): · Container queries on .reveal-master-layout.X (inline-size). · Role differentiated via body[data-login-mode="master"|"player"]. · Master at ≥520px gets 2-col split: comic+question | cheatsheet+winners. · Participant stays 1-col centered with growing max-width. · Replaces legacy collapse rule .trivia-stage[data-has-cheatsheet="true"] at @container ≤700 / @media ≤1000 (Finding A duplicates already removed). ============================================================================ */ .reveal-master-layout.vegetarian-myths, .reveal-master-layout.trivia { display: block; position: relative; min-width: 0; /* No container-type here — queries below resolve against .scene (already has container-type:inline-size at line 44). */ } /* Master role: 2-col grid kicks in at container ≥520px (covers iPad portrait). */ body[data-login-mode="master"] .reveal-master-layout.vegetarian-myths .trivia-stage, body[data-login-mode="master"] .reveal-master-layout.trivia .trivia-stage { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; position: relative; padding: clamp(1rem, 2.5vw, 1.5rem); min-height: clamp(380px, 60vh, 720px); } @container (min-width: 520px) { body[data-login-mode="master"] .reveal-master-layout.vegetarian-myths .trivia-stage, body[data-login-mode="master"] .reveal-master-layout.trivia .trivia-stage { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } @container (min-width: 900px) { body[data-login-mode="master"] .reveal-master-layout.vegetarian-myths .trivia-stage, body[data-login-mode="master"] .reveal-master-layout.trivia .trivia-stage { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } /* Participant role: always 1-col centered with growing max-width tiers. */ body[data-login-mode="player"] .reveal-master-layout.vegetarian-myths .trivia-stage, body[data-login-mode="player"] .reveal-master-layout.trivia .trivia-stage { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); min-height: clamp(380px, 60vh, 720px); } /* Finding B: override the .trivia-question-panel { width: min(720px, 100%) } cap for the new module-stage. Within the master 2-col grid, the panel should fill its grid column. For participants, role-aware caps grow with container size. */ .reveal-master-layout.vegetarian-myths .trivia-question-panel, .reveal-master-layout.trivia .trivia-question-panel { width: 100%; max-width: none; margin-inline: 0; min-width: 0; } body[data-login-mode="player"] .reveal-master-layout.vegetarian-myths .trivia-question-panel, body[data-login-mode="player"] .reveal-master-layout.trivia .trivia-question-panel { max-width: 560px; margin-inline: auto; } @container (min-width: 900px) { body[data-login-mode="player"] .reveal-master-layout.vegetarian-myths .trivia-question-panel, body[data-login-mode="player"] .reveal-master-layout.trivia .trivia-question-panel { max-width: 640px; } } @container (min-width: 1280px) { body[data-login-mode="player"] .reveal-master-layout.vegetarian-myths .trivia-question-panel, body[data-login-mode="player"] .reveal-master-layout.trivia .trivia-question-panel { max-width: 720px; } } /* Phone <520px: collapse cheatsheet into a top-aligned details accordion for master. This relies on the existing JS rendering (trivia-cheatsheet inside trivia-side-panel already a sibling); on phone we let the natural source order do the stacking. */ @container (max-width: 519px) { body[data-login-mode="master"] .reveal-master-layout.vegetarian-myths .trivia-stage, body[data-login-mode="master"] .reveal-master-layout.trivia .trivia-stage { grid-template-columns: 1fr; } .reveal-master-layout.vegetarian-myths .vmyth-comic, .reveal-master-layout.trivia .vmyth-comic { max-width: 240px; } } /* v0.18.0 — Per-Player Language Switch (EN/DE-CH). Pill-style 2-button group that lives inside .header-pills. Tap targets ≥40px square on mobile; active state uses the cyan accent reused by .pill. */ .locale-toggle { display: inline-flex; align-items: stretch; gap: 0; border: 1px solid var(--cyan); border-radius: 999px; overflow: hidden; background: rgba(8, 22, 30, 0.55); } .locale-toggle .locale-btn { margin: 0; padding: 8px 14px; min-height: 40px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--cyan); background: transparent; border: none; border-radius: 0; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .locale-toggle .locale-btn:hover:not(.active) { background: rgba(47, 243, 255, 0.12); } .locale-toggle .locale-btn.active { background: var(--cyan); color: #02101a; } .locale-toggle .locale-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (max-width: 760px) { .locale-toggle .locale-btn { min-width: 48px; min-height: 44px; padding: 8px 12px; } } /* ============================================================ * v0.21.0 — Master Cockpit v5 = Claude Design direction 1a "Triptych Desk" * (claude.ai/design project e1f76e32, 2026-09-07), adapted to the existing DOM. * * Header Game Role (nickname, Join as Player, BUZZ when playing), * Roster & readiness (popover), Music volume — session-level. * Column 1 Round Stage: question | cheat sheet (every round). * Column 2 Command Center: Module + Difficulty, ribbon * 01 Start → 02 Reveal → 03 Next, Skip/Continue/Stop, 4 buzzer * slots (every round). * Column 3 Leaderboard, full height (every round). * Bottom Session tools tray, controls visible (once per session), * Dangerous zone dimmed at its right end (rarely). * * Rows are content-driven: the question never scrolls inside its card. * <900px: one column, console sticks under the header; <600px: console * fixed to the bottom edge. * * Behavior change: NONE. master.html only moves sections (Game Role, Roster, * Music volume into the header; Leaderboard into