/* ⭐ THE PHONE AND THE TABLET (the owner, 2026-09-24: "make the game fully mobile compatible ... playable in landscape mode", and
   "make sure the desktop layout is uneffected").

   ⚠ LOADED WITH media="(hover:none) and (pointer:coarse)" (index.html), so a desktop browser, a mouse, a touchscreen laptop with a
   fine primary pointer, never applies one rule of this file. Every rule is also keyed on a class only mobile.js sets on a touch
   device (html.touch, html.phone, html.portrait / html.landscape), so the file is inert even if it were loaded anywhere else.

   The classes: touch = any touch-primary device; phone = a phone's screen (short side <= 540 px), where the layouts below apply;
   a tablet keeps the desktop layouts (it has the room) and gets the touch controls. The game is played in landscape; held upright,
   a phone is asked to turn (below), and the menus, the Registry, the mint and the wallet still work upright for a player who stays
   that way (a wallet app's browser is often portrait only). */

/* ------------------------------------------------------------------------------------------------------------------------------
   THE TURN-YOUR-PHONE PROMPT (built by mobile.js). A phone held upright is asked to turn on every screen (the owner, 2026-09-24);
   inside a wallet app's own browser, and outside a run, it can be set aside for the visit (html.rotate-ok: STAY UPRIGHT, for a
   browser that cannot turn); over a run, a match or the launch into one it always asks, on a tablet too. Gone the moment the
   screen is landscape.
   ------------------------------------------------------------------------------------------------------------------------------ */
#rotateGate{display:none}
html.phone.portrait:not(.rotate-ok) #rotateGate,html.touch.portrait body.playing #rotateGate,html.touch.portrait.launching #rotateGate,html.touch.portrait.duel #rotateGate{display:flex}
/* ⭐ IN THE OLD PHONE GATE'S DRESS (the owner, 2026-09-24: "make the turn your phone in landscape mode screen in the style that the
   screen that prevented to play on phone was"): the same system advisory, hazard stripes top and bottom (the one piece of vocabulary
   that reads as "a machine is asking" rather than "a website is sorry"), the red eyebrow, the line icon that reads left to right as a
   sentence (NOT this, BUT this: the phone upright, refused; the phone on its side, wanted), the glowing title, the outlined buttons
   and the wordmark at the foot. Only the message changed: the gate said "desktop only", this says "turn it". */
/* ⚠ OVER EVERYTHING, THE CRYSTAL CLASH FRAME INCLUDED: that match is an iframe at z-index 100000 (crystal-page.js), and at 20000 the
   card sat under it, the one screen a phone held upright was never asked on */
#rotateGate{position:fixed;inset:0;z-index:100001;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 90% at 50% 0%,#141019 0%,#07070c 55%,#040509 100%);
  color:#e9dcc8;text-align:center;overflow:auto;touch-action:pan-y;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#rotateGate .rg-hazard{flex:none;height:14px;background:repeating-linear-gradient(-45deg,var(--alert,#ff2e3f) 0 14px,#1a1013 14px 28px);
  opacity:.85;box-shadow:0 0 18px rgba(255,46,63,.35)}
#rotateGate .rg-panel{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;padding:26px 22px;max-width:520px;margin:0 auto;box-sizing:border-box}
#rotateGate .rg-eyebrow{font:700 10px/1 var(--f-mono);letter-spacing:.34em;text-indent:.34em;color:var(--alert,#ff2e3f);opacity:.9}
#rotateGate .rg-icon{width:min(250px,64vw);height:auto;overflow:visible}
#rotateGate .rg-icon path{fill:none;stroke-width:3;stroke-linejoin:miter;stroke-linecap:butt;vector-effect:non-scaling-stroke}
#rotateGate .rg-icon .rg-no{stroke:var(--alert,#ff2e3f);opacity:.75}
#rotateGate .rg-icon .rg-x{stroke:var(--alert,#ff2e3f);stroke-width:4;stroke-linecap:square}
#rotateGate .rg-icon .rg-arw{stroke:#7d6f5e;stroke-width:2.5}
#rotateGate .rg-icon .rg-yes{stroke:var(--cyan)}
#rotateGate .rg-icon .rg-ok{stroke:var(--cyan);opacity:.42}
#rotateGate .rg-title{margin:2px 0 0;font:700 clamp(17px,5.4vw,25px)/1.2 var(--f-display);letter-spacing:.16em;text-indent:.16em;
  color:#fff;text-shadow:0 0 14px rgba(255,46,63,.75)}
#rotateGate .rg-body{margin:0;font:500 clamp(13px,3.7vw,15px)/1.65 var(--f-ui);letter-spacing:.04em;color:#c9bda9;max-width:38ch}
#rotateGate .rg-body b{color:#ffd9a0;font-weight:700}
#rotateGate .rg-dim{opacity:.6;font-size:clamp(12px,3.3vw,13.5px)}
#rotateGate .rg-acts{display:flex;flex-direction:column;gap:10px;width:min(92vw,440px)}
#rotateGate .rg-btn{display:block;box-sizing:border-box;width:100%;min-height:46px;padding:13px 14px;border:1px solid var(--cyan);border-radius:4px;
  background:rgba(127,208,255,.08);color:#dffaff;cursor:pointer;
  font:700 13px/1 var(--f-display);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;text-align:center;text-decoration:none}
