:root{--ink: #050B1A;--slate: #0E2A4A;--cyan: #3FE0C8;--pink: #FF5FA2;--lime: #C6FF4F;--amber: #FFB627;--display: "Fredoka", "Baloo 2", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif;--pad-top: env(safe-area-inset-top, 0px);--pad-bottom: env(safe-area-inset-bottom, 0px);--pad-left: env(safe-area-inset-left, 0px);--pad-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:#e8f4ff;font-family:var(--body);-webkit-text-size-adjust:100%}body{overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden}#app{height:100%;display:flex;flex-direction:column}.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:calc(var(--pad-top) + 20px) calc(var(--pad-right) + 20px) calc(var(--pad-bottom) + 24px) calc(var(--pad-left) + 20px)}.home{align-items:center;justify-content:center;gap:28px;text-align:center}.home__title{font-family:var(--display);font-size:clamp(2.5rem,9vw,4.5rem);font-weight:600;margin:0;color:var(--cyan);letter-spacing:.02em}.home__zone{margin:0;font-size:1.25rem;color:#8fb4ce}.btn{font-family:var(--display);font-size:1.75rem;font-weight:600;color:var(--ink);background:var(--cyan);border:none;border-radius:22px;padding:20px 56px;min-height:72px;cursor:pointer;transition:transform .12s ease}.btn:active{transform:scale(.96)}.btn--quiet{background:transparent;color:#8fb4ce;border:2px solid #1C4269;font-size:1.25rem;min-height:60px;padding:16px 36px}.dive{overflow:hidden}.dive__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}.glow{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:1.5rem;color:var(--amber);position:relative}.glow__orb{width:18px;height:18px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px #ffb627b3}.progress{display:flex;gap:6px}.progress__pip{width:10px;height:10px;border-radius:50%;background:#16324f}.progress__pip--done{background:var(--cyan)}.question{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.question__fact{font-family:var(--display);font-size:clamp(3.5rem,15vh,9rem);font-weight:600;line-height:1;margin:0;letter-spacing:.02em}.question__retry{margin:0;color:#8fb4ce;font-size:1.1rem}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;width:100%;margin:0 auto}.card{font-family:var(--display);font-size:clamp(2rem,6vh,3.25rem);font-weight:600;color:#e8f4ff;background:var(--slate);border:2px solid #17456F;border-radius:20px;min-height:max(84px,13vh);cursor:pointer;transform:translateY(40px);opacity:0;animation:rise .32s cubic-bezier(.2,.8,.3,1) forwards;transition:transform .12s ease}.card:active{transform:scale(.97)}@keyframes rise{to{transform:translateY(0);opacity:1}}.card--correct{background:var(--lime);border-color:var(--lime);color:var(--ink);animation:none;opacity:1;transform:none}.card--wrong{border-color:var(--pink);animation:shake .42s ease;opacity:1}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.card--reveal{border-color:var(--cyan);color:var(--cyan);animation:none;opacity:1;transform:none}.card--dim{opacity:.35;animation:none;transform:none}.dots{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:#0e2a4ad9;border-radius:18px}.dots__row{display:flex;gap:8px}.dots__dot{width:clamp(8px,1.6vw,14px);height:clamp(8px,1.6vw,14px);border-radius:50%;background:var(--cyan);opacity:0;animation:dotIn .2s ease forwards}@keyframes dotIn{to{opacity:1}}.dots__caption{font-family:var(--display);font-size:1.4rem;color:var(--cyan);text-align:center;margin:0}.sparkle{position:absolute;top:-4px;right:-22px;color:var(--cyan);font-size:1.2rem;pointer-events:none}.particle{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--amber);pointer-events:none;z-index:50}.summary{align-items:center;justify-content:center;gap:20px;text-align:center}.summary__title{font-family:var(--display);font-size:clamp(2rem,7vw,3rem);margin:0;color:var(--cyan)}.summary__stat{margin:0;font-size:1.35rem;color:#c8deef}.summary__glow{font-family:var(--display);font-size:2.5rem;color:var(--amber);margin:0}.summary__actions{display:flex;flex-direction:column;gap:14px;align-items:center}.picker{align-items:center;justify-content:center;gap:32px}.picker__title{font-family:var(--display);font-size:clamp(1.75rem,5vw,2.5rem);font-weight:600;color:var(--cyan);margin:0;text-align:center}.picker__list{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.diver{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:168px;min-height:200px;padding:20px;background:var(--slate);border:2px solid #17456F;border-radius:26px;cursor:pointer;transition:transform .12s ease}.diver:active{transform:scale(.97)}.diver__name{font-family:var(--display);font-size:1.5rem;color:#e8f4ff}.diver--new{border-style:dashed;background:transparent}.diver__plus{font-family:var(--display);font-size:3.5rem;line-height:1;color:var(--cyan)}.create{align-items:center;justify-content:center;gap:22px}.create__title{font-family:var(--display);font-size:clamp(1.75rem,5vw,2.5rem);color:var(--cyan);margin:0}.create__name{font-family:var(--display);font-size:1.75rem;color:#e8f4ff;background:var(--slate);border:2px solid #17456F;border-radius:18px;padding:16px 22px;min-height:68px;width:min(420px,90vw);text-align:center}.create__name:focus{outline:none;border-color:var(--cyan)}.create__name--empty{border-color:var(--pink)}.create__avatars{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.avatar-choice{background:var(--slate);border:2px solid #17456F;border-radius:20px;padding:8px;min-width:88px;min-height:88px;cursor:pointer}.avatar-choice--on{border-color:var(--cyan)}.create__cap{display:flex;align-items:center;gap:12px;color:#8fb4ce;font-size:1.1rem}.create__select{font-family:var(--display);font-size:1.25rem;color:#e8f4ff;background:var(--slate);border:2px solid #17456F;border-radius:14px;padding:12px 16px;min-height:60px}.create__actions{display:flex;flex-direction:column;gap:12px;align-items:center}.home__art{line-height:0}.home__glow{font-size:1.75rem}.home__version{background:none;border:none;color:#2a4e71;font-family:var(--body);font-size:.9rem;padding:12px;cursor:pointer}.dive__label{font-family:var(--display);font-size:1.2rem;color:#8fb4ce}.summary__shaky{margin:0;color:var(--cyan);font-size:1.1rem}.reef{gap:18px;overflow:hidden}.reef__bar{display:flex;align-items:center;justify-content:space-between;gap:16px}.reef__heading{text-align:center}.reef__title{font-family:var(--display);font-size:clamp(1.5rem,4.5vw,2.25rem);color:var(--cyan);margin:0}.reef__count{margin:4px 0 0;color:#8fb4ce;font-size:1.05rem}.reef__eggrow{display:flex;justify-content:center}.egg{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.35rem;color:var(--ink);background:var(--amber);border:none;border-radius:20px;padding:16px 30px;min-height:68px;cursor:pointer;transition:transform .12s ease}.egg:active{transform:scale(.97)}.egg--poor{background:var(--slate);color:#5c7e9b;border:2px solid #17456F}.egg__shell{font-size:1.6rem}.reef__zones{display:flex;flex-direction:column;gap:22px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}.zoneblock__name{margin:0 0 10px;color:#8fb4ce;font-size:1rem}.zoneblock__row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:var(--slate);border:2px solid #17456F;border-radius:18px;min-height:148px;cursor:pointer;transition:transform .12s ease}.cell:active{transform:scale(.97)}.cell--dark{background:#071527;border-color:#10304f;cursor:default}.cell__name{font-family:var(--display);font-size:.95rem;color:#e8f4ff;text-align:center;line-height:1.15}.cell--dark .cell__name{color:#2a4e71}.cell__pips{display:flex;gap:4px}.pip{width:7px;height:7px;border-radius:50%;background:#16324f}.pip--on{background:var(--amber)}.detail:empty{display:none}.detail{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#050b1ad1;padding:24px;z-index:40}.detail__card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--slate);border:2px solid #17456F;border-radius:26px;padding:26px 28px;max-width:min(460px,92vw);text-align:center}.detail__art{line-height:0}.detail__art--pop{animation:pop .7s cubic-bezier(.2,.9,.3,1)}@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.detail__name{font-family:var(--display);font-size:1.75rem;color:var(--cyan);margin:0}.detail__rarity{margin:0;color:#8fb4ce;font-size:1.05rem}.detail__note{margin:0;color:var(--amber);font-size:1.05rem}.btn--small{font-size:1.05rem;min-height:52px;padding:12px 24px}.summary__breakdown{display:flex;flex-direction:column;gap:2px}.summary__line{margin:0;color:#8fb4ce;font-size:1.05rem}.summary__line--up{color:var(--lime)}.dive{flex-direction:row;gap:14px;position:relative;transition:background .9s ease}.dive__column{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:2}.meter{width:56px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2}.meter__zone{font-family:var(--display);font-size:.8rem;color:#6d93b0;text-align:center;line-height:1.1}.meter__track{flex:1;width:10px;border-radius:6px;background:#0a1e34d9;position:relative;overflow:visible;background-image:repeating-linear-gradient(to bottom,rgba(63,224,200,.22) 0 1px,transparent 1px 10%)}.meter__fill{position:absolute;inset:0 0 auto;height:0;border-radius:6px;background:linear-gradient(to bottom,rgba(63,224,200,.15),var(--cyan));transition:height .6s cubic-bezier(.3,0,.2,1)}.meter__mark{position:absolute;left:50%;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px #3fe0c88c;transition:top .6s cubic-bezier(.3,0,.2,1)}.meter__depth{font-family:var(--display);font-size:.95rem;color:var(--cyan);text-align:center}.lightshaft{position:absolute;top:0;left:20%;width:60%;height:45%;pointer-events:none;z-index:0;opacity:calc(var(--light, 1) * .5);background:linear-gradient(to bottom,#7fd4ff29,#7fd4ff00)}.drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.drift__shape{position:absolute;left:-160px;opacity:.5;animation-name:driftby;animation-timing-function:linear;animation-iteration-count:1}@keyframes driftby{0%{transform:translate(0) translateY(0)}to{transform:translate(calc(100vw + 220px)) translateY(-30px)}}.unlock{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none;animation:unlockIn .5s ease}.unlock__title{font-family:var(--display);font-size:clamp(1.75rem,6vw,3rem);color:var(--cyan);margin:0;text-shadow:0 0 24px rgba(5,11,26,.9)}.unlock__zone{margin:6px 0 0;font-size:1.2rem;color:#e8f4ff;text-shadow:0 0 18px rgba(5,11,26,.9)}@keyframes unlockIn{0%{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}.home{transition:background .9s ease}.home__depth{margin:-14px 0 0;color:#6d93b0;font-size:1rem}.nextzone{display:flex;flex-direction:column;align-items:center;gap:6px}.nextzone__label{color:#6d93b0;font-size:.95rem}.nextzone__track{width:180px;height:6px;border-radius:4px;background:#12304c;overflow:hidden}.nextzone__fill{display:block;height:100%;background:var(--cyan);border-radius:4px}.summary__unlocked{margin:0;font-family:var(--display);font-size:1.3rem;color:var(--cyan)}.nextzone__label--ready{color:var(--cyan)}.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.mote{position:absolute;border-radius:50%;background:#9fe8ff;animation-name:rise-slow;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rise-slow{0%{transform:translateY(0)}to{transform:translateY(-130vh)}}.home__row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media(orientation:landscape){.screen{padding-top:calc(var(--pad-top) + 12px);padding-bottom:calc(var(--pad-bottom) + 14px)}.cards{max-width:760px;gap:12px}.card{min-height:max(72px,12vh)}.question{gap:10px}.question__fact{font-size:clamp(3rem,12vh,6.5rem)}}@media(prefers-reduced-motion:reduce){.card{animation:fadeIn .16s ease forwards;transform:none}.card--wrong{animation:none}.dots__dot{animation:none;opacity:1}.mote,.drift__shape{display:none}.detail__art--pop,.unlock{animation:none}.dive,.home,.meter__fill,.meter__mark{transition:none}@keyframes fadeIn{to{opacity:1}}}