/* The arena uses the full viewport, with no page chrome reserving play space.
   Contain the original 16:9 frame so fighters and hit distances never stretch. */
html,body{width:100%;height:100%;overflow:hidden;background:#090d0a}
#app{position:fixed;inset:0;width:100%;height:100%;min-height:0;padding:0;background:#090d0a;overflow:hidden;justify-content:center}
#stage{flex:none;width:min(100vw,calc(100dvh * 16 / 9));height:auto;max-height:100%;aspect-ratio:16/9;box-shadow:none}
.control-strip,.page-foot{display:none}
.mast{position:absolute;inset:0 0 auto;z-index:30;width:100%;max-width:none;height:52px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));gap:12px;background:linear-gradient(#08110ded,#08110d80,transparent);pointer-events:none}
.mast a,.mast nav,.mast button{pointer-events:auto}
.mast .brand{font-size:20px;gap:8px}.mast .seal{height:30px;width:30px;font-size:24px}
.mast>nav:last-child{gap:12px}
.mast>nav:last-child button{padding:8px;background:#101a12bf;border-radius:3px}
.mast>.version-nav{position:static;transform:none;margin-right:auto}
.mast .version-nav a[aria-current]{display:none}
.mast nav #full{font:600 9px 'DM Sans',sans-serif;letter-spacing:.7px;white-space:nowrap;color:var(--gold)}
#hud{top:max(58px,6%)}
#screen-status{position:fixed;z-index:40;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:12px 18px;background:#152017f2;border:1px solid #e8ba6766;color:var(--cream);font-size:12px;text-align:center}
.menu{top:25%;max-height:71%}
.overlay{padding:60px 0 18px}
@media(max-height:600px){
  .mast{height:42px}.mast .brand small{display:none}.mast .seal{width:25px;height:25px;font-size:20px}
  #hud{top:46px}.fighter-label{margin-bottom:3px}.under-bar{margin-top:4px}
  .menu{top:27%;max-height:70%}.menu h1{font-size:clamp(35px,12vh,72px);margin:8px 0 0}
  .menu h1 span{margin-top:8px}.menu-copy{margin:8px 0}
}
/* Touch controls float over the unused lower corners, including landscape tablets. */
@media(pointer:coarse),(max-width:700px){
  .touch-controls{position:absolute;z-index:25;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0;pointer-events:none}
  .touch-controls button{pointer-events:auto;touch-action:none;user-select:none;border-radius:4px;background:#152017b8;border:1px solid #bfa57670;color:var(--cream);min-height:36px}
  .touch-controls button:active{background:var(--gold);color:var(--ink)}
  .touch-move{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,36px);gap:4px}
  .touch-move button:first-child{grid-column:2}.touch-move button:nth-child(2){grid-column:1;grid-row:2}.touch-move button:nth-child(3){grid-column:2;grid-row:2}.touch-move button:nth-child(4){grid-column:3;grid-row:2}
  .touch-actions{display:grid;grid-template-columns:repeat(3,44px);gap:4px}.touch-actions button{height:36px;font-size:7px}
  #fight-bottom{bottom:100px}.menu-stage-note{display:none}
  #app:has(#stage:not(.in-fight)) .touch-controls,#app:has(#pause-panel:not([hidden])) .touch-controls,#app:has(#result:not([hidden])) .touch-controls{display:none}
}
@media(max-width:700px){
  .mast{height:44px;padding-inline:8px;gap:8px}.mast .brand{font-size:16px}.mast .brand .seal,.mast .brand small{display:none}
  .mast>nav:last-child{gap:4px}.mast>nav:last-child button{padding:6px}.mast nav #full{font-size:8px;letter-spacing:0}
  .mast>.version-nav{gap:0;padding:2px}.mast .version-nav .choose{display:none}
  #hud{top:max(12px,6%)}
}
@media(max-width:700px) and (orientation:landscape){#hud{top:46px}}
@media(orientation:portrait){
  .menu{position:fixed;top:68px;bottom:20px;max-height:none;width:min(90%,440px);padding:18px;background:#0c170ee8;border:1px solid #e8ba6733;backdrop-filter:blur(6px)}
  .menu h1{font-size:70px}.menu h1 span{font-size:13px}.menu .eyebrow{font-size:7px}.menu-copy{font-size:10px;margin:18px 0}
  .menu .primary{min-height:44px;font-size:13px;width:90%}.menu .secondary{padding:12px;font-size:10px;width:90%}
  .menu .opponent-settings{max-width:90%;margin-top:18px}.menu .opponent-settings label{font-size:9px}.menu .opponent-settings select{padding:9px;font-size:11px}.menu .opponent-settings .difficulty-description{font-size:10px}
  .menu .menu-music{margin-top:18px}.menu .menu-music button{padding:9px;font-size:9px}
  .overlay{position:fixed;padding:65px 0 105px}.overlay .panel{max-width:85%;width:350px}
  #fight-bottom{bottom:5%}
}