/* Clumsy Cloud Arcade (architecture/arcade-page.md, direction C, the index).
   Tokens: values from the site's assets/rebrand/brand-tokens.css (Quiet Kernel 1.0), the same as Snap's
   snap.css, unless noted. Curves: studio Clumsy motion (land, soft). Fonts: the site's own, self-hosted. */
:root {
  --bg: #0B0F10;
  --raised: #1A1F23;
  --control: #80949A;
  --text: #EBEAEC;
  --text-hi: #F7F6F8;                                    /* the lit name and the button's hover */
  --text-2: #AEBCC2;
  --muted: #7A8FA0;
  --dim: #5A6870;                                        /* locked names: 3.3:1 on --bg, display size only */
  --signal: #6CE5D6;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --name: clamp(2.75rem, 13.2vw, 7rem);                  /* game names */
  --puff-w: clamp(84px, calc(var(--name) * 1.7), 150px); /* Puff's drawn width, as puff-stage.js draws him */
  --puff-room: calc(var(--puff-w) * 1.3);                /* Puff and the sun above the S */
  --land: cubic-bezier(.2, 1.35, .35, 1);
  --soft: cubic-bezier(.2, .8, .2, 1);
  --press: 120ms;
  --state: 180ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); }
body { font: 400 1.0625rem/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
.arc {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  min-height: 100dvh; max-width: 1120px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Top */
.arc-top__title { margin: 0; font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -.01em; }
.arc-top__line { margin: 2px 0 0; color: var(--text-2); }

/* The index */
.arc-index { list-style: none; margin: 0; padding: 0; }
.arc-game { position: relative; margin-top: 44px; }
.arc-game--live { margin-top: 8px; }
.arc-game--live + .arc-game { margin-top: 88px; }
.arc-game__row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.arc-game__row--live { position: relative; padding-top: var(--puff-room); }
.arc-game__name {
  margin: 0; min-width: 0; overflow-wrap: break-word; color: var(--dim);
  font: 600 var(--name)/.92 var(--font-display); letter-spacing: -.035em;
}
.arc-game--live .arc-game__name { color: var(--text-hi); }
.arc-game__about { min-width: 0; }
.arc-game__status { margin: 0 0 2px; color: var(--muted); font: 500 .9375rem/1.4 var(--font-body); }
.arc-game__status--next { color: var(--signal); }
.arc-game__line { margin: 0; max-width: 30ch; color: var(--text-2); text-wrap: pretty; }
.arc-game--live .arc-game__line { margin-bottom: 18px; color: var(--text); }

/* Puff's canvas covers the viewport, so the S at the content edge never cuts him off. It never takes a tap. */
.arc-puff { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Play Snap. Its ::after stretches over the whole Snap block, so a tap anywhere on it plays. */
.arc-game__play {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 20px;
  border-radius: 14px; background: var(--text); color: var(--bg); text-decoration: none;
  font: 500 1.0625rem/1.2 var(--font-body); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--state) var(--soft);
}
.arc-game__play::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .arc-game__play:hover { background: var(--text-hi); } }
.arc-game__play:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.arc-game__row--live { transition: transform 500ms var(--land); }
.arc-game__row--live:active { transform: scale(.98); transition: transform var(--press) var(--soft); }

/* Bottom */
.arc-foot { margin-top: 120px; color: var(--muted); font-size: .9375rem; }
.arc-foot__play {
  display: flex; align-items: center; justify-content: center; min-height: 52px; max-width: 18rem; margin: 0 0 28px;
  padding: 14px 20px; border: 1px solid var(--control); border-radius: 14px; color: var(--text); text-decoration: none;
  font: 500 1.0625rem/1.2 var(--font-body); -webkit-tap-highlight-color: transparent;
  transition: transform 500ms var(--land), background-color var(--state) var(--soft);
}
@media (hover: hover) { .arc-foot__play:hover { background: var(--raised); } }
.arc-foot__play:active { transform: scale(.97); transition: transform var(--press) var(--soft); }
.arc-foot__play:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.arc-foot__note { margin: 0; text-wrap: pretty; }
.arc-nowrap { white-space: nowrap; }
.arc-foot__home {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2);
  text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px;
  transition: color var(--state) var(--soft);
}
@media (hover: hover) { .arc-foot__home:hover { color: var(--text); } }
.arc-foot__home:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

/* Desktop: each name keeps its status, line and action in a column to its right. */
@media (min-width: 900px) {
  .arc { padding-top: 40px; }
  .arc-game { margin-top: 56px; }
  .arc-game--live { margin-top: 16px; }
  .arc-game--live + .arc-game { margin-top: 140px; }
  .arc-game__row { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); column-gap: 48px; align-items: end; }
  .arc-foot { margin-top: 168px; }
}

/* Arrivals: Soft, 90 ms apart. Only with scripting on, so nothing is hidden without it. */
@media (scripting: enabled) {
  .arc-top, .arc-game__row, .arc-foot { animation: arc-soft 560ms var(--soft) both; }
  .arc-game:nth-child(1) .arc-game__row { animation-delay: 90ms; }
  .arc-game:nth-child(2) .arc-game__row { animation-delay: 180ms; }
  .arc-game:nth-child(3) .arc-game__row { animation-delay: 270ms; }
  .arc-game:nth-child(4) .arc-game__row { animation-delay: 360ms; }
  .arc-foot { animation-delay: 450ms; }
}
@keyframes arc-soft { from { opacity: 0; filter: blur(8px); } }
@keyframes arc-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .arc-top, .arc-game__row, .arc-foot { animation-name: arc-fade; }
  .arc-game__row--live, .arc-game__row--live:active, .arc-foot__play, .arc-foot__play:active { transition: none; }
  .arc-game__row--live:active, .arc-foot__play:active { transform: none; opacity: .85; }
}