* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

/* ============================================================
   おもちゃばこポップ — デザイントークン（s8-home-v2 正典から移植）
   物理の約束: 押せるもの＝立体（トイボタン公式）／押せないもの＝フラット
   ============================================================ */
:root {
  --paper: #F5ECDB;
  --paper-out: #EAE0CB;
  --card: #FFFDF6;
  --card-edge: #E3D5B6;
  --gold: #EBC96E;
  --gold-deep: #C6982F;
  --gold-ink: #A87E1B;
  --drop: 0 16px 24px rgba(96, 70, 28, .10);
  --drop-s: 0 5px 10px rgba(96, 70, 28, .08);
  /* 上映会の客席（明るい文字用） */
  --cream-hi: rgba(255, 250, 238, .95);
  --cream-mid: rgba(255, 250, 238, .72);
  --cream-lo: rgba(255, 250, 238, .5);

  /* 旧トークンの読み替え（既存画面が新パレットで馴染むためのマッピング） */
  --background: var(--paper);
  --surface: var(--card);
  --surface-muted: #EFE5CE;
  --ink: #4C4030;
  --sub: #A59472;
  --line: var(--card-edge);
  --accent: #4CAB5D;
  --accent-pressed: #3B9E4D;
  --accent-soft: #E3F5E5;
  --sun: #DC9F14;
  --danger: #D44A3C;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* クローム（見出し・カード等）の画面端からの距離。s8は16px */
  --page-inset: 16px;
  /* 角丸スケール: 12 / 18 / 24 / 28 / 999 */
  --radius-card: 22px;
}

/* なかま色（s8の6色＋こうえん を正、残りは明度違い方式で拡張）
   17種＋旧しぜん（2026-07-18 ことばずかん踏襲で再編。廃止したでんしゃ/はたらくくるま/おうちのトリプルを とり/やさい/くだもの に転用）
   --c=箱・マット / --cd=濃（文字・エッジ） / --ct=淡（座布団・写真の下地） */
.c-do { --c: #FFA13E; --cd: #D97F16; --ct: #FFEFDB; }  /* どうぶつ */
.c-to { --c: #7B8BE8; --cd: #5563C9; --ct: #EAEDFB; }  /* とり */
.c-mu { --c: #5BC46D; --cd: #3B9E4D; --ct: #E3F5E5; }  /* むし */
.c-um { --c: #4FBFD1; --cd: #2E97A8; --ct: #E4F6F8; }  /* うみのいきもの */
.c-sh { --c: #FA86AF; --cd: #DB5486; --ct: #FDE8F0; }  /* しょくぶつ */
.c-ku { --c: #B98BE8; --cd: #8F5BC9; --ct: #F2EAFB; }  /* くだもの */
.c-ya { --c: #E88A56; --cd: #C4611F; --ct: #FBEADF; }  /* やさい */
.c-ta { --c: #FFC53E; --cd: #DC9F14; --ct: #FFF3D4; }  /* たべもの */
.c-so { --c: #5FB5F0; --cd: #348DD1; --ct: #E2F2FC; }  /* そら */
.c-no { --c: #F7705F; --cd: #D44A3C; --ct: #FDE6E2; }  /* のりもの */
.c-ko { --c: #8AD597; --cd: #57A967; --ct: #EDF8EF; }  /* こうえん */
.c-om { --c: #E27BD4; --cd: #B44FA6; --ct: #FAE8F7; }  /* おもちゃ */
.c-ni { --c: #63C4A5; --cd: #3D9C7E; --ct: #E6F7F0; }  /* にちようひん */
.c-ma { --c: #93A9BE; --cd: #5F7B94; --ct: #EDF2F6; }  /* まち */
.c-mi { --c: #CE9A62; --cd: #A16A35; --ct: #F6EBDD; }  /* おみせ */
.c-hi { --c: #E1799E; --cd: #B84A72; --ct: #FAE7EE; }  /* ひと */
.c-sn { --c: #D8BE6A; --cd: #A98D33; --ct: #F6F0DA; }  /* そのた */
.c-si { --c: #6FBF7E; --cd: #4A9A5C; --ct: #E8F5EB; }  /* しぜん（旧カード互換） */
.c-au { --c: var(--gold); --cd: var(--gold-ink); --ct: #FFF6D2; }  /* ごほうびの金（s3: ぬしコール） */

html, body { height: 100%; }
html { background: var(--paper-out); }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

img { -webkit-user-drag: none; }

/* ============================================================
   トイボタン公式（押せるもの唯一の立体。--edge/--glで面ごとに調整）
   ============================================================ */
.toy {
  position: relative;
  cursor: pointer;
  border: none;
  font: inherit;
  color: inherit;
  /* 立体の底面エッジ＝4px（丸ボタンの"あご"を抑える）＋下に尾を引かないタイトな接地影。
     以前の var(--drop)（16px下オフセットの大きい影）は丸ボタンを縦長に見せていた */
  box-shadow:
    inset 0 var(--gl, 0px) 0 rgba(255, 255, 255, .42),
    0 4px 0 var(--edge, var(--card-edge)),
    0 7px 13px rgba(96, 70, 28, .13);
  transition: transform .09s ease, box-shadow .09s ease;
}
.toy:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 var(--gl, 0px) 0 rgba(255, 255, 255, .42),
    0 1px 0 var(--edge, var(--card-edge)),
    var(--drop-s);
}

button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(47, 126, 75, .36); outline-offset: 3px; }

/* ヘッダー（s8: 赤いおもちゃ箱ロゴ＋タイトル＋顔ボタン） */
.app-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--page-inset) 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  flex: none;
  margin-top: 2px;
}

.title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }

.app-header h1 {
  overflow: hidden;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 顔ボタン＝じぶんのページへの入口（s8）。
   未貼りバッジ（.face-badge）が肩からはみ出すので overflow は切らない（imgが自分で丸くなる） */
.face {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: #FFE3BC;
  --edge: #E0B57E;
  --gl: 3px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  padding: 0;
}
.face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* 実写もアプリの言語にそろえる: 白フチのシール＋濃いタンの外周線＋やわ影。
     色相を足さずニュートラルだけで切れ目を立てる（緑リングは実写と喧嘩してノイジーだった） */
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px rgba(110, 80, 40, .40),
    0 2px 5px rgba(96, 70, 28, .30);
}

/* onboarding のミニチュア等が使う旧ロゴ（ヘッダーからは撤去済み） */
.brand-mark {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 18px 2px 18px 2px;
  background: var(--accent);
  transform: rotate(-41deg);
}

.brand-mark::after {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  content: "";
  transform: rotate(42deg);
}

.icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: var(--sub);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}

main {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.view {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.view[hidden] { display: none; }

/* ============================================================
   外モード（s1正典）: クリーム紙のトイカメラボディ。
   ファインダー＝白フレームの窓＋すみ飾り、シャッター＝黄のトイボタン（鼓動）、
   ずかんへ戻る＝右下フロート（ずかん画面の「みつけた」と同位置＝往復をトグルで押せる／カードの吸い込み先）
   ============================================================ */
/* カメラは全画面表示（主役を最大化）。ヘッダーは映像の上にフロート、映像は画面いっぱい */
body[data-view="camera"] .app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-bottom: 22px;
  background: linear-gradient(to bottom, rgba(18, 12, 6, .5), rgba(18, 12, 6, 0));
  pointer-events: none; /* スクリムはタップ透過。中のボタンだけ拾う */
}
body[data-view="camera"] .app-header > * { pointer-events: auto; }
body[data-view="camera"] .app-header h1 { color: #FFFDF6; text-shadow: 0 1px 5px rgba(0, 0, 0, .45); }

/* 映像を全面に（主役）: 画面いっぱいのライブビュー。世界をそのまま覗く */
#view-camera { padding: 0; }
.cam-win {
  --cam-center: 46%; /* カードの正方形の中心。ガイドとプレースホルダーの文字を同じ高さに揃える */
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #3A2E22;
}
#camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.02);
}

/* これから生まれるカードの範囲＝明るい正方形。外側はそっと沈める（1枚の白フレームだけ） */
.cam-frame {
  position: absolute;
  top: var(--cam-center);
  left: 50%;
  z-index: 2;
  width: min(calc(100% - 40px), 430px);
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  box-shadow: 0 0 0 100vmax rgba(22, 15, 8, .52);
  outline: 3px solid rgba(255, 253, 246, .92);
  outline-offset: -3px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 操作（沈めた領域の上）: ヒント＋大きなシャッター。ずかんへは右下フロート（親指圏・吸い込み先） */
.cam-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 18px calc(20px + var(--safe-bottom));
}
.cam-row {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#camera-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.02);
}

.camera-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #57493B;
  color: var(--cream-hi);
  text-align: center;
}

/* 文字はカードの正方形の中心（--cam-center）に合わせて縦中央に */
.cam-ph-copy {
  position: absolute;
  top: var(--cam-center);
  left: 50%;
  width: 100%;
  padding: 0 28px;
  transform: translate(-50%, -50%);
}

.camera-placeholder p {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.24;
}

.camera-placeholder span {
  display: block;
  margin-top: 13px;
  color: var(--cream-mid);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.camera-pip { display: none; }

/* シャッター（画面最大のトイボタン・親指到達域） */
.deck-hint { font-size: 13px; font-weight: 700; color: rgba(255, 253, 246, .95); text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }

.shutter {
  width: 132px;
  height: 132px;
  flex: none;
  justify-self: center;
  border-radius: 999px;
  background: #FFD666;
  --edge: #DFA92C;
  --gl: 6px;
  display: grid;
  place-items: center;
}
.shutter::after {
  content: "";
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 6px solid rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .14);
}
/* この画面ゆいいつの常時アニメ: シャッターがそっと鼓動 */
.shutter::after { animation: pbtn-beat 3.6s ease-in-out 1.4s infinite; }

/* ずかんへ戻る＝右下フロート。ずかん画面の「みつけた／とりこみ」ペアと同じ丸トイボタン。詳細は .floating-zukan（後方）で定義 */
/* カードが収まった瞬間、ぱくっと弾む（保存でカードが右下のこのボタンへ吸い込まれる） */
#nav-zukan.pop { animation: zk-pop .55s cubic-bezier(.34, 1.45, .64, 1); }
@keyframes zk-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28) rotate(-5deg); }
  70% { transform: scale(.94); }
  100% { transform: scale(1); }
}

.floating-nav {
  position: fixed;
  z-index: 20;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(24, 37, 29, .15), inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  transition: transform .14s ease, background .14s ease;
}

.floating-nav:active { transform: scale(.91); }
.floating-camera { right: 20px; bottom: calc(20px + var(--safe-bottom)); }

/* 長押しの手触り: 押し続けている間、縁がぐるっと満ちて「開く」瞬間を予告する
   （ラベル「なが押し」を廃したぶん、この進捗リングがジェスチャーの教え役）。
   満ちきる時間はゲート(600ms)と揃える。未対応環境ではリングが即出るだけで害はない */
@property --hold-p { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.floating-nav::after {
  content: "";
  position: absolute;
  inset: -2px; /* ボタンの縁に密着（外に広がるハローにしない＝隣のボタンに干渉しない）。
                  指は下から押さえるので、上から灯る縁が見える */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(var(--gold-ink) var(--hold-p), transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
}
/* リングはゲート(600ms)より一足先に満たす→満ちきりを一瞬見せてから遷移させる
   （同時だと満ちる前に画面が切り替わって見える）。満杯のまま forwards で保持 */
.floating-nav.holding::after { opacity: 1; animation: hold-fill .45s linear forwards; }
@keyframes hold-fill { from { --hold-p: 0deg; } to { --hold-p: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .floating-nav.holding::after { animation: none; opacity: .6; --hold-p: 300deg; }
}

.floating-icon { position: relative; display: block; width: 22px; height: 20px; }
.floating-camera-icon {
  height: 17px;
  margin-top: 2px;
  border: 2px solid currentColor;
  border-radius: 5px;
}
.floating-camera-icon::before {
  position: absolute;
  top: -5px;
  left: 6px;
  width: 8px;
  height: 4px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  content: "";
}
.floating-camera-icon::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

/* Library — 写真の壁は端まで近づけて immersive に。見出し等のクロームだけ内側に寄せる。 */
#view-zukan {
  overflow-y: auto;
  padding: 4px 0 calc(100px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   図鑑ヘッダー（B案）: 映像と同じく上にオーバーレイし、
   下スクロールで退場・上スクロールで即復帰。カードに画面を明け渡す。
   じぶんのページは #face-float（右上）で退場中も届く。
   ============================================================ */
body[data-view="zukan"] .app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* 紙色ベタ（フェードなし）。上に紙が1枚乗って、その下をカードが滑って消える。
     中身が潜っている間だけ、下端にやわらかい影で「紙が少し浮いてる」気配を出す。 */
  background: var(--paper);
  box-shadow: 0 0 0 rgba(96, 70, 28, 0);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
body[data-view="zukan"] .app-header.hdr-elevated { box-shadow: 0 10px 16px -12px rgba(96, 70, 28, .34); }
body[data-view="zukan"] .app-header.hdr-hidden { transform: translateY(calc(-100% - 6px)); }

/* オーバーレイしたヘッダーの下に初期コンテンツが潜らないよう、実測した高さぶん空ける */
body[data-view="zukan"] #view-zukan { padding-top: var(--zukan-hdr-h, 104px); }

/* 顔フロート: 図鑑では顔ボタンを右上に「常駐」させる（＝ヘッダーが退場しても顔だけは
   その場に居続ける）。ずっと居るものなので出入りアニメは持たせない。
   ヘッダー内の顔（#child-space-entry）は図鑑では隠し、二重を避ける。 */
.face-float {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: var(--page-inset);
  z-index: 21;
  display: none; /* 既定（カメラ等）では出さない */
}
body[data-view="zukan"] .face-float { display: grid; } /* .face が grid 前提 */
body[data-view="zukan"] #child-space-entry { visibility: hidden; } /* 顔はフロートが担う */
@media (prefers-reduced-motion: reduce) {
  body[data-view="zukan"] .app-header { transition: none; }
}

.zukan-empty {
  display: grid;
  min-height: min(56vh, 450px);
  place-content: center;
  justify-items: center;
  padding: 42px var(--page-inset) 78px;
  text-align: center;
}

.zukan-empty::before {
  display: block;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border: 1px solid #cdd9cf;
  border-radius: 16px 5px 16px 5px;
  background: #eaf1eb;
  content: "";
  transform: rotate(-12deg);
}

.empty-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.empty-copy {
  margin-top: 8px;
  color: var(--sub);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.empty-cta {
  min-height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  background: #FFD666;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .42), 0 5px 0 #DFA92C, var(--drop);
  color: #5C420C;
  font-size: 15px;
  font-weight: 800;
  padding: 0 22px;
  transition: transform .09s ease, box-shadow .09s ease;
}

.empty-cta:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .42), 0 1px 0 #DFA92C, var(--drop-s); }

/* ぬしカードの器（本体はじぶんのページの.mecard節）。
   .nushi-info/.nushi-name/.nushi-no はオンボのぬしカードプレビュー(ob-nushi)が使う */
.zukan-hero { margin: 8px var(--page-inset) 12px; }
.nushi-info { min-width: 0; flex: 1; }
.nushi-name { display: block; overflow: hidden; color: var(--ink); font-size: 21px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.nushi-no { display: block; overflow: hidden; color: #b08a2e; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }

/* 入口2枚（シールちょう・きょうのおもいで）を半幅で1行に（グリッドを1画面目に上げる） */
.entry-row { display: flex; gap: 10px; margin: 0 var(--page-inset) 14px; }
.entry-row > * { min-width: 0; flex: 1; margin: 0 !important; }
.entry-row > * { gap: 9px !important; }
.entry-row .story-ring, .entry-row .se-thumb { width: 44px !important; height: 44px !important; }
.entry-row .story-entry-title { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.entry-row .story-entry-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-row .story-entry-play { display: none; } /* 半幅では▶を落として文字を守る */
.entry-row .se-new { display: none; } /* 同上 */

.hero-label {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

.hero-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 3px;
}

#hero-num {
  display: inline-block;
  color: var(--ink);
  font-size: 44px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  transform-origin: left bottom;
}

#hero-num.pop { animation: hero-pop .45s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes hero-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.hero-unit {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.hero-delta {
  margin-left: 2px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-pressed);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  white-space: nowrap;
}

.hero-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.hero-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 11px;
}

.hero-cat:active { transform: scale(.95); }

.hero-cat-n {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* きょうのおもいで 入口（ストーリーズの表紙。Insta風グラデリング＋今日の最新写真） */
.story-entry {
  display: flex;
  width: auto;
  align-items: center;
  gap: 13px;
  margin: 2px var(--page-inset) 12px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(24, 37, 29, .07);
  padding: 9px 12px;
  text-align: left;
}
.story-entry:active { transform: scale(.99); }
.story-ring {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--sun), var(--accent), #7bc47f, var(--sun));
  padding: 2.5px;
}
.story-ring img {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #e8ede8;
  object-fit: cover;
}
.story-entry-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.story-entry-title { color: var(--ink); font-size: 16px; font-weight: 700; }
.story-entry-sub { color: var(--sub); font-size: 12px; font-weight: 600; }
/* シールちょう入口の▶: 上映会ではないので赤は使わない（赤は上映会の専用色）。ごほうびの黄 */
.story-entry-play {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #FFD666;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 3px 0 #DFA92C;
  color: #5C420C;
  font-size: 12px;
  padding-left: 2px;
}

/* 並び替えはグレーの箱（segmented control）をやめ、フラットなピル2つに。
   浮いてる（影つき）のは「きょうのおもいで」だけ、という表面言語を守る */
.zukan-toggle {
  display: flex;
  gap: 4px;
  margin: 0 var(--page-inset) 28px; /* ここが「本編＝写真の壁」の前の大きな章切れ */
}

.toggle-btn {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sub);
  font-size: 13px;
  font-weight: 700;
  padding: 0 14px;
}

.toggle-btn:active { transform: scale(.96); }

.toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent-pressed);
}

/* 日付は主役級のエディトリアル見出し。「きょう / きのう / 7/12」を大きく。 */
.date-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 24px var(--page-inset) 12px;
}
.date-head:first-child { margin-top: 0; } /* 章切れの余白はタブ側(28px)が持つ */
.date-head .dh-big {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.date-head .dh-sub {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

/* 写真アプリの「敷き詰めた壁」。枠・白帯を捨て、写真そのものをタイルに。
   columns で高さの違うタイルを詰める（mosaic）。隙間は3pxで密度を出す。 */
.zukan-grid {
  column-count: 2;
  column-gap: 3px;
  padding: 0 3px; /* 端の目地もタイル間と同じ3pxに統一（壁として一枚に見せる） */
}

.zukan-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 3px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: #e8ede8;
  padding: 0;
  color: #fff;
  isolation: isolate;
  text-align: left;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: transform .15s ease;
}

.zukan-card:active { transform: scale(.97); }
.zukan-card .card-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); background: #e8ede8; }
.zukan-card .card-media img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
  object-fit: cover;
  transition: transform .25s ease;
}
.zukan-card:active .card-media img { transform: scale(1.03); }
/* 名前は白帯じゃなく、写真の上に薄く重ねる（下にグラデscrim） */
.zukan-card .card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .04) 58%, rgba(0, 0, 0, .55) 100%);
}
.zukan-card .card-name {
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  z-index: 3;
  overflow: hidden;
  color: #fff;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 800;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.zukan-card .card-new {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 4;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  padding: 4px 6px;
}
/* レアは「特別な1枚」— 金のふち＋控えめなsheen。壁にリズムを作る（収集感） */
.zukan-card.holo { box-shadow: 0 0 0 2px rgba(216, 178, 90, .92), 0 6px 16px rgba(199, 153, 53, .28); }
.zukan-card.holo .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 240, 190, .5) 47%, transparent 60%);
  background-size: 260% 260%;
  animation: card-sheen 3.6s ease-in-out infinite;
}
@keyframes card-sheen { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.zukan-card.bounce { animation: card-land .34s cubic-bezier(.2, 1.22, .35, 1); }
@keyframes card-land { 0% { transform: scale(.94); } 65% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* 標本カード（ずかんタブ＝なかま順）: 「写真の壁」（アルバムの文法）と対になる図鑑の文法。
   白地に統一カードが整列・名前は写真の下のラベル・図鑑No.と英語の文字密度。
   タブを切り替えるたび同じ写真が標本になる＝トグル自体が「アルバムであり図鑑」を伝える装置 */
.specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 var(--page-inset); /* 標本カードはクローム側＝20px勢（写真の壁だけが3px勢） */
}

.zukan-card.specimen {
  margin: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cat-color); /* なかまの色＝分類ラベル */
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(24, 37, 29, .05);
  color: var(--ink);
}

.zukan-card.specimen .card-media { border-radius: 0; }
.zukan-card.specimen .card-media img { aspect-ratio: 1 / 1; } /* 標本は統一比率（均質感が図鑑感） */

.spec-caption { display: block; padding: 8px 10px 9px; }

.spec-no {
  display: block;
  color: var(--sub);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .09em;
}

.spec-name {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-sub {
  display: block;
  overflow: hidden;
  min-height: 14px; /* 英語が無いカードでも高さを揃える（標本の均質感） */
  margin-top: 1px;
  color: var(--sub);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* レア標本: 金ふちは白フレームの外周に（.specimenのbox-shadowが.holoより後勝ちするので明示的に戻す） */
.zukan-card.specimen.holo { box-shadow: 0 0 0 2px rgba(216, 178, 90, .92), 0 6px 16px rgba(199, 153, 53, .28); }

/* ---------- シールちょう（メダル棚の後継） ----------
   入口はじぶんのページのトイバンド（.child-space .sticker-entry）だけ */
/* 本体: 紙色の部屋に白い台紙（s3の文法）。空きスロット・分母は無い（自由帳の文法） */
.sticker-book {
  position: fixed;
  inset: 0;
  z-index: 68; /* toast(70)より下、オンボ(62)より上 */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.sticker-book.on { opacity: 1; pointer-events: auto; }
.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 6px;
}
.sb-title { color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.sb-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--card-edge), var(--drop-s);
  color: var(--sub);
  font-size: 16px;
  font-weight: 800;
  transition: transform .09s ease, box-shadow .09s ease;
}
.sb-close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 1px 0 var(--card-edge); }
.sb-stage {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  padding: 14px 24px 6px; /* 矢印は台紙の縁に浮かせる（専用の帯を取らず台紙を最大化） */
}
.sb-paper {
  position: relative;
  /* 290px≒上下UI（ヘッダ・ドット・ヒント・トレイ）の実測合計。安全域は別項で引く */
  width: min(100%, 440px, max(220px, calc((100vh - 290px - env(safe-area-inset-top, 0px) - var(--safe-bottom)) * 3 / 4)));
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 6px 0 var(--card-edge), var(--drop);
}
/* マスキングテープ（白紙の台紙をとめる飾り。マス目・綴じ穴は置かない） */
.sb-paper::before {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 3;
  width: 86px;
  height: 22px;
  margin-left: -43px;
  border-radius: 4px;
  background: rgba(235, 201, 110, .55);
  box-shadow: 0 1px 2px rgba(96, 70, 28, .08);
  content: "";
  transform: rotate(-2deg);
  pointer-events: none;
}
.sb-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--card-edge), var(--drop-s);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  transform: translateY(-50%);
  transition: transform .09s ease, box-shadow .09s ease;
}
.sb-arrow:active { transform: translateY(calc(-50% + 3px)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 1px 0 var(--card-edge); }
.sb-arrow-prev { left: 4px; }
.sb-arrow-next { right: 4px; }
.sb-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(76, 64, 44, .18); }
.sb-dot.active { background: var(--gold-deep); }
.sb-hint {
  min-height: 1.6em;
  color: #8A7A5A;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 16px 0;
  text-align: center;
}

