.choice-btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}.choice-btn.choice-correct,.choice-btn.choice-answer{background:#16a34a;color:#fff;opacity:1;box-shadow:0 0 0 4px #22c55e2e,0 8px 20px #16a34a40}.choice-btn.choice-correct{transform:scale(1.04)}.choice-btn.choice-wrong{background:#dc2626;color:#fff;opacity:1}.feedback-correct{color:#15803d;animation:feedbackPop .46s cubic-bezier(.22,1,.36,1) both}@keyframes feedbackPop{0%{transform:scale(.78);opacity:0}65%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}.quiz-card-correct{animation:correctCardGlow .76s ease-out both}@keyframes correctCardGlow{0%{box-shadow:0 8px 30px #0f172a14}35%{box-shadow:0 0 0 5px #22c55e2e,0 16px 42px #16a34a3d}to{box-shadow:0 8px 30px #0f172a14}}.correct-burst{position:absolute;top:.9rem;right:1rem;width:62px;height:62px;z-index:3;pointer-events:none;animation:correctBurstIn .72s cubic-bezier(.22,1,.36,1) both}.correct-mark{position:absolute;top:8px;right:8px;bottom:8px;left:8px;display:grid;place-items:center;border-radius:50%;background:#22c55e;color:#fff;font-size:2rem;font-weight:900;box-shadow:0 8px 20px #16a34a47}.correct-star{position:absolute;color:#f59e0b;font-size:.8rem;animation:starOut .7s ease-out both}.correct-star-1{top:0;left:25px;--star-x: 0px;--star-y: -16px}.correct-star-2{top:24px;right:0;--star-x: 15px;--star-y: 0px}.correct-star-3{bottom:0;left:24px;--star-x: 0px;--star-y: 16px}.correct-star-4{top:24px;left:0;--star-x: -15px;--star-y: 0px}@keyframes correctBurstIn{0%{transform:scale(.2) rotate(-16deg);opacity:0}55%{transform:scale(1.16) rotate(4deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes starOut{0%{transform:translate(0) scale(.4);opacity:0}35%{opacity:1}to{transform:translate(var(--star-x),var(--star-y)) scale(1.15);opacity:0}}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:9999;overflow:hidden;background:radial-gradient(1200px 600px at 50% 20%,#ffffff59,#0000),linear-gradient(120deg,#2563eb59,#10b98140,#f59e0b40);animation:bgShift 6s ease-in-out infinite alternate;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes bgShift{0%{filter:saturate(1) brightness(1);transform:scale(1)}to{filter:saturate(1.3) brightness(1.05);transform:scale(1.02)}}.celebration-card{position:relative;width:min(720px,calc(100vw - 48px));border-radius:20px;padding:24px 20px;background:#ffffffeb;box-shadow:0 24px 80px #00000040;border:2px solid rgba(255,255,255,.65)}.sparkle{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:22px;pointer-events:none;background:conic-gradient(from 180deg,#2563eb00,#2563eb8c,#f59e0b8c,#10b9818c,#2563eb00);filter:blur(10px);opacity:.55;animation:spin 2.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.celebration-title{margin:0;font-size:1.9rem;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 0 rgba(255,255,255,.7);animation:pop .7s ease-out both}.celebration-sub{margin:10px 0 18px;font-size:1.2rem;font-weight:800;opacity:.9}@keyframes pop{0%{transform:translateY(10px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.celebration-actions{display:flex;justify-content:center;gap:12px}.pulse{animation:pulseBtn 1.1s ease-in-out infinite}@keyframes pulseBtn{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-12px;width:10px;height:18px;border-radius:3px;opacity:.95;transform:translateY(-20px) rotate(0);animation:confettiFall linear infinite}.confetti-piece:nth-child(n){left:2%;animation-duration:3.4s;animation-delay:-.2s;transform:rotate(12deg);background:#2563eb}.confetti-piece:nth-child(2n){left:8%;animation-duration:4.1s;animation-delay:-1.3s;transform:rotate(38deg);background:#10b981}.confetti-piece:nth-child(3n){left:14%;animation-duration:3.7s;animation-delay:-2.1s;transform:rotate(64deg);background:#f59e0b}.confetti-piece:nth-child(4n){left:20%;animation-duration:4.6s;animation-delay:-.9s;transform:rotate(91deg);background:#ef4444}.confetti-piece:nth-child(5n){left:26%;animation-duration:3.2s;animation-delay:-1.8s;transform:rotate(117deg);background:#a855f7}.confetti-piece:nth-child(6n){left:32%;animation-duration:4.3s;animation-delay:-.4s;transform:rotate(143deg);background:#06b6d4}.confetti-piece:nth-child(7n){left:38%;animation-duration:3.9s;animation-delay:-2.6s;transform:rotate(169deg);background:#22c55e}.confetti-piece:nth-child(8n){left:44%;animation-duration:4.9s;animation-delay:-1.1s;transform:rotate(195deg);background:#eab308}.confetti-piece:nth-child(9n){left:50%;animation-duration:3.5s;animation-delay:-2.9s;transform:rotate(221deg);background:#3b82f6}.confetti-piece:nth-child(10n){left:56%;animation-duration:4.2s;animation-delay:-.7s;transform:rotate(247deg);background:#14b8a6}.confetti-piece:nth-child(11n){left:62%;animation-duration:3.3s;animation-delay:-2s;transform:rotate(273deg);background:#fb7185}.confetti-piece:nth-child(12n){left:68%;animation-duration:4.7s;animation-delay:-1.5s;transform:rotate(299deg);background:#8b5cf6}.confetti-piece:nth-child(13n){left:74%;animation-duration:3.8s;animation-delay:-.3s;transform:rotate(325deg);background:#f97316}.confetti-piece:nth-child(14n){left:80%;animation-duration:4.4s;animation-delay:-2.4s;transform:rotate(351deg);background:#22c55e}.confetti-piece:nth-child(15n){left:86%;animation-duration:3.6s;animation-delay:-1s;transform:rotate(17deg);background:#0ea5e9}.confetti-piece:nth-child(16n){left:92%;animation-duration:4.8s;animation-delay:-2.7s;transform:rotate(44deg);background:#f59e0b}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:.95}to{transform:translateY(120vh) rotate(720deg);opacity:.95}}@media(max-width:640px){.correct-burst{top:.65rem;right:.65rem;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}.app-shell{max-width:980px;margin:0 auto;padding:1rem;text-align:center}h1{font-size:2rem;margin-bottom:.25rem}.card{position:relative;background:#fff;border-radius:16px;padding:1.2rem;box-shadow:0 8px 30px #0f172a14}.lead{margin:.25rem auto 1.25rem;font-size:1.05rem;font-weight:650}.section-label,.level-label{display:block;margin:.5rem 0 1rem;font-weight:700}.level-label select{margin-left:.5rem;max-width:min(100%,430px);font-size:1.05rem;padding:.45rem .55rem;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.mode-badge{display:inline-block;margin:0 0 .75rem;padding:.3rem .7rem;border-radius:999px;background:#e0e7ff;color:#3730a3;font-size:.88rem;font-weight:800}button{border:none;border-radius:12px;cursor:pointer;width:100%;font-weight:700;font-size:clamp(1.05rem,4.2vw,1.5rem);padding:clamp(.8rem,3.2vw,1rem) .8rem;min-height:56px;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.68}.primary-btn,.choice-btn{background:#2563eb;color:#fff}.ghost-btn{background:#fde68a;color:#92400e}.small-ghost-btn{width:auto;min-height:auto;padding:.55rem .8rem;border:1px solid #cbd5e1;background:#f8fafc;color:#475569;font-size:.88rem}.secondary-action-area{margin-top:1.3rem}.play-card{transition:box-shadow .14s ease,background-color .14s ease}.play-card-correct{animation:correctCardPulse .18s ease-out}.play-card-incorrect{animation:incorrectCardPulse .26s ease-out}@keyframes correctCardPulse{0%{box-shadow:0 8px 30px #0f172a14}45%{box-shadow:0 0 0 5px #22c55e38,0 12px 36px #22c55e33}to{box-shadow:0 8px 30px #0f172a14}}@keyframes incorrectCardPulse{0%{box-shadow:0 8px 30px #0f172a14}45%{box-shadow:0 0 0 5px #ef44442e,0 12px 36px #ef444426}to{box-shadow:0 8px 30px #0f172a14}}.play-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;text-align:left}.song-title{margin:0;font-size:1.15rem;font-weight:850}.mode-text{margin:.2rem 0 0;color:#64748b;font-size:.78rem;font-weight:700}.progress-count{margin:0;white-space:nowrap;font-size:1rem;font-weight:800}.progress-track{height:9px;margin:.7rem 0 1rem;overflow:hidden;border-radius:999px;background:#e2e8f0}.progress-track span{display:block;height:100%;border-radius:inherit;background:#2563eb;transition:width .16s ease}.target-panel{display:grid;place-items:center;min-height:clamp(150px,28vw,240px);margin:.5rem 0 1rem;padding:.8rem;border:2px solid #dbeafe;border-radius:16px;background:linear-gradient(180deg,#eff6ff,#fff)}.target-caption{align-self:end;margin:0 0 .1rem;color:#64748b;font-size:.95rem;font-weight:750}.target-note{align-self:start;margin:0;color:#0f172a;font-size:clamp(4.2rem,18vw,8.5rem);font-weight:900;line-height:1;letter-spacing:.02em}.choices-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:.5rem}.choice-btn{transition:transform .1s ease,background-color .12s ease,box-shadow .12s ease}.choice-btn:active{transform:scale(.97)}.choice-btn.choice-correct{background:#16a34a;box-shadow:0 0 0 4px #22c55e33;animation:buttonCorrect .18s ease-out}.choice-btn.choice-wrong{background:#dc2626;box-shadow:0 0 0 4px #ef44442b;animation:buttonWrong .26s ease-out}@keyframes buttonCorrect{0%{transform:scale(1)}55%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes buttonWrong{0%,to{transform:translate(0)}30%{transform:translate(-5px)}65%{transform:translate(5px)}}.feedback{min-height:1.8rem;margin:.65rem 0 0;font-size:1.05rem;font-weight:800}.feedback-correct{color:#15803d}.feedback-incorrect{color:#b91c1c}.quit-area{display:flex;justify-content:flex-end;margin-top:2.25rem}.quit-btn{width:auto;min-height:auto;padding:.35rem .65rem;border:1px solid #cbd5e1;border-radius:8px;background:transparent;color:#64748b;font-size:.78rem;font-weight:600;opacity:.85}.quit-btn:hover,.quit-btn:focus-visible{background:#f8fafc;color:#334155;opacity:1}.completion-title{margin:0 0 .3rem;font-size:1.5rem;font-weight:900}.completion-song{margin:0 0 .8rem;font-size:2rem;font-weight:900}.result-mistakes{margin:0 0 1.4rem;font-size:1.2rem;font-weight:750}.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;align-items:center}.result-actions .small-ghost-btn{grid-column:1 / -1;justify-self:center}@media(max-width:640px){.choices-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-grid,.result-actions{grid-template-columns:1fr}.result-actions .small-ghost-btn{grid-column:auto}.level-label select{display:block;width:100%;margin:.5rem 0 0}}@media(max-width:380px){.play-header{display:block}.progress-count{margin-top:.35rem}}@media(prefers-reduced-motion:reduce){.play-card,.choice-btn,.progress-track span{animation:none!important;transition:none!important}}:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif;line-height:1.4;color:#0f172a;background-color:#e2e8f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh}