@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  --bg:#0c1622; --surface:#12202e; --surface-alt:#0e1b27; --surface-hover:#173142;
  --depth-surface:#2a6f8e; --depth-reef:#1f5d77; --depth-open:#164a63; --depth-wreck:#103a52; --depth-abyss:#0a1622;
  --border:#2c4a5e; --border-hover:#54e0d0;
  --text:#eaf6ff; --text-secondary:#c2d6e4; --text-tertiary:#8aa3b4;
  --accent:#38e1d6; --accent-hover:#6cf0e7; --gold:#ffc24a; --gold-hover:#ffd778;
  --bg-rgb:12,22,34; --accent-rgb:56,225,214; --gold-rgb:255,194,74; --text-rgb:234,246,255;
  --shadow-hard:4px 4px 0 0 rgba(0,0,0,.5);
  --glow-cyan:0 0 10px rgba(var(--accent-rgb),.6);
  --glow-gold:0 0 12px rgba(var(--gold-rgb),.55);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; line-height:1.8; letter-spacing:.02em;
  overflow-x:hidden;}
img{image-rendering:pixelated}
a{color:inherit}
.pixel{font-family:"Press Start 2P",monospace}
.silk{font-family:"Silkscreen",monospace}

/* ---------- fixed HUD ---------- */
.hud-bar{position:fixed; top:0; left:0; width:6px; height:100%; background:rgba(var(--bg-rgb),.5); z-index:30}
.hud-bar .fill{position:absolute; top:0; left:0; width:100%; height:0; background:var(--accent); box-shadow:var(--glow-cyan)}
.hud{position:fixed; top:10px; right:14px; z-index:31; display:flex; align-items:center; gap:8px;
  font-family:"Silkscreen",monospace; font-weight:700; color:var(--accent);
  padding:6px 10px; background:rgba(var(--bg-rgb),.55); backdrop-filter:blur(10px); border:2px solid var(--border)}
.hud .dnum{font-size:clamp(.9rem,2vw,1.2rem)}
.swim-toggle{position:fixed; top:54px; right:14px; z-index:31; display:none;
  font-family:"Silkscreen",monospace; font-weight:700; font-size:.72rem; letter-spacing:.06em;
  color:var(--text); background:rgba(var(--bg-rgb),.6); border:2px solid var(--border); padding:6px 10px; cursor:pointer}
.swim-toggle[aria-pressed="true"]{ color:#04222a; background:var(--accent); border-color:var(--accent) }
.navdots{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:12px}
.navdots a{width:12px; height:12px; border:2px solid var(--border); background:transparent; display:block}
.navdots a.active{background:var(--accent); border-color:var(--accent); box-shadow:var(--glow-cyan)}
@media(max-width:760px){ .navdots{display:none} }

/* depth fog: 越深越暗 */
#depth-fog{position:fixed; inset:0; pointer-events:none; opacity:0; z-index:5;
  background:linear-gradient(180deg,transparent 30%,rgba(var(--bg-rgb),.9))}
/* 水下焦散光影（純 CSS、不吃捲動效能） */
#caustics{position:fixed; inset:-10%; pointer-events:none; z-index:6; opacity:.07; mix-blend-mode:screen;
  background:radial-gradient(55% 40% at 28% 18%, rgba(150,240,255,.7), transparent 60%),
            radial-gradient(48% 34% at 72% 58%, rgba(120,220,255,.6), transparent 60%),
            radial-gradient(40% 30% at 50% 85%, rgba(120,255,235,.5), transparent 60%);
  animation:caustic 18s ease-in-out infinite alternate}
@keyframes caustic{0%{transform:translate(-2%,-1%) scale(1)}100%{transform:translate(2%,3%) scale(1.1)}}
/* 暗角，鏡頭感（在內容層之下，不壓字） */
#vignette{position:fixed; inset:0; pointer-events:none; z-index:7;
  background:radial-gradient(125% 85% at 50% 42%, transparent 56%, rgba(2,8,14,.55))}

/* diver — 連續游動循環（排除手電筒格 diver_5，留給靠近物件時用） */
#diver{position:fixed; left:50%; top:0; z-index:20; will-change:transform;
  width:84px; height:84px; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  image-rendering:pixelated;
  animation:bob 3s ease-in-out infinite, kick .8s steps(1) infinite}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-6px}}
