/* Shared look for every page: tokens, page background, boxes, buttons, motion. */

:root {
  --pitch: #2fd35b;
  --pitch-stripe: #29c452;
  --ink: #111111;
  --paper: #fffdf3;
  --you: #ffd60a;
  --opp: #ff5fa2;
  --out: #ff3b30;
  --six: #2f6bff;
  --muted: #5b5b5b;
  --ready: #b6f5c6;

  --border: 4px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 14px;
  --gap: 12px;

  /* Very light paper grain for panels (inline SVG noise, ~4.5% dark speckle). */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

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

html,
body {
  margin: 0;
}

body {
  background-color: var(--pitch);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pitch) 0 80px,
    var(--pitch-stripe) 80px 160px
  );
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.4;
}

[hidden] {
  display: none !important;
}

.box {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---- Buttons ---- */

.btn {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--you);
  border: var(--border);
  border-radius: 12px;
  padding: 11px 22px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}

.btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.btn:focus-visible {
  outline: 3px solid var(--six);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-pink { background: var(--opp); }
.btn-plain { background: var(--paper); }

.btn-small {
  font-size: 14px;
  padding: 7px 14px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 6px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  vertical-align: middle;
}

/* ---- Motion ---- */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}