:root {
  --ink: #120a06;        /* near-black, warm */
  --night: #1c1230;      /* dusk sky */
  --panel: #2a1a12;      /* weathered wood */
  --cream: #f6ead2;      /* main text */
  --parchment: #e3cc9c;  /* old paper */
  --seaglass: #7fd1c2;   /* tide water, eerie glow */
  --amber: #ffb547;      /* lantern light, highlights */
  --pumpkin: #e8741c;
  --cranberry: #b3203a;
  --sage: #8aa05a;
  --dusk: #6a4c93;       /* purple twilight */
  --muted: #a8927a;
  --font-display: 'Pirata One', 'Georgia', serif;
  --font-body: 'Alegreya', Georgia, serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--ink); color: var(--cream); 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%, #3d2618 0%, var(--panel) 55%, #150c07 100%);
  border: 2px solid #6b4526;
  border-radius: 14px;
  box-shadow: 0 0 0 6px #1a0f08, 0 0 60px rgba(255, 150, 60, .25), inset 0 0 80px rgba(0,0,0,.6);
  overflow: hidden;
}
.puzzle-root { position: absolute; inset: 0; overflow: auto; }

/* Shared helpers puzzles may use */
.isle-btn {
  background: linear-gradient(#7a4a22, #4a2a12);
  color: var(--cream);
  border: 1px solid #b07a3c;
  border-radius: 8px;
  padding: .5em 1.1em;
  font-family: var(--font-body);
  font-size: 1.05rem;
  box-shadow: 0 3px 0 #2a1608, inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .08s, box-shadow .2s, color .2s;
}
.isle-btn:hover { color: #fff; box-shadow: 0 3px 0 #2a1608, 0 0 14px rgba(255,181,71,.55); }
.isle-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a1608; }
.isle-btn:disabled { opacity: .5; cursor: default; }
.isle-input {
  background: #1a100a; color: var(--cream); border: 1px solid #6b4526; border-radius: 6px;
  padding: .5em .7em; font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .08em;
  outline: none;
}
.isle-input:focus { border-color: var(--amber); box-shadow: 0 0 10px rgba(255,181,71,.4); }
.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); }
}