/* tribes-rl — design language from binh-lerobot-notes:
   cosmic-latte paper, sharp corners (radius 0), 1px borders, Inter body,
   IBM Plex Mono for UI labels, amber as the single accent. The board sits
   directly on the page with no backdrop, like the robot in the hero. */
:root {
  --bg: #fffbf0;        /* cosmic latte */
  --surface: #f9f5e8;   /* pampas */
  --hover: #fcf9f0;
  --border: #e5e1d8;
  --rule: #f2eee4;
  --text: #171717;
  --mid: #7f7d78;
  --cloudy: #b2afa8;
  --amber: #d97706;
  --amber-lt: #f59e0b;
  --fog-tile: #f4f0e2;  /* unseen board tiles (read by the canvas renderer) */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* display face for game-flavored labels; data stays in the mono */
  --pixel: 'Pixelify Sans', 'IBM Plex Mono', monospace;
  color-scheme: light;
}

/* dark: the same warm paper, lights off. Applied by system preference
   unless the toggle pinned light, and always when the toggle pinned dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17140e;
    --surface: #1e1a13;
    --hover: #242017;
    --border: #383226;
    --rule: #272216;
    --text: #ece6d6;
    --mid: #938c78;
    --cloudy: #635c4a;
    --amber: #f59e0b;
    --amber-lt: #fbbf24;
    --fog-tile: #211d15;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17140e;
  --surface: #1e1a13;
  --hover: #242017;
  --border: #383226;
  --rule: #272216;
  --text: #ece6d6;
  --mid: #938c78;
  --cloudy: #635c4a;
  --amber: #f59e0b;
  --amber-lt: #fbbf24;
  --fog-tile: #211d15;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

main {
  display: flex; gap: 160px; padding: 32px;
  flex-wrap: wrap; align-items: center; justify-content: center;
}

/* ---- loading screen: label, thin bar, percentage ---- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .6s ease;
}
#loader.is-out { opacity: 0; pointer-events: none; }
/* seamless reveal: the game fades in as the loader fades out */
main { opacity: 0; transition: opacity .8s ease .15s; }
body.ready main { opacity: 1; }
.loader-box { width: min(280px, 72vw); display: flex; flex-direction: column; gap: 10px; }
.loader-head { display: flex; justify-content: space-between; align-items: baseline; }
#loader-label, #loader-pct {
  font: 500 13px var(--pixel);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mid); white-space: nowrap;
}
#loader-pct { font-variant-numeric: tabular-nums; }
.loader-track { width: 100%; height: 2px; background: var(--border); overflow: hidden; }
#loader-fill {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--amber);
  transition: transform .12s linear;
  will-change: transform;
}

/* ---- board: no backdrop, blends into the page ---- */
#board-wrap { position: relative; }
canvas {
  display: block;
  background: transparent;
  max-width: min(94vw, 80vh);
  height: auto;
  touch-action: manipulation;
}

/* non-blocking result toast, styled like the reference tooltips: ink on latte */
#banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font: 500 14px var(--pixel);
  letter-spacing: 0.6px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--amber);
  padding: 7px 14px;
  box-shadow: 0 6px 24px rgba(96, 78, 39, .16);
  pointer-events: none;
  white-space: nowrap;
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* hover tooltip: what is this tile */
#tip {
  position: absolute; z-index: 6; pointer-events: none;
  font: 500 10px var(--mono); letter-spacing: .3px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 4px 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(96, 78, 39, .12);
}

#scoreboard {
  font: 500 12px var(--mono); font-variant-numeric: tabular-nums;
  color: var(--mid);
  display: flex; gap: 12px; align-items: baseline;
}
#scoreboard .w { font-size: 14px; font-weight: 600; }
#scoreboard .draws { font-size: 10px; margin-left: auto; color: var(--cloudy); }

/* last-game summary card */
#summary {
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
#summary .sec { margin-bottom: 4px; }
.sum-row {
  font: 400 10.5px var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .2px; color: var(--mid);
}
.sum-row b { font-weight: 600; }
.sum-row .lp0 { color: #e2413e; }
.sum-row .lp1 { color: #3f8ee0; }
.sum-row .lp2 { color: #c99a2a; }
.sum-row .lp3 { color: #3da55a; }
.sum-win { color: var(--text); }

/* stat pulse: a brief amber flash when a player's economy swings */
@keyframes stat-pulse { 0% { color: var(--amber-lt); } 100% { color: inherit; } }
.stat-pulse { animation: stat-pulse .9s ease; }

/* ---- panel: wide gaps BETWEEN functional groups, tight rows within.
   Bounded to the viewport and scrollable (hidden scrollbar, bottom fade),
   so a tall 4p panel never stretches the page: the board stays centered. ---- */
#panel {
  width: 348px; display: flex; flex-direction: column; gap: 26px;
  max-height: min(calc(100vh - 128px), 820px);
  max-height: min(calc(100svh - 128px), 820px);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
#panel::-webkit-scrollbar { display: none; }
.group { display: flex; flex-direction: column; gap: 10px; }

/* section header: the name, then the divider runs to the edge */
.sec {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px var(--pixel);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cloudy);
  margin-bottom: 2px;
}
.sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }

header { display: flex; align-items: center; justify-content: space-between; }
.hdr-left { display: flex; align-items: center; gap: 12px; }
#gh {
  display: flex; align-items: center;
  color: var(--cloudy);
}
#gh:hover { color: var(--amber); }
/* icons match the title's visual size */
#gh svg, #theme svg { width: 21px; height: 21px; }
header h1 {
  font: 600 28px 'Pixelify Sans', Inter, sans-serif;
  letter-spacing: .01em;
}
header h1 .accent { color: var(--amber); }
#theme {
  border: none; background: transparent; padding: 4px;
  display: flex; align-items: center;
  color: var(--cloudy); cursor: pointer;
}
#theme:hover { color: var(--amber); border: none; background: transparent; }

/* segmented controls: sharp, mono, active = inverted ink */
.seg {
  display: flex; background: var(--surface);
  border: 1px solid var(--border);
}
.seg-btn {
  flex: 1; border: 0; background: transparent;
  font: 500 13px var(--pixel);
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--mid);
  padding: 8px 0; cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.seg-btn:hover { color: var(--amber); }
/* active = quiet: ink text + a thin amber underline, no inverted block */
.seg-btn.active {
  background: var(--hover);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--amber);
}
/* small segs (view/players): an even grid, so extra 4p pills wrap into a
   second row at the SAME size as everything else */
.seg.small {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}
.seg.small .seg-btn { font-size: 11px; padding: 6px 0; }

/* cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px;
}
.row { display: flex; gap: 10px; align-items: center; }
.row.btns button { flex: 1; }   /* action buttons fill the panel width */
/* when a small seg wraps to two rows, keep the label on the FIRST row's
   midline instead of floating between the rows */
.row:has(.seg.small) { align-items: flex-start; }
.row:has(.seg.small) > label { padding-top: 9px; }
.row label {
  font: 500 10px var(--mono);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mid);
}

