/* One arena HUD for every viewport. Controls overlay the world, never shrink it. */
.in-game #arena{height:100%;width:100%}
.in-game .speech-layer,.in-game .damage-wash{inset:0}
.in-game .game-topline{height:calc(54px + env(safe-area-inset-top));padding:5px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));padding-top:max(5px,env(safe-area-inset-top));display:grid;grid-template-columns:76px minmax(0,1fr) 114px;gap:8px;background:linear-gradient(#061525b8,transparent)}
.in-game .game-topline>.stage-heading{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;white-space:nowrap;overflow:hidden;text-shadow:0 1px 3px #000;pointer-events:none}
.in-game #scene-title{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.in-game #wave-name{font:700 8px/1.2 var(--body);color:#f4d8a6;letter-spacing:.6px}
.in-game .game-tools{display:contents}
.in-game #pause,.in-game #inventory{pointer-events:auto;height:44px!important;min-height:44px;width:100%!important;padding:4px;gap:4px;display:flex;align-items:center;justify-content:center;border:1px solid #c1aa7d;border-radius:3px;background:linear-gradient(145deg,#324354,#172333);box-shadow:inset 0 0 0 2px #0a1526,inset 0 3px 0 3px #eac99118;font:700 10px var(--heading);color:#f6dfb8}
.in-game #pause{grid-column:1;grid-row:1}.in-game #pause svg{width:13px;height:16px}.mobile-control-label{display:inline}
.in-game #inventory{grid-column:3;grid-row:1}.in-game #inventory canvas{width:23px;height:26px}.in-game #fullscreen,.in-game #inventory kbd{display:none}
  .battle-footer{display:grid;grid-template-columns:minmax(0,1fr) 60px 76px;grid-template-rows:42px 30px 14px;gap:3px 8px;padding:6px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:linear-gradient(140deg,#122337,#061020);border-top:2px solid #ac956a;box-shadow:0 -2px 0 #07121f,inset 0 1px 0 #ffedb728}
  .battle-footer:before,.battle-footer:after{content:'';position:absolute;top:-5px;width:9px;height:9px;border:2px solid #c3ad80;background:#172337;transform:rotate(45deg)}.battle-footer:before{left:5px}.battle-footer:after{right:5px}
  .battle-footer .combat-dock,.battle-controls{display:contents}
  .battle-help,.battle-footer .run-loadout,.battle-footer .health-module>small,.battle-footer .health-heading small{display:none}
  .battle-footer .health-module{grid-column:1;grid-row:1;align-self:center}
  .battle-footer .health-heading{height:22px;gap:5px}.battle-footer .health-heart{font-size:18px}.battle-footer .health-heading>span:nth-child(2){font-size:8px;letter-spacing:0}.battle-footer .health-heading strong{font-size:17px}.battle-footer .health-heading strong span{font-size:10px}
  .battle-footer .health-track{height:12px;margin:4px 0 0;border-radius:3px;border-color:#8196b3;box-shadow:inset 0 1px 3px #0008}
  .battle-footer .experience-module{grid-column:1;grid-row:2/4;display:grid;grid-template-columns:1fr;grid-template-rows:12px 4px 23px;gap:2px;align-self:end}
  .battle-footer .experience-heading{grid-row:1;grid-column:1;height:auto;display:flex;gap:6px;line-height:1;align-items:center}.battle-footer .experience-heading strong{font-size:9px;letter-spacing:0}.battle-footer .experience-heading span{font-size:8px}
  .battle-footer .experience-track{grid-column:1;grid-row:2;height:4px;margin:0;border-radius:1px}
  .battle-footer .skills-ribbon{grid-column:1;grid-row:3;min-height:22px;gap:5px;padding:1px 3px 2px 0;overflow-x:auto;align-items:center;justify-content:flex-start}
  .battle-footer .skills-ribbon .power-slot{width:21px;height:21px;flex:0 0 21px;border-radius:2px;background:#c6b28d;border-color:#9d8c6a}.battle-footer .skills-ribbon .power-slot canvas{width:19px;height:19px}.battle-footer .skills-ribbon .power-slot span{height:10px;min-width:10px;font-size:7px;bottom:-1px;right:-2px}
  .battle-footer .run-module{grid-row:3;grid-column:2/4;border:0;padding:0;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.battle-footer .run-module>strong{font-size:12px;letter-spacing:0}.battle-footer .run-module>small{font-size:8px;overflow:hidden;text-overflow:ellipsis}.battle-footer .run-metrics{display:none}
  .battle-footer .world-buffs{position:absolute;bottom:calc(100% + 7px);left:8px;right:8px;max-height:22px;height:22px;overflow:auto;pointer-events:none}.battle-footer .world-buffs[data-empty=true]{display:none}.battle-footer .world-buffs span{font-size:9px;padding:4px 6px;background:#102b3ae8;border:1px solid #698b83;border-radius:2px}
  .ability-button.evade,.ability-button.superpower{width:auto;min-width:0;min-height:0;grid-row:1/3;margin:0;padding:3px 3px 10px;border:2px solid #b89a6c;border-radius:8px 8px 5px 5px;background:radial-gradient(ellipse at 50% 35%,#375674,#132438 75%);box-shadow:inset 0 0 0 2px #071523,inset 0 -6px 0 #080f1c;color:#f9e6c5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;text-align:center;overflow:hidden}
  .ability-button.evade{grid-column:2}.ability-button.superpower{grid-column:3}
  .ability-button strong{font-size:9px}.ability-button.evade strong{font-size:9px}.ability-button.evade svg{width:25px;height:22px;margin:0}
  .ability-button .ability-heading{display:block;margin:0;padding:0;order:2}.ability-button .ability-heading b{font-size:7px;letter-spacing:.3px;color:inherit}
  .ability-button .ability-heading small,.ability-button .ability-effect,.ability-button #special-name,.ability-button #dash-status,.ability-button kbd{display:none}
  .ability-emblem{display:block;order:1;width:29px;height:29px;filter:drop-shadow(0 2px 2px #0007)}
  .ability-countdown{display:block;order:3;font:800 9px/1.2 var(--body);font-variant-numeric:tabular-nums;color:#c0d5ee}
  .ability-button:disabled{border-color:#687887;background:radial-gradient(ellipse at 50% 35%,#2a3d52,#102032 75%);color:#a9b8ca}
  .superpower[data-ready=true]{background:radial-gradient(ellipse at 50% 38%,#ffdb8b,#b76d32 76%);color:#10223b;border-color:#ffe2a5;box-shadow:inset 0 0 0 2px #65492d,inset 0 -6px 0 #69482a,0 0 10px #eea74c45}.superpower[data-ready=true] .ability-countdown{color:#10223b}
  .ability-meter{height:3px;left:6px;right:6px;bottom:4px}.ability-button:focus-visible{outline-offset:1px}
  .in-game .touch-guide{font-size:10px;padding:6px 8px;max-width:86%;bottom:calc(var(--dock-height) + 28px)}.in-game .touch-guide strong{font-size:11px}.in-game .touch-guide span{font-size:9px}
.in-game .chapter-track{display:none}
#status-stack{top:calc(62px + env(safe-area-inset-top));left:76px;right:76px;align-items:center;gap:0}
#status-stack .boss-health{width:min(440px,100%);padding:5px 9px;border-radius:4px}
#status-stack .boss-health .boss-track{margin:5px 0 0}
#status-stack .boss-health small{display:none}
#status-stack .boss-health b{font-size:10px}
#status-stack .boss-health span{font-size:9px;white-space:nowrap}
#encounter-notice{position:absolute;z-index:5;left:50%;bottom:calc(var(--dock-height) + 36px);transform:translateX(-50%);width:max-content;max-width:min(440px,calc(100% - 130px));padding:6px 10px;font-size:11px;text-align:center;pointer-events:none}
#encounter-notice[data-kind=discovery]{font-size:10px;font-weight:500;border:0;background:#0c2034d9;color:#e3dbc9}
#encounter-notice[data-urgent=true]{bottom:auto;top:calc(65px + env(safe-area-inset-top));max-width:min(440px,calc(100% - 140px));font-size:12px}
#arena-wrap[data-boss=true] #encounter-notice[data-urgent=true]{top:calc(114px + env(safe-area-inset-top))}
#ally-progress{position:absolute;right:0;bottom:calc(100% + 7px);padding:4px 8px;background:#17392fe8;color:#cce5b5;border:1px solid #82aa77;border-radius:3px;font:700 9px var(--body);pointer-events:none}
.battle-footer:has(#ally-progress:not([hidden])) .world-buffs{bottom:calc(100% + 31px)}
#recruit-beacon{position:absolute;z-index:4;display:flex;align-items:center;gap:4px;pointer-events:none;color:#ffe4af;transform:translate(33px,-50%)}
#recruit-beacon b{display:grid;place-items:center;width:20px;height:23px;flex:none;background:#b84d29;border:1px solid #ffcf87;border-radius:4px;font:900 16px var(--heading);box-shadow:0 2px 0 #302330}
#recruit-beacon span{width:134px;flex:none;padding:5px 7px;background:#12283aed;border:1px solid #e8b777;border-radius:4px;font:700 10px/1.3 var(--body)}
#recruit-beacon[data-expanded=false] span{display:none}
#recruit-beacon[data-side=right]{transform:translate(calc(-100% - 33px),-50%);flex-direction:row-reverse}
#recruit-beacon[data-side=top]{transform:translate(-50%,18px)}
#recruit-beacon[data-side=bottom]{transform:translate(-50%,calc(-100% - 18px))}
#recruit-beacon[hidden],#ally-progress[hidden]{display:none}
.reward-modal .upgrade-card .choice-preview{font:500 11px/1.4 var(--body);color:#534c3e;margin:0;padding:0;border:0}
.item-preview{font:500 11px/1.5 var(--body);color:#b9c9d7}
@media(min-width:701px) and (min-height:501px){
 .in-game .game-topline{grid-template-columns:94px minmax(0,1fr) 140px 36px;gap:10px;padding-left:14px;padding-right:14px}
 .in-game #scene-title{font-size:13px}.in-game #wave-name{font-size:10px}
 .in-game #pause,.in-game #inventory{font-size:11px;height:40px!important;min-height:40px}
 .in-game #fullscreen{display:grid;grid-column:4;grid-row:1;align-self:center;width:34px;height:34px}
 .in-game #inventory kbd{display:block;font-size:8px;padding:2px}
 .battle-footer{left:50%;right:auto;bottom:12px;transform:translateX(-50%);width:min(850px,calc(100% - 32px));grid-template-columns:minmax(0,1fr) 138px 82px 126px;grid-template-rows:42px 28px 16px;padding:7px 13px;border:1px solid #ac956a;border-radius:6px;gap:4px 14px}
 .battle-footer .health-heading strong{font-size:22px}.battle-footer .health-heading>span:nth-child(2){font-size:10px}.battle-footer .health-track{height:14px}
 .battle-footer .experience-heading strong{font-size:10px}.battle-footer .experience-heading span{font-size:9px}
 .battle-footer .run-module{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:5px;justify-content:center;border-left:1px solid #52627766;border-right:1px solid #52627766;padding:0 8px;overflow:hidden}
 .battle-footer .run-module>strong{font-size:23px}.battle-footer .run-module>small{font-size:9px;white-space:normal}
 .battle-footer .run-metrics{display:flex;font-size:9px;margin:4px 0 0;gap:5px}.battle-footer .run-metrics>span:nth-child(2){display:none}
 .ability-button.evade{grid-column:3;grid-row:1/4}.ability-button.superpower{grid-column:4;grid-row:1/4}
 .ability-button .ability-emblem{width:33px;height:33px}.ability-button.evade>canvas{width:34px;height:34px}
 .ability-button .ability-heading b{font-size:8px}.ability-button strong,.ability-button.evade strong{font-size:10px}
 .ability-button kbd,.ability-button.evade kbd{display:block;position:static;order:4;font-size:7px;min-width:0;background:none;border:0;color:inherit;padding:0;opacity:.7}
 .ability-button .ability-countdown{font-size:10px}.ability-button .ability-meter{height:4px}
 .reward-modal .upgrade-options{grid-template-columns:1fr}.reward-modal>.upgrade-panel{width:min(620px,100%)}
 .reward-modal .upgrade-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 16px}
 .reward-modal .choice-heading{grid-column:1/-1}.reward-modal .choice-preview{grid-column:1/-1}
 .reward-modal .upgrade-effect{grid-column:1/-1;font-size:13px;padding:5px 0 0}
 .reward-modal .choice-ranks,.reward-modal .pickup-summary{grid-column:1/-1}.reward-modal .choice-caveat{grid-column:1/-1}
 .reward-modal .pickup-summary{display:flex;justify-content:space-between}.reward-modal .pickup-affinity{gap:6px}
}
@media(max-width:700px){#recruit-beacon span{width:96px;font-size:9px}}
@media(max-width:360px){.in-game .game-topline{grid-template-columns:62px minmax(0,1fr) 96px;gap:5px}.in-game #scene-title{font-size:10px}.in-game #wave-name{font-size:8px}#recruit-beacon span{display:none}.reward-modal .upgrade-card .choice-preview{font-size:10px}}
@media(max-height:500px) and (min-width:701px){
 .battle-footer{left:auto;right:8px;width:365px;bottom:6px;border:1px solid #ac956a;border-radius:5px;padding:5px 8px;grid-template-rows:38px 26px 12px}
 #encounter-notice{left:12px;bottom:12px;transform:none;max-width:calc(100% - 410px)}
 #encounter-notice[data-urgent=true]{left:50%;transform:translateX(-50%);max-width:400px;bottom:auto}
}

@media(max-width:700px) and (max-height:700px){
 .reward-modal>.upgrade-panel{padding:10px}
 .reward-modal>.upgrade-panel>h2{font-size:20px;margin:4px 0 6px}
 .reward-modal .upgrade-panel>p{font-size:9px;margin-bottom:8px}
 .reward-modal .upgrade-card{padding:8px;gap:4px}
 .reward-modal .choice-heading>canvas{width:38px;height:38px;flex-basis:38px}
 .reward-modal .upgrade-card h3{font-size:13px}
 .reward-modal .upgrade-card .tag{font-size:7px}
 .reward-modal .upgrade-effect{font-size:10.5px;padding-top:4px}
 .reward-modal .upgrade-card .choice-preview{font-size:10px;line-height:1.3}
 .reward-modal .choice-caveat{font-size:9px}
}
.pause-panel .battle-help{display:block;padding:10px 0;color:#c9dbea;font-size:12px}
@media(pointer:coarse){.pause-panel .battle-help{display:none}}
