/* =====================================================================
   紙のしおりテーマ（デザインE案）：style.css のあとに読み込み、全画面に適用
   ベージュの紙・墨色の文字・えんじ色の差し色・手書き風の見出し
   ===================================================================== */
:root {
  color-scheme: light;
  --night: #e9dcc3;
  --panel: #f6efe1;
  --card: #fbf7ef;
  --ink: #2f2a27;
  --muted: #5f544c;
  --gold: #9e3f52;
  --rose: #b5566a;
  --line: #cdb994;
  --hand: "Klee One", var(--serif);
  background: #e9dcc3;
  color: var(--ink);
}
body { background: none; }
.sky { display: none; }
.paper-backdrop { z-index: 0; }
.eyebrow { color: var(--gold); }
em { color: var(--gold); }
.error { color: #a23a4f; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline-color: var(--gold); }

/* ボタン */
.primary { color: #fff8f0; background: #9e3f52; box-shadow: 0 8px 18px rgba(158, 63, 82, .22); }
.secondary { background: transparent; border: 1.5px solid #9e3f52; color: #9e3f52; }
.quiet { color: var(--muted); }
.sticky-actions { background: none; }
.toast { background: #2f2a27; color: #f6efe1; border-color: transparent; }

/* 写真の仮画像 */
.photo { background: linear-gradient(160deg, #c9b79a, #a8927a 55%, #8f7b68); }
.photo-fallback { background: linear-gradient(160deg, #c9b79a, #a8927a 55%, #8f7b68); }
.photo-fallback::before { color: #fbf3e2; }
.photo-fallback span { color: #fffaf0; }
.photo-fallback small { color: #f3e8d6; }

/* ロック画面 */
.lock-icon { color: #9e3f52; filter: none; }
.lock-title { font-family: var(--hand); }
.lock-dot { border-color: #9e3f52; }
.lock-dot.filled { background: #9e3f52; box-shadow: none; }
.lock-view.unlocked .lock-dot { background: #9e3f52; border-color: #9e3f52; }
.lock-status { color: #a23a4f; }
.lock-view.unlocked .lock-status { color: #9e3f52; }
.lock-key { background: #f8f2e6; border: 1px solid #d6c4a2; color: var(--ink); box-shadow: 0 2px 0 #d9c9aa; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lock-key:active { background: #efe2c9; }
.lock-key.del { box-shadow: none; }

/* スタート画面 */
.birthday-seal { color: #9e3f52; }
.birthday-seal span { border-color: #c9b58f; outline-color: #c9b58f55; font-family: "Cormorant Garamond", Georgia, serif; }
.birthday-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: var(--ink); }
.birthday-title em { color: #9e3f52; }
.recipient { font-family: var(--hand); color: #9e3f52; font-size: 19px; }
.intro { color: var(--muted); }
input[type="password"] { background: var(--card); border-color: #d6c4a2; color: var(--ink); }

/* マップ（目次） */
.map-header { position: relative; padding: 14px 36px 18px 0; }
.map-header .progress-row { margin-right: -36px; }
.ribbon { position: absolute; right: 10px; top: calc(-28px - env(safe-area-inset-top, 0px)); width: 20px; height: 112px; background: linear-gradient(90deg, #8a3346, #a8475b 50%, #8a3346); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.script-eyebrow { display: block; font: italic 500 19px "Cormorant Garamond", Georgia, serif; color: #9e3f52; }
.hand-title, .map-header h1 { margin: 4px 0 0; font: 600 clamp(27px, 8vw, 32px)/1.4 var(--hand); letter-spacing: .08em; }
.map-date { margin-top: 6px; font-size: 12px; letter-spacing: .16em; color: var(--muted); }
.progress-row { margin-top: 26px; gap: 12px; }
.toc-label { font: 700 13px var(--serif); letter-spacing: .4em; color: var(--muted); }
.progress-track { height: 2px; background: #c3ad85; border-radius: 0; }
.progress-track span { background: #9e3f52; }
.stage-list { gap: 14px; padding: 6px 0 4px; }
.stage.toc { display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px; align-items: center; gap: 10px; min-height: 64px; padding: 8px 2px; border-radius: 6px; text-align: left; color: var(--ink); }
.stage.toc .toc-num { font: 600 26px/1 "Cormorant Garamond", Georgia, serif; color: #8c8076; align-self: center; }
.stage.toc .stage-label { padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stage.toc .stage-number { font-size: 10px; font-weight: 700; letter-spacing: .24em; color: #9e3f52; }
.stage.toc .stage-number:empty { display: none; }
.toc-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.stage.toc .stage-name { margin: 0; font: 700 18px/1.5 var(--serif); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-dots { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #a8916a; transform: translateY(-5px); }
.stage.toc .stage-status { font-size: 12px; color: var(--muted); }
.stage.toc .medal { width: 46px; height: 46px; padding: 0; background: none; border: 0; box-shadow: none; display: grid; place-items: center; justify-self: end; color: #6f645c; }
.stage.toc .lock { position: static; }
.stage.toc .lock svg { width: 20px; height: 24px; filter: none; }
.stage.toc .unlock-ring { border-color: #9e3f52; }
.stage.toc[data-state="locked"] .toc-num, .stage.toc[data-state="locked"] .stage-name { color: #8c8076; }
.stage.toc[data-state="locked"] .stage-name { letter-spacing: .24em; }
.stage.toc[data-state="cleared"] .toc-num, .stage.toc[data-state="open"] .toc-num { color: #9e3f52; }
.stage.toc[data-state="open"] .stage-status { color: #9e3f52; }
/* 次のページ：紙のカードに広がる */
.stage.toc[data-state="ready"] { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
.stage.toc[data-state="ready"] .toc-num { color: var(--ink); padding-top: 20px; }
.stage.toc[data-state="ready"] .stage-label { padding: 18px 18px 20px; gap: 8px; background: var(--card); border: 1px solid #d6c4a2; border-radius: 4px; box-shadow: 0 1px 0 #fffaf0 inset, 0 10px 22px rgba(90, 64, 40, .16); }
.stage.toc[data-state="ready"] .stage-name { font-size: 20px; letter-spacing: .24em; }
.stage.toc[data-state="ready"] .toc-dots { display: none; }
.stage.toc[data-state="ready"] .stage-status { font-size: 13px; line-height: 1.7; color: #5c524b; }
.stage.toc[data-state="ready"] .medal { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toc-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border-radius: 6px; background: #9e3f52; color: #fff8f0; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.stage.toc .medal { animation: none; }
/* 目次の封蝋（小） */
.mini-seal { position: relative; width: 42px; height: 42px; transform: rotate(-10deg); display: grid; place-items: center; }
.mini-seal .wax-body { position: absolute; inset: 0; }
.mini-seal-letter { position: relative; font: italic 600 18px/1 "Cormorant Garamond", Georgia, serif; color: #f2c9cf; text-shadow: -1px -1px 0 rgba(60, 10, 20, .55), 1px 1px 0 rgba(255, 210, 215, .25); }
.mini-seal::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(40, 5, 15, .55), inset -1px -1px 1px rgba(255, 190, 200, .3); }
.map-footer { color: var(--muted); }
.map-footer span { color: #a8916a; opacity: 1; }
.map-footer p { font: 600 14px var(--hand); letter-spacing: .06em; }

/* クイズのシート */
.sheet-backdrop { background: rgba(47, 42, 39, .45); }
.sheet { background: #f4ecdc; border-color: #d6c4a2; box-shadow: 0 -16px 40px rgba(60, 40, 20, .25); }
.sheet-grip { background: #cdb994; }
.quiz-lock { filter: none; }
.quiz-question { color: var(--ink); font-family: var(--hand); }
.quiz-choice { background: var(--card); border-color: #d6c4a2; color: var(--ink); }
.quiz-choice:active { background: #efe2c9; }
.quiz-choice.correct { background: #9e3f52; color: #fff8f0; }
.quiz-form input { background: #fffaf1; border-color: #d6c4a2; color: var(--ink); }
.quiz-form input[aria-invalid="true"] { border-color: #b5566a; }
.quiz-feedback[data-kind="wrong"] { color: #a23a4f; }
.quiz-feedback[data-kind="hint"], .quiz-feedback[data-kind="correct"] { color: #9e3f52; }

/* ステージ詳細 */
#detail-title { font-family: var(--hand); letter-spacing: .1em; }
.detail-photo { border-radius: 2px; border: 10px solid #fbf8f1; box-shadow: 0 12px 26px rgba(80, 55, 30, .2); transform: rotate(-1deg); }
.memory { background: none; border: 0; border-radius: 0; padding: 4px 2px 0; font-family: var(--serif); font-size: 15px; line-height: 2.1; }
.memory::before { content: "\201C"; display: block; font: 600 38px/.6 "Cormorant Garamond", Georgia, serif; color: #b9a47f; margin-bottom: 4px; }
.voucher { background: var(--card); color: var(--ink); box-shadow: 0 12px 24px rgba(90, 64, 40, .16); }
.voucher::before { border-color: #d6c4a2; }
.voucher-label { color: #9e3f52; }
.voucher-note { color: #5c524b; }
.voucher-stub { border-left-color: #cdbb98; }
.voucher-for, .voucher-valid { color: #5c524b; }
.voucher-star { color: #9e3f52; text-shadow: none; }

/* 案内画面 */
.nav-hold h1 { font-family: var(--hand); }
.sensor-status { color: #9e3f52; }
.compass { background: var(--card); border-color: #ddcdaf; box-shadow: 0 12px 26px rgba(90, 64, 40, .12), inset 0 0 0 10px #f6efe2; }
.compass::before { border-color: #c9b58f; }
.compass::after { border-color: #e3d6bd; }
.compass.near { box-shadow: 0 0 0 3px #9e3f5233, 0 12px 26px rgba(90, 64, 40, .12), inset 0 0 0 10px #f6efe2; }
.dial-label, .dial-bottom, .dial-top { color: #9e3f52; }
.arrow svg { filter: drop-shadow(0 3px 6px rgba(80, 40, 30, .25)); }
#distance-value { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
#trend[data-trend="closer"] { color: #9e3f52; }
#trend[data-trend="farther"] { color: #4f6585; }
.hint-banner { position: relative; background: #fbf3d9; border: 0; border-radius: 4px; box-shadow: 0 8px 18px rgba(90, 64, 40, .14); }
.hint-banner::before { content: ""; position: absolute; left: 50%; top: -10px; width: 74px; height: 20px; margin-left: -37px; background: rgba(214, 196, 160, .8); transform: rotate(-3deg); }
.hint-mark { color: #9e3f52; }
.hint-banner p { font-family: var(--hand); font-weight: 600; }
.hint-mode, .hint-mode p { color: var(--ink); }
.guide { background: var(--card); border: 1px solid #e0d2b6; border-radius: 6px; box-shadow: 0 10px 22px rgba(90, 64, 40, .1); }
.guide-list li::before { color: #fff8f0; background: #9e3f52; }
.guide-list li:not(:last-child)::after { background: #d8c7a6; }
.guide-time { color: #9e3f52; }
.arrive-manual.armed { background: #fbf3d9; color: var(--ink); box-shadow: 0 0 0 3px #9e3f5244; }
.debug-panel { border-color: #b9a47f; }
.debug-panel legend { color: #9e3f52; }
.debug-badge { background: #9e3f52; color: #fff8f0; }

/* 最後の画面 */
.movie-screen { border-color: #d6c4a2; box-shadow: 0 12px 26px rgba(80, 55, 30, .2); }
.movie-decoration { color: #f3e3c4; }
.gift-symbol { color: #9e3f52; }
.gift-symbol span { border-color: #cdb994; box-shadow: none; }
.final-message { font-family: var(--hand); font-size: 16px; }
.gift-message { color: #9e3f52; }