/* =========================================================
   GLOBAL / FULLSCREEN STAGE
   ========================================================= */

html, body {
  touch-action: none;         /* blocks pinch & pan */
  overscroll-behavior: none;  /* blocks rubber-band zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* no scrollbars */
  background: #000;                 /* fill screen behind game */
}

canvas {
  touch-action: none;
}

* { box-sizing: border-box; }

body {
  color: #ffffff;
  font: 14px/1.4 system-ui, sans-serif;
  overscroll-behavior: none;        /* prevent bounce */
}

/* Game root: always fills the device.
   JS applies transform: scale(...) to this element. */
#player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  transform-origin: top left;
  will-change: transform;

  overflow: hidden;                 /* clip safely when "cover" scaling crops */
  isolation: isolate;               /* stable compositor layers */
}

/* Camera moves #world (translate3d) */
#world {
  position: absolute;
  inset: 0;
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* =========================================================
   WORLD LAYERS
   ========================================================= */

/* Tile layer */
#tiles {
  position: absolute;
  inset: 0;
}

.tile {
  position: absolute;
  background: linear-gradient(#7f8c8d, #576574);
  border: 1px solid rgba(0,0,0,.25);
  border-top-color: rgba(255,255,255,.35);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06);
}

/* Hero container (DOM size set by JS to match collider/scale) */
#hero {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* The stacked SVG frames live inside the hero box */
#frames {
  position: absolute;
  inset: 0;
  transform-origin: var(--hero-pivot-x, 50%) var(--hero-pivot-y, 100%);
}

/* Each SVG frame fills hero; opacity swap only (no display flips) */
.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;   /* anchor art to feet */
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.frame.visible { opacity: 1; }

/* =========================================================
   HUD BASE
   ========================================================= */

#hud {
  opacity: .9;
  background: #1b1b1b;
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  z-index: 1100;
  pointer-events: auto;
}

/* default icon size (desktop/tablet) */
.hud-pill svg {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

/* ---------- Burger button (created by JS) ---------- */
#hudBurger {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1201;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  display: none;                    /* shown only on mobile */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

#hudBurger span {
  display: block;
  width: 70%;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}

/* ---------- Desktop HUD layout: bottom center ---------- */
@media (min-width: 769px) and (min-height: 501px) {
  #hud {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);

    flex-direction: column;
    align-items: center;
    gap: 4px;

    padding: 6px 12px 22px;
    border-radius: 12px;
    background: rgba(20, 20, 30, 0.55);
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
    z-index: 1200;
  }
}

/* ---------- Mobile HUD: burger + slide-down panel ---------- */
@media (max-width: 768px), (max-height: 500px) {

  /* 🍔 Burger button (bottom-left) */
  #hudBurger {
    display: flex;
    position: fixed !important;

    left: calc(env(safe-area-inset-left, 0px) + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);

    z-index: 20000;
  }

  /* 📦 HUD panel (slides UP from bottom) */
  #hud {
    position: fixed !important;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 19999;

    max-height: 60vh;
    padding: 12px 10px calc(env(safe-area-inset-bottom, 0px) + 12px);

    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

    /* start hidden */
    transform: translateY(110%);
    transition: transform 0.25s ease-out;
  }

  /* HUD visible */
  #hud.hud-open {
    transform: translateY(0);
  }

  /* Smaller HUD icons */
  .hud-pill svg {
    width: 28px !important;
    height: 28px !important;
  }
}



/* ----------------------- misc UI elements ----------------------- */

kbd {
  background: #222;
  border: 1px solid #444;
  border-bottom-color: #333;
  padding: 2px 6px;
  border-radius: 6px;
  color: #fafafa;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}

#hud kbd {
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

/* HUD: non-selectable, no tap highlight */
#hud,
#hud * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#plyScoreHud {
  position: fixed;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  color: #fff;
  font-family: system-ui, sans-serif;
  line-height: 1.1;
  z-index: 9999;
  user-select: none;
}
#plyScoreHud .ply-score__label { font-size: 10px; letter-spacing: 1px; opacity: 0.8; }
#plyScoreHud .ply-score__value { font-size: 22px; font-weight: 700; }
#plyScoreHud .ply-score__combo  { font-size: 12px; opacity: 0; transition: opacity .2s; }

