/* Samal Play, the hub. Dark room, hard light, drawn structure: the same
   language the games use, one step cooler and more orderly, because this page
   is the corridor and the games are the rooms. */
:root {
  --black: #040506;
  --ink: #0a0c10;
  --panel: #0d1015;
  --line: #ffffff12;
  --line-hi: #ffffff26;
  --chalk: #eaecef;
  --mute: #9aa1a9;
  --dim: #6b727a;
  --red: #ff2634;
  --beam: #fff3df;
  --accent: var(--red);
  --disp: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

/* ---------- light mode ----------
   The page turns light; the hero and the painted posters stay dark, because
   they are screens showing games played in the dark. The choice follows the
   system unless the switch in the header says otherwise. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --black: #f4f6f8; --ink: #ffffff; --panel: #eef1f4;
    --line: #0f172a1a; --line-hi: #0f172a38;
    --chalk: #121820; --mute: #4b5563; --dim: #6b7280; --lede: #39414d;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --black: #f4f6f8; --ink: #ffffff; --panel: #eef1f4;
  --line: #0f172a1a; --line-hi: #0f172a38;
  --chalk: #121820; --mute: #4b5563; --dim: #6b7280; --lede: #39414d;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--black); color: var(--chalk);
  font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, canvas { display: block; max-width: 100%; }
a { color: var(--chalk); }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 60; background: var(--ink); padding: 10px 14px; }

/* the stencilled label above every heading, a room number on a door */
.plate {
  margin: 0 0 18px; font: 500 11px/1.4 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim);
}
.plate::before {
  content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 12px 4px 0;
  background: var(--accent); vertical-align: middle;
}

