/* ==========================================================
   I-05 / OPENING
   画像 = 施設そのもの。CSS = 照明・暗闇・懐中電灯・グロー・UI。
   ========================================================== */

:root{
  --term-fg:#a6cdb4;
  --term-dim:#5f7f6c;
  --term-hot:#d8efe0;

  --fdark:.62;   /* 暗闇の濃さ（真っ黒にはしない） */
  --fr:30;       /* 懐中電灯の広さ（vmax） */
  --fx:50vw;
  --fy:50vh;
  --torch:.34;   /* 懐中電灯が当たった面の持ち上がり */

  --mono:"Courier New",ui-monospace,"DejaVu Sans Mono","Noto Sans Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;overflow:hidden}
body{
  font-family:var(--mono);
  color:var(--term-fg);
  overscroll-behavior:none;
  touch-action:manipulation;
}

#stage{position:fixed;inset:0;overflow:hidden;background:#04060a;isolation:isolate}

/* ---------- シーンの器（画像比を絶対に崩さない） ---------- */
#sceneWrap{
  position:absolute;
  aspect-ratio:1672 / 941;
  overflow:visible;
}
/* 横長: 幅を合わせ、上下は暗部でつなぐ */
@media (min-aspect-ratio: 1/1){
  #sceneWrap{width:100%;height:auto;left:0;top:50%;transform:translateY(-50%)}
}
/* 縦長: 高さを合わせ、観察窓のある左側を見せる */
@media (max-aspect-ratio: 1/1){
  #sceneWrap{height:100%;width:auto;left:0;top:0;transform:none}
}

#scene{
  position:absolute;inset:0;
  transform-origin:0 0;
  transform:translate3d(0,0,0) scale(1);
  opacity:0;visibility:hidden;
  will-change:transform;
}
#scene.visible{opacity:1;visibility:visible}

#bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(1.42) contrast(1.06) saturate(.95);
  transition:filter 2.8s ease;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
#scene.lit #bg{filter:brightness(1.95) contrast(1.02) saturate(1.02)}

