* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #07040c; color: #eee; overflow: hidden;
  font-family: 'Press Start 2P', monospace;
}
#wrap {
  position: absolute; inset: 0 0 28px 0; display: flex; align-items: center; justify-content: center;
}
#screen {
  image-rendering: pixelated; image-rendering: crisp-edges; background: #000;
  box-shadow: 0 0 0 2px #1d1430, 0 0 60px rgba(120, 60, 255, 0.25);
}
#keys {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; line-height: 28px; text-align: center;
  font: 11px/28px system-ui, sans-serif; color: #9a8fb8; white-space: nowrap; overflow: hidden;
}
kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; margin: 0 1px; border-radius: 3px; background: #241b38;
  color: #fff; font: 10px/16px system-ui, sans-serif; text-align: center; border-bottom: 2px solid #120c20;
}
#panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw);
  background: #120a24; border: 4px solid #f8d018; box-shadow: 0 0 0 4px #000, 8px 8px 0 4px rgba(0,0,0,.6);
  padding: 22px; text-align: center; image-rendering: pixelated;
}
#panel[hidden] { display: none; }
#panel-title { color: #f8d018; font-size: 18px; margin-bottom: 18px; text-shadow: 3px 3px 0 #a02000; }
#panel-body { font-size: 11px; line-height: 1.9; color: #fff; }
#panel-status { margin-top: 14px; font-size: 10px; color: #8fd8ff; min-height: 1.5em; line-height: 1.7; }
#panel .code { font-size: 30px; color: #ff5040; letter-spacing: 6px; margin: 8px 0 14px; text-shadow: 3px 3px 0 #000; }
#panel input {
  font: 12px 'Press Start 2P', monospace; width: 100%; padding: 10px; background: #000; color: #8fff8f;
  border: 2px solid #5a4a88; text-align: center; text-transform: none;
}
#panel input.codein { font-size: 24px; letter-spacing: 8px; text-transform: uppercase; width: 260px; }
#panel .row { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#panel button {
  font: 11px 'Press Start 2P', monospace; padding: 10px 16px; background: #f8d018; color: #1a0800; border: 0;
  box-shadow: 0 4px 0 #a07000; cursor: pointer;
}
#panel button:active { transform: translateY(2px); box-shadow: 0 2px 0 #a07000; }
#panel button.alt { background: #3a2a68; color: #fff; box-shadow: 0 4px 0 #1a1038; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }