/* ===== Tokens ===== */
:root {
  color-scheme: dark;
  --bg: #0c0a1f;
  --bg-2: #131033;
  --panel: #1d1842;
  --panel-2: #2a2259;
  --panel-3: #3a2f7a;
  --ink: #f6f1ff;
  --muted: #a8a0dc;
  --dim: #6e66a8;
  --line: #05030d;

  --simon: #2f8bff;
  --simon-dark: #1846a8;
  --simon-light: #9fd0ff;
  --blanka: #ff4fa8;
  --blanka-dark: #a8185f;
  --blanka-light: #ffb3da;

  --coin: #ffd23f;
  --coin-dark: #c98b00;
  --good: #5cff8a;
  --bad: #ff5468;

  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-text: 'VT323', ui-monospace, monospace;

  --gutter: 14px;
  --nav-h: 74px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* current player colour, overridden by .theme-* */
  --pc: var(--simon);
  --pc-dark: var(--simon-dark);
  --pc-light: var(--simon-light);
}

.theme-simon {
  --pc: var(--simon);
  --pc-dark: var(--simon-dark);
  --pc-light: var(--simon-light);
}

.theme-blanka {
  --pc: var(--blanka);
  --pc-dark: var(--blanka-dark);
  --pc-light: var(--blanka-light);
}

/* ENTP x INFJ easter egg */
.theme-golden {
  --pc: var(--coin);
  --pc-dark: var(--coin-dark);
  --pc-light: #fff4b0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(255, 79, 168, 0.18), transparent 60%),
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(47, 139, 255, 0.2), transparent 60%);
  background-size: 8px 8px, 8px 8px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 22px;
  line-height: 1.1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

button:disabled {
  cursor: not-allowed;
}

h1,
h2,
h3,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px dashed var(--coin);
  outline-offset: 4px;
}

/* ===== Atmosphere ===== */
.stars {
  position: fixed;
  inset: -50% 0 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 1px, transparent 1.5px),
    radial-gradient(circle, var(--blanka-light) 1px, transparent 1.5px),
    radial-gradient(circle, var(--simon-light) 1px, transparent 1.5px);
  background-size: 97px 113px, 151px 137px, 211px 181px;
  background-position: 0 0, 40px 60px, 120px 30px;
  opacity: 0.55;
  animation: star-drift 60s linear infinite;
}

.crt {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
  animation: crt-flicker 6s steps(1) infinite;
}

/* ===== Typography helpers ===== */
.title {
  font-family: var(--font-pixel);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--pc-dark);
}

.subtitle {
  margin: 28px 0 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--coin);
  text-shadow: 2px 2px 0 var(--line);
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

.error {
  color: var(--bad);
  font-size: 18px;
}

.boot {
  display: grid;
  place-items: center;
  gap: 16px;
  min-height: 100dvh;
  padding: var(--gutter);
  font-family: var(--font-pixel);
  font-size: 12px;
  text-align: center;
}

/* ===== Pixel frame: notched 4px border drawn with box-shadows ===== */
.px {
  --bw: 4px;
  --bc: var(--line);
  margin: var(--bw);
  box-shadow:
    0 calc(var(--bw) * -1) 0 0 var(--bc),
    0 var(--bw) 0 0 var(--bc),
    calc(var(--bw) * -1) 0 0 0 var(--bc),
    var(--bw) 0 0 0 var(--bc),
    inset 0 calc(var(--bw) * -1) 0 0 rgba(0, 0, 0, 0.28),
    inset 0 var(--bw) 0 0 rgba(255, 255, 255, 0.07);
}

.sprite {
  display: block;
  image-rendering: pixelated;
  flex-shrink: 0;
}