/* ==========================================================================
   RAPUNZEL FANTASY GAME BOY SPEEDOMETER HUD STYLESHEET
   FiveM NUI & Modern Browser Dual-Mode Compatible
   ========================================================================== */

:root {
  --rapunzel-purple-deep: #281438;
  --rapunzel-purple: #4a2468;
  --rapunzel-purple-light: #7c459c;
  --rapunzel-gold: #f6ca56;
  --rapunzel-gold-dark: #aa7010;
  --rapunzel-gold-light: #fff3b8;
  --rapunzel-gold-grad: linear-gradient(135deg, #fff3b8, #f6ca56 50%, #aa7010);
  --rapunzel-display-bg: #0e0a1e;
  --led-green: #00ff66;
  --alert-red: #ff2d55;
  --alert-orange: #ff8c00;
  --glow-gold: rgba(246, 202, 86, 0.45);
  --glow-pink: rgba(255, 79, 179, 0.45);
  
  /* Needle Pivot Points */
  --speed-needle-pivot-x: 50%;
  --speed-needle-pivot-y: 87.4%;
  --rpm-needle-pivot-x: 50%;
  --rpm-needle-pivot-y: 88.1%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   ORIGINAL DOM CONTRACT PRESERVATION (FiveM Test Suites Compatibility)
   ========================================================================== */
main.speedometer {
  display: none !important;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

/* ==========================================================================
   MAIN SPEEDOMETER HUD CONTAINER
   Fixed in bottom-right corner, responsive across 1080p, 1440p, 4K
   ========================================================================== */
.speedometer-hud {
  position: fixed;
  right: clamp(16px, 1.8vw, 26px);
  bottom: clamp(16px, 2vh, 26px);
  width: clamp(340px, 21.8vw, 420px);
  aspect-ratio: 1213 / 691;
  z-index: 100;
  user-select: none;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.85));
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

.speedometer-hud.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.96);
}

.speedometer-hud:hover {
  filter: drop-shadow(0 16px 42px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(246, 202, 86, 0.2));
}

.hud-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 1. Base Console Chassis */
.chassis-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.chassis-layer img.shell-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 2. Central Display Screen Cutout */
.screen-cutout {
  position: absolute;
  left: 25.60%;
  top: 19.70%;
  width: 48.96%;
  height: 58.28%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #1c1538 0%, #0d091a 80%, #06040d 100%);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95);
  z-index: 2;
}

.screen-stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent),
    radial-gradient(1px 1px at 45% 15%, #ffd700, transparent),
    radial-gradient(1.5px 1.5px at 80% 25%, #e0b0ff, transparent),
    radial-gradient(1px 1px at 30% 75%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 80%, #ffd700, transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(255, 215, 0, 0.3), transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* Top Telemetry Header inside Screen */
.screen-header {
  position: absolute;
  top: 4%;
  left: 4%;
  right: 4%;
  height: 13%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: #d1c4e9;
  z-index: 8;
}

/* Turn Signals */
.turn-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  opacity: 0.25;
  color: var(--led-green);
  transition: opacity 0.1s, filter 0.1s;
}
.turn-signal.flashing {
  opacity: 1 !important;
  color: var(--led-green) !important;
  filter: drop-shadow(0 0 6px var(--led-green));
}

/* Gear Box */
.gear-display {
  display: inline-flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(246, 202, 86, 0.35);
  font-size: 0.58rem;
}
.gear-display span {
  opacity: 0.35;
  font-weight: 700;
  transition: all 0.15s;
}
.gear-display span.active {
  opacity: 1;
  color: #ffd54f;
  text-shadow: 0 0 6px #ffd54f;
  border: 1px solid #ffd54f;
  padding: 0 2px;
  border-radius: 2px;
}

/* Headlight Status Medallion */
.headlight-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.headlight-indicator svg {
  width: 13px;
  height: 13px;
  opacity: 0.3;
  transition: opacity 0.2s, filter 0.2s;
}
.headlight-indicator.low-beam svg {
  opacity: 1;
  stroke: var(--led-green);
  filter: drop-shadow(0 0 5px var(--led-green));
}
.headlight-indicator.high-beam svg {
  opacity: 1;
  stroke: #3b82f6;
  filter: drop-shadow(0 0 6px #3b82f6);
}

.digital-clock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.58rem;
  color: #e0d4fc;
}

/* Gauges Cluster Area */
.gauges-cluster {
  position: absolute;
  top: 14%;
  left: 3%;
  right: 3%;
  bottom: 26%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.gauge-dial {
  position: relative;
  width: 48%;
  aspect-ratio: 1;
}

.bezel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.center-ornament-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  height: 28%;
  object-fit: contain;
  pointer-events: none;
}

/* Speedometer & RPM Needles */
.needle-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.needle-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14%;
  height: 52%;
  transform-origin: var(--speed-needle-pivot-x) var(--speed-needle-pivot-y);
  transform: translate(-50%, -87.4%) rotate(-125deg);
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.75));
}