/* ---------- header ---------- */
/* The header floats over the hero, which is a dark stage in both themes, so
   the bar is dark chrome in both as well. Taking its colours from the page
   palette put a white bar over a black hero in light mode. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 13px var(--pad);
  /* a solid bar rather than a fade: the fade left the second row of language
     links sitting on the page's own colour, where they disappeared */
  background: #050709ee;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff14;
}
.top .brand span { color: #eaecef; }
.top .brand i { color: #8b9199; }
.top .langs a { color: #9aa1a9; }
.top .langs a:hover { color: #fff; }
.top .langs a[aria-current="true"] { color: #fff; border-color: #ffffff38; }
.top .theme { color: #9aa1a9; border-color: #ffffff22; }
.top .theme:hover { color: #fff; border-color: #ffffff45; }
/* the theme switch */
.theme {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); background: transparent; border: 1px solid var(--line); padding: 8px 10px;
}
.theme:hover { color: var(--chalk); border-color: var(--line-hi); }
.theme svg { width: 13px; height: 13px; fill: currentColor; }
.theme .sun { display: none; }
:root[data-theme="light"] .theme .sun { display: inline; }
:root[data-theme="light"] .theme .moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme .sun { display: inline; }
  :root:not([data-theme="dark"]) .theme .moon { display: none; }
}

/* the live item: a red gradient that keeps moving, so it reads as a tool
   rather than another page */
.flare {
  flex: none; text-decoration: none; white-space: nowrap;
  font: 700 11px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; padding: 10px 14px; border: 0;
  background: linear-gradient(100deg, #ff2634, #ff6a3d, #c81e2b, #ff2634);
  background-size: 300% 100%;
  animation: flare 7s linear infinite;
}
.flare:hover { filter: brightness(1.12); }
@keyframes flare { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .flare { animation: none; } }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { font: 700 15px/1 var(--disp); letter-spacing: .3em; text-transform: uppercase; }
.brand i {
  font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .18em;
  color: var(--dim); text-transform: uppercase; padding-left: 2px;
}
.langs { display: flex; flex-wrap: wrap; gap: 2px 0; margin-right: auto; }
.langs a {
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--dim);
  text-decoration: none; padding: 7px 7px; border: 1px solid transparent; white-space: nowrap;
}
.langs a:hover { color: var(--chalk); }
.langs a[aria-current="true"] { color: var(--chalk); border-color: var(--line-hi); }

/* ---------- buttons ---------- */
.cta, .ghost {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font: 700 13px/1 var(--disp); letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 22px; border: 1px solid transparent;
}
.cta { background: var(--accent); color: #fff; }
.cta:hover { filter: brightness(1.15); }
.cta.big { padding: 20px 28px; font-size: 15px; }
.cta-sm { padding: 10px 14px; font-size: 11px; letter-spacing: .16em; }
.ghost { border-color: var(--line-hi); color: var(--chalk); }
.ghost:hover { background: #ffffff10; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: 124px var(--pad) 92px; overflow: hidden;
  background: #040506; color: #eaecef;
}
.hero .lede { color: #ccd1d6; }
.hero .fine, .hero .plate, .hero .hint { color: #9aa1a9; }
.hero .ghost { color: #eaecef; border-color: #ffffff38; }
.hero .ghost:hover { background: #ffffff14; }
.hero h1 em { color: var(--beam, #fff3df); }
#beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 10% 50%, #040506f2 0%, #040506d8 36%, #0405066b 62%, #04050600 86%);
}
.hero-text { position: relative; z-index: 2; max-width: 56ch; }
h1 {
  font: 700 clamp(40px, 7vw, 92px)/.98 var(--disp);
  letter-spacing: .004em; text-transform: uppercase; margin: 0 0 24px;
}
h1 em { font-style: normal; color: var(--beam); text-shadow: 0 0 46px #fff3df55; }
.lede { font-size: clamp(17px, 1.75vw, 20px); color: var(--lede); margin: 0 0 30px; max-width: 50ch; }
.lede.wide { max-width: 64ch; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { margin: 20px 0 0; font: 13px/1.6 var(--mono); color: var(--dim); max-width: 52ch; }
.hint {
  position: absolute; z-index: 2; right: var(--pad); bottom: 26px; margin: 0;
  font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}

/* ---------- bands ---------- */
.band { position: relative; padding: clamp(72px, 9vw, 128px) var(--pad); border-top: 1px solid var(--line); }
h2 {
  font: 700 clamp(26px, 3.4vw, 42px)/1.1 var(--disp); text-transform: uppercase;
  letter-spacing: .01em; margin: 0 0 20px; max-width: 22ch;
}
h3 { font: 700 15px/1.3 var(--disp); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }

/* ---------- the shelf of games ----------
   Each card is a sleeve: the poster fills the top and fades into the card,
   the name is set into that fade, and the words sit below it. */
.shelf {
  list-style: none; margin: 46px 0 0; padding: 0;
  display: grid; gap: clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.cab { position: relative; }
.cab > a, .cab > div {
  position: relative; display: flex; flex-direction: column; height: 100%;
  text-decoration: none; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, var(--black)), var(--ink));
  border: 1px solid var(--line);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cab > a::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; z-index: 3;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.cab > a:hover, .cab > a:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -34px var(--accent), 0 2px 0 -1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cab > a:hover::before, .cab > a:focus-visible::before { transform: scaleX(1); }

.poster-wrap { position: relative; aspect-ratio: 16 / 10; }
.poster { width: 100%; height: 100%; display: block; background: #06070a; }
/* the art fades into the card rather than stopping at a line */
.poster-wrap::after {
  content: ""; position: absolute; inset: 38% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 70%, transparent) 52%, var(--ink));
}
.poster-title { position: absolute; left: clamp(18px, 2vw, 26px); right: 72px; bottom: 14px; z-index: 2; }
.poster-title .tag {
  margin: 0 0 7px; font: 500 10px/1.3 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}
.cab h3 {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font: 700 clamp(22px, 2.3vw, 30px)/1 var(--disp); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.badge {
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 5px 7px; text-shadow: none;
}
.cab-body { padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.desc { margin: 0 0 18px; color: var(--mute); font-size: 15px; line-height: 1.62; }
/* the meta reads as a line of small print, not a row of boxes */
.meta { list-style: none; display: flex; flex-wrap: wrap; margin: auto 0 0; padding: 0; gap: 6px 0; }
.meta li {
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center;
}
.meta li + li::before {
  content: ""; width: 3px; height: 3px; margin: 0 11px; flex: none;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* the way in: an arrow that fills when the card is pointed at */
.go {
  position: absolute; right: clamp(16px, 1.8vw, 22px); bottom: clamp(16px, 1.8vw, 22px); z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  transition: background .25s, transform .25s, border-color .25s;
}
.go svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.cab > a:hover .go, .cab > a:focus-visible .go { background: var(--accent); border-color: var(--accent); transform: translateX(3px); }
.cab > a:hover .go svg, .cab > a:focus-visible .go svg { stroke: #0b0d10; }

.cab.pending > div { opacity: .9; }
.cab.pending .poster { filter: saturate(.55) brightness(.8); }
.cab.soon {
  border: 1px dashed var(--line-hi); background: color-mix(in srgb, var(--ink) 40%, transparent);
  display: grid; align-content: center; padding: 34px 28px; min-height: 220px;
}
.cab.soon h3 { color: var(--mute); font-size: 20px; text-shadow: none; }
.cab.soon p { margin: 12px 0 0; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 460px) { .shelf { grid-template-columns: 1fr; } .poster-title { right: 64px; } }

/* ---------- the round, the credo ---------- */
.steps { list-style: none; counter-reset: s; margin: 46px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps li { counter-increment: s; background: var(--ink); padding: 26px 28px; display: grid; grid-template-columns: 70px 1fr; align-items: baseline; gap: 10px 24px; }
.steps li::before { content: "0" counter(s); font: 500 12px/1 var(--mono); letter-spacing: .2em; color: var(--accent); }
.steps b { font: 700 17px/1.3 var(--disp); letter-spacing: .1em; text-transform: uppercase; }
.steps span { grid-column: 2; color: var(--mute); font-size: 15.5px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 46px; }
.cards article { background: var(--ink); padding: 28px 26px 30px; }
.cards p { margin: 0; color: var(--mute); font-size: 15.5px; }

/* ---------- controllers ---------- */
.pad-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 46px; }
.pad-steps { margin-top: 0; }
.pad-art { margin: 0; border: 1px solid var(--line); background: var(--ink); }
.pad-art canvas { width: 100%; aspect-ratio: 16 / 10; display: block; }
.pad-art figcaption { border-top: 1px solid var(--line); padding: 14px 18px; font: 12px/1.6 var(--mono); color: var(--dim); }
.cards.two-up { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .pad-wrap { grid-template-columns: 1fr; } .cards.two-up { grid-template-columns: 1fr; } }

/* ---------- the controller test page ---------- */
.pad-page { padding-top: 120px; }
.padwait { margin-top: 36px; border: 1px dashed var(--line-hi); background: var(--ink); padding: 26px 28px; }
.padwait b { display: block; font: 700 15px/1.4 var(--disp); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.padwait p { margin: 0; color: var(--mute); font-size: 14.5px; max-width: 70ch; }
.pad-live.off, .padwait.off { display: none; }
.pad-id { margin: 32px 0 0; font: 13px/1.6 var(--mono); color: var(--mute); }
.pad-id b { color: var(--chalk); font-weight: 500; }
.pad-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 18px; }
.pad-grid h3 { margin: 22px 0 10px; }
.pad-grid h3:first-child { margin-top: 0; }
.meters { display: grid; gap: 8px; }
.meter { display: grid; grid-template-columns: 74px 1fr 52px; gap: 10px; align-items: center;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--mute); }
.meter .track { height: 6px; background: var(--line); position: relative; overflow: hidden; }
.meter .track i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--accent); }
.meter .val { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--dim);
  border: 1px solid var(--line); padding: 7px 8px; min-width: 38px; text-align: center; }
.chip.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.stat-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--dim); }
.stat-row b { color: var(--chalk); font-weight: 500; }
@media (max-width: 900px) { .pad-grid { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */
.faq { margin-top: 44px; border: 1px solid var(--line); background: var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; }
.qa summary {
  list-style: none; cursor: pointer; padding: 20px 26px;
  font: 700 15px/1.4 var(--disp); letter-spacing: .08em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 18px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--accent); font-family: var(--mono); }
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover { background: #ffffff08; }
.qa p { margin: 0; padding: 0 26px 22px; color: var(--mute); max-width: 74ch; }

/* ---------- close, footer ---------- */
.close {
  text-align: center; padding: clamp(80px, 10vw, 148px) var(--pad);
  border-top: 1px solid var(--line);
  background: radial-gradient(70% 120% at 50% 0%, #fff3df0f, transparent 70%);
}
.close h2 { margin: 0 auto 14px; max-width: none; }
.close p { color: var(--mute); margin: 0 0 32px; }
.foot { padding: 40px var(--pad) 56px; border-top: 1px solid var(--line); font: 13px/1.7 var(--mono); color: var(--dim); }
.foot a { color: var(--mute); text-decoration: none; margin-right: 22px; }
.foot a:hover { color: var(--chalk); }
.foot p { margin: 14px 0 0; max-width: 74ch; }

/* Japanese and Chinese take neither wide tracking nor uppercasing */
.cjk h1, .cjk h2, .cjk h3, .cjk .plate, .cjk .cta, .cjk .ghost, .cjk .brand span, .cjk .brand i,
.cjk .steps b, .cjk .qa summary, .cjk .tag, .cjk .meta li, .cjk .badge, .cjk .go
  { letter-spacing: .02em; text-transform: none; }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .hint { display: none; }
}
@media (max-width: 760px) {
  .top { flex-wrap: wrap; row-gap: 4px; }
  /* one scrolling row rather than two stacked ones: the header stays thin and
     the hero keeps the fold */
  .langs {
    order: 3; width: 100%; margin: 2px -4px 0; padding: 0 4px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .langs::-webkit-scrollbar { display: none; }
  .top .cta-sm { order: 2; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { min-height: 94svh; padding-top: 112px; }
  .shelf { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; }
  .steps span { grid-column: 1; }
  .cta, .ghost { width: 100%; justify-content: space-between; }
  .cta-sm { width: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cab > a:hover { transform: none; } }

/* game accents, generated from platform/games.mjs */
.cab-kelega { --accent: #ff2634; }
.cab-football { --accent: #3ddc84; }
.cab-racing { --accent: #4aa3ff; }
.cab-corabin { --accent: #ffd66e; }