/* Royal Maple Glow Theme - Custom CSS */
/* Keyframes & Animations */

@keyframes particle-float {
  0%,
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) translateX(10px) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40px) translateX(-5px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-20px) translateX(-10px) scale(1.05);
    opacity: 0.7;
  }
}

@keyframes tilt-swing {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

@keyframes golden-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.7);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Animation Classes */
.particle {
  animation: particle-float 6s ease-in-out infinite;
}

.particle-delay-1 {
  animation-delay: 0.5s;
}

.particle-delay-2 {
  animation-delay: 1s;
}

.particle-delay-3 {
  animation-delay: 1.5s;
}

.particle-delay-4 {
  animation-delay: 2s;
}

.tilt-animate {
  animation: tilt-swing 4s ease-in-out infinite;
}

.golden-glow {
  animation: golden-pulse 3s ease-in-out infinite;
}

.shimmer-text {
  background: linear-gradient(90deg, #d4af37 0%, #f5e6a3 25%, #d4af37 50%, #f5e6a3 75%, #d4af37 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

.fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* Prose Styling for Markdown Content */
.prose {
  color: #fef3e2;
  line-height: 1.75;
  max-width: 100%;
}

.prose h2 {
  color: #d4af37;
  font-size: 1.875em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.prose h3 {
  color: #f5e6a3;
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}

.prose h4 {
  color: #e8d5b0;
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose a {
  color: #d4af37;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: #f5e6a3;
}

.prose strong {
  color: #f5e6a3;
  font-weight: 600;
}

.prose em {
  color: #e8d5b0;
  font-style: italic;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.375em;
}

.prose li::marker {
  color: #d4af37;
}

.prose blockquote {
  border-left: 4px solid #d4af37;
  padding-left: 1.5em;
  margin: 1.5em 0;
  background: rgba(139, 0, 0, 0.2);
  padding: 1em 1.5em;
  border-radius: 0 0.5em 0.5em 0;
  font-style: italic;
  color: #e8d5b0;
}

.prose code {
  background: rgba(139, 0, 0, 0.3);
  color: #f5e6a3;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  font-size: 0.875em;
}

.prose pre {
  background: rgba(30, 10, 10, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 0.5em;
  padding: 1em;
  overflow-x: auto;
  margin: 1.5em 0;
}

.prose pre code {
  background: transparent;
  padding: 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75em;
  margin: 2em auto;
  display: block;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.prose hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  margin: 3em 0;
}

/* Table Responsive Wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}

.prose table {
  width: 100%;
  min-width: 28em;
  border-collapse: collapse;
  background: rgba(30, 10, 10, 0.6);
  border-radius: 0.5em;
  overflow: hidden;
}

.prose thead {
  background: linear-gradient(135deg, #8b0000, #5c0000);
}

.prose th {
  color: #d4af37;
  font-weight: 600;
  text-align: left;
  padding: 1em;
  border-bottom: 2px solid #d4af37;
  white-space: nowrap;
}

.prose td {
  padding: 1em;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  color: #fef3e2;
}

.prose tbody tr:hover {
  background: rgba(139, 0, 0, 0.3);
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

/* Component Overrides */
.btn-primary {
  background: linear-gradient(135deg, #d4af37 0%, #b8942d 100%);
  color: #1a0505;
  font-weight: 700;
  padding: 1em 2em;
  border-radius: 0.5em;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f5e6a3 0%, #d4af37 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
  background: transparent;
  color: #d4af37;
  font-weight: 600;
  padding: 1em 2em;
  border-radius: 0.5em;
  border: 2px solid #d4af37;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #f5e6a3;
  color: #f5e6a3;
}

/* Card Styles */
.card-royal {
  background: linear-gradient(145deg, rgba(60, 20, 20, 0.9), rgba(30, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 1em;
  transition: all 0.3s ease;
}

.card-royal:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* SVG Patterns */
.pattern-maple {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 20 L45 15 L40 25 L55 30 L40 35 L45 45 L35 40 L30 55 L25 40 L15 45 L20 35 L5 30 L20 25 L15 15 L25 20 Z' fill='rgba(212,175,55,0.03)' /%3E%3C/svg%3E");
}

.pattern-dots {
  background-image: radial-gradient(rgba(212, 175, 55, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.pattern-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(212, 175, 55, 0.03) 0,
    rgba(212, 175, 55, 0.03) 1px,
    transparent 1px,
    transparent 20px
  );
}

/* Gradient Backgrounds */
.bg-royal-gradient {
  background: linear-gradient(180deg, #1a0505 0%, #2d0a0a 50%, #1a0505 100%);
}

.bg-royal-dark {
  background: linear-gradient(135deg, #0d0202 0%, #1a0505 100%);
}

/* Text Gradients */
.text-gradient-gold {
  background: linear-gradient(135deg, #d4af37, #f5e6a3, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1a0505;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b0000, #5c0000);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a00000, #700000);
}

/* Mobile Navigation */
.nav-mobile-menu {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-mobile-menu.hidden {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.nav-mobile-menu.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Game Card Hover */
.game-card {
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: scale(1.05);
}

.game-card:hover .game-overlay {
  opacity: 1;
}

.game-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Badge Styling */
.badge-18plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  background: #8b0000;
  border: 2px solid #d4af37;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875em;
  color: #d4af37;
}

/* Step Numbers */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  background: linear-gradient(135deg, #d4af37, #b8942d);
  color: #1a0505;
  font-weight: 700;
  font-size: 1.25em;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Focus States */
a:focus,
button:focus {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: rgba(212, 175, 55, 0.3);
  color: #fef3e2;
}

/* FAQ Accordion */
.faq-item summary {
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary .faq-icon {
  transform: rotate(180deg);
}

.faq-icon {
  transition: transform 0.3s ease;
}

/* Provider Cloud */
.provider-tag {
  display: inline-block;
  padding: 0.5em 1em;
  background: rgba(139, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 2em;
  font-size: 0.875em;
  color: #e8d5b0;
  transition: all 0.2s ease;
}

.provider-tag:hover {
  background: rgba(139, 0, 0, 0.5);
  border-color: rgba(212, 175, 55, 0.4);
  color: #d4af37;
}

/* Particles Container */
.particles-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.8), transparent);
  border-radius: 50%;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .prose h2 {
    font-size: 1.5em;
  }

  .prose h3 {
    font-size: 1.25em;
  }

  .prose table {
    font-size: 0.875em;
  }

  .prose th,
  .prose td {
    padding: 0.75em;
  }
}

@media (max-width: 480px) {
  .prose {
    font-size: 0.9375em;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.875em 1.5em;
    font-size: 0.875em;
  }
}