/* ===================================
   GAS INTERVENTION - RETRO CRT STYLES
   Windows 95 x CRT Terminal Aesthetic
   ================================== */

/* Import retro fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

/* CSS Variables */
:root {
  /* Windows 95 Colors */
  --win95-bg: #008080;
  --win95-gray: #c0c0c0;
  --win95-dark: #808080;
  --win95-darker: #404040;
  --win95-white: #ffffff;
  --win95-black: #000000;
  --win95-blue: #000080;
  --win95-blue-light: #1084d0;
  
  /* CRT Terminal Colors */
  --crt-green: #33ff33;
  --crt-green-dim: #22aa22;
  --crt-bg: #0a0a0a;
  --crt-amber: #ffb000;
  
  /* Alert Colors */
  --danger-red: #ff0000;
  --warning-yellow: #ffff00;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  background: var(--win95-bg);
  font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

/* ===================================
   CRT SCANLINE OVERLAY
   =================================== */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.crt-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

.crt-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* Screen flicker effect */
@keyframes flicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

.screen-container {
  animation: flicker 0.15s infinite;
}

/* ===================================
   WINDOWS 95 STYLE WINDOW
   =================================== */
.win95-window {
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-white) var(--win95-darker) var(--win95-darker) var(--win95-white);
  box-shadow: 
    inset 1px 1px 0 var(--win95-white),
    inset -1px -1px 0 var(--win95-dark),
    2px 2px 8px rgba(0, 0, 0, 0.5);
  width: 700px;
  max-width: 95vw;
}

.win95-titlebar {
  background: linear-gradient(90deg, var(--win95-blue) 0%, var(--win95-blue-light) 100%);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.win95-titlebar-text {
  color: white;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.win95-titlebar-text::before {
  content: '📷';
  font-size: 14px;
}

.win95-titlebar-buttons {
  display: flex;
  gap: 2px;
}

.win95-btn-titlebar {
  width: 16px;
  height: 14px;
  background: var(--win95-gray);
  border: 1px solid;
  border-color: var(--win95-white) var(--win95-darker) var(--win95-darker) var(--win95-white);
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Marlett', sans-serif;
}

.win95-btn-titlebar:active {
  border-color: var(--win95-darker) var(--win95-white) var(--win95-white) var(--win95-darker);
}

.win95-content {
  padding: 15px;
}

/* Menu bar */
.win95-menubar {
  background: var(--win95-gray);
  padding: 2px 4px;
  border-bottom: 1px solid var(--win95-dark);
  font-size: 11px;
}

.win95-menubar span {
  padding: 2px 8px;
  cursor: pointer;
}

.win95-menubar span:hover {
  background: var(--win95-blue);
  color: white;
}

/* ===================================
   WINDOWS 95 BUTTONS
   =================================== */
.win95-button {
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-white) var(--win95-darker) var(--win95-darker) var(--win95-white);
  padding: 6px 20px;
  font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
  font-size: 12px;
  cursor: pointer;
  min-width: 75px;
  box-shadow: 
    inset 1px 1px 0 var(--win95-white),
    inset -1px -1px 0 var(--win95-dark);
}

.win95-button:hover {
  background: #d4d0c8;
}

.win95-button:active,
.win95-button.pressed {
  border-color: var(--win95-darker) var(--win95-white) var(--win95-white) var(--win95-darker);
  box-shadow: 
    inset -1px -1px 0 var(--win95-white),
    inset 1px 1px 0 var(--win95-dark);
  padding: 7px 19px 5px 21px;
}

.win95-button:focus {
  outline: 1px dotted var(--win95-black);
  outline-offset: -4px;
}

.win95-button.primary {
  border: 3px solid var(--win95-black);
  border-color: var(--win95-black);
  box-shadow: 
    inset 2px 2px 0 var(--win95-white),
    inset -2px -2px 0 var(--win95-dark);
}

/* Big pixelated button */
.big-button {
  font-family: 'Press Start 2P', cursive;
  font-size: 14px;
  padding: 20px 40px;
  margin: 20px auto;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #d4d0c8;
  image-rendering: pixelated;
  transition: all 0.1s;
}

.big-button:hover {
  background: #e8e4dc;
}

.big-button:active {
  background: #c8c4bc;
}

/* ===================================
   WINDOWS 95 FORM ELEMENTS
   =================================== */
.win95-select {
  background: var(--win95-white);
  border: 2px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  padding: 4px;
  font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
  font-size: 12px;
  width: 100%;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 var(--win95-darker);
}

.win95-select:focus {
  outline: none;
  background: var(--win95-blue);
  color: white;
}

.win95-fieldset {
  border: 2px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  padding: 15px;
  margin: 10px 0;
  background: var(--win95-gray);
}

.win95-fieldset legend {
  background: var(--win95-gray);
  padding: 0 5px;
  font-size: 11px;
}

.win95-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}

/* ===================================
   CRT TERMINAL STYLES
   =================================== */
.terminal-display {
  background: var(--crt-bg);
  border: 3px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  padding: 20px;
  margin: 15px 0;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--crt-green);
  height: 150px;
  box-shadow: 
    inset 2px 2px 10px rgba(0, 0, 0, 0.8),
    inset -2px -2px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 5px var(--crt-green);
}

/* Larger terminal for analysis output */
#progress-section .terminal-display {
  height: 200px;
}

