/* きょうりゅう ずかん(せかいの どうわ の style.css の写し。質感の決まりは .claude/rules/yume-no-toshokan/design/shitsukan.md)。
   2026-10-11: 色のトークンだけ恐竜向けに(夜の森と土・琥珀の灯り)。明るさは せかいの どうわ と同じ帯に置く(本文ページ ≤ 0.12) */
:root{
  --night-0:#121813; --night-1:#1a211c; --night-2:#252f28; --forest:#22382a;
  --wood:#6e5434; --wood-dark:#3d2e1c; --wood-light:#8f6f47;
  --lamp:#f0bf72;
  --paper:#d8c9ad; --paper-card:#988b73; --ink:#2a211c; --text-night:#e6d9bf; --text-dim:#a79c86;
  --pc-rose:#c98a8a; --pc-sky:#8aa6c9; --pc-leaf:#8fae8a; --pc-gold:#d8b870; --pc-lav:#a99bc4;
  /* 彩度を落とした差し色(2択の「本棚へ」の絵。2枚を同格に見せる ← saigo.md 3) */
  --pc-rose-m:color-mix(in srgb,var(--pc-rose) 50%,var(--text-dim)); --pc-sky-m:color-mix(in srgb,var(--pc-sky) 50%,var(--text-dim));
  --pc-leaf-m:color-mix(in srgb,var(--pc-leaf) 50%,var(--text-dim)); --pc-gold-m:color-mix(in srgb,var(--pc-gold) 50%,var(--text-dim));
  --pc-lav-m:color-mix(in srgb,var(--pc-lav) 50%,var(--text-dim));
  --focus:#d8b870;
  --moon-dim:#6b6384;
  /* 舞台の幕(butai.md 3.3。幕と上の飾り幕だけ。ほかの面に使わない) */
  --curtain:#4f3a22; --curtain-fold:#3b2b18; --curtain-hi:#634a2d;
  --font-book:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-ui:ui-rounded,"Hiragino Maru Gothic ProN","Segoe UI",system-ui,sans-serif;
  /* 紙のざらつき(1枚のタイル。画面全体に filter を掛けない) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.75 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.75 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night-1);color:var(--text-night);font-family:var(--font-ui);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;overflow:hidden}
.screen[hidden]{display:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation}
button:focus{outline:none}
button:focus-visible .face{outline:3px solid var(--focus);outline-offset:3px}
img{-webkit-user-drag:none}

/* ---- 押せる物の文法: 丸 + 縁 + 影 2px(押せない物に付けない) ---- */
.round{width:88px;height:88px;display:grid;place-items:center;flex:0 0 auto}
.round[hidden]{display:none}
.round .face{position:relative;width:56px;height:56px;border-radius:50%;background:var(--night-2);border:2px solid var(--text-dim);
  box-shadow:0 2px 0 var(--wood-dark);display:grid;place-items:center;transition:transform .1s}
.round.big{width:96px;height:96px}
.round.big .face{width:72px;height:72px}
.round.back .face{width:64px;height:64px;background:var(--wood-dark)}
.round.is-down .face{transform:scale(.94)}
.ico{width:62%;height:62%;display:block}
.round.back .ico{width:74%;height:74%}
/* 長押しの輪(1000ms で時計回りに満ちる。離したら 200ms で縮んで消える) */
.hold-ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:var(--pc-gold);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.is-holding .hold-ring circle{animation:hold-fill var(--hold-ms,1000ms) linear forwards}
.is-letgo .hold-ring{transform:rotate(-90deg) scale(.6);transition:transform .2s}
@keyframes hold-fill{to{stroke-dashoffset:0}}

/* 色鉛筆の輪(押せない所の一次応答) */
.ripple{position:absolute;width:48px;height:48px;pointer-events:none;overflow:visible;z-index:50}
.ripple circle{fill:none;stroke:var(--text-dim);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ripple-draw .25s linear forwards}
.veil .ripple circle{stroke:#3a3f5a}
@keyframes ripple-draw{to{stroke-dashoffset:0}}

/* ================= 恐竜の年表(トップ = 本を選ぶ画面。.claude/rules/kyoryu-zukan/design/nenpyo.md) ================= */
/* 夜の がけ の だんめん。上(横では右上)ほど新しい。縦 = 5 段を上下に積む / 横 = 左下から右上へ階段。段の数は --n(nenpyo.json の項目数)。
   押せる文法(明るい縁 2px・下の影 4px)は できている本の窓だけ。地層・ふだ・ほりかけの あなには付けない */
.nenpyo{position:absolute;inset:0;isolation:isolate;overflow:hidden;display:grid;
  grid-template-rows:calc(env(safe-area-inset-top) + var(--sky)) 8px minmax(0,1fr);
  background:linear-gradient(180deg,var(--night-0),var(--night-1));
  --sky:64px;--fuda-t:14px;--fuda-s:12px;--fuda-h:42px}
.sky-art{position:absolute;z-index:-1;left:0;top:env(safe-area-inset-top);width:100%;height:120px;pointer-events:none}
/* 縦: 右上の ことばの口(52px)の分を両側に空けて中央に置く(長い言語の題名が口の下へ潜らない)。入らなければ 2 行に折る */
.lib-title{grid-row:1;align-self:end;justify-self:center;margin:0 calc(env(safe-area-inset-right) + 58px) 10px calc(env(safe-area-inset-left) + 58px);
  font-size:24px;font-weight:600;line-height:1.1;color:var(--text-night);letter-spacing:.04em;text-align:center;text-wrap:balance;pointer-events:none}
/* いまの じめん(厚さ 8px。上の縁に草の小さな影 = 現代なので草はあってよい) */
.ground-now{grid-row:2;position:relative;background:#1f1a14}
.ground-now::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,#232b1f 5px 7px,transparent 7px 12px,#232b1f 12px 13px,transparent 13px 19px)}
.strata{grid-row:3;min-height:0;display:grid;grid-template-rows:repeat(var(--n,5),minmax(0,1fr))}
/* 段の高さは重みで割る(できている本 2・ほりかけの あな 1 ← toshokan.js render が grid-template-rows を書く。5 冊そろえば等分) */
.era{position:relative;grid-row:calc(var(--n) - var(--i));display:flex;min-height:0;background:var(--rock);
  padding:4px calc(env(safe-area-inset-right) + 10px) 4px calc(env(safe-area-inset-left) + 10px)}
.era:first-child{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
.rock-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.era > .book,.era > .dig{position:relative}
/* 地層の色 = その地層の本物の岩の色を夜に沈めたもの(nenpyo.md 3.1) */
[data-rock=hell-creek]{--rock:#2e2a24}
[data-rock=djadokhta]{--rock:#4a2d1e}
[data-rock=yixian]{--rock:#363329}
[data-rock=morrison]{--rock:#3a2624}
[data-rock=ischigualasto]{--rock:#3a2f30}

/* まど(できている本 = 押せる)。窓とふだをまとめた 1 段まるごとが的 */
.book{display:block;width:100%;height:100%;min-height:0}
.book .face{display:flex;flex-direction:column;width:100%;height:100%;transition:transform .12s ease-out;will-change:transform}
.mado{position:relative;flex:1 1 0;min-height:0;display:block;border:2px solid var(--paper);border-radius:6px;
  box-shadow:0 4px 0 var(--wood-dark);overflow:hidden;background:#14110e}
.mado-cv{display:block;width:100%;height:100%;opacity:0;transition:opacity .2s}
.mado-cv.lit{opacity:1}
/* ふだ(窓の下の岩に刻んだ名札。字は保護者向け)。折り返すのは分かち書きの空白だけ・省略記号で切らない */
.fuda{flex:0 0 var(--fuda-h);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7px 2px 0;
  line-height:1.25;text-align:center;word-break:keep-all;overflow-wrap:normal}
.book-title{display:block;font-size:var(--fuda-t);color:var(--text-night)}
/* 中国語は語の間に空白が無いので、字の間で折ってよい(keep-all のままだと低い横で題名が段の幅を越えた) */
.fuda:lang(zh),.book-title:lang(zh){word-break:normal}
.fuda-when{display:block;font-size:var(--fuda-s);color:var(--text-dim)}
.book.is-down .face{transform:translateY(-4px) scale(1.03)}
.book.closing .face{animation:book-close .4s ease-out}
@keyframes book-close{from{transform:scale(1.06)}to{transform:none}}
/* 開くときの写し(地層の箱の外。窓の中央から表紙が立ち上がり、画面の中央へ大きくなる ← toshokan.js openBook) */
.book-fly{position:fixed;z-index:40;margin:0;pointer-events:none}
.book-fly .face{display:block;width:100%;height:100%;opacity:0;transform-origin:50% 50%;transition:transform .7s ease-in-out,opacity .15s linear}
.book-fly.opening .face{opacity:1}
.book-fly .cover{display:block;width:100%;height:100%;border:2px solid var(--text-dim);border-radius:3px 7px 7px 3px;overflow:hidden;
  box-shadow:0 4px 0 var(--wood-dark);background:#8a7860}
.book-fly .cover img{display:block;width:100%;height:100%;object-fit:cover}

/* ほりかけの あな(まだ無い本 = 押せない)。縁も影も無く、内側の影でへこんで見える。恐竜は描かない(骨は種を言わない形)。
   穴は段いっぱいにしない(まわりに崖の岩が見える)。ふだの帯は本と同じ高さ(--fuda-h)= 穴の高さ ≤ 窓の高さ(nenpyo.md 3.3) */
.dig{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.ana{position:relative;flex:1 1 0;min-height:0;margin:3px 16px 0;display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 40px 4px 12px;
  background:#14110e;border-radius:18px 10px 22px 12px / 14px 20px 10px 18px;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.85),inset 0 -2px 4px rgba(0,0,0,.5)}
.bones{display:block;height:72%;max-height:60px;width:auto;max-width:42%;flex:0 1 auto;min-width:0}
.dig-msg{font-size:13px;line-height:1.3;color:var(--text-dim);text-align:center;word-break:keep-all}
.tools{position:absolute;right:8px;bottom:3px;height:76%;max-height:56px;width:auto}
.sand{position:absolute;left:50%;top:2px;width:0;height:0}
.sand i{position:absolute;top:0;width:6px;height:6px;border-radius:50%;background:#6a5c48;opacity:0}
.sand i:nth-child(1){left:-18px}.sand i:nth-child(2){left:-3px}.sand i:nth-child(3){left:12px}
.dig.spill .sand i{animation:sand .6s ease-in}
@keyframes sand{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translateY(22px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 低い縦(375x667・320x568): 題名と年代を 1 行ずつ 12px */
@media (orientation:portrait) and (max-height:740px){
  .nenpyo{--sky:56px;--fuda-t:12px;--fuda-h:36px}
  .lib-title{font-size:20px;margin-bottom:8px}
  .fuda{padding-top:6px}
  .ana{gap:10px}
}
/* 横: 左下(いちばん古い)から右上(いちばん新しい)へ階段。1 段ごとに --rise 上がる。窓の高さはどの段も同じ */
@media (orientation:landscape){
  .nenpyo{display:block;--rise:26px;--top:calc(env(safe-area-inset-top) + 60px);--fuda-h:60px}
  .lib-title{position:absolute;left:calc(env(safe-area-inset-left) + 16px);top:calc(env(safe-area-inset-top) + 12px);margin:0}
  .ground-now{display:none}
  .strata{position:absolute;top:0;bottom:0;left:env(safe-area-inset-left);right:env(safe-area-inset-right);display:block}
  .era{position:absolute;bottom:0;left:calc(100% * var(--x0));width:calc(100% * var(--wf));
    height:calc(100% - var(--top) - (var(--n) - 1 - var(--i)) * var(--rise) + 8px);
    padding:8px 4px calc(env(safe-area-inset-bottom) + 8px + var(--i) * var(--rise));
    background:linear-gradient(#1f1a14 0 5px,var(--rock) 5px)}
  .era:first-child{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
  .fuda-era,.fuda-age{display:block}
  .fuda-sep{display:none}
  .ana{flex-direction:column;gap:6px;padding:8px 6px 8px;margin:12px 8px 0}
  .dig-msg{order:-1}
  .bones{width:72%;max-width:72%;height:auto;max-height:40%}
  .tools{height:28%;right:4px}
}
@media (orientation:landscape) and (max-height:340px){
  .nenpyo{--rise:16px;--fuda-t:11px;--fuda-s:11px;--fuda-h:64px}
  .lib-title{font-size:20px;top:calc(env(safe-area-inset-top) + 10px)}
  .fuda{padding-top:6px}
  .dig-msg{font-size:12px}
}

/* ことば(本棚の右上。長押し 1 秒で一覧 ← design/toshokan.md 3.4)。絵本・2択・おやすみには置かない */
.lang-btn{position:absolute;z-index:4;top:calc(env(safe-area-inset-top) + 2px);right:calc(env(safe-area-inset-right) + 2px);width:52px;height:52px}
.lang-btn .face{width:38px;height:38px;background:color-mix(in srgb,var(--night-2) 70%,transparent)}
.lang-btn .ico{width:76%;height:76%}
/* 入口ページへ戻る口(年表の左上の隅。ことばと左右で対 ← .claude/rules/site-home.md・nenpyo.md)。ことばと同じ控えめな丸(光らない・動かない) */
.site-home{position:absolute;z-index:4;top:calc(env(safe-area-inset-top) + 2px);left:calc(env(safe-area-inset-left) + 2px);width:52px;height:52px}
.site-home .face{width:38px;height:38px;background:color-mix(in srgb,var(--night-2) 70%,transparent)}
.site-home .ico{width:72%;height:72%}
/* 横は題名が左上にあるので、口のぶん右へ寄せる(縦は題名の左右に 58px の空きがもうある) */
@media (orientation:landscape){ .nenpyo:has(> #site-home) .lib-title{left:calc(env(safe-area-inset-left) + 62px)} }
/* 一覧: 本棚の上に重ねる(開いている間だけ DOM にある)。下地を押しても閉じる。札は割れない1語でも枠から出ない(minmax(0,1fr) + anywhere)
   2026-10-02 に14言語(+ とじる で15枚)。段の高さは中身なり(grid-auto-rows:minmax(62px,auto)。下限は名前 + 添え名の高さより少し上 = 普通の段はどれも同じ高さ。1fr だと Bahasa Indonesia の2行に全段が揃って
   360x640 でも入らない)。入らない画面(320x480・横向き)は safe center + overflow-y:auto で送れば とじる まで届く(実測 2026-10-02) */
.lang-menu{position:absolute;inset:0;z-index:30;display:grid;place-items:safe center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  background:color-mix(in srgb,var(--night-0) 90%,transparent)}
.lang-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(62px,auto);gap:12px;width:min(100%,380px)}
.lang-item,.lang-close{position:relative;display:flex;align-items:center;min-width:0;min-height:60px;padding:8px 34px 8px 14px;border-radius:12px;
  background:var(--night-2);border:2px solid var(--text-dim);box-shadow:0 2px 0 var(--wood-dark);color:var(--text-night);font-size:18px;line-height:1.25;text-align:left;overflow-wrap:anywhere;transition:transform .1s}
.lang-item.is-down,.lang-close.is-down{transform:scale(.96)}
.lang-item:focus-visible,.lang-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lang-item{flex-direction:column;align-items:flex-start;justify-content:center}
.lang-name{min-width:0;max-width:100%}
.lang-sub{min-width:0;max-width:100%;margin-top:2px;font-size:13px;line-height:1.2;color:var(--text-dim)}
.lang-item.on{border-color:var(--pc-gold);box-shadow:inset 0 0 0 2px var(--pc-gold),0 2px 0 var(--wood-dark)}
.lang-check{position:absolute;right:8px;top:50%;width:22px;height:22px;margin-top:-11px;display:none}
.lang-check path{fill:none;stroke:var(--pc-gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lang-item.on .lang-check{display:block}
.lang-close{justify-content:center;padding:8px 14px;background:var(--wood-dark);border-color:var(--wood-light)}
@media (orientation:landscape){ .lang-list{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,560px)} }
@media (orientation:landscape) and (max-height:340px){
  .lang-menu{padding-top:calc(env(safe-area-inset-top) + 10px);padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
  .lang-list{gap:8px;grid-auto-rows:minmax(58px,auto)}
  .lang-item,.lang-close{min-height:52px;font-size:16px}
}

/* ================= 絵本 ================= */
/* 2026-09-30 利用者: スマホの縦が主。舞台を画面いっぱいに使い、操作は左上の「…」にたたむ(ehon.md 3)。
   縦 = 上に舞台(幅いっぱい・窓は 3:4〜4:3)、下に文の札。横 = 左に舞台(高さいっぱい)、右に文の札。
   --vw / --vh = safe-area を除いた画面。--pil / --val / --apr = 柱・上の飾り幕・床の縁。窓の外寸に足して舞台の箱にする */
.ehon{position:absolute;inset:0;display:grid;background:var(--grain),var(--night-2);
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  --vw:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --vh:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  --pil:8px;--val:18px;--apr:10px;--frame-w:calc(2 * var(--pil));--frame-h:calc(var(--val) + var(--apr));
  --textroom:236px;   /* 縦で文の札に残す高さ(24px・行間 1.5 の 5 行 + 余白) */
  --text:24px}
@supports (height:100dvh){ .ehon{--vh:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))} }
/* 縦: 幅いっぱい。高さは 窓 3:4(いちばん縦長)まで伸ばし、文の札の分は残す(窓が 4:3 より横長にはならない) */
.stage{grid-row:1;grid-column:1;position:relative;width:var(--vw);aspect-ratio:4/3}
.stage.is-stage{aspect-ratio:auto;width:var(--vw);
  height:max(calc((var(--vw) - var(--frame-w)) * .75 + var(--frame-h)),
    min(calc((var(--vw) - var(--frame-w)) * 4 / 3 + var(--frame-h)), calc(var(--vh) - var(--textroom))))}
.page{position:absolute;inset:0;background:var(--paper);border:6px solid var(--paper);border-radius:4px;box-shadow:0 3px 0 var(--wood-dark);overflow:hidden}
.page img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.78) sepia(.1)}
.page.is-cover{background:var(--night-1)}
.page.is-cover img{object-fit:contain}
.page.outgoing{z-index:2;pointer-events:none;transform-origin:0 100%;transition:transform .9s ease-in-out;will-change:transform}
.page.outgoing.go{transform:translateX(-112%) rotate(-3deg)}
/* ---- 舞台(butai.md 3.3)。枠と幕は静止した SVG、窓の中は canvas 1枚 ---- */
.st-win{position:absolute;left:var(--pil);right:var(--pil);top:var(--val);bottom:var(--apr);overflow:hidden;background:var(--night-0)}
.stage-canvas{display:block;width:100%;height:100%;image-rendering:auto}
.st-cur{position:absolute;top:0;bottom:0;width:calc(50% + 1px);will-change:transform;
  transition:transform var(--cur-ms,1100ms) var(--cur-ease,ease-out)}
.st-cur svg{display:block;width:100%;height:100%}
.st-cur.l{left:0;transform:translateX(-90%)}
.st-cur.r{right:0;transform:translateX(90%)}
.st-win.closed .st-cur{transform:none}
.st-pil,.st-val,.st-apr{position:absolute;display:block;pointer-events:none}
.st-pil{top:0;bottom:0;width:var(--pil);height:100%}
.st-pil.l{left:0}
.st-pil.r{right:0}
.st-val{left:0;top:0;width:100%;height:calc(var(--val) + 6px)}
.st-apr{left:0;bottom:0;width:100%;height:var(--apr)}
/* ---- なまえふだ(namaefuda.md): 恐竜しょうかいのページだけ、窓の下の縁の中央に名前。博物館の展示の足もとの札。
   押せる物の文法(縁 2px・下の影)を使わない。出る 400ms・消える 250ms(不透明度と transform だけ)。読まない・押せない ---- */
.namaefuda{position:absolute;z-index:3;left:50%;bottom:calc(var(--apr) + 6px);transform:translate(-50%,6px);opacity:0;
  pointer-events:none;padding:4px 23px;border-radius:2px;white-space:nowrap;
  background:color-mix(in srgb,var(--night-0) 84%,transparent);border-top:1px solid var(--pc-gold);border-bottom:1px solid var(--pc-gold);
  transition:opacity .25s ease-in,transform .25s ease-in}
.namaefuda[hidden]{display:none}
.namaefuda::before,.namaefuda::after{content:"";position:absolute;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--pc-gold)}
.namaefuda::before{left:8px}
.namaefuda::after{right:8px}
.namaefuda.on{opacity:1;transform:translate(-50%,0);transition:opacity .4s ease-out,transform .4s ease-out}
.nf-name{display:block;font-family:var(--font-book);font-weight:700;font-size:26px;line-height:1.2;letter-spacing:.06em;color:var(--text-night)}
@media (max-width:359px){ .nf-name{font-size:22px} }
.text-card{grid-row:2;grid-column:1;align-self:center;width:calc(100% - 24px);max-height:calc(100% - 24px);margin:12px 0;overflow:hidden;
  background:var(--grain-ink),var(--paper-card);color:var(--ink);border-radius:4px;padding:12px 18px;box-shadow:0 2px 0 var(--wood-dark)}
.text{margin:0;font-family:var(--font-book);font-size:var(--text);line-height:1.5;overflow-wrap:anywhere}
/* ja(分かち書き)と ko は語の切れ目で行を折る(文節の途中で折らない)。
   ja は行頭禁則を strict に。ただし長いカタカナの語が札の幅を超えて anywhere で割れるときは strict が効かないので、
   句読点を前の 1 字と nowrap で包む(ehon.js putText ← 横 844x390 の p02「。」が行頭に来た) */
.text:lang(ja),.text:lang(ko){word-break:keep-all}
.text:lang(ja){line-break:strict}
.text .nb{white-space:nowrap}   /* 句読点と前の 1 字(ehon.js putText) */
.origin{margin:6px 0 0;font-size:13px;color:var(--ink)}
.origin:empty{display:none}

/* ---- たたんだ操作: 左上の「…」の丸 → 押すと帯が開く(舞台の上に重ねる。舞台の大きさは変えない) ---- */
.hud{position:absolute;z-index:6;left:calc(env(safe-area-inset-left) + 2px);top:calc(env(safe-area-inset-top) + 2px);
  display:flex;align-items:flex-start;gap:2px}
.round.mini{width:52px;height:52px}
.round.mini .face{width:38px;height:38px;background:color-mix(in srgb,var(--night-2) 70%,transparent)}
.hud:not(.open) .menu .face{opacity:.7}
.tray{display:flex;flex-direction:column;align-items:center;padding:0 6px 6px;border-radius:0 0 16px 16px;
  background:color-mix(in srgb,var(--night-0) 86%,transparent);box-shadow:0 2px 0 var(--wood-dark)}
.tray[hidden]{display:none}
.controls{display:flex;align-items:center;gap:0}
.controls .round{width:64px;height:64px}
.controls .round .face{width:50px;height:50px}
.controls .round.back .face{width:52px;height:52px}
.controls .pause .face{width:56px;height:56px;border-color:var(--text-night)}
.pause .i-play{display:none}
.pause.is-paused .i-play{display:block}
.pause.is-paused .i-pause{display:none}
.pause .i-play,.pause .i-pause{width:62%;height:62%}
.pause .i-play .ico,.pause .i-pause .ico{width:100%;height:100%}
/* ---- 横向き(全画面)の札: 舞台の右上にいつも出す。絵(縦 → 横に回る端末)+ 短い字で「横で見る」と分かるように
   (2026-09-30 利用者: 帯の中の 4 隅のかぎの絵は分かりにくかった)。押せる物の文法(縁 + 影)は守る ---- */
.rotate{position:absolute;z-index:6;top:calc(var(--val) + 6px);right:calc(var(--pil) + 6px);min-height:52px;display:grid;place-items:center}
.rotate[hidden]{display:none}
@media (orientation:portrait){ .rotate.under-tray{visibility:hidden} }   /* 縦だけ帯が札へ重なる */
.rotate .face{display:flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 6px;border-radius:20px;
  background:color-mix(in srgb,var(--night-2) 78%,transparent);border:2px solid var(--text-dim);box-shadow:0 2px 0 var(--wood-dark);transition:transform .1s}
.rotate.is-down .face{transform:scale(.94)}
.rotate .i-full,.rotate .i-exit{width:30px;height:30px;display:block}
.rotate .ico{width:100%;height:100%}
.rot-label{font-size:14px;line-height:1;color:var(--text-night);white-space:nowrap}
.rotate .i-exit{display:none}
.rotate.is-full .i-exit{display:block}
.rotate.is-full .i-full,.rotate.is-full .rot-label{display:none}
.rotate.is-full .face{padding:0 4px}
/* 端では矢印を出さないが、場所は残す(一時停止がずれない)。全画面の無い端末は場所ごと消す */
.controls .round[hidden]{display:grid;visibility:hidden}
.dots{display:flex;gap:8px;padding:2px 0 2px}
.dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--text-dim)}
.dots i.read{background:var(--text-dim)}
.dots i.now{background:var(--pc-gold);border-color:var(--pc-gold)}

/* 横: 左に舞台(高さいっぱい)、右に細い文の列。横にするのは舞台を大きく見るため(2026-09-30 利用者)なので、
   文は小さく細い列に寄せ、残りを全部舞台へ回す。窓は 16:9 まで横長になれて、4:3 より横長の分は上の空を切って拡大する(stage.js) */
@media (orientation:landscape){
  .ehon{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);justify-items:stretch;align-items:center;
    --text:17px;--textcol:clamp(170px,22vw,240px)}
  .stage{grid-column:1;grid-row:1;width:auto;height:var(--vh)}
  .stage.is-stage{height:var(--vh);
    width:min(calc((var(--vh) - var(--frame-h)) * 16 / 9 + var(--frame-w)), calc(var(--vw) - var(--textcol)))}
  .text-card{grid-column:2;grid-row:1;width:auto;max-width:320px;max-height:calc(100% - 16px);margin:8px 8px 8px 10px;padding:10px 12px;align-self:center}
}
@media (orientation:landscape) and (max-height:340px){
  .ehon{--pil:6px;--val:12px;--apr:8px;--text:15px}
  .nf-name{font-size:20px}
  .namaefuda{padding:3px 20px}
  .text-card{padding:8px 10px}
  .controls .round{width:56px;height:56px}
  .controls .round .face,.controls .round.back .face{width:44px;height:44px}
  .controls .pause .face{width:48px;height:48px}
}

/* ================= 最後の2択 ================= */
.saigo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:var(--grain),var(--night-2);--cw:min(160px,calc((100vw - 48px) / 2));--ch:180px;--art-w:min(351px,calc(100vw - 24px))}
/* 縦のカード幅は画面幅から決める(2枚 + 間 24 + 両端 12。160 固定だと 320 幅で左が -12 に出た ← #1573) */
.last-art{width:calc(var(--art-w) * .6);aspect-ratio:4/3;background:var(--paper);border:4px solid var(--paper);border-radius:4px;overflow:hidden;box-shadow:0 3px 0 var(--wood-dark)}
.last-art img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.78) sepia(.1)}
.saigo.in .last-art{animation:shrink-up 1.5s ease-in-out}
.last-art.is-stage{aspect-ratio:auto;width:auto;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.last-art .stage{position:relative;--sw:calc(var(--art-w) * .6);--pil:6px;--val:12px;--apr:8px;
  aspect-ratio:auto;width:var(--sw);height:calc((var(--sw) - 2 * var(--pil)) * .75 + var(--val) + var(--apr))}
@keyframes shrink-up{from{transform:translateY(20%) scale(1.66)}to{transform:none}}
.cards{display:flex;gap:24px}
.saigo.in .cards{animation:rise .6s ease-out}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
.card{width:var(--cw);height:var(--ch)}
.card .face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;border-radius:14px;
  box-shadow:0 3px 0 rgba(0,0,0,.4);transition:transform .1s}
.card[data-choice=oyasumi] .face{background:var(--night-0);border:3px solid var(--pc-lav)}
.card[data-choice=shelf] .face{background:var(--wood-dark);border:3px solid var(--wood-light)}
.card.is-down .face{transform:scale(.95)}
/* 絵は縮んでよい(低い横でラベルが2行になると、縮まない絵が上下へ 2px 押し出した ← #1578) */
.card-art{width:72%;height:52%;display:grid;place-items:center;min-height:0;min-width:0}
.card-art .ico,.card-art svg{width:100%;height:100%;min-height:0;min-width:0}
/* 2枚を同格に: 本棚カードの差し色は彩度を落とす(filter を使わず、トークンを灰みの色に差し替える) */
.card[data-choice=shelf] .card-art{--pc-rose:var(--pc-rose-m);--pc-sky:var(--pc-sky-m);--pc-leaf:var(--pc-leaf-m);--pc-gold:var(--pc-gold-m);--pc-lav:var(--pc-lav-m)}
.card .label{font-size:16px;color:var(--text-night);text-align:center;padding:0 8px;line-height:1.2}
/* ja は空白で折る(320 幅で「ねむりの おん / がく」と語の途中で折れた ← #1573) */
.card .label:lang(ja){word-break:keep-all}
/* ねむりの おんがく の何分で止まるか(2026-10-02 利用者「30分を数字で明記」) */
/* 本棚のカードにも見えない同じ高さの行を置き、2枚のラベルの高さをそろえる(同格) */
.card .sublabel{display:block;margin-top:-6px;font-size:14px;color:var(--text-dim);text-align:center;padding:0 8px;line-height:1.2}
.card .sublabel.spacer{visibility:hidden}
@media (orientation:landscape){
  .saigo{flex-direction:row;gap:32px;--cw:180px;--ch:160px;--art-w:min(400px,48vw)}
  .cards{gap:32px}
}
@media (orientation:landscape) and (max-height:340px){
  .saigo{--cw:140px;--ch:130px;gap:24px}
  .cards{gap:24px}
}
/* もう1冊の読みきかせの本への口(saigo.md 3.1)。右下の隅に小さく静か(2択より暗い縁・光らない・動かない・出てくる動きも無い)。
   箱は高さ 52px(本棚の ことば・入口への口と同じ大人の口の大きさ)、見えるのは 38px の丸い札 */
.other-book{position:absolute;z-index:4;right:calc(env(safe-area-inset-right) + 2px);bottom:calc(env(safe-area-inset-bottom) + 2px);
  height:52px;max-width:calc(100vw - 16px);padding:0 7px;display:flex;align-items:center;color:var(--text-dim);text-decoration:none;touch-action:manipulation}
.other-book:focus{outline:none}
.other-book:focus-visible .face{outline:3px solid var(--focus);outline-offset:3px}
.other-book .face{display:flex;align-items:center;gap:4px;min-width:0;height:38px;padding:0 12px 0 6px;border-radius:19px;
  background:color-mix(in srgb,var(--night-2) 70%,transparent);border:2px solid color-mix(in srgb,var(--text-dim) 70%,transparent);transition:transform .1s}
.other-book.is-down .face{transform:scale(.94)}
.other-book .ico{width:28px;height:28px;flex:0 0 auto}
.other-label{font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= おやすみ ================= */
.veil{position:absolute;inset:0;background:var(--night-0);transform:translateY(-100%);display:grid;place-items:center}
.veil.down{animation:veil-down 2s linear forwards}
.veil.up{animation:veil-up .6s linear forwards}
@keyframes veil-down{from{transform:translateY(-100%)}to{transform:none}}
@keyframes veil-up{from{transform:none}to{transform:translateY(-100%)}}
.veil .back{position:absolute;left:calc(4px + env(safe-area-inset-left));top:calc(4px + env(safe-area-inset-top))}
.veil .back .face{background:var(--night-0);border-color:#2c3048;box-shadow:none;opacity:.35;transition:opacity 2s linear}
.veil .back.lit .face{opacity:.7;transition:opacity .2s}
.moon-wrap{width:150px;height:150px;pointer-events:none}
/* 月の上に、何分で音が止まるかを1行(数えない・動かない。暗いまま読める --moon-dim) */
.sleep-time{position:absolute;left:16px;right:16px;top:calc(50% - 75px - 44px);margin:0;font-size:16px;line-height:1.3;color:var(--moon-dim);text-align:center;pointer-events:none}
.moon{width:100%;height:100%;display:block}
.moon .crescent{fill:#20243a;stroke:var(--moon-dim);stroke-width:2}
.moon .arc-bg{fill:none;stroke:#1a1e33;stroke-width:3}
.moon .arc{fill:none;stroke:var(--moon-dim);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:0}
.veil .resume{position:absolute;left:50%;top:calc(50% + 100px);transform:translateX(-50%)}
.veil .resume .face{background:var(--night-0);border-color:var(--text-dim)}
@media (orientation:landscape){ .moon-wrap{width:112px;height:112px} .veil .resume{top:calc(50% + 72px)} .sleep-time{top:calc(50% - 56px - 40px);left:96px;right:96px} }

/* ---- 動きを減らす: 置き換わるだけ ---- */
@media (prefers-reduced-motion:reduce){
  .page.outgoing{display:none}
  .st-cur{transition:none}
  .veil.down{animation:none;transform:none}
  .veil.up{animation:none;transform:translateY(-100%)}
  .saigo.in .last-art,.saigo.in .cards,.book.closing .face{animation:none}
  /* 年表: 窓の段の押下の応え(持ち上がり)は残す(反応を消さない)。補間と砂つぶの落ちる動き・表紙の飛ぶ動きを止める */
  .book .face,.mado-cv,.book-fly .face{transition:none}
  .dig.spill .sand i{animation:none}
  /* なまえふだ: 出る・消えるは置き換わるだけ。下からの 6px も付けない */
  .namaefuda,.namaefuda.on{transition:none;transform:translate(-50%,0)}
}
/* ---- テストの早送り(?fast=1) ---- */
html.fast *,html.fast *::before,html.fast *::after{transition-duration:1ms!important;animation-duration:1ms!important}
/* 早送りの上の行は transition-property の既定 all にも 1ms を与えるので、字の大きさまで遷移して測った値が一瞬前の値になる
   (本の字の大きさを測る ehon.js の bookFontSize が 24px のまま決めてしまった。製品の速さでは duration 0 なので起きない)。文の札は遷移させない */
html.fast .text-card,html.fast .text-card *{transition:none!important}