/* ============ SANDS OF PLANET T — WESTWOOD-STYLE FLAT THEME ============ */
:root{
  --bg-dark:#1E1812; --bg-panel:#2A1F15; --bg-radar:#0A0A0A;
  --border-light:#3A2E22; --border-dark:#1A120B;
  --sand:#C2A878; --sand-dark:#A08050; --spice:#D4632A;
  --gold:#FFD700; --green:#4A7C59; --text-muted:#888888;
  --text-bright:#E8D5A3; --selection:#FFFFFF;
  --house:#8a7f6a;            /* overridden per house at runtime */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-dark);
  color:var(--sand);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  /* full-viewport app shell: top bar / middle row / bottom bar, no page scroll on desktop */
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
.mono{font-family:"Courier New", monospace;}
button{
  font:inherit; font-size:12px; cursor:pointer;
  background:var(--bg-panel); color:var(--sand);
  border:1px solid var(--border-light); border-radius:2px;
  padding:4px 10px; font-weight:600;
}
button:active{transform:translateY(1px);}
button:disabled{opacity:.4; cursor:default;}
button.primary{background:var(--house); color:#fff; border-color:var(--house);}

/* ======================= 1. TOP BAR (40px) ======================= */
#topbar{
  flex:0 0 40px; height:40px;
  background:#2A1F15; border-bottom:1px solid #1A120B;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
}
.tbLeft{display:flex; align-items:center; padding-left:6px;}
#optionsWrap{position:relative;}
#optionsBtn{
  background:none; border:none; color:var(--sand);
  text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.5px;
  padding:4px 10px; min-height:0;
}
#optionsBtn:hover{color:var(--text-bright);}
#optionsMenu{
  display:none; position:absolute; top:100%; left:0; z-index:70; min-width:160px;
  background:var(--bg-panel); border:1px solid var(--border-dark); padding:4px;
}
#optionsMenu.open{display:block;}
#optionsMenu button{
  display:block; width:100%; text-align:left; margin:2px 0;
  background:none; border:1px solid transparent; padding:6px 8px;
  font-size:12px; color:var(--sand);
}
#optionsMenu button:hover{border-color:var(--border-light); background:var(--bg-dark);}
#missionTimer{
  align-self:center; text-align:center;
  font-family:"Courier New", monospace; font-size:12px; color:var(--text-muted);
}
.tbRight{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-right:20px;}
/* resource chips: PWR + CREDITS must read at a glance — bold mono on dark chips */
#powerTxt, #clock{font-family:"Courier New", monospace; font-size:12px; color:var(--text-muted);}
#powerTxt{
  font-size:15px; font-weight:700; color:#8FE3A8;
  background:var(--bg-dark); border:1px solid var(--border-light); border-radius:2px;
  padding:4px 10px;
}
/* low power blinks bright orange — matches the radar-offline flicker */
#powerTxt.low{color:#FF9A5C; border-color:#FF9A5C; animation:mmFlicker 1.1s steps(2, jump-none) infinite;}
.creditsWrap{
  font-family:"Courier New", monospace; font-size:16px; font-weight:700; color:var(--gold);
  background:var(--bg-dark); border:1px solid var(--gold); border-radius:2px;
  padding:4px 12px; white-space:nowrap;
}
#capWarn{color:var(--spice); font-weight:700; display:none; margin-left:8px; font-size:11px; animation:mmFlicker 1.1s steps(2, jump-none) infinite;}

/* ======================= MIDDLE ROW (viewport 75% / sidebar 25%) ======================= */
#wrap{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:3fr 1fr;}
#mapCol{
  position:relative; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#171009;
  border-right:2px solid var(--border-dark);   /* separates viewport from sidebar */
}
#sideCol{
  min-height:0; background:var(--bg-dark);
  border-left:1px solid #0F0B08;
  display:flex; flex-direction:column;
  overflow-y:auto;                           /* sections scroll if they overflow at 720p */
}
#sideCol section{border-bottom:1px solid var(--bg-panel); flex:0 0 auto;}

