/* Infinite Automatic Catan — page chrome.
 *
 * The palette is not written here. theme.js publishes every colour, type step
 * and space step onto :root at load, so the stylesheet and the Three.js
 * materials cannot drift apart; the fallbacks in each var() are only there to
 * keep the page legible in the instant before the script runs.
 *
 * One family, real weights, and the same panel vocabulary as /infautuno: a
 * dark sheet on the felt, a tracked eyebrow title, a hairline rule, then the
 * mark.
 */

@font-face { font-family: 'Archia'; src: url('../../assets/fonts/Archia-Light.woff')    format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Archia'; src: url('../../assets/fonts/Archia-Regular.woff')  format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archia'; src: url('../../assets/fonts/Archia-Medium.woff')   format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archia'; src: url('../../assets/fonts/Archia-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archia'; src: url('../../assets/fonts/Archia-Bold.woff')     format('woff'); font-weight: 700; font-display: swap; }

:root {
  --ink: #f4f1e8;
  --gold: #f5c542;
  --felt: #12503a;
  --sheet: rgba(10, 44, 31, 0.86);
  --hair: rgba(244, 241, 232, 0.16);
  --hair-strong: rgba(244, 241, 232, 0.32);
  --ink-2: rgba(244, 241, 232, 0.74);
  --ink-3: rgba(244, 241, 232, 0.5);
  --ink-4: rgba(244, 241, 232, 0.28);
  --radius-md: 8px;
  --radius-sm: 4px;
  /* Fallbacks only. theme.js overwrites every --fs-* and --sp-* on :root at
     load with the phi ladder; these keep the page legible for the one paint
     before the script runs. */
  --fs-1: 17.14px; --fs-0: 15.2px; --fs-n1: 13.48px; --fs-n2: 11.95px;
  --fs-n3: 10.6px; --fs-n4: 9.4px; --fs-n5: 8.33px; --fs-n6: 7.39px;
  --rail-l: clamp(214px, 18.5vw, 330px);
  --rail-r: clamp(246px, 21vw, 386px);
  /* Space held at the foot of the left rail for the control bar, which is
     fixed rather than in flow so it survives the rail being hidden. */
  --chrome-reserve: 132px;
  --gap: var(--sp-1, 10px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--felt);
  color: var(--ink);
  font-family: 'Archia', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The table the island sits on: a warm pool of light in the middle, falling
   away to the corners, so the 3D canvas can stay transparent. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 92% at 50% 34%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(150% 120% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.46) 100%);
  pointer-events: none;
}

button, input, select, label, a {
  font-family: inherit;
  font-weight: 500;
}

/* ============================================================== layout */

#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  gap: var(--gap);
  padding: var(--gap);
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
  overflow: hidden;
}

/* The left rail stops short of the control bar rather than running under it,
   and the standings panel takes up whatever slack is left. */
#rail-left { padding-bottom: var(--chrome-reserve); }

/* Whatever height the left rail has left over goes to the histogram, which is
   the one panel here that reads better for being taller. Everything else in
   the rail sizes to its content. */
#panel-yield, #panel-board, #panel-standings { flex: 0 0 auto; }
#panel-rolls { flex: 1 1 auto; min-height: 132px; }
#rolls-body { display: flex; flex-direction: column; }
#standings-body { display: flex; flex-direction: column; }

#stage-wrap { position: relative; min-width: 0; min-height: 0; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

#overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* ============================================================== panels */

.panel {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
  padding: var(--sp-1, 10px) var(--sp-1, 10px) var(--sp-1, 10px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel > h2 {
  margin: 0 0 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: var(--fs-n3);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex: none;
}

.panel > h2 .note {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-3);
  font-size: var(--fs-n4);
  white-space: nowrap;
}

.panel-body { min-height: 0; flex: 1; }

/* ======================================================== player cards */

#players {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex: none;
}

.pcard {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--pc, var(--hair-strong));
  border-radius: var(--radius-md);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 7px 9px 8px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.pcard.is-turn {
  background: linear-gradient(90deg, var(--pc-soft), var(--sheet) 62%);
  border-color: var(--pc-line);
}

.pcard.is-winner { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(245, 197, 66, 0.28); }

.pcard-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pcard-name {
  font-size: var(--fs-n2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc);
}

