/* world.css — 「空の世界」の地。style.css のあとに読む。
   PR①のねらいは**地の入れ替えだけ**。カードや行の作りには触らない。
   正は docs/design/DESIGN.md / docs/design/tokens.md。移植の対照表は docs/design/port-diff.md。

   なぜ style.css を直接書き換えないのか:
     いま style.css は 4,300行あり、地の色（--paper）が「紙の面」と「画面の地」の
     両方に使われている。片方だけ変えたいので、上から地だけを差し替えるレイヤーを1枚足す。
     PR②以降で画面ごとに移すときに、このファイルから順に消えていく。 */

/* world:start */
:root {
  /* 空（時刻で変わる）。値は sekai/zenmen.html の実測 */
  --sky-morning: linear-gradient(#5FA6E4, #9CCBEE 62%, #CFE6F5);
  --sky-noon: linear-gradient(#2E86D6, #62B2E8 58%, #9AD2F1);
  --sky-evening: linear-gradient(#2E5C9E, #8E7FB0 46%, #E9A276 78%, #F6C79B);
  --sky-night: linear-gradient(#16265C, #24407A 62%, #35578F);
  /* 空の上に置く文字。紙の上の文字（--ink）とは別物 */
  --on-sky: #FFFDF2;
  --on-sky-sub: rgba(255, 253, 242, .85);
  --sky-shadow: 0 2px 8px rgba(0, 30, 80, .45);
  /* 影の色は青みの黒にする。空の下だから、影も空の色を含む */
  --sh-card: 0 6px 18px rgba(0, 20, 60, .28);
  --sh-lift: 0 10px 26px rgba(0, 20, 60, .34);
  --stitch: rgba(190, 160, 110, .62);
  --deep: #1B4FA8;   /* 空の青の、いちばん濃いところ */
}

/* ---------- 地 ---------- */
html { background: #2E86D6; }
body { background: none; }

#world { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#world .sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease;
  background: var(--sky-noon); }
#world .sky.on { opacity: 1; }
#world .sky.morning { background: var(--sky-morning); }
#world .sky.noon { background: var(--sky-noon); }
#world .sky.evening { background: var(--sky-evening); }
#world .sky.night { background: var(--sky-night); }

/* 雲。1枚ずつの部品を JS が散らす（毎回すこし違う空になる） */
#world .clouds, .sky-deco .clouds { position: absolute; inset: 0; overflow: hidden; }
#world .clouds img, .sky-deco .clouds img { position: absolute; will-change: transform; transition: filter .9s ease; }
#world.is-night .clouds img, [data-sky="night"] .sky-deco .clouds img { filter: brightness(.58) saturate(.85); }
#world.is-evening .clouds img, [data-sky="evening"] .sky-deco .clouds img { filter: brightness(.94) saturate(.95); }

/* 星（よるだけ） */
#world .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
#world.is-night .stars { opacity: 1; }
#world .stars i { position: absolute; background: #FFFDF0; border-radius: 50%;
  animation: wld-twk 3.4s ease-in-out infinite; }
@keyframes wld-twk { 50% { opacity: .35; } }

/* 天体。カードより下にいる（通りかかるものが手前、空にあるものが奥） */
#world .sun, .sky-deco .sun { position: absolute; right: -12px; top: calc(env(safe-area-inset-top, 0px) + 96px);
  width: 78px; height: 78px; transition: opacity .6s ease; }
#world .sun img, .sky-deco .sun img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .8s ease; }
#world .sun .moon, .sky-deco .sun .moon { opacity: 0; }
#world.is-night .sun .moon, [data-sky="night"] .sky-deco .sun .moon { opacity: 1; }
#world.is-night .sun .day, [data-sky="night"] .sky-deco .sun .day { opacity: 0; }

/* 住人。こちらはUIの上を通る（生きものが手前を横切る、という見え方） */
#life { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
  /* ナビゲーションバーの下まで描く端末ぶん。world.js が padding-bottom を読んで床を上げる */
  padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
#life img { position: absolute; will-change: transform, opacity;
  filter: drop-shadow(0 5px 12px rgba(0, 20, 60, .3)); }
/* world:end */

/* ---------- ヘッダー: フェルトの文字ロゴ（モックの .brand） ---------- */
/* 「おもいでずかん」はフェルトで作った1枚の絵。これをテキストで組み直すと
   世界の作りから外れる（2026-09-05 社長指摘） */
body[data-view="zukan"] .app-header,
.app-header {
  background: none; box-shadow: none;
  display: block; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 0 6px;
}
.app-header .logo { display: none; }
.app-header .title-wrap { display: block; }
#app-title {
  display: block; width: 214px; height: 40px; margin: 0 auto;
  background: url("/world/logo.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0, 30, 80, .3));
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
/* 子の名前は、ロゴの上に小さく（モックの .brand small） */
.app-header::before {
  content: attr(data-child); display: block;
  font-size: 15px; font-weight: 900; letter-spacing: .1em; color: #FFFDF2;
  margin-bottom: 2px; text-shadow: 0 2px 7px rgba(0, 30, 80, .42);
}
/* 顔ボタンはヘッダーの外（右上に常駐）。中央のロゴと取り合わない */
.app-header .header-actions {
  position: absolute; right: 14px; top: calc(env(safe-area-inset-top, 0px) + 16px);
}

/* ずかんの見出し・日付など、空の直に乗る文字 */
#view-zukan .sec,
#view-zukan .t-date,
#zukan-empty .empty-title,
#zukan-empty .empty-copy { color: var(--on-sky); text-shadow: var(--sky-shadow); }
#zukan-empty .empty-copy { color: var(--on-sky-sub); }

/* ---------- まるいボタン ---------- */
/* モックの .fab と同じ: クリームの円＋フェルトの絵（62%）。**点線の輪は入れない**。
   輪を入れるのはシャッターだけ（押す面そのもの、という意味づけ） */
.floating-nav, .floating-zukan {
  width: 66px; height: 66px; border: 0;
  background: var(--card); color: var(--ink);
  box-shadow: var(--sh-lift);
}
/* 線画のカメラは border と 2つの擬似要素で描かれている。全部消してから絵を置く */
.floating-camera-icon {
  width: 41px !important; height: 41px !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: url("/world/camera.png") center/contain no-repeat !important;
}
.floating-camera-icon::before, .floating-camera-icon::after { display: none !important; }
.floating-book-icon { display: none; }
/* ずかんへ戻るボタンだけ、円を空の青にする。
   生成りの本を生成りの円に置くと溶けて読めない（2026-09-05 社長指摘）。
   撮る＝クリームの円／ずかん＝空色の円 と分けると、子どもも取り違えない */
/* 撮る と ずかん は同じ種（クリームの円）にして、中の絵で見分ける。
   円の色を変えると「別のもの」に見えた（2026-09-05 社長指摘）。
   ずかんの絵は「しゃしんカードの束」。中身がカードなのだから、本より正確でもある。
   手前の1枚にてんとうむしが写っていて、赤が41pxまで残る */
.wld-book {
  width: 43px; height: 43px; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 20, 60, .34));
}

/* シャッター。絵は入れない＝押す面そのもの（2026-09-05 社長判断）。
   元の .shutter::after（78pxの白いリング）は寸法ごと打ち消して、点線の輪に置き換える */
.shutter.toy {
  width: 96px; height: 96px; background: var(--card); box-shadow: var(--sh-lift);
}
.shutter.toy::after {
  content: ""; position: static;
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px dashed var(--stitch); background: none;
}

/* じぶんのページ（顔）。写真が無い日は felt の顔が出る */
.face.toy {
  background: var(--card) url("/world/face.png") center/64% no-repeat;
  box-shadow: var(--sh-card); font-size: 0;
}
#face-fallback, #face-fallback-float { display: none; }
/* 顔写真は、ずかんのタイルと同じ「白いフェルトの枠に写真をはめる」作り。
   style.css の濃いタンの外周線は紙の地で切れ目を立てるためのもので、空の上では
   暗い縁が一人だけ浮いた（2026-09-06 社長指摘）。枠はボタンの白地そのもの、
   影は空の青みの --sh-card 1本。写真の内側にだけ薄い線を1本置き、白枠との境目を締める */
.face.toy img {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 20, 60, .10);
}

/* ---------- からっぽの状態 ---------- */
/* 空きカードを表す薄緑の四角は、紙の地の上での表現だった。空の上では
   「ちぎれた紙」に見えて意味を失う。
   いちど雲の絵を置いてみたが、**その1枚だけ流れない**ので空の作りと矛盾した
   （2026-09-05 社長指摘）。飾りは置かず、空そのものに任せる */
#zukan-empty::before { display: none; }
/* 画面のまん中に置く。元は min-height:48vh のぶんだけで中央寄せしていたので、
   ヘッダーのすぐ下にかたまり、下に大きな空白が残っていた（2026-09-05 社長指摘）。
   ヘッダーと下の丸ボタンのぶんを引いた「残りぜんぶ」の中で中央にする */