/* トレイ＝もっているシールの点線のたな（s3）。空枠は出さない */
.sb-tray {
  margin: 8px 14px calc(var(--safe-bottom) + 14px);
  padding: 12px 14px 12px;
  background: rgba(255, 255, 255, .55);
  border: 2px dashed #D6C49A;
  border-radius: 24px;
}
.sb-tray-head { margin: 0 4px 8px; color: var(--sub); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
/* overflow-x:auto は縦もクリップするので、.lift の浮き＋光の分だけ
   paddingで内側に余白を確保し、同量の負マージンで見た目の位置は変えない */
.sb-tray-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: -24px -14px -12px;
  padding: 32px 18px 16px;
  scrollbar-width: none;
}
.sb-tray-row::-webkit-scrollbar { display: none; }
.sb-tray-row .stk { flex: none; width: 62px; }
/* えらんだシール（2タップの①）: ふわっと浮く＋やわらかい金の光 */
.sb-tray-row .stk.lift {
  z-index: 2;
  animation: stk-bob 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(235, 201, 110, .95)) drop-shadow(0 6px 8px rgba(96, 70, 28, .3));
}
@keyframes stk-bob {
  0%, 100% { transform: scale(1.22) translateY(-2px) rotate(-5deg); }
  50% { transform: scale(1.22) translateY(-7px) rotate(3deg); }
}

/* シール本体: .stk-face=白フチ, .stk-in=中身（同じ形をscaleで一回り小さく＝ダイカットの白フチ） */
.stk {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  background: none;
  padding: 0;
  filter: drop-shadow(0 2px 3px rgba(24, 37, 29, .3));
}
.stk-face, .stk-in { position: absolute; inset: 0; }
.stk-face { background: #fff; }
.stk-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  background: var(--stk-color, #f6c945);
  transform: scale(.86);
}
.stk-in::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .42) 50%, transparent 58%);
  content: "";
}
.stk-circle .stk-face, .stk-circle .stk-in { border-radius: 50%; }
.stk-seal .stk-face, .stk-seal .stk-in { clip-path: polygon(100% 50%, 90.6% 60.9%, 93.3% 75%, 79.7% 79.7%, 75% 93.3%, 60.9% 90.6%, 50% 100%, 39.1% 90.6%, 25% 93.3%, 20.3% 79.7%, 6.7% 75%, 9.4% 60.9%, 0% 50%, 9.4% 39.1%, 6.7% 25%, 20.3% 20.3%, 25% 6.7%, 39.1% 9.4%, 50% 0%, 60.9% 9.4%, 75% 6.7%, 79.7% 20.3%, 93.3% 25%, 90.6% 39.1%); }
.stk-star .stk-face, .stk-star .stk-in { clip-path: polygon(50% 0%, 62% 32%, 100% 38%, 73% 61%, 82% 100%, 50% 78%, 18% 100%, 27% 61%, 0% 38%, 38% 32%); }
.stk-gold .stk-in { background: radial-gradient(circle at 35% 30%, #ffeaa8, #f6c945 60%, #dfa72a); }
.stk-cat .stk-in { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .38), transparent 46%), var(--stk-color); }
.stk-rainbow .stk-in { background: conic-gradient(from 210deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b07ce8, #ff6b6b); }
.stk-holo .stk-in {
  background: linear-gradient(120deg, #bb77ff, #77ddff, #77ffdd, #ffff88, #ff99bb, #bb77ff);
  background-size: 300% 300%;
  animation: stk-holo 3.4s linear infinite;
}
@keyframes stk-holo { to { background-position: 100% 100%; } }
/* きょうのシール: カードの写真がそのまま顔（チェキ風の丸シール）。名前と日付は写真の裾に重ねる */
.stk-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.stk-day .stk-in::after { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 26%, transparent 52%, rgba(0, 0, 0, .5)); } /* ツヤ＋文字の座布団 */
.stk-day .stk-main { position: absolute; bottom: 17%; left: 0; right: 0; margin: 0 auto; font-size: 10px; }
.stk-day .stk-sub { position: absolute; bottom: 7%; left: 0; right: 0; text-align: center; font-size: 7px; }
.stk-emoji { font-size: 30px; line-height: 1.1; }
.stk-main { z-index: 1; max-width: 86%; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.stk-sub { z-index: 1; color: rgba(255, 255, 255, .88); font-size: 8px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }
.sb-tray-row .stk .stk-emoji { font-size: 19px; }
.sb-tray-row .stk .stk-main { font-size: 7.5px; }
.sb-tray-row .stk .stk-sub { font-size: 6.5px; }

/* 台紙の上のシール（座標は中心%・少し曲がって貼られる） */
.sb-paper .stk {
  position: absolute;
  width: 27%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.sb-paper .stk.wiggle { animation: stk-wiggle .55s ease; }
@keyframes stk-wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
  30% { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 9deg)) scale(1.12); }
  65% { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) - 6deg)) scale(1.05); }
}
/* 貼りモード中は貼られたシールを素通し＝台紙のどこを押しても必ず貼れる（失敗がない） */
.sticker-book.pasting .sb-paper .stk { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-tray-row .stk.lift, .stk-holo .stk-in, .sb-paper .stk.wiggle { animation: none; }
  .sb-tray-row .stk.lift { transform: scale(1.18); }
}
.cat-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px var(--page-inset); }
.cat-chip {
  display: grid;
  min-height: 64px;
  place-content: center;
  gap: 1px;
  border: 1px solid var(--cat-color);
  border-radius: 12px;
  background: var(--surface);
  font-size: 11px;
  text-align: center;
}
.cat-chip-emoji { font-size: 16px; }.cat-chip-name { font-size: 10px; font-weight: 700; }.cat-chip-n { color: var(--cat-color); font-size: 11px; font-weight: 700; }
.cat-head { display: flex; align-items: baseline; gap: 6px; margin: 22px 2px 9px; }
.cat-head-emoji { display: none; }.cat-head-name { color: var(--sub); font-size: 12px; font-weight: 700; }.cat-head-count { color: var(--sub); font-size: 11px; font-weight: 600; }

/* Sheets */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  background: rgba(74, 56, 26, .42);
  -webkit-backdrop-filter: blur(8px) saturate(.92);
  backdrop-filter: blur(8px) saturate(.92);
}

.card-reveal, .sheet {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -12px 34px rgba(18, 31, 23, .16);
  padding: 14px 20px calc(20px + var(--safe-bottom));
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  animation: sheet-up .28s cubic-bezier(.2, .92, .3, 1);
}

.card-reveal::before, .sheet::before {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: #d9e0da;
  content: "";
}

@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   ゲットの儀式（s1正典）: #overlay だけを中央ステージ化する。
   record/stats/sheet の .overlay / .card-reveal はそのまま
   ============================================================ */
#overlay { align-items: center; justify-content: center; padding: 16px; background: rgba(74, 56, 26, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
#overlay .card-reveal {
  max-width: 430px;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#overlay .card-reveal::before { display: none; }

