/* ==========================================================================
   SYNAPSE-01 INDUSTRIAL HANDHELD SYSTEM STYLING
   Tactile Hardware Chassis + CRT Green Phosphor Liquid Display
   ========================================================================== */

:root {
  /* Hardware Chassis Colors */
  --chassis-bg: #141715;
  --chassis-surface: #1e2220;
  --chassis-border: #2e3532;
  --chassis-dark: #0a0c0b;
  --screw-color: #4b5450;
  --screw-slot: #1c211f;

  /* Phosphor Green Display Colors */
  --lcd-bg: #071208;
  --lcd-faint: #0f2411;
  --lcd-dim: #1d4d22;
  --lcd-green: #33ff33;
  --lcd-glow: rgba(51, 255, 51, 0.45);
  --lcd-bright: #adffad;
  --lcd-alert: #ff4444;
  --lcd-warn: #ffaa00;

  /* Safe Area Insets for Mobile / Notch / Home Indicator */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Fonts */
  --font-terminal: 'VT323', monospace;
  --font-mono: 'Share Tech Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: manipulation;
}

body {
  background-color: #0b0d0c;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(20, 24, 22, 0.8) 0%, #050706 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 2px, transparent 0, transparent 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: #ccc;
  padding: clamp(0px, 1.5vh, 14px);
}

/* ==========================================================================
   DEVICE VIEWPORT & CHASSIS
   ========================================================================== */

.device-viewport {
  width: 100%;
  height: 100%;
  max-width: 520px;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.handheld-chassis {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--chassis-bg);
  border: 3px solid var(--chassis-border);
  border-radius: 20px;
  padding: clamp(8px, 1.8vh, 18px) clamp(10px, 2.5vw, 18px);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.9),
    inset 0 2px 3px rgba(255, 255, 255, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  overflow: hidden;
}

/* Authentic Corner Mechanical Screws */
.screw {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--screw-color), #202422);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.screw::after {
  content: '';
  width: 8px;
  height: 2px;
  background: var(--screw-slot);
  box-shadow: 0 0.5px 0.5px rgba(255,255,255,0.2);
}
.screw-tl { top: 10px; left: 10px; transform: rotate(25deg); }
.screw-tr { top: 10px; right: 10px; transform: rotate(115deg); }
.screw-bl { bottom: 10px; left: 10px; transform: rotate(70deg); }
.screw-br { bottom: 10px; right: 10px; transform: rotate(190deg); }

/* Chassis Header */
.chassis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 2px solid #1c221e;
  flex-shrink: 0;
}

.chassis-branding {
  display: flex;
  flex-direction: column;
}
.device-model {
  font-family: var(--font-terminal);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7a8a81;
  text-shadow: 0 1px 2px #000;
  line-height: 1;
}
.device-desc {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #4b5750;
  font-weight: bold;
}

.hardware-indicators {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Speaker Grille Slots */
.speaker-grille {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  background: #0f1210;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px #000;
}
.speaker-grille span {
  width: 2px;
  height: 14px;
  background: #050706;
  border-radius: 1px;
}

/* PWA Standalone Install Trigger Badge */
.pwa-install-badge {
  background: rgba(51, 255, 51, 0.12);
  border: 1px solid var(--lcd-green);
  border-radius: 12px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--lcd-bright);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}
.pwa-install-badge:hover, .pwa-install-badge:active {
  background: var(--lcd-green);
  color: #000;
  box-shadow: 0 0 10px var(--lcd-green);
}
.pwa-install-badge.hidden {
  display: none !important;
}
.badge-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lcd-green);
  box-shadow: 0 0 6px var(--lcd-green);
  animation: ledPulse 1s infinite alternate;
}
.badge-text {
  letter-spacing: 0.5px;
}

/* Status LED */
.led-block {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #111;
  box-shadow: 0 0 4px #000;
  transition: all 0.3s ease;
}
.status-led.active {
  background: #33ff33;
  box-shadow: 0 0 8px #33ff33, inset 0 0 2px #ffffff;
}
.status-led.offline {
  background: #ff3333;
  box-shadow: 0 0 6px rgba(255, 51, 51, 0.7);
  animation: ledPulse 1.2s infinite alternate;
}
@keyframes ledPulse {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}
.led-label {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #63756b;
  font-weight: bold;
}

/* ==========================================================================
   GREEN LCD PHOSPHOR DISPLAY
   ========================================================================== */