#rotateGate .rg-btn:active{background:rgba(127,208,255,.22)}
#rotateGate .rg-btn-alt{border-color:#ffae33;color:#ffd9a0;background:rgba(255,174,51,.08)}
#rotateGate .rg-btn[hidden]{display:none}
/* STAY UPRIGHT only inside a wallet app's own browser (mobile.js: html.wallet-browser), and never over a run (the rule up top) */
#rotateGate .rg-btn.rg-stay{display:none}
html.wallet-browser #rotateGate .rg-btn.rg-stay{display:block}
html.touch body.playing #rotateGate .rg-btn.rg-stay,html.touch.launching #rotateGate .rg-btn.rg-stay,html.touch.duel #rotateGate .rg-btn.rg-stay{display:none}
#rotateGate .rg-rule{width:min(230px,60vw);height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}
/* line-height 1.7: the wordmark is tracked out to .3em and wraps on a narrow phone, and at 1 the two lines touched */
#rotateGate .rg-foot{font:700 9.5px/1.7 var(--f-display);letter-spacing:.3em;text-indent:.3em;color:#7d6f5e}
#rotateGate .rg-foot span{color:var(--mag);opacity:.8}
/* the one movement it has: the wanted phone breathes, so the eye lands on the answer */
#rotateGate .rg-icon .rg-want{animation:rgWant 2.2s ease-in-out infinite}
@keyframes rgWant{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){#rotateGate .rg-icon .rg-want{animation:none}}

/* ------------------------------------------------------------------------------------------------------------------------------
   TOUCH BASICS: no text selection, no long-press callout, no grey tap flash; buttons act on a tap, not a double-tap zoom
   ------------------------------------------------------------------------------------------------------------------------------ */
html.touch,html.touch body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html.touch .btn,html.touch button,html.touch select,html.touch input{touch-action:manipulation}

/* ------------------------------------------------------------------------------------------------------------------------------
   WHAT A PHONE'S GPU SHOULD NOT PAY FOR: the full-screen CSS grade over the game canvas (the canvas grades itself already), and
   the live blur behind every overlay (a darker plate reads the same on a small screen)
   ------------------------------------------------------------------------------------------------------------------------------ */
html.touch #game{filter:none}
html.touch .overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.touch #fps{display:none}
/* the screens that sit over the game itself: with no blur behind them, a darker plate keeps them readable */
html.touch #pause,html.touch #gameover,html.touch #results,html.touch #lobby{background:rgba(3,6,12,.9)}

/* ------------------------------------------------------------------------------------------------------------------------------
   A FINGER'S SIZE ON ANY TOUCH SCREEN. A tablet keeps the desktop layouts, and a few of their controls are cut for a mouse (the
   ghost buttons 33 px tall, the socials 26, the roster chips 27, the room sizes 32); the phone layouts below set their own. The
   key and pad binding table is a keyboard's page, so a touch screen does not carry it.
   ------------------------------------------------------------------------------------------------------------------------------ */
html.touch .fx-ghost{padding-top:13px!important;padding-bottom:13px!important}
html.touch .mm-links .btn{padding:11px 4px!important}
html.touch #mpSizes button,html.touch #mpMatches button,html.touch #mpWingmen button,html.touch #mpMeteorsBtn{min-height:40px;min-width:44px}
html.touch .fx-chip{min-height:36px;box-sizing:border-box}
html.touch #settings .set-keys{display:none}
/* NO CHAT ON TOUCH (the owner, 2026-09-24: "on mobile specifically ... hide chat"): typing needs the on-screen keyboard, which covers the
   game. index.html's chatActive() already says no on touch; this also covers a page that became a phone in a room (DevTools) */
html.touch #chat{display:none!important}

/* ------------------------------------------------------------------------------------------------------------------------------
   THE READ-OUT PANELS ON A PHONE (.fx-read: the Registry's refit and specification, the Hangar's order, the public rooms).
   ⚠ THE DESKTOP FRAME IS AN SVG MASK ON TWO ABSOLUTE PSEUDO-ELEMENTS, and on a phone every one of these panels has to scroll. An
   absolute child of a scroll box scrolls away with the content, so the frame slid off the top and left the rest of the text on
   nothing; the art also spends a quarter of the panel's height on its stepped foot, which a 340 px screen cannot give. So on a
   phone the panel wears a plain plate instead: its own background (which stays put while the text scrolls), the tier colour on
   the edge. It also ends the portrait bug where a panel lost position:relative and its frame stretched over the whole screen.
   ------------------------------------------------------------------------------------------------------------------------------ */
html.phone .fx-read{position:relative;
  background:linear-gradient(160deg,rgba(9,14,22,.92),rgba(7,11,18,.84) 60%,rgba(12,9,16,.9))!important;
  border:1px solid color-mix(in srgb,var(--tc,var(--cyan)) 42%,transparent)!important;border-left:3px solid var(--tc,var(--cyan))!important;
  border-radius:3px!important;box-shadow:0 10px 30px -14px #000!important;padding:10px 12px 12px!important}
html.phone .fx-read::before,html.phone .fx-read::after{display:none}
html.phone #fleetRefit{position:relative}
/* ⚠ the desktop pads four of these panels BY ID for the frame's stepped foot (#fleetRefit.fx-read{padding:24px 26px 84px 44px!important}
   and the like), and an id outranks the plate's classes: on a phone the Registry's panels and the Hangar's order kept 84 to 100 px
   of empty foot. The plate's padding, one id higher. */
html.phone #fleetRefit.fx-read,html.phone #fleetTraits.fx-read,html.phone #hgDock.fx-read,html.phone #mpRoomsCol.fx-read{padding:10px 12px 12px!important}

/* ==============================================================================================================================
   PHONE, LANDSCAPE: THE SCREENS. A phone on its side is 320 to 430 px tall and every desktop layout assumes 720. Each screen keeps
   its look (the same frames, type and colours) and is re-flowed for the short screen: titles a size down, the key action above
   the fold, anything long scrolling inside its own panel, every button a thumb's size.
   ============================================================================================================================== */
html.phone.landscape .overlay{gap:8px;justify-content:flex-start;
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
html.phone.landscape .overlay > h2{font-size:20px;letter-spacing:.3em;text-indent:.3em;margin:0;line-height:1.25}
html.phone.landscape .overlay > .small::before{display:none}
html.phone.landscape .small{margin-top:0}

/* ---- the ticker and the main menu: the brand and the doors on the left, the wallet on the right, the ship between -------------- */
html.phone.landscape #ledStrip{height:22px}
html.phone.landscape #menuHud{grid-template-columns:minmax(0,min(470px,60vw)) 1fr auto;grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"brand . coins" "nav . ." "nav . ship";gap:6px 12px;
  padding:calc(30px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
html.phone.landscape #menuHud h1{font-size:22px;letter-spacing:.16em;text-indent:.16em;margin-bottom:0}
html.phone.landscape .mm-beta{font-size:9px}
html.phone.landscape #menuHud .sub{display:none}
html.phone.landscape #playersOnline{margin-top:3px;font-size:10px}
html.phone.landscape .mm-callsign{margin-top:5px;padding:4px 12px 5px 9px;gap:8px}
html.phone.landscape .mm-callsign .cs-eyebrow{font-size:8px}
html.phone.landscape .mm-callsign .cs-name{font-size:13px}
html.phone.landscape .mm-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-self:end}
html.phone.landscape .mm-nav .btn,html.phone.landscape .mm-nav .mm-navrow{min-width:0;width:100%;box-sizing:border-box;margin:0}
html.phone.landscape #menuHud .mm-nav .btn:not(.linkbtn){min-height:42px;padding:12px 12px;font-size:12.5px;letter-spacing:.12em;text-indent:.12em}
html.phone.landscape .mm-nav .mm-links{grid-column:1/-1;display:flex;gap:4px;margin-top:0}
html.phone.landscape .mm-nav .mm-links .btn{width:auto;min-width:0;padding:11px 10px!important;font-size:10px}
html.phone.landscape .mm-cue{display:none}
html.phone.landscape #menuBest{display:none}
html.phone.landscape .mm-panel{display:none}
html.phone.landscape .mm-corner{flex-wrap:wrap;justify-content:flex-end;max-width:46vw}
html.phone.landscape .mm-wallet{font-size:10.5px!important;padding:11px 12px!important}
html.phone.landscape .mm-walletmsg{max-width:44vw}
html.phone.landscape .mm-ship{grid-area:ship;justify-self:end;align-self:end;font-size:9px}

/* ---- the pilot advisory ---------------------------------------------------------------------------------------------------------
   CONNECT WALLET gives up the desktop's 240 px minimum on a phone: on a 320 px screen held upright it pushed LATER out of the panel,
   and the advisory could then only be closed by connecting a wallet. */
html.phone #pilotNote .pn-row{flex-wrap:wrap}
html.phone #pilotNote .pn-row .btn{min-width:0;min-height:40px}

/* ---- pause and game over -------------------------------------------------------------------------------------------------- */
html.phone.landscape #pause{justify-content:center}
html.phone.landscape #pause .btn{padding:13px 26px;font-size:15px}
/* the game over runs two columns: what happened on the left, what to do next on the right (dense: each column fills from the top) */
html.phone.landscape #gameover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;align-content:center;
  justify-items:center;align-items:center;column-gap:22px;row-gap:6px}
html.phone.landscape #gameover > h2,html.phone.landscape #gameover > #goScore,html.phone.landscape #gameover > #goBest,
html.phone.landscape #gameover > #newBest,html.phone.landscape #gameover > .gostats,html.phone.landscape #gameover > #goMeme{grid-column:1}
html.phone.landscape #gameover > .btn,html.phone.landscape #gameover > .fc,html.phone.landscape #gameover > #overHint{grid-column:2}
html.phone.landscape #goScore{font-size:34px;line-height:1.1}
html.phone.landscape #newBest{padding:5px 16px;font-size:13px}
html.phone.landscape .gostats{gap:16px}
html.phone.landscape .gostats div{min-width:70px}
html.phone.landscape .gostats b{font-size:17px}
html.phone.landscape #gameover .btn{margin:0;width:min(300px,100%);min-width:0;box-sizing:border-box;padding:12px 16px;font-size:14px}
html.phone.landscape #overHint{display:none}

/* ---- settings: two columns, GAME and DISPLAY & AUDIO; the key and pad binding table is a keyboard's page ----------------------- */
html.phone.landscape #settings .set-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;width:100%}
html.phone.landscape #settings .set-list{width:100%;gap:7px}
html.phone.landscape #settings .set-list .btn{min-height:40px;padding:11px 12px;font-size:12px}
html.phone.landscape #settings .setnote{display:none}
html.phone.landscape #settings #setBack{top:calc(8px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
/* the UI scale is a desktop's setting: a phone's interface is always drawn at its own size */
html.phone #settings .setscale{display:none}
/* ---- TOUCH CONTROLS: the key table's place (index.html renderTouchControls, built on touch only): what each finger does, a tab per
   mode, the key table's own tabs made finger-sized. On a phone it stands under DISPLAY & AUDIO, which the pad's rows no longer fill,
   with GAME down the left beside the two. -------------------------------------------------------------------------------------- */
html.touch #setTouch .touch-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
html.touch #setTouch .bind-tab{min-height:34px;padding:8px 10px;font-size:9.5px;letter-spacing:.14em}
html.touch #setTouch .touch-list{gap:5px 12px;font-size:11.5px;line-height:1.3;margin:0;padding:8px 10px;color:#cfe2f4;
  background:rgba(3,6,12,.78);border-left:2px solid rgba(255,217,132,.55)}   /* a plate: the menu's lit planet stands behind Settings on a phone */
html.touch #setTouch .touch-list span{color:#b9cadb}
html.touch #setTouch .touch-list b{align-self:start;padding-top:1px}
html.phone.landscape #settings .set-cols > .set-col:first-child{grid-row:1 / span 2}
html.phone.landscape #setTouch{grid-column:2}

/* ---- multiplayer: the title bar, then the doors on the left and the public rooms on the right ----------------------------------- */
html.phone.landscape #mp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"title name back" "row row row" "status status status";align-items:center;column-gap:14px;row-gap:6px}
html.phone.landscape #mp > h2{grid-area:title;font-size:18px;letter-spacing:.22em;text-indent:.22em}
html.phone.landscape #mp > .mp-back{grid-area:back;position:static;margin:0}
html.phone.landscape #mp > .small:not(#mpStatus){display:none}
/* the call sign field shrinks to what the row leaves (a text field's own minimum pushed LAUNCH BAY off a 568 px screen) */
html.phone.landscape #mp > label{grid-area:name;width:auto!important;min-width:0;justify-self:stretch;font-size:10.5px;letter-spacing:.16em}
html.phone.landscape #mp > label input{min-width:0;width:100%;padding:7px 10px!important;min-height:36px;box-sizing:border-box;font-size:14px!important}
html.phone.landscape #mp > div:not([id]):not([class]){grid-area:row;align-self:stretch;width:100%!important;min-height:0;gap:12px!important;flex-wrap:nowrap!important;align-items:stretch!important}
html.phone.landscape #mp > div:not([id]):not([class]) > div:first-child{flex:1 1 56%!important;display:grid!important;grid-template-columns:1fr 1fr;
  align-content:start;gap:8px!important;overflow-y:auto;min-height:0;padding:0 4px 4px 0}
