/*
  ひみコンの ひらめき日和 — デザインシステム（v1.4）
  決まりと 理由は docs/design-system.md。主な 使い手は 50代以上。
  - 文字: 本文 17px・最小 14px・主役 28〜32px。行の高さ 1.6。
  - 押せるもの: 最小 48px、主ボタン 56px、ある／なし 64px。間は 8px 以上。
  - 画面: 「.screen ＝ .screen-body（中身）＋ .dock（操作）」。操作は いつも 画面の下に 固定し、スクロールしなくても 押せる。
  - 色: HP の ピンク・紫・金の パステル。文字は 背景に対して 7:1 を めざす（最低 4.5:1）。金・淡色は 飾り専用。
  妖怪退治の 見た目は yokai.css（同じ トークンを 使う）。
*/

@font-face { font-family: 'Zen Maru Gothic'; src: url('assets/fonts/ZenMaruGothic-Medium.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Zen Maru Gothic'; src: url('assets/fonts/ZenMaruGothic-Bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }

/* ---------- トークン ---------- */
:root {
  /* 色 */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-soft: #fff5fa;
  --ink: #261736;            /* 本文（背景に対して 15:1） */
  --ink-soft: #55406a;       /* 補足（7:1 以上） */
  --line: #e6d3df;
  --primary: #c81c73;        /* 主ボタン・強調（HP のピンクを 濃く。白文字で 5.6:1） */
  --primary-press: #9e1459;
  --primary-soft: #ffe0ee;
  --secondary: #6f45a6;      /* HP の紫（白地で 7:1） */
  --secondary-soft: #efe6fa;
  --gold: #f4b625;           /* 金（飾り専用。文字には 使わない） */
  --gold-soft: #fff1c7;
  --aru: #c2186f;            /* 「ある」= ピンク（動画・イラストと同じ配色） */
  --aru-soft: #ffe3ef;
  --nashi: #1f5fc4;          /* 「なし」= 青 */
  --nashi-soft: #e3edff;
  --ok: #23773f;
  --ng: #a64b05;
  --night: #1b1550;          /* 答え合わせの 宇宙色 */
  --on-accent: #ffffff;
  --shadow: 0 4px 0 #ead5e1;
  --app-bg: url('assets/ui/bg-map-light.webp');

  /* 文字（rem は html の 17px が もと。文字を 大きくする 設定では 19.5px） */
  --fs-xs: .824rem;   /* 14px 最小。注記だけ */
  --fs-sm: .882rem;   /* 15px */
  --fs-md: 1rem;      /* 17px 本文 */
  --fs-lg: 1.118rem;  /* 19px ボタン・選択肢 */
  --fs-xl: 1.412rem;  /* 24px 画面の 見出し */
  --fs-2xl: 1.765rem; /* 30px 主役の 文字（問題の ことば・結果） */
  --font: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;

  /* 押せる 大きさ・余白・角丸・動き */
  --tap: 48px;
  --tap-lg: 56px;
  --tap-xl: 64px;
  --pad: 16px;
  --gap: 12px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --dur: .22s;
  --ease: cubic-bezier(.2, .8, .3, 1);

  /* 画面枠（大きい 画面では 中央に スマホの 枠） */
  --screen-w: 430px;
  --screen-h: 932px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #140c1d;
    --surface: #1f1429;
    --surface-soft: #2a1b36;
    --ink: #f4e9ef;
    --ink-soft: #cdbcd8;
    --line: #3d2a4c;
    --primary: #ee4d9d;
    --primary-press: #c22f78;
    --primary-soft: #4a1d36;
    --secondary: #bf9cf5;
    --secondary-soft: #2e2142;
    --gold-soft: #3b2f12;
    --aru: #ff7ab8;
    --aru-soft: #44182f;
    --nashi: #86b5ff;
    --nashi-soft: #172a4a;
    --ok: #74d895;
    --ng: #f7a865;
    --on-accent: #1a0f24;
    --app-bg: url('assets/ui/bg-map-dark.webp');
    --shadow: 0 4px 0 #0b0610;
    color-scheme: dark;
  }
}

/* ---------- 土台 ---------- */
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; height: 100%; }
html.text-large { font-size: 19.5px; }
html.text-xlarge { font-size: 22px; } /* 特大（v1.9。標準の 約130%） */
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  background: #1b1550 url('assets/ui/bg-space.webp') center / cover no-repeat;
  /* 日本語の 改行: 句読点の 前で 折らない。あふれそうな ときは どこでも 折る。対応ブラウザは 文節で 折る */
  line-break: strict;
  overflow-wrap: break-word;
  /* アプリらしく: 長押しの メニュー・文字選択・タップの 色を 出さない（入力欄は 除く） */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
@supports (word-break: auto-phrase) { body { word-break: auto-phrase; } }
textarea, input { user-select: text; -webkit-user-select: text; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.3; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 8px; }
[tabindex="-1"]:focus { outline: none; } /* 画面切りかえで 見出しに 移した フォーカスには 枠を出さない */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--ink-soft); font-size: var(--fs-sm); }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3, .btn, .nav-link { font-feature-settings: "palt"; letter-spacing: .02em; }
.ui-icon { display: inline-block; object-fit: contain; vertical-align: middle; }
.ui-icon.inline { width: 1.4em; height: 1.4em; margin: -0.2em 0.15em 0 0; }
.loading { margin: auto; padding: 60px 16px; color: var(--ink-soft); text-align: center; }

/* ---------- 骨組み: 画面枠・ヘッダー（HUD）・中身・下の メニュー ---------- */
.shell { position: relative; display: flex; flex-direction: column; width: min(var(--screen-w), 100vw); height: min(var(--screen-h), 100vh); height: min(var(--screen-h), 100dvh); overflow: hidden; background: var(--bg) var(--app-bg) center / cover no-repeat; transform: translateZ(0); }
@media (min-width: 481px) and (min-height: 640px) {
  .shell { height: min(var(--screen-h), calc(100dvh - 32px)); border-radius: 28px; box-shadow: 0 0 0 8px rgb(255 255 255 / .12), 0 24px 60px rgb(10 5 40 / .55); }
}
.topbar { flex: none; z-index: 10; display: flex; align-items: center; gap: 8px; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.counters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 104px); gap: 4px; flex: 1; min-width: 0; }
/* チップ: 上に 絵と 数字、下に 短い 名前（気力・体力・おだんご・かけら）。文字「大」でも 幅が 変わらないよう px で 決める */
.hud-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 48px; padding: 2px 4px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); font-weight: 700; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.hud-chip[hidden] { display: none; }
.hud-chip .hud-row { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.hud-chip b { font-size: 19px; }
.hud-chip .hud-val { display: inline-flex; align-items: baseline; }
.hud-chip .of { font-size: 14px; color: var(--ink-soft); }
.hud-chip .hud-label { font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; }
.counter-icon { width: 24px; height: 24px; flex: none; }
[id^="stamina-"].empty { border-color: var(--primary); }
[id^="stamina-"].full { border-color: color-mix(in srgb, var(--gold) 70%, var(--line)); }
.hud-settings { flex: none; display: grid; justify-items: center; align-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 4px; border-radius: var(--r-sm); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 700; line-height: 1.1; }
.hud-settings svg { width: 26px; height: 26px; }
main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; }
.bottom-nav { flex: none; z-index: 20; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 2px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 60px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; transition: transform .12s; }
.nav-link:active { transform: scale(.95); }
.nav-icon { width: 32px; height: 32px; filter: grayscale(.6) opacity(.8); }
.nav-link.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
.nav-link.active .nav-icon { filter: none; }
/* 画面の 種類で ヘッダーと メニューを 出し分ける（遊んでいる ときは どちらも 隠して 画面を 広く） */
body[data-chrome="play"] .topbar, body[data-chrome="play"] .bottom-nav, body[data-chrome="plain"] .bottom-nav { display: none; }

