.echo-app{max-width:1500px;min-height:100svh;color:var(--ink);margin:auto;padding:0 clamp(16px,3vw,48px) 20px}.echo-scene{isolation:isolate;height:min(760px,100svh - 264px);min-height:300px;box-shadow:0 5px 0 var(--color-border);background:url(/art/cove.avif) 50%/cover;border-radius:28px;position:relative;overflow:hidden;container-type:inline-size}.echo-scene button{z-index:2;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;position:absolute}.echo-mermaid{aspect-ratio:1;border-radius:42%;width:43%;bottom:2%;left:6%}.echo-mermaid-pose{pointer-events:none;background:-webkit-image-set(url(/art/echo-mermaid.avif) 1x type("image/avif"),url(/art/echo-mermaid.png) 1x type("image/png")) 0 0/200% 200%;background:image-set("/art/echo-mermaid.avif" 1x type("image/avif"),"/art/echo-mermaid.png" 1x type("image/png")) 0 0/200% 200%;position:absolute;inset:0}.echo-pose-tap{background-position:100% 0}.echo-pose-delight{background-position:0 100%}.echo-pose-bye{background-position:100% 100%}.echo-shell{aspect-ratio:1;border-radius:40%;width:23%;min-width:80px;bottom:3%;right:12%}.echo-shell-art{pointer-events:none;transform-origin:50% 85%;background:url(/art/characters.avif) 0 100%/300% 200%;width:100%;height:100%;display:block}.echo-shell-art.is-struck{animation:.32s ease-out echo-shell-tap}.echo-ripples{pointer-events:none;width:36%;height:30%;position:absolute;top:24%;left:50%}.echo-ripples i{opacity:0;border:8px solid #fffbed;border-top-width:3px;border-radius:50%;animation:.7s ease-out echo-wave;position:absolute;inset:20% 10%}.echo-ripples i:nth-child(2){animation-delay:70ms}.echo-ripples i:nth-child(3){animation-delay:.14s}.echo-ripples.is-big{width:55%;height:39%;top:17%;left:40%}.echo-controls{--play-slots:4;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:14px;display:flex}@media (min-width:1000px){.adventure-ui .echo-controls>.play-control-end{padding-inline:18px}}.echo-controls :is(button,a){border:2px solid var(--color-border);background:var(--surface-warm);min-height:64px;color:var(--ink);font-size:var(--text-action);cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 var(--color-border);border-radius:22px;justify-content:center;align-items:center;gap:10px;padding:12px 18px;font-weight:700;text-decoration:none;display:inline-flex}.echo-controls svg{flex-shrink:0;width:24px;height:24px}.echo-controls .echo-primary{color:var(--surface);background:#245d70;border-color:#245d70}.echo-app :is(button,a):focus-visible{outline:4px solid var(--focus);outline-offset:4px}.echo-shell.is-helped{outline:5px solid var(--help-amber,#df992c);outline-offset:4px}.echo-hint{background:var(--surface);width:48px;height:48px;color:var(--ink);border-radius:50%;padding:8px;position:absolute;top:-20px;right:0}.echo-audio-error{justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}@keyframes echo-shell-tap{20%{rotate:-5deg;scale:1.12 .9}60%{rotate:4deg}}@keyframes echo-wave{0%{opacity:1;scale:.35}to{opacity:0;scale:1.3}}@media (max-width:700px){.echo-controls{grid-template-columns:1fr 1fr;gap:24px;display:grid}.echo-controls :is(button,a){padding:10px;font-size:15px}.echo-mermaid{width:49%;bottom:9%;left:1%}.echo-shell{width:28%;bottom:8%;right:6%}}@media (prefers-reduced-motion:reduce){.echo-shell-art.is-struck{animation:none;rotate:-5deg;scale:1.08}.echo-shell-art.is-even{rotate:5deg;scale:1.04}.echo-ripples i{opacity:1;animation:none}.echo-ripples i:nth-child(2){inset:5% 0}.echo-ripples i:nth-child(3){inset:-10%}}