/* 潜っていくスクロール（トップだけ） */

/* 深さ計 */
.depth{position:fixed;z-index:45;right:22px;top:20vh;height:50vh;width:44px;pointer-events:none;opacity:0;transition:opacity .5s}
.depth.on{opacity:1}
.depth .line{position:absolute;right:20px;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,#7fe6ff 0%,#2a9fc4 18%,#0b4f6e 45%,#062638 75%,#020a10 100%);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.depth .tick{position:absolute;right:13px;width:17px;height:17px;margin-top:-8px;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto}
.depth .tick::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:3px;border-radius:2px;background:rgba(3,20,31,.35)}
.depth .tick:hover::before,.depth .tick:focus-visible::before{background:var(--aqua-d)}
.depth .tick span{position:absolute;right:24px;top:-3px;white-space:nowrap;font-size:12px;font-weight:700;background:#fff;color:var(--ink);padding:3px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(3,20,31,.16);opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.depth .tick:hover span,.depth .tick:focus-visible span{opacity:1;transform:none}
.depth .mark{position:absolute;right:13px;top:0;width:17px;height:17px;margin-top:-8.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#bff4ff 30%,#5fd6f0 70%);box-shadow:0 0 0 2px #fff,0 0 14px rgba(95,214,240,.9)}
.depth .read{position:absolute;right:26px;top:-17px;text-align:right;white-space:nowrap;background:rgba(3,20,31,.82);color:#fff;border-radius:12px;padding:6px 12px;line-height:1.3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.depth .read b{display:block;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:0}
.depth .read small{display:block;font-size:11px;color:#9fd2e0}
.depth-say{position:fixed;z-index:46;right:30px;top:50vh;max-width:280px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.6;padding:12px 16px;border-radius:14px;box-shadow:0 14px 34px rgba(3,20,31,.22);opacity:0;transform:translateX(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.depth-say b{display:block;font-size:12px;color:var(--aqua-d)}
.depth-say.on{opacity:1;transform:none}

/* ひと続きの海：画面の後ろに固定した海が、深さで色を変える。章は海に浮かぶ板 */
body.dive{background:var(--deep)}
.sea{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0a4a66}
.sea canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.dive .tank{background:none}
body.dive .tank .rays{display:none}
/* 浅い章＝白いすりガラス。後ろの海と泡がうっすら透ける */
body.dive .sec{padding:clamp(80px,9vw,120px) 0;margin:0 clamp(10px,4vw,72px);border-radius:clamp(20px,2.4vw,32px);
  background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.08);backdrop-filter:blur(12px) saturate(180%) brightness(1.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 30px 70px -30px rgba(1,10,16,.55)}
body.dive .sec.alt{background:rgba(240,250,253,.72)}
body.dive .sec + .sec{margin-top:clamp(56px,8vw,120px)}
/* 深い章＝暗いガラス。文字を明るくして、光る粒が透けて見える */
body.dive .sec.deep,body.dive .sec.deep.alt{--ink:#eef8fb;--sub:#a9c8d3;--line:rgba(255,255,255,.16);--bg2:rgba(255,255,255,.07);--aqua-d:#6fdcf5;
  color:var(--ink);background:rgba(4,24,36,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 0 0 1px rgba(127,230,255,.20),0 0 60px -20px rgba(95,214,240,.25)}
body.dive .sec.deep .steps li::before{color:var(--deep)}
body.dive .sec.deep .steps .si{background:rgba(255,255,255,.08)}
body.dive .sec.deep .nopes li{background:rgba(255,255,255,.07)}
body.dive .sec.deep .oc{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
body.dive .sec.deep .vpic .v-a{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.35)}
body.dive .sec.deep .vpic .v-l{stroke:rgba(255,255,255,.35)}
body.dive .sec.deep .vpic .v-b{fill:rgba(95,214,240,.14)}
body.dive .play,body.dive .close{padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(110px,12vw,170px)}

/* 光る生き物 */
/* 海の底（フッターの上）。砂・岩・宝箱は sea.js が後ろの海に描く。ここは場所を空けておくだけ */
.seabed{position:relative;height:300px;pointer-events:none}
.seabed .chest-hint{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);padding:7px 14px;border:1px solid rgba(255,226,138,.45);border-radius:999px;background:rgba(3,20,31,.55);color:#ffe9a8;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .6s}
.seabed .chest-hint.on{opacity:1}
body.on-chest{cursor:pointer}
.seabed .depth-end{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:#6f93a3;letter-spacing:.08em;white-space:nowrap}

@media (max-width:760px){
  .depth{right:auto;left:12px;top:calc(var(--hd) + 10px);height:auto;width:auto}
  .depth .line,.depth .tick{display:none}
  .depth .mark{position:static;width:auto;height:auto;margin:0;background:none;box-shadow:none}
  .depth .read{position:static;text-align:left}
  .depth.idle{opacity:0}
  .depth-say{right:auto;left:12px;top:calc(var(--hd) + 64px)!important;max-width:calc(100vw - 24px)}
  .seabed{height:220px}
}
@media (prefers-reduced-motion:reduce){
  .depth,.depth-say{transition:none}
}
body.dive .close .wrap{position:relative;z-index:1}
/* 深いところではヘッダーも暗いガラスに */
body.dive.deepnow.scrolled .hd{background:rgba(3,20,31,.62);color:#eaf8fc;box-shadow:0 1px 0 rgba(127,230,255,.15)}
body.dive.deepnow.scrolled .nav .cta{background:var(--aqua);color:var(--deep)}
body.dive .close > canvas{display:none} /* 深海に泡は無い。光る粒は sea.js が描く */

/* 泡の子の体は3D（fish3d.js）。目と口だけSVGのまま */
.buddy canvas.b3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.buddy.b3d .blob > circle,.buddy.b3d .blob > path{display:none}

/* ===== 泡の子を育てる（grow.js） ===== */
.buddy.real svg .blob{display:none}
.buddy .grow-bar{position:absolute;inset:auto;left:50%;top:84%;width:auto;height:auto;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 9px 4px 10px;border:0;border-radius:999px;background:rgba(3,20,31,.72);color:#e9f8ff;font:700 11px/1 -apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 6px 16px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.grow-bar .gauge{width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.grow-bar .gauge i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7fe6ff,#ffe28a);transition:width .6s}
body.docked .buddy .grow-bar{top:88%;padding:3px 7px;font-size:10px}
body.docked .grow-bar .gauge{width:30px}
.grow-panel{position:fixed;z-index:60;right:16px;bottom:150px;width:340px;max-height:calc(100vh - 190px);overflow:auto;padding:20px 20px 16px;border-radius:20px;background:rgba(5,24,36,.94);color:#e9f8ff;box-shadow:0 24px 60px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;transition:opacity .25s,transform .25s}
.grow-panel.on{opacity:1;transform:none;pointer-events:auto}
.grow-panel .gp-x{position:absolute;right:12px;top:12px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:16px;cursor:pointer}
.grow-panel .gp-eyebrow{margin:0 0 4px;font-size:12px;color:#7fe6ff;font-weight:700}
.grow-panel h3{margin:0 0 12px;font-size:22px;line-height:1.3}
.grow-panel h3 small{display:block;font-size:12px;font-weight:500;color:#a9c7d4;margin-top:2px}
.grow-panel .gp-gauge{height:8px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.grow-panel .gp-gauge i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#7fe6ff,#ffe28a)}
.grow-panel .gp-next{margin:8px 0 14px;font-size:12px;color:#a9c7d4;line-height:1.6}
.grow-panel .gp-count{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.grow-panel .gp-count li{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);font-size:12px;color:#c9e4ee}
.grow-panel .gp-count b{font-size:18px;color:#fff;margin-right:2px}
.grow-panel .gp-sub{margin:0 0 6px;font-size:12px;font-weight:700;color:#7fe6ff}
.grow-panel .gp-dex{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px;padding:0;list-style:none}
.grow-panel .gp-dex li{padding:4px 2px 8px;border-radius:12px;background:rgba(255,255,255,.05);text-align:center;font-size:11px;color:#8aa9b6}
.grow-panel .gp-dex li img{display:block;width:100%;height:auto;aspect-ratio:1;filter:brightness(0) opacity(.35)}
.grow-panel .gp-dex li.seen img{filter:none}
.grow-panel .gp-dex li.seen{color:#e9f8ff}
.grow-panel .gp-dex li.now{outline:2px solid #7fe6ff;outline-offset:-2px}
.grow-panel .gp-reset{width:100%;padding:11px;border:0;border-radius:999px;background:#7fe6ff;color:#03141f;font-weight:700;font-size:13px;cursor:pointer;margin-bottom:10px}
.grow-panel .gp-note{margin:0;font-size:11px;color:#7f9aa6}
.buddy.evolve::after{content:"";position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(127,230,255,.5) 40%,rgba(127,230,255,0) 70%);animation:nkEvolve 1.4s ease-out forwards;pointer-events:none}
@keyframes nkEvolve{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@media (max-width:760px){.grow-panel{left:12px;right:12px;width:auto;bottom:110px;max-height:calc(100vh - 150px)}}