* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
}
#stage { position: relative; width: 100%; height: 100%; }
#screen {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  background: #000;
  image-rendering: pixelated;
}
#overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity .4s;
}
#overlay.hidden { opacity: 0; }
#title { text-align: center; color: #ffffd7; }
#title .big {
  font-size: clamp(22px, 5vw, 54px);
  font-weight: bold;
  letter-spacing: .06em;
  color: #ffffaf;
  text-shadow: 0 0 18px rgba(255,255,175,.45);
}
#title .sub { margin-top: 12px; font-size: clamp(11px, 1.6vw, 16px); color: #afaf87; letter-spacing: .3em; }
#title .hint { margin-top: 26px; font-size: clamp(12px, 1.8vw, 17px); color: #ffaf5f; animation: blink 1.2s step-end infinite; }
#title .hint.small { margin-top: 14px; font-size: clamp(10px, 1.3vw, 13px); color: #875f00; animation: none; }
@keyframes blink { 50% { opacity: .25; } }
#err {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #3f0000; color: #ff9f9f; padding: 10px 18px;
  border: 1px solid #ff5f5f; font-size: 13px; max-width: 80%;
  pointer-events: auto; white-space: pre-wrap;
}