/* ═══════════════════════════════════════════════════
   Banging Rocks — Core Styles
   Scene layout + element positioning + animations
   ═══════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0d1a;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── HUD (bang counter) ── */
#hud {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  pointer-events: none;
}

#bang-label {
  font-family: 'Georgia', serif;
  font-size: 14px;
  color: #c0a060;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 160, 40, 0.4);
}

#bang-count {
  font-family: 'Georgia', serif;
  font-size: 48px;
  font-weight: bold;
  color: #ffd080;
  text-shadow:
    0 0 12px rgba(255, 180, 60, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}

/* ── Scene Container ── */
#scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ── Cave Background — fills entire scene ── */
#cave-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#cave-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Cave Interior (clipping boundary for glowing eyes) ──
     Mirrors the dark ellipse in cave-bg SVG (cx=400,cy=265,rx=265,ry=195 in 800×600).
     Percentage mapping: cx=50%, cy=44.2%, width=66.25%, height=65% */
#cave-interior {
  position: absolute;
  left: 16.875%;    /* (400-265)/800 = 16.875% */
  top: 11.7%;       /* (265-195)/600 = 11.7% */
  width: 66.25%;    /* 530/800 */
  height: 65%;      /* 390/600 */
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.cave-eyes {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s;
}

.cave-eyes.visible {
  opacity: 1;
}

.eye-glow {
  fill: #44440a;
  opacity: 0.85;
}

@keyframes eyeBlink {
  0%   { opacity: 0; transform: scaleY(0.1); }
  10%  { opacity: 1; transform: scaleY(1); }
  85%  { opacity: 1; transform: scaleY(1); }
  92%  { opacity: 0.5; transform: scaleY(0.1); }
  100% { opacity: 0; transform: scaleY(0); }
}

/* ── Boulder — centered behind caveman as a seat ── */
#boulder-wrap {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  width: 20vw;
  min-width: 140px;
  max-width: 300px;
  pointer-events: none;
}

#boulder-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Campfire — positioned at bottom-center, slightly left ── */
#campfire-wrap {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(80%);
  z-index: 6;
  width: 9vw;
  min-width: 60px;
  max-width: 120px;
  pointer-events: none;
}

#campfire-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Tiki Torch — left side of scene ── */
#tiki-torch-wrap {
  position: absolute;
  bottom: 12%;
  left: 14%;
  z-index: 5;
  width: 4vw;
  min-width: 28px;
  max-width: 55px;
  pointer-events: none;
}

#tiki-torch-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Caveman — centered in front of cave ── */
#caveman-wrap {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 28vw;
  min-width: 200px;
  max-width: 400px;
}

#caveman-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Impact Flash ── */
#impact-flash {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,200,80,0.5), transparent);
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#impact-flash.burst {
  animation: burstAnim 200ms ease-out forwards;
}

@keyframes burstAnim {
  0%   { width: 0; height: 0; opacity: 1; }
  50%  { width: 80px; height: 80px; opacity: 0.9; }
  100% { width: 120px; height: 120px; opacity: 0; }
}

/* ── Screen Shake ── */
@keyframes shakeAnim {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-4px, 2px); }
  30%  { transform: translate(3px, -3px); }
  45%  { transform: translate(-2px, 3px); }
  60%  { transform: translate(3px, -1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}

#scene.shaking {
  animation: shakeAnim 180ms ease-out;
}

/* ── Counter Bump ── */
@keyframes bumpAnim {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

#bang-count.bump {
  animation: bumpAnim 280ms ease-out;
}

/* ── Stone Chips ── */
.chip {
  position: absolute;
  z-index: 25;
  pointer-events: none;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ── Tap Hint ── */
#tap-hint {
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: 'Georgia', serif;
  font-size: 16px;
  letter-spacing: 4px;
  color: #c0a060;
  text-shadow: 0 0 10px rgba(255, 160, 40, 0.4);
  opacity: 0.7;
  transition: opacity 0.5s;
  pointer-events: none;
}

/* ── Fire Flicker Animations ── */
@keyframes flicker {
  0%, 100% { opacity: 0.65; transform: scaleY(1) scaleX(1); }
  25%      { opacity: 0.55; transform: scaleY(1.04) scaleX(0.97); }
  50%      { opacity: 0.7;  transform: scaleY(0.96) scaleX(1.03); }
  75%      { opacity: 0.6;  transform: scaleY(1.02) scaleX(0.98); }
}

.flame-outer { animation: flicker 0.8s ease-in-out infinite; transform-origin: 50% 100%; }
.flame-mid   { animation: flicker 0.6s ease-in-out infinite 0.1s; transform-origin: 50% 100%; }
.flame-inner { animation: flicker 0.5s ease-in-out infinite 0.2s; transform-origin: 50% 100%; }

@keyframes torchFlicker {
  0%, 100% { opacity: 0.6; transform: scaleY(1) scaleX(1); }
  30%      { opacity: 0.5; transform: scaleY(1.05) scaleX(0.96); }
  60%      { opacity: 0.65; transform: scaleY(0.95) scaleX(1.04); }
}

.tf-outer { animation: torchFlicker 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
.tf-mid   { animation: torchFlicker 0.7s ease-in-out infinite 0.15s; transform-origin: 50% 100%; }
.tf-inner { animation: torchFlicker 0.55s ease-in-out infinite 0.25s; transform-origin: 50% 100%; }

/* ── Campfire Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.45; }
}

#fire-light {
  animation: glowPulse 1.5s ease-in-out infinite;
}