/* Daily dive trivia. Layout: phone = the game fills the first screen, content scrolls below;
   desktop = game panel + side panel on the first screen, content below. Ocean palette, Fredoka + Nunito. */
:root{
  --sky:#cfe8ff; --sky2:#eaf5ff; --page:#e4f0ff; --page2:#f4f9ff;
  --ink:#1d2433; --ink2:#46506a; --muted:#6b7487;
  --card:#ffffff; --line:#e3e8f0; --chip:#eef4ff; --chip-ink:#2b4a8f;
  --coral:#ff6b5b; --coral-d:#d94e40; --yellow:#ffc83d; --blue:#4d8dff; --mint:#2ccf9e; --violet:#9a7cff;
  --kicker:#6b4fe0; --good:#0f9e76; --bad:#e5484d; --star:#ffc83d; --badbg:#ffe4e5;
  --shadow:rgba(29,36,51,.14);
  --w0:#6fd0f5; --w1:#2a98d6; --w2:#1b5aa6; --w3:#13306e; --w4:#0c1a46; --w5:#070d2b;
  --z0a:#74d3f4; --z0b:#2b9bd8; --z1a:#2276bd; --z1b:#173f8c;
  --f-display:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --f-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --sky:#13244a; --sky2:#1c3363; --page:#0d1630; --page2:#111c3a;
    --ink:#eef2fb; --ink2:#c3cbe0; --muted:#97a2bd;
    --card:#18223f; --line:#2a3658; --chip:#22305a; --chip-ink:#bcd0ff;
    --kicker:#b6a6ff; --good:#3ddbb0; --bad:#ff7b7b; --badbg:#45202a; --shadow:rgba(0,0,0,.35);
    --w0:#1f7fb8; --w1:#16609e; --w2:#113f7c; --w3:#0c2556; --w4:#08153a; --w5:#050a22;
    --z0a:#2a8fc4; --z0b:#17679f; --z1a:#165593; --z1b:#10306e;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:600 15px/1.5 var(--f-body)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}

/* ---------- first screen ---------- */
.first{display:block}
.game{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:540px;max-height:980px;background:var(--sky);overflow:hidden;isolation:isolate}
.side{display:none}

.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px max(14px,env(safe-area-inset-right,0px)) 6px max(14px,env(safe-area-inset-left,0px));padding-top:max(10px,env(safe-area-inset-top,0px))}
.bar-l,.bar-r{display:flex;gap:6px}
.ib{width:38px;height:38px;border-radius:12px;border:0;background:var(--card);display:grid;place-items:center;box-shadow:0 2px 0 var(--shadow);color:var(--ink)}
.ib svg{width:19px;height:19px}
.ib:active{transform:translateY(1px);box-shadow:0 1px 0 var(--shadow)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 22px/1 var(--f-display);letter-spacing:.01em;color:var(--ink)}
.mark{position:relative;flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(160deg,#6fd8f8,#2a8ad6 55%,#1b468f);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.mark i{position:absolute;display:block;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.22)}
.mark i:nth-child(1){width:7px;height:7px;left:15px;top:4px}
.mark i:nth-child(2){width:9px;height:9px;left:5px;top:9px}
.mark i:nth-child(3){width:11px;height:11px;left:12px;top:14px}

.card{display:flex;align-items:center;gap:12px;margin:2px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));background:var(--card);border-radius:16px;padding:9px 12px 10px 14px;box-shadow:0 2px 0 var(--shadow)}
.card-t{flex:1;min-width:0}
.kick{margin:0 0 3px;font:800 10px/1.2 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--kicker)}
.cat{margin:0;font:600 18px/1.15 var(--f-display);text-wrap:balance}
.cat span{color:var(--muted);font-weight:500}
.blurb{margin:3px 0 0;font:700 12px/1.35 var(--f-body);color:var(--ink2)}
.hgt{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:6px 8px;border-radius:12px;background:var(--chip);color:var(--chip-ink)}
.hgt b{font:700 22px/1 var(--f-display);font-variant-numeric:tabular-nums}
.hgt span{font:800 9px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase}