#zukan-empty {
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - 232px);
  padding-top: 0; padding-bottom: 0;
}
/* せまい端末（SE）で「ここから おもいでずかんが／はじまるよ」の「が」だけが
   行に取り残されるので、幅に追従させる */
#empty-title { font-size: clamp(19px, 6.2vw, 25px); line-height: 1.55; }


/* ---------- 撮影画面の上の暗がりを外す ---------- */
/* 元は「映像の上に白い文字を載せる」ための幕だった。いまはヘッダーが空の上にあるので、
   空を濁らせるだけの残りかす（2026-09-05 社長指摘） */
body[data-view="camera"]::before,
body[data-view="camera"] > .app-header::before { background: none; }
.app-header { background: none !important; }
/* スクロール中にヘッダー下端へ出していた紙の影（style.css の .hdr-elevated）も外す。
   紙が無いので、空の上に薄い線が1本浮くだけだった（2026-09-05 社長指摘） */
body[data-view="zukan"] .app-header.hdr-elevated { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #world *, #life * { animation-duration: .01s !important; transition-duration: .2s !important; }
}

/* ================================================================
   ここから下は「モックの見た目に寄せる」ぶん。
   要件（何を出すか・どこに置くか）は本番の実装を正、
   デザイン（どう見えるか）はモック（sekai/zenmen.html）を正とする。
   ================================================================ */

/* ---------- 撮影: 空に浮かぶフェルトの窓 ---------- */
/* 元は全面プレビュー＋暗いビネットで四角のガイドを切っていた。
   ガイドの外を「暗さ」でなく「空」にする＝窓そのものを空の上に浮かせる。
   見える範囲はガイドの中身と同じなので、子が構えて撮る体験は変わらない */
#view-camera { background: none; }
.cam-win {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 116px) 14px calc(env(safe-area-inset-bottom, 0px) + 206px);
  overflow: visible; background: none; flex: none;
}
.cam-win > video, .camera-placeholder { border-radius: 26px; }
.camera-placeholder { background: rgba(16, 40, 82, .34); }
.cam-ph-copy { top: 50%; }
/* ガイドを窓のフチそのものにする（フェルト＋内側の点線ステッチ） */
.cam-frame {
  top: 0; left: 0; transform: none;
  width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 26px; border: 9px solid var(--card);
  box-shadow: var(--sh-lift); outline: 0;
}
.cam-frame::after {
  content: ""; position: absolute; inset: 5px; border-radius: 20px;
  border: 1.5px dashed var(--stitch);
}
/* シャッターは窓の下、空の上に置く */
.cam-controls { top: 100%; bottom: auto; padding: 16px 18px 0; }
.deck-hint { color: var(--on-sky); text-shadow: var(--sky-shadow); }
.shutter { width: 96px; height: 96px; }

/* ---------- ずかん: モック（sekai/zenmen.html）の値をそのまま移す ---------- */
/* 近似で書き直すと必ずズレるので、余白・角丸・文字サイズはモックの実測値を写している。
   .tile → モックの .card ／ .tname → .card .nm ／ .tl-date → モックの .day */
.tl-day { margin: 22px 0 0; }
.tl-date {
  display: flex; align-items: baseline; gap: 9px; margin: 0 22px 10px;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 20, 60, .5);
  font-size: 15px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.tl-date small { font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .85); font-weight: 700; }

.tl-grid { grid-template-columns: 1fr 1fr; gap: 11px; margin: 0 22px; }
/* その日の1枚目は大きく。残りは2枚ずつ。あまった1枚も大きく */
.tl-grid > .tile:first-child { grid-column: 1 / -1; }
.tl-grid > .tile:last-child:nth-child(even) { grid-column: 1 / -1; }

