:root {
  --sea: #061824; --deep: #030912; --brass: #A77A42; --brass-l: #d9b070; --inst: #10191B;
  --sonar: #76E6AD; --glow: #5CDDE7; --amber: #F2B84B; --red: #E56755; --fg: #dde8e8; --dim: #8aa3a6;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 0%, #0b2a3d 0%, var(--sea) 45%, var(--deep) 100%) fixed;
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.4;
}
body.dev { background: radial-gradient(ellipse at 50% 0%, #7a4620 0%, #2f1a0c 55%, #140a04 100%) fixed; }
.game { max-width: 980px; margin: 0 auto; padding: 8px 10px 4px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
h1 { margin: 0; font-size: 1.05rem; letter-spacing: .12em; color: var(--brass-l); font-weight: 700; }
.routes { display: flex; gap: 6px; }
.routes button { font: inherit; font-size: .8rem; padding: 4px 10px; min-height: 32px; border-radius: 4px; border: 1px solid var(--brass); background: var(--inst); color: var(--fg); cursor: pointer; touch-action: manipulation; }
.routes button[aria-pressed="true"] { background: var(--brass); color: #1b1206; font-weight: 700; }
.routes button[aria-disabled="true"] { opacity: .5; cursor: default; }
.route-info { flex: 1 0 100%; margin: 0; font-size: .74rem; line-height: 1.45; color: var(--dim); } .route-info b { color: var(--brass-l); }
.stim[hidden] { display: none; }
.alerts { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.alerts li { font: 600 .68rem ui-monospace, Menlo, Consolas, monospace; background: var(--inst); border: 1px solid #2b3d40; padding: 1px 6px; border-radius: 3px; color: var(--dim); text-align: center; line-height: 1.25; }
.alerts li.on { border-color: var(--amber); color: var(--fg); }
.alerts li.warn b { color: var(--amber); }

.play { display: grid; gap: 8px; grid-template-columns: 196px minmax(0, 1fr) 210px; grid-template-areas: "sonar win read" "log win read" "console console console"; }
.win-area { grid-area: win; min-width: 0; }
.sonar-box { grid-area: sonar; } .read { grid-area: read; } .logbox { grid-area: log; } .console { grid-area: console; }

.panel { background: var(--inst); border: 2px solid var(--brass); border-radius: 6px; padding: 8px; box-shadow: inset 0 0 18px #000a, 0 2px 0 #000; position: relative; min-width: 0; }
.lbl { display: block; font-size: .68rem; letter-spacing: .2em; color: var(--brass-l); margin-bottom: 4px; }
.sonar-box canvas { display: block; width: 100%; max-width: 170px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 14px #76e6ad33; }
.sonar-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(118,230,173,.04) 3px 4px); border-radius: 4px; }

.porthole { position: relative; padding: 14px; border-radius: 52px; background: linear-gradient(145deg, #d6a860, #6b4a22 55%, #c0904e); box-shadow: 0 0 0 3px #2c1e0b, inset 0 0 0 3px rgba(255,225,160,.5), 0 12px 40px #000c; }
.glass { position: relative; border-radius: 38px; overflow: hidden; box-shadow: 0 0 0 5px #3a2810, 0 0 0 7px #b88a4a, inset 0 0 36px #000c; background: #04101a; }
.glass canvas { display: block; width: 100%; height: auto; aspect-ratio: 15 / 11; }
.gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.1) 0 14%, transparent 14.5% 100%), radial-gradient(ellipse at 20% 8%, rgba(255,255,255,.12), transparent 40%); }
.hud { position: absolute; left: 22px; top: 16px; font: 700 .85rem ui-monospace, Menlo, Consolas, monospace; color: var(--amber); text-shadow: 0 0 6px #000; letter-spacing: .1em; }
.hud b { font-size: 1.2rem; }
.shutter { position: absolute; inset: 10%; pointer-events: none; opacity: 0; border: 3px solid #fff; clip-path: polygon(0 0, 22% 0, 22% 3px, 3px 3px, 3px 22%, 0 22%, 0 0, 78% 0, 100% 0, 100% 22%, calc(100% - 3px) 22%, calc(100% - 3px) 3px, 78% 3px, 78% 0, 100% 78%, 100% 100%, 78% 100%, 78% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 78%, 0 78%, 0 100%, 22% 100%, 22% calc(100% - 3px), 3px calc(100% - 3px), 3px 78%); }
.shutter.fire { animation: shut .5s ease-out; }
@keyframes shut { 0% { opacity: 0; transform: scale(1.12); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(.98); } }
.bolt { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2d9a4, #6b4a22 70%); box-shadow: 0 1px 2px #000; z-index: 2; }
.b1 { left: 6px; top: 6px; } .b2 { right: 6px; top: 6px; } .b3 { left: 6px; bottom: 6px; } .b4 { right: 6px; bottom: 6px; }
.b5 { left: 50%; top: 2px; } .b6 { left: 50%; bottom: 2px; } .b7 { left: 2px; top: 50%; } .b8 { right: 2px; top: 50%; }

.rows { margin: 0; display: grid; gap: 5px; }
.rows > div { display: grid; grid-template-columns: 4.6em 1fr; align-items: center; gap: 4px; border-bottom: 1px dotted #2b3d40; padding-bottom: 3px; }
.rows dt { font-size: .68rem; letter-spacing: .12em; color: var(--brass-l); }
.rows dd { margin: 0; font-size: .85rem; } .rows dd b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; color: var(--sonar); }
.dist { display: flex; list-style: none; margin: 0; padding: 0; gap: 3px; }
.dist li { flex: 1; text-align: center; border: 1px solid #2b3d40; border-radius: 3px; font-size: .78rem; padding: 1px 0; color: var(--dim); }
.dist li.on { background: var(--sonar); color: #04140c; font-weight: 800; border-color: var(--sonar); }
.dist li.on::before { content: "▶"; font-size: .6rem; margin-right: 1px; }
.hull { display: inline-flex; gap: 2px; vertical-align: middle; }
.hull i { width: 7px; height: 14px; border-radius: 1px; border: 1px solid #7d9598; background: rgba(125,149,152,.15); }
.hull i.f { background: var(--sonar); border-color: var(--sonar); }
.hull.amber i.f { background: var(--amber); border-color: var(--amber); }
.hull.red i.f { background: var(--red); border-color: var(--red); }
.rows dd.hulld b.amber, #rHull.amber { color: var(--amber); } #rHull.red { color: var(--red); }
#hullState { font-size: .7rem; color: var(--dim); white-space: nowrap; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--glow); } .pips i.f { background: var(--glow); }
.sample { position: absolute; right: 12px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: #030912cc; border: 1px solid var(--brass); border-radius: 6px; font-size: .7rem; color: var(--dim); line-height: 1.25; z-index: 2; }
.sample canvas { width: 84px; height: 62px; border: 2px solid var(--brass); border-radius: 3px; background: #04101a; flex: none; }
.sample small { color: var(--fg); font-size: .8rem; }

.logbox { min-height: 0; } .log { list-style: none; margin: 0; padding: 0; height: 150px; overflow-y: auto; font-size: .76rem; display: grid; align-content: start; gap: 3px; }
.log li { border-left: 3px solid #2b3d40; padding-left: 6px; color: var(--dim); } .log li.demo { border-color: var(--glow); } .log li.act { border-color: var(--sonar); color: var(--fg); } .log li.dmg { border-color: var(--red); color: #ffd0c8; } .log li.shot { border-color: var(--amber); color: #ffe6b0; }

.console { background: linear-gradient(#1b2a2d, #0d1618); border: 2px solid var(--brass); border-radius: 8px; padding: 8px 10px 6px; box-shadow: inset 0 2px 0 #3a5256, 0 3px 0 #000; position: relative; }
.hint { margin: 0 0 6px; font-size: .9rem; color: var(--amber); font-weight: 600; }
.row { display: flex; gap: 8px; flex-wrap: wrap; } .row > button { flex: 1 1 0; }
.stims { margin-bottom: 8px; }
button.stim, button.shot { font: inherit; color: var(--fg); cursor: pointer; touch-action: manipulation; border-radius: 6px; border: 2px solid var(--brass); background: linear-gradient(#2a3b3e, #121c1e); box-shadow: 0 3px 0 #000, inset 0 1px 0 #4d686c; min-height: 52px; padding: 6px 8px; position: relative; }
button.stim { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; text-align: left; }
button.stim svg { width: 24px; height: 24px; grid-row: 1 / 3; color: var(--glow); }
button.stim b { font-size: 1rem; } .pv { font: 600 .74rem ui-monospace, Menlo, Consolas, monospace; color: var(--dim); }
.pv.hurt { color: var(--amber); } .pv.lethal { color: #fff; background: var(--red); border-radius: 3px; padding: 0 4px; justify-self: start; }
button:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
button:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
button[aria-disabled="true"] { opacity: .42; cursor: default; filter: saturate(.4); }
button.shot { font-weight: 700; } button.shot.ret { border-color: var(--amber); }
button.danger { border-color: var(--red); color: #ffd0c8; background: linear-gradient(#5a2118, #2a0d09); }
.confirm { margin-top: 8px; border: 2px solid var(--red); background: #2a0d09; border-radius: 6px; padding: 8px; color: #ffd0c8; } .confirm p { margin: 0 0 6px; } .confirm b { color: var(--red); font-size: 1rem; }
.msg { margin: 6px 0 0; min-height: 1.3em; font-size: .82rem; color: var(--dim); }
[hidden] { display: none !important; }

.result { padding: 6px 0 10px; } .result h2 { margin: 0 0 8px; color: #ffd9a0; font-size: 1.25rem; letter-spacing: .1em; outline: none; }
.res-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.card-wrap canvas { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 10px 40px #000a; }
.res-side .lbl { color: #e0b878; margin-top: 12px; }
.stats { margin: 0; font-size: 1rem; color: #ffe6c0; line-height: 1.7; }
.stats b { font: 700 1.4rem ui-monospace, Menlo, Consolas, monospace; color: var(--amber); }
.sheet { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.sheet button { font: inherit; padding: 4px; background: #efe6d2; color: #3b2a18; border: 3px solid #efe6d2; border-radius: 3px; cursor: pointer; display: grid; gap: 2px; font-size: .68rem; font-weight: 700; text-align: center; touch-action: manipulation; }
.sheet button[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.sheet canvas { width: 100%; height: auto; aspect-ratio: 15 / 11; background: #1b130a; display: block; }
.sheet .none { aspect-ratio: 15 / 11; display: grid; place-items: center; background: #3a2a1a; color: #b9a07a; font-weight: 600; }
.sheet button[disabled] { opacity: .75; cursor: default; }
.sheet .lost { color: #b3382b; }
.share { margin: 0 0 8px; padding: 8px 10px; background: #1d1109; border: 1px solid #7a5628; border-radius: 4px; color: #ffe6c0; user-select: all; -webkit-user-select: all; }
.retry button { flex: 1 1 30%; }
.result .msg { color: #e0b878; }

.arcade-link { text-align: center; padding: 6px 0 10px; font-size: .72rem; opacity: .5; } .arcade-link a { color: inherit; }

@media (max-width: 760px) {
  .game { padding: 6px 8px 2px; }
  .top { gap: 4px 8px; margin-bottom: 6px; } h1 { font-size: .9rem; width: 100%; }
  .routes button { padding: 3px 7px; font-size: .74rem; }
  .play { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "win win" "read read" "console console" "sonar log"; gap: 6px; }
  .rows { grid-template-columns: 1fr 1fr; column-gap: 10px; } .r-depth { display: none !important; }
  .rows > div { grid-template-columns: 3.6em 1fr; } .read.panel { padding: 4px 8px; }
  .dist li { padding: 0; font-size: .72rem; } #hullState { display: none; }
  .mission { left: 6px; right: 6px; bottom: 6px; padding: 3px 8px; font-size: .74rem; }
  .sample { right: 6px; top: 6px; padding: 3px; gap: 4px; font-size: .6rem; } .sample small { font-size: .62rem; }
  .porthole { padding: 9px; border-radius: 30px; } .glass { border-radius: 22px; box-shadow: 0 0 0 3px #3a2810, 0 0 0 4px #b88a4a, inset 0 0 24px #000c; }
  .bolt { width: 8px; height: 8px; } .hud { left: 14px; top: 10px; }
  .panel { padding: 6px; } .sonar-box canvas { max-width: 96px; }
  .rows { gap: 3px; } .rows > div { grid-template-columns: 3.4em 1fr; } .rows dd { font-size: .78rem; } .rows dd b { font-size: .9rem; }
  .sample canvas { width: 56px !important; height: 41px !important; }
  .log { height: 5.2em; }
  .console { padding: 6px 8px 4px; } .hint { font-size: .82rem; margin-bottom: 4px; }
  .stims { gap: 5px; margin-bottom: 6px; }
  button.stim { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 4px 2px; min-height: 58px; row-gap: 0; }
  button.stim svg { grid-row: auto; width: 18px; height: 18px; } button.stim b { font-size: .84rem; } .pv { font-size: .64rem; }
  .shots { gap: 5px; } button.shot { min-height: 46px; font-size: .88rem; }
  .res-grid { grid-template-columns: 1fr; } .card-wrap { max-width: 360px; margin: 0 auto; width: 100%; }
}
body.og .top .alerts, body.og .route-info, body.og .arcade-link { display: none; }
body.og .game { padding-top: 4px; } body.og .top { margin-bottom: 4px; }
body.og .log { height: 96px; }

@media (prefers-reduced-motion: reduce) {
  .shutter.fire { animation: none; opacity: .0; }
  * { scroll-behavior: auto !important; }
}

.mission { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 5px 10px; border: 1px solid var(--brass); border-radius: 6px; background: #030912d9; color: var(--fg); font-size: .85rem; line-height: 1.45; pointer-events: none; }
.mission b { color: var(--amber); margin-right: 8px; font-size: .8rem; letter-spacing: .15em; } .mission small { color: var(--sonar); font-size: .75rem; }
.mission[hidden], body.og .mission { display: none; }
.hint.coach { color: #04140c; background: var(--sonar); border-radius: 4px; padding: 4px 8px; }
@keyframes nudge { 50% { box-shadow: 0 3px 0 #000, 0 0 0 3px var(--sonar); } }
button.nudge { animation: nudge 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { button.nudge { animation: none; box-shadow: 0 3px 0 #000, 0 0 0 3px var(--sonar); } }

.routes button.locked, .retry button.locked { opacity: .55; border-style: dashed; cursor: not-allowed; }
.route-info .lock { color: var(--amber); }
.unlock-note { margin: 6px 0; padding: 6px 10px; border: 1px solid var(--brass); border-radius: 4px; background: var(--inst); color: var(--brass-l); font-size: .9rem; line-height: 1.5; }

.hud-alert { font-size: .7rem; color: var(--dim); margin-left: 6px; } .hud-alert.warn { color: var(--amber); }
.lib-btn { font: inherit; font-size: .8rem; padding: 4px 10px; min-height: 36px; border-radius: 4px; border: 1px solid var(--glow); background: var(--inst); color: var(--glow); cursor: pointer; touch-action: manipulation; margin-left: auto; }
.top .routes button { min-height: 36px; }
.lib { position: fixed; inset: 0; z-index: 50; background: #030912e6; overflow-y: auto; padding: 12px; }
.lib-card { max-width: 640px; margin: 0 auto; background: var(--inst); border: 2px solid var(--brass); border-radius: 8px; padding: 12px; }
.lib-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; background: var(--inst); padding-bottom: 6px; }
.lib h2 { margin: 0; font-size: 1.05rem; color: var(--brass-l); } .lib h3 { margin: 14px 0 6px; font-size: .85rem; letter-spacing: .15em; color: var(--brass-l); }
.lib-close { font: inherit; min-height: 44px; padding: 6px 12px; border-radius: 6px; border: 2px solid var(--brass); background: linear-gradient(#2a3b3e, #121c1e); color: var(--fg); cursor: pointer; font-weight: 700; touch-action: manipulation; }
.lib-note { margin: 0; font-size: .75rem; color: var(--dim); }
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lib-list li { border-left: 3px solid var(--glow); padding: 4px 8px; font-size: .84rem; } .lib-list li.unk { border-color: #2b3d40; color: var(--dim); }
.lib .route-info { font-size: .8rem; margin-bottom: 6px; }
body.og .lib-btn { display: none; }

.lib-list li.known { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.dex-img { width: 100%; height: auto; aspect-ratio: 600 / 440; border: 2px solid var(--brass); border-radius: 6px; background: #020912; display: block; }
@media (max-width: 480px) { .lib-list li.known { grid-template-columns: 1fr; } }
.dex-img.dex-unk { filter: blur(3px); border-color: #3a4a4c; }
.lib-list .where { color: var(--amber, #F2B84B); }
/* ボスの深度：窓の枠が赤く脈打ち、HUD に名前が出る */
body.boss .porthole { animation: bossGlow 1.6s ease-in-out infinite; }
body.boss .hud-alert { color: var(--red); font-weight: 800; }
@keyframes bossGlow { 0%, 100% { box-shadow: 0 0 0 3px #2c1e0b, inset 0 0 0 3px rgba(255,225,160,.5), 0 0 18px 2px rgba(229,103,85,.45); } 50% { box-shadow: 0 0 0 3px #2c1e0b, inset 0 0 0 3px rgba(255,225,160,.5), 0 0 34px 8px rgba(229,103,85,.75); } }
@media (prefers-reduced-motion: reduce) { body.boss .porthole { animation: none; box-shadow: 0 0 0 3px #2c1e0b, 0 0 0 6px var(--red); } }
.boss-tag { margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--red); color: #1a0806; font-size: .72rem; vertical-align: 2px; }