/* --- スキャンの儀式（解析待ち＝ことばの粒が あつまってくる） --- */
.reveal-loading { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; padding: 20px 0; text-align: center; }
.scan-stage { position: relative; width: min(52vw, 200px); margin: 0 auto 30px; }
.scan-stage .smat { display: block; padding: 8px; border-radius: 20px; background: var(--card); box-shadow: 0 6px 0 var(--card-edge), 0 22px 40px rgba(40, 26, 6, .35); }
#reveal-loading-photo { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; object-fit: cover; filter: saturate(1.05); }
.scan-glow { position: absolute; inset: -30%; border-radius: 999px; background: radial-gradient(circle, rgba(255, 214, 102, .4), rgba(255, 214, 102, 0) 68%); animation: scan-pulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes scan-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.scan-ring { position: absolute; inset: -12%; z-index: 2; border: 4px dashed rgba(255, 253, 246, .95); border-radius: 999px; animation: scan-spin 1.6s linear infinite; pointer-events: none; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
#scan-grains { position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none; }
.grain {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(255, 253, 246, .96);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(40, 26, 6, .28);
  opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3);
  animation: grain-in 1.7s cubic-bezier(.45, .05, .55, .95) var(--gd) infinite;
}
@keyframes grain-in {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
  22% { opacity: 1; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0) scale(.22); }
}
.scan-sub { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .82); border: 2px dashed #D6C49A; color: #8A7A5A; font-size: 13px; font-weight: 700; }
.reveal-loading.scan-out { animation: scan-out .17s ease-in forwards; }@keyframes scan-out { to { transform: scale(.86); opacity: 0; } }

/* --- カード誕生（ゲット！スタンプ → rotateYで開く → チャイム視覚 → ずんだもん） --- */
#reveal-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.get-banner {
  position: relative; z-index: 3; margin-bottom: -12px;
  padding: 9px 24px 10px; border-radius: 12px;
  background: #FFF6D2; color: #B08C2A;
  font-size: 24px; font-weight: 800; letter-spacing: .06em;
  transform: rotate(-6deg);
  box-shadow: 0 3px 7px rgba(96, 70, 28, .28);
  opacity: 0; pointer-events: none;
}
.get-banner.play { animation: stamp-in .45s cubic-bezier(.34, 1.45, .64, 1) .42s both; }
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-6deg) scale(2.1); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.get-stage { position: relative; perspective: 900px; }
.get-card {
  width: clamp(200px, calc(100vh - 500px), 300px);
  width: clamp(200px, calc(100dvh - 500px), 300px);
  background: var(--card); border-radius: 24px;
  padding: 12px 12px 16px; text-align: center;
  box-shadow: 0 8px 0 var(--card-edge), 0 34px 60px rgba(40, 26, 6, .38);
}
#reveal-card.r3 .get-card { border: 2.5px solid var(--gold); box-shadow: 0 8px 0 #D8B45C, 0 34px 60px rgba(40, 26, 6, .38); }
#reveal-card.flip-in .get-card { animation: card-in .58s cubic-bezier(.34, 1.45, .64, 1) .1s both; }
@keyframes card-in {
  0% { opacity: 0; transform: translateY(72px) rotateY(85deg) scale(.5); }
  100% { opacity: 1; transform: none; }
}
/* 保存＝右下のずかんボタンへ吸い込まれる */
.get-card.fly {
  animation: none !important;
  transform: translate(var(--fx, -140px), var(--fy, 320px)) scale(.06) rotate(-14deg);
  opacity: 0;
  transition: transform .66s cubic-bezier(.55, -.15, .8, .5), opacity .28s ease .4s;
}
.get-card .mat { padding: 8px; border-radius: 18px; }
.get-card .mat .inner { padding: 4px; border-radius: 12px; }
.get-card .mat img { border-radius: 12px; }
#reveal-card .row { justify-content: center; margin-top: 12px; }
#reveal-card .no { font-size: 12px; padding: 3px 11px; }
#reveal-card .stars { font-size: 15px; }
.mock-chip { position: absolute; top: 16px; right: 16px; z-index: 2; border-radius: 999px; background: rgba(24, 37, 29, .68); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 8px; }
.reveal-name { margin-top: 4px; color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1.2; }
.reveal-sub { margin-top: 2px; min-height: 1.2em; color: var(--sub); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.reveal-comment { margin-top: 10px; max-width: 320px; color: var(--cream-mid); font-size: 12px; font-weight: 600; line-height: 1.6; }
.reveal-comment:empty { display: none; }

/* チャイムの視覚表現（音符が じゅんばんに ぽん・ぽん・ぽん） */
.nt { position: absolute; z-index: 4; font-weight: 800; color: #DC9F14; opacity: 0; pointer-events: none; }
.nt1 { right: -8px; top: -6px; font-size: 23px; }
.nt2 { right: -26px; top: 30px; font-size: 17px; }
.nt3 { left: -18px; top: 8px; font-size: 19px; }
#reveal-card.flip-in .nt1 { animation: nt-up .85s ease .5s both; }
#reveal-card.flip-in .nt2 { animation: nt-up .85s ease .68s both; }
#reveal-card.flip-in .nt3 { animation: nt-up .85s ease .86s both; }
@keyframes nt-up {
  0% { opacity: 0; transform: translateY(10px) scale(.5); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.15) rotate(12deg); }
}

/* ずんだもん風のこえ（音のふきだし） */
.zunda {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  margin-top: 20px; max-width: 320px; padding: 11px 15px;
  background: #E3F5E5; border: 3px solid #5BC46D; border-radius: 18px;
  font-size: 14px; font-weight: 800; line-height: 1.55; color: #3B9E4D;
  text-align: left;
}
.zunda::before {
  content: ""; position: absolute; top: -9px; left: 32px;
  width: 13px; height: 13px; background: #E3F5E5;
  border-left: 3px solid #5BC46D; border-top: 3px solid #5BC46D;
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.zunda svg { width: 26px; height: 22px; flex: none; margin-top: 3px; overflow: visible; }
.zunda .sp { fill: #3B9E4D; stroke: #3B9E4D; stroke-width: 2; stroke-linejoin: round; }
.zunda .a1, .zunda .a2 { fill: none; stroke: #3B9E4D; stroke-width: 3; stroke-linecap: round; }
#reveal-card.flip-in .zunda { animation: z-in .7s cubic-bezier(.34, 1.45, .64, 1) .95s both; }
#reveal-card.flip-in .zunda .a1 { animation: blink-a 1.1s ease infinite; }
#reveal-card.flip-in .zunda .a2 { animation: blink-a 1.1s ease .18s infinite; }
@keyframes z-in {
  0% { opacity: 0; transform: scale(.5); }
  55% { opacity: 1; transform: scale(1.1) rotate(2deg); }
  78% { transform: scale(.96) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes blink-a { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ボタン（暗幕の上に置くのでこのオーバーレイだけ配色を変える） */
#overlay .reveal-actions { width: 100%; max-width: 320px; margin-top: 12px; }
#reveal-card.flip-in .reveal-actions { animation: fade-up .5s ease 1.5s both; }
@keyframes fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
#overlay .btn { border-radius: 999px; font-weight: 800; }
#overlay .btn-sub { background: rgba(255, 253, 246, .92); color: var(--ink); }
#overlay .btn-ghost { background: rgba(255, 253, 246, .26); color: var(--cream-hi); }
#overlay .btn-primary {
  background: #FFD666; color: #5C420C;
  box-shadow: 0 5px 0 #DFA92C, var(--drop);
  transition: transform .09s ease, box-shadow .09s ease;
}
#overlay .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #DFA92C, var(--drop-s); }

/* 吸い込み中: 幕がしずかに上がり、脇役はふっと消える */
#overlay.leaving { background: rgba(74, 56, 26, 0); pointer-events: none; transition: background .4s ease; }
#overlay.leaving .get-banner, #overlay.leaving .zunda, #overlay.leaving .nt,
#overlay.leaving .reveal-actions, #overlay.leaving .reveal-comment {
  animation: none !important; opacity: 0 !important; transition: opacity .22s ease;
}

/* しっぱい（フラットな報告カード） */
#reveal-fail { max-width: 320px; margin: 0 auto; padding: 4px 18px 18px; background: var(--card); border-radius: 24px; box-shadow: 0 8px 0 var(--card-edge), 0 30px 50px rgba(40, 26, 6, .35); }
.reveal-fail-msg { padding: 24px 4px 12px; color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.7; text-align: center; }
/* 共通ボタン: 押せるもの＝トイボタン（主役=ごほうびの黄 / わき役=クリーム / 逃げ道=フラット） */
.reveal-actions { display: flex; gap: 10px; margin-top: 12px; }
.btn { min-height: 46px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 800; padding: 0 16px; transition: transform .09s ease, box-shadow .09s ease; }
.btn-primary { flex: 1; background: #FFD666; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .42), 0 5px 0 #DFA92C, var(--drop); color: #5C420C; }
.btn-primary:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .42), 0 1px 0 #DFA92C, var(--drop-s); }
.btn-sub { flex: 1; background: var(--card); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--card-edge), var(--drop-s); color: var(--ink); }
.btn-sub:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 1px 0 var(--card-edge); }
.btn-ghost { background: rgba(76, 64, 44, .08); color: var(--sub); }
.btn-ghost:active { transform: scale(.97); }

/* ゲット結果: 主役「図鑑に入れる」を大きく上に、逃げ道（名前を直す／撮り直す）は下に控えめに */
#overlay .reveal-actions-primary .btn-primary { min-height: 54px; font-size: 17px; }
#overlay .reveal-actions-sub { margin-top: 8px; }
#overlay .reveal-actions-sub .btn { flex: 1; min-height: 40px; font-size: 14px; font-weight: 700; }
/* カードはタップで名前を読み上げ（子どもに聞かせる）。押せる合図を出す */
#get-card { cursor: pointer; transition: transform .09s ease; }
#get-card:active { transform: scale(.985); }

.confetti-host { position: absolute; inset: 0; z-index: 55; overflow: hidden; pointer-events: none; }.confetti-bit { position: absolute; top: 45%; left: 50%; width: 8px; height: 8px; border-radius: 2px; animation: confetti 1s ease-out forwards; opacity: 0; }@keyframes confetti { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } }

.sheet { display: flex; flex-direction: column; gap: 8px; }.sheet-title { margin-bottom: 4px; color: var(--ink); font-size: 17px; font-weight: 700; text-align: center; }.sheet-btn { min-height: 50px; border: 0; border-radius: 13px; background: #f1f4f1; color: var(--ink); font-size: 15px; font-weight: 700; padding: 0 15px; text-align: left; }.sheet-btn:active { transform: scale(.985); }.sheet-btn.danger { background: #fff0ee; color: var(--danger); }.sheet-btn.ghost { background: #edf0ed; color: var(--sub); text-align: center; }


/* ================================================================
   上映会（s2意匠）: 暖色の暗幕・ぷっくりビーズ・大きなカード1まい・終幕。
   きょう・きのう・各なかまで共通の劇場（暗幕は黒でなく rgba(74,56,26,α)）
   ================================================================ */
.replay-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background:
    radial-gradient(130% 86% at 50% 16%, rgba(255, 246, 222, .13), rgba(255, 246, 222, 0) 58%),
    linear-gradient(rgba(74, 56, 26, .56), rgba(74, 56, 26, .62)),
    var(--paper);
}

/* ぷっくりビーズのプログラム（押せない→フラット） */
.ttop { position: absolute; top: 0; right: 0; left: 0; z-index: 5; padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 0; pointer-events: none; transition: opacity .6s ease; }
.replay-overlay.award .ttop { opacity: 0; }
.beads { display: flex; gap: 9px; }
.bead {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 253, 246, .24);
  box-shadow: inset 0 2px 3px rgba(40, 26, 6, .28);
}
.bead .fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c, #FFC53E);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14);
  transform: scaleX(0);
  transform-origin: left center;
}
.bead.bp { animation: bead-pop .38s cubic-bezier(.34, 1.45, .64, 1); }
@keyframes bead-pop { 0% { transform: scale(1); } 45% { transform: scale(1.24); } 100% { transform: scale(1); } }
.ttop .lbl { margin-top: 9px; color: var(--cream-mid); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: center; }

.replay-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 48px);
  right: 14px;
  z-index: 6;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 238, .14);
  color: var(--cream-mid);
  font-size: 16px;
  font-weight: 800;
}

/* 場面の切り替え */
.replay-overlay .scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.replay-overlay .scene.on { opacity: 1; pointer-events: auto; }

/* おくりのタップ地帯（押せるが見えない） */
.zone { position: absolute; top: 0; bottom: 0; z-index: 1; border: 0; background: transparent; padding: 0; }
.zl { left: 0; width: 36%; }
.zr { right: 0; width: 64%; }

