/* Isfet palette: green-black stone, a scorched sky, rust frames, ochre and bone stones. */
:root {
  --bg: #0e110d;
  --bg-mottle-1: rgba(48, 66, 40, 0.35);
  --bg-mottle-2: rgba(90, 40, 20, 0.18);
  --panel: #15130e;
  --fg: #e3dccb;
  --dim: #8a8572;
  --frame: #9a5326;
  --x: #f0a830;
  --o: #f2ead6;
  --pt-a: #7d3a1a;
  --pt-b: #8c7650;
  --accent: #dcc55c;
  --gold: #c9a940;
  --boom: #e0301a;
  --btn-bg: #6e2e12;
  --btn-fg: #f2e8d2;
  --sel-bg: #e3dccb;
  --sel-fg: #15130e;
  --font: "JetBrains Mono", "IBM Plex Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --serif: "EB Garamond", "Linux Libertine", Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "EB Garamond";
  src: url(/fonts/eb-garamond.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url(/fonts/eb-garamond-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font);
  background-color: var(--bg);
}
/* Mottled stone, like the wiki's backdrop, built from soft overlapping blots. */
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, var(--bg-mottle-1), transparent 70%),
    radial-gradient(ellipse 35% 40% at 85% 35%, var(--bg-mottle-1), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 90%, var(--bg-mottle-2), transparent 70%),
    radial-gradient(ellipse 25% 20% at 70% 70%, var(--bg-mottle-1), transparent 70%),
    radial-gradient(ellipse 30% 25% at 30% 60%, var(--bg-mottle-2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}

pre { margin: 0; font-family: var(--font); }

.banner {
  font-size: clamp(9px, calc((100vw - 32px) / 47 / 0.61), 18px);
  line-height: 1.2;
  white-space: pre;
  color: var(--x);
  margin-bottom: 8px;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 8px 0 0;
}
h1 span {
  display: block;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dim);
}
.lede {
  font-family: var(--serif);
  font-size: 18px;
  max-width: 34em;
  color: var(--fg);
  margin: 12px 0 20px;
}

/*
 * 47 columns must fit the viewport width (a monospace glyph is about 0.6em
 * wide), and the scene plus board (34 rows of 1.2em) its height, so the
 * whole table is visible on a 1080p screen without scrolling.
 */
#scene, #screen {
  font-size: clamp(9px, calc((100vw - 64px) / 47 / 0.61), 22px);
  line-height: 1.2;
  user-select: none;
  outline: none;
  white-space: pre;
}
/* Beside the chat the board gets what the chat column and gap leave over. */
@media (min-width: 900px) {
  #scene, #screen {
    font-size: clamp(9px, min(calc((min(100vw, 1120px) - 64px - 16px - 260px) / 47 / 0.61), calc((100vh - 120px) / 41.5)), 25px);
  }
}

/* The board's panel, with burnt, ragged edges top and bottom. */
.camp {
  background: var(--panel);
  padding: 14px 16px 22px;
  box-shadow: inset 0 0 60px rgba(150, 60, 20, 0.25), inset 0 0 0 1px rgba(154, 83, 38, 0.35);
  clip-path: polygon(
    0% 1.2%, 4% 0%, 9% 0.9%, 15% 0.2%, 22% 1.1%, 28% 0%, 35% 0.7%, 41% 0.1%, 48% 1%, 55% 0.2%,
    61% 0.9%, 68% 0%, 74% 1.2%, 80% 0.3%, 87% 1%, 93% 0%, 100% 0.8%,
    100% 99%, 95% 100%, 89% 99.1%, 82% 99.9%, 76% 98.9%, 69% 99.8%, 63% 99%, 57% 100%, 50% 99.2%,
    43% 99.9%, 37% 98.9%, 30% 99.7%, 24% 99%, 17% 100%, 11% 99.1%, 5% 99.8%, 0% 98.9%
  );
}

