/* Production instrument skins: live readouts in the generated frame apertures. */
#play{height:100svh;height:100dvh;min-height:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:#08090a;overflow:hidden}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.instrument-panel{position:relative;flex:0 0 auto;width:100%;aspect-ratio:2048/520;overflow:hidden;background:#08090a;z-index:4;container-type:inline-size}
.instrument-art{position:absolute;left:0;top:-14.6153846%;width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.score-display{position:absolute;left:6.2%;top:14%;width:43.5%;height:21%;display:flex;justify-content:space-between;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.score-display small{font:10px/1 monospace;letter-spacing:.04em;color:#eee9d9}
#score{font:700 20px/1 'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#ff3347;text-shadow:0 0 7px #ff253a88}
#lives{all:unset;position:absolute;left:58.4%;top:15%;width:19.4%;height:21%;display:flex;align-items:center;justify-content:center;gap:5%;filter:drop-shadow(0 0 3px #e5103444)}
#lives svg{display:block;width:28%;height:100%;overflow:visible}
#lives svg[data-alive=false]{opacity:.18;filter:grayscale(1)}
#pause{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:85.6%;top:7%;width:10.8%;height:34%;min-height:30px;display:flex;justify-content:center;align-items:center;gap:14%;touch-action:manipulation}
#pause span{display:block;width:10%;height:38%;background:linear-gradient(90deg,#e4d6bb,#fcf9ed 40%,#8b8277);box-shadow:1px 1px 2px #000}
#stage{all:unset;box-sizing:border-box;position:absolute;left:4.8%;top:53%;width:12.5%;height:11%;display:grid;place-items:center;font:9px/1 'Arial Narrow',monospace;color:#ff9986;letter-spacing:-.03em;white-space:nowrap}
#boss-health,#xp{position:absolute;appearance:none;-webkit-appearance:none;border:0;border-radius:1px;overflow:hidden;display:block;margin:0;background:#08090b;box-shadow:inset 0 0 3px #000}
#boss-health{left:20.55%;top:53.6%;width:74.3%;height:9.4%}
#boss-health::-webkit-progress-bar,#xp::-webkit-progress-bar{background:linear-gradient(#060707,#17191a,#060607)}
#boss-health::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 9px,#21030b 9px 10.5px),linear-gradient(#ff8c89,#f3283f 38%,#c80f23 78%,#761020);box-shadow:0 0 7px #ff2239}
#boss-health::-moz-progress-bar{background:repeating-linear-gradient(90deg,transparent 0 9px,#21030b 9px 10.5px),linear-gradient(#ff8c89,#f3283f 38%,#c80f23 78%,#761020)}
#level{position:absolute;left:5%;top:77.5%;width:12%;height:10%;display:grid;place-items:center;margin:0;color:#fff6de;font:700 11px/1 monospace;white-space:nowrap}
#xp{left:20.55%;top:78.5%;width:58.3%;height:9%}
#xp::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 9px,#124826 9px 10.5px),linear-gradient(#edffe3,#6fff8c 40%,#21ba68 75%,#146932);box-shadow:0 0 7px #66ff88}
#xp::-moz-progress-bar{background:repeating-linear-gradient(90deg,transparent 0 9px,#124826 9px 10.5px),linear-gradient(#edffe3,#6fff8c 40%,#21ba68 75%,#146932)}
#xp-label{position:absolute;left:83.3%;top:77.5%;width:11%;height:10%;display:grid;place-items:center;font:10px/1 monospace;color:#f3f1e6;white-space:nowrap;min-width:0;text-align:center}
#arena{flex:1 1 0;min-height:0;position:relative;overflow:hidden;border-inline:1px solid #493e3b}
#game{width:100%;height:100%;display:block;touch-action:none}
#announcement.reward-notice{inset:23% 2% auto;max-width:none;width:96%;margin:0;font-size:0;text-align:center;animation:reward-arrive .3s ease-out;text-shadow:0 2px 4px #000}
#announcement.reward-notice img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;filter:drop-shadow(0 3px 6px #0007)}
#announcement.reward-notice small{font:10px/1.5 monospace;letter-spacing:.06em;display:inline-block;max-width:90%;padding:4px 8px;margin-top:-3%;background:#060708bb;color:#fff7df;border:0;border-radius:0}
#combo{top:8px;right:10px;font:17px/1.2 Condensed,Impact,sans-serif;color:#ffdf93;text-shadow:0 2px 2px #160800,0 0 6px #c57b2a}
#pause:focus-visible,#special:focus-visible,#bomb:focus-visible{outline:2px solid #f6df94;outline-offset:1px}
@keyframes reward-arrive{from{transform:translateY(5px) scale(.75);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@supports(font-size:1cqw){.score-display small{font-size:2.6cqw}#score{font-size:5.2cqw}#stage{font-size:2.3cqw}#level{font-size:2.9cqw}#xp-label{font-size:2.6cqw}}
@media(prefers-reduced-motion:reduce){#announcement.reward-notice{animation:none}#charge-arc{transition:none}}
/* Pin the whole play surface, so a scrolled title page cannot crop the HUD. */
#play{position:fixed;inset:0;width:min(100%,520px);margin-inline:auto;z-index:6}
#overlay{position:fixed;inset:0;width:min(100%,520px);margin-inline:auto;z-index:10}
/* Compact loadout controls; gameplay keeps its unobstructed swipe surface. */
.loadout{margin:18px 0 24px;padding:18px 0;border-top:1px solid #ffffff45;color:#fff8e8;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif}
#weapon-name{font-size:13px;letter-spacing:.04em;margin:0 0 16px}.loadout-label{font-size:10px;letter-spacing:.13em}.special-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.special-options button{padding:11px 5px;border:1px solid #fff6;border-radius:9px;background:transparent;color:#fff8e8;cursor:pointer;min-height:50px}.special-options button[aria-pressed=true]{background:#101015;border-color:#fff8e8;box-shadow:inset 0 -3px #b8f4ed}.special-options b,.special-options small{display:block}.special-options b{font-size:14px}.special-options small{font-size:9px;letter-spacing:.12em;margin-top:4px}#special-description{font-size:12px;line-height:1.6;min-height:20px;margin:8px 0 0}.special-options button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.combat-readout{position:absolute;z-index:2;top:8px;left:10px;max-width:55%;pointer-events:none;color:#fff6e5;text-shadow:0 1px 3px #000;font:9px/1.6 monospace;opacity:.8}.combat-readout span,.combat-readout small{display:block}.combat-readout small{font-size:8px;color:#b7d3dc}
#result-art{display:block;width:100%;max-height:190px;object-fit:contain;margin:4px auto 12px}#result-art[hidden]{display:none}
/* v13: single authoritative component, no inherited positions or text styles. */
#play .action-rail{position:absolute;z-index:3;left:8px;bottom:58px;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
#play .action-rail .rail-charge{width:60px;display:grid;grid-template-columns:1fr auto;gap:3px;color:#fffae9;font:700 9px/1.3 Arial,sans-serif;text-shadow:0 1px 3px #000}
#play .rail-charge strong{font:700 9px/1.3 monospace;color:#bdfff1}
#play .rail-charge i{grid-column:1/-1;height:3px;background:#03060acc;border-radius:2px;overflow:hidden}
#play #rail-charge-fill{display:block;width:0%;height:100%;background:linear-gradient(90deg,#fd90db,#9beaff,#aeffcc,#ffeaa0);box-shadow:0 0 5px #b8fff2}
#play .action-rail button{all:unset;box-sizing:border-box;position:relative;display:block;width:64px;height:67px;flex:none;cursor:pointer;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;isolation:isolate}
#play .action-rail button img{position:absolute;display:block;top:0;left:8px;width:48px;height:48px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #000a)}
#play .action-rail button b{all:unset;box-sizing:border-box;position:absolute;display:block;left:0;right:0;top:49px;height:16px;border:1px solid #b6c0cf55;border-radius:4px;background:#080b12dc;color:#fff8e5;font:700 10px/14px Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;text-align:center;letter-spacing:0;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}
#play .action-rail button small{all:unset;box-sizing:border-box;position:absolute;display:block;right:0;top:0;min-width:16px;border-radius:4px;background:#101422dd;color:#fff6dc;font:700 8px/13px Arial,sans-serif;text-align:center;pointer-events:none}
#play .action-rail button small:empty{display:none}
#play .action-rail #bomb{width:58px;height:61px;margin:3px 0 0}
#play .action-rail #bomb img{width:42px;height:42px;left:8px}
#play .action-rail #bomb b{top:43px}
#play .action-rail #bomb small{top:0;right:0;background:#ffedc9;color:#141012;padding:1px 3px}
#play .action-rail #bomb-count{all:unset;font:inherit}
#play .action-rail .mini-charge{display:none}
#play .action-rail button:disabled{opacity:.8;cursor:default}
#play .action-rail button:disabled img{filter:saturate(.5) brightness(.75) drop-shadow(0 2px 2px #000)}
#play .action-rail button.ready img{filter:drop-shadow(0 0 6px #baffff) brightness(1.14);animation:ability-ready 1.6s ease-in-out infinite}
#play .action-rail button.ready b{border-color:#d0ffea;background:#11282be8;color:#fff}
#play .action-rail button.firing img{filter:drop-shadow(0 0 8px #ffc6ff) brightness(1.3);animation:ability-ready .9s ease-in-out infinite}
#play .action-rail button.firing b{border-color:#ffbef5;color:#fff;background:#3b193ee8}
#play .action-rail button:focus-visible{outline:2px solid #fff4cb;outline-offset:2px;border-radius:8px}
#play .action-rail button:active:not(:disabled){transform:scale(.94)}
#announcement.ability-notice{inset:20% 6% auto;text-align:center;pointer-events:none;font:inherit;letter-spacing:0;animation:ability-arrive .22s ease-out}
#announcement.ability-notice span{display:block;font:26px/1.1 Condensed,Impact,sans-serif;color:#fff9ed;text-shadow:0 2px 0 #1c0927,0 0 10px var(--ability-color),0 0 22px var(--ability-color)}
#announcement.ability-notice b{display:block;margin:7px 0;font:900 30px/1.1 Arial,sans-serif;color:#fff;text-shadow:0 2px 0 #20151d,0 0 12px var(--ability-color)}
#announcement.ability-notice small{display:inline-block;background:#070b16dd;color:#fff6df;border-bottom:1px solid var(--ability-color);padding:6px 9px;font:10px/1.6 Arial,sans-serif;letter-spacing:0;max-width:95%;margin:0}
@keyframes ability-ready{50%{filter:drop-shadow(0 0 9px #edbaff) brightness(1.35)}}
@keyframes ability-arrive{from{transform:translateY(9px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@media(max-height:600px){#play .action-rail{bottom:18px;gap:3px;width:58px;left:6px}#play .action-rail button{width:58px;height:57px}#play .action-rail button img{width:40px;height:40px;left:9px}#play .action-rail button b{top:41px;height:15px;font-size:9px;line-height:13px}#play .action-rail #bomb{height:52px;width:52px}#play .action-rail #bomb img{width:36px;height:36px;left:8px}#play .action-rail #bomb b{top:37px}#play .action-rail .rail-charge{width:56px}}
@media(prefers-reduced-motion:reduce){#play .action-rail button img,#announcement.ability-notice{animation:none!important}}

/* v15: cinematic screens separate the portrait, question and live action controls. */
#play[data-cinematic=true] .instrument-panel{display:none}
#play[data-cinematic=true] .action-rail,#play[data-cinematic=true] .combat-readout,#play[data-cinematic=true] #announcement,#play[data-cinematic=true] #combo{visibility:hidden;pointer-events:none}
#play[data-cinematic=true] .action-rail button{pointer-events:none}
#cinematic-pause{position:absolute;z-index:5;top:8px;right:8px;width:40px;height:40px;border:1px solid #fff2;background:#08030ba8;color:#fff0d3;font:18px/1 monospace;border-radius:50%;touch-action:manipulation}
#ending-actions{position:absolute;z-index:5;bottom:8px;left:8%;right:8%;text-align:center}
#ending-actions small{display:block;font:9px/1.4 monospace;color:#dac8ae;letter-spacing:.08em;margin-bottom:7px}
#ending-actions>div{display:flex;justify-content:center;gap:20px}
#ending-actions button{border:0;border-bottom:1px solid #8b4838;background:#0a0308a8;min-height:36px;padding:4px 12px;font:12px/1.4 Arial,sans-serif;color:#fff1d5;touch-action:manipulation}
#preview-note{padding:12px;border:1px solid #fff5;background:#10060d;color:#fff1d5;font:13px/1.6 Arial,sans-serif}
#preview-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 16px}
#preview-tools button{border:1px solid #9e565c;background:#17070feb;color:#fff1d5;padding:7px 8px;min-height:36px;font:10px/1.2 Arial,sans-serif;border-radius:4px;touch-action:manipulation}
@media(max-height:500px){#ending-actions{bottom:4px;left:45%;right:3%}#ending-actions small{margin-bottom:2px}#ending-actions>div{gap:8px}#ending-actions button{min-height:30px}}



/* The last card is readable at full width; short screens can scroll the card. */
#ending-card-view{position:absolute;inset:0;z-index:4;overflow-y:auto;overscroll-behavior:contain;background:#08030b;padding:8px 2.5% 90px;touch-action:pan-y}
#ending-card-view img{display:block;width:100%;height:auto;margin:0 auto}
#play[data-cinematic=true] #ending-actions{left:0;right:0;bottom:0;padding:14px 8% 8px;background:linear-gradient(transparent,#08030bf5 24%)}