*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --navy:#0F172A;--slate:#1E293B;--muted:#64748B;--light:#CBD5E1;
      --white:#F8FAFC;--indigo:#6366F1;--indigo-dark:#4F46E5;
      --green:#22C55E;--red:#EF4444;--radius:14px;
    }
    body{background:var(--navy);color:var(--white);font-family:'Inter',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;}
    .progress-track{position:fixed;top:0;left:0;right:0;height:4px;background:var(--slate);z-index:200}
    .progress-fill{height:100%;background:linear-gradient(90deg,var(--indigo),#a855f7);transition:width .5s cubic-bezier(.4,0,.2,1);width:0%}
    .card-wrap{width:100%;max-width:560px}
    .card{background:var(--slate);border-radius:var(--radius);padding:36px 32px 28px;border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 60px rgba(0,0,0,.45);transition:opacity .3s ease,transform .3s ease;}
    .card.fade-out{opacity:0;transform:translateY(-10px) scale(.98)}
    .card.fade-in{animation:slideIn .35s cubic-bezier(.4,0,.2,1) forwards}
    @keyframes slideIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    .meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
    .tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);background:rgba(99,102,241,.12);padding:4px 10px;border-radius:99px}
    .counter{font-size:13px;color:var(--muted)}.counter span{color:var(--white);font-weight:600}
    .question{font-family:'DM Serif Display',serif;font-size:clamp(1.15rem,3vw,1.5rem);line-height:1.4;color:var(--white);margin-bottom:24px}
    .options{display:flex;flex-direction:column;gap:10px}
    .option{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;padding:13px 16px;font-size:15px;font-weight:500;color:var(--white);cursor:pointer;text-align:left;display:flex;align-items:center;gap:14px;transition:background .15s,border-color .15s,transform .1s;user-select:none;}
    .option:hover:not(:disabled){background:rgba(99,102,241,.15);border-color:var(--indigo);transform:translateX(3px)}
    .option .letter{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:var(--light);transition:background .15s,color .15s;}
    .option.correct{background:rgba(34,197,94,.15);border-color:var(--green)}
    .option.correct .letter{background:var(--green);color:#fff}
    .option.wrong{background:rgba(239,68,68,.13);border-color:var(--red)}
    .option.wrong .letter{background:var(--red);color:#fff}
    .option:disabled{cursor:default;transform:none}
    .feedback{margin-top:14px;font-size:13.5px;font-weight:500;min-height:20px;color:var(--muted);transition:color .2s}
    .feedback.correct{color:var(--green)}.feedback.wrong{color:var(--red)}
    .btn-next{margin-top:20px;width:100%;padding:13px;border-radius:10px;background:var(--indigo);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:background .15s,transform .1s,opacity .2s;opacity:0;pointer-events:none;}
    .btn-next.visible{opacity:1;pointer-events:all}
    .btn-next:hover{background:var(--indigo-dark);transform:translateY(-1px)}
    .results{text-align:center}
    .score-ring{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--indigo) var(--pct,0%),rgba(255,255,255,.07) 0%);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 0 0 6px rgba(99,102,241,.15);}
    .score-ring-inner{width:82px;height:82px;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center;flex-direction:column;}
    .score-num{font-family:'DM Serif Display',serif;font-size:26px;line-height:1}
    .score-label{font-size:11px;color:var(--muted);margin-top:2px}
    .results h2{font-family:'DM Serif Display',serif;font-size:1.5rem;margin-bottom:8px}
    .results p{color:var(--muted);font-size:14px;margin-bottom:24px}
    .btn-restart{padding:13px 36px;border-radius:10px;background:var(--indigo);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:background .15s;}
    .btn-restart:hover{background:var(--indigo-dark)}
    .name-reveal{margin:18px 0 22px;opacity:0;transform:translateY(12px);animation:revealName .6s cubic-bezier(.4,0,.2,1) .5s forwards}
    @keyframes revealName{to{opacity:1;transform:translateY(0)}}
    .name-reveal-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
    .name-badge{display:inline-block;padding:10px 28px;border-radius:99px;background:linear-gradient(135deg,var(--indigo),#a855f7);font-family:'DM Serif Display',serif;font-size:1.35rem;color:#fff;box-shadow:0 4px 24px rgba(99,102,241,.4);letter-spacing:.02em;}
    .cover{text-align:center}
    .cover .icon{font-size:52px;margin-bottom:18px}
    .cover h1{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,5vw,2.3rem);margin-bottom:10px}
    .cover p{color:var(--muted);font-size:14px;margin-bottom:28px;line-height:1.6}
    .btn-start{padding:14px 44px;border-radius:10px;background:var(--indigo);color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:background .15s,transform .1s;}
    .btn-start:hover{background:var(--indigo-dark);transform:translateY(-1px)}
    .hidden{display:none!important}

    /* ══ TIMER BAR ══ */
    .timer-wrap{margin-bottom:14px;display:flex;align-items:center;gap:10px}
    .timer-track{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
    .timer-fill{height:100%;border-radius:99px;transition:width 1s linear,background .3s;background:var(--indigo)}
    .timer-fill.warn{background:#f59e0b}
    .timer-fill.danger{background:var(--red)}
    .timer-label{font-size:12px;font-weight:700;color:var(--muted);min-width:22px;text-align:right}

    /* ══ SURPRISE FLASH ══ */
    @keyframes surpriseFlash{
      0%,100%{background:var(--slate)}
      15%{background:rgba(220,20,60,.18)}
      30%{background:var(--slate)}
      45%{background:rgba(220,20,60,.18)}
      60%{background:var(--slate)}
    }
    .card.surprise-flash{animation:surpriseFlash .7s ease forwards}
    .tag.surprise{background:rgba(220,20,60,.18)!important;color:#DC143C!important}

    @keyframes cardShake{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-7px) rotate(0)}
  30%{transform:translateX(7px) rotate(0)}
  45%{transform:translateX(-5px) rotate(0)}
  60%{transform:translateX(5px) rotate(0)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}
.card.leiheng-active{
  background:rgba(160,10,10,.25)!important;
  border-color:rgba(220,20,60,.5)!important;
  box-shadow:0 0 32px rgba(220,20,60,.18),0 24px 60px rgba(0,0,0,.45)!important;
  animation:cardShake .55s ease infinite;
  transition:background .3s,border-color .3s,box-shadow .3s;
}

    /* ===== FAILING ANSWER RAIN ===== */

.falling-answer{
  position:fixed;
  z-index:9999;
  pointer-events:none;

  min-width:180px;
  max-width:320px;

  padding:13px 16px;
  border-radius:10px;

  background:rgba(30,41,59,.95);
  border:1.5px solid rgba(255,255,255,.15);

  color:white;
  font-size:14px;
  font-weight:600;

  animation:answerFall 2.5s linear forwards;
}

@keyframes textShake {

  0%   { transform: translateX(0px); }

  20%  { transform: translateX(-0.5px); }

  40%  { transform: translateY(0.5px); }

  60%  { transform: translateX(0.5px); }

  80%  { transform: translateY(-0.5px); }

  100% { transform: translateX(0px); }

}

.shake-letter{
  display:inline-block;
  animation:textShake .3s steps(1) infinite;
}

.leiheng-text{
    display:inline;
  animation:textShake .3s steps(1) infinite;
}


@keyframes answerFall{
  0%{
    transform:
      translate(0px,0px)
      rotate(0deg);
    opacity:1;
  }

  100%{
    transform:
      translate(
        calc(var(--x) * 1px),
        calc(120vh + var(--y) * 1px)
      )
      rotate(var(--rot));
    opacity:0;
  }
}

    /* ══ ANNOUNCER ══ */
    .announcer{
      width:100%;max-width:560px;
      display:flex;align-items:center;
      gap:14px;
      min-height:88px;
      margin-bottom:14px;
    }
    /* Circle avatar */
    .av{
      flex-shrink:0;
      width:72px;height:72px;
      border-radius:50%;
      overflow:hidden;
      border:3px solid rgba(99,102,241,.3);
      box-shadow:0 0 0 3px rgba(99,102,241,.1);
      background:#111827;
      /* start off-screen to the LEFT */
      opacity:0;
      transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease,
                 border-color .3s, box-shadow .3s;
      order:0;
    }
    .av img{width:100%;height:100%;object-fit:cover;object-position:center 8%;}
    /* Bubble */
    .bubble{
      flex:1;
      opacity:0;
      transform:scale(.95);
      transition:opacity .3s ease, transform .3s ease;
      order:1;
    }
    .bubble.show{opacity:1;transform:scale(1);}
    .bubble-name{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a855f7;margin-bottom:5px;}
    .bubble-body{
      background:rgba(30,41,59,.95);
      border:1.5px solid rgba(168,85,247,.3);
      border-radius:12px;
      padding:11px 15px;
      font-size:13px;line-height:1.55;
      color:var(--white);
      box-shadow:0 4px 20px rgba(0,0,0,.4);
      position:relative;
    }
    .bubble-body::before{
    content:'';
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);

    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:8px solid rgba(99,102,241,.35);
}
.av{
  opacity:0;
  transform:none;
}

.av.active{
  opacity:1;
}

#dialogueOverlay{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:250px;
}

#dialogueStatus{
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  color:var(--light);
}