/* じょうえい: 大きなカード1まい（v5カード文法の拡大版） */
#replay-show { padding: 72px 0 48px; }
.bcard {
  position: relative;
  z-index: 2;
  width: min(320px, calc(100% - 52px));
  border: 0;
  background: var(--card);
  border-radius: 28px;
  padding: 16px 16px 22px;
  text-align: center;
  box-shadow: 0 8px 0 var(--card-edge), 0 34px 60px rgba(40, 26, 6, .38);
  transform: translateY(52px) scale(.8);
  opacity: 0;
}
.bcard.in {
  transform: none;
  opacity: 1;
  transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease;
}
.bcard.r3 { border: 2.5px solid var(--gold); box-shadow: 0 8px 0 #D8B45C, 0 34px 60px rgba(40, 26, 6, .38); }
.bcard .mat { padding: 8px; border-radius: 24px; }
.bcard .mat .inner { padding: 4px; border-radius: 15px; }
.bcard .mat img { border-radius: 12px; }
.bcard .sweep { inset: 8px; border-radius: 15px; }
.bcard.r3 .sweep::after { animation: toy-sweep 1.3s ease-out .55s 1 both; }
.bcard .spk { width: 30px; height: 30px; font-size: 14px; }
.bcard .row { justify-content: center; margin-top: 14px; }
.bcard .no { font-size: 12px; padding: 3px 11px; }
.bcard .stars { font-size: 15px; }
.bcard .name { display: block; margin-top: 4px; color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1.2; }
.bcard .en { display: block; min-height: 1.2em; margin-top: 2px; color: var(--sub); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.bcard .ono { margin-top: 16px; font-size: 20px; padding: 10px 20px; }
.ono.go { animation: toy-wig .7s ease; }
.replay-overlay .scene.on .a1 { animation: blink-a 1.1s ease infinite; }
.replay-overlay .scene.on .a2 { animation: blink-a 1.1s ease .18s infinite; }
.hint-l, .hint-r {
  position: absolute;
  bottom: calc(20px + var(--safe-bottom));
  z-index: 1;
  color: var(--cream-lo);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
.hint-l { left: 22px; }
.hint-r { right: 22px; }

/* 終幕（祝いは「中」まで: ふきだし＋ミニカード整列＋紙吹雪ひとにぎり）
   枚数が多い日は画面に収まらないため縦スクロール。::before/::afterのスペーサーが
   余白を吸収し、少ない日は中央寄せ・あふれる日は上から並ぶ（centerのままだと上下が切れて
   「おしまい」に届かない） */
#replay-end {
  z-index: 3;
  /* centerのままだと、あふれた分が上下に振り分けられて上側がスクロール不能領域に沈む。
     縦位置は::before/::afterのスペーサーに一任（少ない日はそれが余白を等分＝中央寄せ） */
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 上96px＝ビーズ・ラベル・✕ボタン(safe+48+40)の下から。あふれる日にふきだしが重ならない */
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 24px calc(28px + var(--safe-bottom));
}
#replay-end::before, #replay-end::after { content: ""; flex: 1; }
.fbub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 3px solid #FFD666;
  border-radius: 24px;
  padding: 14px 20px;
  box-shadow: var(--drop);
}
.fbub::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 44px;
  width: 13px;
  height: 13px;
  background: var(--card);
  border-right: 3px solid #FFD666;
  border-bottom: 3px solid #FFD666;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
.fbub svg { width: 30px; height: 25px; flex: none; overflow: visible; }
.fbub .sp { fill: #DC9F14; stroke: #DC9F14; stroke-width: 2; stroke-linejoin: round; }
.fbub .a1, .fbub .a2 { fill: none; stroke: #DC9F14; stroke-width: 3; stroke-linecap: round; }
.fbub p { color: var(--ink); font-size: 19px; font-weight: 800; line-height: 1.5; }
.fminis { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; margin-top: 26px; }
/* たくさんみつけた日（9こ以上）は4列に詰めてスクロール量をおさえる */
.fminis.many { gap: 8px; }
.fminis.many .fmini { width: 22.5%; }
.fminis.many .fmini figcaption, .fminis.many .fmini .pick-name { font-size: 10px; }
.fmini {
  flex: none;
  width: 30%;
  max-width: 104px;
  background: var(--card);
  border-radius: 18px;
  padding: 6px 6px 8px;
  text-align: center;
  box-shadow: var(--drop-s);
}
.fmini.r3 { border: 2.5px solid var(--gold); }
.fmini .mat { padding: 4px; border-radius: 12px; }
.fmini .mat .inner { padding: 2px; border-radius: 8px; }
.fmini .mat img { border-radius: 6px; }
.fmini figcaption {
  overflow: hidden;
  margin-top: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 30px;
  background: #FFD666;
  --edge: #DFA92C;
  --gl: 4px;
  border-radius: 999px;
  padding: 13px 46px;
}
.fend b { color: #5C420C; font-size: 20px; font-weight: 800; }
.fend small { color: #9A7A28; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.fagain {
  margin-top: 14px;
  background: var(--card);
  --edge: var(--card-edge);
  --gl: 3px;
  border-radius: 999px;
  padding: 9px 22px;
  color: #8A7A5A;
  font-size: 13px;
  font-weight: 800;
}
/* 授与が控えている終幕: おしまい/もういっかいは出さない（受け取り前に閉じる事故を防ぐ） */
#replay-end.nobtn .fend, #replay-end.nobtn .fagain { display: none; }
/* とうじょうの順番（ふきだし → ミニカード → ボタン） */
#replay-end.on .fbub { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .1s both; }
#replay-end.on .fmini:nth-child(1) { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .4s both; }
#replay-end.on .fmini:nth-child(2) { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .5s both; }
#replay-end.on .fmini:nth-child(3) { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .6s both; }
#replay-end.on .fmini:nth-child(4) { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .7s both; }
#replay-end.on .fmini:nth-child(n+5) { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) .8s both; }
#replay-end.on .fend { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) 1.05s both; }
#replay-end.on .fagain { animation: fin-popin .5s cubic-bezier(.34, 1.45, .64, 1) 1.18s both; }
@keyframes fin-popin {
  0% { transform: translateY(34px) scale(.6); opacity: 0; }
  70% { transform: translateY(-4px) scale(1.06); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* 紙吹雪ひとにぎり（10枚・一度きり＝祝いの「中」） */
.cfw { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cf { position: absolute; top: 56px; width: 11px; height: 15px; border-radius: 4px; opacity: 0; font-style: normal; }
.cf.note { width: auto; height: auto; background: none !important; color: #FFF6DE; font-size: 19px; }
#replay-end.on .cf { animation: cf-fall var(--fd, 1.6s) ease-in var(--dl, .5s) both; }
@keyframes cf-fall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(66vh) rotate(var(--r, 220deg)); opacity: 0; }
}

/* ================================================================
   シール授与エンドロール（きょうの終幕のあと＝祝いの「大」。s8正典）
   静かな暗転→封筒が降りる→タップでぱかっ→お披露目＋声→顔ボタンへ吸い込み
   ================================================================ */
.tdim {
  position: absolute;
  inset: 0;
  background: rgba(40, 26, 6, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.replay-overlay.award .tdim { opacity: 1; }

#replay-award { z-index: 4; padding: 0 24px; }
.a-ttl { color: var(--cream-hi); font-size: 22px; font-weight: 800; letter-spacing: .02em; text-align: center; }
#replay-award.on .a-ttl { animation: award-in .6s ease .1s both; }
#replay-award.open .a-ttl { animation: none; opacity: 0; transition: opacity .45s ease; } /* 題字は開封で役目を終える */

/* きょうの いちばん えらび: 終幕のミニカード（.fmini）そのものがえらぶボタンになる。
   どれを押しても正解（失敗がない）。えらんだ写真はその場でシールに変身（#replay-award.direct） */
.pick-card { border: 0; font: inherit; cursor: pointer; }
.pick-card:active { transform: scale(.94); }
.pick-name {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 手引き2枚は同じマスに重ねる（入れ替わっても行が跳ねない） */
.a-hints { display: grid; justify-items: center; margin-top: 18px; }
.a-hint { grid-area: 1 / 1; color: var(--cream-lo); font-size: 13px; font-weight: 700; opacity: 0; }
#replay-award.on:not(.open) .h1 { opacity: 1; animation: award-in .5s ease 1.6s both; }  /* 封筒が降りきってから */
#replay-award.open:not(.fly) .h2 { opacity: 1; animation: award-in .5s ease 2.1s both; } /* お披露目と声のあとに */
@keyframes award-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 舞台＝封筒とシールの共有座標系 */
.st-stage { position: relative; z-index: 2; width: 220px; height: 240px; margin-top: 26px; }

/* 封筒（白い本体＋金のフタ＋金の封かん） */
.env-big {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 190px;
  height: 138px;
  margin-left: -95px;
  border-radius: 16px;
  perspective: 560px;
  cursor: pointer;
  background: linear-gradient(#FFFDF6, #FFF3D4);
  box-shadow: 0 6px 0 var(--card-edge), 0 18px 34px rgba(40, 26, 6, .4);
  opacity: 0;
}
#replay-award.on .env-big { opacity: 1; animation: env-drop 1.15s cubic-bezier(.34, 1.45, .64, 1) .3s both; }
@keyframes env-drop {
  0% { transform: translateY(-52vh) rotate(-8deg); opacity: 0; }
  26% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* 開封後は そっと下がって主役をシールへ譲る */
#replay-award.open .env-big { animation: env-sink .8s ease .55s both; cursor: default; }
@keyframes env-sink {
  from { transform: none; opacity: 1; }
  to { transform: translateY(30px) scale(.94); opacity: .45; }
}
.env-flap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 64px;
  background: linear-gradient(#F5D97E, #DFAE3C);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 16px 16px 0 0;
  transform-origin: 50% 0;
  transition: transform .55s cubic-bezier(.34, 1.45, .64, 1) .08s;
}
#replay-award.open .env-flap { transform: rotateX(-176deg); } /* フタが ぱかっ */
.env-seal {
  position: absolute;
  top: 42px;
  left: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: linear-gradient(150deg, #F5D97E, #C6982F);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 3px 6px rgba(96, 70, 28, .3);
  transition: transform .35s ease .04s, opacity .35s ease .04s;
}
#replay-award.open .env-seal { transform: scale(1.7); opacity: 0; } /* 封かんが ぱりん */

/* シール: 丸・ぷっくり・金箔リム（★は付けない＝カードとは別のモノ） */
.stick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 132px;
  height: 132px;
  margin-left: -66px;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
}
.s-body {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 9px;
  background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 12px 24px rgba(40, 26, 6, .4);
}
.s-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 24%, #FFFDF6, #FFF3D4 76%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .85), inset 0 -6px 10px rgba(198, 152, 47, .26);
}
.s-emoji { font-size: 42px; line-height: 1; }
.s-name { max-width: 92px; color: var(--gold-ink); font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1.25; text-align: center; }
/* きょうのシール: カードの写真が顔になる（s-photoが見えている時だけ名前を写真の裾に重ねる） */
.s-face { position: relative; overflow: hidden; }
.s-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.s-photo:not([hidden]) ~ .s-name { position: absolute; right: 0; bottom: 12px; left: 0; z-index: 1; max-width: none; padding: 0 12px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .65); }

/* フタが開くと 中から飛び出して お披露目 */
#replay-award.open .stick { opacity: 1; animation: st-pop .75s cubic-bezier(.34, 1.45, .64, 1) .4s both; }
@keyframes st-pop {
  0% { opacity: 0; transform: translateY(112px) scale(.16) rotate(-12deg); }
  40% { opacity: 1; }
  70% { transform: translateY(-14px) scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
/* シールをタップ → 顔ボタンの方向へ弧を描いて縮みながら吸い込まれる（おさまる文法） */
#replay-award .stick.fly { animation: st-fly .8s cubic-bezier(.55, -.15, .8, .5) both; }
@keyframes st-fly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.3, .7, .5, 1); }
  55% { transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .74)) scale(.5) rotate(9deg); opacity: 1; animation-timing-function: cubic-bezier(.55, -.15, .8, .5); }
  84% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.06) rotate(-14deg); opacity: 0; }
}

/* 声で承認（金＝ごほうびトーン）。シールの真上に */
.a-vwrap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 340px;
  max-width: 88vw;
  margin-bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity .25s ease;
}
#replay-award.fly .a-vwrap { opacity: 0; }
/* .ono の基本定義がファイル後方（Phase B節）にあるため、ここはidで勝たせる */
#replay-award .a-voice { --c: #FFC53E; --ct: #FFF3D4; --cd: #A87E1B; font-size: 16px; opacity: 0; }
#replay-award .a-voice::before {
  top: auto;
  bottom: -9px;
  left: 36px;
  border-left: none;
  border-top: none;
  border-right: 3px solid var(--c);
  border-bottom: 3px solid var(--c);
  border-radius: 0 0 3px 0;
}
#replay-award.open .a-voice { opacity: 1; animation: a-voice-in .55s cubic-bezier(.34, 1.45, .64, 1) 1.3s both; }
#replay-award.open .a-voice.go { animation: toy-wig .7s ease; }
@keyframes a-voice-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* いちばんえらび直後の授与（directモード）: 封筒は出さず、押した写真の位置（--mx/--my/--ms）から
   シールがふくらんで定位置へ届く＝「写真がシールになった」が目で分かる */
#replay-award.direct .env-big { display: none; }
/* 題字は変身のあいだだけ＝シールが定位置に落ち着いたら退場（声のふきだしと重ねない。封筒と同じ文法） */
#replay-award.direct.open .a-ttl { transition: none; animation: ttl-flash 1.3s ease .1s both; }
@keyframes ttl-flash {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: none; }
  72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
#replay-award.direct.open .stick:not(.fly) { animation: st-morph .95s cubic-bezier(.3, .9, .4, 1) .1s both; }
@keyframes st-morph {
  0% { opacity: 1; transform: translate(var(--mx), var(--my)) scale(var(--ms)) rotate(-4deg); }
  60% { opacity: 1; transform: translate(0, -10px) scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}

/* 封筒の気配（未開封シール）: きょうの再生ボタンの肩に小さく品よく乗る */
.penv {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 18px;
  height: 13px;
  border-radius: 2.5px;
  background: linear-gradient(#FFFDF6, #FFF3D4);
  box-shadow: 0 1.5px 0 var(--card-edge), 0 2px 4px rgba(96, 70, 28, .18);
  transform: rotate(10deg);
  pointer-events: none;
}
.penv::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(#F5D97E, #DFAE3C);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 2.5px 2.5px 0 0;
}

/* 未貼りバッジ（金の丸シール）: 受け取り済み・未貼りの気配。貼ると消える */
.face-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  z-index: 2;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D);
  box-shadow: 0 2px 0 var(--card-edge), 0 3px 6px rgba(96, 70, 28, .18);
  transform: rotate(8deg);
  pointer-events: none;
}
.face-badge::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 24%, #FFFDF6, #FFF3D4 76%);
}
/* シールが吸い込まれて幕が下りた瞬間、顔がぱくっと弾む（zk-popと同じ語彙） */
.face.pop { animation: zk-pop .55s cubic-bezier(.34, 1.45, .64, 1); }
.stats-panel { max-width: 520px; }.stats-list { display: grid; grid-template-columns: 1fr auto; gap: 11px 14px; margin: 8px 4px; font-size: 14px; }.stats-list dt { color: var(--sub); font-weight: 600; }.stats-list dd { color: var(--ink); font-weight: 700; }
/* 🛠 デバッグ節: 既定は非表示。開発環境 or 解放時のみ body.debug-on で出す */
.debug-tools { display: none; }
body.debug-on .debug-tools { display: block; }
.debug-label { margin: 16px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--sub); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.debug-select { flex: 1; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; padding: 0 12px; -webkit-appearance: none; appearance: none; }
.toast-host { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 16px; left: 16px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }.toast { display: flex; min-height: 46px; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; background: rgba(24, 37, 29, .9); box-shadow: 0 8px 20px rgba(24, 37, 29, .22); color: #fff; opacity: 0; padding: 0 15px; transform: translateY(-16px); transition: opacity .25s ease, transform .25s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast-icon { font-size: 17px; }.toast-label { font-size: 14px; font-weight: 700; }

/* A chosen library tile rises into focus without a separate navigation state.
   s4のタッチ体験: タップごとのオノマトペバブル・★3はタップ時だけホロ・1タップ=1反応 */
.card-peek { position: fixed; inset: 0; z-index: 49; overflow: hidden; pointer-events: none; }.card-peek.is-open, .card-peek.is-closing { pointer-events: auto; }.card-peek::before { position: absolute; inset: 0; background: rgba(74, 56, 26, .46); content: ""; opacity: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }.card-peek.is-open::before { animation: fade-in .18s ease-out both; }.card-peek.is-closing::before { animation: fade-out .15s ease-in both; }@keyframes fade-in { to { opacity: 1; } }@keyframes fade-out { to { opacity: 0; } }.card-peek-card { position: absolute; top: 42%; left: 50%; z-index: 1; overflow: hidden; border: 0; border-radius: 24px; background: var(--card); padding: 12px 12px 6px; box-shadow: 0 8px 0 var(--card-edge), 0 28px 58px rgba(24, 37, 29, .28); transform: translate(-50%, -50%); transform-origin: center; will-change: transform, opacity; }.card-peek-caption { padding: 12px 6px 12px; text-align: center; }#card-peek-name { color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1.18; }.zukan-card.is-peeking { transform: scale(.97); }.zukan-card.is-peeking .card-media img { filter: saturate(.8) brightness(.9); opacity: .25; }
/* ピークのキャプションも標本・ゲット画面と同じ3段（No.＋★ → なまえ → 英語）を中央寄せで */
.card-peek-caption .row { justify-content: center; margin-top: 0; margin-bottom: 3px; }
.card-peek-caption .no:empty, .card-peek-caption .stars:empty { display: none; }
.peek-sub { margin-top: 5px; color: var(--sub); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.peek-sub:empty { display: none; }
.peek-ph { position: relative; display: block; }
.peek-ph .mat img { aspect-ratio: 1 / 1; background: #EFE5CE; } /* ゲット画面と同じ正方形マット */
/* 発見日 — 写真のすみに小さく刻印（プリント写真の日付の文法）。箱を持たせず存在感を絞る */
.peek-ph .inner { position: relative; }
/* ★3: 金のふち。ホロの光はタップした時だけ一度横切る（常時は光らない） */
.card-peek-card.r3 { border: 2.5px solid var(--gold); box-shadow: 0 0 0 4px rgba(235, 201, 110, .22), 0 28px 58px rgba(24, 37, 29, .28); }
.peek-sweep { position: absolute; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.card-peek-card.r3 .peek-sweep { display: block; }
.peek-sweep::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-130%);
}
.peek-sweep.go::after { animation: toy-sweep .9s ease-out both; }
/* 1タップ=1反応の手応え（ぽん） */
.card-peek-card.pop { animation: peek-pop .5s cubic-bezier(.34, 1.45, .64, 1); }
@keyframes peek-pop {
  0% { transform: translate(-50%, -50%) scale(.965); }
  46% { transform: translate(-50%, -52%) scale(1.04); }
  72% { transform: translate(-50%, -49.5%) scale(.99); }
  100% { transform: translate(-50%, -50%); }
}

@media (min-width: 700px) {
  .app-header { max-width: 720px; width: 100%; margin: 0 auto; }
  main { width: min(100%, 720px); margin: 0 auto; }
  .floating-camera { right: max(28px, calc((100vw - 720px) / 2 + 20px)); }
  .face-float { right: max(20px, calc((100vw - 720px) / 2 + 14px)); }
  .zukan-grid { column-count: 3; }
  .specimen-grid { grid-template-columns: repeat(3, 1fr); }
}

/* なまえずかん: 「◯◯ずかんは／まだ からっぽ」を名前の途中で折り返さない */
#empty-title { white-space: pre-line; }

/* なまえずかん: ヘッダーの丸顔アバター（設定時はロゴの葉と入れ替わる） */
.brand-avatar { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent-soft); object-fit: cover; }

/* なまえずかんの入力まわり（課金オンボの profile ステップで使用） */
.onboard-q { margin-top: 14px; color: var(--ink); font-size: 15px; font-weight: 700; }
#onboard-name { width: 100%; margin: 12px 0 8px; padding: 13px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 20px; font-weight: 700; text-align: center; }
#onboard-name:focus { border-color: var(--accent); outline: none; }
.onboard-hint { margin-bottom: 14px; color: var(--sub); font-size: 12px; font-weight: 600; }

/* ---------- 課金オンボ（Tier 3.0）: フルスクリーンのステップフロー ---------- */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 62; /* replay(60)より上・toast(70)より下 */
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.ob-top {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 6px;
}

/* もどる/とばす は同じ幅を確保して、ドットが常に中央に来るようにする */
.ob-back {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sub);
  font-size: 21px;
  line-height: 1;
  padding-bottom: 2px;
}
.ob-back:active { transform: scale(.92); }

.ob-dots { display: flex; flex: 1; justify-content: center; gap: 5px; }
.ob-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s ease; }
.ob-dot.done { background: #b9ccbc; }
.ob-dot.active { background: var(--accent); transform: scale(1.35); }

.ob-skip { min-width: 40px; flex: none; border: 0; background: transparent; color: var(--sub); font-size: 13px; font-weight: 700; padding: 8px 2px; text-align: right; }

.ob-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px var(--page-inset) calc(28px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.ob-step { max-width: 460px; margin: 0 auto; animation: ob-in .3s cubic-bezier(.2, .9, .3, 1); text-align: center; }
@keyframes ob-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

.ob-eyebrow { margin-top: 12px; color: var(--sub); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.ob-title { margin: 8px 0 10px; color: var(--ink); font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1.34; }
.ob-title-adult { font-size: 21px; line-height: 1.5; text-align: left; }
.ob-sub { color: var(--sub); font-size: 14px; font-weight: 600; line-height: 1.7; }
.ob-actions { display: flex; max-width: 340px; gap: 10px; justify-content: center; margin: 18px auto 0; }
.ob-fade { animation: ob-fade-in .35s ease-out both; }
@keyframes ob-fade-in { from { opacity: 0; transform: translateY(6px); } }
.ob-note { margin-top: 12px; color: var(--sub); font-size: 11px; font-weight: 600; }

/* 0. 音のフック: 本物と同じ標本カード文法のデモカード（どうぶつ色の上ふち） */
/* 撮影後（ゲット画面）と同じカード文法に統一: マット枠＋中央寄せの No.ピル＋★＋なまえ＋英語 */
.ob-demo-card {
  position: relative;
  display: block;
  width: min(56vw, 210px);
  margin: 26px auto 16px;
  border: 0;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 8px 0 var(--card-edge), 0 14px 30px rgba(24, 37, 29, .16);
  padding: 10px 10px 13px;
  text-align: center;
  transition: transform .15s ease;
}
.ob-demo-card:active { transform: scale(.96); }
.ob-demo-card.bounce { animation: card-land .34s cubic-bezier(.2, 1.22, .35, 1); }
.ob-demo-media { display: grid; aspect-ratio: 1; place-items: center; width: 100%; border-radius: 7px; background: #f2f6f0; font-size: 78px; }
.ob-demo-card .row { justify-content: center; }
.ob-demo-name { display: block; margin-top: 3px; color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.2; }
.ob-demo-sub { display: block; margin-top: 1px; color: var(--sub); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.ob-demo-hand {
  position: absolute;
  right: -14px;
  bottom: -12px;
  font-size: 40px;
  animation: ob-hand 1.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(24, 37, 29, .25));
  pointer-events: none;
}
@keyframes ob-hand { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* 1. コンセプト: 育ったずかんのミニチュア。アプリ実画面の縮図（ヒーロー数字＋標本グリッド）が
   目の前で埋まっていく。下端のフェードで「まだ続く」を匂わせる（広がり感） */
.ob-mockapp {
  position: relative;
  display: block;
  width: min(80vw, 310px);
  margin: 20px auto 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(24, 37, 29, .16);
  padding: 14px 14px 0;
  text-align: left;
  transition: transform .15s ease;
}
.ob-mockapp:active { transform: scale(.98); }
.ob-mockapp::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .96));
  content: "";
  pointer-events: none;
}
.ob-mock-head { display: flex; align-items: center; gap: 7px; }
.ob-mock-head .brand-mark { transform: rotate(-41deg) scale(.8); }
.ob-mock-title { color: var(--ink); font-size: 12px; font-weight: 800; }
.ob-mock-label { display: block; margin-top: 11px; color: var(--sub); font-size: 9px; font-weight: 700; }
.ob-mock-count { display: flex; align-items: baseline; gap: 5px; margin-top: 1px; }
#ob-mock-num { color: var(--ink); font-size: 27px; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ob-mock-unit { color: var(--ink); font-size: 12px; font-weight: 800; }
.ob-mock-delta { border-radius: 999px; background: var(--accent-soft); color: var(--accent-pressed); font-size: 9px; font-weight: 800; opacity: 0; padding: 3px 7px; transition: opacity .35s ease; }
.ob-mock-delta.on { opacity: 1; }
.ob-mock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 11px; padding-bottom: 16px; }
.ob-mock-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--cat-color);
  border-radius: 8px;
  background: var(--surface);
  opacity: 0;
  animation: ob-card-in .4s cubic-bezier(.2, 1.22, .35, 1) forwards;
}
@keyframes ob-card-in { from { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.ob-mock-photo { display: grid; aspect-ratio: 1; place-items: center; font-size: 23px; }
.ob-mock-name { display: block; overflow: hidden; color: var(--ink); font-size: 8.5px; font-weight: 800; padding: 3px 3px 4px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ob-mock-card.holo { box-shadow: 0 0 0 2px rgba(216, 178, 90, .92); }
.ob-mock-card.holo .ob-mock-photo {
  background-image: linear-gradient(115deg, transparent 30%, rgba(255, 240, 190, .7) 46%, transparent 62%) !important;
  background-size: 250% 250%;
  animation: card-sheen 3.6s ease-in-out infinite;
}

/* 5. 教育的意味づけ: 語彙爆発カーブ（SVG）＋アイコン付き要点 */
.ob-graph {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 12px 8px 8px;
}
.ob-graph svg { display: block; width: 100%; height: auto; }
.ob-points { display: grid; gap: 8px; margin: 12px 0 0; list-style: none; text-align: left; }
.ob-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.65;
  padding: 10px 13px;
}
.ob-points .pt-icon { font-size: 17px; line-height: 1.4; }

/* 3. かおじゃしん: ぬしカードのプレビューがそのまま入力UI。
   写真を貼った瞬間に金ふち（本物のぬしカードと同じ表面言語）に変わる＝完成の合図 */
.ob-nushi {
  display: flex;
  width: min(84vw, 330px);
  align-items: center;
  gap: 14px;
  margin: 22px auto 12px;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--line), 0 10px 26px rgba(24, 37, 29, .10);
  padding: 12px 14px;
  text-align: left;
  transition: transform .14s ease, box-shadow .25s ease;
}
.ob-nushi:active { transform: scale(.97); }
.ob-nushi.has-photo { box-shadow: 0 0 0 2px rgba(216, 178, 90, .92), 0 10px 26px rgba(199, 153, 53, .22); }
.ob-nushi-photo {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-muted);
  font-size: 30px;
}
.ob-nushi.has-photo .ob-nushi-photo { border: 0; }
.ob-nushi-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-nushi .nushi-info { display: block; min-width: 0; flex: 1; }

