/**
 * ═══════════════════════════════════════════════════════════════
 *  world.css — Map Skin Styling
 *  All per-skin visual overrides (body background, skin-specific
 *  card theming, and skin-exclusive effects like Beach sun rays).
 *  Companion to world.js (SKIN_CONFIGS drives the 3D side; this
 *  file drives the 2D/CSS side of the same skins).
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── BEACH SUNSET MAP SKIN ─────────────────────────────────── */
body.skin-beach {
  background: linear-gradient(180deg,
    #0d0a1a 0%,
    #3d1a2e 30%,
    #7a2d1a 65%,
    #4a1a0a 100%
  );
}

body.skin-beach::before {
  /* Soften scanlines on bright backgrounds */
  opacity: 0.4;
}

body.skin-beach::after {
  /* Warmer vignette */
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    transparent 50%,
    rgba(26,10,46,0.55) 100%
  );
}

/* Beach Sunset map card theming */
.map-card[data-skin="beach"].active {
  border-color: rgba(244,162,97,0.45);
  background: rgba(244,162,97,0.08);
  box-shadow: 0 0 16px rgba(244,162,97,0.1);
}
.map-card[data-skin="beach"]:hover {
  border-color: rgba(244,162,97,0.25);
  background: rgba(244,162,97,0.05);
}

/* Beach-specific override for the coming-soon hover state
   (has to match the generic rule's specificity in style.css) */
.map-card[data-skin="beach"].coming-soon-card:hover {
  border-color: rgba(255,255,255,0.05) !important;
  background: rgba(255,255,255,0.02) !important;
  box-shadow: none !important;
}

/* ── Sun Ray overlay (Beach Sunset only) ────────────────────── */
#sun-rays {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  display: none;
  overflow: hidden;
}

body.skin-beach #sun-rays {
  display: block;
}

/* Central sun glow */
#sun-rays::before {
  content: '';
  position: absolute;
  top: 18%;
  left: 72%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle,
    rgba(255, 255, 200, 0.95) 0%,
    rgba(255, 200, 60, 0.7)   18%,
    rgba(255, 120, 20, 0.35)  40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: sunPulse 3s ease-in-out infinite;
  filter: blur(2px);
}

/* Crepuscular rays burst */
#sun-rays::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 72%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 0;
  height: 0;
  background: transparent;
  box-shadow: none;
  /* Rays are painted via repeating-conic-gradient */
  width: 200vmax;
  height: 200vmax;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 160, 30, 0.13) 0deg,
    rgba(255, 160, 30, 0.0)  6deg,
    rgba(255, 200, 80, 0.09) 9deg,
    rgba(255, 200, 80, 0.0)  14deg
  );
  border-radius: 50%;
  animation: raysRotate 18s linear infinite;
  filter: blur(1px);
}

/* Lens flare streak */
.sun-flare {
  position: absolute;
  top: 18%;
  left: 72%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 210, 80, 0.0)  20%,
    rgba(255, 210, 80, 0.55) 50%,
    rgba(255, 180, 40, 0.0)  80%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(1.5px);
  animation: flareFlicker 4s ease-in-out infinite;
  transform-origin: center;
}

.sun-flare:nth-child(2) {
  transform: translate(-50%, -50%) rotate(25deg);
  width: 420px;
  opacity: 0.7;
  animation-delay: 0.8s;
}

.sun-flare:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-18deg);
  width: 300px;
  opacity: 0.5;
  animation-delay: 1.6s;
}

/* Lens flare orb dots along the streak axis */
.sun-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 200, 60, 0.7) 0%,
    rgba(255, 120, 20, 0.2) 60%,
    transparent 100%
  );
  filter: blur(2px);
  animation: orbPulse 4s ease-in-out infinite;
}

.sun-orb:nth-child(4) { width: 60px;  height: 60px;  top: 55%; left: 32%; animation-delay: 0s;   opacity: 0.5; }
.sun-orb:nth-child(5) { width: 35px;  height: 35px;  top: 65%; left: 22%; animation-delay: 0.6s; opacity: 0.35; }
.sun-orb:nth-child(6) { width: 20px;  height: 20px;  top: 72%; left: 14%; animation-delay: 1.2s; opacity: 0.3; }

@keyframes sunPulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1);    }
  50%       { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes raysRotate {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes flareFlicker {
  0%, 100% { opacity: 0.9; }
  45%       { opacity: 0.6; }
  70%       { opacity: 1.0; }
}

@keyframes orbPulse {
  0%, 100% { opacity: inherit; transform: scale(1);    }
  50%       { opacity: 0.2;    transform: scale(1.15); }
}