/* Edgy World shared UI kit (lane: look, 2026-09-28).
   The site's Y2K look, as CSS custom properties and a few reusable pieces, so every panel in the
   game — HUD, jukebox, bar, hands, shot — and eventually the online lobby can share one look by
   linking this file and using these variables / class names instead of inventing their own palette.
   See src/world/docs/look.md. */

:root {
  --ed-bg: #0b0a16;
  --ed-panel: #17132a;
  --ed-border: #6f6681; /* #302345 mixed with #f5f3ff at ~32%: 0x30*0.68+0xf5*0.32 etc. */
  --ed-text: #f5f3ff;
  --ed-text-dim: #b3a8cf;
  --ed-lavender: #d8b5ff;
  --ed-cyan: #b5f5ff;
  --ed-font-display: 'Jersey 10', Georgia, serif;   /* big chunky headings */
  --ed-font-label: 'Silkscreen', 'Courier New', monospace;  /* labels, buttons, nav: uppercase, letter-spaced */
  --ed-font-body: 'VT323', 'Courier New', monospace;        /* body / monospace text */
}

body { background: var(--ed-bg); }

/* A cheap, static starfield for full-screen 2D scrims (the loading screen, dialog overlays). The
   game itself is the WebGL canvas underneath; this only ever shows behind 2D chrome. */
.ed-starfield {
  background-color: var(--ed-bg);
  background-image:
    radial-gradient(1px 1px at 8% 22%, rgba(245,243,255,.9), transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(181,245,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(216,181,255,.9), transparent 60%),
    radial-gradient(1px 1px at 55% 78%, rgba(245,243,255,.7), transparent 60%),
    radial-gradient(1px 1px at 68% 34%, rgba(181,245,255,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 58%, rgba(245,243,255,.85), transparent 60%),
    radial-gradient(1px 1px at 92% 18%, rgba(216,181,255,.7), transparent 60%),
    radial-gradient(1px 1px at 14% 88%, rgba(245,243,255,.6), transparent 60%),
    radial-gradient(1px 1px at 48% 46%, rgba(181,245,255,.6), transparent 60%),
    radial-gradient(1px 1px at 78% 92%, rgba(216,181,255,.6), transparent 60%);
  background-repeat: repeat;
  background-size: 340px 260px;
}

/* Windows-2000-ish ".EXE" window chrome: a title bar with three little square buttons. The two on
   the left are decorative; the panel that inserts this wires [data-exe-close] to its own close(). */
.exe-tb {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(90deg, var(--ed-lavender), var(--ed-cyan));
  color: #0b0a16;
  font-family: var(--ed-font-label);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ed-border);
}
.exe-tb-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exe-tb-btns { display: flex; gap: 4px; }
.exe-tb-btns i {
  width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11,10,22,.16);
  border: 1px solid rgba(11,10,22,.55);
  border-radius: 1px;
  font-style: normal; font-size: 9px; line-height: 1; font-weight: bold;
  cursor: default;
}
.exe-tb-btns i.x { cursor: pointer; }
.exe-tb-btns i.x:hover { background: #ff5a5a; }

/* Keycaps for <kbd>, used across every panel. */
kbd {
  display: inline-block;
  background: var(--ed-panel);
  color: var(--ed-cyan);
  border: 1px solid var(--ed-border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
  font-family: var(--ed-font-label);
  font-size: 11px;
}

/* Primary ("go") buttons: cyan-filled, dark text — the one call to action per panel. */
.cta, button.go {
  background: var(--ed-cyan) !important;
  color: #0b0a16 !important;
  border-color: var(--ed-cyan) !important;
  text-shadow: none !important;
  font-weight: bold;
}