/* 3-4. 質問チップ（年齢=1タップで進む / 夢中=複数選択） */
.ob-chips { display: flex; max-width: 340px; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 22px auto 6px; }
.ob-chips-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ob-chip {
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  padding: 0 18px;
  transition: transform .12s ease;
}
.ob-chip:active { transform: scale(.95); }
.ob-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-pressed); }

/* 5. 教育的意味づけ（おうちのかた向け・大人の文体） */
.ob-para { margin: 12px 0 0; color: var(--ink); font-size: 14.5px; line-height: 1.85; text-align: left; }
#ob-meaning-product {
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--accent-pressed);
  font-weight: 700;
  margin-top: 16px;
  padding: 14px 16px;
}

/* 6. 初ゲット実演 */
.ob-mission-art { margin: 26px 0 8px; font-size: 34px; letter-spacing: .18em; }

.ob-mission-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(24, 37, 29, .86);
  box-shadow: 0 8px 20px rgba(24, 37, 29, .28);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ob-mission-x { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 11px; }

/* 7. 誕生リビール（ローディング→紙吹雪＋リキャップ） */
.ob-born-ring {
  display: grid;
  width: 110px;
  height: 110px;
  margin: 34px auto 18px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--sun), var(--accent), #7bc47f, var(--sun));
  padding: 3px;
}
#ob-born-loading .ob-born-ring { animation: ob-pulse 1.1s ease-in-out infinite; }
@keyframes ob-pulse { 50% { transform: scale(1.07); } }
.ob-born-ring.is-born { animation: card-land .5s cubic-bezier(.2, 1.22, .35, 1); }
.ob-born-ring img { width: 100%; height: 100%; border: 3px solid var(--surface); border-radius: 50%; object-fit: cover; }
.ob-born-ring > span { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; background: var(--surface); font-size: 44px; }
.ob-first-card { display: inline-block; margin: 2px auto 0; border-radius: 999px; background: rgba(199, 153, 53, .14); color: #85661f; font-size: 13px; font-weight: 800; padding: 7px 13px; }
.ob-recap { display: grid; max-width: 320px; gap: 9px; margin: 18px auto 0; list-style: none; text-align: left; }
.ob-recap li { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; padding: 11px 14px; }

/* 8. モックペイウォール（無料/プレミアム比較＋プランカード。価格は全部仮） */
.ob-compare { width: 100%; max-width: 400px; margin: 14px auto 0; border-collapse: collapse; font-size: 13px; }
.ob-compare th, .ob-compare td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: center; }
.ob-compare td:first-child { color: var(--sub); font-weight: 600; text-align: left; }
.ob-compare th { color: var(--sub); font-size: 12px; font-weight: 700; }
.ob-compare .ob-col-premium { background: var(--accent-soft); color: var(--accent-pressed); font-weight: 800; }

