:root {
  --ink: #0f233e;
  --cream: #fff9e8;
  --paper: #faf1d4;
  --coral: #ed5b4a;
  --teal: #209da1;
  --gold: #ffcf5b;
  --shadow: rgba(15, 35, 62, 0.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: Bahnschrift, "Segoe UI", Verdana, sans-serif; overflow: hidden; }
body { display: grid; place-items: center; min-height: 100dvh; padding: 0; }
.app { position: relative; width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); aspect-ratio: 16 / 9; overflow: hidden; background: url('assets/slide_background_clean.png') center / cover no-repeat; box-shadow: 0 22px 80px rgba(15, 35, 62, 0.22); }
.result-card { position: absolute; left: 4.2%; top: 14.2%; width: 30%; min-height: 32%; border: clamp(2px, 0.28vw, 4px) solid var(--ink); border-radius: 1.8vw; background: rgba(255, 249, 232, 0.94); padding: 2.1% 2.2%; }
.result-label { font-size: clamp(18px, 2vw, 34px); font-weight: 800; margin-bottom: 5%; letter-spacing: 0.01em; }
.result { font-size: clamp(34px, 4vw, 68px); line-height: 1; color: var(--coral); font-weight: 900; letter-spacing: 0.03em; white-space: nowrap; }
.task { margin-top: 7%; font-size: clamp(13px, 1.58vw, 27px); font-weight: 750; line-height: 1.16; }
.answer { margin-top: 5%; display: inline-block; border-radius: 1vw; background: var(--ink); color: white; padding: 0.5rem 0.75rem; font-size: clamp(18px, 2.05vw, 35px); font-weight: 900; }
.settings-card { position: absolute; left: 4.6%; top: 58.5%; width: 31.5%; border: clamp(2px, 0.22vw, 3px) solid rgba(15, 35, 62, 0.9); border-radius: 1.15vw; background: rgba(255, 249, 232, 0.92); padding: 0.95% 1.1%; }
.settings-title { font-size: clamp(13px, 1.25vw, 22px); font-weight: 850; margin-bottom: 2.6%; }
.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.65rem; }
.range-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.range-caption { grid-column: 1 / -1; font-size: clamp(10px, 0.88vw, 15px); font-weight: 850; }
.range-field { display: grid; gap: 0.18rem; font-size: clamp(9px, 0.82vw, 14px); font-weight: 750; }
.range-field input { width: 100%; border: 2px solid var(--ink); border-radius: 0.48vw; background: white; color: var(--ink); font: 800 clamp(13px, 1.12vw, 20px)/1 Bahnschrift, "Segoe UI", sans-serif; padding: 0.28rem 0.35rem; }
.spin-button { width: 100%; height: 2.25rem; margin-top: 0.36rem; border: clamp(2px, 0.28vw, 4px) solid var(--ink); border-radius: 1.05vw; background: var(--coral); color: white; font: 900 clamp(20px, 2.1vw, 38px)/1 Bahnschrift, "Segoe UI", sans-serif; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 8px 0 rgba(15, 35, 62, 0.18); transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; }
.spin-button:hover { filter: saturate(1.08) brightness(1.02); transform: translateY(-2px); box-shadow: 0 10px 0 rgba(15, 35, 62, 0.18); }
.spin-button:active { transform: translateY(3px); box-shadow: 0 4px 0 rgba(15, 35, 62, 0.18); }
.spin-button:disabled { cursor: wait; opacity: 0.86; }
.range-status { min-height: 1.35em; margin-top: 0.28rem; font-size: clamp(10px, 0.9vw, 16px); line-height: 1.16; font-weight: 700; }
.range-status.error { color: #b62825; }
.timer-wrap { margin-top: 4%; }
.timer-display { display: inline-block; border-radius: 1vw; background: var(--ink); color: white; padding: 0.38rem 0.68rem; font-size: clamp(18px, 1.9vw, 32px); font-weight: 900; letter-spacing: 0.04em; }
.timer-display.warning { background: #b62825; animation: timerPulse 650ms ease-in-out infinite alternate; }
@keyframes timerPulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.timer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; margin-top: 3%; align-items: end; }
.timer-field { display: grid; gap: 0.22rem; font-size: clamp(10px, 0.88vw, 15px); font-weight: 750; }
.timer-field select { width: 100%; border: 2px solid var(--ink); border-radius: 0.48vw; background: white; color: var(--ink); font: 800 clamp(12px, 1vw, 18px)/1 Bahnschrift, "Segoe UI", sans-serif; padding: 0.31rem 0.35rem; }
.new-game-button { border: 2px solid var(--ink); border-radius: 0.7vw; background: var(--gold); color: var(--ink); font: 900 clamp(11px, 1.02vw, 18px)/1 Bahnschrift, "Segoe UI", sans-serif; padding: 0.48rem 0.3rem; cursor: pointer; }
.hourglass { --sand-top: 100%; --sand-bottom: 0%; position: absolute; left: 35.2%; top: 31%; width: clamp(92px, 8.8vw, 150px); height: clamp(132px, 12.8vw, 218px); z-index: 6; filter: drop-shadow(0 9px 0 rgba(15, 35, 62, 0.16)); }
.hourglass::before, .hourglass::after { content: ""; position: absolute; left: 10%; width: 80%; height: 44%; border: clamp(3px, 0.32vw, 6px) solid var(--ink); background: rgba(255, 255, 255, 0.72); overflow: hidden; }
.hourglass::before { top: 0; clip-path: polygon(0 0, 100% 0, 55% 100%, 45% 100%); }
.hourglass::after { bottom: 0; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.sand-top, .sand-bottom, .sand-stream { position: absolute; pointer-events: none; z-index: 2; background: var(--gold); }
.sand-top { left: 18%; top: 7%; width: 64%; height: calc(var(--sand-top) * 0.36); transform-origin: top; clip-path: polygon(0 0, 100% 0, 55% 100%, 45% 100%); }
.sand-bottom { left: 18%; bottom: 7%; width: 64%; height: calc(var(--sand-bottom) * 0.36); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.sand-stream { left: 48%; top: 42%; width: 4%; height: 18%; border-radius: 999px; opacity: 0; }
.hourglass.running .sand-stream { opacity: 1; animation: streamPulse 420ms linear infinite; }
.hourglass.done .sand-stream { opacity: 0; }
@keyframes streamPulse { 0% { transform: scaleY(0.55); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0.55); opacity: 0.35; } }
.wheel-stage { position: absolute; left: 43.9%; top: 7.2%; width: 50%; aspect-ratio: 1 / 1; filter: drop-shadow(0 10px 7px var(--shadow)); }
.wheel-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.numbers { z-index: 1; }
.wheel.outer { z-index: 2; }
.wheel.inner { z-index: 3; }
.cap { position: absolute; z-index: 5; left: 45.8%; top: 45.8%; width: 8.4%; aspect-ratio: 1 / 1; border-radius: 50%; border: clamp(2px, 0.32vw, 5px) solid var(--ink); background: var(--cream); display: grid; place-items: center; }
.cap::after { content: ""; width: 43%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--teal); }
.spark { position: absolute; width: 0.9%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--gold); opacity: 0; pointer-events: none; }
.spark.pop { animation: pop 700ms ease-out forwards; }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.7); opacity: 0; } }
@media (max-width: 760px) { .result-card { left: 4%; top: 14%; width: 34%; } .settings-card { left: 4.6%; width: 34%; top: 59%; } .hourglass { left: 36%; top: 31%; width: 10vw; height: 14vw; } .wheel-stage { left: 42%; width: 55%; } }