@font-face{font-family:ui;src:local("Arial")}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080e15;color:#eaf7f4;font-family:ui,system-ui,sans-serif}body{display:grid;place-items:center;overflow:hidden}#app{position:relative;width:min(100vw,1280px);aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#0a1118;border:1px solid #23414a;box-shadow:0 28px 80px #02060a}canvas{display:block;width:100%;height:100%;background:#0b141b}.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}.start-screen{}.start-panel{width:100%;height:100%;padding:9% 8%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(90deg,rgba(4,10,16,.94) 0%,rgba(4,10,16,.7) 42%,rgba(4,10,16,.15) 78%) center/cover}.eyebrow{font-size:12px;letter-spacing:.22em;color:#84f5dc;margin:0 0 16px}.start-panel h1{font-size:clamp(42px,7vw,92px);line-height:.88;letter-spacing:-.06em;margin:0;color:#e8fffa;text-shadow:0 0 24px #4ddbc080}.start-panel h1 span{color:#ff9d60}.tagline{max-width:360px;color:#a9c6c3;line-height:1.6}.primary,.link-button{font:inherit;cursor:pointer}.primary{border:1px solid #8cf9db;background:#b6ffe6 url("production/runtime105/textures/ui.button_primary.png") center/100% 100% no-repeat;color:#071318;padding:14px 32px;font-weight:800;letter-spacing:.08em;clip-path:polygon(0 0,96% 0,100% 20%,100% 100%,4% 100%,0 80%);box-shadow:0 0 24px #55f4d86b}.primary:hover{background:#fff}.link-button{border:0;background:transparent;color:#89aaa8;padding:12px 0}.start-actions{display:flex;align-items:center;gap:20px;margin-top:48px;color:#66807e;font-size:12px}.modal-screen{align-items:center;justify-content:center;background:rgba(4,9,14,.75);backdrop-filter:blur(4px)}.modal-panel{width:min(940px,84%);padding:38px 42px;background:linear-gradient(140deg,#14242dee,#0e1820ee),url("production/runtime105/textures/ui.panel_large.png") center/100% 100% no-repeat;border:1px solid #3f7777;box-shadow:0 24px 80px #02070ccc}.modal-panel h2{font-size:38px;margin:0 0 6px}.muted{color:#93adaa}.upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.upgrade-card{padding:22px 20px;min-height:200px;text-align:left;cursor:pointer;background:#12232a url("production/runtime105/textures/ui.upgrade_card.png") center/100% 100% no-repeat;border:1px solid #355b5e;color:#e9fff8;transition:.2s}.upgrade-card:hover{transform:translateY(-4px);border-color:#a2ffe2;box-shadow:0 12px 30px #53dfba2b}.upgrade-card .icon{font-size:34px;color:#ffaf69;height:46px;display:flex;align-items:center}.upgrade-icon-img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 10px #ffad6d66)}.upgrade-card h3{margin:16px 0 8px}.upgrade-card p{color:#9db9b5;line-height:1.45;font-size:14px}.result-panel{text-align:center;background:linear-gradient(140deg,#16252f,#0e1820),url("production/runtime105/textures/ui.panel_large.png") center/100% 100% no-repeat}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}.result-stats div{border:1px solid #305356;background:#0b171dcb;padding:14px}.result-stats b{display:block;font-size:24px;color:#b6ffe6}.result-stats span{font-size:11px;color:#8aa7a2}.hud{position:absolute;inset:0;pointer-events:none;display:none}.hud.active{display:block}.hud-top-left,.hud-top-right,.run-readout,.xp-wrap,.ability-bar,.toast{position:absolute}.hud-top-left{top:24px;left:28px;width:280px}.hud-top-right{top:28px;right:28px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:#b6ffe6}.hud-top-right span:first-child{color:#ffb17b}.run-readout{top:20px;left:50%;transform:translateX(-50%);text-align:center;letter-spacing:.16em}.run-readout span{font-size:12px;color:#ffb17b}.run-readout b{display:block;font-size:30px}.run-readout small{color:#85aaa5;font-size:11px}.stat-line{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}.label{width:32px;color:#a1bdb9}.meter{width:170px;height:9px;background:#203237;border:1px solid #406163}.meter i,.xp-track i{display:block;height:100%;background:linear-gradient(90deg,#ff8768,#ffc26b);width:100%}.xp-wrap{left:50%;bottom:28px;transform:translateX(-50%);width:46%;text-align:center}.xp-track{height:9px;background:#182c32;border:1px solid #4a7471}.xp-track i{background:linear-gradient(90deg,#62dbc0,#c4ff92);width:0}.xp-wrap span{display:block;font-size:11px;color:#9ebbb5;margin-top:5px}.ability-bar{left:28px;bottom:28px;display:flex;gap:8px}.ability{width:100px;height:54px;border:1px solid #35595a;background:#0d1b22d9 url("production/runtime105/textures/ui.ability_slot.png") center/100% 100% no-repeat;padding:7px 9px;position:relative}.ability strong{color:#b6ffe6;font-size:12px}.ability span{display:block;color:#88a4a1;font-size:11px;margin-top:4px}.ability i{position:absolute;inset:auto 0 0;height:0;background:#ffad6d80}.toast{left:50%;top:17%;transform:translateX(-50%);padding:11px 18px;background:#0b1b20e8;border:1px solid #78c9b1;color:#d9fff6;opacity:0;transition:.2s}.toast.show{opacity:1}
/* Echo state is visible while it is ready, deployed, or boosting pickups. */
.ability[data-ability="echo"].ready{border-color:#ffb16d;box-shadow:0 0 15px #ffad6d3d}
.ability[data-ability="echo"].boosted{border-color:#c4ff92;box-shadow:0 0 18px #b7ff8c66}
.ability[data-ability="echo"].boosted span{color:#d8ffb2}
/* Production slices form the HUD; dynamic values occupy their inner windows. */
.control-help{max-width:500px;margin:14px 0 0;padding:16px 24px;color:#c1d9d5;line-height:1.8;font-size:13px;background:#0c171ded url("production/runtime105/textures/ui.panel_small.png") center/100% 100% no-repeat}
.icon-button{display:inline-grid;place-items:center;width:38px;height:42px;border:0;background:transparent;cursor:pointer;padding:3px}
.icon-button img{width:100%;height:100%;object-fit:contain}
.icon-button:hover{filter:brightness(1.3)}
.pause-button{position:absolute;right:28px;bottom:26px;pointer-events:auto;width:44px;height:54px}
.secondary{font:inherit;font-weight:700;cursor:pointer;padding:12px 24px;border:0;background:transparent url("production/runtime105/textures/ui.button_secondary.png") center/100% 100% no-repeat;color:#d6f9ed;margin-left:12px;display:inline-flex;align-items:center;gap:6px}
.button-icon{width:22px;height:22px;object-fit:contain}
.result-panel{background:linear-gradient(140deg,#15252be8,#0e1820ed),url("production/runtime105/textures/ui.panel_large.png") center/100% 100% no-repeat}
.meter{width:170px;height:30px;border:0;position:relative;background:transparent url("production/runtime105/textures/ui.health_bar.png") center/100% 100% no-repeat;flex:none}
.meter-window{position:absolute;left:24%;right:10%;top:36%;bottom:29%;background:#08171b;overflow:hidden}
.meter-window i{background:linear-gradient(90deg,#6cad4e,#c4f773);height:100%;display:block}
.stat-line{gap:7px;white-space:nowrap}
.hud-top-left{width:330px}
.xp-track{height:28px;width:100%;position:relative;border:0;background:transparent url("production/runtime105/textures/ui.xp_bar.png") center/100% 100% no-repeat}
.xp-window{position:absolute;left:24%;right:10%;top:36%;bottom:29%;overflow:hidden;background:#08171b}
.xp-window i{height:100%;display:block;background:linear-gradient(90deg,#f3a341,#ffe095)}
.xp-wrap{width:32%;bottom:25px}
.hud-icon{width:20px;height:26px;object-fit:contain}
.timer-line,.hostile-line{display:flex!important;align-items:center;justify-content:center;gap:8px}
.timer-line #timerText{font-size:30px;color:#eaf7f4}
.hostile-line .hud-icon{width:14px;height:19px}
.toast{padding:16px 25px;background:#0b1b20ed url("production/runtime105/textures/ui.panel_small.png") center/100% 100% no-repeat}
.ability-icon{position:absolute;right:7px;top:8px;width:19px;height:26px;object-fit:contain}
.primary{background:transparent url("production/runtime105/textures/ui.button_primary.png") center/100% 100% no-repeat;color:#ffe9c7;border:0;clip-path:none;box-shadow:none;text-shadow:0 1px 3px #000;min-width:180px;min-height:64px;padding:14px 32px}
.primary:hover{background:transparent url("production/runtime105/textures/ui.button_primary.png") center/100% 100% no-repeat;filter:brightness(1.2)}
.launch-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.launch-actions [hidden]{display:none}
.save-status{font-size:12px;color:#a9c6c3;margin:10px 0 0;min-height:16px}
.sound-button{position:fixed;right:18px;top:12px;z-index:8;font:inherit;font-size:11px;background:#0b181de8;color:#b5d5ce;border:1px solid #41625f;cursor:pointer;padding:5px 9px}
/* HUD follows the displayed game size, including a narrower Codex panel. */
body{min-height:100vh}
#app{width:min(100vw,calc(100vh * 16 / 9),1280px);container-type:inline-size}
.hud-top-left{left:2.2%;top:3.3%;width:26%}
.hud-top-right{right:2.2%;top:3.8%;font-size:1cqw}
.stat-line{font-size:1.05cqw;gap:.6cqw;margin-bottom:.6cqw}
.label{width:2.5cqw}
.meter{width:13.3cqw;height:2.4cqw}
.hud-icon{width:1.6cqw;height:2cqw}
.run-readout{top:2.8%}
.run-readout>span{font-size:.95cqw}
.timer-line #timerText{font-size:2.4cqw}
.hostile-line .hud-icon{width:1.1cqw;height:1.5cqw}
.hostile-line small{font-size:.85cqw}
.ability-bar{left:2.2%;bottom:3.8%;gap:.6cqw}
.ability{width:7.5cqw;height:4.3cqw;padding:.6cqw .7cqw}
.ability strong{font-size:1cqw}
.ability span{font-size:.85cqw;margin-top:.3cqw}
.ability-icon{width:1.5cqw;height:2cqw;right:.5cqw;top:.6cqw}
.xp-wrap{width:26%;bottom:3.5%}
.xp-track{height:2.2cqw}
.xp-wrap span{font-size:.9cqw;margin-top:.35cqw}
.pause-button{right:2.2%;bottom:3.6%;width:3.5cqw;height:4.3cqw}
.toast{font-size:1.1cqw;padding:1.1cqw 2cqw;max-width:75%;text-align:center}
.control-help{position:static;max-width:460px;margin:14px 0 0;padding:0;color:#a9c6c3;font-size:clamp(11px,1cqw,13px);line-height:1.6}
.modal-panel{padding:3cqw 3.3cqw}
.modal-panel h2{font-size:3cqw}
.upgrade-cards{gap:1.2cqw;margin-top:2cqw}
.upgrade-cards.supply-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.upgrade-card{padding:2.4cqw 3.6cqw;min-height:16cqw;min-width:0;overflow-wrap:anywhere}
.supply-cards .upgrade-card{padding-left:6cqw;padding-right:6cqw}
.upgrade-card h3{font-size:1.5cqw;margin:1.2cqw 0 .6cqw}
.upgrade-card p{font-size:1.1cqw}
.upgrade-card .icon{font-size:2.6cqw;height:3.6cqw}
.upgrade-icon-img{width:3.6cqw;height:3.6cqw}
.upgrade-icon-slot{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;overflow:hidden;flex:none}
.upgrade-card .icon{overflow:hidden}
button:focus-visible{outline:2px solid #c5ffe8;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.upgrade-card,.toast{transition:none}.upgrade-card:hover{transform:none}}
/* Keep essential text readable when the game occupies a narrow desktop panel. */
.stat-line{font-size:clamp(12px,1.05cqw,14px)}
.hud-top-right{font-size:clamp(11px,1cqw,13px)}
.run-readout>span,.hostile-line small{font-size:clamp(11px,.95cqw,13px)}
.timer-line #timerText{font-size:clamp(22px,2.4cqw,30px)}
.timer-line .hud-icon.boss-warning-icon{width:clamp(18px,1.8cqw,23px);height:clamp(18px,1.8cqw,23px);object-fit:contain;flex:none}
.run-readout .boss-warning-label{color:#ffc28c}
.ability{width:clamp(80px,7.5cqw,100px);height:clamp(48px,4.3cqw,55px);padding:7px}
.ability strong{font-size:clamp(11px,1cqw,13px)}
.ability span{font-size:clamp(11px,.85cqw,12px)}
.xp-wrap{bottom:4%;width:30%}
.hud-top-right{top:auto;bottom:4%;right:8.5%;width:clamp(268px,25cqw,320px);display:grid;grid-template-columns:minmax(94px,.86fr) minmax(0,1fr);grid-template-rows:repeat(3,24px);align-items:center;column-gap:10px;row-gap:0;padding:12px 18px;text-shadow:0 1px 3px #000}
.xp-wrap span{font-size:clamp(11px,.9cqw,12px)}
.xp-wrap #xpText{color:#eefff7;text-shadow:-1px 0 1px #041015,1px 0 1px #041015,0 -1px 1px #041015,0 1px 1px #041015,0 2px 4px #000}
.toast{font-size:clamp(13px,1.1cqw,15px)}
.upgrade-card h3{font-size:clamp(16px,1.5cqw,20px)}
.upgrade-card p{font-size:clamp(13px,1.1cqw,15px)}
/* Opaque slice-backed top panels keep passing actors behind essential text. */
.hud-top-left,.run-readout{background:#08151b url("production/runtime105/textures/ui.panel_small.png") center/100% 100% no-repeat;text-shadow:0 1px 3px #000}
.hud-top-left{top:1%;width:29%;padding:.4cqw .8cqw}
.hud-top-left .stat-line{line-height:1.1;margin-bottom:.35cqw}
.hud-top-left .stat-line:last-child{margin-bottom:0}
.run-readout{top:.4%;width:18%;padding:.15cqw .6cqw;line-height:1}
/* Reserve a separate upper-right slot above the player's reachable body area. */
.toast{left:64%;right:11%;top:1%;max-width:none;transform:none;padding:.45cqw .9cqw;line-height:1.25;text-align:left;overflow-wrap:anywhere;background:#08151b url("production/runtime105/textures/ui.panel_small.png") center/100% 100% no-repeat}
/* Measured UI frames use nine-slice edges so corners keep their proportions. */
.modal-panel,.upgrade-card,.ability,.hud-top-left,.run-readout,.hud-top-right,.toast,.control-help{isolation:isolate;background-image:none;position:relative}
.hud-top-left,.run-readout,.hud-top-right,.toast{position:absolute}
.modal-panel::before,.upgrade-card::before,.ability::before,.hud-top-left::before,.run-readout::before,.hud-top-right::before,.toast::before,.control-help::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:12px solid transparent;border-image:var(--frame-image) var(--frame-slices) fill / var(--frame-width) / 0 stretch}
.modal-panel{--frame-image:url("production/runtime105/textures/ui.panel_large.png");--frame-slices:58 64 56 64;--frame-width:28px;background-color:#101c24;border:0;padding:3.5cqw 4cqw}
.upgrade-card{--frame-image:url("production/runtime105/textures/ui.upgrade_card.png");--frame-slices:78 46 70 46;--frame-width:40px 23.589744px;min-height:24cqw;padding:4.2cqw 2.8cqw 3cqw;background-color:#0e1b23;border:0}
/* Keep the original crest and corners proportional; only the two rails extend. */
.upgrade-card::before{clip-path:inset(40px 0 0)}
.upgrade-card-top{position:absolute;inset:0 0 auto;height:40px;display:grid;grid-template-columns:23.589744px minmax(0,1fr) 39.487179px minmax(0,1fr) 23.589744px;z-index:-1;pointer-events:none}
.upgrade-card-top i{display:block;min-width:0;height:100%;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.upgrade-card-top i:nth-child(1){background-image:url("production/runtime105/textures/ui.card_top.corner_left.png")}
.upgrade-card-top i:nth-child(2){background-image:url("production/runtime105/textures/ui.card_top.rail_left.png")}
.upgrade-card-top i:nth-child(3){background-image:url("production/runtime105/textures/ui.card_top.crest.png")}
.upgrade-card-top i:nth-child(4){background-image:url("production/runtime105/textures/ui.card_top.rail_right.png")}
.upgrade-card-top i:nth-child(5){background-image:url("production/runtime105/textures/ui.card_top.corner_right.png")}
.ability{--frame-image:url("production/runtime105/textures/ui.ability_slot.png");--frame-slices:72 50;--frame-width:10px 12px;background-color:#0b1820;border:0;padding:9px 12px}
.hud-top-left,.run-readout,.hud-top-right,.toast,.control-help{--frame-image:url("production/runtime105/textures/ui.panel_small.png");--frame-slices:54;--frame-width:10px;background-color:#08151b;border:0}
.control-help{padding:12px 18px;max-width:440px;line-height:1.8}
.toast{padding:.7cqw 1.4cqw}
.result-panel{background-image:none}
.meter{width:6.6cqw;height:3.25cqw}
.xp-track{width:7.7cqw;height:3.75cqw;margin-inline:auto}
.meter-window,.xp-window{left:32%;right:12%;top:36%;bottom:29%}
/* Keep HUD text inside each measured frame's decoration boundary. */
.run-readout{padding:.85cqw 1cqw;--frame-width:.7cqw}
.ability{padding:11px 20px;width:clamp(94px,8.75cqw,112px);height:clamp(54px,4.7cqw,60px)}
.ability-icon{right:4px;top:3px}
.hud-top-left{padding:.4cqw 1.3cqw .9cqw;--frame-width:.7cqw}
/* Cooldown occupies its own interior track below text, inside the frame. */
.ability strong{display:block;line-height:1}
.ability span{line-height:1.15;margin-top:4px}
.ability:has(i)::after{content:"";position:absolute;inset:auto 20px 10px;height:3px;background:#37514f;pointer-events:none}
.ability i{inset:auto 20px 10px;height:3px;background:#ffad6d;transform:scaleX(0);transform-origin:left center;z-index:1;pointer-events:none}

/* Keep multiline Chinese announcements balanced inside the reserved HUD slot. */
.toast{overflow-wrap:normal;word-break:normal;line-break:strict;text-wrap:balance}
.upgrade-icon-img{filter:drop-shadow(0 0 5px #ffad6d33)}
.upgrade-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.upgrade-card .icon,.upgrade-card h3,.upgrade-card p{flex:none}
.pause-screen{z-index:4;background:#04091066;backdrop-filter:none}
.pause-panel{width:min(540px,84%);text-align:center}
.pause-panel .muted{font-size:clamp(13px,1.1cqw,15px);line-height:1.6}
.pause-panel .eyebrow{font-size:clamp(10px,.95cqw,12px);letter-spacing:.12em}

/* The nine-slice center already contains the opaque scratched-metal backing.
   A second rectangular color layer leaked through each transparent corner. */
.modal-panel,.upgrade-card,.ability,.hud-top-left,.run-readout,.hud-top-right,.toast,.control-help{background-color:transparent}
.modal-panel{box-shadow:none}
.modal-panel::before{filter:drop-shadow(0 14px 22px #02070c99)}
.upgrade-card:hover{box-shadow:none}
.upgrade-card:hover::before{filter:brightness(1.12) drop-shadow(0 5px 8px #53dfba33)}
.ability[data-ability="echo"].ready,.ability[data-ability="echo"].boosted{box-shadow:none}
.ability[data-ability="echo"].ready::before{filter:drop-shadow(0 0 5px #ffad6d66)}
.ability[data-ability="echo"].boosted::before{filter:drop-shadow(0 0 5px #b7ff8c77)}

/* Three horizontal slices keep the cross/arrow and endcaps at one uniform
   scale. The middle rail alone extends to fit the readable fill window. */
.meter,.xp-track{--meter-height:clamp(40px,3.75cqw,48px);height:var(--meter-height);aspect-ratio:auto;background:none}
.meter{--meter-image:url("production/runtime105/textures/ui.health_bar.png");--meter-left:100;--meter-right:42;width:clamp(136px,12.4cqw,160px)}
.xp-track{--meter-image:url("production/runtime105/textures/ui.xp_bar.png");--meter-left:102;--meter-right:44;width:clamp(140px,13cqw,168px);margin-inline:auto}
.meter::before,.xp-track::before{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid transparent;border-left-width:calc(var(--meter-height) * var(--meter-left) / 164);border-right-width:calc(var(--meter-height) * var(--meter-right) / 164);border-image-source:var(--meter-image);border-image-slice:0 var(--meter-right) 0 var(--meter-left) fill;border-image-width:1;border-image-repeat:stretch;clip-path:inset(0 0 0 calc(var(--meter-height) * var(--meter-left) / 164))}
.meter-badge{position:absolute;left:0;top:50%;transform:translateY(-50%);width:var(--meter-height);height:var(--meter-height);aspect-ratio:1 / 1;overflow:hidden;margin:0!important;line-height:0;z-index:1}
.meter-badge>.rect-art-slot{width:100%!important;height:100%!important;margin:0;line-height:0;overflow:hidden;aspect-ratio:1 / 1}
.meter-badge .rect-art-img{aspect-ratio:1/1;max-width:none;max-height:none}
.health-label{display:block;flex:none;line-height:1.1}
.xp-wrap{bottom:3%;width:max-content}
.meter-window{left:calc(var(--meter-height) - 4px);right:calc(var(--meter-height) * 45 / 164);top:36.58537%;bottom:34.14634%}
.xp-window{left:calc(var(--meter-height) - 4px);right:calc(var(--meter-height) * 47 / 164);top:36.58537%;bottom:34.14634%}
.meter-window::after,.xp-window::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 8 - 1px),#08171b calc(100% / 8 - 1px),#08171b calc(100% / 8))}

/* Dedicated gameplay identities share the measured icon canvas. */
.resource-readout,.save-resource{display:flex;align-items:center;gap:6px}
.resource-readout{color:#ffb17b}
.resource-icon{width:24px;height:24px;object-fit:contain;flex:none}
.control-icon{width:22px;height:22px;object-fit:contain;vertical-align:middle}
.semantic-icon-slot{display:inline-grid;place-items:center;overflow:hidden;flex:none}
.semantic-icon-slot .upgrade-icon-slot,.semantic-icon-slot .upgrade-icon-img{width:100%;height:100%}
.save-resource{margin-top:10px}
.save-resource .save-status{margin:0}
.ability-icon.semantic-icon{width:32px;height:32px;right:8px;top:6px}
.result-resource-icon{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto 4px}
.ability[data-ability="dash"].ready::before{filter:drop-shadow(0 0 4px #ffad6d44)}

/* Existing-state art: rectangular native canvases use measured display ink. */
.rect-art-slot{position:relative;display:inline-block;flex:none;overflow:visible;vertical-align:middle;pointer-events:none}
.rect-art-img{position:absolute;display:block;max-width:none;max-height:none;pointer-events:none}
.hud-top-right .resource-readout{grid-column:2;grid-row:1;justify-self:start;white-space:nowrap}
.weapon-readout{display:contents}
#weaponArt{grid-column:1;grid-row:1 / 4;align-self:center;justify-self:center}
#weaponText{grid-column:2;grid-row:2;align-self:center;justify-self:start;min-width:0;max-width:100%;font-size:clamp(11px,1cqw,13px);line-height:1.2;color:#b6ffe6;white-space:nowrap}
#weaponMode{grid-column:2;grid-row:3;align-self:center;justify-self:start;min-width:0;max-width:100%;font-size:clamp(10px,.85cqw,11px);line-height:1.2;letter-spacing:.06em;color:#85aaa5;white-space:nowrap}
/* The pause hit area and its icon use one square slot at every game size. */
.pause-button{bottom:4%;width:clamp(44px,4cqw,52px);height:clamp(44px,4cqw,52px);aspect-ratio:1/1;padding:0;line-height:0}
.pause-button img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.echo-boost-state{position:absolute;right:2.2%;top:12%;display:flex;align-items:center;gap:9px;padding:7px 12px;color:#d8ffb2;background:#08151bf2;border:1px solid #486e5e;pointer-events:none;text-shadow:0 1px 3px #000}
.echo-boost-state[hidden]{display:none}
.echo-boost-state b{display:block;font-size:13px;line-height:1.2}
.echo-boost-state div>span{display:block;font-size:12px;color:#a5c9b5;margin-top:3px}
.result-art{margin:6px auto 10px;line-height:0}
.result-panel .result-stats{margin:14px 0}
@container(min-width:801px) and (max-width:900px){
  .xp-wrap{left:2.2%;bottom:19%;transform:none}
}
@container(min-width:901px) and (max-width:1100px){
  .xp-wrap{left:54%}
}
/* Use the level row's existing blank space; no added panel height or flex pressure. */
.level-line{position:relative}
#xpDock{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;color:#eefff7;text-shadow:0 1px 3px #041015}
#xpDock[hidden]{display:none}
@container(max-width:800px){
  /* The Codex side panel uses a 651px game surface. Give each bottom HUD
     group its own space instead of letting desktop minimum widths collide. */
  .hud-top-left{width:clamp(238px,32cqw,260px);padding:4px 10px 8px}
  .hud-top-left .stat-line{gap:4px}
  .hud-top-left .label{width:24px;flex:none}
  .meter{width:clamp(120px,16cqw,136px)}
  .ability-bar{gap:4px;bottom:4%}
  .ability{width:72px;height:46px;padding:8px 10px}
  .ability strong,.ability span{font-size:10px}
  .ability-icon.semantic-icon{width:24px;height:24px;right:3px;top:3px}
  .ability:has(i)::after,.ability i{left:10px;right:10px;bottom:7px;height:2px}
  .xp-wrap{left:2.2%;bottom:19%;transform:none;width:140px}
  .xp-wrap span{font-size:10px}
  .xp-track{width:140px}
  .hud-top-right{right:calc(2.2% + 54px);width:clamp(240px,36cqw,268px)}
  .result-panel{padding:14px 24px}
  .result-panel .eyebrow{font-size:10px;margin-bottom:5px}
  .result-art .rect-art-slot{width:190px!important;height:99.586207px!important}
  .result-panel h2{font-size:22px;margin-bottom:4px}
  .result-panel .result-stats{margin:10px 0}
  .result-panel .result-stats div{padding:8px 4px}
  .result-panel .result-stats b{font-size:20px}
  .result-panel .primary{min-height:52px}
  .result-panel .secondary{padding:10px 14px}
}

/* Independent start-scene runtime layers: the menu no longer relies on a baked scenic mother image. */
.start-scene-layers{position:absolute;inset:0;overflow:hidden;z-index:0;background:#0a1219}
.start-layer{position:absolute;display:block;pointer-events:none}
.start-layer-base{inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72)}
.start-layer-vignette{inset:0;background:radial-gradient(circle at 68% 48%,rgba(75,164,170,.18),transparent 38%),linear-gradient(90deg,rgba(3,8,13,.96) 0%,rgba(3,8,13,.78) 38%,rgba(3,8,13,.16) 82%,rgba(3,8,13,.52) 100%)}
.start-prop{object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.55));opacity:.92}
.start-prop-left{width:27%;left:-2%;bottom:-4%}.start-prop-right{width:29%;right:-3%;bottom:-6%}.start-prop-barrier{width:25%;left:36%;bottom:-4%;transform:rotate(-3deg)}.start-prop-beacon{width:9%;right:29%;bottom:24%;filter:drop-shadow(0 0 16px rgba(255,145,75,.65))}
.start-character{width:15%;left:64%;bottom:18%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.7))}.start-character-weapon{width:8%;left:68.4%;bottom:26%;transform:rotate(-2deg);filter:drop-shadow(0 0 12px rgba(105,255,218,.55))}
.start-threat{width:6%;opacity:.78;filter:drop-shadow(0 0 10px rgba(255,101,75,.42))}.start-threat-a{left:49%;top:18%}.start-threat-b{left:78%;top:24%;width:5%}.start-threat-c{right:9%;top:44%;width:7%}
.start-panel{position:relative;z-index:2;background:linear-gradient(90deg,rgba(4,10,16,.78) 0%,rgba(4,10,16,.34) 46%,transparent 78%)}


/* Keep the same outer shadow in a static sibling so world repaint does not invalidate its blur. */
.app-shadow{grid-area:1 / 1;width:min(100vw,calc(100vh * 16 / 9),1280px);aspect-ratio:16/9;max-height:100vh;box-shadow:0 28px 80px #02060a;pointer-events:none}
#app{grid-area:1 / 1;box-shadow:none}