/* Device layouts (js/layout.js sets the html classes). Phone portrait is the design baseline and is untouched here.
   Computer version (approved mockups 2026-10-01): the raid fills the whole window on every device (render.js fairZoom keeps
   the island area the same as a phone); menus are a centred phone column on in-between sizes (lay-wide) and a sidebar with
   columns on computer-sized windows (lay-desk, >= 1100 x 560). */
html.lay-wide #app, html.lay-desk #app, html.lay-short #app { width:100vw; box-shadow:none; }

/* ---------- in-between sizes: menus in a centred phone column over the garage art ---------- */
html.lay-wide { --colW:clamp(420px, calc(100dvh * .52), 560px); }
html.lay-wide #ui, html.lay-wide #toasts { left:50%; right:auto; width:var(--colW); transform:translateX(-50%); }
html.lay-wide #ui.on ~ #modal, html.lay-wide #sheet { left:50%; right:auto; width:var(--colW); transform:translateX(-50%); }
html.lay-wide #app::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,40,.55),rgba(6,18,40,.8)), url("../assets/ui/bg-garage.webp") 50% 30%/cover no-repeat, #0b1f40; }
html.lay-wide #loading, html.lay-desk #loading { background-size:cover; }
html.lay-wide #app:has(> #ui.on) > #game { visibility:hidden; } /* the last raid frame must not show beside the menu column */

/* ---------- raid HUD on wide screens: overlay panels stay readable instead of stretching edge to edge ---------- */
html.lay-wide #hud .ov, html.lay-desk #hud .ov { left:50%; right:auto; width:min(560px, calc(100% - 16px)); transform:translateX(-50%); }
html.lay-wide #hud .ov.open, html.lay-desk #hud .ov.open { animation:none; }

/* ---------- phone on its side ---------- */
html.lay-short #hud { --gs:48px; --gg:8px; --deckB:calc(var(--sb) + 10px); }

/* ---------- key hints (computers): the bound key sits under each action button ---------- */
.gb .kh { display:none; }
html.lay-mouse #hud .gb .kh:not(:empty) { display:block; position:absolute; z-index:3; left:50%; bottom:-25px; transform:translateX(-50%); min-width:22px; padding:1px 6px 2px; box-sizing:border-box;
  border-radius:6px; background:#0d2a55; color:#ffd23f; border:2px solid var(--ol); box-shadow:0 2px 0 rgba(0,0,0,.35); font:900 11px/1.3 var(--fb); letter-spacing:.2px; white-space:nowrap; text-align:center; pointer-events:none; }
html.lay-mouse #hud { --gg:22px; --deckB:calc(var(--sb) + 32px); }
html.lay-mouse #hud.plane .gb .kh { display:none; }

/* =====================================================================================================================
   Computer menus (html.lay-desk): sidebar on the left, the top bar over the content, screens in columns.
   ===================================================================================================================== */
.dk { display:none !important; }
#uiNav .dkK { display:none; }
html.lay-desk { --sideW:clamp(208px, 15.5vw, 252px); --deskMax:1680px; }
html.lay-desk #ui.on { display:grid; grid-template-columns:var(--sideW) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"nav top" "nav view"; }
html.lay-desk #uiTop { grid-area:top; }
html.lay-desk #uiView { grid-area:view; }
html.lay-desk #ui.nonav #uiNav, html.lay-desk #ui.page #uiNav { display:flex; }
html.lay-desk #ui.page #uiTop { display:flex; }
html.lay-desk #ui.bare { grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "view"; }
html.lay-desk .pgHead .pgR .pgGold { display:none; } /* gold lives in the top bar on every computer screen */
html.lay-desk .tGoldS { display:none; }
/* toasts, sheets and dialogs centre over the content, not the sidebar */
html.lay-desk #toasts { left:var(--sideW); }
html.lay-desk #sheet { left:var(--sideW); }