/* Game UI should never be selectable or draggable */
#player, #player * ,
#world, #world * ,
#tiles, #tiles * ,
#collectibles, #collectibles * ,
#projectiles, #projectiles * ,
#fx, #fx * ,
#hud, #hud * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

img, svg, canvas {
  -webkit-user-drag: none;
}

/* Trap collectible visual: red pulse */
@keyframes dangerPulse {
  0%   { filter: drop-shadow(0 0 0 rgba(255,0,0,.0)) brightness(1); transform: translateZ(0) scale(1); }
  50%  { filter: drop-shadow(0 0 10px rgba(255,0,0,.70)) brightness(1.25); transform: translateZ(0) scale(1.08); }
  100% { filter: drop-shadow(0 0 0 rgba(255,0,0,.0)) brightness(1); transform: translateZ(0) scale(1); }
}

/* legacy class kept (if used elsewhere) */
.refill-trap {
  animation: dangerPulse 0.9s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* NEW: match current JS class for trap pickups */
.pickup.trap {
  animation: dangerPulse 0.9s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Stomps HUD */
#hudStomps {
  position: fixed !important;
  top: 10px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;

  z-index: 3000 !important;
  pointer-events: none;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(20,22,30,.35);
  backdrop-filter: blur(4px);
  color: #fff;
  font: 700 16px/1.1 monospace;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

/* optional icon span inside #hudStomps */
#hudStomps .icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  display: inline-block;
}

/* If someone appends #hudStomps inside #hud by accident, force it to the right end */
#hud #hudStomps {
  position: static !important;
  margin-left: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

/* inventory button should look like plain icon */
.inv-item { background: transparent !important; border: 0 !important; padding: 0 !important; }
.inv-item:focus { outline: none; }
#inventoryPanel .inv-count { color: #fff !important; }

#hud #stompCounter { color:#fff; }

.hud-score {
  position: fixed;
  left: calc(24px + env(safe-area-inset-left));
  top:  calc(18px + env(safe-area-inset-top));
  z-index: 9999;
  font: 700 18px/1.2 monospace;
  color:#fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  letter-spacing:1px;
  user-select:none;
  pointer-events:none;
}


/* =========================================================
   SPLASH
   ========================================================= */

/* ✅ HIDE HUD + SCORE WHILE SPLASH IS ACTIVE */
body.splash #hud,
body.splash #plyScoreHud,
body.splash .hud-score,
body.splash #hudStomps,
body.splash #speedBarContainer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   GAME OVER: hide all gameplay UI
   ========================================================= */
body.gameover #hud,
body.gameover #plyScoreHud,
body.gameover .hud-score,
body.gameover #hud-score,          /* ✅ ADD THIS */
body.gameover #hud-score-value,    /* ✅ ADD THIS */
body.gameover #hudStomps,
body.gameover #speedBarContainer,
body.gameover #gameTimer,
body.gameover #mobileJoystick,
body.gameover #mobileMoveControls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* =========================================================
   SPLASH
   ========================================================= */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,#8bd3ff 0%,#bfe7ff 55%,#eaf6ff 100%);
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.splash-hero {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
  transform: translateX(var(--hero-nudge));
  margin-right: 150px;
}

.splash-btn {
  --btn-bg1: #2b7bff;
  --btn-bg2: #1f5fe0;
  --btn-shadow: rgba(22, 70, 190, 0.35);

  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font: 700 18px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
  box-shadow:
    0 10px 22px var(--btn-shadow),
    inset 0 1px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.splash-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    0 12px 26px rgba(22, 70, 190, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.splash-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 6px 14px rgba(22, 70, 190, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.splash-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 6px rgba(43, 123, 255, 0.75),
    0 12px 26px rgba(22, 70, 190, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

/* ---- Score HUD position (top-right) ---- */
#score, .hud-score, #hud .score {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  left: auto !important;
  transform: none !important;
  z-index: 5000;
}

/* Timer (always visible) — responsive tweaks */
@media (max-width: 400px) {
  #gameTimer {
    font-size: 14px !important;
    padding: 5px 8px !important;
  }
}

/* visual hint: bomb armed */
#hud .hud-pill.active {
  outline: 2px solid rgba(255, 210, 0, 0.95);
  box-shadow: 0 0 10px rgba(255, 210, 0, 0.45);
}

[data-enemy="bird"].attack {
  filter: drop-shadow(0 0 6px rgba(255,80,0,.7));
  transform: scale(1.05);
}

/* basic explosion animation — customize / replace */
.explosion-effect {
  border-radius: 50%;
  animation: explosionPulse 0.6s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes explosionPulse {
  0%   { transform: scale(0.1); opacity: 0.95; }
  60%  { transform: scale(1.05); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}

/* bird death hook (optional) */
.dead-by-explosion {
  opacity:  0.0;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}

/* =========================================================
   SPEED BAR (HUD)
   ========================================================= */

#speedBarContainer {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);

  width: 180px;
  height: 10px;
  border: 1px solid #ffffff;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  cursor: default;
}

#speedBarContainer.ready { cursor: pointer; }

#speedBarFill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: linear-gradient(to right, #ffec43, #f99407);
}

/* Top row inside HUD */
#hudMainRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* HUD items row (bombs, refills, umbrella) */
#inventoryPanel {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  width: 100%;
}

/* =========================================================
   WATER / SPLASH VISUALS
   ========================================================= */

.water-splash {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  background: url("animations/water-splash/water-stepON_0001.svg") no-repeat center center / contain;
  animation: waterSplashAnim 0.45s steps(12) forwards;
  z-index: 5000;
}

@keyframes waterSplashAnim {
  from { opacity: 1; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.05); }
}