.tl-grid > .tile {
  position: relative; display: block; width: 100%;
  background: #FFFDF7; border-radius: 18px; padding: 7px 7px 9px;
  box-shadow: var(--sh-card); border: 0; overflow: visible;
  transition: transform .2s cubic-bezier(.34, 1.5, .5, 1);
}
.tl-grid > .tile:active { transform: scale(.96); }
.tl-grid > .tile img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
}
.tl-grid > .tile:first-child img,
.tl-grid > .tile:last-child:nth-child(even) img { aspect-ratio: 16 / 10.5; }
.tl-grid > .tile .tname {
  position: static; display: block; padding: 7px 3px 0;
  color: #2A2118; font-size: 11px; font-weight: 900; text-align: left;
  text-shadow: none; background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-grid > .tile:first-child .tname,
.tl-grid > .tile:last-child:nth-child(even) .tname { font-size: 13px; }

/* ---------- フェルトのタグ（なかま） ---------- */
/* 絵だけだと「その子の似顔絵」に見えて、せみのぬけがら＝てんとうむし になる。
   絵＋カテゴリ名の札にすると「分類の札」として読めるので、同じ絵でも正しくなる */
.tl-grid > .tile::before {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  display: inline-flex; align-items: center;
  padding: 4px 10px 4px 29px; border-radius: 999px;
  background: rgba(255, 253, 247, .94) 5px center/20px 20px no-repeat;
  box-shadow: var(--sh-card);
  font-size: 10.5px; font-weight: 900; color: #2A2118; line-height: 1.4;
  background-image: url("/world/cat/sonota.png");
  content: "そのた";
}
.tl-grid > .tile:not(:first-child):not(:last-child:nth-child(even))::before,
.tl-grid > .tile:nth-child(n+2):not(:last-child:nth-child(even))::before {
  left: 11px; top: 11px; padding: 3px 8px 3px 25px;
  background-size: 17px 17px; background-position: 4px center;
}
.tl-grid > .tile.c-do::before { content: "どうぶつ"; background-image: url("/world/cat/doubutsu.png"); }
.tl-grid > .tile.c-to::before { content: "とり"; background-image: url("/world/cat/tori.png"); }
.tl-grid > .tile.c-mu::before { content: "むし"; background-image: url("/world/cat/mushi.png"); }
.tl-grid > .tile.c-um::before { content: "うみ"; background-image: url("/world/cat/umi.png"); }
.tl-grid > .tile.c-sh::before { content: "しょくぶつ"; background-image: url("/world/cat/shokubutsu.png"); }
.tl-grid > .tile.c-ku::before { content: "くだもの"; background-image: url("/world/cat/kudamono.png"); }
.tl-grid > .tile.c-ya::before { content: "やさい"; background-image: url("/world/cat/yasai.png"); }
.tl-grid > .tile.c-ta::before { content: "たべもの"; background-image: url("/world/cat/tabemono.png"); }
.tl-grid > .tile.c-so::before { content: "そら"; background-image: url("/world/cat/sora.png"); }
.tl-grid > .tile.c-no::before { content: "のりもの"; background-image: url("/world/cat/norimono.png"); }
.tl-grid > .tile.c-ko::before { content: "こうえん"; background-image: url("/world/cat/kouen.png"); }
.tl-grid > .tile.c-om::before { content: "おもちゃ"; background-image: url("/world/cat/omocha.png"); }
.tl-grid > .tile.c-ni::before { content: "にちようひん"; background-image: url("/world/cat/nichiyou.png"); }
.tl-grid > .tile.c-ma::before { content: "まち"; background-image: url("/world/cat/machi.png"); }
.tl-grid > .tile.c-mi::before { content: "おみせ"; background-image: url("/world/cat/omise.png"); }
.tl-grid > .tile.c-hi::before { content: "ひと"; background-image: url("/world/cat/hito.png"); }
.tl-grid > .tile.c-si::before { content: "しぜん"; background-image: url("/world/cat/shizen.png"); }
.tl-grid > .tile.c-sn::before { content: "そのた"; background-image: url("/world/cat/sonota.png"); }

/* ================================================================
   ゼロベースの見直し（2026-09-05）。地だけ替えたので、世界の外に
   古い様式が残っていた。社長「混ぜるだけだと違和感色々あるはず」。
   ================================================================ */

/* ---------- カテゴリの色を、写真のフチから外す ---------- */
/* .mat は写真の外周にカテゴリ色を敷いていた。時系列ホームではその色の凡例が
   どこにも無く、原則4「クロームに色相を足さない」に正面から反する。
   分類はフェルトのタグが担うので、フチは紙の色に戻す */
.mat { background: var(--card); box-shadow: none; }
.mat .inner { padding: 0; }

/* カード詳細にもフェルトのタグを置く（一覧と同じ札） */
.card-peek-card { position: relative; }
.card-peek-card::before {
  position: absolute; left: 22px; top: 22px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 5px 12px 5px 32px; border-radius: 999px;
  background: rgba(255, 253, 247, .95) 6px center/22px 22px no-repeat;
  box-shadow: var(--sh-card);
  font-size: 11.5px; font-weight: 900; color: var(--ink);
  background-image: url("/world/cat/sonota.png");
  content: "そのた";
}
.card-peek-card.c-do::before { content: "どうぶつ"; background-image: url("/world/cat/doubutsu.png"); }
.card-peek-card.c-to::before { content: "とり"; background-image: url("/world/cat/tori.png"); }
.card-peek-card.c-mu::before { content: "むし"; background-image: url("/world/cat/mushi.png"); }
.card-peek-card.c-um::before { content: "うみ"; background-image: url("/world/cat/umi.png"); }
.card-peek-card.c-sh::before { content: "しょくぶつ"; background-image: url("/world/cat/shokubutsu.png"); }
.card-peek-card.c-ku::before { content: "くだもの"; background-image: url("/world/cat/kudamono.png"); }
.card-peek-card.c-ya::before { content: "やさい"; background-image: url("/world/cat/yasai.png"); }
.card-peek-card.c-ta::before { content: "たべもの"; background-image: url("/world/cat/tabemono.png"); }
.card-peek-card.c-so::before { content: "そら"; background-image: url("/world/cat/sora.png"); }
.card-peek-card.c-no::before { content: "のりもの"; background-image: url("/world/cat/norimono.png"); }
.card-peek-card.c-ko::before { content: "こうえん"; background-image: url("/world/cat/kouen.png"); }
.card-peek-card.c-om::before { content: "おもちゃ"; background-image: url("/world/cat/omocha.png"); }
.card-peek-card.c-ni::before { content: "にちようひん"; background-image: url("/world/cat/nichiyou.png"); }
.card-peek-card.c-ma::before { content: "まち"; background-image: url("/world/cat/machi.png"); }
.card-peek-card.c-mi::before { content: "おみせ"; background-image: url("/world/cat/omise.png"); }
.card-peek-card.c-hi::before { content: "ひと"; background-image: url("/world/cat/hito.png"); }
.card-peek-card.c-si::before { content: "しぜん"; background-image: url("/world/cat/shizen.png"); }
.card-peek-card.c-sn::before { content: "そのた"; background-image: url("/world/cat/sonota.png"); }
/* No. のチップもカテゴリ色をやめる */
.no { background: var(--tint, #F1EADD) !important; color: var(--ink) !important; }

/* ---------- ボタンの様式をひとつにする ---------- */
/* 黄色の3Dボタンは、この世界で太陽と色を取り合う（DESIGN.md「青に対する暖色は太陽ひとつ」）。
   押し出し影（0 Npx 0 色）も tokens.md で禁止しているので、平らな青に寄せる */
.btn-primary, .empty-cta {
  background: var(--deep); color: #FFFDF2;
  box-shadow: var(--sh-card);
  border-radius: 18px;
}
.btn-primary:active, .empty-cta:active { transform: scale(.96); box-shadow: var(--sh-card); }
.btn-sub { background: rgba(255, 253, 247, .94); color: var(--ink); box-shadow: var(--sh-card); border-radius: 18px; }
/* 副ボタン。既定は「紙の上」で読める形にする。
   空の上（儀式・オンボの子の段）だけ白抜きにする。
   逆にすると、紙のシートの中で白文字が消える（2026-09-05 に実際やらかした） */
.btn-ghost { background: var(--tint); color: var(--ink); border-radius: 18px; box-shadow: none; }
#overlay .btn-ghost,
.ob-overlay .ob-step:not([data-step="meaning"]):not([data-step="push"]):not([data-step="protect"]) > .ob-actions .btn-ghost {
  background: rgba(255, 253, 247, .22); color: #FFFDF2;
}
.pwl-sheet .btn-ghost, .stats-panel .btn-ghost, .consent-card .btn-ghost, .gate-card .btn-ghost {
  background: var(--tint); color: var(--ink);
}

/* ---------- 長押しのリング ---------- */
/* 押し続けると縁がぐるっと満ちて「開く」ことを予告する装置。色が茶金（--gold-ink）のままで、
   この世界から浮いていた。押しものの色に合わせる:
   クリームの円（撮る）には空の青、空色の円（ずかん）には生成り */
.floating-nav.holding::after {
  background: conic-gradient(var(--deep) var(--hold-p), transparent 0deg);
}


/* ================================================================
   PR② おとなの導線（じぶんのページ・おうちのかた）
   要件（節の順・文言・ボタンの粒度）は本番のまま、見た目だけ空の世界に。
   ================================================================ */

/* ---------- じぶんのページ ---------- */
/* 元はクリーム紙の地に金の光。空の世界では地は空で、紙はカードだけ */
/* 全画面のオーバーレイは自分で空を持つ（#world は z-index:-1 で下にいる） */
.child-space { background: var(--sky-noon); }
[data-sky="morning"] .child-space { background: var(--sky-morning); }
[data-sky="evening"] .child-space { background: var(--sky-evening); }
[data-sky="night"] .child-space { background: var(--sky-night); }
.child-space-title { color: var(--on-sky); text-shadow: var(--sky-shadow); }
.child-space-close { background: var(--card); box-shadow: var(--sh-card); color: var(--ink); }

/* ぬしカード。金の額縁は「宝物」の合図だったが、
   分厚いグラデーションの金枠は世界の作り（フェルト＋紙）から外れる。
   紙のカードに戻し、金は No. と 👑 の札にだけ残す（面積5%以下の原則） */
.mecard, .child-space .mecard {
  width: 268px; background: var(--card); border: 0;
  border-radius: 26px; padding: 12px 12px 18px;
  box-shadow: var(--sh-lift);
}
/* 旧 style.css の `.child-space .mecard` は2クラスで、上の1クラスの打ち消しに勝っていた。
   金の2px線だけが外周に生き残っていた（2026-09-06）ので、同じ強さで消す */
.me-mat { padding: 0; border-radius: 18px; background: none; box-shadow: none; }
.me-inner { padding: 0; border-radius: 18px; background: var(--tint, #F1EADD); }
/* 写真が無い日は felt の顔。桃色の地に絵文字、は世界の外 */
#nushi-photo-placeholder, #child-space-avatar-placeholder {
  width: 100%; height: 100%; font-size: 0;
  background: url("/world/face.png") center/62% no-repeat;
}
.me-row { margin-top: 14px; }
.me-name { font-size: 24px; margin-top: 6px; }

.cs-hint { background: rgba(255, 253, 247, .92); color: var(--ink); box-shadow: var(--sh-card); border: 0; }
.cs-photo-add { background: rgba(255, 253, 247, .94); color: var(--ink); box-shadow: var(--sh-card); border: 0; }
.sticker-entry { background: rgba(255, 253, 247, .94); box-shadow: var(--sh-card); border: 0; }

/* おうちのかたの帯。空の上に置く紙の行 */
.parent-strip { background: rgba(255, 253, 247, .92); border-radius: 18px; box-shadow: var(--sh-card); }
.ps-label { color: var(--ink); }
.ps-hint { color: var(--sub); }
.parent-strip-nudge { color: var(--on-sky); text-shadow: var(--sky-shadow); }
.cs-parent-hr { border-color: rgba(255, 253, 247, .34); }

/* ---------- おうちのかた（きろくパネル） ---------- */
/* 紙のシートが下から立ち上がる。中身の並びは本番のまま */
#stats-overlay .stats-panel {
  background: var(--card); border-radius: 26px 26px 0 0;
  box-shadow: var(--sh-lift);
}
.parent-section-label { color: var(--sub); letter-spacing: .12em; margin: 26px 2px 8px; }
.sheet-title { color: var(--ink); font-size: 17px; }
.parent-mode-copy, .sync-note { color: var(--sub); }
.sync-code {
  border: 2px dashed var(--stitch); background: rgba(241, 234, 221, .6);
  color: var(--ink); border-radius: 18px;
}
.stats-list { color: var(--ink); }

/* ---------- 親の面に残っていた色を世界のものに ---------- */
/* 機械で洗って出た6つ（2026-09-05）。どれも旧パレットの取り残し */
.ono svg .sp, .ono svg .a1, .ono svg .a2, .ono { color: var(--sub); }
.child-space .ps-txt .ps-label { color: var(--ink); }
.child-space .ps-chev { color: var(--sub); }
/* ぬしカードの金の札。地は金、文字は墨（olive の文字は読みにくく、世界の外） */
.me-no, .me-owner { color: var(--ink); background: rgba(240, 180, 74, .26); }
/* 警告の点はオレンジではなく、世界の「気をつけて」の色 */
.parent-warn-dot { background: var(--warn) !important; }
/* 最下段の法務リンク。インラインで #999 が入っているので上書きする */
#stats-sheet-body > p[style] { color: var(--sub) !important; }
#stats-sheet-body > p[style] a { color: var(--sub) !important; }

/* ================================================================
   PR③ 儀式（さがしてる・ゲット）
   要件（No./★/ずんだもんの吹き出し/コメント/ボタンの粒度）はそのまま。
   ================================================================ */

/* 儀式の幕。茶色の暗幕をやめ、空を落として奥へ下げる */
#overlay.overlay { background: rgba(14, 27, 55, .88); }

/* ---------- さがしてる ---------- */
/* 待ちは spinner ではなくキャラの芝居に変換する（kids-ui 6）。
   ここは「フェルトの窓に写真、そのふちを何かが回っている」に置き換える */
.smat {
  padding: 9px; border-radius: 26px; background: var(--card);
  box-shadow: var(--sh-lift);
}
.smat img { border-radius: 18px; }
/* 金色の光の輪 → 空の光に */
.scan-glow { background: radial-gradient(circle, rgba(255, 253, 242, .34), rgba(255, 253, 242, 0) 68%); }
/* まわる点線を、フェルトの縫い目の色に */
.scan-ring { border: 3px dashed var(--stitch); inset: -14%; }
.scan-sub {
  background: rgba(255, 253, 247, .92); border: 0; color: var(--ink);
  box-shadow: var(--sh-card); font-size: 13.5px; padding: 9px 18px;
}

/* ---------- ゲット ---------- */
/* 「ゲット！」の札。黄色い箱＋茶の文字は旧パレット。生成りの札に墨で */
.get-banner {
  background: var(--card); color: var(--ink);
  border-radius: 999px; box-shadow: var(--sh-card);
  padding: 10px 26px 11px;
}
.get-card {
  background: var(--card); border-radius: 26px;
  box-shadow: var(--sh-lift);
}
.get-card .mat { padding: 0; border-radius: 18px; background: none; box-shadow: none; }
.get-card .mat .inner { padding: 0; border-radius: 18px; }
.get-card .mat img { border-radius: 18px; }
/* カテゴリはフェルトのタグ（一覧・カード詳細と同じ札） */
#get-card { position: relative; }
#get-card::before {
  position: absolute; left: 20px; top: 20px; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 5px 12px 5px 32px; border-radius: 999px;
  background: rgba(255, 253, 247, .95) 6px center/22px 22px no-repeat;
  box-shadow: var(--sh-card);
  font-size: 11.5px; font-weight: 900; color: var(--ink);
  background-image: url("/world/cat/sonota.png");
  content: "そのた";
}
#reveal-card.c-do #get-card::before { content: "どうぶつ"; background-image: url("/world/cat/doubutsu.png"); }
#reveal-card.c-to #get-card::before { content: "とり"; background-image: url("/world/cat/tori.png"); }
#reveal-card.c-mu #get-card::before { content: "むし"; background-image: url("/world/cat/mushi.png"); }
#reveal-card.c-um #get-card::before { content: "うみ"; background-image: url("/world/cat/umi.png"); }
#reveal-card.c-sh #get-card::before { content: "しょくぶつ"; background-image: url("/world/cat/shokubutsu.png"); }
#reveal-card.c-ku #get-card::before { content: "くだもの"; background-image: url("/world/cat/kudamono.png"); }
#reveal-card.c-ya #get-card::before { content: "やさい"; background-image: url("/world/cat/yasai.png"); }
#reveal-card.c-ta #get-card::before { content: "たべもの"; background-image: url("/world/cat/tabemono.png"); }
#reveal-card.c-so #get-card::before { content: "そら"; background-image: url("/world/cat/sora.png"); }
#reveal-card.c-no #get-card::before { content: "のりもの"; background-image: url("/world/cat/norimono.png"); }
#reveal-card.c-ko #get-card::before { content: "こうえん"; background-image: url("/world/cat/kouen.png"); }
#reveal-card.c-om #get-card::before { content: "おもちゃ"; background-image: url("/world/cat/omocha.png"); }
#reveal-card.c-ni #get-card::before { content: "にちようひん"; background-image: url("/world/cat/nichiyou.png"); }
#reveal-card.c-ma #get-card::before { content: "まち"; background-image: url("/world/cat/machi.png"); }
#reveal-card.c-mi #get-card::before { content: "おみせ"; background-image: url("/world/cat/omise.png"); }
#reveal-card.c-hi #get-card::before { content: "ひと"; background-image: url("/world/cat/hito.png"); }
#reveal-card.c-si #get-card::before { content: "しぜん"; background-image: url("/world/cat/shizen.png"); }
#reveal-card.c-sn #get-card::before { content: "そのた"; background-image: url("/world/cat/sonota.png"); }

/* ずんだもんの吹き出し。うすい緑は旧パレット */
.zunda { background: rgba(255, 253, 247, .94); border: 0; box-shadow: var(--sh-card); color: var(--ink); }
.zunda svg .sp, .zunda svg .a1, .zunda svg .a2 { stroke: var(--sub); fill: var(--sub); }
.reveal-comment { color: var(--on-sky-sub); }
/* 飛ぶ音符は太陽の黄 */
.nt { color: var(--gold); }
.mock-chip { background: rgba(42, 33, 24, .62); }

/* ---------- 主ボタンを世界の色に（オーバーレイごとの上書きを全部たたむ） ---------- */
/* .btn-primary は #overlay / .consent-overlay / .ob-overlay で別々に黄色を指定していて、
   単純なクラス指定では勝てない。押し出し影（0 Npx 0 色）は tokens.md で禁止しているので、
   ここは意図して !important で一本化する */
.btn-primary, .empty-cta,
#overlay .btn-primary, .consent-overlay .btn-primary, .ob-overlay .btn-primary {
  background: var(--deep) !important;
  color: #FFFDF2 !important;
  box-shadow: var(--sh-card) !important;
  border-radius: 18px !important;
}
.btn-primary:active, .empty-cta:active,
#overlay .btn-primary:active, .consent-overlay .btn-primary:active, .ob-overlay .btn-primary:active {
  transform: scale(.96) !important;
  box-shadow: var(--sh-card) !important;
}

