:root{
  --soil-0:#150e09; --soil-1:#241708; --soil-2:#3a2712;
  --amber:#e8a33d; --amber-dim:#8a5f24;
  --leaf:#7fa65c; --leaf-dim:#4c6338;
  --cream:#f0e6d8; --cream-dim:#a8927c;
  --danger:#c1503f;
}
*{box-sizing:border-box;}
html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:var(--soil-0); font-family:'Work Sans', sans-serif; color:var(--cream);
  -webkit-tap-highlight-color:transparent; touch-action:none; }
#wrap{ position:relative; width:100vw; height:100vh; }
canvas{ display:block; width:100%; height:100%; cursor:crosshair; }

.hud{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  align-items:flex-start; padding:16px 18px; pointer-events:none; font-family:'Fraunces', serif; }
.title{ font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-dim);
  font-family:'Work Sans',sans-serif; font-weight:600; }
.score{ font-size:30px; font-weight:700; color:var(--amber); line-height:1.15;
  text-shadow:0 0 18px rgba(232,163,61,0.35); }
.xp-bar{ width:140px; height:6px; border-radius:4px; background:rgba(240,230,216,0.12); margin-top:6px; overflow:hidden; }
.xp-fill{ height:100%; background:var(--amber); width:0%; transition:width 0.25s ease; }
.deliveries-sub{ font-size:11px; color:var(--cream-dim); margin-top:4px; font-family:'Work Sans',sans-serif; }

.pause-btn{ position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,163,61,0.35);
  background:rgba(58,39,18,0.65); color:var(--cream); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.pause-btn:active{ transform:translateX(-50%) scale(0.94); }

/* DEV-ONLY obstacle map editor — see dev/map-editor.js. Hidden from normal play
   (#23) — only shown once dev/mode.js adds .dev-mode to <body>, via a ?dev=1
   query param (persisted to localStorage so it "sticks" across reloads; ?dev=0
   turns it back off). */
.dev-mapeditor{ display:none; position:absolute; top:90px; left:50%; transform:translateX(-50%);
  align-items:center; gap:6px; }
.dev-mapeditor button{ background:rgba(0,0,0,0.55); border:1px dashed rgba(255,190,110,0.6);
  border-radius:8px; padding:4px 8px; font-family:'Work Sans',sans-serif; font-size:10px;
  color:#ffcf8a; cursor:pointer; }
.dev-mapeditor button.active{ background:rgba(255,190,110,0.3); }
body.dev-mode .dev-mapeditor{ display:flex; }

/* DEV-ONLY wave-balancing controls — see dev/waves.js. A two-row stacked panel
   (not a single strip) since it holds two independent controls. */
.dev-waves{ display:none; flex-direction:column; gap:5px; position:absolute; top:126px;
  left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.55);
  border:1px dashed rgba(255,190,110,0.6); border-radius:8px; padding:6px 8px;
  font-family:'Work Sans',sans-serif; font-size:10px; color:#ffcf8a; white-space:nowrap; }
.dev-waves-row{ display:flex; align-items:center; gap:6px; }
.dev-waves-row span:first-child{ min-width:62px; text-align:right; }
.dev-waves input[type=number]{ width:48px; background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,190,110,0.4); border-radius:4px; color:#ffcf8a;
  font-size:10px; padding:2px 4px; }
/* Spawn-interval values can run into 5 digits (e.g. a dev testing a much
   slower override) — the shared 48px width above clips them. */
