@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; }
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:34px 5vw; display:grid; align-items:center; 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%; border:5px solid #f4b84d; border-radius:50%; color:#ffdb96; background:radial-gradient(circle at 38% 25%,#f15243,#8b0605 57%,#310000); box-shadow:inset 0 0 16px #210000,0 8px 0 #1d0804,0 0 25px #ff8d30; font:clamp(1.1rem,2.5vw,2rem) 'Bebas Neue',Impact,sans-serif; cursor:pointer; }.red-button:active { transform:translateY(6px); box-shadow:inset 0 0 25px #210000,0 2px 0 #1d0804; }
.status-banner { margin:20px auto 0; max-width:580px; padding:9px 20px; font-size:1.5rem; background:#2a1207; border:2px solid #bc842d; }
.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; }
.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 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; } }