html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #001100;
  color: #33FF33;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 1rem;
  text-align: left;
  transform: perspective(1400px) rotateX(0.4deg) rotateY(-0.4deg);
  transform-style: preserve-3d;
  will-change: transform;
}

.terminal-line {
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.6;
  white-space: pre-wrap;
  width: 100%;
  max-width: 700px;
  text-shadow:
    0 0 1px #33FF33,
    0 0 2px #33FF33,
    0 0 6px rgba(51, 255, 51, 0.6),
    0 0 10px rgba(51, 255, 51, 0.3);
}
.button-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: clamp(12px, 1.5vw, 16px);
  color: #33FF33;
  text-decoration: none;
  border: 1px solid #33FF33;
  background-color: transparent;
  text-shadow:
    0 0 1px #33FF33,
    0 0 3px #33FF33,
    0 0 6px rgba(51, 255, 51, 0.6),
    0 0 10px rgba(51, 255, 51, 0.3);
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.button-link:hover {
  background-color: #33FF33;
  color: #001100;
  box-shadow:
    0 0 5px #33FF33,
    0 0 10px rgba(51, 255, 51, 0.5),
    0 0 20px rgba(51, 255, 51, 0.3);
}
.blinking-cursor {
  display: inline-block;
  width: 1ch;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.button-container {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%) translateZ(0); /* centers and creates a GPU layer */
  z-index: 1000;
  visibility: hidden;
  will-change: transform, opacity;
}

.copyright {
  position: fixed;
  bottom: 4px;
  right: 8px;
  font-size: clamp(9px, 2vw, 10px);
  color: #33FF33;
  opacity: 0.6;
  z-index: 20;
  pointer-events: none;
}

.boot-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    rgba(160, 255, 160, 0.7) 0%,
    rgba(0, 255, 0, 0.2) 30%,
    rgba(0, 0, 0, 0.9) 70%);
  z-index: 100;
  pointer-events: none;
  animation: bootFlashAnim 0.65s ease-out forwards;
}

.boot-flicker {
  animation: flicker 0.3s ease-in-out;
}

.boot-ready #about-button,
.boot-ready #boot-sequence,
.boot-ready #boot-wrapper {
  visibility: visible;
}

.boot-hidden {
  visibility: hidden;
}

.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.025),
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9;
}

.crt-refresh::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.01) 0%,
    rgba(0, 255, 0, 0.03) 2%,
    rgba(0, 255, 0, 0.01) 4%
  );
  filter: blur(0.3px) contrast(120%) brightness(110%);
  animation: roll-sweep 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 11;
}

.glass-distortion {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/glass-distortion.jpg');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: lighten;
  z-index: 8;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 10;
  animation: scanline-scroll 5s linear infinite;
}

@keyframes glow-decay {
  0% {
    text-shadow: 0 0 8px #33FF33, 0 0 2px #33FF33;
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 3px #33FF33;
    opacity: 0.85;
  }
}

@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes bootFlashAnim {
  0% {
    opacity: 1;
    filter: brightness(250%) blur(0px);
  }
  20% {
    opacity: 0.5;
    filter: brightness(180%) blur(1px);
  }
  50% {
    opacity: 0.15;
    filter: brightness(110%) blur(2px);
  }
  100% {
    opacity: 0;
    filter: brightness(90%) blur(4px);
  }
}

@keyframes scanline-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