.screen-bezel {
  background: #0c0e0d;
  border: 3px solid #232926;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 
    inset 0 3px 8px rgba(0, 0, 0, 0.95),
    0 1px 1px rgba(255, 255, 255, 0.05);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen-glass {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--lcd-bg);
  border: 1px solid #142a17;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lcd-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  color: var(--lcd-green);
  text-shadow: 0 0 4px var(--lcd-glow);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* CRT Scanlines Overlay */
.crt-scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.28) 0px,
    rgba(0, 0, 0, 0.28) 1.5px,
    transparent 1.5px,
    transparent 3px
  );
  z-index: 5;
}

/* CRT Vignette / Curved Tube Reflection */
.crt-vignette {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 65%, rgba(4, 12, 5, 0.6) 100%);
  z-index: 6;
}

/* Top Screen Status Bar */
.screen-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 1px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--lcd-dim);
  margin-bottom: 6px;
  font-weight: bold;
  flex-shrink: 0;
}

/* Avatar & Gauges Telemetry Panel */
.screen-telemetry-panel {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 0 4px;
  flex-shrink: 0;
}

.avatar-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--lcd-faint);
  border: 1px solid var(--lcd-dim);
  border-radius: 4px;
  padding: 3px;
  flex-shrink: 0;
}
#avatar-canvas {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.avatar-tag {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--lcd-dim);
  margin-top: 2px;
  font-weight: bold;
}

.gauges-matrix {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 11px;
}
.gauge-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted var(--lcd-faint);
  padding-bottom: 1px;
}
.gauge-key {
  color: #2b7032;
  font-size: 10px;
}
.gauge-val {
  font-weight: bold;
}
.gauge-val.highlight {
  color: var(--lcd-bright);
  text-shadow: 0 0 6px rgba(173, 255, 173, 0.8);
}
.gauge-val.gauge-debt {
  color: var(--lcd-alert) !important;
  text-shadow: 0 0 6px rgba(255, 68, 68, 0.8) !important;
}

.screen-separator {
  color: var(--lcd-faint);
  font-size: 8px;
  letter-spacing: 2px;
  overflow: hidden;
  white-space: nowrap;
  margin: 4px 0 6px;
  flex-shrink: 0;
}

/* Dynamic Screen Content Area */
.screen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  font-size: 13px;
  line-height: 1.45;
}

/* Boot Screen */
.screen-boot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 8px;
  flex: 1;
}
.boot-logo {
  font-family: var(--font-terminal);
  font-size: 38px;
  letter-spacing: 4px;
  color: var(--lcd-bright);
}
.boot-sub {
  font-size: 10px;
  color: #2b7032;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.screen-divider {
  border: none;
  border-top: 1px solid var(--lcd-dim);
  width: 100%;
  margin: 10px 0 14px;
}
.boot-alert {
  font-size: 13px;
  color: var(--lcd-bright);
  margin-bottom: 12px;
  font-weight: bold;
}
.blink-text {
  animation: terminalBlink 1s infinite alternate;
}
@keyframes terminalBlink {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}
.boot-instruction {
  font-size: 12px;
  line-height: 1.5;
  color: #8be08b;
  max-width: 380px;
}
.key-tag {
  background: var(--lcd-dim);
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
}
.muted-note {
  font-size: 10px;
  color: #3f7044;
}

/* Genesis Setup Steps */
.genesis-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.prompt-code {
  font-size: 10px;
  color: #2b7032;
  letter-spacing: 1px;
}
.prompt-title {
  font-family: var(--font-terminal);
  font-size: 20px;
  color: var(--lcd-bright);
  letter-spacing: 1px;
  line-height: 1.1;
}
.prompt-desc {
  font-size: 12px;
  color: #79c779;
  line-height: 1.4;
  margin-bottom: 6px;
}
.input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.retro-input {
  background: var(--lcd-faint);
  border: 1px solid var(--lcd-dim);
  color: var(--lcd-bright);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 3px;
  outline: none;
  flex: 1;
}
.retro-input:focus {
  border-color: var(--lcd-green);
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.4);
}
.retro-btn-inline {
  background: var(--lcd-dim);
  border: 1px solid var(--lcd-green);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.retro-btn-inline:hover, .retro-btn-inline:active {
  background: var(--lcd-green);
  color: #000;
  box-shadow: 0 0 10px var(--lcd-green);
}

/* Processing / Computing Screen */
.screen-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: 10px;
  padding: 20px 10px;
}
.processing-header {
  font-family: var(--font-terminal);
  font-size: 22px;
  color: var(--lcd-bright);
}
.processing-sub {
  font-size: 11px;
  color: #79c779;
}
.computing-bar-wrap {
  width: 100%;
  max-width: 280px;
  height: 12px;
  border: 1px solid var(--lcd-dim);
  background: var(--lcd-faint);
  padding: 1px;
  border-radius: 2px;
  margin: 8px 0;
}
.computing-bar-fill {
  height: 100%;
  width: 40%;
  background: var(--lcd-green);
  animation: barSlide 1.2s infinite ease-in-out;
}
@keyframes barSlide {
  0% { width: 10%; margin-left: 0; }
  50% { width: 70%; margin-left: 20%; }
  100% { width: 20%; margin-left: 80%; }
}
.telemetry-stream {
  font-size: 11px;
  color: #3b8a3e;
  text-align: left;
  line-height: 1.5;
  width: 100%;
  max-width: 320px;
  background: rgba(0,0,0,0.25);
  padding: 8px;
  border-left: 2px solid var(--lcd-dim);
}