.dev-waves #waveSpawnIntervalInput{ width:64px; }
.dev-waves button{ background:rgba(0,0,0,0.55); border:1px dashed rgba(255,190,110,0.6);
  border-radius:8px; padding:4px 8px; font-family:'Work Sans',sans-serif; font-size:10px;
  color:#ffcf8a; cursor:pointer; }
body.dev-mode .dev-waves{ display:flex; }

/* DEV-ONLY per-enemy pathfinding inspector — see dev/enemy-inspector.js.
   Stays hidden even with dev mode on until something is actually selected
   (the .active class, toggled in JS — same convention as
   mapEditorBtn.classList.toggle('active', ...)). */
.dev-enemy-inspector{ display:none; align-items:center; gap:6px; position:absolute; top:215px;
  left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.55);
  border:1px dashed rgba(255,190,110,0.6); border-radius:8px; padding:6px 8px;
  font-family:'Work Sans',sans-serif; font-size:10px; color:#ffcf8a; white-space:nowrap; }
.dev-enemy-inspector select{ background:rgba(0,0,0,0.3); border:1px solid rgba(255,190,110,0.4);
  border-radius:4px; color:#ffcf8a; font-size:10px; padding:2px 4px; }
body.dev-mode .dev-enemy-inspector.active{ display:flex; }

/* DEV-ONLY nest evolver — see dev/nest-evolver.js. Always visible under dev
   mode (like .dev-waves). Placed on the left edge rather than stacked in the
   top-center column with the other dev panels — that column runs out of
   headroom before reaching the play area at the default camera position. */
.dev-nest-evolver{ display:none; flex-direction:column; gap:5px; position:absolute; top:160px;
  left:16px; background:rgba(0,0,0,0.55);
  border:1px dashed rgba(255,190,110,0.6); border-radius:8px; padding:6px 8px;
  font-family:'Work Sans',sans-serif; font-size:10px; color:#ffcf8a; white-space:nowrap; }
.dev-nest-evolver-row{ display:flex; align-items:center; gap:6px; justify-content:center; }
.dev-nest-evolver select{ background:rgba(0,0,0,0.3); border:1px solid rgba(255,190,110,0.4);
  border-radius:4px; color:#ffcf8a; font-size:10px; padding:2px 4px; }
.dev-nest-evolver button{ background:rgba(0,0,0,0.55); border:1px dashed rgba(255,190,110,0.6);
  border-radius:8px; padding:4px 8px; font-family:'Work Sans',sans-serif; font-size:10px;
  color:#ffcf8a; cursor:pointer; }
body.dev-mode .dev-nest-evolver{ display:flex; }

.map-select{ display:flex; flex-direction:column; gap:8px; max-width:320px; width:100%;
  margin-bottom:18px; }
.map-select label{ display:flex; align-items:center; gap:10px; text-align:left;
  background:rgba(58,39,18,0.45); border:1px solid rgba(232,163,61,0.22); border-radius:12px;
  padding:10px 14px; font-family:'Work Sans',sans-serif; font-size:13.5px; color:var(--cream);
  cursor:pointer; }
.map-select input[type=radio]{ accent-color:var(--amber); }
/* Difficulty (#48) as one row of segments, so it doesn't read as more maps */
.difficulty-select{ flex-direction:row; }
.difficulty-select label{ flex:1; justify-content:center; gap:6px; padding:10px 8px; }

.upgrade-banner{ position:absolute; top:98px; left:50%; transform:translateX(-50%);
  background:rgba(232,163,61,0.16); border:1px solid rgba(232,163,61,0.5); color:var(--amber);
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:12.5px; padding:8px 16px;
  border-radius:20px; pointer-events:none; opacity:0; transition:opacity 0.3s; white-space:nowrap; }
.upgrade-banner.show{ opacity:1; }

.hint{ position:absolute; bottom:88px; left:18px; right:18px; text-align:center; font-size:12.5px;
  color:var(--cream-dim); letter-spacing:0.03em; pointer-events:none; font-weight:500; transition:opacity 0.3s; }

.erase-btn{ position:absolute; bottom:88px; left:50%; transform:translateX(-50%);
  background:var(--danger); color:#fff0ea; border:none; border-radius:20px; padding:9px 18px;
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:13px; cursor:pointer;
  box-shadow:0 4px 14px rgba(193,80,63,0.4); }
.erase-btn.hidden{ display:none; }

.powerbar{ position:absolute; bottom:0; left:0; right:0; display:flex; align-items:flex-end;
  justify-content:center; gap:14px; padding:14px 16px 18px; background:linear-gradient(to top, rgba(21,14,9,0.9), rgba(21,14,9,0));
  pointer-events:none; } /* click-through container — only the buttons below opt back in, so
  trail drags can still pass through the gaps and reach the canvas underneath */
.currency-chip{ font-family:'Fraunces',serif; font-weight:700; color:var(--amber); font-size:16px;
  background:rgba(58,39,18,0.6); border:1px solid rgba(232,163,61,0.3); border-radius:16px; padding:8px 14px; }
.shop-food{ margin-bottom:14px; } /* wave shop's own balance chip (#121) — the overlay hides the HUD one */

/* Collapsible powerup/defense menus (#44), anchored top-right — a group is a toggle
   circle plus a menu of item circles that expands downward from it, right-aligned to
   the toggle's own right edge (not centered) so a growing item list never clips off
   the screen's right edge. */
.pb-top-right{ position:absolute; top:14px; right:16px; display:flex; gap:10px;
  pointer-events:none; }
.pb-group{ position:relative; pointer-events:auto; }
.pb-toggle{ display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:rgba(58,39,18,0.6); border:1px solid rgba(232,163,61,0.25);
  color:var(--cream); cursor:pointer; }
.pb-toggle .pb-icon{ font-size:20px; }
.pb-toggle.open{ border-color:var(--amber); background:rgba(232,163,61,0.22); }

.pb-menu{ position:absolute; top:calc(100% + 10px); right:0; display:flex; gap:16px;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity 0.16s ease, transform 0.16s ease; } /* wider than the circles
  themselves need, so the .pb-name captions below each one don't crowd together */
.pb-group.open .pb-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }

.pb-circle{ position:relative; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:rgba(58,39,18,0.85);
  border:1px solid rgba(232,163,61,0.25); color:var(--cream); cursor:pointer; }
.pb-circle .pb-icon{ font-size:17px; }
/* Name caption + cost badge both sit below the circle (the menu already expands
   downward into open space, so there's room) — a persistent label rather than a
   hover-only tooltip, since this is primarily a touch/Android app. */
.pb-circle .pb-name{ position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9.5px; color:var(--cream-dim); font-weight:600; letter-spacing:0.02em; }
.pb-circle .pb-cost{ position:absolute; top:calc(100% + 15px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9.5px; color:var(--amber); font-weight:600;
  background:rgba(21,14,9,0.85); border-radius:8px; padding:1px 5px; }
.pb-circle:disabled{ opacity:0.35; cursor:default; }
.pb-circle.active{ border-color:var(--leaf); background:rgba(127,166,92,0.25); }
.pb-circle.active .pb-cost{ color:var(--leaf); }
.pb-circle.active#pbSeeker{ border-color:var(--danger); background:rgba(193,80,63,0.25); }

@media (max-width:600px){
  .powerbar{ gap:8px; padding-left:6px; padding-right:6px; }
  .currency-chip{ font-size:13px; padding:7px 8px; }
  .pb-top-right{ top:10px; right:10px; gap:6px; }
  .pb-toggle{ width:44px; height:44px; }
  .pb-toggle .pb-icon{ font-size:17px; }
  .pb-circle{ width:40px; height:40px; }
  .pb-circle .pb-icon{ font-size:15px; }
  .pb-circle .pb-name{ font-size:8.5px; }
  .pb-circle .pb-cost{ font-size:8.5px; top:calc(100% + 13px); }
}

.overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; background:rgba(21,14,9,0.92); backdrop-filter: blur(2px);
  padding:20px; overflow-y:auto; }
.overlay h1{ font-family:'Fraunces', serif; font-weight:700; font-size:36px; margin:0 0 6px 0; color:var(--cream); }
.overlay .sub{ color:var(--cream-dim); font-size:14.5px; margin-bottom:22px; max-width:360px; line-height:1.5; }
.btn{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:14px; background:var(--amber);
  color:#1a1108; border:none; padding:13px 30px; border-radius:24px; cursor:pointer; letter-spacing:0.02em; }
.btn:active{ transform:scale(0.97); }
/* Muted secondary variant — for an overlay action that shouldn't read as the
   default choice next to a primary .btn (e.g. "End run" next to "Resume"). */
.btn-secondary{ background:transparent; color:var(--cream-dim);
  border:1px solid rgba(232,163,61,0.35); margin-top:10px; }
.btn:disabled, .btn-secondary:disabled{ opacity:0.35; cursor:default; }
.btn:disabled:active, .btn-secondary:disabled:active{ transform:none; }
.hidden{ display:none; }

/* #115 — the main menu is fully opaque: the board isn't rendered at all until
   a run starts (see main.js's loop()), so there's nothing behind it to show. */
.start-overlay{ gap:28px;
  background:radial-gradient(ellipse at 50% 35%, var(--soil-2) 0%, var(--soil-1) 35%, var(--soil-0) 80%);
  backdrop-filter:none; }
.start-overlay h1{ font-size:48px; color:var(--amber); text-shadow:0 0 24px rgba(232,163,61,0.3); }
.start-overlay .sub{ margin-bottom:0; }
.start-top, .start-bottom{ display:flex; flex-direction:column; align-items:center; width:100%; }
.menu-actions{ display:flex; flex-direction:column; width:100%; max-width:280px; margin-top:6px; }
.menu-actions .btn{ width:100%; }

/* Gameplay HUD only makes sense once a run is active (main.js toggles this
   class alongside state.runStarted, mirroring dev/mode.js's dev-mode class). */
body:not(.in-run) .hud, body:not(.in-run) .pause-btn, body:not(.in-run) .hint,
body:not(.in-run) .pb-top-right, body:not(.in-run) .powerbar{ display:none; }

/* A small floating card, not a full-screen modal — deliberately distinct from
   .overlay (issue #77's nest stats readout doesn't pause the game or take
   over the whole screen the way every .overlay does; only its own small area
   is unclickable, everything else on screen stays fully interactive). */
.light-modal{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:82%; max-width:260px; max-height:70vh; overflow-y:auto; text-align:center;
  background:rgba(21,14,9,0.9); border:1px solid rgba(232,163,61,0.3);
  border-radius:14px; padding:14px; box-shadow:0 8px 30px rgba(0,0,0,0.45); }
.light-modal h1{ font-family:'Fraunces', serif; font-weight:700; font-size:16px;
  margin:0 0 8px 0; color:var(--cream); }
.light-modal-close{ position:absolute; top:8px; right:8px; width:22px; height:22px;
  border-radius:50%; border:1px solid rgba(232,163,61,0.35); background:rgba(58,39,18,0.6);
  color:var(--cream); font-size:13px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; }
.light-modal-close:active{ transform:scale(0.94); }

/* Opaque, unlike other .overlay screens: it layers over the start or pause menu
   (#117), and at the usual 0.92 that menu's heading ghosts through behind it. */
#settingsOverlay{ background:var(--soil-0); }
.settings-row{ display:flex; align-items:center; gap:10px; color:var(--cream);
  font-family:'Work Sans',sans-serif; font-size:14px; margin-bottom:22px; cursor:pointer; }
.settings-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--amber); cursor:pointer; }

/* Per-nest stats readout (issue #77) — a compact label/value row list (plus
   .ns-bar-row for anything that's naturally a current/max ratio: HP, level
   progress, evolves picked, paths used), not the .shop-card grid below
   (those are for picking one of several options, which doesn't apply to a
   read-only data dump). */
.nest-stats-grid{ display:flex; flex-direction:column; gap:1px; width:100%; }
.nest-stats-row{ display:flex; justify-content:space-between; gap:10px;
  font-family:'Work Sans',sans-serif; font-size:11px; padding:4px 2px; text-align:left;
  border-bottom:1px solid rgba(232,163,61,0.12); }
.nest-stats-row .ns-label{ color:var(--cream-dim); }
.nest-stats-row .ns-value{ color:var(--cream); font-weight:600; text-align:right; }
/* A few rows (e.g. "Bonuses") pack several values onto one line — stack
   label-above-value instead of side-by-side so a wrap doesn't read as
   ragged/disjointed. */
.nest-stats-row.ns-wrap{ flex-direction:column; align-items:flex-start; gap:2px; }
.nest-stats-row.ns-wrap .ns-value{ text-align:left; }

.ns-bar-row{ padding:4px 2px; border-bottom:1px solid rgba(232,163,61,0.12); text-align:left; }
.ns-bar-top{ display:flex; justify-content:space-between; gap:10px;
  font-family:'Work Sans',sans-serif; font-size:11px; margin-bottom:3px; }
.ns-bar-top .ns-label{ color:var(--cream-dim); }
.ns-bar-top .ns-value{ color:var(--cream); font-weight:600; text-align:right; }
.ns-bar-track{ width:100%; height:5px; border-radius:3px; background:rgba(240,230,216,0.12); overflow:hidden; }
.ns-bar-fill{ height:100%; background:var(--amber); }

.upgrade-grid{ display:flex; gap:12px; max-width:520px; width:100%; margin-bottom:6px; flex-wrap:wrap; justify-content:center; }
.shop-card{ background:rgba(58,39,18,0.45); border:1px solid rgba(232,163,61,0.22); border-radius:14px; padding:14px; text-align:left; width:150px; }
.sc-name{ font-family:'Fraunces',serif; font-weight:700; font-size:15px; color:var(--cream); margin-bottom:4px; }
.sc-desc{ font-size:11.5px; color:var(--cream-dim); line-height:1.4; margin-bottom:10px; min-height:48px; }
.sc-buy{ width:100%; background:var(--amber); color:#1a1108; border:none; border-radius:12px; padding:8px; font-weight:600; font-size:12.5px; cursor:pointer; font-family:'Work Sans',sans-serif; }
.sc-buy:disabled{ cursor:default; }
.sc-buy.bought{ background:rgba(240,230,216,0.18); color:var(--cream-dim); }
.sc-buy.unaffordable{ opacity:0.4; }

.wave-enemy-preview{ position:absolute; bottom:16px; right:18px; display:flex;
  gap:8px; flex-wrap:wrap; max-width:220px; justify-content:flex-end; }
.wave-enemy-chip{ background:rgba(58,39,18,0.55); border:1px solid rgba(232,163,61,0.25);
  border-radius:10px; padding:4px 8px; font-size:12.5px; color:var(--cream);
  font-family:'Work Sans',sans-serif; }