/**
 * Realm of Dominion - Material 3 Expressive stylesheet
 * Vanilla CSS, no framework, no web font, no external resource of any kind.
 * The --md-sys-color-* role sets below are static fallbacks for the default seed;
 * M3Theme.apply() overwrites them at runtime in <style id="dyn">, which wins on
 * source order. System fonts only.
 */

:root[data-theme="light"] {
  --md-sys-color-primary: #003ea7;
  --md-sys-color-on-primary: #eeffff;
  --md-sys-color-primary-container: #b5e1ff;
  --md-sys-color-on-primary-container: #000025;
  --md-sys-color-secondary: #324869;
  --md-sys-color-on-secondary: #f9ffff;
  --md-sys-color-secondary-container: #d1dff5;
  --md-sys-color-on-secondary-container: #00030d;
  --md-sys-color-tertiary: #632c74;
  --md-sys-color-on-tertiary: #fff9ff;
  --md-sys-color-tertiary-container: #f1d0fc;
  --md-sys-color-on-tertiary-container: #0b0011;
  --md-sys-color-error: #960000;
  --md-sys-color-on-error: #fff5ef;
  --md-sys-color-error-container: #ffc4b9;
  --md-sys-color-on-error-container: #1b0000;
  --md-sys-color-background: #f8f8fa;
  --md-sys-color-on-background: #030304;
  --md-sys-color-surface: #f8f8fa;
  --md-sys-color-on-surface: #030304;
  --md-sys-color-surface-dim: #d3d4d6;
  --md-sys-color-surface-bright: #feffff;
  --md-sys-color-surface-variant: #dadee4;
  --md-sys-color-on-surface-variant: #292e36;
  --md-sys-color-surface-container-lowest: #feffff;
  --md-sys-color-surface-container-low: #f1f2f3;
  --md-sys-color-surface-container: #eaebed;
  --md-sys-color-surface-container-high: #e3e5e6;
  --md-sys-color-surface-container-highest: #dddee0;
  --md-sys-color-inverse-surface: #151618;
  --md-sys-color-inverse-on-surface: #edeef0;
  --md-sys-color-inverse-primary: #82bfff;
  --md-sys-color-outline: #5d646e;
  --md-sys-color-outline-variant: #b8bec7;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #82bfff;
  --md-sys-color-on-primary: #000453;
  --md-sys-color-primary-container: #00207f;
  --md-sys-color-on-primary-container: #b5e1ff;
  --md-sys-color-secondary: #abbfdd;
  --md-sys-color-on-secondary: #07162b;
  --md-sys-color-secondary-container: #1b2e4a;
  --md-sys-color-on-secondary-container: #d1dff5;
  --md-sys-color-tertiary: #d8aae7;
  --md-sys-color-on-tertiary: #270032;
  --md-sys-color-tertiary-container: #441253;
  --md-sys-color-on-tertiary-container: #f1d0fc;
  --md-sys-color-error: #ff9589;
  --md-sys-color-on-error: #440000;
  --md-sys-color-error-container: #6e0000;
  --md-sys-color-on-error-container: #ffc4b9;
  --md-sys-color-background: #010101;
  --md-sys-color-on-background: #dddee0;
  --md-sys-color-surface: #010101;
  --md-sys-color-on-surface: #dddee0;
  --md-sys-color-surface-dim: #010101;
  --md-sys-color-surface-bright: #1e1f22;
  --md-sys-color-surface-variant: #292e36;
  --md-sys-color-on-surface-variant: #b8bec7;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low: #030304;
  --md-sys-color-surface-container: #050607;
  --md-sys-color-surface-container-high: #0e0f11;
  --md-sys-color-surface-container-highest: #191b1d;
  --md-sys-color-inverse-surface: #dddee0;
  --md-sys-color-inverse-on-surface: #151618;
  --md-sys-color-inverse-primary: #003ea7;
  --md-sys-color-outline: #7a818b;
  --md-sys-color-outline-variant: #292e36;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

:root[data-theme="black"] {
  --md-sys-color-primary: #82bfff;
  --md-sys-color-on-primary: #000453;
  --md-sys-color-primary-container: #00207f;
  --md-sys-color-on-primary-container: #b5e1ff;
  --md-sys-color-secondary: #abbfdd;
  --md-sys-color-on-secondary: #07162b;
  --md-sys-color-secondary-container: #1b2e4a;
  --md-sys-color-on-secondary-container: #d1dff5;
  --md-sys-color-tertiary: #d8aae7;
  --md-sys-color-on-tertiary: #270032;
  --md-sys-color-tertiary-container: #441253;
  --md-sys-color-on-tertiary-container: #f1d0fc;
  --md-sys-color-error: #ff9589;
  --md-sys-color-on-error: #440000;
  --md-sys-color-error-container: #6e0000;
  --md-sys-color-on-error-container: #ffc4b9;
  --md-sys-color-background: #000000;
  --md-sys-color-on-background: #dddee0;
  --md-sys-color-surface: #000000;
  --md-sys-color-on-surface: #dddee0;
  --md-sys-color-surface-dim: #000000;
  --md-sys-color-surface-bright: #050607;
  --md-sys-color-surface-variant: #292e36;
  --md-sys-color-on-surface-variant: #b8bec7;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low: #000000;
  --md-sys-color-surface-container: #010101;
  --md-sys-color-surface-container-high: #020203;
  --md-sys-color-surface-container-highest: #050607;
  --md-sys-color-inverse-surface: #dddee0;
  --md-sys-color-inverse-on-surface: #151618;
  --md-sys-color-inverse-primary: #003ea7;
  --md-sys-color-outline: #7a818b;
  --md-sys-color-outline-variant: #292e36;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

:root {
  /* Shape scale */
  --r-none: 0px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-lgi: 20px;
  --r-xl: 28px;
  --r-xli: 32px;
  --r-full: 9999px;

  /* Elevation */
  --e1: 0 1px 2px rgb(0 0 0 / .30), 0 1px 3px 1px rgb(0 0 0 / .15);
  --e2: 0 1px 2px rgb(0 0 0 / .30), 0 2px 6px 2px rgb(0 0 0 / .15);
  --e3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .30);

  /* Expressive spring motion */
  --m-spatial-fast: 350ms cubic-bezier(.42, 1.67, .21, .9);
  --m-spatial: 500ms cubic-bezier(.38, 1.21, .22, 1);
  --m-effects: 200ms cubic-bezier(.34, .8, .34, 1);

  /* Window size class breakpoints (compact / medium / expanded / large / xl) */
  --bp-medium: 600px;
  --bp-expanded: 840px;
  --bp-large: 1200px;
  --bp-xl: 1600px;

  /* Semantic bridge - every legacy var resolves to an M3 role, so the whole
     sheet is seed-driven without rewriting each rule. */
  --bg: var(--md-sys-color-background);
  --surface: var(--md-sys-color-surface-container-low);
  --panel-bg: var(--md-sys-color-surface-container);
  --panel-border: var(--md-sys-color-outline-variant);
  --accent-color: var(--md-sys-color-primary);
  --text-main: var(--md-sys-color-on-surface);
  --text-muted: var(--md-sys-color-on-surface-variant);
  --shadow: color-mix(in srgb, var(--md-sys-color-shadow) 45%, transparent);

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans TC", system-ui, sans-serif;

  /* Type scale */
  --t-title-l: 22px;
  --t-title-m: 16px;
  --t-title-s: 14px;
  --t-body-m: 14px;
  --t-label-l: 14px;
  --t-label-m: 12px;
  --t-label-s: 11px;

  /* HUD metrics, widened by size class below */
  --hud-gap: 12px;
  --build-w: 190px;
  --minimap: 140px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

::selection { background: transparent; color: inherit; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-family);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

body {
  transition: background var(--m-effects), color var(--m-effects);
}

#renderCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* --- Shared surface treatment --- */

.m3-surface {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--e2);
}

/* --- Sprite legibility ---------------------------------------------------
   The PNG sprites are baked WHITE (the canvas blits them onto saturated faction
   colours and dark resource discs). In the DOM they land on light surfaces in the
   light scheme, where white-on-light is unreadable — so invert them there. The
   exception is any chip whose own background is already a dark accent, where the
   sprite must stay white. ---------------------------------------------------- */

:root[data-theme="light"] .fa-icon-img { filter: invert(1); }

:root[data-theme="light"] .bp-icon.armed .fa-icon-img,
:root[data-theme="light"] .btn-job-option.active-job .fa-icon-img { filter: none; }

/* --- Roving UI focus ring (WASD / left stick) --- */

.ui-focus {
  outline: 3px solid var(--md-sys-color-tertiary);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.ui-focus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-tertiary);
  opacity: .12;
  pointer-events: none;
}

