:root{--sv-bg:#0a0a0a;--sv-bg-subtle:#111;--sv-burnt-sienna:#c45a3c;--sv-orange:#e8843c;--sv-orange-glow:#e8843c4d;--sv-orange-dim:#3a2a20;--sv-text:#f0e6d8;--sv-text-muted:#f0e6d880;--sv-bg-overlay:#0a0a0acc;--sv-blur:8px;--sv-radius:12px;--sv-radius-sm:6px;--sv-font-ui:"Inter", system-ui, sans-serif;--sv-font-display:"Orbitron", "Inter", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--sv-font-ui);background:var(--sv-bg);color:var(--sv-text);min-height:100dvh;overflow-x:hidden}#app{min-height:100dvh;position:relative}#ripple-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.landing{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:2rem;display:flex;position:relative}.hero{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;display:flex}.title{font-family:var(--sv-font-display);letter-spacing:.15em;background:linear-gradient(180deg, var(--sv-text) 0%, var(--sv-orange) 50%, var(--sv-burnt-sienna) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 40px var(--sv-orange-glow));-webkit-background-clip:text;background-clip:text;font-size:clamp(3rem,10vw,7rem);font-weight:900;animation:4s ease-in-out infinite title-breathe}@keyframes title-breathe{0%,to{filter:drop-shadow(0 0 40px var(--sv-orange-glow))}50%{filter:drop-shadow(0 0 80px var(--sv-orange-glow))}}.tagline{color:var(--sv-text-muted);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(1rem,2.5vw,1.4rem);font-weight:300}.play-btn{font-family:var(--sv-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--sv-bg);background:linear-gradient(135deg, var(--sv-orange), var(--sv-burnt-sienna));cursor:pointer;border:none;border-radius:4px;margin-top:1rem;padding:1rem 2.5rem;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.play-btn:hover{box-shadow:0 4px 24px var(--sv-orange-glow), 0 0 60px #c45a3c33;transform:translateY(-2px)}.play-btn:active{transform:translateY(0)}.play-btn__ping{border-radius:inherit;border:2px solid var(--sv-orange);pointer-events:none;animation:2.5s ease-out infinite btn-ping;position:absolute;inset:0}@keyframes btn-ping{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.landing-footer{color:var(--sv-text-muted);letter-spacing:.15em;text-transform:uppercase;font-size:.85rem;position:absolute;bottom:2rem}#game-canvas{z-index:10;cursor:crosshair;width:100%;height:100%;display:none;position:fixed;top:0;left:0}#game-canvas.active{display:block}.fade-overlay{background:var(--sv-bg);z-index:20;opacity:0;pointer-events:none;transition:opacity .6s;position:fixed;inset:0}.fade-overlay.visible{opacity:1;pointer-events:all}.level-select{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:2rem;display:flex;position:relative}.level-select__header{align-items:center;gap:1.5rem;margin-bottom:2.5rem;display:flex}.level-select__back{border:1px solid var(--sv-text-muted);color:var(--sv-text-muted);font-family:var(--sv-font-ui);cursor:pointer;background:0 0;border-radius:4px;padding:.4rem .8rem;font-size:.85rem;transition:color .2s,border-color .2s}.level-select__back:hover{color:var(--sv-text);border-color:var(--sv-text)}.level-select__title{font-family:var(--sv-font-display);letter-spacing:.15em;color:var(--sv-orange);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900}.level-select__grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem;width:100%;max-width:700px;display:grid}.level-select__card{background:var(--sv-bg-subtle);cursor:pointer;font-family:var(--sv-font-ui);color:var(--sv-text);border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem 1rem;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex}.level-select__card.unlocked:hover{border-color:var(--sv-orange);box-shadow:0 4px 20px var(--sv-orange-glow);transform:translateY(-2px)}.level-select__card.locked{opacity:.35;cursor:not-allowed}.level-select__card-num{font-family:var(--sv-font-display);color:var(--sv-orange);font-size:2rem;font-weight:900;line-height:1}.level-select__card.locked .level-select__card-num{color:var(--sv-text-muted)}.level-select__card-name{letter-spacing:.05em;font-size:1rem;font-weight:600}.level-select__card-sub{color:var(--sv-text-muted);font-size:.75rem;font-style:italic}.level-select__card-time{font-family:var(--sv-font-display);color:var(--sv-burnt-sienna);margin-top:.3rem;font-size:.85rem}.touch-controls{z-index:15;pointer-events:none;display:block;position:fixed;inset:0}.touch-controls__joystick-zone{pointer-events:auto;width:50%;height:50%;position:absolute;bottom:0;left:0}.touch-controls__joystick-base{pointer-events:none;background:#e8843c26;border:2px solid #e8843c4d;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:fixed}.touch-controls__joystick-thumb{background:#e8843c80;border-radius:50%;width:32px;height:32px;transition:none}.touch-controls__sonar-zone{pointer-events:auto;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.top-bar{z-index:25;background:var(--sv-bg-overlay);-webkit-backdrop-filter:blur(var(--sv-blur));font-family:var(--sv-font-ui);border-bottom:1px solid #e8843c33;justify-content:space-between;align-items:center;padding:10px 16px;display:none;position:fixed;top:0;left:0;right:0}.top-bar.visible{display:flex}.top-bar__left{align-items:center;gap:16px;display:flex}.top-bar__hp{align-items:center;gap:6px;display:flex}.top-bar__hp-pip{background:var(--sv-orange-dim);border-radius:50%;width:14px;height:14px;transition:background .2s}.top-bar__hp-pip.active{background:var(--sv-orange);box-shadow:0 0 6px #e8843c66}.top-bar__sonar{align-items:center;gap:8px;display:flex}.top-bar__sonar-track{background:var(--sv-orange-dim);border-radius:3px;width:60px;height:6px;overflow:hidden}.top-bar__sonar-fill{background:var(--sv-orange);border-radius:3px;width:0%;height:100%;transition:width 50ms linear,background .2s}.top-bar__sonar-fill.ready{background:var(--sv-orange);box-shadow:0 0 4px #e8843c80}.top-bar__sonar-fill:not(.ready){background:var(--sv-burnt-sienna)}.top-bar__sonar-label{color:var(--sv-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.top-bar__right{align-items:center;gap:16px;display:flex}.top-bar__timer{font-family:var(--sv-font-display);color:var(--sv-text);opacity:.7;text-align:right;min-width:60px;font-size:14px;font-weight:600}.top-bar__audio{position:relative}.top-bar__audio-btn{cursor:pointer;opacity:.8;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:none;padding:4px;font-size:20px;line-height:1;transition:opacity .2s}.top-bar__audio-btn:hover{opacity:1}.top-bar__audio-popover{background:var(--sv-bg-overlay);-webkit-backdrop-filter:blur(var(--sv-blur));border-radius:var(--sv-radius-sm);border:1px solid #e8843c26;flex-direction:column;align-items:center;gap:10px;min-width:140px;padding:12px 16px;display:none;position:absolute;top:calc(100% + 8px);right:0}.top-bar__audio-popover.open{display:flex}.top-bar__audio-popover-row{align-items:center;gap:8px;width:100%;display:flex}.top-bar__mute-btn{border-radius:var(--sv-radius-sm);cursor:pointer;color:var(--sv-text);opacity:.8;-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #e8843c4d;padding:4px 8px;font-size:16px;transition:opacity .2s,background .2s}.top-bar__mute-btn:hover{opacity:1;background:#e8843c1a}.top-bar__volume-slider{appearance:none;background:var(--sv-text-muted);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.top-bar__volume-slider::-webkit-slider-thumb{appearance:none;background:var(--sv-orange);cursor:pointer;border-radius:50%;width:14px;height:14px}.top-bar__volume-slider::-moz-range-thumb{background:var(--sv-orange);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}@media (width<=400px){.top-bar{padding:8px 12px}.top-bar__hp-pip{width:10px;height:10px}.top-bar__sonar-track{width:40px}.top-bar__timer{font-size:12px}}