/* touch controls (stick + buttons) and small screens; loaded last so these rules win */
@media (max-width:760px),(max-height:520px){
  #hTop{padding-left:150px;padding-right:200px;font-size:11px}
  #hMid{gap:16px;font-size:11px;top:calc(3px + env(safe-area-inset-top,0px))}
  #wPanel{transform:scale(.62);transform-origin:0 0}
  #wbar{padding:5px 16px;border-image-width:0 18px}#hud{--slot:clamp(26px,calc((100vw - 420px) / 9),40px)}#radar{width:124px;height:124px}.slot .a{font-size:9px}
  #gauge{transform:scale(.62);transform-origin:100% 0}
  #log{height:58px;font-size:10px;left:4px;width:calc(50vw - var(--slot) * 4.5 - 48px)}
  .key{min-width:40px;height:40px;font-size:15px}.key.w{min-width:100px}.key.c{min-width:60px}.arrows{grid-template-columns:repeat(3,40px)}
  .kgrid{gap:8px 12px}#ctrlHelp{padding:16px}#ctrlHelp h3{font-size:18px}
}
/* where the instance line does not fit between the two plates it goes under them (short windows have smaller plates) */
@media (max-width:1120px) and (min-height:521px){#hMid{top:calc(154px + env(safe-area-inset-top,0px))}}
@media (max-width:780px){#hMid{top:calc(98px + env(safe-area-inset-top,0px))}}
/* narrow windows held upright: the two plates smaller so they fit side by side, and the weapon row along the bottom edge
   on its own with the log and the radar above it */
@media (max-width:560px){
  #wPanel{transform:scale(.48)}
  #gauge{transform:scale(.48)}
  #hMid{top:calc(92px + env(safe-area-inset-top,0px));gap:clamp(5px,2.6vw - 1px,10px);padding:6px clamp(10px,4.8vw,18px) 7px;font-size:10px}
  #hud{--slot:clamp(24px,calc((100vw - 68px) / 9 - 3px),36px)}
  #wbar{bottom:calc(2px + env(safe-area-inset-bottom,0px));padding:5px 14px}
  #radar{width:108px;height:108px;bottom:calc(var(--slot) + 16px + env(safe-area-inset-bottom,0px))}
  #log{bottom:calc(var(--slot) + 18px + env(safe-area-inset-bottom,0px));width:calc(100vw - 124px);height:58px}
}
/* ---- phones in the arena: only what a run needs (weapon + ammo, loot + EXIT, pause, radar), the camera follows the
   mech up close, the stick is the whole left side and the fire button sits under the right thumb */
#touch{position:fixed;inset:0;pointer-events:none}
#stick{position:absolute;left:0;top:22%;bottom:0;width:46%;pointer-events:auto}
#ring{position:absolute;left:calc(96px + env(safe-area-inset-left,0px));top:calc(100% - 96px - env(safe-area-inset-bottom,0px));width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:3px solid rgba(200,210,205,.45);background:rgba(13,26,12,.35);opacity:.55;pointer-events:none}
#ring.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%}
#tbtns{position:absolute;right:0;bottom:0;width:260px;height:230px;pointer-events:none}
#tbtns [data-k]{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:11px;letter-spacing:1px;color:#fff;pointer-events:auto;background:rgba(20,26,22,.45);border:2px solid rgba(220,230,225,.55);-webkit-user-select:none;user-select:none}
#tbtns [data-k].on{background:rgba(125,255,95,.35);transform:scale(.94)}
/* the aim stick where FIRE was: red, its knob follows the thumb; held = firing */
#aimPad{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:100px;height:100px;border-radius:50%;pointer-events:auto;background:rgba(220,70,40,.35);border:2px solid rgba(255,190,170,.7);display:flex;align-items:center;justify-content:center}
#aimPad span{font:15px var(--f-head);letter-spacing:1px;color:#fff;pointer-events:none}
#aimKnob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,120,90,.75);pointer-events:none;opacity:0}
#aimPad.on #aimKnob{opacity:1}
#aimPad.on{background:rgba(220,70,40,.55)}
#aimPad.on span{display:none}
/* SPECIAL: its cooldown in seconds, the button filling back round as it recharges */
#tbtns .tSpec.cd{color:#ffb38a;background:conic-gradient(rgba(0,0,0,.6) calc(var(--cd,0) * 1turn),rgba(20,26,22,.45) 0)}
#tbtns .tSpec{right:calc(126px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:64px;height:64px}
/* the unlocked weapons in a row above the switch, scrolling sideways when they do not fit */
#mWlist{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(184px + env(safe-area-inset-bottom,0px));max-width:236px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;touch-action:pan-x;-webkit-overflow-scrolling:touch;padding:2px}
#mWlist::-webkit-scrollbar{display:none}
#mWlist div{flex:none;width:44px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(20,26,22,.45);border:2px solid rgba(220,230,225,.35)}
#mWlist div.on{border-color:#9dff80;background:rgba(125,255,95,.25)}
#mWlist div.empty{opacity:.4}
#mWlist img{width:34px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px #000);pointer-events:none}
/* weapon switch: ◄ icon/ammo ► above the fire button */
.tWsel{position:absolute;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(126px + env(safe-area-inset-bottom,0px));width:156px;height:52px;pointer-events:none}
.tWsel [data-k]{top:0;width:52px;height:52px;font-size:20px!important}
.tWsel .tPrev{left:0}.tWsel .tNx{right:0}
/* the weapon's icon with its ammo under it */
#mWpn{position:absolute;left:52px;right:52px;top:0;display:flex;flex-direction:column;align-items:center;text-shadow:0 1px 2px #000,0 0 4px #000}
#mWpn img{width:40px;height:32px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
#mWpn img:not([src]),#mWpn img[src='']{visibility:hidden}
#mWpn b{font:normal 16px/1 var(--f-lcd);color:#9dff80}
/* phones: no frames, plates or log; a thin health / shield bar with the loot top left, a plain minimap top right */
#mHud{display:none}
body.touchmode #hTop,body.touchmode #hMid,body.touchmode #log,body.touchmode #wbar,body.touchmode #wPanel,body.touchmode #ctrlHelp,body.touchmode #gHelp,body.touchmode #gSnd,body.touchmode #gaugeC,body.touchmode #gNums{display:none!important}
body.touchmode #mHud{display:block;position:absolute;left:calc(10px + env(safe-area-inset-left,0px));top:calc(8px + env(safe-area-inset-top,0px));width:min(34vw,220px)}
#mHud .mb{height:10px;margin-bottom:4px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.35);border-radius:3px;overflow:hidden}
#mHud .mb.shb{height:6px}
#mHud .mb i{display:block;height:100%;background:#7dff5f;transition:width .15s}
#mHud .mb i.low{background:#ff5a3a}
#mHud .mb.shb i{background:#6fb8ff}
#mLoot{font:15px var(--f-lcd);color:#ffd27a;text-shadow:0 1px 2px #000}
body.touchmode #gauge{position:absolute;right:auto;left:50%;top:calc(6px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:auto;height:auto;display:flex;gap:8px}
body.touchmode #gauge::before,body.touchmode #gauge::after{content:none}
body.touchmode #gLogout,body.touchmode #gBtns button{position:static;pointer-events:auto;height:36px;padding:0 12px;border:1px solid rgba(220,230,225,.55);border-radius:6px;background:rgba(20,26,22,.5);color:#e8f5e4;font:14px var(--f-lcd);letter-spacing:1px;box-shadow:none;width:auto}
body.touchmode #gLogout{min-width:76px;color:#9dff80}
body.touchmode #gBtns{position:static;display:flex;gap:6px}
/* the flags: no keys on a phone, just the flag in the middle of the button */
body.touchmode #gBtns .flag{position:relative;width:36px;padding:0}
body.touchmode #gBtns .flag i{left:13px;top:9px}
body.touchmode #gBtns .flag small{display:none}
body.touchmode #gBtns .flag[data-fl=white]{margin-right:4px}
body.touchmode #radar{left:auto;right:calc(8px + env(safe-area-inset-right,0px));top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;transform:none;width:84px;height:84px;background:none;filter:none;opacity:.85}
body.touchmode #radarC{left:0;top:0;width:100%;height:100%;border:1px solid rgba(160,255,150,.45)}
body.touchmode #knob{background:rgba(220,230,225,.6)}
#rotate{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;background:#0b0d0e;color:#7dff5f;font:20px 'VT323',var(--f-lcd);letter-spacing:2px;text-align:center}
#rotate b{display:block;font-size:64px;font-weight:normal;animation:spin 2s ease-in-out infinite}
@keyframes spin{50%{transform:rotate(90deg)}}
@media (orientation:portrait){html.touchdev.authed #rotate,body.touchmode.inarena #rotate{display:flex}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* phones held sideways: the menus fill the screen; no window frame or bottom bar, a slimmer header */
@media (max-height:520px){
  html.touchdev #cBot{display:none}
  html.touchdev #cBody{border-width:0}
  html.touchdev #cBody::after{content:none}
  html.touchdev #cTop{padding-top:calc(2px + env(safe-area-inset-top,0px));padding-bottom:0}
  html.touchdev #rail{height:44px;border-width:0 30px;border-image-width:0 30px}
  html.touchdev .tab{height:32px;min-width:72px;font-size:10px}
  html.touchdev #tabs .tab.battle{width:96px;height:34px}
  html.touchdev #topLcd{height:32px}
  /* the LOADOUT screen edge to edge, without its metal bezel */
  /* (an iPhone on its side is wider than pip.css's 760 px phone layout, so the device frame is taken off here as well) */
  html.touchdev #loadoutIn{padding:0;justify-content:flex-start}
  html.touchdev #loadoutIn .pip{width:100%;aspect-ratio:auto}
  html.touchdev .pip>img.frame,html.touchdev .pip .knob{display:none}
  html.touchdev .p-crt{--u:4.6px;position:relative;left:auto;top:auto;width:100%}
  html.touchdev .p-crt .ui{position:relative;inset:auto}
  html.touchdev .p-crt{border:0;border-radius:0;box-shadow:none;height:calc(100dvh - 46px - env(safe-area-inset-top,0px));min-height:0}
  /* split in two like on a desktop: the list on the left, the selected item on the right, each scrolling on its own */
  html.touchdev .p-crt .ui{height:100%;min-height:0;box-sizing:border-box}
  html.touchdev .p-crt .body{grid-template-columns:44% minmax(0,1fr)}
  html.touchdev .p-crt .det{order:0;border-bottom:0;padding-bottom:0;border-left:calc(.25 * var(--u)) dashed var(--g3);padding-left:calc(2.4 * var(--u));overflow-y:auto;touch-action:pan-y}
  html.touchdev .p-crt .list{overflow-y:auto;touch-action:pan-y}
  html.touchdev .p-crt .wallet{width:auto;order:0}
  /* the forum's terminal screen edge to edge too */
  html.touchdev .term{width:100%;height:100cqh;margin:0;border:0;filter:none}
  html.touchdev .t-knobs{display:none}
  html.touchdev .t-scr{border-radius:0}
  /* the footer is gone, so the about page is a tab */
  html.touchdev #tabs .tab.about{display:flex}
}
#tabs .tab.about{display:none;align-items:center;justify-content:center;text-decoration:none}