/* Spotlight tokens: colors, type stacks, radii, shadows and sizes only. */
:root {
  /* Room */
  --room: #151436;
  --room-fold: #1b1a44;
  --floor: #0e0d27;
  --shade: #07061a;

  /* Light */
  --beam-neutral: #fff4d6;
  --tint-common: #e4ebff;
  --tint-rare: #9acff0;
  --tint-legendary: #e8b64c;
  --gold: #e8b64c;
  --gold-soft: #f3d38a;

  /* Cards */
  --back: #5b1231;
  --back-deep: #3e0b21;
  --paper: #f6f1e6;
  --ink: #1d1a2e;
  --ink-muted: #625d78;

  /* Text */
  --text: #f3eee4;
  --muted: #a9a3c7;
  --faint: #6d6896;

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Liberation Serif", "DejaVu Serif", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Arial, system-ui, sans-serif;
  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-md: 15px;
  --name-size: clamp(64px, min(14vw, 24svh), 220px);
  --name-lines: 1;
  --name-leading: .9;
  --finale-size: clamp(30px, 4.2vw, 60px);

  /* Radii */
  --radius-card: .7em;
  --radius-pack: 4px;
  --radius-control: 999px;
  --radius-button: 3px;

  /* Shadows */
  --shadow-object: 0 26px 40px -18px rgb(3 2 14 / .9);
  --shadow-mini: 0 6px 10px -4px rgb(3 2 14 / .8);
  --glow-focus: 0 0 0 2px var(--gold);

  /* Sizes */
  --gutter: 24px;
  --top-h: 64px;
  --bottom-h: 84px;
  --card-h: clamp(220px, 40svh, 420px);
  --card-w: calc(var(--card-h) * .714);
  --hint-h: 108px;
  --ring-size: 92px;
  --slot-w: 34px;
  --tri-w: clamp(150px, min(15vw, 25svh), 220px);
  --peek-w: 120px;
  --control: 38px;
}

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
    --top-h: 56px;
    --bottom-h: 116px;
    --name-lines: 2;
    --name-size: clamp(64px, 18.5vw, 80px);
    --name-box: clamp(118px, 17svh, 170px);
    --card-h: min(38svh, 330px);
    --hint-h: 100px;
    --ring-size: 86px;
    --slot-w: 30px;
    --tri-w: calc((100vw - 2 * var(--gutter) - 16px) / 3);
    --peek-w: 76px;
    --finale-size: clamp(30px, 8.6vw, 40px);
  }
}