html.phone.landscape #mp .mp-mode-choice{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding:7px 10px}
html.phone.landscape #mpMode{min-height:38px;padding:6px 8px;font-size:13px}
/* Orbital Siege Pinball's DUEL / CO-OP switch and its SOLO PRACTICE button span the mode box: in the label's column the button
   stretched it to 240 px and squeezed the dropdown to 173 px (74 on an iPhone SE), clipping the mode's name (2026-09-27) */
html.phone.landscape #mpPinballKind,html.phone.landscape #pinball-practice{grid-column:1/-1}
/* STORMWING's SOLO PRACTICE and TUTORIAL row the same: in the label's column it squeezed the dropdown to 18 px on an iPhone SE (2026-10-04) */
html.phone.landscape #shmup-solo{grid-column:1/-1;margin:4px 0!important}
/* (and its two buttons narrower: in their wide lettering SOLO PRACTICE would not shrink, and pushed TUTORIAL out of the box) */
html.phone.landscape #shmup-solo .btn{min-width:0;min-height:40px;padding:9px 6px!important;font-size:11.5px!important;letter-spacing:.08em;text-indent:.08em}
html.phone.landscape #mpModeHint{grid-column:1/-1;min-height:0;font-size:11.5px;line-height:1.3}
html.phone.landscape #mpQuick,html.phone.landscape #mpCreate{min-width:0;padding:11px 8px;font-size:12.5px;letter-spacing:.12em;text-indent:.12em}
html.phone.landscape #mp > div:not([id]):not([class]) > div:first-child > div:not([id]):not([class]){grid-column:1/-1}
html.phone.landscape #mp > div:not([id]):not([class]) > div:first-child > .small{display:none}
html.phone.landscape #mpRoom{font-size:18px!important;padding:6px 8px!important;min-height:40px;box-sizing:border-box}
html.phone.landscape #mpJoin{min-width:96px!important;padding:11px 14px!important;font-size:13px}
html.phone.landscape #mpSizes button,html.phone.landscape #mpMatches button,html.phone.landscape #mpWingmen button,html.phone.landscape #mpMeteorsBtn{min-height:38px;min-width:42px}
html.phone.landscape #mpRoomsCol{flex:1 1 44%!important;max-height:none;min-height:0;display:flex;flex-direction:column;gap:6px}
html.phone.landscape #mpRoomsCol .fx-cap{margin:0}
html.phone.landscape #mpRefresh{padding:6px 2px}
html.phone.landscape #mpRoomList{height:auto!important;flex:1 1 auto;min-height:0}
html.phone.landscape #mpRoomsCol > .small{display:none}
html.phone.landscape #mpStatus{grid-area:status;min-height:0;font-size:10.5px}

