:root{--brand-brown: #8C4A1F;--brand-blue: #02A2EC;--brand-sky: #C8E8F6;--brand-correct:#6aaa64;--brand-absent:#787c7e;--vintage-present:#E7C45A;--text-main: var(--brand-brown);--bg-main: var(--brand-sky);--surface: #ffffff;--historia-primary: #8c4a1f;--historia-accent: #d6a77a;--historia-border: rgba(140, 74, 31, .25);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body[data-theme=dark]{background:#121212;color:#e8e8e8}body[data-theme=dark] .letter-box{border:2px solid #ccc!important}body[data-theme=dark] .key{background:#2b2b2b!important;border:none!important;color:#e8e8e8}body[data-theme=dark] .nav-main{background:#121212;box-shadow:none!important}body[data-theme=dark] .nav-title{background:linear-gradient(135deg,#a78bfa,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-layout{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:80vh}.grid{display:flex;flex-direction:column;gap:8px;align-items:center}.row{display:flex;gap:10px}.letter-box{width:50px;height:50px;border-radius:5px;border:2px solid rgba(140,74,31,.25);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;text-transform:uppercase;transform-style:preserve-3d;backface-visibility:hidden;transition:background-color .2s ease}.letter-box.active{border-color:#8c4a1f;box-shadow:0 0 6px #8c4a1f;transform:scale(1.05);transition:all .15s ease}.letter-box.correct{background-color:var(--brand-correct);border-color:var(--brand-correct);color:#fff}.letter-box.present{background-color:var(--vintage-present);border-color:var(--vintage-present);color:#fff}.letter-box.absent{background-color:var(--brand-absent);border-color:var(--brand-absent);color:#fff}.grid:focus{outline:none}.letter-box.reveal{animation:flip .4s ease-out forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(180deg);background-color:var(--target-color, #111)}to{transform:rotateX(360deg)}}.keyboard{margin:16px auto 0;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:540px}.keyboard-row{display:flex;gap:8px;justify-content:center}.key{flex:0 0 auto;width:40px;height:48px;border-radius:10px;background-color:var(--brand-brown);color:#fff;border:1px solid rgba(140,74,31,.25);box-shadow:0 2px #8c4a1f26;font-weight:700;font-size:16px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .05s ease,background .2s ease,box-shadow .2s ease}.key:hover{background:#aa5b26;transform:translateY(-2px)}.key:active{transform:translateY(1px);box-shadow:0 1px #8c4a1f33}.key.wide{width:80px}.key.correct{background:var(--brand-brown);color:#fff;border-color:var(--brand-brown)}.key.present{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}.key.absent{background:#e8eef2;color:#8a8f94;border-color:#d7dde2}@media(max-width:768px){.keyboard{max-width:470px;gap:8px}.key{width:40px;height:52px;font-size:15px}.key.wide{width:72px}}@media(max-width:480px){.keyboard{max-width:360px;gap:6px}.key{width:34px;height:46px;font-size:14px;border-radius:8px}.key.wide{width:64px}}.grid{margin:0 auto 10px}.main-menu{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding-top:60px;text-align:center}.main-menu__greeting{font-size:2rem;color:#666;margin-bottom:30px;line-height:1.4}.main-menu__modes{display:flex;flex-direction:column;gap:20px;width:80%;max-width:400px}.mode-btn{width:100%;height:80px;background:var(--brand-blue);border:none;border-radius:6px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .1s ease,background .3s}.mode-btn:hover{transform:scale(1.03)}.main-menu__bottom{margin-top:40px;display:flex;flex-direction:column;gap:12px}.bottom-row{display:flex;justify-content:center;gap:12px}.secondary-btn{background:#7e9742;color:#fff;border:none;padding:10px 20px;border-radius:4px;font-weight:700;cursor:pointer;transition:background .3s}.secondary-btn:hover{background:#96b35d}.login-container{display:flex;justify-content:center;align-items:center;width:100%}.login-box{background-color:var(--surface);padding:2rem 2.5rem;border-radius:12px;box-shadow:0 4px 25px #8c4a1f1f;width:100%;max-width:400px;text-align:center;border:1px solid rgba(2,162,236,.15)}.login-logo{width:50px;margin-bottom:1rem}.login-box h2{font-size:1.5rem;margin-bottom:1.5rem;color:var(--brand-brown)}.login-box input{width:100%;padding:.75rem;margin-top:.3rem;margin-bottom:1rem;border:1px solid rgba(140,74,31,.35);border-radius:8px;background-color:#fff;color:var(--brand-brown);font-size:1rem;outline:none}.login-box input::placeholder{color:#8c4a1f99}.login-box input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px #02a2ec40}.login-box button{width:100%;padding:.75rem;background-color:var(--brand-blue);border:none;border-radius:8px;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease,background .3s ease;box-shadow:0 6px 16px #02a2ec4d}.login-box button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #02a2ec59;background-color:var(--brand-brown)}.error{color:var(--brand-brown);font-size:.9rem;margin-bottom:1rem}.register-link{margin-top:1.2rem;font-size:.9rem}.register-link a{color:var(--brand-blue);text-decoration:none}.register-link a:hover{text-decoration:underline}.divider{position:relative;margin:16px 0 8px;text-align:center;color:#8c4a1f99}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:#8c4a1f33}.divider:before{left:0}.divider:after{right:0}.divider span{padding:0 .5rem;background:var(--surface)}.social-container{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}.social-btn{width:100%;padding:.75rem;border-radius:10px;border:1px solid rgba(140,74,31,.25);background:#fff;color:var(--brand-brown);font-weight:600;display:flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;transition:transform .05s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 2px #8c4a1f1f}.social-btn:hover{background:var(--brand-sky)}.social-btn:active{transform:translateY(1px)}.social-btn.google .social-ico{font-weight:800}.social-btn.apple{background:#000;color:#fff;border-color:#000}.social-btn.apple:hover{background:#111}.social-ico{font-size:18px;line-height:1}.terms{margin-top:6px;font-size:.85rem;color:#8c4a1fcc}.terms a{color:var(--brand-blue);text-decoration:none}.terms a:hover{text-decoration:underline}.settings-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9000;display:flex;align-items:center;justify-content:center}.settings-popover{width:300px;background:var(--popover-bg, #fff);color:var(--popover-text, #111);border-radius:14px;padding:20px;border:1px solid rgba(0,0,0,.1);box-shadow:0 8px 24px #0003;animation:popCenter .18s ease-out;z-index:9999}@keyframes popCenter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.setting-item{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.setting-row{display:flex;flex-direction:column;gap:10px}.setting-btn-claro{background-color:#00f}.setting-btn-oscuro{background-color:#000}.ranking-overlay{position:fixed;top:0;left:0;height:100vh;width:100%;background:#0006;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:3000}.ranking-overlay.open{opacity:1;pointer-events:auto}.ranking-panel{position:absolute;top:0;left:-320px;width:320px;height:100%;background:#1f1f1f;color:#fff;padding:20px;border-right:2px solid #333;transition:left .3s ease;overflow-y:auto}.ranking-overlay.open .ranking-panel{left:0}.ranking-header{display:flex;justify-content:space-between;align-items:center}.close-btn{background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.ranking-list{list-style:none;padding:0;margin-top:20px}.ranking-list li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.rank{font-weight:700;color:gold}.points{color:#6aaa64}.tematico-hub{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}.tematico-title{font-size:1.5rem;margin-bottom:30px;color:#fff}.temas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;width:80%;max-width:600px}.tema-btn{background:var(--brand-blue);border:none;border-radius:8px;padding:16px;font-size:1.1rem;cursor:pointer;transition:transform .15s ease,background .3s}.tema-btn:hover{transform:scale(1.05);background:#bfe8f5}.volver-btn{margin-top:40px;background:#7e9742;color:#fff;border:none;padding:10px 24px;border-radius:6px;cursor:pointer;transition:background .3s}.volver-btn:hover{background:#96b35d}body.historia-mode{background:#f8f5f0 url(https://www.transparenttextures.com/patterns/old-wall.png) repeat!important;background-size:600px 600px;color:#3b2b21!important}body.historia-mode[data-theme=dark],body.historia-mode[data-theme=light]{background:#f8f5f0 url(https://www.transparenttextures.com/patterns/old-wall.png) repeat!important;color:#3b2b21!important}body.historia-mode .key{background:var(--historia-primary)!important;color:#fff!important;border:none!important}body.historia-mode .letter-box{border-color:#8c4a1f4d!important}body.historia-mode .nav-main{background:#f8f5f0 url(https://www.transparenttextures.com/patterns/old-wall.png) repeat!important}body.historia-mode .nav-title{background:linear-gradient(135deg,var(--brand-brown),var(--brand-blue))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}body.historia-mode .historia-hub{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem}body.historia-mode .niveles-lista{display:flex;flex-direction:column;gap:1rem;width:100%;align-items:center;justify-content:flex-start}body.historia-mode .historia-nivel{transform:translate(calc(var(--step) * 25px));transition:transform .25s ease}.toast-container-grid,.toast-container-hub{position:fixed;top:70px;left:50%;transform:translate(-50%);z-index:5000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background-color:#3c3c3cf2;color:#fff;padding:10px 16px;border-radius:8px;font-weight:500;text-align:center;font-size:1rem;animation:fadeInOut 3s ease forwards}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1}to{opacity:0;transform:translateY(-10px)}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:80vh}.achievements-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.mode-selector{display:flex;gap:1rem}.mode-selector button.active{font-weight:700;border-bottom:2px solid #333}.theme-list{display:flex;flex-direction:column;gap:.5rem;width:90%}.theme-card{display:flex;justify-content:space-between;align-items:center;border:1px solid #ddd;border-radius:10px;padding:.5rem 1rem}.progress-bar{background:#ddd;border-radius:10px;width:80px;height:8px;overflow:hidden}.progress-fill{background:#4caf50;height:100%}html,body{margin:0;padding:30px 0 0;font-family:system-ui,-apple-system,sans-serif;background-color:var(--bg-main);color:var(--text-main);min-height:100vh}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.nav-main{width:100%;position:fixed;top:0;left:0;background:var(--brand-sky);padding:27px 0;box-shadow:0 2px 6px #00000026;z-index:3000}.nav-container{max-width:1400px;margin:0 auto;padding:0 24px;position:relative}.nav-left,.nav-right{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:18px}.nav-left{left:0}.nav-right{right:0}.nav-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;font-size:1.9rem;background:linear-gradient(135deg,var(--brand-brown),var(--brand-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}.nav-link{display:flex;align-items:center;gap:6px;text-decoration:none;padding:6px 10px;border-radius:8px;color:#8c4a1fe6;font-weight:600;transition:.25s ease}.nav-link.active{background:linear-gradient(135deg,var(--brand-brown),var(--brand-blue));color:#fff!important;box-shadow:0 4px 10px #02a2ec40}.nav-link.active svg{color:#fff!important}@media(max-width:1285px){.nav-title{font-size:1.5rem}.nav-left{gap:12px;transform:translateY(-50%) scale(.95);max-width:55%}.nav-left .nav-text{font-size:.85rem}}@media(max-width:1075px){.nav-left{gap:8px;transform:translateY(-50%) scale(.85);max-width:35%}.nav-left .nav-text{font-size:.8rem}}@media(max-width:768px){.nav-text{display:none}.nav-left,.nav-right{gap:12px}.nav-title{font-size:1.3rem}}@media(max-width:480px){.nav-left,.nav-right{position:static;transform:none;justify-content:center;margin-top:6px}.nav-container{padding-bottom:40px}.nav-title{position:static;transform:none;display:block;text-align:center;margin-bottom:6px}}.instructions-overlay{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:1000}.instructions-modal{background:#fff;max-width:480px;width:90%;padding:24px 24px 20px;border-radius:12px;box-shadow:0 8px 24px #00000026;position:relative;font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.instructions-close{position:absolute;top:8px;right:10px;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--brand-brown)}.instructions-title{margin:0 0 4px;font-size:24px}.instructions-subtitle{margin:0 0 12px}.instructions-list{margin:0 0 16px 18px}.instructions-examples-title{margin-top:8px;margin-bottom:8px}.instructions-row{display:flex;gap:6px;margin:8px 0 4px}.tile{width:40px;height:40px;border-radius:6px;border:2px solid #d3d6da;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}.tile--correct{background-color:#6aaa64;color:#fff;border-color:#6aaa64}.tile--present{background-color:#c9b458;color:#fff;border-color:#c9b458}.tile--absent{background-color:#787c7e;color:#fff;border-color:#787c7e}.instructions-footer{margin-top:16px;font-size:.9rem}