:root { --creep: "Creepster", "Trebuchet MS", cursive; }
#stage {
  position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg, #241544 0%, #160c2e 50%, #0a0518 100%); font-family: var(--creep);
  user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#stage.game-on,
#stage.game-counting { touch-action:none; }
/* Scene keeps the artwork's aspect, always covers the stage, and is the sizing container for the overlay. */
#scene { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1672 / 941; container-type: inline-size; }
/* Cover the screen on every device, centered (portrait crops to the middle of the art). */
@media (min-aspect-ratio: 1672/941) { #scene { width: 100%; height: auto; } }
@media (max-aspect-ratio: 1672/941) { #scene { height: 100%; width: auto; } }
picture { display: contents; }
#bg { display: block; width: 100%; height: 100%; }

/* Borderless neon-green countdown, glued over the gate (cqw = 1% of #scene width). */
#countdown {
  position: absolute; left: 50%; top: 64%; transform: translate(-50%, -50%);
  display: flex; gap: min(1.5cqw, 2.5vw); pointer-events: none;
}
.cell { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.num {
  font-family: var(--creep); font-size: min(7.5cqw, 11vw); color: #e9ffef;
  display: block; min-width: 1.7em; text-align: center; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0.012em rgba(120,255,150,.4);
  text-shadow: 0 0 .06em #bfffd2, 0 0 .16em #46e070, 0 0 .32em #14b23a;
}
.lbl {
  font-family: var(--creep); font-size: min(2.2cqw, 3.4vw); margin-top: .3em; color: #bdeecb; letter-spacing: .05em;
  text-shadow: 0 0 .4em #19e34a;
}

/* Ghosts (interactive) */
.ghost {
  position: absolute; width: clamp(46px, 8vmin, 92px); cursor: pointer; z-index: 6;
  filter: drop-shadow(0 0 10px rgba(190,210,255,.55)); will-change: transform;
  animation: drift var(--dur,16s) ease-in-out infinite alternate;
}
.ghost .boo {
  position: absolute; left: 50%; top: -34%; transform: translateX(-50%) scale(0);
  font-family: var(--creep); font-size: clamp(18px,3.4vmin,34px); color: #d8ffe0;
  text-shadow: 0 0 10px #54ff7a, 0 0 22px #1f9d3f; transition: transform .15s ease; pointer-events: none;
}
.ghost.spooked { animation: shake .45s linear; }
.ghost.spooked .boo { transform: translateX(-50%) scale(1); }
@keyframes drift { 0%{transform:translate(0,0) rotate(-3deg)} 100%{transform:translate(var(--dx,40px),var(--dy,-26px)) rotate(3deg)} }
@keyframes shake {
  0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-7px,3px) rotate(-7deg)}
  40%{transform:translate(7px,-4px) rotate(7deg)} 60%{transform:translate(-6px,2px) rotate(-5deg)} 80%{transform:translate(6px,-2px) rotate(5deg)}
}
#audio {
  position: absolute; right: 14px; bottom: 44px; z-index: 8; display: flex; align-items: center; gap: 10px;
  background: rgba(20,10,30,.62); border: 2px solid #6a3fb0; border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(3px); box-shadow: 0 0 14px rgba(120,70,200,.5);
}
#audioBtn {
  cursor: pointer; font-family: var(--creep); font-size: clamp(15px,2.4vmin,22px); letter-spacing: 1px;
  color: #ffd9a0; background: none; border: none; padding: 0;
}
#audioBtn:hover { color: #fff; }
#vol { width: clamp(70px,15vw,130px); accent-color: #46e070; cursor: pointer; }
#audio.no-volume-control #vol { display: none; }
@media (hover:none) and (pointer:coarse) {
  #vol { display:none; }
}
#celebrate { position: absolute; inset: 0; z-index: 7; display: none; place-items: center; text-align: center; padding: 4vmin; }
#celebrate.on { display: grid; }
#celebrate h1 {
  font-family: var(--creep); color: #f0fff4; font-size: clamp(34px,9vmin,110px); line-height: 1.05;
  text-shadow: 0 0 12px #5cff84, 0 0 28px #19e34a, 0 0 52px #06b23a; animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