.dialogue-active .meta,
.dialogue-active .question,
.dialogue-active .options,
.dialogue-active .feedback,
.dialogue-active .btn-next{
  display:none !important;
}


    @media(max-width:480px){.av{width:56px;height:56px}.bubble-body{font-size:12px}}
    @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.announcer,
.announcer.speaker-left,
.announcer.speaker-right{
    flex-direction:row !important;
    justify-content:flex-start !important;
}

.bubble{
    text-align:left;
}

.bubble-body::before{
    left:-8px;
    right:auto;

    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:8px solid rgba(99,102,241,.35);
    border-left:none;
}

.bubble{
  flex:1;
  min-width:0;      /* IMPORTANT */
  max-width:100%;
}

.bubble-body{
  width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

.av{
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(99,102,241,.3);
  box-shadow:0 0 0 3px rgba(99,102,241,.1);
  background:#111827;

  opacity:0;
  transform:none;

  transition:
    opacity .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.av.active{
  opacity:1;
}

.av img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 8%;
}
.option{
  word-break:break-word;
  white-space:normal;
}
#loadingScreen{
  position:fixed;
  inset:0;
  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#0F172A;
}

.loading-box{
  width:min(420px,90%);
  text-align:center;
}

.loading-title{
  font-family:'DM Serif Display',serif;
  font-size:1.7rem;
  margin-bottom:18px;
}

