/* loadout (UX redesign 2026-10-06): rig | car | appearance + skills on a computer, stacked on a phone (js/ui/loadout.js) */
.lo3 .pgR { display:flex; align-items:center; gap:8px; }
.loSw { display:flex; align-items:center; gap:4px; }
.loSw .btn { width:34px; height:36px; padding:0; }
.loSwN { font:400 14px var(--fh); color:#fff; text-shadow:var(--so2); min-width:30px; text-align:center; }

.loGrid { display:flex; flex-direction:column; gap:12px; }
.loMid { order:-1; } /* phone: the car first */
.loRig, .loSide, .loMid { min-width:0; display:flex; flex-direction:column; gap:8px; }
.loH { margin:4px 0 0; font:400 20px/1 var(--fh); color:var(--yl1); text-shadow:var(--so); letter-spacing:.5px; }
.loH::before { content:"// "; color:#fff; }

/* tiles: bevelled blue panels */
.loTile { position:relative; display:flex; align-items:center; gap:10px; min-width:0; box-sizing:border-box; padding:10px 12px; border-radius:14px; border:3px solid var(--ol);
  background:var(--panelBg); box-shadow:var(--panelSh); color:#fff; font:700 14px var(--fb); text-align:left; }
button.loTile { cursor:pointer; transition:transform .08s, filter .08s; }
button.loTile:hover { filter:brightness(1.08); } button.loTile:active { transform:translateY(1px); }
.loTile small { display:block; font:800 11px/1.1 var(--fb); color:var(--mut); text-transform:uppercase; letter-spacing:.6px; }
.loTile b { display:block; font:400 18px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* car tile */
.loCarT { flex-wrap:wrap; }
.loCarTx { flex:1 1 140px; min-width:0; }
.loCarTx b { font-size:24px; }
.loCarTx span { font:700 12px var(--fb); color:var(--mut); }
.loLinks { display:flex; flex-wrap:wrap; gap:6px; }
.loLinks .btn { white-space:nowrap; }

/* gun mounts: Roof and Hood full width, Left and Right side by side (the mockup) */
.loGuns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.loGun:nth-child(-n+2) { grid-column:1 / -1; }
.loGi { flex:0 0 auto; width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(8,20,45,.45); box-shadow:inset 0 2px 0 rgba(0,0,0,.3); }
.loGi .ic { width:52px; height:52px; }
.loGi.e { border:2.5px dashed rgba(170,215,255,.6); background:rgba(8,20,45,.25); font:400 30px var(--fh); color:#cfe6ff; }
.loGi.lk svg { width:22px; height:22px; opacity:.8; }
.loGt { min-width:0; flex:1; }
.loGt em { display:block; font:400 15px var(--fh); font-style:normal; color:var(--mut); }
.loGt em.lv { color:var(--yl1); text-shadow:var(--so2); }
.loGun.e b { color:#d9ecff; }
.loGun.lk { filter:saturate(.55) brightness(.85); }

/* attachments / gadgets / deployables / ammo */
.loMinis { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } /* Bucket 6: 5 tiles (Weapons added) */
.loMinis .loMini { padding-inline:2px; } .loMinis .loMini small { font-size:9px; letter-spacing:0; } .loMini .loUp { display:inline-block; vertical-align:3px; margin-left:5px; min-width:22px; height:19px; padding:0 5px; border-radius:10px; background:linear-gradient(180deg,#8ff56a,#3fbf2a); border:2px solid #fff; color:#fff; font:900 11px/15px var(--fb); letter-spacing:0; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,.45); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.loMini { flex-direction:column; justify-content:space-between; gap:4px; padding:8px 4px; text-align:center; }
.loMini small { font-size:10px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.loMi { height:40px; display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; }
.loMi svg { width:30px; height:30px; } .loMi .ic { width:40px; height:40px; }
.loMini b { font-size:18px; color:var(--yl1); }

/* supplies (UI.bayCells) */
.loBayP { flex-direction:column; align-items:stretch; gap:6px; }
.loBayH { display:flex; align-items:center; justify-content:space-between; }
.loBay { margin:0; }

/* center: the car on its stage */
.loStage { position:relative; border-radius:18px; border:3px solid var(--ol); overflow:hidden; aspect-ratio:16 / 10; min-height:220px;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.28),transparent 60%),linear-gradient(180deg,#5eaaf0,#1d5aa6); box-shadow:inset 0 2px 0 var(--pnHi),0 3px 0 rgba(4,12,30,.55); }
.loCar3 { position:absolute; inset:0; }
.loCar3 canvas { width:100%; height:100%; display:block; }
.loPlate { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:16px; border:3px solid var(--ol); background:var(--panelBg); box-shadow:var(--panelSh); }
.loPlate > b { font:400 28px/1 var(--fh); color:#fff; text-shadow:var(--so); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loChips { display:flex; gap:6px; }
.loChips .lo2Ch { font-size:15px; padding:5px 11px 6px; cursor:pointer; }
.loChips .lo2Ch svg { width:15px; height:15px; }

/* preset bar (Phase 2: display only) */
.loPreset { display:flex; flex-direction:column; align-items:center; gap:4px; }
.loPreBar { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; max-width:440px; box-sizing:border-box; padding:8px 10px; border-radius:999px; border:3px solid var(--ol);
  background:linear-gradient(180deg,var(--bl1),var(--bl2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 rgba(4,12,30,.55); }
.loPreBar b { font:400 20px var(--fh); color:#fff; text-shadow:var(--so); }
.loPreA { width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:var(--yl1); opacity:.5; display:flex; align-items:center; justify-content:center; }
.loPreA svg { width:22px; height:22px; }
.loPreset small { font:800 12px var(--fb); color:var(--mut); }

/* appearance */
.loApps { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.loApp { padding:8px; }
.loAi { flex:0 0 auto; width:54px; height:54px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:30px; background:rgba(8,20,45,.4); }
.loAi img.art { width:100%; height:100%; object-fit:cover; }
.loAt { min-width:0; flex:1; }
.loApp.soon .loAi { filter:grayscale(.7) brightness(.85); }
.loApp.soon b { color:var(--dim); }
.loSoon { position:absolute; right:6px; top:6px; font:800 9px/1 var(--fb); font-style:normal; text-transform:uppercase; letter-spacing:.4px; padding:3px 6px; border-radius:8px; background:var(--ol); color:var(--yl1); }

/* skills */
.loSk { flex-direction:column; align-items:stretch; gap:8px; }
.loBr { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.loB { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.loBi { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; background:linear-gradient(180deg,#123d78,#0b2a58); border:2.5px solid var(--ol); box-shadow:inset 0 2px 0 rgba(140,205,255,.3); }
.loB small { font-size:9px; letter-spacing:.2px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; }
.loB b { min-width:30px; text-align:center; padding:1px 6px; border-radius:8px; background:var(--ol); color:var(--yl1); font-size:17px; }
.loSkF { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.loPts { font:400 16px var(--fh); color:var(--yl1); text-shadow:var(--so2); padding:3px 10px; border-radius:999px; background:rgba(8,20,45,.55); border:2px solid var(--yl2); }
.loPts.none { color:var(--mut); border-color:transparent; font:800 12px var(--fb); }

/* character picker sheet */
.loChars { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; }
.loCh { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:12px; border:3px solid var(--ol); background:var(--panelBg); box-shadow:var(--panelSh); text-align:center; }
.loCh.on { cursor:pointer; box-shadow:var(--panelSh),0 0 0 3px var(--yl2); }
.loCh.lk { filter:saturate(.4); opacity:.75; }
.loChA { width:60px; height:60px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:34px; background:rgba(8,20,45,.45); }
.loChA img.art { width:100%; height:100%; object-fit:cover; }
.loCh b { font:400 15px var(--fh); color:#fff; text-shadow:var(--so2); }
.loCh small { font:800 10px var(--fb); color:var(--mut); text-transform:uppercase; }
.loCh.on small { color:var(--grn); }
/* a locked crew member: a dark head-and-shoulders silhouette */
.loSil { position:relative; width:44px; height:50px; }
.loSil::before { content:""; position:absolute; left:50%; top:2px; width:22px; height:24px; margin-left:-11px; border-radius:50%; background:#0b1a33; }
.loSil::after { content:""; position:absolute; left:50%; bottom:0; width:44px; height:22px; margin-left:-22px; border-radius:22px 22px 6px 6px; background:#0b1a33; }

/* phones */
@media (max-width:420px) {
  .loMinis { grid-template-columns:repeat(6,1fr); } .loMinis .loMini { grid-column:span 2; } .loMinis .loMini:nth-child(n+4) { grid-column:span 3; } /* 3 + 2 */
  .loPlate > b { font-size:22px; }
  .loApps { grid-template-columns:1fr 1fr; }
  .loAi { width:42px; height:42px; font-size:24px; }
  .loTile b { font-size:16px; }
}

/* computers: three zones, rig | car | appearance + skills */
/* M2 (review 2026-10-07): columns follow the width the screen really has (container query), not the window: in-between windows
   show the UI as a 420-560 px column (layout.css lay-wide), and a window-width query crushed three columns into it */
.lo3 { container:pg / inline-size; max-width:1500px; margin:0 auto; box-sizing:border-box; }
@container pg (min-width:880px) {
  .loGrid { display:grid; grid-template-columns:minmax(330px,1.15fr) minmax(0,1.5fr) minmax(300px,1fr); align-items:start; gap:16px; }
  .loMid { order:0; position:sticky; top:0; }
  .loStage { aspect-ratio:auto; height:clamp(320px, 52vh, 600px); }
  .loH { font-size:24px; }
}
.loBubba { width:100%; height:100%; object-fit:cover; object-position:50% 8%; }