/* ==========================================================
   I-05 / ENDING
   専用画面は作らない。既存の端末をそのまま落として、点け直すだけ。
   ========================================================== */

/* ---------- 端末画面の暗転 ---------- */
#endVeil{
  position:absolute;inset:0;z-index:20;pointer-events:none;
  background:#000;
  opacity:0;
  transition:opacity .5s ease;
}
#endVeil.on{opacity:1;transition:opacity .42s cubic-bezier(.6,0,.9,.4)}

/* 復電したときだけ、走査線が一度流れる */
#endVeil.boot::after{
  content:"";position:absolute;left:0;right:0;height:22%;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(150,220,196,.10) 55%, rgba(0,0,0,0));
  animation:endSweep 1.5s ease-out 1 both;
}
@keyframes endSweep{
  0%{transform:translateY(-30%);opacity:0}
  18%{opacity:.9}
  100%{transform:translateY(430%);opacity:0}
}

/* ---------- 端末そのものが落ちている間 ---------- */
#termBox.end-down{filter:brightness(.36) saturate(.6);transition:filter .5s ease}
#termBox.end-down .tp,
#termBox.end-down #tuiMsgBar,
#termBox.end-down #tuiRec{opacity:.12;transition:opacity .45s ease}
#termBox.end-down #tuiPowerLamp{opacity:0;transition:opacity .3s ease}

/* 状態パネルは電源が落ちた時点で消え、以後は戻さない */
#p01Panel.end-off{opacity:0 !important;transition:opacity 1s ease}

/* ---------- 再起動後の文字面は中央に置く ---------- */
.scr-inner.end-mid{
  align-items:center;justify-content:center;overflow:hidden;
}
.scr-inner.end-mid .term{flex:0 0 auto;text-align:center;max-width:26em}

/* ---------- 最終暗転とタイトル ---------- */
#endFinal{
  position:absolute;inset:0;z-index:200;
  background:#000;
  opacity:0;transition:opacity .34s cubic-bezier(.6,0,.9,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4em;
}
#endFinal.on{opacity:1}

#endTitle{
  font-family:var(--mono);
  font-size:clamp(34px, 9vw, 84px);
  letter-spacing:.30em;text-indent:.30em;
  color:rgba(196,222,204,.82);
  text-shadow:0 0 26px rgba(120,180,150,.14);
  opacity:0;transform:scale(1.03);
  transition:opacity 2.6s ease, transform 3.4s ease;
}
#endTitle.on{opacity:1;transform:scale(1)}

#endAgain{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:1px solid rgba(120,170,150,.18);
  font-family:var(--mono);font-size:clamp(11px,2.6vw,13px);
  letter-spacing:.14em;
  color:rgba(150,182,166,.5);
  padding:.7em 1.6em;cursor:pointer;
  opacity:0;transition:opacity 1.8s ease, color .3s ease, border-color .3s ease;
}
#endAgain.on{opacity:1}
#endAgain:hover,#endAgain:focus-visible{
  color:rgba(196,222,204,.8);border-color:rgba(120,170,150,.4);outline:none;
}

/* ---------- 縦画面 ---------- */
@media (max-aspect-ratio: 1/1){
  #endFinal{gap:2em}
  .scr-inner.end-mid .term{max-width:100%}
}

@media (prefers-reduced-motion: reduce){
  #endVeil.boot::after{animation:none;opacity:0}
  #endTitle{transition:opacity 1s ease}
}