/* Playable portrait comparison: the original landscape page is retained. */
html,body{height:var(--view-h,100dvh);min-height:0;width:100%;overflow:hidden}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);--footer-h:0px}
.app{width:min(100%,calc((var(--view-h,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/20));height:auto;max-width:540px}
.cabinet{aspect-ratio:9/20;width:100%;height:auto;--hud-top:15%;--hud-shadow:-1px -1px 1px #091220,1px -1px 1px #091220,-1px 1px 1px #091220,1px 1px 1px #091220,0 2px 3px #091220}
canvas{width:100%;height:100%;touch-action:none}
footer{display:none}.portrait-notice{display:none!important}
.hud{position:absolute;inset:0;height:100%;display:block;background:transparent;padding:0;pointer-events:none;text-shadow:var(--hud-shadow)}
.side-panel{position:absolute;top:var(--hud-top);height:33%;width:clamp(37px,12%,44px);display:grid;grid-template-rows:28px minmax(0,1fr) 21px;gap:3px;padding:4px 1px;background:transparent;pointer-events:none;color:#fffdfb}
.health-panel{left:1.5%}.xp-panel{right:1.5%}
.side-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}.side-head b{font-size:12px;font-weight:600;line-height:1.2}.side-head span{font-size:11px;color:#f2f4f7;font-weight:500;white-space:nowrap;line-height:1.2}
.hearts{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(10,minmax(0,1fr));gap:0;justify-items:center;align-items:stretch;min-height:0}
.heart{display:grid;place-items:center;width:100%;height:auto;min-height:0;aspect-ratio:auto;line-height:1;font-size:clamp(14px,5cqw,24px);color:#ff9eb6}.heart.empty{color:#7b8599}
.side-value{display:flex;align-items:baseline;justify-content:center;gap:1px;align-self:center;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}.side-value b{font-size:14px;font-weight:600}.side-value span{font-size:11px;color:#f2f4f7}
.xp-panel .meter{position:relative;width:8px;height:100%;min-height:0;justify-self:center;border-radius:4px;background:#09122099;box-shadow:0 1px 3px #091220b3;overflow:hidden}.xp-panel .meter span{position:absolute;bottom:0;left:0;width:100%;height:0;border-radius:4px;background:#7ef4f5}
.mission{position:absolute;left:3.3%;top:2.1%;gap:5px;padding:7px 9px;background:#101b29d9;border-radius:7px}.mission .label{font-size:11px}.mission .value{font-size:14px}.clock{position:absolute;top:3%;right:16%;font-size:17px}.pause{position:absolute;top:1.4%;right:1%;width:44px;height:44px;font-size:22px;pointer-events:auto;background:transparent}
.battle-loadout{top:auto;bottom:2%;left:3.3%;max-width:90%;padding:4px 6px;background:#1424348c;gap:5px}.loadout-label{font-size:11px}.loadout-chip{width:24px;height:24px}.loadout-count{font-size:11px;min-width:12px}.battle-icons{gap:5px}
.overlay{z-index:8}.title-panel{width:86%;height:auto;max-height:90%;padding:6%;border-radius:16px;gap:12px}.tiny{font-size:11px}.logo-heading{flex:initial;height:150px}.logo-heading img{height:100%;max-height:none}.title-rule{font-size:14px;margin:0 0 8px}.primary,.secondary{font-size:14px;padding:12px;border-radius:8px}.controls{display:block;font-size:11px;line-height:1.7;margin:4px 0}.title-options{gap:18px}.title-options button{font-size:12px}
.modal{width:90%;max-height:90%;padding:6%}.modal h2{font-size:23px;margin:7px 0}.modal p{font-size:13px;line-height:1.6;margin:8px 0}.stage-intro{grid-template-columns:1fr;gap:18px}.stage-condition{padding-top:12px;margin-top:14px;gap:8px}.stage-condition>span{font-size:12px}.stage-condition strong{font-size:15px}.stage-tips{font-size:12px;gap:10px;line-height:1.5;margin-bottom:15px}.intro-countdown{font-size:12px}
.level-dialog{width:90%;height:88%;gap:12px}.dialog-heading{display:block}.dialog-heading h2{font-size:23px;margin:4px 0}#level-sub{font-size:12px;margin:5px 0}.owned-strip{display:none}.choice-grid{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}.choice{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:25px 20px 1fr;column-gap:12px;row-gap:3px;padding:12px;border-radius:10px}.choice-top{grid-column:1;grid-row:1/4;align-items:start}.choice-top .item-icon{width:40px;height:40px}.category{position:absolute;top:12px;right:12px;font-size:10px}.choice-title{grid-column:2;grid-row:1;font-size:15px;white-space:normal;margin:0;padding-right:86px;line-height:1.3}.rank-row{grid-column:2;grid-row:2;margin:0;gap:5px}.rank-label{font-size:11px}.rank-dot{width:6px;height:6px}.effect-list{grid-column:2;grid-row:3;margin:0;padding:0;gap:3px;align-content:center}.effect-name{font-size:11px}.effect-number{font-size:14px}.effect-number .before,.effect-number .arrow{font-size:11px}.effect-note{font-size:11px;line-height:1.35}.choose-foot{display:none}.dialog-foot{font-size:11px;gap:10px;line-height:1.4}.choice.not-picked{opacity:.35}
.pause-shell{width:92%;height:88%;padding:16px;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px}.pause-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}.pause-menu>.tiny,.pause-menu>h2{grid-column:1/-1}.pause-menu h2{font-size:23px;margin:0 0 5px}.pause-menu .primary,.pause-menu .secondary{font-size:12px;padding:10px;margin:0;min-height:40px}.hud-position{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;font-size:12px;margin-top:6px}.hud-position input{grid-column:1/-1;width:100%;margin:0;min-height:30px;touch-action:pan-x;accent-color:var(--cyan)}.hud-position output{font-variant-numeric:tabular-nums;color:var(--cyan)}
.inventory-heading h3{font-size:13px}.inventory-heading>span{font-size:11px}.inventory-list{grid-template-columns:1fr;gap:7px}.inventory-entry{grid-template-columns:28px minmax(0,1fr) auto;padding:8px;gap:8px}.inventory-copy strong{font-size:12px}.inventory-copy>span{font-size:11px}.inventory-rank b{font-size:12px}.inventory-rank>span{font-size:11px}
.end-panel{width:88%}#result{padding:14px 0;margin:16px 0;gap:8px}#result strong{font-size:22px}#result small{font-size:11px}.end-actions{grid-template-columns:1fr;gap:8px}
.install-card{width:90%;padding:6%}.install-card h2{font-size:22px}.install-card p,.install-card li{font-size:13px}.install-card .install-foot{font-size:11px}.install-card .primary{font-size:14px;padding:12px}.upgrade-toast{top:28%;padding:8px 12px;font-size:12px;max-width:85%;z-index:9}
@media(orientation:landscape) and (hover:none),(orientation:landscape) and (display-mode:standalone),(orientation:landscape) and (display-mode:fullscreen){.app{width:min(100%,calc((var(--view-h,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/20));height:auto;max-width:540px}.cabinet{height:auto;aspect-ratio:9/20}.title-panel{height:auto}.hud{padding:0}.battle-loadout{left:3.3%}}
@media(orientation:portrait) and (max-width:600px){.app{width:100%;max-width:none;height:calc(var(--view-h,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.cabinet{height:100%;aspect-ratio:auto}.title-panel{width:86%;padding:6%}.level-dialog{width:90%;height:88%}.pause-shell{width:92%;height:88%}.stage-intro{width:90%;padding:6%}.owned-strip{display:none}}
@container(max-width:320px){.side-panel{padding-inline:1px}.heart{font-size:clamp(12px,4.9cqw,18px)}.logo-heading{height:120px}.choice{padding:9px;grid-template-columns:30px 1fr;column-gap:8px}.choice-top .item-icon{width:30px;height:30px}.category{top:9px;right:9px;font-size:9px}.choice-title{font-size:13px;padding-right:73px}.effect-note{font-size:10px}.level-dialog{gap:8px}.choice-grid{gap:7px}}

/* Scenery fills the system insets; controls keep the same safe-area layout. */
.app{position:relative}.cabinet{z-index:1}
#scene-bleed{position:absolute;left:0;width:100%;z-index:0;pointer-events:none;image-rendering:pixelated}
.hud .pause{border-radius:50%;background:#f7fafc;color:#162839;box-shadow:0 2px 8px #07132066;font-weight:700;font-size:23px}

/* Read the benefit first, with compact before/after details directly below. */
#level-panel.level-dialog{height:auto;max-height:92%;width:90%;gap:14px}
#level-panel .dialog-heading h2{font-size:25px;margin:3px 0}
#level-panel #level-sub{font-size:13px;line-height:1.4;margin:5px 0 0}
#level-panel .choice-grid{flex:0 0 auto;grid-template-columns:1fr;grid-template-rows:repeat(3,auto);gap:10px}
#level-panel .choice{display:flex;flex-direction:column;gap:0;padding:14px;min-height:0;border-radius:12px}
#level-panel .choice-heading{display:flex;align-items:center;gap:12px;min-width:0}
#level-panel .item-icon{width:42px;height:42px;flex-shrink:0}
#level-panel .choice-name{display:grid;grid-template-columns:1fr;gap:3px;min-width:0}
#level-panel .choice-title{grid-column:auto;grid-row:auto;font-size:18px;line-height:1.3;margin:0;padding:0;white-space:normal}
#level-panel .category{position:static;font-size:12px;line-height:1.3}
#level-panel .upgrade-benefit{font-size:19px;line-height:1.35;font-weight:600;color:#f6fafc;margin-top:10px}
#level-panel .effect-list{margin:5px 0 0;padding:0;gap:4px;align-content:start}
#level-panel .effect{justify-content:flex-start;gap:10px;line-height:1.4}
#level-panel .effect-name{font-size:13px;line-height:1.4;color:#bbccd6}
#level-panel .effect-number{font-size:15px;line-height:1.4;color:#eff7fa}
#level-panel .effect-number .before,#level-panel .effect-number .arrow{font-size:13px}
#level-panel .effect-note{font-size:13px;line-height:1.4;color:#bbccd6}
#level-panel .choice-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
#level-panel .rank-row{display:flex;gap:4px;margin:0;min-width:0}
#level-panel .rank-dot{width:6px;height:6px;flex-shrink:0}
#level-panel .rank-label{font-size:11px;margin-left:5px;white-space:nowrap}
#level-panel .choose-foot{display:flex;gap:6px;align-items:center;border:0;padding:0;margin:0;font-size:12px;white-space:nowrap}
#level-panel .key{font-size:11px}
#level-panel .dialog-foot{font-size:12px;line-height:1.4;margin:0}
#level-panel .choice.picked .rank-row{display:none}
@media(max-height:700px){
 #level-panel.level-dialog{gap:10px;max-height:94%}
 #level-panel .dialog-heading h2{font-size:21px}
 #level-panel #level-sub{font-size:12px}
 #level-panel .choice-grid{gap:8px}
 #level-panel .choice{padding:10px}
 #level-panel .item-icon{width:34px;height:34px}
 #level-panel .choice-title{font-size:16px}
 #level-panel .category{font-size:11px}
 #level-panel .upgrade-benefit{font-size:17px;margin-top:7px}
 #level-panel .effect-list{gap:2px;margin-top:3px}
 #level-panel .effect-name,#level-panel .effect-note{font-size:12px}
 #level-panel .effect-number{font-size:14px}
 #level-panel .effect-number .before,#level-panel .effect-number .arrow{font-size:12px}
 #level-panel .choice-bottom{margin-top:6px}
 #level-panel .dialog-foot{font-size:11px}
}
@container(max-width:320px){
 #level-panel .choice-heading{gap:8px}
 #level-panel .choice-title{font-size:16px}
 #level-panel .upgrade-benefit{font-size:17px}
 #level-panel .rank-label{margin-left:3px}
}

/* Clear browser-rendered captions, over the pixel-art field. */
.field-ui{position:absolute;inset:0;z-index:4;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:#f4f8fa}
.crowd-note{position:absolute;left:50%;transform:translateX(-50%);padding:6px 11px;background:#132737d9;border-radius:7px;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;color:#ffe0a1;box-shadow:0 2px 6px #07132030}
.crowd-note[data-blocked=true]{background:#633f3de8;color:#ffe1b8}
.hud .mission{display:grid;grid-template-columns:auto auto;column-gap:5px;row-gap:3px}
#crowd-note{position:static;grid-column:1/-1;transform:none;padding:0;background:none;border-radius:0;box-shadow:none;font-size:12px;font-weight:500;line-height:1.35;text-align:left}
#crowd-note[data-blocked=true]{background:none;color:#ffd1a5}
.speaker-speech{position:absolute;left:55%;top:8%;max-width:42%;padding:7px 10px;background:#183a50f2;border-radius:8px;font-size:14px;font-weight:600;line-height:1.4;color:#ffe4a0}
.field-floaters{position:absolute;inset:0;pointer-events:none}
.field-float{position:absolute;transform:translateX(-50%);width:max-content;max-width:calc(100% - 12px);font-size:13px;font-weight:600;line-height:1.35;text-align:center;text-shadow:-1px 0 2px #0a1827,1px 0 2px #0a1827,0 1px 3px #0a1827;pointer-events:none}
.field-float.enemy-warning,.field-float.fan-warning{padding:2px 5px;background:#623447e8;border-radius:4px;font-size:12px}
.play-coach{position:absolute;left:50%;bottom:8%;width:94%;transform:translateX(-50%);text-align:center;pointer-events:none}
.play-coach p{display:inline-block;max-width:100%;margin:6px 0 0;padding:8px 11px;background:#142b3de0;border-radius:8px;color:#f5fafc;font-size:14px;font-weight:500;line-height:1.4;box-shadow:0 2px 8px #07132026}
.play-coach[data-phase=xp]{bottom:10%}
.gesture-demo{position:relative;width:110px;height:66px;margin:auto;opacity:.55}
.gesture-ring{position:absolute;left:27px;top:5px;width:54px;height:54px;border:1.5px solid #d4f6ff80;border-radius:50%;background:#b5ebf208}
.gesture-point{position:absolute;left:48px;top:26px;width:12px;height:12px;border-radius:50%;background:#aeeaf0;box-shadow:0 0 0 5px #aeeaf01a;animation:guide-drag 2.4s ease-in-out infinite}
.gesture-hand{position:absolute;left:43px;top:19px;width:32px;height:42px;stroke:#e5f6fb;stroke-width:2;fill:#18344ec4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #07132066);animation:guide-drag 2.4s ease-in-out infinite}
@keyframes guide-drag{0%,12%,100%{transform:translate(0,0)}48%,65%{transform:translate(25px,-16px)}}
@media(prefers-reduced-motion:reduce){.gesture-point,.gesture-hand{animation:none}}
@media(max-height:700px){
 .gesture-demo{width:90px;height:44px}
 .gesture-ring{left:23px;top:0;width:44px;height:44px}
 .gesture-point{left:40px;top:16px;width:10px;height:10px}
 .gesture-hand{left:36px;top:11px;width:28px;height:36px}
}

/* A short automatic stage announcement, styled like a 16-bit opening. */
#overlay.stage-mode{background:linear-gradient(180deg,#07132070,#071320db 32%,#071320e8 68%,#07132085);pointer-events:auto}
#intro-panel.stage-splash{width:100%;padding:22px 6%;text-align:center;outline:none;display:flex;flex-direction:column;align-items:center;background:#08172c69;border-block:2px solid #83d7e35c;box-shadow:0 12px 50px #03101e40;animation:stage-arrive .35s steps(6,end) both}
.stage-pixel-title{width:100%;margin:0 0 27px;line-height:0}
.stage-pixel-title img{width:100%;height:auto;display:block;image-rendering:pixelated}
.stage-goal{display:flex;justify-content:center;align-items:baseline;gap:12px;color:#f5fbff;font-weight:700;line-height:1.1}
.stage-goal>span{font-size:20px}.stage-goal strong{font-size:58px;letter-spacing:-.025em;color:#ffdd87;font-variant-numeric:tabular-nums;text-shadow:2px 3px #082136}
.stage-goal strong span{font-size:23px;margin-left:5px;letter-spacing:0}
.stage-rule{font-size:18px;line-height:1.75;font-weight:600;margin:24px 0 0;color:#f5fbff;text-shadow:0 2px 3px #071320}
.stage-time{font-size:13px;line-height:1.4;margin:16px 0 22px;color:#b8cbd8}
.stage-ready{width:74px;height:3px;display:flex;gap:5px;position:relative;background:#aeeaf01a}
.stage-ready:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--intro-progress,0%);background:#8feaf3}
.play-coach p{white-space:pre-line;line-height:1.6}
@keyframes stage-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:700px){#intro-panel.stage-splash{padding-block:18px}.stage-pixel-title{margin-bottom:22px}.stage-goal strong{font-size:50px}.stage-rule{font-size:17px;margin-top:20px}.stage-time{margin:12px 0 18px}}
@media(prefers-reduced-motion:reduce){#intro-panel.stage-splash{animation:none}}

/* The level-up tutorial sits in the initially empty audience space. */
.play-coach[data-phase=xp]{top:25%;bottom:auto;width:78%}
.play-coach[data-phase=xp] p{background:#102b40ed;box-shadow:0 2px 9px #06142366;border:1px solid #8edbe535}

/* Equal visible glyph heights, with city names on their own line. */
#intro-name.stage-pixel-title{display:grid;justify-items:center;gap:10px;margin-bottom:22px;width:100%}
#intro-name.stage-pixel-title img{width:auto;height:46px;max-width:100%;object-fit:contain;display:block}
@media(max-height:700px){#intro-name.stage-pixel-title img{height:40px}#intro-name.stage-pixel-title{gap:8px;margin-bottom:18px}}
/* The same dimming covers actual scenery rows outside the safe game rectangle. */
.app::after{content:"";display:none;position:fixed;inset:0;background:#071320bd;z-index:0;pointer-events:none}
body[data-game-state]:not([data-game-state=play]) .app::after{display:block}
#overlay.stage-mode{background:#071320bd}

/* Arcade title: full-bright demo, separate logo and pixel START prompt. */
body[data-game-state=title] .app::after{display:none!important}
body[data-game-state=title] #overlay{background:transparent}
#title-panel.arcade-title{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;background:transparent;border:0;border-radius:0;display:block;box-shadow:none}
.arcade-title .logo-heading{position:absolute;top:24%;left:5%;width:90%;height:23%;margin:0;filter:drop-shadow(0 3px 0 #071628) drop-shadow(0 6px 5px #07162870)}
.arcade-title .logo-heading img{width:100%;height:100%;object-fit:contain}
.arcade-title .push-start{position:absolute;top:49%;left:13%;width:74%;height:9%;padding:8px 5px;display:grid;place-items:center;background:transparent;border:0;border-radius:5px;filter:drop-shadow(0 2px 1px #071628);animation:push-start-blink 1.4s steps(1,end) infinite}
.arcade-title .push-start img{width:100%;height:auto;max-height:100%;object-fit:contain;image-rendering:pixelated}
.arcade-title .push-start:disabled{animation:none;color:#fff8b9;font-size:14px}
.arcade-title .push-start:focus-visible{outline:2px solid #fff1af;outline-offset:2px;animation:none}
.arcade-title .title-help{position:absolute;bottom:8.5%;left:10%;width:80%;padding:13px 10px;background:#071421e0;border:1px solid #b1dbe933;border-radius:10px;box-shadow:0 3px 14px #07142138}
.arcade-title .controls{margin:0;font-size:12px;line-height:1.7;color:#edf5fa;font-weight:500}
.arcade-title .title-options{margin-top:8px;gap:0}
.arcade-title .title-options #sound{min-width:90px;min-height:36px;padding:6px 16px;border:1px solid #b1dbe947;border-radius:6px;background:#ffffff09;color:#b3eff4;font-size:13px;font-weight:600}
@keyframes push-start-blink{0%,64%{opacity:1}65%,100%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.arcade-title .push-start{animation:none}}

.arcade-title .controls-heading{margin:0 0 6px;color:#fff8dc;font-size:14px;line-height:1.35;font-weight:700;letter-spacing:.05em}

/* Victory keeps the pixel-art celebration fully visible. */
body[data-game-state=victory] .app::after{display:none!important}
.victory-panel{position:absolute;inset:0;z-index:8;outline:none;pointer-events:none;text-align:center;color:#fff6d9}
.victory-banner{position:absolute;top:var(--victory-banner-top,49%);left:5%;width:90%;opacity:0;transform:translateY(9px) scale(.9);transition:opacity .18s,transform .3s cubic-bezier(.15,.7,.25,1.2);text-shadow:0 2px 3px #071526}
.victory-banner:before{content:"";position:absolute;inset:-28% -5%;background:radial-gradient(ellipse,#fff1a51c,transparent 70%);z-index:-1;pointer-events:none}
.victory-kicker{margin:0 0 3px;font-size:10px;font-weight:700;letter-spacing:.22em;color:#fff3b2;text-shadow:0 1px 2px #0a1e31,1px 0 2px #0a1e31,-1px 0 2px #0a1e31}
#victory-heading{margin:0;line-height:0;width:100%}#victory-heading img{width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 3px 2px #09162699)}
.victory-count{margin:1px 0 0;display:flex;justify-content:center;align-items:baseline;gap:9px;font-size:12px}.victory-count strong{font-size:23px;font-weight:700;color:#fff0ad;font-variant-numeric:tabular-nums;text-shadow:0 2px 2px #071526,1px 0 2px #071526,-1px 0 2px #071526}
.victory-actions{position:absolute;bottom:7%;left:10%;width:80%;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}

#victory-next{background:linear-gradient(#ffebac,#f8c869);color:#122b43;box-shadow:0 3px 0 #98703c,0 6px 16px #06182f55;border:1px solid #fff2b2;font-size:16px;padding:14px 4px;min-height:49px}
#victory-next:disabled{pointer-events:none}.victory-back{border:0;background:transparent;color:#fff7db;font-size:12px;padding:10px;min-height:36px;text-shadow:0 2px 3px #071526}
.victory-panel[data-phase=banner] .victory-banner,.victory-panel[data-phase=ready] .victory-banner{opacity:1;transform:none}
.victory-panel[data-phase=ready] .victory-actions{opacity:1;transform:none;pointer-events:auto}
.arcade-title .push-start.preview-start{animation:none;color:#fff0ad;font-size:17px;font-weight:700;text-shadow:0 2px 3px #071526}
@media(max-height:620px){.victory-count strong{font-size:20px}.victory-banner{top:var(--victory-banner-top,49%)}.victory-actions{bottom:5%}#victory-next{padding:11px 4px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.victory-banner,.victory-actions{transition:none}}
/* A short clear-impact accent; never shakes during ordinary combat. */
.cabinet.clear-impact #game{animation:clear-shake .28s steps(1,end) .11s}
@keyframes clear-shake{0%{transform:translate(0,0)}18%{transform:translate(2px,1px)}36%{transform:translate(-2px,-1px)}54%{transform:translate(1px,0)}72%{transform:translate(-1px,1px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.cabinet.clear-impact #game{animation:none}}

/* Travel keeps the bright field; only the full-screen cut covers the insets. */
body[data-game-state=travel] .app::after{display:none!important}
.travel-cover{position:fixed;inset:0;z-index:50;background:#07121c;pointer-events:none;display:flex;justify-content:center;align-items:center;opacity:0}
.travel-route{width:min(80%,400px);text-align:center;color:#f5fbff;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif}
.travel-cover[data-route=true] .travel-route{opacity:1;transform:none}.travel-route p{color:#88e7ec;font-size:11px;letter-spacing:.25em;margin:0 0 20px}
.travel-cities{display:flex;justify-content:center;align-items:center;gap:22px;font-size:28px;font-weight:650}.travel-cities b{font-size:20px;color:#88e7ec}.travel-cities strong{color:#ffde91}
.travel-track{height:3px;width:80%;max-width:250px;background:#203849;position:relative;margin:25px auto 0;border-radius:2px;overflow:hidden}.travel-track i{position:absolute;inset:0 auto 0 0;width:var(--travel-progress,0%);background:#7ed9e4}
@media(prefers-reduced-motion:reduce){.travel-route{transition:none;transform:none}}

/* Results read as two clear achievements, rather than a small caption. */
.victory-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:88%;max-width:330px;margin:14px auto 0;padding:11px 4px 12px;border-top:1px solid #fff2c44d;border-bottom:1px solid #fff2c44d;background:#0a1e323d;text-shadow:0 2px 2px #071526,1px 0 2px #071526,-1px 0 2px #071526}
.victory-stat{min-width:0}.victory-stat dt{font-size:12px;line-height:1.3;color:#c8eff2;font-weight:650;letter-spacing:.04em}.victory-stat dd{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:4px 0 0;line-height:1.1}.victory-stat strong{font-size:30px;line-height:1.1;color:#ffe39a;font-weight:750;font-variant-numeric:tabular-nums}.victory-stat dd span{font-size:13px;color:#fff5d4;font-weight:600}
@media(max-height:620px){.victory-stats{margin-top:10px;padding:8px 3px 9px}.victory-stat strong{font-size:26px}.victory-stat dt{font-size:11px}}

/* Keep the victory logo large; fit the surrounding results by placement. */
.victory-actions{bottom:3%}
@media(max-height:620px){.victory-kicker{display:none}}
.victory-panel[data-compact=true] .victory-kicker{display:none}
.victory-panel[data-compact=true] .victory-count{font-size:11px}
.victory-panel[data-compact=true] .victory-count strong{font-size:20px}
.victory-panel[data-compact=true] .victory-stats{margin-top:8px;padding:6px 3px 7px}
.victory-panel[data-compact=true] .victory-stat strong{font-size:24px}
.victory-panel[data-compact=true] .victory-stat dt{font-size:11px}
.victory-panel[data-compact=true] .victory-stat dd{margin-top:3px}
.victory-panel[data-compact=true] .victory-actions{bottom:1%}
.victory-panel[data-compact=true] #victory-next{min-height:42px;padding:10px 4px}
.victory-panel[data-compact=true] .victory-back{min-height:32px;padding:7px}

.boss-status{position:absolute;left:18%;top:27%;bottom:auto;width:64%;padding:7px 9px;background:#132235e8;border:1px solid #ffca7877;border-radius:7px;text-align:center;color:#fff0ce;text-shadow:0 1px 2px #051321;pointer-events:none}
.boss-status b{display:block;font-size:14px;line-height:1.2}.boss-status>span{display:block;height:6px;background:#554149;border-radius:2px;margin:5px 0}.boss-status i{display:block;height:100%;background:#ffb976;border-radius:2px}.boss-status small{display:block;font-size:12px;line-height:1.35;white-space:pre-line;color:#ddedfa}

/* A brief upper-field entrance keeps drag control and rescue routes visible. */
.boss-intro{position:absolute;top:26%;left:12%;width:76%;padding:9px 10px 7px;background:#102239e8;border-block:2px solid #ffce78;box-shadow:0 4px 16px #08152180;text-align:center;pointer-events:none;color:#fff0ce}
.boss-intro img{display:block;height:auto;image-rendering:pixelated;margin-inline:auto;max-width:100%}
.boss-alert-art{width:86%}.boss-name-art{width:76%;margin-top:4px}.boss-intro[data-phase=alert] .boss-name-art{visibility:hidden}
.boss-intro p{font-size:12px;line-height:1.3;margin:5px 0 0;color:#fff4d5}
.boss-marker{position:absolute;transform:translate(-50%,-100%);padding:2px 5px;background:#102039;border:1px solid var(--boss-color,#ffcf78);border-radius:3px;font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.5px;color:#fff4cb;box-shadow:0 1px 3px #051221;pointer-events:none}
.boss-marker>span{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:0;height:0;border-inline:4px solid transparent;border-top:5px solid var(--boss-color,#ffcf78)}
@keyframes boss-land{0%,100%{transform:translate(0)}25%{transform:translateY(2px)}65%{transform:translateY(-1px)}}
.cabinet.boss-landing{animation:boss-land .22s ease-out}
@media(prefers-reduced-motion:reduce){.cabinet.boss-landing{animation:none}}

.boss-fled{position:absolute;top:27%;left:8%;width:84%;padding:10px 9px;background:#102239e8;border-block:2px solid #ffce78;z-index:8;pointer-events:none;text-align:center}.boss-fled img{width:100%;height:auto;display:block;image-rendering:pixelated}

/* A short recovery speech bubble never captures movement input. */
.play-coach[data-phase=heal]{top:26%;bottom:auto;width:82%}
.play-coach[data-phase=heal] p{position:relative;background:#18273bf5;border:1px solid #ffc0d7aa;color:#fff1f6;font-size:14px;box-shadow:0 3px 12px #06142377}
.play-coach[data-phase=heal] p::after{content:"";position:absolute;bottom:-7px;left:50%;width:12px;height:12px;background:#18273b;border-right:1px solid #ffc0d7aa;border-bottom:1px solid #ffc0d7aa;transform:translateX(-50%) rotate(45deg)}

/* Time stays to the right of the speaker, even in shorter Safari viewports. */
.time-panel{position:absolute;top:1.5%;left:auto;right:16%;width:24%;min-height:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;background:#102334ed;border:1px solid #b3d5e638;border-radius:9px;color:#fff4ce}
.time-panel .time-label{font-size:10px;color:#dbe8ee}
.time-panel .clock{position:static;font-size:clamp(16px,7cqw,34px);line-height:1;font-weight:700}
.aid-cutin{position:absolute;left:8%;top:19%;width:84%;height:128px;display:grid;grid-template-columns:34% 1fr;align-items:center;gap:6px;overflow:hidden;border-block:2px solid #ffe599;background:repeating-linear-gradient(-15deg,#1d3852f5 0px,#1d3852f5 10px,#244766f5 10px,#244766f5 12px);box-shadow:0 4px 15px #06142388;pointer-events:none;animation:aid-cutin-in .2s ease-out}
.aid-cutin canvas{height:100%;width:100%;object-fit:contain;image-rendering:pixelated}
.aid-cutin strong{display:block;font-size:clamp(16px,4.6cqw,22px);line-height:1.4;color:#fff2c7;text-shadow:0 2px 1px #061423}
.aid-cutin span{display:block;font-size:12px;margin-top:7px;color:#ffe393}
.play-coach[data-phase=aid]{top:26%;bottom:auto;width:82%}
.play-coach[data-phase=aid] p{border:1px solid #ffdf87aa;background:#263345ed;color:#fff4cd}
@keyframes aid-cutin-in{from{transform:translateX(-25%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.aid-cutin{animation:none}}

/* Boss announcements take priority over simultaneous field messages. */
.boss-intro{z-index:2}

@container(max-width:300px){.hud .pause{width:32px;height:32px;font-size:20px}}

/* Vehicle-side HUD, chosen in the layout study. */
.cabinet{--hud-top:29%}
.side-panel{width:9%;height:33%;padding-inline:0;grid-template-rows:32px minmax(0,1fr) 21px}
.heart{font-size:clamp(13px,4.2cqw,20px)}
#crowd-note{display:none}
.hud .mission,.hud .time-panel{top:10%;width:18%;height:66px;min-height:0;border-radius:7px;padding:5px 2px;background:#102434a3;border:0;box-shadow:0 1px 6px #06142355;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.hud .mission{left:1.8%}.hud .time-panel{left:auto;right:1.8%}
.hud .mission .label,.hud .time-panel .time-label{font-size:11px;color:#e6f1f5}
.hud .mission .value{display:grid;justify-items:center;gap:1px;line-height:1.1}
.hud .mission .value b{font-size:clamp(18px,6cqw,25px);font-weight:700;color:#ffe193}
.hud .mission .value small{font-size:12px;color:#e7eef3;font-weight:500}
.hud .time-panel .clock{font-size:clamp(16px,5.5cqw,24px);line-height:1.15}
/* Contrast follows the glyphs and the narrow meter; no surrounding panel. */
.side-panel{--meter-ink:-1px -1px 0 #061323,1px -1px 0 #061323,-1px 1px 0 #061323,1px 1px 0 #061323,-2px 0 1px #061323,2px 0 1px #061323,0 -2px 1px #061323,0 2px 1px #061323;text-shadow:var(--meter-ink),0 0 3px #dbf7ff44}
.side-head b{font-size:clamp(12px,3.5cqw,16px);font-weight:700;color:#fffef9;-webkit-text-stroke:.6px #061323;paint-order:stroke fill}
.side-head span,.side-value{font-weight:600;color:#fffef9;-webkit-text-stroke:.4px #061323;paint-order:stroke fill}
.heart{color:#ffa9c3;-webkit-text-stroke:.7px #071526;paint-order:stroke fill;text-shadow:-1px 0 0 #071526,1px 0 0 #071526,0 -1px 0 #071526,0 1px 0 #071526,0 0 3px #ffd0df88}
.heart.empty{color:#a0acbc;text-shadow:-1px 0 0 #071526,1px 0 0 #071526,0 -1px 0 #071526,0 1px 0 #071526}
.xp-panel .meter{width:8px;background:#102333c9;box-shadow:0 0 0 1px #071526,0 0 0 2px #d9fbff88,0 0 4px #85eaff44}
.xp-panel .meter span{background:linear-gradient(90deg,#6be4ed,#c7ffff,#67dce8)}

.xp-panel .side-value[data-large=true]{flex-direction:column;gap:0;line-height:1}.xp-panel .side-value[data-large=true] b{font-size:12px}.xp-panel .side-value[data-large=true] span{font-size:10px}

/* Pixel hearts share the recovery pickup silhouette and keep acquired slots only. */
.heart{height:100%;--heart-fill:#ef487f;--heart-shade:#bc2858;--heart-light:#fb78a6;--heart-glint:#ffc6da;--heart-rim:none;text-shadow:none;-webkit-text-stroke:0}
.heart svg.pixel-heart{display:block;width:100%;height:100%;max-width:22px;max-height:18px;image-rendering:pixelated;filter:drop-shadow(0 0 1.5px #ffc8dd55)}
.pixel-heart-outline{fill:#071526}.pixel-heart-fill{fill:var(--heart-fill)}.pixel-heart-shade{fill:var(--heart-shade)}.pixel-heart-light{fill:var(--heart-light)}.pixel-heart-glint{fill:var(--heart-glint)}.pixel-heart-rim{fill:var(--heart-rim)}
.heart.empty{--heart-fill:#11283db3;--heart-shade:#11283db3;--heart-rim:#91a4bc}
.heart.empty .pixel-heart-light,.heart.empty .pixel-heart-glint{display:none}.heart.empty svg.pixel-heart{filter:none}

/* A dedicated continue scene follows the collapse in the unchanged field. */
body[data-game-state=defeat] .app::after{display:none!important}
body[data-game-state=lose] .app::after{background:#091425}
body[data-game-state=lose] #overlay{background:#091425}
#end-panel.defeat-screen{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 33%,#253454 0,#101f36 42%,#091425 80%);display:grid;place-items:center;text-align:center;overflow:auto}
.defeat-scene{width:86%;display:flex;flex-direction:column;align-items:center;gap:0;animation:defeat-reveal .45s ease-out}
#end-kicker{display:none}
#defeat-portrait{width:100%;height:auto;aspect-ratio:240/128;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 8px 0 #050e1e60)}
#end-title{width:100%;margin:10px 0 0;line-height:1}
#end-title img{display:block;width:100%;height:auto;image-rendering:pixelated}
#end-reason{color:#b0bed1;font-size:14px;margin:14px 0 4px;line-height:1.4}
.defeat-screen #result{width:100%;margin:16px 0 23px;padding:16px 0;gap:5px;border-color:#a1b8d42b}
.defeat-screen #result strong{color:#e5eefc;font-size:clamp(18px,6cqw,28px);font-weight:650}
.defeat-screen #result small{font-size:11px;color:#b0bed1;display:block;margin-top:6px;white-space:nowrap}
.defeat-screen .end-actions{width:100%;max-width:340px;display:grid;grid-template-columns:1fr;gap:9px;transition:opacity .25s}
.defeat-screen .primary{background:#d9e6fa;color:#14253d;font-size:16px;font-weight:650;min-height:49px}
.defeat-screen .secondary{font-size:13px;min-height:40px;background:transparent;border:0;color:#b9c8dc}
.defeat-screen[data-phase=reveal] .end-actions{opacity:0;pointer-events:none}
@keyframes defeat-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-height:650px){#defeat-portrait{width:80%}#end-reason{margin:9px 0 0;font-size:12px}.defeat-screen #result{margin:11px 0 14px;padding:10px 0}.defeat-screen .primary{min-height:42px}.defeat-screen .secondary{min-height:33px}}
@media(prefers-reduced-motion:reduce){.defeat-scene{animation:none}}

/* The final extension retains all 150 supporters, opening a separate upper arena. */
.final-interlude{position:absolute;top:53%;left:7%;width:86%;padding:17px 12px;background:#112237ee;border-block:2px solid #ffde87;text-align:center;pointer-events:none;z-index:9;box-shadow:0 5px 24px #06142377}
.final-interlude strong{color:#ffe599;font-size:clamp(18px,5.4cqw,25px)}.final-interlude p{color:#cbd9e7;font-size:13px;margin:9px 0 0}.final-interlude img{width:100%;height:auto;display:block;image-rendering:pixelated}
.final-interlude[data-phase=surprise]{border-color:#f15a83;background:#10192bf5}.final-interlude[data-phase=surprise] p{color:#ed9fbc}
body[data-game-state=final-reveal] .app::after{display:none!important}

/* Final-stage cinematics preserve the original crowd, then return in light. */
body[data-game-state=final-celebrate] .app::after,body[data-game-state=final-regional-clear] .app::after,body[data-game-state=final-return] .app::after{display:none!important}
.final-veil{position:absolute;inset:0;background:#060a12;opacity:0;pointer-events:none;z-index:10}.final-veil[data-light=white]{background:#fff}
.final-interlude{z-index:11}.final-interlude[data-phase=regional-clear]{top:39%;padding:20px 8px;background:#112337f5}.final-interlude[data-phase=regional-clear] img+img{margin-top:13px}.final-interlude[data-phase=group]{top:25%;padding:12px 8px}.regional-names{display:grid;gap:7px;margin-top:10px}.regional-names img{width:72%}
.victory-panel[data-interrupted=true] .victory-actions,.victory-panel[data-interrupted=true] .victory-stats,.victory-panel[data-interrupted=true] .victory-kills-note{display:none!important}
.victory-kills-note{font-size:11px;line-height:1.45;color:#fff1c5;margin:8px 5% 0;text-shadow:0 2px 2px #071526}
body[data-final-scene=arena] #boss-status{top:43%;left:20%;width:60%}body[data-final-scene=arena] #boss-intro{top:42%}
@media(max-height:620px){.victory-kills-note{font-size:10px;margin-top:5px}}

/* Keep final-boss health entirely on the audience side of the battle boundary. */
body[data-final-scene=arena] #boss-status{top:42.5%;left:11%;width:78%;height:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:0 2px 2px #071321,1px 0 1px #071321,-1px 0 1px #071321}
body[data-final-scene=arena] #boss-status b{font-size:13px;line-height:16px;color:#fff3e9}
body[data-final-scene=arena] #boss-status>span{height:8px;margin:3px 0 0;border:1px solid #131c29;background:#422938;box-shadow:0 1px 2px #071321;border-radius:0}
body[data-final-scene=arena] #boss-status i{background:linear-gradient(#ff7b99,#e4466c);border-radius:0}
body[data-final-scene=arena] #boss-status small,body[data-final-scene=arena] #boss-marker{display:none!important}
body[data-game-state=final-reveal] #hud,body[data-game-state=final-reveal] #battle-loadout{display:none!important}
.final-interlude[data-phase=regional-clear]{top:17%;left:10%;width:80%;padding:7px 8px;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:7px;text-align:left;background:#142d42e8;border-color:#e8c67d}
.final-speaker{width:52px;height:57px;image-rendering:pixelated;display:block}.final-speaker-words{min-width:0}.final-speaker-words img{width:100%}.final-speaker-words img+img{margin-top:8px}
.final-interlude[data-phase=taunt]{top:auto;bottom:56.25%;left:5%;width:90%;padding:10px 9px;background:#172137f5;border-color:#e578a4}.final-interlude[data-phase=taunt] strong{font-size:13px;color:#ff9bbc}.final-interlude[data-phase=taunt] p{font-size:17px;line-height:1.55;margin:4px 0 0;color:#fff3ee;font-weight:650}
.final-interlude[data-phase=battle-start]{top:48%;left:10%;width:80%;background:#112237d9;border-color:#ffe19c}
.final-landing #game{animation:final-landing-shake .25s ease-out}
@keyframes final-landing-shake{0%{transform:translate(0,0)}20%{transform:translate(3px,2px)}40%{transform:translate(-3px,-1px)}60%{transform:translate(2px,1px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.final-landing #game{animation:none}}

.victory-panel[data-stage="5"] #victory-title{display:none}

body[data-game-state=final-return] #hud,body[data-game-state=final-return] #battle-loadout{display:none!important}
.final-interlude[data-phase=white-message]{top:38%;left:8%;width:84%;padding:0;background:none;border:0;box-shadow:none;color:#233b50}
.final-interlude[data-phase=white-message] img{height:34px;width:auto;max-width:100%;margin-inline:auto}.final-interlude[data-phase=white-message] img+img{margin-top:10px}
.final-interlude[data-phase=white-message] p{font-size:15px;line-height:1.8;font-weight:650;color:#3c5468;margin-top:25px;text-shadow:none}
/* Ending stills fill the frame; their motion follows the shared film clock. */
.ending-layer{position:absolute;inset:0;z-index:12;pointer-events:none;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif}
.ending-controls{position:absolute;top:1.8%;right:3%;display:flex;gap:5px;z-index:4;pointer-events:auto}.ending-controls button{border:1px solid #fff8;background:#163a55d9;border-radius:5px;padding:7px 9px;font-size:11px;min-height:33px;color:#fff}
.ending-still{position:absolute;inset:0;margin:0;overflow:hidden;background:#153d59;pointer-events:none}.ending-still canvas{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transform-origin:center;will-change:transform}
.ending-caption{position:absolute;top:54%;left:8%;width:84%;transform:translateY(-50%);z-index:2;text-align:center;padding:17px 10px;background:linear-gradient(90deg,#15324800,#153248d9 17%,#153248d9 83%,#15324800);border-block:1px solid #ffe3a455;color:#fff0bd;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:700;font-size:clamp(17px,5cqw,25px);letter-spacing:.06em;line-height:1.9;white-space:pre-line;text-shadow:0 1px 3px #10283d}
.ending-lyrics{position:absolute;bottom:7%;left:7%;width:86%;z-index:3;text-align:center;color:#fff;font-size:clamp(13px,4cqw,19px);font-weight:550;line-height:1.6;white-space:pre-line;text-shadow:0 2px 3px #071d34,1px 0 2px #071d34,-1px 0 2px #071d34;pointer-events:none}
.ending-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#1e485366}.ending-progress i{display:block;height:100%;background:#fff0a3}
.ending-results{position:absolute;inset:0;display:grid;place-items:safe center;pointer-events:auto;padding:12% 5%;overflow:auto;outline:0}.ending-result-card{width:100%;padding:22px 16px;background:#12334ef2;border:1px solid #ade6ef99;border-radius:10px;text-align:center;box-shadow:0 8px 24px #1031424d}.ending-kicker{font-size:11px;letter-spacing:.1em;color:#8ce9e5;margin:0 0 12px}.ending-result-card h2{font-size:19px;line-height:1.5;margin:0 0 17px;color:#fff1b0}#ending-total-label{font-size:13px;margin:0 0 7px}#ending-total{font-size:37px;line-height:1.25;color:#fff1b0}#ending-total-note{font-size:11px;line-height:1.6;color:#d5e8ee;margin:12px 0}#ending-stage-results{margin:16px 0}#ending-stage-results>div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #9fd0dd33;font-size:12px}.ending-result-actions{display:grid;gap:8px;margin-top:17px}.ending-result-actions button{padding:11px;border-radius:5px;border:1px solid #bbe9ea55;background:#ffffff0d;color:#fff;font-size:13px}.ending-result-actions button:first-child{background:#86e8e0;color:#12334e;border:0;font-weight:600}

.arcade-title .title-disclaimer{position:absolute;bottom:1.2%;left:6%;width:88%;margin:0;padding:3px 5px;text-align:center;font-size:clamp(9px,2.6cqw,11px);line-height:1.5;color:#e4edf2;background:#071421b8;text-shadow:0 1px 2px #071421}

.ending-telop{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#07111d;padding:12% 7%;text-align:center;pointer-events:none}.ending-film-credit{margin:0;color:#fff0bd;line-height:1.9}.ending-film-credit span{display:block;font-size:14px;letter-spacing:.25em;margin-bottom:18px}.ending-film-credit strong{display:block;font-size:clamp(17px,4.9cqw,24px);font-weight:650;letter-spacing:.04em}.ending-film-notice{margin:0;color:#e8edf1;font-size:clamp(12px,3.5cqw,17px);font-weight:500;line-height:2.2}

.ending-logo{position:absolute;top:33%;left:6%;width:88%;z-index:2;pointer-events:none;filter:drop-shadow(0 3px 0 #071628) drop-shadow(0 7px 5px #07162890)}.ending-logo img{display:block;width:100%;height:auto;image-rendering:pixelated}

/* v69: mode choice stays on the title; partial hearts reflect scaled damage. */
.arcade-title .logo-heading{top:19%;height:25%}
.arcade-title .push-start{top:44%;height:8%}
.arcade-title .title-help{padding:10px;max-height:37%;overflow-y:auto}
.difficulty-picker{min-width:0;margin:0 0 9px;padding:0 0 8px;border:0;border-bottom:1px solid #b1dbe933}
.difficulty-picker legend{padding:0;margin-bottom:5px;font-size:11px;color:#e9f4fb;font-weight:700}
.difficulty-options{display:flex;gap:5px}
.difficulty-options button{flex:1;min-width:0;min-height:36px;padding:6px 3px;border:1px solid #9ab8ca;border-radius:5px;background:#142d41;color:#edf5fa;font-size:clamp(10px,3.1cqw,12px);font-weight:700;white-space:nowrap}
.difficulty-options button[aria-pressed="true"]{border-color:#ffe59e;background:#284d65;color:#ffe59e;box-shadow:inset 0 -2px #ffe59e}
.difficulty-options button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.arcade-title .controls-heading{margin-bottom:3px;font-size:12px}
.arcade-title .controls{font-size:11px;line-height:1.5}
.arcade-title .title-options{margin-top:5px}
.arcade-title .title-options #sound{min-height:30px;padding:4px 14px}
.pause-difficulty{margin:0 0 4px;font-size:12px;color:#ffe59e}
.heart.partial{position:relative}.heart.partial>.heart{position:absolute;inset:0}