/* ============================================================
   深淵のランタン — Abyssal Lantern
   構成 : index.html / style.css / js/*.js
   深海パレット : 群青の闇 × 生物発光シアン × ランタンの暖色
   ============================================================ */
:root{
  --abyss:#02060e;
  --glow:#5ad8ff;
  --glow-soft:#7fd8ff;
  --bio:#7fffd8;
  --lantern:#ffc86a;
  --text:#cfe4ec;
  --text-dim:#9abccc;
  --danger:#ff5a8a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#02060e;}
body{
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  color:var(--text);
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}
#gameCanvas{position:fixed;inset:0;display:block;width:100%;height:100%;}

/* 深海の周辺減光 */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center, transparent 48%, rgba(0,4,12,.42) 84%, rgba(0,2,8,.85) 100%);
}
/* 被弾警告のフラッシュ */
#bloodFlash{
  position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(ellipse at center, rgba(255,60,80,0) 30%, rgba(255,60,90,.4) 100%);
  transition:opacity .25s ease-out;
}
/* 低耐久の警報パルス */
#lowHpPulse{
  position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(255,60,90,.45) 100%);
}
#lowHpPulse.active{animation:heartbeat .9s ease-in-out infinite;}
@keyframes heartbeat{0%,100%{opacity:.12}40%{opacity:.6}55%{opacity:.25}70%{opacity:.5}}
/* 生物発光ブルーム(未使用イベント用の薄い青閃光) */
#stormFlash{
  position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;
  background:linear-gradient(180deg,rgba(120,220,255,.5),rgba(60,140,200,.12));
  transition:opacity .5s ease-out;
}
/* シネマティックグレーディング : 上から差す冷光と深部の温度 */
#colorGrade{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(170deg, rgba(80,200,255,.4) 0%, rgba(5,10,30,0) 40%, rgba(20,40,120,.35) 100%);
  mix-blend-mode:overlay;
  animation:gradeBreath 10s ease-in-out infinite;
}
@keyframes gradeBreath{0%,100%{opacity:.5}50%{opacity:.8}}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;display:none;}
#xpBarWrap{
  position:absolute;top:0;left:0;right:0;height:18px;
  background:linear-gradient(#06121e,#030a14);
  border-bottom:1px solid #14405a;
}
#xpBarFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#0e5a7a,#40c0e8 60%,#7fffd8);
  box-shadow:0 0 12px #40c0e899;
  transition:width .15s ease-out;
}
/* 酸素 / 生命維持装置 バー : XP バーの直下に表示 */
#oxygenBarWrap{
  position:absolute;top:18px;left:0;right:0;height:4px;
  background:#060f1a;
}
#oxygenBarFill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#0a5a3a,#23d87a 60%,#7fffb8);
  box-shadow:0 0 8px #23d87a88;
  transition:width .25s ease-out, background .3s;
}
#levelBadge{
  position:absolute;top:1px;right:8px;font-size:13px;color:#aae4ff;
  text-shadow:0 0 6px #40c0e8;letter-spacing:.1em;
}
#topInfo{
  position:absolute;top:24px;left:0;right:0;
  display:flex;justify-content:center;align-items:flex-start;gap:28px;
}
#gameTimer{
  font-size:34px;letter-spacing:.12em;color:var(--text);
  font-family:'Courier New',monospace;font-weight:700;
  text-shadow:0 0 16px rgba(90,216,255,.8),0 2px 4px #000;
}
#killCounter,#bestLabel{
  font-size:15px;margin-top:10px;color:var(--text-dim);text-shadow:0 1px 3px #000;
  min-width:90px;
}
#killCounter{text-align:left;}
#bestLabel{text-align:right;}
#inventoryShelf{
  position:absolute;top:26px;left:10px;display:flex;flex-direction:column;gap:4px;
}
.shelfRow{display:flex;gap:4px;}
.invSlot{
  width:34px;height:34px;border:1px solid #1a4a62;border-radius:4px;
  background:rgba(3,12,22,.78);display:flex;align-items:center;justify-content:center;
  font-size:19px;position:relative;box-shadow:inset 0 0 8px #000;
}
.invSlot .lv{
  position:absolute;bottom:-2px;right:0;font-size:12px;color:var(--lantern);
  text-shadow:0 1px 2px #000;font-family:monospace;
}
#bossBarWrap{
  position:absolute;bottom:64px;left:50%;transform:translateX(-50%);
  width:min(520px,80vw);height:14px;border:1px solid #6b2040;display:none;
  background:#10040c;box-shadow:0 0 18px #ff5a8a55;
}
#bossBarFill{height:100%;width:100%;background:linear-gradient(90deg,#7a1638,#ff5a8a);}
#bossName{
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  font-size:15px;letter-spacing:.3em;color:#ffb0c8;text-shadow:0 0 10px #ff5a8a;display:none;
  white-space:nowrap;
}
#bannerText{
  position:absolute;top:30%;left:0;right:0;text-align:center;
  font-size:28px;letter-spacing:.3em;color:var(--glow);opacity:0;
  text-shadow:0 0 24px rgba(90,216,255,.9),0 2px 6px #000;
  transition:opacity .4s;pointer-events:none;
}

