@font-face {
  font-family: "Less Perfect DOS VGA";
  src: url("../fonts/LessPerfectDOSVGA.ttf") format("truetype");
  font-display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  user-select: none;
}

/* Cursor hides after 3 s of stillness (main.js toggles the class). */
body.idle, body.idle * {
  cursor: none;
}

#fire, #crt, #grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#fire { z-index: 0; }
#crt  { z-index: 1; pointer-events: none; }   /* glow/bloom, above raw fire */
.panel { z-index: 2; }
#grid { z-index: 3; pointer-events: none; }    /* scanlines/vignette, topmost */

/* Control panels — absolute geometry set by main.js to track the fire box. */
.panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
  background: transparent;  /* let the fire/glow + CRT grid show around buttons */
}

.panel button {
  flex: 1 1 0;
  border: none;
  font-family: "Less Perfect DOS VGA", monospace;
  /* font-size + colors are applied per-palette from main.js */
  cursor: pointer;
  outline: none;
  white-space: nowrap;
}

/* Focus ring for keyboard navigation (visible on every palette). */
.panel button:focus-visible {
  filter: brightness(1.25);
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Boot splash — fullscreen over everything until main.js removes it. */
#splash {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 10;
}

/* Donation pop-up (exit intent) — terminal-styled modal. All colors come
   inline from the active palette (set in donate.js). */
#donate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

#donate-box {
  font-family: "Less Perfect DOS VGA", monospace;
  border: 4px double;
  padding: 2.5rem 3.5rem;
  text-align: center;
}

#donate-title {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

#donate-msg {
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

#donate-close {
  font-family: inherit;
  font-size: 1.1rem;
  border: none;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
}

#donate-close:hover, #donate-close:focus-visible {
  filter: brightness(1.25);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}