/* ---------- status strip (old hint bar): overlaid top-left inside the viewport ---------- */
#hintBar{
  position:absolute; top:6px; left:6px; z-index:15;
  display:flex; align-items:center; gap:8px;
  background:rgba(30,24,18,.9); border:1px solid var(--border-dark);
  padding:4px 8px; font-size:12px; color:var(--sand);
  max-width:min(72%, 640px);
}
#bbText{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#bbActions{display:flex; gap:6px; flex:0 0 auto;}
#bbActions button{font-size:11px; padding:3px 8px; min-height:0;}
#bbActions button.primary{border-color:var(--house);}
#hintX{padding:3px 8px; line-height:1;}
#hintBar .bbIc{display:inline-flex; width:14px; height:14px; vertical-align:-2px; margin-right:4px; color:var(--sand);}
#hintBar .bbIc svg, #hintBar .bbIc img.art{width:100%; height:100%;}

/* critical alerts: bold red-orange text pinned to the TOP of the play field */
#flashBanner{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  color:var(--spice); background:rgba(30,24,18,.92);
  border:1px solid var(--spice);
  padding:5px 14px;
  font-size:14px; font-weight:800; letter-spacing:.5px; text-align:center;
  z-index:20; display:none; max-width:92%;
  pointer-events:none;                     /* never swallows map taps */
}

/* ---------- map viewport (DOM cells, no canvas) ---------- */
#map{
  display:grid;
  gap:1px;
  background:var(--sand);        /* shows through the 1px gaps: invisible vs sand cells */
  border:2px solid var(--border-dark);
  position:relative;
  overflow:hidden;               /* clip building overlay at the playfield edge */
  touch-action:none;             /* we handle pan/tap gestures ourselves */
}
#map.showGrid{background:#8B7355;}   /* faint grid lines, closest zoom only */
.cell{
  aspect-ratio:1 / 1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--sand);
}
/* terrain: real texture files in assets/terrain/ (seamless mirror-tiled PNGs);
   background-color stays as the pre-load / missing-file fallback */