/* 画面 ＝ 中身 ＋ 操作の 段 */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap) var(--pad); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.dock { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px var(--pad) 12px; background: color-mix(in srgb, var(--bg) 82%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
body[data-chrome="play"] .dock, body[data-chrome="plain"] .dock { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
.dock-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dock-note { color: var(--ink-soft); font-size: var(--fs-sm); text-align: center; line-height: 1.5; }
.dock-note a { color: var(--secondary); font-weight: 700; text-decoration: underline; }
.screen-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px var(--pad) 0; }
.screen-head h1 { font-size: var(--fs-xl); }
#app.screen-enter .screen { animation: screen-in .28s var(--ease) backwards; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 部品: ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 8px 18px; border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; text-align: center; transition: transform .1s, box-shadow .1s, filter .1s; }
.btn small { font-size: var(--fs-xs); font-weight: 500; }
.btn-stack { flex-direction: column; gap: 0; }
.btn-stack small { display: block; }
.hint-btn, .seg-btn, .dock-row .btn, .yk-row .btn, .answer-row .btn, .assist-row .btn, .quit-btn, .back-btn, .hud-chip, .btn-sm, .tile strong, .streak, .quest-btn { white-space: nowrap; }
html:is(.text-large, .text-xlarge) .assist-row .btn, html:is(.text-large, .text-xlarge) .dock-row .btn { min-width: 0; white-space: normal; padding-left: 8px; padding-right: 8px; }
html.text-large .hint-btn { flex-wrap: wrap; row-gap: 0; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none !important; } /* 押すと 沈む */
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: var(--tap-lg); font-size: var(--fs-lg); }
.btn-sm { min-height: var(--tap); padding: 6px 14px; font-size: var(--fs-md); border-radius: var(--r-sm); }
.btn-primary { background: var(--primary); color: var(--on-accent); box-shadow: 0 4px 0 var(--primary-press); }
.btn-secondary { background: var(--surface); color: var(--secondary); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn-ghost { background: transparent; color: var(--ink-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.btn-ad { background: var(--secondary); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--secondary) 60%, #000); }
.btn-ad .play-mark { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgb(255 255 255 / .25); font-size: .8em; }
.btn-ok { background: var(--ok); color: var(--on-accent); box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 60%, #000); }
.btn-ng { background: var(--ng); color: var(--on-accent); box-shadow: 0 4px 0 color-mix(in srgb, var(--ng) 60%, #000); }
.btn:disabled { background: var(--line); color: var(--ink-soft); border-color: var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { .btn-ad { color: #1a0f24; } }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
  .btn-secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--secondary) 45%, var(--line)); }
  .pick-item:hover, .guess-option:hover, .choice:hover { border-color: var(--secondary); }
}

/* 切りかえ（タブ・セグメント） */
.seg { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 10px var(--pad) 0; padding: 4px; border-radius: var(--r-md); background: color-mix(in srgb, var(--line) 70%, transparent); }
.seg-btn { min-height: 44px; padding: 0 4px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-md); color: var(--ink-soft); white-space: nowrap; }
.seg-btn[aria-selected="true"], .seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 2px 0 var(--line); }
.seg-sm { display: inline-grid; margin: 0; }
.seg-sm .seg-btn { min-width: 52px; }

/* カード */
.panel-card { padding: 14px var(--pad); border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.panel-card h2 { font-size: var(--fs-lg); margin-bottom: 8px; }
.panel-card h2 small { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 700; margin-left: 4px; }
.meter { height: 12px; border-radius: 999px; background: var(--secondary-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; color: #e3d6ff; }

/* ダイアログ（画面枠の 上に 重ねる。背景を 押しても 閉じない） */
.dlg-layer { position: absolute; inset: 0; z-index: 70; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgb(30 15 45 / .55); animation: fade-in .2s both; }
.dlg-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 400px; max-height: 100%; padding: 20px 18px 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 18px 40px rgb(0 0 0 / .28); animation: card-pop .3s var(--ease) both; }
.dlg-card h2 { font-size: var(--fs-xl); margin-bottom: 8px; outline: none; }
.dlg-body { min-height: 0; overflow-y: auto; display: grid; gap: 10px; text-align: left; }
.dlg-body > p { line-height: 1.6; }
.dlg-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes card-pop { from { opacity: 0; transform: scale(.92) translateY(12px); } }

/* 吹き出し（丸い顔＋吹き出し） */
.speech { display: flex; align-items: center; gap: 10px; }
.speech-face { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #fff 0, var(--surface-soft) 70%); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }
.speech-face .face { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-himikon { background: radial-gradient(circle at 50% 38%, #fff 0, #ffe0ee 72%); }
.face-taishika { background: radial-gradient(circle at 50% 38%, #fff 0, #ffe8cf 72%); }
.face-yamatojii { background: radial-gradient(circle at 50% 38%, #fff 0, #ece2f8 72%); }
.face-kontarou { background: radial-gradient(circle at 50% 38%, #fff 0, #e2efff 72%); }
.face-napoleo { background: radial-gradient(circle at 50% 38%, #fff 0, #fff1c7 72%); }
.face-shikiusa { background: radial-gradient(circle at 50% 38%, #fff 0, #efe5fa 72%); }
.bubble { position: relative; flex: 1; min-width: 0; padding: 8px 14px; border-radius: 18px 18px 18px 4px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); font-size: var(--fs-md); line-height: 1.55; text-align: left; }
.speaker { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--primary); }
.speech-taishika .speaker { color: #9a5108; }
@media (prefers-color-scheme: dark) { .speech-taishika .speaker { color: #ffb86b; } }
.speech-compact .speech-face { width: 48px; height: 48px; }
.speech-compact .bubble { padding: 6px 12px; }

/* 選択肢（はじめの設定・目標） */
.choice-list { display: grid; gap: 8px; }
.choice-list legend { font-weight: 700; font-size: var(--fs-lg); margin-bottom: 8px; }
.choice { display: grid; gap: 0; width: 100%; min-height: var(--tap-lg); padding: 8px 14px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); text-align: left; box-shadow: var(--shadow); transition: transform .12s; }
.choice strong { font-size: var(--fs-lg); }
.choice small { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.4; }
.choice.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 4px 0 var(--primary); }
.choice.selected strong::before { content: '✓ '; color: var(--primary); }
.choice:active, .choice-chip:active, .pick-item:active, .guess-option:active, .tile:active { transform: translateY(3px); box-shadow: none; }
.goal-pick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice-chip { display: grid; place-items: center; min-height: 72px; padding: 6px 4px; border-radius: var(--r-md); background: var(--secondary-soft); border: 2px solid transparent; box-shadow: 0 4px 0 color-mix(in srgb, var(--secondary) 35%, transparent); }
.choice-chip strong { font-size: var(--fs-xl); color: var(--secondary); line-height: 1.2; }
.choice-chip small { font-size: var(--fs-xs); color: var(--ink-soft); }
.pick-list { display: grid; gap: 8px; }
.pick-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--tap-lg); padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-soft); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); text-align: left; }
.pick-item strong { display: block; }
.pick-item small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); }
.pick-item .go { font-size: 1.6rem; color: var(--primary); line-height: 1; }
.info-row { padding: 8px 12px; border-radius: var(--r-sm); background: var(--gold-soft); font-size: var(--fs-sm); }

/* ---------- ことば・ボード ---------- */
.word { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 6px 4px; border-radius: var(--r-sm); background: var(--surface); text-align: center; }
.word-emoji { font-size: 1.8rem; line-height: 1.2; }
.word-text { font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.word-kanji { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.3; }
.word-img { width: 56px; height: 56px; object-fit: contain; }
.board { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.board-col { display: grid; grid-template-rows: auto; grid-auto-rows: 1fr; gap: 6px; align-content: start; padding: 0 6px 6px; border-radius: var(--r-md); }
.board-col h3 { margin: 0 -6px; padding: 4px; border-radius: var(--r-md) var(--r-md) 0 0; text-align: center; font-size: var(--fs-lg); color: var(--on-accent); }
.board-aru { background: var(--aru-soft); }
.board-aru h3 { background: var(--aru); }
.board-nashi { background: var(--nashi-soft); }
.board-nashi h3 { background: var(--nashi); }
.board.compact .board-col { gap: 4px; }
.board.compact .board-col h3 { font-size: var(--fs-md); padding: 2px; }
.board.compact .word { flex-direction: row; gap: 6px; min-height: 40px; padding: 2px 6px; }
.board.compact .word-emoji { font-size: 1.2rem; }
.board.compact .word-img { width: 30px; height: 30px; }
.board.compact .word-text { font-size: var(--fs-md); }
.board.compact .word-kanji { display: none; }

/* ---------- 遊んでいる 画面 ---------- */
.play-top { flex: none; display: grid; grid-template-columns: auto 1fr 52px; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) var(--pad) 0; }
.quit-btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 10px 0 6px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm); }
.lesson-bar { height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
.lesson-bar > span { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #ff8cc3); transition: width .45s cubic-bezier(.3, 1.4, .5, 1); }
.lesson-bar > span::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .45); }
.combo { display: inline-flex; align-items: center; justify-content: flex-end; font-weight: 700; font-size: var(--fs-lg); color: var(--primary); font-variant-numeric: tabular-nums; }
.play-label { flex: none; margin-top: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--pad); }
.play-body { gap: 10px; padding-top: 8px; }
.phase-board .board .word { min-height: 0; }
.question { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.retry-chip { align-self: center; padding: 2px 12px; border-radius: 999px; background: var(--gold-soft); color: #6b4700; font-size: var(--fs-sm); font-weight: 700; }
@media (prefers-color-scheme: dark) { .retry-chip { color: #ffd77a; } }
.ask { text-align: center; font-weight: 700; font-size: var(--fs-md); }
.word-big { flex: 1; min-height: 96px; padding: 6px 8px; border: 3px dashed var(--line); background: var(--surface-soft); border-radius: var(--r-md); }
.word-big .word-img { flex: 1 1 0; min-height: 36px; max-height: 140px; width: 100%; height: auto; }
.word-big .word-emoji { font-size: clamp(2.4rem, 9dvh, 4rem); }
.word-big .word-text { font-size: var(--fs-2xl); letter-spacing: .06em; }
.word-big .word-kanji { font-size: var(--fs-sm); }
.assist-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.assist-row:has(> :only-child) { grid-template-columns: 1fr; }
.hint-btn small { font-size: var(--fs-xs); color: var(--ink-soft); }
.hint-btn.attention { border-color: var(--gold); box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 70%, transparent); animation: nudge 1.8s ease-in-out 3; }
@keyframes nudge { 0%, 70%, 100% { rotate: 0deg; } 75% { rotate: -2deg; } 85% { rotate: 2deg; } }
.answer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-aru, .btn-nashi { min-height: var(--tap-xl); font-size: var(--fs-xl); color: var(--on-accent); }
.btn-aru { background: var(--aru); box-shadow: 0 4px 0 color-mix(in srgb, var(--aru) 60%, #000); }
.btn-nashi { background: var(--nashi); box-shadow: 0 4px 0 color-mix(in srgb, var(--nashi) 60%, #000); }
.answer-row .btn:disabled { opacity: .45; background: inherit; }
.answer-row .btn-aru:disabled { background: var(--aru); color: var(--on-accent); }
.answer-row .btn-nashi:disabled { background: var(--nashi); color: var(--on-accent); }
.answer-row .btn.chosen { opacity: 1; outline: 4px solid var(--secondary); outline-offset: 3px; }
strong.aru, b.aru { color: var(--aru); }
strong.nashi, b.nashi { color: var(--nashi); }
.just-ok .word-big { animation: pop .45s ease; border-color: color-mix(in srgb, var(--ok) 60%, transparent); position: relative; }
.just-ng .word-big { animation: shake .4s ease; border-color: color-mix(in srgb, var(--ng) 60%, transparent); }
.just-ok .word-big::after { content: ''; position: absolute; inset: -14px; background: url('assets/ui/fx-sparkle.webp') center / contain no-repeat; animation: sparkle-out .8s ease both; pointer-events: none; }
@keyframes pop { 40% { transform: scale(1.05); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes sparkle-out { from { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.05); } to { opacity: 0; transform: scale(1.1); } }

/* 正誤の シート（答えボタンの 上に 重なる） */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; gap: 12px; padding: 14px var(--pad) max(14px, calc(env(safe-area-inset-bottom) + 8px)); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px rgb(30 10 50 / .16); animation: sheet-up .28s cubic-bezier(.2, 1.2, .4, 1); }
.sheet.ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-top: 3px solid var(--ok); }
.sheet.ng { background: color-mix(in srgb, var(--ng) 15%, var(--surface)); border-top: 3px solid var(--ng); }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head strong { display: block; font-size: var(--fs-xl); line-height: 1.3; }
.sheet-head .mark { margin-right: 6px; }
.sheet.ok .sheet-head strong { color: var(--ok); }
.sheet.ng .sheet-head strong { color: var(--ng); }
.sheet-face { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--surface); border: 3px solid currentColor; }
.sheet.ok .sheet-face { color: var(--ok); }
.sheet.ng .sheet-face { color: var(--ng); }
.sheet-face .face { width: 100%; height: 100%; object-fit: cover; }
@keyframes sheet-up { from { transform: translateY(100%); } }
.react-ok { animation: hop-ok .6s cubic-bezier(.3, 1.6, .5, 1); }
.react-ng { animation: tilt .7s ease; transform-origin: bottom center; }
@keyframes hop-ok { 30% { translate: 0 -10px; rotate: -6deg; } 60% { translate: 0 0; rotate: 3deg; } }
@keyframes tilt { 25% { rotate: -8deg; } 60% { rotate: 5deg; } }

/* ひみつ当て（3択は 下の 段に） */
.guess { display: grid; gap: 6px; }
.phase-guess .dock { gap: 6px; }
.phase-guess .btn-ghost { min-height: 40px; }
.guess-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 4px 12px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); text-align: left; font-weight: 700; font-size: var(--fs-md); line-height: 1.35; transition: transform .12s; }
.guess-no { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--secondary-soft); color: var(--secondary); font-weight: 700; }

/* 答え合わせ（宇宙色の 決めの 画面） */
.reveal { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-md); color: #fff; background: var(--night) url('assets/ui/bg-space.webp') center / cover no-repeat; box-shadow: inset 0 0 0 2000px rgb(20 14 70 / .58); }
.reveal .bubble { color: var(--ink); }
.reveal .eyebrow { margin-top: 2px; }
.rule-answer small { display: block; font-size: var(--fs-sm); color: #e3d6ff; letter-spacing: .06em; }
.rule-answer { font-size: var(--fs-xl); color: #ffe08a; outline: none; animation: rule-in .7s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
.transforms { display: flex; flex-wrap: wrap; gap: 4px; }
.transforms li { padding: 1px 10px; border-radius: 999px; background: rgb(20 14 60 / .65); font-weight: 700; font-size: var(--fs-sm); line-height: 1.5; animation: rise .4s ease both; }
.transforms .word-img { flex: none; width: 26px; height: 26px; }
.transforms .word-emoji { font-size: 1.3rem; }
.transforms small { opacity: .85; }
.reveal-explain { font-size: var(--fs-md); line-height: 1.55; }
.reveal .speaker { display: none; }
.reveal-title { font-size: var(--fs-sm); color: #e3d6ff; }
.reveal.insight { box-shadow: inset 0 0 0 2000px rgb(20 14 70 / .5), 0 0 0 3px #ffe08a, 0 0 24px rgb(255 224 138 / .5); }
.reveal.insight .rule-answer { text-shadow: 0 0 16px rgb(255 224 138 / .8); }
.insight-badge { justify-self: start; display: inline-flex; gap: 6px; padding: 2px 16px; border-radius: 999px; background: #ffe08a; color: #3b2a00; font-weight: 700; font-size: var(--fs-lg); letter-spacing: .1em; animation: pop .6s ease both; }
.guess-was { font-size: var(--fs-sm); color: #e6dcff; }
.answers { display: flex; flex-wrap: wrap; gap: 6px; }
.answers li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); font-size: var(--fs-sm); }
.answers li.ok .mark { color: var(--ok); font-weight: 700; }
.answers li.ng .mark { color: var(--ng); font-weight: 700; }
@keyframes rule-in { from { opacity: 0; transform: scale(.85); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.speech.fx-insight .speech-face { box-shadow: 0 0 0 3px #ffe08a, 0 0 18px rgb(255 224 138 / .8); }

/* ---------- 結果 ---------- */
.result-screen .screen-body { justify-content: center; }
.result { display: grid; gap: 8px; text-align: center; animation: rise .35s ease; }
.result h1 { font-size: var(--fs-2xl); outline: none; }
.result h1 small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); }
.result .answers { justify-content: center; }
.result-hero { position: relative; display: flex; justify-content: center; align-items: flex-end; height: clamp(72px, 15dvh, 150px); }
.result-burst { position: absolute; top: 0; left: 50%; height: clamp(72px, 15dvh, 150px); width: auto; aspect-ratio: 1; translate: -50% 0; animation: burst-in .6s cubic-bezier(.2, 1.4, .4, 1) both, spin-slow 18s linear .6s infinite; }
.result-figure { position: relative; height: clamp(68px, 14dvh, 140px); width: auto; transform-origin: bottom center; animation: hop-ok .8s cubic-bezier(.3, 1.6, .5, 1) .25s both; filter: drop-shadow(0 6px 6px rgb(40 20 80 / .2)); }
@keyframes burst-in { from { transform: scale(.3); opacity: 0; } }
@keyframes spin-slow { to { rotate: 360deg; } }
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stat-cards.result-main-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-details { text-align: left; margin: 10px 0; padding: 4px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.ck-rank-details { margin: 12px 0; padding: 4px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.screen details > summary, .dialog-card details > summary { cursor: pointer; min-height: 48px; padding: 10px 4px; font-weight: 700; }
details > summary:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.stat-card { border-radius: var(--r-sm); border: 2px solid; overflow: hidden; text-align: center; background: var(--surface); animation: rise .35s ease both; }
.stat-card:nth-child(2) { animation-delay: .08s; } .stat-card:nth-child(3) { animation-delay: .16s; } .stat-card:nth-child(4) { animation-delay: .24s; }
.stat-card span { display: block; padding: 2px 0; font-size: var(--fs-xs); font-weight: 700; color: #fff; white-space: nowrap; }
.stat-card strong { display: block; padding: 4px 0 6px; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-card small { font-size: var(--fs-xs); margin-left: 1px; }
.stat-card.c-pink { border-color: var(--primary); } .stat-card.c-pink span { background: var(--primary); } .stat-card.c-pink strong { color: var(--primary); }
.stat-card.c-green { border-color: var(--ok); } .stat-card.c-green span { background: var(--ok); } .stat-card.c-green strong { color: var(--ok); }
.stat-card.c-blue { border-color: var(--nashi); } .stat-card.c-blue span { background: var(--nashi); } .stat-card.c-blue strong { color: var(--nashi); }
.stat-card.c-gold { border-color: #b07c06; } .stat-card.c-gold span { background: #8d6200; } .stat-card.c-gold strong { color: #7a5400; }
@media (prefers-color-scheme: dark) { .stat-card span { color: #1a0f24; } .stat-card.c-gold span { background: #f4b625; } .stat-card.c-gold strong { color: #f4b625; } }
.notes { display: grid; gap: 6px; text-align: left; }
.notes li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line); animation: rise .4s ease .3s both; }
.notes strong { display: block; font-size: var(--fs-md); color: var(--secondary); line-height: 1.35; }
.notes small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4; }
.note-icon { width: 36px; height: 36px; flex: none; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 3px; opacity: 0; animation: fall 2.4s ease-in forwards; }
.confetti.big i { width: 11px; height: 16px; animation-duration: 3.2s; }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--drift), 640px) rotate(540deg); } }

/* ---------- はじめの 設定 ---------- */
@keyframes float { 50% { transform: translateY(-4px); } }

/* ---------- マップ（1画面） ---------- */
.map-body { gap: 10px; overflow-y: auto; }
.today { flex: none; padding: 10px 12px 8px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.today.done { background: color-mix(in srgb, var(--gold-soft) 70%, var(--surface)); }
.today-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.streak { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-weight: 700; }
.streak b { font-size: var(--fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.streak small { font-size: var(--fs-xs); line-height: 1.15; color: var(--ink-soft); }
.streak small br { display: block; }
.streak-flame { width: 36px; height: 36px; }
.perfect-tag { position: absolute; left: 0; bottom: -12px; font-style: normal; font-size: .65rem; color: #8d6200; white-space: nowrap; }
.today-goal { min-width: 0; } /* 文字「大」で クエストの 枠を 押し出さない（2026-10-08 Android で 確認） */
.today-goal p { font-size: var(--fs-sm); line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow-wrap: normal; }
html.text-large .today-goal p { white-space: normal; }
.today-goal strong { font-size: var(--fs-sm); }
.today-note { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); }
.ok-tag { padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); font-weight: 700; font-size: var(--fs-xs); }
.quest-btn { display: grid; justify-items: center; min-width: 60px; min-height: var(--tap); padding: 2px 6px; border-radius: var(--r-sm); background: var(--secondary-soft); color: var(--secondary); font-weight: 700; font-size: var(--fs-xs); line-height: 1.2; }
.quest-btn b { display: block; font-size: var(--fs-md); }
.quest-icon { width: 26px; height: 26px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; text-align: center; }
.week-strip li { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; line-height: 1.3; }
.wk-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-soft); border: 2px dashed var(--line); }
.week-strip li.played .wk-mark { background: var(--primary-soft); border: 2px solid var(--primary); }
.week-strip li.today .wk-mark { box-shadow: 0 0 0 3px var(--secondary); }
.week-strip li.today .wk-label { color: var(--secondary); }
.week-strip li.future .wk-mark { opacity: .5; }
.wk-icon { width: 22px; height: 22px; }
.ticket, .week-strip li.frozen .wk-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #dbeafe; color: #1e40af; font-weight: 700; }
.week-strip li.frozen .wk-mark { border-radius: 50%; border: 2px solid #93c5fd; font-size: var(--fs-xs); }
.ticket.empty { background: var(--surface-soft); color: var(--ink-soft); }
.today-row { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.today-row:has(> :only-child) { grid-template-columns: 1fr; }
.tile { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--tap-lg); padding: 6px 10px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); text-align: left; transition: transform .12s; }
.tile > span { min-width: 0; display: grid; }
.tile strong { font-size: var(--fs-md); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.tile small { font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.done { background: var(--gold-soft); }
.tile-icon { flex: none; width: 36px; height: 36px; }

/* 章の パネル（ページ送り） */
.chapter-panel { flex: 1; min-height: 200px; display: flex; flex-direction: column; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 78%, transparent); border: 2px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.chapter-head { position: relative; flex: none; display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: 4px; min-height: 58px; padding: 4px 6px; background: var(--secondary-soft) center / cover no-repeat; }
.chapter-title { justify-self: center; max-width: 100%; padding: 2px 12px 4px; border-radius: var(--r-sm); background: rgb(255 255 255 / .9); color: #261736; text-align: center; }
.chapter-title h2 { font-size: var(--fs-lg); line-height: 1.3; }
.chapter-title small { font-size: var(--fs-xs); color: #8e1452; font-weight: 700; }
.pager-btn { z-index: 1; width: var(--tap); height: var(--tap); border-radius: 50%; background: rgb(255 255 255 / .92); color: #6f45a6; font-size: 1.8rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 0 rgb(0 0 0 / .15); }
.pager-btn:disabled { opacity: .35; box-shadow: none; }
.pager-dots { flex: none; display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; }
.pager-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pager-dots i.on { background: var(--primary); }
.stage-grid { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 4px; padding: 10px 8px 2px; }
.trail { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.trail path { fill: none; stroke: color-mix(in srgb, var(--secondary) 30%, transparent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 15; }
.trail path.done { stroke: color-mix(in srgb, var(--gold) 85%, transparent); }
.node { position: relative; z-index: 1; place-self: center; height: min(64px, 100%); aspect-ratio: 1; width: auto; border-radius: 50%; }
.node.fogged { background: radial-gradient(circle, color-mix(in srgb, var(--surface) 70%, transparent) 0, transparent 70%); opacity: .6; }
.map-node { display: grid; place-items: center; font-weight: 700; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8cc3, var(--primary) 70%); box-shadow: 0 5px 0 var(--primary-press); transition: transform .12s, box-shadow .12s; }
.map-node b { font-size: var(--fs-xl); text-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.map-node.done { background: radial-gradient(circle at 35% 30%, #ffe48a, var(--gold) 70%); box-shadow: 0 5px 0 #c98e0c; }
.map-node.locked { background: radial-gradient(circle at 35% 30%, #efe9f2, #d6cddc 70%); box-shadow: 0 5px 0 #b9adc2; }
.map-node.open:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--primary-press); }
.map-node.next { outline: 4px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 3px; }
.map-node .node-mark { display: grid; place-items: center; }
.node-icon { width: 60%; height: 60%; margin: 20%; position: absolute; inset: 0; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .12)); }
.mystery-mark { color: #6b5d77 !important; text-shadow: 0 2px 0 #fff !important; }
.node-badge { position: absolute; top: -6px; right: -6px; }
.badge-mini { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.node-no { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); min-width: 26px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--fs-xs); line-height: 20px; border: 2px solid var(--line); }
.map-node em { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 0 8px; border-radius: 9px; background: var(--surface); color: var(--primary); border: 2px solid var(--primary); font-style: normal; font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.map-node.open:not(.done)::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); animation: node-pulse 1.6s ease-out 3; pointer-events: none; }
@keyframes node-pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.map-node.just-unlocked { animation: node-unlock .7s .35s both cubic-bezier(.3, 1.7, .5, 1); }
.unlock-burst { position: absolute; left: 50%; top: 50%; width: 120px; max-width: none; pointer-events: none; transform: translate(-50%, -50%); animation: unlock-burst 1.1s .1s both ease-out; }
@keyframes node-unlock { 0% { filter: grayscale(1); transform: scale(.6); } 60% { transform: scale(1.2); } 100% { filter: none; transform: none; } }
@keyframes unlock-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1.25); } }
.chapter-fog { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; animation: fog-clear 1.6s .5s both ease-in; }
@keyframes fog-clear { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(2.2) translateY(-20%); } }
.mystery-body { flex: 1; min-height: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 8px 14px; text-align: center; }
.mystery-gate { height: clamp(60px, 14dvh, 120px); width: auto; }
.mystery-body p { font-size: var(--fs-md); }
.mystery-body small { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ステージの くわしい 内容（ダイアログ） */
.stage-art { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--gold-soft), var(--surface-soft)); }
.stage-aru { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--aru); color: var(--on-accent); font-weight: 700; font-size: var(--fs-sm); }
.stage-pics { display: flex; gap: 2px; }
.stage-pics .word-img { width: 56px; height: 56px; }
.stage-word { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 6px; border-radius: 12px; background: var(--surface); font-weight: 700; }
.stage-kind { margin-left: auto; }
.stage-kind-icon { width: 44px; height: 44px; }
.stage-name { font-weight: 700; font-size: var(--fs-lg); text-align: center; }
.stage-name:not(:has(*)) { color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.facts div { padding: 6px; border-radius: var(--r-sm); background: var(--surface-soft); text-align: center; }
.facts dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.facts dd { font-weight: 700; font-size: var(--fs-sm); }
.badge-diff { padding: 1px 10px; border-radius: 999px; font-weight: 700; }
.badge-diff.d1 { background: #e0f5e6; color: #1f6b38; }
.badge-diff.d2 { background: var(--gold-soft); color: #6b4700; }
.badge-diff.d3 { background: var(--secondary-soft); color: var(--secondary); }

/* 新しい 場所が ひらいた */
.newplace { z-index: 75; }
.newplace-card { overflow: visible; }
.newplace-fx { position: absolute; left: 50%; top: 30%; width: min(150%, 520px); max-width: none; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; animation: spin-in 1.2s both ease-out; }
.newplace-label { color: var(--secondary); font-weight: 700; margin-bottom: 8px; }
.newplace-art { position: relative; aspect-ratio: 3 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--secondary-soft) center / cover no-repeat; margin-bottom: 10px; }
.newplace-fog { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fog-clear 1.4s .6s both ease-in; }
@keyframes spin-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-30deg); } to { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(0); } }

/* クエスト・遊び方 */
.quests { display: grid; gap: 8px; }
.quests li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-soft); }
.q-check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; font-size: var(--fs-sm); }
.quests li.done .q-check { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.quests li.done { color: var(--ink-soft); }
.q-reward { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
.tutorial { display: grid; gap: 10px; }
.tutorial li { display: flex; gap: 10px; align-items: flex-start; }
.tut-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--secondary); color: #fff; font-weight: 700; }
.tutorial strong { display: block; font-size: var(--fs-md); }
.tutorial small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }

/* ---------- 記録 ---------- */
.records .screen-body, .settings .screen-body { gap: 10px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; justify-items: center; padding: 8px 4px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); }
.stat strong { font-size: var(--fs-xl); color: var(--primary); line-height: 1.2; }
.stat strong small { font-size: var(--fs-xs); }
.stat span { font-size: var(--fs-xs); color: var(--ink-soft); }
.week-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; }
.week-stats div { padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-soft); }
.week-stats dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.week-stats dd { font-size: var(--fs-xl); font-weight: 700; color: var(--primary); line-height: 1.3; }
.week-stats dd small { font-size: var(--fs-xs); margin-left: 2px; }
.week-stats em { display: block; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.profile .trend { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.profile .trend strong { font-size: var(--fs-2xl); line-height: 1; }
.profile .trend span { font-size: var(--fs-sm); color: var(--ink-soft); }
.profile .trend em { display: block; font-style: normal; font-weight: 700; }
.trend em.up { color: var(--ok); }
.trend em.down { color: var(--ng); }
.kind-bars { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kind-bars th { text-align: left; font-weight: 700; padding: 3px 8px 3px 0; white-space: nowrap; }
.kind-bars td { padding: 3px 0; }
.kind-bars td.bar-cell { width: 100%; }
.kind-bars td.num { width: 3.2em; text-align: right; color: var(--ink-soft); white-space: nowrap; overflow-wrap: normal; }
.kind-bars .bar { display: block; height: 10px; margin-right: 8px; border-radius: 4px; background: var(--surface-soft); }
.kind-bars .bar > span { display: block; height: 100%; border-radius: 4px; background: var(--secondary); }
.kind-bars em { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: var(--fs-xs); }
.tag-good { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); }
.tag-grow { background: var(--gold-soft); color: var(--ink); }
.zukan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.zukan-grid li { display: grid; justify-items: center; gap: 0; padding: 6px 2px; border-radius: var(--r-sm); background: var(--surface-soft); border: 1px dashed var(--line); text-align: center; }
.zukan-grid li.got { background: var(--secondary-soft); border-style: solid; border-color: transparent; }
.zukan-grid small { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-soft); }
.zukan-grid li.got small { color: var(--ink); font-weight: 700; }
.zukan-icon { width: 34px; height: 34px; }
.zukan-q { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-soft); font-weight: 700; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge { display: grid; justify-items: center; padding: 6px 2px; border-radius: var(--r-sm); background: var(--surface-soft); border: 1px dashed var(--line); text-align: center; color: var(--ink-soft); }
.badge small { font-size: var(--fs-xs); line-height: 1.3; }
.badge-icon { width: 44px; height: 44px; }
.badge:not(.got) .badge-icon { filter: grayscale(1) opacity(.35); }
.badge.got { background: var(--gold-soft); border-style: solid; color: var(--ink); }
.week, .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.week { font-size: var(--fs-xs); color: var(--ink-soft); }
.calendar li { display: grid; place-items: center; min-height: 30px; border-radius: 8px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.calendar li.played { background: var(--primary-soft); }
.cal-icon { width: 22px; height: 22px; }
.calendar li.today { outline: 2px solid var(--secondary); outline-offset: -2px; }
.history li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.history li:last-child { border-bottom: 0; }
.history small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---------- 設定 ---------- */
.back-btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px 0 6px; border-radius: var(--r-sm); color: var(--secondary); font-weight: 700; }
.settings .screen-head { justify-content: flex-start; }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--tap-lg); padding-block: 6px; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting > span:first-child small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.toggle { min-width: 76px; min-height: var(--tap); padding: 4px 14px; border-radius: 999px; font-weight: 700; background: var(--line); color: var(--ink); }
.toggle[aria-checked="true"] { background: var(--primary); color: var(--on-accent); }
.import-label { display: block; margin-top: 12px; font-size: var(--fs-sm); font-weight: 700; }
.import-code { width: 100%; margin-top: 6px; padding: 10px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface-soft); color: var(--ink); font: inherit; font-size: var(--fs-sm); resize: vertical; }
.panel-card .btn-block + .btn-block, .panel-card .btn-block { margin-top: 8px; }

/* ---------- げんき・広告 ---------- */
.stamina-icon { display: inline-block; width: 28px; height: 28px; object-fit: contain; flex: none; vertical-align: middle; }
.stamina-icon.big { width: 48px; height: 48px; }
.stamina-icon.inline { width: 1.4em; height: 1.4em; margin-right: 2px; vertical-align: -0.35em; }
.energy-big { display: grid; justify-items: center; gap: 0; margin-bottom: 4px; }
.energy-name { display: block; font-size: var(--fs-md); color: var(--ink); margin-bottom: 2px; }
.dlg-card .energy-name { display: none; } /* ダイアログは 見出しに 名前が ある */
.energy-big img { width: 48px; height: 48px; }
.energy-big p { font-weight: 700; line-height: 1; }
.energy-big b { font-size: 2.2rem; color: var(--primary); }
.energy-big p span { font-size: var(--fs-lg); color: var(--ink-soft); margin-left: 4px; }
.energy-big small { font-size: var(--fs-sm); color: var(--ink-soft); }
.ad-note { margin-top: -4px; font-size: var(--fs-xs); color: var(--ink-soft); text-align: center; }
.ad-sim { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; background: #120b1a; color: #fff; text-align: center; animation: fade-in .2s; }
.ad-sim-label { font-size: var(--fs-sm); color: #cdbcd8; }
.ad-sim-box { display: grid; place-items: center; gap: 8px; width: min(100%, 320px); aspect-ratio: 16 / 9; border-radius: var(--r-md); background: linear-gradient(135deg, #3a2a5a, #6f45a6); }
.ad-sim-box { overflow: hidden; }
.ad-sim-box img { height: 110px; width: auto; }
.ad-sim-count b { font-size: var(--fs-2xl); }

/* ---------- お知らせ（トースト） ---------- */
#toast { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 120; width: max-content; max-width: min(400px, 92%); padding: 12px 20px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: var(--fs-md); font-weight: 700; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.visible { opacity: 1; }

/* ---------- 炎の 段階（れんぞくが のびるほど 色が 変わる） ---------- */
.flame-out .ui-icon { filter: grayscale(1) opacity(.5); }
.flame-hot .ui-icon { filter: drop-shadow(0 0 4px rgb(255 120 40 / .8)); }
.flame-gold .ui-icon { filter: hue-rotate(25deg) saturate(1.4) drop-shadow(0 0 6px rgb(255 200 40 / .9)); }
.flame-legend .ui-icon { filter: hue-rotate(250deg) saturate(1.5) drop-shadow(0 0 7px rgb(180 120 255 / .9)); }

/* ---------- 低い 画面（iPhone SE など）: 余白と 絵を 少し 詰める ---------- */
@media (max-height: 760px) {
  .phase-board .board .word { flex-direction: row; gap: 8px; min-height: 54px; }
  .phase-board .board .word-img { width: 44px; height: 44px; }
}
@media (max-height: 700px) {
  .board-col h3 { font-size: var(--fs-md); }
  .notes li.result-notes-extra { display: none; }
  .transforms li, .answers li { font-size: var(--fs-xs); padding: 0 8px; }
  .transforms, .answers { gap: 3px; }
  .reveal { gap: 4px; padding: 10px 12px; }
  .result { gap: 6px; }
  .stat-card strong { font-size: var(--fs-lg); padding: 2px 0 4px; }
  .week-stats { margin: 6px 0; }
  .week-stats dd { font-size: var(--fs-lg); }
  .energy-panel { padding: 8px 10px; gap: 6px; }
  .board.compact .word { min-height: 36px; }
  .board.compact .word-img { width: 26px; height: 26px; }
  .play-body { gap: 6px; padding-top: 6px; }
  .today { padding: 8px 10px 6px; }
  .wk-mark { width: 26px; height: 26px; }
  .wk-icon { width: 18px; height: 18px; }
}
@media (max-width: 360px) {
  .counter-icon { width: 20px; height: 20px; }
  .hud-chip .of { font-size: 13px; }
}

/* ---------- 動きを 減らす（端末の 設定・アプリの 設定） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html.reduce-motion .confetti, html.reduce-motion .unlock-burst, html.reduce-motion .chapter-fog, html.reduce-motion .newplace-fog { display: none; }

/* ---------- ひみコンの 脳うらない（v1.6） ---------- */
.mag-icon, .tile-emoji, .shop-emoji, .dlg-emoji { display: inline-block; object-fit: contain; flex: none; }
.mag-icon { width: 1.3em; height: 1.3em; margin-right: 1px; vertical-align: -0.3em; }
.tile-emoji { width: 36px; height: 36px; }
.shop-emoji { width: 44px; height: 44px; }
.dlg-art { margin: 0; text-align: center; line-height: 1; }
.dlg-emoji { width: 64px; height: 64px; }
.hint-cost { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--secondary-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tile-hot { border-color: var(--primary); box-shadow: 0 4px 0 var(--primary); background: var(--primary-soft); }
/* タイルが 3つの ときは 縦に 積む（絵の 下に 名前） */
.today-row:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.today-row:has(> :nth-child(3)) .tile { flex-direction: column; justify-content: center; gap: 0; padding: 4px; text-align: center; }
.today-row:has(> :nth-child(3)) .tile-icon, .today-row:has(> :nth-child(3)) .tile-emoji { width: 28px; height: 28px; }
.today-row:has(> :nth-child(3)) .tile strong { font-size: var(--fs-sm); }
.ck-prompt-fig { height: 110px; margin: -6px auto 4px; }
.ck .screen-body { gap: 10px; }
.ck-hero { display: flex; align-items: center; gap: 12px; margin: calc(-1 * var(--gap)) calc(-1 * var(--pad)) 0; padding: max(12px, env(safe-area-inset-top)) var(--pad) 12px; color: #fff; background: var(--night) url('assets/ui/banner-hero.webp') center / cover no-repeat; }
.ck-hero img { height: 80px; filter: drop-shadow(0 6px 8px rgb(20 10 60 / .4)); }
.ck-hero h1 { font-size: var(--fs-xl); line-height: 1.25; text-shadow: 0 2px 8px rgb(20 10 60 / .6); outline: none; }
.ck-hero p { font-size: var(--fs-sm); color: #f6efff; }
.ck-list { display: grid; gap: 6px; }
.ck-list li { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line); }
.ck-list img { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-soft); }
.ck-list strong { display: block; }
.ck-list small { color: var(--ink-soft); font-size: var(--fs-sm); }
.ck-note { text-align: center; }
.ck-top { grid-template-columns: auto minmax(0, 1fr); }
.ck-top > span:last-child { display: none; }
.ck-step { min-width: 0; padding: 4px 8px; border-radius: var(--r-sm); background: var(--surface); text-align: center; font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.ck-step b { font-size: var(--fs-lg); color: var(--primary); }
.ck-ready { justify-content: safe center; align-items: center; text-align: center; }
.ck-host { height: clamp(120px, 26dvh, 220px); width: auto; filter: drop-shadow(0 6px 6px rgb(40 20 80 / .2)); }
.ck-ready .speech { align-self: stretch; text-align: left; }
.ck-example { display: grid; justify-items: center; padding: 8px 20px; border-radius: var(--r-md); background: var(--surface); border: 2px dashed var(--line); }
.ck-example span { font-size: var(--fs-2xl); font-weight: 700; }
.ck-example small { color: var(--ink-soft); }
.ck-count { justify-content: center; align-items: center; }
.ck-count-num { font-size: 5rem; font-weight: 700; color: var(--primary); animation: pop .6s ease; }
.ck-time { position: relative; flex: none; height: 26px; margin: 8px var(--pad) 0; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
.ck-time span { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); transition: width .1s linear; }
.ck-time b { position: relative; display: block; width: fit-content; margin-inline: auto; padding-inline: 10px; border-radius: 999px; background: var(--surface); text-align: center; font-size: var(--fs-md); line-height: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-q { justify-content: safe center; align-items: center; text-align: center; }
.ck-q-label { padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--ink); text-align: center; }
.ck-big { font-size: clamp(2.4rem, 9dvh, 3.4rem); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ck-word { padding: 6px 28px; border-radius: var(--r-md); background: #fff; border: 2px solid var(--line); letter-spacing: .08em; }
.ck-tally { display: flex; gap: 16px; padding: 2px 12px; border-radius: var(--r-sm); background: var(--surface); font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-tally .ok { color: var(--ok); }
.ck-tally .ng { color: var(--ng); }
.ck-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck-ans { min-height: var(--tap-xl); font-size: var(--fs-xl); color: var(--ink); }
.ck-color { gap: 8px; font-size: var(--fs-lg); }
.ck-color i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(0 0 0 / .15); }
.ck-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ck-grid-show { grid-template-columns: repeat(3, 1fr); }
.ck-grid li { display: grid; }
.ck-card { display: grid; justify-items: center; gap: 0; width: 100%; padding: 4px 2px; border-radius: var(--r-sm); background: var(--surface); border: 3px solid var(--line); text-align: center; }
.ck-card img { width: 100%; max-width: 72px; aspect-ratio: 1; object-fit: contain; }
.ck-card span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; }
.ck-grid-show .ck-card img { max-width: 96px; }
.ck-grid-show .ck-card span { font-size: var(--fs-md); }
.ck-card.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary); }
.ck-grid:not(.ck-grid-show) { grid-template-columns: repeat(3, 1fr); }
.ck-result { justify-content: center; text-align: center; }
.ck-result-label { align-self: center; padding: 4px 12px; border-radius: var(--r-sm); background: var(--surface); font-weight: 700; color: var(--ink); }
.ck-age { font-size: var(--fs-xl); font-weight: 700; color: var(--primary); }
.ck-age b { font-size: 4.2rem; line-height: 1; margin-right: 4px; }
.ck-prev { color: var(--ink-soft); font-size: var(--fs-sm); }
.ck-result .speech { text-align: left; }
.ck-bars { display: grid; gap: 6px; text-align: left; }
.ck-bars li { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.ck-bars .bar { display: block; height: 12px; border-radius: 6px; background: var(--surface-soft); border: 1px solid var(--line); overflow: hidden; }
.ck-bars .bar span { display: block; height: 100%; background: var(--secondary); }
.ck-omikuji { justify-content: center; align-items: center; text-align: center; }
.ck-box { display: grid; place-items: center; width: 110px; height: 170px; border-radius: 14px 14px 20px 20px; background: linear-gradient(#e2463a, #a8261c); color: #fff; font-weight: 700; writing-mode: vertical-rl; font-size: 1.4rem; letter-spacing: .3em; box-shadow: 0 8px 0 #7a1a12; animation: ck-shake .35s ease-in-out infinite; }
@keyframes ck-shake { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
.ck-slip { position: relative; width: min(100%, 300px); padding: 12px 16px; border-radius: 6px; background: #fffdf5; color: #261736; border: 2px solid #e6d3b0; box-shadow: 0 6px 18px rgb(60 30 10 / .15); animation: card-pop .5s var(--ease) both; }
.ck-slip-head { font-size: var(--fs-sm); color: #8a5a00; letter-spacing: .2em; }
.ck-fortune { font-size: 3rem; font-weight: 700; color: #c81c1c; line-height: 1.2; }
.ck-slip-word { font-size: var(--fs-sm); line-height: 1.5; }
.ck-gift-title { font-size: var(--fs-lg); outline: none; }
.ck-gifts { display: grid; gap: 6px; width: 100%; text-align: left; }
.ck-gifts li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line); animation: rise .4s ease .4s both; }
.ck-gifts img { width: 40px; height: 40px; }
.ck-mag { display: block; width: 40px; height: 40px; object-fit: contain; flex: none; }
.ck-gifts strong { display: block; }
.ck-gifts small { color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---------- v1.7: 脳年齢の 記録・れんぞくの ごほうび ---------- */
.age-chart { margin: 4px 0 8px; }
.age-chart svg { display: block; width: 100%; height: auto; max-height: 24dvh; }
.age-chart .grid line { stroke: var(--line); stroke-width: 1; }
.age-chart text { fill: var(--ink-soft); font-size: 11px; font-family: inherit; }
.age-chart .line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.age-chart .dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2.5; }
.age-chart .dot.last { fill: var(--primary); }
.brain-note { margin-top: 6px; font-size: var(--fs-xs); }
.next-reward { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-md); background: var(--surface); border: 2px dashed var(--line); }
.next-reward strong { display: block; font-size: var(--fs-sm); }
.next-reward small { color: var(--ink-soft); font-size: var(--fs-sm); }
.records .seg-btn { padding-inline: 2px; font-size: var(--fs-sm); } /* 6つ 並ぶので 少し 小さく */

/* 背の 低い 画面（360×640 など）では 脳うらないの はじめの 画面を 詰める */
@media (max-height: 680px) {
  .ck-hero { padding-block: max(8px, env(safe-area-inset-top)) 8px; }
  .ck-hero img { height: 60px; }
  .ck-list li { padding: 2px 10px; }
  .ck-list img { width: 34px; height: 34px; }
}

/* ---------- 機能の 紹介・はじめの設定の 文字の 大きさ・かけらの 注意（v1.8） ---------- */
.feature-intro { margin-bottom: 8px; text-align: left; }
.feature-list { display: grid; gap: 6px; text-align: left; }
.feature-list li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface-soft); border: 2px solid var(--line); }
.feature-list strong { display: block; font-size: var(--fs-md); color: var(--secondary); line-height: 1.35; }
.feature-list small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4; }
.kakera-note { padding: 8px 12px; border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.dlg-body > p > small { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-soft); }
.kakera-note small { display: block; font-weight: 500; color: var(--ink-soft); }

/* 広告の 追跡の 説明（iOS。ui.js の askTrackingOnce） */
.att-layer { z-index: 90; }
.att-fig { height: 96px; margin: -4px auto 4px; }

/* 脳うらないの 練習（v1.9。check.js） */
.ck-practice-tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--secondary); color: #fff; font-style: normal; font-size: var(--fs-sm); vertical-align: middle; }
.ck-practice-note { padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface); border: 2px dashed var(--line); font-size: var(--fs-sm); text-align: left; }
.ck-practice-bar b { font-size: var(--fs-sm); }
.ck-practice-fb { min-height: 1.6em; padding: 2px 10px; border-radius: var(--r-sm); background: var(--surface); font-weight: 700; font-size: var(--fs-lg); }
.ck-practice-fb.ok { color: var(--ok); }
.ck-practice-fb.ng { color: var(--ng); }
.ck-practice-sum { display: grid; gap: 6px; text-align: left; }
.ck-practice-sum li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line); }
/* 文字「大」の 小さい 画面では、脳うらないの はじめの 画面の 補足（試しの 説明）を 省く。試しの 名前は 残す */
@media (max-height: 700px) {
  html:is(.text-large, .text-xlarge) .ck-list small { display: none; }
  html:is(.text-large, .text-xlarge) .ck-list li { padding-block: 2px; }
  html:is(.text-large, .text-xlarge) .ck-hero img { height: 52px; }
}

/* ---------- v1.9: Apple・Google の 基準での 直し（docs/reviews/2026-10-08_platform-uiux-review.md） ---------- */
/* H3 コントラスト: 選んでいる タブの 文字（4.4 → 6:1 前後）・れんぞくの「パーフェクト」（11px・3.3:1 → 13px・4.5:1 以上） */
:root { --primary-ink: #9e0f58; }
@media (prefers-color-scheme: dark) { :root { --primary-ink: #ffa6d0; } }
.nav-link.active { color: var(--primary-ink); }
.perfect-tag { font-size: 13px; color: #7a4c00; }
@media (prefers-color-scheme: dark) { .perfect-tag { color: #ffd77a; } }
/* OS の「コントラストを 上げる」: 線を 濃く、補足の 文字を 本文と 同じ 濃さに */
@media (prefers-contrast: more) {
  :root { --line: color-mix(in srgb, var(--ink) 55%, transparent); --ink-soft: var(--ink); }
  .btn, .tile, .panel-card, .dlg-card, .seg { border-color: var(--ink); }
}
/* H2 押せる 大きさ: マップの ステージは 文字の 大きさに 関係なく 48px 以上・文字だけの ボタンも 48px */
.node { height: max(48px, min(64px, 100%)); }
.stage-grid { grid-template-rows: repeat(var(--rows), minmax(52px, 1fr)); }
.btn-ghost, .phase-guess .btn-ghost { min-height: 48px; }
/* H2 短い 語を 途中で 折らない（やさしい・ふつう など） */
.badge-diff, .facts dd { white-space: nowrap; }
/* 特大（v1.9）: マップの 3つの タイルは 名前を 省略しない（「脳うら…」に ならない ように）。
   ステージの くわしい 内容の 見出し（むずかしさ など）は 途中で 折らない */
html.text-xlarge .today-row .tile strong { overflow: visible; text-overflow: clip; font-size: 18px; letter-spacing: 0; }
html.text-xlarge .today-row .tile small { display: none; } /* 補足（1日1回 など）は 省き、名前を 1行で 大きく */
html.text-xlarge .facts dt { white-space: nowrap; font-size: 14px; }

/* ---------- v2.0: タイシカの 脳年齢テスト（check.js・lib/kani.js） ---------- */
.kani-crown { flex: none; display: block; object-fit: contain; }
.ck-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(#f1dcb0, #dcbf86); color: #5a3a14; font-weight: 700; font-size: 1.2rem; border: 2px solid #b9955a; flex: none; }
.kani-now { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); }
.kani-now .kani-crown { grid-row: span 2; }
.kani-now p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kani-now small { color: var(--ink-soft); font-size: var(--fs-xs); }
.kani-now strong { font-size: var(--fs-lg); }
.kani-now span { font-size: var(--fs-xs); color: var(--ink-soft); }
.kani-exam strong { color: var(--primary-ink, var(--primary)); font-size: var(--fs-md); }
.kani-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); text-align: left; }
.kani-card.promoted { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow); }
.kani-card.promoted .kani-crown { animation: kani-award .9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes kani-award { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.kani-card dl { display: grid; gap: 4px; flex: 1; min-width: 0; }
.kani-card dl div { display: flex; align-items: baseline; gap: 10px; }
.kani-card dt { width: 3.5em; flex: none; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 700; }
.kani-card dd { font-size: var(--fs-lg); font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; min-width: 0; } /* 読みが 幅に 入らない ときは 次の 行へ（360px で 切れていた） */
.kani-card dd small { white-space: nowrap; }
.kani-card dd b { font-size: var(--fs-xl); color: var(--primary-ink, var(--primary)); }
.kani-card dd s { color: var(--ink-soft); font-weight: 400; }
.kani-card dd small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; }
.kani-mean { font-weight: 700; color: var(--ink-soft); }
.kani-bars li { grid-template-columns: 8.5em 1fr 2.2em; }
.kani-bars .bar { position: relative; overflow: visible; }
.kani-bars .bar > span { border-radius: 6px; }
.kani-bars .pass { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ng); }
.kani-bars b { text-align: right; }
.kani-prompt { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
/* サイコロ（点の 目。朱は 裏の 目） */
.kd-dice { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.kd-die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; width: clamp(60px, 18vw, 76px); aspect-ratio: 1; padding: 9px; border-radius: 14px; background: linear-gradient(145deg, #ffffff, #e9e4da); border: 2px solid #b8b0a2; box-shadow: 0 5px 0 #b8b0a2; animation: kd-roll .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--d) * 60ms); }
.kd-die i { border-radius: 50%; }
.kd-die i.on { background: #1f1f1f; }
.kd-die i.on.one { background: #c8361f; transform: scale(1.25); }
.kd-die.red { background: linear-gradient(145deg, #e0543c, #b12a17); border-color: #8a1f10; box-shadow: 0 5px 0 #8a1f10; }
.kd-die.red i.on { background: #fff; }
.kd-dice.small .kd-die { width: 48px; padding: 7px; gap: 3px; animation: none; }
@keyframes kd-roll { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.kd-example { gap: 6px; }
/* 木札（色の 墨で 書いた 字。朱の 縁は 字を 読む） */
.kf-fuda { position: relative; display: inline-grid; place-items: center; width: min(9em, 100%); min-width: 0; padding: 22px 26px 16px; border-radius: 10px 10px 6px 6px; background: linear-gradient(#f3e0b8, #e2c58d); border: 3px solid #b9955a; box-shadow: 0 6px 0 #9c7a44; font-size: clamp(2.2rem, 8dvh, 3rem); font-weight: 700; letter-spacing: .08em; animation: kf-up .3s ease both; }
.kf-fuda::before { content: ''; position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #7a5a2a; }
.kf-fuda span { -webkit-text-stroke: 5px rgb(40 25 10 / .7); paint-order: stroke fill; } /* 白・黄の 墨も 木の 地で 読める ように 太い 縁 */
.kf-fuda.read { border: 5px solid #c8361f; box-shadow: 0 6px 0 #8a1f10, 0 0 0 3px color-mix(in srgb, #c8361f 30%, transparent); }
.kf-fuda.small { min-width: 5em; padding: 14px 16px 8px; font-size: 1.5rem; box-shadow: 0 4px 0 #9c7a44; animation: none; }
@keyframes kf-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.kf-tag { background: linear-gradient(#fbf1dc, #efdcb4); border-color: #c9a96c; color: #3d2a12; }
.kf-answers:has(> :nth-child(5)) .ck-ans { min-height: 56px; font-size: var(--fs-lg); }
.ck-color i { border: 2px solid rgb(0 0 0 / .35); }
/* 願いの 札（人と 物を 覚える） */
.kw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kw-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-grid.n3, .kw-grid.n5, .kw-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kw-grid.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kw-person { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line); }
.kw-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-soft); }
.kw-name { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.kw-card { display: grid; justify-items: center; padding: 4px 6px 2px; border-radius: 8px 8px 4px 4px; background: linear-gradient(#f3e0b8, #e2c58d); border: 2px solid #b9955a; color: #3d2a12; }
.kw-card img { width: 52px; height: 52px; object-fit: contain; }
.kw-card b { font-size: var(--fs-xs); line-height: 1.3; }
.kw-grid.n8 .kw-card img { width: 40px; height: 40px; }
.kw-ask { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); background: var(--surface); }
.kw-ask .kw-face { width: 64px; height: 64px; }
.kw-ask p { font-size: var(--fs-lg); font-weight: 700; }
.kw-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kw-opts.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kw-opt { display: grid; justify-items: center; width: 100%; min-height: 88px; padding: 6px 4px; border-radius: var(--r-sm); background: linear-gradient(#fbf1dc, #efdcb4); border: 3px solid #c9a96c; color: #3d2a12; font-weight: 700; }
.kw-opt img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; }
.kw-opt span { font-size: var(--fs-sm); }
.kw-opt:active { transform: scale(.96); }
/* 記録: 冠位の はしご */
.kani-head h2 small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.kani-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 2px; margin: 6px 0 4px; direction: ltr; }
.kani-ladder li { display: grid; justify-items: center; gap: 0; opacity: .32; filter: grayscale(.85); }
.kani-ladder li.got { opacity: 1; filter: none; }
.kani-ladder li.now { position: relative; }
.kani-ladder li.now::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; border: 2px solid var(--primary); }
.kani-ladder b { font-size: var(--fs-xs); white-space: nowrap; }
.kani-ladder small { font-size: 11px; color: var(--ink-soft); min-height: 1.2em; }
.age-chart .dot.promo { fill: var(--gold); stroke: #9c6a00; }
html.text-xlarge .kani-ladder small { display: none; }
/* はじめの 画面: 3つの 試しは 横に 3つ 並べる（1画面に 収める） */
.kani-trials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kani-trials li { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; text-align: center; }
.kani-trials strong { font-size: var(--fs-sm); white-space: nowrap; }
.kani-trials small { font-size: 12px; line-height: 1.3; }
.kani-head { padding-block: 10px; }
.kani-ladder { gap: 2px; }
.kani-ladder small { font-size: 10px; min-height: 0; }
.records .age-chart svg { max-height: 20dvh; }
.kani-chart { padding-block: 8px; }
.kani-chart h2 { font-size: var(--fs-md); }
.kani-chart h2 small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.records .kani-chart .age-chart svg { max-height: 13dvh; }
.kani-chart .brain-note { margin-top: 2px; }
.kf-fuda.small span { -webkit-text-stroke-width: 3px; }
/* 文字「大」以上の 小さい 画面: はじめの 画面の 補足を 省く */
@media (max-height: 700px) {
  html.text-large .kani-trials small { display: none; }
  html.text-large .kani-now { padding-block: 6px; }
  html.text-large .ck .speech-compact .bubble { font-size: var(--fs-sm); }
}
html.text-large .kani-card dd small { display: none; }
/* ダークでは 冠の 縁を 明るく（黒い 冠＝智が 地に 沈まない ように） */
/* 冠の 絵は 明るい 縁つき（extract-yokai.py）。ダークでも 沈まない */

/* ---------- 冠位十二階の 説明（v2.0） ---------- */
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--primary); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kani-now .link-btn { display: flex; margin-top: 2px; padding: 0; min-height: 40px; }
.kani-guide-btn { margin: 0 0 2px auto; display: flex; }
.kani-guide .dlg-body { text-align: left; overflow-y: auto; }
.kani-guide .dlg-body p { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.6; }
.kani-guide h3 { margin: 10px 0 4px; font-size: var(--fs-md); }
.kani-guide-fig { height: 84px; width: auto; align-self: center; margin-bottom: 4px; }
.kani-guide-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 2px; margin: 6px 0; padding: 0; list-style: none; }
.kani-guide-ladder li { display: grid; justify-items: center; font-size: var(--fs-xs); line-height: 1.2; }
.kani-guide-ladder li small { color: var(--ink-soft); min-height: 1.2em; }
.kani-guide-ladder li.now { border-radius: 10px; box-shadow: inset 0 0 0 2px var(--primary); }
.kani-guide-rules { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- 昇進の 授与式（v2.0） ---------- */
.kani-ceremony { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.kc-label { margin: 0; padding: 2px 14px; border-radius: 999px; background: var(--gold, #f4b625); color: #3b2a00; font-weight: 700; letter-spacing: .3em; animation: kc-fade .5s .1s both; }
.kc-stage { position: relative; display: grid; place-items: center; width: 180px; height: 170px; }
.kc-rays { position: absolute; inset: -30px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--kc) 22%, #ffd84d) 0deg 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); opacity: .75; animation: kc-spin 14s linear infinite, kc-fade .6s .5s both; }
.kc-stage .kani-crown { position: relative; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .3)); animation: kc-drop 1.1s cubic-bezier(.25, 1.4, .5, 1) .2s both; }
.kc-name { margin: 0; font-size: clamp(30px, 9vw, 40px); line-height: 1.1; color: var(--ink); animation: kc-stamp .5s cubic-bezier(.3, 1.8, .5, 1) 1.1s both; }
.kc-name small { display: block; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 700; }
.kc-from { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--ink-soft); animation: kc-fade .4s 1.4s both; }
.kani-ceremony .speech { width: 100%; animation: kc-fade .4s 1.5s both; }
.kc-himikon { width: 100%; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.kc-himikon.show { opacity: 1; transform: none; }
@keyframes kc-drop { from { transform: translateY(-160px) scale(.5) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes kc-stamp { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kc-spin { to { transform: rotate(360deg); } }
html.reduce-motion .kc-rays { animation: none; }
@media (prefers-reduced-motion: reduce) { .kc-rays { animation: none; } .kc-himikon { transition: none; } }
/* 文字「大」「特大」・小さな 画面では 冠を 小さく して、授与の ことばを 1画面に */
html.text-large .kc-stage, html.text-xlarge .kc-stage { width: 140px; height: 128px; }
html.text-large .kc-stage .kani-crown, html.text-xlarge .kc-stage .kani-crown { width: 100px; height: 100px; }
@media (max-height: 680px) { .kc-stage { width: 150px; height: 136px; } .kc-stage .kani-crown { width: 108px; height: 108px; } }

/* ---------- はじめての 1日（v2.2。docs/analysis/2026-10-09_ftue-plan.md） ---------- */
.first-tip { margin: 6px auto 0; max-width: 22em; color: var(--ink-soft); font-size: var(--fs-sm); text-align: center; line-height: 1.5; }
/* 大きい 文字で 低い 画面では 出題の 絵を 優先する（ボードの 下の 説明で 足りる） */
@media (max-height: 740px) { html.text-large .first-tip { display: none; } }
/* 今日の まとめ（ハンコ帳・あしたの 予告・1日の目標） */
.day-summary h3 { margin: 12px 0 6px; font-size: var(--fs-md); }
.day-summary .goal-h { margin-top: 14px; }
.day-summary .goal-h small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; margin-left: 4px; }
.choice-chip.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.stamp-book ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.stamp-book li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line); color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm); }
.stamp-book li.on { border: 2px solid color-mix(in srgb, var(--gold) 70%, var(--line)); background: var(--gold-soft); }
.stamp-book .stamp-icon { width: 80%; height: 80%; }
.stamp-book small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: var(--fs-sm); }
/* 気力が 足りない ときの「ほかに 遊べる もの」 */
.stamina-note { margin: 0 0 6px; font-weight: 700; text-align: center; }
.other-plays { margin-top: 10px; display: grid; gap: 6px; }
.other-plays h3 { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
/* 冠位十二階の 説明（歴史は たたむ） */
.kani-guide-more { margin-top: 8px; }
.kani-guide-more summary { min-height: var(--tap); display: flex; align-items: center; color: var(--secondary); font-weight: 700; cursor: pointer; }
.kani-guide-more > summary::before { content: '＋'; flex: none; margin-right: 8px; }
.kani-guide-more[open] > summary::before { content: '−'; }

/* ---------- はじめの 画面（ファーストビュー。v2.2） ---------- */
.welcome { position: relative; isolation: isolate; background: #2a1d4f; }
.welcome-art { position: absolute; inset: 0; z-index: -1; background: url('assets/ui/welcome-hero-day.webp') center 62% / cover no-repeat; }
.welcome-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(40 24 90 / .35) 0%, transparent 26%, transparent 62%, rgb(40 24 90 / .25) 100%); }
.welcome-body { justify-content: flex-start; background: none; padding-top: max(18px, env(safe-area-inset-top)); }
.welcome-title { margin: 0 auto; width: min(100%, 420px); outline: none; }
.welcome-title img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgb(30 10 60 / .45)); }
.welcome-dock { gap: 10px; padding-top: 0; border-top: 0; backdrop-filter: none; background: linear-gradient(180deg, transparent 0, transparent 34px, rgb(255 247 251 / .82) 60px, rgb(255 247 251 / .96)); }
.welcome-hello { justify-self: center; position: relative; max-width: 100%; padding: 6px 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); font-weight: 700; font-size: var(--fs-sm); line-height: 1.5; text-align: center; box-shadow: 0 3px 0 var(--line); }
.welcome-hello::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.welcome-start { display: block; width: min(100%, 420px); margin: 0 auto; padding: 0; background: none; border: 0; border-radius: 999px; animation: welcome-pulse 2.4s ease-in-out 1s infinite; }
.welcome-start img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgb(60 10 50 / .35)); }
.welcome-start:active { transform: translateY(3px) scale(.98); }
.welcome-start:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
@keyframes welcome-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.03); } }
.welcome-note { color: var(--ink-soft); font-size: var(--fs-xs); text-align: center; }
.welcome-text { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 700; }
.welcome-text .seg { margin: 0; }
.welcome-text .seg-btn { min-height: 48px; min-width: 52px; font-size: var(--fs-sm); }
html.reduce-motion .welcome-start { animation: none; }
@media (prefers-reduced-motion: reduce) { .welcome-start { animation: none; } }
@media (prefers-color-scheme: dark) {
  .welcome-art { background-image: url('assets/ui/welcome-hero-dusk.webp'); }
  .welcome-dock { background: linear-gradient(180deg, transparent 0, transparent 34px, rgb(24 14 44 / .82) 60px, rgb(24 14 44 / .96)); }
}
/* 低い 画面・大きい 文字では 吹き出しを 1行に しぼる */
@media (max-height: 700px) { html.text-xlarge .welcome-hello { display: none; } html.text-large .welcome-note { display: none; } }

/* ---------- 導入（v2.3。docs/analysis/2026-10-09_onboarding-design.md） ---------- */
/* 文字ごと 画像の ボタン */
.img-btn { display: block; padding: 0; background: none; border: 0; border-radius: 999px; line-height: 0; transition: transform .12s ease-out; }
.img-btn img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 6px rgb(60 10 50 / .3)); }
.img-btn:active { transform: translateY(3px) scale(.98); }
.img-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
.img-btn-wide { width: min(100%, 360px); margin: 0 auto; }
.img-btn-skip { width: 104px; }
.img-btn:disabled { opacity: .45; filter: grayscale(.4); }
/* ファーストビューの 目的の 帯（画像） */
.welcome-tagline { margin: 2px auto 0; width: min(92%, 380px); line-height: 0; }
.welcome-tagline img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgb(30 10 60 / .35)); }
/* れんぞく 1日目 */
.streak-start-art { display: grid; place-items: center; position: relative; margin: 4px auto 0; width: 96px; height: 96px; }
.streak-start-flame { width: 96px; height: 96px; }
.streak-start-art b { position: absolute; bottom: 10px; font-size: 30px; color: #fff; text-shadow: 0 2px 0 #c2357f, 0 0 8px rgb(194 53 127 / .6); }
/* 絵つきの 機能の 紹介・遊び方ノート */
.feature-art, .help-art { display: block; width: 100%; max-height: 34vh; object-fit: contain; border-radius: 16px; background: #fbf6ec; }
.feature-card.has-art .dlg-body { gap: 6px; }
.feature-card.has-art h2 { margin-top: 4px; }
@media (max-height: 700px) { .feature-art { max-height: 26vh; } }
.feature-lead { font-size: var(--fs-sm); line-height: 1.6; }
.help-lines { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; line-height: 1.6; }
.pick-item small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 400; }

/* ---------- あるなしの 盤の 見た目（v2.4。作者が 選んだ「夜の 里」案: art/sheets/mock-board-night.png） ----------
   素材: scripts/art/gen-board-skin.mjs → src/assets/ui/play-bg-night.webp・ui/skin/*.webp。文字の 入る 部品は 画像 */
.quiz-skin { background: #1b1640 url('assets/ui/play-bg-night.webp') center / cover no-repeat; }
.quiz-skin .play-top .quit-btn { background: rgb(255 255 255 / .92); border-color: rgb(255 255 255 / .6); }
.quiz-skin .lesson-bar { background: rgb(20 12 50 / .55); box-shadow: inset 0 0 0 2px rgb(255 214 120 / .6); }
.quiz-skin .lesson-bar > span { background: linear-gradient(90deg, #4bd06a, #9ef07a); }
.quiz-skin .play-label { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.quiz-skin .combo { color: #ffd66b; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.quiz-skin .dock { background: linear-gradient(180deg, transparent, rgb(20 12 50 / .55) 30%); border-top: 0; backdrop-filter: none; }
.quiz-skin .dock .dock-note, .quiz-skin .ask { padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-shadow: none; }
.quiz-skin .dock { gap: 8px; }
.quiz-skin .assist-row .btn { min-width: 0; padding: 6px 8px; font-size: var(--fs-sm); white-space: normal; }
/* 漆の 盆 */
.quiz-skin .board { gap: 6px; padding: 14px 12px 12px; border: 30px solid transparent; border-image: url('assets/ui/skin/tray.webp') 110 fill / 30px stretch; }
.quiz-skin .board-col, .quiz-skin .board-aru, .quiz-skin .board-nashi { background: none; padding: 0; gap: 6px; }
.quiz-skin .board-col h3 { margin: 0 0 2px; padding: 0; background: none; line-height: 0; }
.quiz-skin .board-col h3 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); }
/* ことばの 札（クリーム色の 立体） */
.quiz-skin .word { border: 12px solid transparent; border-image: url('assets/ui/skin/tile.webp') 46 fill / 12px stretch; background: none; border-radius: 0; padding: 0 2px; color: #4a2a12; }
.quiz-skin .word-text { color: #4a2a12; }
.quiz-skin .word-kanji { color: #7a5634; }
.quiz-skin .word-big { border: 18px solid transparent; border-image: url('assets/ui/skin/tile.webp') 46 fill / 18px stretch; background: none; }
/* ひみコンを 盤の 上に 大きく */
.board-host { flex: none; display: flex; align-items: flex-end; gap: 4px; margin-bottom: -6px; }
.board-host-img { flex: none; width: 92px; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); animation: float 3s ease-in-out infinite; }
.speech-noface .speech-face { display: none; }
.board-host .speech { flex: 1; margin-bottom: 18px; }
html.reduce-motion .board-host-img { animation: none; }
/* 答えの ボタン（文字ごと 画像） */
.ans-btn { display: block; padding: 0; border: 0; background: none; line-height: 0; border-radius: 999px; transition: transform .1s ease-out; }
.ans-btn img { display: block; width: 100%; height: auto; max-height: 76px; object-fit: contain; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4)); }
.ans-btn:active:not(:disabled) { transform: translateY(3px) scale(.97); }
.ans-btn:disabled { opacity: .5; }
.ans-btn.chosen { opacity: 1; transform: scale(1.04); }
.ans-btn.chosen img { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px #fff3a8); }
.ans-btn:focus-visible { outline: 3px solid #fff3a8; outline-offset: 3px; }
@media (max-height: 700px) { .board-host-img { width: 72px; } .quiz-skin .board { padding: 10px 10px 8px; } }
/* 盤の 見た目の 大きさの 調整（小さい 画面・大きい 文字でも 1画面に 収める） */
.quiz-skin .board { border-width: 22px; border-image-width: 22px; padding: 6px 6px 4px; }
.quiz-skin .word { border-width: 8px; border-image-width: 8px; }
.quiz-skin .word-text { white-space: nowrap; }
.quiz-skin .board.compact { border-width: 16px; border-image-width: 16px; padding: 2px 4px; gap: 4px; }
.quiz-skin .board.compact .board-col h3 img { max-height: 22px; width: auto; margin: 0 auto; }
.quiz-skin .board.compact .word { border-width: 5px; border-image-width: 5px; min-height: 30px; }
.quiz-skin .board.compact .board-col { gap: 3px; }
.quiz-skin .phase-board .board .word, .quiz-skin.phase-board .board .word { min-height: 0; }
.board-host-img { width: 80px; }
.board-host .speech { margin-bottom: 10px; }
@media (max-height: 700px) {
  .board-host-img { width: 64px; }
  .quiz-skin .board-col h3 img { max-height: 30px; width: auto; margin: 0 auto; }
}
@media (max-height: 740px) {
  html.text-large .board-host-img { display: none; }
  html.text-large .board-host .speech { margin-bottom: 0; }
  html.text-large .quiz-skin .board.compact .board-col h3 { display: none; }
}
/* 進む ボタン（文字ごと 画像。v2.4） */
.skin-btn { display: block; width: min(100%, 380px); margin: 0 auto; padding: 0; border: 0; background: none; line-height: 0; border-radius: 999px; transition: transform .1s ease-out; }
.skin-btn img { display: block; width: 100%; height: auto; max-height: 72px; object-fit: contain; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.skin-btn:active { transform: translateY(3px) scale(.98); }
.skin-btn:focus-visible { outline: 3px solid #fff3a8; outline-offset: 3px; }

/* ==========================================================================
   アプリ全体の 見た目（v2.4）: 「夜の 里」に そろえる。夜の 里の 1枚絵の 上に、
   クリーム色の 札（金の 縁）と 漆の 赤・青。ライト・ダークとも 同じ（ゲームの 世界の 見た目）。
   ========================================================================== */
:root, :root:not(.x) {
  --bg: #1b1640;
  --surface: #fff8e9;
  --surface-soft: #fbefd6;
  --ink: #3a2312;
  --ink-soft: #6a4a2e;
  --line: #e0c27e;
  --primary: #c8203f;
  --primary-press: #96142c;
  --primary-soft: #ffe1e3;
  --secondary: #7b3e9e;
  --secondary-soft: #f3e6f7;
  --gold-soft: #fff1c7;
  --aru: #c8203f;
  --aru-soft: #ffe1e3;
  --nashi: #1d63b8;
  --nashi-soft: #e1ecfb;
  --ok: #23773f;
  --ng: #b24f06;
  --on-accent: #ffffff;
  --shadow: 0 4px 0 #b88a3a;
  --app-bg: url('assets/ui/play-bg-night.webp');
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1640; --surface: #fff8e9; --surface-soft: #fbefd6; --ink: #3a2312; --ink-soft: #6a4a2e; --line: #e0c27e;
    --primary: #c8203f; --primary-press: #96142c; --primary-soft: #ffe1e3; --secondary: #7b3e9e; --secondary-soft: #f3e6f7;
    --gold-soft: #fff1c7; --aru: #c8203f; --aru-soft: #ffe1e3; --nashi: #1d63b8; --nashi-soft: #e1ecfb; --ok: #23773f; --ng: #b24f06;
    --on-accent: #ffffff; --shadow: 0 4px 0 #b88a3a; --app-bg: url('assets/ui/play-bg-night.webp'); color-scheme: light;
  }
}
/* 上の 帯と 下の メニューは 漆の 黒に 金の 線 */
.topbar { background: linear-gradient(180deg, #2a1d14, #1d140d); border-bottom: 2px solid #c9a24f; }
.bottom-nav { background: linear-gradient(180deg, #2a1d14, #1d140d); border-top: 2px solid #c9a24f; }
.nav-link { color: #e8d3a6; }
.nav-link.active { background: rgb(255 214 120 / .16); color: #ffe39a; }
.hud-chip { background: #fff8e9; border-color: #c9a24f; }
.hud-settings { color: #e8d3a6; }
/* 背景の 上に じかに 置く 文字は 白 */
.screen-head h1, .screen-head h2, .page-title, .screen-body > h1, .screen-body > h2 { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.back-btn { background: rgb(255 248 233 / .92); border-radius: 999px; padding: 0 12px; }
/* 札（カード）は 金の 縁 */
.panel-card, .today, .chapter-panel, .tile, .dlg-card, .pick-item, .feature-list li, .choice, .choice-chip, .setting, .speech .bubble, .bubble { border-color: var(--line); }
.dlg-card { box-shadow: 0 0 0 3px #c9a24f, 0 14px 40px rgb(10 5 30 / .55); }
.dlg-layer { background: rgb(12 8 30 / .62); }
/* 文字ごと 画像の ボタン（--img に 画像。文字は 読み上げ用に 残し、見た目は 透明） */
.img-skin { color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; background: var(--img) center / contain no-repeat !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.img-skin > * { visibility: hidden; }
.img-skin-main { min-height: 64px; width: min(100%, 380px); margin: 0 auto; }
.img-skin-sub { min-height: 50px; }
.img-skin:active:not(:disabled) { transform: translateY(3px) scale(.98); }
.img-skin:disabled { opacity: .45; }
.img-skin:focus-visible { outline: 3px solid #fff3a8 !important; outline-offset: 3px; }
/* ミニゲームの「はじめる」も 画像（準備中の 文字は そのまま） */
.gm-screen [data-gm-start]:not(:disabled) { color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; background: url('assets/ui/skin/btnStart.webp') center / contain no-repeat !important; border: 0 !important; box-shadow: none !important; min-height: 64px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.gm-screen .gm-title, .ck .ck-note, .ck-dock-note { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
/* 結果の 見出し・答え合わせの ひらめき（画像） */
.result-title-img { display: block; width: min(86%, 340px); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4)); }
.result h1 { color: #fff8e9; text-shadow: 0 2px 4px #241441; }
.result-answer-note { padding: 8px 12px; border-radius: 12px; background: #fff8e9; color: #3a2312; font-size: var(--fs-sm); }
.result h1 small { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.insight-img { background: none !important; padding: 0 !important; box-shadow: none !important; line-height: 0; }
.insight-img img { display: block; width: min(80%, 300px); height: auto; margin: 0 auto; animation: pop .5s ease; }
.reveal .rule-answer { padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, #3a1d5c, #241441); box-shadow: inset 0 0 0 2px #e0c27e, 0 4px 12px rgb(0 0 0 / .35); color: #ffe39a; }
/* 機能の 紹介の 絵（縦長の 絵は 横長に 切る）・脳年齢テストの 紹介の タイシカは 小さく */
.feature-art { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%; max-height: none; }
.dock .dock-note, .dock > .muted { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.dock { background: linear-gradient(180deg, transparent, rgb(20 12 50 / .5) 30%); border-top: 0; backdrop-filter: none; }
.feature-art-contain { object-fit: contain; aspect-ratio: auto; max-height: 22vh; background: none; }
.welcome-dock .welcome-text, .welcome-dock .welcome-note { color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .9); }
.result-hero { height: clamp(60px, 11dvh, 130px); }
.result-figure { height: clamp(56px, 10dvh, 120px); }
.result-title-img { width: min(78%, 300px); }
.insight-img img { width: min(64%, 240px); }
.ck .dock { gap: 6px; padding-top: 6px; }
.ck .dock .dock-note { font-size: var(--fs-xs); line-height: 1.45; }
/* 結果画面の 注意書きは 1行で ボタンの 上に（本文の 下に 置くと 背景に 埋もれ、画面の 外に 出る） */
.cka-dock { gap: 4px; }
.cka-dock .dock-note { margin: 0; white-space: nowrap; }
.ck .dock-row .img-skin-sub { min-height: 44px; }
.ck .img-skin-main { min-height: 58px; }
.ck-hero { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
.ck-hero img { height: 60px; }
.ck-hero h1 { font-size: var(--fs-lg); }
.result { gap: 6px; }
.reveal { gap: 6px; }

/* ---------- ひらめき（答え合わせ。v2.5） ---------- */
.rv { display: grid; gap: 8px; justify-items: center; text-align: center; }
.rv-stage { position: relative; width: 100%; height: clamp(120px, 22dvh, 190px); display: flex; align-items: flex-end; justify-content: space-between; }
.rv-burst { position: absolute; left: 50%; top: 50%; width: 120%; max-width: 460px; height: auto; transform: translate(-50%, -50%); animation: rv-spin 14s linear infinite, rv-in .6s ease-out both; opacity: .9; pointer-events: none; }
@keyframes rv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rv-in { from { opacity: 0; scale: .4; } to { opacity: .9; scale: 1; } }
.rv-chara { position: relative; height: 100%; width: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); animation: hop-ok .8s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.rv-taishika { animation-delay: .35s; }
.rv-title { position: absolute; left: 50%; top: 18%; width: min(62%, 260px); height: auto; transform: translateX(-50%); animation: rv-pop .7s cubic-bezier(.2, 1.6, .4, 1) .15s both; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
@keyframes rv-pop { from { transform: translateX(-50%) scale(.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.rv-intro { color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgb(10 5 30 / .95); }
.rv-guess { color: #ffd9a8; font-size: var(--fs-sm); text-shadow: 0 1px 3px rgb(10 5 30 / .95); }
.rv-secret { position: relative; width: 100%; padding: 26px 22px 16px; border: 18px solid transparent; border-image: url('assets/ui/moment/secretPlate.webp') 70 110 fill / 18px 28px stretch; animation: rule-in .7s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
.rv-label { position: absolute; left: 50%; top: -20px; width: min(60%, 220px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.rv-answer { margin: 0; font-size: clamp(1.5rem, 6.6vw, 2.1rem); line-height: 1.3; color: #4a2410; letter-spacing: .04em; outline: none; }
.rv-insight .rv-secret { filter: drop-shadow(0 0 14px rgb(255 214 110 / .75)); }
.rv-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.rv-words li { display: grid; justify-items: center; gap: 0; padding: 2px 2px 4px; border: 8px solid transparent; border-image: url('assets/ui/skin/tile.webp') 46 fill / 8px stretch; color: #4a2a12; animation: rv-tile .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes rv-tile { 0% { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffe39a); } 100% { opacity: 1; transform: none; } }
.rv-words .word-img { width: 46px; height: 46px; }
.rv-words .word-emoji { font-size: 2rem; }
.rv-words b { font-size: var(--fs-md); line-height: 1.2; }
.rv-words small { font-size: var(--fs-xs); line-height: 1.3; color: #a0261a; font-weight: 700; }
.rv-explain { width: 100%; padding: 10px 14px; border-radius: 16px; background: rgb(255 248 233 / .95); box-shadow: inset 0 0 0 2px #e0c27e; color: #3a2312; font-size: var(--fs-sm); line-height: 1.6; text-align: left; }
html.reduce-motion .rv-burst, html.reduce-motion .rv-chara, html.reduce-motion .rv-title, html.reduce-motion .rv-words li, html.reduce-motion .rv-secret { animation: none; }
@media (max-height: 700px) { .rv-stage { height: 104px; } .rv-words .word-img { width: 36px; height: 36px; } .rv { gap: 6px; } }
@media (max-height: 740px) { html.text-large .rv-stage { height: 88px; } html.text-large .rv-words small { display: none; } }

/* ひらめき: 大きさの 調整（1画面に 収める） */
.rv { gap: 6px; }
.rv-stage { height: clamp(96px, 17dvh, 160px); overflow: visible; }
.rv-burst { width: 92%; max-width: 360px; top: 55%; }
.rv-intro { position: relative; z-index: 1; font-size: var(--fs-sm); }
.rv-secret { border: 0; border-image: none; padding: 20px 14px 12px; border-radius: 18px; background: linear-gradient(180deg, #fffaf0, #f6e6c4); box-shadow: inset 0 0 0 3px #d9a93f, inset 0 0 0 6px #fff3cf, 0 0 0 2px #7a4e12, 0 6px 16px rgb(0 0 0 / .4); margin-top: 12px; }
.rv-label { top: -16px; width: min(52%, 200px); }
.rv-answer { font-size: clamp(1.25rem, 5.4vw, 1.7rem); }
.rv-words { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.rv-words li { border-width: 6px; border-image-width: 6px; padding: 0 2px 2px; }
.rv-words .word-img { width: 38px; height: 38px; }
.rv-words b { font-size: var(--fs-sm); }
.rv-explain { padding: 8px 12px; font-size: var(--fs-xs); line-height: 1.55; }
@media (max-height: 700px) { .rv-stage { height: 84px; } .rv-words .word-img { width: 30px; height: 30px; } }
@media (max-height: 740px) { html.text-large .rv-stage { height: 70px; } html.text-large .rv-words .word-img { display: none; } html.text-large .rv-explain { display: none; } }
/* ひらめき: 余った 高さは 舞台（キャラと ひらめき！）に 回す */
.phase-reveal .play-body { display: flex; flex-direction: column; }
.rv { flex: 1; grid-template-rows: minmax(90px, 1fr) auto auto auto auto auto; align-items: end; }
.rv-stage { height: 100%; max-height: 260px; min-height: 90px; align-self: stretch; }
.rv-chara { height: 100%; max-height: 240px; }
.rv-title { width: min(70%, 300px); top: 10%; }
.rv-burst { width: 100%; max-width: 420px; top: 50%; }
.rv-intro { padding: 2px 14px; border-radius: 999px; background: rgb(20 12 50 / .7); }
.rv-words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-words .word-img { width: 44px; height: 44px; }
.rv-answer { font-size: clamp(1.35rem, 6vw, 1.9rem); }
@media (max-height: 700px) { .rv-words .word-img { width: 30px; height: 30px; } }
.rv { grid-template-rows: none; align-content: start; }
.rv-stage { height: clamp(90px, calc(100dvh - 500px), 240px); max-height: none; }
html.text-large .rv-stage { height: clamp(70px, calc(100dvh - 560px), 200px); }
.rv-chara { max-height: none; }
.rv-stage { height: clamp(92px, calc(100dvh - 570px), 240px); }
.rv-guess { padding: 2px 14px; border-radius: 999px; background: rgb(20 12 50 / .7); color: #ffd9a8; }
@media (max-height: 760px) { .rv-explain { font-size: .76rem; padding: 6px 10px; line-height: 1.45; } .rv-words .word-img { width: 32px; height: 32px; } .rv-secret { padding: 18px 12px 8px; } }
@media (max-height: 740px) { html.text-large .rv-guess { display: none; } }

/* ---------- 昇進（v2.5）: 冠位十二階の 階段を 一段 上がる ---------- */
.kani-ceremony { justify-content: flex-start; gap: 4px; }
.kc-title { width: min(64%, 260px); height: auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); animation: kc-stamp .55s cubic-bezier(.3, 1.8, .5, 1) .1s both; }
.kc-stage { position: relative; width: 100%; height: clamp(120px, calc(100dvh - 520px), 220px); display: grid; place-items: center; }
.kc-burst { position: absolute; left: 50%; top: 50%; width: min(90%, 360px); height: auto; transform: translate(-50%, -50%); animation: rv-spin 16s linear infinite, kc-fade .6s .4s both; }
.kc-stage .kani-crown { position: relative; z-index: 1; width: auto; height: 82%; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); animation: kc-drop 1.1s cubic-bezier(.25, 1.4, .5, 1) .2s both; }
.kc-taishika { position: absolute; right: 2%; bottom: 0; height: 92%; width: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); animation: kc-fade .5s .3s both; }
.kc-name { margin: 0; line-height: 0; animation: kc-stamp .5s cubic-bezier(.3, 1.8, .5, 1) 1.1s both; }
.kc-name img { display: block; width: min(46vw, 190px); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .5)); }
.kc-name small { display: block; width: fit-content; margin: 2px auto 0; padding: 0 10px; border-radius: 999px; background: rgb(20 10 40 / .45); line-height: 1.5; font-size: var(--fs-sm); color: #ffe9b8; text-shadow: 0 1px 3px rgb(10 5 30 / .95); }
/* 階段: 左下の 小智から 右上の 大徳へ 12段 */
.kc-stairs { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 2px; width: 100%; height: 86px; margin: 4px 0 0; padding: 0; list-style: none; }
.ks-step { position: relative; height: calc(16px + var(--i) * 5.6px); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #4a3322, #2a1c12); box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), 0 0 0 1px #6b4d2a; }
.ks-step.done { background: linear-gradient(180deg, #f4d27a, #b5862c); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), 0 0 0 1px #7a4e12; }
.ks-step.now { background: linear-gradient(180deg, #fff1b8, #e0a93a); box-shadow: 0 0 0 2px #fff3a8, 0 0 14px rgb(255 214 110 / .9); animation: ks-glow 1.4s ease-in-out 1.6s infinite; }
.ks-crown { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); opacity: .5; }
.ks-crown .kani-crown { width: 22px; height: 22px; }
.ks-step.done .ks-crown, .ks-step.now .ks-crown { opacity: 1; }
.ks-marker { position: absolute; bottom: 0; left: calc((var(--from) + .5) * (100% / 12)); width: 30px; height: 30px; transform: translate(-50%, calc(-1 * (16px + var(--from) * 5.6px) - 26px)); animation: ks-hop 1s cubic-bezier(.3, 1.4, .5, 1) 1.3s both; }
.ks-marker img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 3px 6px rgb(0 0 0 / .4); }
@keyframes ks-hop {
  0% { left: calc((var(--from) + .5) * (100% / 12)); transform: translate(-50%, calc(-1 * (16px + var(--from) * 5.6px) - 26px)); }
  50% { transform: translate(-50%, calc(-1 * (16px + var(--to) * 5.6px) - 60px)); }
  100% { left: calc((var(--to) + .5) * (100% / 12)); transform: translate(-50%, calc(-1 * (16px + var(--to) * 5.6px) - 26px)); }
}
@keyframes ks-glow { 50% { box-shadow: 0 0 0 2px #fff3a8, 0 0 22px rgb(255 214 110 / 1); } }
.kc-from { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgb(10 5 30 / .95); animation: kc-fade .4s 1.6s both; }
.kc-from b { color: #ffd66b; }
.kc-from small { color: #ffe9b8; font-weight: 700; }
html.reduce-motion .ks-marker { animation: none; left: calc((var(--to) + .5) * (100% / 12)); transform: translate(-50%, calc(-1 * (16px + var(--to) * 5.6px) - 26px)); }
html.reduce-motion .kc-burst { animation: none; }
@media (max-height: 740px) { html.text-large .kc-taishika { display: none; } html.text-large .kc-stage { height: 96px; } }
/* 昇進: 大きさの 調整 */
.kc-stage { height: clamp(96px, calc(100dvh - 560px), 200px); }
.kc-stage .kani-crown, html.text-large .kc-stage .kani-crown, html.text-xlarge .kc-stage .kani-crown { width: auto; height: clamp(84px, calc(100dvh - 580px), 180px); }
.kc-taishika { height: clamp(84px, calc(100dvh - 580px), 190px); }
.kc-stairs { height: 64px; }
.ks-step { height: calc(10px + var(--i) * 3.6px); background: linear-gradient(180deg, rgb(74 51 34 / .85), rgb(42 28 18 / .85)); }
.ks-marker { transform: translate(-50%, calc(-1 * (10px + var(--from) * 3.6px) - 28px)); }
@keyframes ks-hop {
  0% { left: calc((var(--from) + .5) * (100% / 12)); transform: translate(-50%, calc(-1 * (10px + var(--from) * 3.6px) - 28px)); }
  50% { transform: translate(-50%, calc(-1 * (10px + var(--to) * 3.6px) - 58px)); }
  100% { left: calc((var(--to) + .5) * (100% / 12)); transform: translate(-50%, calc(-1 * (10px + var(--to) * 3.6px) - 28px)); }
}
html.reduce-motion .ks-marker { transform: translate(-50%, calc(-1 * (10px + var(--to) * 3.6px) - 28px)); }
.ks-crown .kani-crown { width: 18px; height: 18px; }
.ks-step.now .ks-crown .kani-crown { width: 24px; height: 24px; }
.kc-name img { width: min(40vw, 170px); }
.kc-talk { display: grid; width: 100%; }
.kc-talk > * { grid-area: 1 / 1; }
.kc-talk > .speech { transition: opacity .3s; }
.kc-talk:has(.kc-himikon.show) > .speech { opacity: 0; }
.kani-ceremony .speech { animation: kc-fade .4s 1.6s both; }
.kc-stage { height: clamp(96px, calc(100dvh - 560px), 260px); }
.kc-stage .kani-crown, html.text-large .kc-stage .kani-crown, html.text-xlarge .kc-stage .kani-crown { height: clamp(84px, calc(100dvh - 580px), 220px); }
.kc-taishika { height: clamp(84px, calc(100dvh - 580px), 230px); }

/* ---------- 今日の まとめ（v2.5）: ハンコを 押す 瞬間が 主役 ---------- */
.hk-card { padding-top: 6px; }
.hk-head { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 92px; margin-bottom: 2px; }
.hk-himikon { position: absolute; left: -6px; bottom: -6px; height: 104px; width: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); animation: hop-ok .8s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.hk-title { width: min(78%, 280px); height: auto; margin-left: 56px; margin-bottom: 18px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); animation: kc-stamp .5s cubic-bezier(.3, 1.8, .5, 1) .1s both; }
.hk-book { padding: 14px 10px 10px; border: 14px solid transparent; border-image: url('assets/ui/moment/stampCard.webp') 60 fill / 14px stretch; }
.hk-book ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.hk-book li { display: grid; justify-items: center; gap: 2px; }
.hk-slot { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #c9a46a; background: rgb(255 255 255 / .5); }
.hk-stamp { position: absolute; inset: -8%; width: 116%; height: 116%; transform: rotate(-8deg); }
.hk-book li.hk-today .hk-slot { border-color: #d0453c; }
.hk-book li.hk-today .hk-stamp { animation: hk-press .55s cubic-bezier(.2, 1.4, .4, 1) .7s both; }
@keyframes hk-press { 0% { transform: scale(2.6) rotate(-20deg); opacity: 0; } 60% { transform: scale(.9) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.hk-book small { font-size: .7rem; color: #7a5634; font-weight: 700; }
.hk-book li.hk-today small { color: #c8203f; }
.hk-reward { margin: 8px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-sm); color: #6a4a2e; }
.hk-reward b { color: #c8203f; }
.hk-tomorrow-h { margin: 8px 0 4px; text-align: center; font-weight: 700; color: #7b3e9e; letter-spacing: .3em; }
.hk-tomorrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hk-tomorrow li { display: grid; justify-items: center; gap: 0; padding: 6px 2px; border-radius: 14px; background: #fbefd6; box-shadow: inset 0 0 0 2px #e0c27e; text-align: center; }
.hk-tomorrow img, .hk-tomorrow .tm-icon { width: 40px; height: 40px; }
.hk-tomorrow span { font-size: .72rem; color: #6a4a2e; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hk-tomorrow b { font-size: var(--fs-sm); color: #3a2312; line-height: 1.3; }
html.reduce-motion .hk-book li.hk-today .hk-stamp, html.reduce-motion .hk-himikon, html.reduce-motion .hk-title { animation: none; }
.hk-card .img-btn-wide { width: min(100%, 300px); }
.hk-book ol { gap: 6px; }
.hk-book { padding: 8px 6px 6px; }
.hk-book ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 14px; padding: 0 10px; }
.hk-book li:nth-child(n+5) { transform: translateX(calc(50% + 7px)); }
.hk-book small { font-size: .78rem; }
.hk-card .dlg-actions .img-btn { width: min(100%, 280px); }
.hk-tomorrow-h { margin-top: 4px; }
/* まだ 文字の 主ボタン（数や 名前が 変わる もの）も 同じ つやの 桃色に */
.btn-primary:not(.img-skin) { background: linear-gradient(180deg, #ff5c9a, #d81b5e 60%, #b5124b); color: #fff; border: 2px solid #f2c45a; box-shadow: inset 0 2px 0 rgb(255 255 255 / .45), 0 4px 0 #8a0f39, 0 6px 10px rgb(0 0 0 / .3); text-shadow: 0 1px 2px rgb(90 0 30 / .6); font-weight: 800; }
/* 機能の 紹介: 絵は 横長に 切って 低く（文が 切れない ように） */
.feature-card.has-art .feature-art:not(.feature-art-contain) { aspect-ratio: 2 / 1; max-height: 22vh; }
@media (max-height: 700px) { .feature-card.has-art .feature-art:not(.feature-art-contain) { max-height: 17vh; } html.text-large .feature-card.has-art .feature-art { display: none; } }
.feature-card .dlg-body { overflow-y: auto; }

/* ひみつの 札: iOS Safari で ぼやけた まま 残らない ように、blur と filter を 使わない（2026-10-09） */
.rv-secret { animation: rv-secret-in .6s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
@keyframes rv-secret-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.rv-insight .rv-secret { filter: none; box-shadow: inset 0 0 0 3px #d9a93f, inset 0 0 0 6px #fff3cf, 0 0 0 2px #7a4e12, 0 0 22px rgb(255 214 110 / .8), 0 6px 16px rgb(0 0 0 / .4); }

/* ==========================================================================
   画面演出（v2.6・2026-10-10）: 回る 画像を やめ、粒（src/fx.js の canvas）と 光の にじみで。
   決まり: 見出しの 文字は キャラの 顔に 重ねない（見出しの 行と キャラの 行を 分ける）。
           演出は 画面の 中に 収める（はみ出して 切れる 物を 置かない）。
           出る 順番は 見出し → キャラ → 答え → 細かい 情報。
   ========================================================================== */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 300; }
.fx-trigger { position: absolute; width: 0; height: 0; overflow: hidden; }
.confetti { display: none; }
.rv-burst, .kc-burst, .result-burst { display: none !important; }

/* ひらめき: 見出しの 行 → キャラの 行 */
.rv-stage { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: end; width: 100%; height: auto !important; min-height: 0; overflow: visible; }
.rv-stage:not(.is-insight) { grid-template-rows: 1fr; }
.rv-titlerow { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; }
.rv-titlerow::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(80%, 300px); aspect-ratio: 2.4; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 150 / .85), rgb(255 214 110 / .35) 55%, transparent); animation: rv-glow-in .5s ease-out .1s both; }
@keyframes rv-glow-in { from { opacity: 0; scale: .4; } }
.rv-title { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: min(64%, 250px) !important; animation: rv-title-in .55s cubic-bezier(.2, 1.6, .4, 1) .15s both !important; }
@keyframes rv-title-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.rv-cast { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 6vw, 40px); height: clamp(84px, calc(100dvh - 600px), 190px); }
html.text-large .rv-cast { height: clamp(70px, calc(100dvh - 650px), 150px); }
.rv-cast .rv-chara { height: 100%; width: auto; max-height: none; position: relative; }
.rv-himikon { animation: hop-ok .7s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
.rv-taishika { animation: hop-ok .7s cubic-bezier(.3, 1.6, .5, 1) .6s both !important; }
.rv-stage:not(.is-insight) .rv-himikon, .rv-stage:not(.is-insight) .rv-taishika { animation: kc-fade .4s ease-out .05s both !important; }
.rv-intro { animation: kc-fade .35s ease-out .75s both; }
.rv-guess { animation: kc-fade .35s ease-out .8s both; }
.rv-secret { animation: rv-secret-in .55s cubic-bezier(.2, 1.4, .4, 1) .85s both !important; }
.rv-words li { animation-delay: calc(1.1s + var(--k, 0) * .12s); }
.rv-explain { animation: kc-fade .4s ease-out 1.7s both; }
.rv-stage:not(.is-insight) ~ .rv-intro { animation-delay: .1s; }
.rv-stage:not(.is-insight) ~ .rv-secret { animation-delay: .3s !important; }
.rv-stage:not(.is-insight) ~ .rv-explain { animation-delay: .9s; }
html.reduce-motion .rv-titlerow::before, html.reduce-motion .rv-intro, html.reduce-motion .rv-guess, html.reduce-motion .rv-explain { animation: none !important; }

/* 昇進: 見出し → 冠（光の にじみ）と タイシカは 横に 並べる（重ねない） */
.kc-stage { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: center; place-items: end center; }
.kc-glow { grid-area: 1 / 2; align-self: center; width: clamp(110px, calc(100dvh - 540px), 240px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 240 170 / .95), rgb(255 210 90 / .45) 55%, transparent); animation: rv-glow-in .6s ease-out .2s both; }
.kc-crownbox { grid-area: 1 / 2; align-self: center; line-height: 0; z-index: 1; }
.kc-crownbox .kani-crown { position: relative; height: clamp(80px, calc(100dvh - 590px), 200px) !important; width: auto !important; animation: kc-drop 1.1s cubic-bezier(.25, 1.4, .5, 1) .2s both; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.kc-taishika { position: relative !important; right: auto !important; bottom: auto !important; grid-area: 1 / 3; justify-self: start; height: clamp(76px, calc(100dvh - 600px), 190px) !important; }
.kc-title { animation: rv-title-in .55s cubic-bezier(.2, 1.6, .4, 1) .05s both !important; }
html.reduce-motion .kc-glow { animation: none; }

/* 結果: 回る 光の 画像を やめ、キャラの 後ろに 光の にじみ */
.result-hero::before { content: ''; position: absolute; left: 50%; bottom: 0; width: min(70%, 220px); aspect-ratio: 1.4; translate: -50% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 150 / .75), transparent); animation: rv-glow-in .5s ease-out .1s both; }
.result-screen.tier-small .result-hero::before { display: none; }

/* ひらめき（v2.6 最終）: 1段に「ひみコン | ひらめき！ | タイシカ」。見出しは まん中の 列だけ（顔に 重ならない） */
.rv-stage { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: none !important; align-items: end !important; justify-items: center; gap: 4px; height: clamp(104px, calc(100dvh - 540px), 210px) !important; }
html.text-large .rv-stage { height: clamp(88px, calc(100dvh - 590px), 170px) !important; }
.rv-stage .rv-chara { height: 100% !important; width: auto; }
.rv-center { position: relative; align-self: center; width: 100%; display: grid; place-items: center; }
.rv-stage.is-insight .rv-center::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 2; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 150 / .85), rgb(255 214 110 / .3) 60%, transparent); animation: rv-glow-in .5s ease-out .1s both; }
.rv-center .rv-title { width: 100% !important; max-width: 230px; }
html.reduce-motion .rv-center::before { animation: none; }
@media (max-height: 700px) { .rv-explain { display: none; } }
.rv-stage { grid-template-rows: 100% !important; }
.rv-stage .rv-chara { max-width: 30vw; object-fit: contain; object-position: bottom; }
.rv-stage, .rv-center { min-width: 0; }
/* ひらめき: 余った 高さは キャラの 段に（小さい 画面でも 空白を 作らない） */
.phase-reveal .play-body { display: flex !important; flex-direction: column; }
.phase-reveal .rv { flex: 1 1 auto; display: flex !important; flex-direction: column; align-items: stretch; }
.phase-reveal .rv > * { flex: none; }
.phase-reveal .rv-stage { flex: 1 1 auto !important; height: auto !important; min-height: 96px; max-height: 250px; }
.phase-reveal .rv-intro, .phase-reveal .rv-guess { align-self: center; }
.phase-reveal .rv-stage { max-height: 320px; grid-template-columns: minmax(0, 27%) minmax(0, 1fr) minmax(0, 27%) !important; }
.rv-stage .rv-chara { max-width: 100%; }
.rv-center .rv-title { max-width: 280px; transform: scale(1.12) !important; }
@media (max-width: 380px) { .rv-center .rv-title { transform: scale(1.18) !important; } }
/* 昇進: 余った 高さは 冠の 段に */
.kani-ceremony > * { flex: none; }
.kani-ceremony .kc-stage { flex: 1 1 auto !important; height: auto !important; min-height: 96px; max-height: 280px; grid-template-rows: 100%; }
.kc-glow { width: auto !important; height: 100%; }
.kc-crownbox { height: 90%; display: grid; place-items: center; }
.kc-crownbox .kani-crown { height: 100% !important; }
.kc-taishika { height: 90% !important; }
/* 結果: 収まらない ときは 上から 並べる（キャラが 見出しに 隠れない） */
.result-screen .screen-body { justify-content: safe center; }
.kani-ceremony .kc-stage { flex: none !important; height: clamp(90px, calc(100dvh - 500px), 260px) !important; min-height: 0; overflow: visible; }
html.text-large .kani-ceremony .kc-stage { height: clamp(80px, calc(100dvh - 560px), 220px) !important; }
.kc-crownbox, .kc-crownbox .kani-crown, .kc-taishika, .kc-glow { height: 100% !important; max-height: 100%; }
.kc-crownbox .kani-crown { width: auto !important; object-fit: contain; }
/* 冠は 段の 高さに 直接 合わせる（% が 効かない 環境が ある ため） */
.kc-crownbox { display: block !important; }
.kc-crownbox .kani-crown { height: clamp(90px, calc(100dvh - 500px), 260px) !important; width: auto !important; max-height: none; }
html.text-large .kc-crownbox .kani-crown { height: clamp(80px, calc(100dvh - 560px), 220px) !important; }
/* お知らせ（夜の 里の 色に。字が 読めない のを 直す 2026-10-11） */
#toast { background: rgb(29 20 13 / .94); color: #fff8e9; box-shadow: 0 0 0 2px #c9a24f, 0 8px 20px rgb(0 0 0 / .4); }

/* ===== v3.0: 結果の おだんご（内わけ・山盛り・つぎの レベルアップ）・れんぞくの 重箱・おみくじの シール ===== */
.dango-card.jackpot { box-shadow: 0 0 0 3px #f2c45a, 0 0 18px #ffd76a; }
.yamamori-title { display: block; width: min(220px, 60vw); height: auto; margin: -2px auto 2px; animation: dango-pop .6s cubic-bezier(.2, 1.6, .4, 1) .5s both; }
@keyframes dango-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dango-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; list-style: none; margin: 4px 0; padding: 0; }
.dango-parts li { padding: 2px 10px; border-radius: 999px; background: #fff3d6; color: #6b4a1a; font-size: var(--fs-xs); border: 1px solid #ecd29b; animation: dango-in .45s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--k) * 180ms + 300ms); }
.dango-parts li b { color: #b3264e; }
.dango-parts .part-jackpot { background: linear-gradient(90deg, #ffe08a, #ffb3c8); border-color: #e2a53a; font-weight: 700; }
.dango-parts .part-pass { background: #eef8ec; border-color: #9cc79a; }
@keyframes dango-in { 0% { transform: translateY(10px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dango-next { display: grid; gap: 4px; margin: 6px auto 2px; max-width: 360px; padding: 6px 12px; border-radius: 12px; background: #fff7ea; color: #4a3a2a; font-size: var(--fs-xs); text-align: center; text-decoration: none; border: 1px solid #ecd29b; }
.dango-next b { color: #b3264e; font-size: var(--fs-sm); }
.dango-next-bar { display: block; height: 8px; border-radius: 99px; background: #eee2c8; overflow: hidden; }
.dango-next-bar i { display: block; height: 100%; width: var(--fill); background: linear-gradient(90deg, #f6a6c1, #e05a8a, #f2c45a); border-radius: inherit; animation: dango-fill 1s ease .9s both; }
@keyframes dango-fill { from { width: 0; } }
.streak-gift { margin: 8px 0; padding: 8px 10px; border-radius: 16px; background: linear-gradient(120deg, #fff5d6, #ffe6ef); border: 2px solid #f2c45a; text-align: center; color: #3d2f20; }
.streak-gift .streak-title { width: min(240px, 66vw); height: auto; }
.streak-gift p { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; text-align: left; }
.streak-gift p img { width: 52px; height: 52px; flex: none; }
.streak-gift strong { display: block; font-size: var(--fs-sm); }
.streak-gift small { display: block; font-size: var(--fs-xs); color: #6b5638; }
.ck-gifts .ck-dango img { width: 48px; height: 48px; object-fit: contain; }
.ck-gifts .ck-dango.big { background: linear-gradient(120deg, #fff5d6, #ffe6ef); border-radius: 12px; }
.ck-sticker { width: 48px; height: 48px; border-radius: 50%; }
.ck-sticker.star-4, .ck-sticker.star-5 { box-shadow: 0 0 0 2px #f2c45a, 0 0 10px #ffd76a; }
.reduce-motion .dango-parts li, .reduce-motion .yamamori-title, .reduce-motion .dango-next-bar i { animation: none; }

/* v3.0: 確認・購入の ダイアログは 妖怪退治の 重なり（.yk-modal 80）より 上に（続けるの 途中で 買える ように） */
.dlg-layer { z-index: 85; }

/* ===== v3.1: アプリの 説明（初日）・脳年齢テストの 試しごとの 結果・全体の 評価・おさそい ===== */
.intro-body { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; text-align: center; }
.intro-dots { display: flex; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.intro-dots li { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .35); }
.intro-dots li.on { background: #f2c45a; box-shadow: 0 0 8px #f2c45a; }
.intro-title { margin: 0; line-height: 0; }
.intro-title img { width: min(320px, 82vw); height: auto; animation: dango-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.intro-art { flex: 1 1 0; min-height: 96px; max-height: min(300px, 78vw, 42dvh); width: auto; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 24px; border: 3px solid #e2c78d; box-shadow: 0 8px 24px rgb(0 0 0 / .35); object-fit: cover; animation: intro-in .5s ease both .1s; }
.intro-text { flex: none; margin: 0; padding: 10px 14px; border-radius: 16px; background: rgb(255 250 238 / .94); color: #3d2f20; font-size: var(--fs-md); line-height: 1.6; max-width: 380px; }
.intro-screen .dock { display: grid; gap: 4px; }
.intro-screen .img-btn-next img { width: min(300px, 80vw); height: auto; }
@keyframes intro-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* 試しごとの 結果 */
.ck-trial-result .screen-body { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ckr-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgb(255 250 238 / .94); color: #3d2f20; font-weight: 700; }
.ckr-head img { width: 40px; height: 40px; }
.ckr-head small { display: block; font-size: var(--fs-xs); font-weight: 500; color: #6b5638; text-align: left; }
.ckr-score { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 340px; padding: 6px 0; }
.ckr-points { margin: 0; color: #fff; text-shadow: 0 3px 0 #7a1238, 0 0 18px rgb(255 200 120 / .6); }
.ckr-points b { font-size: clamp(64px, 20vw, 92px); line-height: 1; font-weight: 800; }
.ckr-points small { font-size: var(--fs-lg); margin-left: 2px; }
.ckr-stamp { width: clamp(84px, 26vw, 112px); height: auto; transform: rotate(-12deg); animation: ckr-stamp .55s cubic-bezier(.2, 1.4, .4, 1) .6s both; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
@keyframes ckr-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 70% { opacity: 1; transform: rotate(-12deg) scale(.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.ckr-titles { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ckr-title { width: min(260px, 66vw); height: auto; animation: dango-pop .5s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
.ckr-best { width: min(130px, 34vw); height: auto; animation: dango-pop .5s cubic-bezier(.2, 1.6, .4, 1) 1.2s both; }
.ckr-stats { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ckr-stats li { display: grid; justify-items: center; min-width: 84px; padding: 4px 10px; border-radius: 12px; background: rgb(255 250 238 / .94); color: #3d2f20; }
.ckr-stats span { font-size: var(--fs-xs); color: #6b5638; }
.ckr-stats b { font-size: var(--fs-lg); }
.ckr-stats b small { font-size: var(--fs-xs); }
.ckr-cmp { margin: 0; padding: 2px 12px; border-radius: 999px; background: rgb(0 0 0 / .35); color: #fff; font-size: var(--fs-sm); }
.ckr-cmp em { font-style: normal; color: #ffd76a; font-weight: 700; }
.ck-trial-result .speech { width: 100%; max-width: 420px; text-align: left; }
.ckr-review { width: 100%; max-width: 420px; text-align: left; background: rgb(255 250 238 / .94); border-radius: 12px; padding: 4px 10px; color: #3d2f20; }
.ckr-review ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.ckr-review li { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); flex-wrap: wrap; }
.ckr-review li.ok .mark { color: #2c7a3b; font-weight: 800; }
.ckr-review li.ng .mark { color: #b3264e; font-weight: 800; }
.ckr-review small { color: #8a6a4a; }

/* 全体の 評価 */
.ck-final .ck-result { gap: 8px; }
.cka-pass { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgb(255 250 238 / .94); color: #3d2f20; font-size: var(--fs-sm); }
.cka-pass.ok { box-shadow: 0 0 0 2px #f2c45a; }
.cka-title { margin: 2px 0 0; line-height: 0; }
.cka-title img { width: min(280px, 74vw); height: auto; }
.cka-age { position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: 'num stamp' 'delta delta'; align-items: center; justify-content: center; column-gap: 6px; }
.cka-num { grid-area: num; margin: 0; color: #fff; text-shadow: 0 3px 0 #7a1238, 0 0 20px rgb(255 200 120 / .6); }
.cka-num b { font-size: clamp(72px, 22vw, 104px); line-height: 1; font-weight: 800; }
.cka-num small { font-size: var(--fs-xl); margin-left: 2px; }
/* 低い 画面では 見出しの 絵と 数字を 少し 小さく して、タイシカの ひとことまで 1画面に 収める */
@media (max-height: 700px) { .ck-final .ck-result { gap: 8px; } .cka-title img { width: min(230px, 62vw); } .cka-num b { font-size: 72px; } }
@media (max-height: 660px) { .ck-final .ck-result { gap: 5px; } .cka-title img { width: min(200px, 56vw); } }
.cka-stamp { grid-area: stamp; width: clamp(72px, 22vw, 96px); height: auto; transform: rotate(-12deg); animation: ckr-stamp .55s cubic-bezier(.2, 1.4, .4, 1) .7s both; }
.cka-best { position: absolute; top: -10px; right: -40px; width: 110px; height: auto; transform: rotate(10deg); animation: dango-pop .5s cubic-bezier(.2, 1.6, .4, 1) 1.1s both; }
.cka-delta { grid-area: delta; justify-self: center; margin-top: 2px; padding: 3px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; background: rgb(255 250 238 / .94); color: #3d2f20; }
.cka-delta b { font-size: var(--fs-lg); }
.cka-delta.better { background: linear-gradient(90deg, #fff1c2, #ffd9e6); color: #9a1240; }
.cka-delta.worse { background: #eef1ff; color: #3d4a7a; }
.cka-bars li { display: grid; grid-template-columns: 34px 6.5em 1fr 2.4em 30px; align-items: center; gap: 6px; }
.cka-bars li > em { grid-column: 2; grid-row: 2; justify-self: start; font-size: 11px; }
.cka-ico { width: 32px; height: 32px; }
.cka-name { display: grid; line-height: 1.2; font-size: var(--fs-sm); }
.cka-name small { font-size: 11px; color: var(--ink-soft); }
.cka-mini { width: 30px; height: 30px; }
.cka-bars li.strong .bar > span { background: linear-gradient(90deg, #f6a6c1, #e05a8a); }
.cka-trend { margin: 0; width: 100%; max-width: 360px; padding: 6px 8px 2px; border-radius: 14px; background: rgb(255 250 238 / .94); color: #3d2f20; }
.cka-trend svg { width: 100%; height: auto; overflow: visible; }
.cka-trend polyline { fill: none; stroke: #e05a8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cka-trend circle { fill: #fff; stroke: #e05a8a; stroke-width: 2.5; }
.cka-trend circle.now { fill: #f2c45a; stroke: #b3264e; }
.cka-trend text { font-size: 11px; text-anchor: middle; fill: #6b4a1a; font-weight: 700; }
.cka-trend figcaption { font-size: 11px; color: #6b5638; text-align: center; }
.cka-trend-note { margin: 0; font-size: var(--fs-xs); color: #fff; text-shadow: 0 1px 2px #000a; }

/* おさそい（2日目 から 起動の とき） */
.ck-invite .kani-prompt { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.ck-invite .ck-prompt-fig { height: 150px; width: auto; }
.ck-invite-lead { font-size: var(--fs-md); text-align: center; }
.ck-invite-lead b { font-size: var(--fs-xl); color: #b3264e; }
.ck-invite-steps { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 4px 0; padding: 0; }
.ck-invite-steps li { display: grid; justify-items: center; font-size: var(--fs-xs); }
.ck-invite-steps img { width: 44px; height: 44px; }
.result-exam-call { margin-bottom: 4px; }
.reduce-motion .ckr-stamp, .reduce-motion .cka-stamp, .reduce-motion .ckr-title, .reduce-motion .ckr-best, .reduce-motion .cka-best, .reduce-motion .intro-art, .reduce-motion .intro-title img { animation: none; }
.ck-final .ck-result { justify-content: flex-start; align-items: center; display: flex; flex-direction: column; }
.ck-final .ck-result > * { flex: none; }
.cka-bars { width: 100%; max-width: 380px; margin: 0; padding: 8px 10px; list-style: none; border-radius: 14px; background: rgb(255 250 238 / .95); color: #3d2f20; }
.cka-bars li { grid-template-columns: 30px 5.6em minmax(40px, 1fr) 2em 28px 3.4em; gap: 4px; }
.cka-bars li > em { grid-column: auto; grid-row: auto; justify-self: start; font-style: normal; font-size: 11px; padding: 1px 4px; border-radius: 6px; }
.cka-bars li > em.tag-good { background: #ffe3ec; color: #a1123f; }
.cka-bars li > em.tag-grow { background: #e7f3ff; color: #22608f; }
.cka-bars .bar { position: relative; overflow: visible; }
.cka-bars .bar .pass { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #b3264e; }
.ck-final .speech { width: 100%; max-width: 420px; }

.ck-invite .muted { text-align: center; }

.intro-screen .btn-ghost { color: #fff7e0; text-shadow: 0 1px 3px #000c; }
.cka-bars li { grid-template-columns: 30px 5.4em minmax(36px, 1fr) 1.9em 26px auto; }
.cka-bars li > em { white-space: nowrap; }

.intro-screen .dock { justify-items: center; }
.intro-screen .img-btn-next { display: block; margin: 0 auto; background: none; border: 0; padding: 0; }