:root {
  --ink: #0d0a0b;        /* 2 a.m. black */
  --night: #161226;      /* desert night sky */
  --panel: #231c1f;      /* greasy dark formica */
  --cream: #f7efe0;      /* main text */
  --paper: #f3ead2;      /* order tickets, menus */
  --chrome: #c9d2d8;     /* napkin dispensers, trim */
  --ketchup: #d2302c;    /* vinyl booths, ketchup */
  --mustard: #f2b632;    /* highlights, mustard */
  --teal: #3fb8af;       /* 50s vinyl, formica */
  --neon: #ff4fa0;       /* pink neon sign glow */
  --pickle: #8bc34a;     /* sickly fluorescent green */
  --muted: #9a8f86;
  --font-display: 'Shrikhand', 'Georgia', serif;
  --font-body: 'Bitter', 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% 25%, #3a2a2c 0%, var(--panel) 55%, #0f0a0b 100%);
  border: 3px solid #8e989e;
  border-radius: 16px;
  box-shadow: 0 0 0 6px #1a1214, 0 0 50px rgba(255, 79, 160, .22), inset 0 0 80px rgba(0,0,0,.6);
  overflow: hidden;
}
.puzzle-root { position: absolute; inset: 0; overflow: auto; }

/* Shared helpers puzzles may use */
.kafe-btn {
  background: linear-gradient(#e2443e, #9a1c1a);
  color: var(--cream);
  border: 1px solid #f08a80;
  border-radius: 10px;
  padding: .5em 1.1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: 0 3px 0 #4a0a0a, inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .08s, box-shadow .2s, color .2s;
}
.kafe-btn:hover { color: #fff; box-shadow: 0 3px 0 #4a0a0a, 0 0 14px rgba(255, 79, 160, .6); }
.kafe-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4a0a0a; }
.kafe-btn:disabled { opacity: .5; cursor: default; }
.kafe-input {
  background: #120d0e; color: var(--cream); border: 1px solid #8e989e; border-radius: 6px;
  padding: .5em .7em; font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .08em;
  outline: none;
}
.kafe-input:focus { border-color: var(--mustard); box-shadow: 0 0 10px rgba(242,182,50,.45); }
.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); }
}