/* --- Resource bar --- */

#resource-bar {
  position: absolute;
  top: var(--hud-gap);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 2 * var(--hud-gap));
  gap: 16px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--panel-border);
  box-shadow: var(--e2);
  padding: 8px 20px;
  border-radius: var(--r-full);
  z-index: 100;
  transition: background var(--m-effects);
}

.res-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--t-title-s);
  white-space: nowrap;
}

.res-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.res-item.pop-item { color: var(--md-sys-color-primary); }

/* --- Minimap --- */

#minimap-container {
  position: absolute;
  top: var(--hud-gap);
  right: var(--hud-gap);
  width: var(--minimap);
  height: var(--minimap);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e2);
  z-index: 100;
  cursor: pointer;
}

#minimapCanvas { width: 100%; height: 100%; display: block; }

/* --- Theme bar (scheme cycle + seed picker) --- */

#theme-bar {
  position: absolute;
  top: calc(var(--hud-gap) + var(--minimap) + 10px);
  right: var(--hud-gap);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 100;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--panel-border);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--t-label-m);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--e1);
  transition: background var(--m-effects), border-radius var(--m-spatial-fast);
}

.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--m-effects);
}

.icon-btn:hover::before { opacity: .08; }
.icon-btn:active::before { opacity: .12; }
.icon-btn:active { border-radius: var(--r-md); }

#seed-swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-full);
  background: none;
  cursor: pointer;
  overflow: hidden;
}

#seed-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
#seed-swatch::-webkit-color-swatch { border: none; border-radius: var(--r-full); }

/* --- Version tag --- */

#version-tag {
  position: absolute;
  bottom: 8px;
  left: var(--hud-gap);
  font-size: var(--t-label-s);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--md-sys-color-surface-container-low);
  padding: 2px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--panel-border);
  pointer-events: none;
  z-index: 150;
}

/* --- Floating action button + menu --- */

#fab {
  position: absolute;
  right: var(--hud-gap);
  bottom: var(--hud-gap);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--e3);
  z-index: 300;
  transition: border-radius var(--m-spatial-fast), transform var(--m-effects);
}

#fab:hover { transform: translateY(-2px); }
#fab:active { border-radius: var(--r-full); }

#fab-menu {
  position: absolute;
  right: var(--hud-gap);
  bottom: calc(var(--hud-gap) + 66px);
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 300;
}

#fab-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--t-label-l);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--e2);
  transition: background var(--m-effects);
}

#fab-menu button:hover { background: var(--md-sys-color-surface-container-highest); }

#fab-menu button.on {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: transparent;
}

.fab-ico { font-size: 16px; }

/* --- Dialog (privacy) --- */

#privacy-dialog {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent);
  z-index: 1100;
  padding: 16px;
}

.dlg-card {
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--e3);
  max-height: 90vh;
  overflow-y: auto;
}

.dlg-title {
  font-size: var(--t-title-l);
  font-weight: 700;
  margin-bottom: 14px;
}

.dlg-body {
  font-size: var(--t-body-m);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 14px 0 18px;
}

#privacy-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--md-sys-color-surface-container);
  font-size: var(--t-label-l);
}

.pv-row b { color: var(--md-sys-color-primary); }
#privacy-close { width: 100%; justify-content: center; }

/* --- Virtual gamepad (semitransparent, mirrors the two-domain model) --- */

#vpad {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 12px;
  /* Clear the build panel on the left and the FAB below-right. */
  padding: 0 calc(var(--hud-gap) + 68px) calc(var(--hud-gap) + 12px)
           calc(var(--build-w) + var(--hud-gap) * 2);
  z-index: 250;
  pointer-events: none;
  opacity: .55;
}

/* Explicit columns: left cluster | cancel | right cluster. Without these the
   right cluster and the cancel button both land in column 2 and overlap. */
#vpad-left { grid-column: 1; }
#vpad-cancel { grid-column: 2; }
#vpad-right { grid-column: 3; }

#vpad:hover { opacity: .8; }

.vpad-cluster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 4px;
  pointer-events: auto;
}

.vpad-cluster button {
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  background: var(--md-sys-color-surface-container-high);
  color: var(--text-main);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  transition: background var(--m-effects), transform var(--m-effects);
}

.vpad-cluster button.pressed {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transform: scale(.92);
}

.vp-u { grid-area: 1 / 2; }
.vp-l { grid-area: 2 / 1; }
.vp-c { grid-area: 2 / 2; background: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important; border-radius: var(--r-full); }
.vp-r { grid-area: 2 / 3; }
.vp-d { grid-area: 3 / 2; }

.vpad-label {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: var(--t-label-s);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
}

