:root{color:#eefaff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;background:#071725;font-family:omnes-variable,ui-rounded,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;min-width:280px;min-height:180px}button,input,textarea,select{font:inherit}.controller-shell{--diver-accent:#39d98a;--frame-side:clamp(18px, 2.4vw, 25px);isolation:isolate;color:#f2fbff;background:#031a28 url(/assets/backgrounds/controller-ocean.png) 50%/cover no-repeat;width:100%;height:100%;position:relative;overflow:hidden}.controller-shell:before{content:"";z-index:-1;background:radial-gradient(circle at 50% 42%,#032b4212,#01111c45 78%),linear-gradient(90deg,#01142029,#021f2e14);position:absolute;inset:0}.controller-shell--welcome:before{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#010f1975}.join-fauna{pointer-events:none;position:absolute;inset:0;overflow:hidden}.join-animal{object-fit:contain;opacity:.76;filter:brightness(.72)saturate(.82)drop-shadow(0 10px 18px #0006);position:absolute}.join-animal--copperband{width:clamp(118px,19vw,215px);top:8%;left:5%;transform:rotate(-7deg)}.join-animal--barracuda{width:clamp(190px,30vw,360px);top:-2%;right:-1%;transform:rotate(-4deg)}.join-animal--jellyfish{width:clamp(145px,23vw,260px);bottom:1%;left:7%;transform:rotate(5deg)}.join-animal--whale{width:clamp(260px,42vw,500px);bottom:-11%;right:-3%;transform:rotate(-7deg)}.join-screen{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:min(430px,72vw);height:100%;margin:0 auto;display:flex;position:relative}.join-logo{width:min(410px,62vw);height:auto;display:block;overflow:visible}.join-logo path{fill:none}.join-logo text{fill:#fff;letter-spacing:.075em;text-anchor:middle;text-shadow:0 4px 14px #0000008c;font-family:omnes-variable,ui-rounded,sans-serif;font-size:45px;font-weight:780}.join-screen>p{color:#f1faffc7;text-shadow:0 2px 8px #000000a6;max-width:380px;margin:8px 0 23px;font-size:clamp(13px,2vw,18px);line-height:1.35}.join-button{color:#fff;cursor:pointer;touch-action:manipulation;background:linear-gradient(#3694cff0,#176699f5);border:2px solid #8ed8fce0;border-radius:23px;outline:none;min-width:clamp(190px,30vw,290px);padding:15px 34px 17px;font-size:clamp(19px,3vw,27px);font-weight:750;box-shadow:inset 0 3px #ffffff3d,inset 0 -2px #012a4640,0 4px #0a4e79,0 12px 25px #0000004d}.join-button:active{transform:translateY(3px);box-shadow:inset 0 2px #fff3,inset 0 -2px #012a463d,0 1px #0a4e79,0 7px 16px #00000042}.diver-identity{z-index:5;top:max(10px, env(safe-area-inset-top));left:max(var(--frame-side), env(safe-area-inset-left));text-shadow:0 2px 8px #000000c7;pointer-events:none;background:0 0;border:0;align-items:center;gap:10px;max-width:42%;padding:0;font-size:clamp(14px,1.9vw,18px);line-height:1;animation:1.1s ease-out both identity-arrival;display:flex;position:absolute}.diver-portrait{background:#010a12b8;border-radius:50%;width:clamp(46px,6vw,59px);height:clamp(46px,6vw,59px);overflow:hidden}.diver-portrait img{object-fit:contain;width:100%;height:100%;transform:scale(1.7)}.diver-identity strong{color:var(--diver-accent);font-size:1.12em}@keyframes identity-arrival{0%{opacity:0;transform:translateY(-12px)scale(.9)}45%{opacity:1;transform:translateY(0)scale(1.08)}to{transform:scale(1)}}.control-layout{width:100%;height:100%;padding:clamp(72px, 9vw, 86px) var(--frame-side) clamp(12px, 2vw, 20px);grid-template-columns:1fr 1fr;gap:0;display:grid;position:relative}.control-zone{z-index:1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;min-width:0;position:relative;overflow:hidden}.control-zone:after{content:"";pointer-events:none;background:#00223412;border-radius:28px;transition:background .12s;position:absolute;inset:5px}.control-zone.is-active:after{background:#2da1d514}.action-zone.is-active:after{background:#2da1d50a}.wave-frame{z-index:2;inset:clamp(72px, 9vw, 86px) var(--frame-side) clamp(12px, 2vw, 20px);width:calc(100% - 2 * var(--frame-side));pointer-events:none;height:calc(100% - clamp(72px,9vw,86px) - clamp(12px,2vw,20px));position:absolute;overflow:visible}.wave-frame path{fill:none;stroke:#219cd794;stroke-width:1.5px;vector-effect:non-scaling-stroke}.zone-label,.action-zone{flex-direction:column;justify-content:center;align-items:center;display:flex}.zone-label{pointer-events:none;transition:opacity .12s;position:absolute;inset:0}.movement-zone.is-active .zone-label{opacity:0}.control-zone strong{z-index:1;text-align:center;max-width:82%;margin-top:clamp(10px,2vh,17px);font-size:clamp(13px,2vw,18px);line-height:1.15}.sonar{background:radial-gradient(circle,#1cb35821,#002a2829);border:3px solid #22c868;border-radius:50%;width:clamp(108px,20vmin,174px);height:clamp(108px,20vmin,174px);display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 25px #1bdb6921,0 0 20px #10b05114}.sonar-ring,.sonar-cross,.sonar-sweep,.sonar-dot{display:block;position:absolute}.sonar-ring{border:1px solid #25d46ca6;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.sonar-ring--one{width:68%;height:68%}.sonar-ring--two{width:36%;height:36%}.sonar-cross{background:#25d46c9e}.sonar-cross--horizontal{width:100%;height:1px;top:50%;left:0}.sonar-cross--vertical{width:1px;height:100%;top:0;left:50%}.sonar-sweep{background:conic-gradient(from 280deg, transparent 0 73%, #34ea7e3d 94%, transparent 100%);inset:0}.sonar-dot{background:#29cc68;border-radius:50%;width:12%;height:12%;bottom:31%;right:20%;box-shadow:0 0 14px #2ae06fcc}.joystick-base{pointer-events:none;background:#00342fa8;border:3px solid #27d96ceb;border-radius:50%;width:144px;height:144px;display:none;position:absolute;overflow:hidden;transform:translate(-50%,-50%);box-shadow:inset 0 0 28px #27d96c29,0 9px 27px #0000004d}.movement-zone.is-active .joystick-base{display:block}.joystick-ring,.joystick-cross{display:block;position:absolute}.joystick-ring{border:1px solid #34e27985;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.joystick-ring--one{width:70%;height:70%}.joystick-ring--two{width:38%;height:38%}.joystick-cross{background:#34e2797a}.joystick-cross--horizontal{width:100%;height:1px;top:50%;left:0}.joystick-cross--vertical{width:1px;height:100%;top:0;left:50%}.joystick-knob{z-index:2;background:linear-gradient(150deg,#39df7e,#16a651);border:3px solid #aeffcccc;border-radius:50%;width:62px;height:62px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 5px #ffffff40,0 7px 17px #00000061}.action-zone{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}.pickup-button{z-index:1;background:linear-gradient(155deg,#3d93d1,#2378b8);border:2px solid #7ccaf7e6;border-radius:50%;width:clamp(94px,18vmin,150px);height:clamp(94px,18vmin,150px);transition:transform 75ms,box-shadow 75ms;position:relative;box-shadow:inset 0 4px #d2efff52,inset 0 -3px #04467447,0 6px #145581,0 12px 24px #00000047}.action-zone.is-active .pickup-button{transform:translateY(5px)scale(.98);box-shadow:inset 0 3px #d2efff40,inset 0 -2px #04467440,0 1px #145581,0 7px 14px #0000003d}.connection-overlay{z-index:10;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#010a12c7;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.connection-card{text-align:center;background:#031f2ff0;border:1px solid #4db7e880;border-radius:25px;flex-direction:column;align-items:center;width:min(390px,74vw);padding:25px 30px;display:flex;box-shadow:inset 0 3px #ffffff14,0 22px 70px #00000061}.connection-card h1{color:#fff;margin:13px 0 7px;font-size:clamp(21px,4vw,30px)}.connection-card p{color:#eefaffad;margin:0;font-size:clamp(12px,2vw,15px);line-height:1.45}.connection-spinner{border:3px solid #ffffff2e;border-top-color:#68d3ff;border-radius:50%;width:23px;height:23px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.connection-spinner{animation-duration:1.8s}.pickup-button,.join-button{transition:none}.diver-identity{animation:none}}@media (orientation:portrait){.controller-shell{--frame-side:30px;transform-origin:0 0;width:100dvh;height:100dvw;position:absolute;top:0;left:0;transform:rotate(90deg)translateY(-100%)}}