@keyframes kick{
  0%,20%   { background-image: url('./art/diver_1.png'); }
  20.01%,40% { background-image: url('./art/diver_2.png'); }
  40.01%,60% { background-image: url('./art/diver_3.png'); }
  60.01%,80% { background-image: url('./art/diver_4.png'); }
  80.01%,100%{ background-image: url('./art/diver_6.png'); }
}
/* 靠近探索點：切手電筒姿勢 diver_5 + 打出光錐 */
#diver.flashlight{ animation:bob 3s ease-in-out infinite;
  background-image:url('./art/diver_5.png') !important; }
#diver.flashlight::after{ content:""; position:absolute; left:66%; top:42%;
  width:190px; height:120px; transform-origin:left center; transform:translateY(-50%) rotate(2deg);
  clip-path:polygon(0 42%, 0 58%, 100% 100%, 100% 0);
  background:linear-gradient(90deg, rgba(var(--gold-rgb),.62), rgba(var(--accent-rgb),.12) 65%, transparent);
  mix-blend-mode:screen; filter:blur(1px); pointer-events:none; animation:beamFlick 1.6s ease-in-out infinite}
@keyframes beamFlick{0%,100%{opacity:.85}50%{opacity:1}}
#diver svg{display:none}
/* 好奇野生海豚：全程跟隨、在人物附近隨機游動但保持距離 */
#dolphin{position:fixed; left:0; top:0; width:150px; height:105px; z-index:8; pointer-events:none;
  background:url('./art/dolphin.png') center/contain no-repeat; image-rendering:pixelated; opacity:.96; will-change:transform}
@media(max-width:760px){ #dolphin{display:none} }
/* 潛水員氣泡粒子（世界座標、會上升消散；移動越快噴越多，模擬踢水換氣） */
#diverBubbles{position:fixed; inset:0; pointer-events:none; z-index:19; overflow:hidden}
.dbub{position:fixed; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(190,242,255,.5) 55%, rgba(150,225,255,.15) 80%);
  box-shadow:0 0 4px rgba(190,242,255,.45); animation:dbubRise var(--dur,1.4s) ease-out forwards}
@keyframes dbubRise{
  0%{opacity:0; transform:translate(0,0) scale(.4)}
  18%{opacity:.85}
  100%{opacity:0; transform:translate(var(--dx,0), var(--dy,-60px)) scale(1)}
}

/* bubbles */
.bubbles{position:fixed; inset:0; pointer-events:none; z-index:6; overflow:hidden}
.bubble{position:absolute; bottom:-24px; border-radius:50%; background:rgba(var(--accent-rgb),.4);
  animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-110vh); opacity:0}}

/* ---------- layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:10}
.depth{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:120px 0; overflow:hidden; transition:background .6s linear}
.depth[data-biome="surface"]{background:linear-gradient(180deg,var(--depth-surface),var(--depth-reef))}
.depth[data-biome="reef"]{background:linear-gradient(180deg,var(--depth-reef),var(--depth-open))}
.depth[data-biome="open"]{background:linear-gradient(180deg,var(--depth-open),var(--depth-wreck))}
.depth[data-biome="wreck"]{background:linear-gradient(180deg,var(--depth-wreck),#0c2636)}
.depth[data-biome="abyss"]{background:linear-gradient(180deg,#0c2030,var(--depth-abyss))}
.depth[data-biome="seabed"]{background:linear-gradient(180deg,var(--depth-abyss),#070d15)}

.eyebrow{font-family:"Silkscreen",monospace; font-weight:700; letter-spacing:.12em; font-size:.8rem; color:var(--accent)}
h1.title{font-family:"Press Start 2P",monospace; font-size:clamp(1.4rem,5vw,2.8rem); line-height:1.5; margin:.4em 0;
  text-shadow:2px 2px 0 var(--accent)}
h2.htitle{font-family:"Press Start 2P",monospace; font-size:clamp(1rem,3.2vw,1.6rem); line-height:1.6; margin:0 0 .2em}
.lead{color:var(--text-secondary); max-width:62ch}
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{animation:inUp .5s steps(6) both}
@keyframes inUp{to{opacity:1; transform:none}}

/* light rays at top zones — 純 CSS god-rays（青白斜射光柱） */
.rays{position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:screen; overflow:hidden}
.rays::before{content:""; position:absolute; left:-20%; top:-30%; width:140%; height:160%;
  background:repeating-linear-gradient(102deg,
    transparent 0 38px,
    rgba(var(--accent-rgb),.10) 38px 60px,
    rgba(255,255,255,.14) 60px 66px,
    rgba(var(--accent-rgb),.06) 66px 92px,
    transparent 92px 150px);
  transform:rotate(-2deg); animation:rayDrift 14s ease-in-out infinite}
