/* Page frame */
body {
  background: #c0c0c0 !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide cursor for local mode */
body.local-mode {
  cursor: none !important;
}

body.local-mode * {
  cursor: none !important;
}

/* Fixedsys */
@font-face {
  font-family: 'Fixedsys';
  font-style: normal;
  font-weight: normal;
  src: local('Fixedsys'), url('fonts/FSEX300.woff') format('woff');
  font-display: swap;
}

/* 1024×768 CRT viewport */
.terminal-frame {
  width: 1024px !important;
  height: 768px !important;
  background: #061a06 !important;
  color: #b9ff9a !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

/* Content area: anchored TOP-LEFT */
.terminal-screen {
  position: absolute;
  inset: 0;
  padding: 24px 24px;
  box-sizing: border-box;
}

/* Fixed, monospaced grid. No drift. */
.term-pre {
  --cols: 96;                       /* JS updates from ui.json */
  margin: 0;
  width: calc(var(--cols) * 1ch);
  max-width: 100%;
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 20px;
  line-height: 1.25;
  white-space: pre;
  user-select: none;
  color: #b9ff9a;
  text-shadow: 0 0 1px #b9ff9a, 0 0 8px rgba(185,255,154,.4);
  text-align: left;
  letter-spacing: 0;
  outline: none; /* Remove focus outline when terminal regains focus */
}
.term-message-line {
  line-height: 1;
}

/* Bottom-left prompt overlay (independent of the text buffer) */
.bottom-prompt {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 20px;
  line-height: 1.25;
  color: #b9ff9a;
  text-shadow: 0 0 1px #b9ff9a, 0 0 8px rgba(185,255,154,.4);
  user-select: none;
  pointer-events: none;
  white-space: pre;
}

/* Bottom-right back button for mobile/touch */
.back-button {
  position: absolute;
  right: 24px;
  bottom: 24px;
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 20px;
  line-height: 1.25;
  color: #b9ff9a;
  text-shadow: 0 0 1px #b9ff9a, 0 0 8px rgba(185,255,154,.4);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: #b9ff9a;
  color: #061a06;
  text-shadow: none;
}

.back-button:active {
  background: #b9ff9a;
  color: #061a06;
  text-shadow: none;
}

/* Inverted "selected" menu item (applied after typing completes) */
.menu-selected {
  background: #b9ff9a;
  color: #061a06;
}

/* Clickable menu items */
.menu-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  white-space: pre;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.menu-clickable:hover {
  background: #b9ff9a;
  color: #061a06;
}

.menu-clickable:active {
  background: #b9ff9a;
  color: #061a06;
}

/* Menu selected item that can be overridden by hover */
.menu-selected.can-hover {
  transition: all 0.2s ease;
}

/* When hovering over other items, hide the selected state */
.menu-container:hover .menu-selected.can-hover {
  background: transparent;
  color: #b9ff9a;
}

/* When hovering over the selected item itself, keep it highlighted */
.menu-selected.can-hover:hover {
  background: #b9ff9a !important;
  color: #061a06 !important;
}

/* Menu container for hover management */
.menu-container {
  display: block;
  margin: 0;
  padding: 0;
  line-height: normal;
}

/* Touch/tap area for standby screen */
.standby-touchable {
  cursor: pointer;
}

/* Video player for audio logs */
.audio-video {
  display: none;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 854px;
  height: 480px;
  max-width: 80%;
  max-height: 45%;
  border: none;
  outline: none;
  z-index: 50;
  background: transparent;
}

/* Hide video controls */
.audio-video::-webkit-media-controls {
  display: none !important;
}

.audio-video::-webkit-media-controls-panel {
  display: none !important;
}

.audio-video::-moz-media-controls {
  display: none !important;
}

/* CRT overlays inside the 1024×768 viewport */
.terminal-frame .crt__scan,
.terminal-frame .crt__rgb,
.terminal-frame .crt__vignette,
.terminal-frame .crt__noise,
.terminal-frame .crt__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

:root {
  --crt-bg: #061a06;
  --crt-phosphor: #b9ff9a;
  --crt-text-glow: 0 0 .6px #b9ff9a, 0 0 6px rgba(140,255,140,.25);
  --crt-scan-opacity: .78;
  --crt-scan-height: 2px;
  --crt-rgb-opacity: .03;
  --crt-vignette-opacity: .42;
  --crt-noise-opacity: .08;
  --crt-noise-scale: 380px;
  --crt-glass-opacity: .70;
}

html, body { height: 100%; background: var(--crt-bg); }

/* Scanlines - hardware accelerated with slower animation */
.crt__scan {
  z-index: 100;
  background-image: url("../images/scanlines.png");
  background-repeat: repeat;
  background-size: auto var(--crt-scan-height);
  opacity: var(--crt-scan-opacity);
  animation: crt-drift 180s linear infinite;
  mix-blend-mode: multiply;
  will-change: transform;
  transform: translateZ(0);
}

/* RGB mask - hardware accelerated */
.crt__rgb {
  z-index: 101;
  background-image: url("../images/rgb_mask.png");
  background-repeat: repeat;
  background-size: 3px 3px;
  opacity: var(--crt-rgb-opacity);
  mix-blend-mode: overlay;
  will-change: transform;
  transform: translateZ(0);
}

/* Vignette - hardware accelerated */
.crt__vignette {
  z-index: 102;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,.25) 78%,
    rgba(0,0,0,.55) 100%);
  opacity: var(--crt-vignette-opacity);
  will-change: transform;
  transform: translateZ(0);
}

