/* =============================================================================
   SHEAR MADNESS - RPG VISUAL EFFECTS (CSS-ONLY SOLUTIONS)
   =============================================================================
   These effects require ZERO image assets - pure CSS
   ============================================================================= */

/* =============================================================================
   NIGHT MODE SYSTEM
   ============================================================================= */

/* Night mode base - darkens entire game board */
.night-mode #game-board {
  filter: brightness(0.3) saturate(0.7);
  transition: filter 1s ease;
}

/* Spotlight around Jax - uses CSS custom properties for position */
.night-mode #game-board::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 100px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 30, 0.7) 70%,
    rgba(0, 0, 20, 0.95) 100%
  );
  pointer-events: none;
  z-index: 500;
  transition: background 0.3s ease;
}

/* Larger spotlight when Jax has lantern upgrade */
.night-mode.has-lantern #game-board::after {
  background: radial-gradient(
    circle 150px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 30, 0.6) 75%,
    rgba(0, 0, 20, 0.9) 100%
  );
}

/* Enemy red eyes visible in darkness */
.night-mode .entity.enemy::before {
  content: '👀';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  filter: hue-rotate(320deg) brightness(1.5) saturate(2);
  animation: eyeGlow 1.5s ease-in-out infinite alternate;
  z-index: 510;
}

@keyframes eyeGlow {
  0% { opacity: 0.6; filter: hue-rotate(320deg) brightness(1.5); }
  100% { opacity: 1; filter: hue-rotate(340deg) brightness(2); }
}

/* Rose glow at night */
.night-mode .entity.rose::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(255, 100, 150, 0.3) 0%, transparent 70%);
  animation: roseGlow 2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes roseGlow {
  0% { opacity: 0.5; transform: scale(0.9); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

/* Firefly particles (spawn via JavaScript, animate via CSS) */
.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ffff99 0%, #ffcc00 50%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 520;
  animation: fireflyFloat var(--fly-duration, 8s) ease-in-out infinite;
  opacity: 0;
}

@keyframes fireflyFloat {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  25% {
    transform: translate(var(--fly-x1, 30px), var(--fly-y1, -20px));
    opacity: 1;
  }
  50% {
    transform: translate(var(--fly-x2, -20px), var(--fly-y2, -40px));
    opacity: 0.6;
  }
  75% {
    transform: translate(var(--fly-x3, 10px), var(--fly-y3, -10px));
    opacity: 1;
  }
  90% { opacity: 0.4; }
}

/* Firefly glow pulse */
.firefly::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(255, 255, 100, 0.4) 0%, transparent 70%);
  animation: fireflyPulse 0.8s ease-in-out infinite alternate;
}

@keyframes fireflyPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 1; }
}

/* =============================================================================
   PORTRAIT EXPRESSION FILTERS (CSS-based, no extra images needed)
   ============================================================================= */

/* Base portrait container */
.character-portrait {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  transition: filter 0.3s ease, transform 0.2s ease;
}

.character-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Expression variants - apply to portrait container */
.portrait-happy {
  filter: brightness(1.1) saturate(1.3);
}

.portrait-angry {
  filter: hue-rotate(-10deg) contrast(1.2) saturate(1.3);
}
.portrait-angry img {
  transform: scale(1.05);
}

.portrait-sad {
  filter: saturate(0.5) brightness(0.85);
}

.portrait-surprised {
  filter: brightness(1.15) contrast(1.1);
  transform: scale(1.08);
}

.portrait-exhausted {
  filter: saturate(0.6) brightness(0.75) contrast(0.9);
}

.portrait-frustrated {
  filter: hue-rotate(-5deg) saturate(1.2) contrast(1.15);
}
.portrait-frustrated img {
  animation: frustrationShake 0.3s ease-in-out;
}

@keyframes frustrationShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.portrait-confused {
  filter: saturate(0.9);
}
.portrait-confused img {
  transform: rotate(-5deg);
}

.portrait-proud {
  filter: brightness(1.15) saturate(1.2);
  transform: scale(1.05);
}

.portrait-embarrassed {
  filter: hue-rotate(10deg) saturate(1.4) brightness(1.05);
}

/* =============================================================================
   SPEECH BUBBLES (Pure CSS - No Images)
   ============================================================================= */

/* Base speech bubble */
.speech-bubble-css {
  position: absolute;
  background: white;
  border: 3px solid #333;
  border-radius: 20px;
  padding: 12px 16px;
  max-width: 280px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  z-index: 600;
  transform: translateX(-50%);
}

/* Speech bubble tail (pointing down) */
.speech-bubble-css::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 30px;
  border: 12px solid transparent;
  border-top-color: #333;
}

.speech-bubble-css::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 33px;
  border: 9px solid transparent;
  border-top-color: white;
  z-index: 1;
}

