html,body{margin:0; width:100vw; height:100vh; overflow:hidden; background:transparent!important}
*{font-family:Rajdhani,monospace; box-sizing:border-box}
.glow-blue{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 6px #3a8cff) drop-shadow(0 0 14px #3a8cff)}
.glow-red{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 6px #ff1a1a) drop-shadow(0 0 14px #ff1a1a)}
.ind{opacity:0.25; transition:0.15s} .ind.active{opacity:1; filter:drop-shadow(0 0 8px currentColor)}
.box-blue{background:linear-gradient(180deg, #1e3a6a, #0f2447); border:1.5px solid #3a7bff; box-shadow:0 0 18px rgba(58,123,255,0.75)}
.box-red{background:linear-gradient(180deg, #6a1e1e, #470f0f); border:1.5px solid #ff3b3b; box-shadow:0 0 18px rgba(255,59,59,0.75)}
#speedo-root{
  background:transparent!important; 
  border:none!important; 
  box-shadow:none!important; 
  padding:0!important;
  transform: scale(0.92) translateZ(0);
  transform-origin: bottom right;
  backface-visibility: hidden;
  will-change: transform;
}

#health-needle-g, #fuel-needle-g, #rpm-needle-g {
  will-change: transform;
}

/* RESPONSIVE SCALING */
@media (max-width: 1440px) {
  #speedo-root {
    transform: scale(0.82) translateZ(0) !important;
    right: 14px !important;
    bottom: 60px !important;
  }
}

@media (max-width: 1080px) {
  #speedo-root {
    transform: scale(0.72) translateZ(0) !important;
    right: 8px !important;
    bottom: 25px !important;
  }
}

.main-circle{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(circle at center, rgba(4,10,26,0.96) 0%, rgba(8,18,42,0.88) 38%, rgba(14,28,62,0.55) 68%, rgba(22,42,88,0.28) 100%);
  border-radius:50%; border:1px solid rgba(58,123,255,0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 15px rgba(58,123,255,0.4), 0 0 35px rgba(58,123,255,0.25), inset 0 0 20px rgba(58,123,255,0.15);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.main-circle.redline{border-color: rgba(255,59,59,0.6); box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 20px rgba(255,59,59,0.6), 0 0 50px rgba(255,59,59,0.4), inset 0 0 25px rgba(255,59,59,0.2);}
.small-dial{
  width:112px; height:112px; border-radius:50%!important; overflow:hidden;
  background: radial-gradient(circle at center, rgba(4,10,26,0.96) 0%, rgba(10,22,50,0.78) 50%, rgba(18,36,78,0.38) 100%);
  border:1px solid rgba(58,123,255,0.3);
  box-shadow: 0 0 12px rgba(58,123,255,0.35), inset 0 0 10px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; transition:0.2s;
}
.main-circle::after{content:''; position:absolute; inset:0; border-radius:50%; z-index:4; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, transparent 70%); pointer-events:none;}
.waifu-bg{position:absolute; width:350px; height:350px; left:50%; top:50%; transform:translate(-50%,-52%); z-index:1; border-radius:50%; overflow:hidden; pointer-events:none}
.waifu-bg img{width:100%; height:100%; object-fit:contain; object-position:center top; opacity:0.9}
#rpm-svg{position:relative; z-index:2}
/* EFEK 2 & 3 */
@keyframes pulse-red { 0%,100%{box-shadow:0 0 12px rgba(255,59,59,0.3), inset 0 0 10px rgba(0,0,0,0.6)} 50%{box-shadow:0 0 28px rgba(255,59,59,0.95), inset 0 0 15px rgba(255,0,0,0.3)} }
.small-dial.warn{animation:pulse-red 0.8s infinite; border-color:#ff3b3b!important}
@keyframes shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(1px,-1px)} 50%{transform:translate(-1px,1px)} 75%{transform:translate(1px,1px)} }
#speedo-root.shaking{animation:shake 0.08s infinite}