/* ============ 連鎖カウンター ============ */
#comboWrap{
  position:absolute;top:70px;right:16px;text-align:right;opacity:0;
  transition:opacity .3s;pointer-events:none;
}
#comboNum{
  font-size:46px;font-weight:700;color:#cfe8f0;
  text-shadow:0 0 16px rgba(160,230,250,.6),0 2px 4px #000;
  font-family:'Courier New',monospace;
}
.comboLabel{
  font-size:13px;letter-spacing:.3em;color:var(--text-dim);margin-left:6px;
  text-shadow:0 1px 3px #000;
}
#comboWrap[data-tier="1"] #comboNum{color:#7fffd8;text-shadow:0 0 18px rgba(127,255,216,.8),0 2px 4px #000;}
#comboWrap[data-tier="2"] #comboNum{color:#ffd24a;text-shadow:0 0 22px rgba(255,210,74,.9),0 2px 4px #000;}
#comboWrap[data-tier="3"] #comboNum{color:#ff5a8a;text-shadow:0 0 28px rgba(255,90,138,1),0 2px 4px #000;}
#comboWrap.pop #comboNum{display:inline-block;animation:comboPop .18s ease-out;}
@keyframes comboPop{0%{transform:scale(1.45)}100%{transform:scale(1)}}
#comboBarWrap{width:110px;height:3px;background:rgba(0,8,14,.7);margin-left:auto;margin-top:2px;}
#comboBar{height:100%;width:100%;background:linear-gradient(90deg,#2a7a9a,#7fffd8);}