/* Dilemma View */
.dilemma-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opening-diagnosis {
  font-size: 11px;
  color: #92e092;
  background: rgba(29, 77, 34, 0.35);
  padding: 6px 8px;
  border-left: 2px solid var(--lcd-green);
  margin-bottom: 2px;
}
.dilemma-title {
  font-family: var(--font-terminal);
  font-size: 21px;
  color: var(--lcd-bright);
  letter-spacing: 1px;
  line-height: 1.1;
}
.dilemma-scenario {
  font-size: 12px;
  color: #9fe29f;
  line-height: 1.45;
  margin-bottom: 4px;
}

.route-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.route-card {
  background: var(--lcd-faint);
  border: 1px solid var(--lcd-dim);
  border-radius: 4px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-card:hover {
  background: #143516;
  border-color: #2c7731;
}
.route-card.selected {
  background: rgba(51, 255, 51, 0.15);
  border: 1px solid var(--lcd-green);
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.25);
}
.route-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-bottom: 2px;
}
.route-id {
  font-weight: bold;
  color: var(--lcd-bright);
}
.route-risk {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
}
.risk-low { background: #133d17; color: #79e683; }
.risk-med, .risk-medium { background: #3d3513; color: #e6cb79; }
.risk-high, .risk-extreme { background: #3d1313; color: #e67979; }

.route-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--lcd-bright);
  line-height: 1.2;
}
.route-desc {
  font-size: 11px;
  color: #7abf7f;
  line-height: 1.35;
  margin-top: 2px;
}
.screen-footer-hint {
  font-size: 9px;
  color: #3b8040;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* Outcome View */
.outcome-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outcome-header {
  font-family: var(--font-terminal);
  font-size: 21px;
  color: var(--lcd-bright);
  letter-spacing: 1px;
  line-height: 1.1;
  border-bottom: 1px solid var(--lcd-dim);
  padding-bottom: 4px;
}
.outcome-header.outcome-critical {
  color: #ff6666;
  text-shadow: 0 0 6px rgba(255, 102, 102, 0.7);
}
.outcome-summary {
  font-size: 12px;
  line-height: 1.45;
  color: #bbf0bb;
}
.metric-deltas-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.delta-chip {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 2px;
}
.delta-chip.good {
  background: #113814;
  color: #64fa72;
  border: 1px solid #236e29;
}
.delta-chip.bad {
  background: #3b1414;
  color: #fa6464;
  border: 1px solid #732626;
}
.delta-chip.neutral {
  background: var(--lcd-faint);
  color: #888;
}

.brutal-section {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--lcd-dim);
  padding: 8px 10px;
  border-radius: 4px;
}
.brutal-badge {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--lcd-warn);
  font-weight: bold;
  margin-bottom: 4px;
}
.brutal-text {
  font-size: 11px;
  line-height: 1.45;
  color: #8be08b;
}
.outcome-next-prompt {
  font-size: 11px;
  font-weight: bold;
  color: var(--lcd-bright);
  text-align: center;
  margin-top: 6px;
  animation: terminalBlink 1s infinite alternate;
}

