@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#111;--paper:#eae7e0;--brand:#762638;--line:#383838;--muted:#a9a7a2}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',Arial,sans-serif}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button,.button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:transparent;padding:14px 18px;text-decoration:none}button:hover,.button:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b6697b;outline-offset:4px}button:disabled{opacity:.45;cursor:default}button:disabled:hover{background:transparent;color:inherit;border-color:var(--line)}
header{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#0b0b0b}.wordmark{text-decoration:none;font-weight:700;font-size:25px;letter-spacing:-1px}.wordmark span{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:1.2px;margin-top:7px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:28px}.edition,.eyebrow,.selection-title,.instructions,.card-mode,.release,footer,.identity-note{letter-spacing:1.5px;font-size:11px}.header-actions button{font-size:11px;padding:10px 13px}.edition{color:var(--muted)}
.menu{max-width:1320px;margin:auto;padding:65px 5%;display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center}.eyebrow{color:var(--muted);line-height:1.7}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(90px,9.5vw,145px);line-height:.84;letter-spacing:-2px;margin:35px 0;font-weight:800}h1>span{font-size:.77em}h1 small{display:block;font:11px 'DM Sans',sans-serif;letter-spacing:7px;margin:22px 0 0 4px}.tagline{font-size:18px;line-height:1.7;color:#c6c4be;margin:40px 0}.release{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:20px;width:max-content;color:var(--muted)}.release span{color:var(--paper)}
.start-panel{background:var(--paper);color:var(--ink);padding:24px 28px;width:100%;max-width:440px;margin:auto}.selection-title{display:flex;justify-content:space-between;border-bottom:1px solid #bbb8b1;padding-bottom:17px;font-size:10px}.base-character{background:url('./assets/aiyo-pixel-costumes.png') left center/300% 100%;image-rendering:pixelated;width:180px;height:290px;margin:18px auto}.start-copy{text-align:center;font-size:12px;line-height:1.8;letter-spacing:1px;margin:15px 0 23px}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:700;padding:18px 22px;letter-spacing:.5px}.start-panel .primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}.primary:hover,.start-panel .primary:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}.instructions{display:flex;justify-content:space-between;gap:12px;font-size:8px;color:#585653;line-height:1.8;letter-spacing:.5px}.identity-note{font-size:10px;color:#585653;text-align:center;letter-spacing:0;margin:18px 0 0}
footer{display:flex;justify-content:space-between;gap:15px;padding:23px 5%;border-top:1px solid var(--line);background:#0b0b0b;color:var(--muted);font-size:9px}footer a{text-decoration:none}#arena{max-width:1400px;margin:24px auto 40px;padding:0 4%}.hud{display:flex;align-items:center;gap:7%;padding:15px 0 22px;font:10px monospace;color:var(--muted)}.hud strong{display:block;font-size:25px;color:var(--paper);margin-top:6px;letter-spacing:1px}.hud button{margin-left:auto;font:11px monospace}.stage{position:relative;border:1px solid var(--line);background:#17171d}canvas{width:100%;display:block;touch-action:manipulation;image-rendering:pixelated}#announcement{pointer-events:none;position:absolute;top:12%;left:0;right:0;text-align:center;font:bold clamp(13px,2vw,24px) monospace;color:var(--paper);text-shadow:0 2px 8px #000}.under-stage{display:flex;align-items:center;gap:20px;padding:18px 0;color:var(--paper);font:10px monospace}.power-track{height:4px;background:var(--line);flex:1}.power-track i{display:block;height:100%;background:currentColor;width:0}.under-stage button{font:700 11px 'DM Sans',sans-serif;min-width:110px;color:var(--paper)}.overlay{position:absolute;inset:0;background:#111f;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:20px}.overlay h2{font:800 48px 'Barlow Condensed',Impact,sans-serif;margin:0}.overlay>button{width:min(300px,80%)}
#power-choice{z-index:4;gap:12px}#power-choice h2{font-size:clamp(24px,3vw,38px);text-align:center}#power-choice .eyebrow{font-size:9px;margin:0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:440px}.card{padding:12px 14px 18px;text-align:left;background:#eae7e0;color:#111;border:2px solid #eae7e0;transition:transform .15s}.card:hover{transform:translateY(-3px)}.card .portrait{display:block;background:url('./assets/aiyo-pixel-costumes.png') 50% 0/300% 100%;image-rendering:pixelated;height:185px;width:120px;max-width:100%;margin:0 auto 15px}.card .hannah-portrait{background-position:100% 0}.card-name{font-size:15px;font-weight:700;display:block}.card-mode{display:block;font:9px monospace;margin-top:8px;letter-spacing:0}.card-description{display:block;font-size:10px;line-height:1.6;margin-top:8px}.card:hover .card-mode{color:inherit}
.results{max-width:640px;margin:45px auto 65px;padding:0 24px;text-align:center}.results h2{font:800 clamp(50px,8vw,80px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:25px 0}.rank{font:15px monospace;color:var(--paper);padding:15px}.result-grid{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);padding:25px 0;font:11px monospace;color:var(--muted)}.result-grid strong{display:block;color:var(--paper);font-size:40px;margin-top:12px}#chosen{font:12px monospace;color:var(--muted);margin:24px}.result-actions{display:grid;gap:12px}.result-actions .primary{justify-content:center}.button[aria-disabled=true]{color:var(--muted);cursor:default}.button[aria-disabled=true]:hover{background:transparent;border-color:var(--line)}#share-status,#audio-status{font-size:13px;color:#c88494}#result-character{width:120px;height:160px;margin:0 auto;pointer-events:none}.release-reveal{border-bottom:1px solid var(--line);padding-bottom:35px;margin-bottom:35px}.release-reveal img{width:min(100%,360px);display:block;margin:0 auto 22px}.release-reveal h2{font-size:48px;margin:15px 0}#countdown{font:12px/1.8 monospace;color:var(--paper)}#preview-hook{font-size:12px;border:1px solid var(--paper);margin-top:15px}audio{display:none}[hidden]{display:none!important}
@media(max-width:760px){header{height:66px;padding-inline:6%}.edition{display:none}.wordmark{font-size:21px}.menu{display:block;padding:35px 6%}.intro{text-align:center}h1{font-size:100px;margin:28px 0}h1>span{font-size:.71em}h1 small{font-size:10px;letter-spacing:5px}.eyebrow{font-size:9px}.tagline{font-size:15px;margin:25px 0}.release{margin:0 auto 32px;font-size:10px}.start-panel{max-width:420px;padding:22px}.base-character{width:150px;height:240px}.instructions{font-size:8px;letter-spacing:0}.hud{gap:5%;font-size:8px}.hud strong{font-size:20px}.hud button{padding:10px;font-size:9px}#arena{padding:0 3%;margin:8px auto 24px}.under-stage{gap:10px;font-size:9px}.under-stage button{min-width:85px;padding:12px}.cards{gap:12px}.card{padding:10px}.card .portrait{width:90px;height:135px}.card-name{font-size:12px}.card-mode{font-size:8px}.card-description{font-size:9px}#power-choice{padding:12px}#power-choice h2{font-size:25px}footer{font-size:8px;padding:20px 6%;flex-wrap:wrap}footer>span:nth-child(2){display:none}.results{margin-top:30px}.release-reveal h2{font-size:40px}}
@media(max-width:550px){.under-stage{flex-wrap:wrap}.under-stage #power{width:100px}.under-stage .power-track{flex-basis:45%}.under-stage #attack,.under-stage #jump{flex:1;padding:13px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.card:hover{transform:none}}

.hud #score{background:var(--paper);color:var(--brand);padding:5px 8px;margin-top:3px}#final-score{color:var(--brand);background:var(--paper);width:max-content;margin:12px auto 0;padding:6px 12px}.instructions{flex-wrap:wrap}.card-name{font-size:13px}@media(max-width:550px){.hud{gap:4%}.hud #lives{font-size:14px}.card-name{font-size:11px}}
.menu{display:block;max-width:1040px;padding:45px 5%;text-align:center}.picker-heading h1{font-family:'DM Sans',sans-serif;font-size:clamp(25px,4vw,45px);letter-spacing:-1px;line-height:1.1;margin:28px 0 40px}.montana-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.montana-option{border:0;padding:0;background:transparent!important}.picker-image{display:block;position:relative;aspect-ratio:0.62;background-color:#232323;background-image:url('./assets/aiyo-pixel-costumes.png');background-size:300% auto;background-repeat:no-repeat;background-position:left 75%;image-rendering:pixelated;border-top:8px solid transparent}.picker-image.tony{background-position:center 75%}.picker-image.hannah{background-position:right 75%}.montana-option[aria-pressed=true] .picker-image{background-color:var(--paper);border-top-color:var(--brand)}.montana-option[aria-pressed=true] .picker-image:before{content:'';position:absolute;top:12px;left:calc(50% - 8px);border-top:11px solid var(--brand);border-inline:8px solid transparent}.montana-option strong{display:block;font-size:22px;margin:20px 0 8px}.montana-option small{color:var(--muted);font-size:13px}.menu #start{max-width:400px;margin:28px auto 16px;justify-content:center;gap:20px}.menu .instructions{justify-content:center;color:var(--muted);font-size:10px}#character-description{margin:30px 0 0;color:var(--muted);font-size:13px}.power-track{display:none}@media(max-width:550px){.montana-picker{gap:12px}.montana-option strong{font-size:15px}.montana-option small{font-size:10px}.menu{padding:25px 5%}.picker-image{aspect-ratio:.55}}
.road-progress{padding:12px 0 25px;font:10px monospace}.road-progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:8px}#progress-track{height:12px;border-inline:3px solid currentColor;padding:2px 4px;background:#29262b}#progress-fill{display:block;height:8px;background:currentColor;width:0}#phase-markers{position:relative;margin-top:6px}#phase-markers span{position:absolute;font-size:8px;white-space:nowrap}.under-stage{flex-wrap:wrap}.under-stage button{min-height:48px;touch-action:none;user-select:none}#left,#right{min-width:52px;font-size:24px}.game-active{overscroll-behavior:none}.game-active canvas{touch-action:none}#special{font-size:10px;min-width:100px}.results h2{font-size:clamp(35px,7vw,70px)}@media(max-width:700px){.game-active header{height:52px}.game-active footer{display:none}.under-stage{gap:6px}.under-stage #power{width:100%;font-size:10px}.under-stage #left,.under-stage #right{flex:0 0 48px;min-width:48px}.under-stage #attack,.under-stage #jump,.under-stage #special{flex:1;min-width:65px;padding:10px 4px;font-size:9px}}
.route-note{color:var(--muted);font-size:12px;line-height:1.8;margin-top:20px}.release-reveal{margin-top:35px}.under-stage button:active{background:var(--brand);color:var(--paper)}
.game-active footer{display:none}@media(min-width:701px){#arena{max-width:min(1400px,calc((100dvh - 310px)*2.0689))}}

/* In-world HUD and translucent, split touch controls. */
#arena{max-width:1200px;padding:0;margin:12px auto}.stage{overflow:hidden;isolation:isolate}.screen-hud{position:absolute;z-index:2;inset:0 0 auto;padding:14px 20px;background:linear-gradient(#111e,#1119,transparent);pointer-events:none}.screen-hud button{pointer-events:auto}.road-progress{padding:0 0 16px}.hud{padding:9px 0;gap:5%}.hud strong{font-size:21px}#phase-markers span:last-child{transform:translateX(-100%)}#phase-markers span:not(:first-child):not(:last-child){transform:translateX(-50%)}.under-stage{position:absolute;z-index:3;bottom:28px;left:16px;right:16px;display:grid;grid-template-columns:110px 110px 1fr 110px;gap:10px;padding:0;pointer-events:none}.under-stage button{pointer-events:auto;background:#1119;border:1px solid #eae7e066;border-radius:8px;min-width:0!important;min-height:52px;opacity:.78;backdrop-filter:blur(3px);touch-action:none}.under-stage button:active{opacity:1;background:var(--brand)}.under-stage #attack{grid-column:1}.under-stage #special{grid-column:2}.under-stage #jump{grid-column:4}.under-stage #power{position:absolute;bottom:64px;left:0;width:auto;font-size:10px;text-shadow:0 1px 3px #000}.screen-instructions{position:absolute;z-index:2;bottom:0;left:16px;right:16px;margin:7px 0;font:8px monospace;color:#eae7e0bd;pointer-events:none}.overlay{z-index:5}#announcement{z-index:4;top:27%}.game-active{overflow:hidden}.game-active header{height:52px}.game-active #arena{max-width:min(1200px,calc((100dvh - 80px)*2.0689))}body[data-mode=base] .road-progress{color:#b8667b!important}body[data-mode=base] #progress-fill{background:#762638}
@media(max-width:700px){.game-active #arena{width:100%;max-width:none;margin:0}.screen-hud{padding:12px}.hud{gap:16px;font-size:8px}.hud strong{font-size:17px}.hud button{padding:8px}.under-stage{left:12px;right:12px;bottom:32px;grid-template-columns:70px 70px 1fr 78px;gap:7px}.under-stage button{font-size:9px!important;min-height:58px;padding:6px!important}.under-stage #power{width:auto}.screen-instructions{font-size:7px;left:12px}.game-active .wordmark{font-size:17px}}

.picker-image.base{filter:grayscale(1)}.results{margin:22px auto}.release-reveal{margin:0 0 20px;padding-bottom:18px}.release-reveal img{width:min(50vw,220px);margin-bottom:14px}.release-reveal h2{font-size:42px}#countdown{display:none}#preview-hook{display:block;width:100%;background:var(--paper);color:var(--ink);font-weight:bold;padding:18px}.under-stage{display:flex;justify-content:flex-end}.under-stage #attack{flex:0 0 100px;min-height:58px}.screen-instructions{font-size:9px;max-width:70%;line-height:1.5}.stage{touch-action:none;user-select:none}.release-reveal .eyebrow{margin:10px 0}

/* Theme UI independently from the monochrome Aiyo world. CSS filter works on mobile Safari too. */
body[data-mode=base]{--brand:#762638;--accent-text:#c9778d}body[data-mode=tony]{--brand:#d7a64b;--accent-text:#edc576}body[data-mode=hannah]{--brand:#e882b2;--accent-text:#f3a1cc}
body[data-mode=base] #game{filter:grayscale(1)}
.hud strong,.hud #score,.hud #time{color:var(--brand)}.hud #time{color:var(--accent-text)}
.under-stage button{background:color-mix(in srgb,var(--brand) 45%,transparent);border-color:var(--accent-text);color:var(--paper)}.under-stage button:hover,.under-stage button:active{background:var(--brand)}
.montana-option[data-character=base]{--brand:#762638}.montana-option[data-character=tony]{--brand:#d7a64b}.montana-option[data-character=hannah]{--brand:#e882b2}
.picker-image.base{filter:none;background-image:url('./assets/aiyo-pixel-costumes.png')}.montana-option[aria-pressed=true] .picker-image{border-top-color:var(--brand)}.montana-option[aria-pressed=true] .picker-image:before{border-top-color:var(--brand)}

/* Desaturate only the portrait, preserving the selection accent. */
.picker-image.base{background-image:none}.picker-image.base:after{content:'';position:absolute;inset:0;background:url('./assets/aiyo-pixel-costumes.png') left 75% / 300% auto no-repeat;image-rendering:pixelated;filter:grayscale(1);pointer-events:none}.picker-image.base:before{z-index:1}

.selection-active{background:var(--brand);color:#111}.selection-active[data-mode=base]{background:#111;color:#eae7e0}.selection-active header,.selection-active footer{background:transparent;border-color:#1114;color:inherit}.selection-active .eyebrow,.selection-active .montana-option small{color:inherit}.selection-active .montana-option strong{color:inherit}.selection-active .picker-image{background-color:#111d}.selection-active .montana-option[aria-pressed=true] .picker-image{background-color:#eee9df}.selection-active .wordmark span{color:inherit}.selection-active header button{color:inherit;border-color:currentColor}.briefing{max-width:680px;margin:auto;text-align:center;padding:40px 24px}.briefing h1{font-size:clamp(48px,9vw,84px);line-height:1}.briefing h2{font:700 18px monospace}.briefing p{font:12px/2 monospace}.briefing .primary{justify-content:center;margin:26px 0 12px}.briefing>button{width:100%}

/* Furuset 8: character-coloured entry and reveal; steady light, no strobe. */
.selection-active[data-mode=base],.result-active[data-mode=base]{background:#762638;color:#eae7e0}
.result-active{background:var(--brand);color:#111;min-height:100dvh}.result-active header,.result-active footer{background:transparent;color:inherit}.result-active .eyebrow{color:inherit}.release-reveal img{image-rendering:pixelated;width:min(75vw,380px)}
.departure-runner{position:fixed;z-index:20;bottom:15%;width:150px;height:200px;pointer-events:none;image-rendering:pixelated}.departing #start{pointer-events:none;opacity:.5}
.soundwave{height:35px;display:flex;justify-content:center;align-items:center;gap:5px;margin:20px}.soundwave i{display:block;background:currentColor;width:4px;height:5px}.song-playing .soundwave i{animation:wave .65s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-0.13s)}@keyframes wave{to{height:30px}}@media(prefers-reduced-motion:reduce){.song-playing .soundwave i{animation:none;height:16px}}

.release-reveal img{aspect-ratio:1;object-fit:cover;object-position:left}body[data-mode=tony] .release-reveal img{object-position:center}body[data-mode=hannah] .release-reveal img{object-position:right}body[data-mode=base] .release-reveal img{filter:grayscale(1)}

/* One continuous character journey from picker to briefing. */
.picker-image,.picker-image.base,.picker-image.tony,.picker-image.hannah{background-image:none}.picker-image.base:after{display:none}
.picker-image canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.departing .montana-option:not(.chosen-departure){opacity:0;transform:scale(.96);transition:opacity .22s,transform .22s}.chosen-departure canvas{visibility:hidden}.departing #start{opacity:0}.journey-runner{position:fixed;z-index:30;pointer-events:none;image-rendering:pixelated}
#brief-character{display:block;width:clamp(105px,20vw,155px);height:auto;margin:0 auto;image-rendering:pixelated}.arriving #brief-character{visibility:hidden}.briefing{padding:22px 24px}.briefing h1{margin:14px 0 8px}.briefing h2{margin:8px 0}.briefing p{margin:12px 0}.round-intro{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111c;text-align:center;pointer-events:none}.round-intro[hidden]{display:none}.round-intro p{color:var(--accent-text);font:700 18px monospace}.round-intro h2{font-size:clamp(28px,6vw,65px);margin:8px}.round-intro span{font:12px monospace;color:#ddd}

#brief-character{width:clamp(180px,30vw,240px);aspect-ratio:1;height:auto}#release-character{display:block;width:clamp(150px,40vw,240px);height:auto;margin:0 auto;image-rendering:pixelated}

#super-aura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;background:transparent;image-rendering:pixelated}#game-over{font-size:clamp(50px,10vw,90px);margin:60px 0 35px}#game-over[hidden]{display:none}

.death-menu{background:rgba(8,8,12,.64);backdrop-filter:blur(1px);gap:14px}.death-menu #game-over{margin:0 0 22px;font-size:clamp(40px,8vw,82px)}
#pause{border:2px solid var(--brand);background:#111c;color:#fff;min-height:44px;padding:10px 18px;font-weight:800;box-shadow:0 0 12px color-mix(in srgb,var(--brand) 35%,transparent)}
#sound:hover,#sound:focus-visible{color:var(--brand);border-color:var(--brand);box-shadow:0 0 18px var(--brand);text-shadow:0 0 10px var(--brand)}
#release-character{width:clamp(220px,65vw,360px);aspect-ratio:1}

/* Circular translucent control; both menus share the same dimmed backdrop. */
#pause{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid #ffffff75;background:#1118;color:#fff;box-shadow:none;transition:background .18s,border-color .18s,box-shadow .18s}
#pause span{width:12px;height:16px;border-left:4px solid currentColor;border-right:4px solid currentColor}
#pause[data-paused=true] span{width:0;height:0;border:0;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
#pause:hover,#pause:focus-visible{background:var(--brand);border-color:var(--brand);box-shadow:0 0 14px var(--brand)}
#paused{background:rgba(8,8,12,.64);backdrop-filter:blur(1px)}
.result-active .wordmark span{color:inherit}
.result-actions button,#preview-hook{background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-weight:700}
.result-actions button:hover,#preview-hook:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#audio-status:empty{display:none}
/* Fit each screen inside the available viewport, preserving sprite proportions. */
html,body{width:100%;height:100%;overflow:hidden}body{height:100dvh;min-height:0!important;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}header{flex:0 0 64px;height:64px}main{flex:1;min-height:0;width:100%;display:grid;place-items:center;overflow:hidden}main>section{grid-area:1/1;transform-origin:center center}footer{flex:0 0 auto;padding:12px 5%}.game-active footer{display:none}.game-active header{flex-basis:52px}.game-active #arena,#arena{max-width:none;padding:0;margin:0;align-self:center;justify-self:center}.stage{width:100%}#game{width:100%;height:auto}.menu{width:min(100%,1040px);padding:16px 4%;margin:0}.picker-heading h1{margin:12px 0 20px}.montana-picker{max-width:760px;margin:auto;gap:20px}.picker-image{aspect-ratio:.62}.menu #start{margin:18px auto 0}.briefing{width:min(100%,640px);margin:0;padding:12px 24px}.briefing #brief-character{width:190px}.briefing p{font-size:11px;line-height:1.6;margin:8px 0}.briefing .primary{margin:12px 0 8px}.briefing>button{padding:12px}.results{width:min(100%,600px);margin:0;padding:10px 24px}.release-reveal{padding-bottom:12px;margin:0 0 12px}.release-reveal #release-character{width:250px}.release-reveal h2{font-size:36px;margin:10px 0}.release-reveal .eyebrow{margin:8px 0}#preview-hook{margin-top:4px;padding:12px 20px}.result-actions{gap:8px;grid-template-columns:1fr 1fr}.result-actions #listen{grid-column:1/-1}.result-actions button,.result-actions .button{font-size:12px;padding:12px;justify-content:center;text-align:center;background:var(--paper);color:var(--ink);border-color:var(--paper)}#countdown{margin:8px 0;font-size:10px}.overlay .primary,.overlay>button{display:flex;align-items:center;justify-content:center;text-align:center}.overlay h2{max-width:90%;text-align:center}.screen-hud{padding:12px 16px}.road-progress{padding-bottom:10px}
@media(max-width:700px){header{flex-basis:60px;height:60px}.menu{padding:10px 4%}.montana-picker{gap:10px}.picker-heading h1{font-size:26px;margin:12px 0 18px}.menu #start{padding:16px}.briefing #brief-character{width:170px}.briefing h1{font-size:42px}.results{padding:8px 18px}.release-reveal #release-character{width:220px}.screen-hud{padding:10px}.hud{gap:4%}.hud strong{font-size:16px}.road-progress{font-size:8px}.screen-instructions{font-size:7px}.overlay{gap:12px}.overlay>button{padding:14px}.death-menu #game-over{margin:0 0 15px}}

#paused h2{font-size:0!important;width:min(90%,203px);aspect-ratio:29/7;background:var(--paper);mask:url("./assets/pause-label.svg") center/contain no-repeat;-webkit-mask:url("./assets/pause-label.svg") center/contain no-repeat}

#game-over{font-size:0!important;width:min(90%,371px);aspect-ratio:53/7;background:var(--paper);mask:url("./assets/game-over-label.svg") center/contain no-repeat;-webkit-mask:url("./assets/game-over-label.svg") center/contain no-repeat}
.unlock-status{display:block;min-height:24px;padding-top:8px;font:10px/1.5 monospace;white-space:nowrap}.montana-option.locked{opacity:.65}.montana-option.locked .picker-image canvas{filter:grayscale(1);opacity:.65}.montana-option.locked{cursor:not-allowed}.montana-option.locked .picker-image:before{display:none}.montana-option:disabled{color:inherit}.menu #start:disabled{opacity:.65}@media(max-width:400px){.unlock-status{font-size:8px}}
/* Legible theme controls, including sticky touch hover/focus. */
.edition{color:inherit}footer{color:inherit}.selection-active .edition,.result-active .edition,.selection-active footer,.result-active footer{color:inherit}
#sound{min-width:94px;min-height:40px;white-space:nowrap;flex-shrink:0;background:transparent;color:inherit;border-color:currentColor;opacity:1}
#sound:hover,#sound:focus-visible,#sound:active{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:0 0 16px #eae7e080;text-shadow:none}
.game-mode-options{display:grid;gap:10px;margin:10px 0 12px}.mode-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;padding:15px}.mode-option strong{font-size:18px;letter-spacing:1px}.mode-option span,.mode-option small{font-size:11px;font-weight:400;letter-spacing:.2px}.mode-option small{font-weight:700}.mode-option:disabled{opacity:.68;color:inherit;border-color:currentColor;cursor:not-allowed;background:transparent}.mode-option:disabled:hover{color:inherit;background:transparent;border-color:currentColor}.briefing #brief-character{width:clamp(145px,25vh,190px)}.briefing h1{font-size:clamp(32px,5vw,52px);margin:10px 0}.briefing .primary{margin:0}.briefing #back-picker{padding:11px;font-weight:700}.release-reveal #preview-hook{min-height:44px}
/* Keep the button shape visible against every character's accent background. */
#start:not(:disabled):hover,#start:not(:disabled):focus-visible,#begin:not(:disabled):hover,#begin:not(:disabled):focus-visible,.overlay>button:not(:disabled):hover,.overlay>button:not(:disabled):focus-visible,.briefing #back-picker:not(:disabled):hover,.briefing #back-picker:not(:disabled):focus-visible,.result-actions button:hover,.result-actions button:focus-visible,.result-actions #listen:hover,.result-actions #listen:focus-visible,#preview-hook:hover,#preview-hook:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--paper);box-shadow:0 0 0 1px var(--paper);text-shadow:none}
.montana-option{position:relative}.montana-option.locked{opacity:1}.montana-option.locked .picker-image{background:#211b23!important}.montana-option.locked .picker-image canvas{filter:brightness(0);opacity:.9}.character-lock{display:none;position:absolute;z-index:3;left:50%;top:45%;transform:translate(-50%,-50%);width:clamp(30px,5vw,52px);height:clamp(36px,6vw,62px);pointer-events:none;background:var(--paper);filter:drop-shadow(0 2px 3px #000);}.montana-option.locked .character-lock{display:block}.montana-option.locked .unlock-status{color:inherit;opacity:1}
.character-lock{clip-path:none;mask:url('./assets/character-lock.svg') center/contain no-repeat;-webkit-mask:url('./assets/character-lock.svg') center/contain no-repeat}

/* Reserve a separate band for the selection arrow above the full sprite. */
.montana-option[aria-pressed=true] .picker-image:before{top:12px;z-index:4}.picker-image{aspect-ratio:.55}
.picker-image{aspect-ratio:.52}
#share{grid-column:1/-1}#share-status{color:inherit;min-height:1.4em}

#change-character{white-space:pre-line;line-height:1.5}#change-character:disabled{opacity:.72;cursor:not-allowed;background:var(--paper);color:var(--ink);box-shadow:none}#change-character:disabled:before{content:'';display:inline-block;width:12px;height:14px;margin-right:6px;background:currentColor;mask:url('./assets/character-lock.svg') center/contain no-repeat;-webkit-mask:url('./assets/character-lock.svg') center/contain no-repeat}

#artist-spotify{grid-column:1/-1}#back-picker{white-space:pre-line;line-height:1.5}#back-picker:disabled{opacity:.68;cursor:not-allowed;background:transparent;color:inherit;border-color:currentColor;box-shadow:none}#back-picker:disabled:before{content:'';display:inline-block;width:12px;height:14px;margin-right:6px;background:currentColor;mask:url('./assets/character-lock.svg') center/contain no-repeat;-webkit-mask:url('./assets/character-lock.svg') center/contain no-repeat}#artist-spotify:hover,#artist-spotify:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--paper)}

/* Every available briefing control inverts; locked controls never react to hover. */
.briefing button:not(:disabled):hover,.briefing button:not(:disabled):focus-visible{background:var(--ink);color:var(--paper);border-color:var(--paper);box-shadow:0 0 0 1px var(--paper)}

.hud #lives{font-size:clamp(30px,4vw,44px);letter-spacing:3px;line-height:1.15;color:var(--paper);text-shadow:0 2px 0 #111,0 0 9px #111;font-weight:900;white-space:nowrap}
@media(max-width:600px){.hud #lives{font-size:28px;letter-spacing:2px}}

/* Favorite preview leads; utility controls stay compact. */
.results{max-width:540px}.release-reveal{border:0;margin-bottom:10px;padding-bottom:0}.release-reveal #release-character{width:210px}.release-reveal #preview-hook{display:block;width:100%;min-height:60px;font-size:18px;font-weight:800;letter-spacing:.3px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);margin:6px 0 0;padding:16px 10px}.release-reveal #preview-hook:before{content:'';display:inline-block;width:12px;height:14px;margin-right:12px;vertical-align:-1px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}.release-reveal #preview-hook:hover,.release-reveal #preview-hook:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--ink)}.release-reveal h2{font-size:30px;margin:15px 0 10px}#audio-status:empty,#share-status:empty{display:none}
.result-actions{display:grid;grid-template-columns:48px minmax(100px,1.2fr) 1fr 1fr;align-items:stretch;gap:7px}.result-actions button,.result-actions .button,.result-actions #listen,.result-actions #artist-spotify{grid-column:auto;min-height:44px;padding:8px 5px;background:transparent;color:var(--ink);border:1px solid currentColor;font-size:11px;opacity:.7;display:flex;align-items:center;justify-content:center}.result-actions #again{font-size:31px;line-height:1}.result-actions #change-character{font-size:10px;white-space:nowrap}.result-actions #change-character:disabled{background:transparent;color:var(--ink);opacity:.6;line-height:1.3}.result-actions #change-character:disabled:before{flex:none;width:10px;height:12px;margin-right:5px}.result-actions button:not(:disabled):hover,.result-actions .button:hover,.result-actions button:focus-visible,.result-actions .button:focus-visible{opacity:1;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gold-confetti{position:fixed;inset:0;overflow:hidden;z-index:40;pointer-events:none}.gold-confetti i{position:absolute;top:-25px;width:7px;height:12px;image-rendering:pixelated;animation:gold-fall 2.6s ease-in both}@keyframes gold-fall{from{transform:translate(0,-20px) rotate(0deg);opacity:1}to{transform:translate(var(--drift),105vh) rotate(var(--turn));opacity:0}}
@media(max-width:420px){.release-reveal #release-character{width:200px}.release-reveal #preview-hook{font-size:16px}.result-actions{grid-template-columns:44px minmax(92px,1.15fr) 1fr 1fr;gap:5px}.result-actions .button{font-size:10px}}

/* Bottom ending controls use full contrast; locked option stays static. */
.result-actions button,.result-actions .button,.result-actions #change-character:disabled{opacity:1}
.result-actions button:not(:disabled):hover,.result-actions button:not(:disabled):focus-visible,.result-actions a.button:hover,.result-actions a.button:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);opacity:1}
.result-actions #change-character:disabled:hover{background:transparent;color:var(--ink);border-color:currentColor;box-shadow:none}

.result-actions #again,.result-actions #listen,.result-actions #artist-spotify{background:transparent;color:var(--ink);border:1px solid currentColor;opacity:1;box-shadow:none}
.result-actions #again:hover,.result-actions #again:focus-visible,.result-actions #listen:hover,.result-actions #listen:focus-visible,.result-actions #artist-spotify:hover,.result-actions #artist-spotify:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);opacity:1}

/* Short landscape phones: use width for play and keep controls at touch size. */
@media(orientation:landscape) and (max-height:600px){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}header,.game-active header{height:42px;flex-basis:42px;padding-block:4px}.wordmark{font-size:18px}header .edition{display:none}#sound{min-height:34px;padding:6px 12px}footer{display:none}
 .screen-hud{padding:6px 12px}.road-progress{font-size:8px;padding-bottom:7px}.road-progress>div:first-child{margin-bottom:3px}#progress-track{height:8px}#progress-fill{height:4px}.hud{padding:5px 0;gap:24px}.hud strong{font-size:17px}.hud #lives{font-size:26px;letter-spacing:2px}.hud #pause{margin-left:auto;min-width:44px;min-height:44px;padding:8px}.under-stage #power{bottom:12px}.screen-instructions{font-size:7px}.overlay{gap:9px}.overlay h2{font-size:30px;margin:0}.overlay>button{min-height:44px;padding:8px 20px}
 .menu{padding:4px 20px}.picker-heading h1{font-size:25px;margin:3px 0 8px}.picker-heading .eyebrow{font-size:9px;margin:0}.montana-picker{max-width:355px;gap:12px}.picker-image{aspect-ratio:.75}.menu #start{margin-top:8px;max-width:355px;min-height:44px;padding:10px}
 .briefing{max-width:760px;display:grid;grid-template-columns:150px 1fr;gap:0 22px;padding:4px 20px}.briefing>.eyebrow,.briefing>h1{grid-column:2}.briefing h1{font-size:30px;margin:4px 0}.briefing #brief-character{grid-column:1;grid-row:1/5;width:150px;align-self:center}.game-mode-options{grid-column:2;margin:4px 0;gap:6px}.mode-option{padding:8px;min-height:44px}.mode-option strong{font-size:14px}.mode-option span,.mode-option small{font-size:9px}.briefing #back-picker{grid-column:2;padding:6px;min-height:40px}
 .results{width:min(94vw,820px);max-width:820px;display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 20px;align-items:center;padding:8px 16px}.results .release-reveal{display:contents}.release-reveal #release-character{grid-column:1;grid-row:1/5;width:170px}.release-reveal #preview-hook{grid-column:2;min-height:50px;font-size:17px;margin:0}.release-reveal h2{grid-column:2;font-size:26px;margin:4px 0}.result-actions,#audio-status,#share-status{grid-column:2}.result-actions{margin:0}#audio-status{margin:0;font-size:11px}
}

/* Keep the unlocked character action inside its compact ending column. */
.result-actions #change-character{white-space:normal;overflow-wrap:normal;min-width:0;line-height:1.25;padding:8px 6px}

/* Endless extends Montana; keep its responsive layout and character selection. */
#result>div:first-child{display:block}.result-active .results{overflow-y:auto;max-height:100%;padding-block:15px}.result-active .release-reveal{display:none!important}.result-active #result-character{height:150px;width:112px}.result-active .results h2{font-size:38px;margin:12px 0}.result-active .result-grid{padding:12px 0}.result-active .result-grid strong{font-size:30px}.result-active #chosen{margin:10px}.result-active #completion-details{font:10px monospace}.endless-scores{font:11px monospace;margin:15px 0}.endless-scores input{display:block;background:#17171d;border:1px solid #777;color:#eee;padding:12px;width:100%;margin:10px 0;font:inherit}.endless-scores button{font-size:10px}.endless-scores details{text-align:left;border-block:1px solid #555;padding:14px;margin:14px 0}.endless-scores summary{cursor:pointer}.endless-scores ol{line-height:2}.endless-scores details p{font-size:9px;color:#aaa}.briefing .game-mode-options{grid-template-columns:1fr}.result-actions{grid-template-columns:1fr 1fr}.result-actions>a{font-size:11px}.results #preview-hook{display:none}

.result-active .results{display:block!important;max-width:600px}.result-active #result-character{height:150px;width:112px;margin:auto}.result-active .rank{padding:5px;margin:8px}.result-active #finish-label{margin:5px}
.result-active .result-grid,.result-active .result-grid strong,.result-active .rank,.result-active #chosen,.result-active #completion-details{color:inherit}.result-active #final-score{color:var(--brand)}.result-active .results h2{color:inherit}.result-active .endless-scores details p{color:inherit;opacity:.75}.result-active .results{scrollbar-width:thin;overscroll-behavior:contain}.endless-scores .primary{justify-content:center}
[data-mode=dracula]{--brand:#762638}.selection-active[data-mode=dracula],.result-active[data-mode=dracula]{background:#211523;color:#eae7e0}.picker-image.dracula{background-image:none;background-color:#1b111c}.montana-picker{grid-template-columns:repeat(4,minmax(0,1fr));max-width:920px}.picker-heading h1.dracula-title{font-family:ui-monospace,Consolas,monospace;font-size:clamp(26px,4vw,52px);font-weight:900;letter-spacing:-2px;color:#eee5c8;text-shadow:3px 3px #71373c}.dracula-title::first-line{color:#f3b45d}.result-active[data-mode=dracula] .result-grid,.result-active[data-mode=dracula] .rank,.result-active[data-mode=dracula] #chosen{color:#eae7e0}.game-active[data-mode=dracula] .stage{border-color:#6a3450}
@media(max-width:600px){.montana-picker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;max-width:100%;padding-bottom:8px}.montana-option{flex:0 0 31%;min-width:112px;scroll-snap-align:center}.picker-image{aspect-ratio:.62}.menu #start{margin-top:12px}}
@media(max-width:600px){.menu{min-width:0!important;max-width:100vw;overflow:hidden}.montana-picker{width:100%;min-width:0;max-width:100%;margin:0}.montana-option{flex-shrink:0}.menu #start{width:min(100%,360px);max-width:100%;box-sizing:border-box}.picker-heading{max-width:100%}}

.picker-swipe-hint{display:none}@media(max-width:600px){.picker-swipe-hint{display:block;font:8px monospace;letter-spacing:1px;opacity:.7;margin:8px 0}}

/* Original Montana's pixel-letter GAME OVER, also on endless results. */
.result-active #result-title{font-size:0!important;width:min(90%,371px);aspect-ratio:53/7;margin:14px auto 20px;background:currentColor;mask:url('./assets/game-over-label.svg') center/contain no-repeat;-webkit-mask:url('./assets/game-over-label.svg') center/contain no-repeat}
[data-mode=dracula]{--brand:#9b6bd0}.selection-active[data-mode=dracula],.result-active[data-mode=dracula]{background:#211523;color:#eee7f2}.picker-image.dracula{background-color:#1b111c}.game-active[data-mode=dracula] .stage{border-color:#785396}.dracula-title{color:#f49b38!important;text-shadow:3px 3px #5b366f!important}

/* Endless has distance, no artificial finish/progress bar. */
#progress-track,#phase-markers{display:none}
#game-over,.result-active #result-title{aspect-ratio:61/5;mask-image:url('./game-is-game.svg');-webkit-mask-image:url('./game-is-game.svg');width:min(94%,480px)}

/* Results sit lightly over the frozen run, like the pause controls. */
.result-active #arena{display:block}
.result-active .results{position:fixed;inset:0;z-index:30;width:100%;max-width:none!important;max-height:none;background:rgba(8,7,13,.46);color:#f4f1ed!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;box-sizing:border-box;overflow-y:auto;backdrop-filter:none}
.result-active .results>div{width:min(100%,460px)}
.result-active #result-character,.result-active #chosen,.result-active #rank,.result-active #completion-details,.result-active #finish-label{display:none}
.result-active .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;border:0;margin:8px 0;padding:8px}
.result-active #result-title{margin:10px auto 22px}
.result-active .result-actions{display:flex;flex-direction:column;gap:9px;margin:0}
.result-active .result-actions #again,.result-active .result-actions #artist-spotify,.result-active #change-character,.result-active #leaderboard-open{border:1px solid #e6e1ed;background:#16131c99;color:#fff;min-height:44px;padding:12px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font:12px monospace}
.result-active .result-actions #again:hover,.result-active .result-actions #artist-spotify:hover,.result-active #change-character:hover,.result-active #leaderboard-open:hover{background:#eee;color:#17131c}
.result-active .endless-scores{margin:4px 0;font:11px monospace}
.result-active #endless-edit-name{border:0;background:transparent;color:#eee;padding:5px;font:10px monospace}
#leaderboard-screen{position:fixed;inset:0;z-index:40;background:#08080cee;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px;box-sizing:border-box;font:bold clamp(11px,2.5vw,17px) monospace;color:#fff;letter-spacing:1px}
#leaderboard-screen[hidden]{display:none!important}
#leaderboard-screen #leaderboard-title{font:bold 22px monospace!important;background:none;mask:none;-webkit-mask:none;aspect-ratio:auto;color:#b99ae0;margin:0 0 25px}
#leaderboard-screen .board-head,#endless-board{width:min(100%,520px);margin:0;padding:0}
.board-head,#endless-board li{display:grid;grid-template-columns:50px 1fr minmax(0,1.4fr);gap:15px;align-items:center;text-align:left}
.board-head{color:#fff3bc;margin-bottom:14px!important}
#endless-board{list-style:none;line-height:2.1}
#endless-board li span:nth-child(2){text-align:right}
#endless-board li span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px}
#endless-board li:nth-child(1){color:#f5ca57}
#endless-board li:nth-child(2){color:#d5dbe4}
#endless-board li:nth-child(3){color:#cd925b}
#leaderboard-screen p{font:9px monospace;opacity:.65;margin:22px 0}
#leaderboard-close{min-height:44px;padding:12px 40px;background:transparent;border:1px solid #eee;color:#eee;font:12px monospace}
@media(max-height:540px){.result-active .results{justify-content:flex-start}.result-active #result-title{margin:4px auto 12px}.result-active .endless-scores{margin:0}#leaderboard-screen{justify-content:flex-start;overflow-y:auto}#endless-board{line-height:1.6}}

/* A solid character-accent result page; leaderboard has its own opaque screen. */
.result-active .results{background:var(--brand);color:#151218!important;gap:14px;padding:clamp(18px,4vw,40px)}
.result-active .results>div{width:min(100%,480px)}
.result-active .results>div:first-child{margin-bottom:5px}
.result-active #result-title{color:#151218!important;margin:12px auto 30px}
.result-active .result-grid{gap:24px;padding:16px 0;margin:0;border-block:1px solid #15121855}
.result-active .result-grid>div{background:none;padding:0;font:11px monospace;letter-spacing:1px}
.result-active .result-grid strong,.result-active #final-score{background:none;color:#151218!important;font:900 clamp(25px,6vw,40px) monospace;margin-top:10px}
.result-active #endless-status{margin:0 0 10px;line-height:1.5;font:11px monospace;color:#151218}
.result-active #endless-edit-name{color:#151218;margin-bottom:12px}
.result-active .result-actions{gap:10px}
.result-active #leaderboard-open,.result-active .result-actions #again,.result-active .result-actions #artist-spotify,.result-active #change-character{background:#151218;color:#f6f1eb;border:1px solid #151218;min-height:48px;letter-spacing:1px}
.result-active #leaderboard-open:hover,.result-active .result-actions #again:hover,.result-active .result-actions #artist-spotify:hover,.result-active #change-character:hover{background:#f6f1eb;color:#151218;border-color:#151218}
#leaderboard-screen{background:#09090d;color:#fff;gap:0}
#leaderboard-screen .board-head,#leaderboard-screen #endless-board{width:min(100%,560px);max-width:560px}
#leaderboard-screen .board-head,#leaderboard-screen #endless-board li{grid-template-columns:64px minmax(90px,1fr) minmax(100px,1.25fr);gap:26px;box-sizing:border-box}
#leaderboard-screen .board-head>span:nth-child(2){text-align:right}
#leaderboard-screen .board-head>span:last-child{padding-left:10px}
#leaderboard-screen #endless-board{line-height:2.3}
#leaderboard-screen #leaderboard-title{margin-bottom:30px}
#leaderboard-screen p{margin:24px 0 18px}
#leaderboard-close:focus-visible,#leaderboard-close:hover{background:#eee;color:#151218}
@media(max-width:480px){#leaderboard-screen{padding:22px 18px;font-size:12px}#leaderboard-screen .board-head,#leaderboard-screen #endless-board li{grid-template-columns:42px minmax(72px,1fr) minmax(85px,1.2fr);gap:15px}.result-active #result-title{margin-bottom:22px}}
@media(max-height:620px){.result-active .results{gap:6px;padding:14px;justify-content:flex-start}.result-active #result-title{margin:5px auto 15px}.result-active .result-grid{padding:8px 0}.result-active #endless-edit-name{margin-bottom:5px}#leaderboard-screen #endless-board{line-height:1.7}}

/* All pause actions share dimensions and interaction styling, including the link. */
#paused>button,#paused>a.button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:min(82%,360px);min-height:48px;margin:0;padding:14px 18px;border:1px solid #eee7f2;background:#17131e;color:#eee7f2;font:700 12px monospace;line-height:1.25;letter-spacing:.5px;text-decoration:none;box-shadow:none;border-radius:0;opacity:1}
#paused>button:hover,#paused>button:focus-visible,#paused>a.button:hover,#paused>a.button:focus-visible{background:#eee7f2;color:#17131e;border-color:#eee7f2;box-shadow:0 0 0 1px #eee7f2}
@media(orientation:landscape) and (max-height:600px){#paused>button,#paused>a.button{min-height:44px;padding:10px 18px}}

/* Portrait mobile sets the scale; desktop exposes a wider, zoomed-out playfield. */
.game-active #arena{max-width:none;margin:0 auto;padding:0}
.game-active .stage{width:100%;overflow:hidden}
body[data-mode=base] #game{filter:none}
.game-active .screen-hud{padding:12px 16px}
.game-active .hud{gap:26px;padding:8px 0 12px}
.game-active .road-progress{padding:4px 0 10px}
.game-active #pause{min-width:44px;min-height:44px}
@media(min-width:700px) and (pointer:fine){.game-active .screen-hud{padding:14px 22px}.game-active .hud{gap:36px}.game-active .hud strong{font-size:21px}.game-active .hud #lives{font-size:30px}}
@media(max-width:699px){.game-active main{padding:0}.game-active .screen-hud{padding:10px 12px}.game-active .hud{gap:22px}.game-active .hud #lives{font-size:29px}.game-active .screen-instructions{max-width:85%;font-size:7px;line-height:1.6}}

/* A visible countdown near the HUD; it drains with simulation time and freezes on pause. */
#super-timer{display:block;position:absolute;left:0;right:0;bottom:6px;flex:none;width:min(100%,340px);height:12px;border:2px solid #eee7f2;background:#19131f;overflow:hidden}
#super-timer[hidden]{display:none!important}
#super-timer #power-fill{width:100%;height:100%;display:block;transform-origin:left center;background:var(--brand);transition:transform .1s linear;will-change:transform}
#super-timer.running-out #power-fill{background:#f49b38}
.under-stage:has(#super-timer:not([hidden])){bottom:32px;min-height:38px;display:block}
.under-stage:has(#super-timer:not([hidden])) #power{position:absolute;bottom:25px;font:bold 12px monospace;color:#fff;text-shadow:1px 1px #111}
@media(prefers-reduced-motion:reduce){#super-timer #power-fill{transition:none}}

/* Story-mode hierarchy: character, score, one prominent music action, compact replay choices. */
.result-active .results{gap:12px;padding:24px 18px;justify-content:center}
.result-active .results>div{width:min(100%,440px)}
.result-active .results>div:first-child{order:0;margin:0}
.result-active #result-title{margin:0 auto 8px;width:min(100%,420px)}
.result-active #result-character{display:block;width:78px;height:104px;margin:0 auto 8px}
.result-active .result-grid{padding:12px 0;margin:0}
.result-active #new-record{font:bold 10px monospace;letter-spacing:1px;margin:0 0 10px}
#new-record[hidden]{display:none!important}
.result-active .result-actions{order:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 0}
.result-active .result-actions #artist-spotify{grid-column:1/-1;grid-row:1;min-height:58px;font:bold 14px monospace;gap:12px;background:#151218;color:#fff;border:2px solid #151218}
.result-active .result-actions #artist-spotify:hover{background:#fff;color:#151218}
.result-active .result-actions #again,.result-active .result-actions #change-character{grid-row:2;background:var(--paper);color:#151218;border:1px solid #151218;min-height:44px;font:bold 10px monospace;padding:10px 8px;letter-spacing:0}
.result-active .result-actions #again:hover,.result-active .result-actions #change-character:hover{background:#151218;color:#fff}
.result-active .endless-scores{order:2;margin:0}
.result-active #leaderboard-open{min-height:40px;background:transparent;color:#151218;border:0;font:bold 11px monospace;text-decoration:underline;text-underline-offset:5px}
.result-active #leaderboard-open:hover{background:transparent;color:#fff;border:0}
.result-active #share-status:empty{display:none}
#leaderboard-screen{padding:clamp(16px,3vh,32px) 20px;overflow-y:auto;justify-content:center}
#leaderboard-screen #leaderboard-title{font-size:clamp(20px,3vh,28px)!important;margin:0 0 20px}
#leaderboard-screen .leaderboard-scroll{width:min(100%,520px);overflow-x:hidden;flex:0 0 auto}
#leaderboard-table{width:100%;table-layout:fixed;border-collapse:collapse;font:bold clamp(12px,2.1vh,17px) monospace;letter-spacing:.5px}
#leaderboard-table .rank-col{width:16%}#leaderboard-table .score-col{width:35%}#leaderboard-table .name-col{width:49%}
#leaderboard-table th{padding:0 0 13px;color:#fff0b5;font-size:.8em;text-align:left}
#leaderboard-table th:nth-child(2),#leaderboard-table td:nth-child(2){text-align:right;padding-right:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
#leaderboard-table th:last-child,#leaderboard-table td:last-child{padding-left:12px}
#leaderboard-table #endless-board{width:auto;max-width:none;line-height:1.3}
#leaderboard-table #endless-board tr{display:table-row;color:#fff}
#leaderboard-table td{padding:clamp(5px,1vh,10px) 0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#leaderboard-table tr:nth-child(1){color:#f5ca57!important}#leaderboard-table tr:nth-child(2){color:#d5dbe4!important}#leaderboard-table tr:nth-child(3){color:#cd925b!important}
#leaderboard-screen #endless-status{color:#ccc;font:10px/1.5 monospace;max-width:320px;margin:15px 0 5px;text-align:center}
#leaderboard-screen #endless-edit-name{color:#ccc;font:10px monospace;min-height:36px;border:0;background:transparent;margin:0}
#leaderboard-screen .board-local-note{font:9px monospace;color:#aaa;margin:8px 0 16px}
#leaderboard-screen #endless-name-form{width:min(100%,320px);margin-top:12px;font:11px monospace}
#leaderboard-screen #endless-name-form button{min-height:40px}
#leaderboard-screen #leaderboard-close{min-height:44px;flex-shrink:0}
.gold-confetti{z-index:45}
@media(max-height:620px){.result-active .results{justify-content:flex-start;gap:6px;padding:14px}.result-active #result-character{height:66px;width:50px}.result-active .result-actions #artist-spotify{min-height:48px}.result-active #result-title{max-width:320px}.result-active .result-grid{padding:8px 0}#leaderboard-screen{justify-content:flex-start}#leaderboard-table td{padding:5px 0}#leaderboard-screen #leaderboard-title{margin-bottom:12px}}
.result-active .result-actions #artist-spotify:hover svg path,.result-active .result-actions #artist-spotify:focus-visible svg path{stroke:#fff}

/* Keep Super status compact; name entry must not trigger iOS input zoom. */
#super-timer{width:112px;height:5px;border-width:1px;right:auto;bottom:5px}
.under-stage:has(#super-timer:not([hidden])){min-height:24px}
.under-stage:has(#super-timer:not([hidden])) #power{bottom:15px;font-size:10px;letter-spacing:.2px}
#endless-name{font-size:16px!important;line-height:1.4;min-height:46px}
#leaderboard-screen #endless-name-form{margin:12px 0;flex-shrink:0}
#leaderboard-screen .leaderboard-scroll{margin-bottom:4px}
#leaderboard-table td{padding:clamp(10px,2vh,18px) 0}
#leaderboard-share,#leaderboard-close{width:min(100%,280px);margin:5px 0}
#leaderboard-share{min-height:44px;background:#eae7e0;color:#151218;border:1px solid #eae7e0;font:bold 12px monospace}
#board-share-status:empty,#share-status:empty{display:none}
.result-active #share-score{order:3;min-height:36px;padding:8px 16px;background:transparent;border:1px solid #151218;color:#151218;font:10px monospace}
.result-active #share-status{order:4;font:10px monospace;max-width:320px}
.result-active #result-character{width:100px;height:134px;margin-bottom:4px}
@media(max-height:620px){.result-active #result-character{width:56px;height:75px}#leaderboard-table td{padding:7px 0}}
.result-active #leaderboard-open{border:1px solid #151218;background:#151218;color:#fff;min-height:46px;text-decoration:none;font:bold 12px monospace;letter-spacing:.5px}
.result-active #leaderboard-open:hover{background:#fff;color:#151218;border:1px solid #151218}
#card-dialog{position:fixed;inset:0;z-index:65;background:#100d16;color:#eee7f2;overflow:auto;display:flex;align-items:center;justify-content:center;padding:22px}
#card-dialog[hidden]{display:none!important}
.card-sheet{width:min(100%,760px);display:grid;grid-template-columns:minmax(160px,280px) minmax(0,1fr);gap:18px 24px}
.card-sheet h2{grid-column:1/-1;font:bold 19px monospace;letter-spacing:1px;margin:0}
#card-preview{width:100%;height:auto;display:block;image-rendering:pixelated;border:1px solid #72508a}
.card-controls{display:flex;flex-direction:column;gap:9px;justify-content:center;font:11px/1.5 monospace}
.card-controls button,.card-controls a{display:block;text-align:center;padding:11px;min-height:44px;font:bold 11px monospace;border:1px solid #bb9cda;background:transparent;color:#eee7f2}
.card-controls #card-native{background:#eee7f2;color:#151218}
.card-controls #card-status{margin:3px 0;color:#f2c66b}
.card-controls #card-help,.card-dev-note{font-size:10px;opacity:.7;margin:0}
body[data-mode] .stage.bat-crash{animation:bat-impact .3s linear}
@keyframes bat-impact{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,4px)}45%{transform:translate(6px,-4px)}70%{transform:translate(-4px,2px)}}
@media(max-width:600px){#card-dialog{padding:18px;align-items:flex-start}.card-sheet{display:flex;flex-direction:column;align-items:center;gap:12px}.card-sheet h2{font-size:17px}.card-sheet #card-preview{width:180px;max-height:320px;object-fit:contain}.card-controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.card-controls p,.card-controls #card-video,.card-controls #card-close{grid-column:1/-1}.card-controls #card-help{font-size:9px}.card-controls .card-dev-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){body[data-mode] .stage.bat-crash{animation:none}}

#card-download[hidden]{display:none!important}.card-controls:has(#card-download[hidden]) #card-native{grid-column:1/-1}
#reload-game{font:10px monospace;padding:8px 12px;margin:8px auto;border-color:#eee7f255;color:inherit;display:block;background:transparent}

/* Results37: the leaderboard is an optional, secondary action like replay. */
.result-active #leaderboard-open{background:var(--paper);color:#151218;border:1px solid #151218;min-height:44px;font:bold 10px monospace;letter-spacing:0;text-decoration:none;padding:10px 8px}
.result-active #leaderboard-open:hover,.result-active #leaderboard-open:focus-visible{background:#151218;color:#fff;border-color:#151218}

/* Limited-edition test: one character, direct start. Original Montana is untouched. */
.montana-option:not([data-character="dracula"]),.picker-swipe-hint,#change-character,#death-change,#back-picker{display:none!important}
.montana-picker{justify-content:center;overflow:visible}.montana-option[data-character="dracula"]{margin-inline:auto;flex:0 0 min(230px,70vw)}
.result-active .result-actions{grid-template-columns:1fr}.result-active .result-actions #again{grid-column:1/-1}

/* The running game fills the available browser viewport; safe-area padding stays on body. */
body.game-active:not(.result-active)>header,body.game-active:not(.result-active)>footer{display:none!important}
body.game-active:not(.result-active) main{width:100%;padding:0}
body.game-active:not(.result-active) #arena{width:100%;height:100%;max-width:none;margin:0;padding:0}
body.game-active:not(.result-active) .stage{height:100%;border:0}
body.game-active:not(.result-active) #game{width:100%;height:100%}
#pause-website{display:flex;align-items:center;justify-content:center;width:min(300px,80%);min-height:44px;border:1px solid var(--paper);color:var(--paper);background:transparent;font:12px monospace;padding:12px}
#pause-website:hover,#pause-website:focus-visible{background:var(--paper);color:#151218}

/* Four equal actions on both result and sharing screens. */
.result-active .result-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.result-active .result-actions #artist-spotify,.result-active .result-actions #again,.result-active .result-actions #leaderboard-open,.result-active .result-actions #share-score{grid-column:auto;grid-row:auto;order:0;min-width:0;width:100%;min-height:52px;margin:0;padding:12px 8px;font:bold 11px/1.3 monospace;letter-spacing:0;border:1px solid #151218;background:var(--paper);color:#151218;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box}
.result-active .result-actions #artist-spotify{order:1}.result-active .result-actions #again{order:0}.result-active .result-actions #leaderboard-open{order:2}.result-active .result-actions #share-score{order:3}
.result-active .result-actions #artist-spotify:hover,.result-active .result-actions #again:hover,.result-active .result-actions #leaderboard-open:hover,.result-active .result-actions #share-score:hover{background:#151218;color:#fff}
.result-active .endless-scores{margin:0}
.card-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-content:center}
.card-controls #card-native,.card-controls #card-copy-link,.card-controls #card-song,.card-controls #card-close{grid-column:auto;min-width:0;min-height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:0;padding:10px 7px;font:bold 11px/1.3 monospace;background:transparent;color:#eee7f2;border:1px solid #bb9cda}
#reload-game{display:none;font-size:9px;border:0;text-decoration:underline;text-underline-offset:3px;opacity:.65;padding:4px 8px}
#menu:has(#load-error:not([hidden])) #reload-game{display:block}
.result-active .result-actions #artist-spotify svg path{stroke:var(--paper)}


/* Restore the approved card, slightly smaller and centered. */
.selection-active[data-mode=dracula] .menu{max-width:620px;padding:16px 24px}
.selection-active[data-mode=dracula] .montana-picker{display:flex;justify-content:center;align-items:center;gap:0;width:100%;max-width:100%;padding:0;margin:12px auto 4px;overflow:visible}
.selection-active[data-mode=dracula] .montana-option[data-character=dracula]{flex:0 0 auto;width:clamp(155px,23vh,195px);min-width:0;margin:0;padding:0;border:0;pointer-events:none}
.selection-active[data-mode=dracula] .montana-option[data-character=dracula] .picker-image{aspect-ratio:.62;background:var(--paper)!important;border-top:7px solid var(--brand)}
.selection-active[data-mode=dracula] .montana-option[data-character=dracula] .picker-image:before{display:block;content:'';position:absolute;top:12px;left:calc(50% - 8px);border-top:11px solid var(--brand);border-inline:8px solid transparent;z-index:4}
.selection-active[data-mode=dracula] .picker-heading h1{font-size:clamp(26px,4vw,42px);margin:10px 0 18px}
.selection-active[data-mode=dracula] .menu #start{width:min(100%,320px);min-height:48px;margin:18px auto 0}
.game-controls{margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:auto;flex:0 0 auto}
.game-controls #pause,.game-controls #game-sound{margin:0;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border-radius:50%;border:1px solid #eee7f288;background:#17131e66;color:#eee7f2;box-sizing:border-box}
#game-sound svg{width:23px;height:23px}#game-sound .sound-muted{display:none}#game-sound[aria-pressed=false] .sound-waves{display:none}#game-sound[aria-pressed=false] .sound-muted{display:block}
#personal-score{font:700 12px/1.6 monospace;color:#eae7e0;text-align:center;max-width:100%;overflow-wrap:anywhere;margin:12px 0}
@media(orientation:landscape) and (max-height:600px){.selection-active[data-mode=dracula] .menu{padding:4px 20px}.selection-active[data-mode=dracula] .montana-option[data-character=dracula]{width:105px}.selection-active[data-mode=dracula] .picker-heading h1{font-size:25px;margin:4px 0 6px}.selection-active[data-mode=dracula] .montana-picker{margin:2px auto}.selection-active[data-mode=dracula] .menu #start{margin-top:6px;min-height:44px;padding:10px}}

/* Release45: give listening the lead, with compact replay and a larger sharing preview. */
.result-active .result-actions #artist-spotify{grid-column:1/-1;grid-row:1;order:0;min-height:68px;padding:16px 12px;font:bold 14px/1.35 monospace;background:#151218;color:#fff;border:2px solid #151218}
.result-active .result-actions #artist-spotify:hover,.result-active .result-actions #artist-spotify:focus-visible{background:var(--paper);color:#151218}
.result-active .result-actions #artist-spotify svg path{stroke:var(--paper)}
.result-active .result-actions #artist-spotify:hover svg path,.result-active .result-actions #artist-spotify:focus-visible svg path{stroke:var(--paper)}
.result-active .result-actions #leaderboard-open{grid-column:1;grid-row:2;order:1}
.result-active .result-actions #share-score{grid-column:2;grid-row:2;order:2}
.result-active .result-actions #again{grid-column:1/-1;grid-row:3;order:3;justify-self:center;width:auto;min-width:124px;min-height:36px;margin-top:2px;padding:7px 12px;font:bold 10px/1.2 monospace;background:transparent;border:1px solid #15121899}
.result-active .result-actions #again svg{width:18px;height:18px}
#card-dialog{align-items:center;padding:18px}
@media(max-width:600px){#card-dialog{align-items:center;padding:14px}.card-sheet{width:min(100%,440px);gap:14px}.card-sheet #card-preview{width:min(100%,calc((100dvh - 156px)*.5625),315px);max-height:none;height:auto;object-fit:contain}.card-controls{width:100%}}
@media(orientation:landscape) and (max-height:600px){.card-sheet{display:grid;grid-template-columns:minmax(100px,calc((100dvh - 44px)*.5625)) minmax(200px,1fr);width:min(100%,760px)}.card-sheet #card-preview{width:100%;max-height:calc(100dvh - 44px);object-fit:contain}}
.result-active .result-actions #artist-spotify svg path{stroke:#151218}
/* Halloween47 — consistent sound control and a tighter game HUD. */
header #sound{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:10px;border-radius:50%;border:1px solid #eee7f288;background:#17131e66;color:#eee7f2}
header #sound svg{width:23px;height:23px}header #sound .sound-muted{display:none}header #sound[aria-pressed=false] .sound-waves{display:none}header #sound[aria-pressed=false] .sound-muted{display:block}
.edition-countdown{font:10px/1.6 monospace;letter-spacing:1px;color:#eead6e;margin:4px 0 8px}
.game-active .screen-hud{padding:6px 12px}.game-active .road-progress{padding:0 0 2px}.game-active .road-progress>div:first-child{margin-bottom:0}
.game-active .hud{align-items:flex-start;padding:1px 0;gap:24px}.game-active .hud #score{background:none;color:#f1c98b;padding:0;margin:2px 0 0;line-height:1.1;font-size:25px;text-shadow:2px 2px #21142b}.game-active .hud #lives{margin-top:0;line-height:1.1}.game-active .game-controls{margin-top:0}
#super-timer{display:block;width:108px;height:5px;border:1px solid #eee7f266;background:#17121f;bottom:5px}#super-timer[hidden]{display:none!important}
.result-active[data-mode=dracula]{background-color:#32203f;color:#f7eadb;background-image:radial-gradient(#e7a75d22 1px,transparent 1px);background-size:26px 26px}
.result-active[data-mode=dracula] #result-title{color:#edc98d}.result-active[data-mode=dracula] .result-grid{border-color:#edc98d66;color:#e8cfb3}.result-active[data-mode=dracula] #final-score,.result-active[data-mode=dracula] #best{background:none;color:#f7dbac}.result-active[data-mode=dracula] #new-record{color:#f7c96a}
.result-active .result-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.result-main-actions{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px}
.result-active .result-actions .result-main-actions #again{grid-column:1;grid-row:1;min-width:0;width:48px;height:60px;min-height:60px;margin:0;padding:12px;border:1px solid #edc98d88;background:#21152c;color:#f7eadb}
.result-active .result-actions .result-main-actions #again svg{width:24px;height:24px}
.result-active .result-actions .result-main-actions #artist-spotify{grid-column:2;grid-row:1;min-height:60px;display:flex;flex-direction:row-reverse;gap:10px;border:1px solid #edc98d88;background:#17121f;color:#fff0de;font:bold 14px monospace;padding:12px 8px}
.result-active .result-actions #leaderboard-open{grid-column:1;grid-row:2}.result-active .result-actions #share-score{grid-column:2;grid-row:2}
.spotify-mark{flex:none}.spotify-mark path{stroke:#17121f}#pause-spotify,#card-song{display:flex;align-items:center;justify-content:center;gap:9px}
.result-active .result-actions #artist-spotify:hover,.result-active .result-actions #artist-spotify:focus-visible{background:#17121f;color:#fff0de}
.card-colors{display:flex;justify-content:center;align-items:center;gap:14px;grid-column:1/-1;margin:0}
.card-colors button{width:28px;height:28px;min-height:0;padding:0;border:2px solid #ffffff44;border-radius:50%;background:#a57ac5}
.card-colors [data-card-color=orange]{background:#ef9c48}.card-colors [data-card-color=night]{background:#7184ad}.card-colors [aria-pressed=true]{outline:2px solid #f8e4bb;outline-offset:3px}
@media(max-width:600px){.card-sheet #card-preview{width:min(100%,calc((100dvh - 205px)*.5625),300px)}.card-sheet{gap:12px}}
.result-active[data-mode=dracula] .results{background-color:#32203f;background-image:radial-gradient(#e7a75d1c 1px,transparent 1px);background-size:26px 26px;color:#f7eadb!important}
.result-active[data-mode=dracula] #result-title{color:#edc98d!important;background:#edc98d}
.result-active[data-mode=dracula] #final-score,.result-active[data-mode=dracula] #best{color:#f7dbac!important}