button {
  font: 500 13px var(--pixel);
  letter-spacing: .6px;
  background: var(--hover); color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 12px; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
button:hover { border-color: var(--amber); color: var(--amber); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
button:disabled:hover { border-color: var(--border); color: var(--text); }
button.primary {
  background: var(--amber); color: #fff; border-color: var(--amber);
}
button.primary:hover { background: var(--amber-lt); border-color: var(--amber-lt); color: #fff; }

/* slider: thin track + square ink thumb, like the loader bar */
input[type=range] {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 2px; background: var(--border); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 0;
  background: var(--amber); border: none; cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 0;
  background: var(--amber); border: none; cursor: grab;
}
input[type=range]:hover::-webkit-slider-thumb { background: var(--amber-lt); }
.pill {
  font: 500 10px var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--mid);
  min-width: 52px; text-align: right;
}

#status {
  font: 500 13px var(--pixel);
  letter-spacing: .8px; text-transform: uppercase; color: var(--mid);
}

/* player cards: seat color as a slim left rule */
.player-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--pc, var(--cloudy));
  padding: 10px 12px;
  transition: border-color .15s ease, background .15s ease;
}
.player-card + .player-card { margin-top: 8px; }
.player-card.active-turn { background: var(--hover); border-color: var(--pc); border-left-width: 3px; }
.player-card.eliminated { opacity: .38; }
.player-card.p0 { --pc: #e2413e; }
.player-card.p1 { --pc: #3f8ee0; }
.player-card.p2 { --pc: #e0b23f; }
.player-card.p3 { --pc: #54c96f; }
.player-head {
  font: 500 11px var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.player-card summary {
  cursor: pointer;
  font: 500 9px var(--mono);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cloudy); margin-top: 6px; user-select: none;
}
.player-card summary:hover { color: var(--amber); }
.tech-tree { margin: 8px 0 2px; }
.tech-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tech-chip {
  font: 500 9.5px var(--mono);
  padding: 2px 6px;
  background: transparent; color: var(--cloudy);
  border: 1px solid var(--rule);
}
.tech-chip.researched { color: var(--amber); border-color: var(--amber); }

/* shared action log */
#log-lines {
  font: 400 10px/1.7 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .2px; color: var(--mid);
  max-height: 160px; overflow-y: auto;
  overscroll-behavior: contain;
  /* scrolled-away rows fade out under the section rule instead of being
     sliced mid-line */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
#log-lines b { font-weight: 600; }
#log-lines .lp0 { color: #e2413e; }
#log-lines .lp1 { color: #3f8ee0; }
#log-lines .lp2 { color: #c99a2a; }
#log-lines .lp3 { color: #3da55a; }
#log-lines .turn { color: var(--cloudy); }

/* verb sheet */
#verbs .sec { margin-bottom: 10px; }
#verb-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#verb-buttons button { font-size: 10.5px; padding: 6px 10px; }

#hint {
  font: 500 10px var(--mono);
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--cloudy); min-height: 1.6em;
}
/* hover helper: [data-tip] shows a small explainer above the element */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 6px);
  z-index: 40;
  width: max-content; max-width: 240px;
  padding: 6px 9px;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .2px; text-transform: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  pointer-events: none;
  white-space: normal;
}
.hidden { display: none !important; }

/* entrance: quiet staggered fade, starting when loading completes */
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.ready #board-wrap, body.ready #panel > * { animation: settle .5s ease both; }
body.ready #panel > *:nth-child(2) { animation-delay: .08s; }
body.ready #panel > *:nth-child(3) { animation-delay: .16s; }
body.ready #panel > *:nth-child(4) { animation-delay: .24s; }
body.ready #panel > *:nth-child(5) { animation-delay: .32s; }
body.ready #panel > *:nth-child(6) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  body.ready #board-wrap, body.ready #panel > * { animation: none; }
}

/* ---- mobile: board on top, panel full width below ---- */
@media (max-width: 720px) {
  body { align-items: flex-start; }
  main {
    flex-direction: column; align-items: center;
    gap: 20px; padding: 16px 12px 32px;
  }
  canvas { max-width: min(100%, 70vh); }
  #panel {
    width: 100%; max-width: 440px;
    max-height: none;                    /* mobile: natural page scroll */
    -webkit-mask-image: none; mask-image: none;
  }
  .seg-btn { padding: 10px 0; }         /* bigger touch targets */
  button { padding: 10px 14px; }
  #verb-buttons button { padding: 9px 12px; }
  input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; }
  input[type=range]::-moz-range-thumb { width: 18px; height: 18px; }
}