/* MCTS Chess: shared world — the face of a late-80s chess computer. Sizes on the device are in
   comp pixels times --u, so the composition scales as one object. */

@font-face { font-family: "Handjet"; src: url("/fonts/handjet-cyr.woff2?v=2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: "Handjet"; src: url("/fonts/handjet-lat.woff2?v=2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+2264, U+2265, U+FEFF, U+FFFD; font-display: block; }
@font-face { font-family: "Public Pixel"; src: url("/fonts/publicpixel.woff2?v=1") format("woff2"); font-display: block; }
@font-face { font-family: "Blobber"; src: url("/fonts/blobber.woff2?v=1") format("woff2"); font-display: block; }
/* size-adjust brings Warm Pixel's cap height (0.85 em) down to Tiny5's (0.625 em) so the layout keeps its measures. */
@font-face { font-family: "Warm Pixel"; src: url("/fonts/warmpixel.woff2?v=1") format("woff2"); size-adjust: 74%; font-display: block; }
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-cyr.woff2?v=2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-lat.woff2?v=2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+2264, U+2265, U+FEFF, U+FFFD; font-display: block; }

:root {
  --case: #282521;
  --case-hi: #3a3631;
  --case-lo: #161412;
  --silk: #cbbda7;
  --silk-dim: #8f8474;
  --bezel: #1b1d17;
  --lcd: #98a688;
  --lcd-ink: #1f2a1a;
  --lcd-ghost: rgba(31, 42, 26, 0.32);
  --lcd-faint: rgba(31, 42, 26, 0.045);
  --cream: #d3c6a8;
  --cream-ink: #2a2622;
  --cream-ink-2: #4f4a3f;
  --key: #c24b29;
  --key-hi: #d9643f;
  --key-lo: #8a2e17;
  --key-ink: #1d1311;
  --led: #8c1a14;
  --led-on: #ff3b22;
  --f-lcd: "Warm Pixel", "Tiny5", monospace;
  --f-silk: "Warm Pixel", "Tiny5", monospace;
  --f-mark: "Blobber", "Warm Pixel", monospace;
  --f-key: "Public Pixel", "Warm Pixel", monospace;
  --u: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--case) url("/assets/plates/case-plastic.png") repeat; color: var(--silk);
  scrollbar-color: var(--silk-dim) var(--case-lo); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; container-type: inline-size; font-family: var(--f-silk); font-synthesis: none; }
::selection { background: var(--lcd-ink); color: var(--lcd); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--led-on); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- device parts ---------- */

.lcd-glass {
  background: var(--lcd) url("/assets/plates/lcd-ground.png") repeat;
  background-size: calc(1024 * var(--u)) calc(200 * var(--u));
  color: var(--lcd-ink);
  box-shadow: inset 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(20, 26, 16, 0.38),
              inset 0 calc(-2 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 240, 0.12);
}
.bezel {
  background: var(--bezel);
  border-radius: calc(14 * var(--u));
  box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.7),
              0 calc(1 * var(--u)) 0 rgba(255, 245, 225, 0.08);
}
.cream {
  background: var(--cream) url("/assets/plates/panel-cream.png") repeat;
  background-size: calc(160 * var(--u)) calc(320 * var(--u));
  color: var(--cream-ink);
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45),
              inset 0 calc(1 * var(--u)) 0 rgba(255, 252, 240, 0.55),
              inset 0 calc(-2 * var(--u)) 0 rgba(90, 76, 52, 0.25);
}

.key {
  appearance: none; border: 0; cursor: pointer; font: inherit; color: var(--key-ink);
  background: linear-gradient(var(--key-hi), var(--key) 18%, var(--key) 82%, var(--key-lo));
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 var(--key-lo), 0 calc(9 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45),
              inset 0 calc(2 * var(--u)) 0 rgba(255, 210, 180, 0.35);
  transition: transform 70ms steps(2), box-shadow 70ms steps(2), filter 120ms;
}
.key:hover { filter: brightness(1.06); }
.key:active, .key[aria-pressed="true"] { transform: translateY(calc(5 * var(--u)));
  box-shadow: 0 calc(1 * var(--u)) 0 var(--key-lo), 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.45),
              inset 0 calc(2 * var(--u)) 0 rgba(255, 210, 180, 0.2); }
.key:disabled { filter: saturate(0.4) brightness(0.8); cursor: progress; }

.capkey {
  display: inline-grid; place-items: center; font-family: var(--f-silk);
  color: var(--cream-ink); border-radius: calc(5 * var(--u));
  background: linear-gradient(#ece2c9, #cdbf9f);
  box-shadow: 0 calc(3 * var(--u)) 0 #8e8167, inset 0 calc(1 * var(--u)) 0 #fff8e6;
}

.led-lamp {
  display: block; width: calc(26 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ff9d8a 0 12%, var(--led) 46%, #3f0806 100%);
  box-shadow: 0 0 0 calc(4 * var(--u)) #1d1915, 0 0 0 calc(5 * var(--u)) #6c6250;
}
.led-lamp[data-on="true"] {
  background: radial-gradient(circle at 38% 34%, #fff1e8 0 12%, var(--led-on) 46%, #8a1206 100%);
  box-shadow: 0 0 0 calc(4 * var(--u)) #1d1915, 0 0 0 calc(5 * var(--u)) #6c6250, 0 0 calc(16 * var(--u)) rgba(255, 60, 30, 0.75);
}
.led-lamp[data-blink="true"] { animation: led-blink 0.9s steps(1) infinite; }
@keyframes led-blink { 50% { background: radial-gradient(circle at 38% 34%, #ff9d8a 0 12%, var(--led) 46%, #3f0806 100%); box-shadow: 0 0 0 calc(4 * var(--u)) #1d1915, 0 0 0 calc(5 * var(--u)) #6c6250; } }

/* seven-segment readout: spans positioned in % of the readout box */
.seg { position: relative; display: block; width: 100%; height: 100%; transform: skewX(-9deg); }
.sg { position: absolute; background: var(--lcd-faint); }
.sg.on { background: var(--lcd-ink); }
.sg.h { clip-path: polygon(0 50%, 10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%); }
.sg.v { clip-path: polygon(50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%, 0 14%); }

/* dot-matrix type */
.dm { font-family: var(--f-lcd); font-variation-settings: "ELSH" 2; font-weight: 500; line-height: 1; }

/* ---------- search tree (shared with the game page) ---------- */
.tree-svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: var(--f-lcd); }
.tree-svg .edge { stroke: var(--lcd-ghost); stroke-width: 3; stroke-dasharray: 3 4; fill: none; }
.tree-svg .edge.pv { stroke: var(--lcd-ink); stroke-dasharray: none; stroke-width: 3.5; }
.tree-svg .node { fill: var(--lcd-ghost); }
.tree-svg .node.pv { fill: var(--lcd-ink); }
.tree-svg text { fill: var(--lcd-ghost); font-weight: 600; letter-spacing: 0.04em; }
.tree-svg text.pv { fill: var(--lcd-ink); font-weight: 700; }
.tree-svg text.root { fill: rgba(31, 42, 26, 0.62); font-weight: 600; }
.tree-svg .fresh { animation: lcd-in 360ms steps(3) both; }
@keyframes lcd-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tree-svg .fresh, .led-lamp[data-blink="true"] { animation: none; }
  .key { transition: none; }
}

.wordmark { font-family: var(--f-mark); }