@keyframes rayDrift{0%,100%{transform:translateX(-12px) rotate(-2deg)}50%{transform:translateX(18px) rotate(-1deg)}}

/* panels & components */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr}}

/* course card grid alignment */
@media(min-width:761px){
  .course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 16px;
  }
  .course-grid > .reveal {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 16px;
  }
}
.panel{background:var(--surface); border:3px solid var(--border); box-shadow:var(--shadow-hard); padding:20px}
.tag{font-family:"Silkscreen",monospace; font-size:.72rem; letter-spacing:.1em; font-weight:700; color:var(--accent);
  border:2px solid var(--border); padding:3px 8px; background:rgba(var(--accent-rgb),.08); display:inline-block}

.btn{font-family:"Silkscreen",monospace; font-weight:700; letter-spacing:.06em; display:inline-flex; align-items:center;
  gap:8px; padding:14px 20px; min-height:48px; color:#04222a; background:var(--accent); border:3px solid #04222a;
  box-shadow:var(--shadow-hard); cursor:pointer; text-decoration:none;
  transition:transform .08s steps(2), box-shadow .08s steps(2), background .15s}
.btn:hover{background:var(--accent-hover); transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 rgba(0,0,0,.5)}
.btn:active{transform:translate(2px,2px)}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border); box-shadow:none}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* exploration nodes */
.node{position:relative; appearance:none; cursor:pointer; color:var(--text); text-align:left;
  background:rgba(var(--accent-rgb),.06); border:2px dashed var(--border); padding:12px 14px; min-height:48px;
  display:flex; align-items:center; gap:12px; transition:border-color .15s, transform .1s steps(2), box-shadow .15s}
.node .ico{width:34px; height:34px; flex:0 0 auto; filter:drop-shadow(var(--glow-cyan))}
.node:hover,.node.near{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--glow-cyan)}
.node:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.node b{display:block} .node span{color:var(--text-tertiary); font-size:.85rem}

/* course treasures */
.treasure{position:relative; display:block; text-decoration:none; color:var(--text); overflow:hidden;
  background:linear-gradient(180deg,var(--surface-hover),var(--surface)); border:3px solid var(--border);
  box-shadow:var(--shadow-hard); padding:18px; transition:transform .12s steps(2), box-shadow .12s steps(2), border-color .15s}
.treasure::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .2s; pointer-events:none;
  background:radial-gradient(220px 160px at var(--mx,50%) var(--my,40%), rgba(var(--gold-rgb),.22), transparent 70%)}
.treasure:hover{border-color:var(--gold); transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--gold), var(--glow-gold)}
.treasure:hover::before,.treasure.near::before{opacity:1}
.treasure.near{border-color:var(--gold); box-shadow:6px 6px 0 0 var(--gold), var(--glow-gold)}
.treasure:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.treasure .go{font-family:"Silkscreen",monospace; color:var(--gold); font-weight:700}
.treasure.soon{opacity:.6; pointer-events:none; filter:saturate(.55)}
.treasure .ic{width:48px; height:48px; margin-bottom:6px; display:inline-block;
  background:url('./art/chest_closed.png') no-repeat center/contain; image-rendering:pixelated}
.treasure:hover .ic{filter:drop-shadow(0 0 10px rgba(var(--gold-rgb),.85)) brightness(1.15); transform:translateY(-2px)}
.treasure .ic{transition:filter .2s, transform .12s steps(2)}
.treasure.soon .ic{background-image:url('./art/chest_closed.png'); filter:saturate(.5)}

