/* Shared Halloween look used by every page. */
:root {
  --bg: #120c1c;
  --bg-raised: #1d1430;
  --bg-sunken: #0b0712;
  --border: #33264d;
  --text: #f3eefc;
  --text-muted: #a99cc4;
  --accent: #ff7a1a;        /* pumpkin */
  --accent-hover: #ff9446;
  --accent-text: #1a0d00;
  --slime: #7ee36b;
  --danger: #ff5a6e;
  --radius: 14px;
  --font-display: 'Creepster', 'Impact', cursive;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: radial-gradient(circle at 50% -20%, #2e1a4d 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: var(--accent); margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
h2 { font-size: 1.6rem; }

button, .button {
  font: inherit; font-weight: 800; border: 0; border-radius: 999px; cursor: pointer;
  padding: 0.7rem 1.3rem; background: var(--accent); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  transition: background 0.15s, transform 0.1s;
}
button:hover, .button:hover { background: var(--accent-hover); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: var(--bg-sunken); color: var(--text); border: 1px solid var(--border); }
button.secondary:hover { border-color: var(--accent); }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 0.25rem; }

.card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; }
.muted { color: var(--text-muted); }

/* Checkerboard so transparent PNGs are obvious. */
.checker {
  background-color: #2a2140;
  background-image:
    linear-gradient(45deg, #362a52 25%, transparent 25%), linear-gradient(-45deg, #362a52 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #362a52 75%), linear-gradient(-45deg, transparent 75%, #362a52 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}