/* Screen sizes (review 2026-10-07, Phase 5). Loaded last. js/layout.js sets --uiZ. */

/* M5: on big monitors the menus scale with the window (the raid HUD already does, via --hk): Crime Map, Loadout and the Black
   Market sat in a small block in the middle of a 1440p / ultrawide screen with 9-13 px text */
html.lay-desk #uiNav, html.lay-desk #uiTop, html.lay-desk #uiView > .screen, html.lay-desk #sheet .sheetWrap { zoom:var(--uiZ, 1); }
/* Bucket 1: popups and full-screen cards scale with the window too, times --fitZ (core.js UI.fitOverlays: shrink to fit a short window) */
#modal .mIn, #celebrate .ceIn { zoom:var(--fitZ, 1); }
html.lay-desk #modal .mIn, html.lay-desk #celebrate .ceIn { zoom:calc(var(--uiZ, 1) * var(--fitZ, 1)); }

/* M4: touch tablets in the in-between layout get a wide column instead of a 420-560 px phone column with art either side */
html.lay-wide.lay-touch { --colW:min(calc(100vw - 32px), 760px); }

/* M6: nothing in the menus below 11 px (phones showed 8-9 px labels on the Garage, Stash, Customize and dealer cards) */
.cell .n, .slot .nm, .slot .k, .cos .nm, .cos .q, .ring small, .pkS span, .tp .lk { font-size:11px; }
.garScr .garStats span, .garScr .tuneC small, .garScr .slotC small, .gpT small, .lo2Sl small, .loB small, .loSoon { font-size:11px; }
.resOne .resRew .rw small, .resOne .rchip, .resLoot .rlStrip .cell .n { font-size:11px; }
.cell .lv, .garScr .slotC .lvB { font-size:10.5px; }