/* 🌊 EXTREME VISIBILITY + PERFECT LOOP PIT WATER */
.pit-water {
  position: absolute;
  pointer-events: none;
  z-index: 12;

  background: linear-gradient(
      to top,
      rgba(0, 140, 255, 1) 0%,
      rgba(0, 180, 255, 0.95) 40%,
      rgba(150, 240, 255, 0.90) 100%
  );

  border-top: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0px 0px 20px rgba(0, 200, 255, 0.9),
    inset 0px 0px 18px rgba(255, 255, 255, 0.7),
    inset 0px -10px 25px rgba(0, 70, 255, 0.8),
    inset 0 4px 8px rgba(0, 0, 0, 0.25);

  background-size: 300% 150%;
  animation: pitWaterWave 2.2s linear infinite;
}

@keyframes pitWaterWave {
  0%   { background-position-x: 0%; }
  100% { background-position-x: -300%; }
}

.pit-water::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: radial-gradient(
      ellipse at 50% 20%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.08) 35%,
      rgba(0, 0, 0, 0) 75%
  );

  background-size: 200% 200%;
  opacity: 0.75;
  animation: pitWaterShimmer 1.8s linear infinite;
}

@keyframes pitWaterShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.pit-water::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  animation: waterRipple 3s ease-out infinite;
}

@keyframes waterRipple {
  0%   { transform: scale(0.3); opacity: 0.7; }
  60%  { transform: scale(.9); opacity: 0.2; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Hero looks wet/blue while slowed by cannonball */
.hero-wet #frames img,
.hero-wet #frames svg,
#hero.hero-wet img,
#hero.hero-wet svg {
  filter: hue-rotate(200deg) saturate(2) brightness(1.1);
}

/* Transparent HUD pill for wet damage effect */
.wet-pill {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.wet-pill:hover,
.wet-pill:active {
  background: transparent !important;
}

#wetHudIcon svg {
  filter: drop-shadow(0px 0px 2px rgba(0, 160, 255, 0.8));
}

#wetHudTimer {
  color: white !important;
  text-shadow: 0 0 3px black;
}

/* =========================================================
   MOBILE HUD: ICON-ONLY (no big black bar)
   ========================================================= */
