:root{--primary: #4ade80;--primary-glow: rgba(74, 222, 128, .5);--bg-dark: rgba(15, 23, 42, .8);--glass: rgba(255, 255, 255, .1)}html,body,#root,.game-container{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#111;font-family:Outfit,sans-serif}.interface{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;padding:2.5rem;box-sizing:border-box}.top-ui{display:flex;justify-content:space-between;align-items:flex-start;width:100%}.top-stats{display:flex;gap:1.5rem}.score-card,.level-card{display:flex;flex-direction:column;background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass);padding:1rem 1.8rem;border-radius:1.2rem;width:fit-content;color:#fff;box-shadow:0 8px 32px #0006}.score-card .label,.level-card .label{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--primary);opacity:.9;margin-bottom:.2rem}.score-card .value,.level-card .value{font-size:2.2rem;font-weight:900}.mini-map-container{background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:2px solid var(--glass);padding:4px;border-radius:1.2rem;box-shadow:0 8px 32px #0006;pointer-events:auto}.mini-map{width:120px;height:120px;position:relative;background:#0000004d;border-radius:1rem;overflow:hidden}.map-label{position:absolute;bottom:4px;left:50%;transform:translate(-50%);font-size:.6rem;font-weight:800;color:#fff;opacity:.3;letter-spacing:.2em}.map-treasure{position:absolute;width:8px;height:8px;background:#fbbf24;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #fbbf24;animation:pulse 1.5s infinite ease-in-out}.map-player{position:absolute;width:10px;height:10px;background:var(--primary);border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px currentColor;z-index:2;transition:left .1s linear,top .1s linear}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.5}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.progression-hint{position:absolute;top:9rem;left:2.5rem;color:#fff;font-size:1rem;background:#0006;padding:.5rem 1rem;border-radius:.8rem;border-left:3px solid var(--primary)}.controls-hint{position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass);padding:1rem 2rem;border-radius:3rem;color:#fff;font-size:1rem;opacity:.8;box-shadow:0 10px 40px #00000080}.settings-toggle{background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass);color:#fff;padding:1rem;border-radius:1.2rem;cursor:pointer;pointer-events:auto;transition:transform .2s,background .2s}.settings-toggle:hover{background:#ffffff1a}.settings-toggle.active{background:var(--primary);color:#064e3b}.settings-backdrop{position:absolute;inset:0;background:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto;z-index:5}.settings-panel{position:absolute;top:7.5rem;right:2.5rem;background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass);padding:1.5rem;border-radius:1.5rem;width:220px;pointer-events:auto;color:#fff;box-shadow:0 20px 50px #00000080;animation:fadeIn .2s ease-out;display:flex;flex-direction:column;gap:1.5rem;z-index:10}.panel-close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--glass);cursor:pointer;padding:.2rem;border-radius:.5rem;transition:all .2s}.panel-close-btn:hover{color:#ff4757;background:#ffffff0d}.settings-section h3{margin:0 0 .8rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);opacity:.8;display:flex;align-items:center;gap:.5rem}.color-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.color-btn{height:30px;border:2px solid transparent;border-radius:.5rem;cursor:pointer;transition:transform .2s,border-color .2s}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:#fff;transform:scale(1.1)}.voice-toggle{display:flex;align-items:center;gap:1rem;background:#ffffff0d;border:1px solid var(--glass);color:#fff;padding:.8rem 1rem;border-radius:.8rem;cursor:pointer;width:100%;transition:all .2s}.voice-toggle.active{background:var(--primary);color:#064e3b;border-color:var(--primary)}.control-hint{margin-top:auto;font-size:.9rem;opacity:.8;display:flex;gap:.5rem;justify-content:center}.quality-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.quality-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;cursor:pointer;transition:all .2s;font-family:inherit}.quality-btn.active{background:#22c55e;border-color:#22c55e;box-shadow:0 0 15px #22c55e66}.quality-btn:hover:not(.active){background:#ffffff26}.quality-btn span{font-size:.85rem;font-weight:500}.mobile-controls{position:absolute;bottom:3rem;right:3rem;display:flex;align-items:center;justify-content:center;pointer-events:auto}.joystick-base{width:100px;height:100px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--glass);border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:none}.joystick-handle{width:50px;height:50px;background:var(--primary);border-radius:50%;box-shadow:0 0 20px var(--primary-glow)}@media(max-width:768px){.interface{padding:1rem}.score-card .value,.level-card .value{font-size:1.2rem}.score-card,.level-card{padding:.5rem .8rem}.top-stats{gap:.5rem}.mini-map{width:80px;height:80px}.progression-hint{top:6rem;left:1rem;font-size:.7rem}.keyboard-only{display:none}.mobile-controls{bottom:2rem;right:2rem}.word-title{font-size:2.5rem}.overlay-card{padding:1.5rem}}.overlay-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;animation:fadeIn .3s ease-out}.overlay-card{position:relative;background:linear-gradient(135deg,#1e293bf2,#0f172af2);border:2px solid var(--primary);padding:3rem;border-radius:2rem;width:90%;max-width:500px;text-align:center;color:#fff;box-shadow:0 20px 50px #00000080;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}.close-btn{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--glass);cursor:pointer;transition:color .2s}.close-btn:hover{color:#ff4757}.treasure-tag{display:inline-block;padding:.4rem 1rem;background:#4ade801a;border:1px solid var(--primary);border-radius:2rem;color:var(--primary);font-size:.7rem;font-weight:700;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.1em}.word-title{margin:0;font-size:4rem;font-weight:900;background:linear-gradient(to bottom,#fff,#94a3b8);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:transform .2s}.word-title.clickable{cursor:pointer}.word-title.clickable:hover{transform:scale(1.05)}.meaning-text{cursor:pointer}.divider{width:40px;height:4px;background:var(--primary);margin:1.5rem auto;border-radius:2px}.meaning-text{font-size:1.2rem;line-height:1.6;color:#cbd5e1;margin-bottom:2.5rem}.continue-btn{background:var(--primary);color:#064e3b;border:none;padding:1rem 2rem;border-radius:1rem;font-weight:800;cursor:pointer;transition:transform .2s,background .2s}.continue-btn:hover{transform:translateY(-4px);background:#22c55e}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.error-fallback{position:absolute;inset:0;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1000}.error-fallback button{background:#4ade80;color:#064e3b;border:none;padding:1rem 2rem;border-radius:1rem;font-weight:800;cursor:pointer;margin-top:1rem}.scrapbook-backdrop{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:auto;animation:fadeIn .3s ease-out}.scrapbook-container{background:linear-gradient(135deg,#1e293b,#0f172a);width:90%;max-width:800px;max-height:80vh;border-radius:2rem;border:1px solid var(--glass);box-shadow:0 30px 60px #0009;padding:3rem;position:relative;overflow-y:auto;color:#fff;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275)}.scrapbook-header{text-align:center;margin-bottom:3rem}.scrapbook-header h1{margin:.5rem 0 .2rem;font-size:2.5rem;font-weight:900}.scrapbook-header p{color:var(--primary);opacity:.8;font-weight:600;letter-spacing:.05em}.scrapbook-content{display:flex;flex-direction:column;gap:3rem}.level-section h2{font-size:.9rem;color:var(--primary);letter-spacing:.2em;margin-bottom:1.5rem;opacity:.6}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}.word-card{padding:1.5rem;border-radius:1.2rem;border:1px solid var(--glass);background:#ffffff08;transition:all .3s cubic-bezier(.4,0,.2,1)}.word-card.found{border-color:var(--primary);background:#4ade800d}.word-card.locked{opacity:.4;filter:grayscale(1)}.found-icon{color:#fbbf24;margin-bottom:.8rem}.word-card h3{margin:0 0 .5rem;font-size:1.5rem;font-weight:800}.word-card p{margin:0;font-size:.9rem;color:#94a3b8;line-height:1.4}.card-locked-content{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1rem 0;color:#64748b}.card-locked-content span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.collection-btn{margin-right:1.5rem;background:var(--bg-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass);color:#fff;padding:1rem;border-radius:1.2rem;cursor:pointer;pointer-events:auto;transition:all .2s;display:flex;align-items:center;gap:.75rem}.collection-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.collection-btn span{font-weight:700;font-size:.75rem;letter-spacing:.05em}.top-actions{display:flex;align-items:center;gap:1rem}