/* 画面上下の継ぎ目を暗部で溶かす */
#edgeFade{
  position:absolute;inset:0;z-index:84;pointer-events:none;
  background:
    linear-gradient(180deg, #04060a 0%, rgba(4,6,10,.85) 3%, rgba(4,6,10,0) 9%),
    linear-gradient(0deg,  #04060a 0%, rgba(4,6,10,.85) 3%, rgba(4,6,10,0) 10%);
}

/* ==========================================================
   観察窓（背景のガラス槽へ重ねる）
   ========================================================== */
#obs{position:absolute;z-index:10;overflow:hidden;pointer-events:none;transition:filter .6s ease}
#obs.hi{filter:brightness(1.22)}
.obs-fog{
  position:absolute;inset:-8%;
  background:
    radial-gradient(38% 30% at 28% 22%, rgba(196,222,226,.20), transparent 72%),
    radial-gradient(44% 26% at 66% 44%, rgba(180,208,214,.16), transparent 74%),
    radial-gradient(32% 22% at 34% 68%, rgba(200,224,228,.13), transparent 72%),
    radial-gradient(50% 34% at 60% 86%, rgba(170,200,210,.11), transparent 76%);
  filter:blur(6px);
  mix-blend-mode:screen;
  transition:opacity 1.2s ease;
}
.obs-fog.pulse{animation:fogpulse 2.2s ease-out 1}
@keyframes fogpulse{
  0%{transform:scale(1);opacity:1}
  13%{transform:scale(1.05);opacity:.72}
  31%{transform:scale(1.008);opacity:.95}
  49%{transform:scale(1.028);opacity:.84}
  100%{transform:scale(1);opacity:1}
}
/* 内側から拭われたような湿った跡 */
.obs-wipe{
  position:absolute;left:46%;top:24%;width:34%;height:22%;
  border-radius:62% 38% 55% 45%/48% 62% 38% 52%;
  background:radial-gradient(62% 62% at 50% 50%, rgba(0,0,0,.55), transparent 78%);
  filter:blur(5px);opacity:0;transition:opacity 2.8s ease;
}
.obs-wipe.on{opacity:1}
/* 奥の暗部 */
/* 観察窓の奥の暗部は使用しない */
.obs-shape{display:none;
  position:absolute;left:38%;top:46%;width:30%;height:26%;
  border-radius:52% 48% 46% 54%/48% 54% 46% 52%;
  background:radial-gradient(58% 58% at 46% 46%, #000 0%, rgba(0,0,0,.86) 44%, rgba(150,182,190,.16) 76%, transparent 100%);
  filter:blur(5px);opacity:0;transition:opacity 2.6s ease;
}
.obs-shape.on{opacity:.92}
.obs-shape.beat{animation:shapebeat 2s ease-out 1}
@keyframes shapebeat{
  0%{transform:scale(1)}15%{transform:scale(1.12)}
  30%{transform:scale(1.02)}46%{transform:scale(1.06)}100%{transform:scale(1)}
}
.obs-sheen{
  position:absolute;inset:0;
  background:linear-gradient(114deg, transparent 26%, rgba(200,226,232,.09) 42%, transparent 50%);
  mix-blend-mode:screen;
}
/* 観察窓の遮蔽シャッターは使用しない（窓の上に横棒が残って見えるため） */
.obs-shutter{display:none;
  position:absolute;left:-2%;right:-2%;top:0;height:0%;
  background:linear-gradient(180deg,#1a2228 0%,#0c1116 72%,#05080b 100%);
  border-bottom:1px solid rgba(0,0,0,.9);
  box-shadow:0 6px 14px rgba(0,0,0,.85);
  transition:height 1.8s cubic-bezier(.3,.02,.2,1);
}

/* ==========================================================
   非常電源レバー（OFF/ON の状態画像を差し替え）
   ========================================================== */
#lever{
  position:absolute;z-index:24;pointer-events:none;
  transition:filter .5s ease;
}
/* 可動部（下=OFF / 上=ON） */
#lever .lv-knob{
  position:absolute;left:16%;right:16%;bottom:8%;height:34%;
  border-radius:14%;
  background:linear-gradient(180deg,#5b666b,#2a3238 62%,#171d21);
  box-shadow:0 1px 0 rgba(0,0,0,.8), inset 0 1px 0 rgba(220,240,245,.22);
  transition:bottom .32s cubic-bezier(.25,.9,.3,1), background .3s ease;
}
#lever.on .lv-knob{
  bottom:57%;
  background:linear-gradient(180deg,#6a767b,#333c42 62%,#1b2226);
}
/* 状態LED */
#lever .lv-led{
  position:absolute;left:34%;right:34%;top:10%;height:14%;
  border-radius:50%;
  background:#20301f;
  transition:background .3s ease, box-shadow .3s ease;
}
#lever.on .lv-led{
  background:#7fe0a0;
  box-shadow:0 0 5px 2px rgba(110,220,145,.6), 0 0 12px 5px rgba(70,180,110,.28);
}
/* 光が近いときだけ、わずかに手前へ出る */
#lever.hi{filter:brightness(1.9) drop-shadow(0 0 6px rgba(180,230,215,.5))}
#lever.hi .lv-led{background:#3d5c46;box-shadow:0 0 4px 1px rgba(120,200,150,.35)}
#lever.throw .lv-knob{transition-duration:.16s}

/* ---- 画像のアルファを利用した寒色グレーディング ----
   mul: 青緑を乗算し、縁ほど暗く沈める / col: 色相を背景の冷光へ寄せる */
