/* ─────────────────────────────────────────────
   MANIAC TOWER — Core Game Styles
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

:root {
  --font-game:  'Press Start 2P', monospace;
  --col-accent: #5566ff;
  --col-text:   #d0d0ff;
  --col-dim:    #6060aa;
  --col-warn:   #ffcc44;
  --col-danger: #ff4444;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-game);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Viewport ──────────────────────────────── */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
}

/* ── World container ───────────────────────── */
#world {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  transform-origin: top left;
}

/* ── Screen flash overlay ──────────────────── */
#screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ── Scanline effect ───────────────────────── */
#viewport::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── Vignette ──────────────────────────────── */
#viewport::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 50%,
    rgba(0,0,0,0.45) 100%
  );
  pointer-events: none;
  z-index: 9997;
}

/* ── Player ────────────────────────────────── */
.player {
  transform-origin: bottom center;
}

/* ── NPCs ──────────────────────────────────── */
.npc {
  transform-origin: bottom center;
}
.npc:hover { filter: brightness(1.3); }
.npc:hover .npc-name { opacity: 1 !important; }

/* ── Interaction dot pulse ─────────────────── */
@keyframes dotPulse {
  0%, 100% { opacity: 0.4; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
  50%       { opacity: 0.9; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.4); }
}

/* ── Disco ball spin ───────────────────────── */
@keyframes discoBallSpin {
  from { box-shadow: 0 0 12px rgba(200,150,255,0.6), 0 0 24px rgba(150,100,200,0.3); }
  to   { box-shadow: 0 0 18px rgba(255,200,100,0.6), 0 0 30px rgba(200,100,255,0.3); }
}

/* ── Light beam sway ───────────────────────── */
@keyframes beamSway {
  from { transform: rotate(calc(var(--base-angle, 0deg) + 0deg)); opacity: 0.2; }
  to   { transform: rotate(calc(var(--base-angle, 0deg) + 25deg)); opacity: 0.5; }
}

/* ── Lava lamp glow ────────────────────────── */
@keyframes lavaGlow {
  from { box-shadow: 0 0 14px rgba(0,180,0,0.5), 0 0 30px rgba(0,100,0,0.3); }
  to   { box-shadow: 0 0 22px rgba(0,220,0,0.7), 0 0 44px rgba(0,140,0,0.5); }
}

/* ── Candle flicker ────────────────────────── */
@keyframes flicker {
  from { opacity: 0.8; transform: scaleX(1); }
  to   { opacity: 1;   transform: scaleX(0.85); }
}

/* ── Cloud drift ───────────────────────────── */
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(1600px); }
}

/* ── Rotor spin ────────────────────────────── */
@keyframes rotorSpin {
  from { transform: scaleX(1); }
  33%  { transform: scaleX(0.2); }
  66%  { transform: scaleX(-1); }
  to   { transform: scaleX(1); }
}

/* ── Zombie arm reach ──────────────────────── */
@keyframes zombieReach {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(25deg) translateY(-2px); }
}

/* ── Player dance wiggle ───────────────────── */
/*  Applied to player-body child, not the positioned wrapper,
    so JS transform-based positioning is not disrupted.          */
@keyframes danceWiggle {
  0%   { transform: rotate(0deg)  translateY(0);   }
  12%  { transform: rotate(-7deg) translateY(-3px); }
  25%  { transform: rotate(7deg)  translateY(0);   }
  38%  { transform: rotate(-6deg) translateY(-2px); }
  50%  { transform: rotate(5deg)  translateY(0);   }
  62%  { transform: rotate(-4deg) translateY(-1px); }
  75%  { transform: rotate(3deg)  translateY(0);   }
  88%  { transform: rotate(-2deg) translateY(0);   }
  100% { transform: rotate(0deg)  translateY(0);   }
}

.player.dancing .player-body {
  animation: danceWiggle 2.2s ease-in-out forwards;
  transform-origin: bottom center;
}


/* ── Dog tail wag ──────────────────────────── */
@keyframes dogTailWag {
  0%   { transform: rotate(-25deg); }
  100% { transform: rotate(10deg);  }
}

/* ── Rotor fast spin (helicopter flight) ────── */
@keyframes rotorFast {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.heli-rotor.spinning-fast {
  animation: rotorFast 0.08s linear infinite !important;
}