/* Selected info terminal - always reserves space */
#selected-info {
  height: 130px;
  visibility: visible;
  display: block !important;
}

#selected-info.hidden {
  visibility: hidden;
  display: block !important;
}

.terminal-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Blinking cursor */
.cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: var(--crt-green);
  animation: blink 1s infinite;
  vertical-align: bottom;
  margin-left: 2px;
}

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

/* Typing animation */
.typing-text {
  overflow: hidden;
  border-right: none;
  animation: typing 0.5s steps(20, end);
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* ===================================
   PROGRESS BAR (Retro Style)
   =================================== */
.progress-container {
  background: var(--crt-bg);
  border: 2px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  padding: 15px;
  margin: 15px 0;
  height: 100px;
}

.progress-label {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--crt-green);
  margin-bottom: 10px;
  text-shadow: 0 0 5px var(--crt-green);
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.progress-bar-outer {
  background: var(--crt-bg);
  border: 2px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  height: 25px;
  position: relative;
  overflow: hidden;
}

.progress-bar-inner {
  background: repeating-linear-gradient(
    90deg,
    var(--crt-green) 0px,
    var(--crt-green) 15px,
    var(--crt-bg) 15px,
    var(--crt-bg) 20px
  );
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--crt-green);
}

.progress-bar-inner.analyzing {
  background: repeating-linear-gradient(
    90deg,
    var(--crt-amber) 0px,
    var(--crt-amber) 15px,
    var(--crt-bg) 15px,
    var(--crt-bg) 20px
  );
  box-shadow: 0 0 10px var(--crt-amber);
}

.progress-percent {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--crt-green);
  text-shadow: 0 0 3px var(--crt-green);
}

/* ===================================
   RESULT DISPLAY
   =================================== */
.result-container {
  text-align: center;
  padding: 30px;
  display: none;
}

.result-container.visible {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: resultAppear 0.3s ease;
}

@keyframes resultAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.result-main {
  font-family: 'Press Start 2P', cursive;
  font-size: 72px;
  color: var(--danger-red);
  text-shadow: 
    4px 4px 0 var(--win95-darker),
    -2px -2px 0 var(--win95-white),
    0 0 20px var(--danger-red);
  margin: 20px 0;
  letter-spacing: 10px;
  animation: glowPulse 1s ease infinite alternate;
}

/* Glow pulse - no scaling, just glow intensity */
@keyframes glowPulse {
  from { text-shadow: 4px 4px 0 var(--win95-darker), -2px -2px 0 var(--win95-white), 0 0 20px var(--danger-red); }
  to { text-shadow: 4px 4px 0 var(--win95-darker), -2px -2px 0 var(--win95-white), 0 0 40px var(--danger-red), 0 0 60px var(--danger-red); }
}

.result-flavor {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--crt-green);
  background: var(--crt-bg);
  padding: 20px;
  margin: 20px 0;
  border: 2px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  text-shadow: 0 0 5px var(--crt-green);
  line-height: 1.6;
}

.result-flavor.exotic {
  color: var(--crt-amber);
  text-shadow: 0 0 5px var(--crt-amber);
  border-color: var(--crt-amber);
}

/* ===================================
   FORM GROUPS
   =================================== */
.form-group {
  margin-bottom: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* ===================================
   STATUS BAR
   =================================== */
.win95-statusbar {
  background: var(--win95-gray);
  border-top: 1px solid var(--win95-white);
  padding: 3px 5px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}

.statusbar-item {
  border: 1px solid;
  border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
  padding: 1px 5px;
  background: var(--win95-gray);
}

.statusbar-item.ready {
  color: green;
}

.statusbar-item.ready::before {
  content: '● ';
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .result-main {
    font-size: 48px;
  }
  
  .big-button {
    font-size: 11px;
    padding: 15px 25px;
  }
  
  .terminal-display {
    font-size: 14px;
    padding: 10px;
  }
}

/* ===================================
   ANIMATIONS & EFFECTS
   =================================== */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanline-anim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: 10000;
}

/* Glitch effect for result */
@keyframes glitch {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(-2px, 2px);
  }
  20% {
    clip-path: inset(92% 0 1% 0);
    transform: translate(2px, -2px);
  }
  40% {
    clip-path: inset(43% 0 1% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(2px, -2px);
  }
  80% {
    clip-path: inset(54% 0 7% 0);
    transform: translate(-2px, 2px);
  }
  100% {
    clip-path: inset(58% 0 43% 0);
    transform: translate(0);
  }
}

/* Hidden helper classes */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

/* Fixed height content areas to prevent layout shift */
#main-content-area {
  min-height: 420px;
  height: 420px;
  overflow: hidden;
}

#selection-form,
#progress-section,
#result-section {
  height: 100%;
}

#progress-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#result-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#result-section.visible {
  display: flex !important;
}

/* Decorative elements */
.pixel-border {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Warning banner */
.warning-banner {
  background: repeating-linear-gradient(
    45deg,
    var(--warning-yellow),
    var(--warning-yellow) 10px,
    var(--win95-black) 10px,
    var(--win95-black) 20px
  );
  padding: 3px;
  margin-bottom: 15px;
}

.warning-banner-inner {
  background: var(--warning-yellow);
  padding: 10px;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: var(--win95-black);
}

/* Credits/Footer style */
.credits {
  text-align: center;
  font-size: 10px;
  color: var(--win95-dark);
  margin-top: 10px;
}

.credits a {
  color: var(--win95-blue);
}