/* Terminal Screen (Climax / Failure) */
.terminal-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 8px;
  flex: 1;
}
.terminal-badge {
  font-family: var(--font-terminal);
  font-size: 26px;
  letter-spacing: 2px;
}
.terminal-success .terminal-badge {
  color: #66ff66;
  text-shadow: 0 0 10px #33ff33;
}
.terminal-failure .terminal-badge {
  color: #ff5555;
  text-shadow: 0 0 10px #ff3333;
}
.terminal-goal {
  font-size: 13px;
  color: #fff;
  font-weight: bold;
}
.terminal-final-age {
  font-size: 11px;
  color: var(--lcd-dim);
}
.terminal-retrospective {
  font-size: 11px;
  line-height: 1.45;
  color: #92e092;
  text-align: left;
  background: rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--lcd-dim);
  max-height: 180px;
  overflow-y: auto;
}

/* Error Screen */
.screen-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 8px;
  flex: 1;
  color: #ff7777;
}
.error-badge {
  font-family: var(--font-terminal);
  font-size: 22px;
  letter-spacing: 1px;
  color: #ff4444;
}
.error-msg {
  font-size: 12px;
  background: rgba(255,0,0,0.1);
  padding: 8px;
  border: 1px solid #772222;
  border-radius: 4px;
  width: 100%;
}
.error-hint {
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

/* ==========================================================================
   TACTILE HARDWARE CONTROL DECK
   ========================================================================== */

.chassis-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.control-label-strip {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #4b5750;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}

.route-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* Tactile Mechanical Button Base */
.tactile-btn {
  background: linear-gradient(180deg, #2a312d 0%, #1a201c 100%);
  border: 1px solid #3c4540;
  border-bottom: 3px solid #101412;
  border-radius: 6px;
  color: #9eb0a6;
  font-family: var(--font-mono);
  cursor: pointer;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  transition: all 0.08s ease;
  position: relative;
}

.tactile-btn:hover {
  background: linear-gradient(180deg, #323b36 0%, #202723 100%);
  color: #d0e0d6;
}

.tactile-btn:active, .tactile-btn.active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.8),
    inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.tactile-btn.key-num.active {
  background: linear-gradient(180deg, #183e20 0%, #0d2813 100%);
  border-color: #2c7731;
  color: #33ff33;
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.35);
}

.btn-cap {
  font-family: var(--font-terminal);
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.btn-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: #5c6e64;
  margin-top: 2px;
}

/* Big Industrial Execute Bar */
.execute-module {
  width: 100%;
}
.btn-execute {
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(180deg, #243527 0%, #152218 100%);
  border: 1px solid #33613b;
  border-bottom: 4px solid #0c160e;
  border-radius: 8px;
  color: #adffad;
}
.btn-execute:hover {
  background: linear-gradient(180deg, #2d4532 0%, #1b2e20 100%);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(51, 255, 51, 0.25);
}
.btn-execute:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
}
.btn-execute-text {
  font-family: var(--font-terminal);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1.5px;
  line-height: 1;
}
.btn-execute-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: #5c9165;
  margin-top: 2px;
}

/* Utility Function Row */
.utility-buttons-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3px, 1vw, 6px);
}
.btn-util {
  padding: 8px 3px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  min-height: 38px;
}
.btn-util.btn-danger {
  color: #ff7777;
}
.btn-util.btn-danger:hover {
  color: #ff9999;
  border-color: #772b2b;
}

/* Bottom Stamping */
.chassis-footer {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #3b4540;
  letter-spacing: 1px;
  border-top: 1px solid #191f1c;
  padding-top: 6px;
  margin-top: 2px;
}

/* ==========================================================================
   BIOS MODAL / CHIP INTERFACE (Masked Key Security)
   ========================================================================== */

.bios-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.bios-overlay.hidden {
  display: none !important;
}

.bios-card {
  width: 100%;
  max-width: 440px;
  background: #111413;
  border: 2px solid #3c4540;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
  color: #c4d4cc;
  overflow: hidden;
}
.bios-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1c221f;
  padding: 10px 14px;
  border-bottom: 1px solid #2e3732;
}
.bios-title {
  font-family: var(--font-terminal);
  font-size: 18px;
  letter-spacing: 1px;
  color: #33ff33;
}
.bios-close-btn {
  background: none;
  border: none;
  color: #7a8a81;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.bios-close-btn:hover {
  color: #fff;
}