.ob-plans { display: grid; max-width: 400px; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px auto 0; }
.ob-plan {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 16px 10px 13px;
  transition: transform .12s ease;
}
.ob-plan:active { transform: scale(.97); }
.ob-plan.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 6px 16px rgba(47, 126, 75, .14); }
.ob-plan-badge { position: absolute; top: -10px; left: 50%; border-radius: 999px; background: var(--sun); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; transform: translateX(-50%); white-space: nowrap; }
.ob-plan-name { color: var(--sub); font-size: 12px; font-weight: 700; }
.ob-plan-price { color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ob-plan-per { margin-left: 2px; color: var(--sub); font-size: 12px; font-weight: 700; }
.ob-plan-note { color: var(--sub); font-size: 10.5px; font-weight: 600; }
.ob-mock-note { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ================================================================
   2026 native-MVP redesign
   Child home = replay + stable cards. Ownership, totals and tools live
   behind one adult long-press gate instead of competing with play.
   ================================================================ */
/* おうちのかたゲートはヘッダーから撤去し、じぶんページ最下部の .parent-strip に移設した */
.gate-nudge { animation: gate-nudge .48s ease; }
@keyframes gate-nudge { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }

#view-zukan {
  padding: 3px 0 calc(120px + var(--safe-bottom));
  scroll-padding-top: 12px;
}

.home-story {
  position: relative;
  min-height: 104px;
  gap: 14px;
  margin: 6px 16px 14px;
  overflow: hidden;
  border: 1px solid rgba(220, 159, 53, .2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.48) 0 18%, transparent 18.5%),
    linear-gradient(135deg, #f4d991, #e9b75c);
  box-shadow: 0 12px 28px rgba(115, 82, 24, .13);
  padding: 13px 14px;
}
.home-story::after {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 96px;
  height: 76px;
  border: 2px solid rgba(255,255,255,.36);
  border-radius: 70% 12% 70% 12%;
  content: "";
  transform: rotate(-18deg);
}
.home-story .story-ring {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  padding: 3px;
  transform: rotate(-2deg);
}
.home-story .story-ring img { border: 0; border-radius: 17px; }
.story-entry-kicker { color: #73500f; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.home-story .story-entry-title { color: #3e2e0f; font-size: 18px; font-weight: 900; letter-spacing: -.03em; }
.home-story .story-entry-sub { color: rgba(62,46,15,.72); font-size: 11px; }
.home-story .story-entry-play { position: relative; z-index: 1; background: #fffdf8; box-shadow: 0 5px 14px rgba(82,55,8,.16); color: #775317; }

.child-home-entry {
  display: flex;
  width: auto;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  margin: 0 16px 12px;
  border: 1px solid rgba(30,110,90,.14);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,253,248,.95), rgba(222,238,231,.86));
  box-shadow: 0 7px 18px rgba(36,53,45,.08);
  padding: 10px 12px;
  text-align: left;
}
.child-home-entry:active { transform: scale(.985); }
.child-home-face { display: grid; width: 50px; height: 50px; flex: none; place-items: center; overflow: hidden; border: 2px solid rgba(255,255,255,.9); border-radius: 16px; background: #f3dca2; box-shadow: 0 4px 10px rgba(67,75,59,.1); font-size: 24px; }
.child-home-face img { width: 100%; height: 100%; object-fit: cover; }
.child-home-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.child-home-copy strong { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 900; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.child-home-copy small { color: var(--accent); font-size: 11px; font-weight: 800; }
.child-home-arrow { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 25px; font-weight: 500; line-height: 1; padding-bottom: 3px; }

.play-cue {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 20px 18px;
  color: #48635a;
  font-size: 12px;
  font-weight: 800;
}
.play-cue-wave { display: flex; width: 24px; height: 20px; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: var(--accent-soft); }
.play-cue-wave i { display: block; width: 2px; border-radius: 99px; background: var(--accent); }
.play-cue-wave i:nth-child(1) { height: 6px; }
.play-cue-wave i:nth-child(2) { height: 11px; }
.play-cue-wave i:nth-child(3) { height: 7px; }

/* The child home has one grammar. Album and totals are no longer inline modes. */
.zukan-toggle { display: none !important; }
.zukan-list { padding-bottom: 20px; }
.date-head { align-items: flex-end; justify-content: space-between; margin: 30px 20px 12px; }
.date-head:first-child { margin-top: 0; }
.date-head .dh-big { max-width: calc(100% - 42px); font-size: clamp(18px, 4.8vw, 22px); line-height: 1.18; }
.date-head .dh-sub { border-radius: 999px; background: rgba(255,255,255,.55); padding: 5px 8px; }

.specimen-grid {
  gap: 13px;
  padding: 0 16px;
}
.zukan-card.specimen {
  overflow: hidden;
  border: 0;
  border-top: 5px solid var(--cat-color);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(36, 53, 45, .1), 0 1px 0 rgba(255,255,255,.8) inset;
}
.zukan-card.specimen .card-media { margin: 5px 5px 0; border-radius: 15px; }
.zukan-card.specimen .card-media img { aspect-ratio: 1 / 1; }
.spec-caption { padding: 10px 12px 12px; }
.spec-no { color: #77857e; font-size: 8px; letter-spacing: .12em; }
.spec-name { margin-top: 3px; font-size: 18px; letter-spacing: -.02em; }
.spec-sub { margin-top: 2px; color: #718078; font-size: 11px; }
.zukan-card .card-new { top: 11px; left: 11px; border-radius: 999px; background: #fff9df; box-shadow: 0 2px 8px rgba(46,46,20,.12); color: #5f7a32; padding: 5px 7px; }
.zukan-card.specimen.holo { box-shadow: 0 0 0 2px rgba(208,164,73,.76), 0 9px 22px rgba(151,112,33,.2); }

/* みつけた（撮影）と とりこみ は「揃ったペア」: 同寸・同じ塗り（濃茶ベタ＋白アイコン）。
   親向け/子向けの差は色やサイズではなく置き場所で付ける（撮影＝親指圏の右端／取り込み＝その左）。
   ラベル・なが押し表記なし。長押しは押下中の外周リング＋タップ時のnudgeで手触りで伝える */
.floating-camera,
.floating-import {
  bottom: calc(20px + var(--safe-bottom));
  width: 58px;
  height: 58px;
  border: none;
  /* 他のボタンと同じトイボタン公式（押せるもの＝立体）: 明るい面＋一段濃い底面エッジ＋接地影。
     暗い面＋暗いエッジだと本体と影が繋がって塊に見えるので、明るい面で立体を成立させる。
     色はアプリ既存の語彙どおり 金＝アクション（撮影）／クリーム＝ナビ（取り込み） */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform .09s ease, box-shadow .09s ease;
}
.floating-camera {
  right: 16px;
  background: #FFD666; /* シャッターと同じ金＝「撮る」の主役 */
  color: #4C402C;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .5),
    0 4px 0 #DFA92C,
    0 7px 13px rgba(96, 70, 28, .13);
}
.floating-import {
  right: calc(16px + 58px + 14px);
  background: var(--card);
  color: var(--ink);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    0 4px 0 var(--card-edge),
    0 7px 13px rgba(96, 70, 28, .13);
}
.floating-camera:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 1px 0 #DFA92C, var(--drop-s); }
.floating-import:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 1px 0 var(--card-edge), var(--drop-s); }
.floating-camera .floating-icon { width: 25px; height: 23px; }
.floating-import-icon { width: 26px; height: 26px; display: block; }

/* まとめ取り込みの進捗（オーバーレイ上端中央・儀式の邪魔をしない小さなピル） */
.import-progress {
  position: absolute;
  top: calc(14px + var(--safe-top, 0px));
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(76, 64, 44, .9);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(76, 64, 44, .22);
}

/* カメラ画面 → ずかんへ戻る。ずかん画面の「みつけた／とりこみ」ペアと同じトイボタン公式で揃える。
   ナビ＝クリーム面（.floating-importと同語彙／撮影の金と対）。置き場所は右下＝ずかん画面の
   「みつけた」と同位置。撮影→保存→ずかんを開くまで親指位置が動かず、往復をトグルで押せる */
.floating-zukan {
  right: 16px;
  bottom: calc(20px + var(--safe-bottom));
  width: 58px;
  height: 58px;
  border: none;
  background: var(--card);
  color: var(--ink);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    0 4px 0 var(--card-edge),
    0 7px 13px rgba(96, 70, 28, .13);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform .09s ease, box-shadow .09s ease;
}
.floating-zukan:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 1px 0 var(--card-edge), var(--drop-s); }
/* 本の線画（絵文字📖の置き換え。とりこみアイコンと同じ2px currentColorの線画トンマナ） */
.floating-book-icon { width: 26px; height: 26px; display: block; }

/* Child-owned surface: face/name and sticker play stay out of the management view.
   Phase C: 旧深緑を紙色トークンへ（s3方向の馴染み） */
.child-space {
  position: fixed;
  inset: 0;
  z-index: 64;
  overflow-y: auto;
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 214, 110, .26) 0 10%, transparent 10.5%),
    radial-gradient(circle at 4% 78%, rgba(235, 201, 110, .18) 0 14%, transparent 14.5%),
    radial-gradient(circle at 10px 10px, rgba(96, 70, 28, .05) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--paper);
  padding-bottom: calc(30px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}
.child-space-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 16px;
}
.child-space-title-wrap { min-width: 0; }
.child-space-title { color: var(--ink); font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child-space-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--card-edge), var(--drop-s);
  color: var(--sub);
  font-size: 15px;
  font-weight: 800;
  transition: transform .09s ease, box-shadow .09s ease;
}
.child-space-close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 1px 0 var(--card-edge); }
.child-space-body { width: min(100%, 480px); margin: 0 auto; padding: 8px 18px 28px; }

