@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@400;600;700&family=Rye&display=swap');

:root { --wood:#160b05; --wood-light:#3b1a0b; --gold:#d49a2e; --gold-light:#ffe0a1; --ink:#130a05; --paper:#ead09b; --purple:#4c1e62; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; color:#ffe7b4; font-family:'Roboto Condensed',Arial,sans-serif; background:radial-gradient(ellipse at center,#4a250f 0%,#160a04 57%,#050302 100%); }
body::before { content:''; position:fixed; inset:14px; pointer-events:none; border:4px double var(--gold); box-shadow:inset 0 0 30px #000,0 0 18px #000; }
.language-switcher { position:fixed; z-index:50; top:20px; right:24px; display:flex; gap:5px; padding:5px; background:#160a05e6; border:1px solid #b77a20; box-shadow:0 4px 15px #000; }.language-switcher button { width:34px; height:28px; padding:0; border:1px solid transparent; background:transparent; font-size:18px; cursor:pointer; filter:grayscale(.65); opacity:.7; }.language-switcher button.is-active { border-color:#f4c65d; filter:none; opacity:1; }
h1,h2,.marquee-title,.panel-label,.room-code,.status-banner { font-family:'Bebas Neue',Impact,sans-serif; letter-spacing:.05em; }
.welcome-stage,.player-stage { min-height:100vh; display:grid; place-items:center; padding:24px; }
.welcome-frame,.player-card { width:min(540px,100%); padding:42px 34px; text-align:center; color:#2d1608; background:linear-gradient(135deg,#f4dba9,#bc8141 45%,#f2d298); border:4px double #7c4518; box-shadow:0 20px 70px #000, inset 0 0 36px #fff1c1; }
.welcome-frame h1,.player-card h1 { margin:0; font-family:'Rye',serif; font-size:clamp(2rem,8vw,3.8rem); color:#5c1c12; text-shadow:1px 1px #ffe9a4; }
.eyebrow { margin:0 0 12px; text-transform:uppercase; letter-spacing:.15em; font-weight:700; }
.welcome-copy { font-size:1.25rem; }
.role-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
.brass-button { display:inline-block; border:2px solid #3a1b07; border-radius:4px; padding:13px 22px; color:#ffe8b0; background:linear-gradient(#a96920,#4b2108); box-shadow:inset 0 1px #ffe1a0,0 4px #170800; font:700 1.1rem 'Roboto Condensed',sans-serif; text-decoration:none; cursor:pointer; }
.brass-button--purple { background:linear-gradient(#733f86,#2d0e3e); }
.host-stage { min-height:100vh; padding:82px 5vw 34px; display:grid; align-items:start; grid-template-columns:minmax(160px,.75fr) minmax(500px,2.4fr) minmax(180px,.8fr); gap:28px; }
.ornate-panel { padding:18px; color:#ffe6ae; background:linear-gradient(145deg,#43200d,#120904); border:3px solid #b77a20; outline:1px solid #f4c65d; outline-offset:4px; box-shadow:inset 0 0 22px #000,0 10px 35px #000; }
.panel-label { margin:0 0 7px; font-size:1.5rem; text-align:center; color:#ffe1a2; }.room-code { display:block; text-align:center; font-size:3.25rem; color:#f7d06d; }.ornate-panel p { margin:.65rem 0; font-size:1.05rem; }.muted { color:#d6ad6d; }.score-list { margin:0; padding-left:25px; font-size:1.1rem; }
.wheel-area { text-align:center; }.marquee-title { display:inline-block; margin:0 auto 16px; padding:8px 28px; color:#ffe7b5; font-size:clamp(1.8rem,4vw,3.2rem); background:linear-gradient(#4a1c0c,#1c0b04); border:3px solid var(--gold); box-shadow:inset 0 0 0 2px #4d260e,0 4px #000; }.marquee-title span { font-size:.65em; }
.quiz-wheel { position:relative; width:min(61vw,650px); aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(#7d3119 0 60deg,#12323d 60deg 120deg,#344014 120deg 180deg,#321426 180deg 240deg,#503a09 240deg 300deg,#582007 300deg); border:18px solid #9b641d; outline:4px solid #f0c45e; box-shadow:0 0 0 14px #2a1007,0 18px 42px #000,inset 0 0 60px #000; }
.quiz-wheel.is-spinning { animation:wheel-spin 2.5s cubic-bezier(.12,.8,.15,1) both; } @keyframes wheel-spin { from { transform:rotate(0deg) } to { transform:rotate(1440deg) } }
.quiz-wheel::before { content:''; position:absolute; inset:17%; border:2px solid #e3b451; border-radius:50%; box-shadow:0 0 0 3px #261006; }.wheel-mode { position:absolute; width:31%; font:clamp(1.25rem,3vw,2.5rem) 'Bebas Neue',Impact,sans-serif; line-height:.95; text-shadow:2px 2px #140702; }.mode-title{top:13%;left:35%;color:#ff6253}.mode-artist{top:27%;right:5%;color:#62cde5;transform:rotate(29deg)}.mode-year{bottom:23%;right:4%;color:#9fd04e;transform:rotate(-30deg)}.mode-decade{bottom:11%;left:35%;color:#d160e3}.mode-margin{bottom:27%;left:3%;color:#e4ab42;transform:rotate(30deg)}.mode-video{top:26%;left:2%;color:#fa833d;transform:rotate(-30deg)}
.red-button { position:absolute; inset:34%; width:32%; height:32%; padding:0; border:0; border-radius:50%; background:transparent url('/assets/images/start-button-red-gold.png') center/contain no-repeat; filter:drop-shadow(0 8px 7px #160805) drop-shadow(0 0 12px #ff8d3066); cursor:pointer; transition:filter .18s ease,transform .18s ease; }.red-button span { display:none; }.red-button:hover:not(:disabled) { filter:drop-shadow(0 9px 8px #160805) drop-shadow(0 0 20px #ffb23d); transform:scale(1.025); }.red-button:active:not(:disabled) { transform:scale(.97); }.red-button:disabled { cursor:not-allowed; filter:grayscale(.3) brightness(.72) drop-shadow(0 6px 6px #160805); }
@property --host-time-progress{syntax:'<percentage>';inherits:false;initial-value:0%}.status-banner { margin:20px auto 0; max-width:580px; padding:9px 20px; font-size:1.5rem; color:#ffe9b6; background:linear-gradient(90deg,#8f2559 0 var(--host-time-progress,0%),#2a1207 var(--host-time-progress,0%) 100%); border:2px solid #bc842d; transition:--host-time-progress 1s linear; }
.video-stage { width:min(76vw,900px); margin:20px auto; padding:12px; background:#160a05; border:3px solid #bc842d; }.video-stage #youtube-player { aspect-ratio:16/9; width:100%; background:#000; }.video-stage iframe { width:100%; height:100%; }.video-stage .brass-button { margin-top:12px; }
.judging-stage { margin:18px auto; max-width:1000px; padding:18px; background:#2b1208; border:2px solid #c98c2f; }.judging-stage h2{margin:0;font-size:2rem}.judging-stage p{margin:4px 0 14px}.judging-stage #answer-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.answer-card{padding:10px;color:#fff;background:var(--player-color);border:2px solid #f3cc70}.answer-card strong{display:block}.answer-card small{display:block;min-height:36px}.answer-card button{margin:6px 3px 0;padding:6px 9px}.judge-good{background:#365d1e;color:#fff}.judge-bad{background:#811b18;color:#fff}
.wheel-frame>.judging-stage{position:absolute;z-index:12;inset:20% 16% auto;margin:0;padding:22px 18px;color:#fff0bc;text-align:center;background:radial-gradient(circle,#6c2419,#250904 72%);border:3px solid #f0bd4f;box-shadow:0 8px 30px #000b}.wheel-frame>.judging-stage[hidden]{display:none}.wheel-frame>.judging-stage .eyebrow{margin:0 0 16px;color:#ffd96c;letter-spacing:.16em;text-transform:uppercase}.wheel-frame>.judging-stage h2{margin:0;font:clamp(1.8rem,4vw,3.4rem) 'Rye',serif;line-height:1.03;color:#fff0ac;text-shadow:2px 2px #5c160a}.wheel-frame>.judging-stage .reveal-separator{display:block;margin:12px 0;color:#d6923f;font:1.9rem/1 'Rye',serif}.wheel-frame>.judging-stage #reveal-year{margin-bottom:20px}.wheel-frame>.judging-stage .brass-button{font-size:1rem}
.wheel-frame>.winner-stage{position:absolute;z-index:13;inset:22% 14% auto;isolation:isolate;overflow:hidden;margin:0;padding:34px 20px;color:#fff3ba;text-align:center;background:radial-gradient(circle at 50% 35%,#d62d2d,#6c0d1b 58%,#250611);border:4px double #ffd66c;box-shadow:0 0 0 5px #6e3111,0 12px 32px #210704cc}.wheel-frame>.winner-stage[hidden]{display:none}.wheel-frame>.winner-stage .eyebrow,.wheel-frame>.winner-stage h2,.wheel-frame>.winner-stage p:not(.eyebrow),.wheel-frame>.winner-stage .brass-button{position:relative;z-index:1}.wheel-frame>.winner-stage .eyebrow{margin:0;color:#ffd66c;letter-spacing:.2em}.wheel-frame>.winner-stage h2{margin:8px 0;font:clamp(2.4rem,5vw,4.6rem) 'Rye',serif;color:#fff0a0;text-shadow:3px 3px 0 #702009,0 0 18px #ffd54c;animation:winner-pop .7s cubic-bezier(.22,1.45,.48,1) both}.wheel-frame>.winner-stage p:not(.eyebrow){margin:8px 0 18px;font:700 1.4rem 'Roboto Condensed',sans-serif}.winner-stage__confetti{position:absolute;inset:0;z-index:0;pointer-events:none}.winner-stage__confetti i{position:absolute;top:-14%;left:calc(var(--piece) * 2.7%);width:9px;height:18px;background:hsl(calc(var(--piece) * 43deg) 88% 65%);animation:confetti-fall 3s linear infinite;animation-delay:calc(var(--piece) * -.13s);transform:rotate(calc(var(--piece) * 23deg))}
.winner-stage{margin:22px auto;padding:32px;max-width:620px;text-align:center;background:radial-gradient(circle,#78371c,#240c05);border:4px double #edbc4e}.winner-stage h2{font:3.5rem 'Rye',serif;margin:0;color:#ffe1a3}.winner-stage p{font-size:1.5rem}
.player-card { text-align:left; }.player-card h1 { text-align:center; }.join-form { display:grid; gap:10px; margin-top:24px; }.join-form label { font-weight:700; font-size:1.2rem; }.join-form input { width:100%; padding:14px; border:2px solid #7c4518; border-radius:3px; color:#2d1608; background:#fff2ca; font:700 1.5rem 'Roboto Condensed',sans-serif; letter-spacing:.25em; }.join-form button { margin-top:8px; }
.host-form { display:grid; gap:9px; margin-top:16px; }.host-form[hidden]{display:none}.host-form label { display:grid; gap:3px; color:#f5d495; font-weight:700; }.host-form select { width:100%; padding:7px; color:#2d1608; background:#f7dba3; border:1px solid #9b6422; font:600 1rem 'Roboto Condensed',sans-serif; }.host-form button { margin-top:5px; }.score-list { display:grid; gap:8px; list-style:none; padding:0; }.score-list li { display:flex; align-items:center; gap:8px; }.score-list strong { margin-left:auto; }.player-dot { width:14px; height:14px; border-radius:50%; background:var(--player-color); border:1px solid #ffe6a9; box-shadow:0 0 6px var(--player-color); }.color-picker { border:0; padding:0; margin:8px 0 0; }.color-picker legend { font-weight:700; font-size:1.2rem; }.color-picker > div { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-top:8px; }.color-choice input { position:absolute; opacity:0; }.color-choice span { display:block; aspect-ratio:1; border-radius:50%; background:var(--player-color); border:3px solid #704016; box-shadow:inset 0 0 0 2px #fff4cf,0 2px 3px #5a2a0b; cursor:pointer; }.color-choice input:checked + span { outline:3px solid #2e0f40; outline-offset:3px; transform:scale(1.08); }.color-choice input:disabled + span { opacity:.22; cursor:not-allowed; }.form-message { min-height:1.4em; margin:5px 0 0; color:#5a1d13; font-weight:700; }
@media (max-width: 900px) { .host-stage { grid-template-columns:1fr 1fr; }.wheel-area { grid-column:1 / -1; grid-row:1; }.quiz-wheel { width:min(78vw,570px); }.room-panel{grid-column:1}.score-panel{grid-column:2} }
@media (max-width: 520px) { .host-stage{padding:28px 18px;gap:20px;grid-template-columns:1fr}.wheel-area{grid-column:auto}.room-panel,.score-panel{grid-column:auto}.quiz-wheel{width:92vw}.marquee-title{font-size:1.65rem;padding:7px 14px}.ornate-panel{padding:13px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* Host round presentation */
.wheel-frame { position:relative; width:min(61vw,650px); margin:auto; }
.quiz-wheel { --spin-from:0deg; --spin-to:0deg; width:100%; margin:0; transform:rotate(var(--spin-to)); }
.quiz-wheel.is-spinning { animation:wheel-spin-targeted 4.4s cubic-bezier(.08,.72,.12,1) both; }
@keyframes wheel-spin-targeted { from { transform:rotate(var(--spin-from)); } to { transform:rotate(var(--spin-to)); } }
.wheel-pointer { position:absolute; z-index:5; left:50%; top:-23px; width:54px; height:78px; transform:translateX(-50%); filter:drop-shadow(0 5px 3px #140702); pointer-events:none; }
.wheel-pointer::before { content:''; position:absolute; left:3px; top:0; width:48px; height:48px; border:3px solid #f7cf65; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2ad,#c17717 58%,#522108 60%); box-shadow:inset 0 0 0 3px #6d2f09; }
.wheel-pointer span { position:absolute; z-index:-1; left:9px; top:36px; width:36px; height:42px; background:linear-gradient(90deg,#8e480e,#f3bd43 50%,#773107); clip-path:polygon(0 0,100% 0,50% 100%); }
.wheel-frame > .red-button { position:absolute; z-index:6; inset:34%; width:32%; height:32%; }
.media-controls { position:absolute; z-index:7; right:-16px; bottom:18px; display:flex; overflow:hidden; border:2px solid #edbd57; border-radius:20px; box-shadow:0 4px 10px #000; }.media-controls[hidden] { display:none; }.media-controls button { width:38px; height:34px; border:0; color:#ffebbd; background:linear-gradient(#743816,#260b05); font:700 18px/1 Arial,sans-serif; cursor:pointer; }.media-controls button + button { border-left:1px solid #d0983b; }
.quiz-wheel .red-button { display:none; }
.wheel-mode { width:30%; text-align:center; transform:translate(-50%,-50%); }
.mode-title { top:21%; left:66.5%; transform:translate(-50%,-50%); }
.mode-artist { top:50%; left:83%; transform:translate(-50%,-50%) rotate(30deg); }
.mode-year { top:79%; left:66.5%; transform:translate(-50%,-50%) rotate(-30deg); }
.mode-decade { top:79%; left:33.5%; transform:translate(-50%,-50%); }
.mode-margin { top:50%; left:17%; transform:translate(-50%,-50%) rotate(30deg); }
.mode-video { top:21%; left:33.5%; transform:translate(-50%,-50%) rotate(-30deg); }
.player-board { width:min(76vw,900px); min-height:116px; margin:20px auto; padding:14px; background:linear-gradient(145deg,#311508,#120703); border:3px solid #bc842d; box-shadow:inset 0 0 22px #000; }
.wheel-area > .player-board { width:90vw; max-width:none; min-height:360px; margin:20px calc(50% - 45vw) 0; }
.player-board #player-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.player-board .brass-button { margin-top:14px; }
.player-card-tile { min-height:82px; padding:11px; text-align:left; color:#fff7dc; background:linear-gradient(135deg,color-mix(in srgb,var(--player-color) 38%,#241209),color-mix(in srgb,var(--player-color) 55%,#140906)); border:2px solid color-mix(in srgb,var(--player-color) 42%,#e8bd72); box-shadow:inset 0 0 22px #000b; }
.player-card-tile strong { display:block; font-size:1.25rem; text-shadow:0 2px 3px #120704; }.player-card-tile small { display:block; margin-top:7px; font-size:.95rem; }.player-card-tile .player-answer { min-height:24px; font-size:1.05rem; text-shadow:0 2px 3px #120704; }
.player-card-tile .remove-player{position:absolute;z-index:3;top:7px;right:7px;width:25px;height:25px;padding:0;border:1px solid #ffd98a;border-radius:50%;color:#fff1c1;background:#651d19;box-shadow:0 2px 4px #0008;font:700 20px/20px Arial,sans-serif;cursor:pointer}.player-card-tile .remove-player:hover{background:#a93226;transform:scale(1.08)}.player-card-tile .remove-player:disabled{opacity:.55;cursor:wait}.player-card-tile .remove-player+strong{padding-right:24px}
.player-card-tile strong{font-size:1.45rem;letter-spacing:.02em}.player-card-tile .player-answer{margin-top:10px;font-size:1.25rem;line-height:1.2}.player-card-tile .judge-good,.player-card-tile .judge-bad{display:inline-flex;align-items:center;justify-content:center;min-width:82px;margin:14px 8px 2px 0;padding:8px 12px;border:2px solid #ffe8a9;border-radius:7px;box-shadow:inset 0 1px #ffffff80,0 3px 0 #160806;color:#fff8d5;font:700 1rem 'Roboto Condensed',sans-serif;cursor:pointer}.player-card-tile .judge-good{background:linear-gradient(#69a93e,#254f1b)}.player-card-tile .judge-bad{background:linear-gradient(#d85647,#771c1b)}.player-card-tile .judge-good:hover,.player-card-tile .judge-bad:hover{filter:brightness(1.14);transform:translateY(-1px)}.player-card-tile .judge-good:disabled,.player-card-tile .judge-bad:disabled{opacity:.55;transform:none}
.player-result .result-answer{margin:9px 0 14px;font:2.15rem/1.05 'Rye',serif;color:#542011;text-align:center}.player-result .result-status{margin:0;padding:12px 10px;border:2px solid #704016;border-radius:7px;color:#fff8d5;text-align:center;font:700 1.4rem/1.1 'Roboto Condensed',sans-serif}.player-result .result-status--correct{background:linear-gradient(#71b545,#2a5d20)}.player-result .result-status--incorrect{background:linear-gradient(#df6553,#84221e)}.player-result .result-status--pending{background:linear-gradient(#9572a7,#4c2c60)}
.wheel-area>.player-board{height:clamp(280px,31vh,390px);min-height:0;display:flex}.wheel-area>.player-board #player-cards{display:grid;flex:1;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}.wheel-area>.player-board .player-card-tile{position:relative;min-height:0;height:100%;padding:clamp(11px,1vw,18px) clamp(11px,1vw,18px) 58px}.wheel-area>.player-board .player-card-tile strong{font-size:clamp(1.05rem,1.35vw,1.55rem)}.wheel-area>.player-board .player-card-tile .player-answer{margin-top:12px;font-size:clamp(1.2rem,1.75vw,2rem);line-height:1.08}.wheel-area>.player-board .player-card-tile .judge-good,.wheel-area>.player-board .player-card-tile .judge-bad{position:absolute;bottom:13px;margin:0;min-width:0;padding:7px 11px;font-size:clamp(.8rem,.9vw,1rem)}.wheel-area>.player-board .player-card-tile .judge-good{left:13px}.wheel-area>.player-board .player-card-tile .judge-bad{right:13px}
.wheel-area>.player-board .player-card-tile--video{padding-bottom:clamp(11px,1vw,18px)}.wheel-area>.player-board .player-card-tile--video .video-answer-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;margin-top:7px}.wheel-area>.player-board .player-card-tile--video .player-answer{margin:0;font-size:clamp(.78rem,1vw,1.12rem);line-height:1.1}.wheel-area>.player-board .player-card-tile--video .judge-good,.wheel-area>.player-board .player-card-tile--video .judge-bad{position:static;margin:0;min-width:0;padding:5px 7px;font-size:clamp(.66rem,.72vw,.85rem)}.wheel-area>.player-board .player-card-tile--video .judgment-badge{margin:0;padding:4px 6px;font-size:.78rem}
.judgment-badge { display:inline-block; margin-top:9px; padding:5px 9px; border:1px solid #ffe4a8; font-weight:700; }.judgment-badge--correct { background:#365d1e; }.judgment-badge--incorrect { background:#811b18; }
.video-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:32px; background:#050302c9; }
.video-modal[hidden] { display:none; }
.video-modal__frame { position:relative; width:min(82vw,980px); aspect-ratio:16/9; padding:8px; background:#160a05; border:4px solid #c48a2d; box-shadow:0 22px 75px #000; overflow:hidden; }
.video-modal__frame::before,.video-modal__frame::after { content:''; position:absolute; z-index:3; left:8px; right:8px; background:#000; pointer-events:none; }.video-modal__frame::before { top:8px; height:88px; }.video-modal__frame::after { bottom:8px; height:70px; }
.video-modal #video-player,.video-modal iframe { width:100%; height:100%; background:#000; }.video-modal #video-player { position:relative; }.video-modal iframe { pointer-events:none; }.video-modal__close { position:absolute; z-index:4; right:8px; top:8px; width:38px; height:38px; border:2px solid #f8d779; border-radius:50%; color:#fff0bd; background:#5e180e; font-size:26px; line-height:1; cursor:pointer; }
.video-modal__timer { position:absolute; z-index:4; right:64px; bottom:28px; left:64px; height:13px; overflow:hidden; border:2px solid #a96b2a; border-radius:999px; background:#321707; box-shadow:0 2px 8px #000b,inset 0 2px 4px #000b; pointer-events:none; }.video-modal__timer span { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5d207e,#d956ba); box-shadow:0 0 12px #d956baa6; transition:width .9s linear; }
.audio-player { position:fixed; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-10px; top:-10px; }
@media (max-width:900px) { .wheel-frame { width:min(78vw,570px); } }

/* Player phone screen */
.player-stage { padding:0; background:#090503; }.player-join-card { margin:24px; }.player-game { width:min(100%,460px); min-height:100vh; overflow:hidden; color:#2b190c; background:linear-gradient(#140806 0 63px,#efcf91 63px,#f6dfad 100%); box-shadow:0 0 70px #000; }
.player-game__header { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; min-height:63px; padding:12px 18px; color:#ffe6a7; font-weight:700; background:#110906; border-bottom:2px solid #a76b1d; }.player-game__header span { padding:7px 10px; border:1px solid #a87523; background:#2b1508; }.player-curtain { height:102px; background:repeating-linear-gradient(72deg,#5a1a12 0 28px,#c34d27 28px 54px,#f1b54d 54px 58px); border-bottom:8px solid #2a1208; box-shadow:inset 0 -12px 20px #0008; }
.player-game__header .player-identity{display:flex;align-items:center;gap:7px}.player-game__header .player-identity #player-name{padding:0;border:0;background:transparent}.player-game__header #player-color-dot{display:block;flex:0 0 auto;width:13px;height:13px;padding:0;border:1px solid #fff2c4;border-radius:50%;background:var(--player-color,#fff2c4);box-shadow:0 0 8px var(--player-color,#fff2c4)}body:has(.player-stage) .language-switcher{top:73px;right:10px}
.player-curtain{height:74px}.player-game .round-card{min-height:calc(100svh - 185px);display:flex;flex-direction:column;justify-content:center;margin:16px}.player-game .round-card[hidden]{display:none}body:has(.player-stage) .language-switcher{top:75px;right:12px;gap:6px;padding:5px}body:has(.player-stage) .language-switcher button{width:34px;height:25px;border:2px solid #f7d77c;border-radius:1px;background-color:#012169;filter:none;opacity:1}body:has(.player-stage) .language-switcher button::after{display:none}body:has(.player-stage) .language-switcher button[data-language="nl"]{background:linear-gradient(#ae1c28 0 33.33%,#fff 33.33% 66.66%,#21468b 66.66%)}body:has(.player-stage) .language-switcher button[data-language="en"]{background-image:linear-gradient(90deg,transparent 41%,#c8102e 41% 59%,transparent 59%),linear-gradient(transparent 38%,#c8102e 38% 62%,transparent 62%),linear-gradient(90deg,transparent 36%,#fff 36% 64%,transparent 64%),linear-gradient(transparent 29%,#fff 29% 71%,transparent 71%),linear-gradient(30deg,transparent 43%,#c8102e 43% 50%,transparent 50% 57%,#c8102e 57% 64%,transparent 64%),linear-gradient(-30deg,transparent 43%,#c8102e 43% 50%,transparent 50% 57%,#c8102e 57% 64%,transparent 64%),linear-gradient(30deg,transparent 36%,#fff 36% 50%,transparent 50% 57%,#fff 57% 71%,transparent 71%),linear-gradient(-30deg,transparent 36%,#fff 36% 50%,transparent 50% 57%,#fff 57% 71%,transparent 71%)}
body .language-switcher,body:has(.player-stage) .language-switcher{top:10px;right:auto;left:50%;transform:translateX(-50%)}
.language-switcher button{width:34px;height:25px;border:2px solid #f7d77c;border-radius:1px;background-color:#012169;filter:none;opacity:1}.language-switcher button::after{display:none}.language-switcher button[data-language="nl"]{background:linear-gradient(#ae1c28 0 33.33%,#fff 33.33% 66.66%,#21468b 66.66%)}.language-switcher button[data-language="en"]{background-image:linear-gradient(90deg,transparent 41%,#c8102e 41% 59%,transparent 59%),linear-gradient(transparent 38%,#c8102e 38% 62%,transparent 62%),linear-gradient(90deg,transparent 36%,#fff 36% 64%,transparent 64%),linear-gradient(transparent 29%,#fff 29% 71%,transparent 71%),linear-gradient(30deg,transparent 43%,#c8102e 43% 50%,transparent 50% 57%,#c8102e 57% 64%,transparent 64%),linear-gradient(-30deg,transparent 43%,#c8102e 43% 50%,transparent 50% 57%,#c8102e 57% 64%,transparent 64%),linear-gradient(30deg,transparent 36%,#fff 36% 50%,transparent 50% 57%,#fff 57% 71%,transparent 71%),linear-gradient(-30deg,transparent 36%,#fff 36% 50%,transparent 50% 57%,#fff 57% 71%,transparent 71%)}
.player-waiting,.round-card,.player-result { margin:22px 16px; padding:25px 20px; text-align:center; background:linear-gradient(135deg,#f8e5b8,#d9a55c 55%,#f3d594); border:4px double #744114; box-shadow:inset 0 0 28px #fff1cc,0 8px 18px #3a170a55; }.player-waiting h1 { margin:4px 0 10px; font:2.2rem 'Rye',serif; color:#581d13; }.round-card h2 { margin:8px 0 22px; color:#3c1961; font:2.1rem 'Bebas Neue',Impact,sans-serif; letter-spacing:.04em; }.round-number { margin:0 0 12px; font:1.55rem 'Bebas Neue',Impact,sans-serif; color:#4b2410; letter-spacing:.12em; text-transform:uppercase; }.round-label,.answer-label { display:block; margin:0 0 7px; color:#3a1a0d; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.round-timer-wrap { margin:0 0 26px; }.round-timer-bar { height:17px; overflow:hidden; border:2px solid #855522; border-radius:20px; background:#b78541; box-shadow:inset 0 2px 5px #47200d; }.round-timer-bar span { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5d207e,#9a51b4); transition:width .2s linear; }.round-timer-label { display:flex; justify-content:space-between; margin-top:5px; color:#522314; font-weight:700; }.round-card #answer-fields { display:grid; gap:10px; }.round-card #answer-fields[hidden],.answer-submit[hidden] { display:none; }.round-card #answer-fields input,.round-card #answer-fields select { width:100%; padding:15px; color:#2c160c; background:#fff1ce; border:2px solid #ad7e43; border-radius:7px; font:600 1.15rem 'Roboto Condensed',sans-serif; letter-spacing:0; }.answer-submit { width:100%; margin-top:16px; }.player-result { text-align:left; }.player-result .eyebrow { color:#5a2411; }.player-result p:not(.eyebrow) { margin:7px 0; font-weight:700; }
@media (min-width:461px) { .player-stage { background:radial-gradient(ellipse at center,#4a250f 0%,#160a04 57%,#050302 100%); } }
@media (max-width:520px) { .language-switcher { top:10px; right:10px; } }
.language-switcher button{font-size:0}.language-switcher button::after{font-size:18px;line-height:1;filter:none}.language-switcher button[data-language="nl"]::after{content:"\1F1F3\1F1F1"}.language-switcher button[data-language="en"]::after{content:"\1F1EC\1F1E7"}
.player-winner{position:relative;isolation:isolate;overflow:hidden;margin:22px 16px;padding:42px 18px;text-align:center;color:#fff3ba;background:radial-gradient(circle at 50% 40%,#d62d2d,#6c0d1b 56%,#250611);border:4px double #ffd66c;box-shadow:0 0 0 5px #6e3111,0 12px 28px #210704aa}.player-winner .eyebrow{position:relative;z-index:1;margin:0;color:#ffd66c;letter-spacing:.24em}.player-winner h1{position:relative;z-index:1;margin:7px 0;font:clamp(3.9rem,20vw,6.5rem) 'Rye',serif;line-height:.92;color:#fff0a0;text-shadow:3px 3px 0 #702009,0 0 18px #ffd54c;animation:winner-pop .7s cubic-bezier(.22,1.45,.48,1) both}.player-winner p:not(.eyebrow){position:relative;z-index:1;margin:14px 0 0;font:700 1.35rem 'Roboto Condensed',sans-serif}.player-winner__confetti{position:absolute;inset:0;z-index:0;pointer-events:none}.player-winner__confetti i{position:absolute;top:-14%;left:calc(var(--piece) * 3.3%);width:9px;height:18px;background:hsl(calc(var(--piece) * 43deg) 88% 65%);animation:confetti-fall 3s linear infinite;animation-delay:calc(var(--piece) * -.17s);transform:rotate(calc(var(--piece) * 23deg))}@keyframes winner-pop{from{opacity:0;transform:scale(.35) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes confetti-fall{0%{transform:translate3d(0,-20px,0) rotate(0)}100%{transform:translate3d(calc(var(--piece) * -2px),420px,0) rotate(620deg)}}@media (prefers-reduced-motion:reduce){.player-winner h1,.player-winner__confetti i{animation:none}}