:root {
  --ink: #03060a;
  --night: #08111b;
  --panel: #0e1823;
  --bone: #e6e1d3;
  --parchment: #d8c9a3;
  --ghost: #9fd8e3;      /* sea-glass / ghost light */
  --ember: #ffc25a;      /* lamp amber, main accent */
  --pumpkin: #f0a030;    /* brighter lamp */
  --blood: #b3261e;      /* signal red */
  --moss: #4f8a6a;       /* sea green */
  --violet: #3a6ea5;     /* deep sea blue */
  --brass: #c79a45;
  --rust: #8a4a2a;
  --muted: #7d8a96;
  --font-display: 'Pirata One', 'Georgia', serif;
  --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%, #16283a 0%, var(--panel) 55%, #050a10 100%);
  border: 2px solid #2a3e52;
  border-radius: 14px;
  box-shadow: 0 0 0 6px #050a10, 0 0 60px rgba(255, 194, 90, .18), 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(#3a2e1c, #1c160c);
  color: var(--parchment);
  border: 1px solid #8a6a32;
  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,194,90,.45); }
.spooky-btn:active { transform: translateY(1px); }
.spooky-input {
  background: #08111b; color: var(--bone); border: 1px solid #2e4458; 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,194,90,.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); }
}