/* ふきだしのしっぽ。うすい緑＋緑の線は旧パレット */
.zunda::before {
  background: rgba(255, 253, 247, .94) !important;
  border-left-color: rgba(255, 253, 247, .94) !important;
  border-top-color: rgba(255, 253, 247, .94) !important;
}
/* ★ の金を、世界の金（太陽・ごほうび）と同じにする */
.stars { color: var(--gold); }

/* ================================================================
   PR④ オンボーディング（11段）・同意・ゲート
   段の構成・文言・数字・注記は本番のまま。
   構造の方針（モックと同じ）: **子に向けた段は空の上、おとなに向けた段は紙の上**。
   ================================================================ */

/* 全画面の乗っ取りなので、自分で空を持つ */
.ob-overlay { background: var(--sky-noon); }
[data-sky="morning"] .ob-overlay { background: var(--sky-morning); }
[data-sky="evening"] .ob-overlay { background: var(--sky-evening); }
[data-sky="night"] .ob-overlay { background: var(--sky-night); }

.ob-back { background: rgba(255, 253, 247, .92); border: 0; color: var(--ink); box-shadow: var(--sh-card); }
.ob-dots i { background: rgba(255, 253, 242, .38); }
.ob-dots i.on, .ob-dots .on { background: var(--on-sky); }

/* 空の上に置く文字。**段の直下だけ**にする。
   子孫まで白くすると、紙のシート（.pwl-sheet 等）の中まで白が入って消える
   （2026-09-05 にプランと同意で実際に消した） */
.ob-step > .ob-eyebrow { color: var(--on-sky-sub); text-shadow: var(--sky-shadow); }
.ob-step > .ob-title { color: var(--on-sky); text-shadow: var(--sky-shadow); }
.ob-step > .ob-sub, .ob-step > .ob-note,
.ob-step > .onboard-q, .ob-step > .onboard-hint { color: var(--on-sky-sub); text-shadow: var(--sky-shadow); }
.ob-step > .ob-note .ob-textlink { color: var(--on-sky); }

/* おとなに向けた段は紙の上に置く（大人の文体・情報量が多い） */
.ob-step[data-step="meaning"],
.ob-step[data-step="push"],
.ob-step[data-step="protect"] {
  background: var(--card); border-radius: 26px; padding: 20px 18px 24px;
  box-shadow: var(--sh-lift); margin-top: 8px;
}
.ob-step[data-step="meaning"] > .ob-eyebrow,
.ob-step[data-step="push"] > .ob-eyebrow,
.ob-step[data-step="protect"] > .ob-eyebrow { color: var(--sub) !important; text-shadow: none !important; }
.ob-step[data-step="meaning"] > .ob-title,
.ob-step[data-step="push"] > .ob-title,
.ob-step[data-step="protect"] > .ob-title { color: var(--ink) !important; text-shadow: none !important; }
.ob-step[data-step="meaning"] .ob-sub, .ob-step[data-step="meaning"] .ob-note,
.ob-step[data-step="push"] .ob-sub, .ob-step[data-step="push"] .ob-note,
.ob-step[data-step="protect"] .ob-sub, .ob-step[data-step="protect"] .ob-note,
.ob-step[data-step="protect"] .ob-protect-fine { color: var(--sub); text-shadow: none; }

