:root{--bg: #f3f7fb;--card: #ffffff;--ink: #1f2933;--muted: #6b7a8d;--brand: #1e88e5;--brand-dark: #1565c0;--correct: #43a047;--correct-bg: #e8f5e9;--wrong: #e53935;--wrong-bg: #ffebee;--shadow: 0 6px 20px rgba(31, 41, 51, .12);--radius: 20px;font-family:"Baloo 2",Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.layout{height:100vh;height:100dvh;display:flex;justify-content:center;align-items:stretch;gap:clamp(6px,1.5vw,18px);overflow:hidden}.app{flex:1 1 auto;max-width:720px;height:100%;padding:12px clamp(12px,3vw,24px) 12px;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px);overflow:hidden}.collection{flex:0 0 auto;width:clamp(92px,13vw,148px);height:100%;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#ffffff8c;overflow:hidden}.collection-title{margin:0;font-size:.9rem;color:var(--muted);text-align:center}.collection-list{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;overflow:hidden}.collection-item{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:6px 4px;background:var(--card);border-radius:14px;box-shadow:var(--shadow)}.collection-item.empty{opacity:.4}.collection-art{width:clamp(40px,6vw,62px);height:auto}.collection-count{font-weight:800;font-size:.95rem;color:var(--ink)}.collection-total{margin:auto 0 0;font-size:.75rem;color:var(--muted);text-align:center}@media (max-width: 640px){.layout{flex-direction:column}.collection{width:100%;height:auto;flex-direction:row;padding:8px 10px}.collection-title{display:none}.collection-list{flex-direction:row;overflow-x:auto}.collection-item{flex-direction:row;width:auto;gap:4px}.collection-art{width:34px}.collection-total{margin:0 0 0 auto;white-space:nowrap}}.settings-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.level-badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;padding:8px 16px;border-radius:999px;font-size:1.1rem}.spacer{flex:1}.icon-btn{border:none;background:var(--card);box-shadow:var(--shadow);border-radius:14px;width:52px;height:52px;font-size:1.5rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .08s ease}.icon-btn:active{transform:scale(.92)}.icon-btn.off{opacity:.45}.voice-note{flex-basis:100%;margin:4px 0 0;color:var(--muted);font-size:.85rem;line-height:1.3}.progress{display:flex;align-items:center;gap:10px;justify-content:center}.dot{width:22px;height:22px;border-radius:50%;background:#d7e2ee;transition:transform .2s ease,background .2s ease}.dot.filled{background:var(--correct);transform:scale(1.12)}.progress-label{color:var(--muted);font-size:.95rem;margin-left:6px}.picture-card{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);flex:1 1 0;min-height:120px;display:flex;align-items:center;justify-content:center;padding:16px}.picture-card svg{max-height:100%;max-width:100%}.picture-card--scene{gap:12px}.picture-slot{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}.prompt{text-align:center;color:var(--muted);font-size:1.15rem;margin:0}.prompt.retry{color:#ff8f00;font-weight:800}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.option-btn{border:3px solid transparent;background:var(--card);box-shadow:var(--shadow);border-radius:18px;min-height:clamp(60px,9vh,92px);padding:14px 12px;font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:700;color:var(--ink);cursor:pointer;transition:transform .08s ease,border-color .15s ease,background .15s ease}.option-btn:hover:not(:disabled){border-color:#bcd6f2}.option-btn:active:not(:disabled){transform:scale(.97)}.option-btn:disabled{cursor:default}.option-btn.correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}.option-btn.wrong{background:var(--wrong-bg);border-color:var(--wrong);color:var(--wrong)}.option-btn.dim{opacity:.5}@media (max-width: 380px){.options-grid{grid-template-columns:1fr}}.match-board{position:relative;flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,12vw,120px);row-gap:clamp(6px,1.2vh,14px);padding:4px clamp(4px,2vw,16px);touch-action:none;-webkit-user-select:none;user-select:none}.match-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}.match-line{fill:none;stroke-linecap:round}.match-line.active{stroke:var(--brand);stroke-width:5;stroke-dasharray:9 9}.match-line.done{stroke:var(--correct);stroke-width:6}.match-line.reveal{stroke:var(--correct);stroke-width:5;stroke-dasharray:8 7;opacity:.85}.match-cell{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;background:var(--card);border:3px solid transparent;border-radius:16px;box-shadow:var(--shadow)}.match-pic{padding:6px;cursor:grab;touch-action:none}.match-pic:active{cursor:grabbing}.match-pic svg{max-width:100%;max-height:100%}.match-word{padding:8px 10px;font-size:clamp(1.05rem,3.6vw,1.7rem);font-weight:700;color:var(--ink);text-align:center}.match-cell.done{border-color:var(--correct);background:var(--correct-bg)}.match-word.done{color:var(--correct)}.match-cell.reveal{border-color:var(--correct);border-style:dashed;background:var(--correct-bg)}.match-word.reveal{color:var(--correct)}.match-word.wrong{border-color:var(--wrong);background:var(--wrong-bg);color:var(--wrong);animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.reward-panel{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}.reward-svg{height:clamp(62px,12vh,108px);width:auto;max-width:100%}.reward-caption{margin:0;font-size:.8rem;font-weight:700;color:var(--muted)}.reward-celebration{flex-direction:column}.reward-banner{background:linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa)}.confetti{position:absolute;top:-12%;font-size:clamp(1.6rem,6vw,2.6rem);animation:fall 1.2s ease-in forwards}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}to{transform:translateY(115vh) rotate(360deg);opacity:1}}.feedback{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}.feedback-bubble{font-size:clamp(3.5rem,18vw,8rem);animation:pop .5s ease}.feedback-banner{background:var(--brand);color:#fff;padding:16px 28px;border-radius:999px;font-size:clamp(1.4rem,6vw,2rem);font-weight:800;box-shadow:var(--shadow);animation:pop .5s ease}.feedback-banner.demote{background:#ff8f00}@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.footer-note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:auto}