/* ---- the lobby and the results -------------------------------------------------------------------------------------------- */
/* the lobby: the room (title, code, invite, the fill and the clock) down the left; the two teams side by side on the right with READY
   and LEAVE under them. ⚠ The teams span the left's first five rows, so the rows stay the left's own height (a team list in a row
   of its own spread the left column apart), and the grid starts at the top: centred, a tall list overflowed ABOVE the scroll origin. */
html.phone.landscape #lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;align-content:start;
  justify-items:center;column-gap:22px;row-gap:6px}
html.phone.landscape #lobby > *{grid-column:1}
html.phone.landscape #lobby > div:not([id]){grid-column:2;grid-row:1/span 5;align-self:start;width:100%;margin-top:0!important;gap:14px!important;flex-wrap:nowrap!important}
html.phone.landscape #lobby > div:not([id]) > div{min-width:0!important;flex:1 1 0}
html.phone.landscape #lobby > #lobbyReady{grid-column:2;grid-row:6}
html.phone.landscape #lobby > #lobbyLeave{grid-column:2;grid-row:7}
html.phone.landscape #lobbyTeamA .small,html.phone.landscape #lobbyTeamB .small{margin:2px 0!important}
html.phone.landscape #lobbyPickA,html.phone.landscape #lobbyPickB{padding:9px 4px!important;margin:0!important}
html.phone.landscape #lobbyCopy{padding:8px 4px}
html.phone.landscape #lobbyCode{font-size:34px!important}
html.phone.landscape #lobby .btn{margin:0;min-width:200px;padding:12px 22px;font-size:14px}
html.phone.landscape #resultsList{max-height:calc(100vh - 150px);overflow-y:auto}
html.phone.landscape #results .btn{margin:0;padding:12px 22px;font-size:14px}

/* ---- the leaderboard: the podium on the left, the standings on the right ------------------------------------------------------ */
html.phone.landscape #bdHud{gap:6px 12px;
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
html.phone.landscape #bdHud .fx-title,html.phone.landscape #mkHud .fx-title{font-size:16px;letter-spacing:.24em}
html.phone.landscape #bdHud .fx-eyebrow,html.phone.landscape #mkHud .fx-eyebrow{font-size:9px}
html.phone.landscape .fx-ghost{min-height:36px;padding:10px 14px!important;font-size:11px!important;letter-spacing:.18em!important;text-indent:.18em!important}
html.phone.landscape #board .bd-body{width:100%;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"tabs cap" "pod head" "pod list" "reset list" "prizes list" "champs you";gap:4px 14px;padding:10px 12px}
html.phone.landscape #board .bd-tabs{grid-area:tabs}
html.phone.landscape #board .bd-podwrap{grid-area:pod;height:auto;min-height:120px}
html.phone.landscape #board .bd-cap{grid-area:cap}
html.phone.landscape #board .bd-head{grid-area:head}
html.phone.landscape #board .bd-list{grid-area:list}
html.phone.landscape #board .bd-you{grid-area:you}
html.phone.landscape #board .bd-reset{grid-area:reset}
html.phone.landscape #board .bd-prizes{grid-area:prizes}
html.phone.landscape #board .bd-champs{grid-area:champs}
html.phone.landscape #board .bd-rules{display:none}
html.phone.landscape .bd-tabs{gap:6px}
html.phone.landscape .bd-tab{padding:11px 12px;letter-spacing:.14em;text-indent:.14em}
html.phone.landscape .bd-head,html.phone.landscape .bd-row{grid-template-columns:26px minmax(0,1fr) repeat(var(--cols,1),minmax(38px,60px));gap:6px;padding:6px 4px}
html.phone.landscape .bd-head{letter-spacing:.1em;font-size:9.5px}
html.phone.landscape .bd-row{font-size:11.5px}
html.phone.landscape .bd-plinth .bd-pl-name{font-size:11.5px}

/* ---- the Fleet Registry: the pitch or the refit on the left, the ship in the middle, the specification on the right, the roster
   and MINT along the bottom. The panels scroll inside themselves; MINT never leaves the screen. ------------------------------- */
html.phone.landscape #fleetHud{grid-template-columns:minmax(0,31%) minmax(0,1fr) minmax(0,31%);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"brand back back" "refit ident read" "foot foot foot";gap:6px 10px;
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
html.phone.landscape #fleetHud .fx-title{font-size:16px;letter-spacing:.24em}
html.phone.landscape #fleetHud .fx-eyebrow{font-size:9px;letter-spacing:.24em;white-space:nowrap}   /* one line, out over the empty top of the ship's column (it wrapped under 700 px) */
html.phone.landscape #fleetHud .fx-back{position:static;gap:8px;justify-self:end}
html.phone.landscape #fleetHud .fx-back .btn{white-space:nowrap}
html.phone.landscape #fleetRefit{grid-area:refit;left:auto;top:auto;width:auto;transform:none!important;align-self:start;justify-self:stretch;max-height:100%;overflow-y:auto}
html.phone.landscape #fleetTraits{grid-area:read;align-self:start;justify-self:stretch;width:auto;max-height:100%;overflow-y:auto}
/* the panels' type, for a phone either way up: both panels are about a third of a phone's width */
html.phone #fleetTraits .fx-seed{position:static;margin-top:6px;padding:5px 0 0;border-top:1px solid rgba(255,255,255,.055);font-size:10px;text-align:left;text-shadow:none;white-space:normal}
html.phone #fleetRefit .fx-pitch-cap{font-size:11px}
html.phone #fleetRefit .fx-pitch{margin-top:4px}
html.phone #fleetRefit .fx-pitch li{padding:3px 0 3px 18px;font-size:11px;line-height:1.3;letter-spacing:.05em}
html.phone #fleetRefit .fx-pitch li::before{left:3px;width:9px;height:7px;margin-top:-3.5px}
html.phone #fleetRefit .fx-pitch-foot{margin-top:6px;font-size:10px}
html.phone #fleetRefit .fx-empty{font-size:11px;padding:8px 2px}
html.phone #refitHangarBtn{position:static;margin:8px 0 0!important;min-width:0!important;padding:9px 12px!important;font-size:11px!important}
html.phone #fleetHud .fx-cap{font-size:9px;padding-bottom:5px}
html.phone #fleetHud .fx-row{padding:3px 0;gap:8px}
html.phone #fleetHud .fx-row b{font-size:9px;letter-spacing:.1em}
html.phone #fleetHud .fx-row span{font-size:11px}
html.phone.landscape .fx-ident{grid-area:ident;position:static;align-self:end;justify-self:center;flex-direction:column;align-items:center;gap:4px;transform:none;text-align:center}
html.phone.landscape .fx-num{font-size:24px;line-height:1}
html.phone.landscape .fx-num small{font-size:8px;letter-spacing:.2em;margin-bottom:3px}
html.phone.landscape .fx-tier{align-self:center;padding:4px 9px 4px 7px;font-size:10px;letter-spacing:.16em}
html.phone.landscape #fleetSealedTag{left:50%;top:44%;font-size:11px;padding:7px 12px;white-space:normal;max-width:34vw}
html.phone.landscape .fx-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status status" "bar actions" "roster actions" "price actions";
  align-items:center;column-gap:12px;row-gap:3px}