.glaze{position:absolute;inset:0;pointer-events:none;display:none;
  mask-size:100% 100%;mask-repeat:no-repeat;mask-position:center;
  -webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
}
.mask-ok .glaze{display:block}
.mask-ok .glaze-tm{
  mask-image:url("../assets/images/terminal_frame.webp");
  -webkit-mask-image:url("../assets/images/terminal_frame.webp");
}
/* file:// 用の代替: 画像自体のアルファを保ったまま寒色へ寄せる */
.no-mask #termImg{filter:sepia(.3) hue-rotate(158deg) saturate(1.18)}
.glaze.mul{
  mix-blend-mode:multiply;
  background:
    linear-gradient(196deg, rgba(150,178,188,.92) 12%, rgba(104,138,152,.88) 55%, rgba(64,96,116,.86) 100%),
    radial-gradient(118% 118% at 50% 44%, rgba(255,255,255,0) 52%, rgba(70,100,118,.55) 84%, rgba(38,62,80,.8) 100%);
  background-blend-mode:multiply;
}
.glaze.col{
  mix-blend-mode:color;opacity:.34;
  background:linear-gradient(180deg, #7e9aa8 0%, #5f8496 60%, #45677c 100%);
}

/* ==========================================================
   端末
   ========================================================== */
#termBox{
  position:absolute;z-index:20;aspect-ratio:1402 / 1122;
  pointer-events:none;
  filter:brightness(.56) contrast(1.05) saturate(.6);
  transition:filter .6s ease;
}
#termBox.hi{filter:brightness(.70) contrast(1.05) saturate(.68)}
#scene.lit #termBox{filter:brightness(.74) contrast(1.04) saturate(.7)}
#termImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
/* 背後の壁の暗がり + 下辺の濃い接触影 + 左右のわずかな遮蔽 */
#termBox::before{
  content:"";position:absolute;inset:-5% -9% -3% -9%;
  background:
    radial-gradient(56% 58% at 49% 56%, rgba(3,6,9,.72), rgba(3,6,9,.30) 58%, transparent 80%),
    radial-gradient(52% 13% at 50% 93%, rgba(2,4,7,.85), transparent 70%),
    radial-gradient(12% 44% at 6% 55%, rgba(2,4,7,.5), transparent 72%),
    radial-gradient(12% 44% at 94% 55%, rgba(2,4,7,.5), transparent 72%);
  filter:blur(10px);
}

/* 画面部分（JSで端末画像の画面位置へ合わせる） */
#screen{
  position:absolute;z-index:46;overflow:hidden;
  background:
    radial-gradient(130% 150% at 50% 42%, rgba(10,30,24,.92) 0%, rgba(4,12,12,.95) 58%, rgba(1,4,5,.97) 100%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.9);
  filter:brightness(.42) saturate(.75);
  transition:filter 1.5s ease;
}
#screen.powered{filter:brightness(1) saturate(1)}
.scr-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:5% 6%;overflow:hidden}
.scr-inner.top{align-items:flex-start;justify-content:flex-start;overflow-y:auto;scrollbar-width:none}
.scr-inner.top::-webkit-scrollbar{display:none}
.scr-inner.top .term{flex:0 0 auto}

/* ==========================================================
   端末テキスト
   ========================================================== */
.term{width:100%;max-width:44em;text-align:left;line-height:1.55;letter-spacing:.04em}
.term .ln{opacity:0;transition:opacity .22s ease;white-space:pre-wrap;word-break:break-word}
.term .ln.in{opacity:1}
.term .ln.dim{color:var(--term-dim)}
.term .ln.sp{height:.7em}
.term .ln.em{color:var(--term-hot)}
.term .cursor{display:inline-block;width:.62em;height:1.05em;vertical-align:-.16em;background:var(--term-fg);animation:blink 1.05s steps(1,end) infinite}
/* 打鍵中のカーソルは点滅させない */
.term .cursor.tw{animation:none;opacity:.92;box-shadow:0 0 6px rgba(166,205,180,.35)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.t-title{font-size:3.1em;letter-spacing:.2em;margin-bottom:.7em;text-align:center;color:#cfe8d8}
.t-title .ch{display:inline-block;transition:opacity .09s linear}
.t-meta{text-align:center;color:var(--term-dim);letter-spacing:.16em}
.t-msg{text-align:center;margin-top:1.9em;color:var(--term-fg)}

/* ---- 表示言語の選択（タイトルのみ） ---- */
#langPick{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.5em .9em;
  margin-top:1.9em;
  animation:btnIn 1.2s ease 1 both;
}
#langPick .lg-k{
  color:var(--term-dim);font-size:.72em;letter-spacing:.2em;
  width:100%;text-align:center;margin-bottom:-.1em;
}
#langPick .lg-b{
  /* .term button の block/auto マージンを打ち消して横並びにする */
  display:inline-block;margin:0;
  font:inherit;font-size:.86em;letter-spacing:.1em;
  padding:.34em 1.05em;opacity:1;animation:none;
  color:var(--term-dim);background:transparent;
  border:1px solid rgba(110,170,150,.18);
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
#langPick .lg-b:hover,#langPick .lg-b:focus-visible{
  color:var(--term-fg);border-color:rgba(110,170,150,.4);outline:none;
}
#langPick .lg-b.sel{
  color:var(--term-hot);border-color:rgba(140,210,175,.55);
  background:rgba(120,190,155,.07);
}

