/* Current gameplay additions layered inside the untouched 03637370 tracker shell. */

.tracker-device-frame { grid-template-rows: 78px minmax(0, 1fr) 52px; }

.tracker-logo-image {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.brand-plaque { width: 330px; max-width: calc(100% - 20px); padding: 3px 10px 2px; }
.brand-subtitle { margin-top: 1px; }

.hanging-spidey {
  position: absolute;
  z-index: 11;
  top: 0;
  right: 76px;
  left: auto;
  width: 71px;
  height: 105px;
  pointer-events: none;
  image-rendering: pixelated;
  background: url('../assets/spideytracker/SpiderMan_web.png') no-repeat 0 0 / 5467px 105px;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.55));
  transform: none;
  animation: none;
}

.frame-bottom-bar {
  min-height: 0;
  padding: 5px 10px 5px 66px;
  gap: 8px;
}

.spidey-head-turn-sprite {
  width: 46px;
  height: 74px;
  left: 12px;
  bottom: 1px;
  background: url('../assets/spideytracker/SpiderMan_HeadTurn.png') no-repeat 0 0 / 3492px 74px;
  animation: none;
}

.game-primary-nav { z-index: 55; pointer-events: auto !important; }
.game-primary-nav button { pointer-events: auto !important; touch-action: manipulation; }

.ticker-wrap {
  height: 34px;
  padding: 0 10px;
  border-width: 3px;
}

.ticker-content { font-size: 7px; }

.frame-bottom-bar .sound-toggle {
  width: 92px;
  height: 34px;
  min-width: 92px;
  border-width: 3px;
  box-shadow: inset 0 0 0 2px #c8e6b5, 2px 2px 0 rgba(0,0,0,.35);
}

.frame-bottom-bar .sound-toggle svg { width: 18px; height: 18px; }
.frame-bottom-bar .sound-toggle span { font-size: 6px; }

.action-rpg-screen {
  inset: 0 0 72px;
  background: #050d18;
}

.action-combat-stage {
  position: relative;
  min-height: 330px;
  background: 
    radial-gradient(ellipse at 50% 15%, rgba(84, 182, 208, 0.15), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(240, 100, 92, 0.12), transparent 30%),
    linear-gradient(180deg, #02060c 0%, #071526 65%, #0e273f 65%, #050d18 70%, #03070d 100%) !important;
  box-shadow: inset 0 0 0 2px #397c9b;
}

/* Rooftop Ledge Line Visual Accent */
.action-combat-stage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 3px;
  background: linear-gradient(90deg, #1b3d5c 0%, #54b6d0 30%, #f2c06b 50%, #f0645c 75%, #1b3d5c 100%);
  box-shadow: 0 0 10px rgba(84, 182, 208, 0.4);
  pointer-events: none;
  z-index: 2;
}

.city-layer,
.city-rain,
.combat-center-mark { display: none !important; }

.combat-placeholder,
.roster-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 4px solid #05070b;
  background: #54b6d0 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 4px #b9e5ea, 5px 6px 0 rgba(0,0,0,.6);
  color: #071426;
  clip-path: polygon(50% 0, 88% 17%, 100% 55%, 78% 100%, 22% 100%, 0 55%, 12% 17%);
}

.combat-placeholder::before,
.roster-placeholder::before {
  content: '';
  position: absolute;
  inset: 15px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.combat-placeholder b,
.roster-placeholder b {
  position: relative;
  z-index: 1;
  font: 700 7px/1 "Silkscreen", monospace;
}

/* Marvel Cosmic Invasion Spider-Man Hero Sprite - Perfectly Grounded */
.action-fighter--hero {
  position: absolute !important;
  left: 14% !important;
  bottom: 28% !important; /* Ground line alignment */
  width: 160px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 6 !important;
}

.action-fighter--hero .arena-hero-sprite {
  position: relative !important;
  width: 160px !important;
  height: 120px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
}

.action-fighter--hero .hero-sprite-actor {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 256px !important;
  height: 256px !important;
  margin-left: -128px !important;
  margin-bottom: -18px !important; /* Calibrated foot contact with rooftop ledge */
  display: block !important;
  background-image: url('../assets/spideytracker/cosmic-spidey-sheet.png') !important;
  background-repeat: no-repeat !important;
  background-size: 2560px 2816px !important;
  background-position: var(--sprite-x, 0px) var(--sprite-y, 0px) !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.75)) !important;
  transform-origin: 50% 87.5% !important;
  border: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  pointer-events: none !important;
}

.action-fighter--hero .hero-sprite-actor b,
.action-fighter--hero .hero-sprite-actor::before {
  display: none !important;
}

/* Hide cluttering HERO SLOT text and float combat state above head */
.action-fighter--hero > span {
  display: none !important;
}

.action-fighter--hero .hero-animation-state {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(7, 20, 38, 0.85) !important;
  border: 1px solid #54b6d0 !important;
  color: #54b6d0 !important;
  font: 700 8px/1 "Press Start 2P", monospace !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
}

/* Precision Enemy Ground Positioning */
.action-fighter--enemy {
  position: absolute !important;
  right: 22% !important;
  bottom: 28% !important; /* Equal ground line with hero */
  width: 140px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 5 !important;
}

.action-fighter--enemy span {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}

/* Marvel Cosmic Web Projectile VFX */
.cosmic-web-shot {
  position: absolute;
  left: 18%;
  top: 55%;
  width: 58%;
  height: 64px;
  pointer-events: none;
  z-index: 10;
  transform-origin: left center;
}

