:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.tag{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:#ffffff8c;border:1px solid rgba(255,255,255,.12);padding:.25rem .5rem;border-radius:.25rem;margin-bottom:1rem}.game-container{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}.header{text-align:center;margin-bottom:2rem}.header h1{margin:0 0 .5rem;font-size:2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#ff9a9e,#fad0c4,#a1c4fd,#c2e9fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin:0;color:#fff9;font-size:.95rem}.stats-bar{display:flex;gap:2rem;margin-bottom:2rem;padding:1rem 2rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.5rem;font-weight:700;color:#fad0c4}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff73}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.level-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;color:#fafafa;cursor:pointer;transition:all .2s;font-family:inherit}.level-btn:hover:not(.locked){background:#ffffff14;border-color:#ffc8b44d;transform:translateY(-2px)}.level-btn.current{border-color:#ffb49666;background:#ffc8b40f}.level-btn.locked{opacity:.35;cursor:not-allowed}.level-num{font-size:1.5rem;font-weight:700}.level-name{font-size:.8rem;font-weight:600}.level-info{font-size:.65rem;color:#ffffff73}.best-score{color:#f0c040}.playing-container{gap:1.5rem}.play-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 .25rem}.play-header-left{display:flex;align-items:center;gap:.75rem}.btn-icon{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:background .2s}.btn-icon:hover{background:#ffffff1f}.level-title{margin:0;font-size:1.1rem;font-weight:600}.level-subtitle{margin:0;font-size:.75rem;color:#ffffff73}.play-stats{display:flex;gap:1.25rem}.play-stat{display:flex;flex-direction:column;align-items:center}.play-stat-val{font-size:1.1rem;font-weight:700;color:#a1c4fd}.play-stat-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff59}.card-grid{display:grid;gap:.75rem;width:100%;margin:0 auto}.flip-card{aspect-ratio:1;perspective:600px;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}.flip-card:disabled{cursor:default}.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s ease;border-radius:.75rem}.flip-card.flipped .flip-inner,.flip-card.matched .flip-inner{transform:rotateY(180deg)}.flip-front,.flip-back{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:.75rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:2rem;font-weight:700}.flip-front{background:linear-gradient(145deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.1);color:#ffffff40;font-size:1.5rem}.flip-card:hover .flip-front:not(.flipped){border-color:#ffc8b440;background:linear-gradient(145deg,#1e1e35,#1a2745)}.flip-back{background:linear-gradient(145deg,#1a2a1a,#0f2318);border:1px solid rgba(100,255,150,.15);transform:rotateY(180deg);font-size:2.5rem}.flip-card.matched .flip-back{background:linear-gradient(145deg,#1a2a1a,#0f2318);border-color:#64ff9659;box-shadow:0 0 20px #64ff9614}.complete-screen{text-align:center;gap:1.5rem}.complete-animals{font-size:3rem;display:flex;gap:.5rem;justify-content:center}.complete-screen h1{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#f0c040,#ff9a9e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.complete-stats{display:flex;gap:2rem;justify-content:center;padding:1.25rem 2rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem}.complete-stat{display:flex;flex-direction:column;align-items:center}.total-score-line{margin:0;color:#ffffff8c;font-size:.9rem}.complete-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{padding:.65rem 1.5rem;border-radius:.5rem;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;border:1px solid transparent}.btn-primary{background:linear-gradient(135deg,#ff9a9e,#fad0c4);color:#1a1a1a;border-color:transparent}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #ff9a9e4d}.btn-secondary{background:#ffffff0f;color:#fafafa;border:1px solid rgba(255,255,255,.12)}.btn-secondary:hover{background:#ffffff1f}@media(max-width:480px){.shell{padding:1rem}.header h1{font-size:1.5rem}.level-grid{grid-template-columns:repeat(2,1fr)}.stats-bar{gap:1.5rem;padding:.75rem 1.25rem}.play-header{flex-direction:column;gap:.75rem}.flip-front,.flip-back{font-size:1.5rem}.flip-back{font-size:2rem}.complete-stats{gap:1.25rem;padding:1rem}}