/* ============================================
   LOST THING 保管記録 — 案2
   昼の浜辺 × マンガの線 × ミントグリーン
   ロボットの台詞は「四角い」吹き出し（本編準拠）
   ============================================ */

:root {
  --ink: #1d1d1d;
  --mint: #52c8a2;
  --mint-deep: #2fa580;
  /* 枠や塗りは --mint-deep のまま。白地に小さい文字を置くときだけ、
     読める濃さ（白との比 5.3:1）のこちらを使う */
  --mint-text: #17795c;
  --mint-light: #e9f8f2;
  --mint-sky: #bdecd9;
  --sand: #fdfdf9;
  --gray: #a6a6a6;
  --line-w: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(180deg, var(--mint-sky) 0%, #ffffff 240px, var(--sand) 100%);
  color: var(--ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
  min-height: 100vh;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 140px;
}

/* ---------- ヘッダー（浜辺の空） ---------- */

.lt-head {
  position: relative;
  text-align: center;
  padding: 34px 0 18px;
}

.lt-head .deco { position: absolute; pointer-events: none; }

.lt-title {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.lt-title .en {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.16em;
}

.lt-title .hl {
  background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 92%, transparent 92%);
  padding: 0 6px;
}

.lt-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #5f7168;
  letter-spacing: 0.12em;
}

/* 説明文だけを、ふつうの日本語に読み替えるボタン（枠の中に置く） */
.plain-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.plain-mini {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #5f7168;
  background: #fff;
  border: 2px solid #b7cfc6;
  border-radius: 999px;
  padding: 2px 12px;
  cursor: pointer;
  line-height: 1.9;
}

.plain-mini:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--mint-light);
}

.plain-mini.on {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--mint-light);
}

.plain-mini.on:hover { background: var(--mint); }

/* ---------- アプリ枠 = 大きな1コマ ---------- */

.app-frame {
  background: #fff;
  border: 3.5px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
}

/* ---------- ロボット対話エリア ---------- */

.robot-bar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, var(--mint-light) 0%, #fff 100%);
  border-bottom: 2px dashed #cfe8dd;
}

.robot-face {
  flex-shrink: 0;
  width: 74px;
}

.robot-face svg { display: block; width: 100%; height: auto; }

/* ロボットの台詞＝四角い箱（本編準拠） */
.speech-box {
  position: relative;
  flex: 1;
  border: 3px solid var(--ink);
  background: #fff;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 2;
  min-height: 66px;
}

.speech-box::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 26px;
  width: 14px;
  height: 3px;
  background: var(--ink);
}

.speech-box .sfx {
  display: block;
  font-size: 0.72rem;
  color: #657b72;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.speech-box.thinking { color: #627a70; }

/* ---------- 検索 ---------- */

.lt-search {
  display: flex;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: var(--line-w) solid var(--ink);
}

.lt-search input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 11px 18px;
  border: var(--line-w) solid var(--ink);
  border-radius: 999px;
  outline: none;
  background: #fff;
}

.lt-search input::placeholder { color: #627a70; font-weight: 500; }
.lt-search input:focus { box-shadow: 0 0 0 4px var(--mint-light); }

.lt-search button {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 10px 24px;
  border: var(--line-w) solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.lt-search button:hover { background: var(--mint-text); color: #fff; }

/* ---------- 保管庫（引き出しの壁） ---------- */

.drawers-sec { padding: 20px 22px 6px; }

.sec-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  padding: 1px 12px;
  margin-bottom: 6px;
}

.sec-hint { font-size: 0.74rem; color: #627a70; margin-bottom: 12px; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-bottom: 16px;
}

@media (max-width: 560px) {
  .drawer-grid { grid-template-columns: repeat(2, 1fr); }
}

.drawer {
  position: relative;
  font-family: inherit;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f6f1 100%);
  padding: 14px 8px 30px;
  text-align: center;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink);
  transition: transform 0.1s;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.05);
}

.drawer:hover { transform: translateY(-2px); background: var(--mint-light); }

.drawer.open { background: var(--mint-light); transform: translateY(2px); }

/* 取っ手 */
.drawer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 30px;
  height: 9px;
  border: 3px solid var(--ink);
  border-top: none;
  border-radius: 0 0 9px 9px;
}