/* 大人向け入口（ヘッダーから移設）。子の遊びゾーンの下に、区切りを挟んだ落ち着いたトーンで置く */
.cs-parent { margin-top: 30px; }
.cs-parent-hr { border: 0; border-top: 1px solid rgba(140, 120, 80, .18); margin: 0 4px 16px; }
.parent-strip {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(76, 64, 44, .07);
  cursor: pointer;
  text-align: left;
}
.parent-strip:active { background: rgba(76, 64, 44, .12); }
.parent-strip .ps-ico { font-size: 19px; flex: none; opacity: .7; }
.parent-strip .ps-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.parent-strip .ps-label { color: #8D7C5C; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.parent-strip .ps-hint { color: #A59472; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-strip .ps-chev { color: #C3B490; font-size: 16px; font-weight: 800; flex: none; }
/* 短タップ時の反応。タップ地点のすぐ下に出す（画面上部のトーストは遠くて気づかれない） */
.parent-strip-nudge { margin: 9px 4px 0; color: #C4622F; font-size: 13px; font-weight: 800; text-align: center; }
.parent-strip-nudge[hidden] { display: none; }
.parent-strip-nudge.show { animation: strip-nudge-in .3s ease; }
@keyframes strip-nudge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- 金のNo.000じぶんカード（s3のmecard文法）。カード全体が押せる＝トイ ---- */
.child-space .zukan-hero { position: relative; margin: 0; padding-top: 56px; }
.child-space .mecard {
  display: block;
  width: 252px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--card);
  border: 2.5px solid var(--gold);
  --edge: #D8B45C;
  border-radius: 24px;
  padding: 12px 12px 16px;
  text-align: center;
}
.me-ph { position: relative; display: block; }
.me-mat {
  display: block;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .08);
}
.me-inner { display: block; overflow: hidden; border-radius: 15px; background: var(--card); padding: 4px; }
.me-inner img { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.me-face-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #FFE3BC;
  font-size: 84px;
  line-height: 1;
}
.mecard.happy .me-inner { animation: me-happy .55s cubic-bezier(.34, 1.45, .64, 1); }
@keyframes me-happy {
  30% { transform: scale(1.14) rotate(-4deg); }
  62% { transform: scale(.94) rotate(3deg); }
  100% { transform: none; }
}
/* 開いたとき一度だけ横切る光（.sweep-goはopenChildSpaceが開くたびに付け直す） */
.me-sweep { position: absolute; inset: 10px; overflow: hidden; border-radius: 15px; pointer-events: none; }
.mecard.sweep-go .me-sweep::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-130%);
  animation: me-sweep 1.5s ease-out .9s 1 both;
}
@keyframes me-sweep { to { transform: translateX(420%); } }
.me-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.me-no {
  color: var(--gold-ink);
  background: #FFF6D2;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 3px 10px;
}
.me-owner {
  color: var(--gold-ink);
  background: #FFF6D2;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  white-space: nowrap;
}
.me-name { display: block; margin-top: 6px; color: var(--ink); font-size: 27px; font-weight: 800; line-height: 1.2; }
.me-en { display: block; margin-top: 2px; color: var(--sub); font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* 名前を呼ぶ声のふきだし（カードの上にふわっと。s3のme吹き出し） */
.cs-me-bub {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.cs-me-bub.show { opacity: 1; }
.cs-me-bub .ono { font-size: 19px; }
.cs-me-bub .ono::before {
  top: auto;
  bottom: -9px;
  left: 50%;
  margin-left: -7px;
  border: none;
  border-right: 3px solid var(--c, #FFC53E);
  border-bottom: 3px solid var(--c, #FFC53E);
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}
.cs-me-bub.show .a1 { animation: blink-a 1.1s ease infinite; }
.cs-me-bub.show .a2 { animation: blink-a 1.1s ease .18s infinite; }

/* 音のヒント（押せない→フラット・点線。s3のhint） */
.cs-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 16px;
  background: rgba(255, 255, 255, .6);
  border: 2px dashed #D6C49A;
  border-radius: 999px;
  color: #8A7A5A;
  font-size: 13px;
  font-weight: 700;
}
.child-space-photo-missing { margin: 12px 6px 0; color: #816a39; font-size: 10px; font-weight: 800; line-height: 1.5; text-align: center; }

/* ---- シールちょうへの入口（s3のピンクのトイバンド。c-shが--c/--cdを供給） ---- */
.child-space .sticker-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 26px 0 0;
  background: var(--c);
  --edge: var(--cd);
  --gl: 4px;
  border-radius: 28px;
  padding: 16px 14px 16px 18px;
  text-align: left;
}
.cs-band-txt { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.cs-band-txt strong { color: #FFF; font-size: 17px; font-weight: 800; }
.cs-band-txt small { color: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 700; }
.cs-play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: #FFF;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--cd);
  animation: cs-beat 3.6s ease-in-out 1.4s infinite;
}
.cs-play i {
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 16px solid var(--c);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
@keyframes cs-beat {
  0%, 84%, 100% { transform: scale(1); }
  89% { transform: scale(1.09); }
  94% { transform: scale(.97); }
}
/* 持っているシールが2〜3枚のぞく（飾り。枚数は出さない） */
.cs-minis { display: flex; align-items: center; flex: none; }
.cs-minis .stk { width: 36px; pointer-events: none; }
.cs-minis .stk + .stk { margin-left: -11px; }
.cs-minis .stk:nth-child(1) { transform: rotate(-8deg); }
.cs-minis .stk:nth-child(2) { transform: rotate(6deg); }
.cs-minis .stk:nth-child(3) { transform: rotate(-3deg); }
.cs-minis .stk .stk-emoji { font-size: 15px; }

/* 封筒の気配（未開封シール。数字は出さない・肩にちょこんと乗るだけ） */
.cs-mail {
  position: absolute;
  top: -15px;
  right: 18px;
  z-index: 2;
  transform: rotate(-6deg);
  pointer-events: none;
  animation: cs-chokon .55s cubic-bezier(.34, 1.45, .64, 1) .25s both;
}
@keyframes cs-chokon {
  0% { transform: rotate(-6deg) translateY(-14px) scale(.6); opacity: 0; }
  60% { transform: rotate(-6deg) translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: rotate(-6deg); opacity: 1; }
}
.cs-env { position: relative; display: block; width: 12em; height: 8.6em; font-size: 3.9px; }
.cs-env i { position: absolute; display: block; }
.cs-env .eb {
  inset: 0;
  background: var(--card);
  border-radius: 1.1em;
  box-shadow: inset 0 0 0 .22em var(--card-edge), 0 .5em .9em rgba(96, 70, 28, .14);
}
.cs-env .ef {
  left: .22em;
  right: .22em;
  top: .22em;
  height: 52%;
  background: linear-gradient(180deg, var(--card), var(--paper));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 .16em 0 var(--card-edge));
}
.cs-env .es {
  left: 50%;
  top: 46%;
  width: 2.7em;
  height: 2.7em;
  margin: -1.35em 0 0 -1.35em;
  border-radius: 50%;
  background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D);
  box-shadow: inset 0 .18em 0 rgba(255, 255, 255, .35), 0 .18em .3em rgba(96, 70, 28, .18);
}

@media (prefers-reduced-motion: reduce) {
  .mecard.sweep-go .me-sweep::after, .mecard.happy .me-inner, .cs-play, .cs-mail { animation: none; }
}

/* Parent view is a separate surface, only for records, editing and settings. */
/* 親ビューはじぶんページ(.child-space z-index:64)の中から開くので、その上に重ねる（既定の .overlay z-index:50 だと裏に隠れる） */
#stats-overlay { align-items: flex-end; background: rgba(16, 32, 27, .42); padding: 0; z-index: 80; }
.stats-panel {
  width: min(100%, 520px);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 30px 30px 0 0;
  background: #f5f1e8;
  box-shadow: 0 -18px 50px rgba(12,28,23,.22);
  padding: 24px 18px calc(22px + var(--safe-bottom));
}
.parent-mode-head { margin: 0 2px 18px; }
.parent-mode-head .sheet-title { font-size: 25px; letter-spacing: -.04em; text-align: left; }
.parent-mode-copy { max-width: 320px; margin-top: 5px; color: var(--sub); font-size: 12px; font-weight: 600; line-height: 1.55; }
/* セクション見出し: 前セクションから十分離す（吸着して見えると区切りが効かない）。先頭だけは詰める */
.parent-section-label { margin: 26px 2px 8px; color: var(--sub); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.parent-mode-head + .parent-section-label { margin-top: 4px; }
.stats-panel .stats-list { border: 1px solid rgba(24,53,45,.08); border-radius: 22px; background: rgba(255,255,255,.62); padding: 4px 14px; }
.stats-cats { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 2px 18px; }
.stats-cat { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(255,255,255,.68); color: var(--sub); font-size: 11px; font-weight: 700; padding: 7px 10px; }
.stats-cat b { color: var(--ink); font-size: 12px; }

/* かぞくシェア（きろくパネル内）。コードはタップでコピーできる「券」の見た目 */
.sync-note { margin: 2px 2px 10px; color: var(--sub); font-size: 12px; font-weight: 600; line-height: 1.55; }
.sync-code {
  display: block; width: 100%; margin: 2px 0 8px; padding: 12px 10px;
  border: 2px dashed rgba(24,53,45,.22); border-radius: 16px; background: rgba(255,255,255,.72);
  color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 800; letter-spacing: .08em; text-align: center; cursor: pointer;
}

/* Outdoor mode: s1トイカメラ意匠は上のカメラ節に集約（旧上書きは撤去済み） */

@media (max-width: 370px) {
  /* タイトルの max-width 上書きは撤去済み（親ボタン撤去で見切れが解消したため） */
  .specimen-grid { gap: 10px; padding: 0 12px; }
  .home-story { margin-inline: 12px; }
}

@media (max-width: 320px) {
  .app-header { padding-right: 10px; padding-left: 10px; }
  .app-header h1 { font-size: 16px; }
  .brand-lockup { gap: 7px; }
  .child-home-entry { margin-inline: 10px; }
}

/* ================================================================
   s8 toybox home — おもいでゾーン＋ずかんゾーン（正典 s8-home-v2 から移植）
   ================================================================ */

/* 再生ボタン＝上映会がはじまる しるし。位置は常にセクション見出しの右端 */
.pbtn {
  border-radius: 999px;
  background: #F7705F;
  --edge: #D44A3C;
  --gl: 4px;
  display: grid;
  place-items: center;
  flex: none;
}
.pbtn i { display: block; width: 0; height: 0; }
.pbtn.sm { width: 38px; height: 38px; margin-left: auto; --gl: 3px; }
.pbtn.sm i {
  margin-left: 3px;
  border-left: 12px solid #FFF;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.pbtn.hero { position: relative; animation: pbtn-beat 3.6s ease-in-out 1.4s infinite; }
/* 未視聴のしるし＝シール通知（顔の金の丸 .face-badge）と同じ言語の金ドームを右上の肩に。
   独自アニメは持たせない＝ボタンの pbtn-beat に子として乗り一緒に脈打つ（静的な face-badge とも揃う）。
   終幕まで見たら消える。右上肩は封筒(.penv)の指定席なので、封筒が出ている日は金ドームを抑制する */
.pbtn.hero.unseen::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -5px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D);
  box-shadow: 0 2px 0 var(--card-edge), 0 3px 6px rgba(96, 70, 28, .18);
  transform: rotate(8deg);
}
.pbtn.hero.unseen::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -2px;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 24%, #FFFDF6, #FFF3D4 76%);
}
/* 封筒が出ている日は封筒が新着を語るので、金ドームは出さない（右上肩の衝突回避） */
.pbtn.hero.unseen:has(.penv:not([hidden]))::after,
.pbtn.hero.unseen:has(.penv:not([hidden]))::before {
  display: none;
}
@keyframes pbtn-beat {
  0%, 84%, 100% { transform: scale(1); }
  89% { transform: scale(1.09); }
  94% { transform: scale(.97); }
}

/* セクション見出し（フラット） */
.sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 30px 2px 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--cd, var(--ink));
}
.chip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 12px;
  background: var(--ct, var(--card));
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}
.sec-yday { color: #BB8B16; }
.sec-yday .chip { background: #FFF0C2; }

/* きょうの おもいで（陽だまりの座布団。きのう帯と同居する時間の層） */
.today {
  margin: 6px 12px 0;
  padding: 2px 12px 12px;
  background: rgba(255, 214, 110, .22);
  border-radius: 28px;
}
.today .sec { margin: 14px 2px 12px; color: #BB8B16; }
.today .sec-yday { margin: 16px 0 10px; padding-top: 14px; border-top: 2px dashed rgba(187, 139, 22, .28); }
.today .strip { margin: 0 -12px; padding: 4px 12px 8px; gap: 8px; }
.today .chip { background: #FFF0C2; }
.t-date { margin-left: auto; font-size: 11px; font-weight: 700; color: #BB8B16; opacity: .75; }
.t-date + .pbtn { margin-left: 0; }
.t-row { display: flex; align-items: flex-start; gap: 10px; }

/* サイズの系は2段階のみ: カード格（きょうの帯・章・はこ）／チップ格（きのう帯・棚） */
.mini {
  flex: none;
  width: 74px;
  border: 0;
  padding: 5px 5px 7px;
  text-align: center;
  background: var(--card);
  border-radius: 14px;
}
.mini .ph { display: block; position: relative; }
.mini .mat { padding: 3px; border-radius: 10px; }
.mini .mat .inner { padding: 2px; border-radius: 8px; }
.mini .mat img { border-radius: 6px; }
.mini .spk { width: 18px; height: 18px; font-size: 9px; right: -3px; bottom: -4px; }
.mini .new { top: -9px; left: -6px; zoom: .85; }
.mname {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* きょうの帯＝カード格（チップの約1.5倍） */
.t-row .mini { flex: 1; width: auto; min-width: 0; border-radius: 18px; padding: 8px 8px 10px; }
.t-row .mini .mat { padding: 5px; border-radius: 13px; }
.t-row .mini .mat .inner { padding: 2px; border-radius: 10px; }
.t-row .mini .mat img { border-radius: 8px; }
.t-row .mini .spk { width: 24px; height: 24px; font-size: 12px; right: -3px; bottom: -5px; }
.t-row .mini .new { zoom: 1; }
.t-row .mname { margin-top: 8px; font-size: 13px; }
/* きょうが4枚以上: 3枚ぶんの幅で横スクロール（サイズの系は保つ）。
   NEW!ラベルがスクロール枠で切れないよう、はみ出しぶんをpadding/marginで相殺 */
.t-row.many { overflow-x: auto; padding: 12px 8px 6px; margin: -12px -8px -2px; scrollbar-width: none; }
.t-row.many::-webkit-scrollbar { display: none; }
.t-row.many .mini { flex: none; width: calc((100% - 36px) / 3.15); }

/* きのう あそんだ カード — 横スクロール帯 */
.strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 16px 12px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

/* なかまの たな — 絵本棚のインデックス */
.tana {
  margin: 16px 12px 0;
  padding: 4px 12px 14px;
  background: rgba(255, 255, 255, .55);
  border-radius: 28px;
}
.tana .sec { margin: 12px 2px 14px; font-size: 16px; color: var(--ink); }
.tana .chip { width: 30px; height: 30px; font-size: 15px; background: var(--card); }
/* 棚は横スクロール1段（「きのう あそんだ カード」と同じ文法）。
   NEW!・丸窓の上へのはみ出しをpadding/marginの相殺でクリップから守る */
.shelf {
  overflow-x: auto;
  margin: -18px -12px 0;
  padding: 18px 12px 0;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }

/* 棚板: 押せない→フラットな板。箱がこの上に立つ。
   inline-flexで中身の幅に伸びる＝棚板(::after)がスクロールの奥まで続く */
.row3 {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  min-width: 100%;
  gap: 9px;
  padding: 0 2px 9px;
}
.row3::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 9px;
  background: var(--card-edge);
  border-radius: 5px;
  box-shadow: 0 3px 0 rgba(96, 70, 28, .10);
}

/* 箱: なかま色のぷっくりした箱。丸窓＝いちばん新しいともだち。
   幅は3個＋4個目がチラ見えする寸法（=スクロールできるサイン） */
.box {
  z-index: 1;
  display: flex;
  flex: none;
  width: clamp(84px, 24vw, 104px);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 6px 11px;
  border-radius: 20px;
  background: var(--c);
  --edge: var(--cd);
  --gl: 3px;
}
.box .new { zoom: .85; }
.peep { position: relative; width: 54px; height: 54px; margin-top: -13px; }
.peep img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card);
  background: var(--ct);
  box-shadow: 0 4px 8px rgba(96, 70, 28, .22);
  filter: saturate(1.12) contrast(1.02);
  transition: transform .12s ease;
}
.box:active .peep img { transform: scale(1.08); }
.b-emoji {
  position: absolute;
  right: -7px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(96, 70, 28, .25);
}
.b-name {
  max-width: 100%;
  background: rgba(255, 253, 246, .92);
  color: var(--cd);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.be { font-size: 12px; line-height: 1; flex: none; }

/* 章プレビュー — 新しい4枚＋ぜんぶみる。上だけなかま色に染まった座布団 */
.chap {
  margin: 24px 16px 0;
  padding: 12px 10px 16px;
  background: linear-gradient(color-mix(in srgb, var(--ct) 72%, transparent), rgba(255, 255, 255, 0) 210px);
  border-radius: 24px;
}
.chap .sec { margin: 0 2px 12px; }
.plate2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  background: rgba(255, 253, 246, .94);
  border: 3px solid var(--c);
  border-radius: 12px;
  padding: 6px 13px 6px 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cd);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .07);
}
.plate2 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate2 .be { font-size: 16px; }
.zenbu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--ct);
  --edge: var(--c);
  --gl: 3px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cd);
}

/* たなにもどる（長いスクロールの帰り道） */
.backshelf {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 34px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* ことばカード＝ぷっくりタイル */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.card {
  border: 0;
  background: var(--card);
  border-radius: 24px;
  padding: 10px 10px 13px;
  text-align: center; /* ゲット画面（撮影時）と同じく文字は中央寄せに揃える */
}
.card .row { justify-content: center; }
.ph { position: relative; }
.mat {
  display: block;
  padding: 6px;
  border-radius: 18px;
  background: var(--c, var(--card-edge));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .08);
}
.mat .inner { display: block; position: relative; padding: 3px; background: var(--card); border-radius: 13px; overflow: hidden; }
.mat img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--ct, var(--surface-muted));
  filter: saturate(1.12) contrast(1.02);
  transition: transform .12s ease;
}
.card:active .mat img { transform: scale(1.06); }
/* 発見の瞬間の顔チップ＝カードの部品（儀式・ピーク・上映会のみ。図鑑グリッドは物のまま）。
   写真は無地に保ち、写真の下・左端ラインに置く。名前の行は真センターを独占し、行を共有しない。
   縦位置は欄の中心＝フレーム下の余白と下端の余白が等しくなる。
   前面カメラでの顔撮影自体は無効化済み（ios-app側でコメントアウト。2026-07-21）なので
   新規カードは常にcard.face無し＝このCSSは常時不使用。撮影側の復活だけで再び効くよう残してある */
/* キャプション: 名前は中央寄せ、顔は写真の内容エッジに揃えた左の部品。
   No.＋★＋相対日付は同じ行（コレクションのメタ情報どうし）、英語名は単独の行
   （「なにを見つけたか」の情報なので、いつ見つけたかの日付と並べない）。
   枠の厚みがビューごとに違うので顔のleftはビュー別 */
.card-peek-caption, .reveal-caption, .bcard-caption { position: relative; text-align: center; }
.card-peek-caption { padding: 10px 9px 12px; }
.reveal-caption, .bcard-caption { padding: 10px 12px 12px; }
.face-chip {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%; /* 儀式/上映会: mat8+inner4 */
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2.5px var(--card-edge), 0 2px 5px rgba(96, 70, 28, .15);
  background: var(--surface-muted);
  cursor: pointer; z-index: 3;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-radius .18s ease;
  transform-origin: 0 50%;
}
.card-peek-caption .face-chip { left: 9px; } /* ピーク: mat6+inner3 */
/* 顔チップをタップ→写真の窓の中央に大きくふわっと出る（案A）。もう一度タップで戻る */
.face-big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 64%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--card-edge), 0 14px 30px rgba(24, 37, 29, .35);
  z-index: 6; cursor: pointer;
  opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .18s ease, scale .2s cubic-bezier(.34, 1.56, .64, 1);
}
.face-big.show { opacity: 1; scale: 1; pointer-events: auto; }
.face-big[src=""] , .face-big:not([src]) { display: none; }
/* 開いている間は写真を軽く沈めて顔を主役に */
#card-peek-photo, #reveal-photo { transition: filter .18s ease; }
.facebig-open #card-peek-photo, .facebig-open #reveal-photo { filter: brightness(.72) saturate(.9); }
#replay-face { pointer-events: none; } /* 上映会はタップで話が進むので顔は飾りに徹する */
.cap-meta { margin-top: 3px; color: var(--sub); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
/* 相対日付はNo.★の行に同居（.no/.starsと揃うサイズ）。rowのgapがあるので「・」側の余白は詰める */
.cap-date { font-size: 10px; font-weight: 800; letter-spacing: .03em; color: var(--sub); }
.cap-date::before { content: "・"; opacity: .55; margin-right: 2px; }
.cap-date:empty { display: none; }
/* 名前: 中央寄せ。顔チップと衝突しない左右対称の予約幅＋長名は段階縮小（JSがlong/xlongを付ける） */
#card-peek-name, .reveal-caption .reveal-name, .bcard-caption .name {
  font-size: 26px; line-height: 1.2; margin: 0; padding: 0 52px;
}
#card-peek-name.long, .reveal-caption .reveal-name.long, .bcard-caption .name.long { font-size: 22px; }
#card-peek-name.xlong, .reveal-caption .reveal-name.xlong, .bcard-caption .name.xlong { font-size: 19px; }
.spk {
  position: absolute;
  right: -4px;
  bottom: -6px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  background: #FFF;
  box-shadow: 0 2px 0 var(--card-edge), 0 4px 8px rgba(96, 70, 28, .16);
}
.new {
  position: absolute;
  top: -8px;
  left: -7px;
  z-index: 2;
  background: #FFF6D2;
  color: #B08C2A;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 7px;
  transform: rotate(-7deg);
  box-shadow: 0 2px 5px rgba(96, 70, 28, .20);
  pointer-events: none;
}
.row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.no {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--cd, var(--sub));
  background: var(--ct, var(--surface-muted));
  padding: 2px 8px;
  border-radius: 999px;
}
.stars { font-size: 10px; letter-spacing: 1px; color: var(--gold-deep); }
.card .name, .mname { color: var(--ink); }
.card .name {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .en {
  display: block;
  margin-top: 1px;
  min-height: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--sub);
}