.bios-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bios-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bios-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: #798a81;
  font-weight: bold;
}
.bios-input, .bios-select {
  background: #090c0a;
  border: 1px solid #2d3831;
  color: #33ff33;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  outline: none;
  width: 100%;
}
.bios-input:focus, .bios-select:focus {
  border-color: #33ff33;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.3);
}
.bios-note {
  font-size: 9px;
  color: #4b6354;
  line-height: 1.35;
}
.bios-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.bios-btn {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid transparent;
}
.bios-btn.btn-primary {
  background: #1a4220;
  border-color: #33ff33;
  color: #adffad;
}
.bios-btn.btn-primary:hover {
  background: #25612f;
  color: #fff;
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.4);
}
.bios-btn.btn-danger {
  background: #3b1919;
  border-color: #772b2b;
  color: #ff8888;
}
.bios-btn.btn-danger:hover {
  background: #542222;
  color: #fff;
}

/* Audit Modal Specifics */
.audit-card {
  max-width: 500px;
}
.audit-history-list {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}
.audit-history-list::-webkit-scrollbar {
  width: 6px;
}
.audit-history-list::-webkit-scrollbar-track {
  background: #090c0a;
}
.audit-history-list::-webkit-scrollbar-thumb {
  background: #234d28;
  border-radius: 3px;
}
.audit-entry {
  background: #090d0a;
  border: 1px solid #1f3b23;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audit-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px dashed #1a381e;
  padding-bottom: 4px;
}
.audit-age {
  color: #33ff33;
  font-weight: bold;
}
.audit-choice {
  color: #adffad;
  font-size: 10px;
}
.audit-summary {
  font-size: 12px;
  color: #9cd4a3;
  line-height: 1.4;
}
.audit-explanation-block {
  background: rgba(0, 0, 0, 0.4);
  border-left: 2px solid #ffaa00;
  padding: 6px 8px;
  margin-top: 2px;
}
.audit-explanation-title {
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffaa00;
  font-weight: bold;
  margin-bottom: 2px;
}
.audit-explanation-text {
  font-size: 11px;
  line-height: 1.45;
  color: #c4d4cc;
}
.audit-empty-msg {
  text-align: center;
  color: #55755e;
  padding: 30px 10px;
  font-size: 12px;
  line-height: 1.6;
}

/* Reboot Modal Specifics */
.reboot-card {
  max-width: 420px;
  border-color: #632222;
}
.reboot-header {
  background: #2b1212;
  border-bottom-color: #521c1c;
}
.reboot-header .bios-title {
  color: #ff5555;
}
.reboot-warning-box {
  background: #0f0707;
  border: 1px solid #4a1818;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reboot-alert-tag {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: bold;
  color: #ff4444;
}
.reboot-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #d69a9a;
}
.reboot-stat-summary {
  font-size: 11px;
  color: #a86c6c;
  background: rgba(0,0,0,0.3);
  padding: 6px 8px;
  border-left: 2px solid #ff4444;
}

/* ==========================================================================
   PWA INSTALLATION MODAL & GENESIS INPUTS STYLING
   ========================================================================== */

.genesis-inputs-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.input-age {
  width: 120px;
  flex-shrink: 0;
}

