:root {
  /* Use installed fonts only; see TYPOGRAPHY.md for rationale and licensing. */
  --background: #151513;
  --text: #DEDBD3;
  --muted: #A09C94;
  --divider: #373631;
  --link: #DEDBD3;
  --link-hover: #FFFDF6;
  --focus-ring: #C2B280;
  --selection-bg: #4B5041;
  --selection-text: #FFFDF6;
  --font-body: Verdana, Geneva, sans-serif;
  --font-headings: Georgia, "Times New Roman", serif;
  --font-text: var(--font-body);
  --bg: var(--background);
  --ink: var(--text);
  --panel: #20201D;
  --human: #0a6cff;
  --ai1: #8f6fc4;
  --ai2: #c08a3e;
  --neutral: #484740;
  --stroke: var(--background);
  --type-small: .875rem;
  --type-body: 1rem;
  --type-heading: 1.25rem;
  --type-display: 2rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--selection-bg); color: var(--selection-text); }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.5;
  display: block;
}

.game {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: auto;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.hud h1 {
  font: bold var(--type-heading)/1.2 var(--font-headings);
  margin: 0;
}

.hud__button {
  background: var(--text);
  color: var(--background);
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  min-height: 48px;
  font: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
}

.hud__button:disabled {
  background: var(--neutral);
  cursor: default;
}

.board {
  background: transparent;
  border-radius: 0;
  padding: 0;
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  /* The zoomed SVG must never contribute to the page's intrinsic size. */
  contain: size layout;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.map-stage { display: grid; place-items: center; }

.board svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hex {
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .hex:hover { opacity: 0.8; }
}
.hex:focus-visible { outline: none; stroke: var(--focus-ring); stroke-width: 4; }

.border {
  fill: none;
  stroke: var(--stroke);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.border.is-target { stroke: var(--selection-text); stroke-width: 3; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }

.border.is-selected {
  stroke: var(--selection-text);
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}

.hex.is-attacking {
  animation: strike 440ms ease-out;
}

.hex.is-repelled {
  animation: repel 640ms ease-out;
}

.hex.is-captured {
  animation: capture 640ms ease-out;
}

@keyframes strike {
  0% { opacity: 1; }
  35% { opacity: 0.55; }
  100% { opacity: 1; }
}

@keyframes repel {
  0% { stroke: #f87171; stroke-width: 5; opacity: 0.65; }
  100% { stroke: transparent; stroke-width: 1; opacity: 1; }
}

@keyframes capture {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.battle-pop {
  pointer-events: none;
  text-anchor: middle;
  animation: pop 950ms ease-out forwards;
}

.battle-pop__result {
  font-size: var(--type-small);
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 2.5px;
}

.battle-pop.is-win .battle-pop__result { fill: #86efac; }
.battle-pop.is-lose .battle-pop__result { fill: #fca5a5; }

@keyframes pop {
  0% { opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

.hex.is-fortified {
  animation: fortify 700ms ease-out;
}

@keyframes fortify {
  0% { opacity: 1; }
  40% { opacity: 0.65; }
  100% { opacity: 1; }
}

.fortify-pop {
  pointer-events: none;
  text-anchor: middle;
  animation: pop 800ms ease-out forwards;
}

.fortify-pop__text {
  fill: #86efac;
  font-size: var(--type-small);
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 2.5px;
}

.land__armies {
  fill: var(--selection-text);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  stroke: none;
}

.banner {
  position: fixed;
  inset: 0;
  background: rgba(21, 21, 19, 0.86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: var(--type-display);
  padding: 24px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 10;
}

.banner[hidden] { display: none; }

.owner-human { fill: var(--human); stroke: var(--human); }
.owner-ai1 { fill: var(--ai1); stroke: var(--ai1); }
.owner-ai2 { fill: var(--ai2); stroke: var(--ai2); }
.owner-neutral { fill: var(--neutral); stroke: var(--neutral); }

button { touch-action: manipulation; }
button:focus-visible, .board:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; width: 100%; min-width: 0; }
#action { width: auto; min-height: 48px; flex-shrink: 0; }
#status { margin: 0; font-size: var(--type-small); white-space: nowrap; color: var(--muted); }
.turn-indicator { display: flex; align-items: center; gap: 7px; }
.turn-indicator::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--human); }
.turn-indicator--ai1::before { background: var(--ai1); }
.turn-indicator--ai2::before { background: var(--ai2); }
.board { touch-action: none; user-select: none; -webkit-user-select: none; scrollbar-width: none; }
.board::-webkit-scrollbar { display: none; }
@media (max-width: 600px) {
  .game { gap: 8px; }
  .hud { gap: 8px; flex-wrap: nowrap; padding: 2px 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .game { gap: 6px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.game { position: relative; }
#income { display: flex; gap: 8px; flex-shrink: 0; }
.income { border: 1px solid var(--divider); color: var(--ink); background: var(--panel); border-radius: 20px; min-height: 44px; padding: 8px 14px; font: inherit; font-size: var(--type-small); touch-action: none; }
#battle-report { position: absolute; top: 108px; left: 16px; right: 16px; z-index: 2; text-align: center; font-size: var(--type-small); border-radius: 8px; background: var(--background); padding: 9px; pointer-events: none; }
#battle-report:empty { display: none; }

.restart-top { background: var(--panel); color: var(--ink); border: 1px solid var(--divider); border-radius: 8px; min-height: 44px; padding: 8px 14px; font: inherit; font-size: var(--type-small); cursor: pointer; }
#status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:root { --ai3: #31966f; --ai4: #d25969; }
.owner-ai3 { fill: var(--ai3); stroke: var(--ai3); }
.owner-ai4 { fill: var(--ai4); stroke: var(--ai4); }
.income[hidden] { display: none; }
#income { gap: 6px; }
.income { padding-inline: 10px; }
#about-game { width: min(30rem, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; color: var(--ink); background: var(--panel); border: 1px solid var(--divider); border-radius: 16px; font-size: var(--type-body); line-height: 1.5; overflow-wrap: anywhere; }
#about-game::backdrop { background: rgba(21, 21, 19, .78); }
.about-content { display: grid; gap: 24px; }
#about-game-title { margin: 0; font: bold var(--type-heading)/1.2 var(--font-headings); }
#about-game button { font-size: var(--type-body); line-height: 1.5; }
.header-actions { display: flex; gap: 8px; align-items: center; }
#game-info { min-width: 44px; padding: 6px; }

/* Income colors match each civilization's map territories. */
.income { --civilization: var(--human); min-width: 44px; background: color-mix(in oklch, var(--civilization) 32%, var(--bg)); border-color: color-mix(in oklch, var(--civilization) 75%, var(--ink)); color: var(--ink); font-weight: 650; cursor: default; display: inline-flex; align-items: center; justify-content: center; }
.income-ai1 { --civilization: var(--ai1); }
.income-ai2 { --civilization: var(--ai2); }
.income-ai3 { --civilization: var(--ai3); }
.income-ai4 { --civilization: var(--ai4); }
#game-info:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
#game-info { display: inline-grid; place-items: center; }
.info-icon { display: block; width: 22px; height: 22px; }

/* Wide screens devote the viewport to the map, with one compact toolbar. */
@media (min-width: 900px) {
  .game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px 24px;
    padding: 20px 0;
  }
  .hud { grid-column: 1; grid-row: 1; flex-wrap: nowrap; }
  #income { grid-column: 2; grid-row: 1; align-items: center; gap: 8px; }
  .income { min-width: 52px; }
  .board { grid-column: 1 / -1; grid-row: 2; height: 100%; }
  .controls { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: flex-end; }
  #action { width: 200px; }
  #battle-report { top: 88px; left: 44px; right: 44px; width: fit-content; max-width: calc(100% - 88px); margin-inline: auto; }
  #about-game { padding: 28px; }
}
@media (max-width: 380px) {
  #about-game { padding: 18px; }
}

/* Brief, non-interactive battle motion in map coordinates. */
.battle-motion { pointer-events: none; }
.battle-troop { fill: var(--selection-text); stroke: none; }

.hex.is-dimmed { opacity: .22; }
.border.is-connected:not(.is-selected) { stroke: var(--muted); stroke-width: 2; }


/* One compact toolbar at every width. */
.hud { flex-wrap: nowrap; gap: 12px; }
.hud #income { margin-left: auto; align-items: center; }
#restart-top { display: inline-grid; place-items: center; width: 44px; padding: 6px; flex-shrink: 0; }
.restart-icon { display: block; width: 21px; height: 21px; background: currentColor; -webkit-mask: url("assets/arrow-counterclockwise.png") center / contain no-repeat; mask: url("assets/arrow-counterclockwise.png") center / contain no-repeat; }
@media (min-width: 900px) { .hud { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .hud { gap: 6px; padding-inline: 0; }
  .hud #income { flex: 1; margin: 0; justify-content: space-between; gap: 4px; min-width: 0; }
  .hud .income { min-width: 0; min-height: 36px; padding: 8px 6px; font-size: var(--type-small); text-align: center; flex: 1; }
  .header-actions { gap: 2px; }
  #game-info, #restart-top { width: 44px; min-width: 44px; }
  #battle-report { top: 64px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.controls { justify-content: flex-end; }
.hex { cursor: default; }
.hex.is-actionable { cursor: pointer; }

/* Information dialog with linked creator credits. */
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.dialog-close span { font: 32px/1 var(--font-body); }
.dialog-close:hover { color: var(--link-hover); background: var(--divider); }
.about-credits { margin: 0; padding-top: 20px; border-top: 1px solid var(--divider); color: var(--muted); font-size: .7rem; line-height: 1.85; }
.about-credits a { color: var(--link); text-underline-offset: 3px; }
.about-credits a:hover { color: var(--link-hover); }
.about-credits a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }

.release-info { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -12px 0 0; font-size: .65rem; color: var(--muted); }
.release-info div { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.release-info dt { color: var(--muted); }
.release-info dd { margin: 0; font-variant-numeric: tabular-nums; }
.tutorial h3 { margin: 0 0 8px; font-size: var(--type-body); }
.tutorial p { margin: 0; line-height: 1.85; }
.dialog-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Open map canvas: only the controls carry page gutters. */
.game > .hud, .game > .controls {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 900px) {
  .game > .hud, .game > .controls { padding-inline: 28px; }
}

.board:focus-visible { outline-offset: -3px; }

/* The map fills the viewport; controls float above without blocking gestures. */
.game { display: flex; }
.game > .board { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.game > .hud, .game > .controls { position: relative; z-index: 1; pointer-events: none; }
.game > .controls { margin-top: auto; }
.hud button, .controls button { pointer-events: auto; }
.hud h1 { padding: 8px 10px; margin-left: -10px; border-radius: 8px; background: var(--bg); }

/* Keep the floating turn control distinct from every territory color. */
#action { min-width: 9rem; box-shadow: 0 0 0 6px var(--bg); }
#action:disabled {
  background: var(--text);
  color: #57544d;
  opacity: 1;
  -webkit-text-fill-color: #57544d;
}