:root{
      --bg-1:#05060f;
      --bg-2:#100618;
      --neon-cyan:#22d3ee;
      --neon-fuchsia:#a78bfa;
      --neon-pink:#ec4899;
      --card:#0b0f1f;
      --muted:#a8b3cf;
      --good:#22c55e;
      --bad:#ef4444;
      --warn:#f59e0b;
    }

    html,body{
      height:100%;
      background: radial-gradient(1200px 800px at 20% -10%, #1a0b2e 0%, transparent 60%),
                  radial-gradient(1000px 600px at 110% 10%, #0b2830 0%, transparent 55%),
                  linear-gradient(180deg, var(--bg-1), var(--bg-2));
      color: #e9ecf2;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
      overflow-x:hidden;
    }

    /* Animated Background FX */
    .fx-blobs, .fx-grid, .fx-scan, .fx-stars { pointer-events:none; position:fixed; inset:0; z-index:-1; }
    .fx-blobs::before,
    .fx-blobs::after{
      content:"";
      position:absolute;
      width:38rem; height:38rem;
      border-radius:50%;
      filter: blur(64px);
      mix-blend-mode: screen;
      animation: pulse 10s ease-in-out infinite;
      opacity:.35;
    }
    .fx-blobs::before{
      left:-12rem; top:-10rem; background: radial-gradient(circle at 30% 30%, var(--neon-cyan), transparent 60%);
    }
    .fx-blobs::after{
      right:-12rem; bottom:-12rem; background: radial-gradient(circle at 70% 70%, var(--neon-fuchsia), transparent 60%);
      animation-delay: 2s;
    }
    @keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08);} }

    .fx-grid{
      opacity:.28;
      mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
      background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .fx-scan{
      background: repeating-linear-gradient(
        transparent 0px, transparent 3px, rgba(255,255,255,.03) 4px, transparent 5px
      );
      animation: scan 8s linear infinite;
      opacity:.6;
    }
    @keyframes scan { 0%{ background-position: 0 0; } 100% { background-position: 0 200px; } }
    .fx-stars{
      background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.15), transparent 40%),
        radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,.12), transparent 40%),
        radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.10), transparent 40%),
        radial-gradient(2px 2px at 15% 80%, rgba(255,255,255,.15), transparent 40%);
      animation: twinkle 6s ease-in-out infinite;
      opacity:.6;
    }
    @keyframes twinkle { 0%,100%{ opacity:.6 } 50%{ opacity:.85 } }

    .glass{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .neon-border{
      position: relative;
    }
    .neon-border::after{
      content:"";
      position:absolute; inset:-1px;
      border-radius: inherit;
      background: conic-gradient(
        from 0deg,
        rgba(34,211,238,.4), rgba(167,139,250,.35), rgba(236,72,153,.35), rgba(34,211,238,.4)
      );
      filter: blur(12px);
      opacity:.4;
      z-index:-1;
    }

    .brand{
      font-family: Orbitron, Inter, sans-serif;
      letter-spacing: .08em;
      font-weight: 800;
      background: linear-gradient(90deg, var(--neon-cyan), var(--neon-fuchsia), var(--neon-pink));
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }

    .btn-neon{
      --c1: var(--neon-cyan); --c2: var(--neon-fuchsia);
      background: linear-gradient(90deg, var(--c1), var(--c2));
      border: none;
      color: #0b0f1f;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(34,211,238,.25), 0 0 0 1px rgba(255,255,255,.07) inset;
    }
    .btn-neon:hover{ filter: saturate(1.1) brightness(1.05); }
    .btn-ghost{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.16);
      color: #e9ecf2;
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.12); }

    .badge-soft{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color: #e9ecf2;
    }

    /* Radial Timer (SVG) */
    .timer-wrap{
      position: relative; width:120px; height:120px;
    }
    .timer-wrap .time{
      position:absolute; inset:0; display:grid; place-items:center;
      font-weight:800; font-size:1.25rem; color:#e9ecf2;
    }
    .timer-ring{
      transform: rotate(-90deg);
      filter: drop-shadow(0 0 10px rgba(34,211,238,.3));
    }
    .timer-bg { stroke: rgba(255,255,255,.08); }
    .timer-fg { stroke: url(#grad1); stroke-linecap: round; }

    /* Option buttons */
    .option{
      text-align:left;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color:#e9ecf2;
      transition: all .2s ease;
    }
    .option:hover{ background: rgba(255,255,255,.1); transform: translateY(-1px); }
    .option.correct{
      border-color: rgba(34,197,94,.5);
      background: linear-gradient(180deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
      box-shadow: 0 0 0 1px rgba(34,197,94,.2) inset;
    }
    .option.wrong{
      border-color: rgba(239,68,68,.5);
      background: linear-gradient(180deg, rgba(239,68,68,.15), rgba(239,68,68,.05));
      box-shadow: 0 0 0 1px rgba(239,68,68,.2) inset;
    }
    .option.disabled{ pointer-events:none; opacity:.7; }

    /* Skeleton */
    .skeleton{
      border-radius: .5rem;
      background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05));
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
    }
    @keyframes shimmer { 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

    /* Results donut */
    .donut{
      --p: 0;
      width:140px; height:140px;
      border-radius:50%;
      background:
        radial-gradient(farthest-side, #0b0f1f 55%, transparent 56%),
        conic-gradient(var(--neon-cyan) calc(var(--p)*1%), rgba(255,255,255,.12) 0);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    }
    .donut-label{
      position:absolute; inset:0; display:grid; place-items:center; font-weight:800;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .fx-blobs,.fx-grid,.fx-scan,.fx-stars{ display:none; }
      .neon-border::after{ display:none; }
    }