html.phone.landscape .fx-foot .fx-status{grid-area:status;font-size:9.5px;letter-spacing:.08em;min-height:0}
html.phone.landscape .fx-foot .fx-rosterbar{grid-area:bar;justify-self:start;max-width:100%}
html.phone.landscape .fx-foot .fx-roster{grid-area:roster;justify-self:start;max-width:100%;padding-bottom:6px}
html.phone.landscape .fx-foot .fx-price{grid-area:price;justify-self:start;text-align:left;text-indent:0;font-size:10.5px;letter-spacing:.14em;margin:0}
html.phone.landscape .fx-actions{grid-area:actions;flex-direction:row;flex-wrap:nowrap;width:auto;gap:8px}
html.phone.landscape .fx-mint{min-width:0!important;width:auto;padding:13px 22px!important;font-size:15px!important;letter-spacing:.12em!important;text-indent:.12em!important;white-space:nowrap}
html.phone.landscape .fx-equip,html.phone.landscape .fx-market{min-width:0!important;width:auto;padding:12px 14px!important;font-size:11px!important;white-space:nowrap}
html.phone.landscape .fx-chip{padding:9px 12px;min-height:34px;box-sizing:border-box}
html.phone.landscape .fx-corner{display:none}
/* the smallest phones (568 to 700 px wide): the pitch gets the wider flank, the specification the narrower one */
@media (max-width:700px){
  html.phone.landscape #fleetHud{grid-template-columns:minmax(0,35%) minmax(0,1fr) minmax(0,30%)}
  html.phone.landscape #fleetRefit .fx-pitch-cap{font-size:10px;letter-spacing:.12em}
  html.phone.landscape #fleetRefit .fx-pitch li{font-size:10.5px;letter-spacing:.03em}
}

/* ---- the mint dialog: the field is not focused on open (the keyboard would cover the dialog), the steppers are thumb-sized ----- */
html.phone .md-step{width:48px;min-height:46px}
html.phone .md-acts .btn{min-height:40px;padding:12px 24px!important}
html.phone.landscape #mintDlgPanel{gap:8px;padding:12px 18px 14px}

/* ---- the Hangar: the five stations as a list down the left, the refit order on the right, the ship on the pad between them -----
   hangar-scene.js places each station over its console every frame; on a phone the consoles crowd into one corner and the labels
   piled onto the order, so the list takes their place (a stylesheet !important outranks the per-frame inline transform). */
html.phone.landscape #hgHud .hg-brand{top:calc(8px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}
html.phone.landscape #hgHud .hg-title{font-size:18px}
html.phone.landscape #hgHud .hg-eyebrow{font-size:9px}
html.phone.landscape #hgHud .hg-back{top:calc(8px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
html.phone.landscape #hgCoins{top:calc(52px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));font-size:13px}
html.phone.landscape #hgNodes{position:absolute;inset:auto;left:calc(12px + env(safe-area-inset-left));top:calc(54px + env(safe-area-inset-top));
  bottom:calc(8px + env(safe-area-inset-bottom));width:min(250px,33vw);display:flex;flex-direction:column;gap:5px;overflow-y:auto;pointer-events:auto}
html.phone.landscape #hgNodes .hgn{position:relative!important;transform:none!important;opacity:1!important;flex:0 0 auto;min-width:0;width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name buy" "pips eff buy" "credit credit buy";
  align-items:center;column-gap:8px;row-gap:2px;padding:6px 8px 6px 10px;text-align:left}
html.phone.landscape #hgNodes .hgn b{grid-area:name;font-size:10px}
html.phone.landscape #hgNodes .hgn .hgn-pips{grid-area:pips;margin:0;font-size:10px;letter-spacing:.12em}
html.phone.landscape #hgNodes .hgn .hgn-eff{grid-area:eff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone.landscape #hgNodes .hgn .hgn-credit{grid-area:credit}
html.phone.landscape #hgNodes .hgn .hgn-buy{grid-area:buy;margin:0;padding:9px 10px;min-width:54px;text-align:center}
/* the order sits in the bottom-right corner, clear of the balance (whose notes hang under it) */
html.phone.landscape #hgDock{left:auto;right:calc(12px + env(safe-area-inset-right));top:auto;bottom:calc(8px + env(safe-area-inset-bottom));transform:none;
  width:min(300px,36vw);max-height:calc(100% - 140px);overflow-y:auto;gap:8px}
html.phone.landscape #hgDock .hgd-btn{min-height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:10px 12px}

/* ---- THE COSMIC RACE on a phone: the right thumb's buttons ring the bottom-right corner (GAS or DRIFT, ITEM, DASH, BRAKE) and PAUSE
   has the top-right one, so the lap clock steps left of PAUSE, the minimap gives way (it sat on ITEM and DASH), the order keeps its
   top two, and the place number takes the free top-left corner (above the steering thumb it sat on the speedometer) ------------- */
html.phone.landscape .race-lap{right:calc(max(20px,var(--safe-right)) + 58px)}
html.phone.landscape .race-map{display:none}
html.phone.landscape .race-order li:nth-child(n+3){display:none}
html.phone.landscape .race-place{left:max(22px,var(--safe-left));top:max(12px,var(--safe-top));bottom:auto}
html.phone.landscape .race-place b{font-size:44px}
/* the top of a phone, thinner (the owner, 2026-09-28: "on mobile only: can you reduce the height of the top hud ... as needed"):
   the lap clock stood 114 px tall, a third of a 393 px screen, with room kept for an empty best lap and sector; it is one tight
   block now, and the order's two rows sit closer under the place */
