/* 絵と重ねもの（絵の担当）。座標はすべて絵のピクセル（1536×1024） */

#scene .stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.stage > * {
  position: absolute;
  pointer-events: none;
}
.stage .room {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-user-drag: none;
}
.stage.is-loaded .room { opacity: 1; }

/* 窓ガラスの下絵（絵の雨の筋を消したもの）。部屋の絵と同時に出す */
.stage .window-plate {
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-user-drag: none;
}
.stage.is-loaded .window-plate.is-ready { opacity: 1; }

/* 部屋全体の灯り（JS が不透明度をゆらす） */
.stage .room-warm {
  inset: 0;
  background: radial-gradient(70% 80% at 96% 62%, rgba(255, 150, 62, 1) 0%, rgba(255, 138, 60, 0.55) 45%, rgba(255, 130, 60, 0.15) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
}
/* 休憩の気分（JS が 0〜1 をゆっくり動かす） */
.stage .mood {
  inset: 0;
  background: radial-gradient(75% 80% at 36% 66%, rgba(255, 200, 140, 1) 0%, rgba(255, 176, 110, 0.7) 55%, rgba(255, 160, 96, 0.4) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
}
.stage .mood-lift {
  inset: 0;
  background: radial-gradient(70% 70% at 36% 72%, rgba(255, 196, 140, 0.12), rgba(255, 180, 120, 0.05) 65%, rgba(255, 170, 110, 0.015));
  mix-blend-mode: screen;
  opacity: 0;
}

/* 火 */
.stage .fire-glow {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 62, 0.85) 0%, rgba(255, 128, 48, 0.42) 38%, rgba(255, 110, 40, 0.12) 70%, rgba(255, 110, 40, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.stage .fire-light {
  overflow: hidden;
  background: radial-gradient(62% 58% at 57% 70%, rgba(255, 222, 150, 1) 0%, rgba(255, 160, 62, 0.62) 42%, rgba(255, 96, 24, 0.12) 78%, rgba(255, 90, 20, 0) 100%);
  mix-blend-mode: screen;
  transform-origin: 55% 88%;
  opacity: 0;
}
.stage .fx-fire { mix-blend-mode: screen; }
/* 絵の炎を揺らした層。縁はぼかして元の絵になじませる */
.stage .fx-flame {
  -webkit-mask-image: radial-gradient(58% 50% at 50% 40%, #000 52%, transparent 100%);
  mask-image: radial-gradient(58% 50% at 50% 40%, #000 52%, transparent 100%);
}

/* 灯り */
.stage .lamp-glow {
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
}
.stage .lamp-glow.is-desk {
  background: radial-gradient(closest-side, rgba(255, 226, 168, 0.9) 0%, rgba(255, 196, 120, 0.32) 32%, rgba(255, 180, 100, 0.08) 70%, rgba(255, 180, 100, 0) 100%);
}
.stage .lamp-glow.is-candle {
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.95) 0%, rgba(255, 170, 80, 0.38) 36%, rgba(255, 150, 70, 0) 100%);
}

/* 雨・湯気（canvas。大きさと位置は JS） */
.stage .fx-rain,
.stage .fx-steam,
.stage .fx-fire,
.stage .fx-flame {
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.stage.is-loaded .fx-rain,
.stage.is-loaded .fx-steam,
.stage.is-loaded .fx-fire,
.stage.is-loaded .fx-flame { opacity: 1; }
.stage .fx-steam { filter: blur(1.6px); }

/* ---------- テレビ ---------- */
.stage .tv-glow {
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
}
.stage .tv-screen {
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  transform-origin: 0 0;
  background: #040506;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.stage.is-loaded .tv-screen { opacity: 1; }
/* フォーカスの枠は画像より上に重ねる（太さは JS が画面で約2.5画素になるよう決める） */
.tv-screen::after,
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.tv-screen::after { box-shadow: inset 0 0 0 var(--ring-w, 6px) rgba(244, 184, 110, 0.95); }
.tv-screen:focus-visible::after { opacity: 1; }
/* 部屋の灯りより目立たないよう、暗めで少し暖色に（電源の入った薄型テレビの見え方） */
.tv-pic {
  position: absolute;
  inset: 0;
  transition: filter 0.3s ease;
  filter: brightness(0.52) saturate(0.85) sepia(0.14) contrast(0.97);
}
.tv-screen:hover .tv-pic,
.tv-screen:focus-visible .tv-pic { filter: brightness(0.66) saturate(0.92) sepia(0.08) contrast(1); }
.tv-ch {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.tv-ch.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.tv-ch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tv-ch img.is-broken { display: none; }
/* 画像がないときの紹介画面 */
.tv-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--font, "Zen Maru Gothic", sans-serif);
  background: radial-gradient(90% 90% at 50% 40%, var(--tv-c1, #3b2f45), var(--tv-c2, #120f18));
}
.tv-card b { font-size: 76px; line-height: 1.1; letter-spacing: 0.08em; }
.tv-card span { font-size: 30px; opacity: 0.85; letter-spacing: 0.06em; }

.tv-vignette,
.tv-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 縁がほんの少し暗いだけ（ブラウン管のような強い隅の暗がりはなし） */
.tv-vignette {
  background: radial-gradient(130% 130% at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.14) 88%, rgba(0, 0, 0, 0.26) 100%);
}
.tv-glare {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(80% 70% at 50% 50%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 0 26px rgba(160, 190, 255, 0.12);
}
.tv-badge {
  position: absolute;
  left: 18px;
  top: 16px;
  padding: 3px 12px 4px;
  border-radius: 7px;
  background: rgba(10, 10, 14, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font, "Zen Maru Gothic", sans-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
}
.tv-open {
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 5px 16px 6px;
  border-radius: 999px;
  background: rgba(244, 184, 110, 0.95);
  color: #2b1b0d;
  font-family: var(--font, "Zen Maru Gothic", sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tv-screen:hover .tv-open,
.tv-screen:focus-visible .tv-open { opacity: 1; transform: none; }
/* 指の端末では出さない。ただしキーボードで選んだときは出す（フォーカスの印になる） */
@media (hover: none) {
  .tv-open { display: none; }
  .tv-screen:focus-visible .tv-open { display: block; }
}

/* ---------- ポスター（紙の明るさになじむよう乗算） ---------- */
.stage .poster {
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  background: #fff;
  color: #2a2b27;
  text-decoration: none;
  mix-blend-mode: multiply;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.8s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  font-family: var(--font, "Zen Maru Gothic", sans-serif);
}
.stage.is-loaded .poster { opacity: 1; }
.poster::after { box-shadow: inset 0 0 0 var(--ring-w, 6px) rgba(160, 60, 30, 0.9); }
.poster:focus-visible::after { opacity: 1; }
.poster-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66px 34px 26px;
  text-align: center;
}
.poster-kicker {
  margin: 0;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #a8382a;
}
.poster-logo {
  display: block;
  width: 392px;
  height: auto;
  margin: 16px 0 0;
}
.poster-icon {
  display: block;
  width: 192px;
  height: 192px;
  margin: 14px 0 0;
}
.poster-copy {
  margin: 12px 0 0;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.poster-search {
  margin: auto 0 0;
  padding: 8px 18px 9px;
  border: 2.5px solid #2a2b27;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.poster-search i { font-style: normal; color: #a8382a; }
/* 紹介であることの札（左上・読める大きさ。右上は画面のボタンとかぶりやすい） */
.poster-badge {
  position: absolute;
  left: 16px;
  top: 12px;
  padding: 2px 12px 3px;
  border: 2.5px solid rgba(42, 43, 39, 0.75);
  border-radius: 7px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: rgba(42, 43, 39, 0.9);
}
.poster:hover .poster-search { background: #f3d9c9; }

/* 4隅の目印（確かめ用・見えない） */
.q-corner {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* 確かめ用の線（scene-test の ?lines=1） */
.stage .debug-lines { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 50; }