.cell.sand{
  background-color:var(--sand);
  background-image:url("assets/terrain/sand.png");
  background-size:96px 96px;
}
.cell.spice{background-color:#CE9260; background-image:url("assets/terrain/spice.png"); background-size:96px 96px;}
.cell.spiceRich{background-color:var(--spice); background-image:url("assets/terrain/spice.png"); background-size:96px 96px; box-shadow:inset 0 0 0 1px rgba(90,38,0,.4);}
.cell.rock{background-color:#B9B2A4; background-image:url("assets/terrain/rock.png"); background-size:96px 96px;}
.cell.mountain{background-color:#3E4450; background-image:url("assets/terrain/mountain.png"); background-size:96px 96px;}
/* concrete slab: AI poured-concrete texture (same pipeline/quality as the
   building pads), warm light grey, kept distinct from the paler rock bedrock */
.cell.conc{
  background-color:#B4AA97;
  background-image:url("assets/terrain/concrete.png");
  background-size:96px 96px;
  box-shadow:inset 0 0 0 1px #7A7059;
}
/* unstable (sand-founded) slab: dashed warning outline + dark wash */
.cell.unst{
  outline:2px dashed #6E6350; outline-offset:-3px;
  box-shadow:inset 0 0 0 1px #7A7059, inset 0 0 0 999px rgba(60,52,40,.30);
}
/* buildable-tile highlight while a build tool is armed */
.cell.placeOk{outline:2px solid rgba(74,124,89,.55); outline-offset:-2px;}
/* selection: white frame + 1px black outer ring, units and buildings alike */
.cell.sel{outline:2px solid var(--selection); outline-offset:-2px; box-shadow:0 0 0 1px #000; z-index:2;}
.cell.pvOk{outline:2px solid var(--green); outline-offset:-2px;}
.cell.pvBad{outline:2px solid var(--spice); outline-offset:-2px;}
/* sand-founded placement warning: amber hatch */
.cell.pvWarn{outline:2px solid #C9A227; outline-offset:-2px;}
/* turret range coverage + planned-path highlights */
.cell.pvRange{outline:2px solid rgba(74,124,89,.5); outline-offset:-2px;}
.cell.pathHint{outline:2px solid rgba(74,124,89,.65); outline-offset:-2px; animation:pathFade 1.5s forwards;}
@keyframes pathFade{0%{outline-color:rgba(74,124,89,.75);}100%{outline-color:rgba(74,124,89,0);}}
.cell.pvWarn::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:repeating-linear-gradient(45deg, rgba(201,162,39,.30) 0 3px, transparent 3px 7px);
}
/* fog overlays paint above building blocks (z-index 3) so explored dimming works */
.cell.fogDim::after{
  content:""; position:absolute; inset:0; background:rgba(20,16,12,.5); pointer-events:none; z-index:4;
}
.cell.fogHide::after{
  content:""; position:absolute; inset:0; background:rgba(10,8,6,.94); pointer-events:none; z-index:4;
}
/* buildings: one block drawn inside the anchor cell, spanning the footprint */
.bld{
  position:absolute; left:0; top:0; z-index:3;
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-bright); font-weight:800; font-size:clamp(9px, 1.6vw, 16px);
  border:2px solid var(--border-dark);
}
.bld.building{opacity:.75;}
.bld.dim{opacity:.55;}
.bld.selB{outline:2px solid var(--selection); outline-offset:1px; box-shadow:0 0 0 1px #000;}
/* svg icons inside unit/building blocks: vector, sized as % of their block;
   img.art twins = external sprites from the ART manifest (same sizing).
   Units near-fill their block (92%) with a dark drop-shadow outline — at 72%
   they read as single dots on the map. */
img.art{display:block;}
.unit svg, .unit img.art{display:block; width:92%; height:92%; filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));}
.bld svg, .bld img.art{display:block; width:56%; height:56%;}
/* PNG art present: drop the disc/frame chrome, sprite fills its own tile or
   footprint exactly (never bleeds into neighbouring cells) */
.unit.hasArt{width:92%; height:92%; background:none !important; border:none; border-radius:0;}
/* every arted unit rotates 8-way AND tints to its owner's house color
   (owner 2026-08-18/19). Older side-view PNGs face the viewer (south): -90.
   Top-down PNGs redrawn 2026-08-19 face north like the SVG armor: +90. */
.unit.hasArt img.art{width:100%; height:100%; transform:rotate(calc(var(--face,270deg) - 90deg)); transform-origin:center; filter:var(--tint,hue-rotate(0deg)) drop-shadow(0 2px 2px rgba(0,0,0,.4));}
.unit.hasArt.nArt img.art{transform:rotate(calc(var(--face,270deg) + 90deg));}
.unit.hasArt.working{box-shadow:none;}
.unit.hasArt.working img.art{filter:var(--tint,hue-rotate(0deg)) drop-shadow(0 0 5px rgba(255,140,66,.8));}
.bld.hasArt{background:none !important; border-color:transparent;}
.bld.hasArt img.art{width:100%; height:100%; transform:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));}
/* vector armor: frameless, near-full-tile, rotated 8-way to face travel.
   Sprites are drawn facing north; --face 0 = east, so +90 aligns them. */
