/* ============================================================
   本の「額」 frame.css（2026-09-02・ソウ「Bはやってみて」）
   本のページの中身には触らず、まわりだけを作業台「デモ公開への道」の作法にそろえる。
   - 舞台裏: 黒い星空 → 蝋燭の下の木の机（作業台と同じ4層のグラデーション＋周辺減光）
   - PC: 左に章の札（顔札＋名前＋見たページの星）・本は中央・下にページの点の帯
   - 携帯: 上に今の章の顔札、下にページの点の帯
   - 押した所が必ず応える（金の輪＋押した札の光）・待機中の揺らぎ（蝋燭の光の息づき・金の粒）
   index.html には読み込み2行だけ。動きは frame.js。
   ============================================================ */
:root {
  --fr-wood-deep: #15100c; --fr-wood: #2b1b10; --fr-wood-light: #5a3d24;
  --fr-brass: #c9a154; --fr-brass-light: #efd48a; --fr-brass-dark: #8a6a33;
  --fr-candle: #ffb85c; --fr-paper: #efe3c6;
  --fr-hand: 'Klee One', 'Zen Kurenaido', 'Hiragino Maru Gothic ProN', sans-serif;
  --fr-deco: 'Cinzel Decorative', 'Cormorant Garamond', serif;
  --fr-side: 0px;          /* PCの左の目次の幅（frame.jsが決める） */
  --fr-cx: 50vw;           /* 本の中心x（frame.jsが決める） */
}

/* ---------- 舞台裏＝木の机 ---------- */
.stars-bg {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,184,92,.10), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(140,60,30,.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #1a120c 0%, #15100c 45%, #100b08 100%) !important;
}
.stars-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,.75);
}
/* 星は蝋燭の灯りに浮く埃の粒に（色を暖色へ寄せるだけ・数や動きは本のまま） */
.stars-bg .star { background: #f2d9a8 !important; box-shadow: 0 0 4px rgba(255,210,140,.35); }

/* 本の下に蝋燭色の灯り（4.6秒で息づく） */
.fr-glow {
  position: fixed; left: var(--fr-cx); top: 50%; width: 120vmin; height: 90vmin;
  transform: translate(-50%, -38%); pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side, rgba(255,184,92,.16), rgba(255,184,92,.05) 55%, transparent 72%);
  animation: fr-breath 4.6s ease-in-out infinite;
}
@keyframes fr-breath { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* 金の粒がゆっくり昇る（frame.jsが14粒置く） */
.fr-motes { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.fr-mote {
  position: absolute; bottom: -4vh; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2a8, rgba(255,200,120,.2) 70%, transparent);
  box-shadow: 0 0 6px rgba(255,200,120,.55);
  opacity: 0;
  animation: fr-drift var(--d, 26s) linear infinite; animation-delay: var(--dl, 0s);
}
@keyframes fr-drift {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .7; }
  50%  { transform: translate3d(var(--sx, 18px), -52vh, 0) scale(1); opacity: .5; }
  88%  { opacity: .35; }
  100% { transform: translate3d(calc(var(--sx, 18px) * -.6), -108vh, 0) scale(.7); opacity: 0; }
}

/* ---------- 本の位置（PCは左の目次のぶん右へ） ---------- */
body.fr-pc .book-container { left: var(--fr-cx); }
body.fr-pc .nav-btn.prev { left:  calc(var(--fr-cx) - var(--bkw, 560px) / 2 - 76px); }
body.fr-pc .nav-btn.next { right: calc(100vw - var(--fr-cx) - var(--bkw, 560px) / 2 - 76px); left: auto; }
/* 手の釦も机の物として: 真鍮の縁と木の影 */
body.fr-pc .nav-btn {
  background: radial-gradient(circle at 42% 36%, rgba(90,61,36,.55), rgba(21,16,12,.85));
  border-color: rgba(201,161,84,.42);
  box-shadow: 0 0 0 1px #2a1a0e, 0 8px 18px -8px #000, inset 0 0 0 3px rgba(201,161,84,.08);
}
body.fr-pc .nav-btn:hover { transform: translateY(-2px); }

