/* ═══════════════════════════════════════════════════════════════════════════
   SOL VOL - DARK THEME EFFECTS
   Smoke, Glass, Glow, and Atmospheric Effects
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   BACKGROUND BASES
   ───────────────────────────────────────────────────────────────────────── */

/* Main dark background with subtle texture */
.bg-dark {
  background: var(--dark-950);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(20, 241, 149, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 120%, rgba(20, 241, 149, 0.05) 0%, transparent 50%);
}

/* Noise texture overlay for depth */
.bg-noise::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: var(--z-below);
}

/* Grid pattern background */
.bg-grid {
  background-image:
    linear-gradient(rgba(20, 241, 149, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 241, 149, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Perspective grid (for game board) */
.bg-grid-perspective {
  background-image:
    linear-gradient(rgba(20, 241, 149, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 241, 149, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center bottom;
}

/* ─────────────────────────────────────────────────────────────────────────
   GLOW EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

/* Ambient glow from bottom */
.glow-ambient {
  position: fixed;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 60%;
  background: radial-gradient(ellipse at center, var(--sol-green-glow) 0%, transparent 60%);
  opacity: 0.3;
  pointer-events: none;
  z-index: var(--z-below);
}

/* Top accent glow */
.glow-top {
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 241, 149, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: var(--z-below);
}

/* Pulse glow animation */
.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

/* ─────────────────────────────────────────────────────────────────────────
   GLASSMORPHISM COMPONENTS
   ───────────────────────────────────────────────────────────────────────── */

/* Standard glass panel */
.glass {
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
}

/* Glass with green tint */
.glass-green {
  background: rgba(20, 241, 149, 0.05);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(20, 241, 149, 0.15);
  border-radius: var(--radius-lg);
}

/* Frosted glass effect */
.glass-frosted {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

/* Glass card with hover effect */
.glass-card {
  background: rgba(22, 22, 22, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.glass-card:hover {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(20, 241, 149, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(20, 241, 149, 0.1);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────
   SMOKE & PARTICLE EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

/* Floating particles container */
.particles-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-below);
}

/* Individual particle */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sol-green);
  border-radius: 50%;
  opacity: 0.3;
  animation: particle-float 15s ease-in-out infinite;
  box-shadow: 0 0 6px var(--sol-green-glow);
}

@keyframes particle-float {
  0%, 100% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  50% {
    opacity: 0.2;
    transform: translateY(40vh) translateX(-20px) scale(0.8);
  }
  90% {
    opacity: 0.3;
    transform: translateY(-10vh) translateX(15px) scale(0.5);
  }
}

/* Smoke wisps */
.smoke-wisp {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(20, 241, 149, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: smoke-drift 20s ease-in-out infinite;
  filter: blur(40px);
}

@keyframes smoke-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(50px, -100px) scale(1.2);
    opacity: 0.4;
  }
  50% {
    transform: translate(-30px, -150px) scale(0.9);
    opacity: 0.2;
  }
  75% {
    transform: translate(20px, -80px) scale(1.1);
    opacity: 0.35;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   BORDERS & ACCENTS
   ───────────────────────────────────────────────────────────────────────── */

/* Glowing border */
.border-glow {
  position: relative;
}

.border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--sol-green) 0%, rgba(20, 241, 149, 0.3) 50%, var(--sol-green) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
}

.border-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark-800);
  border-radius: inherit;
  z-index: -1;
}

/* Animated gradient border */
.border-animated {
  position: relative;
  background: var(--dark-800);
  border-radius: var(--radius-lg);
}

.border-animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--sol-green), var(--sol-purple), var(--sol-cyan), var(--sol-green));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-rotate 4s linear infinite;
}

@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Corner accents */
.corner-accents {
  position: relative;
}

.corner-accents::before,
.corner-accents::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--sol-green);
  border-style: solid;
  opacity: 0.5;
}

.corner-accents::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.corner-accents::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCAN LINES & TECH OVERLAYS
   ───────────────────────────────────────────────────────────────────────── */

/* CRT scanlines effect */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  opacity: 0.3;
}

/* Tech grid overlay */
.tech-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 241, 149, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 241, 149, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT BEAMS & RAYS
   ───────────────────────────────────────────────────────────────────────── */

