:root{--color-bg: #0f172a;--color-text: #f8fafc;--color-primary: #3b82f6;--color-secondary: #ec4899;--color-accent: #8b5cf6;--color-success: #22c55e;--color-error: #ef4444;--color-warning: #f59e0b;--color-surface: rgba(30, 41, 59, .95);--color-surface-solid: #1e293b;--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);line-height:1.5;font-weight:400;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}#root{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.app{width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;justify-content:center;position:relative}.screen{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;animation:fadeIn .3s ease-out;padding:1rem}.start-screen{justify-content:center;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460)}.start-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.title{font-size:2.5rem;font-weight:800;margin-bottom:.25rem;background:linear-gradient(135deg,gold,#ff6b6b,#4ecdc4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;text-shadow:0 0 40px rgba(255,215,0,.3)}.subtitle{color:#94a3b8;margin-bottom:1rem;text-align:center;font-size:1.1rem}.high-score-badge{background:linear-gradient(135deg,var(--color-accent),var(--color-secondary));padding:.5rem 1.5rem;border-radius:20px;font-weight:700;font-size:.9rem;margin-bottom:1rem}.menu{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:320px}.start-tips{margin-top:2rem;color:#64748b;font-size:.85rem;text-align:center}.btn{padding:1rem 2rem;border-radius:16px;font-size:1.1rem;font-weight:600;transition:all .2s ease;width:100%;text-align:center;cursor:pointer;border:none;display:flex;flex-direction:column;gap:.25rem}.btn:active{transform:scale(.97)}.btn-desc{font-size:.75rem;opacity:.7;font-weight:400}.btn.primary{background:linear-gradient(135deg,var(--color-primary),#2563eb);color:#fff;box-shadow:0 4px 15px #3b82f666}.btn.primary:hover{box-shadow:0 6px 20px #3b82f680;transform:translateY(-2px)}.btn.secondary{background:var(--color-surface-solid);color:var(--color-text);border:2px solid #334155}.btn.outline{background:transparent;border:2px solid #475569;color:#94a3b8}.btn.submit-btn{background:linear-gradient(135deg,var(--color-success),#16a34a);color:#fff;margin-top:1rem;box-shadow:0 4px 15px #22c55e4d}.game-screen{background-size:cover;background-position:center;padding:0;position:relative}.game-overlay{width:100%;height:100%;background:linear-gradient(180deg,#000000b3,#0006,#000c);display:flex;flex-direction:column;padding:1rem}.game-hud{width:100%;display:flex;flex-direction:column;gap:.75rem}.hud-top{display:flex;justify-content:space-between;align-items:center}.hud-lives{display:flex;gap:4px}.heart-icon{width:28px;height:28px;transition:all .3s ease}.heart-icon.empty{opacity:.3;filter:grayscale(100%)}.hud-stats{display:flex;flex-direction:column;align-items:center}.hud-level{font-size:.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}.hud-score{display:flex;align-items:center;gap:.5rem}.score-value{font-size:1.5rem;font-weight:800;color:#fff}.combo-badge{background:linear-gradient(135deg,var(--color-warning),#d97706);padding:.15rem .5rem;border-radius:8px;font-size:.75rem;font-weight:700;animation:pulse .5s ease infinite}.hud-coins{display:flex;align-items:center;gap:.35rem;background:#0000004d;padding:.35rem .75rem;border-radius:20px}.coin-icon{width:24px;height:24px}.hud-coins span{font-weight:700;color:gold}.hud-powerups{display:flex;justify-content:center;gap:.75rem}.powerup-btn{position:relative;width:50px;height:50px;border-radius:12px;background:var(--color-surface);border:2px solid #334155;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.powerup-btn.available{border-color:var(--color-accent);box-shadow:0 0 10px #8b5cf64d}.powerup-btn.available:hover{transform:scale(1.1);box-shadow:0 0 15px #8b5cf680}.powerup-btn.disabled{opacity:.5;cursor:not-allowed}.powerup-icon{width:30px;height:30px}.powerup-count{position:absolute;bottom:-5px;right:-5px;background:var(--color-primary);color:#fff;font-size:.7rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.game-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.character-container{animation:float 3s ease-in-out infinite}.character{transition:all .3s ease}.character-happy{animation:bounce .5s ease}.character-sad{animation:shake .5s ease}.character-thinking{animation:float 2s ease-in-out infinite}.game-area{width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:200px}.flash-card{background:var(--color-surface);padding:2rem 1.5rem;border-radius:20px;width:100%;text-align:center;box-shadow:0 10px 40px #00000080;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.1)}.sequence{font-size:2.5rem;font-weight:900;letter-spacing:6px;font-family:Courier New,monospace;background:linear-gradient(135deg,gold,#ff6b6b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(255,215,0,.3)}.timer-bar{position:absolute;bottom:0;left:0;height:6px;background:linear-gradient(90deg,var(--color-secondary),var(--color-accent));width:100%;animation:shrink linear forwards;border-radius:0 0 20px 20px}.input-area{width:100%;display:flex;flex-direction:column;gap:.5rem}.reveal-hint{background:var(--color-surface);padding:1rem;border-radius:12px;margin-bottom:.5rem;animation:pulse .5s ease}.reveal-sequence{font-size:2rem}.input-timer{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;width:100%}.timer-text{font-size:1.5rem;font-weight:700;color:var(--color-primary);transition:color .3s ease}.timer-text.timer-warning{color:var(--color-error);animation:pulse .5s ease infinite}.input-timer-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.input-timer-progress{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:4px;transition:width .1s linear}.input-timer-progress.timer-warning{background:linear-gradient(90deg,var(--color-error),var(--color-warning))}.game-input{width:100%;padding:1.25rem;font-size:1.75rem;text-align:center;background:var(--color-surface);color:#fff;border-radius:16px;border:3px solid var(--color-primary);letter-spacing:4px;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase}.game-input:focus{outline:none;box-shadow:0 0 0 4px #3b82f64d;border-color:var(--color-accent)}.game-input::placeholder{letter-spacing:1px;text-transform:none;font-weight:400;opacity:.5}.feedback-card{background:var(--color-surface);padding:2rem;border-radius:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:200px}.feedback-card.correct{border:3px solid var(--color-success);box-shadow:0 0 30px #22c55e66}.feedback-card.wrong{border:3px solid var(--color-error);box-shadow:0 0 30px #ef444466}.feedback-emoji{font-size:2rem;font-weight:900}.feedback-card.correct .feedback-emoji{color:var(--color-success)}.feedback-card.wrong .feedback-emoji{color:var(--color-error)}.feedback-text{font-size:1.5rem;font-weight:700}.combo-text{color:var(--color-warning);font-weight:700;animation:pulse .3s ease infinite}.correct-answer{color:#94a3b8;font-family:monospace;letter-spacing:2px}.game-over-screen{justify-content:center;background:linear-gradient(180deg,#1a1a2e,#16213e);gap:1rem}.game-over-title{background:linear-gradient(135deg,var(--color-error),#dc2626);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.new-record-badge{background:linear-gradient(135deg,gold,#f59e0b);color:#1a1a2e;padding:.5rem 1.5rem;border-radius:20px;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:1px}.stats-card{background:var(--color-surface-solid);padding:1.5rem;border-radius:20px;width:100%;max-width:320px;display:flex;justify-content:space-around;border:2px solid #334155}.stat{display:flex;flex-direction:column;align-items:center}.stat .label{color:#64748b;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.stat .value{font-size:2.5rem;font-weight:800;color:var(--color-text)}.stat .value.highlight{color:var(--color-warning)}.stats-row{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.mini-stat{background:var(--color-surface-solid);padding:.75rem 1rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:.25rem}.mini-label{font-size:.65rem;color:#64748b;text-transform:uppercase}.mini-value{font-size:1.1rem;font-weight:700}.coins-earned{flex-direction:row;gap:.5rem}.coins-earned .mini-value{color:gold}.mini-coin{width:20px;height:20px}.share-section{width:100%;max-width:320px;text-align:center;margin-bottom:.5rem}.share-label{color:#94a3b8;font-size:.85rem;margin-bottom:.75rem}.share-buttons{display:flex;gap:.75rem;justify-content:center}.share-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:12px;border:none;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.share-btn:active{transform:scale(.95)}.share-btn svg{flex-shrink:0}.share-btn.whatsapp{background:#25d366;color:#fff}.share-btn.whatsapp:hover{background:#1da851;box-shadow:0 4px 15px #25d36666}.share-btn.facebook{background:#1877f2;color:#fff}.share-btn.facebook:hover{background:#0d65d9;box-shadow:0 4px 15px #1877f266}.actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.75rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shrink{0%{width:100%}to{width:0%}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-15px)}50%{transform:translateY(0)}75%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.fade-in{animation:fadeIn .3s ease-out}.shake{animation:shake .5s ease}.pulse{animation:pulse 1s ease infinite}.landing-page{min-height:100vh;width:100%;max-width:none;background-size:cover;background-position:center;background-attachment:fixed;overflow-y:auto}.landing-overlay{min-height:100vh;background:linear-gradient(180deg,#0f172ad9,#1e1b4be6 30%,#0f172af2);padding:2rem 1rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.landing-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:2rem}.hero-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.hero-text{margin-top:1rem}.landing-title{font-size:3rem;background:linear-gradient(135deg,gold,#ff6b6b,#4ecdc4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(255,215,0,.3);margin-bottom:.25rem}.landing-tagline{font-size:1.5rem;font-weight:700;color:gold;margin-bottom:.5rem;animation:pulse 2s ease-in-out infinite}.landing-subtitle{color:#94a3b8;font-size:1rem;margin-bottom:1.5rem;max-width:350px}.stats-banner{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;background:var(--color-surface);padding:.75rem 1rem;border-radius:12px;min-width:100px;border:1px solid #334155}.stat-item.highlight{border-color:gold;background:linear-gradient(135deg,rgba(255,215,0,.1),transparent)}.stat-icon{font-size:1.5rem}.stat-value{font-size:1.25rem;font-weight:800;color:#fff}.stat-item.highlight .stat-value{color:gold}.stat-label{font-size:.7rem;color:#64748b;text-transform:uppercase}.play-btn{max-width:300px}.pulse-animation{animation:pulse 2s ease-in-out infinite}.ranking-section{max-width:500px;margin:2rem auto}.ranking-tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}.tab-btn{background:var(--color-surface-solid);border:2px solid #334155;border-radius:12px;padding:.75rem 1rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:all .2s ease;min-width:100px}.tab-btn:hover{border-color:#475569}.tab-btn.active{border-color:var(--color-primary);background:linear-gradient(135deg,rgba(59,130,246,.2),transparent)}.tab-icon{font-size:1.5rem}.tab-text{font-size:.75rem;color:#94a3b8;font-weight:600}.tab-btn.active .tab-text{color:#fff}.ranking-content{background:var(--color-surface-solid);border-radius:20px;padding:1.5rem;border:1px solid #334155}.ranking-title{text-align:center;font-size:1.25rem;margin-bottom:1.5rem;background:linear-gradient(135deg,gold,#f59e0b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.podium{display:flex;justify-content:center;align-items:flex-end;gap:.5rem;margin-bottom:1.5rem}.podium-place{display:flex;flex-direction:column;align-items:center;width:100px}.podium-1{order:2}.podium-2{order:1}.podium-3{order:3}.podium-medal{font-size:2rem;margin-bottom:.5rem}.podium-player{display:flex;flex-direction:column;align-items:center;gap:.25rem}.podium-flag{font-size:1.5rem}.podium-name{font-size:.85rem;font-weight:700;color:#fff;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-score{font-size:1rem;font-weight:800;color:gold;margin:.25rem 0}.podium-pedestal{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px 8px 0 0;margin-top:.25rem}.podium-1 .podium-pedestal{height:80px;background:linear-gradient(180deg,gold,#b8860b)}.podium-2 .podium-pedestal{height:60px;background:linear-gradient(180deg,silver,gray)}.podium-3 .podium-pedestal{height:45px;background:linear-gradient(180deg,#cd7f32,#8b4513)}.podium-rank{font-size:1.25rem;font-weight:900;color:#00000080}.challenge-section{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin:2rem auto;max-width:500px}.challenge-card{background:var(--color-surface-solid);padding:1.25rem;border-radius:16px;text-align:center;width:140px;border:1px solid #334155;transition:all .2s ease}.challenge-card:hover{transform:translateY(-5px);border-color:var(--color-accent)}.challenge-icon{font-size:2rem;display:block;margin-bottom:.5rem}.challenge-card h3{font-size:.9rem;margin-bottom:.25rem;color:#fff}.challenge-card p{font-size:.7rem;color:#64748b}.empty-leaderboard{text-align:center;padding:2rem}.empty-icon{font-size:3rem;display:block;margin-bottom:1rem}.empty-cta{color:var(--color-primary);font-weight:600;margin-top:.5rem}.loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem}.leaderboard-section{max-width:500px;margin:0 auto}.leaderboard-title{text-align:center;font-size:1.5rem;margin-bottom:1rem;background:linear-gradient(135deg,gold,#f59e0b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.leaderboard-table{background:var(--color-surface-solid);border-radius:16px;overflow:hidden;border:1px solid #334155}.leaderboard-header{display:grid;grid-template-columns:50px 1fr 80px 80px;padding:.75rem 1rem;background:#0000004d;font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:1px}.leaderboard-row{display:grid;grid-template-columns:50px 1fr 80px 80px;padding:.75rem 1rem;border-bottom:1px solid #334155;align-items:center}.leaderboard-row:last-child{border-bottom:none}.leaderboard-row.rank-gold{background:linear-gradient(90deg,rgba(255,215,0,.1),transparent)}.leaderboard-row.rank-silver{background:linear-gradient(90deg,rgba(192,192,192,.1),transparent)}.leaderboard-row.rank-bronze{background:linear-gradient(90deg,rgba(205,127,50,.1),transparent)}.col-rank{font-weight:700;text-align:center}.rank-medal{font-size:1.2rem}.col-player{display:flex;align-items:center;gap:.5rem}.player-flag{font-size:1.2rem}.player-name{font-weight:600;color:#fff}.col-score,.col-games{text-align:center;font-weight:600}.col-score{color:gold}.col-games{color:#64748b}.leaderboard-table.compact{margin-top:1rem}.leaderboard-row-compact{display:flex;align-items:center;padding:.4rem .75rem;border-bottom:1px solid #334155;font-size:.8rem}.leaderboard-row-compact:last-child{border-bottom:none}.col-rank-sm{width:30px;font-weight:600;color:#94a3b8;text-align:center}.col-player-sm{flex:1;display:flex;align-items:center;gap:.4rem;min-width:0}.player-flag-sm{font-size:.9rem;flex-shrink:0}.player-name-sm{font-weight:500;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-score-sm{width:60px;text-align:right;font-weight:600;color:gold}.loading,.empty-leaderboard{text-align:center;padding:2rem;color:#64748b}.landing-footer{text-align:center;margin-top:3rem;padding:1rem;color:#475569;font-size:.85rem}.footer-share{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.75rem}.footer-share span{font-size:.8rem;color:#64748b}.footer-share-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.footer-share-btn:active{transform:scale(.9)}.footer-share-btn.whatsapp{background:#25d366;color:#fff}.footer-share-btn.whatsapp:hover{background:#1da851;box-shadow:0 2px 10px #25d36666}.footer-share-btn.facebook{background:#1877f2;color:#fff}.footer-share-btn.facebook:hover{background:#0d65d9;box-shadow:0 2px 10px #1877f266}.auth-screen{background:linear-gradient(180deg,#1a1a2e,#16213e);position:relative}.back-btn{position:absolute;top:1rem;left:1rem;background:transparent;border:none;color:#94a3b8;font-size:1rem;cursor:pointer;padding:.5rem}.back-btn:hover{color:#fff}.auth-content{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:360px}.auth-subtitle{color:#94a3b8;text-align:center;margin-bottom:1rem}.auth-form{width:100%;display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.85rem;color:#94a3b8;font-weight:600}.input-group input{width:100%;padding:1rem;font-size:1rem;background:var(--color-surface-solid);border:2px solid #334155;border-radius:12px;color:#fff}.input-group input:focus{outline:none;border-color:var(--color-primary)}.input-group input::placeholder{color:#64748b}.code-input{font-size:1.5rem!important;text-align:center;letter-spacing:8px;font-family:monospace}.error-message{background:#ef44441a;border:1px solid var(--color-error);color:var(--color-error);padding:.75rem;border-radius:8px;font-size:.9rem;text-align:center}.user-header{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;align-items:center}.user-info{display:flex;flex-direction:column}.user-nickname{font-weight:700;color:var(--color-primary)}.user-stats{font-size:.75rem;color:#64748b}.logout-btn{background:transparent;border:1px solid #475569;color:#94a3b8;padding:.5rem 1rem;border-radius:8px;font-size:.85rem;cursor:pointer}.logout-btn:hover{border-color:var(--color-error);color:var(--color-error)}.loading-screen{justify-content:center;align-items:center;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid #334155;border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}.modal-content{background:var(--color-surface-solid);border-radius:20px;padding:2rem;width:100%;max-width:400px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.modal-title{text-align:center;font-size:1.5rem;background:linear-gradient(135deg,gold,#f59e0b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.ranking-list{display:flex;flex-direction:column;gap:.5rem}.ranking-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#0003;border-radius:12px;border:1px solid transparent}.ranking-item.is-me{border-color:var(--color-primary);background:#3b82f61a}.rank-pos{font-weight:700;min-width:35px;text-align:center}.rank-flag{font-size:1.25rem}.rank-name{flex:1;font-weight:600;color:#fff}.rank-score{font-weight:800;color:gold}.profile-message{padding:.75rem;border-radius:8px;text-align:center;font-size:.9rem}.profile-message.success{background:#22c55e1a;color:var(--color-success);border:1px solid var(--color-success)}.profile-message.error{background:#ef44441a;color:var(--color-error);border:1px solid var(--color-error)}@media(max-width:400px){.title{font-size:2rem}.sequence{font-size:2rem;letter-spacing:4px}.game-input{font-size:1.5rem;padding:1rem}.stat .value{font-size:2rem}.powerup-btn{width:45px;height:45px}.powerup-icon{width:25px;height:25px}}