/* ============================================
   QUIZU DESIGN SYSTEM — Tokens & Base
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Color Tokens — Semantic */
  --color-primary:rgb(124,58,237);
  --color-primary-dark:rgb(109,40,217);
  --color-primary-light:rgb(167,119,252);
  --color-accent:rgb(245,158,11);
  --color-accent-light:rgb(252,211,77);
  --color-surface:rgb(255,255,255);
  --color-bg:rgb(10,10,15);
  --color-bg-elevated:rgb(18,18,28);
  --color-bg-card:rgb(22,22,35);
  --color-bg-card-hover:rgb(28,28,42);
  --color-text:rgb(240,240,245);
  --color-text-secondary:rgb(160,160,180);
  --color-text-muted:rgb(140,140,160);
  --color-border:rgb(40,40,60);
  --color-border-light:rgb(55,55,75);
  --color-white:rgb(255,255,255);
  --color-black:rgb(0,0,0);
  --color-gradient-1:rgb(124,58,237);
  --color-gradient-2:rgb(79,70,229);
  --color-gradient-3:rgb(236,72,153);
  --color-footer-bg:rgb(8,8,12);
  --color-footer-text:rgb(160,160,180);
  --color-footer-muted:rgb(80,80,100);
  --color-footer-border:rgb(35,35,55);
  --color-glow:rgba(124,58,237,.35);

  /* Typography Scale */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  --text-xs:.75rem;
  --text-sm:.85rem;
  --text-base:.95rem;
  --text-md:1.05rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:2rem;
  --text-3xl:clamp(2rem,5vw,3.25rem);
  --text-4xl:clamp(2.5rem,6vw,4.5rem);
  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-normal:1.6;

  /* Spacing Scale */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Border Radius */
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-full:999px;

  /* Shadows */
  --shadow:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);
  --shadow-md:0 4px 20px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2);
  --shadow-lg:0 10px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);
  --shadow-glow:0 0 30px var(--color-glow),0 0 60px rgba(124,58,237,.15);

  /* Transitions */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:.15s;
  --duration:.25s;
  --duration-slow:.5s;
  --duration-slower:.8s;

  /* Layout */
  --max-w:1200px;
  --header-h:52px;
}

/* ============================================
   Base & Reset
   ============================================ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--color-text);
  background:var(--color-bg);line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Focus States — Accessibility */
:focus-visible{
  outline:2px solid var(--color-primary-light);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
a:focus-visible{border-radius:var(--radius-sm)}

/* Noise texture removed — use a static noise PNG if needed for production */

/* ============================================
   Header
   ============================================ */
.site-header{
  background:rgba(10,10,15,.8);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--color-border);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6);
  display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
}
.logo{font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em;color:var(--color-white)}
.logo span{color:var(--color-accent)}
.nav-links{display:flex;gap:var(--space-6);align-items:center}
.nav-links a{
  font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);
  transition:color var(--duration) var(--ease-out);
}
.nav-links a:hover,.nav-links a.active{color:var(--color-white)}
.nav-cta{
  background:var(--color-primary);color:var(--color-white) !important;
  padding:var(--space-2) var(--space-5);border-radius:var(--radius);
  font-weight:600;transition:all var(--duration) var(--ease-out);
  box-shadow:0 0 20px rgba(124,58,237,.3);
}
.nav-cta:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-glow)}

/* ============================================
   Hero — Animated Gradient + Floating Orbs
   ============================================ */
