/* ============================
   GLOBAL VARIABLES
============================ */
:root {
  --red-main: #ff0022;
  --red-glow: #ff3355;
  --red-deep: #3a0008;
  --fog-red: rgba(255, 0, 40, 0.25);
  --fog-red-strong: rgba(255, 0, 40, 0.55);
  --hud-green: #6bffb7;
  --text-soft: #f5f5f5;
}

/* ============================
   RESET + BASE
============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: "Arial ROunded MT", system-ui, sans-serif;
  color: var(--text-soft);
}

/* ============================
   GAME CONTAINER
============================ */
.game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  perspective: 1600px;
  overflow: hidden;
}

/* ============================
   SPACE BACKGROUND
============================ */
.space {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, #200000, #000 70%);
  overflow: hidden;
}

/* Stars */
.stars, .stars2, .stars3 {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, white, transparent),
    radial-gradient(1px 1px at 40% 70%, #ff4444, transparent),
    radial-gradient(1px 1px at 80% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 90%, #ff2222, transparent);
}

.stars { animation: drift 160s linear infinite; opacity: 0.7; }
.stars2 { animation: drift 240s linear infinite reverse; opacity: 0.45; filter: blur(1px); }
.stars3 { animation: drift 320s linear infinite; opacity: 0.25; filter: blur(2px); }

@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-25%, -25%, 0); }
}

/* Red fog */
.red-fog {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, var(--fog-red), transparent 70%);
  filter: blur(40px);
  animation: fogPulse 6s ease-in-out infinite;
}

@keyframes fogPulse {
  0% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.2); }
  100% { opacity: 0.25; transform: scale(1); }
}

/* Static noise */
.static-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+X2VINwAAAABJRU5ErkJggg==");
  opacity: 0.06;
  mix-blend-mode: screen;
  animation: staticPulse 0.2s infinite;
}

@keyframes staticPulse {
  0% { opacity: 0.03; }
  50% { opacity: 0.08; }
  100% { opacity: 0.03; }
}

/* ============================
   VIGNETTES
============================ */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.9) 80%);
}

.vignette-dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 0%, rgba(0,0,0,0.8) 70%);
}

/* ============================
   HUD PANELS
============================ */
.hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 20px;
  z-index: 10;
  pointer-events: none;
}

.hud-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hud-panel {
  pointer-events: auto;
  background: rgba(20, 0, 0, 0.7);
  border: 1px solid rgba(255, 0, 40, 0.5);
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow:
    0 0 20px rgba(255, 0, 40, 0.6),
    inset 0 0 20px rgba(255, 0, 40, 0.3);
  backdrop-filter: blur(6px);
}

.hud-panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red-main);
  margin-bottom: 6px;
}

/* HP Bars */
.hud-bar {
  width: 260px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(40, 0, 0, 0.8);
  border: 1px solid rgba(255, 0, 40, 0.6);
  box-shadow: inset 0 0 20px rgba(255, 0, 40, 0.4);
}

.hud-bar-fill {
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #ffcccc, #ff0033);
  animation: hpPulse 1.2s infinite alternate;
}

.hud-bar-fill.player {
  background: linear-gradient(90deg, #ccffee, #00ffaa);
}

@keyframes hpPulse {
  from { filter: brightness(0.8); }
  to   { filter: brightness(1.4); }
}

/* ============================
   STATUS MESSAGE
============================ */
.status-msg {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--red-main);
  text-shadow: 0 0 20px var(--red-main);
}

.hidden { opacity: 0; }

/* ============================
   SCENE + BLACK HOLE
============================ */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.scene-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(18deg) translateY(-40px);
}

/* Danger Ring */
.danger-ring {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translateX(-50%) translateZ(-380px);
  border-radius: 50%;
  border: 2px dashed rgba(255, 0, 40, 0.4);
  box-shadow: 0 0 40px rgba(255, 0, 40, 0.8);
  animation: dangerPulse 2.5s infinite;
}

@keyframes dangerPulse {
  0% { transform: translateX(-50%) translateZ(-380px) scale(1); opacity: 0.3; }
  50% { transform: translateX(-50%) translateZ(-380px) scale(1.05); opacity: 0.6; }
  100% { transform: translateX(-50%) translateZ(-380px) scale(1); opacity: 0.3; }
}

/* Black Hole */
.black-hole {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translateX(-50%) translateZ(-420px);
  filter: drop-shadow(0 0 40px var(--red-main));
}

/* Event Horizon */
.event-horizon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, black 0%, black 60%, transparent 70%);
}