.t-btn,.term button{
  display:block;margin:1.5em auto 0;padding:.5em .45em;
  font:inherit;letter-spacing:.045em;
  color:var(--term-fg);background:transparent;border:0;
  cursor:pointer;opacity:.82;
  transition:opacity .35s ease,color .35s ease,text-shadow .35s ease;
  animation:btnIn .9s ease 1 both;
}
@keyframes btnIn{from{opacity:0}to{opacity:.82}}
.t-btn:hover,.term button:hover,.t-btn:focus-visible,.term button:focus-visible{
  opacity:1;color:var(--term-hot);text-shadow:0 0 6px rgba(160,230,190,.35);outline:none;
}
.t-btn:active,.term button:active{opacity:.7}
/* 日本語は字間を空けなくても読めるので、狭い画面でも1行に収める */
html[data-lang="ja"] .t-btn,
html[data-lang="ja"] .term button{letter-spacing:.01em}
/* 端末画面が狭い縦画面では、長い日本語ラベルを1行に収める */
@media (max-width: 430px){
  html[data-lang="ja"] .term button{font-size:.94em}
}

/* 走査線 */
.scr-crt{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(122% 122% at 50% 50%, transparent 50%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.8) 100%);
  animation:lumdrift 11s ease-in-out infinite;
}
@keyframes lumdrift{0%,100%{opacity:1}45%{opacity:.9}}
.glitch{animation:glitch .34s steps(2,end) 1}
@keyframes glitch{
  0%{transform:translate(0,0);filter:none}
  25%{transform:translate(-.4%,0);filter:brightness(1.5)}
  45%{transform:translate(.3%,.25%)}
  65%{transform:translate(-.15%,0);filter:brightness(.82)}
  100%{transform:translate(0,0)}
}

/* ==========================================================
   暗闇と懐中電灯
   ========================================================== */
#dark{
  position:absolute;left:0;top:0;z-index:40;pointer-events:none;
  width:320vmax;height:320vmax;
  transform:translate3d(calc(var(--fx) - 160vmax), calc(var(--fy) - 160vmax), 0);
  background:
    radial-gradient(circle at 50% 50%,
      rgb(2 4 7/0) 0 calc(var(--fr) * .26 * 1vmax),
      rgb(2 4 7/calc(var(--fdark) * .34)) calc(var(--fr) * .46 * 1vmax),
      rgb(2 4 7/calc(var(--fdark) * .78)) calc(var(--fr) * .72 * 1vmax),
      rgb(2 4 7/var(--fdark)) calc(var(--fr) * 1.06 * 1vmax),
      rgb(2 4 7/var(--fdark)) 100%),
    radial-gradient(ellipse calc(var(--fr) * .60 * 1vmax) calc(var(--fr) * .42 * 1vmax)
      at calc(50% + var(--fr) * .10 * 1vmax) calc(50% - var(--fr) * .08 * 1vmax),
      rgb(2 4 7/0) 0 52%,
      rgb(2 4 7/calc(var(--fdark) * .86)) 100%);
  background-blend-mode:multiply;
  will-change:transform;
}
/* 光が当たった面の質感を持ち上げる */
#torch{
  position:absolute;left:0;top:0;z-index:42;pointer-events:none;
  width:320vmax;height:320vmax;
  transform:translate3d(calc(var(--fx) - 160vmax), calc(var(--fy) - 160vmax), 0);
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 50% 50%,
      rgb(226 232 226/calc(var(--torch) * .55)) 0 calc(var(--fr) * .10 * 1vmax),
      rgb(206 218 214/calc(var(--torch) * .30)) calc(var(--fr) * .30 * 1vmax),
      rgb(180 198 200/calc(var(--torch) * .10)) calc(var(--fr) * .56 * 1vmax),
      rgb(0 0 0/0) calc(var(--fr) * .86 * 1vmax)),
    radial-gradient(ellipse calc(var(--fr) * .46 * 1vmax) calc(var(--fr) * .30 * 1vmax)
      at calc(50% + var(--fr) * .12 * 1vmax) calc(50% - var(--fr) * .07 * 1vmax),
      rgb(220 228 226/calc(var(--torch) * .22)) 0 30%,
      rgb(0 0 0/0) 100%);
  will-change:transform;
}