/* ---------- biome decorative sea-life（每帶不同深度生物） ---------- */
.crit{position:absolute; pointer-events:none; background-repeat:no-repeat; background-position:center;
  background-size:contain; image-rendering:pixelated; z-index:2}
.drift{animation:drift 9s ease-in-out infinite}
.driftS{animation:drift 6.5s ease-in-out infinite}
.sway{animation:sway 7s ease-in-out infinite; transform-origin:bottom center}
.glowc{filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55))}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-12px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* 帶1 陽光帶 */
.c-fish{width:230px;height:170px; background-image:url('./art/fish_tropical.png')}
.c-turtle{width:170px;height:120px; background-image:url('./art/sea_turtle.png')}
.c-coral{width:200px;height:180px; background-image:url('./art/reef_coral.png')}
/* 帶2 微光帶 */
.c-squid{width:150px;height:150px; background-image:url('./art/squid.png')}
.c-ray{width:210px;height:150px; background-image:url('./art/ray.png')}
.c-school{width:230px;height:150px; background-image:url('./art/fish_silhouette.png'); opacity:.85}
/* 帶3 深海帶 */
.c-angler{width:170px;height:150px; background-image:url('./art/anglerfish.png')}
.wreck{position:absolute; left:4%; bottom:6%; width:420px; height:200px;
  background:url('./art/wreck.png') no-repeat center/contain; pointer-events:none; z-index:1; opacity:.9}
/* 帶4 海床 */
.c-vent{width:230px;height:340px; background-image:url('./art/hydrothermal_vent.png')}
/* 海床岩石散件（JS 生成、前後景縮放交疊用） */
.floorpiece{position:absolute; pointer-events:none; background-repeat:no-repeat; background-position:center bottom;
  background-size:contain; image-rendering:pixelated}
.c-kelp{width:120px;height:240px; background-image:url('./art/kelp.png'); z-index:1}
/* 新增生物 */
.c-dolphin{width:185px;height:130px; background-image:url('./art/dolphin.png')}
.c-shark{width:250px;height:130px; background-image:url('./art/shark.png')}
.c-whale{width:340px;height:200px; background-image:url('./art/whale.png')}
.c-gsquid{width:160px;height:175px; background-image:url('./art/giant_squid.png')}
.c-seahorse{width:74px;height:120px; background-image:url('./art/seahorse.png')}
.c-lantern{width:185px;height:120px; background-image:url('./art/lantern_fish.png')}
.c-deepjelly{width:130px;height:165px; background-image:url('./art/deep_jelly.png')}
/* 海床散件（取代 tile 海床，散佈擺放） */
.d-rockA{width:210px;height:180px; background-image:url('./art/floor_rock_a.png'); z-index:1}
.d-rockB{width:210px;height:180px; background-image:url('./art/floor_rock_b.png'); z-index:1}
.d-trench{width:160px;height:210px; background-image:url('./art/trench_rock.png'); z-index:1}
.d-mineral{width:150px;height:140px; background-image:url('./art/mineral_vein.png')}
.d-anchor{width:120px;height:150px; background-image:url('./art/prop_anchor.png')}
.d-buoy{width:110px;height:130px; background-image:url('./art/prop_buoy.png')}
/* 彩蛋地標 */
.lm-pineapple{width:130px;height:185px; background-image:url('./art/egg_pineapple.png'); z-index:1}
.lm-submarine{width:240px;height:140px; background-image:url('./art/egg_submarine.png')}
.lm-atlantis{width:440px;height:190px; background-image:url('./art/egg_atlantis.png'); z-index:1; opacity:.45}
/* 海床底板（純 CSS 漸層沙/岩地，不 tile、不重複） */
.sea-floor{position:absolute; left:0; right:0; bottom:0; height:150px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(36,46,42,.45) 28%, #16221d 72%, #0b1310);
  border-top:2px solid rgba(130,150,130,.14)}
.sea-floor.lit{height:120px;
  background:linear-gradient(180deg, transparent, rgba(90,130,120,.28) 30%, rgba(54,96,99,.55) 74%, var(--depth-open));
  border-top:2px solid rgba(150,200,190,.18)}
