/* ============================================================
   KISORO — brand system per "Kisoro Brand Guidelines" v1.0
   Warm charcoal surfaces · terracotta = the one action color
   Gold = rating/rank only · green/red = results & connection
   ============================================================ */

:root {
  /* color */
  --c-950: #14100c;      /* app background */
  --c-925: #151109;      /* admin background */
  --c-900: #201a13;      /* cards, panels */
  --c-870: #1c1610;      /* inputs */
  --c-800: #2a2219;      /* raised surfaces, secondary buttons */
  --c-admin: #100d08;    /* admin sidebar */
  --line: #3a2f22;       /* borders, dividers */
  --line-soft: #241c13;  /* hairlines */
  --line-strong: #4a3c2a;/* input borders */
  --terra: #d9663a;      /* primary action */
  --terra-deep: #8f3d1e; /* pressed, button shadow */
  --terra-link: #e5754a; /* links */
  --terra-hover: #f0875f;
  --terra-ink: #1a120b;  /* text on terracotta */
  --gold: #e3a455;       /* ratings, rank, last move */
  --tan: #e7c98b;        /* seeds */
  --cream: #f4ece1;      /* primary text */
  --taupe-soft: #c9bba6; /* strong secondary text */
  --taupe: #a6957f;      /* secondary text */
  --dim: #8a7a64;        /* tertiary text */
  --faint: #6f6252;
  --ghost: #5c5142;
  --green: #7cb868;
  --green-soft: #9dcb8b;
  --red: #d06249;
  --red-soft: #e88a72;
  /* type */
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* misc */
  --r-card: 14px;
  --r-btn: 13px;
  --shadow-card: 0 20px 50px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  background: #0e0b08;
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { color: var(--terra-hover); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--terra); color: #fff; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }

/* ---------- app shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.screen {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-950);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 500px) {
  .app { padding: 28px 16px 48px; }
  .screen {
    min-height: calc(100vh - 76px);
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
}
.screen--wide { max-width: 1280px; border-radius: 16px; }
.screen--admin { max-width: 1180px; border-radius: 14px; background: var(--c-925); }

/* ---------- typography helpers ---------- */
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.02; letter-spacing: -.025em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); }
.overline {
  font: 600 10.5px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.muted { color: var(--taupe); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }

/* ---------- wordmark ---------- */
.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: var(--cream); white-space: nowrap; }
.wordmark .o { position: relative; display: inline-block; }
.wordmark .o i {
  position: absolute; border-radius: 50%; background: var(--terra);
  width: 13%; height: 13%;
}
.wordmark .o i:first-child { left: 29%; top: 44%; }
.wordmark .o i:last-child { left: 52%; top: 52%; }
.wordmark--ink { color: var(--terra-ink); }
.wordmark--ink .o i { background: var(--terra-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border: none; border-radius: 12px;
  font: 600 14.5px var(--font-ui);
  color: var(--cream); background: var(--c-800);
  transition: filter .12s ease, transform .06s ease;
  user-select: none;
}
.btn:hover { filter: brightness(1.12); color: var(--cream); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn--primary {
  background: var(--terra); color: var(--terra-ink);
  font-weight: 700; font-size: 16px;
  height: 52px; border-radius: var(--r-btn);
  box-shadow: 0 2px 0 var(--terra-deep);
}
.btn--primary:hover { color: var(--terra-ink); }
.btn--primary:active { box-shadow: 0 0 0 var(--terra-deep); transform: translateY(2px); }
.btn--secondary { background: var(--c-800); border: 1px solid var(--line-strong); }
.btn--ghost { background: transparent; color: var(--taupe-soft); height: 44px; }
.btn--danger { background: #3d2318; border: 1px solid var(--red); color: var(--red-soft); }
.btn--success { background: #26301f; border: 1px solid var(--green); color: var(--green-soft); }
.btn--gold { background: #2b2115; border: 1px solid var(--gold); color: var(--gold); }
.btn--sm { height: 42px; padding: 0 16px; font-size: 13px; border-radius: 11px; }
.btn--block { display: flex; width: 100%; }

/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: 99px;
  background: var(--c-800); border: 1px solid var(--line-strong);
  font: 600 12.5px var(--font-ui); color: var(--taupe-soft);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.chip:hover { color: var(--cream); }
.chip--on { background: var(--terra); border-color: var(--terra); color: var(--terra-ink); font-weight: 700; }
.chip--on:hover { color: var(--terra-ink); }
.rating-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 7px;
  background: rgba(227,164,85,.14); border: 1px solid rgba(227,164,85,.4);
  font: 600 12.5px var(--font-mono); color: var(--gold);
  white-space: nowrap;
}
.result-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px; border-radius: 6px;
  font: 700 11.5px var(--font-ui);
}
.result-badge--w { background: rgba(124,184,104,.14); color: var(--green-soft); }
.result-badge--l { background: rgba(208,98,73,.14); color: var(--red-soft); }
.result-badge--d { background: rgba(166,149,127,.14); color: var(--taupe); }
.mode-pill {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(217,102,58,.15); border: 1px solid rgba(217,102,58,.4);
  font: 600 11px var(--font-ui); letter-spacing: .04em; color: var(--terra-link);
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- cards ---------- */
.card { background: var(--c-900); border: 1px solid var(--line); border-radius: var(--r-card); }
.card--pad { padding: 14px 16px; }
.card--tap { display: block; transition: border-color .12s ease, background .12s ease; }
.card--tap:hover { border-color: var(--line-strong); background: #241d15; color: inherit; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--taupe-soft); }
.field__label small { color: var(--dim); font-weight: 400; font-size: 13px; }
.input {
  width: 100%; height: 50px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--c-870); color: var(--cream);
  font: 500 15px var(--font-ui);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(217,102,58,.18); }
.input--ok { border-color: var(--green); }
.input--err { border-color: var(--red); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 88px; }
.input-affix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font: 600 12.5px var(--font-ui); color: var(--dim);
  background: none; border: none; padding: 4px;
}
.input-affix--ok { font: 700 12px var(--font-mono); color: var(--green); }
.field__error { font-size: 12.5px; color: var(--red-soft); }
.field__error .fr { color: var(--dim); }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7a64' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
textarea.input { height: auto; min-height: 72px; padding: 13px 15px; resize: vertical; font-size: 13.5px; line-height: 1.5; }

/* toggle switch */
.toggle {
  position: relative; width: 44px; height: 26px; border-radius: 99px; flex: none;
  background: var(--c-800); border: 1px solid var(--line-strong);
  transition: background .15s ease;
  cursor: pointer; padding: 0;
}
.toggle::after {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: var(--dim);
  transition: left .15s ease, background .15s ease;
}
.toggle[aria-checked="true"] { background: var(--terra); border-color: var(--terra); }
.toggle[aria-checked="true"]::after { left: 22px; background: var(--cream); width: 19px; height: 19px; }

/* segmented (EN/FR) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg__opt { padding: 5px 10px; font: 600 11px var(--font-ui); color: var(--dim); background: none; border: none; }
.seg__opt--on { background: var(--c-800); color: var(--cream); }
.seg--terra .seg__opt--on { background: var(--terra); color: var(--terra-ink); }

/* checkbox */
.checkbox {
  width: 20px; height: 20px; border-radius: 6px; flex: none; padding: 0;
  border: 1px solid var(--line-strong); background: var(--c-870);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12px; font-weight: 700;
}
.checkbox[aria-checked="true"] { background: var(--terra); border-color: var(--terra); color: var(--terra-ink); }

/* radio row (report sheet) */
.radio-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--c-950); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
  font-size: 14px; font-weight: 600; color: var(--cream);
  cursor: pointer; width: 100%; text-align: left;
}
.radio-row__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; box-sizing: border-box; }
.radio-row--on { border-color: var(--terra); }
.radio-row--on .radio-row__dot { border: 5px solid var(--terra); }