.cosmic-web-shot .web-beam {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #e8fbff;
  box-shadow: 0 -2px 0 #7bcce8, 0 2px 0 #80b9d5, 0 0 8px rgba(255,255,255,.65);
  image-rendering: pixelated;
  animation: web-shoot-extend .25s ease-out forwards;
}

.cosmic-web-shot .web-ball {
  position: absolute;
  top: 0;
  width: 64px;
  height: 64px;
  background-image: url('../assets/spideytracker/cosmic-web-vfx.png');
  background-size: 512px 128px;
  background-position: 0 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #54b6d0);
  animation: web-ball-fly .35s linear forwards;
}

.cosmic-web-shot .web-entangle {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background-image: url('../assets/spideytracker/cosmic-web-vfx.png');
  background-size: 512px 128px;
  background-position: -384px 0;
  image-rendering: pixelated;
  opacity: 0;
  animation: web-entangle-burst .42s steps(1, end) .25s forwards;
}

@keyframes web-shoot-extend {
  0% { width: 0; opacity: 0; }
  40% { opacity: 1; }
  100% { width: 95%; opacity: .9; }
}

@keyframes web-ball-fly {
  0% { left: 0; background-position: 0 0; opacity: 1; }
  20% { left: 18%; background-position: -64px 0; }
  40% { left: 38%; background-position: -128px 0; }
  60% { left: 58%; background-position: -192px 0; }
  80% { left: 78%; background-position: -256px 0; }
  100% { left: 95%; background-position: -320px 0; opacity: 0; }
}

@keyframes web-entangle-burst {
  0% { transform: translateY(-50%) scale(.4); background-position: -384px 0; opacity: 0; }
  20% { transform: translateY(-50%) scale(1); background-position: -448px 0; opacity: 1; }
  40% { background-position: 0 -64px; }
  60% { background-position: -64px -64px; }
  80% { background-position: -128px -64px; opacity: 1; }
  100% { transform: translateY(-50%) scale(1.2); background-position: -192px -64px; opacity: 0; }
}

.combat-placeholder--enemy {
  width: 86px;
  height: 86px;
  margin: 0 auto;
  background: #f0645c !important;
  box-shadow: inset 0 0 0 4px #ffaaa2, 5px 6px 0 rgba(0,0,0,.6);
}

.action-fighter--enemy.enemy--grunt .combat-placeholder {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: url('../assets/spideytracker/street-thug-minion.png') center bottom / contain no-repeat !important;
  border: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6));
}
.action-fighter--enemy.enemy--grunt .combat-placeholder b,
.action-fighter--enemy.enemy--grunt .combat-placeholder::before {
  display: none !important;
}
.action-fighter--enemy.enemy--elite .combat-placeholder { transform: scale(.92); filter: hue-rotate(14deg); }
.action-fighter--enemy.enemy--boss .combat-placeholder {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: url('../assets/spideytracker/green-goblin-pixel.png') center bottom / contain no-repeat !important;
  border: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6));
}
.action-fighter--enemy.enemy--boss .combat-placeholder b,
.action-fighter--enemy.enemy--boss .combat-placeholder::before {
  display: none !important;
}
.roster-placeholder { width: 62px; height: 62px; background: #f0645c !important; }
.roster-placeholder--ally { background: #83b96b !important; }

@media (max-width: 800px) {
  .tracker-device-frame { grid-template-rows: 64px minmax(0, 1fr) 46px; }
  .brand-plaque { width: 230px; }
  .frame-bottom-bar { padding: 4px 6px 4px 48px; }
  .spidey-head-turn-sprite { left: 1px; bottom: -1px; transform: scale(.74); transform-origin: bottom left; }
  .ticker-wrap { height: 32px; }
  .frame-bottom-bar .sound-toggle { width: 48px; min-width: 48px; height: 32px; }
  .frame-bottom-bar .sound-toggle span { display: none; }
  .hanging-spidey { right: 52px; transform: scale(.82); transform-origin: top right; }
  .action-rpg-screen { inset: 0 0 66px; }
}

@media (max-width: 500px) {
  .combat-placeholder { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hanging-spidey,
  .spidey-head-turn-sprite { animation: none; }
}

.cosmic-web-shot .web-beam::after {
  content: '';
  position: absolute;
  inset: -5px 0;
  background:
    repeating-linear-gradient(60deg, transparent 0 11px, rgba(232,251,255,.85) 11px 13px, transparent 13px 23px),
    repeating-linear-gradient(-60deg, transparent 0 11px, rgba(232,251,255,.85) 11px 13px, transparent 13px 23px);
  image-rendering: pixelated;
}

/* Original Cosmic Invasion frame renderer. */
.action-fighter--hero .cosmic-original-canvas,
.action-fighter--hero .cosmic-sense-canvas {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.75));
}
.action-fighter--hero .cosmic-sense-canvas { z-index: 2; }
.action-fighter--hero .cosmic-original-canvas.cosmic-reversed { transform: scaleX(-1); }
.cosmic-original-projectile {
  position: absolute;
  z-index: 12;
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  pointer-events: none;
}
.cosmic-original-webpull {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.arena-fighter--villain.enemy-web-pulled {
  animation: cosmic-enemy-pull .78s ease-in-out;
}
@keyframes cosmic-enemy-pull {
  38%, 65% { transform: translateX(var(--web-pull-distance, -140px)); }
}
.cosmic-swing-rope { height: 68%; }

@media (max-width: 720px) {
  .action-fighter--hero .cosmic-original-canvas,
  .action-fighter--hero .cosmic-sense-canvas {
    width: 220px;
    height: 220px;
    margin-left: -110px;
  }
}