.stone-controller{position:relative;width:100%;aspect-ratio:1536/852;margin-top:20px;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;filter:drop-shadow(0 7px 4px #0c252a60)}
.stone-art{display:block;width:100%;height:100%;pointer-events:none;border-radius:4%}
.stone-controller button,.stone-controller button.pressed,.stone-controller button:active{appearance:none;-webkit-appearance:none;padding:0;margin:0;min-width:0;min-height:0;border:0;background:transparent;box-shadow:none;color:transparent;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;letter-spacing:0}
.stone-controller .stone-button{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:50%;display:block;grid-area:auto;transform:none;isolation:isolate}
.stone-face{position:absolute;inset:0;background:url('assets/stone-controller.jpg') var(--bx) var(--by)/var(--bw) var(--bh);clip-path:var(--shape,circle(49%));transition:transform 100ms ease-out,filter 100ms ease-out;pointer-events:none;transform-origin:center;will-change:transform}
.stone-controller .stone-face{margin:0}
.stone-button:before{content:'';position:absolute;inset:4%;background:#37230f;clip-path:var(--shape,circle(49%))}
.stone-controller .stone-button.is-depressed .stone-face,.stone-controller .stone-button.pressed .stone-face,.stone-controller .stone-button:active .stone-face{transform:perspective(230px) translateY(2px) rotateX(6deg) scale(.965);filter:brightness(.85) saturate(1.12)}
.stone-controller .stone-menu{border-radius:0}
.stone-controller button:focus-visible,.stone-stick:focus-visible{outline:2px dashed #b88850;outline-offset:-3px;z-index:4}
.stone-dpad{position:absolute;left:calc(13.18197% - 15px);top:25.44601%;width:27.47721%;height:45.35211%;touch-action:none;perspective:280px}
.dpad-face{position:absolute;inset:0;background:url('assets/stone-controller.jpg') 19.675% 72.48062%/418.53% 253.57%;clip-path:polygon(31% 0,69% 0,69% 29%,100% 29%,100% 70%,69% 70%,69% 100%,31% 100%,31% 70%,0 70%,0 29%,31% 29%);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 80ms ease-out;pointer-events:none;filter:drop-shadow(0 2px 1px #392511)}
.stone-dpad button{position:absolute;width:38%;height:38%;border-radius:12%}
.stone-dpad [data-direction=up]{left:31%;top:0}.stone-dpad [data-direction=down]{left:31%;bottom:0}.stone-dpad [data-direction=left]{left:0;top:31%}.stone-dpad [data-direction=right]{right:0;top:31%}
.stone-stick{position:absolute;left:13.67%;top:14.08%;width:13.67%;height:23.47%;border-radius:50%;touch-action:none;cursor:grab}
.stone-stick:active{cursor:grabbing}
.stick-face{position:absolute;inset:0;background:url('assets/stone-controller.jpg') 15.837% 18.405%/731.43% 426%;clip-path:ellipse(48% 49%);transform:translate(var(--sx,0px),var(--sy,0px));transition:transform 90ms ease-out;filter:drop-shadow(1px 3px 2px #3a271b);pointer-events:none}
#controller-menu .secondary{display:block;width:100%;margin-top:12px;min-height:44px}#controller-menu .start-button{width:100%}
.ocean-fullscreen{position:fixed;inset:0;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);z-index:10000;overflow:hidden;background:#287e8f url('assets/ocean-loop.gif') center/cover;touch-action:pan-y}
.ocean-fullscreen:before{content:'';position:absolute;inset:0;background:#123c4828;pointer-events:none}
.ocean-stone-bridge{position:absolute;left:50%;bottom:calc(var(--controller-height) + var(--player-lift) + env(safe-area-inset-bottom,0px));width:var(--controller-width);height:0.8in;transform:translateX(-50%);background:#bb9568;overflow:hidden;pointer-events:none;box-shadow:inset 0 2px 1px #f8e1b8aa,inset 0 -2px 2px #4f3629aa}
.stone-grain{position:absolute;inset:0;width:100%;height:100%}
.stone-ocean-rule{position:absolute;left:4%;top:10%;width:92%;height:80%;stroke:#62442b;stroke-width:2;filter:drop-shadow(0 1px 0 #fbe2b8cc);opacity:.9}
.ocean-stone-bridge:after{content:'';position:absolute;inset:7px 10px;border-top:1px solid #5e402c66;border-bottom:1px solid #5e402c66;box-shadow:0 1px 0 #f8e1b877,0 -1px 0 #f8e1b877;pointer-events:none}
.ocean-fullscreen .stone-controller{position:absolute;width:var(--controller-width);left:50%;bottom:calc(var(--player-lift) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;filter:drop-shadow(0 0 12px #092f4c70)}
.ocean-fullscreen #screen{position:absolute;left:50%;top:0;bottom:auto;width:var(--display-width);height:var(--display-height);aspect-ratio:auto;transform:translateX(-50%);border:3px solid #c9b88b;border-radius:8px;box-shadow:0 4px 24px #153e4d70;max-width:none;box-sizing:border-box}
.ocean-fullscreen .character-overlay{overflow-y:auto;justify-content:safe center;touch-action:pan-y;overscroll-behavior:contain}
.ocean-fullscreen .character-overlay>*{flex-shrink:0}
.ocean-minimize{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:12px;width:44px;height:44px;border:1px solid #ffffff8c;border-radius:50%;background:#153f4bcc;color:#fff5d7;font-size:25px;z-index:5;touch-action:manipulation}
html.ocean-mode,html.ocean-mode body{overflow:hidden;overscroll-behavior:none}
.ocean-score{display:none}.ocean-fullscreen .ocean-score{display:flex;position:absolute;bottom:5px;left:7px;right:7px;justify-content:space-between;color:#fff8d3;font:700 10px monospace;text-shadow:0 1px 3px #0b303e;pointer-events:none;z-index:1}
.ocean-fullscreen #screen:has(.start-overlay:not(.hidden),.character-overlay:not(.hidden),.pause-overlay:not(.hidden),.result-overlay:not(.hidden),.faint-overlay:not(.hidden)) .ocean-score{display:none}
@media(prefers-reduced-motion:reduce){.ocean-fullscreen{background-image:url('assets/ocean-poster.jpg')}.stone-face,.dpad-face,.stick-face{transition:none}}

/* Stone-only rims: transparent control shells never reveal the legacy mint
   jump-button fill. Keyboard focus remains visible inside the stone artwork. */
.stone-controller button:focus:not(:focus-visible){outline:none}
.stone-dpad.is-depressed .dpad-face{transform:translateY(1.5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));filter:brightness(.87) drop-shadow(var(--shade-x,0px) var(--shade-y,0px) 2px #392511)}
.stone-stick.is-depressed .stick-face{filter:brightness(.9) drop-shadow(1px 1px 1px #3a271b)}
.console{border:4px solid transparent;background:linear-gradient(#21494f,#21494f) padding-box,url('assets/stone-controller-base-v14-2.png') center/720px auto repeat border-box}
#screen,.ocean-fullscreen #screen{border-color:transparent;background:linear-gradient(#163f47,#163f47) padding-box,url('assets/stone-controller-base-v14-2.png') center/720px auto repeat border-box}
/* The original boot atlas animates locally; no extra video or drawing loop. */
.ocean-ecco{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:var(--lower-ocean-height);overflow:hidden;pointer-events:none}
.ecco-pass{position:absolute;left:0;top:50%;width:88px;height:40px;margin-top:-20px;animation:ecco-cross 18s linear infinite;animation-delay:-6s;will-change:transform}
.ecco-body{width:88px;height:40px;transform:scale(var(--ecco-scale));transform-origin:center;filter:drop-shadow(0 3px 3px #10445166)}
.ecco-sprite{display:block;width:88px;height:40px;background:url('assets/ecco-original-atlas.png') 0 -20px/1408px 80px;image-rendering:pixelated;animation:ecco-stroke .8s steps(5) infinite alternate,ecco-bob 2.8s ease-in-out infinite}
@keyframes ecco-cross{from{transform:translateX(-180px)}to{transform:translateX(calc(var(--ocean-width) + 180px))}}
@keyframes ecco-stroke{from{background-position-x:0}to{background-position-x:-440px}}
@keyframes ecco-bob{0%,100%{transform:translateY(-3px) rotate(-2deg)}50%{transform:translateY(3px) rotate(2deg)}}
.ocean-fullscreen[data-suspended=true] .ecco-pass,.ocean-fullscreen[data-suspended=true] .ecco-sprite{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ecco-pass,.ecco-sprite{animation:none}.ecco-pass{transform:translateX(calc(var(--ocean-width) * .3))}}

.stone-bullet.has-charge .stone-face{filter:drop-shadow(0 0 6px #15cfff) brightness(1.04);animation:bullet-glow 1.4s ease-in-out infinite alternate}
@keyframes bullet-glow{to{filter:drop-shadow(0 0 14px #15cfff) brightness(1.16)}}
#bullet-inventory{position:absolute;left:8px;bottom:25px;z-index:2;pointer-events:none;color:#e5faff;text-shadow:0 1px 2px #123f50;font:700 8px monospace;text-align:center;background:#173c54bb;padding:4px;border-radius:5px}
#bullet-inventory[hidden]{display:none}.bullet-slots{display:flex;gap:3px;margin-bottom:3px}.bullet-slots i{display:block;width:40px;height:40px;background:transparent url('assets/bullet-gold-v14-2.png') center/contain no-repeat;opacity:.5;filter:drop-shadow(0 0 1px #9fd8e5);border-radius:0;aspect-ratio:1;height:40px}.bullet-slots i.filled{opacity:1;filter:drop-shadow(0 0 3px #12cfff)}#bullet-inventory small{display:block;font:8px monospace;margin-top:2px}
@media(prefers-reduced-motion:reduce){.stone-bullet.has-charge .stone-face{animation:none}}

.stone-controller .stone-bullet.has-charge{border-radius:14%;box-shadow:0 0 12px 3px #12cfff;animation:bullet-halo 1.4s ease-in-out infinite alternate}
.stone-bullet.has-charge:after{content:'';position:absolute;inset:0;border-radius:14%;background:#00cfff66;mix-blend-mode:color;pointer-events:none}
@keyframes bullet-halo{to{box-shadow:0 0 22px 6px #12cfff}}
@media(prefers-reduced-motion:reduce){.stone-controller .stone-bullet.has-charge{animation:none}}

.bullet-clock{position:absolute;top:43.5%;left:40%;width:19%;text-align:center;font:bold clamp(7px,2.3vw,16px)/1.2 monospace;letter-spacing:.04em;color:#173d45;text-shadow:0 1px 1px #ffe6bd;pointer-events:none;background:#f0dbb599;border-radius:3px;padding:2px 0}.bullet-clock[hidden]{display:none}
.bullet-clock.ending{color:#702b10;background:#ffe1a7;box-shadow:0 0 5px #ffc158;font-weight:900}

/* Keep the full-screen inventory centered on the stone bridge. */
.ocean-stone-bridge #bullet-inventory{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:220px;max-width:92%;box-sizing:border-box}
.ocean-stone-bridge .bullet-slots{gap:3px}
.ocean-stone-bridge .bullet-slots i{width:auto;min-width:0;flex:1;height:auto;aspect-ratio:1}

.bullet-slots i{filter:contrast(1.2) saturate(1.15) drop-shadow(0 1px 1px #102d38)}
.bullet-slots i.filled{filter:contrast(1.2) saturate(1.15) drop-shadow(0 1px 1px #102d38) drop-shadow(0 0 3px #12cfff)}

/* Compact HUD: canvas coordinates x=76..130, y=4..21 (240 × 180).
   Screen-relative sizing follows both locked and unlocked console scaling. */
#screen > #bullet-inventory{left:31.666667%;top:2.222222%;bottom:auto;width:22.5%;height:9.444444%;padding:2px;border-radius:3px;background:#173c54;box-sizing:border-box;text-shadow:none}
#screen > #bullet-inventory .bullet-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;height:100%;margin:0}
#screen > #bullet-inventory .bullet-slots i{width:100%;height:100%;min-width:0;aspect-ratio:auto;border:1px solid #759ca7;border-radius:2px;background-color:#102d40;background-size:90% 90%;opacity:1;filter:none;background-image:none}
#screen > #bullet-inventory .bullet-slots i.filled{border-color:#ffe38b;background-color:#345866;background-image:url('assets/bullet-gold-v14-2.png');filter:contrast(1.15) saturate(1.15)}
#screen > #bullet-inventory > span,#screen > #bullet-inventory > small{display:none}