:root{--bg: #0f172a;--surface: #1e293b;--surface-hover: #334155;--border: rgba(255, 255, 255, .08);--text: #f1f5f9;--text-muted: #94a3b8;--accent: #6366f1;--accent-glow: rgba(99, 102, 241, .3);--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--p1: #6366f1;--p2: #ec4899;--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.home{max-width:720px;width:100%;display:flex;flex-direction:column;gap:2.5rem;padding:1rem 0}.home-header{text-align:center}.logo-icon{font-size:4rem;margin-bottom:.5rem;filter:drop-shadow(0 0 20px var(--accent-glow))}.home-header h1{font-size:2.25rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-muted);font-size:1.05rem;margin-top:.5rem}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.mode-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;cursor:pointer;text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.75rem;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 0%,rgba(99,102,241,.05) 100%);opacity:0;transition:opacity .2s}.mode-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}.mode-card:hover:before{opacity:1}.mode-card.challenge:hover{border-color:var(--warning);box-shadow:0 8px 30px #f59e0b33}.mode-emoji{font-size:2.5rem}.mode-card h2{font-size:1.2rem;font-weight:600}.mode-card p{font-size:.85rem;color:var(--text-muted);line-height:1.5}.mode-badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:#6366f11a;border:1px solid rgba(99,102,241,.2);padding:.2rem .75rem;border-radius:999px}.mode-card.challenge .mode-badge{color:var(--warning);background:#f59e0b1a;border-color:#f59e0b33}.rules-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.rules-section h3{font-size:1rem;font-weight:600;margin-bottom:.75rem}.rules-section ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}.rules-section li{font-size:.875rem;color:var(--text-muted);padding-left:1.5rem;position:relative}.rules-section li:before{content:"•";position:absolute;left:.5rem;color:var(--accent)}.levels{max-width:640px;width:100%;display:flex;flex-direction:column;gap:1.5rem}.back-btn{align-self:flex-start;background:none;border:1px solid var(--border);color:var(--text-muted);padding:.4rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;transition:all .15s}.back-btn:hover{border-color:var(--accent);color:var(--text)}.levels h1{font-size:1.75rem;font-weight:700}.level-subtitle{color:var(--text-muted);font-size:.95rem}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}.level-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem .75rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:all .2s}.level-card:hover:not(.locked){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}.level-card.locked{opacity:.4;cursor:not-allowed}.level-number{font-size:1.5rem;font-weight:700;color:var(--accent)}.level-card.locked .level-number{font-size:1.2rem}.level-size{font-size:.75rem;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.level-pairs{font-size:.7rem;color:var(--text-muted)}.game{width:100%;max-width:640px;display:flex;flex-direction:column;gap:1rem;align-items:center}.game-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}.game-header h2{font-size:1.25rem;font-weight:600;flex:1;text-align:center}.timer{font-size:1rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--success);background:#22c55e1a;border:1px solid rgba(34,197,94,.2);padding:.3rem .75rem;border-radius:var(--radius-sm);min-width:70px;text-align:center}.timer.urgent{color:var(--danger);background:#ef44441a;border-color:#ef444433;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.scoreboard{width:100%;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.player{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem 1rem;border-radius:var(--radius-sm);transition:all .2s;min-width:100px}.player.active{background:#6366f11a;box-shadow:0 0 15px var(--accent-glow)}.player:first-child.active{background:#6366f11a}.player:last-child.active{background:#ec48991a;box-shadow:0 0 15px #ec489933}.player-name{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.player:first-child .player-name{color:var(--p1)}.player:last-child .player-name{color:var(--p2)}.player-score{font-size:1.5rem;font-weight:700}.turn-indicator{font-size:1.25rem;min-width:40px;text-align:center}.progress-bar{width:100%;height:6px;background:var(--surface);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));border-radius:999px;transition:width .4s ease}.progress-text{font-size:.8rem;color:var(--text-muted);text-align:center}.board{display:grid;gap:10px;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%}.card-cell{aspect-ratio:3 / 4;perspective:600px;cursor:pointer;background:none;border:none;padding:0;outline:none}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s ease;border-radius:var(--radius-sm)}.card-cell.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);backface-visibility:hidden;-webkit-backface-visibility:hidden}.card-front{background:linear-gradient(135deg,var(--accent),#818cf8);border:2px solid rgba(255,255,255,.15);font-size:1.5rem;font-weight:700;color:#ffffff80;box-shadow:0 2px 8px #0000004d}.card-cell:hover:not(.flipped):not(.matched) .card-front{border-color:#ffffff59;box-shadow:0 4px 16px var(--accent-glow);transform:scale(1.03)}.card-back{background:var(--bg);border:2px solid var(--border);font-size:2rem;transform:rotateY(180deg);box-shadow:0 2px 8px #0000004d}.card-cell.matched .card-back{border-color:var(--success);background:#22c55e14;box-shadow:0 0 15px #22c55e33}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;max-width:400px;width:100%;display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{font-size:1.5rem;font-weight:700}.modal p{color:var(--text-muted);font-size:.95rem}.modal-actions{display:flex;gap:.75rem;justify-content:center;margin-top:.5rem}.btn{padding:.6rem 1.5rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:all .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#818cf8;box-shadow:0 4px 12px var(--accent-glow)}.btn-secondary{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--text-muted);color:var(--text)}@media(max-width:640px){.app{padding:1rem .75rem}.home-header h1{font-size:1.75rem}.mode-cards{grid-template-columns:1fr}.level-grid{grid-template-columns:repeat(5,1fr);gap:.5rem}.level-card{padding:1rem .5rem}.card-back{font-size:1.5rem}.card-front{font-size:1.2rem}}@media(max-width:400px){.level-grid{grid-template-columns:repeat(4,1fr)}.scoreboard{gap:.5rem;padding:.5rem}.player{padding:.25rem .5rem;min-width:80px}}