/* ==========================================================
   段階復旧する照明（暗闇より上・加算）
   ========================================================== */
.lt{position:absolute;z-index:45;pointer-events:none;mix-blend-mode:screen;opacity:0}

/* 1. レバーの状態ランプ */
#ltLever{
  transition:opacity .5s ease;
  background:radial-gradient(28% 20% at 62% 24%, rgba(255,196,110,.55), rgba(200,130,50,.14) 46%, transparent 74%);
  filter:blur(2px);
}
/* 2. 端末周辺 */
#ltTerm{
  transition:opacity 1.6s ease;
  background:radial-gradient(52% 40% at 50% 40%, rgba(126,208,166,.20), rgba(60,120,92,.06) 56%, transparent 78%);
  filter:blur(5px);
}
/* 3. 天井灯 */
#ltCeil{
  left:0;top:0;width:100%;height:100%;
  background:
    radial-gradient(26% 16% at 15% 5%, rgba(226,166,102,.34), transparent 74%),
    radial-gradient(30% 14% at 50% 3%, rgba(214,164,110,.30), transparent 76%),
    radial-gradient(24% 15% at 85% 5%, rgba(220,160,100,.26), transparent 74%),
    radial-gradient(60% 26% at 50% 78%, rgba(150,140,120,.10), transparent 78%);
  filter:blur(3px);
}
#ltCeil.flick{animation:ceilflick 2.6s ease-out 1 forwards}
@keyframes ceilflick{
  0%{opacity:0}   5%{opacity:.85} 9%{opacity:.05}
  17%{opacity:.6} 21%{opacity:.02} 38%{opacity:.9}
  44%{opacity:.25} 62%{opacity:.8} 100%{opacity:.8}
}
/* 4. 観察窓上部の非常灯 */
#ltObs{
  transition:opacity 1s ease;
  background:
    radial-gradient(11% 16% at 50% 42%, rgba(255,214,150,.85), rgba(226,150,70,.28) 42%, transparent 72%),
    radial-gradient(46% 52% at 50% 52%, rgba(210,140,70,.16), transparent 76%);
  filter:blur(2px);
}
/* 5. 奥の設備 */
#ltDeep{
  left:0;top:0;width:100%;height:100%;
  transition:opacity 3s ease;
  background:
    radial-gradient(9% 12% at 32% 50%, rgba(126,196,206,.30), transparent 76%),
    radial-gradient(9% 12% at 67% 50%, rgba(126,196,206,.26), transparent 76%),
    radial-gradient(11% 18% at 90% 34%, rgba(120,190,200,.26), transparent 78%),
    radial-gradient(10% 17% at 12% 30%, rgba(126,196,206,.24), transparent 78%);
  filter:blur(4px);
}
.lt.on{opacity:1}

/* ==========================================================
   水滴
   ========================================================== */