/* E6 (review 2026-10-07): a tuning card that can't upgrade right now doesn't look ready */
.tuneC.blk { filter:saturate(.3) brightness(.82); }
.tuneC .tuneBuy.blk { background:linear-gradient(180deg,#6b7385,#4a5163); color:#e6ebf4; }
.tuneC .tuneBuy.blk svg { width:12px; height:12px; vertical-align:-1px; margin-right:2px; }

/* E5 (review 2026-10-07): the Loadout's Tune sheet and attachment pickers (character.js UI.tuneSheet / UI.attPick) */
.tuneSh { margin:6px 0 4px; }
.tuneSh .tuneC { padding:8px 3px 7px; }
.tuneSh .tuneC .ti { height:48px; } .tuneSh .tuneC .ti img, .tuneSh .tuneC .ti .art { width:50px; height:48px; }
.tuneSh .tuneC b { max-width:100%; overflow:hidden; text-overflow:ellipsis; } .tuneSh .tuneC small { font-size:11px; }
.atPick .ls { display:none; } .atPick .slotG { margin-bottom:6px; } .atPick .slotC small { font-size:11px; }
@media (max-width:560px) { .tuneSh { grid-template-columns:repeat(3,1fr); } }

/* H2 (review 2026-10-07): Skills tree. A card per branch; nodes show pips, effect, need and a Learn button. */
.skTree { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:12px 0; container:sk / inline-size; }
@container pg (min-width:700px) { .skTree { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); } }
.pgScr { container:pg / inline-size; }
.skBr { background:var(--panelBg, #123a72); border:3px solid var(--ol, #061226); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.skBr > header { display:flex; align-items:center; gap:8px; }
.skBr > header b { flex:1; font:400 18px/1 var(--fh); letter-spacing:.4px; color:#fff; text-shadow:var(--so2); }
.skBr > header small { font:800 12px var(--fb); color:#bcd3f5; }
.skBi { font-size:20px; }
.skN { position:relative; display:flex; flex-direction:column; gap:4px; padding:9px 10px; border-radius:12px; border:2px solid rgba(255,255,255,.14); background:rgba(4,16,40,.45); cursor:pointer; }
.skN.can { border-color:#ffd166; box-shadow:0 0 0 2px rgba(255,209,102,.25); }
.skN.max { border-color:#5fd39a; }
.skN.lock { opacity:.55; }
.skN.eq { box-shadow:inset 0 0 0 2px #9ae04a; }
.skNh { display:flex; align-items:center; gap:8px; }
.skNh b { flex:1; min-width:0; font:800 15px/1.2 var(--fb); color:#fff; }
.skP { font-size:13px; letter-spacing:2px; color:#ffd166; }
.skD { font:600 13px/1.35 var(--fb); color:#d6e4fb; }
.skS { font:800 12px/1.3 var(--fb); color:#bcd3f5; }
.skS.ok { color:#9ff0c8; } .skS.eq { color:#c6f28d; }
.skL { align-self:flex-start; min-height:36px; }

/* playtest 2026-10-08: a tall celebration card (Practice complete with unlock lists) scrolls instead of losing its button off-screen */
#celebrate { overflow-y:auto; align-items:safe center; }
#celebrate .ceIn { margin-block:auto; }

/* B5 (review 2026-10-07): Home fits one upright phone screen. Hero ~quarter height, tighter store/launch/menu, the player
   card and the Today / Horde cards side by side, menu badges on the button's corner (they covered "Crime Map"). */
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hub { grid-template-rows:auto clamp(130px, 23vh, 230px) auto auto auto; row-gap:8px; padding:6px 12px 12px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbLogo .logoArt { width:clamp(104px, 30vw, 140px); }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbIco { width:38px; height:38px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbSide { gap:7px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbStore { padding:7px 14px; border-radius:15px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbStore b { font-size:18px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbStore small { font-size:12px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbGo { height:58px; min-height:58px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbGo .hgI { width:42px; height:42px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbGo .hgT b { font-size:26px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbStrip { padding:5px 10px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbMenu { gap:6px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbM { min-height:44px; padding:3px 10px 4px 6px; gap:7px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbM .hmI { width:32px; height:30px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbM .hmT { font-size:17px; line-height:1.05; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbM .dot { left:auto; right:-5px; top:-15px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbMenu { row-gap:12px; padding-top:6px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbMe { padding:6px 10px 6px 6px; gap:8px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbAv { width:46px; height:46px; border-radius:12px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbWho { min-width:0; flex:1 1 auto; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbWho > b { font-size:18px; max-width:none; white-space:normal; overflow-wrap:anywhere; line-height:1.05; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbXp { width:100%; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbRank { width:38px; height:44px; font-size:19px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbCash { flex:none; padding-left:8px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbCash b { font-size:21px; }
html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbToday, html.lay-portrait:not(.lay-wide):not(.lay-desk) .hbHorde { padding:6px 12px; border-radius:15px; }

/* Bucket 1: on computer-sized windows a card with unlock lists uses two columns (title, chest and rewards left; rank and lists
   right; the button across the bottom), so it is short enough for a laptop at 100% zoom */
html.lay-desk #celebrate .ceIn:has(.ceList) { width:min(100%, 780px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-flow:row dense; column-gap:28px; row-gap:8px; align-items:center; justify-items:center; }
html.lay-desk #celebrate .ceIn:has(.ceList) > :is(.ceKick, .ceArt, .ceT, .ceS, .ceRew) { grid-column:1; }
html.lay-desk #celebrate .ceIn:has(.ceList) > .ceBody { grid-column:2; grid-row:1 / span 5; align-self:center; justify-self:stretch; }
html.lay-desk #celebrate .ceIn:has(.ceList) > :is(.ceGo, .ceAlt) { grid-column:1 / -1; justify-self:center; width:min(100%, 420px); }
.ceBody { display:contents; } /* phones and narrow windows: the body flows in the one column as before */
html.lay-desk #celebrate .ceIn:has(.ceList) > .ceBody { display:flex; flex-direction:column; align-items:center; gap:8px; }
html.lay-desk #celebrate .ceIn:has(.ceList) > .ceBody > .ceList { align-self:stretch; }