/* 静かな裏側: the habitat's own pieces (on top of css/style.css) */
.term-panel { background: #0f151a; border-color: #34505e; width: min(680px, 100%); height: min(640px, calc(100vh - 24px)); display: flex; flex-direction: column; }
.term-panel #term-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.term-head { color: var(--cyan); }
#term-body button { border-color: #34505e; background: #16222a; color: #e0eef4; min-height: 44px; }
#term-body button.on { background: #2a5a6a; border-color: var(--cyan); }
/* the work chat */
#chat-line { background: rgba(8, 14, 22, 0.82); border-color: #2c4a5e; }
#chat-line .cl-who { color: var(--cyan); }
#chat-chip { position: absolute; right: 24px; bottom: 196px; background: rgba(20, 50, 70, 0.9); color: #e8f6ff; border: 1px solid var(--cyan); border-radius: 18px; padding: 8px 16px; font: 700 14px var(--font); min-height: 44px; cursor: pointer; animation: chip 1.6s ease-in-out infinite; pointer-events: auto; }
@keyframes chip { 50% { box-shadow: 0 0 12px rgba(122, 200, 232, 0.7); } }
body.touch #chat-chip { top: 40px; bottom: auto; right: 64px; }
.chat-panel { width: min(620px, 100%); height: min(600px, calc(100vh - 24px)); display: flex; flex-direction: column; background: #0f151a; border-color: #34505e; }
#chat-log { flex: 1; overflow-y: auto; background: #070b0e; border: 1px solid #23343e; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
#chat-log .cm { max-width: 82%; background: #18303e; border-radius: 10px 10px 10px 2px; padding: 6px 10px; font-size: 14px; line-height: 1.5; }
#chat-log .cm b { display: block; font-size: 11px; color: var(--cyan); }
#chat-log .cm.me { align-self: flex-end; background: #3a3220; border-radius: 10px 10px 2px 10px; }
#chat-log .cm.me b { color: var(--amber); }
#chat-replies { flex: none; max-height: 42%; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
#chat-replies .cr-head { font-size: 12px; color: var(--dim); }
#chat-replies button { text-align: left; min-height: 44px; border: 1px solid var(--cyan); background: #12303e; color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
/* the air gauge (a readout of her wrist pad, never a screen effect) */
#hazard { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 64px; width: 150px; background: rgba(0, 0, 0, 0.6); border: 1px solid #3a4a52; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
#hazard small { color: var(--dim); }
#hazard .hz-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin: 4px 0; }
#hazard .hz-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.3s; }
#hazard[data-stage="1"] .hz-bar i { background: var(--amber); }
#hazard[data-stage="2"] .hz-bar i { background: var(--red); }
#hazard .hz-val { font-size: 13px; }
#hazard .hz-stage { float: right; font-weight: 700; }
#hazard[data-stage="0"] .hz-stage { color: var(--green); }
#hazard[data-stage="1"] .hz-stage { color: var(--amber); }
#hazard[data-stage="2"] .hz-stage { color: var(--red); }
body.touch #hazard { top: 148px; }
#airfail { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.82); z-index: 60; }
#airfail.hidden { display: none; }
#airfail-text { font: 700 28px var(--serif); text-align: center; color: #e8eef4; padding: 0 16px; }
#airfail-text small { display: block; font: 14px var(--font); color: var(--dim); margin-top: 10px; }
/* a rocker switch */
.mg-rocker { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 104px; }
.mg-rocker small { color: var(--dim); font-size: 12px; }
.mg-rk { position: relative; display: flex; width: 120px; height: 44px; border-radius: 8px; background: #1a2228; border: 1px solid #3a4a52; overflow: hidden; touch-action: none; cursor: pointer; }
.mg-rk span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; z-index: 1; }
.mg-rk i { position: absolute; top: 3px; bottom: 3px; width: calc(50% - 4px); left: 3px; border-radius: 6px; background: #3a4a52; transition: left 0.15s, background 0.15s; opacity: 0; }
.mg-rocker.a .mg-rk i { left: 3px; opacity: 1; background: #2a6a48; }
.mg-rocker.b .mg-rk i { left: calc(50% + 1px); opacity: 1; background: #8a5a18; }
.p01-rockers { gap: 10px !important; }
.p01-screen { background: #061016; border: 1px solid #23465a; border-radius: 6px; padding: 8px 10px; font: 14px ui-monospace, monospace; color: #9fe0c0; display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.p01-screen small { color: var(--dim); font-family: var(--font); }
.p01-screen b { font-size: 18px; color: #c8ffe4; }
.p01-screen .dim { color: #667; }
/* wires */
.mg-wires { position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr; margin: 8px 0; min-height: 210px; }
.mg-wsvg { width: 100%; height: 100%; pointer-events: none; position: absolute; inset: 0; z-index: 2; }
.mg-wl, .mg-wr { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; z-index: 1; }
.mg-wl { grid-column: 1; }
.mg-wr { grid-column: 3; }
.mg-wn { position: relative; background: #16222a; border: 1px solid #34505e; border-radius: 8px; padding: 8px 10px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; touch-action: none; cursor: pointer; }
.mg-wn small { color: var(--dim); font-size: 12px; }
.mg-wn.picked { border-color: var(--amber); }
.mg-wn.on { border-color: var(--green); }
.mg-wl .plug { position: absolute; right: -9px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #aaa; border: 2px solid #222; }
.mg-wr .plug { position: absolute; left: -9px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #222; }
.mg-wr .mg-wn { padding-left: 16px; }
/* the mirror rod */
.mg-mirror { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0; }
.mg-mirror small { color: var(--dim); font-size: 12px; }
.mg-mrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mg-md { position: relative; width: 170px; height: 150px; touch-action: none; cursor: grab; background: #0c1216; border: 1px solid #34505e; border-radius: 8px; overflow: hidden; }
.mg-scale { position: absolute; left: 12%; bottom: 12%; width: 240px; height: 240px; margin: 0 0 -120px -120px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 270deg, rgba(160, 200, 220, 0.16) 270deg 360deg); }
.mg-scale::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 2px; background: #c03028; transform-origin: 0 50%; transform: rotate(-35deg); }
.mg-rod { position: absolute; left: 12%; bottom: 12%; width: 120px; height: 6px; margin-bottom: -3px; transform-origin: 0 50%; background: linear-gradient(90deg, #8a9aa4, #e4eef4); border-radius: 3px; }
.mg-rod i { position: absolute; right: -14px; top: -11px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, #f0f6fa, #8a9aa4); border: 2px solid #333; }
.mg-view { width: 240px; height: 150px; background: #000; border-radius: 50%; }
/* the valve wheel */
.mg-valve { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.mg-valve small { color: var(--dim); font-size: 12px; text-align: center; }
.mg-vw { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 10px solid var(--vc); box-sizing: border-box; touch-action: none; cursor: grab; }
.mg-vw i { position: absolute; left: 50%; top: 50%; width: 112px; height: 8px; margin: -4px 0 0 -56px; background: var(--vc); border-radius: 4px; }
.mg-vw i:nth-child(2) { transform: rotate(60deg); }
.mg-vw i:nth-child(3) { transform: rotate(120deg); }
.mg-valve.done .mg-vw { opacity: 0.55; cursor: default; }
.mg-valve.done .mg-prog i { background: var(--green); }
.p04-gauge, .p06-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0; }
.p04-gauge canvas { width: 220px; height: 130px; }
.p04-gauge b { font-size: 15px; }
.p06-gauge .bar { width: 200px; height: 10px; background: #222; border-radius: 5px; overflow: hidden; }
.p06-gauge .bar i { display: block; height: 100%; background: var(--cyan); transition: width 0.1s; }
/* the hooks of P08 */
.mg-hooks { margin: 6px auto; width: min(420px, 100%); }
.mg-hsvg { width: 100%; height: auto; background: #0c1216; border: 1px solid #34505e; border-radius: 8px; touch-action: none; display: block; }
.mg-hsvg .hatch { fill: #e8eef2; }
.mg-hsvg .rope { fill: none; stroke: #e0b828; stroke-width: 1.6; stroke-linejoin: round; }
.mg-hsvg .hook circle:first-child { fill: #1a2830; stroke: #8aa0ac; stroke-width: 0.8; }
.mg-hsvg .hook.on circle:first-child { stroke: #e0b828; stroke-width: 1.4; }
.mg-hsvg .bead { fill: #e0b828; }
.mg-hsvg .no { fill: #e0b828; font-size: 5px; font-weight: 700; }
/* the report */
.t-col { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.t-col button { text-align: left; min-height: 48px; }
.t-dep ul.dep { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.t-dep li { background: #121c22; border: 1px solid #2a3a44; border-radius: 6px; padding: 6px 10px; }
.t-dep li.ok b { color: var(--green); }
.t-dep li.lock b { color: var(--dim); }
.t-dep li small { display: block; color: var(--dim); font-size: 12px; }
.t-dep h4 { margin: 12px 0 4px; }
/* the notebook's own pages */
.jr-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.jr-work .wk { text-align: left; background: #f4f2ea; color: #1c2430; border: 1px solid #c8c4b4; border-radius: 6px; padding: 10px; min-height: 56px; font-family: var(--hand); }
.jr-work .wk small { display: block; color: #667; font-family: var(--font); font-size: 11px; }
.jr-work .wk.new { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240, 192, 80, 0.4); }
#doc.note .paper { background: #f4f2ea; }
#t-buttons button.ping { box-shadow: 0 0 0 3px var(--cyan); }
@media (max-width: 520px) {
  .mg-wires { grid-template-columns: 1fr 0.6fr 1fr; }
  .mg-view { width: 180px; height: 112px; }
  .mg-vw { width: 112px; height: 112px; }
  .mg-vw i { width: 92px; margin-left: -46px; }
  .mg-rk { width: 100px; }
}
/* the how-to-play card fits any screen (two columns of keys; scroll if it must) */
.controls-panel { max-height: calc(100vh - 20px); overflow-y: auto; }
.controls-panel .keys { grid-template-columns: auto 1fr auto 1fr; }
@media (max-width: 640px) { .controls-panel .keys { grid-template-columns: auto 1fr; } }
.p01-top { align-items: center; flex-wrap: nowrap !important; }
.p01-top .p01-screen { flex: 1; min-width: 0; }
@media (max-width: 560px) { .p01-top { flex-wrap: wrap !important; } }

/* the title never cuts its top when it is taller than the screen (centre with margin, not align-items) */
#title { align-items: flex-start; }
#title .title-inner { margin: auto; }
/* phones held sideways: the words on the left, the buttons on the right */
@media (orientation: landscape) and (max-height: 520px) {
  #title { padding: 10px 16px; }
  #title .title-inner { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: center; text-align: center; }
  #title .title-inner > * { grid-column: 1; }
  #title .title-inner > .title-menu, #title .title-inner > #continue-info, #title .title-inner > #chapter-list { grid-column: 2; }
  #title .title-inner > .title-menu { grid-row: 1 / span 5; align-self: center; }
  #title h1 { font-size: 34px; margin: 4px 0; }
  #title .rule { margin: 8px auto 4px; padding: 4px 8px; font-size: 14px; line-height: 1.6; }
  #title .headphones { margin-top: 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #pause .menu-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #pause .menu-buttons button { margin: 0; min-height: 44px; padding: 8px 10px; }
  #pause .panel { max-height: calc(100vh - 16px); }
}
/* phones held upright: the work chat under the objective, the air gauge above the stick, the reply chip above the
   buttons, the subtitle between; nothing over the buttons or another line */
@media (orientation: portrait) and (max-width: 640px) {
  body.touch #chat-line { top: 120px; bottom: auto; left: 12px; right: 64px; transform: none; max-width: none; }
  body.touch #toast { top: 232px; }
  body.touch #chapter-card { top: 295px; }
  body.touch #chapter-card .cc-img { display: none; }
  body.touch #pickup { top: 295px; }
  body.touch #caption { top: auto; bottom: 340px; }
  body.touch #subtitle { bottom: 240px; }
  body.touch #chat-chip { top: auto; right: 12px; bottom: 196px; }
  body.touch #hazard { top: auto; right: auto; left: 12px; bottom: 158px; width: 132px; }
}

/* phones held sideways: the chat line and its reply chip at the top, the subtitle low between the stick and the
   buttons, the air gauge left of the pause button, the chapter card without its picture */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #chat-line { top: 40px; bottom: auto; max-width: 46vw; }
  body.touch #chat-chip { top: 40px; bottom: auto; right: 64px; }
  body.touch #toast { top: auto; bottom: 104px; width: 46vw; font-size: 13px; }
  body.touch #subtitle { bottom: 12px; width: 46vw; font-size: 15px; }
  body.touch #chapter-card { top: 20%; width: 260px; }
  body.touch #chapter-card .cc-img { display: none; }
  body.touch #pickup { top: 120px; }
  body.touch #caption { top: 214px; }
  body.touch #hazard { top: 96px; right: 64px; width: 132px; }
}