/* 深海探査艇 — ゲーム固有のスタイル */
#game-root{--accent:#5fd4ff}
#game-root .g3d-title__name{letter-spacing:.12em;text-shadow:0 0 40px rgba(60,200,255,.35),0 4px 30px rgba(0,0,0,.7)}
#game-root .g3d-title__name small{letter-spacing:.42em}
#game-root .g3d-loading{background:radial-gradient(90% 70% at 50% 40%,#0a2233,#010407)}

/* ---- タイトル画面の追加（難易度・図鑑・記録） ---- */
.ds-title-extra{display:grid;gap:12px;justify-items:center}
.ds-diff{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;padding:4px;border-radius:14px;background:rgba(8,20,30,.55);border:1px solid rgba(120,210,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ds-diff button{min-height:40px;padding:6px 16px;border-radius:10px;border:0;background:transparent;color:#e6f6ff;font:800 14px/1.2 var(--g3d-ui);cursor:pointer;letter-spacing:.06em}
.ds-diff button small{display:block;font-weight:600;font-size:10.5px;opacity:.7;letter-spacing:.02em;margin-top:2px}
.ds-diff button[aria-checked="true"]{background:var(--accent);color:#04121a}
.ds-diff button[aria-checked="true"] small{opacity:.8}
.ds-records{font-size:12.5px;opacity:.8;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.ds-dexbtn{min-height:40px;padding:6px 18px;font-size:14px}

/* ---- HUD ---- */
.ds-tasks{min-width:210px;max-width:min(46vw,300px);padding:10px 14px 11px;border-radius:14px;background:rgba(4,14,22,.52);border:1px solid rgba(110,210,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12.5px;line-height:1.5}
.ds-tasks h3{margin:0 0 5px;font-size:10.5px;letter-spacing:.2em;opacity:.72;font-weight:800}
.ds-tasks ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ds-tasks li{display:flex;align-items:center;gap:8px;font-weight:700}
.ds-tasks li i{flex:none;width:12px;height:12px;border-radius:3px;border:1.5px solid rgba(160,225,255,.7)}
.ds-tasks li b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--accent)}
.ds-tasks li.is-done{opacity:.55}
.ds-tasks li.is-done i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent)}
.ds-tasks li.is-now{color:#fff}
.ds-tasks li.is-now i{border-color:#ffd36a;box-shadow:0 0 0 2px rgba(255,211,106,.25)}
.ds-minisonar{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(206px + env(safe-area-inset-top));width:150px;height:150px;border-radius:50%;box-shadow:0 0 0 1px rgba(110,230,255,.3),0 8px 30px rgba(0,0,0,.5);background:#01090c}
#game-root.ds-cockpit.ds-land .ds-minisonar{display:none}
.ds-gauges{display:flex;gap:6px;flex-wrap:wrap}
.ds-gauge{display:flex;flex-direction:column;min-width:64px;padding:5px 11px 6px;border-radius:11px;background:rgba(4,14,22,.52);border:1px solid rgba(110,210,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ds-gauge span{font-size:10px;letter-spacing:.14em;opacity:.7;font-weight:800}
.ds-gauge b{font-size:18px;line-height:1.15;font-weight:900;font-variant-numeric:tabular-nums}
.ds-gauge.is-warn b{color:#ff6a52;animation:g3d-blink .8s steps(2) infinite}
#game-root.ds-cockpit.ds-desk .ds-gauges{display:none}

/* 撮影の照準 */
.ds-reticle{position:absolute;left:50%;top:50%;width:min(30vw,190px);height:min(22vw,140px);transform:translate(-50%,-50%);pointer-events:none;opacity:.55;transition:opacity .2s,width .25s,height .25s}
.ds-reticle::before,.ds-reticle::after,.ds-reticle i::before,.ds-reticle i::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(220,245,255,.9)}
.ds-reticle::before{left:0;top:0;border-right:0;border-bottom:0}
.ds-reticle::after{right:0;top:0;border-left:0;border-bottom:0}
.ds-reticle i::before{left:0;bottom:0;border-right:0;border-top:0}
.ds-reticle i::after{right:0;bottom:0;border-left:0;border-top:0}
.ds-reticle b{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(220,245,255,.9)}
.ds-reticle span{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.ds-reticle.is-target{opacity:1}
.ds-reticle.is-target::before,.ds-reticle.is-target::after,.ds-reticle.is-target i::before,.ds-reticle.is-target i::after{border-color:#7dffb0}
.ds-reticle.is-target span{opacity:1;color:#b6ffd3}
.ds-reticle.is-zoom{width:min(44vw,300px);height:min(32vw,220px);opacity:.9}

/* 警告 */
.ds-warn{position:absolute;left:50%;top:calc(112px + env(safe-area-inset-top));transform:translateX(-50%);padding:6px 16px;border-radius:8px;background:rgba(90,8,4,.55);border:1px solid rgba(255,90,70,.6);color:#ffd8d0;font-weight:900;font-size:13.5px;letter-spacing:.12em;white-space:nowrap;animation:ds-warn 1s ease-in-out infinite}
@keyframes ds-warn{50%{background:rgba(160,20,10,.7);box-shadow:0 0 24px rgba(255,60,40,.4)}}
.ds-warn.is-soft{background:rgba(70,50,4,.5);border-color:rgba(255,200,80,.55);color:#ffeec0;animation:none}

/* 採取の進行 */
.ds-progress{position:absolute;left:50%;top:62%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(4,14,22,.62);border:1px solid rgba(255,170,90,.4);font-weight:800;font-size:13.5px}
.ds-progress i{display:block;width:120px;height:6px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.ds-progress i::after{content:"";display:block;height:100%;width:var(--p,0%);background:#ffae5a;border-radius:9px}

/* 操作ヒント */
.ds-hint{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,760px);font-size:12px;font-weight:700;opacity:.85;text-shadow:0 1px 4px #000;transition:opacity .8s}
.ds-hint kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:4px;border-radius:5px;background:rgba(240,248,255,.9);color:#08131a;font:800 11px/1 var(--g3d-ui)}
#game-root.ds-cockpit.ds-desk .ds-hint{bottom:calc(25% + 74px)}
#game-root.ds-cockpit.ds-desk .g3d-subtitle{bottom:calc(25% + 12px)}
#game-root.ds-cockpit.ds-desk .ds-progress{top:56%}
.g3d[data-state]:not([data-state="playing"]) .ds-hint{opacity:0}

/* 撮影した写真（右下に一瞬出る） */
.ds-photo{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:min(42vw,250px);padding:7px 7px 9px;border-radius:10px;background:#eef3f5;color:#10181d;box-shadow:0 14px 40px rgba(0,0,0,.55);transform:rotate(-2deg);animation:ds-photo 3.6s ease both;pointer-events:none}
.ds-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;background:#000}
.ds-photo p{margin:6px 3px 0;font-size:12.5px;font-weight:900;line-height:1.35}
.ds-photo p small{display:block;font-weight:700;font-size:10.5px;opacity:.65}
@keyframes ds-photo{0%{opacity:0;transform:translateY(20px) rotate(4deg) scale(.9)}10%{opacity:1;transform:rotate(-2deg)}85%{opacity:1}100%{opacity:0;transform:translateY(10px) rotate(-2deg)}}
#game-root.ds-touch.ds-portrait .ds-photo{right:auto;left:calc(12px + env(safe-area-inset-left));bottom:auto;top:calc(50% + 66px);width:40vw}
#game-root.ds-touch.ds-land .ds-photo{bottom:auto;top:calc(54px + env(safe-area-inset-top));right:calc(196px + env(safe-area-inset-right));width:150px;padding:5px 5px 6px}
#game-root.ds-touch.ds-land .ds-photo p{font-size:10.5px}

/* ---- 図鑑 ---- */
.ds-dex{position:absolute;inset:0;z-index:35;display:grid;place-items:start center;padding:calc(64px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));overflow:auto;background:rgba(2,8,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:g3d-fade .3s ease both}
.ds-dex__panel{width:min(980px,100%);padding:20px 18px 22px;border-radius:20px;background:rgba(8,20,28,.8);border:1px solid rgba(110,210,255,.18)}
.ds-dex__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ds-dex__head h2{margin:0;font-size:20px;letter-spacing:.14em}
.ds-dex__head p{margin:0;font-size:12.5px;opacity:.75}
.ds-dex__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ds-card{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ds-card__img{position:relative;aspect-ratio:16/10;background:radial-gradient(80% 80% at 50% 50%,#0b2531,#02080b);display:grid;place-items:center;color:rgba(160,220,255,.35);font-size:34px;font-weight:900}
.ds-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-card__img em{position:absolute;left:8px;top:8px;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.08em;padding:2px 8px;border-radius:99px;background:rgba(40,200,255,.85);color:#031017}
.ds-card__img em.is-non{background:rgba(200,200,200,.7)}
.ds-card__body{padding:9px 12px 12px}
.ds-card__body h3{margin:0;font-size:15px;letter-spacing:.04em}
.ds-card__body p{margin:4px 0 0;font-size:12px;line-height:1.65;opacity:.82}
.ds-card__body small{display:block;margin-top:5px;font-size:11px;opacity:.6;font-weight:700}
.ds-card.is-unknown h3{opacity:.5}
.ds-stars{color:#ffd36a;letter-spacing:.1em;font-size:12px;margin-left:6px}
.ds-dex .g3d-actions{margin-top:18px}

/* 結果の潜航記録グラフ */
.ds-profile{display:block;width:100%;height:120px;margin:12px 0 0;border-radius:10px;background:rgba(0,0,0,.25)}
.ds-result-extra{display:flex;justify-content:center;margin-top:10px}

/* ---- タッチ操作の配置 ---- */
#game-root .g3d-tbuttons{display:grid;grid-template-columns:repeat(3,62px);grid-template-areas:"sonar light view" "up photo photo" "down photo photo";gap:10px;max-width:none;align-items:center;justify-items:center}
#game-root .g3d-tbtn{width:62px;height:62px}
#game-root .g3d-tbtn[data-action="sonar"]{grid-area:sonar}
#game-root .g3d-tbtn[data-action="light"]{grid-area:light}
#game-root .g3d-tbtn[data-action="view"]{grid-area:view;width:50px;height:50px}
#game-root .g3d-tbtn[data-action="up"]{grid-area:up}
#game-root .g3d-tbtn[data-action="down"]{grid-area:down}
#game-root .g3d-tbtn[data-action="photo"]{grid-area:photo;width:96px;height:96px;font-size:12px}
#game-root .g3d-tbtn[data-action="photo"] .g3d-tbtn__icon{font-size:30px}
#game-root .g3d-tbtn[data-action="photo"].is-active{border-color:#ffae5a;color:#ffd3a6;box-shadow:0 0 0 3px rgba(255,174,90,.4),0 0 26px rgba(255,150,60,.7)}
@media (max-height:480px) and (orientation:landscape){
  #game-root .g3d-tbuttons{grid-template-columns:repeat(3,54px);gap:8px}
  #game-root .g3d-tbtn{width:54px;height:54px}
  #game-root .g3d-tbtn[data-action="photo"]{width:84px;height:84px}
  .ds-tasks{font-size:11.5px;padding:7px 10px 8px;min-width:0}
  .ds-minisonar{width:110px;height:110px}
  .ds-warn{top:54px}
}
@media (max-width:640px){
  .ds-tasks{font-size:11.5px;padding:8px 10px 9px;min-width:0;max-width:52vw}
  .ds-tasks h3{display:none}
  .ds-minisonar{width:112px;height:112px}
  .ds-gauge{min-width:54px;padding:4px 8px 5px}.ds-gauge b{font-size:15px}
  .ds-dex__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ds-card__body p{display:none}
  .ds-diff button{padding:6px 11px;font-size:13px}
}

/* ---- タッチ端末: 字幕・ヒント・ミニソナーの置き場所 ---- */
#game-root.ds-touch .ds-hint{display:none}
#game-root.ds-touch .g3d-subtitle{font-size:13.5px;line-height:1.55;padding:6px 14px;max-width:min(88vw,560px)}
#game-root.ds-touch.ds-land .g3d-subtitle{top:calc(50px + env(safe-area-inset-top));bottom:auto;max-width:46vw;font-size:12.5px}
#game-root.ds-touch.ds-portrait .g3d-subtitle{bottom:calc(29% + env(safe-area-inset-bottom))}
#game-root.ds-touch.ds-portrait .g3d-hud__tl{max-width:48vw}
#game-root.ds-touch.ds-portrait .ds-minisonar{width:108px;height:108px;top:calc(300px + env(safe-area-inset-top))}
#game-root.ds-touch.ds-land .ds-minisonar{right:auto;left:calc(16px + env(safe-area-inset-left));top:calc(150px + env(safe-area-inset-top));width:92px;height:92px}
#game-root.ds-touch.ds-land .ds-warn{top:calc(112px + env(safe-area-inset-top))}
#game-root.ds-touch .g3d-prompt{top:auto;bottom:calc(36% + env(safe-area-inset-bottom))}
#game-root.ds-touch.ds-land .g3d-prompt{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
#game-root.ds-touch.ds-portrait .ds-gauges{gap:5px}
#game-root.ds-touch.ds-portrait .ds-gauge{min-width:0;padding:4px 8px 5px}
#game-root.ds-touch.ds-portrait .ds-gauge span{font-size:9.5px;letter-spacing:.08em}
#game-root.ds-touch.ds-portrait .ds-gauge b{font-size:14px}
#game-root.ds-touch.ds-portrait .ds-tasks{max-width:41vw;font-size:11px;padding:7px 9px 8px}
#game-root.ds-touch.ds-portrait .g3d-hud__tl{max-width:56vw}
#game-root.ds-touch.ds-portrait .g3d-objective{max-width:52vw;font-size:12.5px}

/* ---- 2026-10-06 チェックでの手直し ---- */
/* PC（操縦席）: 母船の無線が2行になると、上の操作ヒントの列が字幕の枠の上端に重なっていた → ヒントを少し上・字幕を少し下へ（間を字幕2行分あける） */
#game-root.ds-cockpit.ds-desk .ds-hint{bottom:calc(25% + 86px)}
#game-root.ds-cockpit.ds-desk .g3d-subtitle{bottom:calc(25% + 4px)}