/* ---------- PC: 左の章の札 ---------- */
.fr-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--fr-side); z-index: 150;
  display: none; flex-direction: column; gap: 0; padding: 74px 12px 18px 16px;
  border-right: 1px solid rgba(201,161,84,.14);
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent);
  overflow-y: auto; scrollbar-width: none;
}
.fr-side::-webkit-scrollbar { display: none; }
body.fr-pc .fr-side { display: flex; }
.fr-brand {
  font-family: var(--fr-deco); font-size: 11px; letter-spacing: .3em; color: var(--fr-brass);
  text-shadow: 0 0 14px rgba(239,212,138,.25); margin: 0 0 4px 4px; white-space: nowrap;
}
.fr-brand small { display: block; font-family: var(--fr-hand); font-size: 12px; letter-spacing: .12em; color: rgba(239,212,138,.55); margin-top: 3px; }
.fr-rule { height: 1px; margin: 8px 4px 12px; background: linear-gradient(90deg, rgba(201,161,84,.55), rgba(201,161,84,.05)); }

.fr-card {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 9px; margin-bottom: 8px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid rgba(201,161,84,.18);
  background: linear-gradient(135deg, rgba(90,61,36,.35), rgba(43,27,16,.55));
  color: var(--fr-brass-light); font: inherit; -webkit-appearance: none; appearance: none;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.fr-card:hover { transform: translateX(3px); border-color: rgba(201,161,84,.5); }
.fr-card.sel {
  border-color: var(--fr-brass);
  background: linear-gradient(135deg, rgba(201,161,84,.28), rgba(90,61,36,.6));
  box-shadow: 0 0 0 1px rgba(201,161,84,.35), 0 8px 24px -12px rgba(255,184,92,.6);
}
.fr-card.sel::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--fr-candle); box-shadow: 0 0 8px var(--fr-candle); transform: translateY(-50%);
}
.fr-card.grey { opacity: .45; cursor: default; }
.fr-card.grey:hover { transform: none; border-color: rgba(201,161,84,.18); }
.fr-faces { display: flex; flex: none; }
.fr-cameo {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #4a3220, #1d130b);
  border: 2px solid var(--fr-brass);
  box-shadow: 0 0 0 1px #2a1a0e, 0 0 0 3px rgba(201,161,84,.25), 0 6px 12px -6px #000;
}
.fr-cameo + .fr-cameo { margin-left: -20px; }
.fr-cameo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fr-name b { font-family: var(--fr-hand); font-weight: 400; font-size: 14px; letter-spacing: .03em; color: var(--fr-brass-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-name small { font-family: var(--fr-deco); font-size: 8.5px; letter-spacing: .2em; color: rgba(201,161,84,.75); margin-top: 2px; white-space: nowrap; }
.fr-stars { display: flex; gap: 2px; margin-top: 4px; flex-wrap: nowrap; }
.fr-stars i {
  width: 9px; height: 9px; flex: none; display: inline-block; background: #4a3320; transition: background .3s, box-shadow .3s;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.fr-stars i.on { background: var(--fr-brass-light); box-shadow: 0 0 6px rgba(239,212,138,.8); }

/* ---------- 携帯・タブレット: 上の顔札 ---------- */
.fr-head {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 150;
  display: none; align-items: center; gap: 9px; padding: 5px 14px 5px 6px; border-radius: 999px;
  border: 1px solid rgba(201,161,84,.28);
  background: linear-gradient(135deg, rgba(90,61,36,.45), rgba(43,27,16,.7));
  box-shadow: 0 8px 18px -10px #000; cursor: pointer; -webkit-appearance: none; appearance: none; color: inherit; font: inherit;
  transition: opacity .35s, transform .35s;
}
body:not(.fr-pc) .fr-head.show { display: flex; }
.fr-head .fr-cameo { width: 34px; height: 34px; border-width: 1.5px; }
.fr-head .fr-cameo + .fr-cameo { margin-left: -10px; }
.fr-head b { font-family: var(--fr-hand); font-weight: 400; font-size: 14px; letter-spacing: .08em; color: var(--fr-brass-light); white-space: nowrap; }
.fr-head:active { transform: translateX(-50%) scale(.97); }

/* ---------- ページの点の帯（本の下） ---------- */
.fr-rail {
  position: fixed; left: var(--fr-cx); top: 0; transform: translateX(-50%); z-index: 150;
  display: none; align-items: flex-start; justify-content: center; gap: 2px; max-width: 96vw;
  padding: 2px 4px; opacity: 0; transition: opacity .4s;
}
.fr-rail.show { display: flex; opacity: 1; }
.fr-pg {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 6px 4px;
  border-radius: 8px; min-width: 44px; cursor: pointer; border: 0; background: transparent; color: inherit; font: inherit;
  -webkit-appearance: none; appearance: none; transition: background .2s;
}
.fr-pg i {
  position: relative; width: 9px; height: 9px; border-radius: 50%; display: block;
  background: #4a3320; border: 1px solid rgba(201,161,84,.4); transition: background .25s, box-shadow .25s, border-color .25s;
}
.fr-pg.seen i { background: #7a5a2a; }
.fr-pg small { font-family: var(--fr-hand); font-size: 11px; color: var(--fr-brass); opacity: .8; letter-spacing: .04em; white-space: nowrap; }
.fr-pg:hover { background: rgba(201,161,84,.12); }
.fr-pg.on i { background: var(--fr-candle); border-color: var(--fr-brass-light); box-shadow: 0 0 8px var(--fr-candle); animation: fr-halo 2.4s ease-in-out infinite; }
.fr-pg.on small { color: #fff3cf; opacity: 1; }
@keyframes fr-halo { 0%,100% { box-shadow: 0 0 6px var(--fr-candle); } 50% { box-shadow: 0 0 12px var(--fr-candle), 0 0 20px rgba(255,184,92,.45); } }

/* ---------- 押した所が応える ---------- */
.fr-taps { position: fixed; inset: 0; pointer-events: none; z-index: 1200; }
.fr-ring {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 1.5px solid rgba(239,212,138,.9); box-shadow: 0 0 10px rgba(255,200,120,.6), inset 0 0 8px rgba(255,200,120,.35);
  animation: fr-ring .55s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes fr-ring { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(2.1); opacity: 0; } }
/* 押した札そのものの上に金の光（要素は触らず、同じ形の光を重ねる） */
.fr-hl {
  position: absolute; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,226,168,.16), rgba(255,200,120,.06));
  box-shadow: 0 0 0 1px rgba(239,212,138,.55), 0 0 16px rgba(255,200,120,.35);
  animation: fr-hl .5s cubic-bezier(.2,1.3,.3,1) forwards;
}
@keyframes fr-hl { 0% { transform: scale(.97); opacity: 1; } 55% { transform: scale(1.02); opacity: .75; } 100% { transform: scale(1); opacity: 0; } }
/* PC: 押せる仕掛けの上では指の形に（本の中のホットスポットにも） */
body.fr-pc .tap-own, body.fr-pc [class*="-hs"] { cursor: pointer; }

/* ---------- 動きを控える設定の人には揺らぎを止める ---------- */
@media (prefers-reduced-motion: reduce) {
  .fr-glow, .fr-mote, .fr-pg.on i { animation: none; }
  .fr-mote { display: none; }
}

/* ---------- 章えらびの輪（携帯の顔札を押すと出る・2026-09-02 ソウ「MinaLimaのサイトみたいに若干回転」） ----------
   まわりが少し暗くなり、章の顔札が弧の上に並ぶ。指で回す・端の札を押すと真ん中へ回ってはまる。
   真ん中の札を押すとその章へ。光の筋（放射）はゆっくり回り続ける */
.fr-pick { position: fixed; inset: 0; z-index: 1100; display: none; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.fr-pick.show { display: block; }
.fr-pick-dim { position: absolute; inset: 0; background: radial-gradient(120vmax 80vmax at 50% 18%, rgba(60,20,10,.55), rgba(0,0,0,.72) 70%); opacity: 0; transition: opacity .35s; }
.fr-pick.in .fr-pick-dim { opacity: 1; }
.fr-pick-rays {
  position: absolute; left: var(--fr-wx); top: var(--fr-wy); width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,184,92,.075) 0 5deg, transparent 5deg 12deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
  mask: radial-gradient(circle at 50% 50%, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
  animation: fr-rays 80s linear infinite; opacity: 0; transition: opacity .6s; pointer-events: none;
}
.fr-pick.in .fr-pick-rays { opacity: 1; }
@keyframes fr-rays { to { transform: rotate(360deg); } }
.fr-wheel { position: absolute; inset: 0; pointer-events: none; }
.fr-med {
  position: absolute; left: 0; top: 0; width: 108px; height: 108px; margin: -54px 0 0 -54px; padding: 0; border: 0; background: transparent;
  cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; color: inherit; font: inherit; will-change: transform;
  opacity: 0; transition: opacity .3s;
}
.fr-pick.in .fr-med { opacity: 1; }
.fr-med-disc {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex;
  background: radial-gradient(circle at 40% 30%, #4a3220, #1d130b);
  box-shadow: 0 0 0 3px var(--fr-brass), 0 0 0 5px #2a1a0e, 0 0 0 6.5px rgba(201,161,84,.6), 0 16px 34px -12px #000;
  transition: box-shadow .3s;
}
.fr-med-disc img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }
.fr-med-disc img + img { border-left: 1px solid rgba(201,161,84,.5); }
/* 目盛りの輪（コンパスの縁のように） */
.fr-med-ticks {
  position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(239,212,138,.95) 0 1.3deg, transparent 1.3deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 60%, #000 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 59%, #000 60%, #000 66%, transparent 67%);
  opacity: .55; transition: opacity .3s;
}
.fr-med b {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 20px;
  font-family: var(--fr-hand); font-weight: 400; font-size: 13px; letter-spacing: .08em; color: var(--fr-brass-light); white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); opacity: .75;
}
.fr-med.on .fr-med-disc { box-shadow: 0 0 0 3px var(--fr-brass-light), 0 0 0 5px #2a1a0e, 0 0 0 6.5px rgba(239,212,138,.7), 0 16px 34px -12px #000, 0 0 36px rgba(255,184,92,.5); }
.fr-med.on .fr-med-ticks { opacity: 1; }
.fr-med.on b { opacity: 0; }   /* 真ん中の名前はリボンが受け持つ */
.fr-med.grey .fr-med-disc { filter: grayscale(.7) brightness(.55); }
.fr-med.grey b { opacity: .4; }
/* 名前のリボン＋指差しの手（MinaLimaの«WELCOME»の帯から） */
.fr-ribbon { position: absolute; left: 50%; top: var(--fr-ry); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .35s .1s; }
.fr-pick.in .fr-ribbon { opacity: 1; }
.fr-ribbon-txt {
  padding: 9px 30px; min-width: 150px; text-align: center; cursor: pointer; white-space: nowrap;
  font-family: var(--fr-hand); font-size: 18px; letter-spacing: .14em; color: #5c1010;
  background: linear-gradient(180deg, #f4e9cd, #e6d5aa 60%, #d9c48f);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.fr-hand-btn { width: 44px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--fr-brass-light); cursor: pointer; -webkit-appearance: none; appearance: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); transition: transform .2s; }
.fr-hand-btn svg { width: 40px; height: auto; display: block; }
.fr-hand-btn.l svg { transform: scaleX(-1); }
.fr-hand-btn:active { transform: scale(.92); }
.fr-pick-x {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201,161,84,.5);
  background: radial-gradient(circle at 42% 36%, rgba(90,61,36,.7), rgba(21,16,12,.9)); color: var(--fr-brass-light); font-size: 20px; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 8px 18px -8px #000; opacity: 0; transition: opacity .35s .15s;
}
.fr-pick.in .fr-pick-x { opacity: 1; }