/* Latigo BTTF retro override for OpenSpeedTest — v2 with real selectors */

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

/* ===== Background: black + grid + scanlines ===== */
html, body, .uiBg, #UI-Desk, #UI-Mob {
  background: #0a0a0f !important;
  background-image:
    linear-gradient(rgba(255, 50, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  color: #d4d4d4 !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* Scanline overlay on body */
body { position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(0,255,200,0.03) 50%);
  background-size: 100% 3px;
}

/* ===== Cards: chrome panel look ===== */
.Cards {
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a) !important;
  border: 4px solid #555 !important;
  border-top-color: #888 !important;
  border-left-color: #777 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 32px rgba(255,0,255,0.18), inset 0 0 60px rgba(0,0,0,0.6) !important;
  color: #d4d4d4 !important;
  position: relative;
}

/* ===== Result numbers — big LCD green ===== */
.rtextnum, .oDoTop-Speed, .oDoLive-Speed {
  font-family: 'Share Tech Mono', monospace !important;
  color: #38ff80 !important;
  text-shadow: 0 0 10px #38ff80, 0 0 22px rgba(56,255,128,0.6) !important;
  letter-spacing: 0.12em !important;
}

/* Units (Mbps / ms) — amber LCD */
.rtextmbms, .rtext, .oDoLive-Status, .jitter-Mob {
  font-family: 'VT323', monospace !important;
  color: #ffaa28 !important;
  text-shadow: 0 0 8px rgba(255,170,40,0.6) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* ===== START button — neon magenta ===== */
.startButton {
  background: radial-gradient(circle at center, #ff44ff 0%, #aa00aa 70%, #660066 100%) !important;
  border: 4px solid #ff66ff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 30px #ff00ff, 0 0 60px rgba(255,0,255,0.5), inset 0 0 20px rgba(255,255,255,0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.startButton:hover {
  box-shadow: 0 0 50px #ff00ff, 0 0 100px rgba(255,0,255,0.6), inset 0 0 30px rgba(255,255,255,0.4) !important;
  transform: scale(1.05) !important;
}
.buttonTxt {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.95em !important;
  color: #fff !important;
  text-shadow: 0 0 8px #ff00ff !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ===== Gauge container — cyan glow ===== */
.main-Gaugebg, .main-GaugeBlue, .main-GaugeWhite, .oDo-Meter, .progressbg {
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6)) !important;
}

/* SVG gauge — try to retint */
#OpenSpeedTest-UI {
}

/* ===== ConnectError ===== */
.ConnectError {
  background: #1a0606 !important;
  color: #ff3030 !important;
  border: 2px solid #ff3030 !important;
  text-shadow: 0 0 8px #ff3030 !important;
  font-family: 'VT323', monospace !important;
}

/* ===== Credits / progress / misc ===== */
.Credits {
  font-family: 'VT323', monospace !important;
  color: #888 !important;
  font-size: 0.9em !important;
}
.Credits::before {
  content: '◉ LATIGO TIME CIRCUITS · POWERED BY OpenSpeedTest™ · ';
  color: #ffaa28;
  letter-spacing: 0.1em;
}

.intro-Progress, .progressElmstart {
  background: #1a1306 !important;
  border: 1px solid #ffaa28 !important;
}

.Symbol, #downSymbolDesk, #downSymbolMob, #upSymbolDesk, #upSymbolMob {
}

/* ===== IP display ===== */
#ipDesk, #ipMob {
  font-family: 'Share Tech Mono', monospace !important;
  color: #00ffff !important;
  text-shadow: 0 0 6px #00ffff !important;
  background: #0a1a1a !important;
  border: 1px solid #003333 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Settings/start panel */
.Startsettings, .deskStart {
  background: rgba(20, 20, 30, 0.6) !important;
  border: 1px dashed #00ffff !important;
  border-radius: 8px !important;
  color: #d4d4d4 !important;
}

/* All buttons (settings checkboxes etc) */
button, input[type="button"], input[type="submit"] {
  background: linear-gradient(180deg, #2a2a3a, #1a1a2a) !important;
  border: 1px solid #555 !important;
  color: #00ffff !important;
  font-family: 'VT323', monospace !important;
  letter-spacing: 0.1em !important;
  border-radius: 4px !important;
  padding: 0.4em 1em !important;
  cursor: pointer !important;
}
button:hover { border-color: #ff00ff !important; color: #ff00ff !important; }

/* Hide the spinner shown during initial load (looks weird in our theme) */
.spinner { background: transparent !important; }
.spinner .bounce1, .spinner .bounce2, .spinner .bounce3 {
  background: #ff00ff !important;
  box-shadow: 0 0 12px #ff00ff !important;
}

/* Light mode override — kill it completely */
.daymode { display: none !important; }
.darkmode { background: transparent !important; }

/* Make sure links are styled */
a {
  color: #00ffff !important;
  text-decoration: none !important;
  border-bottom: 1px dashed #00ffff !important;
}
a:hover { color: #ff00ff !important; border-bottom-color: #ff00ff !important; }

/* Add a "TIME CIRCUITS ENGAGED" badge floating top-right */
.uiBg::before {
  content: '◉ TIME CIRCUITS ENGAGED ◉';
  position: fixed;
  top: 12px; right: 16px;
  font-family: 'VT323', monospace;
  font-size: 1em;
  color: #ffaa28;
  letter-spacing: 0.15em;
  text-shadow: 0 0 6px #ffaa28;
  animation: blinkSlow 2.4s ease-in-out infinite;
  z-index: 10000;
  pointer-events: none;
}
@keyframes blinkSlow { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }