/* Direction: night strategy table — deep navy map room, amber signal accent, Unbounded display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0d1320;
  --surface: #141c2d;
  --surface-2: #1b2539;
  --border: #2a3753;
  --border-strong: #565a63;
  --ink: #e8eef7;
  --muted: #9aa8c2;
  --accent: #f2b72e;
  --accent-hover: #f4c24d;
  --accent-ink: #0d1320;
  --accent-text: #f5c452;
  --accent-strong: #f2b72e;
  --accent-soft: #3f3723;
  --accent-border: #745d26;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0f2b26;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #32211b;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #33151f;
  --danger-strong: #d16969;
  --chart-1: #f2b72e;
  --chart-2: #7dd779;
  --chart-3: #1bbeca;
  --chart-4: #9ebefb;
  --chart-5: #d381dd;
  --chart-6: #fda19c;

  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-card: 16px;
  --display-tracking: -0.02em;
  --x-water: #234f71;
  --x-plain: #66894a;
  --x-forest: #2d5a3c;
  --x-mountain: #756f86;
  --x-tile-ink: #f4f7fb;
  --x-on-pin: #0b1020;
  --x-a1: #fbbf24;
  --x-a2: #f472b6;
  --x-a3: #22d3ee;
  --x-a4: #a78bfa;
  --x-a5: #4ade80;
  --x-a6: #fb923c;
  --x-a7: #f87171;
  --x-a8: #60a5fa;
  --x-a9: #e879f9;
  --x-a10: #a3e635;
  --x-a11: #2dd4bf;
  --x-a12: #fda4af;
  --font-sans: "Manrope", system-ui, sans-serif;
  --display-weight: 700;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dddee0;
  --border-strong: #b6b8bc;
  --ink: #0d1320;
  --muted: #65686f;
  --accent: #f2b72e;
  --accent-hover: #ce9c27;
  --accent-ink: #0d1320;
  --accent-text: #87661a;
  --accent-strong: #87661a;
  --accent-soft: #fdf5e2;
  --accent-border: #f9dfa1;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #bd8d1b;
  --chart-2: #58a054;
  --chart-3: #1e8e96;
  --chart-4: #6691e2;
  --chart-5: #9f5ea8;
  --chart-6: #de7572;
}

.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.cell {
  position: relative; aspect-ratio: 1; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; color: var(--x-tile-ink);
  overflow: hidden; border: 0; padding: 0;
}
button.cell { cursor: pointer; outline: 2px dashed var(--accent); outline-offset: -3px; transition: transform .15s ease, filter .15s ease; }
button.cell:hover { transform: scale(1.12); z-index: 2; filter: brightness(1.25); }
button.cell:active { transform: scale(.96); }
button.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.t-water { background: var(--x-water); }
.t-plain { background: var(--x-plain); }
.t-forest { background: var(--x-forest); }
.t-mountain { background: var(--x-mountain); }
.cell.own { box-shadow: inset 0 0 0 3px var(--c); }
.res { position: absolute; right: 3px; bottom: 1px; font: 600 9px/1 var(--font-mono); opacity: .9; }
.terr { position: absolute; left: 3px; top: 3px; opacity: .45; }
.pins { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; align-items: center; width: 100%; }
.pin {
  display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 999px;
  font: 800 clamp(8px, 1.5vw, 12px)/1 var(--font-body); font-style: normal;
  color: var(--x-on-pin); box-shadow: 0 0 0 2px var(--x-on-pin); background: var(--c);
  animation: pin-pop .35s ease-out;
}
.pins:has(.pin:nth-child(2)) .pin { width: 44%; }
.pins:has(.pin:nth-child(5)) .pin { width: 30%; font-size: 7px; box-shadow: none; }
.sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 999px; flex: none; background: var(--c); }
.c-1 { --c: var(--x-a1); } .c-2 { --c: var(--x-a2); } .c-3 { --c: var(--x-a3); } .c-4 { --c: var(--x-a4); }
.c-5 { --c: var(--x-a5); } .c-6 { --c: var(--x-a6); } .c-7 { --c: var(--x-a7); } .c-8 { --c: var(--x-a8); }
.c-9 { --c: var(--x-a9); } .c-10 { --c: var(--x-a10); } .c-11 { --c: var(--x-a11); } .c-12 { --c: var(--x-a12); }
@keyframes pin-pop { from { transform: scale(.6) translateY(-4px); } to { transform: none; } }
html.reduced-motion .pin { animation: none; }
html.reduced-motion button.cell { transition: none; }
.grid-bg {
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  opacity: .35;
}
.thought { border-left: 3px solid var(--c, var(--border)); }