html.phone.landscape .race-lap{top:max(8px,var(--safe-top));padding:3px 10px 4px 16px;min-width:0}
html.phone.landscape .race-lap-n{font-size:13px}
html.phone.landscape .race-clock{font-size:17px;margin-top:0}
html.phone.landscape .race-best{font-size:10px;min-height:0}
html.phone.landscape .race-sector{font-size:9px;min-height:0;margin-top:0}
html.phone.landscape .race-best:empty,html.phone.landscape .race-sector:empty{display:none}
html.phone.landscape .race-order{top:max(64px,calc(var(--safe-top) + 58px));width:170px;gap:2px}
html.phone.landscape .race-order li{padding:1px 8px 1px 4px;font-size:12px;line-height:1.2}
html.phone.landscape .race-order li b{font-size:11px}
html.phone.landscape .race-order li em{font-size:10px}
/* the grid's hint wraps into the space between the thumbs (one line of it ran under ITEM and DASH) */
html.phone.landscape .race-hint{white-space:normal;width:min(46vw,340px);box-sizing:border-box;font-size:12px;line-height:1.4;text-align:center;top:calc(24% + 80px)}

/* ---- the ship market and the coin store ------------------------------------------------------------------------------------- */
/* the header stays one row (brand left, the two buttons right) on every phone; below 600 px wide the market's own layout stacks it */
html.phone.landscape #mkHud{grid-template-areas:"brand back" "body body" "ships ships";grid-template-rows:auto minmax(0,1fr) auto;gap:6px;
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
html.phone.landscape #mkHud .fx-back{justify-self:end;gap:8px}
html.phone.landscape #mkHud .fx-back .btn{flex:none;min-height:38px;padding:8px 12px!important}
html.phone.landscape #store{padding:calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom))}
html.phone.landscape #store #stHud{max-height:100%;padding:14px 16px 16px}

/* ---- CRYSTAL CLASH on a notched phone. The duel is an iframe over the whole screen (crystal-page.js, inset 0), and a frame is not
   told the page's safe area (the notch, the home bar), so its side columns ran under the notch. The frame's own border takes the
   notch's width, in the match's own ink, and the match lays itself out inside it (crystal.css has the phone's layout). --------- */
html.phone #crystal-match{box-sizing:border-box!important;border-style:solid!important;border-color:#030914!important;
  border-width:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important}

/* ==============================================================================================================================
   PHONE, PORTRAIT: the menus, the Registry, the mint and the wallet (a match asks for landscape; see the prompt above)
   ============================================================================================================================== */
/* the wordmark set the menu column's minimum width, one wider than a 390 px phone: the column may shrink now, the type fits it */
html.phone.portrait #menuHud{grid-template-columns:minmax(0,1fr)}
html.phone.portrait #menuHud h1{font-size:clamp(20px,6.4vw,34px);letter-spacing:.12em;text-indent:.12em}
html.phone.portrait .mm-corner{flex-wrap:wrap;justify-content:flex-start;justify-self:stretch}
html.phone.portrait #menuHud .mm-nav .btn:not(.linkbtn){min-height:42px}
/* THE REGISTRY, UPRIGHT. ⚠ The panels are scroll boxes, so their grid rows may come out shorter than their text; aligned to the
   row's END (the narrow layout's rule) a panel then grew UPWARD over the ship's number. Stretched, it fills its row and scrolls
   inside it. The refit panel's short-window shrink (a desktop transform) is off, and MINT and EQUIP share one line. */
/* ⚠ top/left too: a cloned short-window rule (html.zh-745 #fleetRefit{top:70px}) outranks the narrow layout's top:auto, and on a
   relatively positioned panel it pushed the pitch 70 px down onto MINT. Upright, the pitch and the specification sit side by side
   (each half the width), which leaves the ship a band of its own above them, where frameShip puts it on a tall screen. */
html.phone #fleetRefit{transform:none!important}
html.phone.portrait #fleetRefit{left:auto;top:auto;width:auto;grid-area:refit}
html.phone.portrait #fleetHud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(56px,1fr) auto auto;
  grid-template-areas:"brand brand" "ident ident" "refit read" "foot foot"}
html.phone.portrait #fleetHud .fx-brand{max-width:40%}
html.phone.portrait #fleetHud .fx-eyebrow{display:none}
html.phone.portrait #fleetHud .fx-title{font-size:16px;letter-spacing:.18em}
html.phone.portrait #fleetHud .fx-back{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px}
html.phone.portrait #fleetHud .fx-read{align-self:stretch;min-height:0;max-height:40vh;overflow-y:auto}
html.phone.portrait .fx-actions{flex-direction:row;flex-wrap:wrap}
html.phone.portrait .fx-mint{flex:1 1 auto;width:auto;min-height:46px}
html.phone.portrait .fx-equip,html.phone.portrait .fx-market{flex:0 0 auto;width:auto}