:root {
  --ink: #07060a;
  --night: #0f0c18;
  --panel: #17121f;
  --bone: #e8dfc8;
  --parchment: #d9c79e;
  --ghost: #9fe3d6;
  --ember: #ff8a1f;
  --pumpkin: #f26b0f;
  --blood: #a3101a;
  --moss: #6d8a3a;
  --violet: #7b4fb8;
  --muted: #8a7f95;
  --font-display: 'Creepster', 'Chiller', fantasy;
  --font-body: 'IM Fell English', Georgia, serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--ink); color: var(--bone); font-family: var(--font-body); }
button { font-family: inherit; cursor: pointer; }

/* Close-up panel that puzzles render into */
.modal-panel {
  position: relative;
  width: min(920px, 96vw);
  height: min(660px, 86vh);
  background: radial-gradient(ellipse at 50% 30%, #241a30 0%, var(--panel) 55%, #0b0810 100%);
  border: 2px solid #3a2c45;
  border-radius: 14px;
  box-shadow: 0 0 0 6px #0b0810, 0 0 60px rgba(123, 79, 184, .35), inset 0 0 80px rgba(0,0,0,.7);
  overflow: hidden;
}
.puzzle-root { position: absolute; inset: 0; overflow: auto; }

/* Shared helpers puzzles may use */
.spooky-btn {
  background: linear-gradient(#3b2a1a, #1f150c);
  color: var(--parchment);
  border: 1px solid #7a5a32;
  border-radius: 6px;
  padding: .5em 1.1em;
  font-family: var(--font-body);
  font-size: 1.05rem;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .08s, box-shadow .2s, color .2s;
}
.spooky-btn:hover { color: #fff3d6; box-shadow: 0 2px 0 #000, 0 0 14px rgba(255,138,31,.45); }
.spooky-btn:active { transform: translateY(1px); }
.spooky-input {
  background: #0d0a12; color: var(--bone); border: 1px solid #4a3a55; border-radius: 6px;
  padding: .5em .7em; font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .08em;
  outline: none;
}
.spooky-input:focus { border-color: var(--ember); box-shadow: 0 0 10px rgba(255,138,31,.35); }
.shake { animation: shake .45s; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}