#vpad-cancel {
  justify-self: center;
  align-self: end;
  width: 52px;
  height: 52px;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-full);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

body[data-size="compact"] .vpad-cluster {
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
}

/* On a narrow screen the build panel would leave no room for the pad, so the pad
   sits above it instead of beside it. */
body[data-size="compact"] #vpad,
body[data-size="medium"] #vpad {
  padding-left: var(--hud-gap);
  padding-right: calc(var(--hud-gap) + 62px);
}

/* --- Selection panel --- */

#selection-panel {
  position: absolute;
  bottom: 36px;
  left: var(--hud-gap);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xl);
  padding: 14px 20px;
  box-shadow: var(--e3);
  z-index: 100;
  min-width: 320px;
  max-width: min(520px, 60vw);
}

.sel-icon {
  width: 48px;
  height: 48px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.sel-info { flex: 1; min-width: 0; }
.sel-title { font-size: var(--t-title-m); font-weight: 700; }
.sel-sub { font-size: var(--t-label-m); color: var(--text-muted); margin-top: 2px; }
.sel-stats { font-size: var(--t-label-s); color: var(--text-muted); margin-top: 4px; }

.hp-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 6px;
}

.hp-bar-fill {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--r-full);
  transition: width var(--m-effects);
}

/* --- M3 buttons --- */

.m3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--t-label-l);
  font-weight: 600;
  overflow: hidden;
  transition: border-radius var(--m-spatial-fast), background var(--m-effects);
}

.m3-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--m-effects);
}

.m3-btn:hover::before { opacity: .08; }
.m3-btn:active::before { opacity: .12; }
.m3-btn:active { border-radius: var(--r-md); }

.m3-btn.filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.m3-btn.tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.m3-btn.danger {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.btn-job-assign {
  position: relative;
  border: none;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--t-label-m);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-radius var(--m-spatial-fast);
}

.btn-job-assign:active { border-radius: var(--r-md); }

/* --- Build panel ---------------------------------------------------------
   Grid per the agreed shape:

     +---------------+----+
     | icons  (r1)   | go |
     |        (r2)   +----+
     +---------------+ x  |
     | building name +----+

   The icon grid shows 1-4 rows depending on viewport height (--bp-rows, set by
   HUDManager.applyBuildRows) and scrolls beyond that. -------------------- */

#build-panel {
  position: absolute;
  top: 70px;
  left: var(--hud-gap);
  display: grid;
  grid-template-columns: 1fr 54px;
  grid-template-areas:
    "icons go"
    "icons x"
    "name  x";
  gap: 6px;
  width: var(--build-w);
  z-index: 100;
  padding: 8px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
}

#bp-icons {
  grid-area: icons;
  --bp-cell: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bp-cell), 1fr));
  /* Definite row height: as a grid ITEM of #build-panel this box gets stretched to the
     parent's track, and with auto rows the cells then compress and overlap each other.
     Pinning grid-auto-rows and an explicit height makes the row pitch match the cell. */
  grid-auto-rows: var(--bp-cell);
  gap: 4px;
  height: calc(var(--bp-rows, 4) * var(--bp-cell) + (var(--bp-rows, 4) - 1) * 4px);
  min-height: 0;
  align-self: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#bp-icons::-webkit-scrollbar { width: 4px; }
#bp-icons::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--r-full);
}

.bp-icon {
  position: relative;
  min-width: 0;
  height: var(--bp-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  background: var(--md-sys-color-surface-container-high);
  color: var(--text-main);
  font-size: 17px;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--m-effects), border-radius var(--m-spatial-fast);
}

.bp-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--m-effects);
}

.bp-icon:hover::before { opacity: .08; }
.bp-icon:active { border-radius: var(--r-sm); }

.bp-icon.is-tower {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.bp-icon.armed {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: transparent;
}

#bp-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  background: var(--md-sys-color-surface-container-low);
}

.bp-title {
  font-size: var(--t-label-m);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-cost {
  font-size: var(--t-label-s);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bp-go, #bp-x {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  border-radius: var(--r-md);
  transition: border-radius var(--m-spatial-fast), filter var(--m-effects);
}

#bp-go {
  grid-area: go;
  height: 42px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: var(--t-label-l);
}

#bp-x {
  grid-area: x;
  /* The area spans two rows to keep the panel's shape, but the button itself sits at
     the top of it — stretched full height it reads as a heavy red slab. */
  align-self: start;
  height: 34px;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font-size: 15px;
}