/* Character color themes */
.speech-bubble-css.jax {
  border-color: #4ade80;
  background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%);
}
.speech-bubble-css.jax::after { border-top-color: #4ade80; }
.speech-bubble-css.jax::before { border-top-color: #dcfce7; }

.speech-bubble-css.shannon {
  border-color: #60a5fa;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.speech-bubble-css.shannon::after { border-top-color: #60a5fa; }
.speech-bubble-css.shannon::before { border-top-color: #dbeafe; }

.speech-bubble-css.quinlan {
  border-color: #a78bfa;
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
}
.speech-bubble-css.quinlan::after { border-top-color: #a78bfa; }
.speech-bubble-css.quinlan::before { border-top-color: #ede9fe; }

.speech-bubble-css.seamus {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.speech-bubble-css.seamus::after { border-top-color: #fbbf24; }
.speech-bubble-css.seamus::before { border-top-color: #fef3c7; }

.speech-bubble-css.enemy {
  border-color: #f87171;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}
.speech-bubble-css.enemy::after { border-top-color: #f87171; }
.speech-bubble-css.enemy::before { border-top-color: #fee2e2; }

/* Thought bubble variant */
.speech-bubble-css.thought {
  border-style: dashed;
  border-radius: 50%;
  padding: 16px 20px;
}

.speech-bubble-css.thought::after,
.speech-bubble-css.thought::before {
  display: none;
}

.speech-bubble-css.thought .thought-tail {
  position: absolute;
  bottom: -25px;
  left: 25px;
}

.speech-bubble-css.thought .thought-tail::before,
.speech-bubble-css.thought .thought-tail::after {
  content: '';
  position: absolute;
  background: white;
  border: 2px dashed #333;
  border-radius: 50%;
}

.speech-bubble-css.thought .thought-tail::before {
  width: 12px;
  height: 12px;
  bottom: 8px;
  left: 0;
}

.speech-bubble-css.thought .thought-tail::after {
  width: 8px;
  height: 8px;
  bottom: 0;
  left: 8px;
}

/* Shout bubble variant */
.speech-bubble-css.shout {
  border-width: 4px;
  border-color: #ef4444;
  background: #fff5f5;
  font-weight: bold;
  text-transform: uppercase;
  animation: shoutPulse 0.5s ease-in-out infinite alternate;
}

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

/* =============================================================================
   ENVIRONMENTAL EFFECTS (CSS-Only)
   ============================================================================= */

/* Pool water shimmer */
.pool-water {
  background: linear-gradient(
    135deg,
    #40a0c0 0%,
    #60c0e0 25%,
    #40a0c0 50%,
    #60c0e0 75%,
    #40a0c0 100%
  );
  background-size: 200% 200%;
  animation: waterShimmer 4s ease-in-out infinite;
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}

@keyframes waterShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Pool light reflection spots */
.pool-water::before {
  content: '';
  position: absolute;
  width: 30%;
  height: 20%;
  top: 20%;
  left: 30%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 70%);
  animation: reflectionMove 6s ease-in-out infinite;
}

@keyframes reflectionMove {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(20%, 10%) scale(1.2); opacity: 0.6; }
}

/* Fire pit flames (CSS only) */
.fire-effect {
  position: relative;
  width: 48px;
  height: 64px;
}

.fire-effect .flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 40px;
  background: linear-gradient(to top, #ff4500 0%, #ff8c00 40%, #ffd700 70%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flameFlicker 0.3s ease-in-out infinite alternate;
}

.fire-effect .flame:nth-child(2) {
  width: 14px;
  height: 30px;
  left: 30%;
  animation-delay: 0.1s;
  opacity: 0.8;
}

.fire-effect .flame:nth-child(3) {
  width: 14px;
  height: 30px;
  left: 70%;
  animation-delay: 0.2s;
  opacity: 0.8;
}

@keyframes flameFlicker {
  0% {
    transform: translateX(-50%) scaleY(1) scaleX(1);
    filter: brightness(1);
  }
  100% {
    transform: translateX(-50%) scaleY(1.1) scaleX(0.9);
    filter: brightness(1.2);
  }
}

/* Fire glow */
.fire-effect::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(255, 150, 50, 0.4) 0%, transparent 70%);
  animation: glowPulse 1s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* =============================================================================
   WEATHER EFFECTS (CSS-Only)
   ============================================================================= */

/* Rain container */
.weather-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 400;
}

/* Individual raindrop */
.raindrop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: linear-gradient(to bottom, transparent 0%, rgba(150, 200, 255, 0.6) 100%);
  animation: rainFall var(--rain-duration, 0.5s) linear infinite;
  animation-delay: var(--rain-delay, 0s);
  left: var(--rain-x, 50%);
}

@keyframes rainFall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Rain splash on ground */
.rain-splash {
  position: absolute;
  width: 8px;
  height: 4px;
  background: radial-gradient(ellipse, rgba(150, 200, 255, 0.5) 0%, transparent 100%);
  animation: splashFade 0.3s ease-out forwards;
}

@keyframes splashFade {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Heat shimmer overlay */
.weather-heat {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(255, 200, 150, 0.1) 50%,
    transparent 100%
  );
  animation: heatWave 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 400;
}

@keyframes heatWave {
  0%, 100% { transform: scaleY(1); opacity: 0.3; }
  50% { transform: scaleY(1.02); opacity: 0.5; }
}

/* Cloud shadow */
.cloud-shadow {
  position: absolute;
  width: 200px;
  height: 100px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
  animation: cloudDrift 30s linear infinite;
  pointer-events: none;
  z-index: 350;
}

@keyframes cloudDrift {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 100%)); }
}

/* =============================================================================
   STARFIELD / NIGHT SKY (CSS-Only)
   ============================================================================= */

.starfield {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #0a0a20 0%, #1a1a40 50%, #2a2a50 100%);
  overflow: hidden;
}

/* Stars via box-shadow - place on a 1px element */
.stars-layer {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  /* Generate many shadows for stars */
  box-shadow:
    50px 30px 0 0 rgba(255,255,255,0.8),
    120px 80px 0 0 rgba(255,255,255,0.6),
    200px 45px 0 1px rgba(255,255,200,1),
    300px 120px 0 0 rgba(255,255,255,0.7),
    400px 60px 0 0 rgba(255,255,255,0.5),
    500px 150px 0 1px rgba(255,255,200,0.9),
    80px 200px 0 0 rgba(255,255,255,0.6),
    180px 180px 0 0 rgba(255,255,255,0.8),
    250px 220px 0 1px rgba(200,200,255,1),
    350px 250px 0 0 rgba(255,255,255,0.7),
    450px 200px 0 0 rgba(255,255,255,0.5),
    550px 280px 0 0 rgba(255,255,255,0.6),
    30px 300px 0 0 rgba(255,255,255,0.7),
    150px 350px 0 1px rgba(255,200,200,0.9),
    270px 320px 0 0 rgba(255,255,255,0.6),
    380px 380px 0 0 rgba(255,255,255,0.8),
    480px 340px 0 0 rgba(255,255,255,0.5);
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Shooting star */
.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, white 50%, rgba(255,255,200,0.8) 100%);
  transform: rotate(-45deg);
  animation: shootingStar 1s ease-out forwards;
  opacity: 0;
}

@keyframes shootingStar {
  0% {
    transform: rotate(-45deg) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform: rotate(-45deg) translateX(300px);
    opacity: 0;
  }
}

/* =============================================================================
   DAMAGE NUMBERS (Enhanced with web font)
   ============================================================================= */

.damage-number-css {
  position: absolute;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #ff4444;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 700;
  animation: damageFloat 0.8s ease-out forwards;
}

@keyframes damageFloat {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translateY(-10px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-40px) scale(1);
    opacity: 0;
  }
}

.damage-number-css.heal {
  color: #4ade80;
}

.damage-number-css.crit {
  color: #ffd700;
  font-size: 18px;
  animation: critFloat 0.8s ease-out forwards;
}

@keyframes critFloat {
  0% {
    transform: translateY(0) scale(0.5) rotate(-10deg);
    opacity: 0;
  }
  20% {
    transform: translateY(-15px) scale(1.5) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scale(1) rotate(0deg);
    opacity: 0;
  }
}

/* =============================================================================
   EMOTE ANIMATIONS (Character reactions)
   ============================================================================= */

.entity.emote-shake {
  animation: emoteShake 0.4s ease-in-out;
}

@keyframes emoteShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-50%, -50%) rotate(-5deg) translateX(-3px); }
  75% { transform: translate(-50%, -50%) rotate(5deg) translateX(3px); }
}