@keyframes roll-sweep {
  0% {
    top: -100%;
    opacity: 0;
  }
  5% {
    opacity: 0.05;
  }
  50% {
    top: 100%;
    opacity: 0.1;
  }
  55% {
    opacity: 0;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
#prompt-response {
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: #33FF33;
  text-align: center;
}
.terminal-button {
  all: unset;                                /* wipe native styles */
  font-family: 'Courier New', monospace;
  color: #33FF33;
  background: transparent;
  cursor: pointer;
  padding: 0 0.25em;
  text-shadow:
    0 0 1px #33FF33,
    0 0 3px #33FF33,
    0 0 6px rgba(51, 255, 51, 0.6),
    0 0 10px rgba(51, 255, 51, 0.3);
  transition: text-shadow 0.2s ease;
}

.terminal-button:hover {
  text-shadow:
    0 0 2px #33FF33,
    0 0 4px #33FF33,
    0 0 8px #33FF33;
  color: #BFFFAB;
}

.hidden {
  display: none;
}
#interface-options { white-space: nowrap; }
/* ── shared game styling ─────────────────────────────── */
#game-frame          { position: relative; }
#game-frame canvas   { border: 1px solid #33FF33; display:block; margin:0 auto; }
#game-frame .reboot  { margin-top: 1rem; }

/* keep any bracket-menu on a single line */
#interface-options   { white-space: nowrap; }
/* ════════════════ CROSSWORD MODULE ════════════════ */

/* 1 ▸ wrapper keeps grid and clues centred, stacked */
.cw-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 2 ▸ responsive cell size (desktop ≈35 px, phone ≈38 px) */
:root{ --cell:2.2rem; }
@media(max-width:768px){ :root{ --cell:8vw; } }

/* 3 ▸ grid table */
.cw-grid{ border-collapse:collapse; margin:1rem auto 1.2rem; }

/* 4 ▸ every crossword square */
.cw-cell,
.cw-block{
  width:var(--cell);
  height:var(--cell);
  position:relative;
}
.cw-block{ background:#001100; }

/* 5 ▸ letter input box */
.cw-cell input{
  all:unset;
  width:100%; height:100%;
  background:#001100;
  color:#33FF33;
  text-align:center;
  font-family:'Courier New',monospace;
  border:1px solid #33FF33;
  text-transform:uppercase;
}
.cw-cell input:focus{ outline:1px solid #BFFFAB; }

/* 6 ▸ tiny numbering, clues, success banner */
.cw-num   { position:absolute; top:0; left:2px; font-size:0.55rem; color:#33FF33; }
.cw-clues { margin-top:1.2rem; font-size:0.9rem; line-height:1.4; }
.cw-done  { margin-top:1rem;  color:#BFFFAB; }

/* 7 ▸ keep bracket-menus on one line */
#interface-options{ white-space:nowrap; }

/* ══════════════════════════════════════════════════ */
/* when a game is active, nudge About button lower (or corner) */
body.in-game #about-button{
  bottom:4%;                 /* or: bottom:4%; right:8px; left:auto */
  transform:translateX(-50%); /* keep centred if you stay on left:50% */
}
/* ═════════ GRID-CONNECT (wiring game) ═════════ */
:root{ --gc-size: 8; }                /* grid = 8×8, tweak if desired */
.gc-grid{
  display:grid;
  grid-template-columns:repeat(var(--gc-size), 2.3rem);
  gap:2px; margin:1rem auto;
}
.gc-cell{
  width:2.3rem; height:2.3rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  font-family:'Courier New', monospace;
  font-size:1.2rem; line-height:1;
  color:#33FF33; background:#001100;
  border:1px solid #033803;
}
.gc-dead{ color:#063806; }            /* “×” tiles */
.gc-live{ color:#BFFFAB; }            /* when power flows */

.gc-timer{
  height:6px; background:#063806;
  border:1px solid #033803;
  margin:0.5rem auto 1rem; width:90%;
}
.gc-timer-bar{ height:100%; background:#33FF33; }
.gc-banner{ margin-top:1rem; color:#BFFFAB; }
/* inside styles.css */
.raid-controls{
  display:inline-flex;
  gap:2.5rem;              /* space between [ PLAY ] and [ REBOOT ] */
  justify-content:center;
}
/* ── NEWS-ARCHIVE extras ───────────────────────────────────────────────*/
.ascii-logo{
  white-space:pre;
  animation: archiveFade 5s forwards;
  text-align:center;
}
@keyframes archiveFade{
  0%{opacity:1;} 100%{opacity:0;}
}
#archive-list a.terminal-button{
  margin-left:.25rem;           /* small gap between title and [ OPEN ] */
}