.pcard-persona {
  font-size: var(--fs-n4);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.pcard-vp {
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard-vp small {
  font-size: var(--fs-n5);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-left: 2px;
}
.pcard-vp.is-bumped { animation: vp-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes vp-bump {
  0% { transform: scale(1); }
  38% { transform: scale(1.32); color: var(--gold); }
  100% { transform: scale(1); }
}

.vpbar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin: 5px 0 6px;
  background: rgba(0, 0, 0, 0.3);
}
.vpbar span { display: block; height: 100%; }

.chiprow {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  font-size: var(--fs-n4);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  line-height: 1.5;
}
.chip.is-zero { opacity: 0.34; }
.chip i { font-style: normal; opacity: 0.8; }
.chip b { font-weight: 700; color: var(--ink); }

.chip.res-wood  { border-color: color-mix(in srgb, var(--res-wood) 46%, transparent); }
.chip.res-brick { border-color: color-mix(in srgb, var(--res-brick) 46%, transparent); }
.chip.res-sheep { border-color: color-mix(in srgb, var(--res-sheep) 46%, transparent); }
.chip.res-wheat { border-color: color-mix(in srgb, var(--res-wheat) 46%, transparent); }
.chip.res-ore   { border-color: color-mix(in srgb, var(--res-ore) 46%, transparent); }

.chip.is-award {
  border-color: var(--gold);
  color: var(--gold);
}

.pcard-meta {
  margin-top: 5px;
  font-size: var(--fs-n5);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* ====================================================== yield / crops */

.yield-row {
  display: grid;
  grid-template-columns: 3.4em 1fr 3.1em;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.yield-name {
  font-size: var(--fs-n4);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yc, var(--ink-2));
  overflow: hidden;
  text-overflow: ellipsis;
}

.yield-track {
  display: flex;
  height: 9px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.32);
}
.yield-track span {
  display: block;
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.yield-total {
  font-size: var(--fs-n3);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.yield-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-n5);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.yield-legend b { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin-right: 3px; }

.yield-foot {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-n5);
  line-height: 1.6;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.yield-foot b { color: var(--ink); font-weight: 600; }
.yield-foot em { font-style: normal; color: var(--ink-4); }

/* ========================================================= standings */

.stand-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1px 7px;
  align-items: baseline;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.stand-name {
  font-size: var(--fs-n4);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc, var(--ink-2));
  overflow: hidden;
  text-overflow: ellipsis;
}

.stand-wins { font-size: var(--fs-n3); font-weight: 700; color: var(--ink); }
.stand-pct { font-size: var(--fs-n5); color: var(--ink-3); min-width: 2.4em; text-align: right; }

.stand-track {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
  margin-top: 2px;
}
.stand-track i {
  display: block;
  height: 100%;
  width: 0;
  opacity: 0.6;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stand-row.is-leader .stand-track i { opacity: 1; }
.stand-row.is-leader .stand-wins { color: var(--gold); }

.stand-recent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  margin-top: 5px;
  max-height: 42px;
  overflow: hidden;
}
.stand-recent i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  opacity: 0.85;
}
.stand-recent i:last-child {
  outline: 1px solid var(--gold);
  outline-offset: 1px;
}

.stand-foot {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-n5);
  line-height: 1.5;
  color: var(--ink-4);
  letter-spacing: 0.03em;
}

/* ========================================================= histogram */

.hist {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  align-items: end;
  flex: 1;
  min-height: 74px;
}