@media (max-width: 768px), (max-height: 500px) {
  /* remove the bar */
  #hud {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    height: auto !important;
    max-height: none !important;

    left: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;

    padding: 0 !important;
    gap: 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none; /* ✅ icons only will re-enable */
    z-index: 20000 !important;
  }

  /* the row that holds pills/icons */
  #hudMainRow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 0 !important;
    margin: 0 !important;

    pointer-events: auto; /* ✅ allow taps */
  }

  /* each pill becomes a small floating icon badge */
  .hud-pill {
    background: rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);

    border-radius: 14px !important;
    padding: 8px 10px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    pointer-events: auto;
  }

  /* hide speed bar on mobile (it adds height) */
  #speedBarContainer {
    display: none !important;
  }


}
@media (max-width: 768px), (max-height: 500px) {

  /* Slim bottom HUD bar */
  #hud {
    position: fixed !important;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);

    z-index: 20000;

    height: 52px;                 /* ✅ slim */
    padding: 6px 10px;
    border-radius: 16px;

    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);

    display: flex;
    align-items: center;
    gap: 10px;

    /* ✅ no wrapping that makes it tall */
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Main row becomes a single line */
  #hudMainRow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* Make each pill smaller */
  .hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Smaller SVG icons on mobile */
  .hud-pill svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Speed bar row should NOT force extra height on mobile */
  #speedBarContainer {
    display: none !important;     /* ✅ keep HUD slim (we can add a tiny bar later) */
  }

  /* Burger becomes a small inline button sitting LEFT of HUD */
  #hudBurger {
    display: inline-flex !important;
    position: static !important;  /* ✅ lives “inside” the HUD visually */
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.10);
    z-index: 20001;
    flex: 0 0 auto;
  }

  #hudBurger span {
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
  }
}

@media (max-width: 768px), (max-height: 500px) {
  #hud {
    transform: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


@media (max-width: 768px), (max-height: 500px) {

  /* Compact baseline for every HUD pill */
  #hud .hud-pill {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    line-height: 1 !important;
  }

  /* Stop inner wrappers from adding vertical space */
  #hud .hud-pill > * {
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Any icon wrapper inside pills */
  #hud .hud-pill img,
  #hud .hud-pill svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
    display: block !important;
  }

  /* Any count text inside pills */
  #hud .hud-pill strong,
  #hud .hud-pill .count,
  #hud .hud-pill .qty,
  #hud .hud-pill .hud-count {
    font-size: 13px !important;
    position: relative !important;
    top: -3px !important; /* ✅ “bring number up” */
  }
}


/* =========================================================
   FIX: Wet HUD pill internal layout (no extra pill)
   ========================================================= */

/* Target ONLY the wet pill */
#wetHud,
#refillWetHud,
.wet-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
}

/* Wet icon: push it slightly down */
#wetHud img,
#refillWetHud img,
.wet-pill img {
  position: relative;
  top: 4px;               /* 👈 moves icon down */
}

/* Wet timer: stay inside pill, right-aligned & centered */
#wetHudTimer {
  position: static !important;  /* 👈 critical: prevents extra pill */
  margin-left: auto !important; /* pushes timer to right */
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 0.95;
}


/* =========================================================
   HUD pill internal alignment cleanup
   ========================================================= */

/* All HUD pills: icon + text alignment */
.hud-pill,
.hud-pill > div,
#hud .pill,
#hud .hud-item {
  display: flex;
  align-items: center;        /* 👈 vertical centering */
  gap: 6px;
}

/* Normalize all icons inside pills */
.hud-pill img,
#hud img {
  position: static !important; /* 👈 remove offsets */
  width: 18px;
  height: auto;
  display: block;
}

/* Normalize numbers / timers */
.hud-pill span,
.hud-pill .count,
#wetHudTimer {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

/* =========================================================
   HUD: ALIGN ICONS + NUMBERS FOR ALL PILLS (MOBILE + DESKTOP SAFE)
   ========================================================= */

/* Every direct HUD item behaves like a horizontal row */
#hudMainRow > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* If a pill has nested wrappers, normalize them too */
#hudMainRow > * > *,
.hud-pill > *,
#hudMainRow [id$="IconWrap"],
#hudMainRow [id$="CountWrap"],
#hudMainRow [id$="TimerWrap"],
#hudMainRow .icon-wrap,
#hudMainRow .count-wrap {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Normalize ALL icons */
#hudMainRow img,
#hudMainRow svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;    /* remove old offsets */
  transform: none !important;
}

