/* JINGI — the page is the table.
   One typeface, the game's own (Kode Mono); the title face appears only as images,
   because it may not be shipped as a web font. Scale 1.333, spacing in steps of 8 px. */

:root {
  --ink: #0d0b10;        /* the dark of the arena */
  --panel: #171717;      /* the game's screen back */
  --inset: #2a2927;      /* the game's screen inset */
  --text: #f0ece6;
  --dim: #aaa49e;
  --near: #d4874f;       /* the near seat: orange */
  --near-ink: #23160d;
  --far: #b76bff;        /* the far seat: purple */
  --hair: #26222b;

  --s-1: 0.875rem;
  --s0: 1rem;
  --s1: 1.333rem;
  --s2: 1.777rem;
  --s3: 2.369rem;
  --s4: 3.157rem;
  --s5: 4.209rem;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Kode Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--s0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: var(--near); }
:focus-visible { outline: 2px solid var(--near); outline-offset: 3px; }

.skip { position: absolute; left: -999rem; top: 0; background: var(--near); color: var(--near-ink); padding: 0.75rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(70rem, 100% - 3rem); margin-inline: auto; }

h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(var(--s3), 6.2vw, var(--s5)); line-height: 1; letter-spacing: -0.02em; max-width: 13ch; }
h2 { font-size: clamp(var(--s2), 3.6vw, var(--s3)); line-height: 1.1; letter-spacing: -0.01em; max-width: 22ch; }
h3 { font-size: var(--s1); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; }
p { margin: 0; text-wrap: pretty; }
section p, .lede { max-width: 62ch; }
section h2 + p { margin-top: 1rem; }
section p + p { margin-top: 1rem; }
.section-lede { color: var(--dim); max-width: 52ch; }

section { padding-block: 6rem; }
section + section { border-top: 1px solid var(--hair); }

/* ── button: the game's menu row at hover ─────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: 0 1.75rem;
  background: var(--near); color: var(--near-ink);
  border: 1px solid var(--near); border-radius: 4px;
  font: inherit; font-weight: 600; font-size: var(--s0);
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.button:hover { background: #e59a62; }
.button--quiet { background: transparent; color: var(--text); border-color: #4a3a2e; }
.button--quiet:hover { background: transparent; color: var(--near); border-color: var(--near); }
.button--small { min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--s-1); }
.button--wide { width: 100%; }

/* ── bar: the mark and the one action, always in reach ────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(13, 11, 16, 0.92), rgba(13, 11, 16, 0));
}
.bar__mark img { height: 1.25rem; width: auto; }

/* ── hero: the film of the table, the claim over its dark lower half ──────── */
.hero { position: relative; min-height: min(100svh, 60rem); display: flex; align-items: flex-end; overflow: hidden; }
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 11, 16, 0.86) 0%, rgba(13, 11, 16, 0.5) 42%, rgba(13, 11, 16, 0) 72%),
    linear-gradient(180deg, rgba(13, 11, 16, 0) 45%, var(--ink) 100%);
}
/* The name in its own script, set the way it is written: top to bottom. */
.hero__kanji {
  position: absolute; right: clamp(1.5rem, 6vw, 6rem); top: 50%; translate: 0 -50%;
  margin: 0; writing-mode: vertical-rl;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", serif;
  font-size: clamp(4rem, 13vw, 11rem); line-height: 1; letter-spacing: 0.08em;
  color: var(--text); opacity: 0.9; text-shadow: 0 0 2.5rem rgba(13, 11, 16, 0.9);
}
.hero__text { position: relative; padding-block: 8rem 5rem; }
.lede { font-size: var(--s1); line-height: 1.4; max-width: 38ch; margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.facts { margin-top: 1rem; color: var(--dim); font-size: var(--s-1); }
.film-toggle {
  position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 2;
  min-height: 2.75rem; padding: 0 1rem;
  background: rgba(13, 11, 16, 0.6); color: var(--dim);
  border: 1px solid var(--hair); border-radius: 4px;
  font: inherit; font-size: var(--s-1); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.film-toggle:hover { color: var(--text); border-color: var(--dim); }

/* ── the table: the speaker fills the section, the game's MOVE panel lies over its dark side ── */
.table { position: relative; padding-block: 6rem; min-height: min(54rem, 100svh); display: grid; align-items: center; overflow: hidden; }
.table__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); pointer-events: none; }
.table__side { grid-column: 2; pointer-events: auto; }
.stage { position: absolute; inset: 0; overflow: hidden; background: #08070a; }
/* Ink grows in from the right, so the panel is read on the dark and the bowl stays open on the left. */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 11, 16, 0) 46%, rgba(13, 11, 16, 0.86) 70%, var(--ink) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(13, 11, 16, 0) 14%, rgba(13, 11, 16, 0) 86%, var(--ink) 100%);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; opacity: 0; transition: opacity 0.6s var(--ease); }
.stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.stage.is-live canvas { opacity: 1; }
.stage.is-live .stage__poster { visibility: hidden; }
.stage__hint {
  position: absolute; z-index: 1; left: 0; width: 62%; bottom: 2rem; text-align: center;
  font-size: var(--s-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  max-width: none; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease);
}
/* The same breath as the game's turn prompt. */
.stage.is-live[data-state="held"] .stage__hint { opacity: 1; animation: breathe 1.25s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.55; } }