.loading-bar{
  height:12px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}

#loadingFill{
  width:0%;
  height:100%;
  background:linear-gradient(
    90deg,
    #6366F1,
    #A855F7
  );

  transition:width .25s ease;
}

#loadingText{
  margin-top:10px;
  font-size:14px;
  color:#CBD5E1;
}

.chaos-shake {
  display: inline-block;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

#btnSkip{
  align-self:flex-end;

  padding:8px 18px;

  border:none;
  border-radius:8px;

  background:#6366F1;
  color:white;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

#btnSkip:hover{
  background:#4F46E5;
  transform:translateY(-1px);
}
#btnSkip{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

#btnSkip.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


#trickedOverlay {
  position: fixed;
  inset: 0;
  z-index:10000;
  background: #00000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

#trickedOverlay img{
    max-width:120%;
    max-height:120%;
    width:auto;
    height:auto;
    object-fit:contain;
}

#trickedOverlay.show{
  animation:ricardoOverlay 4s forwards;
}

#trickedOverlay.show img{
  animation:ricardoImage 4s forwards;
}

@keyframes ricardoOverlay{
  0%{
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

@keyframes ricardoImage{
  0%{
    transform:scale(1);
  }

  100%{
    transform:scale(0.75);
  }
}

.quiz-layout{
  width:100%;
  max-width:560px;

  display:flex;
  flex-direction:column;

  gap:16px; /* spacing between skip button, card and volume */
}

#slowTextOverlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2rem;
    font-weight:700;
    color:white;
    text-shadow:0 0 15px rgba(0,0,0,.8);

    opacity:0;
    pointer-events:none;
    z-index:10001;
}

#slowTextOverlay.show{
    animation: slowTextFade 3s ease forwards;
}

@keyframes slowTextFade{

    0%{
        opacity:0;
        transform:scale(.9);
    }

    20%{
        opacity:1;
        transform:scale(1);
    }

    70%{
        opacity:1;
        transform:scale(1);
    }

    100%{
        opacity:0;
        transform:scale(1.05);
    }
}

#rewardHint{
    margin-top: 24px;
    padding: 12px 16px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;

    line-height: 1.6;
    font-size: .95rem;
    opacity: .9;
}

#devtoolsOverlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:999999;
    background:#000;
}

.overlay-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

#devBlockOverlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:999999;
    background:#000;

    align-items:center;
    justify-content:center;
}