@import url('assets/fonts/fonts.css');

:root {
  color-scheme: dark;
  --ink: #130c26;
  --violet: #b46afa;
  --lavender: #c5b1ed;
  --gold: #ffc63f;
  --green: #a3f73c;
  --game-font: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body-font: 'Nunito', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; background: #090615; }
body { margin: 0; min-height: 100svh; font-family: var(--body-font); color: #fff8ff; background: #0d081b; -webkit-tap-highlight-color: transparent; }
body::before { content: ''; position: fixed; inset: -35px; background: linear-gradient(90deg, #090716e8, #130b2b72 50%, #090716ef), url('assets/office-background.webp') center 58% / cover; filter: blur(12px); opacity: .8; pointer-events: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff6bd; outline-offset: 5px; }
button:disabled { cursor: default; }
button svg, button span { pointer-events: none; }
button { -webkit-user-select: none; user-select: none; }
svg { display: inline-block; vertical-align: middle; }
.svg-library { width: 0; height: 0; position: absolute; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-haze { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #8f38e81a, transparent 50%), radial-gradient(ellipse at 20% 85%, #3a3a9d16, transparent 55%); pointer-events: none; }

/* One portrait arcade, equally at home on a phone or a larger screen. */
.arcade { isolation: isolate; position: relative; width: 100%; max-width: 464px; min-height: 100svh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom)); overflow: hidden; background: linear-gradient(180deg, #1309232e 0%, #10082108 35%, #110b23a6 74%, #0b071df7 100%), url('assets/office-background.webp') center / cover; box-shadow: 0 0 0 1px #8150b73d, 0 0 100px #03020c; }
.arcade::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, #08041980); pointer-events: none; }
.topbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 12px; margin-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-home { border: 0; background: none; padding: 0; text-align: left; font-size: 15px; font-weight: 900; letter-spacing: -.4px; line-height: .98; text-shadow: 0 2px 8px #03020c; }
.brand-mark { width: 36px; height: 34px; flex-shrink: 0; }
.topbar-actions { display: flex; gap: 8px; }
.icon-button { display: grid; place-items: center; padding: 0; width: 41px; height: 41px; border: 1px solid #8d8ff096; border-radius: 50%; background: linear-gradient(155deg, #20234cc9, #100a25dc); box-shadow: inset 0 1px 5px #5472ae30, 0 3px 7px #04010a50; color: #eee9ff; }
.icon-button:hover { background: #33244d; border-color: #d3a8fb; }
#sound.is-muted, #music.is-muted { color: #c0b5dc; }
.screen { position: relative; }
.home-screen { display: flex; flex-direction: column; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: #c6b7e5; font-size: 9px; font-weight: 800; letter-spacing: 1.75px; text-shadow: 0 2px 6px #100828; }
.eyebrow span { height: 1px; width: 19px; background: #b99ae669; }
.game-title { position: relative; width: 100%; max-width: 376px; height: clamp(200px, 28svh, 266px); margin: 1px auto -8px; filter: drop-shadow(0 8px 8px #08031575); }
.game-title img { width: 100%; height: 100%; display: block; object-fit: fill; }
.wood-sign { position: relative; z-index: 2; width: 272px; max-width: 85%; margin: 8px auto 0; padding: 11px 14px 12px; color: #261005; text-align: center; background: repeating-linear-gradient(3deg, transparent 0 10px, #66230e1a 11px 12px, transparent 13px 25px), linear-gradient(110deg, #b86229, #f0b263 45%, #b96028); border: 2px solid #8b3d21; border-radius: 5px 9px 4px 7px; box-shadow: inset 0 2px 1px #ffe3a372, inset 0 -4px 3px #5728105c, 0 5px 0 #4a261c, 0 8px 10px #07020a8c; transform: rotate(-2deg); }
.wood-sign::before, .wood-sign::after { content: ''; position: absolute; width: 3px; height: 20px; background: #2d172e; border-left: 1px solid #9d75a0; top: -18px; }
.wood-sign::before { left: 27px; }.wood-sign::after { right: 27px; }
.wood-sign strong { display: block; font-family: var(--game-font); font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: -.7px; text-shadow: 0 1px #ffdfa187; }
.wood-sign > span { display: block; margin-top: 5px; font-weight: 900; font-size: 13px; }
.nail { position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #38243d; box-shadow: inset 0 1px #c19a94; }.nail-left { left: 25px; }.nail-right { right: 25px; }
.home-illustration { position: relative; height: clamp(175px, 26svh, 248px); margin: 1px -12px 0; }
.ghost-sprite { background-image: url('assets/ghosts.webp'); background-repeat: no-repeat; background-size: 300% 100%; background-position: 0% 50%; pointer-events: none; }
.hero-ghost { position: absolute; width: 380px; height: 380px; left: calc(50% - 190px); top: -74px; filter: drop-shadow(0 0 16px #a17df080); animation: ghost-float 3.5s ease-in-out infinite; }
.ghost-floor { position: absolute; width: 170px; height: 30px; background: radial-gradient(ellipse, #ab9bff80, transparent 70%); left: calc(50% - 85px); bottom: 7px; filter: blur(4px); animation: floor-glow 3.5s ease-in-out infinite; }
.twinkle { position: absolute; color: #e2dcff; text-shadow: 0 0 13px #a28fff; animation: twinkle 2.8s ease-in-out infinite; }.t1 { top: 19%; left: 10%; font-size: 25px; }.t2 { top: 65%; left: 18%; font-size: 15px; animation-delay: -.8s; }.t3 { top: 18%; right: 10%; font-size: 19px; animation-delay: -1.7s; }
.ghost-whisper { position: absolute; right: 2%; bottom: 10%; color: #e7d9ffb3; font-size: 10px; font-weight: 600; line-height: 1.4; text-align: right; transform: rotate(3deg); text-shadow: 0 2px 4px #0d051e; }
.ghost-whisper b { color: #fff4ec; font-size: 10px; font-weight: 800; }
.home-bottom { position: relative; z-index: 2; }
.arcade-button { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 50px; font-family: var(--game-font); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.5px; text-decoration: none; transition: filter .15s, transform .12s, box-shadow .12s; }
.arcade-button::before { content: ''; position: absolute; top: 4px; left: 12%; width: 76%; height: 30%; border-radius: 50%; background: linear-gradient(#fff9, #fff0); pointer-events: none; opacity: .5; }
.green-button { color: #082718; border: 2px solid #e4ff9e; background: linear-gradient(180deg, #ddff8c 0, #b5f65a 12%, #78e33f 48%, #37c54e 100%); box-shadow: inset 0 0 7px #f2ff9594, 0 5px 0 #217c32, 0 8px 0 #071e17, 0 0 27px #6ff63735; text-shadow: 0 1px 0 #e4ffb9; }
.purple-button { color: #fff9ff; border: 2px solid #e1a4ff; background: linear-gradient(180deg, #cf6ef3 0, #ad3be0 30%, #7832c2 70%, #5e209f 100%); box-shadow: inset 0 0 10px #ed8aff75, 0 5px 0 #3f146f, 0 7px 0 #0b071d, 0 0 20px #a747dd30; text-shadow: 0 2px #4c1a7a; }
.arcade-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.arcade-button:active { transform: translateY(4px); box-shadow: inset 0 0 7px #f2ff9540, 0 1px 0 #217c32, 0 3px 0 #071e17; }
.button-icon { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }.small-play { width: 14px; height: 14px; margin-left: 7px; opacity: .75; }
.home-best { display: flex; align-items: center; justify-content: center; gap: 7px; color: #bfaed9; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding-top: 16px; }.home-best .icon { width: 14px; height: 14px; color: #c8a4ff; }.home-best strong { color: #ffd47a; font-size: 12px; letter-spacing: 0; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.features > div { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid #7161ae6e; background: linear-gradient(160deg, #211737b5, #0d0b24d1); box-shadow: inset 0 1px #c3acff12; border-radius: 15px; padding: 12px 4px 10px; text-align: center; }
.features .icon { width: 24px; height: 24px; color: #e1d8ff; }.features span { font-size: 11px; line-height: 1.3; font-weight: 800; }
.brand-footer { position: relative; text-align: center; margin-top: 21px; padding-bottom: 1px; }
.brand-footer > span { display: block; color: #a894df; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.brand-footer a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #f6efff; text-decoration: none; font-size: 14px; font-weight: 900; margin-top: 7px; }.brand-footer .brand-mark { width: 25px; height: 25px; }.external-arrow { color: #b49cd4; font-size: 13px; }
.desktop-caption { display: none; }

/* Play scene: the cast, ghost, flying paper and feedback are independent layers. */
.stats { display: flex; width: 100%; border: 1px solid #8261b87a; border-radius: 18px; background: #0b071edb; box-shadow: inset 0 1px 9px #c6aeff09, 0 4px 20px #06031369; overflow: hidden; }
.stats > div { flex: 1; min-width: 0; text-align: center; padding: 7px 3px 6px; }.stats > div + div { border-left: 1px solid #6f4f9b43; }
.stats .level-stat { flex: .8; }.stats .score-stat { flex: 1.15; }.stats .lives-stat { flex: 1.35; }
.stats strong { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--game-font); font-size: 28px; font-weight: 600; line-height: 1.05; color: var(--gold); text-shadow: 0 2px #a3672530; }
.stats > div > span { display: block; margin-top: 4px; color: #b8a7de; font-size: 10px; font-weight: 800; letter-spacing: .7px; }.fire-icon { width: 24px; height: 29px; color: #ff931b; filter: drop-shadow(0 0 4px #ff712450); }
.victim-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; align-items: center; height: 50px; }
.victim-meta { grid-column: 2; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; }
.victim-pill { display: block; max-width: 100%; border: 1px solid #b85df0; border-radius: 30px; padding: 4px 14px; background: linear-gradient(#7223b6, #3a126a); font-family: var(--game-font); font-size: 14px; line-height: 1.2; font-weight: 500; text-align: center; box-shadow: inset 0 1px 5px #cd6eff60, 0 2px 9px #08021480; }
.mini-pause { display: grid; place-items: center; position: relative; grid-column: 3; justify-self: end; width: 31px; height: 31px; padding: 0; border: 1px solid #ad8fdb57; border-radius: 50%; background: #130b2a85; }.mini-pause .icon { width: 15px; height: 15px; stroke-width: 3px; }
.scene { position: relative; height: clamp(225px, calc(31svh - 8px), 330px); margin: -1px -22px 0; overflow: hidden; isolation: isolate; }
.scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #190c3300 60%, #170d32a6), radial-gradient(ellipse at 30% 30%, #8180e826, transparent 60%); z-index: -1; }
.scene-halo { position: absolute; top: 10%; left: -10%; width: 75%; height: 65%; background: radial-gradient(ellipse, #b18bed40, transparent 68%); opacity: .35; transition: opacity .2s; }
.scene-ghost { position: absolute; width: 300px; height: 300px; left: -62px; top: -63px; z-index: 3; filter: drop-shadow(0 0 10px #a898f478); animation: ghost-float 3.8s ease-in-out infinite; transform-origin: 55% 55%; }
.character { --character-x: 0%; --character-y: 0%; position: absolute; z-index: 2; width: 305px; height: 458px; right: -8px; bottom: -63px; background: url('assets/characters-calm.webp') var(--character-x) var(--character-y) / 500% 200% no-repeat; filter: drop-shadow(-3px 0 2px #b18cee38) drop-shadow(0 8px 7px #08021180); transform-origin: 50% 85%; }
.desk { position: absolute; z-index: 4; bottom: -2px; left: 0; right: 0; height: 39px; background: repeating-linear-gradient(176deg, transparent 0 7px, #b47c6326 8px 9px), linear-gradient(#b36d47, #79412f 10%, #4b2330 70%, #27162c 71%); box-shadow: 0 -3px 0 #d890595c, 0 -11px 25px #1d0d2029; transform: rotate(-.5deg); }
.laptop { position: absolute; width: 112px; height: 80px; border: 3px solid #4a3d59; border-radius: 5px 5px 1px 1px; background: linear-gradient(135deg, #312a42, #14101f); left: 20px; bottom: 24px; transform: skew(9deg) rotate(-2deg); box-shadow: 3px 3px 5px #0a071c80; }.laptop::after { content: ''; position: absolute; height: 4px; width: 135px; background: #6f627f; border-radius: 2px; left: -7px; bottom: -6px; }.laptop span { position: absolute; width: 16px; height: 16px; background: #675478; border-radius: 50%; left: 44px; top: 28px; opacity: .35; }
.mug { position: absolute; right: 21px; bottom: 27px; width: 46px; height: 57px; padding-top: 12px; background: linear-gradient(90deg, #e5d6e4, #fff8ed 42%, #c5b3d0); border-radius: 5px 5px 12px 12px; border-top: 5px solid #756060; box-shadow: -5px 6px 4px #160f2e77; color: #362543; text-align: center; font-size: 7px; font-weight: 900; line-height: 1.2; transform: rotate(3deg); }.mug::after { content: ''; position: absolute; width: 14px; height: 26px; border: 6px solid #d9c9df; border-left: 0; border-radius: 0 13px 13px 0; right: -12px; top: 7px; }.mug i { display: block; width: 17px; height: 8px; margin: 5px auto 0; background: linear-gradient(90deg,#56886a 0 20%,transparent 20% 30%,#56886a 30% 55%,transparent 55% 65%,#56886a 65%); clip-path: polygon(0 70%,25% 70%,25% 40%,60% 40%,60% 0,100% 0,100% 100%,0 100%); }
.sticky-note { position: absolute; width: 42px; height: 13px; background: #e5b83e; left: 37%; bottom: 25px; transform: rotate(-7deg) skew(-25deg); box-shadow: 0 4px 0 #9b702f; }
.is-charging .scene-halo { opacity: 1; }.is-charging .scene-ghost { animation: ghost-charge .7s ease-in-out infinite; }.is-charging .character { animation: nervous .8s ease-in-out infinite; }
.is-scared .character { background-image: url('assets/characters-scared.webp'); animation: startled .5s cubic-bezier(.2,.8,.3,1); }.is-scared .scene-ghost { background-position: 50% 50%; animation: ghost-boo .65s ease-out both; }.is-scared .mug { animation: mug-jump .45s ease-out; }
.is-perfect .scene-halo { background: radial-gradient(ellipse, #ffefac55, transparent 70%); opacity: 1; }.is-miss .scene-ghost { animation: ghost-sigh .7s ease-out; filter: drop-shadow(0 0 8px #9793ff40) saturate(.65); }

/* Timing and physical BOO control. */
.control-deck { position: relative; z-index: 10; margin: 0 -5px; text-align: center; }
.control-deck::before { content: ''; position: absolute; inset: -8px -22px -30px; z-index: -1; pointer-events: none; background: linear-gradient(#0c071d00, #130a25d9 20%, #10091fda); }
/* Text lives below the artwork. Reserved rows keep the timing controls still. */
.feedback-panel { display: grid; grid-template-rows: 22px minmax(32px, auto); gap: 2px; min-height: 68px; padding: 5px 12px; border: 1px solid #9270b456; border-radius: 12px; background: linear-gradient(120deg, #241638f5, #170f28f5); box-shadow: inset 0 1px #ead8ff0a; text-align: left; }
.feedback-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.instruction { margin: 0; min-width: 0; color: #d4bde8; font-size: 10.5px; line-height: 1.2; font-weight: 900; letter-spacing: .3px; }
.speech-bubble { display: flex; align-items: center; min-width: 0; margin: 0; color: #fff0d8; font-size: 12px; line-height: 1.3; font-weight: 800; }
.points-pop { font-family: var(--game-font); font-size: 20px; line-height: 1.1; font-weight: 600; color: #ffe685; white-space: nowrap; }
.feedback-panel:has(.speech-bubble[data-state="scared"]) { border-color: #d5b6658a; }
.feedback-panel:has(.speech-bubble[data-state="scared"]) .instruction { color: #ffe49c; }
.feedback-panel:has(.speech-bubble[data-state="miss"]) .points-pop { color: #e3bbd7; font-size: 17px; }
.meter-frame { position: relative; margin-top: 12px; padding: 5px; border: 2px solid #b97ae8; border-radius: 50px; background: #170c2a; box-shadow: inset 0 0 8px #d79afa70, 0 0 0 3px #5234748f, 0 0 17px #b76fce45; }
.meter { --zone-start: 30%; --zone-end: 70%; --perfect-start: 42%; --perfect-end: 58%; --target-width: 40%; --perfect-width: 16%; position: relative; height: 29px; border-radius: 50px; background: linear-gradient(90deg, #8e264f 0%, #dc484f 12%, #f49f3e var(--zone-start), #91e348 var(--zone-start), #a5f658 var(--perfect-start), #d5ff8c var(--perfect-start), #d5ff8c var(--perfect-end), #a5f658 var(--perfect-end), #91e348 var(--zone-end), #f49f3e var(--zone-end), #dc484f 88%, #8e264f 100%); box-shadow: inset 0 3px 6px #2a0b2659; }
.meter::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--zone-start); width: var(--target-width); border-left: 2px solid #ecffb7c9; border-right: 2px solid #ecffb7c9; box-shadow: 0 0 10px #a4ff4c4d; pointer-events: none; }
.target-zone { position: absolute; width: var(--perfect-width); height: 100%; top: 0; left: var(--perfect-start); border-left: 1px solid #f9ffc580; border-right: 1px solid #f9ffc580; background: repeating-linear-gradient(120deg, #fffac01c 0 3px, transparent 3px 7px); }
.target-zone::after { content: ''; position: absolute; height: 7px; width: 7px; left: calc(50% - 3.5px); top: calc(50% - 3.5px); transform: rotate(45deg); background: #faffd4; border: 1px solid #5e9836; box-shadow: 0 0 5px #fff99c; }
.meter-glint { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 2px #fff4b750; background: linear-gradient(#ffffff18, transparent 55%); pointer-events: none; }
.needle { position: absolute; width: 5px; height: 47px; top: -9px; left: 0; border: 1px solid #fff; border-radius: 5px; background: white; transform: translateX(-50%); box-shadow: 0 0 8px #fff9, 1px 1px 3px #20183080; z-index: 4; will-change: left; }
.meter-target { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--body-font); font-size: 7px; letter-spacing: 1px; font-weight: 900; color: #e6ffc3; background: #28163e; border-radius: 5px; padding: 1px 4px; opacity: 0; transition: opacity .15s; }.control-deck:has(.boo-button.is-charging) .meter-target { opacity: 1; }
.boo-button-wrap { position: relative; width: 174px; height: 152px; margin: 10px auto 6px; padding-top: 6px; }
.boo-aura { position: absolute; inset: 4px -17px -4px; border: 1px solid #fa7c224a; border-radius: 50%; box-shadow: 0 0 25px #ff781221, inset 0 0 25px #ff781212; pointer-events: none; transform: rotateX(20deg); }.boo-aura::after { content: ''; position: absolute; inset: 7px; border: 1px solid #ff9b3b24; border-radius: 50%; }
.boo-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 166px; height: 129px; margin: 0 auto; border: 3px solid #ffdf8d; border-radius: 50%; background: radial-gradient(ellipse at 30% 8%, #ffef73a1, transparent 45%), linear-gradient(170deg, #ffd642, #ff9b12 45%, #ff6d06 90%); box-shadow: inset 0 2px 4px #fffab3, inset 0 -5px 9px #e83c07, 0 8px 0 #d04608, 0 12px 0 #8c2c13, 0 16px 0 6px #1d122d, 0 19px 0 7px #050612, 0 5px 26px #ff762b85; text-shadow: 0 3px 0 #cf4e15; touch-action: none; -webkit-touch-callout: none; transition: transform .07s, box-shadow .07s, filter .15s; }
.boo-button > svg { position: relative; z-index: 2; width: 48px; height: 48px; color: #fffce8; filter: drop-shadow(0 3px 0 #f3701c); }
.boo-button > span:last-child { position: relative; z-index: 2; font-family: var(--game-font); font-size: 34px; font-weight: 600; line-height: 1; color: #fffce8; paint-order: stroke fill; -webkit-text-stroke: 1px #fff5db; }
.boo-shine { position: absolute; width: 17px; height: 10px; top: 16px; left: 34px; border-radius: 50%; background: #fff7b5b3; transform: rotate(-35deg); box-shadow: 0 0 7px #fffc9d; }
.boo-button.is-charging, .boo-button.charging, .boo-button:active:not(:disabled) { transform: translateY(8px) scale(.99); box-shadow: inset 0 2px 4px #fffab3, inset 0 -5px 9px #e83c07, 0 2px 0 #d04608, 0 4px 0 #8c2c13, 0 8px 0 6px #1d122d, 0 11px 0 7px #050612, 0 0 30px #ff762b99; }
.boo-button:disabled { filter: saturate(.75) brightness(.9); }
.boo-button.is-charging > span:last-child { font-size: 26px; letter-spacing: -.7px; }
.share-copy-field { display: block; width: 100%; margin-top: 9px; padding: 10px; resize: vertical; border: 1px solid #9b69c1; border-radius: 8px; background: #170b29; color: #fff3e2; font: 12px/1.5 var(--body-font); }
.control-mode { display: inline-flex; padding: 3px; border-radius: 50px; background: #0d071e9e; border: 1px solid #71538d66; margin-top: 6px; gap: 2px; }
.control-mode button { border: 0; border-radius: 30px; background: transparent; color: #a897c4; font-size: 9px; line-height: 1; letter-spacing: .6px; font-weight: 900; padding: 9px 12px; min-height: 28px; }
.control-mode button.is-active { color: #f5e9ff; background: linear-gradient(#4e2b6b, #311b4b); box-shadow: inset 0 1px #8b60b64d; }
.control-hint { color: #b4a2ce; font-size: 10px; margin: 3px 0 5px; line-height: 1.3; min-height: 13px; }
.level-progress { max-width: 320px; margin: 0 auto; padding-top: 1px; color: #b9a2d1; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.streak-chip { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 8px; color: #a58eba; }.streak-chip b { font-family: var(--game-font); color: #ffce6d; font-size: 13px; font-weight: 500; }.streak-chip .fire-icon { width: 11px; height: 16px; }
.level-track { width: 100%; height: 3px; overflow: hidden; border-radius: 3px; margin: 3px 0 4px; background: #a471cb29; }.level-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9c58d9, #ce99ff); box-shadow: 0 0 8px #bf8ae77d; transition: width .4s; }
.level-progress p { margin: 0; font-size: 9px; line-height: 1.4; color: #bca4d1; }
.arcade:has(.game-screen:not(.hidden)) .brand-footer { display: none; }

/* Results card. */
.end-screen { border: 1px solid #9452cd9c; border-radius: 28px; padding: 20px 15px 15px; background: linear-gradient(#170b2bd9, #0d071be8); box-shadow: inset 0 1px 10px #cc84ff14, 0 10px 35px #0804116b; }
.verdict { margin: 0; text-align: center; font-family: var(--game-font); font-size: 37px; font-weight: 600; line-height: 1; letter-spacing: -.8px; text-shadow: 0 3px #6d4a88; }
.verdict span { display: block; font-size: 49px; color: #b8f752; text-shadow: 0 3px #5bb336, 0 5px #337432, 0 8px #132b2c; letter-spacing: -1.5px; line-height: 1.15; }
.end-sparkle { position: absolute; top: 15px; right: 23px; color: #ffe986; font-size: 19px; text-shadow: 0 0 13px #ffeb9b; }
.end-summary { text-align: center; font-size: 14px; font-weight: 800; margin: 15px 0 0; }
.trophy-scene { position: relative; height: 192px; margin: 0 -10px; }
.trophy-ghost { position: absolute; width: 350px; height: 350px; left: calc(50% - 175px); top: -76px; background-position: 100% 50%; filter: drop-shadow(0 0 16px #ae7dc34d); animation: ghost-float 3.7s ease-in-out infinite; }
.star { position: absolute; width: 18px; height: 18px; color: #ffdc6e; filter: drop-shadow(0 0 7px #ffc34469); animation: twinkle 3s ease-in-out infinite; }.star-one { top: 37px; left: 4%; transform: rotate(-13deg); }.star-two { bottom: 27px; left: 13%; width: 11px; }.star-three { top: 57px; right: 0%; animation-delay: -.8s; }.star-four { bottom: 33px; right: 10%; width: 14px; animation-delay: -1.4s; color: #c4f14d; }
.results-stats { display: grid; grid-template-columns: 1.3fr .85fr 1fr; border: 1px solid #905ac4a3; border-radius: 17px; background: #10071de0; position: relative; margin-top: -1px; }
.results-stats > div { position: relative; text-align: center; padding: 12px 6px 13px; }.results-stats > div + div { border-left: 1px solid #76509952; }
.results-stats > div > span:first-child { display: block; font-size: 9px; color: #ba93e9; font-weight: 900; }
.results-stats strong { display: block; margin-top: 2px; font-family: var(--game-font); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--gold); text-shadow: 0 2px #a56d2b7d; }.results-stats .result-streak { color: #fff7ff; display: flex; align-items: center; justify-content: center; gap: 3px; }.result-streak .fire-icon { width: 18px; height: 25px; }
.results-stats .new-best { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%) rotate(-3deg); padding: 3px 12px 4px; border-radius: 20px; background: linear-gradient(#c9fb64,#65df36); box-shadow: 0 2px #2c661d; white-space: nowrap; color: #123b18; font-size: 10px; font-weight: 900; }
.all-time-best { text-align: center; font-size: 8px; font-weight: 900; letter-spacing: .7px; color: #a994cc; margin: 17px 0 13px; }.all-time-best strong { color: #e2c4fc; margin-left: 4px; font-size: 11px; }
.career-card { padding: 12px 11px 13px; background: linear-gradient(#2210399c,#140824d1); border: 1px solid #7541aa96; border-radius: 21px; }.career-card h3 { text-align: center; font-size: 12px; color: #c69ced; margin: 0 0 9px; font-weight: 900; }
.parchment { position: relative; padding: 16px 9px 13px; color: #341c27; text-align: center; border-radius: 6px; background: radial-gradient(ellipse at center, #fff0cb, #f6dfac 74%, #d6b47e); box-shadow: inset 0 0 14px #a1633e66, 0 4px 0 #07051490; }.parchment::after { content: ''; position: absolute; inset: 0; border: 1px solid #754b3038; border-radius: 6px; pointer-events: none; }.parchment > strong { display: block; font-family: var(--game-font); font-size: 25px; font-weight: 600; line-height: 1.05; letter-spacing: -.75px; }
.skull-rating { display: flex; justify-content: center; align-items: center; gap: 7px; height: 36px; margin-top: 8px; }.skull-rating svg, .skull-rating .skull { display: block; width: 25px; height: 28px; }.skull-rating svg { fill: currentColor; }.skull-rating .is-dim { opacity: .3; }.skull-rating .is-lit { opacity: 1; }
.parchment p { font-size: 11px; line-height: 1.45; font-weight: 800; margin: 7px 0 0; }
.end-actions { display: flex; flex-direction: column; gap: 17px; margin-top: 21px; }.end-actions .arcade-button { min-height: 57px; font-size: 23px; }.end-actions .purple-button { font-size: 19px; min-height: 52px; }.end-actions .button-icon { width: 26px; height: 26px; }
.share-status { text-align: center; color: #ccaddf; font-size: 11px; line-height: 1.4; margin: 12px 0 0; }.share-status:empty { margin: 0; }

/* Help and pause stay in the same illustrated world. */
.game-dialog { width: min(390px, calc(100vw - 32px)); max-height: calc(100svh - 40px); border: 1px solid #ae68df; border-radius: 26px; padding: 29px 24px 22px; color: #f8eeff; background: radial-gradient(ellipse at top,#392057,#180d2b 65%); box-shadow: 0 0 0 5px #6b378928, 0 24px 100px #03020ae0; overflow-y: auto; }
.game-dialog::backdrop { background: #080311cf; backdrop-filter: blur(7px); }.dialog-close { position: absolute; right: 12px; top: 12px; width: 33px; height: 33px; }.dialog-close .icon { width: 18px; height: 18px; }
.dialog-kicker { font-size: 8px; font-weight: 900; letter-spacing: 1.4px; color: #c79eea; display: block; margin: 8px 0 9px; }
.game-dialog h2 { font-family: var(--game-font); font-size: 32px; font-weight: 600; line-height: 1; margin: 0 0 15px; color: #fbf0ff; }.game-dialog p { color: #d6c8e6; font-size: 13px; line-height: 1.6; }
.how-to { padding: 0; margin: 22px 0; list-style: none; counter-reset: steps; }.how-to li { position: relative; padding-left: 37px; margin-bottom: 15px; font-size: 13px; counter-increment: steps; }.how-to li::before { content: counter(steps); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 25px; height: 25px; color: #29113d; background: #cda5fa; border-radius: 50%; font-family: var(--game-font); font-size: 15px; }.how-to b { display: block; color: #fff0c9; }.how-to span { display: block; color: #cab9dc; font-size: 12px; line-height: 1.4; margin-top: 3px; }
.help-meter { height: 18px; border-radius: 20px; border: 2px solid #b97ae8; background: linear-gradient(90deg,#d13d4d 0 26%,#ffb93f 26% 38%,#89da3a 38% 45%,#4bd344 45% 55%,#89da3a 55% 62%,#ffb93f 62% 74%,#d13d4d 74%); position: relative; }.help-meter i { position: absolute; height: 25px; width: 4px; top: -5px; left: 50%; background: #fff; border-radius: 3px; }.game-dialog .help-score { font-size: 11px; }.help-score b { color: #fff2bd; }
.help-alternative { background: #10091f7c; padding: 14px 15px 11px; border: 1px solid #8261a64f; border-radius: 13px; margin-top: 18px; }.help-alternative > b { font-family: var(--game-font); font-size: 18px; font-weight: 500; color: #c7f77a; }.help-alternative p { margin: 5px 0 0; font-size: 12px; }.game-dialog .help-small { font-size: 10px; margin: 16px 0 0; color: #ae95c3; }
.pause-dialog { text-align: center; padding: 25px 24px; }.pause-ghost { width: 54px; height: 54px; color: #f3eaff; margin: 2px auto 10px; filter: drop-shadow(0 0 14px #b69be5); }.pause-dialog .arcade-button { font-size: 22px; min-height: 57px; margin: 22px 0 16px; }.text-button { background: none; border: none; padding: 12px; font-size: 12px; color: #c7b4de; text-decoration: underline; text-underline-offset: 4px; }
.sound-dialog { padding-top: 27px; }
.sound-dialog .dialog-kicker { max-width: calc(100% - 12px); font-size: 7px; letter-spacing: 1.1px; }
.sound-dialog h2 { margin-bottom: 6px; font-size: 35px; }
.sound-dialog .sound-intro { margin: 0 0 20px; color: #c9b2df; }
.audio-channel { padding: 15px 14px 10px; margin-top: 12px; border: 1px solid #9163af68; border-radius: 17px; background: linear-gradient(140deg,#36214b99,#0d0a2180); box-shadow: inset 0 1px #ead8ff0b; }
.audio-channel-heading { display: flex; align-items: center; gap: 10px; }
.audio-channel-icon { display: grid; place-items: center; flex: 0 0 34px; height: 38px; color: #d9b1fa; }
.audio-channel-icon .icon { width: 26px; height: 26px; }
.audio-channel-heading > div { flex: 1; min-width: 0; }
.audio-channel h3 { margin: 0; font-family: var(--game-font); font-size: 19px; font-weight: 500; color: #fff0d8; }
.audio-channel p { font-size: 10px; line-height: 1.35; margin: 3px 0 0; color: #baa4d1; }
.audio-toggle { min-width: 45px; min-height: 31px; padding: 5px 8px; flex-shrink: 0; border: 1px solid #9377ad; border-radius: 20px; color: #bcaad3; background: #170e29; font-size: 10px; font-weight: 900; letter-spacing: .6px; }
.audio-toggle[aria-pressed="true"] { color: #163320; border-color: #c6f799; background: linear-gradient(#cefc95,#87dc6c); box-shadow: 0 0 12px #9ef36818; }
.volume-row { display: flex; gap: 13px; align-items: center; margin-top: 12px; }
.volume-row input { display: block; min-width: 0; flex: 1; height: 26px; margin: 0; accent-color: #b4ec88; cursor: pointer; }
.volume-row output { width: 35px; text-align: right; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; color: #dfcbf3; }
.sound-dialog .test-boo { margin-top: 22px; min-height: 52px; font-size: 22px; }
.test-boo:disabled { filter: saturate(.35); opacity: .5; transform: none; }
.sound-dialog .test-boo-hint { font-size: 10px; text-align: center; min-height: 16px; margin: 13px 0 0; color: #c6b2da; }
.sound-dialog .sound-footnote { text-align: center; font-size: 9px; margin: 13px 0 0; color: #a58dbd; }
.noscript { position: fixed; inset: auto 14px 14px; z-index: 30; background: #e8d5f3; padding: 18px; border-radius: 12px; color: #221132; font-weight: 800; text-align: center; }

/* The endless shift: ghost lives, supernatural colleagues and quiet scene depth. */
.feature-ghost, .feature-skull { width: 24px; height: 24px; color: #e1d8ff; }
.home-best .best-divider { color: #79578f; margin: 0 2px; }
#sound, #music { position: relative; }
#sound[aria-pressed="true"]::after, #music[aria-pressed="true"]::after { content: ''; position: absolute; width: 6px; height: 6px; top: 2px; right: 2px; border-radius: 50%; background: #c1fb75; box-shadow: 0 0 7px #a0ff69b0; }
.stats #lives { min-height: 29px; gap: 2px; color: #d8f7dc; }
.life-icon { width: clamp(13px, 4.1vw, 17px); height: 23px; filter: drop-shadow(0 0 4px #98f5cb3d); transition: opacity .25s, color .25s, transform .25s; }
.life-icon.is-lost, .life-icon.is-empty { color: #77648d; opacity: .3; filter: none; transform: scale(.83); }
#lives.life-lost { animation: lives-dip .6s ease-out; }
#lives:has(.life-icon:nth-child(2).is-lost) .life-icon:not(.is-lost) { color: #ffc38e; filter: drop-shadow(0 0 5px #ff6c5970); }
.lives-stat > span { font-size: 9px !important; }
.score-stat strong { font-variant-numeric: tabular-nums; }
.mini-pause::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
.scene[data-roster="halloween"] { background: radial-gradient(ellipse at 75% 40%, #8252c32b, transparent 60%); }
.scene[data-roster="halloween"] .character { background-image: url('assets/halloween-calm.webp'); }
.scene[data-roster="halloween"].is-scared .character { background-image: url('assets/halloween-scared.webp'); }
.scene[data-roster="halloween"] .scene-halo { background: radial-gradient(ellipse, #9eb2ef44, transparent 70%); }
.scene[data-roster="oddballs"] { background: radial-gradient(ellipse at 75% 40%, #83d0b51e, transparent 60%); }
.scene[data-roster="oddballs"] .character { width: 323px; height: 485px; bottom: var(--oddball-bottom, -80px); background-image: url('assets/oddballs-calm.webp'); }
.scene:is([data-character="alien-hr"], [data-character="mad-scientist"], [data-character="pirate-accountant"], [data-character="swamp-monster"], [data-character="office-clown"]) { --oddball-bottom: -3px; }
.scene[data-roster="oddballs"].is-scared .character { background-image: url('assets/oddballs-scared.webp'); }
.scene[data-roster="oddballs"] .scene-halo { background: radial-gradient(ellipse, #86e1c93b, transparent 70%); }
.level-badge { max-width: 100%; color: #cbb2e1; font-size: 6.5px; line-height: 1.25; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; text-align: center; }
.level-badge.is-milestone { color: #ffe49c; text-shadow: 0 0 9px #ffa64a50; }
.scene-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d3c7ff; box-shadow: 0 0 6px #c3abed; opacity: .35; animation: mote-drift 7s ease-in-out infinite; }
.scene-motes i:nth-child(1) { left: 8%; top: 40%; }.scene-motes i:nth-child(2) { left: 20%; top: 18%; animation-delay: -3s; }.scene-motes i:nth-child(3) { left: 43%; top: 58%; animation-delay: -4s; width: 2px; height: 2px; }.scene-motes i:nth-child(4) { left: 72%; top: 9%; animation-delay: -1s; }.scene-motes i:nth-child(5) { left: 91%; top: 37%; animation-delay: -5s; }.scene-motes i:nth-child(6) { left: 56%; top: 30%; animation-delay: -2s; width: 2px; height: 2px; }
.scare-ring { position: absolute; z-index: 1; width: 120px; height: 120px; left: 23%; top: 15%; opacity: 0; border: 3px solid #dccdffb5; border-radius: 50%; box-shadow: 0 0 12px #c6a7f84d, inset 0 0 12px #c6a7f84d; pointer-events: none; }
.is-scared .scare-ring { animation: scare-wave .7s ease-out; }
.perfect-sparkles { position: absolute; z-index: 1; inset: 0; pointer-events: none; }.perfect-sparkles i { position: absolute; color: #fff5b3; font-size: 17px; font-style: normal; opacity: 0; filter: drop-shadow(0 0 7px #ffa344); }
.perfect-sparkles i:nth-child(1) { left: 3%; top: 12%; --spark-turn: -30deg; }.perfect-sparkles i:nth-child(2) { right: 3%; top: 12%; --spark-turn: 40deg; }.perfect-sparkles i:nth-child(3) { right: 2%; top: 62%; --spark-turn: 30deg; }.perfect-sparkles i:nth-child(4) { left: 2%; top: 65%; --spark-turn: -45deg; }
.is-perfect .perfect-sparkles i { animation: perfect-spark 1.05s ease-out both; }.is-perfect .perfect-sparkles i:nth-child(2n) { animation-delay: .08s; }
.meter.in-target.is-moving { box-shadow: inset 0 3px 6px #2a0b2659, 0 0 14px #a4ff4c50; }
.meter.is-perfect { box-shadow: inset 0 3px 6px #2a0b2659, 0 0 18px #e7ff7599; }
.meter.is-miss { box-shadow: inset 0 3px 6px #2a0b2659, 0 0 14px #e95b7769; }
.control-deck:has(.meter.is-moving.in-target) .boo-aura { border-color: #bff67466; box-shadow: 0 0 28px #a4ff4c24; }
.needle::before { content: ''; position: absolute; top: -3px; left: -4px; width: 11px; height: 6px; background: #fff5da; border-radius: 3px 3px 1px 1px; box-shadow: 0 1px 3px #210f39; }

@keyframes lives-dip { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes mote-drift { 0%,100% { opacity: .12; transform: translate(0, 5px); } 50% { opacity: .6; transform: translate(7px, -12px); } }
@keyframes scare-wave { 0% { opacity: .7; transform: scale(.35); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes perfect-spark { 0% { opacity: 0; transform: translateY(16px) rotate(0) scale(.2); } 25% { opacity: 1; transform: translateY(-5px) rotate(var(--spark-turn)) scale(1.15); } 75% { opacity: .7; } 100% { opacity: 0; transform: translateY(-18px) rotate(var(--spark-turn)) scale(.6); } }

@keyframes ghost-float { 0%,100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes floor-glow { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
@keyframes twinkle { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes ghost-charge { 0%,100% { transform: translate(5px, 0) rotate(-4deg) scale(1.01); } 50% { transform: translate(10px, -5px) rotate(2deg) scale(1.04); } }
@keyframes nervous { 0%,100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes startled { 0% { transform: translateY(7px) scale(.96); } 25% { transform: translateY(-17px) rotate(4deg) scale(1.04); } 55% { transform: translateY(-5px) rotate(-3deg); } 80% { transform: rotate(1deg); } 100% { transform: none; } }
@keyframes ghost-boo { 0% { transform: translate(-12px, -2px) rotate(-8deg) scale(.9); } 35% { transform: translate(26px, 10px) rotate(10deg) scale(1.12); } 100% { transform: translate(10px, 2px) rotate(4deg) scale(1.04); } }
@keyframes ghost-sigh { 0%,100% { transform: translateY(0); } 50% { transform: translate(-12px, 15px) rotate(-10deg); } }
@keyframes mug-jump { 0%,100% { transform: rotate(3deg); } 40% { transform: translateY(-8px) rotate(19deg); } 70% { transform: rotate(-8deg); } }

@media (min-width: 600px) {
  body { padding: 22px 0; }
  .arcade { min-height: 0; border: 1px solid #8b53b08c; border-radius: 32px; padding: 19px 24px 21px; box-shadow: 0 0 0 6px #0b061b80, 0 0 0 7px #5c42702d, 0 25px 100px #03020dcc; }
  .arcade::after { border-radius: inherit; }
  .game-title { height: 252px; }
  .home-illustration { height: 230px; }
  .hero-ghost { width: 410px; height: 410px; left: calc(50% - 205px); top: -90px; }
  .scene { margin-left: -24px; margin-right: -24px; height: 320px; }
  .character { width: 330px; height: 495px; bottom: -71px; }
  .scene[data-roster="oddballs"] .character { width: 350px; height: 525px; bottom: var(--oddball-bottom, -88px); }
  .scene-ghost { width: 325px; height: 325px; top: -70px; }
  .boo-button-wrap { width: 183px; height: 165px; }.boo-button { width: 177px; height: 139px; }
}
@media (min-width: 1150px) {
  .desktop-caption { display: block; position: fixed; left: max(36px, calc(50% - 650px)); top: 45%; width: 290px; transform: translateY(-50%); text-align: left; pointer-events: none; }
  .desktop-caption > span { color: #c6b6df; font-family: var(--game-font); font-weight: 500; font-size: 27px; letter-spacing: -.5px; line-height: 1.15; }.desktop-caption b { color: #fff0c5; font-weight: 600; }.desktop-caption small { display: block; margin-top: 14px; max-width: 235px; line-height: 1.7; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; color: #aa8fc3; }
}
@media (max-height: 790px) and (max-width: 599px) {
  .arcade { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 12px; }
  .topbar { margin-bottom: 7px; min-height: 36px; }.brand-home { font-size: 13px; }.brand-mark { width: 31px; height: 30px; }.icon-button { width: 36px; height: 36px; }
  .game-title { height: 200px; margin-bottom: -12px; }.wood-sign { padding-top: 8px; padding-bottom: 9px; }.wood-sign strong { font-size: 20px; }.wood-sign > span { font-size: 12px; }
  .home-illustration { height: 173px; }.hero-ghost { width: 335px; height: 335px; left: calc(50% - 167.5px); top: -73px; }.ghost-whisper { bottom: 5%; font-size: 9px; }
  .arcade-button { min-height: 57px; font-size: 24px; }.home-best { padding-top: 13px; }.features { margin-top: 9px; }.features > div { padding: 8px 4px; gap: 4px; }.features .icon { height: 20px; }.features span { font-size: 10px; }.brand-footer { margin-top: 14px; }
  .scene { height: 29svh; min-height: 205px; }.character { width: 260px; height: 390px; bottom: -60px; right: 1px; }.scene-ghost { width: 255px; height: 255px; left: -52px; top: -62px; }
  .scene[data-roster="oddballs"] .character { width: 275px; height: 413px; bottom: var(--oddball-bottom, -74px); }
  .stats strong { font-size: 25px; }.stats > div { padding: 7px 2px; }.victim-row { height: 48px; }.victim-pill { font-size: 13px; }
  .feedback-panel { grid-template-rows: 20px minmax(30px, auto); min-height: 64px; }.speech-bubble { font-size: 11.5px; }.instruction { font-size: 10px; }.points-pop { font-size: 18px; }
  .meter { height: 25px; }.needle { height: 43px; }.boo-button-wrap { width: 162px; height: 139px; }.boo-button { width: 155px; height: 119px; }.boo-button > svg { width: 43px; height: 43px; }.boo-button > span:last-child { font-size: 32px; }.control-mode { margin-top: 3px; }.control-hint { font-size: 9px; margin: 4px 0 5px; }
  .end-screen { padding-top: 17px; }.verdict { font-size: 30px; }.verdict span { font-size: 42px; }.end-summary { margin-top: 12px; font-size: 12px; }.trophy-scene { height: 164px; }.trophy-ghost { width: 310px; height: 310px; left: calc(50% - 155px); top: -72px; }.results-stats strong { font-size: 36px; }.results-stats > div { padding-top: 9px; padding-bottom: 10px; }.career-card { padding: 9px; }.parchment { padding: 12px 7px 9px; }.parchment > strong { font-size: 22px; }.skull-rating { height: 30px; margin-top: 5px; }.parchment p { font-size: 10px; }.end-actions { margin-top: 17px; gap: 15px; }.end-actions .arcade-button { min-height: 51px; }
}
@media (max-width: 360px) {
  .topbar .icon-button { width: 36px; height: 36px; }
  .sound-dialog { padding-left: 18px; padding-right: 18px; }.audio-channel { padding-left: 10px; padding-right: 10px; }.audio-channel-heading { gap: 7px; }.audio-channel-icon { flex-basis: 27px; }.audio-channel h3 { font-size: 17px; }.audio-channel p { font-size: 9px; }
  .arcade { padding-left: 17px; padding-right: 17px; }.scene { margin-left: -17px; margin-right: -17px; }.eyebrow { font-size: 8px; letter-spacing: 1.2px; }.wood-sign { max-width: 88%; }.game-title { max-width: 310px; }.brand-home { font-size: 12px; }.topbar-actions { gap: 6px; }.victim-pill { font-size: 12px; padding-left: 15px; padding-right: 15px; }.stats strong { font-size: 24px; }.verdict span { font-size: 38px; }.end-actions .purple-button { font-size: 17px; }.parchment > strong { font-size: 21px; }
}
/* Keep the timing surface reachable even on a short phone. */
@media (max-height: 670px) and (max-width: 599px) {
  body[data-screen="game"] .arcade { padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: 8px; }
  body[data-screen="game"] .topbar { min-height: 31px; margin-bottom: 5px; }
  body[data-screen="game"] .topbar .icon-button { width: 31px; height: 31px; }
  body[data-screen="game"] .brand-home { font-size: 11px; }.game-screen .stats > div { padding-top: 5px; padding-bottom: 5px; }
  .game-screen .stats strong { font-size: 22px; }.game-screen .stats #lives { min-height: 23px; }.game-screen .stats > div > span { font-size: 8px; margin-top: 3px; }
  .game-screen .victim-row { height: 46px; }.game-screen .victim-meta { gap: 2px; }.game-screen .victim-pill { padding: 3px 11px; font-size: 11px; }
  .game-screen .scene { height: 24svh; min-height: 134px; max-height: 158px; }
  .game-screen .character { width: 203px; height: 305px; bottom: -52px; right: 7px; }
  .game-screen .scene[data-roster="oddballs"] .character { width: 215px; height: 323px; bottom: var(--oddball-bottom, -63px); }
  .game-screen .scene-ghost { width: 205px; height: 205px; top: -50px; left: -37px; }
  .game-screen .level-badge { font-size: 6px; letter-spacing: .6px; }
  .game-screen .laptop { width: 85px; height: 55px; left: 15px; bottom: 18px; }.game-screen .laptop::after { width: 100px; }.game-screen .laptop span { left: 31px; top: 17px; width: 12px; height: 12px; }
  .game-screen .desk { height: 28px; }.game-screen .mug { width: 33px; height: 41px; bottom: 21px; right: 22px; font-size: 5px; padding-top: 7px; }.game-screen .mug::after { height: 20px; width: 11px; border-width: 4px; right: -9px; }.game-screen .mug i { width: 12px; height: 6px; margin-top: 4px; }
  .game-screen .feedback-panel { grid-template-rows: 20px minmax(26px, auto); min-height: 58px; padding: 4px 10px; }.game-screen .speech-bubble { font-size: 10px; line-height: 1.3; }.game-screen .points-pop { font-size: 18px; }
  .game-screen .feedback-panel:has(.speech-bubble[data-state="miss"]) .points-pop { font-size: 15px; }
  .game-screen .meter-frame { margin-top: 8px; }
  .game-screen .meter { height: 22px; }.game-screen .needle { height: 38px; top: -8px; }
  .game-screen .instruction { font-size: 9px; letter-spacing: .15px; }
  .game-screen .boo-button-wrap { width: 137px; height: 109px; margin-top: 6px; margin-bottom: 2px; }.game-screen .boo-button { width: 127px; height: 90px; }.game-screen .boo-button > svg { width: 31px; height: 31px; }.game-screen .boo-button > span:last-child { font-size: 27px; }.game-screen .boo-button.is-charging > span:last-child { font-size: 21px; }
  .game-screen .control-mode { margin-top: 2px; }.game-screen .control-mode button { padding: 7px 10px; min-height: 24px; font-size: 8px; }
  .game-screen .control-hint { display: none; }
  .game-screen .level-progress { padding-top: 0; }.game-screen .progress-top { font-size: 7px; }.game-screen .level-track { margin: 3px 0 0; }.game-screen #nextGuest { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}