:root{
    --void:#05110c;
    --emerald:#0b3326;
    --lime:#5effb0;
    --lime-soft:#3dffa8;
    --pink:#ff3d9a;
    --purple:#9d5cff;
    --cyan:#5fe0ff;
    --ink:#eafff4;
    --muted:#79a892;
    --glass:rgba(8,30,21,.55);
    --line:rgba(94,255,176,.16);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Space Grotesk",system-ui,sans-serif;
    background:var(--void);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    line-height:1.5;
  }

  /* ambient stage light */
  .stage-light{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .stage-light::before,.stage-light::after{
    content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
    animation:drift 18s ease-in-out infinite alternate;
  }
  .stage-light::before{
    width:60vw;height:60vw;left:-10vw;top:-15vw;
    background:radial-gradient(circle,rgba(61,255,168,.55),transparent 62%);
  }
  .stage-light::after{
    width:48vw;height:48vw;right:-8vw;top:6vh;
    background:radial-gradient(circle,rgba(157,92,255,.42),transparent 62%);
    animation-duration:22s;
  }
  .beam-pink{
    position:fixed;z-index:0;pointer-events:none;
    width:42vw;height:42vw;border-radius:50%;filter:blur(100px);opacity:.4;
    left:46%;bottom:-22vw;
    background:radial-gradient(circle,rgba(255,61,154,.5),transparent 60%);
    animation:drift 26s ease-in-out infinite alternate;
  }
  @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(4vw,3vh,0)}}

  /* reflective stage floor */
  .floor{
    position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(61,255,168,.06) 40%,rgba(7,20,14,.7));
    box-shadow:inset 0 1px rgba(94,255,176,.18);
  }
  .floor::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(94,255,176,.08) 1px,transparent 1px),
      linear-gradient(90deg,rgba(94,255,176,.08) 1px,transparent 1px);
    background-size:64px 64px;
    transform:perspective(420px) rotateX(62deg);
    transform-origin:bottom;
    mask:linear-gradient(180deg,transparent,#000 70%);
    -webkit-mask:linear-gradient(180deg,transparent,#000 70%);
  }

  .wrap{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:64px 22px 110px}

  /* ---------- HERO ---------- */
  .hero{position:relative;text-align:center;padding:84px 0 30px}
  .sign-25{
    position:absolute;top:-64px;left:-40px;
    font-family:"Anton",sans-serif;font-size:clamp(150px,26vw,300px);line-height:.8;
    color:transparent;
    -webkit-text-stroke:2px rgba(255,61,154,.42);
    text-shadow:0 0 40px rgba(255,61,154,.22);
    letter-spacing:-.05em;z-index:-1;user-select:none;opacity:.85;
  }
  .hero p{max-width:440px;margin:18px auto 0;color:var(--muted);font-size:15px}

  /* evidence photo */
  .evidence{margin:32px auto 0;max-width:560px}
  .evidence-frame{
    position:relative;border-radius:14px;overflow:hidden;
    border:1px solid rgba(94,255,176,.3);
    box-shadow:0 0 0 1px rgba(5,17,12,.8),0 22px 60px -24px rgba(61,255,168,.55),
               0 0 50px -10px rgba(255,61,154,.25);
    background:#04100b;
  }
  .evidence-frame img{display:block;width:100%;height:auto;
    filter:saturate(1.05) contrast(1.03)}
  .corner{position:absolute;width:18px;height:18px;z-index:3;border:2px solid var(--cyan);opacity:.85}
  .corner.tl{top:9px;left:9px;border-right:0;border-bottom:0}
  .corner.tr{top:9px;right:9px;border-left:0;border-bottom:0}
  .corner.bl{bottom:9px;left:9px;border-right:0;border-top:0}
  .corner.br{bottom:9px;right:9px;border-left:0;border-top:0}
  .scanbar{
    position:absolute;left:0;right:0;height:34%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(95,224,255,.16),transparent);
    animation:scan 5.5s linear infinite;
  }
  @keyframes scan{0%{top:-34%}100%{top:100%}}
  .evidence figcaption{
    margin-top:12px;font-size:12.5px;letter-spacing:.04em;color:var(--muted);
  }

  /* progress spotlights */
  .lights{display:flex;gap:14px;justify-content:center;margin-top:30px}
  .light{
    width:14px;height:14px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#1c4636,#0a2018);
    border:1px solid rgba(94,255,176,.2);
    transition:.45s cubic-bezier(.2,.8,.2,1);
  }
  .light.on{
    background:radial-gradient(circle at 35% 30%,#bfffe2,var(--lime-soft));
    border-color:var(--lime);
    box-shadow:0 0 4px var(--lime),0 0 16px var(--lime-soft),0 0 30px rgba(61,255,168,.6);
  }

  /* ---------- QUESTIONS ---------- */
  .q-list{margin-top:56px;display:flex;flex-direction:column;gap:20px}
  .card{
    position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
    padding:24px 24px 24px 22px;border-radius:18px;
    background:var(--glass);border:1px solid var(--line);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:border-color .4s,box-shadow .4s,transform .4s;
  }
  .card.solved{
    border-color:rgba(94,255,176,.55);
    box-shadow:0 0 0 1px rgba(94,255,176,.25),0 18px 50px -22px rgba(61,255,168,.5);
  }

  /* spotlight number */
  .spot{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    font-family:"Anton",sans-serif;font-size:22px;color:#0a2018;
    background:radial-gradient(circle at 35% 28%,#27513e,#0c241a);
    border:1px solid rgba(94,255,176,.25);color:var(--muted);
    transition:.45s;flex-shrink:0;
  }
  .card.solved .spot{
    background:radial-gradient(circle at 35% 28%,#d6ffe9,var(--lime-soft));
    color:#06231a;border-color:var(--lime);
    box-shadow:0 0 14px var(--lime-soft),0 0 34px rgba(61,255,168,.55);
  }

  .q-body{min-width:0}
  .q-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .tag{
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
    padding:3px 9px;border-radius:999px;color:var(--cyan);
    background:rgba(95,224,255,.1);border:1px solid rgba(95,224,255,.28);
  }
  .status{
    margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px;
  }
  .status .dot{width:7px;height:7px;border-radius:50%;background:#3a5648;transition:.4s}
  .card.solved .status{color:var(--lime)}
  .card.solved .status .dot{background:var(--lime);box-shadow:0 0 8px var(--lime-soft)}

  .q-text{font-size:17px;font-weight:500;color:#dffaee;margin-bottom:16px;line-height:1.4}

  .field{position:relative}
  .field input{
    width:100%;background:rgba(4,14,10,.6);color:var(--ink);
    border:1px solid rgba(94,255,176,.18);border-radius:11px;
    padding:13px 46px 13px 15px;font:500 15px "Space Grotesk",sans-serif;
    outline:none;transition:.3s;
  }
  .field input::placeholder{color:#456355}
  .field input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(61,255,168,.14)}
  .card.solved .field input{
    border-color:rgba(94,255,176,.5);color:var(--lime);font-weight:600;
    background:rgba(12,40,28,.55);
  }
  .check{
    position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(.5);
    opacity:0;transition:.35s cubic-bezier(.2,1.4,.4,1);
    color:var(--lime);pointer-events:none;
  }
  .card.solved .check{opacity:1;transform:translateY(-50%) scale(1)}

  /* ---------- FLAG ---------- */
  .flag-stage{margin-top:64px;text-align:center}
  .progress-line{
    font-size:13px;color:var(--muted);margin-bottom:26px;
  }
  .progress-line b{color:var(--lime);font-weight:700}

  .reveal-btn{
    font:700 13px "Space Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase;
    color:#3a5648;background:rgba(8,28,20,.6);
    border:1px solid rgba(94,255,176,.2);border-radius:999px;
    padding:15px 34px;cursor:not-allowed;transition:.35s;
  }
  .reveal-btn.ready{
    color:#06231a;cursor:pointer;
    background:linear-gradient(180deg,#bfffe2,var(--lime-soft));
    border-color:var(--lime);
    box-shadow:0 0 24px rgba(61,255,168,.5),0 10px 40px -12px rgba(61,255,168,.7);
    animation:pulse 2s ease-in-out infinite;
  }
  .reveal-btn.ready:hover{transform:translateY(-2px)}
  @keyframes pulse{50%{box-shadow:0 0 38px rgba(61,255,168,.8),0 10px 50px -10px rgba(61,255,168,.9)}}

  .flag-out{
    margin-top:30px;opacity:0;transform:translateY(14px);
    transition:opacity .6s,transform .6s;pointer-events:none;
  }
  .flag-out.show{opacity:1;transform:none;pointer-events:auto}
  .flag-label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--pink);margin-bottom:14px}
  .flag-text{
    font-family:"JetBrains Mono",monospace;font-weight:700;
    font-size:clamp(15px,4.4vw,24px);letter-spacing:.02em;
    color:var(--lime);word-break:break-all;padding:0 8px;
    text-shadow:0 0 10px rgba(61,255,168,.6),0 0 28px rgba(61,255,168,.35);
    -webkit-box-reflect:below 6px linear-gradient(transparent 55%,rgba(61,255,168,.16));
    animation:flicker 3.5s steps(1) infinite;
  }
  @keyframes flicker{
    0%,93%,100%{opacity:1}94%{opacity:.5}95%{opacity:1}96%{opacity:.6}97%{opacity:1}
  }
  .copy{
    margin-top:24px;font:600 12px "Space Grotesk";letter-spacing:.12em;text-transform:uppercase;
    color:var(--lime);background:transparent;border:1px solid rgba(94,255,176,.3);
    border-radius:999px;padding:9px 20px;cursor:pointer;transition:.25s;
  }
  .copy:hover{background:rgba(94,255,176,.1)}

  .foot{text-align:center;margin-top:70px;color:#3a5648;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

  @media (max-width:560px){
    .card{grid-template-columns:1fr;gap:14px}
    .spot{width:40px;height:40px;font-size:18px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important}
    html{scroll-behavior:auto}
  }