*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:cravelo;src:url(/assets/cravelo-_142S7nW.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:strong;src:url(/assets/strong-DELf9G3Z.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}html,body{width:100%;height:100%;overflow:hidden;background:#0a1628;font-family:Times New Roman,serif}#game{display:block;width:100vw;height:100vh;touch-action:none}#intro-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;margin-top:65vh;transition:opacity .35s ease,visibility .35s ease;pointer-events:none;mix-blend-mode:plus-lighter}#intro-screen.hidden{opacity:0;visibility:hidden}.intro-content{text-align:center;color:#fff;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:0rem}.intro-content h1{font-family:cravelo,serif;font-size:7rem;text-shadow:0 0 10px rgb(5,58,86)}.intro-content p{font-family:strong,serif;font-size:1.1rem;text-align:center;width:18rem;letter-spacing:2.8rem}.button-container{margin-top:1.5rem;width:100%}#play-btn{background-color:transparent;width:100%;border:none;color:#fff;padding:12px 36px;font-family:strong,serif;font-size:1.1rem;letter-spacing:.1em;cursor:pointer;transition:all .2s ease;margin-top:1rem}#play-btn:hover{background:#fff;color:#142e56;transform:translateY(-2px)}.intro-hint{font-size:.8rem;opacity:.4;margin-top:1rem}#hud-instrument{position:fixed;bottom:-70px;left:50%;transform:translate(-50%);width:400px;height:250px;z-index:10;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;opacity:0;transition:opacity 1.5s ease,transform .5s cubic-bezier(.2,.8,.2,1);mix-blend-mode:plus-lighter;cursor:auto}#hud-instrument.visible{opacity:.75}.localhost-ui #hud-instrument:hover{transform:translate(-50%) translateY(-45px)}#hud-settings{display:flex;align-items:center;gap:20px;margin-top:-20px;margin-bottom:35px;opacity:0;visibility:hidden;transition:opacity .4s ease;pointer-events:none}@media(hover:hover)and (pointer:fine){#hud-instrument.visible:hover{transform:translate(-50%) translateY(-45px)}#hud-instrument.visible:hover #hud-settings{opacity:1;visibility:visible;pointer-events:auto}#hud-instrument.visible:hover .hud-labels{opacity:1!important}}@media(pointer:coarse){#hud-instrument.visible.controls-open{transform:translate(-50%) translateY(-45px)}#hud-instrument.visible.controls-open #hud-settings{opacity:1;visibility:visible;pointer-events:auto}#hud-instrument.visible.controls-open .hud-labels{opacity:1!important}}.hud-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0px}.instructions{display:flex;align-items:center;gap:10px;color:#ffffffba;font-size:12px;font-weight:400}.instructions strong{font-weight:700}.instructions .touch-hint,.instructions .info-btn{display:none}@media(pointer:coarse){.instructions .key-hint{display:none}.instructions .touch-hint{display:inline}.instructions .info-btn{display:inline-flex}}.info-btn{align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:#ffffff1f;color:#fff;cursor:pointer;transition:background .2s ease;flex-shrink:0}.info-btn svg{width:15px;height:15px}.info-btn.active{background:#ffffff59}#touch-zone-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;display:flex;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}#touch-zone-overlay.visible{opacity:1;visibility:visible}#touch-zone-overlay .touch-zone{display:flex;align-items:center;justify-content:center;height:100%;background:#ffffff80;text-align:center}#touch-zone-overlay .touch-zone.left{width:20%;border-right:2px dashed rgba(255,255,255,.8)}#touch-zone-overlay .touch-zone.right{width:80%}#touch-zone-overlay .touch-zone-label{color:#0a1a33;padding:0 12px}#touch-zone-overlay .touch-zone-label strong{display:block;font-size:20px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}#touch-zone-overlay .touch-zone-label span{font-size:13px;line-height:1.5;opacity:.85}.key{font-weight:700;opacity:.9}.settings-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;opacity:.6;transition:all .2s ease;display:flex;align-items:center;justify-content:center;border-radius:50%}.settings-btn:hover{opacity:1;transform:scale(1.1);background:#ffffff1a}.settings-btn.active{opacity:1;color:#a0d2ff}.settings-btn svg{width:20px;height:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}#mute-btn svg{fill:currentColor}.hud-svg{width:100%;height:100%;overflow:visible}.hud-labels{opacity:0!important;position:absolute;bottom:70px;width:100%;display:flex;justify-content:space-between;padding:0 10px;transition:opacity .3s ease}.hud-label{color:#fff6;font-size:12px;font-weight:600;text-align:center;letter-spacing:.05em}.tick-text{fill:#fff9;font-size:8px;font-family:Times New Roman,serif;text-anchor:middle}.compass-text{fill:#fff;font-family:strong,sans-serif!important;font-weight:600;text-anchor:middle;transition:opacity .1s ease,font-size .1s ease}@media(max-width:600px){#hud-instrument{width:300px}}#vignette{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;background:radial-gradient(circle,transparent 50%,rgba(0,0,0,.45) 120%);mix-blend-mode:overlay}