@font-face {
  font-family: "2-Dot Runner";
  src: url("../fonts/TwoDotRunner.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Runner brand tokens, Black theme. */
:root {
  --green: #E6FAC1;
  --black: #000000;
  --ink: var(--green);
  --ink-muted: #A3B386;
  --surface-raised: #12170B;
  --line: #5E6E47;
  --dot-ghost: #262E1A;
  --sans: "Space Grotesk", "IBM Plex Sans Thai", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Sans Thai", ui-monospace, Menlo, monospace;
  --dot2: "2-Dot Runner", "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* The whole console fits the visible screen (between notch and home bar);
   nothing scrolls. dvh follows Safari's toolbars as they show and hide. */
html {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (height: 100dvh) { html { height: 100dvh; } }

body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html[lang="th"] body { font-family: "IBM Plex Sans Thai", var(--sans); }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.console {
  height: 100%;
  /* No panning or zooming on the console: inside a frame on wilder.co a swipe
     would otherwise scroll the shop page behind the game. Panels scroll below. */
  touch-action: none;
  max-width: 480px;
  margin: 0 auto;
  padding-block: 10px 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  /* Header, board, hint, then the control deck takes whatever height is left. */
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
}

.top {
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.chip.shop { color: var(--ink); text-decoration: none; letter-spacing: 0.08em; }
.game-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phones: the shop button and the two chips need the room (Thai text in
   Safari is wider than elsewhere). The board shows the game's name anyway. */
@media (max-width: 480px) { .game-name { display: none; } }

.top-actions { display: flex; gap: 8px; flex-shrink: 0; }

.chip {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* The square LED board. main.js sets --board to the largest size that still
   leaves room for the hint and a minimum control deck. */
.screen { display: flex; justify-content: center; }

.bezel {
  position: relative;
  width: var(--board, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.bezel.hit { animation: hit 0.25s steps(2) 2; }
@keyframes hit { 50% { border-color: var(--green); } }

#board {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.howto {
  margin: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-muted);
}

/* Game Boy-style control deck. */
.controls {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pills { display: flex; justify-content: center; gap: 20px; }

.pill {
  min-width: 92px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The pad fills the rest of the screen; the buttons grow with it. */
.pad {
  position: relative;
  flex: 1;
  min-height: 76px;
  container-type: size;
}

.act {
  --btn: clamp(68px, min(34cqw, 100cqh - 10px), 130px);
  position: absolute;
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  touch-action: none;
  -webkit-touch-callout: none;
  box-shadow: 0 6px 0 #7A905C;
  transition: transform 40ms, box-shadow 40ms;
}

.act span { font-family: var(--dot2); font-size: calc(var(--btn) * 0.36); line-height: 1; }
.act small {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[lang="th"] .act small { font-family: "IBM Plex Sans Thai", sans-serif; font-size: 12px; text-transform: none; }

.act.down { transform: translateY(5px); box-shadow: 0 1px 0 #7A905C; }

/* Side by side on one line, one under each thumb. */
/* Anchored to the bottom, under the thumbs; spare height opens above them. */
.act.b, .act.a { bottom: 8px; }
.act.b { left: 4%; }
.act.a { right: 4%; }

/* Panels over the board: game over, claim, leaderboard, pause. */
.overlay {
  touch-action: pan-y;
  position: absolute;
  inset: 8px;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 6px;
  overflow-y: auto;
  user-select: text;
  -webkit-user-select: text;
}

.overlay[hidden] { display: none; }

.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
html[lang="th"] .label { font-family: "IBM Plex Sans Thai", sans-serif; letter-spacing: 0; text-transform: none; }

.dot-big, .dot-mid {
  font-family: var(--dot2);
  font-size: clamp(28px, 9vw, 44px);
  line-height: 1.1;
  margin: 0;
  color: var(--green);
}
.dot-mid { font-size: clamp(22px, 7vw, 32px); }
html[lang="th"] .dot-big { font-family: "IBM Plex Sans Thai", var(--sans); font-weight: 500; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.actions .wide { grid-column: 1 / -1; }
.actions .btn { min-height: 40px; padding: 8px 10px; font-size: 14px; }

.muted { color: var(--ink-muted); font-size: 14px; line-height: 1.4; margin: 0; }

.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--black);
  font-weight: 500;
  font-size: 15px;
}
.btn.ghost { background: none; color: var(--green); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }

#claimForm { display: flex; flex-direction: column; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-muted); }
.field input {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  font: 16px var(--sans);
}
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-muted); }
.check input { margin-top: 2px; accent-color: var(--green); }

.error { color: #ffb4a8; font-size: 13px; margin: 0; min-height: 1em; }

.steps {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.steps b, .email { color: var(--ink); font-weight: 500; }
.email { word-break: break-all; }

.code {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.06em;
  padding: 12px;
  border: 1px dashed var(--green);
  text-align: center;
}

.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.board-list li {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--dot-ghost);
  font-size: 14px;
}
.board-list li.prize { color: var(--green); }
.board-list li:not(.prize) { color: var(--ink-muted); }
.board-list .rank, .board-list .pts { font-family: var(--mono); }
.board-list .you { color: var(--ink-muted); font-size: 12px; }

/* Short screens: drop the hint, tighten the deck. */
@media (max-height: 640px) {
  .howto { display: none; }
  .console { grid-template-rows: auto auto minmax(0, 1fr); }
}
@media (max-height: 540px) {
  .console { gap: 6px; padding-block: 6px 8px; }
  .controls { gap: 6px; }
  .pill { padding: 5px 12px; }
}

/* Sideways phones: the board and buttons don't fit, so ask to turn back.
   main.js sets .sideways from the device's real orientation, not the window's
   shape, so an open keyboard (which makes the window short and wide) doesn't trigger it. */
.rotate { display: none; }
html.sideways .rotate {
  position: fixed;
  inset: 0;
  margin: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--black);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-align: center;
}