/* Timing-game refinements; preserve the original glass art direction. */
.intro-copy{max-width:470px;margin:12px auto 0;line-height:1.7;padding:0 8px;color:#b3a9c4}
.stage,.stage:active{cursor:default;touch-action:pan-y}
.strike-zone{left:var(--strike-start,68%);right:calc(100% - var(--strike-end,84%));top:0;bottom:0;border:0;border-radius:1px;background:linear-gradient(90deg,#7997d44d 0%,#9ad6e78c 18%,#c3b5ecd1 36%,#f8d6eff2 50%,#c3b5ecd1 64%,#9ad6e78c 82%,#7997d44d 100%);box-shadow:none}
.meter-tick{left:var(--strike-start,68%);background:#a7ecffaa}
.meter-tick.tick-end{left:var(--strike-end,84%)}
.charge-fill{transition:none}
.strike-zone{z-index:1}
.meter-tick{z-index:3}
.charge-cursor{z-index:4}
.charge-cursor{position:absolute;left:calc(var(--charge)*100%);top:50%;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#d0b5ff;transform:translate(-50%,-50%);box-shadow:0 0 12px #dfbfff;pointer-events:none}
.ready .strike-zone{box-shadow:none}
.meter-caption{justify-content:flex-end}
.ready .charge-heading,.ready .zone-label{color:#b9f3ff}
.roll-button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;min-height:48px;min-width:204px}
.roll-button[data-charging=true]{border-color:#dfbaffaa;background:#d9b5ff12;box-shadow:0 0 25px #bd8aff22}
.result .timing-result{font-size:10px;letter-spacing:.25px;color:#c3edff}
.result.missed .timing-result{color:#e2b6d8}
footer{justify-content:center}
dialog{width:510px;max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b7dbb55 transparent}
.budget-planner{margin-top:14px;padding:19px;border:1px solid #c9b4eb22;border-radius:15px;background:linear-gradient(135deg,#a7ecff06,#f2a4ed08)}
.budget-planner h3{font-size:14px;font-weight:500;margin:0;color:#eadff5}
.budget-planner .dialog-copy{margin:9px 0 17px}
.budget-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.budget-grid label{display:flex;flex-direction:column;gap:8px;font-size:10px;color:#b7a8c5;line-height:1.4}
.budget-grid input{width:100%;min-width:0;min-height:40px;padding:10px 12px;border-radius:8px;border:1px solid #ffffff24;background:#08061255;color:#f4e9ff;font-size:14px;appearance:textfield}
.budget-grid input::-webkit-inner-spin-button{appearance:none}
.suggest-button{width:100%;margin-top:17px;padding:12px 14px;min-height:44px;border:1px solid #a7ecff55;border-radius:9px;background:#a7ecff0d;color:#d6f4ff;font-size:11px;display:flex;justify-content:space-between;gap:10px}
.suggest-button:hover{background:#a7ecff19}
.budget-status{font-size:10px;line-height:1.7;color:#b7d4dd;margin:13px 0 0;overflow-wrap:anywhere}
.budget-status.warning{color:#f1bfd5}
.price-explainer{margin-top:20px;margin-bottom:14px}
@media(max-width:420px){dialog{padding:22px}.budget-planner{padding:14px}.budget-grid{gap:12px}.budget-grid label{font-size:9px}}
@media(max-width:700px){.intro-copy{max-width:340px;font-size:11px}.meter-caption{font-size:8px}.zone-label{font-size:6px}}

/* One shared layout for idle, charging, spinning and the result: no moving target. */
.stage,.revealed .stage{height:clamp(280px,40svh,490px);min-height:280px;flex-shrink:0;margin-bottom:-24px}
.interaction,.revealed .interaction{position:relative;isolation:isolate;display:grid;grid-template-columns:100%;grid-template-rows:132px 48px;gap:16px;width:340px;max-width:100%;min-height:0;flex-shrink:0;padding:0 0 18px;background:transparent;backdrop-filter:none}
.charge-panel,.result{grid-area:1/1;align-self:center;background:transparent;box-shadow:none;backdrop-filter:none}
.result{animation:result-in .7s both}
.result[hidden],.charge-panel[hidden]{display:none}
.roll-button,.revealed .roll-button{grid-area:2/1;align-self:start;justify-self:center;width:260px;max-width:100%;height:48px;min-height:48px;margin:0;padding:9px 16px;transform:none;background:linear-gradient(120deg,#ffffff07,#ffffff01);backdrop-filter:none;transition:background .2s,border-color .2s,box-shadow .2s}
.roll-button:hover,.roll-button:active,.roll-button[data-charging=true]{transform:none}
.interaction::before{content:'';position:absolute;inset:-60px -100px -15px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 23% 40%,#77cbff20,transparent 56%),radial-gradient(ellipse at 76% 42%,#e792ef25,transparent 58%);filter:blur(20px)}
.ground-glow{bottom:-26px;height:100px;opacity:calc(.45 + var(--energy)*.2)}
.caustic-art{bottom:-65px;height:170px;opacity:calc(.30 + var(--energy)*.2);mask-image:radial-gradient(ellipse at center,#0009,transparent 70%)}
.result-price{text-shadow:0 0 35px #d9b9ff18}
.revealed .introduction{opacity:1}
/* Let the actual 3D light volumes continue behind the transparent heading. */
.introduction,.revealed .introduction{position:relative;z-index:3;opacity:1;background:transparent;backdrop-filter:none}
.masthead{position:relative;z-index:4;background:transparent}
.stage{z-index:1}
#diamond{top:calc(-1 * var(--stage-overhang,0px));bottom:auto;height:calc(100% + var(--stage-overhang,0px));pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 28px,#000)}
.reveal-flash{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,#fdf5ffb3 0%,#dcb6ff55 25%,#8edfff22 48%,transparent 76%);mix-blend-mode:screen}
.reveal-flash.active{animation:reveal-bloom 900ms ease-out both}
@keyframes reveal-bloom{0%{opacity:0}12%{opacity:.65}100%{opacity:0}}
@media(max-width:700px){.interaction,.revealed .interaction{width:300px}.stage,.revealed .stage{height:40svh;min-height:280px}.result-price{font-size:60px}}
@media(prefers-reduced-motion:reduce){.reveal-flash.active{animation:none;opacity:0}}