.table__side h2 + p { margin-top: 1rem; }
.hud { margin-block: 2rem 1.5rem; background: var(--panel); border-radius: 14px; padding: 1.5rem; display: grid; gap: 1.25rem; }
.hud__move img { height: 2rem; width: auto; }
.hud__line { margin-top: 0.75rem; font-size: var(--s1); line-height: 1.2; letter-spacing: 0.08em; max-width: none; }
.hud__line span { color: var(--near); }
.hud__small { margin-top: 0.5rem; font-size: var(--s-1); letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; max-width: none; }
.hud__info {
  background: var(--inset); border-radius: 10px; padding: 1rem 1.25rem; min-height: 6.5rem;
  font-size: var(--s-1); line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: #d2ccc6; max-width: none;
}

/* ── a turn: numbered with the die's own bars ─────────────────────────────── */
.beats { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.beats li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.beats h3 + p { margin-top: 0.5rem; }
.bars {
  width: 4rem; height: 4rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--hair);
  display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; padding: 0.875rem;
}
.bars i { display: block; height: 0.3125rem; border-radius: 1px; background: var(--near); box-shadow: 0 0 0.75rem rgba(212, 135, 79, 0.7); }

/* ── modes: the board, and the lines that score on it ─────────────────────── */
.modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-top: 3rem; }
.mode svg { width: 7rem; height: 7rem; }
.mode .cells rect { fill: none; stroke: #4a443f; stroke-width: 1.5; }
.mode .lines path { fill: none; stroke: var(--near); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(212, 135, 79, 0.8)); }
.mode h3 { margin-top: 1.5rem; color: var(--near); }
.mode p { margin-top: 0.5rem; max-width: 34ch; }
.again { margin-top: 4rem; }

/* ── across the table: the far seat is purple, like its windows ───────────── */
.across {
  background-image:
    linear-gradient(rgba(183, 107, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 107, 255, 0.07) 1px, transparent 1px);
  background-size: 4rem 4rem; background-position: center top;
}
.across__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4rem; align-items: center; }
.across h2 { color: var(--text); }
figure { margin: 0; }
figure img { width: 100%; height: auto; border-radius: 10px; }
figcaption { margin-top: 0.75rem; color: var(--dim); font-size: var(--s-1); }

.seen__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.seen__wide { grid-column: 1 / -1; }

.credits { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 2rem; }
.credits span { display: block; color: var(--near); font-size: var(--s-1); letter-spacing: 0.08em; text-transform: uppercase; }
.credits strong { display: block; margin-top: 0.25rem; font-size: var(--s1); line-height: 1.2; font-weight: 700; }
.name { margin-top: 3rem; }
.name span { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", serif; font-size: var(--s1); }
.engines { margin-top: 0.5rem; color: var(--dim); font-size: var(--s-1); }

.foot { border-top: 1px solid var(--hair); padding-block: 2rem 4rem; color: var(--dim); font-size: var(--s-1); }
.foot__row { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }

@media (max-width: 56em) {
  section { padding-block: 4rem; }
  .across__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* On a phone the bowl comes first, whole, and the panel follows under it. */
  .table { display: block; min-height: 0; padding-block: 0 4rem; }
  .table__grid { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
  .table__side { grid-column: 1; }
  .stage { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .stage::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(13, 11, 16, 0) 12%, rgba(13, 11, 16, 0) 84%, var(--ink) 100%); }
  .stage__poster { object-position: 50% 50%; }
  .stage__hint { width: 100%; bottom: 1.25rem; }
  .modes__grid, .credits, .seen__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__kanji { top: 6rem; translate: none; font-size: 5rem; opacity: 0.75; }
  .actions .button { width: 100%; }
  .again .button { width: 100%; }
  .beats li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; }
  .bars { width: 3rem; height: 3rem; padding: 0.625rem; gap: 0.25rem; }
  .bars i { height: 0.25rem; }
}