/* ---------- avatar ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 10px; font-weight: 700; color: var(--terra-ink);
  font-family: var(--font-ui); user-select: none;
}
.avatar--terra { background: linear-gradient(135deg, #d9663a, #8f3d1e); }
.avatar--gold { background: linear-gradient(135deg, #e3a455, #a06a24); color: #14100c; }
.avatar--green { background: linear-gradient(135deg, #7cb868, #44703a); color: #14100c; }
.avatar--blue { background: linear-gradient(135deg, #7f9dc4, #40587a); color: #14100c; }
.avatar--rose { background: linear-gradient(135deg, #c47f9d, #7a4058); color: #14100c; }

/* ---------- player plate ---------- */
.plate {
  display: flex; align-items: center; gap: 11px;
  background: var(--c-900); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px 13px;
}
.plate--active {
  background: var(--c-800); border: 1.5px solid var(--terra);
  box-shadow: 0 0 0 1px rgba(217,102,58,.3), 0 0 18px rgba(217,102,58,.18);
}
.plate--dim { opacity: .75; }
.plate__info { flex: 1; min-width: 0; }
.plate__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.plate__rating { font: 600 12px var(--font-mono); color: var(--gold); }
.plate__clock {
  font: 700 19px var(--font-mono);
  background: var(--c-950); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 11px; color: var(--taupe-soft);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.plate__clock--active { border-color: var(--terra); color: var(--terra-hover); }
.plate__clock--low { color: var(--red-soft); border-color: var(--red); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.conn-dot--warn { background: var(--gold); box-shadow: 0 0 8px rgba(227,164,85,.7); }
.conn-dot--off { background: var(--red); }
.turn-tag {
  font: 600 10.5px var(--font-ui); color: var(--terra);
  border: 1px solid var(--terra); border-radius: 5px; padding: 1px 6px;
  letter-spacing: .03em; white-space: nowrap;
}

/* ---------- top bar & nav ---------- */
.statusbar {
  height: 40px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; font: 600 12px var(--font-mono); color: var(--taupe);
}
.statusbar__batt { width: 16px; height: 9px; border: 1px solid var(--taupe); border-radius: 2px; }
.pagehead { display: flex; align-items: center; gap: 12px; padding: 10px 20px; flex: none; }
.pagehead__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.icon-btn {
  width: 36px; height: 36px; flex: none;
  border-radius: 10px; background: var(--c-800); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--taupe-soft); font-size: 16px; line-height: 1;
}
.icon-btn:hover { color: var(--cream); border-color: var(--line-strong); }

.bottomnav {
  display: flex; flex: none;
  border-top: 1px solid var(--line-soft);
  padding: 10px 8px calc(18px + env(safe-area-inset-bottom));
  background: var(--c-950);
}
.bottomnav a { flex: 1; text-align: center; font-size: 11.5px; color: var(--dim); font-weight: 600; }
.bottomnav a .ic { display: block; font-size: 17px; margin-bottom: 2px; }
.bottomnav a.on { color: var(--terra-link); font-weight: 700; }

/* ---------- board ---------- */
.board {
  width: 100%; padding: 4.2%;
  border-radius: 14px; position: relative;
  background: linear-gradient(135deg, #6d4a27 0%, #59391b 38%, #4b2e13 72%, #3f2610 100%);
  box-shadow: inset 0 2px 3px rgba(255,220,170,.22), inset 0 -3px 6px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45);
  user-select: none;
}
.board::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: repeating-linear-gradient(93deg, rgba(255,225,180,.045) 0px, rgba(255,225,180,0) 3px, rgba(0,0,0,.05) 6px, rgba(0,0,0,0) 9px);
  pointer-events: none;
}
.board__rows { position: relative; display: flex; flex-direction: column; gap: 10px; }
.board__row { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; }
.board__row--south-gap { margin-top: 8px; }
.pit {
  position: relative; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #4a3018 0%, #33200c 45%, #221405 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 2px rgba(255,220,170,.18);
  border: none; padding: 0; cursor: default;
}
.pit--legal {
  cursor: pointer;
  box-shadow: inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 2px rgba(255,220,170,.18),
              0 0 0 2px var(--terra), 0 0 14px rgba(217,102,58,.55);
}
.pit--legal:hover { box-shadow: inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 2px rgba(255,220,170,.18), 0 0 0 3px var(--terra), 0 0 20px rgba(217,102,58,.8); }
.pit--last {
  box-shadow: inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 2px rgba(255,220,170,.18),
              0 0 0 2px var(--gold), 0 0 12px rgba(227,164,85,.5);
}
.pit--capture { animation: pit-capture .7s ease; }
@keyframes pit-capture {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 14px rgba(227,164,85,.9)) brightness(1.35); }
}
.pit--drop { animation: pit-drop .18s ease; }
@keyframes pit-drop {
  0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); }
}
:root { --seed-grad: radial-gradient(circle at 35% 30%, #f0d9a4 0%, #d9b672 55%, #a87f42 100%); }
.seed {
  position: absolute; border-radius: 50%;
  width: 28%; height: 28%;
  background: var(--seed-grad);
  box-shadow: 0 1px 2px rgba(0,0,0,.55);
  pointer-events: none;
}

/* ---------- living-hand motion design ----------
   The mover's hand of seeds is a real object: it lifts out of the
   source pit, glides pit-to-pit dropping one seed per pit, sweeps
   relayed pits up, receives captured seeds flying in, and lands
   with a ripple. Driven by board.js from the engine event stream. */
.board__hand {
  position: absolute; left: 0; top: 0; z-index: 6;
  pointer-events: none; opacity: 0;
  will-change: transform;
  transition: opacity .16s ease;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.board__hand--on { opacity: 1; }
.board__hand .hseed {
  position: absolute; border-radius: 50%;
  background: var(--seed-grad);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 -1px 2px rgba(0,0,0,.15);
}
.board__hand .hseed:nth-child(1) { left: 6%;  top: 30%; width: 48%; height: 48%; }
.board__hand .hseed:nth-child(2) { left: 40%; top: 10%; width: 44%; height: 44%; z-index: 1; }
.board__hand .hseed:nth-child(3) { left: 32%; top: 44%; width: 42%; height: 42%; z-index: 2; }
.board__hand-count {
  position: absolute; right: -12px; top: -13px; z-index: 3;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 99px; background: #f0d9a4; border: 1px solid #8f5a34;
  color: #2a1a0a; font: 700 11.5px var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
  font-variant-numeric: tabular-nums;
}
/* seed flying between a pit and the hand (relay pickup / capture) */
.seed-fx {
  position: absolute; z-index: 5; border-radius: 50%;
  background: var(--seed-grad);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  pointer-events: none; will-change: transform, opacity;
}
/* one seed dropping from the hand into a pit */
.seed-drop {
  position: absolute; left: 36%; top: 36%; width: 28%; height: 28%;
  border-radius: 50%; background: var(--seed-grad);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
  pointer-events: none; z-index: 4;
  animation: seed-drop .14s cubic-bezier(.3,.9,.4,1.25) forwards;
}
@keyframes seed-drop {
  0% { transform: translateY(-110%) scale(.92); opacity: .95; }
  72% { transform: translateY(8%) scale(1.04); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.pit--pickup { animation: pit-pickup .38s ease; }
@keyframes pit-pickup {
  0%, 100% { filter: none; transform: scale(1); }
  40% { filter: brightness(1.3); transform: scale(1.05); }
}
.pit__ripple {
  position: absolute; inset: -8%; border-radius: 50%;
  border: 2px solid rgba(240,217,164,.7);
  pointer-events: none;
  animation: pit-ripple .55s ease-out forwards;
}
@keyframes pit-ripple {
  0% { transform: scale(.55); opacity: .95; }
  100% { transform: scale(1.28); opacity: 0; }
}
/* strike effects — gold only, per brand (captures pulse gold) */
.cap-float {
  position: absolute; z-index: 7; pointer-events: none;
  font: 700 16px var(--font-mono); color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  transform: translate(-50%, 0);
  animation: cap-float 1.1s cubic-bezier(.2,.7,.3,1) forwards;
  white-space: nowrap;
}
.cap-float--big { font-size: 22px; color: #f0c27a; letter-spacing: .04em; }
@keyframes cap-float {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); }
  14% { opacity: 1; transform: translate(-50%, -10px) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
.board__surge {
  position: absolute; inset: 0; border-radius: 14px; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(227,164,85,.3), rgba(227,164,85,0) 68%);
  animation: board-surge .75s ease-out forwards;
}
@keyframes board-surge { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
.streak-tag {
  display: inline-flex; align-items: center;
  font: 700 10.5px var(--font-mono); color: var(--gold);
  border: 1px solid rgba(227,164,85,.55); border-radius: 5px; padding: 1px 6px;
  white-space: nowrap;
  animation: ember 1.4s ease-in-out infinite alternate;
}
@keyframes ember {
  from { box-shadow: 0 0 3px rgba(227,164,85,.2); }
  to { box-shadow: 0 0 11px rgba(227,164,85,.75); }
}

@media (prefers-reduced-motion: reduce) {
  .board__hand, .seed-fx, .seed-drop, .pit--pickup, .pit__ripple,
  .cap-float, .board__surge, .streak-tag { animation: none; transition: none; }
}
.pit__count {
  position: absolute; right: -3px; top: -5px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 99px; background: #f0d9a4; border: 1px solid #8f5a34;
  color: #2a1a0a; font: 700 10.5px var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pit--capture, .pit--drop { animation: none; }
}

/* ---------- move chips ---------- */
.move-chip {
  flex: none; font: 500 11.5px var(--font-mono); color: var(--dim);
  background: var(--c-900); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; white-space: nowrap;
}
.move-chip--hot { color: var(--gold); border-color: rgba(227,164,85,.4); }
.move-chip--current { color: var(--terra-ink); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.move-chip--future { color: var(--ghost); border-color: var(--c-800); background: var(--c-950); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14,11,8,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in .18s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.overlay__panel {
  width: 100%; max-width: 390px;
  background: var(--c-900); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 40px); overflow: auto;
  animation: panel-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes panel-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 430px; margin: 0 auto;
  background: var(--c-900); border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  padding: 12px 22px calc(30px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px rgba(0,0,0,.55);
  animation: sheet-up .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet__grab { width: 40px; height: 4px; border-radius: 99px; background: var(--line); margin: 0 auto 16px; }
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay__panel, .sheet { animation: none; }
}

/* ---------- toast ---------- */
#toast-root { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--c-800); border: 1px solid var(--line-strong);
  color: var(--cream); font: 600 13.5px var(--font-ui);
  border-radius: 11px; padding: 12px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: toast-in .2s ease;
  max-width: min(92vw, 420px); text-align: center;
}
.toast--ok { border-color: rgba(124,184,104,.5); color: var(--green-soft); background: #26301f; }
.toast--err { border-color: var(--red); color: var(--red-soft); background: #3d2318; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- banners ---------- */
.banner {
  display: flex; align-items: center; gap: 11px;
  border-radius: 13px; padding: 11px 14px;
}
.banner--warn { background: #2b2115; border: 1px solid var(--gold); }
.banner--ok { background: #26301f; border: 1px solid rgba(124,184,104,.4); }

/* ---------- lists / settings rows ---------- */
.rowlist { background: var(--c-900); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.rowlist__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--c-800);
  width: 100%; background: none; border-left: none; border-right: none; border-top: none;
  font-size: 14px; font-weight: 600; color: var(--cream); text-align: left;
}
.rowlist__row:last-child { border-bottom: none; }
.rowlist__value { font-size: 13.5px; color: var(--taupe); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.rowlist__sub { font-size: 11.5px; color: var(--dim); font-weight: 400; margin-top: 1px; }

/* ---------- stat tiles ---------- */
.stat-tile { background: var(--c-900); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; min-width: 0; }
.stat-tile__num { font: 700 21px var(--font-mono); font-variant-numeric: tabular-nums; }
.stat-tile__label { font-size: 11.5px; color: var(--dim); margin-top: 2px; }

/* ---------- queue ring ---------- */
.ring { position: relative; width: 150px; height: 150px; }
.ring__track { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c-800); }
.ring__arc { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--terra); animation: ring-spin 1.1s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring__arc { animation-duration: 3s; } }
.ring__core {
  position: absolute; inset: 16px; border-radius: 50%;
  background: var(--c-900); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}

/* ---------- bars (profile chart) ---------- */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.bars span { flex: 1; border-radius: 3px 3px 0 0; background: var(--line); min-height: 3px; }

/* ---------- desktop topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--line-soft); flex: none;
}
.topbar__nav { display: flex; gap: 20px; font-size: 14px; font-weight: 600; }
.topbar__nav a { color: var(--dim); }
.topbar__nav a.on, .topbar__nav a:hover { color: var(--cream); }

/* ---------- admin ---------- */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; width: 100%; }
@media (min-width: 500px) { .admin-layout { min-height: calc(100vh - 76px); } }
.admin-side { background: var(--c-admin); border-right: 1px solid var(--line-soft); padding: 20px 0; display: flex; flex-direction: column; }
.admin-side__brand { padding: 0 20px 18px; display: flex; align-items: center; gap: 8px; }
.admin-tag { font: 600 9px var(--font-mono); background: var(--terra); color: var(--terra-ink); padding: 2px 6px; border-radius: 4px; letter-spacing: .05em; }
.admin-side__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.admin-side__nav a {
  padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--dim);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.admin-side__nav a.on { background: var(--c-800); color: var(--cream); }
.admin-side__nav a:hover { color: var(--cream); }
.count-pill { font: 700 11px var(--font-mono); background: var(--red); color: var(--c-950); border-radius: 99px; padding: 2px 8px; }
.admin-main { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.admin-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.table { background: var(--c-900); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.table__scroll { overflow-x: auto; }
.table__head, .table__row { display: grid; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); min-width: 640px; }
.table__head { font: 600 10.5px var(--font-mono); letter-spacing: .08em; color: var(--faint); padding: 9px 20px; border-bottom: 1px solid var(--c-800); text-transform: uppercase; }
.table__row { font-size: 13px; }
.table__row:last-child { border-bottom: none; }
.status-word { font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.status-word--active { color: var(--green-soft); }
.status-word--suspended { color: var(--gold); }
.status-word--banned { color: var(--red-soft); }
.status-word--live { color: var(--green-soft); }
.status-word--reconn { color: var(--gold); }
.status-word--done { color: var(--dim); }
.cat-chip { padding: 5px 11px; border-radius: 7px; font-weight: 700; font-size: 11px; flex: none; letter-spacing: .03em; }
.cat-chip--red { background: rgba(208,98,73,.14); color: var(--red-soft); }
.cat-chip--gold { background: rgba(227,164,85,.14); color: var(--gold); }
.cat-chip--taupe { background: rgba(166,149,127,.14); color: var(--taupe); }

@media (max-width: 1023px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--line-soft); gap: 10px; }
  .admin-side__brand { padding: 0 8px 0 0; }
  .admin-side__nav { flex-direction: row; padding: 0; }
  .admin-side__nav a { white-space: nowrap; }
  .admin-side__foot { display: none; }
}

/* ---------- game room layout (1l mobile / 1v desktop) ----------
   The game keeps its app-like mobile chrome up to 1023px (just wider
   from 768px), then switches to the board + moves-sidebar layout. */
.desktop-only { display: none !important; }
.game-shell { display: flex; flex-direction: column; flex: 1; }
.game-main { display: flex; flex-direction: column; flex: 1; }
.game-side { display: none; }
@media (min-width: 768px) {
  .screen--game { max-width: 760px; border-radius: 18px; }
}
@media (min-width: 1024px) {
  .desktop-only { display: flex !important; }
  .mobile-only { display: none !important; }
  .screen--game { max-width: 1280px; border-radius: 16px; }
  .game-shell { display: grid; grid-template-columns: 1fr 340px; align-items: stretch; }
  .game-main { padding: 20px 36px 28px; gap: 4px; }
  .game-main > div { padding-left: 0 !important; padding-right: 0 !important; }
  .game-board-wrap { padding: 14px 30px 8px !important; max-width: 860px; width: 100%; margin: 0 auto; }
  .game-side { border-left: 1px solid var(--line-soft); flex-direction: column; display: flex; }
  .plate__clock { font-size: 22px; padding: 7px 14px; }
}

/* ---------- site responsiveness ----------
   Mobile (<768px) keeps the 390px design 1:1.
   WEB TIER (≥768px): FULL-BLEED pages — the phone chrome gives way to
   a full-width topbar, a centered .wrap container and a site footer.
   Auth/queue/join keep a centered card (.screen--card).
   WIDE TIER (≥1024px): the desktop grids from the mockups. */

.site-topbar { display: none; }
.site-desktop-only { display: none !important; }
.sd-col { display: none !important; }
.site-footer { display: none; }

/* wrap: neutral on mobile, centered container on web tier */
.wrap { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; }
.wrap--row { flex-direction: row; align-items: center; flex: none; }

/* stacked mobile defaults for the responsive grids */
.home-hero { display: flex; flex-direction: column; }
.home-cards { display: flex; flex-direction: column; padding: 0 20px 22px; gap: 12px; }
.home-cards .card--info { display: none; }
.play-grid { display: flex; flex-direction: column; }
.dash-grid { display: flex; flex-direction: column; gap: 14px; padding: 10px 20px 16px; flex: 1; }
.dash-rail { display: none; }
.prof-grid { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; flex: 1; }
.prof-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prof-head { display: flex; align-items: center; gap: 15px; }
.learn-grid, .lesson-grid, .replay-grid { display: flex; flex-direction: column; flex: 1; }
.queue-grid { display: flex; flex-direction: column; flex: 1; }
.queue-side { display: none; }
.hist-head, .lb-head { display: none; }
.rp-side { display: none; }
.settings-grid { display: flex; flex-direction: column; gap: 18px; }

@media (min-width: 768px) {
  .app { padding: 0; }
  .statusbar { display: none; }
  .bottomnav { display: none; }
  .site-mobile-only { display: none !important; }
  .site-desktop-only { display: flex !important; }
  .sd-col { display: flex !important; flex-direction: column; }

  /* full-bleed pages */
  .screen--site, .screen--md, .screen--admin {
    max-width: none; border: 0; border-radius: 0; box-shadow: none;
    min-height: 100vh;
  }
  .screen--admin { max-width: none; }
  /* centered card flows (auth, queue, private room, join) */
  .screen--card {
    max-width: 520px; margin: 56px auto;
    border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--shadow-card);
    min-height: 0;
  }
  /* game keeps a card at mid tier */
  .screen--game { max-width: 760px; margin: 24px auto; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }

  .wrap { max-width: 1264px; margin: 0 auto; padding: 0 32px; }

  .site-topbar {
    display: block; flex: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .site-topbar__in {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 15px 32px; flex: none;
  }
  .site-topbar__nav { display: flex; gap: 22px; font-size: 14px; font-weight: 600; align-items: center; }
  .site-topbar__nav a { color: var(--dim); }
  .site-topbar__nav a.on, .site-topbar__nav a:hover { color: var(--cream); }

  .site-footer { display: block; border-top: 1px solid var(--line-soft); margin-top: auto; }
  .site-footer__in {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 22px 32px; flex: none;
    font-size: 12.5px; color: var(--faint);
  }
  .site-footer__in a { color: var(--faint); }
  .site-footer__in a:hover { color: var(--taupe-soft); }

  /* home hero (mock 01) */
  .home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 56px;
    align-items: center;
    padding: 56px 0 40px;
  }
  .home-hero .hg-text, .home-hero .hg-board, .home-hero .hg-cta { padding: 0 !important; margin: 0 !important; }
  .home-hero .hg-text { grid-column: 1; }
  .home-hero .hg-board { grid-column: 2; grid-row: 1 / span 2; }
  .home-hero .hg-cta { grid-column: 1; align-self: start; }
  .hg-text .h1 { font-size: 56px; }
  .home-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; padding: 8px 0 48px;
  }
  .home-cards .card--info { display: block; }
  .home-cards > .card { padding: 22px 24px; border-radius: 16px; }

  /* play (mock 02): cards in a row */
  .play-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px !important;
    padding: 32px 0 !important;
    align-content: start;
  }
  .play-grid > [data-mode="ranked"] { grid-column: auto; }
  .play-grid > .play-online { grid-column: 1 / -1; margin-top: 8px; }

  /* dashboard (mock 08): rail on the right */
  .dash-grid {
    flex: 1;
    display: grid !important;
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "greet rail" "cta rail" "recent rail";
    gap: 18px 40px !important;
    padding: 36px 0 32px !important;
    align-items: start;
  }
  .dg-greet { grid-area: greet; }
  .dg-cta { grid-area: cta; }
  .dg-recent { grid-area: recent; }
  .dg-stats { display: none !important; }
  .dash-rail { display: flex; flex-direction: column; gap: 16px; grid-area: rail; }

  /* profile (mock 10) */
  .prof-grid {
    flex: 1;
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas: "head head" "left right";
    gap: 18px 32px !important;
    padding: 36px 0 32px !important;
    align-content: start;
  }
  .prof-head { grid-area: head; padding: 0 !important; }
  .prof-col--left { grid-area: left; }
  .prof-col--right { grid-area: right; }

  /* learn split (mock 03) */
  .learn-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    grid-template-areas: "l r";
    gap: 48px;
    padding: 40px 0 36px;
    align-items: start;
  }
  .learn-grid > * { min-width: 0; }
  .li-left { grid-area: l; }
  .li-right { grid-area: r; position: sticky; top: 24px; }
  .lesson-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas: "head head" "board side";
    gap: 8px 40px;
    padding: 16px 0 32px;
    align-items: start;
  }
  .lsn-head { grid-area: head; }
  .lsn-board { grid-area: board; }
  .lsn-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; }

  /* replay workspace (mock 12) */
  .replay-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-areas: "main side";
    gap: 0 40px;
    padding: 20px 0 32px;
    align-items: start;
    flex: 1;
  }
  .rp-main { grid-area: main; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .rp-side {
    grid-area: side;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--line-soft);
    padding-left: 32px;
    min-height: 60vh;
  }
  .rp-moves { flex: 1; overflow-y: auto; max-height: 56vh; display: flex; flex-direction: column; gap: 6px; }
  .rp-chips { display: none !important; }

  /* matchmaking (mock 09): three-across composition */
  .queue-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 48px;
    align-items: center;
    justify-items: center;
    flex: 1;
    padding: 0 32px;
  }
  .queue-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .queue-center { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .queue-vscard { display: none !important; }

  /* tables (mocks 11 & 13) */
  .hist-head, .lb-head {
    display: grid;
    padding: 12px 20px;
    font: 600 10.5px var(--font-mono); letter-spacing: .08em; color: var(--faint);
    border-bottom: 1px solid var(--c-800);
  }
  .hist-row, .lb-row { display: grid; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
  .hist-row:last-child, .lb-row:last-child { border-bottom: none; }
  .hist-cols { grid-template-columns: 72px 1.3fr 1fr 1fr 130px 90px 80px 80px; gap: 8px; }
  .lb-cols { grid-template-columns: 80px 1.4fr 1fr 160px 120px; gap: 8px; }
  .hist-list-mobile { display: none !important; }
  .lb-list-mobile { display: none !important; }
  .lb-row--you { background: var(--c-800); box-shadow: inset 3px 0 0 var(--terra); }

  /* leaderboard podium as cards */
  .podium { gap: 16px; align-items: stretch; padding: 8px 0 6px; }
  .podium__col { border-radius: 16px; padding: 20px 12px 16px; }
  .podium__col--first { border-radius: 18px; transform: translateY(-8px); }

  /* settings 2-col (mock 14) */
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    padding: 28px 0 36px;
    align-items: start;
  }
  .settings-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

  /* generic page headers on web tier */
  .page-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; padding: 34px 0 6px; }
}