/* Normalize ALL numbers/timers */
#hudMainRow strong,
#hudMainRow span,
#hudMainRow div[id$="Timer"],
#hudMainRow div[id$="Count"],
#hudMainRow .hud-count,
#hudMainRow .hud-timer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 13px !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;    /* prevent drifting */
  transform: none !important;
}

@media (max-width: 768px), (max-height: 500px) {
  #hudMainRow > * {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
  }

  #hudMainRow img,
  #hudMainRow svg {
    width: 18px !important;
    height: 18px !important;
  }
}


/* =========================================================
   MOBILE JOYSTICK (MOVE)
   ========================================================= */
/* =========================================================
   MOBILE JOYSTICK — ARCADE BALL (TOP-DOWN)
   ========================================================= */
#mobileJoystick {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 26000;

  width: 120px;
  height: 120px;

  display: block;
  pointer-events: none; /* wrapper ignores */
}

/* Subtle recessed ring (not a full base) */
#mobileJoystick .joy-base {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  border-radius: 999px;

  background:
    radial-gradient(circle at center,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.25) 45%,
      rgba(0,0,0,0.15) 60%,
      rgba(255,255,255,0.08) 100%
    );

  box-shadow:
    inset 0 10px 18px rgba(0,0,0,0.45),
    inset 0 -6px 12px rgba(255,255,255,0.08);

  position: relative;
  touch-action: none;
}

/* ===== Arcade ball (this is the joystick) ===== */
#mobileJoystick .joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  /* Glossy red arcade ball */
  background:
    radial-gradient(circle at 28% 28%,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.45) 8%,
      rgba(255,255,255,0.18) 18%,
      rgba(255,0,0,0.95) 38%,
      rgba(190,0,0,0.95) 68%,
      rgba(120,0,0,0.95) 100%
    );

  box-shadow:
    0 14px 20px rgba(0,0,0,0.45),
    inset 0 2px 4px rgba(255,255,255,0.55),
    inset 0 -10px 14px rgba(0,0,0,0.55);

  border: 1px solid rgba(255,255,255,0.25);

  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Optional subtle rim highlight */
#mobileJoystick .joy-knob::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}


/* show only on mobile-ish */
@media (max-width: 768px), (max-height: 500px) {
  #mobileJoystick { display: block; }
}


@media (max-width: 768px), (max-height: 500px) {
  #mobileMoveControls {
    display: flex !important; /* override the default display:none */
  }
}


#GameOverSplash {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  /* ✅ FULL SCREEN COVER (fills entire window) */
  object-fit: cover;
  object-position: center center;

  z-index: 99999;
  display: none;
  pointer-events: none;
}


/* ==============================
   Resurrection overlay
   ============================== */
#resurrectOverlay{
  position: fixed;
  inset: 0;
  z-index: 100000; /* above GameOverSplash */
  display: none;
  pointer-events: auto;

  /* readable overlay */
  background: rgba(0,0,0,0.45);
}

#resurrectOverlay .res-wrap{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  padding: 14px 14px 16px;
  border-radius: 14px;
  background: rgba(10,10,14,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
}

#resurrectOverlay .res-title{
  font: 800 16px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

#resurrectOverlay .res-sub{
  margin-top: 6px;
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  opacity: 0.9;
}

#resurrectOverlay .res-list{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0.95;
}

#resurrectOverlay .res-list-item{
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  font: 700 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

#resurrectOverlay .res-choices{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#resurrectOverlay .res-choice{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font: 800 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  cursor: pointer;
}

#resurrectOverlay .res-choice:disabled{
  opacity: 0.55;
  cursor: default;
}

#resurrectOverlay .res-result{
  margin-top: 10px;
  font: 900 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: 0.6px;
}


.res-list-item{
  text-align:center;
  font-weight:800;
  opacity:0.9;
  margin:6px 0;
}


#splashScreen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#9fdcff, #eef7ff);
}

#splashHeroAnchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%); /* slightly above button */
  pointer-events: none;
}

#center2ply{
  position:absolute;
}

.splash-btn {
  padding: 14px 36px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  color: #ffffff;
  background: linear-gradient(
    180deg,
    #ffb347 0%,
    #ff8c00 100%
  );

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.splash-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.splash-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

#splashHeroAnchor {
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.35));
}