/* ============================================================
   全球潛點地圖 — 8-bit 深海點陣風
   桌機：左側控制面板 + 右側詳情面板（hover 觸發）
   手機：頂部控制列 + 底部詳情抽屜（點擊觸發）
   ============================================================ */

/* 點陣字體。英數用 Press Start 2P，中文用 Zpix 子集（兩者皆 SIL OFL 1.1）。
   family 順序讓瀏覽器逐字挑選：ASCII 命中 PS2P，中文落到 Zpix。 */
@font-face{
  font-family:'PS2P';
  src:url('fonts/pressstart2p.woff2') format('woff2');
  font-display:swap; unicode-range:U+0020-007F;
}
@font-face{
  font-family:'Zpix';
  src:url('fonts/zpix-subset.woff') format('woff');
  font-display:swap;
}

:root{
  /* 有限色盤：8-bit 深海。色相統一收在藍青，只靠明度分階，
     避免原本藍與紫混用造成的濁感。 */
  --c0:#04101f;   /* 最深 — 底 */
  --c1:#0a1e33;   /* 面板底 — 深靛 */
  --c2:#123453;   /* 深藍 */
  --c3:#1d5a85;   /* 中藍 */
  --c4:#2e8bc0;   /* 亮海藍 — 主邊框 */
  --c5:#5ce1e6;   /* 亮青 — 主色 */
  --c6:#c9f7f5;   /* 泡沫白青 */
  --gold:#ffd166; /* 金黃 — 強調 */
  --coral:#ff6b8a;/* 珊瑚紅 — 警示 */
  --green:#52d681;/* 綠 — 良好 */
  --ink:#e2f4fb;
  --dim:#8fb3c9;
  --faint:#5d8299;

  --px:'PS2P','Zpix',monospace;   /* 點陣字堆疊 */
  --pad:12px;
}

*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--c0); color:var(--ink);
  font-family:var(--px); font-size:12px; line-height:1.7;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  /* 關掉字體平滑，讓字緣保持硬邊（點陣風的關鍵） */
  -webkit-font-smoothing:none; font-smooth:never; text-rendering:optimizeSpeed;
}

/* ---------- 地圖 ---------- */
/* 背景就是海洋：陸地由 app.js 的向量圖層畫上去（data/land.json，座標已對齊網格）。
   不再使用照片式圖磚 —— 圖磚的地名與平滑海岸線和點陣介面互相打架。 */
#map,.leaflet-container{background:#0f3a5f}
#map{position:fixed; inset:0; z-index:1}
.leaflet-container{outline:none; font-family:var(--px)}

.leaflet-control-zoom{border:none!important; margin:12px!important}
.leaflet-control-zoom a{
  background:var(--c2)!important; color:var(--c5)!important;
  border:3px solid var(--c4)!important; outline:3px solid #000;
  border-radius:0!important; width:34px!important; height:34px!important;
  line-height:28px!important; font-family:var(--px); font-size:13px!important;
  text-shadow:2px 2px 0 #000;
}
.leaflet-control-zoom a:first-child{margin-bottom:6px}
.leaflet-control-zoom a:hover{
  background:var(--c3)!important; color:var(--c6)!important;
}
.leaflet-control-attribution{
  background:var(--c1)!important; color:var(--faint)!important;
  font-family:var(--px); font-size:7px!important; line-height:1.6;
  border:0!important; border-top:2px solid var(--c3)!important; padding:3px 5px!important;
}
.leaflet-control-attribution a{color:var(--dim)!important; text-decoration:none}

/* ============================================================
   躍出水面的魚
   ------------------------------------------------------------
   三層嵌套是必要的：水平、垂直、旋轉如果寫在同一個元素上，
   後面的 transform 會蓋掉前面的。分層之後三者各自獨立運作。
     .fish-arc  水平等速移動
     .fish-jump 垂直拋物線（keyframes 取樣 y = 4t(1-t)，配 linear）
     .fish-spin 沿軌跡切線轉動（出水抬頭 -> 頂點水平 -> 入水低頭）
     img        依移動方向水平鏡射（素材一律朝左）
   ============================================================ */
.fish-layer{position:fixed; inset:0; z-index:300; pointer-events:none; overflow:hidden}
.fish-arc{position:absolute; animation:fish-x var(--dur) linear forwards}
.fish-jump{animation:fish-y var(--dur) linear forwards}
.fish-spin{animation:fish-rot var(--dur) linear forwards}
.fish-layer img{
  display:block; width:var(--size); height:auto;
  image-rendering:pixelated;
  transform:scaleX(var(--flip));
  /* 硬邊描邊，讓去背的魚在深藍海面上有輪廓（不用模糊陰影） */
  filter:drop-shadow(2px 0 0 rgba(4,16,31,.75)) drop-shadow(-2px 0 0 rgba(4,16,31,.75))
         drop-shadow(0 2px 0 rgba(4,16,31,.75)) drop-shadow(0 -2px 0 rgba(4,16,31,.75));
}
@keyframes fish-x{
  from{transform:translateX(0)}
  to  {transform:translateX(var(--dx))}
}
/* 拋物線取樣點：y = 4t(1-t)，用 linear 播放才是真正的等重力軌跡 */
@keyframes fish-y{
  0%  {transform:translateY(0)}
  10% {transform:translateY(calc(var(--h) * -0.36))}
  20% {transform:translateY(calc(var(--h) * -0.64))}
  30% {transform:translateY(calc(var(--h) * -0.84))}
  40% {transform:translateY(calc(var(--h) * -0.96))}
  50% {transform:translateY(calc(var(--h) * -1))}
  60% {transform:translateY(calc(var(--h) * -0.96))}
  70% {transform:translateY(calc(var(--h) * -0.84))}
  80% {transform:translateY(calc(var(--h) * -0.64))}
  90% {transform:translateY(calc(var(--h) * -0.36))}
  100%{transform:translateY(0)}
}
@keyframes fish-rot{
  0%  {transform:rotate(calc(var(--tilt) * -1))}
  50% {transform:rotate(0deg)}
  100%{transform:rotate(var(--tilt))}
}
/* 入水前後淡出淡入，避免憑空出現／消失 */
.fish-arc{opacity:0; animation:fish-x var(--dur) linear forwards, fish-fade var(--dur) linear forwards}
@keyframes fish-fade{
  0%{opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0}
}