/* ★3（金のふち＋一度だけ横切る光） */
.card.r3, .mini.r3 { border: 2.5px solid var(--gold); --edge: #D8B45C; }
.r3 .mat { background: linear-gradient(150deg, #F5D97E, #DFAE3C 55%, #F0CD6D); }
.r3 .stars { color: var(--gold-ink); }
.sweep { position: absolute; inset: 6px; border-radius: 13px; overflow: hidden; pointer-events: none; }
.sweep::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-130%);
}
.r3 .sweep::after { animation: toy-sweep 1.5s ease-out 1s 1 both; }
@keyframes toy-sweep { to { transform: translateX(420%); } }

/* 保存直後の「収まる」手応え（既存card-landを流用） */
.card.bounce, .mini.bounce { animation: card-land .34s cubic-bezier(.2, 1.22, .35, 1); }

/* はこの中身（全画面・図鑑No.固定順。フタ＋大きな✕） */
.boxview {
  position: fixed;
  inset: 0;
  z-index: 48; /* card-peek(49)・シート(50)・replay(60)より下 */
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .26s ease, visibility 0s .26s;
}
.boxview.open {
  visibility: visible;
  transform: translateY(0);
  transition: transform .46s cubic-bezier(.34, 1.45, .64, 1), visibility 0s;
}
.lid {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 13px;
  background: var(--c, var(--card-edge));
  border-radius: 0 0 26px 26px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--cd, var(--sub)), 0 12px 20px rgba(96, 70, 28, .14);
}
.le {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 16px;
  background: rgba(255, 253, 246, .92);
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}
.boxview.open .le { animation: toy-wig .55s ease .12s; }
@keyframes toy-wig {
  0% { transform: scale(.55); }
  45% { transform: scale(1.12) rotate(2deg); }
  70% { transform: scale(.96) rotate(-2deg); }
  100% { transform: scale(1); }
}
.lplate {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 253, 246, .94);
  border-radius: 14px;
  padding: 7px 12px;
}
.lplate strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--cd, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lx {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--card);
  --edge: var(--card-edge);
  --gl: 3px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--cd, var(--ink));
  line-height: 1;
}
.bbody { padding: 16px 16px calc(96px + var(--safe-bottom)); }

/* このはこの上映会 — 右下フロート（受け皿＝家具・乗ってる再生だけが押せる） */
.bplay-tray {
  position: fixed;
  z-index: 49;
  bottom: calc(18px + var(--safe-bottom));
  right: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 3px 0 var(--card-edge), var(--drop);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(16px) scale(.8);
  pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.34, 1.45, .64, 1);
}
.bplay-tray.on { opacity: 1; transform: none; pointer-events: auto; }
.bplay-tray .pbtn { margin: 0; }

/* あかさたなインデックス — スクロール中だけ右サイドに浮かぶ（iOSのスクロールバーの文法）。
   常時場所は取らず、カードの上に重なるのでボケ地で浮かせる。無い行は薄く・押せない */
.kana-rail {
  position: fixed;
  z-index: 48;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) translateX(14px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 16px;
  background: rgba(255, 253, 246, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 0 var(--card-edge), var(--drop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.45, .64, 1);
}
.kana-rail.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.kana-rail button {
  width: 26px;
  height: 25px;
  border: 0;
  padding: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.kana-rail button:active { background: rgba(96, 70, 28, .1); transform: scale(.92); }
.kana-rail button:disabled { opacity: .25; pointer-events: none; }

/* からっぽ画面（ずかんゾーンの位置に静かに座る） */
.zukan-empty { min-height: min(48vh, 380px); }

/* 外モード: シャッターは黄（サン色）＝カメラ節で定義済み。赤は上映会の専用色 */

@media (min-width: 700px) {
  .bplay-tray { right: max(16px, calc(50vw - 360px + 16px)); }
  .boxview .bbody .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pbtn.hero, .r3 .sweep::after, .boxview.open .le { animation: none; }
}

/* きょう帯が無い日: きのう帯が先頭に来るので、継ぎ目の点線は引かない */
#today-sec[hidden] ~ .sec-yday { border-top: 0; padding-top: 0; margin-top: 14px; }

/* ピーク中の元カードは静かに沈む（旧.zukan-cardと同じ手応え） */
.card.is-peeking, .mini.is-peeking { transform: scale(.97); opacity: .55; }

/* ================================================================
   Phase B: オノマトペバブル（s4）— タップ番号シードで毎回すこし違う
   ================================================================ */
.ono {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  background: var(--ct, #FFF3D4);
  border: 3px solid var(--c, #FFC53E);
  border-radius: 20px;
  font-size: 18px;
  font-weight: 800;
  color: var(--cd, #A87E1B);
}
.ono::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 28px;
  width: 13px;
  height: 13px;
  background: var(--ct, #FFF3D4);
  border-left: 3px solid var(--c, #FFC53E);
  border-top: 3px solid var(--c, #FFC53E);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.ono .otx { white-space: nowrap; }
.ono svg { width: 24px; height: 20px; flex: none; overflow: visible; }
.ono .sp { fill: var(--cd, #A87E1B); stroke: var(--cd, #A87E1B); stroke-width: 2; stroke-linejoin: round; }
.ono .a1, .ono .a2 { fill: none; stroke: var(--cd, #A87E1B); stroke-width: 3; stroke-linecap: round; }

.ono-fly { position: absolute; z-index: 6; margin: 0; pointer-events: none; animation: ono-pop .46s cubic-bezier(.34, 1.45, .64, 1) both; }
.ono-fly .a1 { animation: blink-a 1.1s ease infinite; }
.ono-fly .a2 { animation: blink-a 1.1s ease .18s infinite; }
@keyframes ono-pop {
  from { transform: rotate(var(--rot, 0deg)) scale(.25); opacity: 0; }
  to { transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); opacity: 1; }
}
.ono-fly.bye { animation: ono-bye .44s ease both; }
@keyframes ono-bye {
  from { transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); opacity: 1; }
  to { transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)) translateY(-16px); opacity: 0; }
}
.ono-fly.rgt::before { left: auto; right: 26px; }

/* ================================================================
   Phase B: おうちのかたのひきだし（s4）— 長押しメニューの意匠
   ================================================================ */
#sheet-overlay { background: rgba(74, 56, 26, .46); }
.sheet {
  gap: 10px;
  border-radius: 28px 28px 0 0;
  background: var(--card);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5), 0 -14px 34px rgba(96, 70, 28, .18);
  padding: 12px 18px calc(16px + var(--safe-bottom));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sheet::before {
  width: 56px;
  height: 7px;
  margin: 0 auto 2px;
  background: var(--paper-out);
  box-shadow: inset 0 2px 3px rgba(96, 70, 28, .18);
}
.sheet-lip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
}
.sheet-lip-en { font-size: 8px; font-weight: 800; letter-spacing: .3em; color: #C5B693; }
.sheet-note { margin-bottom: 2px; font-size: 11px; font-weight: 500; color: var(--sub); text-align: center; }
.sheet .sheet-title {
  margin: 0;
  padding: 9px 12px;
  background: var(--paper);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
}
.sheet-btn {
  min-height: 52px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 3px 0 #D8CBAA;
  font-weight: 800;
  transition: transform .09s ease, box-shadow .09s ease;
}
.sheet-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #D8CBAA; }
.sheet-btn.danger { background: #FDE6E2; box-shadow: 0 3px 0 #E8B4AC; color: var(--danger); }
.sheet-btn.danger:active { box-shadow: 0 1px 0 #E8B4AC; }
.sheet-btn.ghost { background: transparent; box-shadow: none; color: var(--sub); }

/* Phase B: 動きを抑える設定では祝い・スキャンの常時アニメを止める */
@media (prefers-reduced-motion: reduce) {
  .shutter::after, .scan-glow, .scan-ring, .grain,
  .zukan-btn.pop, .card-peek-card.pop, .peek-sweep.go::after,
  #reveal-card.flip-in .get-card, .get-banner.play,
  #reveal-card.flip-in .nt1, #reveal-card.flip-in .nt2, #reveal-card.flip-in .nt3,
  #reveal-card.flip-in .zunda, #reveal-card.flip-in .reveal-actions,
  .ono-fly, .ono-fly.bye { animation: none; }
  #reveal-card.flip-in .zunda, #reveal-card.flip-in .reveal-actions, .get-banner.play, .ono-fly { opacity: 1; }
  .get-banner.play { transform: rotate(-6deg); }
  .ono-fly { transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
}

/* ============================================================
   上映会の絵本化: とびら＋絵本のいちぎょう
   ============================================================ */
#replay-cover { gap: 14px; }
.rc-date {
  color: var(--cream-mid);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
}
.rc-title {
  color: var(--cream-hi);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 4px 18px rgba(40, 26, 6, .45);
}
.rc-sub { color: var(--cream-lo); font-size: 13px; font-weight: 700; letter-spacing: .22em; }
#replay-cover.on .rc-date { animation: rc-rise .7s ease-out both; }
#replay-cover.on .rc-title { animation: rc-rise .7s ease-out .18s both; }
#replay-cover.on .rc-sub { animation: rc-rise .7s ease-out .5s both; }
@keyframes rc-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.replay-ehon {
  margin-top: 18px;
  max-width: 300px;
  color: var(--cream-mid);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.9;
  text-align: center;
}
.replay-ehon.go { animation: rc-rise .6s ease-out .45s both; }

@media (prefers-reduced-motion: reduce) {
  #replay-cover.on .rc-date, #replay-cover.on .rc-title, #replay-cover.on .rc-sub,
  .replay-ehon.go { animation: none; }
}

/* ============================================================
   おとどけもの（発行物の受け取り）: 封筒 → 開封 → プレビュー → 共有
   上映会と同じ暖色の暗幕。封筒はシール授与と同じ「金の封かん」の語彙
   ============================================================ */
.dl-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 86% at 50% 16%, rgba(255, 246, 222, .13), rgba(255, 246, 222, 0) 58%),
    linear-gradient(rgba(74, 56, 26, .78), rgba(74, 56, 26, .84)),
    var(--paper);
}
.dl-overlay[hidden] { display: none; }
.dl-ttl { margin-bottom: 20px; color: var(--cream-hi); font-size: 19px; font-weight: 800; letter-spacing: .05em; text-align: center; }
.dl-env-stage, .dl-view { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 20px; }
.dl-view[hidden], .dl-env-stage[hidden] { display: none; }

.dl-env {
  position: relative;
  width: 190px;
  height: 132px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(#FFFDF6, #FFF3D4);
  box-shadow: 0 6px 0 var(--card-edge), 0 26px 50px rgba(20, 12, 4, .4);
  cursor: pointer;
  animation: dl-sway 2.4s ease-in-out infinite;
}
@keyframes dl-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.dl-flap {
  position: absolute;
  inset: 0 0 auto;
  height: 62px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(#F5D97E, #DFAE3C);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dl-seal {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 24%, #F5D97E, #C6982F);
  box-shadow: 0 2px 6px rgba(40, 26, 6, .35);
}
.dl-env:active { transform: scale(.96); }
.dl-hint { margin-top: 22px; color: var(--cream-lo); font-size: 13px; font-weight: 700; }
.dl-overlay.opening .dl-env { animation: dl-pop .5s cubic-bezier(.34, 1.45, .64, 1) both; }
@keyframes dl-pop { 40% { transform: scale(1.15) rotate(-3deg); } 100% { transform: scale(0); opacity: 0; } }

/* 開封後は全画面プレビュー（没入）。複数枚は横スワイプ（月刊誌3枚組） */
.dl-view { position: absolute; inset: 0; padding: 0 !important; }
.dl-media {
  position: absolute;
  inset: 0;
  /* 上下のフローティング操作ぶんを避ける（SEなど縦の短い端末で媒体と被らないように） */
  padding: calc(env(safe-area-inset-top, 0px) + 60px) 6px calc(env(safe-area-inset-bottom, 0px) + 88px);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  animation: dl-in .5s cubic-bezier(.34, 1.45, .64, 1) both;
}
@keyframes dl-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.dl-media::-webkit-scrollbar { display: none; }
.dl-media video, .dl-media img {
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
  background: transparent;
}

/* フローティングの操作（媒体の上に浮かせるだけ。場所を占有しない） */
.dl-float-title {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(20, 12, 4, .45);
  color: var(--cream-hi);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
  pointer-events: none;
}
.dl-x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 12, 4, .45);
  color: var(--cream-mid);
  font-size: 16px;
  font-weight: 800;
}
.dl-dots { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); left: 0; right: 0; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.dl-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 250, 238, .35); }
.dl-dots i.on { background: var(--gold); }
.dl-float-actions {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dl-fbtn {
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: rgba(20, 12, 4, .55);
  color: var(--cream-hi);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dl-fbtn.primary { background: linear-gradient(#F0CD6D, #DFAE3C); color: #5C4514; box-shadow: 0 4px 0 #B98F2C, 0 10px 24px rgba(20, 12, 4, .4); }
.dl-fbtn:active { transform: translateY(2px); }

/* デバッグ: できあがったもの一覧 */
.dbg-shelf { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dbg-shelf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #F0E7D2;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.dbg-shelf-row span { color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.dbg-shelf-empty { padding: 8px; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* おとどけものポスト: 発行済みの号一覧（おうちのかた面）。
   発行物は「絵」なので絵で選ぶ＝チェキ風の傾いたサムネイル行（design/post-mock.html C案） */
.post-list { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; }
.post-row {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 14px;
  padding: 8px 12px 8px 8px;
  background: #F0E7D2;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.post-row:active { transform: scale(.985); }
.post-thumb {
  position: relative;
  flex: none;
  width: 52px;
  height: 66px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 5px rgba(96, 70, 28, .14);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 20px;
  transform: rotate(-2deg);
}
.post-thumb i { font-style: normal; }
.post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.post-thumb.video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; background: rgba(60, 45, 20, .28); }
.post-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-info strong { font-size: 13.5px; font-weight: 800; }
.post-info span { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.post-new { margin-left: auto; flex: none; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 3px 8px; }
.post-date { margin-left: auto; flex: none; color: var(--ink-soft); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.post-more { display: block; width: 100%; margin-top: 3px; border: 0; border-radius: 999px; background: transparent; color: var(--sub); font: inherit; font-size: 12px; font-weight: 800; padding: 8px; text-align: center; }
.post-empty { padding: 10px 8px 14px; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* ---------- 保護者の同意画面（初回起動・すべての収集に先行） ----------
   オンボと違い大人向けの1枚。文体・字間も大人文体（.ob-eyebrow だけ共用） */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 64; /* オンボ(62)より上＝同意が済むまで何も触らせない */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  overflow-y: auto;
}
.consent-card { max-width: 420px; width: 100%; margin: auto; }
.consent-title { margin: 8px 0 12px; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.45; }
.consent-lead { margin: 0 0 14px; color: var(--ink); font-size: 14px; line-height: 1.8; }
.consent-points { list-style: none; margin: 0 0 14px; padding: 0; }
.consent-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink);
  text-align: left;
}
.consent-ico { flex: none; font-size: 18px; line-height: 1.4; }
.consent-policy { margin: 0 0 4px; font-size: 13px; text-align: center; }
.consent-policy a { color: var(--sub); font-weight: 700; }
.consent-overlay .ob-actions { max-width: none; }
.consent-overlay .btn-primary { width: 100%; }

/* ============================================================
   ペアレンタルゲート（かけ算）: おうちのかた面の関門。
   クロームに色相を足さない原則どおり白＋タン系のみ。鍵アイコン等の欠乏演出は出さない
   ============================================================ */
.gate-overlay { align-items: center; justify-content: center; padding: 20px; z-index: 90; /* stats(80)より上。関門が守る面より下にいたら意味がない */ }
.gate-card {
  width: 100%;
  max-width: 320px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 40px rgba(18, 31, 23, .2);
  padding: 20px 20px 14px;
  text-align: center;
  animation: sheet-up .28s cubic-bezier(.2, .92, .3, 1);
}
.gate-title { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.gate-copy { margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: var(--sub); }
.gate-q { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gate-typed { display: inline-block; min-width: 2.2em; letter-spacing: .08em; }
.gate-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.gate-key {
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.gate-key:active { transform: scale(.96); background: #f6f1e6; }
.gate-key-del { font-size: 17px; }
.gate-shake { animation: gate-card-shake .4s; }
@keyframes gate-card-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}