.install-card {
  max-width: 440px;
  border-color: #33ff33;
}
.install-prompt-box {
  background: #090e0b;
  border: 1px solid #1a3a20;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.install-app-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.install-icon-frame {
  border-radius: 10px;
  border: 1px solid var(--lcd-green);
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.35);
  background: #000;
}
.install-app-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.install-app-name {
  font-family: var(--font-terminal);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--lcd-bright);
}
.install-app-sub {
  font-size: 10px;
  letter-spacing: 1px;
  color: #798a81;
}
.install-app-tag {
  font-size: 9px;
  color: var(--lcd-green);
  font-weight: bold;
}
.install-desc {
  font-size: 11px;
  line-height: 1.45;
  color: #a8cfb2;
}
.install-ios-instructions {
  background: rgba(0, 0, 0, 0.4);
  border-left: 2px solid var(--lcd-green);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.install-step-title {
  font-size: 10px;
  color: var(--lcd-bright);
  font-weight: bold;
}
.install-steps-list {
  font-size: 11px;
  line-height: 1.5;
  color: #c4d4cc;
  padding-left: 18px;
}
.install-steps-list li {
  margin-bottom: 2px;
}

/* ==========================================================================
   PERFECT MOBILE PHONE SCALING & CONSISTENCY
   Guarantees 100% viewport fit, zero page-scroll bounce, thumb reach
   ========================================================================== */

@media (max-width: 540px) {
  body {
    padding: 0;
  }

  .device-viewport {
    max-width: 100%;
    width: 100%;
    height: 100%;
    height: 100dvh;
  }

  .handheld-chassis {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--chassis-border);
    border-right: 1px solid var(--chassis-border);
    padding: max(8px, var(--sat)) max(8px, var(--sar)) max(8px, var(--sab)) max(8px, var(--sal));
    gap: clamp(4px, 1vh, 8px);
    box-shadow: none;
  }

  .screw {
    display: none;
  }

  .chassis-header {
    padding-bottom: 2px;
  }
  .device-model {
    font-size: 20px;
  }
  .device-desc {
    font-size: 7.5px;
    letter-spacing: 1px;
  }
  .speaker-grille {
    display: none;
  }
  .pwa-install-badge {
    padding: 2px 6px;
    font-size: 8px;
  }

  .screen-bezel {
    padding: 5px;
    border-radius: 8px;
    border-width: 2px;
  }
  .screen-glass {
    border-radius: 4px;
  }
  .lcd-screen {
    padding: 6px 8px;
  }

  .screen-top-bar {
    font-size: 10px;
    margin-bottom: 4px;
    padding-bottom: 2px;
  }

  .screen-telemetry-panel {
    gap: 8px;
    padding: 2px 0;
  }
  #avatar-canvas {
    width: 48px;
    height: 48px;
  }
  .avatar-tag {
    font-size: 6.5px;
  }
  .gauges-matrix {
    font-size: 9.5px;
    gap: 1px 4px;
  }
  .gauge-key {
    font-size: 8.5px;
  }

  .screen-separator {
    margin: 2px 0 4px;
  }

  .screen-content {
    font-size: 11.5px;
    line-height: 1.35;
    padding-right: 2px;
  }

  .boot-logo {
    font-size: 28px;
  }
  .boot-sub {
    font-size: 9px;
    margin-bottom: 8px;
  }
  .boot-alert {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .boot-instruction {
    font-size: 10.5px;
    line-height: 1.4;
  }

  .prompt-title {
    font-size: 17px;
  }
  .prompt-desc {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .dilemma-title {
    font-size: 18px;
  }
  .dilemma-scenario {
    font-size: 11px;
    line-height: 1.35;
  }
  .route-options {
    gap: 4px;
  }
  .route-card {
    padding: 5px 8px;
  }
  .route-label {
    font-size: 11.5px;
  }
  .route-desc {
    font-size: 10px;
    line-height: 1.25;
  }

  .outcome-header {
    font-size: 18px;
    padding-bottom: 2px;
  }
  .outcome-summary {
    font-size: 11px;
    line-height: 1.35;
  }
  .delta-chip {
    font-size: 9px;
    padding: 1px 4px;
  }
  .brutal-text {
    font-size: 10px;
    line-height: 1.35;
  }

  .control-label-strip {
    font-size: 8px;
    margin-bottom: 2px;
  }
  .route-buttons-row {
    gap: 5px;
  }
  .tactile-btn {
    padding: 6px 2px;
    min-height: 42px;
  }
  .btn-cap {
    font-size: 18px;
  }
  .btn-sub {
    font-size: 7.5px;
  }

  .btn-execute {
    padding: 8px 10px;
    min-height: 46px;
  }
  .btn-execute-text {
    font-size: 18px;
    letter-spacing: 1px;
  }
  .btn-execute-sub {
    font-size: 7.5px;
  }

  .utility-buttons-row {
    gap: 3px;
  }
  .btn-util {
    font-size: 8px;
    padding: 6px 2px;
    min-height: 34px;
  }

  .chassis-footer {
    display: none;
  }
}

/* Height-constrained phone screens (e.g. landscape or shorter devices < 700px) */
@media (max-height: 700px) {
  .handheld-chassis {
    padding-top: max(6px, var(--sat));
    padding-bottom: max(6px, var(--sab));
    gap: 4px;
  }
  .screen-bezel {
    padding: 4px;
  }
  .lcd-screen {
    padding: 4px 6px;
  }
  #avatar-canvas {
    width: 42px;
    height: 42px;
  }
  .avatar-pod {
    padding: 2px;
  }
  .gauges-matrix {
    font-size: 9px;
  }
  .tactile-btn {
    min-height: 38px;
    padding: 4px 2px;
  }
  .btn-execute {
    min-height: 42px;
    padding: 6px 8px;
  }
  .btn-execute-text {
    font-size: 16px;
  }
  .control-label-strip {
    display: none;
  }
}