.hist-col {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hist-bar {
  background: linear-gradient(180deg, var(--hair-strong), rgba(244, 241, 232, 0.14));
  border-radius: 1px 1px 0 0;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 1px;
}
.hist-col.is-seven .hist-bar { background: linear-gradient(180deg, #ff7a5a, rgba(255, 122, 90, 0.2)); }
.hist-col.is-last .hist-bar { background: linear-gradient(180deg, var(--gold), rgba(245, 197, 66, 0.24)); }

/* The theoretical share, drawn as a rule across the column. */
.hist-tick {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 0;
  border-top: 1px dashed rgba(245, 197, 66, 0.66);
  pointer-events: none;
}

.hist-axis {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  margin-top: 4px;
  font-size: var(--fs-n6);
  text-align: center;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hist-axis span.is-last { color: var(--gold); font-weight: 700; }

.hist-key {
  margin-top: 6px;
  font-size: var(--fs-n5);
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* =============================================================== log */

#panel-log { flex: 1; min-height: 0; }

.log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-strong) transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 3px;
}
.log::-webkit-scrollbar { width: 5px; }
.log::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 3px; }

.log-line {
  font-size: var(--fs-n3);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  padding: 1px 0 1px 7px;
  border-left: 2px solid transparent;
  animation: log-in 0.32s ease both;
}
@keyframes log-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}
.log-line.t-accent { color: var(--gold); font-weight: 600; }
.log-line.t-gold   { color: var(--gold); }
.log-line.t-warn   { color: #ff9d84; }
.log-line.t-faint  { color: var(--ink-4); }
.log-line.t-win {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--fs-n4);
}

/* ============================================================== board */

/* Label column fixed, value column left-aligned. Right-aligning the values
   made every one of them move whenever the longest changed — and "doing" is
   rewritten several times a second. */
.kv {
  display: grid;
  grid-template-columns: 7.6em minmax(0, 1fr);
  gap: 3px 8px;
  font-size: var(--fs-n4);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.kv > span { white-space: nowrap; }
.kv b {
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  line-height: 1.35;
}

.bank {
  display: flex;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--hair);
}
.bank-cell {
  flex: 1;
  text-align: center;
  font-size: var(--fs-n5);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bank-cell i {
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 3px;
}
.bank-cell.is-low { color: #ff9d84; font-weight: 700; }

/* =========================================================== overlays */

#title {
  position: absolute;
  top: 4px;
  right: 8px;
  text-align: right;
  pointer-events: none;
  z-index: 2;
}
#title h1 {
  margin: 0;
  font-size: var(--fs-n2);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.92;
}
#title p {
  margin: 3px 0 0;
  font-size: var(--fs-n4);
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

#banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.9);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
#banner.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* A soft pool of shade so the name holds against whatever tile it lands on. */
#banner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 320%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(6, 22, 15, 0.72), transparent 72%);
  z-index: -1;
}

#banner .who {
  font-size: clamp(1.6rem, 4.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 3px 26px rgba(0, 0, 0, 0.6);
}
#banner .what {
  margin-top: 8px;
  font-size: var(--fs-n2);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================= chrome */

#chrome {
  position: fixed;
  left: var(--gap);
  bottom: var(--gap);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: var(--rail-l);
  padding: 9px 10px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
#chrome.is-hidden { display: none; }

/* Same eyebrow as every other panel, so the bar reads as one of them. */
.chrome-title {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: var(--fs-n3);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.chrome-title .note {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-3);
  font-size: var(--fs-n4);
  font-variant-numeric: tabular-nums;
}

.row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

button {
  font-weight: 600;
  font-size: var(--fs-n3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(244, 241, 232, 0.07);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
button:hover { border-color: var(--gold); color: var(--gold); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 197, 66, 0.12);
}

.field { display: flex; align-items: center; gap: 6px; flex: 1; }
.field label {
  font-weight: 600;
  font-size: var(--fs-n4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 46px;
  height: 16px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--hair-strong); border-radius: 1px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--hair-strong); border-radius: 1px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px; margin-top: -4px;
  border-radius: 50%; background: var(--gold); border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: none;
}
input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.readout {
  font-weight: 700;
  font-size: var(--fs-n3);
  min-width: 36px;
  text-align: right;
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}

/* ========================================================= responsive */

@media (max-width: 1280px) {
  #app { grid-template-columns: minmax(0, 1fr) var(--rail-r); }
  #rail-left { display: none; }
}

/* Short viewports: the four player cards and the log have to share a rail
   that is not tall enough for both at full size. Tighten the cards; the log
   keeps a floor so it never collapses to a single line. */
@media (max-height: 820px) {
  .pcard { padding: 5px 8px 6px; }
  .pcard-vp { font-size: var(--fs-n1); }
  .vpbar { margin: 4px 0 5px; }
  #panel-log { min-height: 118px; }
}

@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #rail-right { display: none; }
  #chrome { width: min(300px, calc(100vw - 2 * var(--gap))); }
  #title { top: 6px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .yield-track span, .hist-bar, #banner, .stand-track i { transition: none; }
  .log-line, .pcard-vp.is-bumped { animation: none; }
}