.dive{--diver-h: 74px;--surface: 26px;display:flex;flex-direction:column;gap:8px;width:min(100%,720px);min-height:100dvh;margin:0 auto;padding:10px 14px 0}.dive-hud{display:flex;align-items:center;justify-content:space-between}.dive-hud__round{color:#fff;font-weight:600;text-shadow:0 2px 0 var(--sky-deep)}.dive-prompt{color:#fff;font-size:clamp(1.6rem,6.4vw,2.5rem);text-align:center;text-shadow:0 3px 0 var(--sky-deep),0 8px 16px rgb(42 139 209 / .4)}.dive-time{display:flex;align-items:center;gap:8px;min-height:24px}.dive-time__track{flex:1;height:12px;overflow:hidden;border-radius:999px;background:#fff9}.dive-time__fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--mint)}.dive-time__track.is-urgent .dive-time__fill{background:var(--coral)}.dive-time__text{min-width:2ch;color:#fff;font-weight:700;text-align:right;text-shadow:0 2px 0 var(--sky-deep)}.ocean{position:relative;flex:1;min-height:300px;overflow:hidden;border-radius:var(--radius-l);background:linear-gradient(#59c9ee,#1f8fce 30%,#1c5fa8 55%,#1f3480 78%,#1a1a56);box-shadow:var(--shadow-card)}.ocean:after{content:"";position:absolute;inset:auto 0 0;height:16px;background:#e8c98a;box-shadow:inset 0 3px #ffffff59}.ocean__mark,.ocean__floor{position:absolute;left:0;right:0;z-index:0;padding-left:8px;color:#ffffffb8;font-size:.72rem;font-weight:600;line-height:1}.ocean__mark{top:calc(var(--surface) + var(--p) * (100% - var(--surface) - 16px - var(--diver-h)) + var(--diver-h) / 2);border-top:2px dashed rgb(255 255 255 / .2);padding-top:3px}.ocean__floor{bottom:20px}.lanes{position:absolute;inset:0 0 16px 32px;z-index:1;display:flex;margin:0;padding:0;list-style:none}.lane{position:relative;display:flex;flex:1 1 0;flex-direction:column;min-width:0}.lane__name{height:var(--surface);overflow:hidden;padding:5px 2px 0;color:#fff;font-size:.72rem;font-weight:600;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgb(43 35 80 / .5)}.lane.is-you .lane__name{color:var(--sun)}.lane__check{position:absolute;top:calc(var(--surface) - 2px);left:50%;z-index:3;display:grid;place-items:center;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--mint);color:var(--ink);font-size:.75rem;font-weight:700;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.6,1)}.lane.is-locked .lane__check{transform:scale(1)}.lane.is-away .diver__face{opacity:.45}.lane__water{position:relative;flex:1}.diver{position:absolute;top:calc(var(--p, 0) * (100% - var(--diver-h)));left:50%;display:flex;flex-direction:column;align-items:center;width:min(100%,72px);height:var(--diver-h);transform:translate(-50%);transition:top 1.5s cubic-bezier(.35,.05,.25,1)}.diver__face{flex:1;width:100%;min-height:0;animation:bob 2.6s ease-in-out infinite}.diver__face .avatar{width:100%;height:100%}.diver__face .buddy{position:absolute;top:50%;left:50%;width:118%;transform:translate(-50%,-58%)}.diver__depth{padding:0 5px;border-radius:999px;background:#2b23508c;color:#fff;font-size:.7rem;font-weight:600;line-height:1.35;white-space:nowrap}.diver__gain{position:absolute;top:-22px;z-index:3;padding:0 4px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap;animation:gain-in .5s cubic-bezier(.3,1.6,.6,1)}@keyframes bob{50%{transform:translateY(-3px)}}@keyframes gain-in{0%{opacity:0;transform:translateY(10px) scale(.7)}}.tier--shallows{background:#c9f1ff;color:var(--ink)}.tier--reef{background:var(--mint);color:var(--ink)}.tier--twilight{background:var(--sun);color:var(--ink)}.tier--abyss{background:var(--grape);color:#fff}.tier--trench{background:var(--ink);color:var(--sun)}.tier--jinx{background:var(--coral);color:#fff}.tier--none{background:#e2dff0;color:var(--ink-soft)}.dive-count{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a5659;color:#fff;text-align:center}.dive-count[hidden]{display:none}.dive-count__big{font-size:clamp(4rem,22vw,7rem);font-weight:700;line-height:1;text-shadow:0 5px 0 var(--sky-deep)}.dive-count__small{font-size:1.2rem;font-weight:600}.dive-dock{position:sticky;bottom:0;z-index:5;margin:0 -14px;padding:8px 14px calc(10px + env(safe-area-inset-bottom));border-radius:var(--radius-m) var(--radius-m) 0 0;background:#fffffff5;box-shadow:0 -6px 18px #2b23501a}.dive-dock.is-answering{background:var(--sun)}.dive-dock__status{min-height:1.35em;margin-bottom:4px;font-weight:600;text-align:center}.dive-dock__form{display:flex;gap:8px}.dive-dock__form[hidden]{display:none}.dive-dock__form.is-off{opacity:.55;pointer-events:none}.dive-dock__form.shake{animation:dive-shake .32s}@keyframes dive-shake{25%{transform:translate(-7px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.dive-dock__input{flex:1;min-width:0;font-size:1.2rem}.dive-dock__send{flex:none;padding-inline:18px}.dive-toast{position:absolute;bottom:calc(100% + 8px);left:50%;max-width:calc(100% - 28px);padding:6px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-align:center;transform:translate(-50%)}.dive-results,.dive-standing{display:flex;flex-direction:column;gap:4px;width:100%;margin:0;padding:0;list-style:none}.dive-results{max-height:42dvh;overflow-y:auto}.dive-results[hidden]{display:none}.dive-standing{padding:12px;border-radius:var(--radius-l)}.dive-result{display:flex;align-items:center;gap:8px;padding:3px 8px 3px 4px;border-radius:var(--radius-s)}.dive-result.is-you{background:#ffc23347}.dive-result .avatar{flex:none;width:36px;height:36px}.dive-result__who{display:flex;flex:1;flex-direction:column;min-width:0;color:var(--ink-soft);font-size:.82rem;line-height:1.2}.dive-result__who strong{overflow:hidden;color:var(--ink);font-size:1rem;text-overflow:ellipsis;white-space:nowrap}.dive-result__gain{flex:none;font-weight:700}.dive-chip{flex:none;max-width:38%;overflow:hidden;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.dive-title{font-size:clamp(2.1rem,8vw,3.2rem)}.dive-hero{width:min(58vw,32dvh,260px)}@media(max-height:780px){.ocean{min-height:240px}.dive-results{max-height:30dvh}}@media(min-width:720px){.dive-dock{margin:0}.lane__name{font-size:.85rem}}