.hero{
  position:relative;overflow:hidden;
  padding:var(--space-24) var(--space-6) var(--space-20);text-align:center;
  background:linear-gradient(135deg,var(--color-gradient-1) 0%,var(--color-gradient-2) 50%,var(--color-gradient-3) 100%);
  background-size:200% 200%;
  animation:heroGradient 8s ease infinite;
}
@keyframes heroGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.4;pointer-events:none;
  animation:float 6s ease-in-out infinite;
}
.hero::before{
  width:400px;height:400px;top:-100px;right:-100px;
  background:var(--color-gradient-3);
}
.hero::after{
  width:300px;height:300px;bottom:-80px;left:-80px;
  background:var(--color-accent);animation-delay:-3s;animation-duration:8s;
}
@keyframes float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-20px) scale(1.05)}
}
.hero-content{position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:600;color:var(--color-white);
  margin-bottom:var(--space-6);
  animation:fadeUp var(--duration-slower) var(--ease-out) both;
}
.hero-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--color-accent);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{
  font-size:var(--text-4xl);font-weight:800;letter-spacing:-.04em;
  line-height:var(--leading-tight);color:var(--color-white);
  margin-bottom:var(--space-4);
  animation:fadeUp var(--duration-slower) var(--ease-out) .1s both;
}
.hero h1 .gradient-text{
  background:linear-gradient(135deg,var(--color-accent-light),var(--color-accent),var(--color-gradient-3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{
  font-size:var(--text-lg);color:rgba(255,255,255,.8);
  max-width:550px;margin:0 auto var(--space-10);line-height:var(--leading-normal);
  animation:fadeUp var(--duration-slower) var(--ease-out) .2s both;
}
.hero-cats{
  display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;
  animation:fadeUp var(--duration-slower) var(--ease-out) .3s both;
}
.hero-cat{
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.85);
  cursor:pointer;transition:all var(--duration) var(--ease-out);
}
.hero-cat:hover{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);
  transform:translateY(-2px);color:var(--color-white);
}
.hero-cat.active{
  background:var(--color-white);color:var(--color-bg);
  border-color:var(--color-white);
  box-shadow:0 4px 20px rgba(255,255,255,.2);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* ============================================
   Section Headings
   ============================================ */
.section{max-width:var(--max-w);margin:0 auto;padding:var(--space-12) var(--space-6)}
.section-title{
  font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em;
  margin-bottom:var(--space-8);display:flex;align-items:center;gap:var(--space-3);
  color:var(--color-white);
}
.section-title .badge{
  background:linear-gradient(135deg,var(--color-accent),var(--color-gradient-3));
  color:var(--color-white);font-size:var(--text-xs);font-weight:700;
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);
  text-transform:uppercase;letter-spacing:.06em;
  animation:pulse 3s ease-in-out 3;
}

/* ============================================
   Quiz Grid — Bento-inspired
   ============================================ */
.quiz-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
}
.quiz-card{
  background:var(--color-bg-card);border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--color-border);
  transition:all var(--duration) var(--ease-out);
  cursor:pointer;text-decoration:none;display:flex;flex-direction:column;
  position:relative;
}
.quiz-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(236,72,153,.08));
  opacity:0;transition:opacity var(--duration) var(--ease-out);z-index:0;
  pointer-events:none;
}
.quiz-card:hover{
  transform:translateY(-6px);
  border-color:var(--color-border-light);
  box-shadow:var(--shadow-glow);
}
.quiz-card:hover::before{opacity:1}
.quiz-card:focus-visible{
  outline:2px solid var(--color-primary-light);outline-offset:3px;
}

/* Featured card — first in grid spans 2 cols */
.quiz-card.featured{grid-column:span 2}
.quiz-card.featured .quiz-card-img{aspect-ratio:2/1}
.quiz-card.featured .quiz-card-body h3{font-size:var(--text-xl)}

.quiz-card-img{
  position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--color-bg-elevated);
}
.quiz-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out);
}
.quiz-card:hover .quiz-card-img img{transform:scale(1.06)}
.quiz-card-type{
  position:absolute;top:var(--space-3);left:var(--space-3);
  background:rgba(10,10,15,.7);backdrop-filter:blur(8px);
  color:var(--color-white);font-size:var(--text-xs);font-weight:600;
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);
  text-transform:uppercase;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.08);
}
.quiz-card-body{
  padding:var(--space-5) var(--space-5) var(--space-6);
  flex:1;display:flex;flex-direction:column;position:relative;z-index:1;
}
.quiz-card-body h3{
  font-size:var(--text-md);font-weight:700;line-height:var(--leading-snug);
  margin-bottom:var(--space-2);color:var(--color-white);
}
.quiz-card-body p{
  font-size:var(--text-sm);color:var(--color-text-secondary);
  line-height:var(--leading-normal);margin-bottom:var(--space-3);flex:1;
}
.quiz-card-meta{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-xs);color:var(--color-text-muted);margin-top:auto;
}
.quiz-card-meta svg{width:14px;height:14px;flex-shrink:0;opacity:.6}
.quiz-card-cta{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--color-primary-light);font-size:var(--text-sm);font-weight:600;
  margin-top:var(--space-3);transition:gap var(--duration) var(--ease-out);
}
.quiz-card:hover .quiz-card-cta{gap:var(--space-3)}
.quiz-card-cta svg{width:16px;height:16px;transition:transform var(--duration) var(--ease-out)}
.quiz-card:hover .quiz-card-cta svg{transform:translateX(3px)}

