/* ==========================================================
   I-05 / CENTRAL OBSERVATION TERMINAL — 端末ベゼルの読み取り表示
   研究室に置かれた端末（#termBox）の枠内スロットへ、
   HTMLの計器表示を重ねるだけの層。ゲーム進行には関与しない。
   ========================================================== */

:root{
  --tui-fg:#9fc4b2;
  --tui-dim:#5d7a6c;
  --tui-hot:#d6ecdd;
  --tui-warn:#c8894f;
  --tui-crit:#c2503c;
}

/* 端末の外形を基準にした文字寸法 */
#termBox{container-type:inline-size}

.tp{
  position:absolute;z-index:2;
  font-family:var(--mono);
  color:var(--tui-fg);
  pointer-events:none;
  display:flex;flex-direction:column;
  opacity:0;transition:opacity 1.8s ease;
}
#termBox.tui-on .tp{opacity:1}

/* 画像内の左右スロット列（実測比） */
.tp-left {left:7.4%;  top:15.2%; width:14.6%; height:63.5%}
.tp-right{left:77.6%; top:15.2%; width:15.6%; height:63.5%}

.tp .cell{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 7% 0 8%;
  min-height:0;
}
.tp .cell + .cell{margin-top:2.2%}

.tp .k{
  font-size:1.72cqw;
  letter-spacing:.04em;color:var(--tui-dim);
  white-space:nowrap;overflow:hidden;
}
.tp .v{
  font-size:2.28cqw;
  letter-spacing:.01em;color:var(--tui-hot);
  white-space:nowrap;overflow:hidden;
  text-shadow:0 0 4px rgba(150,220,185,.28);
}
.tp .v.warn{color:var(--tui-warn)}
.tp .v.crit{color:var(--tui-crit);text-shadow:0 0 5px rgba(200,70,50,.45)}

/* 細いバー */
.tp .bar{
  position:relative;height:.9cqw;margin-top:.45em;
  background:rgba(10,18,16,.85);
  box-shadow:inset 0 0 0 1px rgba(120,170,150,.18);
  overflow:hidden;
}
.tp .bar i{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg, rgba(90,170,140,.5), rgba(150,220,185,.9));
  transition:width 1.1s cubic-bezier(.3,.6,.3,1), background .6s ease;
}
.tp .bar.warn i{background:linear-gradient(90deg, rgba(170,120,60,.5), rgba(215,155,85,.95))}
.tp .bar.crit i{background:linear-gradient(90deg, rgba(150,50,40,.55), rgba(210,85,65,.95))}