@media (min-width: 1024px) {
  .screen--game { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .game-shell { max-width: 1480px; margin: 0 auto; width: 100%; }
  .site-topbar__in, .site-footer__in { padding-left: 40px; padding-right: 40px; }
  .hg-text .h1 { font-size: 64px; }
  .play-grid { grid-template-columns: repeat(4, 1fr); }
  .play-grid > [data-mode="ranked"] { grid-column: auto; }
}

/* ---------- misc utility ---------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.hr { height: 1px; background: var(--line-soft); border: none; margin: 0; }
.link { color: var(--terra-link); font-weight: 600; }
.link:hover { color: var(--terra-hover); }

/* screen content area default padding */
.content { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.content--pad24 { padding: 14px 24px; }
.footer-cta { padding: 14px 20px calc(26px + env(safe-area-inset-bottom)); flex: none; display: flex; flex-direction: column; gap: 10px; }

/* progress bar */
.progress { height: 6px; border-radius: 99px; background: var(--c-800); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: var(--terra); transition: width .2s ease; }

/* skeleton pulse for simulated loading */
.pulse { animation: pulse 1.4s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* podium */
.podium { display: flex; align-items: flex-end; gap: 10px; }
.podium__col { flex: 1; text-align: center; background: var(--c-900); border: 1px solid var(--line); border-radius: 14px 14px 4px 4px; padding: 14px 8px 12px; min-width: 0; }
.podium__col--first { flex: 1.15; background: linear-gradient(180deg, #2b2115, #201a13); border-color: rgba(227,164,85,.45); border-radius: 16px 16px 4px 4px; padding-top: 18px; }

/* reduced-motion app setting */
body.no-anim *, body.no-anim *::before, body.no-anim *::after {
  animation-duration: .01s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01s !important;
}