:root {
    --tank-night: #071A2C;
    --aero-cyan: #49D7FF;
    --rain-glass: #D8FBFF;
    --mango-beacon: #FFB627;
    --lotus-pink: #FF6FB1;
    --aquatic-green: #21D6A4;
    --deep-violet: #4D2C8A;
    --white-sheen: rgba(255,255,255,.86);
    --glass-border: rgba(216,251,255,.52);
    --font-word: Impact, Cooper Black, Arial Black, system-ui, sans-serif;
    --font-copy: Trebuchet MS, Nunito Sans, Arial Rounded MT Bold, system-ui, sans-serif;
    --font-reveal: Georgia, DM Serif Display, serif;
}

* { box-sizing: border-box; }

html {
    scroll-snap-type: y mandatory;
    background: var(--tank-night);
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--rain-glass);
    font-family: var(--font-copy);
    background:
        radial-gradient(circle at 18% 12%, rgba(73,215,255,.34), transparent 32vw),
        radial-gradient(circle at 82% 38%, rgba(77,44,138,.48), transparent 34vw),
        radial-gradient(circle at 54% 86%, rgba(33,214,164,.18), transparent 36vw),
        linear-gradient(180deg, #071A2C 0%, #0B2943 48%, #071A2C 100%);
}

.aquarium-shell, .caustic-sheet, .rain-streaks, .foreground-mist {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.aquarium-shell { z-index: 30; overflow: hidden; }

.caustic-sheet {
    opacity: .32;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse at 20% 12%, transparent 0 24%, rgba(216,251,255,.22) 25% 27%, transparent 28% 100%),
        radial-gradient(ellipse at 74% 30%, transparent 0 28%, rgba(73,215,255,.24) 29% 31%, transparent 32% 100%),
        repeating-linear-gradient(112deg, transparent 0 42px, rgba(216,251,255,.08) 43px 47px, transparent 48px 92px);
    filter: blur(1px);
    animation: causticSwim 12s ease-in-out infinite alternate;
}