/* ---------- scene: the sea from the side. The view scrolls; the world inside it is as deep as the dive. ---------- */
.scene{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(var(--sky2) 0 72px,var(--z0a) 72px,var(--z0b))}
.view{position:absolute;inset:0;z-index:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.view::-webkit-scrollbar{display:none}
.world{position:relative;min-height:100%;overflow:hidden;--th:44px;--bs:56px}
.skyb{position:absolute;left:0;right:0;top:0;height:72px;background:linear-gradient(var(--sky),var(--sky2));pointer-events:none}
/* the water: one band per real ocean zone. app.js sets each band's top between the two stops the zone boundary falls between */
#bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:0;right:0;top:72px;bottom:0;opacity:0;transition:opacity .8s ease}
.band.on{opacity:1}
.band+.band{margin-top:-20px;-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
.band::before,.band::after{content:"";position:absolute;pointer-events:none}
.b0{background:linear-gradient(var(--z0a),var(--z0b) 420px)}
.b0::before{left:0;right:0;top:0;height:340px;background:repeating-linear-gradient(104deg,transparent 0 46px,rgba(255,255,255,.13) 46px 76px,transparent 76px 132px);-webkit-mask-image:linear-gradient(#000 10%,transparent);mask-image:linear-gradient(#000 10%,transparent);opacity:var(--ray,1);animation:rays 9s ease-in-out infinite alternate}
@keyframes rays{to{background-position:70px 0}}
.b1{background:linear-gradient(var(--z1a),var(--z1b) 520px)}
.b1::before{inset:0;background-image:radial-gradient(1.3px 1.3px at 30px 40px,rgba(200,235,255,.3),transparent),radial-gradient(1.1px 1.1px at 120px 100px,rgba(200,235,255,.24),transparent);background-size:170px 150px;animation:snow 30s linear infinite}
.b2{background:linear-gradient(#11255c,#09143d 600px)}
.b2::before{inset:0;background-image:radial-gradient(2px 2px at 30px 40px,var(--g1,rgba(120,240,255,.9)),transparent),radial-gradient(2px 2px at 140px 96px,var(--g2,rgba(255,140,220,.8)),transparent),radial-gradient(1.6px 1.6px at 92px 158px,var(--g3,rgba(150,255,200,.8)),transparent),radial-gradient(1.4px 1.4px at 176px 20px,var(--g4,rgba(255,230,140,.8)),transparent);background-size:200px 210px;animation:glow 3.4s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.2}to{opacity:.95}}
.b3{background:linear-gradient(#070e2c,#040819 600px)}
.b3::before{inset:0;background-image:radial-gradient(1.6px 1.6px at 18px 22px,rgba(255,255,255,.5),transparent),radial-gradient(1.2px 1.2px at 74px 61px,rgba(255,255,255,.42),transparent),radial-gradient(1.8px 1.8px at 122px 104px,rgba(255,255,255,.36),transparent),radial-gradient(1.1px 1.1px at 41px 128px,rgba(255,255,255,.46),transparent),radial-gradient(1.4px 1.4px at 152px 16px,rgba(255,255,255,.32),transparent);background-size:170px 150px;opacity:var(--sn,1);animation:snow 18s linear infinite}
@keyframes snow{to{background-position:0 150px}}
.b4{background:linear-gradient(#03061a,#020410 500px)}
.b4::before,.b4::after{top:0;bottom:0;width:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='200'%3E%3Cpath d='M0 0H22L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200H0Z' fill='%23181a2b'/%3E%3Cpath d='M22 0L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200' fill='none' stroke='%2337405f' stroke-width='2'/%3E%3C/svg%3E") 0 0/34px 200px repeat-y}
.b4::before{left:0}
.b4::after{right:0;transform:scaleX(-1)}
.zl{position:absolute;inset:0;pointer-events:none}
.zl i{position:absolute;left:0;right:0;border-top:1.5px dashed rgba(255,255,255,.2)}
.zl span{position:absolute;left:76px;top:-9px;padding:0 8px;border-radius:999px;background:rgba(4,12,36,.38);color:rgba(255,255,255,.88);font:800 9.5px/17px var(--f-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nolabels .zl span{display:none}
.rope{position:absolute;left:61px;top:66px;width:2px;height:0;border-radius:1px;background:#efe3c7;transition:height .45s cubic-bezier(.3,.7,.3,1)}
.rope::after{content:"";position:absolute;left:-5px;bottom:-11px;width:12px;height:13px;border-radius:3px 3px 6px 6px;background:#5a6378;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.surface{position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none;z-index:2}
.buoy{position:absolute;left:42px;top:28px;width:60px;height:56px;transform-origin:20px 44px;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(2px) rotate(3deg)}}
.wave{position:absolute;left:-40px;right:-40px;top:62px;height:22px;background:radial-gradient(circle at 20px -6px,transparent 15px,var(--z0a) 15.5px) 0 0/40px 22px repeat-x;animation:wave 5s linear infinite}
@keyframes wave{to{transform:translateX(40px)}}
/* the per-visit scene from scene.js: sky, weather, things on the surface, creatures in each zone */
.game.dk .logo{color:#fff}
.game.starry::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 14px 12px,#fff,transparent),radial-gradient(1px 1px at 58px 40px,#fff,transparent),radial-gradient(1.4px 1.4px at 96px 8px,#fff,transparent),radial-gradient(1px 1px at 128px 50px,#fff,transparent),radial-gradient(1.2px 1.2px at 160px 26px,#fff,transparent);background-size:180px 80px;opacity:.7;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.skyb>*,#sfx>*{position:absolute;display:block;pointer-events:none}
#sfx{position:absolute;inset:0}
.skyb svg,#sfx svg,.band svg{display:block;width:100%;height:auto}
.stars{inset:0;background-image:radial-gradient(1.2px 1.2px at 14px 12px,#fff,transparent),radial-gradient(1px 1px at 58px 40px,#fff,transparent),radial-gradient(1.4px 1.4px at 96px 8px,#fff,transparent),radial-gradient(1px 1px at 128px 50px,#fff,transparent),radial-gradient(1.2px 1.2px at 160px 26px,#fff,transparent);background-size:170px 60px;animation:twk 3.5s ease-in-out infinite alternate}
@keyframes twk{from{opacity:.45}to{opacity:.95}}
.sun{top:10px;width:22px;height:22px;border-radius:50%;background:#fff3b0;box-shadow:0 0 18px 6px rgba(255,236,150,.55)}
.sun.low{top:50px;width:26px;height:26px}
.sun.dawn{background:#ffd59a;box-shadow:0 0 22px 8px rgba(255,190,130,.55)}
.sun.dusk{background:#ff9a62;box-shadow:0 0 22px 8px rgba(255,140,90,.55)}
.moon{top:10px;width:16px;height:16px;border-radius:50%;background:#f3efcf;box-shadow:0 0 12px 3px rgba(243,239,207,.35)}
.moon.cr{background:transparent;box-shadow:inset -5px 2px 0 0 #f3efcf;transform:rotate(-24deg)}
.hz{opacity:.45}
.shoot{top:8px;width:46px;height:1.5px;border-radius:1px;background:linear-gradient(90deg,transparent,#fff);opacity:0;animation:shoot 9s linear var(--dl,0s) infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}2%{opacity:1}7%,100%{opacity:0;transform:translate(90px,28px) rotate(18deg)}}
.aur{left:-10%;right:-10%;top:-6px;height:52px;background:linear-gradient(90deg,transparent 5%,rgba(90,255,170,.5) 25%,rgba(110,220,255,.38) 45%,rgba(190,120,255,.45) 68%,transparent 92%);filter:blur(7px);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);animation:aur 10s ease-in-out infinite alternate}
@keyframes aur{from{transform:skewX(-14deg) translateX(-12px)}to{transform:skewX(12deg) translateX(14px)}}
.rbw{top:2px;width:150px;height:75px;margin-left:-75px;background:radial-gradient(circle 75px at 50% 100%,transparent 60%,rgba(255,90,90,.55) 61%,rgba(255,180,70,.55) 65%,rgba(255,240,100,.5) 69%,rgba(100,220,120,.5) 73%,rgba(90,160,255,.5) 77%,rgba(160,110,240,.45) 81%,transparent 84%);opacity:.75}
.land{top:52px;height:18px}
.land svg{height:100%}
.gull .w{transform-box:fill-box;transform-origin:center;animation:flap .45s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(.4)}}
.rain{left:0;right:0;top:0;height:84px;background-image:linear-gradient(100deg,transparent 45%,rgba(225,236,255,.55) 47%,transparent 49%),linear-gradient(100deg,transparent 45%,rgba(225,236,255,.35) 47%,transparent 49%);background-size:11px 15px,17px 23px;animation:rain .5s linear infinite}
@keyframes rain{to{background-position:-3px 15px,-5px 23px}}
.snowf{left:0;right:0;top:0;height:84px;background-image:radial-gradient(1.8px 1.8px at 10px 8px,#fff,transparent),radial-gradient(1.4px 1.4px at 40px 30px,#fff,transparent),radial-gradient(2px 2px at 70px 18px,#fff,transparent);background-size:90px 44px;animation:snowf 5s linear infinite}
@keyframes snowf{to{background-position:20px 44px}}
.flash{inset:0;background:#fff;opacity:0;animation:flash 8s linear var(--dl,0s) infinite}
@keyframes flash{0%,93%,97%,100%{opacity:0}94%{opacity:.4}}
.bolt{top:2px;width:16px;opacity:0;animation:bolt 8s linear var(--dl,0s) infinite}
@keyframes bolt{0%,93.5%,96.5%,100%{opacity:0}94%,96%{opacity:1}}
.haze{inset:0;background:linear-gradient(transparent,rgba(236,241,245,.6))}
/* lanes slide a creature (or a cloud, a ship) from one edge to the other */
.lane{position:absolute;left:0;right:0;height:0;animation:lane var(--t,60s) linear var(--dl,0s) infinite}
.lane.l{animation-direction:reverse}
.lane>i{position:absolute;right:100%;top:0;display:block;width:var(--w)}
.lane.l>i{transform:scaleX(-1)}
.lane.tiny{opacity:.75}
@keyframes lane{from{transform:translateX(0)}to{transform:translateX(calc(100% + var(--w)))}}
.sp svg{overflow:visible}
.sp.bob{animation:boat 3.6s ease-in-out infinite;transform-origin:50% 85%}
.sp.slow{animation-duration:5.5s}
@keyframes boat{50%{transform:translateY(1.5px) rotate(1.6deg)}}
.lit{opacity:0}
.game[data-tod=night] .lit,.game[data-tod=dusk] .lit,.game[data-wx=storm] .lit{opacity:1}
.sub{z-index:1}
.beam{position:absolute;width:150px;height:22px;margin-top:-11px;background:linear-gradient(90deg,rgba(255,240,170,.75),rgba(255,240,170,0));clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);transform-origin:0 50%;animation:sweep 6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.clipw{overflow:hidden}
.fluke{position:absolute;left:5px;bottom:0;width:34px;transform:translateY(34px);animation:fluke 10s ease-in-out infinite}
@keyframes fluke{0%,50%{transform:translateY(34px)}62%,76%{transform:translateY(2px)}90%,100%{transform:translateY(34px)}}
.spout{transform-origin:50% 100%;transform:scaleY(0);opacity:0;animation:spout 7s ease-out infinite}
@keyframes spout{0%,70%{transform:scaleY(0);opacity:0}76%{transform:scaleY(1);opacity:1}90%{transform:scaleY(1.1);opacity:0}100%{opacity:0}}
.dolph{position:absolute;left:0;bottom:-16px;width:30px;animation:jump 6s ease-in-out var(--dl,0s) infinite}
@keyframes jump{0%{opacity:1;transform:translate(0,0) rotate(-38deg)}22%{transform:translate(24px,-26px) rotate(0)}44%{opacity:1;transform:translate(48px,0) rotate(38deg)}45%,100%{opacity:0;transform:translate(48px,0) rotate(38deg)}}
.glint{width:34px;height:24px;z-index:1;background:repeating-linear-gradient(transparent 0 3px,var(--gc) 3px 5px);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);opacity:.75}
.glint.dawn{--gc:rgba(255,214,160,.85)}
.glint.dusk{--gc:rgba(255,150,100,.85)}
.glint.night{--gc:rgba(232,236,255,.6)}
.fogb{left:-20px;right:-20px;height:70px;z-index:1;background:linear-gradient(transparent,rgba(232,238,243,.6) 45%,transparent);animation:fogd 14s ease-in-out infinite alternate}
@keyframes fogd{to{transform:translateX(-14px)}}
.pr{position:absolute;display:block;width:var(--w,44px);pointer-events:none}
.bob{animation:bobv var(--bt,6s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes bobv{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
.kelp{transform-box:fill-box;transform-origin:50% 100%;animation:kelp 6s ease-in-out infinite alternate}
@keyframes kelp{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
.spk{position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20px 30px,rgba(140,255,240,.9),transparent),radial-gradient(1.2px 1.2px at 90px 80px,rgba(140,255,240,.7),transparent),radial-gradient(1.6px 1.6px at 150px 20px,rgba(160,240,255,.8),transparent);background-size:190px 120px;animation:glow 2.8s ease-in-out infinite alternate}
.lf circle{animation:twk 1.6s ease-in-out infinite alternate}
.glo{filter:drop-shadow(0 0 3px rgba(160,240,255,.6))}
.cil{animation:cil 2.4s linear infinite}
@keyframes cil{0%,100%{stroke:#ff6fa8}33%{stroke:#7cf}66%{stroke:#7dffb0}}
.ring{animation:ringf 3.2s ease-in-out infinite}
@keyframes ringf{0%,60%,100%{stroke-opacity:0}70%{stroke-opacity:.95}80%{stroke-opacity:.2}}
.lure{animation:lure 2.2s ease-in-out infinite alternate}
@keyframes lure{from{opacity:.45}to{opacity:1}}
.ear{transform-box:fill-box;transform-origin:100% 50%;animation:ear 1.1s ease-in-out infinite alternate}
.ear.r{transform-origin:0 50%}
@keyframes ear{to{transform:scaleY(.45)}}
.smt{right:-8px;opacity:.9}
.gl{position:absolute;width:3px;height:3px;border-radius:50%;background:#9ff6ff;box-shadow:0 0 6px 2px rgba(140,240,255,.6);animation:glow 3s ease-in-out var(--dl,0s) infinite alternate}
.amp{opacity:.85;animation:glow 2.4s ease-in-out infinite alternate}
.band:not(.on) *{animation-play-state:paused}
.game.tw1 .b4::before,.game.tw1 .b4::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='200'%3E%3Cpath d='M0 0H22L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200H0Z' fill='%232a2018'/%3E%3Cpath d='M22 0L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200' fill='none' stroke='%234a3a2c' stroke-width='2'/%3E%3C/svg%3E")}
.game.tw2 .b4::before,.game.tw2 .b4::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='200'%3E%3Cpath d='M0 0H22L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200H0Z' fill='%2314201f'/%3E%3Cpath d='M22 0L15 22L27 44L13 70L21 92L9 116L24 138L12 162L25 184L22 200' fill='none' stroke='%232f4442' stroke-width='2'/%3E%3C/svg%3E")}
.floor svg{overflow:visible}
.smk{animation:smk 4s ease-out infinite}
@keyframes smk{from{transform:translateY(6px);opacity:.9}to{transform:translateY(-14px);opacity:0}}
@media (prefers-color-scheme:dark){
  .skyb .cl{opacity:.55}
  .rbw{opacity:.4}
  .haze{background:linear-gradient(transparent,rgba(120,135,160,.35))}
  .fogb{background:linear-gradient(transparent,rgba(110,125,150,.35) 45%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .lane{animation:none!important;transform:translateX(var(--rx,60%))!important}
  .bolt,.flash,.shoot{display:none!important}
  .fluke{animation:none!important;transform:translateY(2px)!important}
  .spout{animation:none!important;transform:none!important;opacity:1!important}
  .dolph{animation:none!important;transform:translate(24px,-26px)!important}
}

/* stops on the line: depth, a dot on the rope, the answer, and the creature met there */
.stops{position:absolute;inset:0}
.stop{position:absolute;left:0;right:0;height:var(--th);margin-top:calc(var(--th)/-2);z-index:3;--zc:#3cc4f0}
.dot{position:absolute;left:57px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--zc)}
.tag{position:absolute;left:76px;right:calc(var(--bs) + 22px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:0 10px 0 13px;border-radius:12px;background:var(--card);box-shadow:inset 4px 0 0 var(--zc),0 3px 0 rgba(0,20,60,.2)}
.tag b{font:600 16px/1.1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag i{font:800 11.5px/1.1 var(--f-body);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact .tag{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.compact .tag b{min-width:0;font-size:14px}
.compact .tag i{flex:none;font-size:11px}
.stop.new{animation:stopIn .3s ease-out both}
@keyframes stopIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.badge{position:absolute;right:12px;padding:0;border:0;top:50%;width:var(--bs);height:var(--bs);margin-top:calc(var(--bs)/-2);border-radius:50%;background:#0b1a3a;box-shadow:0 0 0 3px var(--rc,var(--zc)),0 4px 10px rgba(0,10,40,.35);cursor:pointer}
.badge.r3{box-shadow:0 0 0 3px var(--rc),0 0 12px 2px rgba(164,92,255,.55)}
.badge.r4{box-shadow:0 0 0 3px var(--rc),0 0 14px 3px rgba(255,182,39,.65)}
.badge img,.badge .noimg{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.noimg{display:grid!important;place-items:center;background:#0b1a3a;color:var(--zc)}
.noimg svg{width:56%;height:56%}
.badge .ring{display:none}
.badge.shiny{box-shadow:0 0 16px 3px rgba(255,214,110,.8)}
.badge.shiny .ring{display:block;position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from var(--a),#ff5f6d,#ffc371,#47e891,#42c6ff,#b56cff,#ff5f6d);animation:spin 2.6s linear infinite}
.badge.shiny::after{content:"✦";position:absolute;z-index:2;right:-6px;top:-8px;font:700 16px/1 var(--f-display);color:#fff7c9;text-shadow:0 0 6px #ffcf4a,0 0 2px #ff9d3a;animation:tw 1.8s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
.badge em{position:absolute;z-index:2;left:50%;bottom:-8px;transform:translateX(-50%);padding:0 5px;border-radius:6px;background:var(--coral);color:#fff;font:800 9px/15px var(--f-body);font-style:normal;letter-spacing:.06em;box-shadow:0 1px 0 var(--coral-d)}
.final .badge em{display:none}
.badge.pop{animation:badgeIn .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes badgeIn{from{transform:scale(0)}to{transform:scale(1)}}
.stop.bad .tag{background:var(--badbg);box-shadow:inset 4px 0 0 var(--bad),0 3px 0 rgba(0,20,60,.2)}
.stop.bad .dot{background:var(--bad);box-shadow:0 0 0 3px #fff}
.xm{position:absolute;right:calc(12px + var(--bs)/2 - 15px);top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--f-display);box-shadow:0 0 0 3px #fff}
.stop.top .tag{box-shadow:inset 4px 0 0 var(--star),0 0 0 3px var(--star),0 0 18px rgba(255,200,61,.65)}
.stop.top .tag::after{content:"⭐";position:absolute;right:-8px;top:-11px;font-size:16px;line-height:1}
.stop.next .dot{background:transparent;box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.stop.next .tag{background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.55);box-shadow:none;color:#fff}
.stop.next .tag i{color:rgba(255,255,255,.8);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.stop.next::after{content:"?";position:absolute;right:12px;top:50%;width:var(--bs);height:var(--bs);margin-top:calc(var(--bs)/-2);border-radius:50%;border:2px dashed rgba(255,255,255,.5);display:grid;place-items:center;color:rgba(255,255,255,.75);font:600 20px/1 var(--f-display)}
.stop.next.nocard::after{display:none}
/* a stop without a creature: a faint dashed ring with a few bubbles where the card would be */
.nob{position:absolute;right:12px;top:50%;width:var(--bs);height:var(--bs);margin-top:calc(var(--bs)/-2);border-radius:50%;border:2px dashed rgba(255,255,255,.32);background:radial-gradient(circle at 36% 62%,transparent 0 13%,rgba(255,255,255,.6) 14% 18%,transparent 19%),radial-gradient(circle at 62% 42%,transparent 0 8%,rgba(255,255,255,.55) 9% 12%,transparent 13%),radial-gradient(circle at 46% 26%,transparent 0 5%,rgba(255,255,255,.5) 6% 9%,transparent 10%);pointer-events:none}
.stop.new .nob{animation:nobIn .6s ease-out both}
@keyframes nobIn{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:none}}
.stop.next.loaded .tag{background:var(--card);border:2px solid #fff;color:var(--ink);animation:ready 1.1s ease-in-out infinite alternate}
.stop.next.loaded .tag i{color:var(--good)}
@keyframes ready{from{box-shadow:0 0 0 0 rgba(255,255,255,0)}to{box-shadow:0 0 0 6px rgba(255,255,255,.28)}}
.floor{position:absolute;left:0;right:0;height:100px;margin-top:-12px;z-index:2;pointer-events:none}
.floor svg{display:block;width:100%;height:100%}

/* the diver, drawn head down; .up turns it head up, .surf floats it beside the buoy */
.diver{position:absolute;left:43px;top:0;width:38px;height:54px;z-index:4;pointer-events:none;transition:left .4s ease}
.diver.floor{left:6px}
.diver.surf{left:80px;-webkit-mask-image:linear-gradient(#000 50%,rgba(0,0,0,.4) 57%);mask-image:linear-gradient(#000 50%,rgba(0,0,0,.4) 57%)}
.dvb{width:100%;height:100%;transition:transform .4s ease}
.dvb svg{display:block;width:100%;height:100%;animation:sway 2.6s ease-in-out infinite}
.diver.up .dvb,.diver.surf .dvb{transform:rotate(180deg)}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(1.5px)}}
.bub{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85) 0 18%,rgba(255,255,255,.1) 26%);pointer-events:none;z-index:5;animation:bub var(--d) ease-out both}
.spark{position:absolute;font:700 var(--s)/1 var(--f-display);color:#fff6c2;text-shadow:0 0 8px #ffd34d;pointer-events:none;z-index:5;animation:bub var(--d) ease-out both}
@keyframes bub{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
.ripple{position:absolute;width:20px;height:6px;margin:-3px 0 0 -10px;border:2px solid rgba(255,255,255,.85);border-radius:50%;pointer-events:none;z-index:5;animation:ripple 1.1s ease-out both}
@keyframes ripple{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(4)}}

/* overlays on the scene */
.hud{position:absolute;bottom:10px;right:10px;z-index:2;display:flex;align-items:center;gap:6px;pointer-events:none}
.zchip{--zc:#9fe6ff;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(9,22,54,.6);color:#fff;font:800 11px/1 var(--f-body);letter-spacing:.03em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zchip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--zc);box-shadow:0 0 6px var(--zc)}
.lbtn{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 8px;border:0;border-radius:999px;background:var(--card);color:var(--ink);font:800 12px/1 var(--f-body);box-shadow:0 2px 0 var(--shadow)}
.lbtn svg{width:16px;height:16px}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.fl{position:absolute;right:8px;max-width:72%;padding:5px 11px;border-radius:999px;background:#fff;color:#1d2433;font:800 12px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 12px rgba(0,10,40,.3);animation:fl 1.5s ease-out both}
.fl.nw{background:var(--yellow)}
.fl.mu{background:rgba(255,255,255,.82);color:#46506a;font-weight:700}
.fl.sh{background:linear-gradient(90deg,#ffd6e0,#fff3c4,#d4ffe6,#d6f0ff,#ead9ff);box-shadow:0 0 0 2px #fff,0 0 18px rgba(255,214,110,.95)}
@keyframes fl{0%{opacity:0;transform:translateY(10px) scale(.9)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.zban{position:absolute;left:50%;top:74%;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 20px;border-radius:16px;background:rgba(8,18,46,.74);color:#fff;text-align:center;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 2px var(--zc),0 12px 30px rgba(0,0,0,.35);transform:translate(-50%,-50%);animation:zban 2.1s ease-out both}
.zban b{font:600 24px/1.1 var(--f-display);color:var(--zc)}
.zban span{font:800 10.5px/1.3 var(--f-body);letter-spacing:.07em;text-transform:uppercase;opacity:.9}
@keyframes zban{0%{opacity:0;transform:translate(-50%,-38%) scale(.92)}12%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-58%)}}
.msg{position:absolute;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:10px;z-index:4;background:var(--card);border-radius:14px;padding:10px 13px;font:700 13px/1.4 var(--f-body);box-shadow:0 4px 0 var(--shadow);animation:msg .3s ease-out both}
.msg b{font-weight:800}
.msg.good{box-shadow:0 4px 0 var(--shadow),inset 4px 0 0 var(--star)}
.msg.bad{box-shadow:0 4px 0 var(--shadow),inset 4px 0 0 var(--bad)}
@keyframes msg{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.loading{position:absolute;inset:0;display:grid;place-items:center;font:700 14px/1.4 var(--f-body);color:#fff;text-shadow:0 1px 3px rgba(0,20,60,.5);z-index:5;text-align:center;padding:0 24px}
.loading>div{background:var(--card);color:var(--ink);text-shadow:none;border-radius:16px;padding:14px 16px}

/* ---------- input sheet ---------- */
.sheet{position:relative;z-index:6;background:var(--card);border-radius:22px 22px 0 0;padding:11px max(12px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-shadow:0 -4px 16px rgba(29,36,51,.08)}
.prompt{display:block;margin:0 2px 7px;font:800 12px/1.3 var(--f-body);color:var(--ink2)}
.prompt b{color:var(--ink)}
.row{display:flex;gap:8px;align-items:stretch}
.field-w{position:relative;flex:1;min-width:0}
.field{width:100%;height:46px;border:2px solid var(--line);border-radius:14px;padding:0 13px;font:700 16px/1 var(--f-body);background:var(--card);outline:none}
.field:focus{border-color:var(--blue)}
.field.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.go{flex:none;height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--coral);color:#fff;font:600 17px/46px var(--f-display);box-shadow:0 4px 0 var(--coral-d);letter-spacing:.01em}
.go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--coral-d)}
.go[disabled]{opacity:.55;cursor:default}
.go.alt{background:var(--blue);box-shadow:0 4px 0 #2f6ad6}
.go.ghostbtn{background:var(--chip);color:var(--chip-ink);box-shadow:0 4px 0 var(--line)}
a.go{display:inline-block;text-align:center;text-decoration:none}
.suggest{position:absolute;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:4px;list-style:none;background:var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(29,36,51,.25);max-height:252px;overflow:auto;z-index:10}
.suggest li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-radius:10px;font:700 15px/1.2 var(--f-body);cursor:pointer}
.suggest li small{font:700 11px/1.2 var(--f-body);color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.suggest li.on{background:var(--chip)}
.suggest li.used{opacity:.45;cursor:default}
.suggest li mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.done{display:flex;align-items:center;gap:10px}
.done-t{flex:1;min-width:0}
.done-t>b{display:block;font:600 17px/1.2 var(--f-display)}
.done-t span{display:block;font:700 12px/1.4 var(--f-body);color:var(--ink2)}
.done-t span b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;bottom:calc(132px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--card);padding:9px 14px;border-radius:12px;font:700 13px/1.3 var(--f-body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- dialogs ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:100%;max-height:100%}
dialog::backdrop{background:rgba(13,20,38,.45)}
.dlg{position:relative;width:min(440px,100vw);max-height:min(88vh,860px);overflow:auto;background:var(--card);border-radius:24px;padding:22px 20px 20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.dlg:focus,.dlg:focus-visible{outline:none}
@media (max-width:600px){
  dialog{margin:auto 0 0 0;width:100%}
  .dlg{width:100%;border-radius:24px 24px 0 0;max-height:90vh;max-height:90svh;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
}
.x{position:absolute;right:12px;top:12px;z-index:5;width:34px;height:34px;border-radius:10px;border:0;background:var(--chip);color:var(--chip-ink);font:700 18px/1 var(--f-display);display:grid;place-items:center}
.dlg h2{margin:0 0 4px;font:600 26px/1.1 var(--f-display);text-wrap:balance;padding-right:36px}
.dlg .kick{padding-right:36px}
.dlg h3{margin:18px 0 8px;font:800 11px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.dlg p{margin:6px 0}
.dlg .lede{color:var(--ink2);font-weight:700}
.big{display:flex;align-items:flex-end;gap:12px;margin:12px 0 4px}
.big b{font:700 56px/.9 var(--f-display);font-variant-numeric:tabular-nums}
.big span{font:700 14px/1.3 var(--f-body);color:var(--ink2);padding-bottom:4px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--chip);color:var(--chip-ink);font:800 12px/1.2 var(--f-body)}
.pill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.pill.good{background:color-mix(in srgb,var(--star) 26%,transparent);color:var(--ink)}
.share-img{display:block;width:100%;border-radius:16px;margin:12px 0 8px;background:var(--chip);aspect-ratio:4/5;object-fit:cover}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns .go{flex:1;min-width:120px}
.dist{display:flex;align-items:flex-end;gap:4px;height:96px;margin:6px 0 4px;padding-top:16px}
.dist div{position:relative;flex:1;min-width:0;background:var(--chip);border-radius:6px 6px 2px 2px}
.dist div.me{background:var(--coral)}
.dist div.me::before{content:"YOU";position:absolute;left:50%;top:-15px;transform:translateX(-50%);font:800 9px/1 var(--f-body);letter-spacing:.06em;color:var(--coral-d)}
.dist-l{display:flex;gap:4px}
.dist-l span{flex:1;min-width:0;text-align:center;font:800 10px/1 var(--f-body);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:6px;align-items:baseline;padding:6px 10px;border-radius:10px;background:var(--chip);font:700 13px/1.2 var(--f-body)}
.chip i{font-style:normal;color:var(--muted);font-size:11px}
.rank{margin:0;padding:0;list-style:none;font:700 13px/1.3 var(--f-body);counter-reset:r}
.rank li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;counter-increment:r}
.rank li::before{content:counter(r);width:24px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.rank li span{flex:1;min-width:0}
.rank li i{font-style:normal;color:var(--ink2);font-variant-numeric:tabular-nums}
.rank li.mine{background:var(--chip)}
.rank li.fail{background:color-mix(in srgb,var(--bad) 12%,transparent)}
details.more summary{cursor:pointer;font:800 13px/1.3 var(--f-body);color:var(--chip-ink);padding:8px 0}
.note{font:700 11px/1.45 var(--f-body);color:var(--muted)}
.count{font:700 13px/1.4 var(--f-body);color:var(--ink2)}
.count b{font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.stat-grid div{background:var(--chip);border-radius:12px;padding:10px 6px;text-align:center}
.stat-grid b{display:block;font:700 22px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.stat-grid span{display:block;font:800 9.5px/1.25 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--chip)}
.list li .t{flex:1;min-width:0}
.list li .t b{display:block;font:600 15px/1.2 var(--f-display)}
.list li .t span{display:block;font:700 11.5px/1.3 var(--f-body);color:var(--muted)}
.list li .go{height:36px;line-height:36px;font-size:15px;padding:0 14px;box-shadow:0 3px 0 var(--coral-d)}
.list li .go.alt{box-shadow:0 3px 0 #2f6ad6}
.lock{font:800 11px/1 var(--f-body);color:var(--muted)}
.pass{margin:14px 0 0;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--yellow) 30%,var(--card)),color-mix(in srgb,var(--violet) 22%,var(--card)))}
.pass b{font:600 18px/1.2 var(--f-display)}
.pass p{margin:4px 0 10px;font:700 13px/1.45 var(--f-body);color:var(--ink2)}
.code{font:800 18px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;padding:10px 12px;border-radius:12px;background:var(--chip);text-align:center;user-select:all;-webkit-user-select:all}
.inline-form{display:flex;gap:8px;margin-top:8px}
.inline-form .field{height:42px;font-size:15px}
.inline-form .go{height:42px;line-height:42px;font-size:15px}

/* cards from this dive (results) */
.mrow{display:flex;gap:8px;overflow-x:auto;margin:0 -2px;padding:8px 2px 10px;scroll-snap-type:x proximity}
.mcard,.lcard{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:5px;border:2px solid var(--rc,var(--zc));border-radius:13px;background:var(--card);color:var(--ink);font:inherit;text-align:left;box-shadow:0 2px 0 var(--shadow)}
.mcard{flex:0 0 98px;scroll-snap-align:start}
.mi,.lp{display:grid;place-items:center;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:#0b1a3a;color:var(--rc,var(--zc))}
.mi img,.lp img{display:block;width:100%;height:100%;object-fit:cover}
.mi .noimg,.lp .noimg,.hpic .noimg{width:100%;height:100%}
.mi .noimg svg,.lp .noimg svg{width:44%;height:44%}
.mcard b,.lcard b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font:800 11.5px/1.25 var(--f-body)}
.mcard small,.lcard small{display:flex;align-items:center;gap:4px;margin-top:2px;font:800 9px/1.2 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mcard .cm{display:block;margin-top:1px;font:700 10.5px/1.25 var(--f-body);color:var(--muted)}
.mcard small::before,.lcard small::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--rc)}
.mcard em{position:absolute;top:-8px;padding:0 6px;border-radius:7px;font:800 9.5px/16px var(--f-body);font-style:normal;letter-spacing:.05em}
.mcard em.nw{left:-5px;background:var(--coral);color:#fff}
.mcard em.sh{right:-5px;background:#fff6c4;color:#1d2433}
.mcard.shiny,.lcard.shiny{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--a),#ff5f6d,#ffc371,#47e891,#42c6ff,#b56cff,#ff5f6d) border-box;animation:spin 4s linear infinite}

/* logbook */
.lprog{margin:8px 0 4px;font:700 13px/1.4 var(--f-body);color:var(--ink2)}
.lprog b{color:var(--ink);font-weight:800}
.lbar{height:10px;margin-top:6px;border-radius:6px;background:var(--chip);overflow:hidden}
.lbar i{display:block;height:100%;min-width:6px;border-radius:inherit;background:linear-gradient(90deg,#3cc4f0,#7b8cff,#b77bff,#ff7ac8,#ffc83d)}
.lrar{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 2px;font:700 12px/1.3 var(--f-body);color:var(--ink2)}
.lrar span{display:inline-flex;align-items:center;gap:5px}
.lrar i{width:9px;height:9px;border-radius:50%;background:var(--rc)}
.lrar b{color:var(--ink);font-weight:800}
.lz{margin-top:16px}
.lzh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;padding-bottom:5px;border-bottom:2px solid var(--zc)}
.lzh b{font:600 17px/1.2 var(--f-display)}
.lzh span{font:700 11.5px/1.2 var(--f-body);color:var(--muted)}
.lzh em{margin-left:auto;font:800 12px/1 var(--f-body);font-style:normal;color:var(--muted)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.lcard{cursor:pointer}
.lcard i{position:absolute;top:9px;right:9px;padding:0 5px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:800 10.5px/16px var(--f-body);font-style:normal}
.lcard.miss{cursor:default;border-style:dashed;border-color:color-mix(in srgb,var(--rc) 50%,var(--line));background:var(--chip);box-shadow:none}
.lcard.miss .lp{background:transparent;color:var(--muted);font:600 26px/1 var(--f-display)}
.lcard.miss b{color:var(--muted)}
.lsum{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:11px 12px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,#3cc4f0 18%,var(--card)),color-mix(in srgb,#b77bff 18%,var(--card)))}
.lsum b{display:block;font:600 17px/1.2 var(--f-display)}
.lsum span{display:block;font:700 12px/1.3 var(--f-body);color:var(--ink2)}
.lsum .go{height:38px;line-height:38px;font-size:15px;padding:0 16px;box-shadow:0 3px 0 #2f6ad6}

/* creature card: a trading card with foil and glare that follow the pointer */
.holo{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;max-width:330px;margin:10px auto 12px;padding:9px;border-radius:20px;background:linear-gradient(150deg,var(--rc,var(--zc)),color-mix(in srgb,var(--rc,var(--zc)) 35%,#101a36));box-shadow:0 18px 36px -12px rgba(0,10,40,.55);transform:perspective(900px) rotateY(var(--rx)) rotateX(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.3,1);isolation:isolate}
.holo.tilt{transition:transform .06s linear}
.holo.shiny{background:conic-gradient(from var(--a),#ff5f6d,#ffc371,#47e891,#42c6ff,#b56cff,#ff5f6d);animation:spin 5s linear infinite}
.hc{position:relative;z-index:1;padding:10px 12px 12px;border-radius:13px;background:var(--card)}
.hh{display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 10.5px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hh i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--rc,var(--zc));vertical-align:0}
.hh .rar{color:var(--ink)}
.hpic{display:grid;place-items:center;margin-top:8px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0b1a3a;color:var(--rc,var(--zc))}
.hpic img{display:block;width:100%;height:100%;object-fit:cover}
.hpic .noimg svg{width:36%;height:36%}
.holo h2{margin:10px 0 0;padding:0;font:600 23px/1.1 var(--f-display)}
.holo .sci{margin:2px 0 0;font:italic 700 13px/1.3 var(--f-body);color:var(--muted)}
.holo .hd{margin:8px 0 0;font:700 13px/1.35 var(--f-body)}
.holo .hd span{margin-right:4px;font:800 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.holo .hf{margin:6px 0 0;font:700 14px/1.45 var(--f-body);color:var(--ink2)}
.foil,.glare{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
.foil{opacity:0;mix-blend-mode:color-dodge;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%) var(--mx) var(--my)/250% 250% no-repeat;transition:opacity .25s}
.holo.tilt .foil{opacity:.5}
.holo.shiny .hpic{position:relative}
.holo.shiny .hpic::after{content:"";position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.3;background:repeating-linear-gradient(120deg,#ff5f6d 0,#ffc371 7%,#47e891 14%,#42c6ff 21%,#b56cff 28%,#ff5f6d 35%) 0 0/300% 300%;animation:foil 8s linear infinite}
.holo.shiny .foil{opacity:.14;background:repeating-linear-gradient(120deg,#ff5f6d 0,#ffc371 7%,#47e891 14%,#42c6ff 21%,#b56cff 28%,#ff5f6d 35%) 0 0/300% 300%;animation:foil 8s linear infinite}
@keyframes foil{to{background-position:300% 300%}}
.glare{opacity:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 50%);mix-blend-mode:overlay;transition:opacity .25s}
.holo.tilt .glare{opacity:1}
.dlg .cnote{margin-top:2px;font-size:12px;color:var(--ink2)}

/* demo (rules dialog, how-to-play): a three-stop dive */
.demo{position:relative;height:262px;border-radius:18px;overflow:hidden;margin:12px 0 10px;background:linear-gradient(var(--sky),var(--sky2) 84px,var(--z0a) 84px,var(--z0b) 130px,var(--z1a) 142px,var(--z1b) 262px)}
.demo .d-wave{position:absolute;left:-40px;right:-40px;top:76px;height:18px;background:radial-gradient(circle at 20px -6px,transparent 14px,var(--z0a) 14.5px) 0 0/40px 18px repeat-x;animation:wave 5s linear infinite}
.demo .d-rope{position:absolute;left:61px;top:80px;width:2px;height:0;border-radius:1px;background:#efe3c7;transition:height .5s ease}
.demo .d-stop{position:absolute;left:0;right:0;height:32px;margin-top:-16px;opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s}
.demo .d-stop.on{opacity:1;transform:none}
.demo .d-dot{position:absolute;left:58px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--zc)}
.demo .d-tag{position:absolute;left:76px;right:14px;top:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 0 13px;border-radius:10px;background:var(--card);box-shadow:inset 4px 0 0 var(--zc)}
.demo .d-tag b{font:600 15px/1 var(--f-display)}
.demo .d-tag i{font:800 11px/1 var(--f-body);font-style:normal;color:var(--muted)}
.demo .d-stop.bad .d-tag{background:var(--badbg);box-shadow:inset 4px 0 0 var(--bad)}
.demo .diver{left:49px;width:26px;height:37px}
.demo .diver.surf{left:74px}
.demo .cap{position:absolute;left:12px;right:12px;top:10px;z-index:5;text-align:center;font:800 13px/1.35 var(--f-body);background:var(--card);border-radius:12px;padding:7px 10px;box-shadow:0 2px 0 var(--shadow)}
.demo .d-replay{position:absolute;left:10px;bottom:8px;z-index:5;height:30px;padding:0 10px;border:0;border-radius:9px;background:var(--card);font:800 12px/30px var(--f-body);box-shadow:0 2px 0 var(--shadow)}
.rules{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rules li{display:flex;gap:10px;align-items:flex-start;font:700 14px/1.45 var(--f-body)}
.rules li::before{content:"";flex:none;width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--c,#3cc4f0);box-shadow:0 0 0 2px color-mix(in srgb,var(--c,#3cc4f0) 30%,transparent)}
.rules li:nth-child(2){--c:#7b8cff}
.rules li:nth-child(3){--c:#b77bff}
.rules li:nth-child(4){--c:#ff7ac8}

/* ocean zones, top to bottom; card rarity, common to legendary */
.z0{--zc:#3cc4f0}.z1{--zc:#7b8cff}.z2{--zc:#b77bff}.z3{--zc:#ff7ac8}.z4{--zc:#ffc83d}
.r0{--rc:#9aa7b8}.r1{--rc:#3ccf7a}.r2{--rc:#3d9bff}.r3{--rc:#a45cff}.r4{--rc:#ffb627}

/* ---------- side panel (desktop) + content below ---------- */
.panel{background:var(--card);border-radius:20px;padding:16px 16px 14px;box-shadow:0 2px 0 var(--shadow)}
.panel h2{margin:0 0 8px;font:800 11px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.panel .count{margin:0}
.below{padding:28px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));max-width:1080px;margin:0 auto}
.ad-slot{margin:0 auto 24px;max-width:970px;min-height:250px;border-radius:12px}
.sec{margin:0 0 34px}
.sec>h2{margin:0 0 12px;font:600 26px/1.15 var(--f-display);text-wrap:balance}
.sec>p{max-width:68ch;color:var(--ink2);margin:0 0 10px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.gcard{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:var(--card);box-shadow:0 2px 0 var(--shadow);text-decoration:none}
.gcard b{font:600 18px/1.2 var(--f-display)}
.gcard span{font:700 13px/1.45 var(--f-body);color:var(--ink2)}
.gcard em{font-style:normal;font:800 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--kicker)}
.gcard:hover{transform:translateY(-1px)}
.faq{display:flex;flex-direction:column;gap:8px;max-width:760px}
.faq details{background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:0 2px 0 var(--shadow)}
.faq summary{cursor:pointer;font:600 17px/1.3 var(--f-display)}
.faq p{margin:8px 0 2px;color:var(--ink2)}
.foot{border-top:1px solid var(--line);margin-top:10px;padding:18px max(16px,env(safe-area-inset-right,0px)) max(26px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font:700 13px/1.4 var(--f-body);color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (min-width:920px){
  body{background:radial-gradient(1200px 600px at 30% -10%,var(--page2),var(--page))}
  .first{display:grid;grid-template-columns:minmax(380px,450px) minmax(300px,360px);justify-content:center;gap:22px;height:100vh;height:100svh;min-height:640px;max-height:1000px;padding:18px 16px}
  .game{height:100%;min-height:0;max-height:none;border-radius:28px;box-shadow:0 24px 50px -28px rgba(13,30,70,.45)}
  .sheet{border-radius:22px 22px 0 0}
  .side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding:2px 2px 6px}
  .toast{bottom:auto;top:24px}
}

/* ---------- plain pages (how to play, answers, legal) ---------- */
.page{max-width:760px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right,0px)) 30px max(16px,env(safe-area-inset-left,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.top .go{height:40px;line-height:40px;font-size:15px;padding:0 14px;text-decoration:none;display:inline-block}
.page h1{margin:6px 0 10px;font:600 34px/1.1 var(--f-display);text-wrap:balance}
.page h2{margin:28px 0 10px;font:600 22px/1.2 var(--f-display)}
.page p,.page li{color:var(--ink2);max-width:68ch}
.page .lede{font-size:17px;color:var(--ink)}
.page table{width:100%;border-collapse:collapse;font:700 14px/1.35 var(--f-body)}
.page th,.page td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.page td.n,.page th.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto;background:var(--card);border-radius:14px;padding:6px 8px;box-shadow:0 2px 0 var(--shadow)}
.reveal{background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:0 2px 0 var(--shadow);margin:8px 0}
.reveal summary{cursor:pointer;font:600 17px/1.3 var(--f-display)}
.reveal p{margin:8px 0 2px}
.pager{display:flex;justify-content:space-between;gap:10px;margin:26px 0 0}
.pager a{font:800 14px/1.3 var(--f-body);text-decoration:none;color:var(--chip-ink)}
.crumbs{font:700 12px/1.4 var(--f-body);color:var(--muted);margin:0}
.crumbs a{text-decoration:none}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.cta .go{text-decoration:none;display:inline-block}
.ans-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ans-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:0 2px 0 var(--shadow);text-decoration:none}
.ans-list b{font:600 16px/1.3 var(--f-display)}
.ans-list span{font:700 13px/1.4 var(--f-body);color:var(--muted);white-space:nowrap}
.contact textarea,.contact input{width:100%;border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);font:700 15px/1.4 var(--f-body)}
.contact textarea{min-height:130px;resize:vertical}
.contact label{display:block;margin:12px 0 6px;font:800 13px/1.3 var(--f-body)}
.contact select.field{height:44px;font-size:15px;appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7487' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.contact .go{margin-top:14px}
.page h3{margin:20px 0 6px;font:600 18px/1.25 var(--f-display)}
.page h3 a{text-decoration:none;color:var(--chip-ink)}
.page h3 a:hover{text-decoration:underline}

/* ---------- small pieces ---------- */
.game.kb .bar,.game.kb .card{display:none}
.panel .ph{margin:0 0 8px;font:800 11px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.sec>h1{margin:0 0 8px;font:600 30px/1.12 var(--f-display);text-wrap:balance}
.intro{text-align:center;margin-bottom:30px}
.intro>p{margin:0 auto;font-size:16px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--chip);font:700 15px/1.3 var(--f-body);margin:12px 0;cursor:pointer}
.setrow input{width:22px;height:22px;margin:0;accent-color:var(--coral);flex:none}
.go.wide{display:block;width:100%;margin-top:16px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}