/* ============================================
   Scroll Reveal Animations
   ============================================ */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity var(--duration-slower) var(--ease-out),transform var(--duration-slower) var(--ease-out);
}
.reveal.visible{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.21s}
.reveal:nth-child(5){transition-delay:.28s}
.reveal:nth-child(6){transition-delay:.35s}
.reveal:nth-child(7){transition-delay:.42s}
.reveal:nth-child(8){transition-delay:.49s}
.reveal:nth-child(9){transition-delay:.56s}
.reveal:nth-child(n+10){transition-delay:.6s}

/* ============================================
   Show More Button
   ============================================ */
.show-more-btn{
  display:block;margin:var(--space-8) auto 0;
  padding:var(--space-3) var(--space-8);
  background:transparent;border:1px solid var(--color-border-light);
  color:var(--color-text-muted);font-size:var(--text-sm);font-weight:600;
  border-radius:var(--radius-full);cursor:pointer;
  transition:background var(--duration) var(--ease-out),color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out);
}
.show-more-btn:hover{
  background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);
}

/* ============================================
   CTA Banner
   ============================================ */
.cta-banner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6) var(--space-12);
}
.cta-banner-inner{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--color-gradient-1),var(--color-gradient-2),var(--color-gradient-3));
  background-size:200% 200%;animation:heroGradient 8s ease infinite;
  padding:var(--space-12) var(--space-8);text-align:center;
  border:1px solid rgba(255,255,255,.1);
}
.cta-banner-inner h2{
  font-size:var(--text-2xl);font-weight:800;color:var(--color-white);
  margin-bottom:var(--space-3);letter-spacing:-.02em;
}
.cta-banner-inner p{
  font-size:var(--text-base);color:rgba(255,255,255,.8);margin-bottom:var(--space-8);
  max-width:450px;margin-left:auto;margin-right:auto;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--color-white);color:var(--color-bg);
  padding:var(--space-4) var(--space-8);border-radius:var(--radius-pill);
  font-size:var(--text-base);font-weight:700;
  transition:all var(--duration) var(--ease-spring);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.cta-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.cta-btn svg{width:18px;height:18px;transition:transform var(--duration) var(--ease-out)}
.cta-btn:hover svg{transform:translateX(3px)}

/* ============================================
   Quiz Page
   ============================================ */
.quiz-page-header{
  background:var(--color-bg);color:var(--color-white);
  padding:var(--space-3) var(--space-6) var(--space-2);
  border-bottom:3px solid var(--color-primary);
}
.quiz-page-header::before{display:none}
.quiz-page-inner{
  max-width:800px;margin:0 auto;
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
}
.quiz-page-breadcrumb{font-size:var(--text-xs);color:var(--color-text-muted)}
.quiz-page-breadcrumb a{
  color:var(--color-text-secondary);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--duration);
}
.quiz-page-breadcrumb a:hover{color:var(--color-primary-light)}
.quiz-page-header h1{
  font-size:var(--text-base);font-weight:700;letter-spacing:-.01em;
  margin:0;line-height:var(--leading-snug);color:var(--color-white);
}
.quiz-page-header .quiz-meta{
  font-size:var(--text-xs);color:var(--color-text-muted);
  display:flex;gap:var(--space-4);flex-wrap:wrap;margin-left:auto;
}
.quiz-embed-wrap{max-width:800px;margin:var(--space-3) auto;padding:0 var(--space-6)}
.quiz-embed-wrap .riddle2-wrapper{width:100% !important;max-width:100% !important}
.quiz-embed-wrap iframe{width:100%;border:0;border-radius:var(--radius-lg);min-height:500px}
.related-section{max-width:var(--max-w);margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-12)}
.related-section h2{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-5);color:var(--color-white)}