/* ---------- the sidebar ---------- */
html.lay-desk #uiNav { grid-area:nav; flex-direction:column; align-items:stretch; gap:6px; padding:10px 10px 12px; border-top:0; border-right:3px solid var(--ol);
  background:linear-gradient(180deg,#123a73,#0b2650 70%,#0a2147); box-shadow:inset -2px 0 0 rgba(120,190,255,.18); overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
html.lay-desk #uiNav::-webkit-scrollbar { display:none; }
html.lay-desk #uiNav .dk { display:flex !important; }
html.lay-desk #uiNav .dk[hidden] { display:none !important; }
html.lay-desk #uiNav button { flex:none; position:relative; width:100%; height:clamp(36px, 5vh, 46px); padding:0 10px 0 6px; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; transform:none; border-radius:13px; }
html.lay-desk #uiNav button.on, html.lay-desk #uiNav button.on:active { transform:none; }
html.lay-desk #uiNav button:active { transform:translateY(1px); }
html.lay-desk #uiNav button .nIco { position:static; flex:none; width:36px; height:34px; transform:none; font-size:24px; }
html.lay-desk #uiNav button.on .nIco { transform:scale(1.08); }
html.lay-desk #uiNav button .nLbl { flex:1; min-width:0; text-align:left; font-size:clamp(14px, 1.9vh, 17px); overflow:hidden; text-overflow:ellipsis; }
html.lay-desk #uiNav button .dot { left:30px; top:2px; }
html.lay-desk #uiNav .dkK { display:none; }
html.lay-desk.lay-mouse #uiNav .dkK { display:block; flex:none; min-width:22px; padding:1px 6px 2px; border-radius:6px; background:rgba(4,14,34,.55); border:2px solid rgba(8,20,45,.9); color:#ffd23f; font:900 11px/1.3 var(--fb); text-align:center; text-shadow:none; }
html.lay-desk #uiNav button.on .dkK { background:rgba(80,40,0,.25); color:#4a2600; border-color:rgba(74,38,0,.5); }
html.lay-desk #uiNav .dkBrand { justify-content:center; padding:2px 6px 6px; }
html.lay-desk #uiNav .dkBrand .logoArt { width:min(100%, 150px, 15vh); height:auto; }
html.lay-desk #uiNav .dkBrand .txtLogo { font:400 22px/1 var(--fh); color:#fff; text-shadow:var(--so); }
html.lay-desk #uiNav .dkSep { flex:none; height:2px; margin:4px 6px; border-radius:1px; background:rgba(8,20,45,.6); }
html.lay-desk #uiNav .dkGrow { flex:1; min-height:8px; }
html.lay-desk #uiNav .dkX { background:linear-gradient(180deg,#235fa9,#174581); }
html.lay-desk #uiNav .dkFull { height:38px; background:rgba(4,14,34,.35); box-shadow:none; border-color:rgba(8,20,45,.6); }
html.lay-desk #uiNav .dkFull .dkFi { width:36px; text-align:center; font-size:20px; }
html.lay-desk #uiNav .dkFull .nLbl { font-size:14px; }
html.lay-desk #uiNav .dkRaid { height:clamp(58px, 8.4vh, 76px); margin-top:6px; padding:0 10px 0 4px; gap:4px; border:4px solid #3a0f02; border-radius:20px;
  background:linear-gradient(180deg,#ffb04a 0,#ff7a24 30%,#f2461c 78%,#d8321a 100%); box-shadow:inset 0 3px 0 rgba(255,236,190,.8), inset 0 -5px 0 rgba(120,20,0,.35), 0 4px 0 #3a0f02; }
html.lay-desk #uiNav .dkRaid .hrI { width:clamp(40px, 6vh, 56px); height:clamp(40px, 6vh, 56px); flex:none; display:flex; align-items:center; justify-content:center; font-size:30px; }
html.lay-desk #uiNav .dkRaid .hrI img, html.lay-desk #uiNav .dkRaid .hrI .art { width:100%; height:100%; object-fit:contain; }
html.lay-desk #uiNav .dkRaid .hrT { flex:1; text-align:left; font:400 clamp(24px, 3.6vh, 32px)/1 var(--fh); letter-spacing:1px; color:#fff; text-shadow:0 3px 0 #3a0f02,0 -2px 0 #3a0f02,2px 0 0 #3a0f02,-2px 0 0 #3a0f02,0 4px 0 #3a0f02; }
html.lay-desk.lay-mouse #uiNav .dkRaid .dkK { background:rgba(58,15,2,.45); border-color:#3a0f02; color:#fff; }
html.lay-desk #ui[data-scr="confirm"] #uiNav .dkRaid { display:none !important; } /* the Loadout has its own Raid button */

/* ---------- pop-up panels open as a side panel on the right (item details, station panels, store...) ---------- */
html.lay-desk #sheet { justify-content:flex-end; align-items:stretch; background:rgba(4,14,34,.38); }
html.lay-desk #sheet.bzSheet { background:transparent; }
html.lay-desk #sheet .sheetWrap, html.lay-desk #sheet.bzSheet .sheetWrap { width:min(460px, 36vw); max-height:none; height:100%; border-radius:22px 0 0 22px; border-right:0; border-bottom:3px solid var(--ol); animation:sheetSide .2s cubic-bezier(.2,.9,.3,1); }
html.lay-desk #sheet .sheetWrap::before { display:none; }
html.lay-desk #sheet .sheetWrap > .sheetIn { overflow-y:auto; flex:1 1 auto; }
@keyframes sheetSide { from { transform:translateX(48px); opacity:0; } }
html.lay-desk #modal .mIn { max-width:440px; }

/* ---------- shared: columns, readable widths, item grids ---------- */
html.lay-desk .screen { padding:16px 22px 28px; }
html.lay-desk .dkCols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 22px; align-items:start; max-width:var(--deskMax); margin:0 auto; }
html.lay-desk .dkCol { min-width:0; }
html.lay-desk .igrid { grid-template-columns:repeat(auto-fill, minmax(clamp(78px, 6.2vw, 104px), 1fr)); }
html.lay-desk .igrid.lo2Grid, html.lay-desk .igrid.bayGrid { grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
/* full pages (Profile, Settings, Jobs, Leaderboards, Messages, Map...): one readable column */
html.lay-desk .pgScr { max-width:980px; margin:0 auto; }
html.lay-desk .pgHead { position:static; background:none; border:0; box-shadow:none; padding-left:0; padding-right:0; }

/* ---------- Home ---------- */
html.lay-desk .dkHome .hLogo, html.lay-desk .dkHome .hBar, html.lay-desk .dkHome .hClock { display:none; }
html.lay-desk .dkHome { --colW:clamp(330px, 27vw, 420px); }
html.lay-desk .dkHome .hStage { left:4%; right:calc(var(--colW) + 24px + 4%); top:calc(90px + 6vh); bottom:110px; }
html.lay-desk .hDesk { position:absolute; z-index:4; right:18px; top:74px; bottom:16px; width:var(--colW); display:flex; flex-direction:column; gap:12px; overflow-y:auto; scrollbar-width:none; text-align:left; }
html.lay-desk .hDesk::-webkit-scrollbar { display:none; }
html.lay-desk .hDesk .panel { margin:0; padding:12px 14px 14px; }
html.lay-desk .hDesk .ph { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
html.lay-desk .hDesk .ph b { font:400 20px/1 var(--fh); color:#fff; text-shadow:var(--so2); }
html.lay-desk .hDesk .ph .mut { font:800 12px var(--fb); text-align:right; }
html.lay-desk .hdBar { display:grid; grid-template-columns:76px minmax(0,1fr) 44px; align-items:center; gap:8px; margin:4px 0; font:800 13px var(--fb); color:var(--mut); }
html.lay-desk .hdBar .bar { height:12px; }
html.lay-desk .hdBar b { font:400 15px var(--fh); text-align:right; color:#fff; }
html.lay-desk .hDesk .h3 { margin:10px 0 6px; }
html.lay-desk .hdBay { gap:6px; cursor:pointer; }
html.lay-desk .hdBay .cell { pointer-events:none; }
html.lay-desk .hDesk .note { margin:8px 0 10px; }
html.lay-desk .hdGo { position:relative; width:100%; height:clamp(64px, 9vh, 84px); display:flex; align-items:center; justify-content:center; gap:6px; border:4px solid #3a0f02; border-radius:22px;
  background:linear-gradient(180deg,#ffb04a 0,#ff7a24 30%,#f2461c 78%,#d8321a 100%); box-shadow:inset 0 3px 0 rgba(255,236,190,.8), inset 0 -6px 0 rgba(120,20,0,.35), 0 5px 0 #3a0f02; animation:raidPulse 2.4s ease-in-out infinite; }
html.lay-desk .hdGo[disabled] { filter:grayscale(.7); animation:none; }
html.lay-desk .hdGo .hrI { width:clamp(48px, 7vh, 64px); height:clamp(48px, 7vh, 64px); display:flex; align-items:center; justify-content:center; font-size:40px; }
html.lay-desk .hdGo .hrI img, html.lay-desk .hdGo .hrI .art { width:100%; height:100%; object-fit:contain; }
html.lay-desk .hdGo .hrT { font:400 clamp(32px, 5vh, 44px)/1 var(--fh); letter-spacing:1.5px; color:#fff; text-shadow:0 4px 0 #3a0f02,0 -3px 0 #3a0f02,3px 0 0 #3a0f02,-3px 0 0 #3a0f02,0 6px 0 #3a0f02; }
html.lay-desk .hdGo .dkK, html.lay-desk .hdRow .dkK { display:none; }
html.lay-desk.lay-mouse .hdGo .dkK { display:block; position:absolute; right:12px; bottom:8px; padding:1px 6px 2px; border-radius:6px; background:rgba(58,15,2,.45); border:2px solid #3a0f02; color:#fff; font:900 11px/1.3 var(--fb); }
html.lay-desk .hdRow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
html.lay-desk .hdRow .btn { position:relative; min-height:48px; font-size:17px; gap:8px; }
html.lay-desk .hdRow .btnI { width:30px; height:30px; object-fit:contain; }
html.lay-desk.lay-mouse .hdRow .dkK { display:block; position:absolute; right:8px; bottom:4px; padding:0 5px 1px; border-radius:5px; background:rgba(4,14,34,.5); color:#ffd23f; font:900 10px/1.3 var(--fb); }
html.lay-desk .hdJob { width:100%; display:flex; align-items:center; gap:10px; padding:8px 4px; background:none; border:0; border-top:2px solid rgba(8,20,45,.35); text-align:left; color:#fff; }
html.lay-desk .hdJob:first-of-type { border-top:0; }
html.lay-desk .hdJob .hjI { width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; font-size:28px; }
html.lay-desk .hdJob .hjI img, html.lay-desk .hdJob .hjI .art { width:100%; height:100%; object-fit:contain; }
html.lay-desk .hjT { flex:1; min-width:0; display:flex; flex-direction:column; }
html.lay-desk .hjT b { font:400 16px/1.15 var(--fh); text-shadow:var(--so2); }
html.lay-desk .hjT small { font:800 12px var(--fb); color:var(--mut); }
html.lay-desk .hjN { font:400 16px var(--fh); color:#fff; } html.lay-desk .hjN.ok { color:var(--grn); }
html.lay-desk .hdHorde { width:100%; display:flex; align-items:center; gap:12px; text-align:left; color:#fff; cursor:pointer; background:linear-gradient(180deg,#3a2a7a,#251a55); }
html.lay-desk .hdHorde.soon { background:linear-gradient(180deg,#8a4a12,#5a2c08); } html.lay-desk .hdHorde.live { background:linear-gradient(180deg,#a32418,#6a120c); }
html.lay-desk .hdHorde .hhI { font-size:36px; flex:none; }
html.lay-desk .hdName { position:absolute; z-index:3; left:calc((100% - var(--colW) - 24px) / 2); bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 22px; border-radius:18px; border:3px solid var(--ol); background:linear-gradient(180deg,#123a73,#0b2650); box-shadow:0 4px 0 rgba(0,0,0,.35); color:#fff; white-space:nowrap; }
html.lay-desk .hdName b { font:400 26px/1 var(--fh); text-shadow:var(--so); }
html.lay-desk .hdName small { font:800 13px var(--fb); color:var(--mut); }
html.lay-desk .hdPow { font:400 20px var(--fh); color:#ffd23f; text-shadow:var(--so2); }

/* ---------- Garage: the car and its numbers left, tuning / armor / weapons right ---------- */
html.lay-desk .dkGar { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
html.lay-desk .dkGar .gStage { margin:0 0 12px; min-height:clamp(300px, 44vh, 470px); border:3px solid var(--ol); border-radius:20px; overflow:hidden; }
html.lay-desk .dkGar .garInfo { margin:-26px 10px 12px; }
html.lay-desk .dkGar .dkCol2 > .h3:first-child { margin-top:2px; }

/* ---------- Stash: the stash left, the car (supply bay, cargo, glovebox) right ---------- */
html.lay-desk .dkStash { grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); }
html.lay-desk .stCar { position:sticky; top:0; padding:12px 14px 14px; }
html.lay-desk .stCar .ph { display:flex; align-items:center; justify-content:space-between; gap:8px; }
html.lay-desk .stCar .ph b { font:400 20px var(--fh); color:#fff; text-shadow:var(--so2); }
html.lay-desk .stCar .igrid { grid-template-columns:repeat(6, minmax(0,1fr)) !important; gap:6px; }
html.lay-desk .stCar .cell .n { display:none; }

/* ---------- Traders: who's in town on the left, their shop on the right ---------- */
html.lay-desk .trScr { display:grid; grid-template-columns:clamp(150px, 12vw, 200px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:0 20px; align-items:start; max-width:var(--deskMax); margin:0 auto; }
html.lay-desk .trScr > * { grid-column:2; }
html.lay-desk .trScr > .trRowW { grid-column:1; grid-row:1 / span 2; position:sticky; top:0; }
html.lay-desk .trRowW .trArr { display:none; }
html.lay-desk .trRow { flex-direction:column; align-items:center; overflow:visible; padding:4px 0; }
html.lay-desk .trRow .tp { width:auto; }


/* ---------- Market: categories left, the listings table right ---------- */
html.lay-desk .mkScr { display:grid; grid-template-columns:clamp(150px, 12vw, 190px) minmax(0,1fr); column-gap:20px; align-items:start; max-width:var(--deskMax); margin:0 auto; }
html.lay-desk .mkScr > * { grid-column:2; }
html.lay-desk .mkScr > #marketCats { grid-column:1; grid-row:1 / span 12; position:sticky; top:0; flex-direction:column; flex-wrap:nowrap; align-items:stretch; overflow:visible; padding:0; margin:0; }
html.lay-desk .mkScr > #marketCats button { width:100%; text-align:left; justify-content:flex-start; }

/* ---------- Loadout: the car | gear and supply bay | insurance and RAID ---------- */
html.lay-desk .lo2 { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(280px,.8fr); grid-template-rows:auto auto auto minmax(0,1fr); gap:12px 20px; align-content:start; max-width:var(--deskMax); margin:0 auto; min-height:0; }
html.lay-desk .lo2 > .pgHead { grid-column:1 / -1; }
html.lay-desk .lo2 > .lo2Hero { grid-column:1; grid-row:2 / span 3; max-height:none; min-height:clamp(320px, 56vh, 620px); }
html.lay-desk .lo2 > .lo2Slots { grid-column:2; grid-row:2; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; }
html.lay-desk .lo2 > .lo2Cargo { grid-column:2; grid-row:3; margin:0; }
html.lay-desk .lo2 > .lo2Raid { grid-column:3; grid-row:2; margin:0; }
html.lay-desk .lo2 > .stick { grid-column:3; grid-row:3; position:static; padding:0; background:none; border:0; box-shadow:none; }
html.lay-desk .lo2 > .stick .btn.lg { min-height:76px; font-size:30px; }

/* ---------- Base: the station list on the left, the 3D compound beside it, the station panel slides in on the right ---------- */
html.lay-desk #bzRoot { --bzL:clamp(230px, 18vw, 290px); }
html.lay-desk #bzRoot .bzDock { display:flex; flex-direction:column; left:0; right:auto; top:0; bottom:0; width:var(--bzL); padding:12px 10px; background:linear-gradient(180deg,#123a73,#0b2650); border-right:3px solid var(--ol); box-sizing:border-box; z-index:4; }
html.lay-desk #bzRoot.panel .bzDock { opacity:1; pointer-events:auto; }
html.lay-desk #bzRoot .bzHint { order:2; margin:8px 2px 0; font:800 12px var(--fb); color:var(--mut); }
html.lay-desk #bzRoot .bzChips { flex:1; flex-direction:column; gap:7px; padding:0; overflow-x:hidden; overflow-y:auto; touch-action:pan-y; }
html.lay-desk #bzRoot .bzChip { width:auto; padding:8px 10px; }
html.lay-desk #bzRoot .bzChip .t { font-size:15px; }
html.lay-desk #bzRoot .bzChip .s { font-size:12px; }
html.lay-desk #bzRoot .bz3, html.lay-desk #bzRoot .bzOv { left:var(--bzL); }
html.lay-desk #bzRoot .bzInfo, html.lay-desk #bzRoot .bzDefBtn { left:calc(var(--bzL) + 10px); }
html.lay-desk #bzRoot .bzHint3 { left:calc(50% + var(--bzL) / 2); }
/* 2D fallback (SCENE3D missed its 7 s window, ui/base.js): the same side list, pills and buttons as the 3D view (audit ws6-06) */
html.lay-desk #bzRoot canvas.bzCv { left:var(--bzL); width:calc(100% - var(--bzL)); }
html.lay-desk #bzRoot:not(.b3d) .bzTop { display:none; }
html.lay-desk #bzRoot:not(.b3d) .bzInfo { display:flex; }
html.lay-desk #bzRoot:not(.b3d) .bzCollectAll, html.lay-desk #bzRoot:not(.b3d) .bzHint3 { display:block; }
html.lay-desk #bzRoot:not(.b3d):not(.panel) .bzDefBtn { opacity:1; pointer-events:auto; }
/* Horde Night siege HUD and trap placement sit over the map, not the list; the list and Production & sales step aside (ws6-14) */
html.lay-desk #bzRoot .hnHud { left:var(--bzL); }
html.lay-desk #bzRoot .bzPlace { left:calc(var(--bzL) + 10px); }
#bzRoot.horde .bzChips, #bzRoot.horde .bzHint, #bzRoot.horde #baseBusinessBtn { visibility:hidden; pointer-events:none; }
/* the station side panel leaves the list and the map clickable: another station opens with one click (audit ws6-13) */
html.lay-desk #sheet.bzSheet { pointer-events:none; } html.lay-desk #sheet.bzSheet .sheetWrap { pointer-events:auto; }
/* progress on the map readable on desktop (audit ws6-25): bubbles keep their countdown when zoomed out; thicker list bars */
html.lay-desk #bzOv.tight .bzBub { padding:3px 9px 4px 3px; gap:5px; border-radius:14px; }
html.lay-desk #bzOv.tight .bzBub .bt { display:flex; }
html.lay-desk #bzOv.tight .bzBub .bn { display:none; }
html.lay-desk #bzOv.tight .bzBub::after { left:22px; margin-left:0; }
html.lay-desk #bzRoot .bzBub .bt b { font-size:16px; color:#ffe27a; }
html.lay-desk #bzRoot .bzChip .pb { height:6px; border-radius:3px; background:rgba(255,255,255,.18); }

/* ---------- Traders / Loadout fixes ---------- */
html.lay-desk .trScr .shopGrid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; gap:10px !important; }
html.lay-desk .lo2 > .lo2Raid { align-self:start; }
html.lay-desk .lo2 > .stick { align-self:start; }
html.lay-desk #uiNav button.dkX.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 55%,var(--yl3)); }

/* ---------- HUD scale (computers): the fixed HUD clusters grow with the window height (layout.js --hk) and the HUD size
   setting (prefs.js --hudU). CSS zoom scales each cluster's size and its distance from its screen edge together, so the
   layout stays the same as on a phone, just bigger. Elements the HUD positions from code (wheel menu, markers, the map
   and cargo panels) are left alone. ---------- */
html.lay-mouse #hud > :is(#hTop, #bMap, #bMenu, #hGrid, #hCombo, #hGuide, #hMsgs, #hBanner, #hXt, #hGold, #hHp, #hPrompt, #hGm, #ovMenu) { zoom:calc(var(--hk, 1) * var(--hudU, 1)); }

/* key names in Settings > Keyboard (the in-raid menu's buttons inherit the HUD's colours otherwise) */
.prefs button.pKc, #hud .prefs button.pKc { color:#0b1a33; font:900 13px/1.2 "Nunito",system-ui,sans-serif; }
.prefs button.pKc.wait, #hud .prefs button.pKc.wait { color:#4a2600; }

/* ---------- ultrawide: menu content stops at --deskMax and stays centred; the sides show the garage art, softened ---------- */
@media (min-width:1960px) {
  html.lay-desk #ui.on { --side:calc((100% - var(--sideW) - var(--deskMax)) / 2);
    background:linear-gradient(90deg, rgba(13,44,90,.6) var(--sideW), rgba(13,44,90,.95) calc(var(--sideW) + var(--side) + 30px), rgba(13,44,90,.95) calc(100% - var(--side) - 30px), rgba(13,44,90,.6)),
      url("../assets/ui/bg-garage.webp") 50% 40% / cover no-repeat, #0d2c5a; }
}
/* a station panel is open: the 3D compound shrinks to the space beside it, so the chosen building sits in the middle of what you see */
html.lay-desk #bzRoot.panel .bz3, html.lay-desk #bzRoot.panel .bzOv { right:min(460px, 36vw); }

/* =====================================================================================================================
   Desktop shell pass (audit v2 fix-shell, 2026-10-05): first-launch cards, Home fit, raid menu width, bigger desktop
   type, keyboard focus. Everything here is html.lay-desk (or focus-only), so phones are untouched.
   ===================================================================================================================== */
/* first launch (ws8-11 / ws1-13 / ws9-21): centred cards instead of the phone column stretched edge to edge */
html.lay-desk .gate { align-items:center; }
html.lay-desk .gate > * { width:100%; max-width:640px; box-sizing:border-box; }
html.lay-desk .gate > .gCard { max-width:460px; padding:18px 20px; }
html.lay-desk .gate > .gLogo, html.lay-desk .gate > .logo { max-width:none; }
html.lay-desk .gate .modeC { padding:16px 18px; }
/* first car: the big 3D car on the left; stats, loadout, paint, name and Start on the right, all above the fold */
html.lay-desk .suScr { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr); grid-template-areas:"h h" "n n" "stage stats" "stage load" "stage paint" "stage name" "stage go"; gap:0 22px; align-content:center; max-width:1320px; min-height:100%; margin:0 auto; box-sizing:border-box; padding-left:28px; padding-right:28px; }
html.lay-desk .suScr > .h2 { grid-area:h; } html.lay-desk .suScr > .note { grid-area:n; margin-bottom:12px; }
html.lay-desk .suScr > .carStage { grid-area:stage; align-self:stretch; display:flex; flex-direction:column; margin:0 0 10px; min-height:clamp(340px, 52vh, 620px); }
html.lay-desk .suScr > .carStage .setupPrev { flex:1; height:auto; min-height:300px; }
html.lay-desk .suScr > .suStats { grid-area:stats; } html.lay-desk .suScr > .suLoad { grid-area:load; } html.lay-desk .suScr > .suPaintP { grid-area:paint; } html.lay-desk .suScr > .suNameP { grid-area:name; }
html.lay-desk .suScr > .panel { margin:0 0 10px; }
html.lay-desk .suScr > .suStick { grid-area:go; margin:0; padding:0; }
html.lay-desk .suScr .swatches { grid-template-columns:repeat(6, minmax(0, 54px)); justify-content:space-between; gap:10px; }

/* Home at 900 px tall (ws8-12): the right column fits, and shows a thin scrollbar when it still can't */
html.lay-desk .hDesk { scrollbar-width:thin; scrollbar-color:rgba(150,200,255,.5) transparent; }
@media (max-height:1000px) {
  html.lay-desk .hDesk { top:68px; bottom:10px; gap:8px; }
  html.lay-desk .hDesk .panel { padding:9px 12px 10px; }
  html.lay-desk .hDesk .ph { margin-bottom:5px; }
  html.lay-desk .hDesk .h3 { margin:6px 0 4px; }
  html.lay-desk .hDesk .note { margin:6px 0 8px; }
  html.lay-desk .hdBar { margin:2px 0; }
  html.lay-desk .hdGo { height:clamp(56px, 7.4vh, 72px); }
  html.lay-desk .hdRow { margin-top:8px; }
  html.lay-desk .hdRow .btn { min-height:44px; }
  html.lay-desk .hdJob { padding:5px 4px; }
  html.lay-desk .hdJob .hjI { width:34px; height:34px; }
}

/* in-raid menu (ws8-16): a wide card on a computer, settings in two columns (Keyboard on its own, as a 2-column grid) */
html.lay-desk #ovMenu .mCard { max-width:960px; }
html.lay-desk #ovMenu #mPrefs .prefs { display:block; columns:2; column-gap:22px; }
html.lay-desk #ovMenu #mPrefs .prefs > * { break-inside:avoid; margin:0 0 6px; }
html.lay-desk #ovMenu #mPrefs .prefs > .pSec { break-after:avoid; margin:8px 2px 6px; }
html.lay-desk #ovMenu #mPrefs .prefs > .pSec:first-child { margin-top:0; }
html.lay-desk #ovMenu #mPrefs .prefs > .pSec:has(+ .pKeys) { break-before:column; margin-top:0; }
html.lay-desk #ovMenu #mPrefs .pKeys { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
html.lay-desk #ovMenu #mPrefs .pKeys .pKReset { grid-column:1 / -1; }
html.lay-desk #ovMenu #mPrefs .pKey { padding:6px 8px; gap:6px; }

/* keyboard (ws8-04 / ws8-05): tappable tiles that are now focusable get the same yellow ring as buttons, and a pointer */
[data-a][role="button"]:not(button) { cursor:pointer; }
[data-a][role="button"]:not(button):focus-visible, #ovMenu .mCard button:focus-visible, #ovMenu .mCard input:focus-visible { outline:3px solid #ffd23f; outline-offset:2px; }
.cell[role="button"]:focus-visible { outline-offset:1px; }

/* wide screens (ws8-22): Garage, Traders and Stash use the space */
html.lay-desk .dkGar .gStage { min-height:clamp(320px, 50vh, 620px); }
html.lay-desk .dkGar .tuneC { padding:10px 4px 8px; }
html.lay-desk .dkGar .tuneC .ti { height:clamp(42px, 6vh, 66px); }
html.lay-desk .dkGar .tuneC .ti img, html.lay-desk .dkGar .tuneC .ti .art { width:clamp(44px, 6.4vh, 70px); height:clamp(42px, 6vh, 66px); }
html.lay-desk .dkGar .tuneC b { font-size:clamp(13px, 1.6vh, 16px); }
html.lay-desk .dkGar .slotC { padding:10px 4px 9px; }
html.lay-desk .dkGar .slotC .si { height:clamp(50px, 7vh, 76px); }
html.lay-desk .dkGar .slotC .si img, html.lay-desk .dkGar .slotC .si .art { width:clamp(54px, 7.4vh, 80px); height:clamp(50px, 7vh, 76px); }
html.lay-desk .dkGar .slotC b { font-size:clamp(13px, 1.6vh, 16px); }
html.lay-desk .dkGar .h3 { margin-top:14px; }
html.lay-desk .trScr { grid-template-columns:clamp(196px, 15vw, 264px) minmax(0,1fr); }
html.lay-desk .trRow { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); justify-items:center; gap:10px 8px; }
html.lay-desk .trRow .tp { width:100%; max-width:120px; }
html.lay-desk .trRow .tp .av { width:100%; height:auto; aspect-ratio:84 / 104; }
html.lay-desk .trScr .shopGrid { grid-template-columns:repeat(auto-fill, minmax(clamp(160px, 12.5vw, 230px), 1fr)) !important; gap:12px !important; }
html.lay-desk .trScr .shop { padding:6px 6px 7px !important; }

/* readable type on a computer (ws8-23): nothing under 11 px in the menus */
html.lay-desk .cell .n { font-size:11px; line-height:1.05; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:clip; word-break:break-word; }
html.lay-desk .cell .e { inset:5% 8% 24%; }
html.lay-desk .bayGrid .bayE small { font-size:11px; letter-spacing:0; white-space:normal; line-height:1.05; text-align:center; padding:0 2px; }
html.lay-desk .tXp { height:18px; } html.lay-desk .tXp em { font-size:11px; line-height:13px; }
html.lay-desk .statg span { font-size:11px; }
html.lay-desk .tuneC small, html.lay-desk .slotC small, html.lay-desk .gpT small, html.lay-desk .lo2Sl small { font-size:11px; }
html.lay-desk .lo2Slots { row-gap:19px; } html.lay-desk .lo2Sl small { color:#bcd6f5; }
html.lay-desk #uiTop.onHome .tXp { height:18px; } html.lay-desk #uiTop.onHome .tXp em { font-size:11px; line-height:13px; }
html.lay-desk .ring small { font-size:11px; }
html.lay-desk .giName small, html.lay-desk .giFam { font-size:12px; }
html.lay-desk .trScr .shop .sn { font-size:12.5px !important; }
html.lay-desk .trScr .shop .sl, html.lay-desk .trScr .shop .why, html.lay-desk .shop .sl, html.lay-desk .shop .why { font-size:11px !important; }
html.lay-desk .mtH, html.lay-desk .mtH span { font-size:11.5px; }
html.lay-desk .mtR .it .s, html.lay-desk .grow > .s, html.lay-desk .pr small { font-size:12px; }
html.lay-desk.lay-mouse #uiNav .dkK, html.lay-desk.lay-mouse .hdRow .dkK { font-size:11px; }
html.lay-desk .bzLbl.plus .nm, html.lay-desk #bzOv.tight .bzLbl.tag .nm, html.lay-desk .bzPill span, html.lay-desk .trSign .rs span, html.lay-desk .q2P b, html.lay-desk .cc span,
html.lay-desk .btn small, html.lay-desk .prodFund small, html.lay-desk .gSeed small, html.lay-desk .shAd small, html.lay-desk .resRew .rw small, html.lay-desk .hnNext small, html.lay-desk .cm small, html.lay-desk .qStats small, html.lay-desk #crateOv .card small { font-size:11px; } /* verify 2026-10-06: Hideout labels and pills, trader restock, queue chips */