/* Arcade-wide design tokens and the pixel frame. Authority: the arcade's art direction document (palette, font, scale, buttons).
   Games keep their own look inside the play area; the shell, font and buttons stay the same everywhere. */
@font-face {
  font-family: "Cubic 11";
  src: url("fonts/cubic-11.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* palette: named ramps, dark (cool violet) -> light (warm). Same values as site/lobby/palette.js */
  --arcade-outline: #140c24;
  --arcade-night-0: #1b1030;
  --arcade-night-1: #2c1b4d;
  --arcade-night-2: #45306e;
  --arcade-night-3: #6b56a0;
  --arcade-red-1: #8c1c3c;
  --arcade-red-2: #d0344c;
  --arcade-red-3: #ff6a5e;
  --arcade-gold-1: #c4761c;
  --arcade-gold-2: #ffc23a;
  --arcade-gold-3: #fff0a8;
  --arcade-glass-3: #8fc4ff;
  --arcade-cream: #fff4e0;
  --arcade-paper-shade: #e8d9c4;
  /* roles (names from M0 kept so nothing that already uses them breaks) */
  --arcade-bg: var(--arcade-night-0);
  --arcade-panel: var(--arcade-night-1);
  --arcade-ink: var(--arcade-cream);
  --arcade-ink-dim: #b9a8d8;
  --arcade-ink-dark: var(--arcade-outline);
  --arcade-accent: #ff5d8f;
  --arcade-accent-2: #4fd6ff;
  /* pixel scale: UI chrome is drawn in 2 px pixels; Cubic 11 has a 12 px em, so text sizes are whole multiples of 12 px
     (18 px, 1.5x, only for body text that must stay readable on phones) */
  --arcade-px: 2px;
  --arcade-text-s: 12px;
  --arcade-text-m: 18px;
  --arcade-text-l: 24px;
  --arcade-text-xl: 36px;
  --arcade-radius: 0px;
  --arcade-gap: 8px;
  --arcade-tap: 44px;
  --arcade-font: "Cubic 11", system-ui, "Noto Sans JP", "Noto Sans TC", sans-serif;
}
html, body { margin: 0; background: var(--arcade-bg); color: var(--arcade-ink); font-family: var(--arcade-font); font-size: var(--arcade-text-m); line-height: 1.5; }
canvas.pixel, img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Cubic 11 fills the baseline: a skip-ink underline would vanish under every letter and show only between words */
a { text-decoration-skip-ink: none; text-underline-offset: 0.2em; }

/* Pixel frame: a 2 px outline with notched corners (box-shadow, no border-radius), a lit top edge and a shaded bottom
   edge inside. Set --fill, --lit, --shade (and color) to recolour. */
.arcade-frame, .arcade-btn {
  --fill: var(--arcade-night-1); --lit: var(--arcade-night-3); --shade: var(--arcade-outline); --line: var(--arcade-outline);
  background: var(--fill);
  margin: var(--arcade-px);
  box-shadow:
    0 calc(-1 * var(--arcade-px)) 0 0 var(--line), 0 var(--arcade-px) 0 0 var(--line),
    calc(-1 * var(--arcade-px)) 0 0 0 var(--line), var(--arcade-px) 0 0 0 var(--line),
    inset 0 var(--arcade-px) 0 0 var(--lit), inset 0 calc(-1 * var(--arcade-px)) 0 0 var(--shade);
}
.arcade-btn {
  --fill: var(--arcade-night-2); --lit: var(--arcade-night-3); --shade: var(--arcade-night-1);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--arcade-tap); min-height: var(--arcade-tap); padding: 0 14px;
  border: 0; border-radius: 0; color: var(--arcade-ink); font: inherit; font-size: var(--arcade-text-m); line-height: 1;
  text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.arcade-btn--primary { --fill: var(--arcade-gold-2); --lit: var(--arcade-gold-3); --shade: var(--arcade-gold-1); color: var(--arcade-ink-dark); }
.arcade-btn:active { translate: 0 var(--arcade-px); --lit: var(--fill); }
.arcade-btn:focus-visible, .arcade-frame:focus-visible { outline: var(--arcade-px) solid var(--arcade-accent-2); outline-offset: calc(2 * var(--arcade-px)); }

.arcade-shell {
  position: fixed; z-index: 1000; display: flex; gap: 6px;
  top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px);
}
.arcade-shell__btn {
  /* same pixel frame as .arcade-btn, so every game gets it without adding a class */
  --fill: var(--arcade-night-2); --lit: var(--arcade-night-3); --shade: var(--arcade-night-1); --line: var(--arcade-outline);
  min-width: var(--arcade-tap); height: var(--arcade-tap); padding: 0 8px; margin: var(--arcade-px);
  border: 0; border-radius: var(--arcade-radius); background: var(--fill); color: var(--arcade-ink);
  font: inherit; font-size: var(--arcade-text-m); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 calc(-1 * var(--arcade-px)) 0 0 var(--line), 0 var(--arcade-px) 0 0 var(--line),
    calc(-1 * var(--arcade-px)) 0 0 0 var(--line), var(--arcade-px) 0 0 0 var(--line),
    inset 0 var(--arcade-px) 0 0 var(--lit), inset 0 calc(-1 * var(--arcade-px)) 0 0 var(--shade);
}
.arcade-shell__btn:active { translate: 0 var(--arcade-px); --lit: var(--fill); }
.arcade-shell__btn:focus-visible { outline: var(--arcade-px) solid var(--arcade-accent-2); outline-offset: calc(2 * var(--arcade-px)); }