.needle-pointer.rpm {
  transform-origin: var(--rpm-needle-pivot-x) var(--rpm-needle-pivot-y);
  transform: translate(-50%, -88.1%) rotate(-125deg);
  filter: drop-shadow(0 0 8px rgba(255, 79, 179, 0.75));
}

/* Digital Speed LCD */
.speed-digital-lcd {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff9de;
  text-shadow: 0 0 8px #f6ca56;
}
.speed-digital-lcd small {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.44rem;
  color: #cbb9ec;
  letter-spacing: 0.6px;
}
.odometer-text {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.42rem;
  color: #9d8ec2;
  letter-spacing: 0.4px;
  margin-top: 1px;
}

/* Bottom Telemetry Bar */
.screen-footer {
  position: absolute;
  bottom: 3.5%;
  left: 3%;
  right: 3%;
  height: 22%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  z-index: 6;
}

/* Fuel Pod */
.fuel-pod {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 32%;
}
.fuel-pod img {
  width: 20px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px #ffd54f);
}
.fuel-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.fuel-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #ffd54f;
  white-space: nowrap;
}
.fuel-label small {
  font-size: 0.42rem;
  color: #c4b5fd;
}
.progress-bar-track {
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(246, 202, 86, 0.4);
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8c00, #ffd54f);
  border-radius: 999px;
  transition: width 0.25s ease-out;
}

/* Warning Medallion */
.warning-medallion {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(246, 202, 86, 0.5);
  border-radius: 999px;
  padding: 2px 7px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.warning-medallion img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  transition: all 0.2s;
}
.warning-medallion img.dim {
  opacity: 0.28;
  filter: grayscale(1);
}

/* Health Pod */
.health-pod {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 32%;
}
.health-pod img {
  width: 22px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px #e0288e);
}
.health-info {
  text-align: right;
  min-width: 0;
}
.health-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #ff66cc;
  white-space: nowrap;
}
.health-label small {
  display: block;
  font-size: 0.42rem;
  color: #c4b5fd;
  letter-spacing: 0.3px;
}

/* 3. Interactive Physical Buttons Layer */
.buttons-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: auto;
}

.hud-btn {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: transform 0.08s ease-out, filter 0.15s ease, background-color 0.15s ease;
}

.hud-btn:hover {
  background: rgba(246, 202, 86, 0.15);
  filter: drop-shadow(0 0 8px rgba(246, 202, 86, 0.6));
}

.hud-btn:active, .hud-btn.pressed {
  transform: translate(-50%, -50%) scale(0.93) !important;
  background: rgba(246, 202, 86, 0.28);
  filter: drop-shadow(0 0 4px rgba(246, 202, 86, 0.4));
}

/* D-pad Hotspot */
.btn-dpad {
  left: 12.32%;
  top: 44.79%;
  width: 11.54%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 20%;
}