/* ---------- 覆蓋特效 ---------- */
.fx-grid,.fx-scan,.fx-vignette{position:fixed; inset:0; pointer-events:none; z-index:400}
/* 掃描線：CRT 質感，用硬階梯而非漸層 */
.fx-grid{
  background-image:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.fx-scan::after{
  content:""; position:absolute; left:0; right:0; height:22vh;
  background:linear-gradient(to bottom, transparent, rgba(92,225,230,.06));
  animation:sweep 6s steps(24) infinite;      /* steps() = 逐格前進的 8-bit 動感 */
}
@keyframes sweep{
  0%{transform:translateY(-25vh)}
  100%{transform:translateY(105vh)}
}
.fx-vignette{
  background:radial-gradient(ellipse 96% 92% at 50% 48%, transparent 58%, rgba(4,16,31,.55) 100%);
}

/* ============================================================
   潛員列 + 人物卡
   ============================================================ */
/* 寬度貼合內容（剛好包住所有人名），不是拉滿整條。
   max-width 只是保險：潛員多到超出時才啟用內部橫向捲動。 */
.crew{
  position:fixed; z-index:499; top:var(--pad); left:314px;
  width:fit-content; max-width:calc(100vw - 314px - var(--pad));
  display:flex; align-items:center; gap:8px;
  background:var(--c1); border:3px solid var(--c4); outline:3px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.55); padding:5px 8px;
}
.crew-label{flex:0 0 auto; font-size:12px; color:var(--gold); text-shadow:1px 1px 0 #000}
.crew-tabs{display:flex; gap:5px; overflow-x:auto; flex:1; min-width:0; scrollbar-width:none}
.crew-tabs::-webkit-scrollbar{display:none}
.crew-tab{
  flex:0 0 auto; padding:4px 7px; cursor:pointer; border-radius:0;
  background:var(--c2); border:2px solid var(--c3); color:var(--dim);
  font-family:var(--px); font-size:12px; line-height:1.4; white-space:nowrap;
}
.crew-tab:hover{border-color:var(--c4); color:var(--c6)}
.crew-tab:active{transform:translate(1px,1px)}
.crew-tab.on{background:var(--c4); border-color:var(--c5); color:var(--c0); text-shadow:none}
.crew-tab em{font-style:normal; font-size:7px; opacity:.75; margin-left:4px}

.crew-card{
  position:fixed; z-index:501; top:calc(var(--pad) + 42px); left:314px; width:230px;
  background:var(--c1); border:3px solid var(--c4); outline:3px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  animation:panelIn .18s steps(3);
}
.crew-card[hidden]{display:none}
.crew-close{
  position:absolute; top:5px; right:5px; z-index:3;
  width:22px; height:22px; cursor:pointer; border-radius:0;
  background:var(--c2); border:2px solid var(--c4); color:var(--c5);
  font-family:var(--px); font-size:8px; line-height:1; display:grid; place-items:center;
}
.crew-close:hover{background:var(--coral); border-color:var(--coral); color:#fff}

/* 立繪：點陣圖必須停用平滑內插，否則放大後糊成一團 */
.crew-art{
  background:var(--c0); border-bottom:3px solid var(--c4);
  display:grid; place-items:center; padding:6px 0 0;
}
.crew-art img{
  display:block; width:auto; height:172px; max-width:100%;
  image-rendering:pixelated;
}
.crew-info{padding:8px 10px 10px}
.crew-info h3{
  margin:0 0 8px; font-size:16px; font-weight:400; color:var(--c6);
  text-shadow:2px 2px 0 #000;
}
.crew-rows{display:grid; gap:4px; background:var(--c3); padding:2px}
.cr{display:flex; align-items:baseline; gap:6px; background:var(--c0); padding:4px 6px}
.cr-k{flex:0 0 auto; width:52px; font-size:12px; color:var(--faint)}
.cr-v{flex:1; font-size:12px; color:var(--dim); min-width:0; word-break:break-all}
.cr-v.hi{font-size:16px; color:var(--gold); text-shadow:2px 2px 0 #000}
/* 等級徽章：配色與地圖光點、潛點面板的 PADI 標籤一致 */
.cr-level{padding:6px}
.padi-badge{
  font-size:12px; padding:3px 8px; color:var(--c0); text-shadow:none;
  background:var(--lv-plain);
}
.padi-badge.lv-ow{background:var(--lv-ow)}
.padi-badge.lv-owaow{background:var(--lv-owaow)}
.padi-badge.lv-aow{background:var(--lv-aow)}
.padi-badge.lv-deep{background:var(--lv-deep)}
.padi-badge.lv-cave{background:var(--lv-cave)}
.padi-badge.lv-plain{background:var(--lv-plain); color:var(--ink)}
/* 瓶數加減 */
.tank-adj{flex:0 0 auto; display:flex; gap:3px}
.tank-adj button{
  width:22px; height:22px; cursor:pointer; border-radius:0;
  background:var(--c2); border:2px solid var(--c4); color:var(--c5);
  font-family:var(--px); font-size:12px; line-height:1;
  display:grid; place-items:center; padding:0;
}
.tank-adj button:hover{background:var(--c4); color:var(--c0)}
.tank-adj button:active{transform:translate(1px,1px)}
.tank-adj button:disabled{opacity:.35; cursor:not-allowed; background:var(--c1)}

/* ============================================================
   潛水記錄
   ============================================================ */
.logbox{margin:0 11px 11px; border-top:2px solid var(--c3); padding-top:9px}
.log-head{
  display:flex; align-items:center; gap:6px; margin-bottom:7px;
  font-size:12px; color:var(--gold); text-shadow:1px 1px 0 #000;
}
.log-add{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.log-tank{flex:0 0 auto; font-size:12px; color:var(--dim); display:flex; align-items:center; gap:4px}
#log-tank{
  min-width:56px; padding:4px 5px; text-align:center;
  background:var(--c0); color:var(--gold); border:2px solid var(--c3); border-radius:0;
  font-family:var(--px); font-size:12px; -webkit-font-smoothing:none;
}
#log-tank:disabled{opacity:.5}
#log-tank:focus{outline:none; border-color:var(--c5)}
.log-go{
  flex:1 1 auto; padding:5px 7px; cursor:pointer; border-radius:0;
  background:var(--c2); border:2px solid var(--c4); color:var(--c5);
  font-family:var(--px); font-size:8px; text-shadow:1px 1px 0 #000;
}
.log-go:hover{background:var(--c4); color:var(--c0); text-shadow:none}
.log-go:active{transform:translate(1px,1px)}
.log-go.done{background:var(--lv-ow); border-color:var(--lv-ow); color:var(--c0); text-shadow:none}
.log-hint{margin-top:6px; font-size:12px; color:var(--faint); line-height:1.7}
.log-hint.warn{color:var(--gold)}

.log-list{margin-top:7px; display:grid; gap:3px}
.log-item{
  display:flex; align-items:center; gap:6px; padding:4px 6px;
  background:var(--c0); border-left:3px solid var(--lv-ow); font-size:9px;
}
.log-item .li-n{flex:1; font-size:12px; color:var(--c6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.log-item .li-t{flex:0 0 auto; font-size:8px; color:var(--gold)}
.log-item .li-d{flex:0 0 auto; font-size:7px; color:var(--faint)}
.log-item .li-x{
  flex:0 0 auto; width:16px; height:16px; cursor:pointer; border-radius:0;
  background:transparent; border:1px solid var(--c3); color:var(--faint);
  font-family:var(--px); font-size:7px; line-height:1; display:grid; place-items:center;
}
.log-item .li-x:hover{border-color:var(--coral); color:var(--coral)}

/* ---------- 像素外框（共用） ---------- */
.ctrl,.panel,.foot{
  position:fixed; z-index:500;
  background:var(--c1);
  border:3px solid var(--c4);
  outline:3px solid #000;                     /* 雙層硬邊，8-bit 視窗感 */
  border-radius:0;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);       /* 無模糊的硬陰影 */
}

/* ============================================================
   控制面板（搜尋 + 索引）
   ============================================================ */
.ctrl{
  top:var(--pad); left:var(--pad); width:290px;
  display:flex; flex-direction:column;
  /* 底部留出 footer（左下角）的空間，否則兩者會疊在一起 */
  max-height:calc(100vh - var(--pad) * 2 - 44px);
}
.ctrl-bar{display:flex; align-items:stretch; gap:6px; padding:8px; flex:0 0 auto}

.search-wrap{position:relative; flex:1; display:flex; align-items:center; min-width:0}
.search-icon{position:absolute; left:7px; width:11px; height:11px; color:var(--c5); pointer-events:none}
#search{
  width:100%; padding:8px 8px 8px 24px;
  background:var(--c0); color:var(--ink);
  border:2px solid var(--c3); border-radius:0;
  font-family:var(--px); font-size:12px; outline:none;
  -webkit-font-smoothing:none;
}
#search::placeholder{color:var(--faint)}
#search:focus{border-color:var(--c5); background:#07182a}
#search::-webkit-search-cancel-button{filter:invert(.7) hue-rotate(160deg)}

.ctrl-tog{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  padding:6px 9px; background:var(--c2); cursor:pointer;
  border:2px solid var(--c4); border-radius:0; color:var(--c5);
  font-family:var(--px); font-size:8px; text-shadow:1px 1px 0 #000;
}
.ctrl-tog:active{transform:translate(1px,1px)}     /* 按下去的實體感 */
.ctrl-tog:hover{background:var(--c3); color:var(--c6)}
.ctrl-count b{color:var(--gold); font-weight:400}
/* 用 ASCII 當箭頭：▾ 這類符號兩套點陣字體都沒有字，會變成豆腐框 */
.ctrl-tog .chev{font-size:8px; color:var(--gold)}
.ctrl-tog .chev::before{content:'v'}
.ctrl-tog[aria-expanded="false"] .chev::before{content:'>'}

.ctrl-body{
  overflow-y:auto; border-top:2px solid var(--c3);
  padding:4px; flex:1 1 auto; min-height:0;
}
.ctrl-body[hidden]{display:none}

/* ---------- PADI 等級配色（光點、徽章、圖例共用） ---------- */
:root{
  --lv-ow:#52d681;      /* 新手可 */
  --lv-owaow:#a8d94f;   /* 淺線新手可 */
  --lv-aow:#ffd166;     /* 需進階 */
  --lv-deep:#ff6b8a;    /* 需深潛專長 */
  --lv-cave:#ff9f43;    /* 需洞穴專長 */
  --lv-plain:#5a86a8;   /* 未評級（非亞洲簡略資料） */
}
.lv-key{
  display:flex; flex-wrap:wrap; gap:4px 9px; padding:7px 5px 8px;
  border-bottom:2px solid var(--c2); margin-bottom:4px;
}
.lv-key span{display:flex; align-items:center; gap:4px; font-size:6.5px; color:var(--dim)}
.lv-key i{width:7px; height:7px; flex:0 0 auto}
.lv-key i.lv-ow{background:var(--lv-ow)}
.lv-key i.lv-owaow{background:var(--lv-owaow)}
.lv-key i.lv-aow{background:var(--lv-aow)}
.lv-key i.lv-deep{background:var(--lv-deep)}
.lv-key i.lv-cave{background:var(--lv-cave)}
.lv-key i.lv-plain{background:var(--lv-plain)}

/* 搜尋結果 */
.results[hidden]{display:none}
.res .ra{
  display:block; font-style:normal; font-size:8px; color:var(--faint); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.res .rlv{flex:0 0 auto; width:8px; height:8px}
.res .rlv.lv-ow{background:var(--lv-ow)}
.res .rlv.lv-owaow{background:var(--lv-owaow)}
.res .rlv.lv-aow{background:var(--lv-aow)}
.res .rlv.lv-deep{background:var(--lv-deep)}
.res .rlv.lv-cave{background:var(--lv-cave)}
.res .rlv.lv-plain{background:var(--lv-plain)}
.lg-c .lg-plain{font-style:normal; font-size:7px; color:var(--faint); margin-left:5px}
.results-empty{font-size:12px; color:var(--faint); padding:10px 4px}
.res{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 6px; border:0; border-left:4px solid transparent; border-radius:0;
  background:transparent; color:var(--ink); text-align:left; cursor:pointer;
  font-family:var(--px); font-size:12px; line-height:1.4;
}
.res:hover,.res.on{background:var(--c2); border-left-color:var(--c5); color:var(--c6)}
.res .rn{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res .rc{flex:0 0 auto; font-size:8px; color:var(--faint)}

/* 國家索引 */
.legend-body[hidden]{display:none}
.lg-region{
  font-size:12px; color:var(--gold); padding:11px 5px 5px;
  border-bottom:2px solid var(--c2); margin-bottom:3px; text-shadow:1px 1px 0 #000;
}
.lg-c{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 6px; background:transparent; cursor:pointer;
  border:0; border-left:4px solid transparent; border-radius:0;
  color:var(--dim); font-family:var(--px); font-size:12px;
}
.lg-c:hover{background:var(--c2); color:var(--c6); border-left-color:var(--c5)}
.lg-c .lg-n{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lg-c .lg-k{font-size:8px; color:var(--gold); background:var(--c2); padding:2px 4px}

/* 國碼徽章（不用 emoji 國旗：Windows 缺字會退化成兩個字母） */
.rf,.lg-f,.panel-flag{
  flex:0 0 auto; font-family:var(--px); font-size:8px;
  color:var(--c0); background:var(--c5); border:0; border-radius:0;
  padding:3px 4px; min-width:26px; text-align:center;
}

/* 方塊滾動條 */
.ctrl-body::-webkit-scrollbar,.panel::-webkit-scrollbar{width:8px}
.ctrl-body::-webkit-scrollbar-track,.panel::-webkit-scrollbar-track{background:var(--c0)}
.ctrl-body::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb{
  background:var(--c4); border:2px solid var(--c0); border-radius:0;
}

/* 國家標籤：四向硬描邊，在深色海面上也讀得清楚（點陣風不用模糊陰影） */
.country-label{background:none!important; border:none!important; white-space:nowrap}
.country-label span{
  display:block; transform:translate(-50%,-50%);
  font-family:var(--px); font-size:8px; color:var(--c6); opacity:.62;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* ============================================================
   地圖光點：方形像素，不是圓點
   ============================================================ */
/* overflow 必須放行：足跡頭像會超出 22px 的 icon 範圍 */
.site-pin{background:none!important; border:none!important; overflow:visible!important}
.pin{position:relative; width:100%; height:100%; display:grid; place-items:center; cursor:pointer}

/* ---------- 足跡：到過的潛點掛上潛員頭像 ---------- */
/* bottom 要大於光點的觸控半徑（手機 18px），否則足跡會壓在光點上，
   點不到自己的潛點。容器不吃滑鼠，只有頭像本身可點（用來刪記錄）。 */
.pin-crew{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:2px; align-items:flex-end; pointer-events:none; z-index:2;
}
/* 預設整組足跡都不吃滑鼠 —— 頭像很大，會蓋住鄰近潛點的光點，
   若它攔截點擊，那些潛點就按不到了。
   只有「這個潛點正被選中」時（hover 開著面板，或點選鎖定）才開放點擊，
   此時使用者本來就在看這個潛點，不會想點旁邊的。 */
.pin-crew img,.pin-crew .pin-more,.pin-crew .pin-none{pointer-events:none}
.pin.hot .pin-crew img,.pin.locked .pin-crew img,
.pin.hot .pin-crew .pin-more,.pin.locked .pin-crew .pin-more{
  pointer-events:auto; cursor:pointer;
}
/* 可點時滑過會淡化，提示「點下去會刪掉」 */
.pin.hot .pin-crew img:hover,.pin.locked .pin-crew img:hover{opacity:.4}

/* 同一潛點多人時：頭像依人數縮小，並用 margin-bottom 做成階梯狀
   （容器是 align-items:flex-end，所以 margin-bottom 等於往上推）。
   錯開不能用 transform —— 那個屬性被漂浮動畫佔著。 */
.pin-crew.n2 img{width:34px; height:51px}
.pin-crew.n3 img{width:28px; height:42px}
.pin-crew.n2 img:nth-child(2){margin-bottom:14px}
.pin-crew.n3 img:nth-child(2){margin-bottom:12px}
.pin-crew.n3 img:nth-child(3){margin-bottom:24px}
.pin-crew.n2,.pin-crew.n3{gap:1px}
.pin-crew img{
  /* 立繪本身去背，所以不加底色與外框，直接讓小人站在地圖上。
     用硬邊 drop-shadow 描一圈深色輪廓（無模糊，維持點陣感），
     這樣在亮的陸地或暗的海面上都看得清楚。 */
  width:44px; height:66px; display:block;
  object-fit:contain; object-position:bottom center;
  image-rendering:pixelated;
  filter:drop-shadow(2px 0 0 rgba(4,16,31,.9)) drop-shadow(-2px 0 0 rgba(4,16,31,.9))
         drop-shadow(0 2px 0 rgba(4,16,31,.9)) drop-shadow(0 -2px 0 rgba(4,16,31,.9));
  /* 在水中上下漂浮，steps() 讓它逐格跳動而非平滑補間 */
  animation:bob 1.9s steps(3) infinite;
}
.pin-crew img:nth-child(2){animation-delay:.32s}
.pin-crew img:nth-child(3){animation-delay:.64s}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
/* hover 該潛點時停止漂浮並放大，看清楚是誰 */
.pin.hot .pin-crew img{
  animation:none; transform:scale(1.2); transform-origin:bottom center;
  filter:drop-shadow(2px 0 0 var(--c5)) drop-shadow(-2px 0 0 var(--c5))
         drop-shadow(0 2px 0 var(--c5)) drop-shadow(0 -2px 0 var(--c5));
}
.pin-crew .pin-more,.pin-crew .pin-none{
  min-width:24px; height:26px; padding:0 3px; display:grid; place-items:center;
  font-family:var(--px); font-size:10px; font-weight:400;
  background:var(--c2); color:var(--c6);
  border:0; box-shadow:0 0 0 1px var(--c0), 0 0 0 2px var(--c4);
  animation:bob 1.9s steps(3) infinite; animation-delay:.96s;
}
/* 到過的潛點：光點外圈換成金色，遠看也分得出來 */
.pin.visited i{box-shadow:
   0 -3px 0 var(--gold), 0 3px 0 var(--gold), -3px 0 0 var(--gold), 3px 0 0 var(--gold),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
/* 縮到全球視圖時足跡仍要看得到，只是縮一階避免糊成一團 */
body.no-ping .pin-crew img{width:26px; height:39px}
body.no-ping .pin-crew .pin-more,
body.no-ping .pin-crew .pin-none{min-width:16px; height:18px; font-size:8px}
/* 中心 3x3 像素 + 四方向各一格，構成十字光標 */
.pin i{
  position:absolute; width:3px; height:3px; background:var(--c6);
  box-shadow:
     0 -3px 0 var(--c5),  0 3px 0 var(--c5),
    -3px 0 0 var(--c5),  3px 0 0 var(--c5),
     0 -6px 0 var(--c3),  0 6px 0 var(--c3),
    -6px 0 0 var(--c3),  6px 0 0 var(--c3);
}
/* 脈動外環：逐格放大（steps），不是平滑縮放 */
.pin b{
  position:absolute; width:5px; height:5px;
  border:2px solid var(--c5); opacity:0;
  animation:ping 2.8s steps(4) infinite;
}
@keyframes ping{
  0%{transform:scale(1); opacity:.9}
  99%,100%{transform:scale(4); opacity:0}
}
/* 光點依 PADI 難度換色：中心與內圈用等級色，外圈維持暗藍以保留深度感 */
.pin.lv-ow i{background:#fff; box-shadow:
   0 -3px 0 var(--lv-ow), 0 3px 0 var(--lv-ow), -3px 0 0 var(--lv-ow), 3px 0 0 var(--lv-ow),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
.pin.lv-owaow i{background:#fff; box-shadow:
   0 -3px 0 var(--lv-owaow), 0 3px 0 var(--lv-owaow), -3px 0 0 var(--lv-owaow), 3px 0 0 var(--lv-owaow),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
.pin.lv-aow i{background:#fff; box-shadow:
   0 -3px 0 var(--lv-aow), 0 3px 0 var(--lv-aow), -3px 0 0 var(--lv-aow), 3px 0 0 var(--lv-aow),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
.pin.lv-deep i{background:#fff; box-shadow:
   0 -3px 0 var(--lv-deep), 0 3px 0 var(--lv-deep), -3px 0 0 var(--lv-deep), 3px 0 0 var(--lv-deep),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
.pin.lv-cave i{background:#fff; box-shadow:
   0 -3px 0 var(--lv-cave), 0 3px 0 var(--lv-cave), -3px 0 0 var(--lv-cave), 3px 0 0 var(--lv-cave),
   0 -6px 0 var(--c3), 0 6px 0 var(--c3), -6px 0 0 var(--c3), 6px 0 0 var(--c3)}
.pin.lv-ow b{border-color:var(--lv-ow)}
.pin.lv-owaow b{border-color:var(--lv-owaow)}
.pin.lv-aow b{border-color:var(--lv-aow)}
.pin.lv-deep b{border-color:var(--lv-deep)}
.pin.lv-cave b{border-color:var(--lv-cave)}

.pin.hot i{
  background:#fff; width:5px; height:5px;
  box-shadow:
     0 -5px 0 var(--gold),  0 5px 0 var(--gold),
    -5px 0 0 var(--gold),  5px 0 0 var(--gold),
     0 -10px 0 var(--c6),  0 10px 0 var(--c6),
    -10px 0 0 var(--c6),  10px 0 0 var(--c6)!important;
}
.pin.hot b{animation-duration:.9s; border-color:var(--gold)}
body.no-ping .pin b{animation:none; opacity:0}

/* 選定目標：方形框逐格旋轉 */
.pin.locked::after{
  content:""; position:absolute; width:22px; height:22px;
  border:2px solid var(--gold); animation:lockspin 2.4s steps(8) infinite;
}
@keyframes lockspin{to{transform:rotate(360deg)}}

/* ============================================================
   詳情面板
   ============================================================ */
.panel{
  top:var(--pad); right:var(--pad); width:308px;
  max-height:calc(100vh - var(--pad) * 2 - 12px);
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  animation:panelIn .18s steps(3);
}
.panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:none}}

.panel-close{
  position:absolute; top:6px; right:6px; z-index:6;
  width:26px; height:26px; cursor:pointer; border-radius:0;
  background:var(--c2); border:2px solid var(--c4);
  color:var(--c5); font-family:var(--px); font-size:9px; line-height:1;
  display:grid; place-items:center;
}
.panel-close:hover{background:var(--coral); border-color:var(--coral); color:#fff}
.panel-close:active{transform:translate(1px,1px)}

/* ---------- 幻燈片（照片保持原貌，只有外框點陣化） ---------- */
.slides{
  position:relative; aspect-ratio:1/1; max-height:196px; background:var(--c0);
  overflow:hidden; flex:0 0 auto; border-bottom:3px solid var(--c4);
}
.slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;                                /* 完整顯示，不裁切 */
  opacity:0; transition:opacity .25s steps(3);       /* 逐格淡入，不用平滑 */
}
.slides img.on{opacity:1}
.slides::after{      /* 底部壓暗，讓授權文字讀得到 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 62%, rgba(4,16,31,.92) 100%);
}
/* 四角像素直角標記 */
.slides-frame{position:absolute; inset:0; pointer-events:none; z-index:3}
.corner{position:absolute; width:9px; height:9px; border:3px solid var(--c6)}
.corner.tl{top:4px; left:4px; border-right:0; border-bottom:0}
.corner.tr{top:4px; right:4px; border-left:0; border-bottom:0}
.corner.bl{bottom:4px; left:4px; border-right:0; border-top:0}
.corner.br{bottom:4px; right:4px; border-left:0; border-top:0}

/* 進度條：方格，逐格填滿 */
.slides-bar{
  position:absolute; bottom:5px; left:6px; right:6px; z-index:4;
  display:flex; gap:3px; height:6px;
}
.slides-bar span{
  flex:1; background:var(--c2); border:1px solid var(--c3); position:relative; overflow:hidden;
}
.slides-bar span::after{
  content:""; position:absolute; inset:0; background:var(--c5);
  transform:translateX(-101%);
}
.slides-bar span.done::after{transform:translateX(0)}
.slides-bar span.run::after{transform:translateX(0); transition:transform 2.6s steps(10)}
.slides-bar span.reset::after{transform:translateX(-101%); transition:none}

/* 授權標示：獨立一行放在影像下方，不遮圖 */
.slides-credit{
  display:block; flex:0 0 auto; padding:5px 11px 4px;
  background:var(--c0); border-bottom:2px solid var(--c2);
  font-family:var(--px); font-size:6.5px; line-height:1.6;
  color:var(--faint); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slides-credit:hover{color:var(--c5)}
.badge-approx{
  position:absolute; top:7px; left:7px; z-index:4;
  font-family:var(--px); font-size:7px;
  background:var(--gold); color:var(--c0); padding:3px 5px;
}
/* 載入中：三個方塊逐格跳動 */
.slides-loading{position:absolute; inset:0; z-index:2; display:flex; gap:5px; align-items:center; justify-content:center}
.slides-loading span{width:6px; height:6px; background:var(--c5); animation:bounce .9s steps(3) infinite}
.slides-loading span:nth-child(2){animation-delay:.15s}
.slides-loading span:nth-child(3){animation-delay:.3s}
@keyframes bounce{
  0%,100%{transform:translateY(0); opacity:.4}
  50%{transform:translateY(-8px); opacity:1}
}
.slides-loading[hidden],.slides-none[hidden]{display:none}
.slides-none{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  font-size:9px; color:var(--faint); text-align:center; padding:0 20px;
}

/* ---------- 面板文字 ---------- */
.panel-head{display:flex; gap:8px; align-items:flex-start; padding:9px 11px 0}
.panel-flag{margin-top:3px; font-size:8px}
.panel-title{min-width:0}
.panel-head h2{
  margin:0; font-size:12px; font-weight:400; line-height:1.6; color:var(--c6);
  text-shadow:2px 2px 0 #000;
}
.panel-head p{margin:4px 0 0; font-size:12px; color:var(--gold)}
/* ---------- 潛點資訊（PADI 等級 / 深度 / 方式 / 季節 / 注意） ---------- */
.panel-blurb{
  margin:8px 11px 0; padding:8px; background:var(--c0);
  border-left:4px solid var(--c3); font-size:12px; line-height:1.6; color:var(--dim);
}
.dv-badges{display:flex; flex-wrap:wrap; gap:3px; margin-bottom:6px}
.padi{
  font-size:7.5px; padding:2px 4px; color:var(--c0); line-height:1.45;
  max-width:100%; word-break:break-all;
}
.padi.lv-ow{background:var(--lv-ow)}
.padi.lv-owaow{background:var(--lv-owaow)}
.padi.lv-aow{background:var(--lv-aow)}
.padi.lv-deep{background:var(--lv-deep)}
.padi.lv-cave{background:var(--lv-cave)}
.padi.lv-plain{background:var(--lv-plain); color:var(--ink)}
.dv-chip{font-size:7.5px; padding:2px 4px; background:var(--c2); color:var(--c6)}

.dv-row{display:flex; gap:5px; margin-top:4px}
.dv-k{
  flex:0 0 auto; width:38px; font-size:12px; color:var(--gold);
  text-shadow:1px 1px 0 #000; padding-top:1px;
}
.dv-v{flex:1; font-size:12px; line-height:1.6; color:var(--dim); min-width:0}
.dv-v.warn{color:var(--lv-cave)}
.dv-v em{font-style:normal; font-size:7px; color:var(--faint)}
.dv-v.nb-yes{color:var(--lv-ow)}
.dv-v.nb-no{color:var(--lv-deep)}
.dv-v.nb-part{color:var(--lv-aow)}

/* ---------- 環境讀數 ---------- */
.readout{margin:9px 11px 10px; border-top:2px solid var(--c3); padding-top:8px}
.readout-title{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--gold); margin-bottom:7px; text-shadow:1px 1px 0 #000;
}
.readout-title em{margin-left:auto; font-style:normal; color:var(--faint); font-size:6.5px}
.dot-live{
  width:6px; height:6px; background:var(--green); flex:0 0 auto;
  animation:blink 1.2s steps(2) infinite;
}
@keyframes blink{50%{opacity:.15}}

/* 兩欄：數值用 16px（Press Start 2P 的原生 2 倍）時，三欄會把「29.4°」截成「29...」*/
.metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--c3); padding:2px}
.metric{background:var(--c0); padding:5px 5px; display:flex; flex-direction:column; gap:2px; min-width:0}
.m-label{font-size:12px; color:var(--faint)}
.m-value{
  font-family:var(--px); font-size:16px; color:var(--c5);
  text-shadow:2px 2px 0 #000;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-value.small{font-size:12px; color:var(--c6)}
.m-value.na{color:var(--faint); text-shadow:none}

.seastate{margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px}
.seastate .tag{padding:2px 5px; font-size:7.5px; color:var(--c0); text-shadow:none}
.seastate .tag.calm{background:var(--green)}
.seastate .tag.mod{background:var(--gold)}
.seastate .tag.rough{background:var(--coral)}
.seastate .note{color:var(--faint); font-size:12px}
.coords{margin-top:6px; font-size:6.5px; color:var(--faint)}

/* ---------- footer ---------- */
.foot{
  /* 左下角：Leaflet 的版權列在右下，這裡不會打到 */
  bottom:var(--pad); left:var(--pad); right:auto; padding:5px 8px;
  font-size:7px; color:var(--faint); display:flex; gap:6px; align-items:center;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.foot a{color:var(--c5); text-decoration:none; font-size:8px}
.foot a:hover{color:var(--gold)}
.foot .sep{opacity:.5}
/* 製作者署名 */
.foot .sig{color:#fff; font-size:8px; text-shadow:1px 1px 0 #000; letter-spacing:.06em}

/* ---------- 開機 / 錯誤 ---------- */
.boot{position:fixed; inset:0; z-index:900; background:var(--c0); display:grid; place-items:center; transition:opacity .3s steps(3)}
.boot.gone{opacity:0; pointer-events:none}
.boot-inner{text-align:center; max-width:440px; padding:24px}
/* 方塊逐格旋轉，取代圓形 spinner */
.boot-ring{
  width:24px; height:24px; margin:0 auto 22px;
  border:4px solid var(--c5); animation:lockspin 1.2s steps(4) infinite;
}
#boot-msg{font-size:10px; color:var(--c5); margin:0; text-shadow:2px 2px 0 #000}
.boot-help{margin-top:24px; text-align:left; border:3px solid var(--coral); outline:3px solid #000; background:var(--c1); padding:14px}
.boot-help[hidden]{display:none}
.boot-help p{margin:0 0 8px; font-size:10px; line-height:1.9; color:var(--dim)}
.boot-help p:last-child{margin-bottom:0}
.boot-help strong{color:var(--coral)}
.boot-help code{font-size:9px; color:var(--gold); background:var(--c0); padding:2px 4px}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:1180px){
  .ctrl{width:262px}
  .panel{width:286px}
}

/* 平板 / 手機 */
@media (max-width:820px){
  :root{--pad:0px}

  .fx-vignette{background:radial-gradient(ellipse 100% 96% at 50% 46%, transparent 64%, rgba(4,16,31,.42) 100%)}

  .ctrl{
    top:0; left:0; right:0; width:auto;
    border-top:0; border-left:0; border-right:0; outline:0;
    box-shadow:0 4px 0 rgba(0,0,0,.5);
    max-height:calc(100vh - 90px);
    padding-top:env(safe-area-inset-top);
  }
  .ctrl-bar{padding:7px}
  #search{font-size:12px; padding:9px 8px 9px 24px}
  .ctrl-body{max-height:50vh}

  /* 詳情面板：底部抽屜，高度壓低讓地圖保留一半以上 */
  .panel{
    top:auto; bottom:0; left:0; right:0; width:auto;
    max-height:60vh;
    border-bottom:0; border-left:0; border-right:0; outline:0;
    box-shadow:0 -5px 0 rgba(0,0,0,.55);
    animation:sheetIn .2s steps(4);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes sheetIn{from{transform:translateY(100%)} to{transform:none}}
  .panel-close{width:32px; height:32px; font-size:11px; top:7px; right:7px}

  /* 手機保持方形，但限高以免抽屜吃掉太多地圖（圖仍完整顯示，只是縮小） */
  /* 手機畫面小，足跡小人縮一階免得蓋掉整片地圖 */
  .pin-crew img{width:32px; height:48px}
  .pin-crew .pin-more,.pin-crew .pin-none{min-width:18px; height:20px; font-size:8px}

  .slides{aspect-ratio:1/1; max-height:30vh}
  .panel-head h2{font-size:13px}
  .panel-blurb{font-size:10.5px}
  .dv-v{font-size:10px}
  .m-value{font-size:13px}
  .slides-credit{font-size:7px; padding:5px 11px 4px}

  /* 觸控目標放大（光點視覺不變，可點範圍變大） */
  .site-pin{margin:-7px 0 0 -7px!important; width:36px!important; height:36px!important}

  /* 潛員列移到畫面底部：頂部已被控制列佔滿。
     width/max-width 必須覆寫掉桌機的 fit-content，否則跟 left:0/right:0
     衝突，寬度只會包住「潛員」兩個字，名字全被擠掉。 */
  .crew{
    top:auto; bottom:calc(env(safe-area-inset-bottom) + 26px); left:0; right:0;
    width:auto; max-width:none;
    border-left:0; border-right:0; outline:0; box-shadow:0 -4px 0 rgba(0,0,0,.5);
  }
  .crew-card{
    top:auto; bottom:calc(env(safe-area-inset-bottom) + 74px);
    left:var(--pad); right:auto; width:200px; z-index:502;
  }
  .crew-art img{height:140px}
  body.sheet-open .crew,body.sheet-open .crew-card{display:none}

  .foot{bottom:calc(env(safe-area-inset-bottom) + 2px); right:auto; left:0; border-left:0; border-bottom:0; outline:0}
  .leaflet-control-zoom{display:none}
  .leaflet-control-attribution{font-size:6px!important}
}

@media (max-width:820px){
  body.sheet-open .foot{display:none}
}

/* 窄螢幕：「226 潛點」會把索引鈕擠出畫面，改成「索引」二字才按得到 */
@media (max-width:560px){
  .ctrl-count{display:none}
  .ctrl-tog::before{content:'索引'; font-size:9px; color:var(--c5)}
  .readout-title em{display:none}
}
@media (max-width:360px){
  .metrics{grid-template-columns:repeat(2,1fr)}
}

/* 橫向手機：抽屜改右側 */
@media (max-height:520px) and (min-width:560px){
  .panel{
    top:6px; bottom:6px; left:auto; right:6px; width:288px;
    max-height:none; border:3px solid var(--c4); outline:3px solid #000;
    animation:panelIn .18s steps(3);
  }
  .slides{max-height:38vh}
  .ctrl-body{max-height:38vh}
}

/* ---------- 降低動態偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-scan::after,.pin b,.pin.locked::after,.boot-ring,
  .dot-live,.slides-loading span,.pin-crew img,
  .pin-crew .pin-more,.pin-crew .pin-none{animation:none!important}
  .slides img{transition:opacity .15s steps(2)!important}
  .slides-bar span.run::after{transition:none!important}
  .panel{animation:none!important}
}