.unit.fullArt{background:none !important; border:none; border-radius:0;}
.unit.fullArt img.art{width:100%; height:100%; transform:rotate(calc(var(--face, 270deg) + 90deg)); transform-origin:center; filter:var(--tint,hue-rotate(0deg)) drop-shadow(0 2px 2px rgba(0,0,0,.45));}
.unit.fv-tank{width:90%; height:90%;}
.unit.fv-heavytank{width:100%; height:100%;}
.unit.fv-rocketlauncher{width:84%; height:84%;}
.unit.fv-quad{width:70%; height:70%;}
.unit{
  width:58%; height:58%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-bright); font-weight:800; font-size:clamp(7px, 1.3vw, 12px);
  border:2px solid var(--border-dark);
  position:relative; z-index:1;
}
.unit.foeUnit{border-radius:2px;}
/* harvester dig: bob + spice pulse while W flag is on */
.unit.working{animation:unitDig .45s ease-in-out infinite alternate; box-shadow:0 0 6px 1px rgba(255,140,66,.55);}
@keyframes unitDig{from{transform:translateY(0);} to{transform:translateY(2px);}}
/* muzzle flash: brief brightness pop when firing */
.unit.firing{animation:unitFlash .3s linear;}
@keyframes unitFlash{0%{filter:brightness(2.1);} 100%{filter:brightness(1);}}
/* cosmetic fx overlay (missile tracers, blast rings) */
#fxLayer{position:absolute; inset:0; pointer-events:none; z-index:12;}
.fxMissile{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:#FFC866; box-shadow:0 0 8px 3px rgba(255,140,66,.9); transition:transform .38s linear;}
/* artillery rocket: elongated body pointing at the target, flame tail behind */
.fxRocket{position:absolute; width:16px; height:5px; margin:-2.5px 0 0 -13px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,140,66,0) 0%, rgba(255,178,77,.95) 35%, #FFF3DC 100%);
  box-shadow:0 0 9px 3px rgba(255,140,66,.85); transition:transform .45s linear;}
.fxSmoke{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,192,176,.55), rgba(200,192,176,0) 70%);
  animation:fxSmokePuff .5s ease-out forwards;}
@keyframes fxSmokePuff{from{transform:scale(.5); opacity:.9;} to{transform:scale(2.4); opacity:0;}}
/* gun turret tracer: small fast streak */
.fxBullet{position:absolute; width:12px; height:3px; margin:-1.5px 0 0 -9px; border-radius:1.5px;
  background:linear-gradient(90deg, rgba(255,232,168,0), #FFE8A8); box-shadow:0 0 6px 2px rgba(255,232,168,.85);
  transition:transform .16s linear;}
.fxBlast{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  border:2px solid rgba(255,154,92,.9); animation:fxBlastRing .26s ease-out forwards;}
.fxBlastBig{width:16px; height:16px; margin:-8px 0 0 -8px; border-width:3px;
  border-color:rgba(255,120,60,.95); box-shadow:0 0 10px 3px rgba(255,120,60,.5); animation-duration:.38s;}
@keyframes fxBlastRing{from{transform:scale(.4); opacity:1;} to{transform:scale(2.2); opacity:0;}}
.hp{
  position:absolute; left:8%; right:8%; bottom:4%; height:3px;
  background:rgba(0,0,0,.35); z-index:2;
}
.hp>i{display:block; height:100%; background:var(--green);}
.hp>i.hurt{background:#C9A227;}
.hp>i.crit{background:var(--spice);}
.prog{
  position:absolute; left:6%; right:6%; bottom:6%; height:4px;
  background:rgba(0,0,0,.3); z-index:2;
}
.prog>i{display:block; height:100%; background:var(--house);}

/* ---------- hover tooltip (mouse only): name + 2px health bar ---------- */
#cellTip{
  position:fixed; z-index:45; pointer-events:none; display:none;
  background:rgba(30,24,18,.92); border:1px solid var(--border-dark);
  padding:4px 6px; min-width:90px;
}
.ttNm{font-size:11px; color:var(--sand); margin-bottom:3px; white-space:nowrap;}
.ttBar{height:2px; background:#0F0B08;}
.ttBar>i{display:block; height:100%;}
.ttBar>i.g{background:var(--green);}
.ttBar>i.a{background:#C9A227;}
.ttBar>i.r{background:var(--spice);}

/* ======================= 3. RIGHT SIDEBAR ======================= */
/* ---- A. radar / minimap ---- */
#mmSection{padding:8px; display:flex; flex-direction:column; align-items:center; gap:6px;}
#mm{
  width:100%; max-width:360px; aspect-ratio:34 / 24;   /* 34:24 grid letterboxes inside */
  border:2px solid var(--border-light); background:var(--bg-radar);
  position:relative; cursor:pointer;
}
#mmCells{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(68, 1fr); grid-template-rows:repeat(48, 1fr);
}
#mm .mmc{width:100%; height:100%;}
#mmOff{
  display:none; width:100%; max-width:360px; aspect-ratio:34 / 24;
  border:2px solid var(--border-light); background:var(--bg-radar);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10px; color:var(--text-muted); text-align:center; padding:6px;
}
#mmOff .ic{width:24px; height:24px; color:var(--sand-dark);}
#mmOff .ic svg, #mmOff .ic img.art{width:100%; height:100%;}
/* low-power radar outage: hard to miss — spice-orange flicker on text + icon */
.mmOffLow{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--spice); font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  animation:mmFlicker 1.1s steps(2, jump-none) infinite;
}
.mmOffLow .ic{color:var(--spice);}
@keyframes mmFlicker{0%,100%{opacity:1;} 50%{opacity:.2;}}
#mmView{
  position:absolute; border:1px dashed var(--selection); background:rgba(255,255,255,.06);
  pointer-events:none;
}
.mmBtns{display:flex; gap:4px;}
.mmBtns .zBtn{min-width:44px; font-size:11px; padding:2px 8px;}