/* ============================================
   Category Hero
   ============================================ */
.category-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:var(--space-20) var(--space-6) var(--space-16);
  background:linear-gradient(135deg,var(--color-gradient-1) 0%,var(--color-gradient-2) 50%,var(--color-gradient-3) 100%);
  background-size:200% 200%;animation:heroGradient 8s ease infinite;
}
.category-hero::before{
  content:"";position:absolute;width:350px;height:350px;border-radius:50%;
  top:-120px;right:-80px;background:var(--color-gradient-3);filter:blur(100px);opacity:.35;
  pointer-events:none;animation:float 6s ease-in-out infinite;
}
.category-hero-content{position:relative;z-index:1;max-width:600px;margin:0 auto}
.category-hero h1{
  font-size:var(--text-3xl);font-weight:800;letter-spacing:-.03em;
  color:var(--color-white);margin-bottom:var(--space-4);line-height:var(--leading-tight);
  animation:fadeUp var(--duration-slower) var(--ease-out) both;
}
.category-hero p{
  font-size:var(--text-lg);color:rgba(255,255,255,.8);line-height:var(--leading-normal);
  animation:fadeUp var(--duration-slower) var(--ease-out) .1s both;
}

/* ============================================
   Game Icon Cards (no photo)
   ============================================ */
.quiz-card-img--icon{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-bg-elevated),var(--color-bg-card));
}
.game-icon-wrap{
  color:var(--color-primary-light);
  transition:transform var(--duration-slow) var(--ease-out),color var(--duration) var(--ease-out);
}
.quiz-card:hover .game-icon-wrap{transform:scale(1.1);color:var(--color-accent-light)}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:var(--color-footer-bg);color:var(--color-footer-text);
  padding:var(--space-16) var(--space-6) var(--space-8);
  border-top:1px solid var(--color-footer-border);
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-10);
}
.footer-brand{max-width:300px}
.footer-brand .logo{font-size:var(--text-lg);margin-bottom:var(--space-3);display:inline-block}
.footer-brand p{font-size:var(--text-sm);color:var(--color-footer-muted);line-height:var(--leading-normal)}
.footer-nav h4{
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--color-footer-muted);margin-bottom:var(--space-4);
}
.footer-nav ul{list-style:none}
.footer-nav li{margin-bottom:var(--space-2)}
.footer-nav a{
  font-size:var(--text-sm);color:var(--color-footer-text);
  transition:color var(--duration) var(--ease-out);
}
.footer-nav a:hover{color:var(--color-accent)}
.footer-bottom{
  max-width:var(--max-w);margin:var(--space-10) auto 0;
  padding-top:var(--space-6);border-top:1px solid var(--color-footer-border);
  font-size:var(--text-xs);color:var(--color-footer-muted);text-align:center;
}

/* ============================================
   Utilities
   ============================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================
   Mobile Nav
   ============================================ */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-2)}
.nav-toggle svg{width:24px;height:24px;color:var(--color-white)}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:900px){
  .quiz-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .quiz-card.featured{grid-column:span 2}
  .quiz-card.featured .quiz-card-img{aspect-ratio:2/1}
}
@media(max-width:768px){
  .nav-links{
    position:fixed;top:var(--header-h);left:0;right:0;
    background:rgba(10,10,15,.95);backdrop-filter:blur(16px);
    flex-direction:column;padding:var(--space-6);gap:var(--space-4);
    border-bottom:1px solid var(--color-border);
    transform:translateY(-120%);transition:transform .3s var(--ease-out);z-index:99;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-toggle{display:block}
  .hero{padding:var(--space-16) var(--space-4) var(--space-12)}
  .hero h1{letter-spacing:-.03em}
  .footer-inner{flex-direction:column;gap:var(--space-8)}
  .cta-banner-inner{padding:var(--space-8) var(--space-6)}
}
@media(max-width:580px){
  .quiz-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .quiz-card.featured{grid-column:span 1}
  .header-inner{padding:0 var(--space-4)}
  .section{padding:var(--space-8) var(--space-4)}
}