.entity.emote-jump {
  animation: emoteJump 0.5s ease-out;
}

@keyframes emoteJump {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  40% { transform: translate(-50%, -50%) translateY(-15px); }
  60% { transform: translate(-50%, -50%) translateY(-12px); }
}

.entity.emote-nod {
  animation: emoteNod 0.4s ease-in-out;
}

@keyframes emoteNod {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  50% { transform: translate(-50%, -50%) rotate(10deg); }
}

.entity.emote-spin {
  animation: emoteSpin 0.6s ease-in-out;
}

@keyframes emoteSpin {
  0% { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.entity.emote-bounce {
  animation: emoteBounce 0.6s ease-in-out;
}

@keyframes emoteBounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25% { transform: translate(-50%, -50%) scale(1.1) translateY(-5px); }
  50% { transform: translate(-50%, -50%) scale(0.95); }
  75% { transform: translate(-50%, -50%) scale(1.05) translateY(-3px); }
}

/* =============================================================================
   UI UTILITY CLASSES
   ============================================================================= */

/* Cooldown overlay for buttons */
.cooldown-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(0, 0, 0, 0.7) var(--cooldown-percent, 100%),
    transparent var(--cooldown-percent, 100%)
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Highlight pulse for interactive objects */
.highlight-pulse {
  animation: highlightPulse 1.5s ease-in-out infinite;
}

@keyframes highlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }
}

/* Tutorial arrow indicator */
.tutorial-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #ffd700;
  animation: arrowBounce 0.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}