:root{
    --ink:#EDE7DD;
    --ink-dim:#9AA0B4;
    --dusk:#1B1F2B;
    --dusk-deep:#141822;
    --paper:#F3EDE1;
    --paper-dim:#DCD3C1;
    --ember:#E7A63C;
    --ember-dim:#8a6a30;
    --rose:#C9838A;
    --line: rgba(237,231,221,0.14);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--dusk);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* subtle ambient grain/vignette */
  .bg-glow{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(231,166,60,0.10), transparent 60%),
      radial-gradient(ellipse 50% 30% at 20% 90%, rgba(201,131,138,0.08), transparent 60%);
  }

  .wrap{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:0 24px 120px;}

  /* HERO */
  .hero{
    min-height:92vh; display:flex; flex-direction:column; justify-content:center;
    padding:60px 0 40px; text-align:left; position:relative;
  }
  .eyebrow{
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--ember); margin-bottom:22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:''; width:22px; height:1px; background:var(--ember-dim);
  }
  .hero h1{
    font-family:'Fraunces',serif; font-weight:500; font-size:clamp(38px,9vw,58px);
    line-height:1.04; margin:0 0 28px; letter-spacing:-0.01em;
  }
  .hero h1 em{ font-style:italic; color:var(--ember); font-weight:500;}
  .hero p{
    font-size:16px; line-height:1.75; color:var(--ink-dim); max-width:46ch; margin:0 0 12px;
  }
  .hero p strong{color:var(--ink); font-weight:500;}
  .scroll-hint{
    margin-top:48px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em;
    color:var(--ink-dim); text-transform:uppercase; display:flex; align-items:center; gap:8px;
    opacity:0.7;
  }
  .scroll-hint .arrow{animation:bob 1.8s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

  /* SCREEN FLOW */
  .screen{ display:none; }
  .screen-anim{ animation:screen-in 0.5s ease; }
  @keyframes screen-in{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
  }
  .screen-quiz{ min-height:82vh; padding:48px 0 40px; }

  .start-btn, .lanjut-btn{
    font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--dusk-deep); font-weight:700;
    background:linear-gradient(120deg,var(--ember),var(--rose));
    border:none; border-radius:30px; padding:15px 26px; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow:0 16px 32px -14px rgba(231,166,60,0.55);
    transition:transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease;
    width:fit-content; margin-top:36px;
  }
  .start-btn:hover, .lanjut-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(231,166,60,0.6); }
  .start-btn:active, .lanjut-btn:active{ transform:translateY(0); }
  .lanjut-btn{
    display:none; margin-top:26px; opacity:0;
    animation:lanjut-in 0.4s ease forwards;
  }
  @keyframes lanjut-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  .quiz-progress-label{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:22px;
  }
  .quiz-progress-label b{ color:var(--ember); }

  /* PROGRESS RAIL */
  .progress-rail{
    position:fixed; left:0; top:0; bottom:0; width:3px; z-index:5;
    background:rgba(255,255,255,0.06);
  }
  .progress-fill{
    width:100%; background:linear-gradient(180deg,var(--ember),var(--rose));
    height:0%; transition:height 0.4s ease;
  }
  .counter{
    position:fixed; top:24px; right:24px; z-index:5;
    font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim);
    background:rgba(20,24,34,0.7); backdrop-filter:blur(6px);
    padding:7px 12px; border-radius:20px; border:1px solid var(--line);
    letter-spacing:0.05em;
    display:flex; align-items:center; gap:8px;
    transition:transform 0.25s ease;
  }
  .counter b{color:var(--ember); font-weight:700;}
  .counter .divider{opacity:0.3;}
  .counter .score{color:var(--rose); font-weight:700;}
  .counter.bump{transform:scale(1.08);}
  .streak-flame{
    display:inline-flex; align-items:center; gap:3px;
    font-size:11px; color:var(--ember); opacity:0; transform:scale(0.6);
    transition:all 0.3s cubic-bezier(.34,1.6,.64,1);
  }
  .streak-flame.show{opacity:1; transform:scale(1);}

  /* COMBO POPUP */
  .combo-popup{
    position:fixed; z-index:20; pointer-events:none;
    font-family:'Space Mono',monospace; font-weight:700; font-size:13px;
    color:var(--ember);
    animation:popup-rise 0.9s ease forwards;
    white-space:nowrap;
  }
  @keyframes popup-rise{
    0%{opacity:0; transform:translate(-50%,0) scale(0.8);}
    15%{opacity:1; transform:translate(-50%,-8px) scale(1.1);}
    30%{transform:translate(-50%,-14px) scale(1);}
    100%{opacity:0; transform:translate(-50%,-52px) scale(1);}
  }

  /* MILESTONE TOAST */
  .toast{
    position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-14px);
    z-index:20; background:rgba(27,31,43,0.95); backdrop-filter:blur(8px);
    border:1px solid var(--ember-dim); border-radius:24px;
    padding:10px 20px; font-family:'Space Mono',monospace; font-size:12px;
    color:var(--paper); letter-spacing:0.03em;
    opacity:0; transition:all 0.4s cubic-bezier(.34,1.4,.64,1);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* CONFETTI */
  .confetti-layer{
    position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden;
  }
  .confetti-piece{
    position:absolute; top:-16px; border-radius:2px;
    animation:confetti-fall linear forwards;
  }
  @keyframes confetti-fall{
    0%{transform:translateY(0) rotate(0deg); opacity:1;}
    100%{transform:translateY(105vh) rotate(540deg); opacity:0.2;}
  }

  /* TRACK STAMP */
  .track-stamp{
    position:absolute; top:52px; right:0; z-index:2;
    font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700;
    color:var(--ember); border:1.5px solid var(--ember);
    border-radius:20px; padding:4px 10px; letter-spacing:0.08em;
    transform:rotate(6deg) scale(0.5); opacity:0;
    transition:all 0.45s cubic-bezier(.34,1.7,.6,1);
  }
  .track-solved .track-stamp{ opacity:1; transform:rotate(6deg) scale(1); }

  /* TRACK */
  .track{
    padding:56px 0; border-top:1px solid var(--line);
    position:relative;
  }
  .track-head{
    display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
  }
  .track-num{
    font-family:'Space Mono',monospace; font-size:13px; color:var(--ember-dim);
    letter-spacing:0.05em;
  }
  .track-solved .track-num{color:var(--ember);}
  .track-title{
    font-family:'Fraunces',serif; font-size:22px; font-weight:500; margin:0;
  }
  .track-artist{
    font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink-dim);
    text-transform:uppercase; letter-spacing:0.08em; margin:2px 0 0;
  }
  .track-story{
    font-size:15px; line-height:1.8; color:var(--ink-dim); margin:18px 0 22px;
    white-space:pre-line;
  }
  .track-story strong{color:var(--ink); font-weight:500;}

  .lyric-box{
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    border-left:2px solid var(--ember-dim);
    border-radius:6px;
    padding:20px 22px;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:18px;
    line-height:1.7;
    color:var(--paper);
    transition:border-color 0.4s ease, background 0.4s ease;
  }
  .track-solved .lyric-box{
    border-left-color:var(--ember);
    background:rgba(231,166,60,0.06);
  }

  .blank-tag{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--rose);
    letter-spacing:0.05em; padding:0 4px;
  }

  .spotify-embed{
    margin-top:16px; border-radius:10px; overflow:hidden;
    border:1px solid var(--line);
  }
  .spotify-embed iframe{ display:block; width:100%; border:none; }

  .options-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;
  }
  @media (max-width:420px){ .options-grid{grid-template-columns:1fr;} }
  .opt-btn{
    font-family:'Inter',sans-serif; font-size:14.5px; font-weight:500;
    text-align:left; padding:14px 16px; border-radius:8px;
    background:rgba(255,255,255,0.03); border:1px solid var(--line);
    color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:10px;
    transition:all 0.18s ease;
  }
  .opt-letter{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--ink-dim);
    width:20px; height:20px; border-radius:5px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .opt-btn:hover:not(.correct):not(.wrong){
    border-color:var(--ember-dim); background:rgba(231,166,60,0.06);
  }
  .opt-btn.correct{
    background:rgba(120,190,120,0.12); border-color:#7abf7a; color:#bfe8bf;
  }
  .opt-btn.correct .opt-letter{border-color:#7abf7a; color:#7abf7a;}
  .opt-btn.wrong{
    background:rgba(201,131,138,0.12); border-color:var(--rose); color:var(--rose);
    animation:shake 0.35s ease;
  }
  .opt-btn.disabled{ pointer-events:none; opacity:0.45; }
  @keyframes shake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-5px);}
    75%{transform:translateX(5px);}
  }

  .attempt-note{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--rose);
    margin-top:12px; display:none;
  }
  .attempt-note.show{display:block;}

  .check-row{
    display:flex; align-items:center; gap:12px; margin-top:4px; min-height:20px;
  }
  .solved-badge{
    font-family:'Space Mono',monospace; font-size:11px; color:var(--ember);
    letter-spacing:0.05em; display:none; align-items:center; gap:6px;
  }
  .track-solved .solved-badge{display:flex;}
  .solved-badge::before{content:'✓';}

  /* FINALE */
  .finale{
    margin-top:80px; padding-top:60px; border-top:1px solid var(--line);
    text-align:center;
  }
  .finale-lock{
    padding:50px 24px; border:1px dashed var(--line); border-radius:12px;
  }
  .finale-lock .icon{font-size:28px; margin-bottom:14px; opacity:0.5;}
  .finale-lock p{
    font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-dim);
    letter-spacing:0.03em; line-height:1.8; margin:0;
  }
  .finale-lock b{color:var(--ember);}

  /* ENVELOPE REVEAL ANIMATION */
  .envelope-stage{
    display:none; flex-direction:column; align-items:center;
    padding:30px 0 10px;
  }
  .envelope-stage.show{display:flex;}
  .envelope{
    width:200px; height:130px; position:relative; margin-bottom:16px;
    perspective:900px;
  }
  .envelope-body{
    position:absolute; left:0; right:0; bottom:0; top:24px;
    background:linear-gradient(160deg,#2a2f3d,#1c202b);
    border:1px solid var(--line); border-radius:7px;
    box-shadow:0 30px 55px -18px rgba(0,0,0,0.6);
    overflow:hidden;
  }
  .envelope-body::before, .envelope-body::after{
    content:''; position:absolute; top:0; width:60%; height:100%;
    background:rgba(255,255,255,0.025);
  }
  .envelope-body::before{ left:0; clip-path:polygon(0 0, 100% 50%, 0 100%); }
  .envelope-body::after{ right:0; clip-path:polygon(100% 0, 0 50%, 100% 100%); }
  .envelope-letter{
    position:absolute; left:12px; right:12px; bottom:12px; height:58%;
    background:var(--paper);
    border-radius:4px;
    box-shadow:0 12px 28px rgba(0,0,0,0.4);
    z-index:2;
    transition: transform 1.1s cubic-bezier(.34,1.35,.6,1) .35s, opacity .4s ease .35s;
  }
  .envelope.opening .envelope-letter{
    transform: translateY(-96px) scale(1.06);
  }
  .envelope-flap{
    position:absolute; top:24px; left:0; right:0; height:64px;
    background:linear-gradient(160deg,#343a4a,#22262f);
    clip-path:polygon(0 0, 100% 0, 50% 100%);
    transform-origin:top center;
    border:1px solid var(--line); border-bottom:none;
    border-radius:7px 7px 0 0;
    z-index:3;
    transition: transform 1s cubic-bezier(.4,0,.2,1), opacity .5s ease .5s;
  }
  .envelope.opening .envelope-flap{
    transform:rotateX(150deg) translateY(-6px);
    opacity:0;
  }
  .envelope-seal{
    position:absolute; top:44px; left:50%; transform:translate(-50%,-50%);
    width:32px; height:32px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #f0b85c, var(--ember) 75%);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:13px; color:#3a2a0a;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
    z-index:4;
    transition: transform .5s ease, opacity .5s ease;
  }
  .envelope.opening .envelope-seal{
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
  }
  .envelope-caption{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink-dim); opacity:0.75;
  }

  .finale-letter{
    display:none; text-align:left;
    animation:reveal 1.1s ease forwards;
  }
  .finale-letter.show{display:block;}
  @keyframes reveal{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }
  .finale-eyebrow{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--rose); text-align:center; margin-bottom:20px;
  }
  .finale-letter h2{
    font-family:'Fraunces',serif; font-weight:500; font-style:italic; font-size:clamp(26px,6vw,34px);
    text-align:center; margin:0 0 36px; color:var(--paper);
  }
  .finale-letter p{
    font-size:16px; line-height:1.9; color:var(--ink); margin:0 0 20px;
  }
  .finale-quote{
    font-family:'Fraunces',serif; font-style:italic; font-size:20px; text-align:center;
    color:var(--ember); margin:36px 0; line-height:1.6;
  }
  .finale-sign{
    text-align:center; margin-top:44px; font-family:'Space Mono',monospace;
    font-size:12px; color:var(--ink-dim); letter-spacing:0.05em;
  }
  .finale-sign .flame{font-size:22px; display:block; margin-bottom:14px;}

  footer{
    text-align:center; margin-top:80px; font-family:'Space Mono',monospace;
    font-size:10.5px; color:var(--ink-dim); opacity:0.5; letter-spacing:0.05em;
  }