/* Action Buttons A & B Hotspots */
.btn-action-a {
  left: 92.09%;
  top: 40.88%;
  width: 6.76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.btn-action-b {
  left: 83.72%;
  top: 46.60%;
  width: 6.76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* START & SELECT Pill Hotspots */
.btn-start {
  left: 14.84%;
  top: 68.74%;
  width: 7.42%;
  height: 5.79%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.btn-select {
  left: 14.84%;
  top: 77.86%;
  width: 7.42%;
  height: 5.79%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

/* Status LED Gem Hotspot (Click toggles HUD / Power) */
.status-led-box {
  position: absolute;
  left: 83.43%;
  top: 20.04%;
  width: 2.64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 28;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.status-led-box:hover {
  filter: drop-shadow(0 0 10px var(--led-green));
}
.status-led-box.off {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 4px #000;
}

/* YouTube Cartridge Hotspot (Click launches Radio, Press Y) */
.btn-youtube-cartridge {
  left: 89.69%;
  top: 65.27%;
  width: 11.54%;
  height: 17.37%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
}
.btn-youtube-cartridge:hover {
  background: rgba(255, 45, 85, 0.2);
  filter: drop-shadow(0 0 12px rgba(255, 45, 85, 0.8));
}
.btn-youtube-cartridge.playing {
  animation: ytCartridgeGlow 1.8s infinite ease-in-out !important;
}
@keyframes ytCartridgeGlow {
  0% { filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.7)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 45, 85, 1)) brightness(1.25); }
  100% { filter: drop-shadow(0 0 6px rgba(255, 45, 85, 0.7)); }
}

/* Pulse Animation for Critical Alerts */
@keyframes alertPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px #ff2222); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 14px #ff0000); }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px #ff2222); }
}
.alerting {
  animation: alertPulse 0.85s infinite ease-in-out !important;
}

/* ==========================================================================
   FLOATING YOUTUBE CAR RADIO POPUP (Above Left Minimap)
   ========================================================================== */
.youtube-player-container {
  position: fixed;
  left: max(20px, 1.5vw);
  bottom: clamp(160px, 18vh, 200px);
  width: clamp(260px, 15vw, 290px);
  height: 185px;
  background: rgba(22, 16, 42, 0.95);
  border: 1.5px solid var(--rapunzel-gold);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 16px var(--glow-gold);
  backdrop-filter: blur(14px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
  user-select: none;
}

.youtube-player-container.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.youtube-player-container.minimized {
  height: 44px !important;
  width: clamp(240px, 14vw, 270px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

.yt-header {
  height: 38px;
  background: linear-gradient(90deg, #2f1747, #452166);
  border-bottom: 1px solid rgba(246, 202, 86, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: grab;
}
.yt-header:active { cursor: grabbing; }

.yt-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  flex: 1;
}
.yt-icon-badge {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.yt-title-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff9e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-controls-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.yt-action-btn {
  background: transparent;
  border: none;
  color: #e0d4fc;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.15s;
}
.yt-action-btn:hover {
  background: rgba(246, 202, 86, 0.2);
  color: var(--rapunzel-gold);
}

.yt-iframe-wrap {
  flex: 1;
  width: 100%;
  background: #000;
  position: relative;
}
.yt-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Volume Slider Widget in Header */
.yt-vol-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}
.yt-vol-slider {
  width: 50px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
}
.yt-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rapunzel-gold);
  cursor: pointer;
}

/* Radio Modal URL Dialog */
/* Live Playing Pulse Indicator */
.yt-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 8px #ff2d55;
  animation: pulseLiveDot 1.2s infinite ease-in-out;
  margin-left: 6px;
}
@keyframes pulseLiveDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Radio Modal URL Dialog */
.radio-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 20, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.radio-modal-backdrop.open { display: flex; }

.radio-modal-card {
  background: #19122e;
  border: 1.5px solid var(--rapunzel-gold);
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  padding: 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 20px var(--glow-gold);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  color: var(--rapunzel-gold);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.modal-close-icon {
  background: transparent;
  border: none;
  color: #b5a9d6;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.modal-close-icon:hover {
  color: #fff;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: #c4b5fd;
  margin-bottom: 14px;
  line-height: 1.4;
}

.modal-input-group {
  display: flex;
  align-items: center;
  background: #0f0a1c;
  border: 1px solid rgba(246, 202, 86, 0.4);
  border-radius: 8px;
  padding: 2px 10px;
  margin-bottom: 14px;
  transition: border-color 0.2s;
}
.modal-input-group:focus-within {
  border-color: var(--rapunzel-gold);
  box-shadow: 0 0 10px rgba(246, 202, 86, 0.25);
}

.modal-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 4px;
  color: #fff;
  font-size: 0.88rem;
  outline: none;
}

.modal-clear-btn {
  background: transparent;
  border: none;
  color: #8b7ea8;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.9rem;
}
.modal-clear-btn:hover { color: #fff; }

/* 1-Click Song Presets */
.modal-presets {
  margin-bottom: 18px;
}
.presets-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: #f6ca56;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.preset-btn {
  background: rgba(40, 20, 56, 0.8);
  border: 1px solid rgba(246, 202, 86, 0.35);
  border-radius: 8px;
  color: #e0d4fc;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-btn:hover {
  background: rgba(246, 202, 86, 0.2);
  border-color: var(--rapunzel-gold);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.preset-btn:active {
  transform: translateY(1px);
}

.modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s, filter 0.15s;
}
.modal-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #b5a9d6;
}
.modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.modal-btn.play {
  background: var(--rapunzel-gold-grad);
  color: #2a1503;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(246, 202, 86, 0.4);
}
.modal-btn.play:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}