/* ようこそのカードの扇。カテゴリ色の上フチはやめる（原則4） */
.hello-card { border-top: 0; background: var(--card); box-shadow: var(--sh-card); border-radius: 18px; }
.hc-ph { background: var(--tint); border-radius: 12px; }

/* 撮影のおためし。窓をフェルトのふちに */
.ob-shot-win { border-radius: 18px; background: var(--tint); }
.ob-shot-frame { outline: 6px solid var(--card); outline-offset: -6px; border-radius: 18px; }

/* チップ（とし・むちゅうなもの）。緑は旧パレット */
.ob-chip { background: rgba(255, 253, 247, .94); border: 0; color: var(--ink); box-shadow: var(--sh-card); border-radius: 18px; }
.ob-chip.selected { background: var(--deep); color: #FFFDF2; border: 0; }

/* 語彙のグラフ。緑の線を空の青に */
.ob-graph { background: var(--tint); border: 0; border-radius: 18px; }
.ob-graph path[stroke] { stroke: var(--deep); }
.ob-graph circle { fill: var(--deep); }
.ob-graph text { fill: var(--sub); }
.ob-graph #ob-graph-nums text { fill: var(--deep); }
.ob-graph-cap b { color: var(--deep); }
.ob-graph #ob-graph-pill rect { fill: var(--deep); }
.ob-graph #ob-graph-pill text { fill: #FFFDF2; }
.ob-points li { color: var(--ink); }

/* ぬしカードのプレビュー・入力欄 */
.ob-nushi { background: var(--card); box-shadow: var(--sh-card); border-radius: 18px; }
/* 写真を貼った瞬間に金の輪になる旧指定（.ob-nushi.has-photo）も、ぬしカード本体と同じく紙のまま。
   完成の合図は写真そのものと sticker で足りる */
.ob-nushi.has-photo { box-shadow: var(--sh-card); }
#onboard-name, .ob-input {
  background: var(--card); border: 2px solid var(--line); color: var(--ink); border-radius: 18px;
}