.drawer .count {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: #627a70;
}

/* ---------- 詳細エリア ---------- */

.detail-sec { padding: 4px 22px 24px; }

.detail-box {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  animation: appear 0.3s ease;
}

@keyframes appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--mint-light);
  border-bottom: 2.5px solid var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.detail-head .close-btn {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 1px 12px;
  cursor: pointer;
}

.detail-head .close-btn:hover { background: var(--mint); }

/* 階層をひとつ戻る（引き出しは開けたまま） */
.detail-head .back-btn {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
  padding: 1px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.detail-head .back-btn:hover { background: var(--mint-text); color: #fff; }

/* 戻るが在るときは、トジルを右隣に並べる */
.detail-head .back-btn + .close-btn { margin-left: 0; }

.detail-body { padding: 18px 20px; }

/* 引き出しの中身 */
.drawer-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  text-align: left;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.item-card:hover { background: var(--mint-light); }

.item-card .ic { width: 34px; flex-shrink: 0; }
.item-card .ic svg { display: block; width: 100%; height: auto; }

.item-card .nm { font-size: 0.82rem; font-weight: 900; line-height: 1.4; }
.item-card .st { display: block; font-size: 0.68rem; font-weight: 500; color: #627a70; }

/* 品物の詳細 */
.item-detail { display: flex; gap: 18px; align-items: flex-start; }

.item-detail .big-ic {
  flex-shrink: 0;
  width: 84px;
  padding: 10px;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: var(--sand);
}

.item-detail .big-ic svg { display: block; width: 100%; height: auto; }

.item-detail .meta { font-size: 0.74rem; color: #627a70; letter-spacing: 0.06em; }

.item-detail h3 {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.item-detail h3 .hl {
  background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 92%, transparent 92%);
  padding: 0 3px;
}

/* ロボットのコメント（四角い吹き出し・小） */
.robot-note {
  position: relative;
  margin-top: 12px;
  border: 2.5px solid var(--ink);
  background: #fff;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 2;
}

.robot-note::before {
  content: "管理人ロボット";
  position: absolute;
  top: -11px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: var(--ink);
  color: #fff;
  border-radius: 3px;
  padding: 0 8px;
}

.record-btn {
  margin-top: 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  padding: 7px 20px;
  cursor: pointer;
}

.record-btn:hover { background: var(--mint-text); color: #fff; }

@media (max-width: 560px) {
  .item-detail { flex-direction: column; }
}

/* ---------- 保管記録（ドキュメント） ---------- */

.record-doc h3 {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.record-doc h3 .hl {
  background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 92%, transparent 92%);
  padding: 0 3px;
}

.record-doc .rmeta {
  font-size: 0.72rem;
  color: #627a70;
  letter-spacing: 0.06em;
  border-bottom: 2px dashed #d8e8e0;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.record-doc p { margin-bottom: 1em; font-size: 0.92rem; }

.record-doc .tenki {
  background: var(--mint-light);
  border: 2px dashed var(--mint);
  border-radius: 8px;
  padding: 12px 18px;
  margin: 14px 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.record-doc .tenki p { margin: 0; }

.record-doc .kifu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.record-doc .kifu span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  padding: 2px 12px;
}

.record-doc .rec-note {
  font-size: 0.82rem;
  color: #5f7168;
  border-left: 3px solid var(--mint);
  padding-left: 12px;
}

/* ---------- 調べた記録の棚 ---------- */

.records-sec { padding: 0 22px 22px; }

.records-list { display: flex; flex-direction: column; gap: 8px; }

.record-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  padding: 9px 14px;
  cursor: pointer;
}

.record-link:hover { background: var(--mint-light); }

.record-link .tag {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 2px solid var(--mint-deep);
  color: var(--mint-text);
  border-radius: 4px;
  padding: 0 7px;
}

.records-progress { font-size: 0.72rem; color: #627a70; margin-top: 8px; }

/* ---------- 珈琲ボタン ---------- */

.coffee-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.coffee-btn:hover { background: var(--mint-light); }
.coffee-btn svg { display: block; }

/* 遊び方へ戻る（珈琲ボタンの上に積む。スクロールしても常に出ている） */
.guide-btn {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 30;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 8px 18px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.guide-btn:hover { background: var(--mint-light); }
.guide-btn svg { display: block; }

/* ---------- 音ボタン ---------- */

.sound-btn {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 30;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.sound-btn:hover { background: var(--mint-light); }
.sound-btn svg { display: block; }
.sound-btn .snd-off { display: none; }
.sound-btn.muted .snd-on { display: none; }
.sound-btn.muted .snd-off { display: block; }
.sound-btn.muted { background: #f1f1ec; }

.finale-load .dots::after {
  content: "…";
  animation: dots 1.2s steps(3) infinite;
}

@keyframes dots {
  0% { content: "・"; }
  50% { content: "・・"; }
  100% { content: "・・・"; }
}

/* ---------- フッター ---------- */

.lt-foot {
  margin-top: 40px;
  text-align: center;
  font-size: 0.72rem;
  color: #627a70;
  line-height: 2;
}

/* 作品クレジット（世界の外側の情報として、フッターに小さく） */
.lt-foot .credit {
  display: block;
  margin-top: 10px;
  font-size: 0.7rem;
  color: #627a70;
  letter-spacing: 0.04em;
  line-height: 1.9;
}
.lt-foot .credit a {
  color: #5f7168;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.lt-foot .credit a:hover { color: var(--mint-deep); }

.lt-foot .beach-line {
  display: block;
  margin: 0 auto 12px;
  max-width: 320px;
}

::selection { background: var(--mint); color: var(--ink); }

/* ---------- スマホ調整 ---------- */

@media (max-width: 600px) {
  .wrap { padding: 0 10px 150px; }

  .lt-head { padding: 26px 0 14px; }
  .lt-title { font-size: 1.35rem; }
  .lt-sub { font-size: 0.68rem; letter-spacing: 0.06em; }
  .lt-head .deco { transform: scale(0.8); }

  .robot-bar { gap: 10px; padding: 16px 12px 14px; }
  .robot-face { width: 56px; }
  .speech-box {
    padding: 10px 12px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    min-height: 60px;
  }
  .speech-box::before { left: -12px; top: 22px; width: 12px; }

  .lt-search { padding: 14px 12px; gap: 8px; }
  .lt-search input { padding: 11px 15px; }
  .lt-search button { padding: 10px 16px; font-size: 0.88rem; letter-spacing: 0.08em; }

  .drawers-sec { padding: 16px 12px 4px; }
  .drawer { padding: 12px 6px 28px; font-size: 0.74rem; min-height: 78px; }

  .detail-sec { padding: 4px 12px 20px; }
  .detail-body { padding: 14px 12px; }
  .drawer-items { grid-template-columns: 1fr 1fr; gap: 8px; }
  .item-card { flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; }
  .item-detail { gap: 12px; }

  .records-sec { padding: 0 12px 18px; }

  .epilogue-sec { padding: 8px 12px 26px; }

  .coffee-btn { right: 12px; bottom: 12px; font-size: 0.74rem; padding: 9px 14px; }
  .guide-btn { right: 12px; bottom: 62px; font-size: 0.72rem; padding: 7px 14px; }
  .sound-btn { left: 12px; bottom: 12px; width: 46px; height: 46px; }
}

/* ============================================
   ミヤギ先生のイラスト
   ============================================ */

/* 保管品の詳細に出す1枚目（線画アイコンの代わり） */
.big-ic.art {
  width: 190px;
  flex-shrink: 0;
}

.big-ic.art img {
  display: block;
  width: 100%;
  height: auto;
}

/* 説明文の下に添える2枚目（ロボットが持っている絵） */
.item-sub-art {
  margin-top: 12px;
  text-align: center;
}

.item-sub-art img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .big-ic.art { width: 150px; margin: 0 auto; }
  .item-sub-art img { max-width: 240px; }
}

/* 遊び方ページの扉絵 */
.guide-art {
  margin: 0 0 4px;
  border-bottom: 2px dashed #cfe8dd;
  padding: 18px 24px 20px;
  text-align: center;
}

.guide-art img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.guide-art figcaption {
  margin-top: 10px;
  font-size: 0.74rem;
  color: #627a70;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .guide-art { padding: 14px 16px 16px; }
  .guide-art img { max-width: 100%; }
}

/* ============================================
   エンディング（暗転 → ロボットの言葉 → マンガ3枚）
   ============================================ */

/* 終幕のあいだ、後ろのページは動かさない */
body.noscroll { overflow: hidden; }

.ending-ov {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* 探索のあいだは本編と同じ「昼の浜辺」。
     暗闇にロボットが浮かぶと、この世界のものではなくなってしまう。
     暗くなるのは記憶に入るとき（.dark）だけ。 */
  background: linear-gradient(180deg, var(--mint-sky) 0%, #ffffff 52%, var(--sand) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: ending-in 0.9s ease both;
}

@keyframes ending-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 記憶の中へ入る。ここではじめて暗くなる。
   グラデーション→単色のトランジションは挙動が怪しいので、
   暗幕を別の層として重ね、その不透明度だけを動かす。 */
.ending-ov::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0d0f10;
  opacity: 0;
  transition: opacity 1.3s ease;
  pointer-events: none;
}

.ending-ov.dark::before { opacity: 1; }

/* 中身は暗幕より前に置く */
.ending-stage,
.finale-scene,
.ending-line,
.ending-hint,
.ending-skip { z-index: 1; }

.ending-ov.closing { animation: ending-out 0.7s ease both; }

@keyframes ending-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 暗転中のロボットの言葉 */
.ending-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 30em);
  text-align: center;
  color: #f2f5f3;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 2.2;
  opacity: 0;
  pointer-events: none;
}

.ending-line.in { animation: ending-say 0.9s ease both; }

@keyframes ending-say {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* マンガを置く場所 */
.ending-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ending-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 3vh 3vw;
}

.ending-page img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 6px 40px rgba(0,0,0,0.55);
}

.ending-page.in { animation: ending-fade 0.9s ease both; }
.ending-page.out { animation: ending-unfade 0.5s ease both; }

@keyframes ending-fade {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

@keyframes ending-unfade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 3枚目だけ縦に長い（1:2.5）。
   横長の画面では全体が細くなってしまうので、
   幅に合わせて上から下へゆっくり視線を下ろす。
   縦長の画面（スマホ）はそのまま全体を見せる。 */
@media (orientation: landscape) {
  .ending-page.tall { align-items: flex-start; padding: 0; }
  .ending-page.tall img {
    /* 画面の高さの2倍ほどに引き伸ばして、空→夕陽→ふたり、と
       下りていく余地を作る（パン幅は画像の高さから自動で決まる） */
    max-height: none;
    height: auto;
    width: min(48vw, 75vh);
  }
  .ending-page.tall.in img { animation: ending-pan 9s ease-in-out 0.9s both; }
}

@keyframes ending-pan {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% + 100vh)); }
}

/* クリックで次へ、の目印
   マンガ画像は枠の外側が白地のことが多く、そこに重なると
   薄い文字色では読めなくなるため、暗いピルを敷いて
   画像の色に関わらず読めるようにする。 */
.ending-hint {
  position: absolute;
  left: 50%;
  bottom: 3.5vh;
  transform: translateX(-50%);
  text-align: center;
  color: #f2f5f3;
  background: rgba(13, 15, 16, 0.75);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.ending-hint.on { animation: ending-blink 4.4s ease-in-out infinite; }

/* ゆっくり呼吸するくらいの点滅にする（速いと絵の邪魔になる） */
@keyframes ending-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

.ending-skip {
  position: absolute;
  right: 16px;
  top: 16px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #cfe0d8;
  background: transparent;
  border: 2px solid rgba(207,224,216,0.5);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}

.ending-skip:hover { color: #0d0f10; background: #cfe0d8; }

/* 探索中（まだ明るい）のスキップは、紙の上のボタンとして見せる */
.ending-ov:not(.dark) .ending-skip {
  color: var(--ink);
  background: #fff;
  border-color: var(--ink);
}

/* クリア後、トップからもう一度見に行くための小さな導線 */
.replay-box {
  text-align: center;
  padding: 4px 12px 20px;
}

.replay-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 7px 20px;
  cursor: pointer;
}

.replay-btn:hover { background: var(--mint-light); }

/* ============================================
   終幕・第一幕 — 探索（暗転して、大きなロボットと吹き出し）
   ============================================ */

.finale-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 5vh 6vw;
  color: var(--ink);
  transition: opacity 0.9s ease;
  --chip-w: min(200px, 24vw);
  --chip-gap: 26px;
}

.finale-scene.gone { opacity: 0; pointer-events: none; }

/* ロボット本体 */
.finale-robot {
  width: min(190px, 26vh);
  color: var(--ink);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.finale-robot svg { display: block; width: 100%; height: auto; }

/* バイザー。ふだんは黒、チップを読むときだけミントに灯る */
.finale-robot .visor {
  fill: #1d1d1d;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill 0.6s ease;
}

.finale-robot.reading .visor {
  fill: var(--mint);
  animation: visor-read 1.6s ease-in-out infinite;
}

@keyframes visor-read {
  0%, 100% { fill: var(--mint-deep); }
  50%      { fill: var(--mint); }
}

/* 浜へ行っているあいだは、ロボットが画面からいなくなる */
.finale-scene.away .finale-robot {
  opacity: 0;
  transform: translateX(-14vw);
}

/* 吹き出し（本編と同じ四角い箱） */
.finale-bubble {
  position: relative;
  max-width: min(90vw, 34em);
  border: 3px solid var(--ink);
  background: #fff;
  padding: 16px 24px;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 2.1;
  text-align: center;
  opacity: 0;
}

.finale-bubble.in { animation: finale-say 0.7s ease both; }

@keyframes finale-say {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ロボットが留守のあいだの音だけの行 */
.finale-bubble.sfx {
  border-color: transparent;
  background: none;
  color: #627a70;
  text-shadow: 0 0 10px #fff;
  font-weight: 500;
  letter-spacing: 0.34em;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
}

/* ロボットとチップを収める枠。チップが出るまではロボットが中央 */
.finale-figure {
  position: relative;
  display: flex;
  justify-content: center;
  transition: transform 0.9s ease;
}

/* チップが出たら、二つ並んだ幅の分だけ左へ寄せて、全体を中央に戻す */
.finale-scene.has-chip .finale-figure {
  transform: translateX(calc((var(--chip-w) + var(--chip-gap)) / -2));
}

/* 見つかったチップ（ロボットの右どなり） */
.finale-chip {
  position: absolute;
  left: calc(100% + var(--chip-gap));
  top: 50%;
  width: var(--chip-w);
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.finale-chip img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(29, 29, 29, 0.28));
}

.finale-chip.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* 足元の波（暗闇ではなく浜辺にいることを示す） */
.finale-shore {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  width: min(320px, 60vw);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.finale-shore svg { display: block; width: 100%; height: auto; }

.ending-ov.dark .finale-shore { opacity: 0; }

/* 読み込み中の表示 */
.finale-load {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  /* この文字が出ている 3.2 秒間はまだ浜辺が明るい。暗転と同時に消えるので、
     明るい背景で読める濃さにしておく */
  color: var(--mint-text);
  animation: finale-say 0.7s ease both;
}

@media (max-width: 560px) {
  .finale-scene { gap: 16px; }
  .finale-bubble { padding: 13px 16px; line-height: 2; }
  .finale-scene { --chip-w: min(130px, 34vw); --chip-gap: 14px; }
}

/* 縦に余裕がないとき（横長の小さい画面）は、ロボットと吹き出しを横に並べる */
@media (orientation: landscape) and (max-height: 520px) {
  .finale-scene { flex-direction: row; gap: 26px; }
  .finale-robot { width: min(130px, 34vh); }
}


/* ============================================
   読みやすさ・操作しやすさ
   ============================================ */

/* キーボードで操作している人に、いまどこにいるかを見せる。
   マウス操作のときは出ない（:focus-visible） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--mint-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 端末側で「視差効果を減らす」を選んでいる人には、
   長い動きを見せない。演出は静止した状態で最後まで届く。 */
@media (prefers-reduced-motion: reduce) {
  .ending-page.tall.in img { animation: none !important; transform: none !important; }
  .ending-ov,
  .ending-ov::before,
  .ending-page,
  .ending-line,
  .finale-scene,
  .finale-robot,
  .finale-chip,
  .finale-bubble,
  .detail-box,
  .item-card,
  .drawer { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ending-hint.on,
  .finale-robot.reading .visor { animation: none !important; }
  .ending-hint.on { opacity: 0.9; }
}