/* 叡智の灯火 — 和の温かみ。スマホ縦持ち最適化。ビルド不要。 */
:root{
  --bg:#2b2622; --paper:#f6efe2; --paper2:#efe5d3; --ink:#33291f;
  --ink-soft:#6b5d4a; --gold:#caa45d; --gold-deep:#a9863f;
  --line:#e0d3bb; --shadow:0 6px 22px rgba(40,30,16,.16);
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  line-height:1.7; -webkit-text-size-adjust:100%;
}
#app{
  max-width:480px; margin:0 auto; min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, #fbf6ec 0%, var(--paper) 45%, var(--paper2) 100%);
  box-shadow:var(--shadow);
  padding:18px 18px calc(28px + env(safe-area-inset-bottom)); position:relative;
}
button{font-family:inherit; cursor:pointer}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.small{font-size:.82rem}

/* 言語切替 */
.lang-toggle{display:flex; justify-content:flex-end; gap:6px; margin:-6px -4px 2px}
.lang-toggle button{border:1px solid var(--line); background:#fffdf8; color:var(--ink-soft); border-radius:99px; padding:5px 12px; font-family:inherit; font-size:.76rem}
.lang-toggle button.on{background:#2b2622; color:#f4ead4; border-color:#2b2622}
.lang-toggle .snd{font-size:.95rem; padding:5px 10px}

/* ---- 共通ボタン ---- */
.btn{
  display:block; width:100%; border:none; border-radius:999px;
  padding:14px 18px; font-size:1.02rem; font-weight:600;
  background:linear-gradient(180deg,#3c342a,#2b2622); color:#f4ead4;
  box-shadow:0 4px 14px rgba(40,30,16,.25); margin:10px 0; transition:transform .08s ease, filter .15s;
}
.btn:active{transform:translateY(1px) scale(.997)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2b2210}
.btn.ghost{background:transparent; color:var(--ink-soft); box-shadow:none; border:1px solid var(--line); font-weight:500}
.btn.sm{display:inline-block; width:auto; padding:9px 16px; font-size:.86rem; margin:4px}

/* ---- タイトル ---- */
.title-wrap{padding:46px 8px 18px; text-align:center}
.flame{font-size:42px; display:inline-block; transform-origin:center 70%;
  filter:drop-shadow(0 0 14px rgba(202,164,93,.6));
  animation:flicker 3.2s ease-in-out infinite}
@keyframes flicker{
  0%,100%{filter:drop-shadow(0 0 10px rgba(202,164,93,.5)); transform:scale(1) rotate(-1deg)}
  25%{filter:drop-shadow(0 0 17px rgba(202,164,93,.85)); transform:scale(1.06) rotate(1.2deg)}
  50%{filter:drop-shadow(0 0 12px rgba(202,164,93,.6)); transform:scale(.97) rotate(-1.4deg)}
  75%{filter:drop-shadow(0 0 19px rgba(214,180,110,.9)); transform:scale(1.04) rotate(.8deg)}
}
@media (prefers-reduced-motion: reduce){
  .flame{animation:none}
  .fade,.card.tap:not([disabled]),.cel-inner,.cel-rays,.cel-particles i,.card.legend,.disc.legenddisc{animation:none !important}
}
h1.title{font-size:2.0rem; letter-spacing:.14em; margin:.4em 0 .1em; font-weight:700}
.subtitle{color:var(--ink-soft); letter-spacing:.06em; margin:0 0 6px}
.title-actions{margin-top:26px}
.tagline{margin:30px 6px 0; color:var(--ink-soft); font-size:.92rem}

/* ---- ステータスバー ---- */
.statusbar{
  display:flex; align-items:center; gap:10px; padding:10px 14px; margin:-4px -4px 14px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:14px;
  position:sticky; top:8px; z-index:5; backdrop-filter:blur(4px);
}
.heart{font-size:1.1rem}
.mindbar{flex:1; height:10px; background:#e7dcc6; border-radius:99px; overflow:hidden}
.mindbar > i{display:block; height:100%; background:linear-gradient(90deg,#d98b6a,#caa45d)}
.rankchip{font-size:.74rem; padding:3px 9px; border-radius:99px; background:#efe2c6; color:#7a5e22; white-space:nowrap; border:1px solid #e3d2a8}
.wisrow{font-size:.72rem; color:var(--ink-soft); margin:0 2px 16px}
.wisrow .wbar{height:5px; background:#e7dcc6; border-radius:99px; overflow:hidden; margin-top:3px}
.wisrow .wbar > i{display:block; height:100%; background:var(--gold)}

/* ---- イベント ---- */
.eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.12em; color:var(--gold-deep);
  border:1px solid #e3d2a8; padding:2px 10px; border-radius:99px; margin-bottom:10px}
.event-title{font-size:1.32rem; font-weight:700; margin:.1em 0 .4em; line-height:1.5}
.event-body{color:var(--ink-soft); margin:0 0 18px}
.advice-help{font-size:.8rem; color:var(--ink-soft); margin:0 2px 8px}
.reading-hint{transition:color .4s ease}
.reading-hint:not(.ready){color:var(--gold-deep)}

/* ③ 読み飛ばし防止：選択肢は“ひと呼吸”伏せる */
.card.tap[disabled]{opacity:.45; cursor:default; filter:saturate(.55)}
.card.tap[disabled] .quote{color:#a99c84}
.card.tap:not([disabled]){animation:cardwake .4s ease}
@keyframes cardwake{from{opacity:.5; transform:translateY(3px)} to{opacity:1; transform:none}}

/* ② 相談モードのカテゴリ選択 */
.consult-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 16px}
.consult-cat{
  border:1px solid var(--line); background:#fffdf8; border-radius:14px; padding:20px 10px;
  font-family:inherit; font-size:1.08rem; color:var(--ink); box-shadow:0 2px 8px rgba(40,30,16,.06);
  transition:transform .08s, box-shadow .15s;
}
.consult-cat:active{transform:translateY(1px)}
.consult-cat:hover{box-shadow:0 5px 14px rgba(40,30,16,.12)}

/* ---- 助言カード ---- */
.card{
  position:relative; width:100%; text-align:left; border:1px solid var(--line);
  background:#fffdf8; border-radius:var(--r); padding:14px 14px 14px 16px; margin:10px 0;
  box-shadow:0 3px 10px rgba(40,30,16,.07); border-left:5px solid var(--c,#ccc);
  transition:transform .08s, box-shadow .15s;
}
.card:active{transform:translateY(1px)}
.card.tap{cursor:pointer}
.card.tap:hover{box-shadow:0 6px 16px rgba(40,30,16,.13)}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.disc{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  color:#fff; font-size:.98rem; font-weight:700;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.5), transparent 46%),
    radial-gradient(circle at 50% 64%, var(--c,#999), rgba(0,0,0,.22));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45), inset 0 -3px 7px rgba(0,0,0,.22), 0 2px 6px rgba(40,30,16,.2);
  text-shadow:0 1px 2px rgba(0,0,0,.3)
}
.disc.scripture{background:radial-gradient(circle at 38% 28%, #fbeec2, var(--gold-deep)); color:#5a3f12; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6), inset 0 -3px 7px rgba(120,80,20,.3), 0 0 10px rgba(202,164,93,.5)}
.sname{font-size:.9rem; font-weight:600}
.sname .era{font-weight:400; color:var(--ink-soft); font-size:.74rem; margin-left:6px}
.badge{margin-left:auto; font-size:.66rem; padding:2px 8px; border-radius:99px; background:#f0e6cf; color:#7a5e22; border:1px solid #e6d6ac; white-space:nowrap}
.badge.sacred{background:linear-gradient(180deg,#f6e3b0,#e6c878); color:#5a3f12; border-color:#d8b86a}
.quote{font-size:1.06rem; line-height:1.65; margin:2px 0 0}
.qnote{font-size:.82rem; color:var(--ink-soft); margin:6px 0 0}
.source{display:block; font-size:.72rem; color:var(--gold-deep); margin-top:8px; letter-spacing:.02em}

/* ロック中カード */
.card.locked{opacity:.72; filter:saturate(.5); border-left-color:#cdbfa6}
.lockmsg{font-size:.85rem; color:var(--ink-soft)}
.lockmsg b{color:var(--gold-deep)}

/* 偉人フェーズ解放バナー */
.paywall{
  border:1.5px dashed var(--gold-deep); background:linear-gradient(180deg,#fff8e9,#f7ecd2);
  border-radius:var(--r); padding:16px; margin:14px 0; text-align:center;
}
.paywall h3{margin:.2em 0 .3em; font-size:1.05rem}
.paywall p{margin:.2em 0 .8em; font-size:.84rem; color:var(--ink-soft)}
.code-input{width:100%; max-width:280px; margin:0 auto 10px; display:block; border:1px solid #d8b86a; border-radius:10px; padding:11px 12px; font-family:inherit; font-size:1rem; text-align:center; letter-spacing:.08em; background:#fffdf8; color:var(--ink)}
.code-msg{font-size:.8rem; color:#b15a3c; margin-top:8px; min-height:1em}
.member-on{text-align:center; color:#3f7d4f; font-size:.82rem; margin:10px 0 0}
.consult-cat.locked{opacity:.6; border-style:dashed; color:var(--ink-soft); cursor:pointer}

/* ---- 決断結果 ---- */
.result-quote{
  font-size:1.4rem; line-height:1.7; text-align:center; margin:26px 10px 14px;
  position:relative;
}
.result-quote:before{content:"❝"; color:var(--gold); font-size:2rem; display:block; line-height:0; margin-bottom:18px}
.result-from{text-align:center; color:var(--ink-soft); font-size:.86rem; margin-bottom:4px}
.result-source{text-align:center; color:var(--gold-deep); font-size:.74rem; margin-bottom:18px}
.deltas{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0}
.delta{font-size:.82rem; padding:5px 12px; border-radius:99px; background:#f0e8d6; border:1px solid var(--line)}
.delta.up{color:#3f7d4f} .delta.down{color:#b15a3c}
.saved-toast{text-align:center; color:var(--gold-deep); font-size:.84rem; margin:6px 0 2px}
.fb{display:flex; gap:10px; justify-content:center; margin:14px 0 4px}
.fb button{border:1px solid var(--line); background:#fffdf8; border-radius:99px; padding:9px 16px; font-size:.86rem; color:var(--ink)}
.fb button.on{background:var(--gold); border-color:var(--gold-deep); color:#2b2210; font-weight:600}

/* 内省メモ（暮らしにどう活かす？）— 知識を自分ごとに */
.reflect{margin:12px 0 2px; text-align:center}
.reflect-toggle{background:none; border:1px dashed var(--gold-deep); border-radius:99px; padding:9px 16px; color:var(--gold-deep); font-family:inherit; font-size:.84rem}
.reflect-body{margin-top:10px; text-align:left}
.reflect-input{width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-family:inherit; font-size:.94rem; line-height:1.6; background:#fffdf8; color:var(--ink); resize:vertical}
.reflect-done{color:var(--gold-deep); font-size:.88rem; text-align:center; margin:8px 0}
.enote{font-size:.82rem; color:#6b5d4a; background:#f4ecdc; border-left:3px solid var(--gold); border-radius:8px; padding:6px 10px; margin-top:7px}

/* 今日の一言（復習・想起） */
.recall{margin:24px 4px 0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.55)}
.recall-k{font-size:.74rem; color:var(--gold-deep); letter-spacing:.06em}
.recall-q{font-size:1.06rem; line-height:1.66; margin:8px 0 4px}
.recall-f{font-size:.76rem; color:var(--ink-soft)}

/* ---- 休息 ---- */
.rest{ text-align:center; padding:40px 12px }
.rest .moon{font-size:40px}
.rest .line{font-size:1.18rem; margin:18px 8px; line-height:1.7}

/* ---- わが叡智の書 ---- */
.book-head{display:flex; align-items:center; gap:8px; margin:2px 0 12px}
.book-head h2{font-size:1.2rem; margin:0}
.tabs{display:flex; gap:6px; margin:6px 0 14px}
.tabs button{flex:1; border:1px solid var(--line); background:#fffdf8; border-radius:99px; padding:8px; font-size:.86rem; color:var(--ink-soft)}
.tabs button.on{background:#2b2622; color:#f4ead4; border-color:#2b2622}
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.chip{font-size:.74rem; padding:4px 10px; border-radius:99px; border:1px solid var(--line); background:#fffdf8; color:var(--ink-soft)}
.chip.on{background:var(--gold); border-color:var(--gold-deep); color:#2b2210}
.entry{border:1px solid var(--line); border-left:4px solid var(--c,#ccc); background:#fffdf8; border-radius:14px; padding:12px 13px; margin:9px 0}
.entry .when{font-size:.72rem; color:var(--ink-soft)}
.entry .etitle{font-size:.86rem; color:var(--ink-soft); margin:2px 0 6px}
.entry .eq{font-size:1.0rem; line-height:1.6}
.entry .efrom{font-size:.76rem; color:var(--gold-deep); margin-top:6px}
.entry .fbmark{font-size:.74rem; margin-top:6px; color:var(--ink-soft)}
.empty{ text-align:center; color:var(--ink-soft); padding:40px 10px }
.summary{background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:14px; font-size:.88rem}
.summary b{color:var(--gold-deep)}

.footer-actions{margin-top:22px}
.notice{font-size:.72rem; color:var(--ink-soft); text-align:center; margin-top:18px; line-height:1.6}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---- レア度 ---- */
.rar{margin-left:auto; font-size:.66rem; padding:2px 9px; border-radius:99px; white-space:nowrap; border:1px solid transparent}
.rar-free{background:#efe6d4; color:#8a795a; border-color:#e3d6bb}
.rar-common{background:#eee6d6; color:#7d6f57; border-color:#e1d4ba}
.rar-rare{background:#dfeeec; color:#2f7e74; border-color:#bfe0da}
.rar-sacred{background:linear-gradient(180deg,#f6e3b0,#e6c878); color:#5a3f12; border-color:#d8b86a}
.rar-legendary{background:linear-gradient(110deg,#f6d97a,#caa45d 40%,#e7b3d0 70%,#caa45d); color:#3a2a08; border-color:#caa45d; box-shadow:0 0 10px rgba(202,164,93,.5)}
.codex-tease{text-align:center; color:var(--gold-deep); letter-spacing:.08em; font-size:.84rem; margin:18px 0 0}

/* ---- 叡智の位 ---- */
.title-pos{margin:14px 0 0; color:var(--ink-soft); font-size:.92rem}
.title-pos b{color:var(--ink); font-size:1.05rem}
.title-pos .grade{display:inline-block; margin-left:8px; font-size:.7rem; padding:2px 9px; border-radius:99px; background:#efe2c6; color:#7a5e22; border:1px solid #e3d2a8}
.pos-banner{text-align:center; color:#7a5e22; font-weight:700; font-size:.92rem; margin:6px 0; letter-spacing:.04em}

/* ---- 免許状 ---- */
.certificate{
  position:relative; border:2px solid var(--gold-deep); border-radius:10px;
  background:linear-gradient(160deg,#fffaf0,#f5ead0); padding:26px 20px 20px; margin:8px 0 14px;
  box-shadow:0 8px 26px rgba(120,90,30,.18); text-align:center; overflow:hidden;
}
.certificate:before{content:""; position:absolute; inset:7px; border:1px solid #ddc38a; border-radius:6px; pointer-events:none}
.cert-corner{position:absolute; width:16px; height:16px; border:2px solid var(--gold-deep)}
.cert-corner.tl{top:5px; left:5px; border-right:0; border-bottom:0}
.cert-corner.tr{top:5px; right:5px; border-left:0; border-bottom:0}
.cert-corner.bl{bottom:5px; left:5px; border-right:0; border-top:0}
.cert-corner.br{bottom:5px; right:5px; border-left:0; border-top:0}
.cert-kicker{font-size:1.5rem; letter-spacing:.42em; color:#7a5e22; margin-left:.42em; font-weight:700}
.cert-sub{font-size:.74rem; color:var(--ink-soft); letter-spacing:.14em; margin:4px 0 14px}
.cert-pos{font-size:1.9rem; font-weight:700; color:var(--ink); letter-spacing:.06em}
.cert-grade{display:inline-block; margin:8px 0 4px; font-size:.86rem; padding:3px 16px; border-radius:99px;
  background:linear-gradient(180deg,#f6e3b0,#e6c878); color:#5a3f12; border:1px solid #d8b86a}
.cert-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 6px 8px}
.cert-stats > div{background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:10px; padding:8px 6px}
.cert-stats b{display:block; font-size:1.2rem; color:#7a5e22}
.cert-stats span{font-size:.7rem; color:var(--ink-soft)}
.cert-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:0 4px}
.cert-date{font-size:.74rem; color:var(--ink-soft)}
.cert-seal{display:grid; place-items:center; width:38px; height:38px; border-radius:6px; border:2px solid #b5402f;
  color:#b5402f; font-weight:700; transform:rotate(-6deg); background:rgba(181,64,47,.06); font-size:1.1rem}
.cert-next{font-size:.82rem; color:var(--ink-soft); margin:4px 2px 0}
.cert-next .wbar{height:6px; background:#e7dcc6; border-radius:99px; overflow:hidden; margin-top:5px}
.cert-next .wbar > i{display:block; height:100%; background:var(--gold)}

/* ---- 伝説カード ---- */
.card.legend{
  border:1.5px solid var(--gold-deep);
  background:linear-gradient(135deg,#fff8e8,#f7eccf 60%,#fbe9f1);
  box-shadow:0 4px 18px rgba(202,164,93,.35);
  animation:legendpulse 2.4s ease-in-out infinite;
}
@keyframes legendpulse{0%,100%{box-shadow:0 4px 18px rgba(202,164,93,.30)} 50%{box-shadow:0 6px 26px rgba(202,164,93,.55)}}
.disc.legenddisc{background:radial-gradient(circle at 50% 35%,#fff0c0,#caa45d); color:#5a3f12; animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.legend-teaser{color:#7a5e22; font-style:normal}

/* ---- 結果のレアリボン ---- */
.rarity-ribbon{text-align:center; letter-spacing:.14em; font-size:.84rem; margin:18px 0 -4px}
.rarity-ribbon.sacred{color:var(--gold-deep)}
.rarity-ribbon.legendary{color:#a9863f; font-weight:700; text-shadow:0 0 12px rgba(202,164,93,.6)}

/* ---- 祝福演出（全画面） ---- */
.celebrate{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:radial-gradient(80% 60% at 50% 42%, #2c2410 0%, #1c1810 60%, #120f0a 100%);
  opacity:0; transition:opacity .4s ease; overflow:hidden;
}
.celebrate.show{opacity:1}
.celebrate.out{opacity:0}
.cel-rays{
  position:absolute; width:160vmax; height:160vmax; top:50%; left:50%; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(202,164,93,.16) 0deg 6deg, transparent 6deg 12deg);
  animation:rays 24s linear infinite; opacity:.7;
}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cel-particles{position:absolute; inset:0; pointer-events:none}
.cel-particles i{
  position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3px; border-radius:50%;
  background:radial-gradient(circle,#fff3cf,#caa45d); opacity:0;
  animation:burst 1.6s ease-out forwards; animation-delay:calc(var(--i) * 60ms);
  transform:rotate(calc(var(--i) * 25.7deg)) translateX(0);
}
@keyframes burst{
  0%{opacity:0; transform:rotate(calc(var(--i) * 25.7deg)) translateX(0) scale(.4)}
  30%{opacity:1}
  100%{opacity:0; transform:rotate(calc(var(--i) * 25.7deg)) translateX(44vmin) scale(1)}
}
.cel-inner{position:relative; z-index:2; text-align:center; color:#f5ead0; padding:24px 26px; max-width:440px; animation:rise .7s ease}
@keyframes rise{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}
.cel-label{color:#f1d68a; letter-spacing:.18em; font-size:.92rem; margin-bottom:18px; text-shadow:0 0 16px rgba(202,164,93,.7)}
.cel-quote{font-size:1.4rem; line-height:1.75; margin:6px 0 16px; text-shadow:0 1px 18px rgba(0,0,0,.4)}
.cel-from{color:#e7d3a4; font-size:.9rem}
.cel-source{color:#bda268; font-size:.74rem; margin-top:4px}
.cel-count{color:#f1d68a; font-size:.8rem; margin:18px 0 6px; letter-spacing:.06em}
.cel-btn{max-width:300px; margin:14px auto 0}

/* ---- 伝説の図鑑 ---- */
.codex-head{text-align:center; color:var(--gold-deep); letter-spacing:.06em; margin:2px 0 14px; line-height:1.6}
.codex-head b{font-size:1.2rem}
.codex-grid{display:flex; flex-direction:column; gap:9px}
.legend-slot{border-radius:14px; padding:12px 13px; border:1px solid var(--line)}
.legend-slot.found{border-left:4px solid var(--c,#caa45d); background:linear-gradient(135deg,#fffaf0,#f8efd8)}
.legend-slot.found .ls-head{font-weight:700; color:#7a5e22; font-size:.86rem; margin-bottom:5px}
.legend-slot.found .ls-quote{font-size:1.0rem; line-height:1.6}
.legend-slot.found .ls-src{font-size:.72rem; color:var(--gold-deep); margin-top:6px}
.legend-slot.locked{background:#efe7d8; border-style:dashed; color:#a8997e; text-align:center}
.legend-slot.locked .ls-head{letter-spacing:.3em; font-weight:700; margin-bottom:4px}
.legend-slot.locked .ls-quote{font-size:.78rem}

/* ===== 夜モード（ダーク） ===== */
#app.night{
  --paper:#23201b; --paper2:#1a1714; --ink:#ece3d2; --ink-soft:#b3a589;
  --line:#3c3529; --gold:#d9b56a; --gold-deep:#d8b772; --shadow:0 6px 22px rgba(0,0,0,.45);
  background:radial-gradient(120% 60% at 50% -10%, #2c2820 0%, #211e19 45%, #1a1714 100%);
  color:var(--ink);
}
#app.night .subtitle,#app.night .muted,#app.night .tagline,#app.night .notice,#app.night .event-body,#app.night .qnote,#app.night .advice-help{color:var(--ink-soft)}
#app.night .card,#app.night .entry,#app.night .consult-cat,#app.night .fb button,#app.night .tabs button,#app.night .chip,#app.night .reflect-input,#app.night .code-input,#app.night .legend-slot.found,#app.night .reflect-toggle{background:#2a2620; color:var(--ink); border-color:var(--line)}
#app.night .statusbar,#app.night .summary,#app.night .recall,#app.night .cert-stats > div{background:rgba(255,255,255,.05); border-color:var(--line)}
#app.night .mindbar,#app.night .wisrow .wbar,#app.night .cert-next .wbar{background:#3c3529}
#app.night .rankchip{background:#3a3122; color:#e8d6ab; border-color:#4a3f28}
#app.night .eyebrow{border-color:#4a3f28; color:var(--gold)}
#app.night .tabs button.on{background:var(--gold-deep); color:#241c0c; border-color:var(--gold-deep)}
#app.night .paywall{background:linear-gradient(180deg,#2f291b,#262017); border-color:var(--gold-deep)}
#app.night .certificate{background:linear-gradient(160deg,#2b2620,#231f1a)}
#app.night .certificate:before{border-color:#5a4d30}
#app.night .legend-slot.locked{background:#241f19; color:#8a7d66; border-color:var(--line)}
#app.night .delta{background:#2e2a20; border-color:var(--line)}
#app.night .delta.up{color:#7fc08c} #app.night .delta.down{color:#e0916f}
#app.night .enote{background:#2e2a20; color:#cbbfa6}
#app.night .btn.ghost{color:var(--ink-soft); border-color:var(--line)}
#app.night .lang-toggle button{background:#2a2620; color:var(--ink-soft); border-color:var(--line)}
#app.night .lang-toggle button.on{background:var(--gold); color:#241c0c; border-color:var(--gold)}
#app.night .cert-kicker,#app.night .cert-pos,#app.night .cert-stats b{color:#e8d6ab}
#app.night .member-on{color:#7fc08c}

/* ---- 仕上げ：カテゴリアイコン＆巻物カード ---- */
.cc-ic{display:block; font-size:1.5rem; margin-bottom:5px; line-height:1}
.scroll-card{
  position:relative; margin:18px 2px 14px; padding:28px 20px 24px;
  background:linear-gradient(180deg,#fffdf8,#f6eedd);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 20px rgba(40,30,16,.12);
}
.scroll-card:before,.scroll-card:after{content:""; position:absolute; left:16%; right:16%; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.scroll-card:before{top:12px} .scroll-card:after{bottom:12px}
.scroll-card .result-quote{margin:14px 4px 12px}
.scroll-card.sacred{box-shadow:0 6px 22px rgba(202,164,93,.28)}
.scroll-card.sacred:before,.scroll-card.sacred:after{height:2.5px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.scroll-card.legendary{border-color:var(--gold-deep); box-shadow:0 8px 28px rgba(202,164,93,.38)}
#app.night .scroll-card{background:linear-gradient(180deg,#2c2823,#241f1a); border-color:var(--line)}
#app.night .scroll-card .result-quote{color:var(--ink)}

/* ---- 仕上げ：環境音トグル/休息の深呼吸/祝福フラッシュ ---- */
.lang-toggle .snd.on{background:var(--gold); color:#241c0c; border-color:var(--gold-deep)}
.rest .breath{width:120px; height:120px; margin:6px auto 8px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle, rgba(202,164,93,.22), transparent 70%);
  animation:breathe 8s ease-in-out infinite}
.rest .breath .moon{font-size:40px}
.breath-cue{color:var(--gold-deep); letter-spacing:.1em; font-size:.86rem; margin:0 0 8px}
@keyframes breathe{
  0%,100%{transform:scale(.82); opacity:.7}
  45%{transform:scale(1.12); opacity:1}
  55%{transform:scale(1.12); opacity:1}
}
.cel-flash{position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(255,240,200,.85), rgba(202,164,93,.2) 35%, transparent 65%);
  opacity:0; animation:celflash 1.1s ease-out forwards}
@keyframes celflash{0%{opacity:0; transform:scale(.6)} 18%{opacity:.95} 100%{opacity:0; transform:scale(1.6)}}
@media (prefers-reduced-motion: reduce){ .rest .breath,.cel-flash{animation:none} }
#app.night .breath-cue{color:var(--gold)}

/* P2: 社会的証明（○%が響いた） */
.social-proof{text-align:center; color:var(--gold-deep); font-size:.8rem; margin:4px 0 0; min-height:1em; letter-spacing:.02em}
#app.night .social-proof{color:var(--gold)}

/* P3: 「多くの人に響いた」バッジ */
.loved{margin-left:8px; font-size:.64rem; padding:2px 8px; border-radius:99px; white-space:nowrap;
  background:linear-gradient(180deg,#ffe7ad,#f3c969); color:#6b4e10; border:1px solid #e3b94f}
#app.night .loved{background:linear-gradient(180deg,#5a4a22,#473916); color:#f1d68a; border-color:#6b5524}