@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  --phosphor: #00ff41;
  --phosphor-dim: #008f24;
  --phosphor-dark: #004d13;
  --amber: #ffb000;
  --amber-dim: #805a00;
  --cold-blue: #1a4a7a;
  --cold-blue-bright: #2a6aaa;
  --breach: #ff2020;
  --substrate: #060a06;
  --substrate-light: #0c140c;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  text-rendering: geometricPrecision;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--substrate);
  color: var(--phosphor);
  font-family: 'Share Tech Mono', 'Lucida Console', monospace;
  font-size: 13px;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* CRT scanline overlay */
#overlay-crt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.06) 0px,
    rgba(0, 0, 0, 0.06) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Vignette */
#overlay-crt::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.3) 100%);
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Screen management */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.screen.active {
  display: flex;
}

/* === IDLE SCREEN === */
#screen-idle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

.title-block {
  line-height: 1.5;
}

.title-main {
  font-size: 28px;
  font-weight: bold;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-dim), 0 0 20px rgba(0,255,65,0.3);
  letter-spacing: 4px;
}

.title-sub {
  font-size: 16px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-dim);
  letter-spacing: 3px;
  margin-top: 4px;
}

.title-copy {
  font-size: 11px;
  color: var(--phosphor-dim);
  letter-spacing: 2px;
  margin-top: 6px;
}

.idle-info {
  font-size: 12px;
  color: var(--phosphor-dim);
  line-height: 1.8;
  max-width: 500px;
}

.btn-primary {
  font-family: inherit;
  font-size: 14px;
  color: var(--substrate);
  background: var(--phosphor);
  border: none;
  padding: 12px 32px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-primary:hover, .btn-primary:active {
  background: var(--phosphor-dim);
  box-shadow: 0 0 12px var(--phosphor-dim);
}

/* === GAME SCREEN === */
#screen-game {
  flex-direction: column;
  position: relative;
}

#hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  background: var(--substrate-light);
  border-bottom: 1px solid var(--phosphor-dark);
  font-size: 12px;
  letter-spacing: 2px;
  min-height: 32px;
  z-index: 10;
  flex-shrink: 0;
}

#hud-phase {
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-dim);
  font-weight: bold;
}

#hud-phase.amber {
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber);
  animation: phase-pulse 0.5s steps(2) infinite;
}

@keyframes phase-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

#hud-timer {
  color: var(--phosphor-dim);
}

#hud-score {
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor-dim);
}

/* Plot area */
#plot {
  flex: 1;
  width: 100%;
  min-height: 0;
  image-rendering: pixelated;
}

/* Side HUD panels */
#hud-left {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}

#hud-right {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}

.panel {
  background: rgba(0, 10, 0, 0.85);
  border: 1px solid var(--phosphor-dark);
  padding: 6px 10px;
  min-width: 80px;
}

.panel-label {
  font-size: 9px;
  color: var(--phosphor-dim);
  letter-spacing: 2px;
}

.panel-value {
  font-size: 13px;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-dim);
  font-weight: bold;
}

/* Contact list */
#contact-list {
  margin-top: 6px;
  max-height: 200px;
  overflow: hidden;
}

.contact-item {
  display: flex;
  gap: 6px;
  padding: 3px 0;
  font-size: 10px;
  align-items: center;
}

.contact-item .c-sym {
  font-size: 14px;
  font-weight: bold;
}

.contact-item .c-label {
  color: var(--phosphor-dim);
  min-width: 40px;
}

.contact-item .c-data {
  color: var(--phosphor);
  font-size: 9px;
}

.contact-item.tracker .c-sym,
.contact-item.tracker .c-label,
.contact-item.tracker .c-data {
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-dim);
}

.contact-item.merchant .c-sym {
  color: var(--phosphor);
}

.contact-item.clutter .c-sym,
.contact-item.clutter .c-label,
.contact-item.clutter .c-data {
  color: var(--phosphor-dim);
}

.contact-item.patrol .c-sym {
  color: #009933;
}

/* Bottom meters */
#hud-bottom {
  display: flex;
  justify-content: space-around;
  padding: 8px 10px;
  background: var(--substrate-light);
  border-top: 1px solid var(--phosphor-dark);
  gap: 8px;
  flex-shrink: 0;
}

#meter-speed, #meter-risk, #meter-depth {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
}

.meter-label {
  font-size: 9px;
  color: var(--phosphor-dim);
  letter-spacing: 2px;
}

.meter-track {
  width: 100%;
  height: 8px;
  background: var(--substrate);
  border: 1px solid var(--phosphor-dark);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--phosphor);
  transition: width 0.1s linear;
}

.meter-fill.risk-mid {
  background: var(--amber-dim);
}

.meter-fill.risk-high {
  background: var(--breach);
  animation: risk-flash 0.3s steps(2) infinite;
}

@keyframes risk-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.meter-fill.depth {
  background: var(--cold-blue);
}

.meter-value {
  font-size: 11px;
  color: var(--phosphor);
  text-shadow: 0 0 4px var(--phosphor-dim);
}