.rain-streaks {
    opacity: .4;
    background: repeating-linear-gradient(92deg, transparent 0 27px, rgba(216,251,255,.12) 28px 29px, transparent 30px 64px);
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

.foreground-mist {
    opacity: .55;
    background:
        radial-gradient(circle at 8% 22%, rgba(216,251,255,.24), transparent 17vw),
        radial-gradient(circle at 92% 74%, rgba(216,251,255,.18), transparent 20vw),
        linear-gradient(180deg, rgba(216,251,255,.14), transparent 16%, transparent 78%, rgba(216,251,255,.1));
    backdrop-filter: blur(.35px);
}

.droplet-nav {
    position: fixed;
    right: clamp(14px, 2vw, 34px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: grid;
    gap: 13px;
    padding: 13px 9px;
    border: 1px solid rgba(216,251,255,.3);
    border-radius: 999px;
    background: rgba(7,26,44,.38);
    box-shadow: inset 0 0 18px rgba(216,251,255,.16), 0 0 26px rgba(73,215,255,.18);
}

.droplet-nav::before {
    content: "";
    position: absolute;
    left: 50%; top: 8px; bottom: 8px;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(var(--aero-cyan), var(--aquatic-green), var(--mango-beacon));
    opacity: .34;
}

.droplet-nav a {
    width: 15px;
    height: 15px;
    border-radius: 50% 50% 58% 42%;
    background: radial-gradient(circle at 34% 25%, #fff, var(--rain-glass) 22%, rgba(73,215,255,.6) 58%, rgba(77,44,138,.48));
    box-shadow: 0 0 10px rgba(73,215,255,.7), inset -2px -3px 5px rgba(7,26,44,.45);
    transform: rotate(45deg);
    position: relative;
}

.droplet-nav a.active { background: radial-gradient(circle at 30% 22%, #fff, var(--mango-beacon) 38%, var(--lotus-pink)); }

.chamber {
    min-height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 54px);
    position: relative;
    isolation: isolate;
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(216,251,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(216,251,255,.032) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .45;
    z-index: -2;
}

.tank-frame {
    width: min(1220px, 94vw);
    min-height: min(840px, 88vh);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(216,251,255,.62);
    border-radius: 44px;
    background:
        linear-gradient(135deg, rgba(216,251,255,.22), rgba(216,251,255,.04) 38%, rgba(77,44,138,.12)),
        radial-gradient(circle at 20% 20%, rgba(73,215,255,.2), transparent 28%),
        radial-gradient(circle at 75% 70%, rgba(33,214,164,.14), transparent 24%),
        rgba(7,26,44,.62);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset 0 0 80px rgba(73,215,255,.12),
        0 24px 90px rgba(0,0,0,.38),
        0 0 44px rgba(73,215,255,.16);
    backdrop-filter: blur(10px) saturate(130%);
}

.tank-frame::before,
.tank-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.tank-frame::before {
    inset: 18px;
    border-radius: 32px;
    border: 1px solid rgba(216,251,255,.27);
    box-shadow: inset 0 0 24px rgba(216,251,255,.13);
}

.tank-frame::after {
    left: 6%; right: 6%; top: 28px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent);
    filter: blur(.3px);
    opacity: .72;
}

.chamber-title {
    position: absolute;
    margin: 0;
    top: clamp(26px, 5vw, 54px);
    left: clamp(26px, 5vw, 72px);
    z-index: 5;
    color: rgba(216,251,255,.2);
    font-family: var(--font-word);
    font-size: clamp(4rem, 13vw, 12rem);
    line-height: .76;
    letter-spacing: -.06em;
    text-shadow: 0 2px 0 rgba(255,255,255,.28), 0 0 40px rgba(73,215,255,.36);
    -webkit-text-stroke: 1px rgba(216,251,255,.36);
}

.waterproof-copy, .water-label, .bubble-clue, .dm-reveal, .surface-snap {
    position: absolute;
    z-index: 8;
    color: var(--rain-glass);
    font-family: var(--font-copy);
    line-height: 1.22;
    border: 1px solid rgba(216,251,255,.42);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(216,251,255,.18), rgba(7,26,44,.34));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px rgba(0,0,0,.2);
    backdrop-filter: blur(7px);
}

.water-label, .waterproof-copy { padding: 16px 20px; max-width: 370px; font-size: clamp(1rem, 1.5vw, 1.35rem); }
.intro-label { left: 7%; bottom: 9%; transform: rotate(-2deg); }
.label-float { right: 8%; top: 18%; transform: rotate(2deg); }
.label-refract { left: 8%; bottom: 12%; }
.label-sink { right: 8%; top: 18%; transform: rotate(-2deg); }
.label-lock { left: 8%; bottom: 13%; transform: rotate(1deg); }
.final-line { left: 8%; bottom: 10%; max-width: 480px; font-family: var(--font-reveal); font-size: clamp(1.35rem, 2.2vw, 2.35rem); }

.wordmark-tank {
    position: absolute;
    left: 6%; right: 12%; top: 20%;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(8px, 1.2vw, 18px);
    perspective: 1000px;
}

.glass-tile {
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216,251,255,.68);
    background:
        linear-gradient(145deg, rgba(255,255,255,.42), rgba(216,251,255,.14) 28%, rgba(73,215,255,.12) 55%, rgba(77,44,138,.18)),
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.82), transparent 18%);
    box-shadow:
        inset 6px 7px 18px rgba(255,255,255,.2),
        inset -12px -14px 28px rgba(7,26,44,.3),
        0 16px 34px rgba(0,0,0,.22),
        0 0 28px rgba(73,215,255,.16);
    backdrop-filter: blur(8px) saturate(145%);
}

.letter-tile {
    width: clamp(72px, 12vw, 150px);
    height: clamp(118px, 18vw, 220px);
    border-radius: 28px 28px 38px 38px;
    color: rgba(216,251,255,.86);
    font-family: var(--font-word);
    font-size: clamp(4.6rem, 13vw, 12rem);
    letter-spacing: -.12em;
    text-shadow: 0 0 18px rgba(73,215,255,.75), 0 4px 2px rgba(77,44,138,.45);
    animation: letterBob 5.5s ease-in-out infinite;
    transform: translateY(var(--float-y, 0)) rotate(var(--rot, 0deg));
}