#bp-go:active, #bp-x:active { border-radius: var(--r-full); }
#bp-go:hover, #bp-x:hover { filter: brightness(1.08); }

/* GO only lights up once the focus border is on a square that will accept the build. */
#bp-go:disabled {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  cursor: not-allowed;
  filter: none;
}

#bp-go.ready { animation: goPulse 1.4s ease-in-out infinite; }

@keyframes goPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--md-sys-color-primary) 0%, transparent); }
}

/* --- Job assignment overlay --- */

#job-menu-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.job-card {
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 90%;
  max-width: 540px;
  box-shadow: var(--e3);
}

.job-card-title {
  font-size: var(--t-title-l);
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.btn-job-option {
  position: relative;
  background: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  padding: 14px;
  color: var(--text-main);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--m-effects), border-color var(--m-effects);
}

.btn-job-option::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--m-effects);
}

.btn-job-option:hover::before { opacity: .08; }

.btn-job-option.active-job {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.j-icon { font-size: 20px; margin-bottom: 6px; }
.j-name { font-weight: 700; font-size: var(--t-title-s); }
.j-desc { font-size: var(--t-label-s); color: var(--text-muted); margin-top: 4px; }
.btn-job-option.active-job .j-desc { color: var(--md-sys-color-on-primary-container); }

.btn-close-modal {
  width: 100%;
  padding: 12px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
  border-radius: var(--r-full);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-radius var(--m-spatial-fast);
}

.btn-close-modal:active { border-radius: var(--r-md); }

/* --- Snackbar toasts --- */

#toast-container {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
  max-width: 90vw;
}

.toast-msg {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: var(--t-body-m);
  box-shadow: var(--e3);
  animation: toastIn var(--m-spatial-fast) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-msg.fade-out { opacity: 0; transition: opacity var(--m-effects); }

/* --- Gamepad hints --- */

#gamepad-hints {
  position: absolute;
  top: calc(var(--hud-gap) + var(--minimap) + 64px);
  bottom: var(--hud-gap);
  right: var(--hud-gap);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  max-height: calc(100vh - var(--hud-gap) * 2 - var(--minimap) - 64px);
  gap: 6px;
  background: var(--md-sys-color-surface-container);
  padding: 10px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--e1);
  font-size: var(--t-label-m);
  z-index: 100;
}

.gp-pill { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }

.gp-btn {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 800;
  border-radius: var(--r-full);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-label-s);
}

/* --- Window size classes --- */

body[data-size="compact"] {
  --build-w: 146px;
  --minimap: 96px;
  --hud-gap: 8px;
}


/* The bar must never clip: at 420px the six items cannot sit on one row, so tighten
   the metrics and let them wrap rather than pushing the population counter off-screen. */
body[data-size="compact"] #resource-bar {
  gap: 6px 10px;
  padding: 6px 12px;
  border-radius: var(--r-lg);
  font-size: var(--t-label-m);
}

body[data-size="compact"] .res-item { font-size: var(--t-label-m); }
body[data-size="compact"] .res-icon { width: 14px; height: 14px; }
body[data-size="compact"] #build-panel { top: 96px; }
body[data-size="compact"] #bp-icons { --bp-cell: 38px; }
body[data-size="compact"] .job-grid { grid-template-columns: 1fr; }
body[data-size="compact"] #selection-panel { min-width: 0; max-width: calc(100vw - 16px); }

body[data-size="medium"] {
  --build-w: 168px;
  --minimap: 118px;
}

body[data-size="medium"] #privacy-note { max-width: 60vw; }

body[data-size="expanded"] {
  --build-w: 190px;
  --minimap: 140px;
}

/* lg - large: roomier chrome, three-column job grid */
body[data-size="large"] {
  --build-w: 232px;
  --minimap: 172px;
  --hud-gap: 16px;
  --t-label-m: 13px;
  --t-title-m: 17px;
}

body[data-size="large"] .job-grid { grid-template-columns: repeat(3, 1fr); }
body[data-size="large"] .job-card { max-width: 720px; }

/* lg+ - extra large: two-column build list, largest chrome */
body[data-size="xl"] {
  --build-w: 300px;
  --minimap: 208px;
  --hud-gap: 20px;
  --t-label-m: 13px;
  --t-title-m: 18px;
  --t-title-l: 24px;
}

body[data-size="xl"] .job-grid { grid-template-columns: repeat(3, 1fr); }
body[data-size="xl"] .job-card { max-width: 820px; }
body[data-size="xl"] #selection-panel { min-width: 420px; }

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}