/* Touch controls */
#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 8px;
  gap: 4px;
  background: var(--substrate-light);
  border-top: 1px solid var(--phosphor-dark);
  flex-shrink: 0;
}

.ctrl-btn {
  font-family: inherit;
  font-size: 10px;
  color: var(--phosphor-dim);
  background: var(--substrate);
  border: 1px solid var(--phosphor-dark);
  padding: 8px 12px;
  min-width: 48px;
  min-height: 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.1s;
}

.ctrl-btn:active, .ctrl-btn.pressed {
  background: var(--phosphor-dark);
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-dim);
}

.ctrl-btn.silent {
  border-color: var(--amber-dim);
}

.ctrl-btn.silent.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255,176,0,0.1);
  text-shadow: 0 0 8px var(--amber);
}

.ctrl-btn.ping {
  border-color: var(--phosphor-dark);
}

/* Intercept bar */
.intercept-bar {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 10, 0, 0.95);
  border: 2px solid var(--amber);
  padding: 12px 20px;
  text-align: center;
  z-index: 20;
  display: none;
  min-width: 300px;
}

.intercept-bar.visible {
  display: block;
  animation: intercept-slide 0.2s ease-out;
}

@keyframes intercept-slide {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.intercept-label {
  font-size: 14px;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber);
  letter-spacing: 3px;
  font-weight: bold;
}

.intercept-timer {
  font-size: 28px;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber);
  margin: 6px 0;
}

.intercept-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.act-btn {
  font-family: inherit;
  font-size: 11px;
  color: var(--amber);
  background: var(--substrate);
  border: 1px solid var(--amber-dim);
  padding: 8px 14px;
  min-width: 120px;
  min-height: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.1s;
}

.act-btn:active {
  background: rgba(255,176,0,0.2);
  border-color: var(--amber);
  box-shadow: 0 0 8px var(--amber-dim);
}

/* === BRIEF / END SCREEN === */
#screen-brief {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.brief-block {
  max-width: 500px;
  padding: 20px;
  border: 1px solid var(--phosphor-dark);
  background: rgba(0, 10, 0, 0.9);
}

.brief-header {
  font-size: 18px;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  letter-spacing: 3px;
  border-bottom: 1px solid var(--phosphor-dark);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.brief-body {
  font-size: 12px;
  color: var(--phosphor-dim);
  line-height: 1.8;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.brief-body br {
  display: none;
  content: '';
}

.brief-score {
  font-size: 16px;
  color: var(--phosphor);
  text-shadow: 0 0 8px var(--phosphor-dim);
  letter-spacing: 2px;
  border-top: 1px solid var(--phosphor-dark);
  padding-top: 8px;
  margin-top: 8px;
}

/* Touch d-pad layout for mobile */
#controls .dpad-group {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  gap: 4px;
}

/* Ambient flash during intercept */
@keyframes ambient-flash-amber {
  0% { box-shadow: inset 0 0 30px rgba(255,176,0,0.1); }
  50% { box-shadow: inset 0 0 60px rgba(255,176,0,0.2); }
  100% { box-shadow: inset 0 0 30px rgba(255,176,0,0.1); }
}

#screen-game.flash-amber {
  animation: ambient-flash-amber 0.3s steps(2) infinite;
}

/* === RESPONSIVE === */
@media (max-width: 700px) {
  .title-main {
    font-size: 22px;
  }
  .title-sub {
    font-size: 13px;
  }

  #hud-left, #hud-right {
    display: none;
  }

  #hud-bottom {
    flex-direction: row;
    padding: 4px 6px;
    gap: 4px;
  }

  .meter-label {
    font-size: 8px;
  }

  .meter-value {
    font-size: 9px;
  }

  .ctrl-btn {
    font-size: 9px;
    padding: 10px 8px;
    min-width: 48px;
    min-height: 48px;
  }

  .intercept-bar {
    width: 90%;
    min-width: auto;
    bottom: 100px;
  }

  .act-btn {
    font-size: 10px;
    min-width: 110px;
    padding: 10px 8px;
  }

  .intercept-timer {
    font-size: 24px;
  }

  .brief-body {
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  #controls {
    padding: 4px;
    gap: 2px;
  }
  .ctrl-btn {
    padding: 8px 6px;
    min-width: 44px;
    min-height: 44px;
    font-size: 8px;
  }
}

/* Desktop: hide touch controls when mouse available via JS class toggle */
.no-touch #controls {
  display: none;
}

/* Keyboard hint row (desktop only) */
@media (min-width: 701px) {
  .keyboard-hint {
    display: flex;
    justify-content: center;
    padding: 4px;
    font-size: 9px;
    color: var(--phosphor-dim);
    letter-spacing: 1px;
    background: var(--substrate);
    border-top: 1px solid var(--phosphor-dark);
    flex-shrink: 0;
  }
  .keyboard-hint kbd {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid var(--phosphor-dark);
    margin: 0 2px;
    font-size: 8px;
    color: var(--phosphor);
    background: var(--substrate-light);
  }
}