/* The Road to Doom - Custom Styles & Effects */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --doom-bg: #060a08;
  --doom-dark: #090e0b;
  --doom-card: #0e1612;
  --doom-card-hover: #13201a;
  --doom-border: #1a2c22;
  --doom-border-glow: #22c55e;
  --doom-green: #10b981;
  --doom-green-bright: #4ade80;
  --doom-green-glow: rgba(74, 222, 128, 0.25);
  --doom-gold: #f59e0b;
  --doom-gold-glow: rgba(245, 158, 11, 0.3);
  --doom-muted: #7d9688;
  --foreground: #ecfdf5;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--doom-bg);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(5, 150, 105, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(245, 158, 11, 0.03) 0%, transparent 40%);
  background-attachment: fixed;
}

.doom-display {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.03em;
}

.doom-title {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}

/* Ambient glow & vignette */
.doom-ambient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 10%, rgba(34, 197, 94, 0.06), transparent 70%);
  z-index: 0;
}

.doom-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
  z-index: 1;
}

/* Text glow */
.doom-text-glow {
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.4), 0 0 35px rgba(74, 222, 128, 0.2);
}

.doom-gold-glow {
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.4), 0 0 35px rgba(245, 158, 11, 0.2);
}

/* Glass & Card Styles */
.doom-card {
  background: rgba(14, 22, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--doom-border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.doom-card:hover {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(74, 222, 128, 0.1);
  background: rgba(19, 32, 26, 0.85);
}

/* Holographic Ticket Stub */
.ticket-stub {
  background: linear-gradient(135deg, #0e1713 0%, #15241d 50%, #0c1410 100%);
  border: 1px solid rgba(74, 222, 128, 0.3);
  position: relative;
  overflow: hidden;
}

.ticket-stub::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(74, 222, 128, 0.05) 30%,
    rgba(245, 158, 11, 0.1) 45%,
    rgba(147, 51, 234, 0.08) 55%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: transform 0.75s ease;
  pointer-events: none;
}

.ticket-stub:hover::before {
  transform: skewX(-20deg) translateX(50%);
}

.ticket-notch-left, .ticket-notch-right {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background-color: var(--doom-bg);
  border-radius: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--doom-border);
  z-index: 5;
}

.ticket-notch-left {
  left: -8px;
}

.ticket-notch-right {
  right: -8px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #060a08;
}

::-webkit-scrollbar-thumb {
  background: #1a2c22;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #274535;
}

/* Custom badge glow */
.badge-unlocked {
  border-color: rgba(74, 222, 128, 0.7) !important;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, rgba(14, 22, 18, 0.9) 100%) !important;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

.badge-gold {
  border-color: rgba(245, 158, 11, 0.7) !important;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.18) 0%, rgba(20, 18, 12, 0.95) 100%) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.25);
}

/* Spoilers Blur Toggle */
.spoilers-hidden .spoiler-text {
  filter: blur(5px);
  user-select: none;
  transition: filter 0.2s ease;
  cursor: pointer;
}

.spoilers-hidden .spoiler-text:hover {
  filter: blur(2px);
}

/* Animation Utilities */
@keyframes doomPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.animate-doom-pulse {
  animation: doomPulse 4s ease-in-out infinite;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

.scanline-effect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}