/* Noise - hardware accelerated with slower animation */
.crt__noise {
  z-index: 103;
  background-image: url("../images/noise.png");
  background-repeat: repeat;
  background-size: var(--crt-noise-scale) var(--crt-noise-scale);
  opacity: var(--crt-noise-opacity);
  animation: crt-noise 5s steps(60) infinite;
  will-change: transform;
  transform: translateZ(0);
}

/* Glass - hardware accelerated */
.crt__glass {
  z-index: 200;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--crt-glass-opacity);
  filter: saturate(.95) contrast(1.02);
  will-change: transform;
  transform: translateZ(0);
}

/* Video control buttons */
.video-control {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.video-control:hover {
  background: #b9ff9a;
  color: #061a06;
}

.video-control:active {
  background: #b9ff9a;
  color: #061a06;
}

/* Secure Decrypt Styling */
.secure-decrypt-grid {
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 16px;
  line-height: 1.2;
  white-space: pre;
  margin: 8px 0;
}

.secure-hex-line {
  display: block;
  margin: 0;
}

.secure-hex-addr {
  color: #7db46c;
  display: inline-block;
  width: 7ch;
  font-weight: bold;
}

.secure-garbage-char {
  color: #7db46c;
  transition: all 0.15s ease;
}

.secure-found-letter {
  background: #b9ff9a !important;
  color: #061a06 !important;
  animation: secure-letter-flash 0.4s ease-in-out;
  padding: 0 2px; /* Add padding for visual separation */
  margin: 0 -1px; /* Negative margin to maintain spacing consistency */
  border-radius: 2px; /* Slight rounding for better appearance */
}

.secure-progress-container {
  margin: 12px 0;
  text-align: center;
}

.secure-timer {
  color: #b9ff9a;
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 18px;
  margin-bottom: 8px;
}

.secure-progress-bar {
  display: inline-block;
  width: 60ch;
  height: 2ch;
  background: #061a06;
  border: 1px solid #7db46c;
  position: relative;
  overflow: hidden;
}

.secure-progress-fill {
  height: 100%;
  background: #b9ff9a;
  width: 0%;
  transition: width 0.2s linear;
}

.secure-message-display {
  text-align: center;
  margin: 8px auto;
  padding: 12px;
  background: #b9ff9a;
  color: #061a06;
  font-family: 'Fixedsys', ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 18px;
  min-height: 2em;
  max-width: fit-content;
  display: block;
}

.secure-message-complete {
  animation: secure-message-flash 0.8s ease-in-out 3;
}

/* Standby screen specific styling for ASCII box drawing */
.term-pre.standby-screen {
  line-height: 0.9;
}

/* Game ASCII art styling for tight line spacing */
.game-ascii-art {
  line-height: 0.9;
  white-space: pre;
}

/* Animations */
@keyframes secure-letter-flash {
  0% { background: #b9ff9a; color: #061a06; }
  25% { background: #061a06; color: #b9ff9a; }
  50% { background: #b9ff9a; color: #061a06; }
  75% { background: #061a06; color: #b9ff9a; }
  100% { background: #b9ff9a; color: #061a06; }
}

@keyframes secure-message-flash {
  0% { background: #061a06; }
  50% { background: #b9ff9a; color: #061a06; }
  100% { background: #061a06; color: #b9ff9a; }
}

/* Game Modal */
.game-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 600px;
  z-index: 90; /* Below CRT effects (100+) but above terminal content */
  background: #000;
  border: 2px solid #b9ff9a;
  border-radius: 4px;
}

.game-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}



/* ZX Spectrum Loading Animation */
.zx-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 85; /* Below modal but above terminal content */
}

/* Game content container with boxed background */
.game-content-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #061a06;
  border: 2px solid #b9ff9a;
  padding: 8px 12px;
  z-index: 86; /* Above ZX loading background */
}

/* Pilot Signal - Full screen flashing (instant on/off like ZX Spectrum) */
.zx-pilot {
  width: 100%;
  height: 100%;
  animation: zx-pilot-flash 0.75s steps(2, end) infinite;
}

@keyframes zx-pilot-flash {
  0% { background: #061a06; }
  50% { background: #b9ff9a; }
  100% { background: #061a06; }
}

/* Header Signal - Moving horizontal stripes */
.zx-headers {
  width: 100%;
  height: 100%;
  background: #061a06;
  overflow: hidden;
  position: relative;
}

.zx-stripe {
  position: absolute;
  width: 100%;
  background: #b9ff9a;
  animation: zx-stripes-move 0.1s linear infinite;
}

@keyframes zx-stripes-move {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Data Signal - Crazy random bars */
.zx-data {
  width: 100%;
  height: 100%;
  background: #134a13;
  position: relative;
  animation: zx-data-flicker 0.05s linear infinite;
}

@keyframes zx-data-flicker {
  0% { background: #134a13; }
  25% { background: #0a2a0a; }
  50% { background: #1f5f1f; }
  75% { background: #061a06; }
  100% { background: #134a13; }
}

.zx-data-bar {
  position: absolute;
  width: 100%;
  animation: zx-bars-flicker 0.03s linear infinite;
}

@keyframes zx-bars-flicker {
  0% { background: #b9ff9a; opacity: 0.8; }
  20% { background: #ffffff; opacity: 1; }
  40% { background: #7fbf7f; opacity: 0.6; }
  60% { background: #9fff9f; opacity: 0.9; }
  80% { background: #5f9f5f; opacity: 0.7; }
  100% { background: #b9ff9a; opacity: 0.8; }
}

@keyframes crt-drift { from { background-position: 0 0 } to { background-position: 0 64px } }
@keyframes crt-noise { 0% { background-position: 0 0 } 50% { background-position: 30px 20px } 100% { background-position: 0 0 } }