/* Single-screen Halloween prop, preserving the original oracle. */
html,body { height:100%; overflow:hidden; }
body { overscroll-behavior:none; }
.app { position:relative; width:min(760px,100%); height:100vh; height:100dvh; min-height:0; padding:max(48px,env(safe-area-inset-top)) 24px max(36px,env(safe-area-inset-bottom)); display:grid; grid-template-rows:54% minmax(0,1fr); align-items:center; justify-items:center; overflow:hidden; }
.ball-stage { width:min(92vw,52vh,480px); width:min(92vw,52dvh,480px); max-height:100%; margin:0; flex-shrink:0; }
.ball-number { color:#eee8dc; font:bold clamp(42px,12vw,70px) Georgia,serif; z-index:1; padding-top:24%; }
.answer { position:relative; top:auto; left:auto; width:100%; height:100%; min-height:0; font-size:clamp(30px,8.5vw,44px); line-height:1.15; letter-spacing:-.025em; overflow-wrap:anywhere; word-break:normal; padding:12px 0; color:#fff9ed; text-shadow:0 0 30px #9b7cff30; align-self:stretch; }
.tap-prompt { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); margin:0; color:#d5a083; font:12px/1.5 monospace; letter-spacing:.12em; }
[hidden] { display:none!important; }
.settings-toggle { position:absolute; top:max(12px,env(safe-area-inset-top)); right:12px; width:44px; height:44px; padding:0; background:transparent; color:#b3aa9c; font:26px/1 system-ui; border-radius:50%; }
dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid #726278; border-radius:22px; padding:20px; background:#1d1922; color:#f0e9dc; box-shadow:0 20px 80px #0009; }
dialog::backdrop { background:#08060dde; backdrop-filter:blur(10px); }
.settings-heading { display:flex; justify-content:space-between; align-items:center; }
.settings-heading h2 { margin:0; font:28px Georgia,serif; }
.settings-heading button { width:44px; height:44px; padding:0; background:transparent; color:#f0e9dc; font:28px system-ui; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.controls button { min-height:48px; padding:10px; font-size:14px; color:#f0e9dc; background:#29252f; border:1px solid #726278; font-weight:500; }
.controls button[aria-pressed=true] { background:#4a365d; border-color:#d6c9ff; }
button:focus-visible,summary:focus-visible { outline:2px solid #e7ccff; outline-offset:3px; }
.help,.setup { color:#bfb5aa; font:13px/1.6 system-ui,sans-serif; margin:16px 0 0; }
.setup summary { cursor:pointer; padding:12px 0; min-height:44px; color:#d5a083; }
.fog { animation-play-state:paused; }
.ball-stage.active .fog { animation-play-state:running; }
.smoke-off .fog { display:none; }
.ball-stage:not(.active) .fog { opacity:.16; }
.audio-tests { display:flex; gap:10px; margin-top:14px; }
.audio-tests button { flex:1; min-height:44px; padding:10px; background:#332c3e; color:#f0e9dc; font-size:14px; }
/* Keep motion on compositor-friendly transform and opacity tracks. */
.fog { filter:blur(25px); transition:opacity .8s ease; mix-blend-mode:screen; }
.ball-stage.active .fog { opacity:.65; filter:blur(25px); }
.ball-glow,.ball-stage.active .ball-glow { animation:none; transition:opacity .8s ease; filter:blur(40px); }
.ball-stage.active .ball-glow { opacity:.8; }
.ball-stage.impact { animation:none; }
.ball-stage.flash::before,.energy-ring,.spark-field,.shadow-surge { display:none; }
.ball-stage.active::after { animation:none; }
.ball-stage:hover .ball:not(.shaking) { transform:none; }
.ball.shaking { animation:gentleShake 1.35s cubic-bezier(.45,0,.25,1) both; }
@keyframes gentleShake {
  0%,100% { transform:translate3d(0,0,0) rotate(0); }
  18% { transform:translate3d(-10px,-3px,0) rotate(-5deg); }
  36% { transform:translate3d(12px,-5px,0) rotate(6deg); }
  54% { transform:translate3d(-9px,-3px,0) rotate(-4deg); }
  72% { transform:translate3d(6px,-2px,0) rotate(3deg); }
  88% { transform:translate3d(-2px,0,0) rotate(-1deg); }
}
.answer.reveal { animation:softReveal .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes softReveal { from { opacity:0; transform:translate3d(0,12px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@media (orientation:landscape) and (max-height:550px) { .app { grid-template-columns:46% 54%; grid-template-rows:minmax(0,1fr); gap:12px; } .ball-stage { width:min(44vw,80dvh); } }
@media (prefers-reduced-motion:reduce) { .fog,.energy-ring,.spark-field,.shadow-surge { display:none; } .ball-stage:hover .ball:not(.shaking) { transform:none; } }