: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;margin:0;padding:0}html,body,#root{min-height:100vh;background:#06060f;color:#e8e0f0;overflow-x:hidden}.app{min-height:100vh;position:relative}.btn{border:none;border-radius:8px;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s ease;padding:.6rem 1.2rem;display:inline-flex;align-items:center;gap:.4rem}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#7c4dff,#536dfe);color:#fff;font-weight:600;box-shadow:0 4px 20px #7c4dff4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 30px #7c4dff80}.btn-secondary{background:#ffffff0f;color:#c0b0d8;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover:not(:disabled){background:#ffffff1a}.btn-ghost{background:transparent;color:#fff9}.btn-ghost:hover:not(:disabled){color:#fff;background:#ffffff0d}.btn-large{padding:.9rem 2.2rem;font-size:1.05rem;letter-spacing:.02em}.btn-nav{background:#ffffff0d;color:#a0d0ff;border:1px solid rgba(100,181,246,.2);font-size:.85rem}.btn-nav:hover{background:#64b5f61a;border-color:#64b5f666}.btn-echo{background:#ce93d826;color:#ce93d8;border:1px solid rgba(206,147,216,.3);font-size:.8rem}.btn-echo.echo-active{background:#ce93d84d;color:#fff;box-shadow:0 0 20px #ce93d866;animation:echo-pulse 2s infinite}@keyframes echo-pulse{0%,to{box-shadow:0 0 20px #ce93d84d}50%{box-shadow:0 0 35px #ce93d899}}.title-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(124,77,255,.08) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(100,181,246,.05) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(206,147,216,.05) 0%,transparent 50%),#06060f;position:relative;overflow:hidden}.title-particles{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 50% 10%,rgba(206,147,216,.5) 0%,transparent 100%),radial-gradient(1px 1px at 70% 40%,rgba(100,181,246,.4) 0%,transparent 100%),radial-gradient(1px 1px at 90% 80%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 15% 90%,rgba(124,77,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 60% 75%,rgba(255,255,255,.35) 0%,transparent 100%),radial-gradient(1px 1px at 85% 15%,rgba(255,255,255,.3) 0%,transparent 100%);animation:drift 60s linear infinite}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.title-content{text-align:center;z-index:1;animation:title-enter 1.2s ease-out}@keyframes title-enter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.title-subtitle{font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:#ce93d8b3;margin-bottom:.5rem;font-family:ui-monospace,monospace}.title-main{font-size:3rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#e8e0f0,#a0d0ff,#ce93d8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.2rem}.title-tagline{color:#ffffff80;font-size:1rem;max-width:28rem;margin:0 auto 2.5rem;line-height:1.7}.title-hint{margin-top:2rem;font-size:.75rem;color:#ffffff40;letter-spacing:.05em}.map-screen{min-height:100vh;padding:2rem;background:radial-gradient(ellipse at 30% 20%,rgba(124,77,255,.04) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(100,181,246,.04) 0%,transparent 50%),#06060f}.map-header{text-align:center;margin-bottom:2.5rem}.map-title{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,#e8e0f0,#a0d0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.map-desc{color:#fff6;font-size:.85rem;margin-top:.3rem}.island-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;max-width:900px;margin:0 auto 2rem}.island-card{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;background:transparent;text-align:left;font-family:inherit;color:inherit;padding:0}.island-card:hover:not(:disabled){border-color:var(--accent, rgba(255, 255, 255, .2));transform:translateY(-4px);box-shadow:0 8px 30px #0006,0 0 40px color-mix(in srgb,var(--accent) 15%,transparent)}.island-card.locked{opacity:.45;cursor:not-allowed}.island-card.restored{border-color:#66bb6a4d}.island-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5}.island-card-content{position:relative;z-index:1;padding:1.5rem}.island-card-icon{font-size:1.8rem;margin-bottom:.6rem}.island-card-name{font-size:1.15rem;font-weight:600;margin-bottom:.15rem}.island-card-subtitle{font-size:.75rem;color:#fff6;letter-spacing:.06em;margin-bottom:.7rem}.island-card-lock{font-size:.75rem;color:#ffffff4d}.island-card-status{font-size:.75rem;color:#ffffff80}.restored-text{color:#66bb6a!important}.island-card-effect{margin-top:.5rem;font-size:.7rem;color:#66bb6a99;font-style:italic}.map-footer{text-align:center;padding-bottom:3rem}.hud{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#06060fd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}.hud-left,.hud-center,.hud-right{display:flex;align-items:center;gap:.8rem}.hud-center{gap:1.5rem}.hud-stat{display:flex;align-items:center;gap:.4rem;font-size:.75rem}.hud-label{color:#fff6;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.hud-bar{width:80px;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.hud-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}.energy-bar{background:linear-gradient(90deg,#7c4dff,#536dfe)}.hud-value{color:#a0d0ff;font-family:ui-monospace,monospace;font-size:.8rem;min-width:1.5rem;text-align:right}.explorer{min-height:100vh;position:relative}.explorer-scene{position:relative;min-height:calc(100vh - 50px);display:flex;flex-direction:column;padding:1.5rem;transition:opacity .3s ease}.explorer-scene.fade-in{animation:scene-in .5s ease-out}.explorer-scene.fade-out{opacity:0}@keyframes scene-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.explorer-scene.echo-mode{position:relative}.explorer-scene.echo-mode:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ce93d80f;border:1px solid rgba(206,147,216,.15);border-radius:12px;pointer-events:none;animation:echo-border 3s ease-in-out infinite}@keyframes echo-border{0%,to{border-color:#ce93d81a}50%{border-color:#ce93d840}}.scene-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.location-header{position:relative;z-index:2;margin-bottom:.8rem}.location-name{font-size:1.4rem;font-weight:600;letter-spacing:-.02em}.location-island{font-size:.7rem;color:#ffffff59;letter-spacing:.1em;text-transform:uppercase}.location-desc-box{position:relative;z-index:2;max-width:500px;margin-bottom:1.5rem;background:#0006;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:1rem 1.2rem}.location-desc{font-size:.85rem;color:#ffffffa6;line-height:1.65}.hotspot-field{position:relative;z-index:2;flex:1;min-height:300px;margin-bottom:1rem}.hotspot{position:absolute;transform:translate(-50%,-50%);background:#0009;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:.4rem .8rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .2s ease;font-family:inherit;color:inherit;font-size:.75rem;white-space:nowrap}.hotspot:hover{border-color:#c8c8ff66;background:#000c;transform:translate(-50%,-50%) scale(1.05)}.hotspot.active{border-color:#7c4dff;background:#7c4dff33}.hotspot-dot{width:8px;height:8px;border-radius:50%;background:#ffffff80;animation:dot-glow 2s ease-in-out infinite}.hotspot-puzzle .hotspot-dot{background:#ffab40}.hotspot-collect .hotspot-dot{background:#66bb6a}.hotspot-echo .hotspot-dot{background:#ce93d8}@keyframes dot-glow{0%,to{opacity:.5}50%{opacity:1}}.hotspot-label{color:#fffc}.hotspot-detail{position:relative;z-index:5;background:#000000b3;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;max-width:420px;font-size:.82rem;color:#ffffffb3;line-height:1.6;animation:detail-in .2s ease-out}@keyframes detail-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.location-nav{position:relative;z-index:2;display:flex;gap:.6rem;flex-wrap:wrap;padding:.8rem 0}.puzzle-access{position:relative;z-index:2;text-align:center;padding:.5rem;font-size:.8rem}.puzzle-access.solved{color:#66bb6a}.notification{position:fixed;bottom:5rem;left:50%;transform:translate(-50%);z-index:200;background:#7c4dffe6;color:#fff;padding:.7rem 1.5rem;border-radius:8px;font-size:.85rem;font-weight:500;animation:notif-in .3s ease-out;box-shadow:0 4px 20px #00000080}@keyframes notif-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.inventory-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;gap:.3rem;padding:.5rem 1rem;background:#06060fd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06);overflow-x:auto;justify-content:center}.inventory-item{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);font-size:1.1rem;transition:all .2s}.inventory-item:hover{background:#ffffff1a;transform:scale(1.1)}.puzzle-screen{min-height:100vh;padding:2rem;display:flex;flex-direction:column;align-items:center}.puzzle-header{text-align:center;margin-bottom:2rem;max-width:500px}.puzzle-header .btn{margin-bottom:1rem}.puzzle-title{font-size:1.4rem;font-weight:600;margin-bottom:.5rem}.puzzle-instructions{font-size:.85rem;color:#ffffff80;line-height:1.6}.puzzle-board{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:500px}.puzzle-slots{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}.puzzle-slot{width:90px;height:70px;border:2px dashed rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#ffffff4d;transition:all .2s;cursor:pointer}.puzzle-slot.filled{border-style:solid;border-color:#7c4dff80;background:#7c4dff1a;color:#e8e0f0;font-size:.7rem}.puzzle-slot.error{border-color:#ef5350;animation:slot-shake .3s ease}@keyframes slot-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.puzzle-items{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.puzzle-piece{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.5rem .9rem;color:#e8e0f0;font-family:inherit;font-size:.8rem;cursor:pointer;transition:all .2s}.puzzle-piece:hover{background:#7c4dff26;border-color:#7c4dff66}.puzzle-piece.selected{background:#7c4dff40;border-color:#7c4dff;box-shadow:0 0 15px #7c4dff4d}.rotation-display{width:100%;max-width:400px;height:60px;border-radius:10px;background:#0006;border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative}.rotation-fill{position:absolute;top:0;left:0;bottom:0;border-radius:10px;transition:width .3s ease}.rotation-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#ffffffb3;z-index:1}.puzzle-assembly-area{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;min-height:60px;padding:1rem;border:1px dashed rgba(255,255,255,.1);border-radius:10px;width:100%;max-width:400px}.puzzle-assembled-piece{background:#ef535033;border:1px solid rgba(239,83,80,.4);border-radius:8px;padding:.4rem .8rem;font-size:.75rem}.puzzle-assembly-placeholder{color:#fff3;font-size:.75rem}.matching-grid{width:100%;max-width:400px}.matching-slots{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.matching-slot{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.8rem;text-align:center;transition:all .2s;cursor:pointer;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center}.matching-slot.ready{border-color:#7c4dff4d}.matching-slot.filled{border-color:#66bb6a66;background:#66bb6a14}.matching-slot-label{font-size:.7rem;color:#fff6;margin-bottom:.3rem}.matching-slot-value{font-size:.8rem}.memory-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at 50% 50%,rgba(124,77,255,.08) 0%,transparent 60%),#06060f}.memory-card{position:relative;max-width:500px;background:#0009;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2.5rem;text-align:center;animation:memory-enter .5s ease-out}.memory-glow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:18px;background:linear-gradient(135deg,#7c4dff33,#64b5f61a,#ce93d833);z-index:-1;filter:blur(20px);opacity:.5}@keyframes memory-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.memory-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#ce93d8b3;margin-bottom:.8rem}.memory-title{font-size:1.4rem;font-weight:600;margin-bottom:1rem}.memory-divider{width:40px;height:2px;background:#ffffff1a;margin:0 auto 1.5rem}.memory-text{font-size:.9rem;color:#ffffffa6;line-height:1.8;margin-bottom:2rem;text-align:left}.journal-screen{min-height:100vh;padding:2rem;background:#06060f}.journal-header{text-align:center;margin-bottom:2rem}.journal-header h2{font-size:1.4rem;margin-bottom:.3rem}.journal-count{font-size:.8rem;color:#fff6}.journal-content{max-width:700px;margin:0 auto}.journal-section{margin-bottom:2rem}.journal-section-title{font-size:.9rem;font-weight:600;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}.journal-section-count{font-size:.7rem;color:#ffffff4d;font-weight:400}.journal-entries{display:flex;flex-direction:column;gap:.5rem}.journal-entry{width:100%;text-align:left;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:.8rem 1rem;cursor:pointer;transition:all .2s;font-family:inherit;color:inherit}.journal-entry:hover:not(:disabled){background:#ffffff0f;border-color:#ffffff1a}.journal-entry.undiscovered{cursor:default;opacity:.4}.journal-entry-title{display:block;font-size:.85rem;font-weight:500;margin-bottom:.2rem}.journal-entry-preview{font-size:.75rem;color:#fff6}.journal-entry-locked{font-size:.8rem;color:#fff3;font-style:italic}.journal-hint{text-align:center;padding:1.5rem;color:#ffffff40;font-size:.8rem}.ending-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at 50% 50%,rgba(102,187,106,.06) 0%,transparent 60%),radial-gradient(ellipse at 30% 30%,rgba(124,77,255,.04) 0%,transparent 50%),#06060f;position:relative}.ending-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(102,187,106,.1) 0%,transparent 70%);animation:ending-breathe 4s ease-in-out infinite}@keyframes ending-breathe{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.8}}.ending-content{position:relative;z-index:1;max-width:550px;text-align:center;animation:ending-enter 1s ease-out}@keyframes ending-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ending-label{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#66bb6a99;margin-bottom:.5rem}.ending-title{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#66bb6a,#a0d0ff,#ce93d8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.ending-divider{width:60px;height:2px;background:#ffffff1a;margin:0 auto 2rem}.ending-text{text-align:left;margin-bottom:2rem}.ending-text p{font-size:.9rem;color:#fff9;line-height:1.8;margin-bottom:1rem}.ending-final{color:#ffffffbf!important;font-style:italic}.story-ticker{position:fixed;bottom:0;left:0;right:0;padding:.4rem;background:#06060fb3;text-align:center;z-index:50}.story-ticker-text{font-size:.65rem;color:#fff3;letter-spacing:.05em;font-style:italic}@media(max-width:600px){.title-main{font-size:2rem}.island-grid{grid-template-columns:1fr}.hud{flex-wrap:wrap;gap:.4rem}.hud-center{order:3;width:100%;justify-content:center}.hotspot-field{min-height:200px}}