/* 案内状・プラン。緑のアクセントを空の青に */
.pwl-sheet { background: var(--card); border-radius: 26px; box-shadow: var(--sh-lift); }
.ob-plan { border: 2px solid var(--line); background: var(--card); border-radius: 18px; }
.ob-plan.selected { border-color: var(--deep); background: var(--paper); box-shadow: var(--sh-card); }
.ob-plan-badge { background: var(--deep); color: #FFFDF2; }
.pw-timeline { background: var(--tint); border-radius: 18px; }
.pw-timeline b, .pw-value .pw-value-top { color: var(--deep); }
.pw-nocommit, .pw-terms, .pw-legal, .pw-legal a, .pw-legal button { color: var(--sub); }
.pw-why b { color: var(--ink); }

/* 同意ゲート・おとなのかくにん */
.consent-overlay { background: rgba(12, 30, 68, .58); }
.gate-overlay { background: rgba(12, 30, 68, .58); }
.gate-card { background: var(--card); border-radius: 26px; box-shadow: var(--sh-lift); }

/* ---------- オンボに残っていた旧パレット（機械で洗って出たぶん） ---------- */
/* 段のドット。緑と灰は旧パレット */
.ob-dot { background: rgba(255, 253, 242, .38) !important; }
.ob-dot.on, .ob-dot.is-on, .ob-dot[aria-current] { background: var(--on-sky) !important; }
/* 紙の上の段では、ドットも紙の上の色に */
.ob-step[data-step="meaning"] ~ * .ob-dot { background: rgba(155, 139, 118, .34) !important; }

/* おうちのかたへの結び（緑の文字） */
.ob-para, #ob-meaning-product { color: var(--ink) !important; }

/* ぬしカードのプレビューの No.（olive の文字） */
.nushi-no, .ob-future-sticker { color: var(--ink); }

/* ミニずかんの表紙は旧ロゴのSVG（水色の板・赤い丸・緑の山）。
   世界の色に置き換える。かたちは活かして色だけ */
.ob-mini-stage svg rect { fill: var(--tint); }
.ob-mini-stage svg circle { fill: var(--deep); }
.ob-mini-stage svg path { fill: var(--deep); }
.ob-mini-stage svg text { fill: #FFFDF2; }

/* 紙吹雪。祝いの色は 金・生成り・空の青の3つに */
.confetti-bit:nth-child(3n+1) { background: var(--gold) !important; }
.confetti-bit:nth-child(3n+2) { background: #FFFDF2 !important; }
.confetti-bit:nth-child(3n) { background: var(--deep) !important; }

/* ================================================================
   PR⑤ おとどけもの・上映会・シールちょう・法務
   v1で伏せている面（上映会・シールちょう）も、フラグを倒したときに
   新デザインのまま出てくるようにしておく。
   ================================================================ */

/* ---------- おとどけもの ---------- */
/* 封筒→中身の2段構え、ダウンロードとシェアの2ボタンは本番のまま */
.dl-overlay { background: rgba(12, 30, 68, .72); }
.dl-ttl { color: var(--on-sky); text-shadow: var(--sky-shadow); }
.dl-hint { color: var(--on-sky-sub); }
/* 封筒。金のふたはこの世界では太陽と競うので、生成りの紙＋金の封蝋だけにする */
.dl-env { border-radius: 18px; }
/* ふたは、紙より一段濃い生成りにしないと形が消える。
   丸みをふた側に持たせると、三角に切ったときに両端へ隙間ができる（社長指摘）。
   丸みは本体（.dl-env の overflow）で切る */
.dl-env { overflow: hidden; }
.dl-flap { left: 0; right: 0; }
.dl-env::after {
  content: ""; position: absolute; inset: 7px 7px 7px; z-index: 1;
  border: 2px dashed var(--stitch); border-top: 0;
  border-radius: 0 0 12px 12px; pointer-events: none;
}
.dl-seal { background: var(--gold);
  box-shadow: inset 0 -2px 4px rgba(120, 84, 20, .22), inset 0 2px 3px rgba(255, 255, 255, .5), 0 2px 5px rgba(60, 40, 8, .28); }
.dl-float-title { background: rgba(255, 253, 247, .94); color: var(--ink); }
.dl-x { background: rgba(255, 253, 247, .94); color: var(--ink); }
.dl-fbtn { background: rgba(255, 253, 247, .94); color: var(--ink); box-shadow: var(--sh-card); }
.dl-fbtn.primary { background: var(--deep); color: #FFFDF2; box-shadow: var(--sh-card); } /* 旧の押し出し影(0 4px 0 #B98F2C)を消す */
.dl-dots i { background: rgba(255, 253, 242, .38); }
.dl-dots i.on { background: var(--on-sky); }

/* ---------- 上映会（v1では伏せている） ---------- */
/* よるの客席。もとは茶色の劇場だったので、よるの空にする */
.replay-overlay { background: var(--sky-night); }
.rc-title { color: var(--on-sky); }
.rc-sub, .rc-date, .lbl, .replay-ehon { color: var(--on-sky-sub); }
.beads i { background: rgba(255, 253, 242, .34); }
.beads i.on { background: var(--on-sky); }
.bcard { background: var(--card); border-radius: 26px; box-shadow: var(--sh-lift); }
.bcard .mat { padding: 0; border-radius: 18px; background: none; box-shadow: none; }
.bcard .mat .inner { padding: 0; border-radius: 18px; }
.replay-close { background: rgba(255, 253, 247, .94); color: var(--ink); }

/* ---------- シールちょう（v1では伏せている） ---------- */
.sticker-book { background: var(--sky-noon); }
[data-sky="evening"] .sticker-book { background: var(--sky-evening); }
[data-sky="night"] .sticker-book { background: var(--sky-night); }

/* ---------- 法務のページ ---------- */
.legal-overlay .legal-bar, .legal-title { color: var(--ink); }
.legal-frame { background: var(--paper); }

/* ---------- おとなのかくにん（かけ算のゲート） ---------- */
.gate-card { background: var(--card); border-radius: 26px; box-shadow: var(--sh-lift); }
.gate-question { color: var(--ink); }
.gate-typed { color: var(--deep); }

/* ---------- 直し: 読めない・はみ出る（2026-09-05 社長指摘） ---------- */

/* 同意ゲート。見出しと導入が幕の上に直に乗っていて読めなかった。
   おとなに向けた面なので、紙のシートに載せる（この世界の置き分けどおり） */
.consent-card {
  background: var(--card); border-radius: 26px; box-shadow: var(--sh-lift);
  padding: 22px 18px 24px;
}
.consent-card .ob-eyebrow { color: var(--sub); text-shadow: none; }
.consent-title { color: var(--ink); text-shadow: none; }
.consent-lead, .consent-points li, .consent-policy { color: var(--ink); text-shadow: none; }
.consent-points li { background: var(--tint); border: 0; border-radius: 18px; }
.consent-policy a { color: var(--deep); }

/* 案内状・プランの見出し。紙の上なので墨で
   （.ob-title を空の上の白にしたぶん、紙の中まで白くなっていた） */
.pwl-sheet .ob-eyebrow { color: var(--sub); text-shadow: none; }
.pwl-sheet .ob-title { color: var(--ink); text-shadow: none; }
.pwl-sheet .ob-sub, .pwl-sheet .ob-note { color: var(--sub); text-shadow: none; }

/* おためしの窓。outline は角丸に沿わないので写真の四隅がはみ出していた。
   ふちは border で作り、中身を角丸で切る */
.ob-shot-win { border: 7px solid var(--card); border-radius: 22px; overflow: hidden; }
.ob-shot-win img { border-radius: 15px; }
.ob-shot-frame { outline: 0; border: 0; }

/* 「おしてみて」を目で追えるように、シャッターが呼吸する */
#ob-demo-shutter { animation: ob-pulse 1.9s ease-in-out infinite; }
@keyframes ob-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
#ob-demo-shutter::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid rgba(255, 253, 242, .5);
  animation: ob-ring 1.9s ease-out infinite;
}
@keyframes ob-ring {
  0% { transform: scale(.9); opacity: .7; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}

/* ---------- ミニずかんの印を、フェルトのものに ---------- */
/* obBuildMini はヘッダーの旧ロゴSVG（写真2枚＋赤い丸＋お）を複製している。
   ヘッダー側は隠したが、複製は残るので黒い板に見えていた（2026-09-05 社長指摘）。
   印はフェルトの「しゃしんカードの束」に差し替える */
.ob-mini-logo svg, .ob-future-cover-inner svg { display: none; }
.ob-mini-logo {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  background: url("/world/book.png") center/contain no-repeat;
}
.ob-future-cover-inner .ob-mini-logo {
  display: block; width: 62px; height: 62px; margin: 0 auto 10px;
  filter: drop-shadow(0 3px 8px rgba(0, 20, 60, .2));
}
/* 表紙のすみの 📖 は消す。表紙のまん中に同じ印がもう出ているので、
   同じ絵が1枚の表紙に2つ並ぶだけだった */
.ob-future-sticker { display: none !important; }
/* 「ずかんを つくっているよ…」の輪。緑と黄のグラデーションは旧パレット */
.ob-born-ring { background: var(--card) !important; box-shadow: var(--sh-lift); }
.ob-born-ring > span, #ob-born-ph-loading {
  font-size: 0 !important;
  background: var(--card) url("/world/book.png") center/58% no-repeat;
}
/* ミニずかんの紙と奥付 */
.ob-mini-page { background: var(--card); }
/* ---------- フェルトの布地（1さつの表紙・封筒で共有） ---------- */
/* 雲もロゴもカテゴリの札もフェルトなのに、本と封筒だけ真っ平らな紙だと
   そこだけ世界から浮く。生成りの布地＋起毛の粒＋厚みの陰り。
   粒は目盛りが揃うと「有孔ボード」に見えるので、2枚の間隔をずらして重ねる */
.ob-future-cover, .dl-env, .pwl-env {
  background-color: #F6EDDA;
  /* 毛羽の1枚（world/felt.png・128pxで継ぎ目なし）。
     CSSの radial-gradient は必ず「目盛りの揃った水玉」になって布に見えないので、
     ランダムな毛羽を撒いた絵をタイルする */
  background-image: url("/world/felt.png");
  background-size: 64px 64px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 7px rgba(146, 120, 82, .10),
              0 0 0 1px rgba(146, 120, 82, .16), var(--sh-lift);
}
.ob-future-cover-inner { position: relative; background: none; padding: 16px 12px; }

/* 表紙には縫い目を入れない（2026-09-05 社長指摘の直し）。
   表紙にはすでに背表紙(::before)・小口の縞(::after)・奥付の罫2本があり、
   そこへ点線の四角を足したら線が5種類になって「カオス」になった。しかも
   四角が小口に食い込み、背表紙とは二重線になっていた。
   表紙のフェルト感は、布地と厚みの陰りとフェルトの印が担う。
   縫い目は封筒だけの語彙にする（あちらは線が1種類しかないので効く）。 */
.ob-future-cover-title, .ob-future-cover-name { color: var(--ink); }
.ob-future-colophon { color: var(--sub); }
.ob-mini-brand { color: var(--ink); }

/* コントラストの機械チェックで出た2件 */
#btn-stats-x { background: var(--tint); color: var(--ink); }
.parent-warn-dot { color: #FFFDF2 !important; }

/* ---------- 紙の上の副文字を濃くする ---------- */
/* --sub（#9B8B76）は紙（#FFFDF7）に対して コントラスト2.6 しかなく、
   注記・法務・プランの但し書きが読みにくかった。4.5 を超える濃さにする。
   空の上の副文字（--on-sky-sub）は別トークンなので影響しない */
:root { --sub: #6E6152; }
.ob-plan-name { color: var(--ink); }

/* ---------- 残りの詰め（2026-09-05 社長指摘） ---------- */

/* コントラスト: ★ が紙に対して薄い／おうちのかた帯のヒント／警告の！ */
.card-peek .stars, .get-card .stars, .bcard .stars { color: #B07C0A; }
.ps-hint { color: var(--sub) !important; }
.parent-warn-dot { color: #FFFDF2 !important; background: var(--warn) !important; }

/* おためしの写真を大きく（モックの見えかた） */
.ob-shot { width: min(84vw, 330px); margin: 20px auto 12px; }

/* 案内状の封筒。モックと同じ「生成りの紙＋金の丸い封蝋」に */
.pwl-env { border-radius: 18px; overflow: hidden; }
/* 前の面（ふたを開けたときに残る、V字の袋）。
   style.css の .pwl-env::after がこれを描いていたのに、縫い目で上書きして
   消してしまっていた ＝ 社長指摘「蓋部分が完全に消える」の正体。
   袋は残し、縫い目は ::before へ移す */
.pwl-env::after {
  background-color: #E7D6B2; background-image: url("/world/felt.png");
  background-size: 64px 64px; border-radius: 18px;
  /* 袋の左右の辺は上の角から始める（前は上から33%の位置から始めていたので、
     左右の肩に本体の明るい地が三角に残っていた） */
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
}
/* ふたの先を袋のVの先端まで届かせる（2026-09-07 社長指摘）。
   前はふたの先が56pxで止まり、袋のV（先端108px）との間に本体の明るい地が
   幅50pxの太いVの帯として見えていた＝「真ん中にVの太い線」。
   本物の封筒はふたの先が袋のVに重なるので、閉じている間は明るい地が見えない。
   開いたときだけ、ふたの裏に明るい生成りの内張りがのぞく */
.pwl-flap { height: 73px; }  /* 袋のV先端(62%=73px)と同じ */
.pwl-seal { top: 53px; }     /* 封蝋の中心をふたの先端に。下すぎると重心が沈む（9/7 社長指摘） */
/* ふたと袋が同じフェルトなので、ふたの斜めの縁に厚みの陰を1本だけ通す
   （clip-path は影も切るので、ふた本体を陰の色にして、その内側に同じ形を
   2pxだけ小さく重ねてフェルトを描く） */
.pwl-env > .pwl-flap { background: rgba(120, 92, 44, .30); } /* 下の「ふたも同じ布」より強く効かせる */
.pwl-flap::after {
  content: ""; position: absolute; inset: 0;
  background-color: #E7D6B2; background-image: url("/world/felt.png"); background-size: 64px 64px;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 50% calc(100% - 4px)); /* 斜めの縁に沿って一定幅の陰が残るよう、内側へ寄せる */
}
/* 封筒の縫い目は、ほんとうに縫ってあるところ＝本体の左右と下だけに通す。
   前は点線の四角を ふたの上に敷いていたので、三角のふたを横切って
   切れぎれの点線が散っていた。袋の上（z:3）に置き、上のふちは通さない */
.pwl-env::before {
  content: ""; position: absolute; inset: 7px 7px 7px; z-index: 3;
  border: 2px dashed var(--stitch); border-top: 0;
  border-radius: 0 0 12px 12px; pointer-events: none;
}
/* 開いたふたは、うしろへ折り返って上にのぞく＝「開いている」が見える形にする。
   -176度は真うしろを向いて消える角度で、しかも env の overflow:hidden
   （閉じているときの角を丸めるために足したもの）に切り取られていた */
.pwl-stage.open .pwl-env { overflow: visible; }
.pwl-stage.open .pwl-flap {
  transform: rotateX(-142deg); z-index: 1;
  /* 折り返したふたの つけ根が、封筒の丸い角の外に はみ出して
     宙に浮いて見えていた（社長指摘）。つけ根を角のまるみ（18px）ぶん
     内側にして、まっすぐな上辺の上に着地させる。
     閉じている間は今までどおり全幅（封筒の overflow で丸く切る） */
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 50% 100%);
}
/* ふたも同じ布。ふただけ真っ平らだと、そこだけ紙かプラスチックに見える */
.pwl-flap, .dl-flap {
  background-color: #E7D6B2; background-image: url("/world/felt.png"); background-size: 64px 64px;
  border-radius: 0;
}
.pwl-seal { background: var(--gold); color: var(--ink);
  box-shadow: inset 0 -2px 4px rgba(120, 84, 20, .22), inset 0 2px 3px rgba(255, 255, 255, .5), 0 2px 5px rgba(60, 40, 8, .28); }

/* ---------- ようこそに、いろんなものが降ってくる ---------- */
/* モックの見せ方。18カテゴリの絵が空からくるくる落ちてくる */
.ob-cascade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* ---------- ようこそ: 束から出てきて、まわりに浮かんだまま留まる ---------- */
/* 参考の動き（社長が挙げたXの動画）を実際に見て作り直した。
   あれは飛び続けるのではなく、一点から ぽんぽん湧き出して、まわりに
   浮かんだまま止まる。動いたあとに「落ちついた絵」が残るのが要点。
   出るところは カードの束（.ob-body は z:1）の裏なので、透ける必要がない */
/* 1つぶんの尺。.66秒＋0.06秒おき（＝全部で1.6秒）は「一瞬すぎる」、
   1.05秒＋0.22秒おき（＝3秒）でもまだ速い、と2回言われている。
   参考の動画も5〜6秒かけて溜まっていくので、そこに合わせる。
   1つを1.4秒かけて出し、0.32秒おき＝全部そろうまで およそ5.5秒 */
/* 横（.pop）と縦（.py）を別々に、別のカーブで動かす。
   1枚で動かすと まっすぐ飛ぶ（社長指摘「一直線みたい」）。
   片方に跳ねるカーブ、もう片方になめらかなカーブを当てると弧になる。
   どちらが跳ねるかは1つずつ変えてある（--e-x / --e-y は JS が振る） */
.ob-cascade .pop { position: absolute; will-change: transform;
  animation: ob-px 1.4s var(--e-x) var(--dl) both; }
.ob-cascade .pop .py { display: block; width: 100%; height: 100%;
  animation: ob-py 1.4s var(--e-y) var(--dl) both; }
@keyframes ob-px {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sx)); }
}
@keyframes ob-py {
  0%   { transform: translateY(0) scale(.22) rotate(0deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(var(--sy)) scale(1) rotate(var(--r)); opacity: 1; }
}
/* 止まったあとの息づかい。止めきると「貼った絵」に見える */
.ob-cascade .pop img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 20, 60, .22));
  animation: ob-bob var(--bd) ease-in-out var(--bdl) infinite alternate; }
@keyframes ob-bob { to { transform: translateY(var(--bob)) rotate(var(--br)); } }

/* ---------- みらい: 画面の外から ずかんへ 寄ってくる ---------- */
/* 速さのカーブ（--e-x / --e-y）は1つずつ JS が振る。横と縦で効き方をずらすと
   弧を描く。似た値どうしだと、結局まっすぐ飛ぶ */
.ob-cascade .fly { position: absolute; will-change: transform;
  animation: ob-gx-in var(--d-in) var(--e-x) var(--dl-in) infinite; }
.ob-cascade .fly img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 20, 60, .22));
  animation: ob-gy-in var(--d-in) var(--e-y) var(--dl-in) infinite; }
