/* 黒板のチョークの字と、寝室の鏡に指で書いた字に使う手書きの字体(Yomogi、SIL Open Font License。その字だけを収めたファイル。字を足すときは docs/art.md の手順で取り直し、下の ?f= を上げる) */
@font-face { font-family: 'Yomogi'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/yomogi-chalk.woff2?f=3') format('woff2'); }
/* ラプラス荘からの脱出 */
:root {
  --bg: #0a0b10;
  --panel: #171923;
  --panel2: #202334;
  --ink: #e8e2d2;
  --dim: #9a948a;
  --gold: #d9b85a;
  --accent: #ffd27a;
  --line: #2e3246;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }

/* 960×540 の舞台を拡縮して中央に置く */
#stage { position: absolute; width: 960px; height: 540px; transform-origin: 0 0; background: #0d0f16; overflow: hidden; }

/* 上部バー */
#top { position: absolute; left: 0; top: 0; width: 960px; height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; gap: 10px; }
#title { font-size: 14px; color: var(--gold); letter-spacing: 0.08em; white-space: nowrap; }
#time { font-size: 12px; color: var(--dim); white-space: nowrap; }
#tabs { display: flex; gap: 3px; flex: 1; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.tab { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 11px; white-space: nowrap; }
.tab.cur { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.tab.tip { border-color: var(--accent); animation: tabTip 1.1s ease-in-out infinite; }
@keyframes tabTip { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 220, 130, 0); } 50% { box-shadow: 0 0 6px 2px rgba(255, 220, 130, 0.75); } }
/* 最初に別の部屋へ入ったときだけ出す、部屋名ボタンへの矢印 */
#navtip { position: absolute; top: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--accent); background: var(--panel); border: 1px solid var(--accent); border-radius: 4px; padding: 0 8px 3px; white-space: nowrap; pointer-events: none; z-index: 5; animation: navTip 1.1s ease-in-out infinite; }
#navtip .arrow { font-size: 12px; line-height: 1.1; }
@keyframes navTip { 0%, 100% { margin-top: 0; } 50% { margin-top: 5px; } }
#btns { display: flex; gap: 4px; }
#btns button { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; font-size: 11px; white-space: nowrap; }
#btns button:hover { border-color: var(--gold); }
/* 音量。左のボタンで消す・戻す、つまみで大きさを変える */
#btns { align-items: center; }
#vol { width: 54px; height: 14px; margin: 0 2px 0 -1px; accent-color: var(--gold); cursor: pointer; }

/* 持ち物(左の列) */
#inv { position: absolute; left: 0; top: 56px; width: 150px; height: 349px; background: var(--panel); border-right: 1px solid var(--line); padding: 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
/* 手に入れたアイテムが、持ち物の欄へ飛んでいく(engine.js の flyItems) */
.fly { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1000; filter: drop-shadow(0 0 6px rgba(255, 210, 122, 0.9)); }
.item.incoming { visibility: hidden; }
.item.arrived { animation: arrived 0.9s ease-out; }
@keyframes arrived { 0% { background: rgba(255, 210, 122, 0.55); box-shadow: 0 0 10px rgba(255, 210, 122, 0.9); } 100% { background: transparent; box-shadow: none; } }
.inv-title { font-size: 11px; color: var(--dim); margin-bottom: 2px; }
.inv-empty { font-size: 12px; color: var(--dim); }
.item { display: flex; align-items: center; gap: 6px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font-size: 12px; text-align: left; }
.item .ic { font-size: 15px; width: 18px; text-align: center; }
.item .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item:hover { border-color: var(--gold); }
.item.sel { background: var(--gold); color: #1a1408; border-color: var(--accent); }

/* 部屋 */
#scene { position: absolute; left: 150px; top: 56px; width: 810px; height: 349px; }
#scene svg { width: 810px; height: 349px; display: block; position: absolute; left: 0; top: 0; }
#fx-svg { pointer-events: none; }
/* 拡大図から部屋へ戻るボタン。絵の下端いっぱいの帯(高さ 22px。拡大図のクリックする所は、この帯に掛けない。tests/scenes.js が確かめる) */
#zoom-back { position: absolute; left: 0; top: 327px; width: 810px; height: 22px; background: linear-gradient(rgba(13, 15, 22, 0.55), rgba(13, 15, 22, 0.9)); color: var(--accent); border: none; border-top: 1px solid rgba(255, 210, 122, 0.45); padding: 0; font-size: 12px; letter-spacing: 0.1em; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; }
#zoom-back .arrow { font-size: 10px; }
#zoom-back:hover { background: linear-gradient(rgba(32, 35, 52, 0.8), rgba(32, 35, 52, 0.97)); border-top-color: var(--accent); }
#zoom-back.hidden { display: none; }
/* 部屋の名前。明るい絵の上でも読めるように、暗い縁取りを付ける */
#room-name { position: absolute; left: 10px; top: 6px; font-size: 12px; color: rgba(240, 234, 218, 0.92); text-shadow: 0 0 3px #000, 0 0 6px rgba(0, 0, 0, 0.8), 0 1px 1px #000; pointer-events: none; }
/* 押せる所は、マウスを重ねても枠で囲まず、指の形のカーソルにもせず、名前も出さない(押せる所が見えてしまい、探す楽しみがなくなる) */
.hs { fill: transparent; stroke: transparent; stroke-width: 1.5; cursor: default; }
/* 持ち物を選んでいる間は、絵の全体を十字のカーソルにする(押せる所だけを変えると、押せる所が分かってしまう)。絵を作り直さずに、SVG の側のクラスで切り替える */
#scene-svg.using, #scene-svg.using .hs { cursor: crosshair; }

/* メッセージ(下中央。左右下の角はワイプ用に空ける) */
#msg { position: absolute; left: 200px; top: 410px; width: 560px; height: 124px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 13px; line-height: 1.55; overflow-y: auto; }
#msg.flash { animation: flash 0.35s ease-out; }
@keyframes flash { from { border-color: var(--accent); } to { border-color: var(--line); } }
.msg-extra { margin-top: 4px; color: var(--accent); font-size: 12px; }
/* 持ち物にマウスを重ねたときの説明は、部屋名の下に出す(場面の下端は、拡大図の「部屋に戻る」の帯と、ワイプの場所)。押せる所の名前は出さない */
#hover { position: absolute; left: 160px; top: 79px; max-width: 780px; font-size: 11px; color: var(--accent); text-shadow: 0 0 3px #000, 0 0 6px rgba(0, 0, 0, 0.8), 0 1px 1px #000; pointer-events: none; z-index: 4; }

/* モーダル(中央に置き、左右下の角を避ける) */
#modal { position: absolute; left: 0; top: 0; width: 960px; height: 540px; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
#modal.hidden { display: none; }
.dialog { width: 520px; max-height: 400px; overflow-y: auto; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; padding: 14px 18px; font-size: 13px; line-height: 1.6; }
.dialog.wide { width: 560px; max-height: 470px; }
.dialog h2 { margin: 0 0 8px; font-size: 16px; color: var(--gold); font-weight: normal; }
.dialog p { margin: 6px 0; }
.dialog .label { color: var(--dim); }
.dialog .note { color: var(--dim); font-size: 12px; }
.dialog .diary, .dialog .story { white-space: normal; background: #f1e7cf; color: #2a2418; padding: 12px 14px; border-radius: 4px; font-size: 13px; line-height: 1.8; }
.dialog .row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.dialog button { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 12px; font-size: 13px; }
.dialog button:hover { border-color: var(--gold); }
.dialog button:disabled { opacity: 0.4; cursor: default; }
.dialog .link { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 2px 0; }
.dialog ul.list { margin: 4px 0; padding-left: 18px; }
.dialog .help { font-size: 12px; color: var(--ink); }
.stats { border-collapse: collapse; margin-top: 6px; }
.stats th { text-align: left; color: var(--dim); font-weight: normal; padding: 2px 14px 2px 0; }
#pz-status { flex: 1; color: var(--dim); }
.shake { animation: shake 0.3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ダイヤル錠 */
.dials { display: flex; gap: 18px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.dial-group .gl { text-align: center; color: var(--dim); font-size: 12px; margin-bottom: 2px; }
.dial-row { display: flex; gap: 6px; }
.dial { display: flex; flex-direction: column; align-items: center; }
.dial button { padding: 0 8px; font-size: 11px; line-height: 18px; }
.dial .val { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #0d0f16; border: 1px solid var(--line); font-size: 22px; margin: 3px 0; font-family: monospace; }
/* 並べ替え */
/* 順に押す */
.grid { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 8px 0; }
.grid-row { display: flex; gap: 6px; }
.cell { width: 56px; height: 48px; font-size: 18px; background: #3a3a42; }
.cell.on { background: var(--gold); color: #1a1408; }
.trail { font-size: 12px; color: var(--dim); text-align: center; min-height: 18px; }
/* スイッチ */
/* 選ぶ */
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.choice { padding: 8px 14px; }
/* ずらして読む */
/* オーラリー */
.orrery { display: flex; gap: 16px; align-items: center; }
.clocklock { display: flex; gap: 16px; align-items: center; }
.clockbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.clockbtns .wide { grid-column: 1 / 3; }
.planets { display: flex; flex-direction: column; gap: 6px; }

/* デバッグ: ワイプ用に空けている領域を表示 */
#debug { position: absolute; right: 10px; top: 62px; display: none; gap: 4px; z-index: 5; }
body.debug #debug { display: flex; }
body.debug #stage::before, body.debug #stage::after { content: 'ワイプ'; position: absolute; bottom: 0; width: 200px; height: 135px; border: 1px dashed rgba(255, 100, 100, 0.6); color: rgba(255, 100, 100, 0.6); font-size: 11px; padding: 4px; pointer-events: none; z-index: 30; }
body.debug #stage::before { left: 0; }
body.debug #stage::after { right: 0; }

/* 部屋の動き(炎・光・埃・星・灯台の光)。--fxd は、動く要素を作り直したときに engine.js が入れる負の遅れ。
   どの動きも「ページを開いた時刻から始まった」ことになるので、作り直しても動きが最初に戻らない。
   要素ごとのずれ(埃や星を、ばらばらに動かす)は、絵の側で style="--d:-2.3s" と書く(animation-delay を直接書くと、--fxd が効かなくなる。tests/scenes.js が確かめる) */
#fx-svg * { animation-delay: calc(var(--fxd, 0s) + var(--d, 0s)); }
.flame { animation: flicker 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flicker { 0% { transform: scale(1, 1); opacity: 1; } 40% { transform: scale(1.08, 0.94) translateX(0.4px); opacity: 0.9; } 100% { transform: scale(0.94, 1.08) translateX(-0.4px); opacity: 1; } }
.glowA { animation: glowPulse 2.8s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.6; } }
.dust { animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0.1; } 50% { opacity: 0.5; } 100% { transform: translate(8px, -16px); opacity: 0.1; } }
.tw { animation: twinkle 3.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* 灯台の光: 縦の軸のまわりを回るので、横から見ると左右に振れて見える */
.beam { animation: beamSweep 8s linear infinite; }
@keyframes beamSweep {
  0%, 100% { transform: scaleX(1); opacity: 1; } 12.5% { transform: scaleX(0.707); opacity: 0.75; } 25% { transform: scaleX(0.02); opacity: 0; } 37.5% { transform: scaleX(-0.707); opacity: 0.75; }
  50% { transform: scaleX(-1); opacity: 1; } 62.5% { transform: scaleX(-0.707); opacity: 0.75; } 75% { transform: scaleX(-0.02); opacity: 0; } 87.5% { transform: scaleX(0.707); opacity: 0.75; }
}
@keyframes beamRot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 回転台: 楕円(上から斜めに見た円)の縁を印が進む。楕円そのものは回さない */
.spin > * { animation: dashRun 5s linear infinite; }
@keyframes dashRun { to { stroke-dashoffset: -300; } }
/* 歯車(正面から見た円) */
.gear, .gearR { animation: beamRot 4s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.gearR { animation-duration: 2.2s; animation-direction: reverse; }

/* ───── タイトル画面とエンディング(画面いっぱい。左下・右下 200×135 のワイプの場所には何も置かない) ───── */
.screen { position: absolute; left: 0; top: 0; width: 960px; height: 540px; z-index: 20; overflow: hidden; background: #0d0f16; }
.screen.hidden { display: none; }
.screen-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
#title-screen .screen-art { background-color: #3a3550; background-image: linear-gradient(#2a2f5a, #c9805a 55%, #3a5068 56%, #4e5e38); }
#ending-screen .screen-art { background-color: #141a30; background-image: linear-gradient(#141a30 46%, #1e2a40 46.5%, #2e3a28 74%); }
.title-name { position: absolute; left: 50px; top: 52px; margin: 0; white-space: nowrap; font-size: 38px; font-weight: normal; line-height: 1.25; color: #f3e2b0; letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(40, 20, 10, 0.8); }
.screen-btns { position: absolute; left: 380px; top: 410px; width: 200px; display: flex; flex-direction: column; gap: 10px; }
#ending-screen .screen-btns { left: 330px; width: 300px; top: 440px; flex-direction: row; justify-content: center; }
.screen-btns.hidden, .screen-btns .hidden, .ending-result.hidden, .ending-text.hidden { display: none; }
.screen-btns button { white-space: nowrap; background: rgba(14, 16, 24, 0.72); color: var(--ink); border: 1px solid var(--gold); border-radius: 4px; padding: 8px 14px; font-size: 15px; letter-spacing: 0.1em; }
.screen-btns button:hover { background: rgba(217, 184, 90, 0.25); }
.screen-note { position: absolute; left: 380px; top: 506px; width: 200px; margin: 0; text-align: center; font-size: 11px; color: #d8d2c4; text-shadow: 0 0 4px #000; }
/* 結末の文: 一行ずつ浮かび上がる(engine.js の showEnding) */
.ending-text { position: absolute; left: 230px; top: 36px; width: 500px; text-align: center; font-size: 15px; line-height: 1.9; color: #f0eadc; text-shadow: 0 0 4px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
.ending-text p { margin: 0; opacity: 0; transition: opacity 1.4s ease-in; }
.ending-text p.on { opacity: 1; }
.ending-text p.gap { height: 0.9em; }
.ending-result { position: absolute; left: 230px; width: 500px; text-align: center; color: #e8e2d2; text-shadow: 0 0 4px #000, 0 0 10px rgba(0, 0, 0, 0.9); animation: fade-in 2.4s ease-in; }
.ending-result h2 { margin: 0 0 6px; font-size: 19px; font-weight: normal; letter-spacing: 0.12em; color: var(--gold); }
.ending-result h2::before, .ending-result h2::after { content: ''; display: inline-block; width: 40px; height: 1px; margin: 0 12px; vertical-align: middle; background: rgba(217, 184, 90, 0.6); }
.ending-result .stats-line { margin: 0; font-size: 12px; color: #d8d2c4; }
.ending-result .stats-line span + span::before { content: '・'; margin: 0 6px; color: var(--dim); }
.ending-result .note { color: #b8b2a6; font-size: 12px; margin: 6px 0 0; }
#ending-screen .screen-btns:not(.hidden) { animation: fade-in 1.6s ease-in; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 重ね物: 背後の灯台の光の帯、対岸の灯台の明滅、真エンディングの車の灯り */
.ending-fx { position: absolute; inset: 0; width: 960px; height: 540px; pointer-events: none; }
.end-beam { transform-box: view-box; transform-origin: 480px -400px; animation: end-beam 9s ease-in-out infinite alternate; }
@keyframes end-beam { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.end-blink { animation: end-blink 5s step-end infinite; }
@keyframes end-blink { 0% { opacity: 1; } 12% { opacity: 0.1; } 24% { opacity: 1; } 36% { opacity: 0.1; } }
/* 車の灯りは、engine.js の driveCar が道の曲がり角を順にたどって動かす */
.end-car { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .end-beam { animation: none; } }