:root {
  --neon-primary: #00d4ff;
  --neon-muted: #004d66;
  --bg-primary: #0a0a0f;
  --bg-secondary: #0d1117;
  --ink: #e6edf3;
  --ink-muted: #8b949e;
  --success: #00ff88;
  --warning: #ffaa00;
  --danger: #ff3344;
  --font-heading: 'Share Tech Mono', 'Fira Code', 'Courier New', monospace;
  --font-body: 'IBM Plex Mono', 'Fira Code', monospace;
  --font-label: 'Inter', system-ui, -apple-system, sans-serif;
  /* Cyan tint scale + glow — terminal flourish */
  --neon-tint: rgba(0, 212, 255, 0.10);
  --neon-tint-strong: rgba(0, 212, 255, 0.18);
  --text-glow-cyan: 0 0 6px rgba(0, 212, 255, 0.35);
  /* Neutral lines/tracks */
  --track: #2a2e36;
  --neon-sep: #2a2f38;
  /* Motion + shape */
  --transition-fast: 200ms;
  --border-radius-sm: 2px;
  /* Icon two-tone defaults + rank/medal accents (see ui/icons.js) */
  --icon-fill: currentColor;
  --icon-accent: var(--neon-primary);
  --medal-gold: #ffcf5c;
  --medal-silver: #c8d2dc;
  --medal-bronze: #d08a52;
  /* Resource tints — jewel tones on near-black so gold/food/wood/gems read
     apart at a glance instead of all sharing the chrome cyan. Paired light
     accents drive the second icon tone (see ui/icons.js two-tone layers). */
  --res-gold: #e8b53a;       --res-gold-accent: #fbe39a;
  --res-food: #d99a52;       --res-food-accent: #f5e2b4;
  --res-wood: #b97b41;       --res-wood-accent: #e6ad6b;
  --res-gems: #b487f0;       --res-gems-accent: #e2cdff;
}

/* ── Custom two-tone SVG icon set (ui/icons.js) ──────────────────────────── */
.ll-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  flex: 0 0 auto;
  overflow: visible;
}
.ll-icon .ic-fill { fill: var(--icon-fill, currentColor); }
.ll-icon .ic-accent { fill: var(--icon-accent, var(--neon-primary)); }
.ll-icon .ic-line {
  fill: none;
  stroke: var(--icon-fill, currentColor);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ll-icon .ic-line-a {
  fill: none;
  stroke: var(--icon-accent, var(--neon-primary));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Resource glyphs self-tint with their per-resource colours wherever they
   appear (top bar, tile/land stats, panels, modals) — driven by the data-res
   key icon() stamps on gold/food/wood/gems (and planks→wood, bread→food). */
.ll-icon[data-res="gold"] { --icon-fill: var(--res-gold); --icon-accent: var(--res-gold-accent); }
.ll-icon[data-res="food"] { --icon-fill: var(--res-food); --icon-accent: var(--res-food-accent); }
.ll-icon[data-res="wood"] { --icon-fill: var(--res-wood); --icon-accent: var(--res-wood-accent); }
.ll-icon[data-res="gems"] { --icon-fill: var(--res-gems); --icon-accent: var(--res-gems-accent); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
}

/* Touch ergonomics: don't let long-presses select UI label text or flash the
   tap highlight, and remove the 300ms double-tap delay. Inputs/textareas still
   allow selection (see below) so typing coordinates etc. works. */
#v2-ui, #v2-top-bar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"], .btn, .ctx-btn, .ctx-cmd, .v2-explore-btn,
.overlay-tab, .overlay-close {
  touch-action: manipulation;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

#v2-canvas {
  /* The pointer-events layer drives the camera; tell the browser not to claim
     touch gestures (scroll/zoom/pull-to-refresh) over the map. */
  touch-action: none;
}

/* Phones: enlarge tap targets for the panel/command/explore buttons to the
   ~44px guideline so they're comfortable to hit with a thumb. Scoped to these
   classes so small icon chips (e.g. the minimap mode toggle) keep their size. */
@media (max-width: 640px) {
  .ctx-btn, .v2-explore-btn, .overlay-tab, .overlay-close, .btn {
    min-height: 44px;
  }
  .ctx-cmd { min-height: 60px; }
}

#v2-root { position: fixed; inset: 0; }

#v2-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#v2-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#v2-ui > * { pointer-events: auto; }

/* Modal backdrops are appended to <body> in init() with the `hidden`
 * attribute. Their CSS sets `display: flex` which would otherwise
 * override the user-agent rule for [hidden]. Re-assert it. */
[hidden] { display: none !important; }

/* ── Phase 3 polish ─────────────────────────────────────────────────────── */

/* Keyboard focus ring — terminal cyan, box-shadow so it never reflows. Mouse
 * :focus stays quiet; only :focus-visible (keyboard) shows the ring. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* forced-colors / high-contrast fallback */
  box-shadow: 0 0 0 2px var(--neon-primary), 0 0 8px var(--neon-tint-strong);
}

/* Soft cyan glow on panel/section/modal titles — keeps monospace crisp. */
.ctx-title,
.queue-title,
.overlay-title,
.overlay-section-title,
.v2-modal-title,
.topbar-tooltip .tt-header {
  text-shadow: var(--text-glow-cyan);
}

/* Press feedback so a click registers even while a request is in flight. */
.topbar-btn:not(:disabled):active,
.ctx-btn:not(:disabled):active,
.overlay-tab:active {
  background: var(--neon-tint-strong);
}

/* Marquee (box) select + its status HUD. */
.v2-marquee-box {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  border: 1px solid var(--success);
  background: rgba(0, 255, 136, 0.10);
}
.v2-marquee-status {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 41;
  padding: 4px 10px;
  background: rgba(13, 17, 23, 0.94);
  border: 1px solid var(--success);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Respect reduced-motion: near-instant transitions, no looping animations. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}