.letter-tile:nth-child(1) { --rot: -4deg; animation-delay: -.2s; }
.letter-tile:nth-child(2) { --rot: 2deg; margin-top: 38px; animation-delay: -.8s; }
.letter-tile:nth-child(3) { --rot: -1deg; margin-top: 9px; animation-delay: -1.3s; }
.letter-tile:nth-child(4) { --rot: 4deg; margin-top: 52px; animation-delay: -2s; }
.letter-tile:nth-child(5) { --rot: -2deg; margin-top: 20px; animation-delay: -2.7s; }
.letter-tile:nth-child(6) { --rot: 3deg; margin-top: 45px; animation-delay: -3.1s; }

.letter-tile::before {
    content: attr(data-hidden);
    position: absolute;
    inset: 19% 16%;
    display: grid;
    place-items: end center;
    font-family: var(--font-copy);
    font-size: .72rem;
    letter-spacing: .08em;
    color: rgba(255,182,39,.86);
    text-transform: uppercase;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 32%, rgba(255,255,255,.48), rgba(73,215,255,.18) 42%, transparent 68%);
    opacity: .46;
}

.letter-tile i {
    width: 20px; height: 20px;
    border-radius: 50%;
    position: absolute;
    right: 18%; top: 14%;
    background: radial-gradient(circle at 35% 28%, #fff, var(--rain-glass) 24%, rgba(73,215,255,.38));
    box-shadow: 0 0 14px rgba(216,251,255,.6);
}

.key-tile-in {
    position: absolute;
    display: grid;
    place-items: center;
    z-index: 9;
    width: clamp(82px, 12vw, 132px);
    height: clamp(58px, 8vw, 88px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.62);
    color: var(--tank-night);
    font-family: var(--font-word);
    font-size: clamp(1.8rem, 4vw, 3.7rem);
    background: radial-gradient(circle at 28% 25%, #fff4c5, var(--mango-beacon) 52%, #ff8e2c);
    box-shadow: 0 0 26px rgba(255,182,39,.8), inset 0 3px 10px rgba(255,255,255,.48), 0 18px 28px rgba(0,0,0,.24);
    animation: keyGlow 3.8s ease-in-out infinite;
}

#keyTile { left: 72%; bottom: 14%; transform: rotate(5deg); }

.tube-path {
    position: absolute;
    border: 9px solid rgba(73,215,255,.38);
    box-shadow: inset 0 0 14px rgba(216,251,255,.2), 0 0 18px rgba(73,215,255,.2);
    opacity: .78;
}
.tube-left { left: -50px; top: 18%; width: 130px; height: 56%; border-radius: 70px; border-right-color: transparent; }
.tube-right { right: -42px; top: 8%; width: 108px; height: 70%; border-radius: 70px; border-left-color: transparent; }
.tube-curve { left: 8%; bottom: 10%; width: 76%; height: 210px; border-top-color: transparent; border-right-color: transparent; border-radius: 0 0 48% 48%; transform: rotate(-4deg); }

.condensation-line { position: absolute; z-index: 7; fill: none; stroke: rgba(216,251,255,.58); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 9px rgba(73,215,255,.5)); }
.line-one { right: 6%; top: 10%; width: 25%; height: 68%; }
.line-two { left: 16%; top: 19%; width: 70%; height: 36%; stroke: rgba(33,214,164,.7); }
.in-view .condensation-line path { animation: drawWet 2.4s ease forwards; }

.bubble-column { position: absolute; z-index: 4; width: 90px; bottom: -12%; top: 8%; pointer-events: none; }
.column-a { left: 18%; }
.column-b { right: 18%; }
.column-c { left: 13%; }
.column-d { right: 12%; }
.bubble-column span, .bubble-clue::before, .lens-pool::before {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle at 33% 25%, #fff, var(--rain-glass) 22%, rgba(73,215,255,.38) 64%, rgba(77,44,138,.12));
    box-shadow: inset -5px -7px 12px rgba(7,26,44,.22), 0 0 17px rgba(73,215,255,.45);
}

.bubble-column span { width: var(--size); height: var(--size); left: var(--x); bottom: -70px; animation: bubbleRise var(--dur) linear infinite; animation-delay: var(--delay); }

.lotus-sticker { position: absolute; z-index: 11; color: var(--lotus-pink); font-size: 3rem; text-shadow: 0 0 18px rgba(255,111,177,.7); }
.sticker-a { left: 8%; top: 12%; transform: rotate(-18deg); }
.suction-dot { position: absolute; z-index: 9; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(216,251,255,.56); background: radial-gradient(circle, rgba(216,251,255,.4), rgba(7,26,44,.22)); box-shadow: inset 0 0 12px rgba(255,255,255,.28); }
.dot-a { left: 3.5%; bottom: 6%; }
.dot-b { right: 4%; top: 7%; }

.split-current { background: radial-gradient(circle at 28% 64%, rgba(33,214,164,.22), transparent 30%), linear-gradient(135deg, rgba(216,251,255,.2), rgba(7,26,44,.66)); }
.s-rail { position: absolute; inset: 22% 8% 14% 8%; z-index: 6; }
.s-rail::before { content: ""; position: absolute; inset: 6% 8%; border: 8px solid rgba(73,215,255,.34); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-18deg); filter: blur(.2px); }
.drift-piece { position: absolute; width: 150px; height: 94px; border-radius: 30px 30px 30px 12px; color: var(--rain-glass); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; animation: driftRail 8s ease-in-out infinite; }
.piece-one { left: 12%; top: 52%; background-color: rgba(73,215,255,.13); }
.piece-two { left: 42%; top: 32%; animation-delay: -2s; background-color: rgba(255,111,177,.14); }
.piece-three { right: 14%; top: 58%; animation-delay: -4s; background-color: rgba(33,214,164,.14); }
.lens-pool { position: absolute; z-index: 8; display: grid; place-items: center; border-radius: 50%; color: rgba(7,26,44,.78); font-family: var(--font-reveal); text-align: center; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.76), rgba(216,251,255,.55) 28%, rgba(73,215,255,.24) 62%, rgba(7,26,44,.12)); box-shadow: inset -18px -22px 34px rgba(7,26,44,.18), 0 0 44px rgba(73,215,255,.45); backdrop-filter: blur(4px) saturate(160%); }
.lens-pool::before { width: 22%; height: 22%; left: 20%; top: 18%; }
.lens-a { width: 260px; height: 260px; left: 17%; top: 12%; }
.bubble-clue { padding: 16px 18px; border-radius: 999px; color: var(--tank-night); background: radial-gradient(circle at 26% 20%, #fff, var(--rain-glass) 34%, rgba(73,215,255,.72)); font-weight: 900; text-transform: uppercase; font-size: .86rem; }
.bubble-clue::before { width: 18px; height: 18px; left: 16px; top: -5px; }
.clue-a { right: 24%; bottom: 20%; }
.clue-b { left: 42%; top: 18%; }
.pool-tile-fragment { position: absolute; right: 5%; bottom: 4%; width: 260px; height: 180px; opacity: .3; background: linear-gradient(90deg, rgba(216,251,255,.25) 1px, transparent 1px), linear-gradient(0deg, rgba(216,251,255,.25) 1px, transparent 1px); background-size: 38px 38px; transform: rotate(7deg); }

.refract-frame { background: radial-gradient(circle at 70% 36%, rgba(73,215,255,.3), transparent 34%), rgba(7,26,44,.66); }
.giant-lens { position: absolute; right: 7%; top: 15%; width: min(500px, 42vw); height: min(500px, 42vw); z-index: 10; border-radius: 50%; display: grid; place-items: center; padding: 50px; color: rgba(7,26,44,.82); font-family: var(--font-reveal); font-size: clamp(1.4rem, 3vw, 3.2rem); line-height: .96; text-align: center; background: radial-gradient(circle at 34% 25%, rgba(255,255,255,.9), rgba(216,251,255,.58) 28%, rgba(73,215,255,.24) 62%, rgba(77,44,138,.16)); box-shadow: inset -34px -38px 70px rgba(7,26,44,.2), 0 0 70px rgba(73,215,255,.44); transform: translate(var(--lens-dx, 0), var(--lens-dy, 0)); transition: transform .18s ease-out; }
.refract-tiles { position: absolute; left: 8%; top: 28%; display: grid; grid-template-columns: repeat(3, 112px); gap: 18px; z-index: 7; transform: rotate(-3deg); }
.socket-tile { width: 112px; height: 112px; border-radius: 26px; font-family: var(--font-word); font-size: 4rem; color: var(--rain-glass); }
.empty-socket { background: rgba(7,26,44,.46); border-style: dashed; box-shadow: inset 0 0 34px rgba(255,111,177,.22); }
.tiny-solved { color: var(--tank-night); background: radial-gradient(circle, var(--mango-beacon), rgba(255,182,39,.4)); font-size: 2.1rem; }

.sink-frame { background: radial-gradient(circle at 44% 82%, rgba(77,44,138,.38), transparent 34%), rgba(7,26,44,.7); }
.sink-stack { position: absolute; left: 10%; top: 20%; width: 48%; height: 62%; z-index: 7; }
.sink-piece { position: absolute; width: 180px; height: 104px; border-radius: 28px; color: var(--rain-glass); font: 900 1.05rem var(--font-copy); text-transform: uppercase; cursor: pointer; }
.sink-piece:nth-child(1) { left: 15%; top: 16%; transform: rotate(-7deg); }
.sink-piece:nth-child(2) { left: 46%; top: 30%; transform: rotate(5deg); }
.sink-piece:nth-child(3) { left: 26%; top: 56%; transform: rotate(9deg); }
.sink-piece:nth-child(4) { left: 58%; top: 64%; transform: rotate(-4deg); }
.sink-piece.wrong { background: linear-gradient(145deg, rgba(255,111,177,.5), rgba(216,251,255,.11)); }
.sink-piece.right { background: linear-gradient(145deg, rgba(33,214,164,.42), rgba(216,251,255,.14)); }
.sink-piece.released { animation: suctionRelease 1.2s ease forwards; }
.preview-snap { right: 12%; bottom: 16%; padding: 18px 24px; color: var(--mango-beacon); text-transform: uppercase; letter-spacing: .1em; }
.air-pump { position: absolute; right: 16%; bottom: 34%; width: 140px; height: 120px; z-index: 6; border-radius: 28px; border: 1px solid rgba(216,251,255,.4); background: linear-gradient(135deg, rgba(77,44,138,.6), rgba(73,215,255,.16)); box-shadow: inset 0 0 25px rgba(216,251,255,.15); }
.air-pump span { position: absolute; left: 24px; top: 28px; width: 54px; height: 54px; border-radius: 50%; background: var(--lotus-pink); box-shadow: 0 0 20px rgba(255,111,177,.6); }
.air-pump b { position: absolute; right: -110px; top: 55px; width: 120px; height: 10px; border-radius: 999px; background: rgba(73,215,255,.48); }

.lock-frame { background: radial-gradient(circle at center, rgba(255,182,39,.18), transparent 28%), rgba(7,26,44,.72); }
.lock-assembly { position: absolute; inset: 15% 10% 15% 10%; z-index: 7; }
.socket-ring { position: absolute; inset: 4% 11%; border-radius: 50%; border: 8px solid rgba(33,214,164,.34); box-shadow: 0 0 38px rgba(33,214,164,.26), inset 0 0 48px rgba(216,251,255,.1); }
.lock-letter { position: absolute; width: 110px; height: 110px; border-radius: 30px; font: 900 4rem var(--font-word); color: var(--rain-glass); transition: transform 1s cubic-bezier(.18,1.25,.42,1), filter .5s ease; }
.lock-letter:nth-child(2) { left: 12%; top: 34%; }
.lock-letter:nth-child(3) { left: 27%; top: 18%; }
.lock-letter:nth-child(4) { left: 43%; top: 34%; }
.lock-letter:nth-child(5) { left: 58%; top: 18%; }
.lock-letter:nth-child(6) { left: 72%; top: 34%; }
.lock-letter:nth-child(7) { left: 48%; top: 58%; }
.lock-key { right: 12%; bottom: 8%; border: 0; cursor: pointer; }
.lock-assembly.solved .lock-letter { filter: drop-shadow(0 0 18px rgba(255,182,39,.74)); }
.lock-assembly.solved .lock-letter:nth-child(2) { transform: translate(0, 18px); }
.lock-assembly.solved .lock-letter:nth-child(3) { transform: translate(10px, 92px); }
.lock-assembly.solved .lock-letter:nth-child(4) { transform: translate(0, 18px); }
.lock-assembly.solved .lock-letter:nth-child(5) { transform: translate(-10px, 92px); }
.lock-assembly.solved .lock-letter:nth-child(6) { transform: translate(-30px, 18px); }
.lock-assembly.solved .lock-letter:nth-child(7) { transform: translate(55px, -18px); }
.ripple-meter { position: absolute; right: 10%; top: 14%; display: flex; gap: 10px; z-index: 8; }
.ripple-meter span { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(216,251,255,.64); box-shadow: inset 0 0 16px rgba(73,215,255,.28); }
.ripple-meter span.on { background: var(--aquatic-green); box-shadow: 0 0 20px rgba(33,214,164,.7); }
.dm-reveal { right: 9%; bottom: 16%; max-width: 330px; padding: 20px 22px; font-family: var(--font-reveal); font-size: clamp(1.3rem, 2vw, 2rem); }

.surface-frame { display: grid; place-items: center; background: radial-gradient(circle at center 30%, rgba(216,251,255,.34), transparent 36%), linear-gradient(180deg, rgba(73,215,255,.18), rgba(7,26,44,.72)); }
.final-emblem { position: relative; z-index: 9; display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); padding: clamp(22px, 4vw, 44px); border-radius: 38px; border: 1px solid rgba(255,255,255,.64); background: linear-gradient(145deg, rgba(216,251,255,.66), rgba(73,215,255,.22) 42%, rgba(33,214,164,.24)); box-shadow: inset 0 0 34px rgba(255,255,255,.3), 0 0 55px rgba(73,215,255,.48), 0 26px 70px rgba(0,0,0,.28); transform: translateY(40px) scale(.92); opacity: .8; transition: transform 1s cubic-bezier(.18,1.25,.42,1), opacity .8s ease; }
.in-view .final-emblem, .surface-frame.surfaced .final-emblem { transform: translateY(0) scale(1); opacity: 1; animation: surfaceBob 4s ease-in-out infinite 1s; }
.final-emblem span { font-family: var(--font-word); font-size: clamp(4rem, 12vw, 11rem); line-height: .78; color: rgba(7,26,44,.86); text-shadow: 0 2px 0 rgba(255,255,255,.55), 0 0 22px rgba(216,251,255,.8); letter-spacing: -.08em; }
.final-emblem b { display: grid; place-items: center; width: clamp(84px, 14vw, 150px); height: clamp(64px, 10vw, 106px); border-radius: 26px; color: var(--tank-night); font: 900 clamp(2rem, 5vw, 4.4rem) var(--font-word); background: radial-gradient(circle at 30% 22%, #fff4c0, var(--mango-beacon) 50%, #ff971f); box-shadow: 0 0 30px rgba(255,182,39,.8); }
.reset-snap { right: 8%; top: 12%; border: 0; padding: 16px 24px; color: var(--tank-night); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; background: radial-gradient(circle at 28% 20%, #fff, var(--rain-glass) 40%, var(--aero-cyan)); }
.lens-final { right: 14%; bottom: 17%; width: 180px; height: 180px; color: var(--deep-violet); }

.in-view .letter-tile { animation-name: letterBob, focusWobble; animation-duration: 5.5s, 1.5s; }
.in-view .drift-piece { filter: drop-shadow(0 0 12px rgba(73,215,255,.45)); }
.in-view .surface-snap { animation: ripplePulse 2.2s ease-in-out infinite; }

@keyframes causticSwim { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.04); } }
@keyframes letterBob { 0%,100% { translate: 0 0; } 45% { translate: 0 -18px; } 72% { translate: 0 7px; } }
@keyframes focusWobble { 0% { filter: blur(2px); } 55%,100% { filter: blur(0); } }
@keyframes keyGlow { 0%,100% { box-shadow: 0 0 22px rgba(255,182,39,.62), inset 0 3px 10px rgba(255,255,255,.48), 0 18px 28px rgba(0,0,0,.24); } 50% { box-shadow: 0 0 48px rgba(255,182,39,.95), inset 0 3px 14px rgba(255,255,255,.7), 0 20px 34px rgba(0,0,0,.28); } }
@keyframes bubbleRise { from { transform: translateY(0) scale(.86); opacity: 0; } 12% { opacity: .92; } 86% { opacity: .72; } to { transform: translateY(-105vh) translateX(var(--wobble)) scale(1.08); opacity: 0; } }
@keyframes driftRail { 0%,100% { transform: translate(0,0) rotate(-2deg); } 35% { transform: translate(56px,-30px) rotate(5deg); } 65% { transform: translate(-24px,32px) rotate(-4deg); } }
@keyframes drawWet { to { stroke-dashoffset: 0; } }
@keyframes suctionRelease { 0% { filter: saturate(1); } 35% { transform: translateY(-18px) rotate(-9deg); background: linear-gradient(145deg, rgba(255,111,177,.74), rgba(216,251,255,.16)); } 100% { transform: translateY(260px) rotate(18deg); opacity: .35; filter: blur(1.5px); } }
@keyframes ripplePulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 0 rgba(33,214,164,.38); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 22px rgba(33,214,164,0); } }
@keyframes surfaceBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

@media (max-width: 780px) {
    html { scroll-snap-type: none; }
    .droplet-nav { right: 8px; transform: translateY(-50%) scale(.82); }
    .tank-frame { min-height: 900px; border-radius: 30px; }
    .wordmark-tank { left: 4%; right: 5%; top: 18%; gap: 4px; }
    .letter-tile { width: 14vw; height: 34vw; min-width: 46px; font-size: 18vw; border-radius: 18px; }
    #keyTile { left: 58%; bottom: 24%; }
    .water-label, .waterproof-copy { max-width: 78%; }
    .intro-label, .label-refract, .label-lock, .final-line { left: 8%; bottom: 8%; }
    .label-float, .label-sink { left: 8%; right: auto; top: 70%; }
    .chamber-title { font-size: 22vw; top: 34px; }
    .lens-a { width: 205px; height: 205px; left: 9%; top: 22%; }
    .drift-piece { width: 120px; height: 78px; }
    .piece-one { left: 5%; top: 42%; } .piece-two { left: 34%; top: 32%; } .piece-three { left: 46%; top: 56%; }
    .giant-lens { width: 250px; height: 250px; right: 8%; top: 22%; }
    .refract-tiles { left: 8%; top: 56%; grid-template-columns: repeat(3, 82px); gap: 12px; }
    .socket-tile { width: 82px; height: 82px; font-size: 3rem; }
    .sink-stack { left: 4%; top: 28%; width: 86%; }
    .sink-piece { width: 132px; height: 82px; }
    .air-pump, .preview-snap { right: 8%; }
    .lock-assembly { inset: 22% 3% 18% 3%; transform: scale(.78); transform-origin: top center; }
    .dm-reveal, .ripple-meter { right: 7%; }
    .final-emblem { flex-direction: column; }
    .final-emblem span { font-size: 20vw; }
}