:root{--bg: #f4ecd8;--bg-2: #ece0c4;--ink: #3b3024;--ink-soft: #7a6a52;--card-back: #b9a983;--card-back-2: #a8966e;--card-face: #fffaf0;--accent: #e07a5f;--good: #81b29a;--font-display: "Silkscreen", "Courier New", monospace;--font-body: "Nunito", system-ui, sans-serif;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--radius: 10px;--flip-ms: .2s;--reaction-ms: .4s;--board-max: 460px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(circle at 50% 0%,var(--bg) 0%,var(--bg-2) 100%);display:grid;place-items:center;padding:env(safe-area-inset-top) var(--s-4) env(safe-area-inset-bottom)}#app{width:100%;max-width:var(--board-max)}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}.title{font-family:var(--font-display);font-size:clamp(18px,6vw,28px);letter-spacing:1px;margin:0;color:var(--ink)}.controls{display:flex;gap:var(--s-2)}.icon-btn{font:inherit;font-size:20px;line-height:1;width:44px;height:44px;border:2px solid var(--card-back);background:var(--card-face);border-radius:var(--radius);color:var(--ink);cursor:pointer;display:grid;place-items:center}.icon-btn:hover{border-color:var(--accent)}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2.5vw,12px);width:100%}.card{font:inherit;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1 / 1;min-width:44px;position:relative;perspective:600px}.card-inner{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transition:transform var(--flip-ms) ease}.card.up .card-inner,.card.solved .card-inner{transform:rotateY(180deg)}.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:var(--radius);display:grid;place-items:center;overflow:hidden}.face-back{background:linear-gradient(150deg,var(--card-back) 0%,var(--card-back-2) 100%);border:2px solid var(--card-back-2);box-shadow:inset 0 -3px #0000001f}.face-back:after{content:"♪";font-family:var(--font-display);color:#ffffff8c;font-size:40%}.face-front{transform:rotateY(180deg);background:var(--card-face);border:2px solid var(--card-back)}.face-front img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:clamp(22px,9vw,44px)}@keyframes wobble{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}.card:not(.up):not(.solved) .card-inner{animation:wobble 2.6s ease-in-out infinite;will-change:transform}.board.resolving .card:not(.up):not(.solved) .card-inner{animation-play-state:paused}@keyframes pop{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.12)}to{transform:rotateY(180deg) scale(1)}}.card.solved .card-inner{animation:pop var(--reaction-ms) ease}.card.solved .face-front{border-color:var(--good);box-shadow:0 0 0 3px #81b29a80}.card:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.melody{display:flex;gap:var(--s-1);justify-content:center;margin-top:var(--s-4);min-height:16px}.note-dot{width:10px;height:10px;border-radius:50%;background:var(--card-back);opacity:.4;transition:opacity .2s ease,background .2s ease,transform .2s ease}.note-dot.filled{background:var(--accent);opacity:1;transform:scale(1.15)}.hint{text-align:center;color:var(--ink-soft);font-weight:600;margin-top:var(--s-3);min-height:1.2em;transition:opacity .5s ease}.hint.hide{opacity:0;pointer-events:none}.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;left:50%;top:50%;animation:burst var(--reaction-ms) ease-out forwards}@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}.win{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#3b30248c;opacity:0;pointer-events:none;transition:opacity .4s ease}.win.show{opacity:1;pointer-events:auto}.win-card{background:var(--bg);border:3px solid var(--card-back);border-radius:16px;padding:var(--s-6);text-align:center;max-width:320px}.win-card h2{font-family:var(--font-display);color:var(--accent);margin:0 0 var(--s-3)}.win-card p{color:var(--ink-soft);margin:0 0 var(--s-5)}.btn{font:inherit;font-weight:800;padding:var(--s-3) var(--s-5);min-height:44px;border:0;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer}.btn:hover{filter:brightness(1.05)}@media (prefers-reduced-motion: reduce){.card-inner{transition:none}.card:not(.up):not(.solved) .card-inner,.card.solved .card-inner{animation:none}.particle{display:none}}