/* Atmosphere + interaction FX */
.hs { position: absolute; z-index: 2; cursor: pointer; }
.fx-flare, .fx-ripple { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.fx-flare { background: radial-gradient(circle, rgba(255,175,60,.85), rgba(255,120,0,0) 70%); animation: flare .6s ease-out forwards; }
.fx-ripple { background: radial-gradient(circle, rgba(90,255,140,.55), rgba(40,200,90,0) 70%); animation: ripple .7s ease-out forwards; }
@keyframes flare { 0%{opacity:0;transform:scale(.4)} 25%{opacity:1} 100%{opacity:0;transform:scale(1.6)} }
@keyframes ripple { 0%{opacity:.9;transform:scale(.3)} 100%{opacity:0;transform:scale(1.7)} }
#bg.rattle { animation: rattle .4s ease-in-out; }
@keyframes rattle { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-.6%,.4%) rotate(-.4deg)} 50%{transform:translate(.6%,-.3%) rotate(.4deg)} 75%{transform:translate(-.4%,.2%)} }
#fog { position:absolute; left:-20%; right:-20%; bottom:0; height:46%; pointer-events:none; z-index:3;
  background: radial-gradient(55% 100% at 20% 100%, rgba(180,185,215,.18), transparent 70%),
              radial-gradient(50% 100% at 55% 100%, rgba(170,205,195,.14), transparent 70%),
              radial-gradient(55% 100% at 88% 100%, rgba(180,185,215,.16), transparent 70%);
  animation: fog 26s linear infinite alternate; }
@keyframes fog { 0%{transform:translateX(0)} 100%{transform:translateX(7%)} }
#fx { position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden; }
.bat { position:absolute; left:0; width:clamp(26px,4vw,52px); will-change:transform; }
.bat svg { display:block; animation: flap .22s ease-in-out infinite; transform-origin:center; }
@keyframes flap { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.5)} }
@keyframes batfly { 0%{transform:translate(-14vw,0)} 50%{transform:translate(50vw,-5vh)} 100%{transform:translate(114vw,0)} }
.wisp { position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, rgba(120,255,160,.9), rgba(90,200,120,0) 70%); animation: wisp .8s ease-out forwards; }
@keyframes wisp { 0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(.3) translateY(10px)} }
.ember { position:absolute; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, #ffd27a, rgba(255,150,40,0) 70%); animation: ember 4s ease-in forwards; }
@keyframes ember { 0%{opacity:0;transform:translateY(0) scale(.6)} 15%{opacity:.9} 100%{opacity:0;transform:translateY(-120px) scale(1)} }
@media (prefers-reduced-motion: reduce) { .ghost, #celebrate h1, #fog, .bat, .ember, .wisp, #spooks, .excitement-meter .bubble, .excitement-meter .ember, .excitement-meter .liquid-surface { animation: none !important; } }
#spooks { position:fixed; top:11px; right:14px; z-index:51; font-family:var(--creep); font-size:clamp(13px,2vmin,18px); color:#d8ffe0; background:rgba(20,10,30,.6); border:2px solid #6a3fb0; border-radius:999px; padding:5px 13px; backdrop-filter:blur(3px); box-shadow:0 0 12px rgba(120,70,200,.45); letter-spacing:.5px; }
#spooks b { color:#7CFF9E; font-weight:400; }
#spooks.bump { animation: spookbump .3s ease-out; }
@keyframes spookbump { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* --- Ghost Rush game --- */
#gameToggle { position:fixed; top:100px; right:14px; z-index:52; cursor:pointer; width:42px; height:42px; font-size:22px; line-height:1; background:rgba(20,10,30,.6); border:2px solid #6a3fb0; border-radius:50%; backdrop-filter:blur(3px); box-shadow:0 0 12px rgba(120,70,200,.45); }
#gameToggle:hover, #gameToggle[aria-pressed="true"] { border-color:#b07cff; }
#stage.excited #gameToggle,
#stage.game-on #pumpkinToggle,
#stage.game-on #gameToggle,
#stage.game-counting #pumpkinToggle,
#stage.game-counting #gameToggle { display:none; }
#gameHud { position:fixed; left:14px; bottom:44px; z-index:54; display:none; grid-template-columns:auto auto; align-items:center; gap:8px; font-family:var(--creep); }
#stage.game-on #gameHud { display:grid; animation:gameGlow 1s ease-in-out infinite alternate; }
#gameHud button, #scoreForm button { cursor:pointer; font-family:var(--creep); border:2px solid #6a3fb0; border-radius:999px; color:#ffd9a0; background:rgba(20,10,30,.72); padding:7px 13px; box-shadow:0 0 12px rgba(120,70,200,.45); letter-spacing:.5px; }
#gameHud button:hover, #scoreForm button:hover { border-color:#b07cff; color:#fff; }
#gameStats { display:flex; gap:12px; align-items:center; color:#d8ffe0; background:rgba(20,10,30,.68); border:2px solid #6a3fb0; border-radius:999px; padding:9px 15px; box-shadow:0 0 12px rgba(120,70,200,.45); }
#gameStats b { color:#7CFF9E; font-weight:400; }
#gameTime { display:inline-block; min-width:1.25em; font-size:1.8em; line-height:.8; text-align:center; animation:timerBounce var(--timer-pace, 1s) ease-in-out infinite; transform-origin:center bottom; }
#gameCombo { color:#ffdc6d; min-width:2.2em; }
#gameHelper { grid-column:1 / -1; max-width:min(360px,calc(100vw - 28px)); justify-self:start; padding:7px 12px; border-radius:999px; color:#f3fff6; background:rgba(20,10,30,.72); border:2px solid rgba(124,255,158,.66); box-shadow:0 0 18px rgba(124,255,158,.42); font-size:clamp(16px,3.4vw,24px); text-shadow:0 0 10px #54ff7a; opacity:0; transform:translateY(8px) scale(.96); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
#gameHelper.show { opacity:1; transform:translateY(0) scale(1); animation:helperPulse 1.05s ease-in-out infinite; }
#gameHud #gameExit { width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; line-height:1; font-family:system-ui,sans-serif; font-weight:800; font-size:18px; text-align:center; }
#stage.game-ending #gameStats { border-color:#ff7a18; animation:submitPulse .45s ease-in-out infinite; }
.game-pop { position:absolute; left:50%; top:0; transform:translate(-50%,-70%); color:#7CFF9E; font-family:var(--creep); font-size:clamp(18px,3.5vmin,30px); text-shadow:0 0 10px #54ff7a; pointer-events:none; animation:scorePop .65s ease-out forwards; }
@keyframes scorePop { 0%{opacity:0;transform:translate(-50%,-20%) scale(.7)} 20%{opacity:1} 100%{opacity:0;transform:translate(-50%,-120%) scale(1.25)} }
@keyframes gameGlow { from{filter:drop-shadow(0 0 0 rgba(124,255,158,0))} to{filter:drop-shadow(0 0 12px rgba(124,255,158,.55))} }
@keyframes timerBounce { 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-.12em) scale(1.15)} }
@keyframes helperPulse { 0%,100%{filter:drop-shadow(0 0 0 rgba(124,255,158,0))} 50%{filter:drop-shadow(0 0 12px rgba(124,255,158,.75))} }

#leaderboard { position:fixed; left:14px; bottom:104px; z-index:55; width:min(320px,calc(100vw - 28px)); display:none; font-family:var(--creep); color:#f4f1ea; background:rgba(20,10,30,.86); border:2px solid #6a3fb0; border-radius:12px; box-shadow:0 0 22px rgba(20,10,30,.75); backdrop-filter:blur(5px); overflow:hidden; }
#leaderboard.open { display:block; }
#stage.game-lobby #leaderboard { left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); width:min(390px,calc(100vw - 28px)); z-index:74; }
.board-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; color:#ffd9a0; border-bottom:1px solid rgba(176,124,255,.35); }
#scoresClose { cursor:pointer; width:28px; height:28px; border-radius:50%; border:1px solid #6a3fb0; color:#fff; background:rgba(20,10,30,.65); display:flex; align-items:center; justify-content:center; line-height:1; font-family:system-ui,sans-serif; font-weight:800; }
#scoreList { list-style-position:inside; padding:8px 12px 12px; display:grid; gap:5px; }
#scoreList li { display:grid; grid-template-columns:1fr auto; gap:10px; color:#d8ffe0; }
#scoreList li::marker { color:#ff9a2e; }
#scoreList b { color:#7CFF9E; font-weight:400; }
#gameStart { width:calc(100% - 24px); margin:0 12px 12px; cursor:pointer; font-family:var(--creep); font-size:clamp(20px,5vw,28px); color:#10131a; background:#7CFF9E; border:0; border-radius:999px; padding:10px 18px; box-shadow:0 0 18px rgba(124,255,158,.55); }
#gameStart:hover { background:#a5ffb8; }

#gameIntro { position:fixed; inset:0; z-index:90; display:none; place-items:center; background:radial-gradient(circle at center, rgba(40,18,76,.72), rgba(8,4,16,.88)); backdrop-filter:blur(4px); pointer-events:none; }
#gameIntro.open { display:grid; }
#gameIntroText { font-family:var(--creep); font-size:clamp(64px,20vw,190px); line-height:.9; color:#f3fff6; text-align:center; text-shadow:0 0 16px #54ff7a, 0 0 44px #1f9d3f, 0 0 80px rgba(176,124,255,.9); }
#gameIntroText.pop { animation:introZoom .62s cubic-bezier(.16,.9,.22,1) both; }
@keyframes introZoom { 0%{opacity:0;transform:scale(.18) rotate(-5deg)} 55%{opacity:1;transform:scale(1.1) rotate(1deg)} 100%{opacity:0;transform:scale(1.65) rotate(0)} }

#scoreEntry { position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:20px; background:rgba(8,4,16,.56); backdrop-filter:blur(4px); }
#scoreEntry.open { display:grid; }
#scoreForm { width:min(360px,92vw); display:grid; gap:10px; padding:18px; border:2px solid #6a3fb0; border-radius:14px; background:rgba(20,10,30,.92); box-shadow:0 0 28px rgba(120,70,200,.55); font-family:var(--creep); color:#f4f1ea; text-align:center; }
#scoreForm h2 { color:#7CFF9E; font-size:clamp(28px,8vw,44px); line-height:1; }
#scoreForm p, #scoreForm label { color:#ffd9a0; font-size:clamp(16px,4vw,22px); }
#playerName { width:100%; border:2px solid #6a3fb0; border-radius:999px; padding:10px 14px; background:#f4f1ea; color:#10131a; font:700 18px system-ui,sans-serif; text-align:center; }
.score-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

/* --- Pumpkin excitement feature --- */
#pumpkinToggle { position:fixed; top:52px; right:14px; z-index:52; cursor:pointer; width:42px; height:42px; font-size:22px; line-height:1; background:rgba(20,10,30,.6); border:2px solid #6a3fb0; border-radius:50%; backdrop-filter:blur(3px); box-shadow:0 0 12px rgba(120,70,200,.45); }
#pumpkinToggle:hover { border-color:#b07cff; }

#excite { position:absolute; inset:0; z-index:9; display:none; flex-direction:column; align-items:center; justify-content:center; gap:2.4vmin; pointer-events:none; padding:8vh 4vw; }
#stage.excited #excite { display:flex; }
#excite > * { pointer-events:auto; }
#pumpkin { position:relative; width:min(56vw,40vh); aspect-ratio:578/594; filter:drop-shadow(0 0 24px rgba(255,140,30,.5)); }
#pbase, #face { position:absolute; inset:0; width:100%; height:100%; }
#pbase { object-fit:contain; }
#exrow { display:flex; align-items:center; gap:14px; font-size:clamp(20px,4vmin,30px); }
#exrow input[type=range] { width:min(60vw,360px); accent-color:#ff7a18; cursor:pointer; }
#exControls { display:flex; flex-direction:column; align-items:center; gap:2.4vmin; }
#exhint { font-family:var(--creep); color:#ffd9a0; font-size:clamp(16px,2.6vmin,22px); letter-spacing:.5px; }
#exhint b { color:#7CFF9E; }

/* countdown minimizes to a small bottom bar while excited */
#stage.excited #countdown { top:auto; bottom:58px; gap:min(1cqw,2vw); }
#stage.excited .num { font-size:min(3.4cqw,6.5vw); }
#stage.excited .lbl { font-size:min(1.2cqw,2.4vw); }

/* left-side global excitement meter (tube) */
#meter { position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:9; display:none; flex-direction:column; align-items:center; gap:8px; }
#stage.excited #meter { display:flex; }
#meter .excitement-meter { --level:0; --tube-w:min(30vw,200px); position:relative; width:var(--tube-w); aspect-ratio:512/1280; isolation:isolate; }
#meter .excitement-meter .meter-liquid { position:absolute; left:37.5%; right:37.5%; bottom:14.5%; height:71%; overflow:hidden; border-radius:999px; z-index:1; pointer-events:none; }
#meter .excitement-meter .meter-liquid:before { content:""; position:absolute; inset:auto 0 0; height:calc(var(--level)*1%); background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.95),transparent 9%),linear-gradient(90deg,#46ff1c 0%,#b7ff18 42%,#18ce00 100%); box-shadow:0 0 18px #53ff18,0 0 42px rgba(67,255,17,.8),inset 0 0 18px rgba(255,255,255,.45); filter:saturate(1.35); transition:height 450ms cubic-bezier(.2,.8,.2,1); }
#meter .excitement-meter .liquid-surface { position:absolute; left:-12%; right:-12%; bottom:calc(var(--level)*1%); height:20px; transform:translateY(50%); background:radial-gradient(ellipse at center,rgba(214,255,73,.95),rgba(37,255,0,.55) 55%,transparent 72%); animation:surfaceWobble 1.8s ease-in-out infinite; transition:bottom 450ms cubic-bezier(.2,.8,.2,1); }
#meter .excitement-meter .bubble, #meter .excitement-meter .ember { position:absolute; z-index:2; border-radius:50%; pointer-events:none; }
#meter .excitement-meter .bubble { bottom:0; width:9px; height:9px; background:rgba(228,255,189,.72); box-shadow:0 0 8px rgba(172,255,80,.9); animation:bubbleUp 3s linear infinite; }
#meter .excitement-meter .b1 { left:22%; animation-delay:-.2s; } #meter .excitement-meter .b2 { left:55%; width:6px; height:6px; animation-delay:-1.1s; } #meter .excitement-meter .b3 { left:73%; width:11px; height:11px; animation-delay:-2.3s; }
#meter .excitement-meter .ember { bottom:calc(var(--level)*1%); width:5px; height:5px; background:#dfff52; box-shadow:0 0 12px #65ff17; animation:emberRise 1.4s ease-out infinite; opacity:0; }
#meter .excitement-meter .e1 { left:20%; animation-delay:-.1s; } #meter .excitement-meter .e2 { left:50%; animation-delay:-.7s; } #meter .excitement-meter .e3 { left:72%; animation-delay:-1s; }
#meter .excitement-meter .meter-overlay { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; user-select:none; }
@keyframes surfaceWobble { 0%,100%{transform:translateY(50%) scaleX(1)} 50%{transform:translateY(48%) scaleX(1.12)} }
@keyframes bubbleUp { 0%{transform:translateY(0) scale(.7);opacity:0} 10%{opacity:.85} 100%{transform:translateY(-720px) scale(1.25);opacity:0} }
@keyframes emberRise { 0%{transform:translate(0,0) scale(.6);opacity:0} 15%{opacity:1} 100%{transform:translate(12px,-72px) scale(.15);opacity:0} }
#meter .mlabel { font-family:var(--creep); color:#d8ffe0; text-align:center; font-size:clamp(12px,1.8vmin,16px); letter-spacing:.5px; line-height:1.2; }
#meter .mlabel b { color:#7CFF9E; font-size:1.5em; }

/* excitement embers/sparks */
.spark { position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,#ffd27a,rgba(255,150,40,0) 70%); animation:ember 1.6s ease-in forwards; }
.spark.g { background:radial-gradient(circle,#d6ff7a,rgba(120,230,40,0) 70%); }

#exSubmit { min-width:210px; font-family:var(--creep); font-size:clamp(16px,2.6vmin,22px); letter-spacing:.5px; color:#10131a; background:#ff9a2e; border:none; border-radius:999px; padding:8px 24px; cursor:pointer; box-shadow:0 0 14px rgba(255,140,30,.6); transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
#exSubmit:hover { background:#ffb152; transform:translateY(-1px); }
#exSubmit:active { transform:translateY(1px) scale(.98); }
#exSubmit:disabled { cursor:wait; opacity:.88; }
#exSubmit.sending { background:#ffd36d; box-shadow:0 0 18px rgba(255,220,100,.72); animation:submitPulse .8s ease-in-out infinite; }
#exSubmit.sent { background:#7cff9e; box-shadow:0 0 22px rgba(124,255,158,.82); }
#exSubmit.failed { background:#ff6d6d; box-shadow:0 0 18px rgba(255,80,80,.7); }
#exStatus { min-height:1.8em; max-width:min(78vw,420px); padding:0 14px; display:grid; place-items:center; text-align:center; font-family:var(--creep); font-size:clamp(15px,2.4vmin,21px); letter-spacing:.4px; color:#d8ffe0; text-shadow:0 0 10px #54ff7a; opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease; }
#exStatus.show { opacity:1; transform:translateY(0); }
#pumpkin.submitted { animation:pumpkinSubmit .48s cubic-bezier(.2,1.2,.25,1); }
@keyframes submitPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes pumpkinSubmit { 0%,100%{transform:scale(1)} 35%{transform:scale(1.08) rotate(-2deg)} 70%{transform:scale(.98) rotate(1deg)} }
#exClose { position:absolute; top:-4%; right:-4%; z-index:3; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; color:#fff; background:rgba(20,10,30,.75); border:2px solid #6a3fb0; box-shadow:0 0 10px rgba(120,70,200,.5); }
#exClose:hover { border-color:#ff7a18; color:#ffd9a0; }
/* meter feedback handled by the component's liquid transition */
#exfx { position:absolute; inset:0; pointer-events:none; z-index:10; overflow:hidden; }

@media (max-width: 640px) {
  #vol { display:none; }
  body.immersive .site-header {
    min-height:58px;
    padding:10px 14px 8px;
    justify-content:center;
    background:linear-gradient(180deg, rgba(12,7,22,.86), rgba(12,7,22,.44) 72%, rgba(12,7,22,0));
  }
  body.immersive .site-header .brand {
    max-width:100%;
    font-size:clamp(24px,7.4vw,34px);
    line-height:1;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    text-shadow:0 2px 14px rgba(0,0,0,.65);
  }
  #spooks {
    top:66px;
    left:12px;
    right:auto;
    max-width:calc(100vw - 86px);
    padding:6px 11px;
    font-size:clamp(12px,3.6vw,15px);
    white-space:nowrap;
  }
  #pumpkinToggle { top:64px; right:14px; width:48px; height:48px; font-size:24px; }
  #gameToggle { top:120px; right:14px; width:48px; height:48px; font-size:24px; }
  #stage.excited #pumpkinToggle { top:64px; }
  #gameHud {
    left:12px;
    right:auto;
    bottom:calc(76px + env(safe-area-inset-bottom));
    grid-template-columns:auto auto;
    gap:8px;
  }
  #gameStats { justify-content:center; gap:11px; font-size:clamp(16px,4.8vw,22px); padding:10px 14px; }
  #gameTime { font-size:2.55em; }
  #gameExit { width:40px; height:40px; font-size:18px; }
  #leaderboard { left:12px; bottom:calc(154px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); }
  #stage.game-lobby #leaderboard { top:52%; max-height:min(70vh,540px); }
  #stage.excited #gameHud,
  #stage.excited #leaderboard { display:none; }
  #stage.excited .ghost { width:clamp(42px,12vw,58px); }

  #stage.excited #excite {
    display:grid;
    grid-template-rows:minmax(0, 1fr) auto;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:clamp(132px,17vh,158px) 12px calc(184px + env(safe-area-inset-bottom));
  }
  #stage.excited #pumpkin {
    width:min(48vw,232px);
    align-self:end;
    justify-self:center;
    margin:0 0 2px 18vw;
  }
  #stage.excited #exControls {
    width:min(76vw,370px);
    margin-left:18vw;
    gap:8px;
    padding:10px 12px 12px;
    border:2px solid rgba(124,94,210,.48);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(20,10,30,.48), rgba(20,10,30,.78));
    box-shadow:0 0 22px rgba(30,10,60,.32);
    backdrop-filter:blur(4px);
  }
  #stage.excited #exrow {
    width:100%;
    margin:0;
    gap:10px;
    font-size:clamp(18px,5.6vw,24px);
  }
  #stage.excited #exrow input[type=range] { width:100%; min-width:0; }
  #stage.excited #exSubmit {
    min-width:0;
    width:100%;
    margin:0;
    padding:11px 18px;
    font-size:clamp(17px,5.2vw,22px);
  }
  #stage.excited #exhint,
  #stage.excited #exStatus {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 4px;
    font-size:clamp(13px,4.1vw,17px);
    line-height:1.15;
  }
  #stage.excited #exhint { color:#ffe0a5; }
  #stage.excited #exStatus { min-height:2.4em; text-wrap:balance; }

  #stage.excited #meter {
    left:8px;
    top:54%;
    transform:translateY(-50%);
    gap:3px;
    z-index:11;
    width:18vw;
    max-width:76px;
  }
  #stage.excited #meter .excitement-meter { --tube-w:clamp(52px,16vw,70px); }
  #stage.excited #meter .mlabel { width:22vw; max-width:92px; font-size:clamp(10px,3vw,12px); line-height:1.05; text-shadow:0 0 8px #1f9d3f; }

  #stage.excited #countdown {
    left:50%;
    right:auto;
    bottom:calc(96px + env(safe-area-inset-bottom));
    gap:3.5vw;
    opacity:.96;
  }
  #stage.submit-sent #countdown,
  #stage.submit-sending #countdown { opacity:.24; filter:blur(1px); }
  #stage.excited .num { font-size:clamp(25px,7.5vw,34px); min-width:1.25em; }
  #stage.excited .lbl { font-size:clamp(9px,2.6vw,12px); }
  #stage.excited #audio {
    right:14px;
    bottom:calc(30px + env(safe-area-inset-bottom));
    padding:7px 12px;
  }
  #stage.excited #audioBtn { font-size:clamp(15px,4.4vw,19px); }
  body.immersive .site-footer { bottom:calc(0px + env(safe-area-inset-bottom)); font-size:11px; }
}

@media (max-width: 380px) {
  #stage.excited #pumpkin { width:min(45vw,210px); margin-left:19vw; }
  #stage.excited #meter .excitement-meter { --tube-w:50px; }
  #stage.excited #meter .mlabel { font-size:10px; }
  #stage.excited #exControls { width:74vw; margin-left:19vw; }
  #stage.excited #exSubmit { font-size:16px; }
}