@keyframes ob-gx-in {
  from { transform: translateX(var(--sx)); }
  to   { transform: translateX(0); }
}
/* 濃さの目盛りは「時間の%」であって「距離の%」ではない。中ほどで濃さを変えると、
   空のまん中で ふっと現れて見える。画面の外にいるうちに濃くし、
   消えるのは ずかんの紙の裏に入ってから */
@keyframes ob-gy-in {
  0%   { transform: translateY(var(--sy)) rotate(0deg) scale(1); opacity: 0; }
  4%   { opacity: var(--o); }
  94%  { opacity: var(--o); }
  100% { transform: translateY(0) rotate(var(--r)) scale(.66); opacity: 0; }
}
.ob-overlay:not(.is-welcome):not(.is-future) .ob-cascade { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ob-cascade .pop, .ob-cascade .pop .py { animation-duration: .01s; }
  .ob-cascade .pop img { animation: none; }
}
.ob-overlay .ob-body { position: relative; z-index: 1; }

/* ---------- フェルトのタグの余白を直す（2026-09-05 社長指摘） ---------- */
/* 絵が札の高さいっぱいで、上下と左が詰まって「壊れて」見えていた。
   丸い札は端がえぐれるので、絵は札の高さの6割強にして中央に置く */
.tl-grid > .tile::before {
  padding: 7px 12px 7px 31px; line-height: 1.4;
  background-size: 17px 17px; background-position: 8px center;
}
.tl-grid > .tile:not(:first-child):not(:last-child:nth-child(even))::before,
.tl-grid > .tile:nth-child(n+2):not(:last-child:nth-child(even))::before {
  padding: 6px 10px 6px 27px;
  background-size: 15px 15px; background-position: 7px center;
}
.card-peek-card::before, #get-card::before {
  padding: 8px 14px 8px 36px; line-height: 1.4;
  background-size: 20px 20px; background-position: 9px center;
}

