:root {
    --paper: #f4ecd8; --paper2: #ebe0c4; --ink: #3b2f22; --muted: #7a6a55;
    --teal: #1f5f6b; --gold: #b8892b; --red: #9b3b2e; --water: #cfe0e0;
    --frame: #b39a6b; --frame-bg: #d9d4ca; --tab-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink);
    font-family: -apple-system, "Hiragino Sans", system-ui, sans-serif; font-size: 17px; overscroll-behavior: none; }
  /* ホーム画面から開くと iOS が画面の下を状態バーの分だけ短く渡し、ページの外に帯が残る。
     帯は外枠の色で塗り、状態バーの下・ホームバーの上にも同じ外枠を置いて「外枠／線／中身／線／外枠」に見せる。
     iOS は帯を body の色で塗るようなので、html と body を外枠の色にし、紙の色は main に持たせる */
  html, body { background: var(--frame-bg); }
  /* 画面に影をかけている間は、帯も同じ濃さに沈める（影は帯まで届かないので、外枠の色に影を重ねた色を直接塗る） */
  :is(html, body):has(#coach.on) { background: #827f7b; }
  :is(html, body):has(#playPanel.open) { background: #65635e; }
  :is(html, body):has(#modal.open) { background: #74716c; }
  :is(html, body):has(.perm) { background: #3a3936; }
  :is(html, body):has(#dossier.open) { background: #2d251f; }
  /* 暗い全面の場面を開いている間は、帯も場面の色にする */
  :is(html, body):has(.scene.open, #book.open, #installGuide, #restoreGuide) { background: #0f0a07; }
  main { background: var(--paper); }
  body { display: flex; flex-direction: column; position: fixed; inset: 0; height: auto; overflow: hidden; }
  button { font: inherit; color: inherit; }

  header { padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 8px; background: var(--paper2);
    border-bottom: 1px solid #d6c7a3; }
  header .row { display: flex; align-items: baseline; justify-content: space-between; }
  header h1 { font-size: 18px; margin: 0; letter-spacing: .05em; }
  header .day { font-size: 13px; color: var(--muted); border: 0; background: none; padding: 4px 0 4px 8px; text-align: right; }
  header .day b { display: block; font-size: 12px; font-weight: 700; color: var(--teal); margin-top: 1px; }
  header { position: relative; z-index: 12; }
  /* 地図の切り替え（解放済みの日だけ） */
  #mapMenu { position: absolute; right: 10px; top: calc(100% - 4px); display: none; min-width: 190px; background: #fffaf0; border: 1px solid #cdbb94; border-radius: 14px;
    box-shadow: 0 8px 24px #0004; padding: 6px; }
  #mapMenu.open { display: grid; gap: 4px; }
  #mapMenu button { display: flex; flex-direction: column; align-items: flex-start; min-height: 52px; padding: 6px 14px; border: 0; border-radius: 10px; background: none; text-align: left; }
  #mapMenu button b { font-size: 17px; } #mapMenu button small { font-size: 12px; color: var(--muted); }
  #mapMenu button.on { background: var(--paper2); } #mapMenu button.on b { color: var(--teal); }
  .progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .progress .bar { flex: 1; margin-top: 0; }
  #totalPct { min-width: 3.2em; text-align: right; font: 700 12px/1 -apple-system, system-ui, sans-serif; color: var(--teal); font-variant-numeric: tabular-nums; }
  .bar { height: 8px; background: #d9ccad; border-radius: 4px; margin-top: 8px; overflow: hidden; }
  /* 果たした指令の「済」の判。押されるときは上から落ちてきて、ドンと沈む */
  header h1 { display: flex; align-items: center; gap: 10px; }
  .m-stamp { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px double var(--red); color: var(--red);
    font: 700 14px/1 "Hiragino Mincho ProN", "Yu Mincho", serif; font-style: normal; transform: rotate(-14deg); opacity: .85; }
  .m-stamp.fresh { animation: mstamp .7s cubic-bezier(.3,0,.3,1) .3s both; }
  @keyframes mstamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.8); } 65% { opacity: 1; transform: rotate(-14deg) scale(.9); } 100% { opacity: .85; transform: rotate(-14deg) scale(1); } }
  /* 朝の流れの間は、見出しの地図の切り替えも押せない */
  body.opening header { pointer-events: none; }
  .bar > i { display: block; height: 100%; background: var(--teal); transition: width .6s; }
  .proto { font-size: 11px; color: var(--red); }

  main { flex: 1; position: relative; overflow: hidden; }
  .view { position: absolute; inset: 0; display: none; }
  .view.on { display: block; }

  /* map */
  #mapWrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  #map { position: relative; flex: none; }
  #map svg, #map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #fog { pointer-events: none; }
  .area-hit { cursor: pointer; }
  .label { font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
  .badge circle { fill: var(--red); } .badge text { fill: #fff; font-size: 13px; font-weight: 700; }
  .badge.zero circle { fill: var(--teal); }
  .here { fill: #2a7de1; stroke: #fff; stroke-width: 3; }
  .here-ring { fill: none; stroke: #2a7de1; stroke-width: 2; animation: ping 1.6s infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes ping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
  .env { cursor: pointer; animation: bob 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes bob { 50% { transform: translateY(-5px); } }
  #locBtn { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; border-radius: 24px;
    border: 1px solid #cdbb94; background: #fffaf0; font-size: 22px; box-shadow: 0 2px 6px #0002; }

  #map { transition: transform .38s cubic-bezier(.3,.7,.3,1); }
  /* area detail map */
  #detail { position: absolute; inset: 0; background: var(--water); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 3; }
  #detail.open { opacity: 1; pointer-events: auto; }
  #dWrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
  #dmap { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
  #dmap.anim { transition: transform .35s cubic-bezier(.3,.7,.3,1); }
  #v-map.zoomed #mapWrap, #v-map.zoomed #locBtn { visibility: hidden; }
  #dmap svg, #dmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #dFog { pointer-events: none; }
  #dBack { position: absolute; left: 10px; top: 10px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid #cdbb94; background: #fffaf0; color: var(--teal); box-shadow: 0 2px 6px #0002; }
  .lm { font-size: 12px; fill: #5b4a36; paint-order: stroke; stroke: #fff8; stroke-width: 3px; }
  .pin { cursor: pointer; transition: opacity .2s; }
  .pin .body { stroke: #fff; stroke-width: 2.5; }
  .pin text { font-size: 17px; pointer-events: none; }
  #dOver.focusing .pin:not(.sel) { opacity: .3; }
  .halo { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
  #dOver.focusing .halo { animation: halo 1.4s ease-out infinite; }
  @keyframes halo { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
  .shadow { fill: #0003; opacity: 0; } #dOver.focusing .shadow { opacity: 1; }
  .pin.todo .body { fill: var(--red); } .pin.done .body { fill: var(--teal); }
  .pin.locked .body { fill: #9a8f80; }
  .seal-env { cursor: pointer; animation: bob 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .seal-env .seal-mark { fill: #e2c98f; font-size: 11px; pointer-events: none; }
  .seal-env.opened { opacity: .7; animation: none; }
  .pin.todo { animation: pinbob 2s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes pinbob { 50% { transform: translateY(-3px); } }

  /* bottom sheet */
  #sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; transition: transform .28s cubic-bezier(.2,.8,.2,1), height .28s; background: #fffaf0;
    border-radius: 18px 18px 0 0; box-shadow: 0 -4px 18px #0003; transform: translateY(105%);
    display: flex; flex-direction: column; z-index: 5; }
  #sheet.open { transform: translateY(0); }
  #sheet.dragging { transition: none; }
  .drag { touch-action: none; cursor: grab; }
  .grip-zone { height: 26px; display: flex; align-items: center; justify-content: center; }
  .grip { width: 48px; height: 6px; border-radius: 3px; background: #b9a67c; }
  .sheet-head { padding: 0 8px 8px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .sheet-head .ttl { flex: 1; min-width: 0; }
  .sheet-head h2 { font-size: 18px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
  .mbar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: #e3d6b8; overflow: hidden; }
  .mbar i { display: block; height: 100%; background: var(--teal); }
  /* 段ごとに見せる中身を切り替える: 低=見る / 中=選ぶ / 高=振り返る */
  .sec { display: none; }
  #sheet[data-level="low"] .sec-low, #sheet[data-level="mid"] .sec-mid { display: flex; }
  .sec-low { padding: 0 16px; }
  .next { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; border-radius: 12px; border: 1px solid #e0d2b0;
    background: #fff; padding: 0 12px; text-align: left; }
  .next small { display: block; color: var(--gold); font-size: 12px; letter-spacing: .08em; }
  /* 中: フォーカス中のピン1件だけ */
  .sec-mid { flex-direction: column; padding: 0 16px; }
  .focus-top { display: flex; align-items: center; gap: 12px; }
  .focus-top .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--paper2); display: grid; place-items: center; font-size: 24px; flex: none; }
  .focus-top .tt { flex: 1; min-width: 0; }
  .focus-top .tt small { display: block; font-size: 12px; color: var(--muted); }
  .focus-top .tt b { display: block; font-size: 18px; line-height: 1.35; }
  /* 紹介文が長くても「始める」が隠れないよう、4行で切る（全文は案件の画面で読める） */
  .focus p { margin: 10px 0 12px; font-size: 15px; line-height: 1.65; color: #5b4a36; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .focus .go { width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: var(--teal); color: #fff; font-weight: 700; font-size: 17px; }
  .bookbtn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #cdbb94; background: #fff; color: var(--ink); font-size: 14px; }
  /* 冊子: シートとは別のものとして開く。表紙 → エリアごとに1ページ。左右にめくる */
  #book { position: fixed; inset: 0; z-index: 15; display: none; flex-direction: column; background: #1f1712; }
  .stage { position: relative; flex: 1; min-height: 0; display: flex; perspective: 1100px; perspective-origin: 50% 40%; }
  #book.open { display: flex; }
  /* 記録する演出の間は、上の操作を押せないことが見て分かるよう薄くする */
  #book.recording .book-top button { opacity: .35; pointer-events: none; transition: opacity .3s; }
  .book-top { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; color: #e9dfc8; }
  .book-top button { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid #e9dfc855; background: none; color: #e9dfc8; }
  .book-top span { font-size: 13px; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .8; }
  /* ページは重ねて置き、めくりで入れ替える（横スクロールはしない）。縦スクロールは紙の中だけ */
  .pages { position: relative; flex: 1; min-height: 0; touch-action: pan-y; }
  .pg { position: absolute; inset: 0; padding: 4px 14px calc(14px + var(--safe-b)) 24px; display: none; }
  .pg.cur { display: flex; z-index: 2; } .pg.under { display: flex; z-index: 1; }
  /* 左端は最初から独立した層にしておく。めくる紙（3D）が重なったり離れたりするたびに層が作り直されて、色は変わらないのにチラつかないように */
  .lstack { will-change: transform; transform: translateZ(0); }
  .lstack { position: absolute; top: 4px; bottom: calc(14px + var(--safe-b)); left: 2px; width: 22px; z-index: 3; display: none; border-radius: 0;  /* 頁（z=2）より上に置き、頁の落とし影がかぶって明るさが変わらないように */
    background: linear-gradient(90deg, #d8caa9 0%, #eee3c8 45%, #e6d9ba 80%, #bfae88 100%); box-shadow: -3px 6px 14px #0007; }
  .lstack.on { display: block; }
  .lstack.lcover { background: linear-gradient(90deg, #0000 40%, #0007), #1c3645; box-shadow: -3px 6px 14px #0008, inset 0 0 0 1px #c9a86a33; }
  /* アルバム（入会式のあと）は表紙の裏も茶色の革 */
  #book[data-mode="album"] .lstack.lcover { background: linear-gradient(90deg, #0000 40%, #0007), #5a3521; }
  /* 古い本の段階は、表紙の裏も古びた革（表紙の表ほど日に焼けていないので少し濃く、擦れもおだやか）。
     左へ落ちた表紙の裏と左端（.lstack.lcover）は同じ素材: 綴じ目の近くは地の色・ざらつき・綴じ目の影だけにし、しみや擦れは綴じ目から離れた所に置く */
  #book.worn .board .back { background:
      radial-gradient(ellipse 30% 20% at 38% 62%, #1a120a4d, #0000 70%),
      radial-gradient(ellipse 22% 14% at 22% 24%, #c9b89a1f, #0000 70%),
      radial-gradient(circle at 0 0, #d9c9a840, #0000 16%),
      radial-gradient(circle at 0 100%, #d9c9a840, #0000 18%),
      url("icons/grain-leather.png") 0 0 / 90px 90px,
      linear-gradient(90deg, #0000 calc(100% - 13px), #0007), #4b473a; }
  #book.worn .lstack.lcover { background: url("icons/grain-leather.png") 0 0 / 90px 90px, linear-gradient(90deg, #0000 calc(100% - 13px), #0007), #4b473a; }
  .c-dim { opacity: .38; filter: grayscale(1); }
  .paper.blank { background: #d8d3c9; display: flex; flex-direction: column; }
  .paper.blank .c-title { color: #8d877c; }
  .paper.blank > .c-crumb { align-self: flex-start; }
  .c-crumb { text-align: left; }
  /* 「地図でこの案件へ」はタイトルの行数に関わらず頁の同じ位置（縦の中ほど）に置く。説明はその上に積む */
  .paper.blank .c-mid { position: absolute; left: 34px; right: 18px; top: 54%; display: flex; flex-direction: column; align-items: center; }
  .paper.blank .c-note { position: absolute; bottom: calc(100% + 14px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .paper.blank .c-mid small { font-size: 12px; letter-spacing: .3em; color: #8d877c; font-family: -apple-system, system-ui, sans-serif; }
  .paper.blank .c-note span { font-size: 14px; color: #7d766b; }
  /* 乗車前から開示するアトラクションの未乗車の頁: 灰色にせず、封をした見た目 */
  .paper.sealed { background: #f7f0de; }
  .paper.sealed::after { content: ""; position: absolute; inset: 10px 10px 10px 22px; border: 1.5px dashed #cdbb94; border-radius: 4px 10px 10px 4px; pointer-events: none; }
  .paper.sealed .c-go { position: relative; z-index: 1; }
  /* しおり: 最後に書き込んだ頁に挟まる紐 */
  .ribbon { position: absolute; top: 0; right: 96px; width: 13px; height: 46px; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, #7d2a22, #a8463a 45%, #7d2a22); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); box-shadow: 0 2px 3px #0004; }
  /* 日の扉: エリアの扉より一段格上。金の二重枠と中央揃え */
  .paper.door { background: radial-gradient(circle at 50% 30%, #fffaf0, #f6ecd4 80%); }
  .day-door { margin: 6px 0 0; padding: 20px 12px 16px; border: 3px double var(--gold); border-radius: 6px; text-align: center; position: relative; }
  .day-door::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b8892b55; border-radius: 3px; pointer-events: none; }
  .dd-no { font-size: 32px; font-weight: 700; letter-spacing: .12em; line-height: 1.1; }
  .dd-date { margin-top: 8px; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; letter-spacing: .25em; color: var(--gold); }
  .dd-orn { margin: 10px 0 6px; color: var(--gold); font-size: 18px; letter-spacing: 1em; padding-left: 1em; }
  .dd-orn::before, .dd-orn::after { content: "───"; letter-spacing: 0; color: #d6c28f; margin: 0 8px; }
  .dd-title { font-size: 22px; font-weight: 700; letter-spacing: .3em; padding-left: .3em; }
  .dd-score { justify-content: center; margin: 12px 0 0; }
  .dd-toc { margin-top: 14px; }
  .day-door .c-go { position: relative; }
  /* インデックスタブ（付箋）: 冊子の上端。2日目の頁が綴じ足されてから出る。付箋の分だけ頁を下げる */
  #book.has-tabs .stage { margin-top: 24px; }
  /* 付箋の下端は紙の上端（4px）にぴったり合わせ、紙に重ねない。重ねると、めくる間に上の紙が外れた瞬間だけ付箋の足が見えて飛び出して見える */
  .daytabs { position: absolute; left: 40px; right: 20px; top: -24px; height: 28px; z-index: 1; display: flex; align-items: flex-end; gap: 6px; opacity: 0; pointer-events: none; }
  /* 出すときだけふわっと。閉じ始めたら（settled が外れたら）すぐ消す。閉じていく表紙の上に付箋が残って飛び出して見えないように */
  #book.settled.has-tabs .daytabs { opacity: 1; pointer-events: auto; transition: opacity .25s; }
  .daytabs button { width: 70px; height: 23px; padding: 0; border: 0; border-radius: 8px 8px 0 0; letter-spacing: .12em; transition: height .2s;
    font: 700 12px/1 -apple-system, system-ui, sans-serif; color: #f4e6c6; background: linear-gradient(180deg, #8a6536, #6a4c2a); box-shadow: 0 -1px 4px #0006; }
  .daytabs button[data-n="2"] { background: linear-gradient(180deg, #3b6572, #2a4d58); }
  .daytabs button[data-n="3"] { background: linear-gradient(180deg, #7d3b36, #5c2a2a); }
  .daytabs button[data-day="album"] { width: 82px; color: #f3dfb4; background: linear-gradient(180deg, #2c3a55, #1c2638); }
  .daytabs button.on { height: 28px; color: #fff; box-shadow: 0 -2px 8px #0008, inset 0 0 0 1px #e2c98f99; }
  .paper.blank .c-go { width: auto; min-width: 220px; min-height: 60px; padding: 0 28px; border-radius: 30px; font-size: 18px; margin: 0;
    box-shadow: 0 6px 18px #1f5f6b77; animation: gopulse 2.2s ease-in-out infinite; }
  @keyframes gopulse { 50% { transform: scale(1.04); box-shadow: 0 8px 26px #1f5f6b99; } }
  /* めくる紙（1枚もの）。途中でわずかに歪ませて柔らかく見せる */
  .fl { position: absolute; top: 4px; bottom: calc(14px + var(--safe-b)); left: 24px; right: 14px; transform-origin: left center; transform-style: preserve-3d;
    z-index: 6; pointer-events: none; will-change: transform; }
  .fl > .ff, .fl > .fb { position: absolute; inset: 0; border-radius: 0 12px 12px 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .fl > .ff > .paper { position: absolute; inset: 0; border-radius: 0 12px 12px 0; box-shadow: inset 16px 0 16px -12px #0006; overflow: hidden; }
  .fl > .ff.blank { box-shadow: inset 16px 0 16px -12px #0006; }
  .fl > .ff.blank { background: #fbf5e6; }
  .fl > .fb { border-radius: 12px 0 0 12px; transform: rotateY(180deg); background: #efe3c7; box-shadow: inset -18px 0 18px -12px #0006; }
  .fl > .ff > i, .fl > .fb > i { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
  .fl > .ff > i { background: linear-gradient(90deg, #0000 0%, #fff4 35%, #0000 55%, #0005 100%); }
  .fl > .fb > i { background: linear-gradient(270deg, #0000 25%, #0005 100%); }
  .c-go { box-shadow: 0 4px 14px #1f5f6b55; }
  .book-top .r { display: flex; align-items: center; gap: 10px; }
  .pgshade { position: absolute; top: 4px; bottom: calc(14px + var(--safe-b)); left: 24px; right: 14px; z-index: 5; pointer-events: none; opacity: 0;
    border-radius: 3px 12px 12px 3px; background: linear-gradient(90deg, #000a 0%, #0004 30%, #0000 70%); }
  .paper { flex: 1; min-width: 0; position: relative; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; border-radius: 0 12px 12px 0; padding: 20px 14px 44px 26px;
    background: #fbf5e6;
    box-shadow: inset 16px 0 16px -12px #0006, 1px 1px 0 #e9ddc2, 2px 2px 0 #d6c8a6, 3px 3px 0 #e9ddc2, 4px 4px 0 #d3c4a0, 5px 5px 0 #e6d9bb, 0 10px 26px #0009;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .pgno { position: sticky; top: 100%; text-align: center; font-size: 12px; color: var(--muted); margin-top: 24px; }
  /* 表紙 */
  .toc { text-align: left; border-top: 1px solid #e2c98f55; }
  .toc button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 46px; border: 0; border-bottom: 1px solid #e2c98f33; background: none; color: #e2c98f; font-family: inherit; font-size: 15px; text-align: left; }
  .toc button span { margin-left: auto; font-size: 12px; opacity: .75; font-family: -apple-system, system-ui, sans-serif; }
  /* エリアの頁 */
  .p-no { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; letter-spacing: .3em; color: var(--gold); }
  .p-area { font-size: 21px; font-weight: 700; line-height: 1.35; margin: 6px 84px 4px 0; }
  .p-score { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 18px; }
  .p-score b { font-size: 44px; line-height: 1; } .p-score span { font-size: 18px; color: var(--muted); } .p-score small { font-size: 12px; color: var(--muted); margin-left: 4px; }
  .p-stamp { position: absolute; right: 16px; top: 20px; width: 76px; height: 76px; border-radius: 50%; border: 3px double var(--red); color: var(--red);
    display: grid; place-items: center; font-size: 19px; font-weight: 700; transform: rotate(-14deg); opacity: .82; letter-spacing: .08em; }
  .p-stamp.done { background: #9b3b2e14; }
  /* エリアの扉: 調査記録の一覧。解明済みは小さな写真と朱印、未解明は点線の空き枠 */
  .ents { border-top: 2px solid #3b2f22; margin-top: 4px; }
  .ent { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #e3d5b4;
    background: none; text-align: left; font-family: inherit; color: var(--ink); }
  .ent .th { flex: none; width: 62px; height: 54px; background: #fff; padding: 3px 3px 9px; box-shadow: 0 1px 4px #0003; transform: rotate(-2.5deg); }
  .ent:nth-child(even) .th { transform: rotate(2deg); }
  .ent .th div { width: 100%; height: 100%; background: linear-gradient(135deg, #d6cbb4, #efe5cf) center / cover; display: grid; place-items: center; font-size: 17px; }
  .ent.todo { opacity: .45; filter: grayscale(1); }
  .ent.todo .th { background: none; box-shadow: none; border: 1.5px dashed #cbbb95; transform: none; padding: 0; }
  .ent.todo .th div { background: none; color: #cbbb95; font-size: 20px; }
  .ent .tx { flex: 1; min-width: 0; }
  .ent .tx small { display: block; font-size: 10px; color: var(--gold); letter-spacing: .15em; font-family: -apple-system, system-ui, sans-serif; }
  .ent .tx b { display: block; font-size: 15px; line-height: 1.4; margin-top: 2px; }
  .ent .tx span { display: block; font-size: 12px; color: #7a6a55; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ent.todo .tx b { color: #a8987c; font-weight: 400; }
  .ent .eseal { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); display: grid; place-items: center;
    font-size: 14px; font-weight: 700; transform: rotate(-14deg); opacity: .85; }
  .ent.todo .eseal { border: 1.5px dashed #cbbb95; color: #cbbb95; transform: none; font-weight: 400; font-size: 11px; }
  .p-sec { margin: 22px 0 8px; font-size: 11px; letter-spacing: .35em; color: var(--muted); font-family: -apple-system, system-ui, sans-serif; }
  .p-notes div { font-size: 13px; padding: 3px 0; color: #5b4a36; } .p-notes small { color: var(--red); margin-right: 8px; font-family: -apple-system, system-ui, sans-serif; }
  .p-sealed { margin-top: 60px; text-align: center; color: var(--muted); line-height: 2; }
  /* 開くときの表紙（アニメーション専用。閉じた冊子 → 表紙が綴じ目を軸にめくれる） */
  /* めくれていく中のページ（パラパラ用） */
  .leaf { position: absolute; top: 4px; bottom: calc(14px + var(--safe-b)); left: 24px; right: 14px; transform-origin: left center; transform-style: preserve-3d; pointer-events: none; z-index: 4; }
  .leaf i, .leaf b { position: absolute; inset: 0; border-radius: 0 12px 12px 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .leaf i { background: #fbf5e6; box-shadow: inset 16px 0 16px -12px #0004; }
  .leaf i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0000, #0003); }
  .leaf b { background: #f1e6cc; transform: rotateY(180deg); border-radius: 12px 0 0 12px; }
  .book-cap { position: absolute; left: 50%; bottom: calc(30px + var(--safe-b)); transform: translateX(-50%); z-index: 3; pointer-events: none; opacity: 0;
    background: #2b2118e6; color: #e2c98f; padding: 10px 18px; border-radius: 22px; font-family: "Hiragino Mincho ProN", serif; letter-spacing: .2em; font-size: 14px; white-space: nowrap; }
  /* 書き込み演出の前は白紙にしておく */
  .unwritten { opacity: 0; }
  /* 文字は一文字ずつインクがのる（遅れは runWrite が一文字ごとに入れる） */
  .ink { opacity: 0; }
  .writing .ink { animation: ink .32s ease-out both; }
  @keyframes ink { from { opacity: 0; } 40% { opacity: .55; } to { opacity: 1; } }
  /* 写真は落ちてきて貼られ、最後にテープが留まる */
  .unpasted { opacity: 0; }
  .untaped::before { opacity: 0; }
  .taped::before { animation: tape .34s cubic-bezier(.2,.8,.3,1.2) both; }
  @keyframes tape { from { opacity: 0; transform: translateY(-8px) rotate(-6deg) scale(1.3, .9); } to { opacity: 1; transform: rotate(2deg); } }
  .unstamped { opacity: 0 !important; }
  /* チュートリアルを終えたとき、ほかのエリアが順に浮かび上がる */
  .area-in { animation: areaIn .9s cubic-bezier(.2,.8,.3,1.1) both; transform-box: fill-box; transform-origin: center; }
  @keyframes areaIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
  .board { position: absolute; top: 4px; bottom: calc(14px + var(--safe-b)); left: 24px; right: 14px; transform-origin: left center;
    transform-style: preserve-3d; pointer-events: none; display: none; z-index: 8; }
  .board .front, .board .back { position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .board .front { background: radial-gradient(circle at 30% 20%, #2f5468, #173040 70%, #11242f); color: #e2c98f; box-shadow: inset 16px 0 16px -12px #000a, 0 10px 30px #000a;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-family: "Hiragino Mincho ProN", serif; }
  .board .front .crest { width: 96px; height: 96px; border-radius: 50%; border: 2px solid #e2c98f; display: grid; place-items: center; font-size: 40px; }
  .board .front h2 { margin: 0; font-size: 32px; letter-spacing: .3em; }
  .board .front small { letter-spacing: .4em; font-size: 11px; opacity: .7; }
  /* 表紙の裏: 左に落ちたあとの左端（.lstack.lcover）と同じ素材。落ちた瞬間に色が入れ替わらないように */
  .board .back { border-radius: 12px 0 0 12px; background: linear-gradient(90deg, #0000 calc(100% - 13px), #0007), #1c3645; transform: rotateY(180deg); box-shadow: inset 0 0 0 1px #c9a86a33; }
  .board.album .back { background: linear-gradient(90deg, #0000 calc(100% - 13px), #0007), #5a3521; }
  /* 表紙に刻まれた文字（S・E・A）と紋章 */
  .engr { display: flex; gap: 18px; justify-content: center; min-height: 36px; margin-top: 4px; }
  .engr span { width: 30px; text-align: center; font: 700 30px/36px "Hiragino Mincho ProN", "Yu Mincho", serif; color: #e2c98f; text-shadow: 0 1px 0 #0008, 0 -1px 0 #fff3; }
  .engr span.off { color: transparent; }
  /* 表紙の段階。cv1 = 2日目の夜の明かしまでの古い本（文字はでたらめな字がぼやけて揺れる）/ cv3 = 明かしのあとの完全版 */
  .cv { transition: filter 2s ease, opacity 2s ease; }
  .cv .ch { display: inline-block; }
  /* 古い本: 文字だけがぼやけ、一文字ずつ定まらずに揺れ続ける */
  small.cv1, h2.cv1 { color: #bba77a; }
  small.cv1 .ch, h2.cv1 .ch { filter: blur(2px); opacity: .7; animation: unsettled var(--du, 2s) ease-in-out var(--dl, 0s) infinite alternate; }
  @keyframes unsettled {
    0% { filter: blur(2.2px); transform: translate(0, 0); opacity: .66; }
    28% { filter: blur(.9px); transform: translate(.9px, -.7px); opacity: .84; }
    55% { filter: blur(3.2px); transform: translate(-1.1px, .6px); opacity: .56; }
    80% { filter: blur(1.4px); transform: translate(.3px, 1px); opacity: .76; }
    100% { filter: blur(2px); transform: translate(-.4px, -.3px); opacity: .7; }
  }
  .crest.cv1 { opacity: .5; border-style: dotted !important; }
  /* 紋章の上に S・E・A を重ねる（紋章が透けても読めるよう影をつける）。古い本のうちは2日目から集まっていく */
  .crest-wrap { position: relative; display: grid; place-items: center; }
  .crest-wrap .engr { position: absolute; inset: 0; margin: 0; align-items: center; min-height: 0; }
  .crest-wrap .engr span { text-shadow: 0 0 8px #0b1a22, 0 0 3px #0b1a22, 0 1px 0 #000; }
  .engr.cv1:not(.gather) { opacity: 0; }
  .engr.cv1.gather span.off { border-radius: 4px; background: #0002; box-shadow: inset 0 1px 4px #0008; opacity: .6; }
  /* 古びた表紙: 色あせた革・ざらつき・しみ・擦れて白んだ角と縁・細かな傷。2日目は薄れ、3日目は消える */
  .front .wear { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; font-style: normal; overflow: hidden;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .78  0 0 0 0 .62  0 0 0 1.1 -.52'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'><g fill='none' stroke='%23e8d9b8' stroke-linecap='round' opacity='.35'><path d='M40 90 l70 -18' stroke-width='.8'/><path d='M210 60 l40 22' stroke-width='.6'/><path d='M60 300 q40 -10 90 6' stroke-width='.7'/><path d='M190 250 l-50 60' stroke-width='.5'/><path d='M120 150 l18 4' stroke-width='1'/><path d='M230 330 l30 -8' stroke-width='.8'/></g></svg>") center / 100% 100% no-repeat,
      radial-gradient(ellipse 34% 22% at 70% 76%, #2a1c0e88, transparent 70%),
      radial-gradient(ellipse 26% 18% at 24% 30%, #1a120a77, transparent 70%),
      radial-gradient(ellipse 20% 12% at 58% 16%, #c9b89a2e, transparent 70%),
      radial-gradient(circle at 100% 0, #d9c9a866, transparent 16%),
      radial-gradient(circle at 100% 100%, #d9c9a866, transparent 18%),
      radial-gradient(circle at 0 100%, #d9c9a844, transparent 14%),
      linear-gradient(160deg, #7a6a4c88, #4a3d2a99);
    box-shadow: inset 0 0 0 2px #d8c6a055, inset 0 0 18px 4px #d8c4a040, inset 0 0 70px #0008; }
  .front > :not(.wear) { position: relative; }  /* 文字・紋章・刻印は擦れの層の上に */

  .front .wear.cv3 { opacity: 0; }

  .engr.glow span.off { color: #e2c98f33; text-shadow: none; }
  .engr.glow span.on { animation: letterglow 2.4s ease-in-out infinite; }
  /* 表紙への刻印（厳かに）。時間の流れ: 表紙が寄る 0〜1.3s → 光の粒が集まる 1.4〜2.8s → 金の輪が絞られる 2.2〜3.1s →
     上から彫り込まれる 2.9〜4.1s → 光が弾け、表紙がわずかに沈み、背後に光が差す 4.0s〜 → 一言 4.8s → 「続ける」6.0s。
     粒・輪・閃光・後光はふだん見えない（テスト用モードで動きを止めても、文字と一言だけが残る） */
  .scene.engrave { background: radial-gradient(circle at 50% 38%, #2c2016, #120c08 58%, #0f0a07); }
  .engr span.fresh { position: relative; overflow: visible; }
  .engr span.fresh b { display: inline-block; font: inherit; animation: egcarve 1.2s cubic-bezier(.4,0,.2,1) 2.9s both, egsettle 2.4s ease-out 4.1s both; }
  @keyframes egcarve {
    from { clip-path: inset(0 0 100% 0); color: #fff4d6; text-shadow: 0 0 14px #ffd98a, 0 0 4px #fff; }
    to { clip-path: inset(0 0 0 0); color: #fff4d6; text-shadow: 0 0 26px #ffcf6e, 0 0 8px #fff; } }
  @keyframes egsettle {
    from { color: #fff4d6; text-shadow: 0 0 30px #ffcf6e, 0 0 10px #fff; }
    to { color: #e2c98f; text-shadow: 0 0 8px #0b1a22, 0 0 3px #0b1a22, 0 1px 0 #000, 0 0 14px #f4d58d66; } }
  .engr span.fresh i { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
  .eg-mote { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px 2px #f4c96a;
    animation: egmote 1.2s cubic-bezier(.5,0,.3,1) calc(1.4s + var(--i) * .07s) both; }
  @keyframes egmote { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
  .eg-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1.5px solid #f4d58d; box-shadow: 0 0 14px #f4c96a, inset 0 0 10px #f4c96a88;
    animation: egring .9s cubic-bezier(.3,0,.2,1) 2.2s both; }
  @keyframes egring { 0% { opacity: 0; transform: scale(3.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); } }
  .eg-flash { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffe7a8 40%, #f4c96a00 70%);
    animation: egflash .9s ease-out 4s both; }
  @keyframes egflash { 0% { opacity: 0; transform: scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(14); } }
  .eg-rays { position: absolute; inset: -48%; pointer-events: none; opacity: 0;
    background: repeating-conic-gradient(from 0deg, #f4d58d38 0 3deg, #0000 3deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 18%, #0000 62%); mask: radial-gradient(circle, #000 18%, #0000 62%);
    animation: egrays 1.6s ease-out 4s both, egspin 60s linear 4s infinite; }
  @keyframes egrays { from { opacity: 0; } to { opacity: 1; } }
  @keyframes egspin { to { rotate: 360deg; } }
  .scene.engrave .sc-card { animation: egthud .55s cubic-bezier(.3,0,.3,1) 4.05s both; }
  @keyframes egthud { 0%, 100% { translate: 0 0; scale: 1; } 30% { translate: 0 3px; scale: .985; } }
  .eg-cap { font: 17px "Hiragino Mincho ProN", "Yu Mincho", serif; animation: egcap 1.4s ease-out 4.8s both; }
  @keyframes egcap { from { opacity: 0; letter-spacing: .6em; filter: blur(4px); } to { opacity: 1; letter-spacing: .22em; filter: blur(0); } }
  .scene.engrave .sc-next { animation: egbtn .9s ease-out 6s both; }
  @keyframes egbtn { from { opacity: 0; visibility: hidden; transform: translateY(6px); } to { opacity: 1; visibility: visible; transform: none; } }
  @keyframes letterglow { 50% { color: #ffe2a0; text-shadow: 0 0 18px #ffcf6e, 0 0 4px #fff0c8; } }
  .crest-img { border: 0 !important; }
  .crest-img img { width: 100%; height: 100%; }
  /* アルバム（入会式のあと）の表紙: 茶色の革に金の縁取り。記録簿の表紙の指定より強くして上書きされないように */
  .board.album .front, .sc-cover .front.album { background: radial-gradient(circle at 30% 20%, #8a5a3a, #5a3521 70%, #432616); color: #f3dfb4;
    box-shadow: inset 16px 0 16px -12px #000a, 0 10px 30px #000a; }
  .board.album .front::after, .sc-cover .front.album::after { content: ""; position: absolute; inset: 9px 9px 9px 14px; border: 1px solid #e2c98f88; border-radius: 2px 8px 8px 2px; pointer-events: none; }
  .board.album .front .crest, .sc-cover .front.album .crest { border-color: #f3dfb4; color: #f3dfb4; }
  .album-h { font-size: 24px !important; letter-spacing: .15em !important; text-align: center; padding: 0 18px; }
  .shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
  /* 目次 */
  .toc-day { width: 100%; margin-top: 14px; padding: 8px 0 6px; border: 0; background: none; color: var(--gold); text-align: left;
    font: 700 12px/1.4 -apple-system, system-ui, sans-serif; letter-spacing: .14em; }
  .chap { display: block; width: 100%; border: 0; border-top: 1px solid #e3d5b4; background: none; text-align: left; padding: 14px 0 12px; font-family: inherit; color: var(--ink); }
  .chap .row { display: flex; align-items: baseline; }
  .chap .no { flex: none; width: 58px; font-size: 12px; color: var(--gold); }
  .chap .nm { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chap .ld { flex: 1; min-width: 12px; border-bottom: 2px dotted #cbbb95; margin: 0 6px; transform: translateY(-5px); }
  .chap .pn { flex: none; font-size: 13px; color: var(--muted); }
  .chap .meter { display: flex; gap: 4px; margin: 8px 0 0; align-items: center; }
  .chap.locked { opacity: .5; }
  .chap .meter i { width: 16px; height: 5px; border-radius: 2px; background: #e6d9bb; } .chap .meter i.on { background: var(--red); }
  .chap .meter em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; font-family: -apple-system, system-ui, sans-serif; }
  .chap.locked .nm, .chap.locked .no { color: #b8a888; font-weight: 400; }
  /* 項目ページ（解説） */
  .c-crumb { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; color: var(--gold); border: 0; background: none; padding: 6px 0; }
  .c-title { font-size: 21px; font-weight: 700; line-height: 1.4; margin: 6px 0 6px; }
  .c-type { display: inline-block; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; color: var(--muted); border: 1px solid #d6c7a3; border-radius: 10px; padding: 2px 8px; }
  .c-stamp small { display: block; font-size: 10px; font-weight: 400; line-height: 1.3; }
  /* 解明のスタンプはタイトルの上に押す（タイトルの横幅を空けない）。朱肉のように下の文字が透ける */
  .c-stamp { position: absolute; right: 14px; top: 18px; z-index: 1; width: 70px; height: 70px; border-radius: 50%; border: 3px double var(--red); color: var(--red);
    display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.2; transform: rotate(-12deg); opacity: .8; mix-blend-mode: multiply; pointer-events: none; }
  .c-stamp.todo { border-color: #b9a67c; color: #b9a67c; }
  .c-photo { margin: 20px 8px 6px 0; background: #fff; padding: 8px 8px 30px; box-shadow: 0 3px 12px #0003; transform: rotate(-1.2deg); position: relative; }
  .c-photo img, .c-photo .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: linear-gradient(135deg, #cfd8d6, #e9e1cf); }
  .c-photo .ph { display: grid; place-items: center; color: #8a7a62; font-size: 12px; font-family: -apple-system, system-ui, sans-serif; }
  .c-photo figcaption { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 12px; color: #6b5a44; }
  .c-photo::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: #efe3b8cc; transform: rotate(2deg); }
  .c-h { margin: 26px 0 8px; font-size: 11px; letter-spacing: .35em; color: var(--muted); font-family: -apple-system, system-ui, sans-serif; }
  .c-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.85; color: #3f3224; }
  /* 解説に入れた画像は頁の幅に収める（元の大きさのまま出すとはみ出す） */
  .c-text img { display: block; max-width: 100%; max-height: 60vh; height: auto; margin: 6px auto; border: 1px solid #e0d2b0; background: #fff; }
  /* 記録する前の確認。記録する内容の見本を出す */
  .confirm { max-height: calc(100dvh - 48px); overflow-y: auto; }
  .confirm p { margin: 4px 0 18px; }
  .confirm-actions { display: flex; gap: 10px; }
  .rec { margin: 0 0 12px; padding: 10px 12px; background: var(--paper); border-radius: 10px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
  .rec dt { font-size: 12px; color: var(--muted); padding-top: 2px; }
  .rec dd { margin: 0; font-size: 15px; line-height: 1.6; word-break: break-word; }
  .rec-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 12px; }
  .rec-photos figure { margin: 0; background: #fff; padding: 4px; box-shadow: 0 1px 4px #0003; }
  .rec-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  .rec-photos figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 自己申告の欄（点数・サマリー・写真） */
  .field-block { margin: 0 0 16px; }
  .fl-label { display: block; font-weight: 700; margin-bottom: 6px; }
  .fl-label small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 8px; }
  #summary { width: 100%; font-size: 17px; line-height: 1.6; padding: 12px; border-radius: 12px; border: 1px solid #cdbb94; background: #fff; resize: vertical; }
  .report-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .report-shots:empty { display: none; }
  .report-shots figure { margin: 0; display: grid; gap: 6px; }
  .report-shots .shot { margin: 0; max-width: 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .report-shots .cam { min-height: 40px; font-size: 13px; }
  .c-wrote p { padding-left: 12px; border-left: 3px solid var(--red); }
  /* 関わる調査（related）: 探るべき案件へのつながり */
  .related { margin-top: 18px; padding: 12px; border: 1px dashed #b9a67c; border-radius: 12px; background: #fffaf0; }
  .rel { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; border-top: 1px dotted #e0d2b0; background: none; text-align: left; }
  .rel:first-of-type { border-top: 0; }
  .rel .box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cdbb94; display: grid; place-items: center; font-size: 13px; }
  .rel.on .box { background: var(--teal); border-color: var(--teal); color: #fff; }
  .rel .rt { flex: 1; min-width: 0; line-height: 1.4; }
  .rel .rt small { display: block; font-size: 11px; color: var(--muted); }
  .rel .go-mark { flex: none; font-size: 12px; color: var(--teal); font-family: -apple-system, system-ui, sans-serif; }
  .c-rel .rel { font-family: inherit; font-size: 14px; color: var(--ink); }
  .c-rel .rel.on .rt { color: var(--muted); }
  .c-text p.lead { font-size: 16px; font-weight: 700; padding-left: 12px; border-left: 3px solid var(--gold); }
  .c-fig { display: flex; gap: 10px; margin: 6px 0 4px; } .c-fig div { flex: 1; aspect-ratio: 1; background: repeating-linear-gradient(45deg, #efe6d0 0 6px, #e8ddc2 6px 12px);
    border: 1px solid #e0d2b0; display: grid; place-items: center; font-size: 11px; color: #9a8a70; font-family: -apple-system, system-ui, sans-serif; text-align: center; padding: 4px; }
  .c-fig img { flex: 1; min-width: 0; max-width: 100%; object-fit: contain; border: 1px solid #e0d2b0; }
  .c-log div { font-size: 14px; padding: 4px 0; color: #5b4a36; } .c-log small { color: var(--red); margin-right: 10px; font-family: -apple-system, system-ui, sans-serif; }
  /* 探索で複数枚撮った写真は、頁に並べて貼る */
  .c-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin: 22px 8px 6px 0; }
  .c-photos .c-photo { margin: 0; padding: 6px 6px 24px; }
  .c-photos .c-photo:nth-child(even) { transform: rotate(1.4deg); }
  .c-photos .c-photo figcaption { font-size: 11px; bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
  .c-photos .c-photo::before { width: 44px; margin-left: -22px; height: 14px; top: -7px; }
  /* 冒険の記録（アトラクション）: 課題とは別の小さな一覧 */
  .rides { border-top: 1px solid #3b2f22; }
  .ride-row { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 1px dotted #d6c7a3; background: none;
    text-align: left; font-family: inherit; color: #a8987c; }
  .ride-row b { flex: 1; min-width: 0; font-size: 14px; font-weight: 400; line-height: 1.4; }
  .ride-row small { flex: none; font-size: 11px; font-family: -apple-system, system-ui, sans-serif; }
  .ride-row .rd-mark { flex: none; width: 16px; height: 16px; border: 1.5px solid #cbbb95; border-radius: 50%; font-size: 10px; display: grid; place-items: center; align-self: center; }
  .ride-row.on { color: var(--ink); } .ride-row.on b { font-weight: 700; } .ride-row.on small { color: var(--red); }
  .ride-row.on .rd-mark { border-color: var(--red); color: var(--red); }
  /* 名の明かしを見返す頁 */
  .night-crest { width: 150px; height: 150px; margin: 26px auto 12px; display: grid; place-items: center; border-radius: 50%; background: #173040; box-shadow: 0 6px 20px #0005; font-size: 40px; color: #e2c98f; }
  .night-crest img { width: 128px; height: 128px; }
  .night-title { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; margin: 0 0 18px; color: #5a4526; }
  .night-at { text-align: right; font-size: 12px; color: var(--muted); font-family: -apple-system, system-ui, sans-serif; }
  /* アルバム: 3日間の写真に、時刻と案件名を添える */
  .paper.album { background: #f6efe2; }
  .al-title { text-align: center; padding-top: 18%; }
  .al-title small { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: .5em; color: var(--gold); }
  .al-title h2 { font-size: 28px; letter-spacing: .12em; margin: 14px 0 8px; }
  .al-title p { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
  .al-lead { margin-top: 34px; font-size: 16px; line-height: 2; }
  .al-day { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid #3b2f22; padding-bottom: 6px; margin-bottom: 16px; }
  .al-day small { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: .2em; color: var(--gold); }
  .al-day b { font-size: 20px; letter-spacing: .15em; }
  /* 日ごとの冒険: 達成した順に下へ積む（左の線が時の流れ） */
  .al-feed { position: relative; padding-left: 16px; border-left: 2px dotted #cbbb95; margin-left: 4px; }
  .al-item { position: relative; padding: 0 0 22px; }
  .al-item::before { content: ""; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #fbf5e6; }
  .al-meta { display: flex; gap: 10px; align-items: baseline; font-family: -apple-system, system-ui, sans-serif; }
  .al-meta small { color: var(--red); font-size: 12px; }
  .al-meta span { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
  .al-item h4 { margin: 4px 0 8px; font-size: 16px; line-height: 1.45; }
  .al-photos { display: grid; gap: 12px 10px; margin: 6px 6px 4px 0; }
  .al-photos.n2 { grid-template-columns: 1fr 1fr; }
  /* 録音（自己申告の録音の欄） */
  .rec-audio { display: block; width: 100%; margin-bottom: 10px; }
  .rec-btn { width: 100%; }
  .rec-btn.recording { background: #9b3b2e; color: #fff; border-color: #9b3b2e; animation: recpulse 1.4s ease-in-out infinite; }
  @keyframes recpulse { 50% { opacity: .75; } }
  .c-audio, .al-audio, .rec-audio-row { display: grid; gap: 6px; margin: 10px 0 0; }
  .c-audio span, .al-audio span, .rec-audio-row span { font-size: 13px; color: var(--muted); letter-spacing: .08em; }
  .c-audio small, .al-audio small, .rec-audio-row small { margin-left: 8px; }
  .c-audio audio, .al-audio audio, .rec-audio-row audio { width: 100%; height: 40px; }
  .al-note { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--gold); font-size: 14px; line-height: 1.8; color: #4a3a28; }
  .al-ph { margin: 0; background: #fff; padding: 7px 7px 8px; box-shadow: 0 3px 10px #0003; transform: rotate(var(--r, 0deg)); }
  .al-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .al-ph figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #5b4a36; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .al-ph figcaption small { color: var(--red); margin-right: 6px; font-family: -apple-system, system-ui, sans-serif; }
  .al-list div { font-size: 15px; padding: 7px 0; border-bottom: 1px dotted #d6c7a3; } .al-list small { color: var(--red); margin-right: 10px; font-family: -apple-system, system-ui, sans-serif; }
  .al-empty { margin-top: 60px; text-align: center; color: var(--muted); }
  .al-last { min-height: 70%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
  .al-last img { width: 96px; height: 96px; margin-bottom: 18px; filter: sepia(1) saturate(2) brightness(.7); }
  .al-last p { font-size: 20px; line-height: 1.9; font-weight: 700; letter-spacing: .08em; margin: 0; }
  .c-locked { margin-top: 26px; padding: 26px 16px; border: 2px dashed #d6c7a3; border-radius: 10px; text-align: center; color: #9a8a70; line-height: 1.9; font-size: 15px; }
  .c-go { margin-top: 18px; width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--teal); color: #fff; font-weight: 700; font-size: 16px; font-family: -apple-system, system-ui, sans-serif; }
  .shot { margin-top: 12px; max-width: 60%; border: 6px solid #fff; box-shadow: 0 2px 8px #0003; }
  #dOver.focusing .pin.sel .body { fill: var(--gold); stroke-width: 3; }
  #dOver.focusing .pin.sel { animation: none; transform: scale(1.45); transform-box: fill-box; transform-origin: bottom center; }
  .item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px;
    border: 0; border-bottom: 1px solid #eadfc4; background: none; padding: 10px 6px; }
  .item .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--paper2); display: grid; place-items: center; font-size: 20px; flex: none; }
  .item .t { flex: 1; } .item .t small { display: block; color: var(--muted); font-size: 13px; }
  .item.done { opacity: .5; } .item.done .ic { background: #cfe3de; }
  .empty { color: var(--muted); padding: 20px 8px; font-size: 15px; }

  /* case screen */
  #case { position: absolute; inset: 0; background: var(--paper); z-index: 10; transform: translateX(100%);
    transition: transform .25s ease; display: flex; flex-direction: column; }
  #case.open { transform: translateX(0); }
  .case-top { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #d6c7a3; }
  .back { border: 0; background: none; font-size: 17px; color: var(--teal); min-height: 44px; padding: 0 10px; }
  .case-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
  .case-body h3 { margin: 0 0 4px; font-size: 21px; }
  .type { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
  .prompt { background: #fffaf0; border: 1px solid #e0d2b0; border-radius: 12px; padding: 14px; line-height: 1.7; margin-bottom: 16px; }
  .case-foot { padding: 10px 16px calc(10px + var(--safe-b)); border-top: 1px solid #d6c7a3; background: var(--paper2); display: flex; gap: 10px; }
  .btn { flex: 1; min-height: 52px; border-radius: 12px; border: 0; background: var(--teal); color: #fff; font-weight: 700; font-size: 17px; }
  .btn.sub { background: #fff; color: var(--ink); border: 1px solid #cdbb94; font-weight: 400; }
  .btn:disabled { opacity: .35; }
  .check { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 1px solid #e0d2b0;
    background: #fff; border-radius: 12px; margin-bottom: 8px; padding: 0 14px; text-align: left; }
  .check .box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--teal); display: grid; place-items: center; flex: none; }
  .check.on .box { background: var(--teal); color: #fff; }
  .choice { display: block; width: 100%; min-height: 54px; border: 1px solid #e0d2b0; background: #fff; border-radius: 12px; margin-bottom: 8px; text-align: left; padding: 0 14px; }
  .choice.ng { border-color: var(--red); animation: shake .3s; }
  @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  .pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .pick button { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #e0d2b0; background: #fff; }
  .pick button:disabled { opacity: .3; }
  .seq { min-height: 54px; border: 2px dashed #cdbb94; border-radius: 12px; padding: 8px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .seq span { background: var(--teal); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 15px; }
  input[type=text] { width: 100%; font-size: 20px; padding: 14px; border-radius: 12px; border: 1px solid #cdbb94; background: #fff; }
  .hint { color: var(--muted); font-size: 15px; margin-top: 10px; }
  .link { border: 0; background: none; color: var(--teal); text-decoration: underline; font-size: 15px; padding: 10px 0; }
  .steps { display: flex; gap: 6px; margin-bottom: 14px; }
  .steps i { flex: 1; height: 6px; border-radius: 3px; background: #d9ccad; } .steps i.on { background: var(--gold); }
  .timer { font-size: 44px; text-align: center; font-variant-numeric: tabular-nums; margin: 8px 0; }
  /* 探索（写真）: 項目ごとに1枚 */
  .shots { display: grid; gap: 10px; }
  .shot-item { border: 1px solid #e0d2b0; background: #fff; border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
  .shot-item.on { border-color: var(--teal); }
  .si-top { display: flex; align-items: center; gap: 10px; }
  .si-top .box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--teal); display: grid; place-items: center; flex: none; }
  .shot-item.on .box { background: var(--teal); color: #fff; }
  .shot-item .shot { margin: 0; max-width: 70%; }
  .cam { display: grid; place-items: center; }
  .example { margin: 0; background: #fffaf0; border: 1px dashed #cdbb94; padding: 6px; border-radius: 8px; }
  .example img { display: block; width: 100%; border-radius: 4px; }
  .example figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
  .report-example { margin-bottom: 10px; }
  /* 自己申告の点数 */
  .score { display: flex; align-items: center; gap: 12px; }
  .score span { flex: none; font-weight: 700; }
  .score input { flex: 1; min-width: 0; font-size: 22px; padding: 12px; border-radius: 12px; border: 1px solid #cdbb94; background: #fff; }
  .prompt.before { font-size: 15px; line-height: 1.8; }
  .prompt.pending { text-align: center; color: var(--muted); font-size: 18px; letter-spacing: .2em; padding: 30px 14px; }
  .prompt.meta b { display: block; margin-bottom: 8px; }
  .meta-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); }
  .meta-row .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cdbb94; display: grid; place-items: center; flex: none; font-size: 13px; }
  .meta-row.on { color: var(--ink); } .meta-row.on .box { background: var(--teal); border-color: var(--teal); color: #fff; }
  .case-tool { display: block; width: 100%; margin-top: 16px; }
  .focus .go:disabled { background: #b9ae9c; }

  /* modal */
  #modal { position: fixed; inset: 0; background: #0007; z-index: 20; display: none; align-items: center; justify-content: center; padding: 24px; }
  #modal.open { display: flex; }
  .card { width: 100%; max-width: 360px; background: #fffaf0; border-radius: 16px; padding: 22px 20px; border: 3px solid var(--gold);
    box-shadow: 0 10px 30px #0005; animation: flip .5s ease; }
  @keyframes flip { from { transform: perspective(600px) rotateY(90deg); } to { transform: perspective(600px) rotateY(0); } }
  .card .kind { font-size: 12px; letter-spacing: .15em; color: var(--gold); }
  .card h4 { margin: 6px 0 10px; font-size: 20px; }
  .card p { line-height: 1.75; margin: 0 0 16px; }
  .letter { border-color: var(--red); font-family: "Hiragino Mincho ProN", serif; }
  .seal { width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #f4d9c9; display: grid; place-items: center; margin: 0 auto 10px; font-size: 24px; }

  /* other tabs */
  .page { position: absolute; inset: 0; overflow-y: auto; padding: 16px 16px 24px; }
  .page h2 { font-size: 19px; margin: 4px 0 12px; }
  .log { border-left: 3px solid var(--gold); padding-left: 14px; }
  .log div { margin-bottom: 14px; } .log small { color: var(--muted); display: block; font-size: 13px; }
  .tool { display: flex; gap: 12px; align-items: center; background: #fffaf0; border: 1px solid #e0d2b0; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
  .tool.locked { opacity: .45; }
  button.tool { width: 100%; text-align: left; font: inherit; color: inherit; }
  .tool.opens::after { content: "›"; margin-left: auto; font-size: 22px; color: var(--muted); }
  .tool-card .tool-img { display: block; width: 100%; margin: 4px 0 16px; border: 1px solid #e0d2b0; border-radius: 6px; background: #fff; }
  /* 会員名簿 */
  .roster { max-height: calc(100dvh - 60px); overflow-y: auto; }
  .members { display: grid; gap: 2px; margin: 4px 0 12px; }
  .member { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dotted #d6c7a3; }
  .member .portrait { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #e9dfc8; border: 2px solid var(--gold); display: grid; place-items: center; }
  .member .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .member .portrait i { width: 20px; height: 26px; background: #b9a67c; border-radius: 10px 10px 4px 4px; }
  .member .mtx { min-width: 0; } .member b { display: block; font-size: 16px; } .member small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .member.unknown b { color: #a8987c; letter-spacing: .2em; } .member.unknown .portrait { border-color: #cdbb94; }
  .sealed-letter input { margin-top: 4px; }
  .backup-entry { margin-top: 28px; padding-top: 12px; border-top: 1px dashed #d7c9a8; text-align: center; }
  .backup-entry button { border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
  .backup-entry span { margin-right: 5px; color: var(--gold); font-size: 16px; vertical-align: -1px; }
  .backup-entry small { font-size: inherit; }
  .backup-card .backup-actions { display: grid; gap: 8px; margin-top: 16px; }
  .backup-card .backup-actions .btn { width: 100%; }
  .backup-card .link { display: block; margin: 12px auto 0; }
  .note { font-size: 13px; color: var(--muted); line-height: 1.6; }

  nav { display: flex; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--paper2); border-top: 1px solid #d6c7a3; }
  @media (display-mode: standalone) {
    header { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
    header::before, nav::after { content: ""; position: absolute; left: 0; right: 0; background: var(--frame-bg); pointer-events: none; box-sizing: border-box; }
    header::before { top: 0; height: calc(env(safe-area-inset-top, 0px) + 4px); border-bottom: 4px solid var(--frame); }
    nav { position: relative; }
    nav::after { bottom: 0; height: var(--safe-b); border-top: 4px solid var(--frame); }
  }
  nav button { flex: 1; border: 0; background: none; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  nav button b { font-size: 22px; font-weight: 400; }
  nav button.on { color: var(--teal); font-weight: 700; }
  #toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 16px); transform: translateX(-50%); background: #3b2f22ee; color: #fff;
    padding: 10px 16px; border-radius: 20px; font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 30; white-space: nowrap; }
  #toast.on { opacity: 1; }

  /* ホーム画面へ追加するための最初の案内。本文は content.json から入れる。 */
  #installGuide { position: fixed; inset: 0; z-index: 100; overflow: auto; padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px); background: radial-gradient(circle at 50% 0, #354e5a, #17110d 68%); color: #f5e8ca; }
  .install-book { width: min(100%, 430px); min-height: 100%; margin: auto; padding: 25px 22px 30px; border: 1px solid #c9a86a88; border-radius: 15px; background: linear-gradient(130deg, #183443, #102631 52%, #1d3641); box-shadow: inset 0 0 0 5px #06101555, 0 14px 42px #0009; text-align: center; }
  .install-crest { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 10px; border: 1px solid #e2c98f; border-radius: 50%; color: #e2c98f; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 27px; }
  .install-kicker { margin: 0; color: #e2c98f; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 12px; letter-spacing: .28em; }
  .install-book h1 { margin: 9px 0 14px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 23px; letter-spacing: .08em; }
  .install-lead { margin: 0 auto 18px; max-width: 28em; color: #eee2c9; font-size: 15px; line-height: 1.8; }
  .install-figure { display: grid; justify-items: center; margin: 12px auto 17px; color: #e2c98f; }
  .install-phone { width: 166px; height: 42px; display: flex; align-items: center; justify-content: space-around; padding: 0 9px; border: 1px solid #d9bf82aa; border-radius: 10px; background: #f8f0dc; color: #34505c; box-shadow: 0 4px 12px #0005; }
  .install-phone i { width: 54px; height: 6px; border-radius: 4px; background: #d7c49a; }
  .install-phone b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #1f5f6b; color: #fff; font-size: 18px; line-height: 1; }
  .install-arrow { height: 29px; padding-top: 3px; font-size: 24px; line-height: 1; }
  .install-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid #e2c98f; border-radius: 12px; background: #183443; color: #e2c98f; box-shadow: inset 0 0 0 4px #06101555; font-size: 25px; }
  .install-steps { margin: 0 auto 20px; max-width: 320px; padding-left: 1.55em; text-align: left; color: #f5e8ca; font-size: 15px; line-height: 1.75; }
  .install-steps li::marker { color: #e2c98f; font-family: "Hiragino Mincho ProN", serif; }
  .install-continue { min-height: 43px; padding: 0 16px; border: 0; border-bottom: 1px solid #e2c98f88; background: none; color: #f6e4bc; font-size: 14px; }
  .install-notice { margin: 12px auto 0; max-width: 27em; color: #d8caaa; font-size: 12px; line-height: 1.65; }
  #restoreGuide { position: fixed; inset: 0; z-index: 101; overflow: auto; padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px); background: radial-gradient(circle at 50% 0, #354e5a, #17110d 68%); color: #f5e8ca; }
  .restore-book { display: flex; flex-direction: column; justify-content: center; }
  .restore-mark { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid #e2c98f; border-radius: 50%; color: #e2c98f; font-size: 31px; }
  .restore-status { min-height: 1.7em; margin: 0 0 8px; color: #f6e4bc; font-size: 14px; }
  .restore-actions { display: grid; gap: 8px; margin: 0 auto; width: min(100%, 280px); }
  .restore-primary, .restore-fresh { min-height: 46px; border-radius: 9px; font-size: 15px; }
  .restore-primary { border: 1px solid #e2c98f; background: #e2c98f; color: #183443; font-weight: 700; }
  .restore-fresh { border: 1px solid #e2c98f88; background: transparent; color: #f6e4bc; }
  .restore-primary:disabled, .restore-fresh:disabled { opacity: .58; }

  /* 場面（導入・刻印・2日目の夜・入会式）。暗い机の上で見せる。夜景の中で眩しすぎないよう、白は使わない */
  .scene { position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; overflow: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: radial-gradient(circle at 50% 35%, #33261c, #1a120d 62%, #0f0a07); color: #e9dcc0; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .scene.open { display: flex; }
  .sc-step { width: min(100%, 400px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; perspective: 1100px; }
  .sc-kicker { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: .5em; color: #c9a86a; }
  .sc-line { margin: 0; font-size: 17px; line-height: 1.95; animation: scin 1s ease both; }
  @keyframes scin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .sc-cap { margin: 0; min-height: 1.6em; color: #e2c98f; letter-spacing: .18em; font-size: 15px; }
  .sc-next { margin-top: 8px; min-width: 180px; min-height: 48px; padding: 0 24px; border: 1px solid #c9a86a99; border-radius: 24px; background: #2b2118cc; color: #f0dfb8;
    font: 15px "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .15em; }
  .sc-cover { position: relative; width: min(64vw, 250px); aspect-ratio: 3 / 4; }
  .sc-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.55,.05,.28,1); }
  .sc-card.flipped { transform: rotateY(180deg); }
  .sc-cover .front { position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: radial-gradient(circle at 30% 20%, #2f5468, #173040 70%, #11242f); color: #e2c98f; box-shadow: inset 16px 0 16px -12px #000a, 0 10px 30px #000a;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .sc-cover .front .crest { width: 78px; height: 78px; border-radius: 50%; border: 2px solid #e2c98f; display: grid; place-items: center; font-size: 32px; }
  .sc-cover .front h2 { margin: 0; font-size: 25px; letter-spacing: .3em; padding-left: .3em; }
  .sc-cover .front small { letter-spacing: .4em; font-size: 10px; opacity: .7; }
  .sc-cover .back-face { transform: rotateY(180deg); }
  .sc-order { margin: 0; font-size: 19px; line-height: 1.8; letter-spacing: .1em; color: #f0dfb8; }
  /* 方角合わせ: 3文字がずれているほど散り、合うと上にそろう */
  .dial { position: relative; width: 230px; height: 230px; margin: 10px 0; }
  .dial-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #c9a86a66; box-shadow: inset 0 0 40px #0008; }
  .dial-ring::before { content: "N"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 11px -apple-system, system-ui, sans-serif; color: #c9a86a88; }
  .needle { position: absolute; left: 50%; top: 22px; bottom: 50%; width: 2px; margin-left: -1px; background: linear-gradient(#e2c98f, #e2c98f00); transform-origin: 50% 100%; transition: transform .25s; }
  .dl { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center;
    font: 700 28px "Hiragino Mincho ProN", "Yu Mincho", serif; color: #e2c98f44; transition: transform .35s ease-out; }
  .dl.on { color: #e2c98f; }
  .dial.aligned .dl { color: #ffe2a0; text-shadow: 0 0 16px #ffcf6e; }
  .dial.aligned .dial-ring { border-color: #e2c98f; box-shadow: inset 0 0 40px #0008, 0 0 30px #e2c98f44; }
  /* 名の明かし: 箔押しのように浮かび上がる */
  .sc-crest { width: 180px; height: 180px; display: grid; place-items: center; font-size: 60px; color: #e2c98f; position: relative;
    animation: emboss 2.4s ease both; }
  .sc-crest img { width: 100%; height: 100%; }
  @keyframes emboss { from { opacity: 0; transform: scale(.92); filter: blur(6px) brightness(.4); } 60% { opacity: 1; filter: blur(0) brightness(1.4) drop-shadow(0 0 18px #e2c98f88); } to { opacity: 1; transform: none; filter: drop-shadow(0 2px 0 #000a); } }
  .sc-title { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: .08em;
    background: linear-gradient(100deg, #9c7424 25%, #fff0c4 45%, #9c7424 65%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: foil 3.2s ease .8s both; }
  @keyframes foil { from { opacity: 0; background-position: 100% 0; } 20% { opacity: 1; } to { opacity: 1; background-position: 0 0; } }
  /* 入会式 */
  .sc-solemn { margin: 0; font-size: 19px; line-height: 2; letter-spacing: .12em; animation: scin 1.2s ease both; }
  .sc-solemn.big { font-size: 26px; color: #f0dfb8; letter-spacing: .3em; }
  .scene.ceremony .sc-step { min-height: 60vh; justify-content: center; }
  .chief { position: relative; width: 230px; height: 230px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #c9a86a, 0 10px 40px #000c; }
  .chief img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s .4s; }
  .chief.open img { opacity: 1; }
  .wax { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #a33a32, #6e1c18 70%); display: grid; place-items: center;
    transition: transform 1.6s cubic-bezier(.5,0,.7,.4), opacity 1.6s ease-in; }
  .wax i { width: 90px; height: 120px; background: #4b100e; border-radius: 45px 45px 20px 20px; box-shadow: inset 0 -30px 0 -6px #5a1411; }
  .chief.open .wax { transform: translateY(120%) rotate(24deg); opacity: 0; }
  .chief-name { font-size: 18px; }
  .rank { width: 100%; padding: 22px 18px; border: 3px double #c9a86a; border-radius: 10px; background: #24190fcc; }
  .rank small { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: .4em; color: #c9a86a; }
  .rank b { display: block; margin: 8px 0; font-size: 26px; letter-spacing: .2em; color: #f0dfb8; }
  .rank p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
  .rank span { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: #c9a86a; }
  /* 許可の前に挟む説明画面 */
  .perm { position: fixed; inset: 0; z-index: 28; display: flex; align-items: center; justify-content: center; padding: 24px; background: #000b; }
  .perm-card { width: min(100%, 340px); background: #f4ecd8; color: var(--ink); border-radius: 16px; padding: 24px 20px 14px; text-align: center; box-shadow: 0 10px 40px #000a; }
  .perm-icon { font-size: 36px; }
  .perm-card h3 { margin: 8px 0; font-size: 19px; }
  .perm-card p { margin: 0 0 18px; line-height: 1.8; font-size: 15px; text-align: left; }
  .perm-card .btn { width: 100%; }
  .perm-card .link { display: block; margin: 8px auto 0; }

  /* Playwright only: moving SVG targets never settle for a native click. */
  html[data-test="true"] *, html[data-test="true"] *::before, html[data-test="true"] *::after {
    animation: none !important;
    transition-duration: 0s !important;
  }
  /* 一文字ずつの書き込みは CSS アニメーションなので、止めたときは最初から見せておく */
  html[data-test="true"] .ink { opacity: 1; }

  /* 2日目の夜: 会員名簿を手に入れる */
  .sc-roster { font-size: 64px; line-height: 1; margin-bottom: 10px; animation: scin .8s ease-out both; }

  /* チュートリアルの案内: 光らせる所のほかは薄いグレーで覆う */
  #coach { display: none; }
  #coach.on { display: block; animation: cmfade .2s ease-out; }
  @keyframes cmfade { from { opacity: 0; } }
  /* 光らせる所が止まるのを待つ間: 覆いだけ出し、枠と吹き出しは隠す */
  #coach.wait .cm-ring, #coach.wait .cm-bubble, #coach.wait .cm-block { display: none; }
  #coach .cm-shade { position: fixed; z-index: 40; }
  #coach .cm-hole { position: fixed; z-index: 40; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 200vmax #3a3a3a8c; }
  #coach .cm-block { position: fixed; z-index: 40; }
  #coach .cm-ring { position: fixed; z-index: 41; border: 2px solid #f4d58d; border-radius: 12px; pointer-events: none; animation: cmpulse 1.6s ease-in-out infinite; }
  @keyframes cmpulse { 50% { box-shadow: 0 0 0 6px #f4d58d55; } }
  #coach .cm-bubble { position: fixed; z-index: 42; width: 280px; max-width: calc(100vw - 24px); padding: 12px 14px 10px; border-radius: 14px; background: #fffaf0; color: var(--ink);
    box-shadow: 0 8px 26px #0008; font: 15px/1.7 "Hiragino Mincho ProN", "Yu Mincho", serif; }
  #coach .cm-bubble p { margin: 0; }
  #coach .cm-next { display: block; margin: 8px 0 0 auto; min-height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--teal); color: #fff; font-size: 15px; }
  #coach .cm-next[hidden] { display: none; }
  /* 画面の真ん中に大きく出す一言 */
  #bigNote { position: fixed; left: 50%; top: 42%; z-index: 45; transform: translate(-50%, -50%) scale(.92); opacity: 0; pointer-events: none;
    padding: 22px 30px; border-radius: 16px; background: #2b2118ee; color: #f3dfb4; box-shadow: 0 12px 40px #000a; text-align: center;
    width: max-content; max-width: 84vw; font: 700 22px/1.6 "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .1em; transition: opacity .5s, transform .5s; }
  #bigNote.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  /* 会員名簿（冊子）: 1頁目は一覧、以降は1人1頁のプロフィール */
  #dossier { position: fixed; inset: 0; z-index: 22; display: none; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px); background: #1a120ce6; }
  #dossier.open { display: flex; }
  .ds-book { width: min(100%, 420px); height: min(100%, 760px); display: flex; flex-direction: column; border-radius: 6px 14px 14px 6px; overflow: hidden;
    background: #f3ead4; color: var(--ink); box-shadow: inset 14px 0 14px -10px #0006, 0 12px 40px #000a; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .ds-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 22px; background: #5a3a22; color: #f0dcae; font-size: 14px; letter-spacing: .12em; }
  .ds-head button { min-height: 36px; padding: 0 14px; border: 1px solid #f0dcae88; border-radius: 18px; background: none; color: #f0dcae; font-size: 13px; }
  .ds-cap { padding: 10px 16px; text-align: center; background: #8a5a2a; color: #fff3d6; font-size: 14px; letter-spacing: .12em; animation: scin .8s ease both; }
  .ds-page { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 22px 28px; }
  .ds-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 10px 22px; border-top: 1px solid #d9c9a3; }
  .ds-foot button { min-width: 48px; min-height: 42px; border: 1px solid #b89a6a; border-radius: 21px; background: #fffaf0; color: var(--ink); font-size: 20px; }
  .ds-foot button.word { padding: 0 20px; font-size: 15px; background: var(--teal); border-color: var(--teal); color: #fff; }
  .ds-foot button[hidden] { visibility: hidden; display: inline-block; }
  .ds-no { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
  .ds-kicker { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; letter-spacing: .4em; color: var(--gold); }
  .ds-index h3 { margin: 4px 0 14px; font-size: 20px; letter-spacing: .2em; }
  .ds-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px dotted #cbb88e; background: none; text-align: left; font-family: inherit; color: var(--ink); }
  .ds-thumb { flex: none; width: 44px; height: 54px; border-radius: 4px; overflow: hidden; background: #d9ccb0; display: grid; place-items: center; box-shadow: 0 1px 3px #0003; }
  .ds-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ds-thumb i, .ds-portrait i { width: 60%; height: 70%; border-radius: 50% 50% 8px 8px; background: #7d6a50; opacity: .55; }
  .ds-rt { flex: 1; min-width: 0; } .ds-rt b { display: block; font-size: 16px; } .ds-rt small { display: block; font-size: 12px; color: var(--muted); }
  .ds-rn { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: var(--muted); }
  .ds-row.unknown b { color: #9a8a70; letter-spacing: .2em; }
  .ds-count { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
  .ds-member { position: relative; }
  .ds-top { display: flex; gap: 16px; align-items: flex-end; margin: 10px 0 16px; }
  .ds-portrait { flex: none; margin: 0; width: 110px; height: 138px; padding: 6px 6px 18px; background: #fff; box-shadow: 0 3px 10px #0003; transform: rotate(-1.5deg); display: grid; place-items: center; }
  .ds-portrait img { width: 100%; height: 100%; object-fit: cover; background: #e6dcc6; }
  .ds-portrait i { width: 70%; height: 80%; }
  .ds-id { flex: 1; min-width: 0; padding-bottom: 6px; border-bottom: 2px solid #3b2f22; }
  .ds-id h3 { margin: 0; font-size: 22px; line-height: 1.35; }
  .ds-role { margin: 4px 0 0; font-size: 13px; color: #6b5a44; }
  .ds-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; padding: 10px 12px; background: #fffaf0aa; border: 1px solid #dccca6; border-radius: 6px; font-size: 14px; }
  .ds-facts dt { color: var(--gold); font-family: -apple-system, system-ui, sans-serif; font-size: 12px; padding-top: 2px; } .ds-facts dd { margin: 0; }
  .ds-bio p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
  .ds-src { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
  .ds-stamp { position: absolute; right: 2px; top: 150px; width: 66px; height: 66px; border-radius: 50%; border: 3px double var(--red); color: var(--red); display: grid; place-items: center; align-content: center;
    font-weight: 700; font-size: 14px; transform: rotate(-14deg); opacity: .8; mix-blend-mode: multiply; }
  .ds-stamp small { display: block; font-size: 9px; font-weight: 400; }
  .ds-member.unknown .ds-id h3 { color: #9a8a70; letter-spacing: .3em; }
  .ds-member.unknown .ds-bio p { color: var(--muted); font-size: 14px; }
  /* 明かされる演出: シルエットから姿が浮かび、名前・記述が順に書き加わり、最後に判が押される */
  .ds-member.reveal .ds-portrait img { animation: dsAppear 1.6s ease .3s both; }
  .ds-member.reveal .ds-portrait i { animation: dsAppear 1.6s ease .3s both; }
  .ds-member.reveal [style*="--d"] { animation: dsInk .9s ease var(--d) both; }
  .ds-member.reveal .ds-stamp { animation: dsStamp .5s cubic-bezier(.3,0,.3,1) var(--d) both; }
  @keyframes dsAppear { from { filter: brightness(0) blur(6px); opacity: .5; } to { filter: none; opacity: 1; } }
  @keyframes dsInk { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
  @keyframes dsStamp { from { opacity: 0; transform: rotate(-14deg) scale(2.4); } 70% { opacity: .9; transform: rotate(-14deg) scale(.92); } to { opacity: .8; transform: rotate(-14deg) scale(1); } }

  /* 新しい日の朝、地図がひらけている間は触らせない */
  body.opening #v-map, body.opening nav { pointer-events: none; }

  /* 朝の確かめ: はじめる / まだ */
  .sc-two { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
  .sc-later { min-height: 40px; padding: 0 20px; border: 0; background: none; color: #d8caaa; font: inherit; font-size: 14px; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 4px; }

  /* 記録簿に頁が綴じ足される: 飛んでくる紙・厚くなる小口・光る表紙・きらめき */
  .sc-cover .pg-edge { position: absolute; top: 2.5%; bottom: 2.5%; right: -3px; width: 7px; z-index: -1; border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(90deg, #f3ead4 0 1px, #c9b893 1px 2px); transform: scaleX(.2); transform-origin: left center; opacity: .6; }
  .sc-cover.adding .pg-edge { animation: edgeGrow 1.4s cubic-bezier(.3,.7,.3,1) .6s both; }
  @keyframes edgeGrow { to { transform: scaleX(1.6); opacity: 1; } }
  .sc-cover .pg-fly { position: absolute; top: 6%; bottom: 6%; left: 8%; right: 8%; z-index: -1; border-radius: 2px 8px 8px 2px; background: #f6eedb;
    box-shadow: 0 4px 14px #0006; opacity: 0; pointer-events: none; }
  .sc-cover.adding .pg-fly { animation: pageFly 1s cubic-bezier(.2,.7,.3,1) calc(var(--i) * .22s) both; }
  @keyframes pageFly { 0% { opacity: 0; transform: translate(120%, -18%) rotate(14deg); } 30% { opacity: 1; } 85% { opacity: 1; transform: translate(6%, 0) rotate(1deg); } 100% { opacity: 0; transform: translate(4%, 0); } }
  .sc-cover.adding .sc-card { animation: coverGlow 1.8s ease .5s both; }
  @keyframes coverGlow { 40% { filter: drop-shadow(0 0 22px #f4d58dcc) brightness(1.15); } 100% { filter: drop-shadow(0 0 8px #f4d58d55); } }
  .sc-cover .spark { position: absolute; z-index: 2; color: #f4d58d; font-size: 14px; font-style: normal; opacity: 0; pointer-events: none; text-shadow: 0 0 8px #f4d58d; }
  .sc-cover.adding .spark { animation: spark 1.4s ease-out calc(.7s + var(--i) * .12s) both; }
  @keyframes spark { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: translateY(-18px) scale(.6); } }
  .sc-next.appear { animation: scin .8s ease both; }

  /* 場面の中であとから出るもの（ボタン・一言）は、見えないまま場所だけ取っておく。出るたびに記録簿などがずれないように */
  .sc-step button[hidden] { display: inline-block; visibility: hidden; }
  .sc-step p[hidden] { display: block; visibility: hidden; }
  .sc-step .dial-cap { min-height: 1.9em; }

  /* 古い本の段階の表紙は、下地の色から色あせた灰色にしておく。擦れ・ざらつきの画像が乗るまでの一瞬に、新しい表紙の青緑が見えないように */
  .board .front:has(> .wear.cv1), .sc-cover .front:has(> .wear.cv1) { background: radial-gradient(circle at 30% 20%, #5e6456, #3f4539 70%, #33382f); }

  /* 表紙の中の文字・擦れ・紋章にも「裏返ったら見せない」をかける。Safari では表紙にだけかけても中身が透けて、
     開いて左へ倒れた表紙の裏に古い表紙の色が残る（めくったあと遅れて白に戻っていた） */
  .board .front *, .sc-cover .front * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

  /* 通し確認の操作パネル（?play=1 のスマホ用）: 左端のつまみ → 下から出る一覧 */
  #playTab { position: fixed; left: 0; top: 42%; z-index: 70; width: 26px; padding: 10px 0; border: 0; border-radius: 0 10px 10px 0;
    writing-mode: vertical-rl; letter-spacing: .3em; font: 700 12px/1 -apple-system, system-ui, sans-serif; color: #fff; background: #7a1f1fcc; box-shadow: 2px 2px 8px #0006; }
  #playPanel { position: fixed; inset: 0; z-index: 71; display: none; align-items: flex-end; background: #0008; }
  #playPanel.open { display: flex; }
  #playPanel .pp-sheet { width: 100%; max-height: 82vh; overflow-y: auto; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 18px 18px 0 0; background: #fbf5e6; color: var(--ink);
    font-family: -apple-system, system-ui, sans-serif; }
  #playPanel .pp-head { display: flex; justify-content: space-between; align-items: center; }
  #playPanel .pp-head b { font-size: 17px; }
  #playPanel .pp-close { min-height: 40px; padding: 0 16px; border: 1px solid #cdbb94; border-radius: 20px; background: #fff; font-size: 14px; }
  #playPanel .pp-now { margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
  #playPanel h4 { margin: 16px 0 8px; font-size: 14px; } #playPanel h4 small { font-weight: 400; color: var(--muted); font-size: 11px; }
  #playPanel .pp-stages { display: grid; gap: 8px; }
  #playPanel .pp-stages button { text-align: left; min-height: 56px; padding: 10px 12px; border: 1px solid #d6c7a3; border-radius: 12px; background: #fff; color: var(--ink); }
  #playPanel .pp-stages b { display: block; font-size: 15px; } #playPanel .pp-stages small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); line-height: 1.5; }
  #playPanel .pp-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
  #playPanel .pp-jumps button { min-height: 44px; padding: 0 14px; border: 1px solid #cdbb94; border-radius: 22px; background: #fff; color: var(--ink); font-size: 13px; }