/* ---------- snorkeling ---------- */
#uwVeil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse 75% 70% at 50% 48%,rgba(0,0,0,0) 55%,rgba(10,50,70,.35) 82%,rgba(5,25,40,.75) 100%),linear-gradient(180deg,rgba(120,220,255,.12),rgba(0,60,90,.18))}
#uwVeil.on{opacity:1}
body.swim .tag.npc,body.swim .tag.t,body.swim .bubble{display:none!important}

#seaHud{position:absolute;inset:0;pointer-events:none}
.sea-top{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px;border-radius:999px;font-size:13px;white-space:nowrap}
.sea-top b{font-size:14px}
.air{width:150px;height:12px;border-radius:8px;background:rgba(60,40,20,.12);overflow:hidden}
.air i{display:block;height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,#4fb9b2,#8fe3ff);transition:background .3s}
.air i.low{background:linear-gradient(90deg,#e4503c,#ff9f7a);animation:airPulse .6s infinite alternate}
@keyframes airPulse{to{opacity:.55}}
#depthTxt{font-weight:700;color:var(--sub);min-width:92px}
#seaQuit{padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:12.5px}
#seaMsg{position:absolute;left:50%;top:72px;transform:translateX(-50%);max-width:calc(100% - 32px);text-align:center;padding:8px 16px;border-radius:999px;background:rgba(10,40,60,.55);color:#fff;font-weight:700;font-size:14px;opacity:0;transition:opacity .4s}
#seaMsg.on{opacity:1}

#joy{position:absolute;left:calc(26px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.55);touch-action:none;display:none}
#joyKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none}
.sea-btns{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:center}
.sea-btns button{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:22px;font-weight:800;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;touch-action:none}
.sea-btns button small{font-size:10.5px;margin-top:3px;max-width:64px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#seaGrab{background:linear-gradient(180deg,#fff3c4,#ffd166)!important;width:84px!important;height:84px!important;animation:pulse .6s infinite alternate}
.sea-keys{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:12px;color:#fff;background:rgba(10,40,60,.45);padding:6px 14px;border-radius:999px;white-space:nowrap}
@media (pointer:coarse){#joy{display:block}.sea-keys{display:none}}
.tapRing{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid rgba(255,255,255,.85);pointer-events:none;animation:tapRing .6s ease-out forwards}
@keyframes tapRing{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}

@media (max-width:860px){
  .sea-top{top:calc(60px + env(safe-area-inset-top));gap:8px;padding:5px 6px 5px 12px;max-width:calc(100% - 16px)}
  .sea-top b{display:none}
  .air{width:96px}
  #depthTxt{min-width:0;font-size:12px}
  #seaMsg{top:calc(112px + env(safe-area-inset-top));font-size:13px;border-radius:16px}
  .sea-btns button{width:62px;height:62px}
  #seaGrab{width:76px!important;height:76px!important}
  .sea-keys{display:none}
}