/* --warn を定義していなかったので「！」の地が透明になり、白文字が消えていた */
:root { --warn: #C4562E; }
/* ★は紙に対して薄かった。金のまま濃度だけ上げる */
.stars { color: #B07C0A; }

/* ゲットの幕を濃くした理由（上の #overlay.overlay）:
   .52 ではうしろの撮影画面の白い文字「とったら ことばカードに なるよ」と
   シャッターの点線が透けていた。ゲットはこの子だけの舞台なので裏を消す */

/* ---------- オンボの「1さつになる」ミニずかん ---------- */
/* ここは実寸のずかんを縮小して覗く窓。ずかんのホームが時系列の写真タイルに
   変わったのに、ここだけ旧カード（No.・★・ローマ字つき・フチ4重）のままで、
   アプリのどこにも無いデザインが未来として映っていた。中身の作りは触らず、
   見た目だけ .tl-grid > .tile にそろえる */
.ob-mini-grid > .card {
  position: relative; display: block; width: 100%;
  background: #FFFDF7; border-radius: 18px; padding: 7px 7px 9px;
  box-shadow: var(--sh-card); border: 0; overflow: visible;
}
/* No.と★とローマ字は、時系列のタイルには無い */
.ob-mini-grid > .card > .row, .ob-mini-grid > .card > .en { display: none; }
.ob-mini-grid > .card > .ph { margin: 0; }
.ob-mini-grid > .card .mat { padding: 0; border-radius: 12px; background: none; box-shadow: none; }
.ob-mini-grid > .card .mat .inner { padding: 0; border-radius: 12px; }
.ob-mini-grid > .card .mat img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
}
.ob-mini-grid > .card > .name {
  display: block; padding: 7px 3px 0; margin: 0;
  color: #2A2118; font-size: 11px; font-weight: 900; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* フェルトのタグ（一覧と同じ札の小さいほう） */
.ob-mini-grid > .card::before {
  position: absolute; left: 11px; top: 11px; z-index: 1;
  display: inline-flex; align-items: center;
  padding: 6px 10px 6px 27px; border-radius: 999px;
  background: rgba(255, 253, 247, .94) 7px center/15px 15px no-repeat;
  background-image: url("/world/cat/sonota.png");
  box-shadow: var(--sh-card);
  font-size: 10.5px; font-weight: 900; color: #2A2118; line-height: 1.4;
  content: "そのた";
}
.ob-mini-grid > .card.c-do::before { content: "どうぶつ"; background-image: url("/world/cat/doubutsu.png"); }
.ob-mini-grid > .card.c-to::before { content: "とり"; background-image: url("/world/cat/tori.png"); }
.ob-mini-grid > .card.c-mu::before { content: "むし"; background-image: url("/world/cat/mushi.png"); }
.ob-mini-grid > .card.c-um::before { content: "うみ"; background-image: url("/world/cat/umi.png"); }
.ob-mini-grid > .card.c-sh::before { content: "しょくぶつ"; background-image: url("/world/cat/shokubutsu.png"); }
.ob-mini-grid > .card.c-ku::before { content: "くだもの"; background-image: url("/world/cat/kudamono.png"); }
.ob-mini-grid > .card.c-ya::before { content: "やさい"; background-image: url("/world/cat/yasai.png"); }
.ob-mini-grid > .card.c-ta::before { content: "たべもの"; background-image: url("/world/cat/tabemono.png"); }
.ob-mini-grid > .card.c-so::before { content: "そら"; background-image: url("/world/cat/sora.png"); }
.ob-mini-grid > .card.c-no::before { content: "のりもの"; background-image: url("/world/cat/norimono.png"); }
.ob-mini-grid > .card.c-ko::before { content: "こうえん"; background-image: url("/world/cat/kouen.png"); }
.ob-mini-grid > .card.c-om::before { content: "おもちゃ"; background-image: url("/world/cat/omocha.png"); }
.ob-mini-grid > .card.c-ni::before { content: "にちようひん"; background-image: url("/world/cat/nichiyou.png"); }
.ob-mini-grid > .card.c-ma::before { content: "まち"; background-image: url("/world/cat/machi.png"); }
.ob-mini-grid > .card.c-mi::before { content: "おみせ"; background-image: url("/world/cat/omise.png"); }
.ob-mini-grid > .card.c-hi::before { content: "ひと"; background-image: url("/world/cat/hito.png"); }
.ob-mini-grid > .card.c-si::before { content: "しぜん"; background-image: url("/world/cat/shizen.png"); }
.ob-mini-grid > .card.c-sn::before { content: "そのた"; background-image: url("/world/cat/sonota.png"); }

/* ---------- オンボの段を上下のまん中に置く ---------- */
/* .ob-body は上づめだったので、短い段は上に貼りついて下に画面の半分以上の
   空白ができていた（社長指摘: 選択肢とボタンがめっちゃ上の方）。
   justify-content:center は中身がはみ出したとき上が切れるので、
   子に margin:auto を置く（あまりがあれば中央、無ければ上から普通に流れる） */
.ob-overlay .ob-body { display: flex; flex-direction: column; }
.ob-overlay .ob-body > .ob-step { margin: auto; width: 100%; }

/* 「○○の おもいでずかんを つくっているよ…」が空の上で読めなかった */
#ob-born-loading > .ob-sub { color: var(--on-sky) !important; text-shadow: var(--sky-shadow) !important; }


/* 実演をとばした時の「とじたままの1さつ」。中が空でページの高さが潰れるので、
   本ぶんの高さを持たせる（持たせないと表紙がタイトルに被る） */
.ob-mini-stage.is-sealed .ob-mini-page { min-height: 262px; }
.ob-mini-stage.is-sealed .ob-mini-viewport { min-height: 190px; }
/* とじたままの1さつは表紙をゆったり見せるので、奥付も出す。
   「はっこうぶすう せかいに 1さつ」は うまれた瞬間にいちばん効く一行 */
.is-born-stage.is-sealed .ob-future-colophon { display: block; }

/* 全画面の覆いの中の空。#world（z:-1）は覆いの裏なので見えない */
.sky-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ob-overlay > .ob-head, .ob-overlay > .ob-body,
.consent-overlay > * { position: relative; z-index: 1; }

/* 小口（ページの厚み）が表紙の丸角の外まで伸びていて、
   上端と下端で「紙が切れている」ように見えていた（社長指摘）。
   表紙の角のまるみ（18px）の内側で終わらせる */
.ob-future-cover::after { top: 21px; bottom: 21px; border-radius: 0 5px 5px 0; }
/* 覆いの中の太陽も、文字の邪魔をしない大きさに */
.sky-deco .sun { width: 62px; height: 62px; opacity: .82; right: -10px; }

/* ================================================================
   カードの種を1つにする（カード詳細＝ゲット画面）
   社長指摘: ①開くとき「びくっ」として、つながって見えない
             ②開いたカードが新しいトンマナに合っていない
             ③ゲット画面のカードとも統一していい
   ================================================================ */

/* ① つながらない原因は、もとのタイルが出しっぱなしだったこと。
   .is-peeking の見た目は .zukan-card/.card/.mini にしか無く、
   ずかんホームを時系列タイルにしたとき、タイルぶんを書き忘れていた。
   飛んでいくカードの下に、同じ写真のタイルがそのまま残っていた */
.tl-grid > .tile { transition: transform .2s cubic-bezier(.34, 1.5, .5, 1), opacity .18s ease; }
.tl-grid > .tile.is-peeking { transform: scale(.97); opacity: .22; }
/* 幕の出をカードの飛びと同じ長さに（.18s と .22s でずれていた） */
.card-peek.is-open::before { animation-duration: .24s !important; }

/* ② 幕は空の墨。旧パレットの茶（rgba(74,56,26,.46)）だと、
   青い空をぼかした上に茶色がかぶって濁って見える */
.card-peek::before { background: rgba(14, 27, 55, .55) !important; }

/* ③ カードの種は1つ。押し出し影（0 8px 0 色）は tokens.md で禁止しているので、
   両方とも やわらかい影にする */
.card-peek-card, #get-card {
  background: var(--card) !important;
  border-radius: 22px !important;
  box-shadow: var(--sh-lift) !important;
  padding: 10px 10px 4px !important;
}
.card-peek-card .mat, #get-card .mat,
.card-peek-card .mat .inner, #get-card .mat .inner,
.card-peek-card .mat img, #get-card .mat img { border-radius: 14px; }

/* 「ずかんが うまれたよ！」は空の上なのに墨色だった。
   空の上の文字は .ob-step > .ob-title と直接の子で当てているが、
   この段だけ #ob-born-main を1枚はさんでいて漏れていた（全13段を機械で洗って1件） */
#ob-born-main > .ob-title { color: var(--on-sky); text-shadow: var(--sky-shadow); }
#ob-born-main > .ob-sub, #ob-born-main > .ob-first-card { color: var(--on-sky-sub); text-shadow: var(--sky-shadow); }

/* ---------- ボタンの種類を3つに整理する ---------- */
/* 社長の問い「なんで btn-ghost があるんだ？そもそもなんで分けてるんだろう」。
   調べたら、ghost には**性格の違う2つ**が混ざっていた:
     ①主ボタンの隣に置く「そうしない方の道」（撮り直す／あとで／とじる／やめる）
       …これは正当。主が1つあって、その隣に置くから薄くていい
     ②おうちのかた面の縦並びリストに流用したもの
       …隣に主が無いので「薄い」に意味が無く、ただの見出しに見えていた。
         しかも「いま ほぞんする」と「ぜんぶ けす」が同じ見た目で並んでいた

   ②をやめて、種類を3つにした（HTML側のクラスを付け替え済み）:
     btn-sub    = 面のあるボタン（ふつうの操作）
     btn-ghost  = ①だけ。主の隣の「進まない方」
     btn-danger = 消す系。おもいでを失う経路なので、ふつうの操作と並べない（原則8） */
.btn-danger {
  color: #A8412A !important;
  background: rgba(196, 86, 46, .07) !important;
  box-shadow: inset 0 0 0 1.5px rgba(168, 65, 42, .34) !important;
}
/* おうちのかた面に残る ghost は「とじる」だけ。それでも押せると分かるようにする */
#stats-sheet-body .btn-ghost {
  background: rgba(255, 253, 247, .34);
  box-shadow: inset 0 0 0 1.5px rgba(110, 97, 82, .32);
  color: var(--ink);
}

/* ---------- ようこそ・案B: 風船から水が飛び出す感じ（弾道） ----------
   CSSは足し算ができないので、放物線を3枚に分解して重ねる。
   .drop=横の初速（等速）／.dy=縦の初速（等速・上向き）／.dg=重力。
   重力の効き方に t² のカーブ（cubic-bezier(.333,0,.667,.333)）を当てると、
   そのまま自由落下になる。3枚あわせて x=vx·t, y=vy·t+g·t² ＝ ほんものの弾道 */
.ob-cascade .drop { position: absolute; will-change: transform;
  animation: ob-vx var(--dw) linear var(--dlw) infinite; }
.ob-cascade .dy { display: block; width: 100%; height: 100%;
  animation: ob-vy var(--dw) linear var(--dlw) infinite; }
.ob-cascade .dg { display: block; width: 100%; height: 100%;
  animation: ob-gg var(--dw) cubic-bezier(.333, 0, .667, .333) var(--dlw) infinite; }
.ob-cascade .drop img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 20, 60, .22));
  animation: ob-spin var(--dw) linear var(--dlw) infinite; }
@keyframes ob-vx { from { transform: translateX(0); } to { transform: translateX(var(--vx)); } }
@keyframes ob-vy { from { transform: translateY(0); } to { transform: translateY(var(--vy)); } }
@keyframes ob-gg { from { transform: translateY(0); } to { transform: translateY(var(--g)); } }
/* 出るところは束の裏なので、透けなくていい。消えるのは落ちきってから */
@keyframes ob-spin {
  0%   { transform: rotate(0deg) scale(.5); }
  16%  { transform: rotate(calc(var(--r) * .16)) scale(1); }
  86%  { opacity: 1; }
  100% { transform: rotate(var(--r)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-cascade .drop, .ob-cascade .dy, .ob-cascade .dg, .ob-cascade .drop img { animation: none; }
}