:root { --bg: #0f1020; --fg: #fff; --accent: #ffd23f; --accent2: #ff6b6b; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: system-ui, sans-serif; }

#state { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.view { display: none; flex-direction: column; align-items: center; gap: 0.4em; padding: 2rem; }
[data-state="idle"] .view-idle,
[data-state="announcing"] .view-announcing,
[data-state="spinning"] .view-spinning,
[data-state="result"] .view-result,
[data-state="nobody"] .view-nobody { display: flex; }

h1 { font-size: clamp(2rem, 6vw, 5rem); margin: 0; }
.next-draw { font-size: clamp(1.8rem, 5vw, 4rem); font-weight: 700; color: var(--accent); margin: 0; }
.hint { opacity: 0.7; font-size: clamp(1rem, 2.5vw, 1.5rem); }
.countdown { font-size: clamp(6rem, 30vw, 22rem); font-weight: 800; color: var(--accent); margin: 0; }
.result-activity { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; color: var(--accent); margin: 0; }
.result-desc { font-size: clamp(1rem, 3vw, 2rem); opacity: 0.85; max-width: 22ch; margin: 0; }
.result-label { font-size: clamp(1rem, 3vw, 2rem); opacity: 0.7; margin: 0; }
.result-name { font-size: clamp(3rem, 12vw, 9rem); font-weight: 800; margin: 0; }
.actions { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
button { font-size: clamp(1rem, 3vw, 1.8rem); padding: 0.6em 1.2em; border: none; border-radius: 0.6em; cursor: pointer; font-weight: 700; }
.btn-accept { background: var(--accent); color: #000; }
.btn-skip { background: var(--accent2); color: #fff; }
.message { font-size: clamp(1.5rem, 5vw, 3.5rem); max-width: 18ch; }
#test-btn { position: fixed; top: 1rem; right: 1rem; background: #333; color: #fff; }
.wheel-wrap { position: relative; width: min(80vh, 80vw); height: min(80vh, 80vw); }
.wheel-svg { width: 100%; height: 100%; display: block; }
#wheel-rotor { transform-box: fill-box; transform-origin: center; }
.wheel-pointer {
  position: absolute; top: -1%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 1.6vh solid transparent;
  border-right: 1.6vh solid transparent;
  border-top: 2.6vh solid var(--fg);
  z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.wedge { transition: opacity 0.3s ease, filter 0.3s ease; }
.wedge.dimmed { opacity: 0.25; filter: grayscale(1); }
.wedge-name, .wedge-initials { fill: #0f1020; font-weight: 800; font-family: system-ui, sans-serif; }