/* ランプ */
.tp .lamp{
  display:inline-block;width:.5em;height:.5em;border-radius:50%;
  background:#2a3a33;margin-right:.45em;vertical-align:.05em;
}
.tp .lamp.on{background:#6fe0a0;box-shadow:0 0 4px 1px rgba(110,220,145,.55)}
.tp .lamp.warn{background:#dfa14f;box-shadow:0 0 4px 1px rgba(220,160,80,.55)}
.tp .lamp.crit{background:#e2503c;box-shadow:0 0 5px 2px rgba(226,80,60,.6);animation:tuiBlink 1.15s steps(1,end) infinite}
@keyframes tuiBlink{0%,58%{opacity:1}59%,100%{opacity:.2}}

/* 3段目: 節点数と電源を2行でまとめる（枠1段ぶん） */
.tp .cell.duo{
  justify-content:center;
  gap:4%;
}
/* 他の段と同じ「見出しの下に値」。横並びだと英語の見出しが入らない */
.tp .mini{
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}
.tp .mini .k{
  font-size:1.34cqw;letter-spacing:.04em;color:var(--tui-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp .mini .v{
  font-size:1.85cqw;letter-spacing:.01em;color:var(--tui-hot);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 4px rgba(150,220,185,.28);
}
.tp .mini .v.warn{color:var(--tui-warn)}
.tp .mini .v.crit{color:var(--tui-crit);text-shadow:0 0 5px rgba(200,70,50,.45)}

/* システムログ（枠の最下段ちょうどに収める） */
.tp .log{
  flex:1;min-height:0;
  margin-top:2.2%;            /* 他の段と同じ間隔で枠に合わせる */
  padding:1.5% 7% 1.5% 8%;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  font-size:1.5cqw;line-height:1.42;
  color:var(--tui-dim);
}
/* 日本語は全角ぶん幅を食うので、ログだけ一段小さくする */
html[data-lang="ja"] .tp .log{font-size:1.3cqw;line-height:1.46}
html[data-lang="ja"] .tp .mini .k{font-size:1.3cqw}
html[data-lang="ja"] .tp .mini .v{font-size:1.72cqw}
.tp .log .l{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;animation:tuiLogIn .5s ease forwards;
}
.tp .log .l:last-child{color:var(--tui-fg)}
@keyframes tuiLogIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* ---------- 下部メッセージ帯（画像内の細長い窓） ---------- */
#tuiMsgBar{
  position:absolute;z-index:2;
  left:24.6%;top:74.6%;width:40.2%;height:5.4%;
  display:flex;align-items:center;padding:0 1.2%;
  font-family:var(--mono);font-size:1.8cqw;letter-spacing:.04em;
  color:var(--tui-fg);pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.8s ease;
}
#termBox.tui-on #tuiMsgBar{opacity:1}
#tuiMsgBar .mk{color:var(--tui-dim);margin-right:.8em}
#tuiMsgBar .mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 5px rgba(150,220,185,.3)}
/* 日本語は全角ぶん長くなるので、帯だけ字を詰める */
html[data-lang="ja"] #tuiMsgBar{font-size:1.85cqw;letter-spacing:0}
html[data-lang="ja"] #tuiMsgBar .mk{margin-right:.6em}
#tuiMsgBar.warn .mt{color:var(--tui-warn)}
#tuiMsgBar.crit .mt{color:var(--tui-crit)}
#tuiMsgBar .mt.flash{animation:tuiMsgIn .45s ease 1}
@keyframes tuiMsgIn{from{opacity:.2}to{opacity:1}}

#tuiRec{
  position:absolute;z-index:2;
  left:65.3%;top:74.6%;width:10.3%;height:5.4%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.75cqw;color:var(--tui-dim);
  pointer-events:none;opacity:0;transition:opacity 1.8s ease;
}
#termBox.tui-on #tuiRec{opacity:1}

/* ---------- 下段の物理POWERボタン（画像内の実測位置に重ねる） ---------- */
#tuiPowerLamp{
  position:absolute;z-index:2;pointer-events:none;
  left:9.91%;top:91.62%;width:2.64%;height:3.30%;
  border-radius:12%;
  background:radial-gradient(62% 62% at 50% 42%, rgba(255,228,180,1), rgba(240,170,75,.8) 52%, rgba(170,95,25,.35) 100%);
  box-shadow:0 0 9px 3px rgba(245,180,90,.6), 0 0 26px 10px rgba(225,145,55,.32);
  opacity:0;transition:opacity 1.6s ease;
}
#termBox.pwr #tuiPowerLamp{opacity:1;animation:tuiPwrWarm 5.4s ease-in-out infinite}
@keyframes tuiPwrWarm{0%,100%{opacity:1}52%{opacity:.86}}

/* ---------- 警告時に端末がわずかに赤く灯る ---------- */
#tuiAlarm{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%, rgba(190,60,45,0) 40%, rgba(170,45,35,0) 100%);
  transition:background 1.4s ease;
}
#termBox.warn #tuiAlarm{
  background:radial-gradient(90% 70% at 50% 50%, rgba(190,70,45,.04) 35%, rgba(160,45,35,.11) 100%);
}
#termBox.crit #tuiAlarm{
  background:radial-gradient(90% 70% at 50% 50%, rgba(200,60,40,.06) 30%, rgba(175,40,30,.18) 100%);
  animation:tuiAlarmPulse 2.6s ease-in-out infinite;
}
@keyframes tuiAlarmPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* 端末画面のちらつき（画面部分だけ・ごく淡く） */
#screen .tui-flick{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(150,200,180,.03);
  animation:tuiFlick 8.1s steps(1,end) infinite;
}
@keyframes tuiFlick{
  0%,96%{opacity:0}
  96.4%{opacity:.6}
  96.8%{opacity:0}
  97.6%{opacity:.35}
  98%{opacity:0}
}

@media (prefers-reduced-motion: reduce){
  #screen .tui-flick,#termBox.crit #tuiAlarm{animation:none}
}