/* ============ スキルチップ ============ */
#skillBar{position:absolute;bottom:18px;left:14px;display:flex;gap:14px;}
.skillChip{
  width:48px;height:48px;border:1px solid #1a4a62;border-radius:6px;
  background:rgba(3,12,22,.78);position:relative;overflow:visible;
  display:flex;align-items:center;justify-content:center;font-size:23px;
  box-shadow:inset 0 0 8px #000;
}
.skillChip .cdFill{
  position:absolute;left:0;bottom:0;width:100%;height:0%;border-radius:5px;
  background:rgba(60,180,230,.28);pointer-events:none;
}
#frenzyChip .cdFill{background:rgba(127,255,216,.3);}
.skillChip label{
  position:absolute;bottom:-15px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--text-dim);letter-spacing:.1em;font-family:monospace;
}
.skillChip.ready{border-color:#5ad8ff;box-shadow:0 0 12px rgba(90,216,255,.5),inset 0 0 8px #000;}
#frenzyChip.ready{border-color:#7fffd8;box-shadow:0 0 16px rgba(127,255,216,.7),inset 0 0 8px #000;animation:chipPulse 1.2s infinite;}
@keyframes chipPulse{0%,100%{box-shadow:0 0 10px rgba(127,255,216,.5),inset 0 0 8px #000}50%{box-shadow:0 0 22px rgba(127,255,216,.9),inset 0 0 8px #000}}

/* タッチ用スキルボタン */
.touchBtn{
  position:fixed;width:66px;height:66px;border-radius:50%;z-index:12;
  border:2px solid rgba(160,220,240,.35);background:rgba(4,16,28,.6);
  display:none;align-items:center;justify-content:center;font-size:28px;
  pointer-events:auto;user-select:none;
}
.touchBtn:active{background:rgba(30,90,130,.6);}
#dashTouch{right:26px;bottom:40px;}
#frenzyTouch{right:108px;bottom:40px;}

/* ============ 仮想ジョイスティック ============ */
#joystickBase{
  position:fixed;width:110px;height:110px;border-radius:50%;
  border:2px solid rgba(160,220,240,.25);background:rgba(6,18,30,.4);
  display:none;z-index:12;pointer-events:none;
}
#joystickKnob{
  position:absolute;width:48px;height:48px;border-radius:50%;left:31px;top:31px;
  background:radial-gradient(circle at 35% 30%, #4a7a96, #11314a);
  border:1px solid rgba(160,220,240,.4);box-shadow:0 0 14px #000;
}

/* ============ オーバーレイ画面 ============ */
.screen{
  position:fixed;inset:0;z-index:20;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:rgba(1,5,12,.84);backdrop-filter:blur(3px);
  text-align:center;padding:20px;
}
.screen.visible{display:flex;animation:screenFade .45s ease-out;}
@keyframes screenFade{from{opacity:0}to{opacity:1}}
.ornament{font-size:16px;color:#5a8098;letter-spacing:.6em;margin:10px 0;}

/* ============ タイトル ============ */
#titleScreen h1{
  font-size:clamp(38px,9vw,76px);font-weight:700;letter-spacing:.14em;
  background:linear-gradient(180deg,#d8f4ff 15%,#5ad8ff 45%,#1a6a9a 75%,#0a2a4a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(90,216,255,.55)) drop-shadow(0 3px 4px #000);
  animation:titlePulse 4s ease-in-out infinite;
}
@keyframes titlePulse{
  0%,100%{filter:drop-shadow(0 0 16px rgba(90,216,255,.4)) drop-shadow(0 3px 4px #000);}
  50%{filter:drop-shadow(0 0 32px rgba(90,216,255,.85)) drop-shadow(0 3px 4px #000);}
}
#titleScreen .subtitle{
  font-size:clamp(12px,2.4vw,17px);letter-spacing:.5em;color:var(--text-dim);margin-top:6px;
}
.menuButton{
  pointer-events:auto;cursor:pointer;margin-top:14px;
  font-family:inherit;font-size:20px;letter-spacing:.3em;color:var(--text);
  background:linear-gradient(180deg,#0a2438,#051422);
  border:1px solid #2a6a8a;padding:14px 54px;border-radius:3px;
  box-shadow:0 0 18px rgba(90,216,255,.25),inset 0 0 12px #000;
  transition:all .2s;
}
.menuButton:hover{
  border-color:#7fd8ff;color:#fff;box-shadow:0 0 30px rgba(90,216,255,.6),inset 0 0 12px #023;
  transform:translateY(-2px);
}
.menuButton:active{transform:translateY(1px);}
#controlsHint{margin-top:30px;font-size:13px;line-height:2;color:#8aaebe;letter-spacing:.1em;}
#titleBest{margin-top:14px;font-size:14px;color:var(--lantern);letter-spacing:.2em;text-shadow:0 0 8px #ffc86a55;}

/* セーブデータ削除ボタン */
#deleteSaveBtn {
  background: rgba(160,40,30,0.12);
  border: 1px solid rgba(200,60,50,0.45);
  color: #d07060;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 8px 28px;
  margin-top: 20px;
  border-radius: 4px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
#deleteSaveBtn:hover {
  background: rgba(200,50,40,0.22);
  border-color: rgba(255,80,60,0.70);
  color: #ff9080;
}

/* 確認モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,4,12,0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: #050e1c;
  border: 1px solid rgba(220,80,60,0.40);
  border-radius: 14px;
  padding: 32px 36px;
  text-align: center;
  max-width: 360px;
  width: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: screenFade 0.2s ease-out;
}
.modal-icon { font-size: 44px; line-height: 1; }
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f08070;
  letter-spacing: 0.06em;
}
.modal-desc {
  font-size: 12px;
  color: #7aa4b4;
  line-height: 1.9;
}
.modal-actions { display: flex; gap: 12px; margin-top: 6px; }

/* 削除確定ボタン : 赤系 */
#deleteSaveConfirmBtn {
  background: rgba(200,50,40,0.14);
  border-color: rgba(200,50,40,0.50);
  color: #ff7060;
}
#deleteSaveConfirmBtn:hover {
  background: rgba(200,50,40,0.28);
  border-color: rgba(255,80,60,0.70);
  box-shadow: 0 0 18px rgba(220,60,40,0.35), inset 0 0 12px #200;
  color: #ffaa99;
}

/* ============ 母船工廠 ============ */
#soulCount{
  margin-top:18px;font-size:17px;letter-spacing:.25em;color:#aae4ff;
  text-shadow:0 0 10px rgba(120,200,255,.6);
}
#soulShop{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:760px;margin-top:10px;
}
.shopItem{
  pointer-events:auto;width:226px;border:1px solid #14405a;border-radius:5px;
  background:rgba(3,12,22,.86);padding:10px 10px 8px;text-align:center;
  transition:border-color .2s;
}
.shopItem:hover{border-color:#5ad8ff;}
.shopName{font-size:14px;color:#d8eef6;letter-spacing:.08em;}
.shopPips{font-size:12px;color:#40c0e8;letter-spacing:2px;margin:4px 0;}
.shopDesc{font-size:13px;color:#8aaebe;line-height:1.6;min-height:30px;}
.buyBtn{
  pointer-events:auto;cursor:pointer;margin-top:6px;font-family:inherit;
  font-size:12px;letter-spacing:.12em;color:#aae4ff;
  background:#06141e;border:1px solid #1a5a7a;border-radius:3px;padding:5px 18px;
  transition:all .2s;
}
.buyBtn:hover:not(:disabled){border-color:#7fd8ff;box-shadow:0 0 10px rgba(120,200,255,.4);}
.buyBtn:disabled{opacity:.4;cursor:default;}

/* ============ 装備換装 ============ */
#levelupScreen h2{
  font-size:clamp(22px,5vw,34px);letter-spacing:.4em;color:#aae4ff;
  text-shadow:0 0 18px #40c0e8;margin-bottom:26px;
}
#upgradeCards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:980px;}
.upgradeCard{
  pointer-events:auto;cursor:pointer;width:min(270px,86vw);
  background:linear-gradient(180deg,#081c2c 0%,#04101c 100%);
  border:1px solid #1a4a62;border-radius:6px;padding:20px 16px 16px;
  text-align:center;transition:all .18s ease-out;position:relative;
  animation:cardRise .4s ease-out backwards;
}
.upgradeCard:nth-child(2){animation-delay:.08s}
.upgradeCard:nth-child(3){animation-delay:.16s}
@keyframes cardRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.upgradeCard:hover,.upgradeCard.focused{
  border-color:#5ad8ff;transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 34px rgba(90,216,255,.45),0 14px 28px rgba(0,0,0,.6);
}
.upgradeCard .cardIcon{font-size:44px;display:block;filter:drop-shadow(0 0 10px rgba(127,255,216,.6));}
.upgradeCard .cardName{font-size:18px;letter-spacing:.1em;margin-top:10px;color:#d8eef6;}
.upgradeCard .cardTag{
  display:inline-block;margin-top:6px;font-size:13px;letter-spacing:.2em;
  padding:2px 10px;border:1px solid #5a8098;border-radius:10px;color:#90bac8;
}
.upgradeCard .cardTag.newTag{border-color:var(--lantern);color:var(--lantern);}
.upgradeCard .cardDesc{font-size:13px;line-height:1.8;margin-top:10px;color:#9abcc8;min-height:62px;}
.upgradeCard .cardKey{
  position:absolute;top:6px;left:8px;font-size:13px;color:#5a8098;font-family:monospace;
}
.lvPips{margin-top:8px;letter-spacing:3px;font-size:13px;color:#40c0e8;}

/* ============ 停泊 / リザルト ============ */
#pauseScreen h2,#resultScreen h2{
  font-size:clamp(26px,6vw,44px);letter-spacing:.5em;margin-bottom:18px;
}
#pauseScreen h2{color:var(--text);text-shadow:0 0 16px rgba(160,220,240,.4);}
#resultScreen h2.gameover{color:var(--danger);text-shadow:0 0 26px rgba(255,90,138,.9);}
#resultScreen h2.victory{color:var(--lantern);text-shadow:0 0 26px rgba(255,200,106,.9);}
.statsTable{margin:8px auto 18px;font-size:16px;line-height:2.2;letter-spacing:.1em;color:#a8c8d4;}
.statsTable b{color:#d8eef6;font-weight:600;margin-left:18px;}
#newRecord{display:none;color:var(--lantern);font-size:15px;letter-spacing:.3em;margin-bottom:10px;animation:titlePulse 1.6s infinite;}

/* 音量ボタン */
#muteButton{
  position:fixed;top:26px;right:10px;z-index:30;pointer-events:auto;cursor:pointer;
  width:38px;height:38px;border-radius:4px;border:1px solid #14405a;
  background:rgba(3,12,22,.72);color:var(--text-dim);font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
#muteButton:hover{color:#fff;border-color:#5ad8ff;}

/* ============ 深度サブ表示(耐圧限界/経過時間) ============ */
#centerInfo{text-align:center;}
#subInfo{
  font-size:12px;letter-spacing:.12em;color:var(--text-dim);
  margin-top:2px;text-shadow:0 1px 3px #000;
}
#subInfo.nearLimit{color:#ffd24a;}
#subInfo.crushWarn{color:#ff5a8a;font-weight:700;animation:crushBlink .5s steps(2) infinite;}
@keyframes crushBlink{50%{opacity:.35}}

/* ============ 母船工廠 ============ */
#dockScreen h2{
  font-size:clamp(24px,5vw,36px);letter-spacing:.5em;color:#aae4ff;
  text-shadow:0 0 18px #40c0e8;margin-bottom:6px;
}

/* ============ 深海遺物サルベージ ============ */
#salvageScreen{
  background:radial-gradient(ellipse at center, rgba(58,40,8,.9) 0%, rgba(2,6,14,.96) 75%);
}
#salvageScreen h2{
  font-size:clamp(22px,5vw,34px);letter-spacing:.35em;color:var(--lantern);
  text-shadow:0 0 22px rgba(255,200,106,.8);margin-bottom:18px;
}
#salvageChest{
  font-size:94px;line-height:1.2;
  filter:drop-shadow(0 0 34px rgba(255,210,74,.85));
}
#salvageChest.shaking{animation:chestShake .12s linear infinite;}
@keyframes chestShake{
  0%{transform:rotate(-7deg) scale(1)}
  50%{transform:rotate(7deg) scale(1.08)}
  100%{transform:rotate(-7deg) scale(1)}
}
#salvageBonus{
  margin:8px 0 18px;font-size:16px;letter-spacing:.15em;color:var(--lantern);
  opacity:0;transition:opacity .4s;text-shadow:0 0 12px rgba(255,200,106,.6);
}
#salvageCards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:980px;}
#salvageCards .upgradeCard{border-color:#6a5224;}
#salvageCards .upgradeCard:hover{
  border-color:var(--lantern);
  box-shadow:0 0 34px rgba(255,200,106,.45),0 14px 28px rgba(0,0,0,.6);
}

/* ============ 小型画面対応 ============ */
/* 内容が収まらない画面はスクロール可能にし、収まる時は中央寄せを保つ
   (first/last-childのmargin:autoで「あふれてもクリップしない中央寄せ」を実現) */
.screen{overflow-y:auto;justify-content:flex-start;}
.screen > :first-child{margin-top:auto;}
.screen > :last-child{margin-bottom:auto;}

@media (max-height: 560px){
  #titleScreen h1{font-size:clamp(24px,8vmin,46px);}
  #titleScreen .subtitle{font-size:12px;letter-spacing:.35em;}
  .ornament{margin:4px 0;font-size:12px;}
  .menuButton{margin-top:8px;font-size:15px;padding:9px 34px;}
  #controlsHint{margin-top:10px;font-size:12px;line-height:1.8;}
  #titleBest{margin-top:8px;font-size:12px;}
  #gameTimer{font-size:24px;}
  #subInfo{font-size:12px;}
  #comboNum{font-size:32px;}
  #salvageChest{font-size:60px;}
  #levelupScreen h2,#salvageScreen h2,#dockScreen h2,#pauseScreen h2,#resultScreen h2{margin-bottom:10px;font-size:clamp(18px,5vmin,26px);}
  .upgradeCard{padding:10px 12px;width:min(225px,80vw);}
  .upgradeCard .cardIcon{font-size:30px;}
  .upgradeCard .cardDesc{min-height:0;font-size:13px;line-height:1.5;}
  .statsTable{font-size:13px;line-height:1.9;}
  .touchBtn{width:56px;height:56px;font-size:24px;}
  #soulShop{gap:6px;}
  .shopItem{width:190px;padding:7px;}
}

/* ============ スキルツリー(放射状) ============ */
#treeResources{
  margin-top:6px;font-size:16px;letter-spacing:.15em;color:#aae4ff;
  text-shadow:0 0 10px rgba(120,200,255,.5);
}
#treeResources b{color:#fff;}
.treeLimitNow{font-size:12px;color:#ffd24a;margin-top:4px;letter-spacing:.1em;}
#skillTree{margin-top:6px;}
.treeSvg{
  width:min(580px,92vw,72vh);height:auto;display:block;margin:0 auto;
  pointer-events:auto;
}
.treeSvg text{user-select:none;}
/* 購入可能ノードは金色に脈動して「次の一手」を示す */
.tnPulse circle{animation:nodeGlow 1.4s ease-in-out infinite;}
@keyframes nodeGlow{0%,100%{stroke-opacity:1}50%{stroke-opacity:.4}}

@media (max-height: 560px){
  #treeResources{font-size:13px;}
  .treeSvg{width:min(440px,90vw,68vh);}
}

/* ============ 深度ゲージ(画面右の縦柱) ============ */
#depthGauge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  height:56vh;width:32px;pointer-events:none;
}
#dgTrack{
  position:absolute;left:13px;top:0;bottom:0;width:6px;border-radius:3px;
  background:linear-gradient(180deg,#7fd8ff 0%,#1a6a9a 8%,#0a2a4a 30%,#04101e 60%,#020208 100%);
  box-shadow:0 0 8px rgba(90,216,255,.3);
}
#dgPlayer{
  position:absolute;left:3px;width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:8px solid #7fffd8;
  filter:drop-shadow(0 0 4px #7fffd8);
}
#dgLimit{
  position:absolute;left:10px;width:12px;height:2px;margin-top:-1px;
  background:#ffd24a;box-shadow:0 0 6px #ffd24a;
}
#dgBoss{
  position:absolute;left:23px;width:7px;height:7px;border-radius:50%;margin-top:-3px;
  background:#ff5a8a;box-shadow:0 0 6px #ff5a8a;
}
.dgLabel{
  position:absolute;left:0;width:32px;text-align:center;
  font-size:12px;color:#8aaebe;letter-spacing:.05em;
}
#dgTop{top:-14px;}
#dgBottom{bottom:-14px;}

/* スキルツリーの凡例 */
.treeLegend{font-size:12px;color:#8aaebe;margin-top:5px;letter-spacing:.06em;}
/* 素材在庫表示 */
.treeMaterials{font-size:13px;color:#a0c8e0;margin:5px 0 3px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.treeMaterials b{color:#e8d890;}

/* ============================================================
   スマホ専用オーバーライド (hover:none = タッチデバイス確定)
   ============================================================ */
@media (hover:none) and (pointer:coarse) {

  /* Fix: PCキーボードヒント(SPACE / E)を非表示 */
  .skillChip label { display:none; }

  /* Fix: 装備換装カードを1行3枚に収める(スクロール不要化)
     (100vw - 40px画面padding - 16px gap×2) / 3 で各カード幅を算出 */
  #upgradeCards,
  #salvageCards { gap:8px; }

  .upgradeCard {
    width:calc((100vw - 56px) / 3);
    min-width:90px;
    padding:12px 6px 10px;
  }
  .upgradeCard .cardIcon { font-size:26px; }
  .upgradeCard .cardName { font-size:12px;margin-top:6px;letter-spacing:0; }
  .upgradeCard .cardTag  { font-size:12px;padding:1px 5px;margin-top:4px; }
  .upgradeCard .cardDesc { font-size:12px;line-height:1.4;min-height:0;margin-top:6px; }
  /* カード左上の [1][2][3] キー番号はPC専用なので隠す */
  .upgradeCard .cardKey  { display:none; }
  .lvPips { font-size:12px;margin-top:4px;letter-spacing:2px; }

  /* Fix: スキルインジケーターをボタン風から状態表示風へ
     タッチボタン(右下)の真上に移動し、ボーダーを底辺だけの細い
     ラインにすることでタップ対象と誤認しにくくする */
  #skillBar {
    /* 右下タッチボタン群(bottom:40px + height:66px + gap:16px = 122px)の上 */
    left:auto;
    right:20px;
    bottom:122px;
    gap:8px;
  }
  .skillChip {
    width:36px;height:36px;
    font-size:18px;
    background:rgba(2,6,14,0.2);
    border:none;
    /* 底辺の細いラインだけでクールダウン状態を暗示 */
    border-bottom:2px solid rgba(90,160,210,0.35);
    border-radius:0;
    box-shadow:none;
  }
  .skillChip .cdFill { border-radius:0; }
}
/* ============================================================
   艦種選択画面 (#subSelectScreen)  ── グリッド+詳細パネル方式
   ============================================================ */
#subSelectScreen {
  gap: 12px;
  padding: 20px 16px 16px;
  justify-content: flex-start;
  overflow-y: auto;
}

#subSelectTitle {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #5ad8ff;
  text-align: center;
  flex-shrink: 0;
}

