/* ============================================
   GLORION777 - Triple Seven Radiance Theme
   Custom CSS: Keyframes, Prose, Overrides
   ============================================ */

/* === CSS Custom Properties === */
:root {
  --gold-glow: #ffd700;
  --seven-red: #e63946;
  --deep-purple: #1a0a2e;
  --royal-purple: #2d1b4e;
  --neon-cyan: #00f5ff;
  --lucky-green: #00c853;
  --soft-white: #f8f9fa;
  --muted-gold: #c9a227;
}

/* === Keyframe Animations === */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 1rem var(--gold-glow), 0 0 2rem rgba(255, 215, 0, 0.4);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 2rem var(--gold-glow), 0 0 4rem rgba(255, 215, 0, 0.6);
    filter: brightness(1.1);
  }
}

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

@keyframes float-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
}

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

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

@keyframes shimmer {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes neon-flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 0.25rem var(--gold-glow), 0 0 0.5rem var(--gold-glow), 0 0 1rem var(--muted-gold);
  }
  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

/* === Animation Utility Classes === */
.animate-marquee {
  animation: marquee 25s linear infinite;
}

.animate-marquee-reverse {
  animation: marquee-reverse 25s linear infinite;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-seven-shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: seven-shine 3s ease-in-out infinite;
}

.animate-float {
  animation: float-up 3s ease-in-out infinite;
}

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

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

.animate-neon {
  animation: neon-flicker 4s ease-in-out infinite;
}

/* === Parallax Effect === */
.parallax-container {
  perspective: 100rem;
  overflow: hidden;
}

.parallax-slow {
  transform: translateZ(-2rem) scale(1.2);
  will-change: transform;
}

.parallax-medium {
  transform: translateZ(-1rem) scale(1.1);
  will-change: transform;
}

/* === Seven Pattern SVG Background === */
.seven-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ctext x='30' y='35' font-size='24' fill='%23ffd700' fill-opacity='0.08' text-anchor='middle' font-family='Arial Black'%3E7%3C/text%3E%3C/svg%3E");
}

.diamond-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='none' stroke='%23ffd700' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  background: var(--deep-purple);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-glow), var(--muted-gold));
  border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-glow);
}

/* === Table Responsive Wrapper === */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

.table-responsive table {
  min-width: 100%;
  border-collapse: collapse;
}

/* === Prose Styling for Markdown Content === */
.prose {
  color: var(--soft-white);
  line-height: 1.75;
  max-width: 100%;
}

.prose h2 {
  color: var(--gold-glow);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 0.125rem solid rgba(255, 215, 0, 0.3);
  text-shadow: 0 0 1rem rgba(255, 215, 0, 0.3);
}

.prose h3 {
  color: var(--neon-cyan);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.75em;
}

.prose h4 {
  color: var(--soft-white);
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-bottom: 1.25em;
  color: rgba(248, 249, 250, 0.9);
}

.prose a {
  color: var(--gold-glow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.prose a:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 0.5rem var(--neon-cyan);
}

.prose strong {
  color: var(--gold-glow);
  font-weight: 600;
}

.prose em {
  color: rgba(248, 249, 250, 0.95);
  font-style: italic;
}

.prose blockquote {
  border-left: 0.25rem solid var(--gold-glow);
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: rgba(255, 215, 0, 0.05);
  border-radius: 0 0.5rem 0.5rem 0;
  color: rgba(248, 249, 250, 0.9);
}

.prose blockquote p {
  margin-bottom: 0;
}

.prose ul {
  list-style: none;
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.prose ul li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

.prose ul li::before {
  content: "⬥";
  position: absolute;
  left: -1.25em;
  color: var(--gold-glow);
}

.prose ol {
  list-style: none;
  padding-left: 1.5em;
  margin-bottom: 1.5em;
  counter-reset: prose-counter;
}

.prose ol li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
  counter-increment: prose-counter;
}

.prose ol li::before {
  content: counter(prose-counter) ".";
  position: absolute;
  left: -1.5em;
  color: var(--gold-glow);
  font-weight: 700;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
}

.prose thead {
  background: linear-gradient(135deg, var(--royal-purple), var(--deep-purple));
}

.prose th {
  color: var(--gold-glow);
  font-weight: 600;
  padding: 0.875em 1em;
  text-align: left;
  border-bottom: 0.125rem solid var(--gold-glow);
  white-space: nowrap;
}

.prose td {
  padding: 0.875em 1em;
  border-bottom: 0.0625rem solid rgba(255, 215, 0, 0.15);
  color: rgba(248, 249, 250, 0.9);
}

.prose tbody tr {
  transition: background-color 0.2s ease;
}

.prose tbody tr:hover {
  background: rgba(255, 215, 0, 0.05);
}

.prose code {
  background: rgba(255, 215, 0, 0.1);
  color: var(--neon-cyan);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose pre {
  background: rgba(26, 10, 46, 0.8);
  border: 0.0625rem solid rgba(255, 215, 0, 0.2);
  border-radius: 0.5rem;
  padding: 1.25em;
  overflow-x: auto;
  margin: 1.5em 0;
}

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

.prose hr {
  border: none;
  height: 0.0625rem;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
  margin: 2.5em 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5em 0;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

/* === Button Hover Effects === */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-glow), var(--muted-gold));
  color: var(--deep-purple);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(255, 215, 0, 0.4);
}

.btn-secondary {
  background: transparent;
  border: 0.125rem solid var(--gold-glow);
  color: var(--gold-glow);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: var(--gold-glow);
  color: var(--deep-purple);
  box-shadow: 0 0 1rem rgba(255, 215, 0, 0.5);
}

/* === Card Hover Effects === */
.game-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-0.5rem) scale(1.02);
  box-shadow: 0 1rem 2.5rem rgba(255, 215, 0, 0.2);
}

/* === Gradient Text === */
.gradient-text {
  background: linear-gradient(135deg, var(--gold-glow), var(--neon-cyan), var(--gold-glow));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Glow Border Effect === */
.glow-border {
  position: relative;
}

.glow-border::after {
  content: "";
  position: absolute;
  inset: -0.125rem;
  background: linear-gradient(135deg, var(--gold-glow), var(--seven-red), var(--neon-cyan), var(--gold-glow));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-border:hover::after {
  opacity: 1;
}

/* === Lucky Seven Badge === */
.lucky-badge {
  position: relative;
}

.lucky-badge::before {
  content: "777";
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--deep-purple);
  background: var(--gold-glow);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
}

/* === Focus States for Accessibility === */
a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--neon-cyan);
  outline-offset: 0.125rem;
}

/* === Mobile Navigation === */
@media (max-width: 63.9375rem) {
  .mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

  .mobile-menu.active {
    transform: translateX(0);
  }
}

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

/* === Selection Styling === */
::selection {
  background: var(--gold-glow);
  color: var(--deep-purple);
}

/* === Loading Skeleton === */
.skeleton {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 25%, rgba(255, 215, 0, 0.2) 50%, rgba(255, 215, 0, 0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}