/* Photon Ring */
.photon-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.8),
    0 0 120px rgba(255, 0, 40, 0.8);
  animation: ringWobble 6s infinite ease-in-out;
}

@keyframes ringWobble {
  0% { transform: scale(1) rotateZ(0deg); }
  50% { transform: scale(1.05) rotateZ(4deg); }
  100% { transform: scale(1) rotateZ(0deg); }
}

/* Accretion Disk */
.disk-wrap {
  position: absolute;
  inset: -60px;
  transform: rotateX(70deg);
}

.disk {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 200, 200, 0.1),
    rgba(255, 80, 40, 1),
    rgba(255, 0, 40, 1),
    rgba(80, 0, 0, 1),
    rgba(255, 0, 40, 1),
    rgba(255, 80, 40, 1),
    rgba(255, 200, 200, 0.1)
  );
  animation: diskSpin 14s linear infinite;
  filter: blur(1px);
}

@keyframes diskSpin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Gravitational Tendrils */
.gravity-tendrils {
  position: absolute;
  inset: -200px;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,0,40,0.4), transparent 50%),
    radial-gradient(circle at 90% 50%, rgba(255,0,40,0.4), transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(255,0,40,0.5), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255,0,40,0.4), transparent 50%);
  animation: tendrilTwist 20s infinite alternate ease-in-out;
  opacity: 0.3;
}

@keyframes tendrilTwist {
  0% { transform: rotateZ(-6deg) scale(1); }
  50% { transform: rotateZ(6deg) scale(1.1); }
  100% { transform: rotateZ(-6deg) scale(1); }
}

/* Lens Warp */
.lens-warp {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);
  mix-blend-mode: screen;
  animation: warpPulse 5s infinite;
}

@keyframes warpPulse {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0.4; }
}

/* ============================
   PLAYER SHIP
============================ */
.player {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 80px;
  height: 120px;
  transform: translateX(-50%) translateZ(200px);
  transition: transform 0.05s linear;
}

.ship-body { position: absolute; inset: 0; }

/* Main body */
.ship-main {
  position: absolute;
  width: 28px;
  height: 80px;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #e6fff9, #00a98e, #002f28);
  border-radius: 50% 50% 10px 10px;
  box-shadow: 0 0 20px #00ffaa;
}

/* Wings */
.ship-wing {
  position: absolute;
  width: 38px;
  height: 70px;
  top: 36px;
  background: linear-gradient(180deg, #003432, #000);
  border-radius: 16px;
  border: 1px solid #00ffaa;
}

.ship-wing.left { left: 6px; transform: rotateY(28deg) rotateZ(-14deg); }
.ship-wing.right { right: 6px; transform: rotateY(-28deg) rotateZ(14deg); }

/* Core */
.ship-core {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #00ffe0, #005146);
  box-shadow: 0 0 40px #00ffaa;
  animation: corePulse 1.2s infinite;
}

@keyframes corePulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Aura */
.ship-aura {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,200,0.5), transparent 70%);
  filter: blur(14px);
}

/* ============================
   PROJECTILES
============================ */
.projectile {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, white, #00ffd5, transparent);
  box-shadow: 0 0 20px #00ffaa;
}

/* ============================
   DAMAGE FLASH
============================ */
.damage-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.6), rgba(255,0,40,0.8), rgba(0,0,0,0.9));
  opacity: 0;
  transition: opacity 0.2s;
}

.damage-flash.active { opacity: 0.9; }

/* ============================
   CENTER MESSAGE
============================ */
.center-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffdddd;
  text-shadow: 0 0 20px var(--red-main);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.center-message.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

.center-message .big {
  font-size: 32px;
  margin-bottom: 8px;
}

.center-message .small {
  font-size: 12px;
  opacity: 0.8;
}

/* ============================================================
   REMOVE EVERYTHING VISUAL FROM THE HULL VECTOR BOX
============================================================ */

/* Remove the entire panel background, border, glow */
#player-hp-fill,
#player-hp-label,
#player-hp-fill.player,
#player-hp-fill.player::before,
#player-hp-fill.player::after {
  all: unset !important;
}

/* Remove the bar container visuals */
#player-hp-fill,
#player-hp-fill.player {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Remove the bar wrapper visuals */
#player-hp-fill,
#player-hp-fill.player,
#player-hp-fill.player *,
#player-hp-fill * {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove the HUD panel visuals ONLY for the Hull Vector panel */
#player-hp-label,
#player-hp-fill,
#player-hp-fill.player,
#player-hp-fill.player *,
#player-hp-fill *,
#player-hp-label *,
#player-hp-label * {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove the entire Hull Vector bar container visuals */
#player-hp-fill {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}