/* 左：グリッド  右：詳細パネル */
#subSelectLayout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  flex: 1;
  min-height: 0;
}

/* ── グリッドカード ── */
#subCardGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}

.sub-grid-card {
  background: rgba(4,14,26,0.85);
  border: 1.5px solid rgba(90,160,210,0.20);
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.sub-grid-card:hover {
  background: rgba(0,140,200,0.10);
  border-color: rgba(90,160,210,0.45);
}
.sub-grid-card.selected {
  border-color: #5ad8ff;
  background: rgba(0,160,220,0.12);
  box-shadow: 0 0 0 1px rgba(90,216,255,0.20);
}
.sub-grid-card.locked {
  opacity: 0.50;
  cursor: default;
}
.sub-grid-card.locked:hover {
  background: rgba(4,14,26,0.85);
  border-color: rgba(90,160,210,0.20);
}

.sub-grid-icon { font-size: 26px; line-height: 1.2; }
.sub-grid-name { font-size:12px; color: #7ac0d8; margin-top: 3px; letter-spacing: 0.06em; }
.sub-grid-lock { font-size:12px; color: #c07840; margin-top: 2px; }

/* ── 詳細パネル ── */
#subDetailPanel {
  background: rgba(4,14,26,0.75);
  border: 1px solid rgba(90,160,210,0.22);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.sub-det-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sub-det-icon { font-size: 38px; line-height: 1; flex-shrink: 0; }
.sub-det-name {
  font-size: 16px;
  font-weight: 700;
  color: #b0d8f0;
  letter-spacing: 0.12em;
}
.sub-det-desc {
  font-size:13px;
  color: #7ab0c8;
  line-height: 1.65;
  margin-top: 3px;
}

/* 性能バー */
.sub-stat-area { display: flex; flex-direction: column; gap: 6px; }
.sub-stat-row {
  display: grid;
  grid-template-columns: 34px 1fr 42px;
  align-items: center;
  gap: 6px;
}
.sub-stat-label { font-size:12px; color: #8abccc; letter-spacing: 0.06em; }
.sub-bar-track {
  height: 5px;
  background: rgba(90,160,210,0.12);
  border-radius: 3px;
  overflow: hidden;
}
.sub-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sub-bar-pos { background: #7fd8a0; }
.sub-bar-neg { background: #ff7060; }
.sub-bar-neu { background: #5ad8ff; }
.sub-stat-val { font-size:12px; font-family: 'Courier New', monospace; text-align: right; }
.sub-val-pos { color: #7fd8a0; }
.sub-val-neg { color: #ff7060; }
.sub-val-neu { color: #5ad8ff; }

/* バッジ */
.sub-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.sub-badge {
  font-size:12px;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.sub-badge-pos {
  background: rgba(0,200,140,0.13);
  border: 1px solid rgba(0,200,140,0.30);
  color: #70e8b8;
}
.sub-badge-neg {
  background: rgba(255,100,80,0.10);
  border: 1px solid rgba(255,100,80,0.30);
  color: #ff8870;
}
.sub-badge-neu {
  background: rgba(90,160,210,0.10);
  border: 1px solid rgba(90,160,210,0.30);
  color: #7ac0d8;
}

/* 解放条件バナー */
.sub-unlock-banner {
  font-size:13px;
  color: #c07840;
  padding: 6px 10px;
  background: rgba(192,120,64,0.08);
  border: 1px solid rgba(192,120,64,0.28);
  border-radius: 6px;
  line-height: 1.5;
}
.sub-unlock-progress {
  font-size:12px;
  color: #a06030;
  margin-top: 2px;
}

/* 出航ボタン */
#subConfirmBtn {
  margin-top: auto;
}
#subConfirmBtn:disabled {
  pointer-events: none;
  opacity: 0.35;
}

/* モバイル : 縦積みレイアウト */
@media (max-width: 520px) {
  #subSelectLayout {
    grid-template-columns: 1fr;
  }
  #subCardGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   スキルツリー パンキャンバス (ブラウザスクロール廃止・ドラッグ操作)
   ============================================================ */

/* .screen 共通の overflow:auto / 余白中央寄せを #dockScreen でリセット */
#dockScreen {
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
  align-items: stretch;
}
#dockScreen > :first-child { margin-top: 0; }
#dockScreen > :last-child  { margin-bottom: 0; }

/* 固定ヘッダ : リソース + 戻るボタン */
#treeTopBar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 8px;
  background: rgba(2,8,18,0.97);
  border-bottom: 1px solid rgba(90,160,210,0.22);
  flex-wrap: wrap;
  z-index: 2;
}
#treeTopBar #treeResources {
  flex: 1;
  text-align: left;
  margin-top: 0;
  font-size: 14px;
  line-height: 1.7;
}
#treeTopBar .menuButton {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0;
}

/* パン領域 : ブラウザのタッチ操作を奪い、クリップする */
#treeViewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#treeViewport.grabbing { cursor: grabbing; }

/* パンサーフェス : transform translate で動く */
#skillTree {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  will-change: transform;
}

/* SVG は固定ピクセルサイズ(viewBox によるスケーリング不使用) */
#dockScreen .treeSvg {
  width: auto !important;
  height: auto !important;
}

/* ドラッグ操作ヒント */
#treePanHint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size:13px;
  color: rgba(90,160,210,0.72);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
/* ================================================================
   スプライトアイコン (chip-icon)
   index.html の skillChip・touchBtn・modal で絵文字の代わりに使用。
   icon_ui.png のセル割り当て:
     0=魚, 1=ダッシュ, 2=フレンジー, 3=警告, 4=ロック, 5=音符, 6=✓, 7=✗
   ================================================================ */
.chip-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('assets/sprites/icon_ui.png');
  background-size: auto 24px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  vertical-align: middle;
}
.chip-dash    { background-position: -24px 0; }   /* cell 1 */
.chip-frenzy  { background-position: -48px 0; }   /* cell 2 */
.chip-warning { background-position: -72px 0; width: 28px; height: 28px; background-size: auto 28px; }  /* cell 3 */
.chip-lock    { background-position: -96px 0; }   /* cell 4 */

/* タッチボタン内アイコンは大きめに */
.touchBtn .chip-icon {
  width: 36px;
  height: 36px;
  background-size: auto 36px;
}
.touchBtn .chip-dash   { background-position: -36px 0; }
.touchBtn .chip-frenzy { background-position: -72px 0; }

/* モーダルアイコン */
.modal-icon .chip-warning {
  width: 44px;
  height: 44px;
  background-size: auto 44px;
  background-position: -132px 0;
}