/* The scorched sky over the dunes: three rows of sky, the horizon, then sand. */
#scene {
  margin-bottom: 0.6em;
  background: linear-gradient(to bottom,
    #1a0906 0%, #5c1a0b 20%, #b23a12 38%, #e0621e 50%,
    #6b3416 54%, #3a2312 70%, #1d140c 100%);
  border-radius: 2px;
}
.s-st { color: #f6dca0; opacity: 0.75; }
.s-sun { color: #ffe39a; font-weight: 700; text-shadow: 0 0 8px #ffb347, 0 0 18px #ff7a1a; }
.s-du { color: #d39550; }
.s-tent { color: var(--o); font-weight: 700; }
.s-fire { color: #ff9a2e; font-weight: 700; text-shadow: 0 0 6px #ff5a0a; animation: flicker 1.3s steps(4) infinite; }
.s-log { color: #8a5a30; font-weight: 700; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.75; color: #ffcf5a; }
  50% { opacity: 0.9; }
  75% { opacity: 0.65; color: #ff6a1a; }
}

#screen { cursor: default; }
#screen [data-hit] { cursor: pointer; }
#screen.shake { animation: shake 0.25s linear; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #screen.shake, .s-fire { animation: none; }
}

.c-frame, .c-mark, .c-dim, .c-used { color: var(--dim); }
.c-frame { color: var(--frame); }
.c-pit { color: #5a1d14; }
.c-abyss { color: var(--boom); font-weight: 700; letter-spacing: 0; text-shadow: 0 0 8px rgba(224, 48, 26, 0.6); }
.c-abyss.c-cur { color: var(--sel-fg); text-shadow: none; }
.c-pta { color: var(--pt-a); }
.c-ptb { color: var(--pt-b); }
.c-label { color: var(--fg); }
.c-x { color: var(--x); font-weight: 700; }
.c-o { color: var(--o); font-weight: 700; }
.c-moving { text-shadow: 0 0 6px currentColor; }
.c-src { text-decoration: underline; }
.c-sel, .c-cur { background: var(--sel-bg); color: var(--sel-fg); }
.c-recent { text-decoration: underline; color: var(--accent); }
.c-dst { color: var(--accent); font-weight: 700; animation: pulse 1s ease-in-out infinite; }
.c-boom { color: var(--boom); font-weight: 700; }
.c-die { color: var(--fg); }
.c-rolling { color: var(--x); }
.c-landed { color: #fff6e0; font-weight: 700; }
.c-used { color: var(--dim); }
.c-btn { background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; }
.c-btn.c-off { background: transparent; color: var(--dim); font-weight: 400; }
.c-turn { color: var(--x); font-weight: 700; }
.c-name { color: #fff6e0; }
.c-warn { color: var(--boom); }
.c-score { color: var(--gold); }
.c-status { color: #fff6e0; font-weight: 700; }
.c-invite { color: var(--accent); }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .c-dst { animation: none; } }

form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 12px 0;
}
label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--serif); font-size: 18px; }
input {
  font: inherit;
  font-family: var(--font);
  font-size: 15px;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-bottom: 1px dashed var(--dim);
  padding: 4px 2px;
  min-width: 0;
}
input:focus { outline: none; border-bottom-color: var(--accent); }
button {
  font: inherit;
  font-weight: 700;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
}
button:hover { background: #8a3a17; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--accent); }

#invite {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
#invite span { font-family: var(--serif); font-size: 17px; color: var(--gold); }
#invite input { flex: 1; color: var(--accent); }

/* Board and chat side by side on wide screens, chat below the board on phones. */
.table {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .table {
    grid-template-columns: auto minmax(220px, 260px);
    justify-content: center;
    align-items: stretch;
  }
}

#chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 160px;
  max-height: 35vh;
  border: 1px solid rgba(154, 83, 38, 0.45);
  background: rgba(21, 19, 14, 0.7);
  padding: 8px 10px;
  font-family: var(--serif);
  font-size: 17px;
}
@media (min-width: 900px) {
  #chat { max-height: none; }
}
.chat-head { margin-bottom: 6px; }
.chat-title { color: var(--gold); font-weight: 600; text-align: center; line-height: 1.25; text-wrap: balance; }
.chat-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 2px; }
#watching { color: var(--dim); font-size: 15px; }
#mute { background: transparent; color: var(--dim); font-family: var(--font); font-weight: 400; padding: 0; font-size: 11px; white-space: nowrap; margin-left: auto; }
#mute:hover { color: var(--fg); }
#chat-log {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}
#chat-log li { margin: 4px 0; line-height: 1.35; }
#chat-log .time { color: var(--dim); font-size: 14px; }
#chat-log .who-x { color: var(--x); font-weight: 700; }
#chat-log .who-o { color: var(--o); font-weight: 700; }
#chat-log .who-spectator { color: #b3ad98; }
#chat-log .empty { color: var(--dim); }
#chat-log .road { color: #d2ad72; text-align: center; margin: 10px 0; }
#chat-form { margin: 6px 0 0; flex-wrap: nowrap; gap: 6px; }
#chat-form span { color: var(--accent); font-family: var(--font); }
#chat-form button { padding: 2px 4px; font-family: var(--font); font-size: 12px; }
#chat-input { flex: 1; min-width: 0; font-size: 14px; }

#log-box { margin-top: 16px; font-size: 13px; color: var(--dim); }
#log-box summary { cursor: pointer; font-family: var(--serif); font-size: 16px; }
#log { max-height: 240px; overflow-y: auto; margin: 8px 0 0; padding-left: 3.5em; color: var(--fg); }

.hint { color: var(--dim); font-size: 13px; }
.hint a { color: var(--accent); }
.hint code { color: var(--accent); }
.error { color: var(--boom); min-height: 1.2em; }
.warning {
  margin: 32px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6a58;
}