/* 探照揭示：深海暗物件預設變暗、被手電筒照到(.near)就點亮 */
.lit-target{filter:brightness(.6) saturate(.7); transition:filter .45s ease}
.lit-target.near{filter:brightness(1.18) saturate(1.3) drop-shadow(0 0 14px rgba(var(--gold-rgb),.85))}
/* 探照漣漪（GSAP 觸發） */
#fxLayer{position:fixed; inset:0; pointer-events:none; z-index:18; overflow:hidden}
.fxring{position:fixed; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  border:2px solid rgba(var(--gold-rgb),.9); box-shadow:0 0 12px rgba(var(--gold-rgb),.7), inset 0 0 8px rgba(var(--accent-rgb),.5)}
@media(max-width:760px){ .crit{display:none} .wreck{display:none} }

/* dialog */
dialog{border:3px solid var(--accent); background:var(--surface); color:var(--text); max-width:480px; width:90%;
  box-shadow:var(--shadow-hard); padding:0}
dialog::backdrop{background:rgba(2,8,14,.7)}
dialog .dhead{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:2px solid var(--border)}
dialog .dbody{padding:16px}
dialog h3{font-family:"Silkscreen",monospace; margin:0}
dialog .x{appearance:none; background:none; border:2px solid var(--border); color:var(--text); cursor:pointer; padding:4px 10px}
dialog .x:hover{border-color:var(--accent); color:var(--accent)}

.empty{color:var(--text-secondary); border:2px dashed var(--border); padding:22px; text-align:center}
.btn.mail{font-size:clamp(.8rem,2.4vw,1rem); max-width:100%; white-space:normal; word-break:break-all; line-height:1.3}
@media(max-width:760px){ .btn.mail{width:100%; justify-content:center} }
footer{position:relative; z-index:10; border-top:2px solid var(--border); color:var(--text-tertiary);
  font-size:.85rem; padding:28px 24px; text-align:center; background:#070d15}
.todo{outline:1px dashed #3a566b; outline-offset:3px}

/* ========== 成就系統 ========== */
/* HUD trophy 按鈕 */
.ach-trophy{appearance:none;background:none;border:none;cursor:pointer;font-size:1.1rem;
  padding:2px 4px;position:relative;color:var(--accent);line-height:1;
  display:flex;align-items:center;margin-left:6px}
.ach-badge{position:absolute;top:-5px;right:-7px;background:#e84040;color:#fff;
  font-family:"Silkscreen",monospace;font-size:.52rem;padding:1px 4px;border-radius:2px;
  line-height:1.4;min-width:14px;text-align:center;display:none}
.ach-badge.show{display:block}

/* 成就 slide-out 面板 */
.ach-panel{position:fixed;right:0;top:0;height:100%;width:min(320px,90vw);
  background:var(--surface);border-left:3px solid var(--border);
  overflow-y:auto;z-index:35;
  transform:translateX(100%);transition:transform .25s steps(8);padding-bottom:40px}
.ach-panel.open{transform:translateX(0)}
.ach-phead{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:2px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1}
.ach-phead h3{font-family:"Silkscreen",monospace;font-size:.8rem;margin:0;color:var(--accent)}
.ach-progress{font-family:"Silkscreen",monospace;font-size:.62rem;color:var(--text-tertiary)}
.ach-close{appearance:none;background:none;border:2px solid var(--border);color:var(--text);
  cursor:pointer;padding:3px 9px;font-family:"Silkscreen",monospace;font-size:.62rem}
.ach-close:hover{border-color:var(--accent);color:var(--accent)}
.ach-section{padding:10px 14px 4px}
.ach-section h4{font-family:"Silkscreen",monospace;font-size:.6rem;color:var(--text-tertiary);
  margin:0 0 8px;letter-spacing:.1em;text-transform:uppercase}
.ach-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border)}
.ach-row:last-child{border-bottom:none}
.ach-icon{font-size:1.3rem;flex:0 0 auto;line-height:1.3}
.ach-info b{display:block;font-size:.75rem;font-family:"Silkscreen",monospace;margin-bottom:3px;color:var(--text)}
.ach-info span{font-size:.72rem;color:var(--text-tertiary);line-height:1.5}
.ach-row.locked .ach-info b,.ach-row.locked .ach-info span{color:var(--text-tertiary);opacity:.5}
.ach-row.hidden-locked .ach-icon{opacity:.35;filter:grayscale(1)}
.ach-row.hidden-locked .ach-info b{color:var(--text-tertiary);opacity:.5}

/* 成就 toast */
.ach-toast{position:fixed;bottom:24px;right:24px;z-index:40;
  background:var(--surface);border:2px solid var(--gold);box-shadow:var(--glow-gold);
  padding:12px 14px;display:flex;align-items:flex-start;gap:10px;max-width:280px;
  transform:translateX(140%);transition:transform .18s steps(4)}
.ach-toast.show{transform:translateX(0)}
.ach-toast-icon{font-size:1.7rem;line-height:1;flex:0 0 auto}
.ach-toast-body b{display:block;font-family:"Silkscreen",monospace;font-size:.65rem;
  color:var(--gold);margin-bottom:4px}
.ach-toast-body span{font-size:.75rem;color:var(--text-secondary)}

/* 可點擊生物 */
.crit.clickable{pointer-events:auto;cursor:pointer}

/* diver 金光里程碑 */
@keyframes diver-glow1{
  0%,100%{filter:drop-shadow(0 0 5px rgba(255,194,74,.85)) drop-shadow(0 0 12px rgba(255,194,74,.4))}
  50%     {filter:drop-shadow(0 0 9px rgba(255,194,74,1))  drop-shadow(0 0 20px rgba(255,194,74,.6))}
}
@keyframes diver-glow2{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,194,74,1))  drop-shadow(0 0 22px rgba(255,194,74,.75)) drop-shadow(0 0 40px rgba(255,194,74,.35))}
  50%     {filter:drop-shadow(0 0 14px rgba(255,194,74,1)) drop-shadow(0 0 34px rgba(255,194,74,.9))  drop-shadow(0 0 58px rgba(255,194,74,.5))}
}
#diver.diver--suit-1{animation:diver-glow1 2.2s ease-in-out infinite}
#diver.diver--suit-2{animation:diver-glow2 1.6s ease-in-out infinite}

/* 探索日誌 */
.log-entry{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  font-family:"Silkscreen",monospace;font-size:.65rem;letter-spacing:.14em;
  color:var(--text-tertiary);opacity:0;transition:opacity 1.4s ease;
  pointer-events:none;white-space:nowrap;z-index:11}
.log-entry.in{opacity:.75}
@media(max-width:760px){.log-entry{white-space:normal;max-width:80vw;text-align:center;
  left:10%;transform:none}}

/* win toast */
#win{position:fixed; inset:0; z-index:40; display:none; place-items:center; background:rgba(2,8,14,.6)}
#win .card{background:var(--surface); border:3px solid var(--gold); box-shadow:var(--glow-gold); padding:26px; text-align:center}

/* ========== Loading Splash Overlay ========== */
#splash { position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .6s ease }
#splash.done { opacity:0; pointer-events:none }
#splash .splash-diver { width:64px; height:64px; image-rendering:pixelated; animation:splash-bob 1.2s ease-in-out infinite }
#splash .splash-text { font-family:"Silkscreen",monospace; color:var(--accent); font-size:.8rem; margin-top:16px; letter-spacing:.1em }
#splash .splash-bar { width:120px; height:4px; background:var(--surface); margin-top:12px; overflow:hidden }
#splash .splash-bar .fill { height:100%; width:0; background:var(--accent); transition:width .3s }
@keyframes splash-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ========== Treasure Chest Open Animation ========== */
.treasure .ic { transition:transform .3s ease }
.treasure:hover .ic { transform:rotate(-15deg) translateY(-3px) }
.treasure.opening .ic { animation:chest-open .5s ease-out forwards }
@keyframes chest-open {
  0%{transform:rotate(0)}
  40%{transform:rotate(-35deg) translateY(-8px)}
  100%{transform:rotate(-60deg) translateY(-12px) scale(1.1)}
}
.treasure .chest-burst { position:absolute; inset:0; pointer-events:none; opacity:0 }
.treasure.opening .chest-burst { animation:burst-flash .6s ease-out forwards }
@keyframes burst-flash { 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }

/* ========== Depth Transition Effect ========== */
.depth-transition-flash { position:fixed; inset:0; z-index:35; pointer-events:none; opacity:0; background:rgba(var(--accent-rgb),.15); mix-blend-mode:screen }
@keyframes depth-shake { 0%,100%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,2px)} }
body.depth-shift { animation:depth-shake .3s ease }
body.depth-shift .depth-transition-flash { animation:burst-flash .4s ease-out }

/* ========== Codex / Collection Panel ========== */
.codex-panel { position:fixed; left:0; top:0; width:320px; height:100%; z-index:42; background:rgba(var(--bg-rgb),.95); backdrop-filter:blur(12px); border-right:2px solid var(--border); transform:translateX(-100%); transition:transform .35s ease; overflow-y:auto; padding:20px }
.codex-panel.open { transform:translateX(0) }
.codex-phead { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.codex-phead h3 { font-family:"Silkscreen",monospace; color:var(--accent); margin:0; font-size:1rem }
.codex-close { background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer }
.codex-entry { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border) }
.codex-entry.locked { opacity:.35 }
.codex-entry .codex-icon { width:48px; height:48px; image-rendering:pixelated; flex-shrink:0 }
.codex-entry .codex-info b { display:block; font-family:"Silkscreen",monospace; font-size:.7rem; color:var(--text) }
.codex-entry .codex-info span { font-size:.8rem; color:var(--text-secondary) }
.codex-entry .codex-depth { font-family:"Silkscreen",monospace; font-size:.6rem; color:var(--accent); margin-top:2px }
.codex-btn { position:fixed; bottom:14px; left:14px; z-index:31; font-family:"Silkscreen",monospace; font-weight:700; font-size:.72rem; color:var(--text); background:rgba(var(--bg-rgb),.6); border:2px solid var(--border); padding:6px 10px; cursor:pointer; display:none }
.codex-btn .codex-count { background:var(--accent); color:var(--bg); font-size:.6rem; padding:1px 5px; margin-left:6px }

/* ========== Gyroscope Utility ========== */
.gyro-layer { transition:transform .15s ease-out }

/* ========== Responsive: Tablet (480–760px) ========== */
@media(min-width:480px) and (max-width:760px){
  #diver { width:56px; height:56px }
  #dolphin { display:none }
  .swim-toggle { display:none !important }
  [data-parallax] { --plx-scale:.4 }
  .navdots { display:none }
  .grid.g2, .grid.g3 { grid-template-columns:1fr }
  .depth { padding:80px 0 }
  .wrap { padding:0 16px }
  .codex-panel { width:100% }
}

/* ========== Responsive: Mobile (<480px) ========== */
@media(max-width:479px){
  .depth { min-height:auto; padding:56px 0 }
  #diver { display:none }
  #dolphin { display:none }
  .swim-toggle { display:none !important }
  [data-parallax] { transform:none !important }
  .treasure:hover { transform:none }
  .navdots { display:none }
  .grid.g2, .grid.g3 { grid-template-columns:1fr }
  .wrap { padding:0 12px }
  h1.title { font-size:1.2rem }
  .hud { top:6px; right:8px; padding:4px 8px; font-size:.7rem }
  .hud .dnum { font-size:.8rem }
  /* Mini diver depth indicator for mobile */
  .mobile-depth { position:fixed; top:6px; left:8px; z-index:31; display:flex; align-items:center; gap:6px; font-family:"Silkscreen",monospace; font-size:.65rem; color:var(--accent); background:rgba(var(--bg-rgb),.6); padding:4px 8px; border:1px solid var(--border) }
  .mobile-depth .mini-diver { width:24px; height:24px; image-rendering:pixelated; animation:bob 3s ease-in-out infinite }
  .codex-panel { width:100% }
  .codex-btn { bottom:8px; left:8px; font-size:.6rem; padding:4px 8px }
  .ach-panel { width:100%; right:0 }
  .treasure { margin:0 }
  .panel { padding:12px }
  .tag { font-size:.75rem; padding:2px 8px }
}

/* ========== Responsive: Desktop (>760px) ========== */
@media(min-width:761px){
  .mobile-depth { display:none }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  #depth-fog{opacity:.3}
  #diver,#dolphin,#diverBubbles{display:none}
}