.quiz-main{padding-top:2rem;padding-bottom:4rem}.quiz-container{--q-pink:#f472b6;--q-purple:#c084fc;--q-cyan:#38bdf8;--q-green:#4ade80;--q-amber:#fbbf24;--q-red:#f87171;--q-surface:#1e293bbf;--q-surface-solid:#1e293bd9;--q-panel:linear-gradient(145deg, #0f172af2 0%, #1e1b4bd9 100%);--q-border:var(--border-color,#ffffff1f);--q-border-accent:#a855f747;--q-radius:1rem;--q-radius-lg:1.5rem;--q-gap:1.75rem;max-width:880px;color:var(--text-main,#f8fafc);margin:0 auto;padding:1.5rem 1rem 4rem}.quiz-container :is(button,a):focus-visible{outline:3px solid var(--q-purple);outline-offset:3px}.quiz-hero-banner{border-radius:var(--q-radius-lg);width:100%;min-height:200px;margin-bottom:var(--q-gap);border:1px solid var(--q-border-accent);background:url(/images/quiz/hero-bg.webp) 50%/cover no-repeat;display:flex;position:relative;overflow:hidden;box-shadow:0 15px 35px #0009}.quiz-hero-overlay{background:linear-gradient(#0f172a59 0%,#0f172af2 100%);flex:1;justify-content:space-between;align-items:flex-end;gap:1rem;min-width:0;padding:1.5rem 2rem;display:flex;position:relative}.quiz-hero-title-group h1{color:#fff;text-shadow:0 2px 10px #000c;margin:0 0 .3rem;font-size:clamp(1.35rem,4.5vw,1.75rem);font-weight:900}.quiz-hero-subtitle{color:var(--text-muted,#cbd5e1);flex-wrap:wrap;align-items:center;gap:.5rem;font-size:clamp(.8rem,2.6vw,.95rem);display:flex}.quiz-hero-badge{border:1px solid var(--q-pink);color:var(--q-pink);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;background:#ec48994d;border-radius:999px;padding:.2rem .65rem;font-size:.75rem;font-weight:800}.quiz-sound-btn{backdrop-filter:blur(12px);color:#f1f5f9;border-radius:var(--q-radius);cursor:pointer;white-space:nowrap;background:#0f172abf;border:1px solid #fff3;flex-shrink:0;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.9rem;font-weight:600;transition:all .25s;display:flex;box-shadow:0 4px 15px #0006}.quiz-sound-btn:hover{background:#7c3aed99;border-color:#a78bfa;transform:translateY(-2px)}.scoreboard-panel{margin-bottom:var(--q-gap);grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.score-box{background:var(--q-surface);backdrop-filter:blur(16px);border-radius:var(--q-radius);text-align:center;border:1px solid #ffffff1a;padding:.85rem 1.25rem}.score-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-dim,#94a3b8);margin-bottom:.25rem;font-size:.75rem;font-weight:800}.score-value{color:var(--q-cyan);font-variant-numeric:tabular-nums;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:900}.score-value.combo{color:var(--q-pink);text-shadow:0 0 10px #f472b680}.score-value.total{color:var(--q-green)}.progress-bar-bg{width:100%;height:10px;margin-bottom:var(--q-gap);background:#ffffff14;border:1px solid #ffffff0d;border-radius:999px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, #ec4899, #818cf8, var(--q-cyan));border-radius:999px;height:100%;transition:width .4s ease-out}.quiz-card{background:var(--q-panel);backdrop-filter:blur(20px);border-radius:var(--q-radius-lg);border:1px solid #a855f740;padding:2.25rem;transition:transform .3s,border-color .3s;position:relative;overflow:hidden;box-shadow:0 20px 50px #0009}.quiz-card.shake{border-color:#ef4444;animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-3px)}20%,80%{transform:translate(5px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.card-top-info{margin-bottom:var(--q-gap);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;display:flex}.question-counter{text-transform:uppercase;letter-spacing:.5px;color:var(--q-cyan);white-space:nowrap;background:#38bdf81f;border:1px solid #38bdf84d;border-radius:999px;padding:.4rem 1rem;font-size:.9rem;font-weight:800}.card-action-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.listen-btn{color:var(--q-cyan);white-space:nowrap;cursor:pointer;background:#38bdf81f;border:1px solid #38bdf866;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem 1rem;font-size:.85rem;font-weight:700;transition:all .2s;display:inline-flex}.listen-btn:hover{border-color:var(--q-cyan);background:#38bdf847}.listen-btn[hidden]{display:none}.listen-btn.speaking{border-color:var(--q-cyan);background:#38bdf84d;animation:1.1s ease-in-out infinite listen-pulse}@keyframes listen-pulse{0%,to{box-shadow:0 0 #38bdf873}50%{box-shadow:0 0 0 6px #38bdf800}}.hint-toggle-btn{color:var(--q-amber);white-space:nowrap;cursor:pointer;background:#fbbf241a;border:1px solid #fbbf2466;border-radius:999px;padding:.4rem 1rem;font-size:.85rem;font-weight:700;transition:all .2s}.hint-toggle-btn:hover{border-color:var(--q-amber);background:#fbbf2440}.sentence-display{color:#fff;word-break:keep-all;margin-bottom:1.25rem;font-size:clamp(1.2rem,4.5vw,1.55rem);font-weight:700;line-height:1.6}.blank-slot{border-bottom:3px solid var(--q-purple);color:#e879f9;text-align:center;background:#c084fc26;border-radius:.4rem;min-width:100px;margin:0 .3rem;padding:.15rem .85rem;font-weight:800;display:inline-block}.translation-display{color:var(--text-muted,#cbd5e1);margin-bottom:var(--q-gap);word-break:keep-all;border-left:4px solid #818cf8;padding-left:1rem;font-size:clamp(.95rem,3vw,1.05rem);line-height:1.6}.hint-box{color:#fef08a;margin-bottom:var(--q-gap);word-break:keep-all;background:#fbbf241a;border:1px dashed #fbbf2466;border-radius:.85rem;padding:.9rem 1.25rem;font-size:.95rem}.options-grid{margin-top:var(--q-gap);grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.option-btn{background:var(--q-surface-solid);border:1px solid var(--q-border);color:var(--text-main,#f8fafc);border-radius:var(--q-radius);text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:.5rem;min-height:56px;padding:1.1rem 1.35rem;font-size:1.1rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.option-btn>span{overflow-wrap:anywhere;align-items:center;min-width:0;display:inline-flex}.option-btn:hover:not(:disabled){border-color:var(--q-purple);background:#334155f2;transform:translateY(-2px);box-shadow:0 8px 25px #c084fc4d}.option-key{width:1.6rem;height:1.6rem;color:var(--text-dim,#94a3b8);background:#ffffff14;border:1px solid #ffffff26;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;margin-right:.7rem;font-size:.8rem;font-weight:800;display:inline-flex}.option-btn.correct{color:#fff!important;background:linear-gradient(135deg,#059669 0%,#10b981 100%)!important;border-color:#34d399!important;box-shadow:0 0 25px #34d39980!important}.option-btn.wrong{color:#fff!important;border-color:var(--q-red)!important;background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%)!important;box-shadow:0 0 25px #f8717180!important}.option-btn:is(.correct,.wrong) .option-key{color:#fff;background:#ffffff38;border-color:#fff6}.option-btn:disabled{cursor:default;opacity:.75}.option-btn:disabled:is(.correct,.wrong){opacity:1}.result-card{text-align:center;backdrop-filter:blur(24px);background:linear-gradient(145deg,#0f172af2 0%,#1e1b4bf2 100%);border:1px solid #c084fc66;border-radius:1.75rem;padding:3rem 2rem;box-shadow:0 25px 60px #000c}.result-anime-img{object-fit:cover;border:3px solid var(--q-purple);border-radius:50%;width:140px;height:140px;margin:0 auto 1.5rem;animation:1.4s ease-in-out infinite alternate bounce;box-shadow:0 0 30px #c084fc99}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.result-score-title{color:#fff;margin-bottom:.5rem;font-size:clamp(1.5rem,6vw,2rem);font-weight:900}.result-score-detail{color:var(--q-purple);margin-bottom:2rem;font-size:clamp(1rem,3.5vw,1.25rem)}.result-btn-group{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.primary-action-btn{background:linear-gradient(135deg, var(--accent,#6366f1) 0%, #a855f7 100%);color:#fff;cursor:pointer;border:none;border-radius:.9rem;padding:.9rem 1.85rem;font-size:1.05rem;font-weight:800;transition:all .2s;box-shadow:0 4px 20px #a855f766}.primary-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #a855f7b3}@media (width<=640px){.quiz-container{--q-gap:1.25rem;padding:1rem .75rem 3rem}.quiz-hero-overlay{flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:1.25rem}.quiz-hero-banner{border-radius:1.15rem;min-height:170px}.scoreboard-panel{gap:.5rem}.score-box{padding:.7rem .35rem}.score-label{letter-spacing:.5px;font-size:.65rem}.quiz-card{border-radius:1.15rem;padding:1.35rem 1.1rem}.question-counter{padding:.35rem .75rem;font-size:.75rem}.options-grid{grid-template-columns:1fr;gap:.7rem}.option-btn{padding:.9rem 1rem;font-size:1rem}.result-card{border-radius:1.25rem;padding:2rem 1.15rem}.result-anime-img{width:110px;height:110px}.result-btn-group{flex-direction:column}.primary-action-btn{width:100%;padding:.85rem 1.25rem}}@media (prefers-reduced-motion:reduce){.quiz-container *,.quiz-container :before,.quiz-container :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.option-btn:hover:not(:disabled),.primary-action-btn:hover,.quiz-sound-btn:hover{transform:none}}