:root {
  --ink: #02050a;
  --void: #060c16;
  --panel: #0b1522;
  --hull: #d4e2ef;      /* main text */
  --chrome: #93a9bf;    /* metal */
  --plasma: #3dff9e;    /* alien green */
  --beam: #4fe3ff;      /* tractor-beam cyan */
  --warn: #ffb020;
  --alarm: #ff3355;
  --nebula: #a066ff;
  --muted: #6c8299;
  --font-display: 'Orbitron', 'Eurostile', sans-serif;
  --font-body: 'Exo 2', 'Segoe UI', sans-serif;
  --font-type: 'Share Tech Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--ink); color: var(--hull); 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%, #12253a 0%, var(--panel) 55%, #050a12 100%);
  border: 2px solid #1f3a55;
  border-radius: 18px;
  box-shadow: 0 0 0 6px #050a12, 0 0 60px rgba(61, 255, 158, .22), inset 0 0 80px rgba(0,0,0,.7);
  overflow: hidden;
}
.puzzle-root { position: absolute; inset: 0; overflow: auto; }

/* Shared helpers puzzles may use */
.ufo-btn {
  background: linear-gradient(#17304a, #0a1726);
  color: var(--beam);
  border: 1px solid #2b5878;
  border-radius: 8px;
  padding: .5em 1.1em;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .06em;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .08s, box-shadow .2s, color .2s;
}
.ufo-btn:hover { color: #e6fbff; box-shadow: 0 2px 0 #000, 0 0 14px rgba(79, 227, 255, .5); }
.ufo-btn:active { transform: translateY(1px); }
.ufo-btn:disabled { opacity: .45; cursor: default; }
.ufo-input {
  background: #050b14; color: var(--plasma); border: 1px solid #234766; border-radius: 6px;
  padding: .5em .7em; font-family: var(--font-type); font-size: 1.05rem; letter-spacing: .1em;
  outline: none;
}
.ufo-input:focus { border-color: var(--plasma); box-shadow: 0 0 10px rgba(61, 255, 158, .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); }
}