/* Spotlight effect */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 100%;
  background: conic-gradient(
    from 180deg at 50% 100%,
    transparent 0deg,
    rgba(20, 241, 149, 0.1) 45deg,
    transparent 90deg
  );
  transform: translateX(-50%);
  opacity: 0.5;
  pointer-events: none;
}

/* Radial burst */
.radial-burst {
  position: relative;
}

.radial-burst::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 30%,
    rgba(20, 241, 149, 0.05) 31%,
    transparent 32%,
    transparent 50%,
    rgba(20, 241, 149, 0.03) 51%,
    transparent 52%,
    transparent 70%,
    rgba(20, 241, 149, 0.02) 71%,
    transparent 72%
  );
  pointer-events: none;
  animation: burst-rotate 30s linear infinite;
}

@keyframes burst-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SURFACE MATERIALS
   ───────────────────────────────────────────────────────────────────────── */

/* Metallic surface */
.surface-metal {
  background: linear-gradient(
    145deg,
    var(--dark-600) 0%,
    var(--dark-700) 40%,
    var(--dark-600) 60%,
    var(--dark-800) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Carbon fiber pattern */
.surface-carbon {
  background-color: var(--dark-800);
  background-image:
    linear-gradient(45deg, var(--dark-700) 25%, transparent 25%),
    linear-gradient(-45deg, var(--dark-700) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--dark-700) 75%),
    linear-gradient(-45deg, transparent 75%, var(--dark-700) 75%);
  background-size: 4px 4px;
}

/* Hex pattern */
.surface-hex {
  background-color: var(--dark-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2314f195' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────────────────
   VIGNETTE EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

/* Standard vignette */
.vignette {
  position: relative;
}

.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}

/* Green tinted vignette */
.vignette-green::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 20, 10, 0.6) 100%
  );
}

/* ─────────────────────────────────────────────────────────────────────────
   HOLOGRAPHIC EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

/* Holographic shimmer */
.holo-shimmer {
  position: relative;
  overflow: hidden;
}

.holo-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(20, 241, 149, 0.1) 40%,
    rgba(0, 212, 255, 0.1) 50%,
    rgba(153, 69, 255, 0.1) 60%,
    transparent 70%
  );
  animation: holo-move 3s ease-in-out infinite;
}

@keyframes holo-move {
  0%, 100% { transform: translateX(-30%) translateY(-30%) rotate(45deg); }
  50% { transform: translateX(30%) translateY(30%) rotate(45deg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   STATUS INDICATORS
   ───────────────────────────────────────────────────────────────────────── */

/* Online/Active pulse */
.status-pulse {
  position: relative;
}

.status-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--sol-green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: status-ping 1.5s ease-out infinite;
}

@keyframes status-ping {
  0% {
    box-shadow: 0 0 0 0 var(--sol-green-glow);
  }
  70% {
    box-shadow: 0 0 0 15px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LEGACY COMPATIBILITY
   Keep old class names working with new theme
   ───────────────────────────────────────────────────────────────────────── */

/* Map old tavern classes to new dark theme */
.bg-tavern {
  background: var(--dark-950);
}

.panel-wood {
  background: rgba(17, 17, 17, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

.panel-leather {
  background: var(--dark-750);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
}

.panel-parchment {
  background: var(--dark-700);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.frame-wood,
.frame-gold {
  border: 2px solid rgba(20, 241, 149, 0.3);
  border-radius: var(--radius-lg);
}

/* Legacy button compatibility */
.btn-tavern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-tavern--primary {
  background: var(--sol-green);
  color: var(--dark-900);
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.3);
}

.btn-tavern--primary:hover {
  background: var(--sol-green-bright);
  box-shadow: 0 0 30px rgba(20, 241, 149, 0.5);
  transform: translateY(-2px);
}

.btn-tavern--secondary {
  background: transparent;
  color: var(--sol-green);
  border: 2px solid var(--sol-green);
}

.btn-tavern--secondary:hover {
  background: rgba(20, 241, 149, 0.1);
  box-shadow: 0 0 15px rgba(20, 241, 149, 0.3);
}

.btn-tavern--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-tavern--ghost:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-tavern--danger {
  background: var(--sol-red);
  color: var(--text-primary);
}

.btn-tavern--danger:hover {
  box-shadow: 0 0 20px var(--sol-red-glow);
}

.btn-tavern--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
}

.btn-tavern:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}