.drip{
  position:absolute;z-index:22;width:2px;height:10px;border-radius:50%;
  background:linear-gradient(180deg,rgba(198,222,232,.55),rgba(150,185,200,.12));
  opacity:0;
}
.drip.fall{animation:fall 1.15s cubic-bezier(.5,0,.85,.6) 1}
@keyframes fall{0%{opacity:0;transform:translateY(0)}10%{opacity:.7}100%{opacity:.08;transform:translateY(var(--drop-h,30%))}}

/* ==========================================================
   調査可能箇所
   ========================================================== */
/* 枠線は出さず、対象そのものが光を受けたように見せる */
.hot{
  position:absolute;z-index:44;cursor:pointer;
  background:transparent;
}
.hot:focus-visible{outline:1px solid rgba(186,216,224,.4);outline-offset:-1px}
.hot.off{pointer-events:none}
/* 端末上のスイッチは、端末の調査領域より前で拾う */
#hotLever{z-index:45}

/* ==========================================================
   タイトル端末（端末画面が全面に見えている状態）
   ========================================================== */
#boot{
  position:absolute;inset:0;z-index:80;background:#020606;
  transition:opacity .8s ease;
}
#boot.gone{opacity:0;pointer-events:none}
#boot.hidden{display:none}
.boot-glass{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 130% at 50% 42%, rgba(12,36,28,.9) 0%, rgba(4,14,14,.95) 55%, rgba(1,4,5,1) 100%),
    radial-gradient(38% 26% at 74% 64%, rgba(120,150,160,.03), transparent 72%);
}
.boot-inner{position:absolute;inset:0;padding:6% 7%;display:flex;align-items:center;justify-content:center;z-index:2}
#boot.top .boot-inner{align-items:flex-start;justify-content:flex-start}

/* ==========================================================
   全体ビネットとヒント
   ========================================================== */
#vignette{
  position:absolute;inset:0;z-index:85;pointer-events:none;
  background:radial-gradient(132% 112% at 50% 50%, transparent 52%, rgba(0,0,0,.42) 90%, rgba(0,0,0,.68) 100%);
}
#hint{
  position:absolute;left:max(14px,3vw);bottom:max(14px,3.2vh);z-index:90;
  font-size:12px;letter-spacing:.1em;color:#93a9b0;opacity:0;
  transition:opacity .7s ease;pointer-events:none;text-shadow:0 0 8px rgba(0,0,0,.95);
}
#hint.on{opacity:.66}
#hint.note{left:50%;transform:translateX(-50%);bottom:max(18px,4vh);color:#72858c;font-size:11px}

/* ==========================================================
   配置 : 横長（背景画像の座標系）
   ========================================================== */
#obs        {left:6.2%;  top:14.2%; width:11.9%; height:34%}
#termBox    {left:27%;   top:23%;   width:46%}
#ltTerm     {left:20%;   top:23%;   width:60%;   height:56%}
#ltObs      {left:5.5%;  top:6.5%;  width:13%;   height:11%}
.drip       {left:44%;   top:20%;   --drop-h:210px}
#hotWindow  {left:3.5%;  top:11%;   width:18%;   height:41%}
#hotTerm    {left:27%;   top:23%;   width:46%;   height:66%}

/* ==========================================================
   配置 : 縦長（左側＝観察窓と制御卓が見える範囲）
   ========================================================== */
@media (max-aspect-ratio: 1/1){
  #termBox  {left:0.5%;  top:38%;   width:25.5%}
  #ltTerm   {left:0%;    top:33%;   width:26%;   height:48%}
  .drip     {left:21%;   top:22%;   --drop-h:180px}
  #hotWindow{left:3%;    top:11%;   width:18.5%; height:36%}
  #hotTerm  {left:0.5%;  top:38%;   width:25.5%; height:37%}
  #hint     {font-size:11px}
  /* 狭い画面では文字の余白を詰めて 1 行の情報量を確保する */
  .scr-inner{padding:4% 4.5%}
  .term{letter-spacing:.02em}
}

@media (prefers-reduced-motion: reduce){
  .term .cursor{animation:none}
  .scr-crt{animation:none}
}