/* ---- B. house badges ---- */
#houseBadges{
  display:flex; justify-content:space-evenly; align-items:center;
  padding:6px 8px; background:var(--bg-panel);
}
.hbadge{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-light); background:var(--bg-dark);
}
.hbadge.active{border:2px solid var(--gold);}
/* discovered Fremen camp; .dead = camp destroyed */
.hbadge.foe{border:2px solid var(--spice); color:var(--spice);}
.hbadge.dead{opacity:.35; filter:grayscale(1);}
.hbadge svg, .hbadge img.art{width:60%; height:60%;}

/* ---- C. production panel ---- */
#prodSection{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
#prodSection h2{
  margin:0; padding:8px 8px 4px; text-align:left;
  font-size:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:700;
  color:var(--sand);
}
#prodGrid{display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:4px 8px 8px; flex:0 1 auto; max-height:296px; min-height:0; overflow-y:auto; scrollbar-width:none;}   /* fixed cap so the panel never grows; scroll long tabs */
#prodSection{flex:0 0 auto;}
#prodGrid::-webkit-scrollbar{display:none;}
.slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:54px; min-width:0; padding:4px 3px;
  background:var(--bg-panel); border:1px solid var(--border-light);
  color:var(--sand); font-weight:400;
}
.slot:hover{border-color:var(--sand);}
.slot.armed{border-color:var(--spice); background:#3A2518;}
.slot.done{background:#1e3a24; border-color:var(--green); opacity:1; cursor:default;}
.slot:disabled{opacity:.45; cursor:default;}
.slot .sic{width:20px; height:20px; color:var(--sand);}
.slot .sic svg, .slot .sic img.art{width:100%; height:100%;}
.slot .snm{font-size:8.5px; color:var(--sand-dark); text-align:center; line-height:1.1;}
.slot .sct{font-family:"Courier New", monospace; font-size:8.5px; color:var(--gold);}
.slot .sreq{font-size:8px; color:var(--spice); text-align:center; line-height:1.05;}
.slot .skey{font-size:7.5px; color:var(--text-muted); text-transform:uppercase; line-height:1;}
/* grid scroll buttons (owner 2026-08-18: no more whole-screen scrolling) */
#prodSection h2 .pscroll{float:right; display:inline-flex; gap:2px;}
#prodSection h2 .pscroll button{
  width:20px; height:16px; padding:0; font-size:9px; line-height:1;
  background:var(--bg-panel); border:1px solid var(--border-light); color:var(--sand); border-radius:2px;
}
/* barracks / refinery training queues, compact, bottom of the panel */
#queueRows{display:none; padding:0 8px 8px;}
#queueRows.hasQ{display:block;}
.qrow{display:flex; align-items:center; gap:4px; margin:4px 0; font-size:11px; color:var(--sand);}
.qrow b{color:var(--sand-dark); font-size:10px;}
.qic{display:inline-flex; width:20px; height:20px; color:var(--sand); position:relative;}
.qic svg, .qic img.art{width:100%; height:100%;}
.qic .qp{position:absolute; bottom:-5px; left:0; right:0; font-size:8px; text-align:center; font-style:normal; color:var(--text-muted);}
.qic.qc{cursor:pointer; border:1px dashed var(--spice); border-radius:2px;}

/* ---- D. category tabs + control strip ---- */
#catSection{margin-top:auto; border-bottom:none;}
#catRow{display:flex; gap:1px;}
.catBtn{
  flex:1 1 0; height:48px; min-width:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel); border:1px solid var(--border-dark); border-radius:0;
  color:var(--sand);
}
.catBtn svg, .catBtn img.art{width:22px; height:22px;}
.catBtn.active{background:var(--spice); border-color:var(--gold); color:#fff;}
#ctrlRow{display:flex; flex-wrap:wrap; gap:4px; padding:6px;}
#ctrlRow>button{flex:1 1 45%; font-size:11px; padding:5px 4px;}
#grpChips{flex:1 1 100%; display:flex; gap:3px;}
#grpChips button{flex:1 1 auto; font-size:11px; padding:4px 2px;}
#grpChips button.assignOn{background:var(--house); color:#fff; border-color:var(--house);}

/* ======================= 4. BOTTOM EVENT BAR (80px) ======================= */
#bottomBar{
  flex:0 0 80px; height:80px;
  background:var(--bg-dark); border-top:1px solid var(--bg-panel);
  display:flex;
}
#chron{
  flex:0 0 70%; min-width:0; overflow-y:auto;
  font-size:12px; line-height:1.45;
  display:flex; flex-direction:column; gap:2px;
  padding:6px 10px;
}
#chron .entry{color:var(--sand); opacity:.55;}
#chron .entry:nth-last-child(-n+3){opacity:1;}   /* newest entries full strength */
#chron .entry.crit{color:var(--spice); font-weight:700;}
#chron .t{color:var(--text-muted); font-family:"Courier New", monospace; font-size:11px; margin-right:5px;}
#queueWidget{
  flex:1 1 auto; min-width:0;
  border-left:1px solid var(--bg-panel);
  display:flex; align-items:center; gap:8px; padding:8px 12px;
}
#queueWidget .qic{width:24px; height:24px; color:var(--sand-dark); flex:0 0 auto;}
.qwBody{flex:1 1 auto; min-width:0;}
.qwTxt{font-size:11px; color:var(--sand-dark); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.qwTxt.idle{color:var(--text-muted);}
.qwBar{height:4px; background:var(--bg-panel);}
.qwBar>i{display:block; height:100%; background:var(--green);}

/* ======================= OVERLAYS / TOAST / LASSO ======================= */
.overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(15,11,8,.85);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.card{
  background:var(--bg-panel); padding:20px;
  max-width:560px; width:100%; text-align:center;
  border:2px solid var(--border-dark); border-top:3px solid var(--house);
  color:var(--sand);
}
.card h2{margin:0 0 4px; letter-spacing:2px; text-transform:uppercase; color:var(--text-bright); font-size:18px;}
.card p.sub{margin:0 0 16px; color:var(--sand-dark); font-size:13px;}
.houseRow{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.houseBtn{
  flex:1 1 140px; min-height:96px; border-width:2px;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  background:var(--bg-dark);
}
.houseBtn b{font-size:15px; letter-spacing:1px;}
.houseBtn span{font-size:11px; font-weight:400; color:var(--sand-dark); line-height:1.3;}
#continueBtn{margin-top:14px; display:none;}
#campGrid{padding:4px;}
/* campaign jigsaw planet map (owner 2026-08-19: real interlocking puzzle look,
   desert planet circle, holder-tinted pieces) */
.pzMap{width:100%; height:auto; display:block;}
.pz{cursor:default;}
.pz path{fill:#241b10; stroke:#141009; stroke-width:2; transition:filter .15s;}
.pz.h-fremen path{fill:rgba(122,74,53,.55); stroke:#7a4a35;}
.pz.h-business path{fill:rgba(201,162,39,.32); stroke:#c9a227;}
.pz.h-hustlers path{fill:rgba(179,53,43,.4); stroke:#b3352b;}
.pz.h-cryptos path{fill:rgba(31,138,140,.35); stroke:#1f8a8c;}
.pz.h-matrix path{fill:#1c1226; stroke:#6a3aa0;}
.pz.owned path{fill-opacity:.85; stroke-width:3; filter:drop-shadow(0 0 6px rgba(201,162,39,.5));}
.pz.open{cursor:pointer;}
.pz.open path{filter:brightness(1.25);}
.pz.open:hover path{filter:brightness(1.55) drop-shadow(0 0 8px rgba(255,232,168,.4));}
.pz.locked{opacity:.55;}
.pz.locked path{stroke-dasharray:5 4;}
.pz.maw.locked path{animation:mawPulse 2.2s ease-in-out infinite;}
@keyframes mawPulse{0%,100%{stroke-opacity:.5;} 50%{stroke-opacity:1;}}
.pz text{text-anchor:middle; pointer-events:none; font-family:inherit;}
.pzName{fill:#e8dfc8; font-size:15px; font-weight:700;}
.pzHolder{fill:#b09a6a; font-size:9.5px; text-transform:uppercase; letter-spacing:1px;}
.pzChev{fill:#d4632a; font-size:11px; letter-spacing:2px;}
.pzLabel{fill:#8a7a54; font-size:10px; font-weight:700; letter-spacing:1px;}
.pz.open .pzLabel{fill:#ffe8a8;}
.pz.owned .pzLabel{fill:#1c150c;}
.pz.owned .pzName{fill:#241c10;}
.pz.owned .pzHolder{fill:#3d3020;}
/* lore + shortcuts overlays */
.loreLine{font-size:11px; color:var(--sand-dark); line-height:1.45; margin:4px 0 10px;}
.loreLine a{color:var(--gold);}
.loreBody{font-size:12px; color:var(--sand); line-height:1.55; max-height:50vh; overflow-y:auto; margin-bottom:12px;}
.loreBody b{color:var(--gold);}
.loreBody p{margin:0 0 10px;}
#endOverlay{display:none;}
#endTitle.win{color:var(--green);}
#endTitle.lose{color:var(--spice);}
#lasso{
  position:fixed; z-index:40; pointer-events:none; display:none;
  border:1px dashed var(--selection); background:rgba(255,255,255,.06);
}
#toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:rgba(30,24,18,.95); color:var(--sand);
  border:1px solid var(--border-dark);
  padding:7px 14px; font-size:12px; font-weight:600; z-index:60; display:none;
}

/* ---------- phones (<=700px): stack vertically, page scrolls ---------- */
@media (max-width:700px){
  body{height:auto; overflow:auto;}
  #topbar{flex:0 0 auto; height:auto; min-height:40px;}
  .tbRight{gap:8px; padding-right:8px; flex-wrap:wrap;}
  #wrap{display:flex; flex-direction:column;}
  #mapCol{border-right:none; border-bottom:2px solid var(--border-dark); min-height:0;}
  #map{width:100% !important; height:auto !important;}
  .cell{aspect-ratio:1 / 1;}
  #sideCol{overflow:visible;}
  #bottomBar{flex:0 0 auto; height:auto; min-height:80px;}
  #chron{max-height:120px;}
  button{min-height:36px;}
  .catBtn{min-height:48px;}
  #bbActions button{min-height:36px;}
}

/* version tag (launch 2026-08-19) */
#verTag{position:fixed; left:6px; bottom:4px; z-index:60; font-size:10px; letter-spacing:.5px;
  color:var(--sand-dark); opacity:.75; pointer-events:none; font-family:"Courier New", monospace;}