:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #16213a;
  --text-dim: #6b7280;
  --accent: #f97316;
  --accent-2: #4f46e5;
  --danger: #ef4444;
  --success: #16a34a;
  --border: #e5e7eb;
  --radius: 12px;
}

/* ===== テーマ（設定で切替）=====
   HaTaKeのプリセットと同じ配色。leaf=主色 / pale=淡い面 / border=枠線 を
   テンプラの --accent / --surface-2 / --border に対応させている */
:root[data-theme="green"] {
  --bg: #f2f8f0;
  --surface: #ffffff;
  --surface-2: #e9f3e2;
  --text: #23301f;
  --text-dim: #6f8168;
  --accent: #4a7c59;
  --accent-2: #5f9d54;
  --border: #cfe3c4;
  --radius: 14px;
}
:root[data-theme="blue"] {
  --bg: #f1f6fc;
  --surface: #ffffff;
  --surface-2: #e4eefb;
  --text: #1c2836;
  --text-dim: #67788c;
  --accent: #2c6fb0;
  --accent-2: #4a86c5;
  --border: #c6dcf2;
  --radius: 14px;
}
:root[data-theme="orange"] {
  --bg: #fdf6ea;
  --surface: #ffffff;
  --surface-2: #fdefd9;
  --text: #332616;
  --text-dim: #8b7757;
  --accent: #c47a1a;
  --accent-2: #e0932e;
  --border: #eec48a;
  --radius: 14px;
}
:root[data-theme="purple"] {
  --bg: #f7f2fb;
  --surface: #ffffff;
  --surface-2: #efe6f6;
  --text: #2b2233;
  --text-dim: #7b6c88;
  --accent: #7d4fa0;
  --accent-2: #9b6cc0;
  --border: #d8c4e8;
  --radius: 14px;
}
:root[data-theme="pink"] {
  --bg: #fdf3f6;
  --surface: #ffffff;
  --surface-2: #fbe6ec;
  --text: #33202a;
  --text-dim: #8d6a77;
  --accent: #b8456a;
  --accent-2: #d56a8c;
  --border: #eeb4c8;
  --radius: 14px;
}
/* 10Pra のアクア。キャラの水色に合わせた基調 */
:root[data-theme="aqua"] {
  --bg: #eef8fb;
  --surface: #ffffff;
  --surface-2: #dcf0f7;
  --text: #10323f;
  --text-dim: #5b8494;
  --accent: #1b9fc4;
  --accent-2: #37bede;
  --border: #b6e2ef;
  --radius: 16px;
}

:root[data-theme="teal"] {
  --bg: #eff8f7;
  --surface: #ffffff;
  --surface-2: #e0f2f0;
  --text: #1c2f2d;
  --text-dim: #628079;
  --accent: #1f8a82;
  --accent-2: #2fa39a;
  --border: #a9dcd7;
  --radius: 14px;
}
/* 天ぷら: アプリ名そのままの食べ物コンセプト。衣のきつね色と紺の暖簾 */
:root[data-theme="tempura"] {
  --bg: #fdf4e3;
  --surface: #fffdf8;
  --surface-2: #fbe9c8;
  --text: #3d2b16;
  --text-dim: #9a7f55;
  --accent: #d98a1f;
  --accent-2: #1f3a5f;
  --border: #ecd4a6;
  --radius: 16px;
}
/* 衣のさっくり感を、カードのふちの細い線で出す */
:root[data-theme="tempura"] .card {
  box-shadow: 0 2px 10px rgba(180, 130, 50, 0.12);
  border: 1px solid #f0dcb4;
}
:root[data-theme="tempura"] .topbar h1,
:root[data-theme="tempura"] .sidebar-nav .brand {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  letter-spacing: 0.04em;
}

:root[data-theme="brown"] {
  --bg: #f7f2ec;
  --surface: #ffffff;
  --surface-2: #efe6da;
  --text: #2e251d;
  --text-dim: #857463;
  --accent: #7a5c42;
  --accent-2: #a07850;
  --border: #d8c6b1;
  --radius: 14px;
}

/* 日本語も英語も同じ骨格で読めるように、和文フォントを先に置く。
   Meiryo は Mac に無いので、近い並び（ヒラギノ角ゴ → Meiryo → 游ゴシック → Noto）で受ける */
:root {
  --font-ui: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic Medium",
    "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-feature-settings: "palt" 1; /* 和文の詰めを少し整える */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

header.topbar {
  padding: calc(env(safe-area-inset-top) + 16px) 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-gate-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.admin-gate-box h1 { font-size: 20px; margin: 0 0 6px; }
.admin-gate-box p { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; }
.admin-gate-box input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 12px;
}
.admin-gate-box .btn-primary { width: 100%; }
.admin-gate-err { color: var(--danger); font-size: 13px; margin-top: 12px; }

header.topbar h1 {
  font-size: 20px;
  margin: 0;
}

/* ロゴのすぐ隣に名前を置く。上のバーは名乗るだけにして、標語は重ねない */
.topbar-brand-link {
  display: flex; align-items: center; gap: 10px;
  color: inherit;
  text-decoration: none;
}
.topbar-brand-text { font-size: 15px; font-weight: 800; line-height: 1.2; }
.topbar-brand-text small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; color: var(--text-dim); }

.settings-link, .back-link {
  font-size: 18px;
  text-decoration: none;
  color: var(--text-dim);
  padding: 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-label { font-weight: 600; font-size: 15px; }
.settings-select {
  padding: 10px 12px; font: inherit; font-size: 15px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}

.theme-list { display: flex; flex-direction: column; gap: 10px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
}
.theme-option.selected { border-color: var(--accent); }
.theme-swatch { display: flex; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.theme-swatch i { width: 16px; height: 34px; display: block; }
.theme-text { flex: 1; }
.theme-name { display: block; font-weight: 700; font-size: 15px; }
.theme-desc { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.buddy-list { display: flex; flex-direction: column; gap: 10px; }
.buddy-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
}
.buddy-option.selected { border-color: var(--accent); background: #fff7ed; }
.buddy-avatar { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
.buddy-text { flex: 1; }
.buddy-name { font-weight: 700; font-size: 15px; }
.buddy-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.buddy-check { color: var(--accent); font-weight: 700; font-size: 18px; }
.settings-desc { font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }

main {
  flex: 1;
  padding: 0 16px 16px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin: 12px 0 6px;
}
label:first-child { margin-top: 0; }

input, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-2);
}

textarea { resize: vertical; min-height: 60px; }

button {
  font-family: inherit;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: white;
  width: 100%;
  font-weight: 600;
  padding: 14px;
  font-size: 16px;
}
.btn-primary:active { background: var(--accent-2); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}

.word-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.word-item:last-child { border-bottom: none; }

.word-item .front { font-weight: 600; }
.word-item .back { color: var(--text-dim); font-size: 14px; }
.word-item .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.word-actions { display: flex; gap: 8px; flex-shrink: 0; }
.word-actions button { padding: 8px 10px; font-size: 13px; }
.cat-edit-card { margin: 4px 0 14px; background: var(--surface-2); }
.cat-edit-card label { margin-top: 10px; }

nav.tabbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
nav.tabbar a {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12px;
  position: relative;
}
nav.tabbar a .icon { display: block; font-size: 20px; margin-bottom: 2px; }
.icon svg { width: 1em; height: 1em; display: block; margin: 0 auto; }
nav.tabbar a .icon svg { stroke: var(--text-dim); }
nav.tabbar a.active .icon svg { stroke: var(--accent-2); }
.sidebar-nav .icon svg { stroke: var(--text); }
.sidebar-nav a.active .icon svg { stroke: var(--accent-2); }
nav.tabbar a.active { color: var(--accent-2); }

.badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  background: var(--danger);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  min-width: 16px;
}

.empty-state {
  text-align: center;
  color: var(--text-dim);
  padding: 60px 20px;
}
.empty-state .emoji { font-size: 40px; display: block; margin-bottom: 12px; }

.ebiten-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  object-fit: contain;
}
.ebiten-icon-lg {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 12px;
}
.bot-avatar .ebiten-icon { width: 20px; height: 20px; vertical-align: middle; }

.suggest-item {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
}
.suggest-item .front { font-weight: 700; font-size: 17px; }
.suggest-item .reading { font-weight: 400; font-size: 13px; color: var(--text-dim); }
.ipa { font-weight: 400; font-size: 13px; color: var(--text-dim); font-family: var(--font-mono, monospace); }
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: none;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 4px;
  color: var(--accent);
  cursor: pointer;
  vertical-align: -6px;
}
.speak-btn svg { width: 15px; height: 15px; }
.speak-btn:active { background: var(--accent); color: #fff; transform: scale(0.94); }

/* 再生中: ボタンが弾み、音波のリングが外へ広がる */
.speak-btn { position: relative; }
.speak-btn.speaking { animation: speakBounce 0.6s ease-out; }
.speak-btn.speaking::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid currentColor; animation: speakRing 0.6s ease-out;
}
@keyframes speakBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.22); }
  55% { transform: scale(0.95); }
}
@keyframes speakRing {
  0% { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}
.story-word .speak-btn { width: 32px; height: 32px; vertical-align: -8px; }
.story-word .speak-btn svg { width: 18px; height: 18px; }
.suggest-item .back { color: var(--accent-2); font-size: 14px; margin-top: 4px; }
.suggest-item .mnemonic { color: var(--text-dim); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.suggest-item .btn-primary { margin-top: 10px; padding: 10px; font-size: 14px; }

/* ---- ストーリーズ風 献立列 ---- */
.stories-row {
  display: flex;
  gap: 14px;
  padding: 4px 4px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories-row::-webkit-scrollbar { display: none; }
.story-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text);
  padding: 0;
}
.story-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
}
.story-ring.done { background: var(--surface-2); }
.story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.story-circle .story-label {
  font-size: 11px;
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- ストーリービューアー ---- */
.story-viewer {
  position: fixed;
  inset: 0;
  background: #000c;
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-viewer[hidden] { display: none; }
.story-progress {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.story-progress .seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #ffffff44;
}
.story-progress .seg.active { background: #fff; }
.story-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 24px);
  right: 14px;
  background: none;
  color: #fff;
  font-size: 20px;
  z-index: 52;
}
.story-content {
  width: min(92vw, 420px);
  background: var(--surface);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
}
.story-content .story-word { font-size: 28px; font-weight: 800; margin-top: 6px; }
.story-content .story-reading { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.story-content .story-bubble {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}
.story-content .story-desc { color: var(--accent-2); font-size: 14px; margin-top: 12px; }
.story-content .story-example { color: var(--text-dim); font-size: 13px; margin-top: 8px; line-height: 1.5; }
.story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 51;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

/* ---- 投稿アクション行 ---- */
.action-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.action-row button {
  background: none;
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.action-row { flex-wrap: wrap; }
.action-row button.reacted { color: #f97316; }
.action-row .post-note-btn { margin-left: auto; }
.action-row .frying-note {
  width: 100%;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.word-details {
  margin-top: 10px;
}
.word-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.word-details summary::-webkit-details-marker { display: none; }
.word-details summary::after {
  content: "▾";
  font-size: 11px;
  transition: transform 0.15s;
}
.word-details[open] summary::after { transform: rotate(180deg); }
.word-details[open] summary { margin-bottom: 8px; }

.my-note {
  background: #fff7ed;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.my-note-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 3px;
}

.create-theme-tile {
  border: 2px dashed var(--border);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 180px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.create-theme-plus { font-size: 28px; color: var(--accent); }
.create-theme-label { font-weight: 700; font-size: 14px; }
.create-theme-sub { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

.note-editor {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.note-editor .note-textarea { min-height: 72px; }

/* ---- バット グリッド ---- */
.bat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bat-tile {
  position: relative;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
}
.bat-tile.selected { border-color: var(--accent); }
.bat-tile .tile-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.bat-tile .tile-emoji { font-size: 34px; display: block; }
.bat-tile .tile-word {
  font-weight: 700;
  font-size: 14px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bat-tile .fry-bar { max-width: none; margin-top: 8px; }
.bat-tile .tile-meta { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.bat-tile.done { background: linear-gradient(135deg, #fde68a, #fbbf24); }

/* ---- ロビー（部屋選択）---- */
.lobby-lead {
  color: var(--text-dim);
  font-size: 14px;
  margin: 4px 4px 16px;
  line-height: 1.6;
}

/* ---- マイ単語帳のツールバー / リスト表示 / 印刷 ---- */
.list-toolbar { margin-bottom: 12px; }
.theme-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filter-chip {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.filter-chip.on { background: var(--accent); color: #fff; font-weight: 700; }
.list-actions { display: flex; gap: 8px; }
.list-actions button { flex: 1; padding: 10px; font-size: 13px; }

.print-header { display: none; }

.study-list { display: flex; flex-direction: column; }
.study-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.study-row:last-child { border-bottom: none; }
.study-check { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.study-check:checked ~ .study-body .study-front { text-decoration: line-through; opacity: 0.55; }
.study-body { flex: 1; min-width: 0; }
.study-front { display: block; font-weight: 700; font-size: 15px; }
.study-back { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.study-memo {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: pre-wrap;
  border-left: 2px solid var(--border);
  padding-left: 8px;
}
.study-level { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }

@media print {
  .sidebar-nav, nav.tabbar, header.topbar, .list-toolbar, .toast, dialog,
  #genre-picker, #view-add, .story-viewer, .list-hint, .report { display: none !important; }
  body { padding-left: 0 !important; background: #fff !important; }
  main { max-width: none !important; padding: 0 !important; }
  .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .print-header {
    display: block !important;
    border-bottom: 2px solid #333;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .print-title { font-size: 16pt; font-weight: 700; }
  .print-date { font-size: 9pt; color: #555; }
  .study-row {
    break-inside: avoid;
    page-break-inside: avoid;
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
  }
  .study-front { font-size: 11pt; }
  .study-back, .study-memo { font-size: 9pt; color: #333 !important; }
  .study-level { font-size: 8pt; color: #666 !important; }
  .study-check { -webkit-appearance: none; appearance: none; border: 1px solid #666; border-radius: 2px; }
  /* チェックで選んだ語だけ印刷する（applyPrintSelectionが付与） */
  .study-row.print-hidden { display: none !important; }
}

/* ---- あなたのテーマ（進捗カード）---- */
.une-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.une-card:hover { box-shadow: 0 2px 10px rgba(16,24,40,0.08); }
.une-card.active { border-color: var(--accent); border-width: 2px; padding: 11px 13px; }
.une-card.no-switch { cursor: default; opacity: 0.9; }

.une-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.une-name { font-weight: 700; font-size: 14px; }
.une-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  /* テーマ名が長いと押し出されて2行に折れる。バッジは縮ませず、1行のまま保つ */
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}
.une-meta { margin-left: auto; font-size: 11px; color: var(--text-dim); }

.une-due-text { margin-top: 8px; font-size: 12px; color: var(--accent-2); font-weight: 600; }

.une-add {
  width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}

/* ホーム上部「あなたのテーマ」行 */
.my-themes-head { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 4px 2px 8px; }
.discover-inline { margin-top: 22px; }
.my-themes-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 6px;
  scrollbar-width: none;
}
.my-themes-row::-webkit-scrollbar { display: none; }
.theme-chip-card {
  flex-shrink: 0;
  width: 116px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.theme-chip-card.active { border-color: var(--accent); border-width: 2px; }
.theme-chip-emoji { font-size: 22px; display: block; }
.theme-chip-name { display: block; font-weight: 700; font-size: 13px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-chip-prog { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.theme-chip-bar { display: block; height: 5px; background: var(--surface-2); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.theme-chip-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #f97316); }
.theme-chip-add {
  flex-shrink: 0;
  width: 78px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.genre-follow {
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
/* 学習中のテーマに出る「やめる」。うっかり押さないよう、追加ボタンより控えめにする */
.genre-follow.on { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.genre-follow.on:hover { color: var(--danger); border-color: var(--danger); }

/* Pinterest風ジャンルグリッド */
.genre-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .genre-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 「洋画英単語」カテゴリの見出し（グリッド全幅） */
.cat-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 2px -4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.cat-title { font-size: 17px; font-weight: 800; }
/* 見出しに添える一言。何をすればいいかをその場で示す */
.cat-lead { font-size: 11.5px; color: var(--text-dim); font-weight: 400; line-height: 1.5; }

/* 「テーマをさがす」の中のカテゴリ。親より一段小さく、罫線も引かずに従属を見せる */
.cat-sub {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 2px -6px; padding-left: 10px;
  border-left: 3px solid var(--accent);
}
.cat-sub-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
/* カテゴリに添えるひとこと。1行で収める */
.cat-copy { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.genre-tile {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.genre-tile:hover { box-shadow: 0 2px 10px rgba(16,24,40,0.08); }
.genre-tile-head { display: flex; align-items: center; gap: 8px; }
.genre-tile-icon { display: inline-flex; }
.genre-tile-icon .ico { width: 18px; height: 18px; color: var(--accent); }
.genre-tile-name { font-weight: 700; font-size: 14px; }
.genre-tile-goal {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.genre-tile-meta { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.genre-tile-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.genre-preview-btn {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
}

.preview-dialog { width: min(92vw, 460px); max-height: 80vh; }
.preview-dialog[open] { display: flex; flex-direction: column; }
.preview-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* 通知プレビュー（実際に届く見た目に寄せる） */
.notif-preview {
  margin-top: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.notif-preview-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.notif-preview-head .ebiten-icon { width: 16px; height: 16px; }
.notif-preview-now { margin-left: auto; }
.notif-preview-title { font-weight: 700; font-size: 15px; }
.notif-preview-body { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-top: 3px; }

/* ---- アプリ内お知らせ ---- */
.bell-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: auto;
}
.bell-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  background: #dc2626;
  border-radius: 50%;
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 6px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--surface-2); border-radius: 8px; }
.notif-icon { font-size: 20px; line-height: 1.3; }
.notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-title { font-weight: 700; font-size: 14px; }
.notif-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.history-card { margin-bottom: 14px; }
.history-card summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 2px 0; }
.timeline-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.timeline-date { font-size: 12px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
.timeline-words { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font-size: 12px;
  border: none; color: var(--text); cursor: pointer; width: auto;
  position: relative; /* 吹き出しの基準 */
}
.timeline-chip .ico-sm { width: 13px; height: 13px; }

/* 押す/カーソルを乗せると、その場で日本語の意味を吹き出しで見せる */
.timeline-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.96);
  background: var(--text); color: var(--surface); border-radius: 10px;
  padding: 7px 11px; font-size: 12px; line-height: 1.5; font-weight: 600;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; transition: opacity 0.12s, transform 0.12s;
  z-index: 20; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.timeline-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text);
}
.timeline-chip:hover .timeline-tip,
.timeline-chip.open .timeline-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) scale(1);
}

.list-hint { font-size: 12px; color: var(--text-dim); margin: 0 2px 10px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  font-size: 12px;
  color: var(--accent-2);
  text-decoration: underline;
  cursor: pointer;
  width: auto;
}
.preview-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 10px 0 0;
}
.preview-stage-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin: 14px 0 6px;
}
.preview-stage-label:first-child { margin-top: 0; }
.feed-stage-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin: 22px 2px 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.feed-stage-label:first-child { margin-top: 4px; padding-top: 0; border-top: none; }

.room-door {
  position: relative;
  overflow: hidden;
  padding-top: 34px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.room-door:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12);
  transform: translateY(-1px);
}
.room-enter-hint {
  margin-top: 14px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}
.room-door .noren {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  display: flex;
}
.room-door .noren span {
  flex: 1;
  background: linear-gradient(180deg, #f59e0b, #f97316);
  border-radius: 0 0 10px 10px;
  margin: 0 3px;
  opacity: 0.85;
}
.room-door.visiting .noren span {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.room-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.room-name { font-size: 19px; font-weight: 800; }
.room-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
}
.room-promise {
  color: var(--accent-2);
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.6;
}
.room-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.room-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 10px;
}

.genre-chip {
  background: var(--surface-2);
  color: var(--accent-2);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 14px;
  flex-shrink: 0;
}

.genre-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  color: var(--text);
}
.genre-option.selected { outline: 2px solid var(--accent-2); }
.genre-option .genre-name { font-weight: 700; font-size: 15px; }
.genre-option .genre-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.checkbox-row input { width: auto; }

.user-avatar {
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.post-react-btn.reacted { color: #f97316; }

.bot-reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.bot-reply-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 13px;
}
.bot-reply-avatar .ebiten-icon { width: 15px; height: 15px; }
.bot-reply-bubble {
  background: var(--surface-2);
  border-radius: 4px 12px 12px 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.bot-reply-name {
  display: block;
  font-size: 11px;
  color: var(--accent-2);
  margin-bottom: 2px;
}

.stage-card {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
  border: 1px solid var(--border);
}
.stage-eyebrow {
  font-size: 12px;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stage-title {
  font-size: 19px;
  font-weight: 800;
  margin-top: 4px;
}
.stage-goal {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.6;
}
.stage-progress-text {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: right;
}

.menu-title {
  font-size: 16px;
  margin: 4px 4px 10px;
}

.menu-status {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
}
.menu-status a { color: var(--accent-2); }

.bot-post .bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bot-post .bot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.bot-post .bot-name { font-size: 13px; color: var(--text-dim); }
.bot-post .front { font-weight: 700; font-size: 18px; }
.bot-post .reading { font-weight: 400; font-size: 13px; color: var(--text-dim); }
.bot-post .bot-bubble {
  background: var(--surface-2);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.bot-post .back { color: var(--accent-2); font-size: 14px; }
.bot-post .mnemonic { color: var(--text-dim); font-size: 13px; margin-top: 8px; line-height: 1.5; }

/* 例文の中の「その単語」を目立たせる */
.ex-word {
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* ---- カード裏の穴埋めクイズ ---- */
.has-quiz .card-face-front { cursor: pointer; }
.quiz-cue { font-size: 12px; color: var(--accent-2); font-weight: 600; margin-top: 10px; }
.quiz-label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.quiz-sentence { font-size: 16px; line-height: 1.9; margin-top: 10px; }
.ex-blank {
  display: inline-block;
  min-width: 58px;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface-2);
  border-bottom: 2px solid var(--accent);
  border-radius: 4px 4px 0 0;
  padding: 0 6px;
}
.quiz-banner {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--surface-2);
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.post-known-btn { color: var(--text-dim); }

/* 出題形式の切替 */
.quiz-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.quiz-mode {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-dim);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
}
.quiz-mode.active { background: var(--accent); color: #fff; }

/* 例文の日本語訳（答えを一つに絞るため最初から見せる） */
.quiz-translation { margin-top: 8px; }
.quiz-jp-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--accent-2);
  text-decoration: underline;
  cursor: pointer;
  width: auto;
}
.quiz-jp { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* 音声ヒント（答えを埋めた完成文を音声で聞ける、任意） */
.quiz-hint-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; margin-top: 14px;
  font-size: 13px; color: var(--accent-2); text-decoration: underline; cursor: pointer; width: auto;
}
.quiz-hint-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* 区画上部: 練習モードのカード群 */
.pra-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pra-mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 10px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer;
}
.pra-mode-card:hover { border-color: var(--accent); }
.pra-mode-card svg { width: 26px; height: 26px; color: var(--accent); }

/* リスニングモード */
.quiz-listen-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface-2); border: none; border-radius: 16px; padding: 32px 20px;
  margin: 0 auto; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 700;
}
.quiz-listen-btn svg { width: 44px; height: 44px; }

/* 発音記号モード */
.quiz-ipa { font-size: 30px; letter-spacing: 0.02em; }

/* 反転カードモード: タップで3D風にめくれる大きなカード */
.flip-card { perspective: 1200px; cursor: pointer; width: 100%; max-width: 440px; margin: 0 auto; }
.flip-inner {
  position: relative; width: 100%; height: 280px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; overflow-x: hidden;
}
/* 白地・黒文字のミニマルなカード。色は使わず、余白と細い罫線と影だけで見せる */
.flip-front, .flip-back {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.10);
}
/* 裏面だけ上辺をアクセント色にして、めくったことが分かるようにする。
   擬似要素だと角丸に沿わずはみ出して見えるので、borderそのものを使う */
.flip-back { transform: rotateY(180deg); border-top: 3px solid var(--accent); }
/* flexだと1行に並べようとして長いフレーズがはみ出すので、通常の行送りで折り返させる */
.flip-word {
  font-weight: 900; text-align: center; line-height: 1.15;
  max-width: 100%; overflow-wrap: break-word;
}
.flip-word .speak-btn { vertical-align: middle; margin-left: 8px; }

/* 出方その1（スタンプ）: 大きい文字が一気に縮んで1文字ずつ決まる */
.flip-letter { display: inline-block; opacity: 0; }
.in-stamp .flip-letter { animation: flipLetterStamp 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes flipLetterStamp {
  0% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* 出方その2（どーん）: 単語まるごとが画面外から入ってきて、着地で一度きしむ */
.in-slam .flip-letter { opacity: 1; }
.flip-word.in-slam { animation: flipWordSlam 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
@keyframes flipWordSlam {
  0% { opacity: 0; transform: translateX(-120vw) scale(1.3); }
  55% { opacity: 1; transform: translateX(0) scale(1.12); }
  72% { transform: translateX(0) scale(0.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* 動きを減らす設定の人には、派手な演出を出さずフェードだけにする */
@media (prefers-reduced-motion: reduce) {
  .flip-word.in-slam { animation: none; }
  .in-stamp .flip-letter,
  .flip-letter { animation: flipLetterFade 0.2s ease-out both; }
  @keyframes flipLetterFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
.flip-front .speak-btn { color: #111; background: rgba(0, 0, 0, 0.06); }
.flip-front .speak-btn:active { background: #111; color: #fff; }
.flip-hint { font-size: 15px; margin-top: 20px; color: #9a9a9a; letter-spacing: 0.02em; }
.flip-meaning { font-weight: 900; line-height: 1.4; color: #111; max-width: 100%; word-break: break-word; }
/* カードが白基調なので、ベタ塗りではなく輪郭ボタンにして色だけ残す。
   幅も詰めて、カード（主役）より軽く見えるようにする */
.quiz-next-btn.flip-next-btn {
  margin: 12px auto 0;
  width: auto;
  min-width: 200px;
  padding: 14px 32px;
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background 0.15s, color 0.15s;
}
.flip-next-btn:hover { background: var(--accent); color: #fff; }
.flip-next-btn:active { background: var(--accent); color: #fff; transform: scale(0.98); }

/* リスニング出題 */
.quiz-listen { margin: 6px 0 4px; }
.quiz-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
}
.quiz-play-btn svg { width: 20px; height: 20px; }

/* 4択 */
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.choice-btn {
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  word-break: break-word;
}
.choice-btn:disabled { opacity: 0.55; cursor: default; }
.choice-btn.correct { background: var(--success); color: #fff; opacity: 1; }
.choice-btn.wrong { border-color: #dc2626; color: #dc2626; opacity: 1; }

/* 入力式 */
.quiz-type-row { display: flex; gap: 8px; margin-top: 14px; }
.quiz-input {
  flex: 1;
  margin: 0;
  padding: 12px;
  font-size: 15px;
}
.quiz-submit {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: auto;
  flex-shrink: 0;
}

.quiz-result { margin-top: 12px; font-size: 15px; font-weight: 700; }
.quiz-result.ok { color: var(--success); }
.quiz-result.ng { color: #dc2626; }
.ex-blank.filled { background: transparent; color: var(--accent-2); }
.ex-blank.filled.good { color: var(--success); border-bottom-color: var(--success); }
.ex-blank.filled.bad { color: #dc2626; border-bottom-color: #dc2626; }

.quiz-actions { display: flex; gap: 10px; margin-top: 14px; }
.quiz-actions button {
  flex: 1;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.fry-meter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.fry-emoji { font-size: 15px; }
.fry-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  max-width: 160px;
}
.fry-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 4px;
  transition: width 0.3s;
}
.fry-count { font-size: 12px; color: var(--text-dim); }
.fry-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 20;
}
.toast.show { opacity: 1; }

dialog {
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 20px;
  width: min(90vw, 420px);
}
dialog::backdrop { background: rgba(0,0,0,0.5); }

/* ---- デスクトップ幅: サイドバーナビ + センターカラム ---- */
.sidebar-nav { display: none; }
.side-cart { display: none; }

@media (min-width: 900px) {
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 196px;
    padding: 20px 10px;
    border-right: 1px solid var(--border);
    background: var(--surface);
    z-index: 10;
  }
  /* ロゴは行の1つではなく看板。押せる範囲を塗らない */
  .sidebar-nav .brand,
  .sidebar-nav .brand.active {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 18px;
    padding: 0 0 0 10px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
  }
  .sidebar-nav .brand .ebiten-icon { width: 24px; height: 24px; }
  .sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.12s;
  }
  .sidebar-nav a:hover { background: var(--surface-2); }
  .sidebar-nav a.active { background: #fff7ed; color: var(--accent); }
  .sidebar-nav a.active .icon svg { stroke: var(--accent); }
  .sidebar-nav .icon { font-size: 20px; width: 24px; text-align: center; }
  .sidebar-nav .icon svg { width: 22px; height: 22px; }
  .sidebar-nav .badge-dot {
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: auto;
  }

  /* パソコンでは上のバーを出さないので、カートは左のメニューに置く。
     並びがそろうよう、リンクと同じ形にする */
  .sidebar-nav .side-cart {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 14px; border-radius: 999px; cursor: pointer;
    background: none; border: 0; text-align: left;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
    transition: background 0.12s;
  }
  .sidebar-nav .side-cart:hover { background: var(--surface-2); }
  .sidebar-nav .side-cart .badge-dot { margin-left: auto; background: var(--accent); }
  header.topbar { display: none; }
  nav.tabbar { display: none; }
  body { padding-left: 232px; }
  main { max-width: 640px; margin: 0 auto; padding-top: 32px; }
}

.mail-preview {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  color: var(--text-dim);
}

/* 自分で記録する「体験」ボタン */
.encounter-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  width: auto;
}
.encounter-btn.done,
.encounter-btn:disabled {
  color: var(--text-dim);
  font-weight: 600;
  cursor: default;
}
.bat-tile .encounter-btn { margin-top: 8px; }
.study-row .encounter-btn { align-self: center; }

/* 開発用ユーザー切り替え */
.dev-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.dev-user.active { border-color: var(--accent); background: var(--surface-2); }
.dev-user-name { font-weight: 700; font-size: 14px; }
.dev-now { font-weight: 600; font-size: 11px; color: var(--accent); }
.dev-user-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dev-user .btn-secondary { width: auto; padding: 8px 14px; font-size: 13px; flex-shrink: 0; }

/* ---- 今日のセット ---- */
.session-home {
  text-align: center;
  padding: 22px 18px;
  border: 2px solid var(--accent);
}
.session-home.done { border-color: var(--border); }
.session-streak { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.session-title { font-size: 19px; font-weight: 800; }
.session-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.session-start-btn { margin-top: 14px; max-width: 320px; }

.session-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
/* 画面いっぱいに広げると、PCでは進捗バーと閉じるが左右の端に離れ、
   問題だけが中央に浮いて見える。中身を1本の列に収めて、
   ヘッダー・問題・選択肢・次へ をすべて同じ幅に揃える */
/* 練習の画面は、Epochsやテーマの画面の上に重ねる。
   同じ高さだと、HTMLで後ろに書いてあるほうが上に来て、隠れてしまう */
.session-viewer.drill-viewer { z-index: 70; }

.session-viewer > * {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
/* 盤面を使う画面は、その分だけ広く取る */
.game-viewer > *, .memo-viewer > * { max-width: 760px; }

.session-top { display: flex; align-items: center; gap: 12px; }
.session-progress { flex: 1; display: flex; gap: 5px; }
.session-progress .seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
}
.session-progress .seg.past { background: var(--accent); }
.session-progress .seg.now { background: var(--accent); opacity: 0.45; }
.session-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-dim);
  cursor: pointer;
  width: auto;
  padding: 6px;
}
.session-content { flex: 1; display: flex; align-items: center; justify-content: center; }

.session-new-back { font-size: 15px; color: var(--text); margin: 10px 0; line-height: 1.7; }

.session-next { margin-top: 16px; }

/* 完了画面 */
.session-done-emoji { font-size: 56px; }
.session-done-title { font-size: 20px; font-weight: 800; margin-top: 8px; }
.session-streak-big { font-size: 16px; font-weight: 700; color: var(--accent); margin-top: 10px; }
.session-done .session-finish { margin-top: 20px; }
.session-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.session-confetti span {
  position: absolute;
  top: -12%;
  left: calc(var(--i) * 5.5%);
  font-size: 15px;
  animation: confetti-fall 2.2s ease-in calc(var(--i) * 0.12s) 2;
  opacity: 0;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(560px) rotate(320deg); opacity: 0.4; }
}

/* ---- セッション: テン先生とのチャット ---- */
.session-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-row.me { justify-content: flex-end; }
.chat-row .bot-avatar { flex-shrink: 0; }
.chat-bubble {
  max-width: 82%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}
.chat-row.me .chat-bubble {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 16px 16px 4px 16px;
}
.chat-word { font-size: 22px; font-weight: 800; margin: 4px 0; }
.chat-bubble .quiz-sentence { margin: 2px 0 6px; font-size: 15px; }
.chat-bubble .mnemonic { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.chat-bubble.celebrate {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  text-align: center;
  padding: 24px 16px;
}

.session-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  min-height: 54px;
}
.session-chipbar .chip,
.swipe-btns .chip {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  width: auto;
}
.session-chipbar .chip.primary { background: var(--accent); color: #fff; }
.session-chipbar .chip.ghost { border-color: var(--border); color: var(--text-dim); }

/* 瞬発ジャッジ */
.swipe-stage { width: 100%; }
.swipe-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: transform 0.24s, opacity 0.24s;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.swipe-card.fly-right { transform: translateX(140%) rotate(16deg) !important; opacity: 0; }
.swipe-card.fly-left { transform: translateX(-140%) rotate(-16deg) !important; opacity: 0; }
.swipe-card.good { border-color: var(--success); }
.swipe-card.bad { border-color: #dc2626; }
.swipe-word { font-size: 20px; font-weight: 800; }
.swipe-meaning { font-size: 14px; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }
.swipe-combo { margin-top: 6px; color: var(--accent); font-weight: 700; font-size: 13px; }
.swipe-btns { display: flex; gap: 10px; margin-top: 10px; }
.swipe-btns .chip { flex: 1; }
.swipe-btns .chip.yes { border-color: var(--success); color: var(--success); }
.swipe-btns .chip.no { border-color: #dc2626; color: #dc2626; }

/* ---- iPhone向け 10問クイズ ---- */
.quiz-head { display: flex; align-items: center; gap: 10px; }
/* 閉じるは右端。左上は PC ではマウス移動が長く、スマホでは片手だと一番遠い。
   指でもマウスでも狙えるよう、44px角の当たり判定を確保する */
.quiz-head .session-close, .plot-head .session-close {
  order: 99; margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-dim);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.quiz-head .session-close:hover, .plot-head .session-close:hover { background: var(--surface-2); color: var(--text); }
/* テーマ名は左、閉じるは右。Today's 10 Pra と同じ並びに揃える */
/* 見出しだけ画面幅いっぱいだと、テーマ名と閉じるが左右の端に離れてしまう。
   下の一覧と同じ列幅に収める */
.plot-head { min-height: 44px; max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
.plot-head .plot-title { flex: 1; min-width: 0; }
/* 進捗バーが右端まで伸びると閉じるが押し出されるので、バーは閉じるの前で止める */
.quiz-head .quiz-bar, .quiz-head .epoch-bar { margin-right: 4px; }
.quiz-count { font-size: 13px; font-weight: 700; color: var(--text-dim); min-width: 50px; }
.quiz-bar { flex: 1; display: flex; gap: 3px; }
.quiz-bar span { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-2); }
.quiz-bar span.past { background: var(--accent); }
.quiz-bar span.now { background: var(--accent); opacity: 0.4; }

/* 縦に伸ばしきると、PCでは問題と選択肢が画面の端どうしに離れてしまう。
   ひとかたまりとして真ん中に寄せ、問題→選択肢→次へ の距離を詰める */
.quiz-stage {
  flex: 0 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-top: auto; padding: 0; overflow-y: auto;
}
/* 下側の余りを受け止める。選択肢や次へは出たり消えたりするので、
   末尾の擬似要素に持たせておくと、どれが出ていても真ん中に来る */
.session-viewer:has(> .quiz-stage)::after { content: ""; margin-top: auto; }
.quiz-q { width: 100%; max-width: 440px; text-align: center; padding: 12px 0 0; }
.quiz-q-label { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 16px; }
.quiz-q-body { font-size: 22px; line-height: 1.9; font-weight: 700; }
.quiz-q-body.big { font-size: 25px; }
.quiz-q .quiz-translation { display: block; font-size: 14px; font-weight: 400; color: var(--text-dim); margin-top: 12px; }

.quiz-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 440px; margin: 0 auto; padding-top: 14px;
}
.quiz-next-btn { width: 100%; max-width: 440px; margin: 10px auto 0; display: block; }
.quiz-opt {
  min-height: 62px; font-size: 16px; font-weight: 700;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px;
  color: var(--text); cursor: pointer; padding: 10px; word-break: break-word;
  transition: transform 0.08s;
}
.quiz-opt:active { transform: scale(0.97); }
.quiz-opt:disabled { opacity: 0.5; }
.quiz-opt.correct { background: var(--success); border-color: var(--success); color: #fff; opacity: 1; }
.quiz-opt.wrong { background: #fdecec; border-color: #dc2626; color: #dc2626; opacity: 1; }

/* 正解/不正解の大きなフィードバック。問題文が読めるよう画面下寄りに出す（中央に出すと問題文に被る） */
.quiz-feedback {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(env(safe-area-inset-bottom), 18px);
  pointer-events: none; z-index: 5;
}
.fb-card {
  background: var(--surface); border-radius: 22px; padding: 26px 40px;
  box-shadow: 0 14px 48px rgba(0,0,0,0.18); text-align: center;
  animation: fb-pop 0.24s cubic-bezier(0.2, 1.4, 0.5, 1);
  display: flex; flex-direction: column; align-items: center;
}
.fb-mark { display: flex; }
.fb-mark .ico { width: 64px; height: 64px; stroke-width: 2.4; }
.quiz-feedback.good .fb-mark .ico { color: var(--success); }
.quiz-feedback.bad .fb-mark .ico { color: #dc2626; }
.fb-big { font-size: 40px; font-weight: 900; line-height: 1.1; margin-top: 6px; }
.quiz-feedback.good .fb-big { color: var(--success); }
.quiz-feedback.bad .fb-big { color: #dc2626; }
.fb-sub { font-size: 16px; color: var(--text); margin-top: 8px; }
@keyframes fb-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 結果グラフ */
.quiz-result {
  position: absolute; inset: 0; background: var(--bg); z-index: 6;
  /* 診断結果のように中身が長い場合があるのでスクロールできるようにする。
     justify-content:center だと画面より高いとき上が切れて掴めなくなるため使わない */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* 中身が画面に収まるときは、これまで通り中央に置く */
.quiz-result::before { content: ""; margin-top: auto; }
.quiz-result::after { content: ""; margin-bottom: auto; }
/* 反転カードと同じ「白地・黒文字・細い罫線」のミニマルなカードに揃える */
.result-card {
  width: 100%; max-width: 440px;
  background: #fff; color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.10);
  padding: 36px 28px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.result-emoji { font-size: 52px; line-height: 1; }
.logo-mark { width: 56px; height: 56px; object-fit: contain; }
.result-title { font-size: 20px; font-weight: 800; color: #111; }
.result-score { font-size: 22px; font-weight: 700; color: #9a9a9a; }
.result-score b { font-size: 40px; font-weight: 900; color: #111; }
.result-track { display: flex; gap: 4px; width: 100%; }
.result-track .seg { flex: 1; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); }
.result-track .seg.ok { background: var(--success); }
.result-track .seg.ng { background: #f0a9a9; }
.result-legend { display: flex; gap: 16px; font-size: 12.5px; font-weight: 700; color: #9a9a9a; }
.result-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.result-legend .lg::before { content: ""; width: 8px; height: 8px; border-radius: 999px; }
.result-legend .lg.ok::before { background: var(--success); }
.result-legend .lg.ng::before { background: #f0a9a9; }
.result-streak { font-size: 14px; font-weight: 700; color: var(--accent); }

/* ボタンもカードに合わせて、輪郭＋ピル型。色はアクセントだけ残す */
.result-btn {
  flex: 1; white-space: nowrap; cursor: pointer;
  padding: 14px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.result-btn.ghost { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.result-btn.ghost:hover, .result-btn.ghost:active { background: var(--accent); color: #fff; }
.result-btn.solid { background: var(--accent); color: #fff; border: 1.5px solid var(--accent); }
.result-btn.solid:hover, .result-btn.solid:active { background: var(--accent-2); border-color: var(--accent-2); }

/* ---- 絵文字の代わりに使う線画アイコン（icon()ヘルパー）---- */
.ico {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.session-title .ico,
.result-title .ico,
h2.menu-title .ico {
  vertical-align: -0.1em;
}
.fry-emoji .ico,
.tile-emoji .ico {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

/* トップバーの設定/ベルアイコン（.iconラッパーを使わない箇所のサイズ調整） */
.settings-link svg,
.back-link svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.bell-btn svg { width: 1em; height: 1em; display: block; }

/* ---- 区画グリッド＋区画ビュー ---- */
.plot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.plot-grid .une-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; }
.plot-grid .une-head { margin-bottom: 0; }
.plot-grid .une-meta { margin-left: 0; }
.plot-grid .fry-bar { margin-top: auto; }

.plot-view {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 0;
}
.plot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.plot-title { font-size: 18px; font-weight: 800; }
.plot-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.plot-sub { font-size: 12px; color: var(--text-dim); margin: 10px 2px 12px; }
.plot-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.plot-row:last-child { border-bottom: none; }
.plot-check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.plot-body { flex: 1; min-width: 0; }
.plot-word { display: block; font-weight: 700; font-size: 15px; }
.plot-desc { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.plot-level { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent); align-self: center; }
.plot-level.new { color: var(--text-dim); font-weight: 500; }

/* 旅マップ（一本道）モード */
.journey { position: relative; padding-left: 30px; }
.journey::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 3px;
  background: var(--border); border-radius: 2px;
}
.journey-cap { position: relative; font-size: 12px; font-weight: 800; color: var(--text-dim); margin: 2px 0; }
.journey-cap.goal { margin-top: 8px; color: var(--success); }
.journey-dot {
  position: absolute; left: -24px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--border); z-index: 1;
}
.journey-cap .journey-dot { top: -1px; }
.journey-dot.start { background: var(--accent); border-color: var(--accent); }
.journey-dot.goal { background: var(--success); border-color: var(--success); }
.journey-milestone {
  position: relative; font-weight: 800; font-size: 13px; color: var(--accent); margin: 18px 0 8px;
}
.journey-milestone::before {
  content: ""; position: absolute; left: -26px; top: 0; width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent);
}
.journey-stop { position: relative; margin-bottom: 14px; }
.journey-stop.done .journey-dot { background: var(--accent); border-color: var(--accent); }
.journey-bridge { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 6px; }
.journey-card {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer;
}
.journey-stop.done .journey-card { border-color: var(--accent); }
.journey-card:hover { border-color: var(--accent); }
.journey-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journey-word { font-weight: 800; font-size: 17px; }
.journey-state { font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
/* 文は必ず1つのflexアイテムにまとめる。生のテキストを直接置くと、
   ハイライト前後のテキストノードが別々のflexアイテムになり文がバラバラに並ぶ */
.journey-example-preview { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; color: var(--text); margin-top: 8px; line-height: 1.65; }
.journey-example-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.journey-example-preview .speak-btn { flex-shrink: 0; margin-top: 2px; }
/* 意味は単語のすぐ下に太字で置く。離れていると単語と結びつかず覚えにくいため */
.journey-meaning { font-size: 16px; font-weight: 800; line-height: 1.5; color: var(--accent-2); margin-top: 4px; }
.journey-example-ja { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.6; }
.journey-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.journey-hint { font-size: 11px; color: var(--accent-2); }
.journey-know-btn {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--text-dim); cursor: pointer; flex-shrink: 0;
}
.journey-know-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ⑩Pra達成語のまとめ */
.pra-mastered { margin-top: 16px; }
.pra-mastered summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.pra-mastered summary svg { width: 14px; height: 14px; color: var(--accent); }
.pra-mastered-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pra-mastered-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600;
}

/* ---- Myプラ レポート ---- */
.report-sec-head { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 18px 2px 8px; }
.report-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.report-kpi-label { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.report-kpi-value { font-size: 24px; font-weight: 900; color: var(--accent); }

.report-cal-card { margin-top: 10px; }
.report-cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.report-cal-title { font-size: 15px; font-weight: 800; }
.report-cal-nav {
  background: none; border: none; color: var(--accent); font-size: 14px;
  cursor: pointer; padding: 4px 8px; width: auto;
}
.report-cal-nav:disabled { opacity: 0.25; cursor: default; }
.report-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim); padding-bottom: 4px; }
.cal-dow.sun { color: #dc2626; }
.cal-dow.sat { color: #2563eb; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; border-radius: 8px; }
.cal-day.today { background: var(--surface-2); }
.cal-num { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.cal-num.sun { color: #dc2626; }
.cal-num.sat { color: #2563eb; }
.cal-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
.cal-dot.done { background: var(--accent); }
.cal-dot.none { background: var(--surface-2); }
.report-cal-legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--text-dim); }
.report-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.report-cal-legend .cal-dot { width: 14px; height: 14px; }

.report-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; }
.report-bar { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.report-bar-n { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.report-bar-track { width: 100%; height: 96px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.report-bar-fill { width: 100%; background: linear-gradient(180deg, var(--accent), #ffb066); border-radius: 6px 6px 0 0; min-height: 2px; }
.report-bar-label { font-size: 11px; color: var(--text-dim); }

.report-rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.report-rank-row:last-child { border-bottom: none; }
.report-rank-no {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff; background: var(--text-dim);
}
.report-rank-no.no1 { background: #d4a017; }
.report-rank-no.no2 { background: #9ca3af; }
.report-rank-no.no3 { background: #b45309; }
.report-rank-name { font-size: 14px; font-weight: 700; flex: 1; }
.report-rank-val { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.report-rank-sub { font-size: 11px; font-weight: 600; color: var(--text-dim); }

/* 穴埋めの答え合わせ: 空欄の真上に Good!/No... をポップさせる */
.blank-pop {
  position: fixed; z-index: 60; transform: translate(-50%, -115%);
  font-size: 34px; font-weight: 900; pointer-events: none; white-space: nowrap;
  animation: blankPop 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  text-shadow: 0 2px 10px rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.15);
}
.blank-pop.good { color: var(--success); }
.blank-pop.bad { color: #dc2626; }
@keyframes blankPop {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(0.4); }
  35% { opacity: 1; transform: translate(-50%, -125%) scale(1.15); }
  50% { transform: translate(-50%, -115%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -115%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}

.result-actions { display: flex; gap: 10px; margin-top: 20px; }
.result-actions button { flex: 1; white-space: nowrap; }
/* 次の遊びに誘っても、そのまま閉じたい人が必ずいる。目立たせずに必ず置いておく */
.result-quit {
  display: block; margin: 14px auto 0; padding: 8px 16px; width: auto;
  background: none; border: none; font-size: 13px; color: var(--text-dim);
  text-decoration: underline; cursor: pointer;
}

/* ---- ひろば（投稿タブ）---- チャットアプリの友達一覧のように、Ten・テン先生・グループを並べる */
.plaza-friend-list { display: grid; gap: 10px; }
.plaza-friend {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.plaza-friend:active { transform: translateY(1px); }
.plaza-friend-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.plaza-friend-main b { font-size: 15px; font-weight: 800; }
.plaza-friend-main span {
  font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.plaza-friend-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #e5484d; }
.plaza-friend.add {
  justify-content: center; color: var(--text-dim); border-style: dashed; background: none;
}
.plaza-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 6px 4px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-2);
  background: none; border: 0;
}
.plaza-detail-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; }

.plaza-scopes { margin-bottom: 14px; }
.plaza-scope-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.plaza-scope {
  flex-shrink: 0; width: auto; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; color: var(--text);
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
}
.plaza-scope.on { border-color: var(--accent); border-width: 2px; padding: 7px 15px; }
.plaza-scope-name { font-size: 13px; font-weight: 700; white-space: nowrap; }
.plaza-scope-sub { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.plaza-scope.add { color: var(--text-dim); border-style: dashed; font-size: 13px; justify-content: center; }
.plaza-group-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px; font-size: 12px; color: var(--text-dim);
  background: var(--surface-2); border-radius: 12px;
}
.plaza-code { font-size: 14px; letter-spacing: 0.12em; color: var(--accent); }
.plaza-composer { margin-bottom: 16px; }

/* ひろば: 出題と解答 */
.plaza-q-label { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.plaza-q-meaning { font-size: 24px; font-weight: 800; margin: 8px 0 14px; line-height: 1.4; }
.plaza-hint-label { font-size: 11px; color: var(--text-dim); margin: 12px 0 6px; }
.plaza-hint-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plaza-hint-choice {
  padding: 10px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: none; border-radius: 10px; word-break: break-word;
}
.plaza-judge { margin-top: 12px; font-size: 15px; font-weight: 700; }
.plaza-judge.ok { color: var(--success); }
.plaza-judge.ng { color: #dc2626; }

/* ひろば: 投稿カード */
.plaza-post-meaning { font-size: 17px; font-weight: 700; margin-bottom: 10px; line-height: 1.5; }
.plaza-post-answer { font-size: 20px; font-weight: 800; color: var(--accent-2); display: flex; align-items: center; gap: 4px; }
.plaza-post-comment { font-size: 13px; color: var(--text-dim); margin-top: 10px; line-height: 1.6; }
.plaza-tag {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); border-radius: 999px; padding: 2px 8px;
}
.plaza-try { display: flex; gap: 8px; }
.plaza-try-input { flex: 1; margin: 0; padding: 10px 12px; font-size: 14px; }
.plaza-try-btn {
  width: auto; flex-shrink: 0; padding: 10px 18px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 10px; cursor: pointer;
}
.plaza-try-btn:disabled { opacity: 0.5; }

/* ひろば: 返信スレッド */
.plaza-thread { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.plaza-comment { display: flex; gap: 8px; align-items: flex-start; }
.plaza-comment-body {
  flex: 1; background: var(--surface-2); border-radius: 12px; padding: 8px 12px;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.plaza-comment-name { display: block; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.plaza-comment-del {
  width: auto; background: none; border: none; color: var(--text-dim);
  font-size: 11px; cursor: pointer; padding: 2px 0 0; display: block;
}
.plaza-reply-box { display: flex; gap: 8px; margin-top: 10px; }
.plaza-reply-input { flex: 1; margin: 0; padding: 10px 12px; font-size: 13px; }
.plaza-reply-send {
  width: auto; flex-shrink: 0; padding: 10px 16px; font-size: 13px; font-weight: 700;
  background: var(--surface-2); color: var(--accent); border: none; border-radius: 10px; cursor: pointer;
}

/* ひろば: 答えたあとの状態。問題は消して結果だけ残す */
.plaza-done { text-align: center; padding: 8px 0; }
.plaza-done .plaza-judge { font-size: 20px; margin-bottom: 8px; }
.plaza-done-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.6; }
.plaza-done .btn-primary { max-width: 260px; margin: 0 auto; }

/* 反転カード: 「次へ」で上へ飛ばしてから次の1枚を出す。右上・左上を交互に使う */
.flip-card.fly-out { animation: flipFlyOut 0.36s cubic-bezier(0.4, 0, 0.9, 0.4) forwards; }
.flip-card.fly-out-left { animation: flipFlyOutLeft 0.36s cubic-bezier(0.4, 0, 0.9, 0.4) forwards; }
@keyframes flipFlyOut {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(70%, -90%) rotate(18deg) scale(0.75); }
}
@keyframes flipFlyOutLeft {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-70%, -90%) rotate(-18deg) scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card.fly-out,
  .flip-card.fly-out-left { animation: flipFadeOut 0.18s ease-out forwards; }
  @keyframes flipFadeOut { to { opacity: 0; } }
}

/* 単語帳（設定から入る独立ビュー）の見出し */
.book-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.book-head .back-link { font-size: 20px; text-decoration: none; color: var(--text-dim); }
.book-title { margin: 0; font-size: 18px; font-weight: 800; }

/* ---- 聞き流しプレイヤー ---- */
.player-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.player-word {
  font-size: 40px; font-weight: 900; line-height: 1.2; word-break: break-word;
  color: var(--text); opacity: 0.45; transition: opacity 0.2s, transform 0.2s;
}
.player-word.on { opacity: 1; transform: scale(1.04); }
.player-meaning { font-size: 17px; font-weight: 700; color: var(--accent-2); }
.player-example {
  font-size: 17px; line-height: 1.7; color: var(--text); max-width: 460px;
  opacity: 0.45; transition: opacity 0.2s;
}
.player-example.on { opacity: 1; }

.player-controls { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 8px 0 18px; }
.player-btn {
  width: 56px; height: 56px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--text); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.player-btn.play { width: 72px; height: 72px; background: var(--accent); color: #fff; font-size: 26px; }
.player-btn:active { transform: scale(0.94); }

.player-opts {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
  padding: 0 20px 28px; font-size: 12px; color: var(--text-dim);
}
.player-opts label { display: inline-flex; align-items: center; gap: 6px; }
.player-opts select {
  margin: 0; padding: 6px 8px; font-size: 12px; width: auto;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

/* キャラの顔アイコン。丸く切り出し済みなので、枠いっぱいに出す */
/* 丸く切り抜くと絵の上下が欠ける（ハートの上など）。
   絵は枠内に収め、少し内側に置いて縁で切れないようにする */
.char-face { width: 84%; height: 84%; object-fit: contain; display: block; margin: auto; }
.bot-avatar:has(.char-face) { padding: 0; overflow: hidden; }

/* ---- 弱点しんだん ---- */
.diagnose-empty { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.diagnose-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.diagnose-label { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.diagnose-tag { font-size: 18px; font-weight: 800; color: var(--accent-2); line-height: 1.4; }
.diagnose-rate { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.diagnose-rate b { font-size: 20px; color: var(--text); margin: 0 2px; }
.diagnose-rate span { font-size: 11.5px; }
.diagnose-advice { margin: 0 0 16px; font-size: 13.5px; line-height: 1.9; color: var(--text); }
/* 傾向は隠さず、その場で並べる。ここが診断の中身なので */
.diagnose-bars { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; }
.diagnose-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.diagnose-row-name { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnose-row-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.diagnose-row-bar i { display: block; height: 100%; background: var(--accent); }
.diagnose-row b { flex: none; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.diagnose-tries { color: var(--text-dim); font-size: 11px; flex: none; width: 34px; text-align: right; }

/* まだ受けていない人にも、何が分かるのかが伝わるようにする */
.diagnose-card.fresh { border-left: 4px solid var(--accent); }
.diagnose-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.diagnose-lead { margin: 0 0 16px; font-size: 13px; line-height: 1.9; color: var(--text-dim); }

.diagnose-words { margin-top: 12px; }
.diagnose-words-head { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--text-dim); }
.diagnose-word { padding: 10px 0; border-top: 1px solid var(--border); }
.diagnose-word-en { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.diagnose-word-pra { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: auto; }
.diagnose-word-ja { font-size: 13px; color: var(--accent-2); font-weight: 700; margin-top: 3px; }
.diagnose-word-ex { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.6; }

/* ---- 弱点しんだんテスト ---- */
.diag-exp {
  max-width: 440px; margin: 14px auto 0; padding: 12px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.8; background: var(--surface-2); color: var(--text);
}
.diag-exp-head { font-weight: 800; margin-bottom: 4px; }
.diag-exp.ok .diag-exp-head { color: var(--success); }
.diag-exp.ng .diag-exp-head { color: #dc2626; }
.diag-result-card { max-width: 460px; }
.diag-weak { text-align: left; width: 100%; margin-top: 6px; }
.diag-reco { text-align: left; width: 100%; margin-top: 8px; }
.diag-reco-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.diagnose-actions { display: flex; flex-direction: column; gap: 8px; }

/* タグ別の正答率レーダー。受けるほど面が広がる */
.radar { width: 100%; max-width: 300px; height: auto; display: block; margin: 4px auto 10px; }
.radar-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-spoke { stroke: var(--border); stroke-width: 1; }
.radar-area { fill: var(--accent); fill-opacity: 0.22; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--accent); }
.radar-label { font-size: 8.5px; font-weight: 700; fill: var(--text); }
.radar-val { font-size: 8px; fill: var(--text-dim); }

/* ---- 並べ替えモード ---- */
.order-meaning { font-size: 15px; font-weight: 700; color: var(--accent-2); margin: 10px 0 14px; line-height: 1.6; }
.order-slot {
  min-height: 76px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; justify-content: center;
  padding: 12px; border-radius: 14px; border: 2px dashed var(--border); background: var(--surface);
}
/* 4択の枠は2列のグリッド。並べ替えの札束は1つの子なので、横いっぱいに広げないと
   半分の幅に押し込まれて、がたがたに折り返してしまう */
.quiz-choices > .order-bank { grid-column: 1 / -1; }
.order-bank {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  padding-top: 14px;
}
.order-bank .order-chip { flex: 0 0 auto; }
.order-chip {
  width: auto; padding: 10px 14px; font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
.order-chip.in-slot { background: var(--surface); border-color: var(--accent); }
.order-chip.correct { background: var(--success); border-color: var(--success); color: #fff; }
.order-chip.wrong { background: #fdecec; border-color: #dc2626; color: #dc2626; }
.order-judge { margin-top: 14px; font-size: 16px; font-weight: 800; line-height: 1.7; }
.order-judge.ok { color: var(--success); }
.order-judge.ng { color: #dc2626; }
.order-judge b { font-weight: 800; color: var(--text); }

/* 診断結果は要素が多いので、余白を詰めて1画面に近づける */
.diag-result-card { padding: 24px 20px 20px; gap: 10px; }
.diag-result-card .result-emoji { display: none; }   /* 天ぷらは結果画面の主役ではないので省く */
.diag-result-card .radar { max-width: 260px; margin: 0 auto 4px; }
.diag-result-card .diagnose-advice { font-size: 13px; line-height: 1.8; margin-bottom: 8px; }
.diag-reco .diagnose-word { padding: 8px 0; }
.diag-reco .diagnose-word-en { font-size: 15px; }
.diag-reco .diagnose-word-ja { font-size: 12.5px; }
/* おすすめ語が多いときは、その中だけスクロールさせて全体の高さを抑える */
.diag-reco { max-height: 40vh; overflow-y: auto; }
.diag-exp-sentence {
  font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--text);
  margin: 6px 0 8px; display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap;
}

/* ---- 単語しわけ（落ちものゲーム）---- */
.game-viewer { display: flex; flex-direction: column; }
.game-viewer .quiz-head { align-items: center; gap: 12px; }
.game-score, .game-time {
  font-weight: 700; font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.game-time { margin-left: auto; color: var(--text-dim); }

/* 落下エリア。レーンは下に敷き、ブロックはその上を落ちる */
.game-field {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  margin: 0 auto; border-radius: 14px; background: var(--surface-2, rgba(0,0,0,.03));
}
/* 遊び方。盤面の上に重ねて、読んでから始めてもらう */
.game-intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.game-intro[hidden] { display: none; }
.game-intro-card {
  width: 100%; max-width: 380px; padding: 22px 20px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: left;
}
.game-intro-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; text-align: center; }
.game-intro-steps { margin: 0 0 14px; padding-left: 1.25em; font-size: 14px; line-height: 1.9; }
.game-intro-note { font-size: 12px; color: var(--text-dim); line-height: 1.7; margin-bottom: 16px; }

.game-lanes { position: absolute; inset: 0; display: flex; gap: 6px; padding: 6px; }
.game-lane {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 6px 12px; border: 2px dashed var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.game-lane.on { border-style: solid; border-color: var(--accent-2); }
.game-lane.hit { background: color-mix(in srgb, var(--accent-2) 22%, var(--surface)); }
.game-lane.bad { background: color-mix(in srgb, #e5484d 20%, var(--surface)); transform: translateY(2px); }
/* 意味は列の真ん中に。上端に置くと落ちてくる単語と目線が離れ、読み比べにくい */
.game-lane-label {
  position: absolute; top: 50%; left: 6px; right: 6px; transform: translateY(-50%);
  font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center;
  word-break: break-word; color: var(--text-dim);
}
/* 間違えるたびに積み上がるゴミ。天井に届く前に立て直す */
.game-junk { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; }
.game-junk i {
  display: block; height: 12px; border-radius: 3px;
  background: color-mix(in srgb, #e5484d 55%, var(--surface));
}

/* 落ちてくる単語。leftは中心基準なのでtranslateXで寄せ直す */
.game-block {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  max-width: 30%; padding: 10px 14px; border-radius: 12px;
  background: var(--accent-2); color: #fff;
  font-size: 20px; font-weight: 700; line-height: 1.2; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none;
  word-break: break-word;
}

.game-hint { padding: 10px 16px 16px; text-align: center; font-size: 12px; color: var(--text-dim); }

.game-over-title { font-size: 15px; color: var(--text-dim); }
.game-over-score { font-size: 52px; font-weight: 800; line-height: 1.1; }
.game-over-score small { font-size: 20px; font-weight: 700; margin-left: 4px; }
.game-over-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 4px; }
.game-missed {
  width: 100%; max-width: 340px; margin: 8px auto 0; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.04)); text-align: left;
}
.game-missed-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.game-missed-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.game-missed-row span { color: var(--text-dim); flex-shrink: 0; }
/* どのテーマで練習できるか。押せそうに見せず、置いてあるだけにする */
.game-missed-genre {
  flex: 0 0 auto; font-style: normal; font-size: 11px; color: var(--text-dim);
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2);
}
.game-over-actions { display: flex; gap: 10px; margin-top: 16px; }
.game-over-actions button { min-width: 120px; }

/* ---- 神経衰弱 ---- */
.memo-viewer { display: flex; flex-direction: column; }
.memo-viewer .quiz-head { align-items: center; gap: 12px; }
.memo-board {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: center; padding: 4px 12px 8px; max-width: 560px; width: 100%; margin: 0 auto;
}
@media (min-width: 560px) { .memo-board { grid-template-columns: repeat(4, 1fr); } }
.memo-card {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 8px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: transparent; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s, opacity .2s;
}
.memo-card { position: relative; }
/* 伏せているカードの目印。めくったら消す */
.memo-card::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border);
}
.memo-card.open::after, .memo-card.done::after { display: none; }
.memo-card.open {
  background: var(--surface); border-color: var(--accent-2); color: var(--text);
  transform: scale(1.03);
}
.memo-card.open.ja { background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.memo-card.done {
  background: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  border-color: transparent; color: var(--text); opacity: .55; cursor: default;
}
.memo-face {
  font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center;
  word-break: break-word; width: 100%;
}
.memo-card.ja .memo-face { font-size: 13px; }

/* ---- レベル表示（TOEIC目安）---- */
.lv-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: middle;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.lv-badge.lv-4 { background: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); color: var(--text); border-color: transparent; }
.lv-badge.lv-5 { background: color-mix(in srgb, var(--accent-2) 34%, var(--surface)); color: var(--text); border-color: transparent; }

.lv-board {
  width: 100%; max-width: 400px; margin: 4px auto 14px; padding: 14px 16px;
  border-radius: 14px; background: var(--surface-2); text-align: center;
}
.lv-now { display: flex; flex-direction: column; gap: 2px; }
.lv-now-label { font-size: 12px; color: var(--text-dim); }
.lv-now-value { font-size: 22px; font-weight: 800; }
.lv-scale { display: flex; gap: 4px; margin: 12px 0 8px; }
.lv-step {
  flex: 1; padding: 5px 0; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
}
.lv-step.on { background: var(--accent-2); color: #fff; border-color: transparent; }
.lv-step.next { outline: 2px dashed var(--accent-2); outline-offset: 1px; }
.lv-next { font-size: 13px; }
.lv-note { margin-top: 8px; font-size: 11px; color: var(--text-dim); line-height: 1.5; }

.lv-tags { width: 100%; max-width: 400px; margin: 0 auto 14px; text-align: left; }
.lv-tags-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.lv-tag-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.lv-tag-name { flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tag-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lv-tag-bar i { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; }
.lv-tag-val { flex: 0 0 34px; text-align: right; font-weight: 700; color: var(--text-dim); font-size: 11px; }

.diag-reco-band { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--text-dim); }

/* アプリのロゴ。画像から🍤に変更（小さいサイズでも何か分かる） */
.brand-emoji { font-size: 1.15em; line-height: 1; vertical-align: -0.1em; }
/* ロゴは「10」の絵。文字と同じ行に収まるよう、高さを文字基準で決める */
/* マークだけで名乗りになる（中に 10 PRACTICE と書いてある）ので、文字は並べない */
.brand-logo { height: 2em; width: 2em; object-fit: cover; border-radius: 22%; vertical-align: -0.6em; display: block; }
.bot-avatar .brand-emoji, .char-face { font-size: 1.05em; }

/* ---- グループの自動投稿 ---- */
.digest-card { padding: 14px 16px; }
.digest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* 投稿カードのアバター。サイズを決めておかないと画像が実寸で出て巨大になる */
.digest-head .bot-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.digest-comment .bot-avatar {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.digest-author { font-weight: 700; font-size: 14px; }
.digest-when { margin-left: auto; font-size: 12px; color: var(--text-dim); }
/* 誰が書いたのではなく、毎朝自動で出ていることを示す */
.digest-auto {
  padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
  font-size: 10px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
}
.digest-lead { margin: -4px 0 10px; font-size: 12px; color: var(--text-dim); }
.digest-words { display: flex; flex-wrap: wrap; gap: 8px; }
/* 意味は伏せておき、タップかホバーで開く */
.digest-word {
  position: relative; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.digest-word-ja {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  transition: max-height .2s, opacity .2s, margin-top .2s;
}
.digest-word.open .digest-word-ja, .digest-word:hover .digest-word-ja {
  max-height: 3em; opacity: 1; margin-top: 2px;
}
.digest-word.open, .digest-word:hover { border-color: var(--accent-2); background: var(--surface); }
.digest-word.picked { background: color-mix(in srgb, var(--accent-2) 20%, var(--surface)); border-color: transparent; }
.digest-word-tag { display: none; }
.digest-word.picked .digest-word-tag {
  display: block; margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--accent-2);
}
.digest-word.picked::before { content: "✓ "; font-size: 12px; color: var(--accent-2); }
.digest-note { margin-top: 10px; font-size: 11px; color: var(--text-dim); }

/* 揚場タブの未読バッジ */
.plaza-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6;
}

/* 自動投稿へのGoodとコメント */
.digest-actions { display: flex; gap: 8px; margin-top: 12px; }
.digest-good {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font: inherit; font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.digest-good.on { color: #e5484d; border-color: currentColor; }
.digest-good-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.digest-comments { margin-top: 8px; }
.digest-comment { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; }
.digest-comment-author { font-weight: 700; flex-shrink: 0; }
.digest-comment-body { flex: 1; word-break: break-word; }
.digest-comment-del {
  border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0 4px;
}
.digest-reply { display: flex; gap: 8px; margin-top: 8px; }
.digest-reply input {
  flex: 1; margin: 0; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px;
}
.digest-reply button { flex-shrink: 0; padding: 7px 14px; font-size: 13px; }

/* 管理: 日本語読み上げの編集 */
.rd-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.rd-row:last-child { border-bottom: 0; }
.rd-word { font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
.rd-genre { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.rd-auto { font-size: 12px; color: var(--text-dim); margin: 2px 0 6px; }
.rd-edit { display: flex; gap: 8px; }
.rd-edit input { flex: 1; margin: 0; padding: 6px 10px; font-size: 13px; }
.rd-edit button { flex-shrink: 0; padding: 6px 14px; font-size: 13px; }

/* 管理: キャラ投稿の在庫 */
.cp-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.cp-row:last-child { border-bottom: 0; }
.cp-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.cp-char { font-weight: 700; font-size: 13px; }
.cp-kind { color: var(--text-dim); }
.cp-state { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.cp-state.stock { background: var(--surface-2); color: var(--text-dim); }
.cp-state.done { background: color-mix(in srgb, var(--accent-2) 18%, var(--surface)); }
.cp-row textarea { min-height: 60px; margin: 0; font-size: 13px; }
.cp-edit { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.cp-order { width: 72px; margin: 0; padding: 6px 8px; font-size: 13px; }
.cp-edit button { padding: 6px 14px; font-size: 13px; }

/* 揚場: キャラ投稿の本文 */
.char-post-body { font-size: 15px; line-height: 1.7; white-space: pre-wrap; }

/* グループへの自由投稿 */
.group-composer { padding: 12px 14px; }
.group-post-form { display: flex; gap: 8px; align-items: flex-end; }
/* .btn-primary は width:100% を持つので、横並びだとボタンが幅を食い尽くす。
   入力欄が潰れないよう、ここで幅の取り合いを打ち消しておく */
.group-post-form textarea { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 44px; font-size: 14px; }
.group-post-form button { flex: 0 0 auto; width: auto; padding: 12px 18px; font-size: 14px; }
.group-post-del { margin-left: 8px; border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 12px; }

/* 日本語の読み上げ編集（専用ページ）*/
.rd-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-toolbar select, .rd-toolbar input { margin: 0; padding: 7px 10px; font-size: 13px; }
.rd-toolbar select { flex: 1 1 160px; }
.rd-toolbar input { flex: 1 1 140px; }
.rd-count { font-size: 12px; color: var(--text-dim); margin: 10px 0 4px; }
.rd-play {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 11px; cursor: pointer; line-height: 1;
}
.rd-play.on { background: var(--accent-2); color: #fff; border-color: transparent; }
.rd-len { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.rd-len.warn { color: #e5484d; }

/* ---- 10 Epochs ---- */
.epoch-viewer { display: flex; flex-direction: column; }
.epoch-viewer .quiz-head { align-items: center; gap: 12px; }
.epoch-label { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.epoch-count { margin-left: auto; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.epoch-bar { display: flex; gap: 3px; padding: 0 16px 10px; }
.epoch-bar span { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-2); }
.epoch-bar span.past { background: var(--accent-2); }
.epoch-bar span.now { background: color-mix(in srgb, var(--accent-2) 55%, var(--surface)); }
.epoch-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 20px; }

.epoch-lead { font-size: 13px; line-height: 1.8; color: var(--text-dim); margin: 0 0 18px; }
.epoch-course { margin-bottom: 22px; }
.epoch-course-head { display: flex; align-items: baseline; gap: 10px; }
.epoch-course-name { font-size: 16px; font-weight: 800; }
.epoch-course-done { margin-left: auto; font-size: 11px; color: var(--text-dim); }

.epoch-entry {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
}
.epoch-entry-title { display: block; font-size: 15px; font-weight: 800; }
.epoch-entry-sub { display: block; margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }

/* ---- 自分だけのEpochs（手元の文を入れて、自分の声で手本を録る）---- */
.epoch-edit {
  width: auto; padding: 4px 10px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
}
.epoch-new {
  width: 100%; margin-top: 8px; padding: 12px; font-size: 14px; font-weight: 700;
  border: 1px dashed var(--border); border-radius: 12px;
  background: none; color: var(--text-dim); cursor: pointer;
}
.epoch-new-note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-dim); text-align: center; }

.my-course-paste {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.7;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
/* Epochsのコースと、対になるテーマの関係を1行で伝える */
.epoch-pair { margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--text-dim); }
.epoch-pair.on { color: var(--accent); font-weight: 700; }
.epoch-pair.mine { color: var(--text-dim); }

.my-course-top { margin-bottom: 14px; }
.my-course-back {
  width: auto; padding: 0; background: none; border: none; font-size: 13px;
  color: var(--text-dim); cursor: pointer;
}
/* 2段階だと分かっていないと、文だけ入れて止まる。順番を先に見せる */
.my-course-steps { margin: 0 0 22px; padding: 0; list-style: none; display: flex; gap: 10px; counter-reset: st; }
.my-course-steps li {
  flex: 1; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 12px; counter-increment: st;
}
.my-course-steps li::before { content: counter(st) ". "; font-weight: 700; }
.my-course-steps li b { display: block; font-size: 13px; color: var(--text); }
.my-course-steps li.now { border-color: var(--accent); background: var(--surface); }

.my-sec-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 800; margin-bottom: 4px;
}
.my-sec-head span { font-size: 12px; font-weight: 400; color: var(--text-dim); }

.my-add-box { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }
.my-add-box > summary {
  padding: 12px 0; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none;
}
.my-add-box > summary::-webkit-details-marker { display: none; }
.my-add-box[open] > summary { border-bottom: 1px solid var(--border); }
/* まだ中身が無いコース。練習の設定ではなく、作る導線だけを出す */
.epoch-empty { text-align: center; padding: 40px 20px; }
.epoch-empty-lead { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.epoch-empty-sub { font-size: 13px; color: var(--text-dim); margin: 0 0 20px; line-height: 1.7; }
.epoch-empty .btn-primary { width: auto; padding: 12px 28px; }

/* 1件ずつ足す欄。貼り付けの書式を覚えなくても入れられるようにする */
.my-add-one { padding: 14px 0 4px; }
.my-field { display: block; margin-bottom: 12px; }
.my-field span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.my-field input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.my-mic-note {
  margin: 12px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.7;
  color: var(--text-dim); background: var(--surface-2); border-radius: 10px;
}
.my-bulk { margin: 6px 0 14px; }
.my-bulk > summary { font-size: 12px; color: var(--text-dim); cursor: pointer; padding: 6px 0; }

.my-add-note { margin: 12px 0 10px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.my-add-box .btn-primary { width: auto; padding: 10px 22px; margin: 10px 0 14px; }

/* 削除は普段は畳んでおく。並びの終わりにいきなり赤字が出ると身構える */
.my-danger { margin-top: 28px; }
.my-danger > summary {
  font-size: 12px; color: var(--text-dim); cursor: pointer; list-style: none; padding: 6px 0;
}
.my-danger > summary::-webkit-details-marker { display: none; }
.my-danger-note { margin: 4px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; }
.my-lines-empty { font-size: 13px; color: var(--text-dim); text-align: center; padding: 20px 0; }
.my-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.my-line-no { flex: 0 0 22px; font-size: 12px; color: var(--text-dim); text-align: right; }
.my-line-body { flex: 1; min-width: 0; }
.my-line-ja { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.my-line-en { font-size: 14px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.my-line-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.my-rec, .my-play {
  width: auto; padding: 6px 12px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.my-rec.has { color: var(--text-dim); }
.my-rec.rec { background: #e5484d; border-color: #e5484d; color: #fff; }
.my-rec { min-width: 96px; }
.my-line-del {
  width: 28px; height: 28px; padding: 0; font-size: 13px;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
}
.my-course-del {
  display: block; margin: 8px auto 0; width: auto; padding: 8px 16px;
  background: none; border: none; font-size: 13px; color: #e5484d;
  text-decoration: underline; cursor: pointer;
}
.epoch-course-desc { font-size: 12px; color: var(--text-dim); margin: 2px 0 10px; line-height: 1.6; }
.epoch-sets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.epoch-set {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font: inherit; color: var(--text); cursor: pointer;
}
.epoch-set-no { font-size: 14px; font-weight: 800; }
.epoch-set-ep { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.epoch-set.done { background: color-mix(in srgb, var(--accent-2) 18%, var(--surface)); border-color: transparent; }
.epoch-set.done .epoch-set-ep { color: var(--text); font-weight: 700; }

/* 出題中 */
.epoch-run { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.epoch-cat { font-size: 11px; color: var(--text-dim); margin-bottom: 12px; }
.epoch-ja { font-size: 22px; font-weight: 700; line-height: 1.6; max-width: 460px; }
.epoch-ja.dim { font-size: 15px; font-weight: 500; color: var(--text-dim); }
/* 1秒の「考える時間」。使い切ったら答えが出る */
.epoch-timer { width: 160px; height: 4px; border-radius: 2px; background: var(--surface-2); margin: 26px 0 10px; overflow: hidden; }
.epoch-timer i { display: block; height: 100%; background: var(--accent-2); animation: epochTick 1s linear forwards; }
/* 出題中の操作。聞くだけ / 答えを見る */
.epoch-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.epoch-btn.listen { display: inline-flex; align-items: center; gap: 6px; }
.epoch-btn.listen .ico { width: 1.05em; height: 1.05em; }
.epoch-think { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.epoch-think select { margin: 0; padding: 6px 10px; font-size: 13px; }
@keyframes epochTick { from { width: 100%; } to { width: 0; } }
.epoch-hint { font-size: 12px; color: var(--text-dim); }
.epoch-en { font-size: 20px; font-weight: 700; line-height: 1.6; margin: 18px 0 26px; max-width: 460px; }
.epoch-judge { display: flex; gap: 10px; }
.epoch-btn { padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.epoch-btn.ok { background: var(--accent-2); color: #fff; border-color: transparent; }

.epoch-done-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.epoch-done-sub { font-size: 14px; color: var(--text-dim); }
.epoch-done-bar { display: flex; gap: 4px; margin: 18px 0; }
.epoch-done-bar span { width: 18px; height: 6px; border-radius: 3px; background: var(--surface-2); }
.epoch-done-bar span.on { background: var(--accent-2); }

/* テーマ一覧に並ぶ Epochs コース */
.epoch-tile { cursor: pointer; }
.epoch-badge { background: var(--accent-2); color: #fff; letter-spacing: .02em; }

/* 単語がまだ少ない人向けの案内カード。テストではなく「選ぶ」へ誘導する */
.session-home.starter { background: var(--surface); }

/* Epochs: 出だし（と終わり）のヒント。言い出す瞬間の詰まりを外す */
.epoch-tip {
  margin-top: 14px; font-size: 16px; color: var(--text-dim);
  letter-spacing: .01em; font-family: inherit;
}
.epoch-tip b { color: var(--text); font-weight: 700; }
.epoch-opts { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

/* Epochs: 言えないまま先へ進むための逃げ道。主役の2択より控えめに置く */
.epoch-skip {
  margin-top: 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-dim); text-decoration: underline;
  text-underline-offset: 3px;
}

/* 管理: 10 Epochs */
.ep-course { padding: 10px 0; border-bottom: 1px solid var(--border); }
.ep-course:last-child { border-bottom: 0; }
.ep-course input { margin: 0 0 6px; padding: 7px 10px; font-size: 13px; }
.ep-course-foot { display: flex; align-items: center; gap: 8px; }
.ep-count { font-size: 12px; color: var(--text-dim); }
.ep-order { width: 72px; margin: 0 0 0 auto !important; }
.ep-course-foot button { padding: 6px 14px; font-size: 13px; }

.ep-line { padding: 10px 0; border-bottom: 1px solid var(--border); }
.ep-line:last-child { border-bottom: 0; }
.ep-line-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.ep-set { font-weight: 700; }
.ep-cat { color: var(--text-dim); }
.ep-del { margin-left: auto; padding: 2px 8px; font-size: 12px; }
.ep-line input { margin: 0 0 6px; padding: 7px 10px; font-size: 13px; }
.ep-line-foot { display: flex; gap: 8px; align-items: center; }
.ep-line-foot input { flex: 1; margin: 0; }
.ep-line-foot button { flex-shrink: 0; padding: 6px 14px; font-size: 13px; }

/* テーマ内の 10 Epochs。背景は他のカードと同じにして、枠と文字で目立たせる */
.epoch-hero {
  display: block; width: 100%; margin: 0 0 14px; padding: 16px 18px;
  border: 2px solid var(--accent-2); border-radius: 16px;
  background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer; font: inherit;
  transition: transform .12s, box-shadow .12s;
}
.epoch-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.epoch-hero-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-2); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.epoch-hero-title {
  display: block; margin-top: 8px; font-size: 24px; font-weight: 800;
  letter-spacing: .01em; color: var(--accent-2);
}
.epoch-hero-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.epoch-hero-foot {
  display: flex; align-items: center; margin-top: 12px;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
}
.epoch-hero-go { margin-left: auto; color: var(--accent-2); }

/* 管理: 10 Epochs の取り込み */
.imp-summary { font-size: 14px; margin-bottom: 10px; }
.imp-ok { padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); }
.imp-bad { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.7;
  background: color-mix(in srgb, #e5484d 12%, var(--surface)); }
.imp-bad-row { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.imp-word { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
  background: #e5484d; color: #fff; font-weight: 700; font-size: 11px; }
.imp-info { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.imp-preview { margin-top: 12px; font-size: 12px; line-height: 1.6; }
.imp-preview > div { padding: 5px 0; border-bottom: 1px solid var(--border); }
.imp-preview span { color: var(--text-dim); }
.imp-more { color: var(--text-dim); border: 0 !important; }
.imp-next { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; line-height: 1.7; }
.imp-next p { margin: 6px 0; }
.imp-next pre { margin: 8px 0; padding: 10px; border-radius: 6px; background: var(--surface);
  font-size: 11px; overflow-x: auto; white-space: pre; }

/* ---- 管理画面: 用途ごとのパネル切り替え ---- */
.adm-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.adm-nav::-webkit-scrollbar { display: none; }
.adm-tab {
  flex-shrink: 0; padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.adm-tab:hover { background: var(--surface-2); }
.adm-tab.on { background: var(--accent-2); color: #fff; }
.adm-panel > .card:first-child { margin-top: 14px; }

/* 管理画面: そのセクションで何が入るのかを最初に示す */
.adm-note {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2); font-size: 12px; line-height: 1.7; color: var(--text);
}
.adm-note code { padding: 1px 5px; border-radius: 4px; background: var(--surface); font-size: 11px; }

/* 管理: テーマ点検 */
.ck-stage { margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--accent-2); }
.ck-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.ck-row:last-child { border-bottom: 0; }
.ck-line { display: flex; gap: 6px; }
.ck-line .ck-f { flex: 1; }
.ck-lv { flex: 0 0 62px !important; }
.ck-row .ck-f { margin: 0 0 4px; padding: 6px 9px; font-size: 13px; }
.ck-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ck-foot button { padding: 5px 12px; font-size: 12px; }
.au-play {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font: inherit; font-size: 11px; color: var(--text); cursor: pointer;
}
.au-play.on { background: var(--accent-2); color: #fff; border-color: transparent; }
.au-miss { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #e5484d 12%, var(--surface));
  font-size: 11px; color: #e5484d; }
.ck-del { margin-left: auto; }

/* 管理: テーマ点検の項目ラベル */
.ck-lb { display: flex; margin: 6px 0 2px; font-size: 11px; color: var(--text-dim); font-weight: 600; }
.ck-lb span { margin-left: auto; }
.ck-row select.ck-lv { flex: 0 0 148px !important; }

/* 管理: 音声の再生と削除をひとまとまりに */
.au-set { display: inline-flex; align-items: stretch; }
.au-set .au-play { border-radius: 999px 0 0 999px; border-right: 0; }
.au-del {
  padding: 4px 8px; border-radius: 0 999px 999px 0;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 11px; color: var(--text-dim); cursor: pointer;
}
.au-del:hover { background: color-mix(in srgb, #e5484d 12%, var(--surface)); color: #e5484d; }

/* 管理: 音声の読み方の指定（普段は閉じておく） */
.ck-rd { margin: 6px 0 2px; }
.ck-rd > summary { font-size: 11px; color: var(--accent-2); cursor: pointer; }
.ck-rd > p { margin: 6px 0; font-size: 11px; line-height: 1.7; color: var(--text-dim); }
.ck-rd code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); }

/* キャラの発言は英語を主、日本語を従にする（自然に英語に触れる回数を増やす） */
.bi-en { display: block; }
.bi-ja { display: block; margin-top: 4px; font-size: 0.86em; color: var(--text-dim); }
.bot-reply-text { display: block; }

/* 出題中、その語がどのテーマから来たかを問題のすぐ上に示す。
   左上のヘッダーに置くと、問題から目線が離れて読まれない */
.quiz-genre-tag {
  align-self: center; margin-bottom: 10px;
  padding: 3px 12px; border-radius: 999px; background: var(--surface-2);
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 70vw;
}

/* ホームの弱点しんだん。常時置くが、しばらく受けていない時だけそっと目立たせる */
.diag-nudge {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.diag-nudge:hover { transform: translateY(-1px); border-color: var(--accent-2); }
.diag-nudge-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.diag-nudge.on { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.diag-nudge.on .diag-nudge-dot { background: var(--accent-2); animation: diagPulse 2.4s ease-in-out infinite; }
@keyframes diagPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.35); }
}
.diag-nudge-text { display: flex; flex-direction: column; gap: 1px; }
.diag-nudge-text b { font-size: 14px; }
.diag-nudge-text span { font-size: 11px; color: var(--text-dim); }
.diag-nudge-go { margin-left: auto; color: var(--text-dim); font-size: 15px; }
.diag-nudge.on .diag-nudge-go { color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .diag-nudge.on .diag-nudge-dot { animation: none; } }

/* 完了画面のしるし。アバターの絵は主張が強いので、同じ雰囲気の線画にしてテーマ色に馴染ませる */
.ten-mark { width: 76px; height: 76px; color: var(--accent-2); display: block; margin: 0 auto; }
.result-sub { margin-top: 2px; font-size: 13px; color: var(--text-dim); }

/* グループと一般投稿は性質が違うので、並びの間に区切りを入れる */
.plaza-scope-sep {
  flex: 0 0 1px; align-self: stretch; margin: 6px 4px;
  background: var(--border);
}

/* 設定: 名前の入力欄 */
.nick-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.nick-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.nick-row button { flex: 0 0 auto; width: auto; padding: 12px 18px; }


/* ---- 10 Epochs: 場面ごとのセット / ヒント / 声で答える / 1文練習 ---- */
.epoch-scene { margin-bottom: 16px; }
.epoch-scene-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.epoch-scene-name { font-size: 13px; font-weight: 700; }
.epoch-scene-done { margin-left: auto; font-size: 11px; color: var(--text-dim); }

.epoch-btn.hintbtn, .epoch-btn.mic { white-space: nowrap; }
.epoch-btn.hintbtn:disabled { opacity: 0.45; cursor: default; }
.epoch-tips { min-height: 4px; }

/* 端末が聞き取った文字。採点ではなく「相手に届く形だったか」を自分で見るための欄 */
.epoch-heard {
  width: 100%; max-width: 460px; margin: 12px auto 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-align: left;
}
.epoch-heard-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.epoch-heard-text { font-size: 17px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.epoch-heard-note { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.epoch-heard-note.ok { color: var(--accent); font-weight: 700; }

.epoch-sub-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.epoch-drill {
  width: auto; padding: 8px 16px; font-size: 13px; font-weight: 700;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); cursor: pointer;
}

.drill-slot {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  min-height: 56px; margin: 18px auto 14px; padding: 10px;
  width: 100%; max-width: 460px;
  border: 1px dashed var(--border); border-radius: 12px;
}
.drill-empty { font-size: 12px; color: var(--text-dim); align-self: center; }
.drill-pool { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 460px; margin: 0 auto; }
.drill-chip {
  width: auto; padding: 8px 12px; font: inherit; font-size: 15px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); cursor: pointer;
}
.drill-chip.set { background: var(--surface-2); border-color: var(--surface-2); cursor: default; }
.drill-chip.used { visibility: hidden; }
.drill-result { margin-top: 16px; font-size: 14px; line-height: 1.8; }
.drill-result.ok { color: var(--accent); font-weight: 700; }

/* 答えは一番上。その下は「これでも通じる」言い方 */
.epoch-alts { width: 100%; max-width: 520px; margin: 18px auto 0; }
.epoch-alt-lead { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.epoch-alt {
  font-size: 15px; line-height: 1.6; color: var(--text-dim);
  padding: 8px 12px; border-radius: 10px; background: var(--surface);
}
.epoch-alt + .epoch-alt { margin-top: 6px; }

/* 出題カード。押すと裏返ることが分かるように、印と最初の1回だけの予告を出す */
.epoch-card {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  padding: 22px 18px 16px; cursor: pointer;
  background: var(--surface-2); border-radius: 16px;
  transition: transform .25s;
}
@keyframes epoch-peek {
  0% { transform: perspective(900px) rotateY(0deg); }
  45% { transform: perspective(900px) rotateY(-30deg); }
  100% { transform: perspective(900px) rotateY(0deg); }
}
.epoch-card .epoch-ja { margin: 0; }
.epoch-say { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.epoch-flipmark {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; font-size: 11px; color: var(--text-dim);
}
.epoch-flipmark svg { width: 13px; height: 13px; }

/* ヒントは畳んでおく。開くと中身の語だけ伏せた形が出る */
.epoch-hintbox { width: 100%; max-width: 520px; margin: 14px auto 0; text-align: left; }
.epoch-hintbox > summary {
  font-size: 12px; color: var(--text-dim); cursor: pointer; list-style: none; padding: 6px 0;
}
.epoch-hintbox > summary::-webkit-details-marker { display: none; }
.epoch-hintbox > summary::before { content: "▸ "; }
.epoch-hintbox[open] > summary::before { content: "▾ "; }
.epoch-hintline { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
.epoch-hintmask { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.6; }
.epoch-hintmask .mask { font-style: normal; color: var(--text-dim); letter-spacing: 1px; }

/* ---- 場面（2人の会話）: 導入・役選び・相手のセリフ ---- */
.scene-intro { width: 100%; max-width: 560px; margin: 0 auto; text-align: left; }
.scene-eyebrow { font-size: 11px; font-weight: 700; color: var(--text-dim); margin: 18px 0 6px; }
.scene-en { margin: 0 0 8px; font-size: 15px; line-height: 1.8; }
.scene-ja { margin: 0 0 14px; font-size: 13px; line-height: 1.9; color: var(--text-dim); }
.scene-intro .epoch-btn.listen { width: auto; }

.scene-script {
  margin: 14px 0 4px; padding: 12px; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.scene-turn { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.scene-turn.on { background: var(--surface-2); }
.scene-who { flex: 0 0 78px; font-size: 11px; font-weight: 700; color: var(--text-dim); padding-top: 3px; }
.scene-who.b { color: var(--accent); }
.scene-line { font-size: 14px; line-height: 1.6; }

.scene-roles { display: flex; gap: 10px; }
.scene-role {
  flex: 1; padding: 14px 10px; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.scene-role b { display: block; font-size: 15px; }
.scene-role span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.scene-role.mine { border-color: var(--accent); }

.epoch-cue {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 460px; margin: 0 auto 14px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-align: left;
}
.epoch-cue-who { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--text-dim); }
.epoch-cue-en { flex: 1; font-size: 14px; line-height: 1.5; }
.epoch-cue-play {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--text-dim); cursor: pointer;
}

/* ---- Epochs: 表裏のあるカード ---- */
.flipcard {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  cursor: pointer; perspective: 1200px;
}
.flipcard-face {
  padding: 24px 20px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .35s ease;
}
.flipcard .front { background: var(--surface-2); border-color: transparent; }
.flipcard .back { display: none; }
.flipcard.flipped .front { display: none; }
.flipcard.flipped .back { display: block; }
/* 上下に動くと「ずれた」ように見える。まん中の縦線を軸に左右へ振って、裏があることを見せる */
.flipcard.peek .front { animation: epoch-peek 900ms ease-in-out; }

.flipcard .epoch-ja { margin: 0; }
.epoch-say { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.flipcard-mark {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px; font-size: 11px; color: var(--text-dim);
}
.flipcard-mark svg { width: 13px; height: 13px; }

/* ヒントは押せると分かる見た目にする */
.epoch-hintbox { margin: 16px auto 0; text-align: center; }
.epoch-hintbox > summary { list-style: none; cursor: pointer; }
.epoch-hintbox > summary::-webkit-details-marker { display: none; }
.hint-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.hint-chip svg { width: 14px; height: 14px; }
.epoch-hintbox[open] > summary .hint-chip { background: var(--surface-2); color: var(--text-dim); }
.epoch-hintline { display: flex; align-items: center; gap: 10px; margin-top: 10px; text-align: left; }
.epoch-hintmask { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.6; }
.epoch-hintmask .mask { font-style: normal; color: var(--text-dim); letter-spacing: 1px; }

.flipcard .epoch-btn.mic { margin-top: 16px; }
.flipcard .epoch-judge { justify-content: center; gap: 12px; margin-top: 18px; }
.epoch-run > .epoch-skip { margin-top: 22px; }

/* セットの四角。言えた数がメモリで見える */
.epoch-set-meter { display: flex; gap: 2px; justify-content: center; margin: 6px 0 4px; }
.epoch-set-meter i { width: 5px; height: 5px; border-radius: 1px; background: var(--border); }
.epoch-set-meter i.on { background: var(--accent); }

/* 始める前の下見 */
.scene-preview { margin: 8px 0 20px; padding-left: 1.3em; font-size: 14px; line-height: 2; }
.scene-preview li { color: var(--text-dim); }
.scene-start { width: 100%; max-width: 320px; margin: 0 auto; display: block; }

/* 1周の振り返り。何を言えて、何が残ったかをその場で見せる */
.epoch-recap { width: 100%; max-width: 520px; margin: 20px auto 0; text-align: left; }
.recap-row {
  display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px;
  border-bottom: 1px solid var(--border);
}
.recap-row.ng { opacity: 0.75; }
.recap-mark { flex: 0 0 18px; color: var(--accent); }
.recap-mark svg { width: 16px; height: 16px; }
.recap-body { flex: 1; min-width: 0; }
.recap-ja { display: block; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.recap-en { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.recap-row.ng .recap-en { font-weight: 400; }

/* 自分の声と、お手本を並べて聞き比べる */
.my-clip {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; padding: 8px 14px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); cursor: pointer;
}
.my-clip svg { width: 14px; height: 14px; }
.my-clip.model { background: var(--surface); }
.epoch-btn.mic.rec { background: #e5484d; border-color: #e5484d; color: #fff; }

/* 始める前の下見。会話の流れが見えるよう、相手の行も日本語で並べる */
.scene-preview { margin: 8px 0 20px; }
.preview-turn { display: flex; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.preview-turn.mine { background: var(--surface); }
.preview-who { flex: 0 0 86px; font-size: 11px; color: var(--text-dim); padding-top: 3px; }
.preview-turn.mine .preview-who { color: var(--accent); font-weight: 700; }
.preview-ja { flex: 1; font-size: 14px; line-height: 1.6; }
.preview-turn:not(.mine) .preview-ja { color: var(--text-dim); }

/* 出題カードの上に、直前の相手の言葉を日本語で小さく置く */
.epoch-cue-ja {
  font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--text);
  background: var(--surface-2); border-radius: 10px; padding: 8px 12px;
  margin: 0 auto 14px; max-width: 460px; text-align: left;
}

/* 振り返りでも会話の流れごと見せる */
.recap-who { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }
.recap-row.other { opacity: 0.55; }
.recap-row.other .recap-en { font-weight: 400; }

/* ---- さがす ---- */
.home-search {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 18px 0 6px; padding: 4px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
.home-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  padding: 13px 0; font: inherit; font-size: 15px; color: var(--text);
}
.home-search input::placeholder { color: var(--text-dim); opacity: 0.85; }
.home-search-ico { flex: 0 0 auto; color: var(--text-dim); }
.home-search-ico svg { width: 20px; height: 20px; display: block; }
.home-search-text { font-size: 15px; font-weight: 700; }
.home-search-text small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--text-dim); }

.search-input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
.search-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.search-tag {
  width: auto; padding: 6px 12px; font-size: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
}
.search-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 800; margin: 18px 0 6px;
}
.search-head span { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.search-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.search-where {
  display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 4px;
}
.search-where em { font-style: normal; margin-left: 6px; opacity: 0.8; }
.search-ja { display: block; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.search-en { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.search-empty { padding: 30px 10px; font-size: 13px; line-height: 1.9; color: var(--text-dim); text-align: center; }

/* ---- ピン留め ---- */
.pin-empty { margin: 18px 0 0; font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.8; }
.pin-list { display: flex; flex-direction: column; gap: 8px; }
.pin-row { display: flex; align-items: stretch; gap: 8px; }
.pin-go {
  flex: 1; text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.pin-where { display: block; font-size: 10px; color: var(--text-dim); }
.pin-title { display: block; font-size: 15px; font-weight: 700; margin-top: 2px; }
.pin-meta { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.pin-off {
  flex: 0 0 44px; width: 44px; font-size: 16px; cursor: pointer; color: var(--accent);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.scene-pin {
  width: auto; padding: 7px 14px; margin-bottom: 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
}
.scene-pin.on { color: var(--accent); border-color: var(--accent); }
#search-browse[hidden] { display: none; }

/* 学習中はホームに畳んで置く。続きに戻る道を消さないため */
.home-studying { margin-top: 18px; }
.home-studying[hidden] { display: none; }
.home-studying > summary {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; padding: 4px 0;
}
.home-studying > summary::-webkit-details-marker { display: none; }

.home-studying .my-themes-head { margin: 0; }
.home-studying-n { font-size: 11px; color: var(--text-dim); }

/* 今日のおすすめ。探す気が無い日でも、次の一手が置いてある */
.pick-card {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; color: var(--text);
}
.pick-title { display: block; font-size: 16px; font-weight: 800; }
.pick-where { display: block; font-size: 11px; color: var(--text-dim); line-height: 1.6; margin-top: 4px; }
.pick-meta { display: block; font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* おすすめは1枚ではなく一覧。探す気が無くても選べるだけ並べる */
/* おすすめは大きく、横に流して見せる（棚の前に並ぶ平台のイメージ） */
.pick-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.pick-strip::-webkit-scrollbar { height: 6px; }
.pick-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.pick-card {
  flex: 0 0 168px; scroll-snap-align: start; text-align: left; cursor: pointer;
  padding: 11px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
}
.pick-card .pick-title { font-size: 14px; line-height: 1.4; }
.pick-card .pick-where {
  font-size: 10px; line-height: 1.5; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pick-card .pick-meta { font-size: 10px; margin-top: 4px; }
.pick-kind {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--accent);
}
.pick-kind svg { width: 13px; height: 13px; }

/* 棚。おすすめの下に在庫を全部並べる */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.shelf-item {
  text-align: left; cursor: pointer; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.shelf-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }
.shelf-meta { display: block; font-size: 10px; color: var(--text-dim); margin-top: 5px; }

.my-clip.rec.on { background: #e5484d; border-color: #e5484d; color: #fff; }
.epoch-rec-note { margin: 8px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; }

/* ホームの学習中は「続きに戻る」だけの用途。小さく、名前と進み具合だけ */
#studying-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-tile {
  display: block; text-align: left; cursor: pointer; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.home-tile-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }
.home-tile .fry-bar { display: block; max-width: none; margin-top: 8px; }
.home-tile-meta { display: block; font-size: 10px; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 520px) { #studying-grid { grid-template-columns: 1fr 1fr; } }

/* 棚で選ぶときに効くのは「何の話か」より「どのくらいの量か」 */
.size-chip {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  font-size: 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim);
}
.genre-tile-icon.epoch { color: var(--accent); }

/* 場面の一覧。番号の四角ではなく、名前と2本の進捗で選ばせる */
.set-list { display: flex; flex-direction: column; gap: 8px; }
.set-row {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.set-row.done { border-color: var(--accent); }
.set-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
.set-bars { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.set-bar { display: flex; gap: 3px; flex: 1; }
.set-bar i { flex: 1; height: 9px; border-radius: 3px; background: var(--surface-2); }
.set-bar.said i.on { background: var(--accent); }
.set-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.set-meta b { font-size: 12px; font-weight: 800; color: var(--accent); }

/* 折りたためることが分かるように、矢印だけでなく言葉も出す */
.fold-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-dim);
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
}
.fold-hint { font-size: 0; }
.fold-hint::before { content: "たたむ"; font-size: 11px; }
.fold-hint::after { content: "▲"; font-size: 8px; margin-left: 4px; }
.home-studying:not([open]) .fold-hint { color: var(--accent); }
.home-studying:not([open]) .fold-hint::before { content: "ひらく"; }
.home-studying:not([open]) .fold-hint::after { content: "▼"; }

/* テーマの中: ステージ一覧が主役、ほかは畳む */
.plot-more { margin-top: 16px; }
.plot-more > summary {
  cursor: pointer; list-style: none; padding: 10px 0;
  font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.plot-more > summary::-webkit-details-marker { display: none; }
.plot-more > summary::before { content: "▸ "; }
.plot-more[open] > summary::before { content: "▾ "; }

.set-bar i.half { background: var(--accent-2); opacity: 0.45; }
.stage-intro { padding: 8px 0 4px; }
.stage-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.stage-word {
  padding: 5px 10px; font-size: 13px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.stage-intro .epoch-skip { display: block; margin: 14px auto 0; }

/* 済んだ印は小さく。終わりを告げるより、もう一度できることを主役にする */
.done-mark {
  display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: middle;
  font-size: 10px; font-weight: 700; color: var(--accent);
  background: var(--surface-2); border-radius: 999px;
}
.session-alt {
  display: block; width: auto; margin: 10px auto 0; padding: 8px 16px;
  background: none; border: none; font-size: 13px; color: var(--text-dim);
  text-decoration: underline; cursor: pointer;
}

/* キャラの答えは英語が主役、日本語は添え物 */
.bi-comment .bi-en { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.bi-comment .bi-ja { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* 管理画面: 1行に2つ並べる欄 */
.ep-line-row { display: flex; gap: 8px; margin-top: 6px; }
.ep-line-row > * { flex: 1; min-width: 0; }

/* さがすの棚: スマホ幅で2列にすると、バッジに押されてテーマ名が1文字ずつ折れる。
   狭いときは1列にして、名前に幅を渡す */
@media (max-width: 560px) {
  .genre-grid { grid-template-columns: 1fr; }
  #studying-grid { grid-template-columns: 1fr 1fr; }
}
.genre-tile-head { flex-wrap: wrap; }
.genre-tile-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.search-tags { padding-right: 6px; }

/* ログイン */
.auth-who { font-size: 14px; font-weight: 700; word-break: break-all; }
.auth-or { text-align: center; font-size: 11px; color: var(--text-dim); margin: 12px 0 10px; }
#auth-ui input[type="email"] {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
}
.auth-note { margin: 10px 0 0; font-size: 11px; line-height: 1.7; color: var(--text-dim); }

/* 場面そのものの結果は、セリフより目立たせる */
.search-row.scene { border-color: var(--accent); }
.search-row.scene .search-en { font-size: 16px; }

/* 文字は消さず、弱める。アイコンだけでは「きろく」に辿り着けない。
   いま居る場所だけをはっきりさせ、他は静かに置いておく */
nav.tabbar a { font-size: 11px; font-weight: 400; opacity: 0.72; }
nav.tabbar a.active { font-weight: 700; opacity: 1; }
@media (min-width: 900px) {
  .sidebar-nav a { font-size: 14px; font-weight: 400; color: var(--text-dim); }
  .sidebar-nav a.active { font-weight: 700; }
  .sidebar-nav .icon svg { stroke: var(--text-dim); }
  .sidebar-nav a.active .icon svg { stroke: var(--accent); }
}

/* 今日やること。見出しが日数を兼ねる */
.today-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 2px 2px 10px;
}
.today-brand { font-size: 17px; font-weight: 800; }
.today-brand small { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--text-dim); }
.today-day { font-size: 14px; font-weight: 700; color: var(--accent); }
.today-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 560px) { .today-cards { grid-template-columns: 1fr; } }
.today-card {
  display: block; text-align: left; cursor: pointer; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
.today-card.cont { border-color: var(--accent); }
.today-label {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: var(--text-dim); background: var(--surface-2);
}
.today-ja { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; margin-top: 8px; }
.today-say { display: block; font-size: 11px; color: var(--accent); margin-top: 8px; }
.today-where { display: block; font-size: 10px; color: var(--text-dim); margin-top: 6px; }
.today-empty { font-size: 13px; color: var(--text-dim); padding: 6px 2px 16px; }

/* 自分のもの。カードにせず、ひとつの表にまとめて並べる */
.mine-wrap {
  margin-bottom: 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.mine-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.mine-head svg { width: 14px; height: 14px; }
/* テーマの見出しの隣にも、お気に入り */
.plot-fav {
  flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1;
  background: none; border: 0; color: var(--border);
}
.plot-fav.on { color: var(--accent); }

/* 場面の一覧からも、その場でお気に入りに入れられる */
.set-line { display: flex; align-items: stretch; gap: 4px; }
.set-line .set-row { flex: 1; min-width: 0; }
.set-pin {
  flex: none; width: 40px; padding: 0; cursor: pointer; font-size: 16px; line-height: 1;
  background: none; border: 0; color: var(--border);
}
.set-pin.on { color: var(--accent); }

/* 検索結果からも、その場でお気に入りに入れられる */
.search-line { display: flex; align-items: stretch; gap: 4px; }
.search-line .search-row { flex: 1; min-width: 0; }
.search-pin {
  flex: none; width: 44px; padding: 0; cursor: pointer; font-size: 16px; line-height: 1;
  background: none; border: 0; color: var(--border);
}
.search-pin.on { color: var(--accent); }

.mine-line { display: flex; align-items: stretch; }
.mine-line + .mine-line { border-top: 1px solid var(--border); }
.mine-off {
  flex: none; width: 44px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1;
  background: none; border: 0; color: var(--accent);
}
.mine-off:hover { color: var(--text-dim); }
.mine-off:disabled { opacity: 0.4; }
.mine-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--border); color: var(--text);
}
.mine-line .mine-row { border-top: 0; }
.mine-row:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
.mine-row .mine-main { flex: 1; min-width: 0; }
.mine-name {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mine-where { display: block; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.mine-row .fry-bar { display: block; width: 72px; flex: none; margin: 0; max-width: none; }
.mine-meta { flex: none; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* きろくの「10回達成したフレーズ」。英語だけ並べ、押すと吹き出しが開く */
.mastered-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; width: 100%;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: left;
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.mastered-item + .mastered-item { border-top: 1px solid var(--border); }
.mastered-no {
  flex: none; width: 26px; font-size: 12px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mastered-main { flex: 1; min-width: 0; }
.mastered-en { display: block; }
.mastered-when { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: var(--text-dim); }
.mastered-play {
  flex: none; width: 34px; height: 34px; padding: 0; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  background: var(--surface-2); border: 0; border-radius: 999px; color: var(--text);
}
.mastered-play svg { width: 17px; height: 17px; display: block; }
/* きろくの「もっと見る」は、お気に入りと同じ見た目にそろえる */
.timeline-list .mine-more { margin-top: 6px; }
.mastered-empty { margin: 0; font-size: 13px; color: var(--text-dim); }
.mine-more {
  display: block; width: 100%; padding: 11px; font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; color: var(--text-dim);
  background: none; border: 0; border-top: 1px solid var(--border);
}
@media (max-width: 420px) { .mine-row .fry-bar { display: none; } }

/* ホームの検索欄。ここが「言いたい場面から探す」入口なので、はっきり見せる */
.home-search {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 10px; padding: 6px 16px;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.home-search:focus-within { box-shadow: 0 0 0 4px var(--surface-2); }
.home-search .home-search-ico { color: var(--accent); }
.home-search .home-search-ico svg { width: 22px; height: 22px; }
.home-search input {
  flex: 1; min-width: 0; padding: 15px 4px; font: inherit; font-size: 16px; font-weight: 600;
  border: none; background: none; color: var(--text); outline: none;
}
.home-search input::placeholder { font-weight: 400; }
.home-search-go {
  flex: none; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 10px; color: #fff;
}
/* さがす画面の入力欄 */
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row .search-input { flex: 1; }
.search-go { flex: none; width: auto; padding: 12px 20px; }
/* 棚の見出し。何のまとまりかを一行そえる */
.shelf-head { margin: 22px 2px 10px; font-size: 15px; font-weight: 800; }
.shelf-head small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--text-dim); }

/* ---- 3枠のフレーズ練習 ---- */
.today-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
/* ガイド。次にやることを1つだけ、大きく出す */
.guide-box {
  padding: 18px; margin-bottom: 14px;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 18px;
}
.guide-eyebrow { font-size: 11px; font-weight: 700; color: var(--accent-2); }
.guide-name { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.5; }
.guide-bar { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.guide-bar i { display: block; height: 100%; background: var(--accent); }
.guide-meta { margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.guide-box .btn-primary { margin-top: 14px; }
/* 道のり。横に並べて選ぶ。押すと上の「はじめる」に載る */
.guide-path { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.guide-path-head { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.guide-path-head small { margin-left: 8px; font-weight: 400; font-size: 10.5px; }
/* 左右の矢印。丸で囲むと順位の数字を隠してしまうので、印だけ置く */
.road-wrap { position: relative; }
.road-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--text-dim); opacity: 0.55;
  background: none; border: 0;
}
.road-arrow:active { opacity: 1; }
.road-arrow.prev { left: -10px; }
.road-arrow.next { right: -10px; }
.road-strip {
  display: flex; gap: 10px; margin-top: 10px; padding: 2px 2px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.road-strip::-webkit-scrollbar { height: 0; }
/* 順位は札の上に小さく重ねる（外に大きく置くと場所を食う） */
.road-cell { flex: 0 0 auto; display: flex; align-items: center; scroll-snap-align: center; padding-top: 10px; }
.road-item { position: relative; overflow: visible; }
.road-rank {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); font-size: 11px; font-weight: 800;
  border: 2px solid var(--surface); user-select: none;
}
.road-item.sel .road-rank { background: var(--accent); color: #fff; }
.road-item {
  flex: none; width: 132px; 
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 8px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.road-item:active { transform: translateY(1px); }
.road-dot {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: #fff; position: relative;
}
.road-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--surface);
}
.road-dot svg { width: 18px; height: 18px; position: relative; z-index: 1; color: var(--accent); }
/* 再生の三角は左に重心が寄って見えるので、少しだけ右に置く */
.road-dot .ico[class*="ico"] path[fill] { transform: none; }
.road-item.done .road-dot svg { color: var(--accent); }
.road-name { font-size: 12px; font-weight: 700; line-height: 1.4; }
.road-note { font-size: 10px; color: var(--text-dim); }
.road-item.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.road-cell:has(.road-item.sel) .road-rank { -webkit-text-stroke-color: var(--accent); }
.road-item.sel .road-name { font-weight: 800; }
.road-item.done .road-name { color: var(--text-dim); }

.guide-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.guide-pick {
  padding: 16px 12px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 0; border-radius: 14px; color: var(--text);
}
.guide-pick-name { display: block; font-size: 15px; font-weight: 800; line-height: 1.45; }
.guide-pick-meta { display: block; margin-top: 6px; font-size: 11px; color: var(--text-dim); }

/* ガイドのときは、選ぶものを減らす。モールのときはガイドを出さない */
/* モール（流れ・棚・カート）はやめて別アプリで作り直す。
   markupとJSは残してあるので、出すときはこの1ブロックを外せば戻る */
#feed-section,
#feed-more,
#seen-section,
.shelf-fold,
.cart-btn,
.side-cart { display: none !important; }
/* クイック行は「熟語をさがす」だけ。ほかは横のメニューにある */
.quick-btn.wide { flex-direction: row; gap: 8px; padding: 12px; font-size: 14px; }
.quick-btn.wide span { font-size: 13px; }

/* 流れてくるカード。上から下へ、フレーズとテーマが続く */
#feed-section { display: grid; gap: 10px; margin-top: 6px; }
.feed-card {
  display: block; padding: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.feed-eyebrow { display: block; font-size: 11px; font-weight: 700; color: var(--accent-2); }
.feed-en { display: block; margin-top: 8px; font-size: 18px; font-weight: 800; line-height: 1.55; }
.feed-en .key { color: var(--accent); }
.feed-ja { display: block; margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.feed-title { display: block; margin-top: 6px; font-size: 17px; font-weight: 800; }
.feed-desc { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }
.feed-meta { display: block; margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.feed-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.feed-hintline { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-dim); line-height: 1.5; }
/* 2枚並び・3枚並び。商品一覧のように、並び方に変化を付ける */
.feed-row { display: grid; gap: 10px; }
.feed-row.cols-2 { grid-template-columns: 1fr 1fr; }
.feed-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .feed-row.cols-3 { grid-template-columns: 1fr 1fr; } }
.feed-card.tight { padding: 12px; }
.feed-card.tight .feed-en { font-size: 15px; line-height: 1.45; }
.feed-card.tight .feed-ja { font-size: 11.5px; margin-top: 4px; }
.feed-card.tight .feed-eyebrow { font-size: 10px; }
.feed-card.tight .feed-actions { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.feed-card.tight .feed-play { width: 32px; height: 32px; }
.feed-card.tight .feed-cart { padding: 8px 6px; font-size: 11.5px; }
.feed-card.tight .feed-cart svg { width: 14px; height: 14px; }

/* 同じ大きさが続くと目が滑る。大小を混ぜる */
.feed-card.big { padding: 22px 18px; }
.feed-card.big .feed-en { font-size: 22px; line-height: 1.5; }
.feed-card.small { padding: 12px 14px; }
.feed-card.small .feed-en { font-size: 15.5px; }
.feed-card.small .feed-ja { font-size: 12px; }
.feed-phrase { cursor: pointer; }
.feed-phrase:hover { border-color: var(--accent); }

/* 会話の中でどう出てくるか。押した言い方だけ色を付ける */
.scene-talk { display: grid; gap: 10px; margin: 6px 0 18px; }
.talk-row {
  display: block; width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--surface);
  text-align: left; border: 1px solid var(--border); font: inherit; color: var(--text);
  cursor: pointer; position: relative;
}
.talk-row:hover { border-color: var(--accent); }
.talk-go {
  display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--accent);
}
.talk-row.here {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.talk-who { display: block; font-size: 10px; font-weight: 700; color: var(--text-dim); }
.talk-en { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.talk-ja { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.feed-play {
  flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; background: var(--surface-2); border: 0; border-radius: 999px; color: var(--text);
}
.feed-play svg { width: 18px; height: 18px; }
.feed-try, .feed-open {
  flex: 1; padding: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 12px; color: #fff;
}
/* 詳細（商品ページ）。中を見て、試してから、カートに入れる */
.detail-head { padding: 4px 2px 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.detail-en { font-size: 21px; font-weight: 800; line-height: 1.5; }
.detail-ja { margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.detail-actions { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.detail-actions .drill-play { margin: 0; }
.detail-actions .btn-secondary { flex: 1; width: auto; padding: 10px; font-size: 13px; }
.detail-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }

#game-pick .try-grid { padding: 4px 2px 10px; }

/* この文で遊べる練習。横に流すより、全部見えるほうが選びやすい */
.try-block { margin-top: 16px; }
.try-head { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.try-head small { font-weight: 400; margin-left: 8px; font-size: 10.5px; opacity: 0.9; }
.try-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.try-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; cursor: pointer; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.try-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.try-tile:active { transform: scale(0.97); }
.try-ico {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--accent);
}
.try-ico svg { width: 18px; height: 18px; }
.try-name { font-size: 11.5px; font-weight: 700; line-height: 1.3; }

/* キャラの顔。ことばだけより、顔があるほうが伝わる */
.pra-face { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto; }
.pra-face.big { width: 108px; height: 108px; margin-bottom: 6px; }

/* 前に見たフレーズ。横に並べて、すっと戻れるようにする */
.seen-head { margin: 18px 2px 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.seen-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.seen-row::-webkit-scrollbar { display: none; }
.seen-card {
  flex: 0 0 62%; text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
@media (min-width: 700px) { .seen-card { flex-basis: 30%; } }
.seen-where { display: block; font-size: 10px; color: var(--text-dim); }
.seen-en { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; }

/* カートに入れる。買い物と同じ気軽さで、練習するものを溜める */
.feed-cart {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 12px; color: #fff;
}
.feed-cart svg { width: 17px; height: 17px; }
.feed-cart.on { background: var(--surface-2); color: var(--text-dim); }
.cart-btn { position: relative; }
.cart-btn:has(.cart-count:not([hidden])) { background: var(--surface-2); border-radius: 999px; color: var(--accent); }
.cart-count {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
  background: var(--accent); color: #fff; border-radius: 999px;
}
/* カート画面 */
.cart-list { display: grid; gap: 8px; margin-bottom: 14px; }
.cart-row { display: flex; align-items: stretch; gap: 6px; }
.cart-main {
  flex: 1; min-width: 0; text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
.cart-where { display: block; font-size: 11px; font-weight: 700; color: var(--accent-2); }
.cart-en { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.cart-ja { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.cart-dots { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.cart-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.cart-dots i.on { background: var(--accent); }
.cart-dots em { flex: none; font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 4px; }
.cart-del {
  flex: none; width: 40px; cursor: pointer; font-size: 14px; color: var(--text-dim);
  background: none; border: 0;
}
/* カートの中でも、好きなゲームを選べる */
.cart-pick { margin: -2px 0 4px; padding: 0 2px; }
.cart-pick-btn {
  padding: 6px 2px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: none; border: 0; color: var(--accent-2); text-decoration: underline;
}
.cart-pick .try-grid { margin: 6px 0 10px; }
.cart-run { margin: 4px 0 10px; }
.cart-note, .cart-empty { font-size: 12px; color: var(--text-dim); line-height: 1.8; }

.feed-star, .feed-like {
  flex: none; width: 38px; height: 38px; padding: 0; cursor: pointer; font-size: 17px; line-height: 1;
  background: var(--surface-2); border: 0; border-radius: 999px; color: var(--border);
}
.feed-star.on, .feed-like.on { color: var(--accent); }
.feed-more-btn {
  display: block; width: 100%; margin-top: 12px; padding: 12px; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.shelf-fold { margin-top: 22px; }
.shelf-fold > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-dim); padding: 8px 2px; }

/* 録音をまだ試していない人への案内。1回きり */
.voice-guide {
  position: relative; margin: 16px auto 0; max-width: 460px; padding: 14px 34px 14px 14px;
  text-align: left; background: var(--surface-2); border-radius: 14px;
}
.voice-guide b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.voice-guide p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--text-dim); }
.voice-guide-x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--text-dim); font-size: 13px;
}

/* 出題の投稿。呼びかけより、問題文そのものを大きく出す */
.quiz-post { display: block; margin: 6px 0 4px; }
.quiz-post-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.quiz-post-ja { display: block; margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.65; }
.quiz-post-sub { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }

/* 声で答える枠。押す場所と、文字になって出る場所を1つにまとめる */
.voice-box {
  display: flex; align-items: stretch; gap: 10px; margin: 18px auto 0; max-width: 460px; text-align: left;
}
.voice-mic {
  flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 6px; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 14px; color: #fff;
}
/* 四角の中でマイクが埋もれないように、白い丸に載せて大きく見せる */
.voice-mic svg {
  width: 30px; height: 30px; padding: 7px; box-sizing: content-box;
  background: rgba(255, 255, 255, 0.22); border-radius: 999px;
}
.voice-mic span { font-size: 11px; font-weight: 700; }
.voice-mic.rec svg { background: rgba(255, 255, 255, 0.3); }
.voice-mic.rec { background: #d64545; animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 50% { opacity: 0.72; } }
.voice-out {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
}
.voice-out-label { font-size: 10px; font-weight: 700; color: var(--text-dim); }
.voice-heard { margin-top: 4px; font-size: 15px; line-height: 1.6; }
.voice-empty { font-size: 12px; color: var(--text-dim); }

/* 記録は1枚のカードにまとめる。押すと中の数字が入れ替わり、下辺に流れる帯を抱える。
   色はブランドの借り物にせず、テーマ色を深くして作った独自の面 */
.ten-card {
  position: relative; overflow: hidden;
  margin-bottom: 12px; border-radius: 20px; color: #fff;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
/* 面のあしらい。10の輪郭をうっすら重ねて、ブランドの面として独立させる */
.ten-card::after {
  content: "10"; position: absolute; right: 14px; bottom: -18px;
  font-size: 86px; font-weight: 800; letter-spacing: -2px; line-height: 1;
  color: rgba(255, 255, 255, 0.13); pointer-events: none;
}
.ten-card-face {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 18px 12px; background: none; border: 0; color: inherit;
}
/* 見出し・数字・「ぜんぶ見る」を1行に収める */
.ten-card-num { display: flex; align-items: baseline; gap: 8px; }
.ten-card-num small { font-size: 12px; font-weight: 600; opacity: 0.92; }
.ten-card-num b { font-size: 18px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ten-card-dots { display: flex; gap: 5px; margin-top: 12px; }
.ten-card-dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.42); }
.ten-card-dots i.on { background: #fff; }
/* カードの下辺。フレーズは1行まるごと使い、操作はその下に並べる */
.card-foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: rgba(255, 255, 255, 0.16); position: relative; z-index: 1;
}
.card-foot .today-marquee { width: 100%; min-width: 0; background: none; }
.card-foot .foot-btns {
  display: flex; justify-content: flex-end; gap: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.listen-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px;
  font: inherit; font-size: 9px; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, 0.22); border: 0; color: #fff;
}
.listen-btn svg { width: 16px; height: 16px; }
.listen-btn.on { background: #fff; color: var(--accent); }
/* くり返し / 1周だけ の切り替え。聞き流しの隣に小さく置く */
.listen-loop {
  flex: none; width: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 0; cursor: pointer; font: inherit;
  background: rgba(255, 255, 255, 0.12); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.listen-loop svg { width: 17px; height: 17px; }
.listen-loop.on { background: rgba(255, 255, 255, 0.28); }
.listen-loop:not(.on) svg { opacity: 0.55; }

/* カードの下辺に流れる帯 */
.ten-card .today-marquee {
  margin: 0; padding: 8px 12px; background: rgba(255, 255, 255, 0.16);
  border: 0; border-radius: 0; position: relative; z-index: 1;
}
.ten-card .marq-item { color: rgba(255, 255, 255, 0.95); }
.ten-card .marq-no { color: #fff; }
.epoch-heard-note.tappable { cursor: pointer; text-decoration: underline; }
.mic-help-body { padding: 4px 4px 8px; font-size: 13px; line-height: 1.9; }
.mic-help-body p { margin: 0 0 14px; }
.mic-help-body b { display: inline-block; margin-bottom: 2px; }
.ten-card .marq-toggle { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* カードのすぐ下、よく使う入口を横並びに */
.quick-row { display: flex; gap: 8px; margin-bottom: 12px; }
.quick-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; cursor: pointer; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
.quick-btn svg { width: 20px; height: 20px; color: var(--accent); }
.quick-btn span { font-size: 11px; font-weight: 700; }

/* お知らせ・聞き流しの1行バー */
.notice-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 14px;
  padding: 10px 14px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 0; border-radius: 12px; font-size: 12px;
}
.notice-bar span { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 700; color: var(--accent-2); }
.notice-bar span svg { width: 14px; height: 14px; }
.notice-bar b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-bar em { flex: none; font-style: normal; color: var(--text-dim); }
.notice-bar.listening { background: var(--accent); color: #fff; }
.notice-bar.listening span, .notice-bar.listening em { color: rgba(255, 255, 255, 0.9); }

/* 見出しの空きに、やりきった文を流す。止める・動かすは自分で決められる */
.today-marquee {
  flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.marq-view {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.marq-line {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; will-change: transform;
}
.marq-line small { font-size: 10px; opacity: 0.75; }
.marq-item { padding: 0 18px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
/* 番号は動かさない。文だけが流れる */
.marq-no { flex: none; font-size: 13px; font-weight: 800; color: var(--accent); }
.marq-toggle {
  flex: none; width: 26px; height: 26px; padding: 0; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--text-dim);
  background: var(--surface-2); border: 0; border-radius: 999px;
}
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marq-track { animation: none; } }
@media (max-width: 700px) {
  .today-marquee { flex-basis: 100%; order: 3; margin: 8px 0 0; }
}

/* 目標ではなく記録として見せる。0でも「0個」と出して、増えていく場所だと分かるようにする */
.today-mastered { display: inline-flex; align-items: baseline; gap: 5px; }
.today-mastered small { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.today-mastered b { font-size: 24px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.today-brand { font-size: 12px; color: var(--text-dim); text-align: right; }
.today-brand small { display: block; font-size: 10px; }
.today-lead { margin: 6px 2px 10px; font-size: 13px; font-weight: 700; }
/* カードは横に並べて送る。場面名を上、文を真ん中、進みを下 */
.today-rail { position: relative; margin-bottom: 18px; }
.today-cards {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px;
}
.today-cards::-webkit-scrollbar { display: none; }
.today-card {
  flex: 0 0 calc((100% - 16px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
}
@media (max-width: 700px) { .today-card { flex-basis: 78%; } }
.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.rail-arrow.prev { left: -14px; }
.rail-arrow.next { right: -14px; }
@media (max-width: 700px) { .rail-arrow { display: none; } }
.today-where { display: block; font-size: 11.5px; font-weight: 600; color: var(--accent-2); }
.today-en { display: block; font-size: 15px; font-weight: 800; line-height: 1.5; }
.today-en .key { color: var(--accent); }
.today-ja { display: block; flex: 1; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.6; }
.today-foot { display: flex; align-items: center; gap: 8px; }
.today-dots { display: flex; flex: 1; gap: 3px; }
.today-dots i, .drill-dots i { flex: 1; height: 5px; border-radius: 2px; background: var(--surface-2); }
.today-dots i.on, .drill-dots i.on { background: var(--accent); }
.today-count { flex: none; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.today-empty { font-size: 13px; color: var(--text-dim); padding: 6px 2px 16px; }

.drill-viewer .quiz-head { align-items: center; gap: 12px; }
.drill-title { font-size: 14px; font-weight: 700; }

/* 練習は1枚のカード。表で考えて、めくって答え合わせ。
   数えたら右上へ、数えなければ左上へ、カードごと送り出す */
.drill-card-wrap { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 16px 0 40px; }
.drill-card-wrap > .drill-done { width: 100%; max-width: 520px; text-align: center; }
.pcard {
  width: 100%; max-width: 520px; align-self: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 24px 18px 26px; text-align: center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.7, 0.2), opacity 0.38s ease;
}
.pcard.fly-yes { transform: translate(46vw, -60vh) rotate(18deg); opacity: 0; }
.pcard.fly-no { transform: translate(-46vw, -60vh) rotate(-18deg); opacity: 0; }
.pcard-face > * { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
.pcard .back { display: none; }
.pcard.flipped .front { display: none; }
.pcard.flipped .back { display: block; animation: pcard-flip 0.28s ease-out; }
@keyframes pcard-flip {
  from { transform: rotateY(-82deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard.flipped .back { transition: none; animation: none; }
}
/* 裏面 */
.drill-back-ja { font-size: 14px; color: var(--text-dim); margin-top: 10px; line-height: 1.7; }
.drill-play {
  width: auto; display: inline-flex; align-items: center; gap: 6px; margin: 18px auto 0; padding: 9px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--text);
  background: var(--surface-2); border: 0; border-radius: 999px;
}
.drill-play svg { width: 16px; height: 16px; }
.drill-plays { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.drill-plays .drill-play { margin: 0; }
.drill-play.rec.on { background: var(--accent); color: #fff; }
/* 3つを役目で見分けられるように。聞く2つは並べ、録るのは少し離して小さく */
.drill-plays .drill-play:not(.rec) { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.drill-plays .my-clip.drill-play {
  background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset;
}
.drill-plays .drill-play.rec {
  margin-left: 14px; padding: 7px 13px; font-size: 11.5px;
  background: transparent; color: var(--text-dim); box-shadow: 0 0 0 1px var(--border) inset;
}
.drill-plays .drill-play.rec svg { width: 14px; height: 14px; }
.drill-plays .drill-play.rec.on { background: var(--accent); color: #fff; box-shadow: none; }
.my-clip.drill-hint-btn, .my-clip.drill-play { width: auto; }
.drill-heard {
  margin-top: 16px; padding: 10px 12px; text-align: left; font-size: 14px; line-height: 1.6;
  background: var(--surface-2); border-radius: 12px;
}
.drill-heard span { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 3px; }
.drill-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.drill-judge button {
  padding: 14px 8px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; border-radius: 14px;
}
.drill-judge small { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; opacity: 0.75; }
/* ふだんは「言えた」を目立たせすぎない。答えを見ずに押させないため */
.judge-no { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.judge-yes { background: var(--surface); border: 1px solid var(--accent); color: var(--accent); }
/* 合っていたときだけ、はっきり押せる色にする */
.drill-judge.ok .judge-yes { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 間違えたときは、押すのは「まだ」のほう */
.drill-judge.wrong .judge-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.drill-judge.wrong .judge-yes,
.judge-yes:disabled {
  background: var(--surface-2); border-color: var(--border); color: var(--text-dim); cursor: default;
}
.drill-judge-note { margin: 10px 0 0; font-size: 11px; color: var(--text-dim); }
.drill-ask { font-size: 12.5px; font-weight: 600; color: var(--accent-2); margin: 0 0 14px; }
/* キーボードが出て縦に長くなっても、日本語の問題文だけは上に留めておく。
   スクロールしてキーボードを使っても、何を打っているのか見失わないように */
.drill-ja {
  font-size: 20px; font-weight: 800; line-height: 1.8;
  position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 4px 0 10px;
}
.drill-en { font-size: 18px; font-weight: 700; line-height: 1.6; word-break: break-word; }
.drill-en.big { font-size: 20px; }
.drill-cue {
  padding: 10px 12px; margin-bottom: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px; line-height: 1.5;
}
.drill-cue span { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px; }
.drill-initials { font-size: 22px; font-weight: 800; letter-spacing: 1px; line-height: 2; margin: 18px 0; }
.drill-initials span { color: var(--text-dim); }
/* 穴埋め。どこが穴かが一目で分かるように、答えの長さぶんの下線を引く。
   ただの「?」だと、文の末尾の「?」と並んで「??」に見えてしまっていた */
.blank-line { margin-top: 10px; font-size: 20px; font-weight: 700; line-height: 1.8; }
.blank-line .blank {
  display: inline-block; min-width: 2.4em; margin: 0 3px; padding: 0 4px;
  color: transparent; letter-spacing: 0; vertical-align: baseline;
  border-bottom: 3px solid var(--accent); border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* 何をする回なのかは、文の下・選択肢の上に置く。上にあると読まずに選び始める */
.drill-ask.blank-ask {
  display: inline-block; margin: 14px 0 0; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #fff; background: var(--accent);
}
.drill-choices { display: grid; gap: 8px; margin-top: 12px; }
/* 選んだ瞬間に裏返すと、どれが正解だったのか見えない。
   押したものと正解に色を付けて、少し見せてから裏へ回す */
.drill-choice.ok {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  border-color: var(--success); color: var(--success); font-weight: 800;
}
.drill-choice.ng {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  border-color: var(--danger); color: var(--danger); font-weight: 800;
}
.drill-choice:disabled { opacity: 1; cursor: default; }
.drill-choice {
  padding: 13px 14px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.drill-slot {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; min-height: 54px;
  margin: 18px auto 14px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px;
}
.drill-empty { font-size: 12px; color: var(--text-dim); align-self: center; }
.drill-pool { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.drill-chip {
  width: auto; padding: 8px 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.drill-chip.set { background: var(--surface-2); border-color: var(--surface-2); cursor: pointer; }
/* 違う語を置いたら、その場で赤くする。並べ終わってから気づいても、どこが違うか分からない */
.drill-chip.set.ng {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  border-color: var(--danger); color: var(--danger); font-weight: 800;
}
.drill-ng-note { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--danger); }
.epoch-skip.ng { color: var(--danger); border-color: var(--danger); font-weight: 800; }
.drill-chip.used { visibility: hidden; }
.drill-input {
  width: 100%; padding: 12px; font: inherit; font-size: 16px; margin-top: 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
/* 語ごとの枠。枠の数と頭文字が、そのままヒントになる（並べ替えの置き場 .drill-slot とは別物） */
.drill-slots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px;
}
/* 語ブロック入力。1語ずつ枠に収め、下線と点滅で「いまここ」を示す */
.type-slot {
  padding: 10px 8px; font: inherit; font-size: 17px; font-weight: 700; text-align: center;
  letter-spacing: 0.02em; border: 1px solid var(--border); border-bottom: 3px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.drill-ime {
  margin: 12px auto 0; padding: 8px 12px; max-width: 420px;
  font-size: 12px; font-weight: 600; color: var(--accent-2);
  background: var(--surface-2); border-radius: 10px;
}
.type-slot::placeholder { color: var(--text-dim); opacity: 0.55; letter-spacing: 1px; }
.type-slot:focus { outline: none; }
/* いま打っている枠だけを示す。押しただけの枠が光り続けないように */
.type-slot.here {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: translateY(-1px); animation: slot-caret 1.1s steps(1) infinite;
}
@keyframes slot-caret {
  50% { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
}
.type-slot.ok {
  color: var(--accent-2); border-color: var(--accent); border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.type-slot.ng { color: var(--text-dim); border-bottom-color: #e5484d; }
.drill-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.drill-actions .epoch-skip { flex: none; white-space: nowrap; }
.drill-actions .btn-primary { flex: 1; max-width: 300px; }
.drill-answer-msg { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; }
.drill-answer-msg.ok { color: var(--accent); }
.drill-done { padding: 30px 0; }
.drill-done-mark { font-size: 40px; color: var(--accent); }
.drill-done-mark svg { width: 44px; height: 44px; margin: 0 auto; }
.drill-done-title { font-size: 19px; font-weight: 800; margin: 10px 0 14px; }
.drill-dots { display: flex; gap: 3px; max-width: 260px; margin: 16px auto 0; }
.drill-done-sub { font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.drill-done .btn-primary { max-width: 320px; margin: 22px auto 0; }

/* ヒントは押したときだけ出す */
.drill-helpers { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.drill-hint-btn {
  display: inline-flex; align-items: center; gap: 5px; width: auto;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
}
.drill-hint-btn svg { width: 14px; height: 14px; }
.drill-hint-btn:disabled { opacity: 0.5; cursor: default; }
.drill-hint { margin-top: 10px; font-size: 12px; line-height: 2.1; color: var(--text-dim); }
.drill-hint b { color: var(--text); letter-spacing: 1px; }
/* ヒントは単語そのもので出す。並べて見せると、組み立てが自分の仕事として残る */
.hint-word {
  display: inline-block; margin: 3px 3px 0; padding: 5px 10px;
  font-size: 15px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border-radius: 8px;
}
.post-practice {
  display: block; width: 100%; margin-top: 12px; padding: 11px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 12px; color: #fff;
}
.post-practice:disabled { opacity: 0.6; }
.hint-step + .hint-step { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.hint-label { display: block; font-size: 11px; line-height: 1.6; margin-bottom: 2px; }
.drill-mic { margin: 16px auto 0; }
.pcard-face .btn-primary { margin-top: 22px; }

/* ゲームの途中で「自分で言ってみる」に誘う画面 */
.speak-step .drill-done-sub { margin-top: 12px; }
.speak-step .btn-primary { margin-top: 18px; }
.speak-step .epoch-skip { display: block; margin: 10px auto 0; }

/* 別のフレーズに切り替わったことが、目でわかるように */
@keyframes detail-flash {
  from { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  to { background: transparent; }
}
.detail-head.flash { animation: detail-flash 900ms ease-out; border-radius: 14px; }

/* 聞いている最中だと、ひと目で分かるように。止まったことにも気づけるように */
.voice-box.listening {
  border-radius: 16px;
  box-shadow: 0 0 0 2px #d64545;
  animation: voice-listen 1.2s ease-in-out infinite;
}
@keyframes voice-listen { 50% { box-shadow: 0 0 0 5px rgba(214, 69, 69, 0.22); } }
.voice-mic span { min-width: 4.5em; }
.epoch-heard-text.live { color: var(--text-dim); }
.voice-heard .epoch-heard-text { font-size: 19px; }

/* きろくの吹き出し。ページを移らずに、意味と言葉づかいをその場で確かめる */
.mastered-bubble {
  position: relative; margin: 2px 14px 14px 44px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 14px; text-align: left;
}
.mastered-bubble::before {
  content: ""; position: absolute; top: -6px; left: 18px; width: 12px; height: 12px;
  background: var(--surface-2); transform: rotate(45deg); border-radius: 2px;
}
.bubble-ja { font-size: 14px; font-weight: 700; line-height: 1.7; }
.bubble-where { margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.bubble-load { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.bubble-sec { margin-top: 12px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.bubble-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bubble-word {
  padding: 4px 9px; font-size: 12px; font-weight: 700; border-radius: 999px;
  background: var(--surface); color: var(--accent); box-shadow: 0 0 0 1px var(--border) inset;
}
.bubble-alt { margin-top: 6px; font-size: 13px; line-height: 1.6; }
.bubble-alt span { display: block; font-size: 11px; color: var(--text-dim); }
.bubble-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bubble-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 0; border-radius: 999px; box-shadow: 0 0 0 1px var(--border) inset;
}
.bubble-btn svg { width: 15px; height: 15px; }
/* 数字カードから、達成した文の一覧へ。見出しのすぐ隣に置く */
.ten-card-all {
  padding: 5px 10px; cursor: pointer; align-self: center; margin-left: auto; white-space: nowrap;
  font: inherit; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.22); border: 0; border-radius: 999px;
}

/* 詳細から、このアプリの本筋（10 Epochs）へ */
.detail-epochs { margin-top: 14px; }

/* ---- 手ざわり ----
   画面が平らすぎると「押せるもの」が分かりにくい。
   影とわずかな傾斜で厚みを付け、押したら沈むようにする。色は足さない */
.btn-primary,
.btn-secondary,
.quick-btn,
.try-tile,
.drill-play,
.my-clip,
.bubble-btn,
.epoch-btn,
.listen-btn,
.feed-try,
.feed-open,
.result-btn,
.mine-more {
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 6px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-secondary,
.quick-btn,
.try-tile,
.drill-play,
.my-clip,
.bubble-btn,
.epoch-btn {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 2px 4px rgba(16, 24, 40, 0.09);
}
.btn-secondary:active,
.quick-btn:active,
.try-tile:active,
.drill-play:active,
.my-clip:active,
.bubble-btn:active,
.epoch-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}
/* 面はうっすら浮かせる。並んだときに1枚ずつの輪郭が見えるように */
.card,
.mine-wrap,
.feed-card,
.feed-phrase,
.talk-row,
.mastered-item,
.guide-box,
.epoch-hero {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 3px 10px rgba(16, 24, 40, 0.07);
}
.ten-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 26px rgba(16, 24, 40, 0.2);
}
/* 押せるカードは、指を置くと少し持ち上がる */
.try-tile:hover,
.quick-btn:hover,
.feed-phrase:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 14px rgba(16, 24, 40, 0.12);
}

/* 押したものの近くに出す吹き出し。何がだめだったかを、その場で伝える */
.spot-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  z-index: 20; width: max-content; max-width: 240px; padding: 8px 12px;
  font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center;
  background: var(--text); color: var(--surface); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.spot-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--text);
}

/* 声のかわりに書いて答える。話せない場所でも同じように答え合わせできる */
.voice-type { display: flex; gap: 6px; margin-top: 8px; }
.voice-type-in {
  flex: 1; min-width: 0; margin: 0; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.voice-type-go {
  flex: none; padding: 8px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}

/* 録音中のボタン。押しているあいだ、赤く脈打たせる */
.drill-play.rec.on,
.my-clip.rec.on {
  background: #d64545; border-color: #d64545; color: #fff;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 6px rgba(214, 69, 69, 0.2); } }

/* 自分のテーマ作り。英語を貼って、日本語と熟語を自動でつける */
.ai-list { margin-top: 10px; display: grid; gap: 10px; }
.ai-row { padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.ai-en { font-size: 14px; font-weight: 800; line-height: 1.5; }
.ai-ja, .ai-key {
  width: 100%; margin: 6px 0 0; padding: 7px 10px; font: inherit; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.ai-note { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--accent); }
.my-share { margin-top: 12px; }
.my-share-sel {
  width: 100%; margin-top: 8px; padding: 9px 10px; font: inherit; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
/* 「My Voice」は文字が長いぶん、ひときわ小さく置く */
#listen-mine { width: auto; padding: 9px 10px; font-size: 8px; font-weight: 800; letter-spacing: 0.02em; }

/* 熟語の登録と、その順番待ち */
.idiom-sec { margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.idiom-row {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 12px;
}
.idiom-row.waiting { opacity: 0.75; }
.idiom-word { font-size: 14px; font-weight: 800; }
.idiom-ja { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); }
.idiom-add {
  flex: none; padding: 7px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 999px; color: #fff;
}
.my-line-edit {
  padding: 4px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}

/* 管理画面の熟語一覧 */
.id-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.id-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.id-meta { font-size: 12px; color: var(--text-dim); }
.id-tag { padding: 2px 8px; font-size: 10.5px; font-weight: 700; border-radius: 999px; background: var(--surface-2); }
.id-del { margin-left: auto; padding: 3px 10px; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.id-ex { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.id-en { font-weight: 600; }
.id-ja { color: var(--text-dim); }
.id-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }

/* 熟語の直接編集 */
.id-in {
  margin: 0; padding: 6px 9px; font: inherit; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.id-head .id-phrase { width: 200px; font-weight: 700; }
.id-head .id-mean { flex: 1; min-width: 140px; }
.id-head .id-cat { width: 140px; }
.id-ex .id-tip { flex: 1; }
.id-ex .id-en, .id-ex .id-new-en { flex: 2; min-width: 180px; }
.id-ex .id-ja, .id-ex .id-new-ja { flex: 1.4; min-width: 140px; }
.id-save {
  padding: 4px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: #fff;
  background: var(--accent); border: 0; border-radius: 999px;
}
.id-exdel, .id-exadd {
  flex: none; padding: 4px 10px; font-size: 11.5px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.id-add { opacity: 0.9; }

/* 仲間から選ぶ */
.idiom-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.idiom-cat {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.idiom-cat span { font-size: 10.5px; color: var(--text-dim); }
.idiom-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.idiom-cat.on span { color: rgba(255, 255, 255, 0.85); }
.idiom-pick-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-dim);
}
.idiom-all {
  padding: 5px 11px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.idiom-check {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 9px 12px; cursor: pointer;
  background: var(--surface-2); border-radius: 12px;
}
.idiom-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.idiom-tip { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--accent); }

/* 熟語を見る画面。仲間で並べ、開くと意味・覚え方・例文が出る */
#idiom-dialog { max-width: 560px; width: 92vw; }
#idiom-dialog .search-input { width: 100%; margin: 8px 0 10px; }
#idiom-browse-list { max-height: 60vh; overflow-y: auto; }
.idiom-item { border-bottom: 1px solid var(--border); }
.idiom-item > summary {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 4px; cursor: pointer; list-style: none;
}
.idiom-item > summary::-webkit-details-marker { display: none; }
.idiom-item[open] > summary { font-weight: 800; }
.idiom-body { padding: 0 4px 12px; }
.idiom-body .idiom-tip { margin-bottom: 8px; }
.idiom-ex { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13px; }
.idiom-ex b { display: block; font-weight: 700; line-height: 1.5; }
.idiom-ex em { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal; color: var(--text-dim); }
.idiom-play {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface-2); border: 0; border-radius: 999px; color: var(--text);
}
.idiom-play svg { width: 15px; height: 15px; }
.idiom-take-one { margin-top: 12px; }

/* ホームからそのまま熟語を引く */
.idiom-search {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 8px 6px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.idiom-search .search-input {
  flex: 1; min-width: 0; margin: 0; padding: 8px 0; font-size: 14px;
  background: none; border: 0; color: var(--text);
}
.idiom-search .search-input:focus { outline: none; }
#idiom-home-list:not(:empty) {
  margin-bottom: 14px; padding: 4px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
}

/* 自分で作ったテーマ。ホームから1タップで入れるようにする */
.mytheme-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.mytheme-card {
  flex: 0 0 auto; min-width: 150px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.mytheme-name { font-size: 14px; font-weight: 800; }
.mytheme-meta { font-size: 11px; color: var(--text-dim); }

/* 何個あって、いま何個見えているか */
.idiom-count { padding: 8px 2px 4px; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.idiom-more { margin: 10px 0; }

/* iPhoneでは1画面をまるごと使う。カードは伸ばし、押すものは下（親指の届く所）へ */
.idiom-viewer .epoch-stage {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}
/* 3枚目（意味＋例文＋訳＋覚え方）は中身が長くなることがある。
   min-height:0 が無いと、flexの子は中身より縮めないので「次へ」ボタンに乗り上げていた。
   カードの中だけスクロールさせて、ボタンとは重ならないようにする */
.idiom-viewer .idi-card { flex: 1; min-height: 40vh; max-height: 62vh; }
.idiom-viewer .idi-levels { margin-top: 8px; }
.idiom-viewer .idi-modes { flex: 1; align-content: center; }
.idiom-viewer .btn-primary { margin-top: auto; }
.idiom-viewer .drill-judge { margin-top: auto; }
.idi-face { width: 100%; }

/* 反転カード。押すと1枚がその場で回る。説明を読ませない */
.idi-card {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: 28px 20px; cursor: pointer; text-align: center; transform-origin: center;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border-radius: 22px; box-shadow: 0 8px 26px rgba(16, 24, 40, 0.12);
  will-change: transform;
}
/* 3枚目は中身が長くなることがある。文字は idi-scroll の中だけでスクロールさせ、
   下のドットは常にその外（重ならない場所）に固定で置く */
.idi-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* めくり。3D回転＋浮き上がりは要素が多すぎて、かえって不自然だった。
   暗記カードアプリでよく使う「横につぶれて戻る」だけにする。
   完全につぶれた瞬間（見えない一瞬）に中身を差し替えるので、パラパラして見えない */
.idi-card.flipping { animation: idi-flip 0.38s cubic-bezier(0.45, 0, 0.2, 1); }
@keyframes idi-flip {
  0% { transform: scaleX(1); }
  48% { transform: scaleX(0.02) scaleY(0.98); }
  52% { transform: scaleX(0.02) scaleY(0.98); }
  100% { transform: scaleX(1); }
}
.idi-card.away {
  transform: translateX(-120%) rotate(-6deg); opacity: 0;
  transition: transform 0.18s ease-in, opacity 0.18s;
}
.idi-inner { width: 100%; }
.idi-dots { flex: none; display: flex; justify-content: center; gap: 6px; padding-top: 12px; }
.idi-dots i { width: 18px; height: 3px; border-radius: 2px; background: var(--border); }
.idi-dots i.on { background: var(--accent); }
.idi-turn { position: absolute; top: 14px; right: 16px; color: var(--text-dim); opacity: 0.45; }
.idi-turn svg { width: 18px; height: 18px; }
.idi-foot { display: flex; align-items: center; gap: 10px; }
.idi-foot .btn-primary { flex: 1; margin: 0; }
.idi-foot .drill-play { flex: none; margin: 0; width: 52px; justify-content: center; padding: 14px 0; }

/* カードの中は上・まん中・下の3段。まん中に全部集めない */
.idi-inner {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; width: 100%; gap: 12px;
  text-align: left;
}
.idi-head { display: flex; flex-direction: column; gap: 4px; }
.idi-body { display: grid; align-content: center; gap: 10px; }
.idi-foot-in { display: grid; align-content: end; gap: 8px; padding-bottom: 18px; }
.idi-chip {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
}
.idi-small { display: inline-block; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.idi-small.dim { font-weight: 400; font-size: 12px; }
/* 3枚目：上の熟語見出しにも再生ボタン。蛍光は例文と連動してOn/Offする */
.idi-head-row { display: flex; align-items: center; gap: 8px; align-self: flex-start; }
.idi-small.neon {
  padding: 2px 6px; border-radius: 5px; font-weight: 800;
  background: linear-gradient(100deg, #d4ff3d 0%, #c3ff1f 45%, #d9ff55 100%);
  color: #00a651; text-shadow: 0 0 3px #fff, 0 0 8px rgba(0, 166, 81, 0.7);
  transition: background 0.15s, color 0.15s;
}
.idi-inline-play.sm { width: 24px; height: 24px; }
.idi-inline-play.sm svg { width: 13px; height: 13px; }
.idi-card .idi-phrase { font-size: 32px; line-height: 1.3; }
.idi-card .idi-mean { margin: 0; font-size: 24px; line-height: 1.55; }
.idi-card .idi-ex-en.big { margin: 0; font-size: 21px; line-height: 1.55; }
.idi-card .idi-ex-ja { margin: 0; font-size: 14px; }
.idi-card .idiom-tip {
  padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-radius: 12px;
}

/* 穴埋めの空所は、下線で見えるようにする */
.idi-blank { border-bottom: 3px solid var(--accent); text-decoration: none; }
.idi-q { display: grid; gap: 10px; align-content: center; flex: 1; }

/* 裏は「意味 → 例文 → 訳」を1枚に。間を空けて読む順が分かるようにする */
.idi-card .idi-body { gap: 18px; }
.idi-ex {
  padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.idi-ex .idi-ex-en.big { font-size: 19px; }
.idi-ex .idi-ex-ja { margin-top: 6px; }

/* 裏は例文が主役。意味は見出しくらいの大きさに落とす */
.idi-card .idi-mean.sub { font-size: 17px; font-weight: 700; color: var(--text-dim); }
.idi-card .idi-ex .idi-ex-en.big { font-size: 25px; line-height: 1.45; }
.idi-card .idi-ex .idi-ex-ja { font-size: 14px; }

/* 例文の中の熟語。色を変え、蛍光ペンのような下線で示す */
.idi-key {
  font-weight: 800; color: var(--accent-2);
  box-shadow: inset 0 -0.42em color-mix(in srgb, var(--accent) 22%, transparent);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s, text-shadow 0.15s;
}
/* 再生は例文の終わりに置く。文と目の動きがつながる */
.idi-inline-play {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.18em;
  width: 30px; height: 30px; margin-left: 8px; padding: 0; cursor: pointer;
  background: var(--surface); border: 0; border-radius: 999px; color: var(--accent);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}
.idi-inline-play svg { width: 16px; height: 16px; }

/* 蛍光ペン表示。熟語の部分だけ、青ではなく蛍光色にする。押した人だけの「おまけ」で、
   目が疲れたらすぐ隣のボタンで消せる */
.idi-ex-en.neon .idi-key {
  color: #00a651; text-shadow: 0 0 3px #fff, 0 0 10px rgba(0, 166, 81, 0.75);
  background: linear-gradient(100deg, #d4ff3d 0%, #c3ff1f 45%, #d9ff55 100%);
  box-shadow: 0 0 10px rgba(200, 255, 60, 0.55);
  border-radius: 4px; padding: 0 3px;
}
.idi-neon-toggle {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.18em;
  width: 30px; height: 30px; margin-left: 6px; padding: 0; cursor: pointer;
  background: var(--surface); border: 0; border-radius: 999px; color: var(--text-dim);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}
.idi-neon-toggle svg { width: 16px; height: 16px; }
.idi-neon-toggle.on { background: #d4ff3d; color: #163a00; }

/* 問いは「帯」にする。小さな色文字だと、見出しなのか問題なのか分からない */
/* 問いは、テーマ色（アクセント）とは別系統にする。
   ただし濃い墨色は目が疲れるので、淡い砂色に濃い茶の文字で置く */
.idi-ask {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; padding: 13px 16px;
  font-size: 15px; font-weight: 800; line-height: 1.5; color: #7a5a1e;
  background: #fdf3de; border: 0; border-left: 5px solid #e3ae52; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}

.idiom-viewer .drill-ask { display: none; }

/* 覚える／答える。押せるものだと形で分かるようにする */
.idi-modes { display: grid; gap: 14px; margin: auto 0; }
.idi-mode {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px 18px;
  cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--border); border-radius: 18px;
}
.idi-mode:active { transform: translateY(2px); }
/* 上の集計カードと同じ塗りにすると、押せるものだと分からなくなる。
   2つとも色を敷き、色の系統を変えて「2つの選択肢」に見せる */
.idi-mode.go {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent); color: var(--accent-2);
}
.idi-mode:not(.go) { background: #fdf3de; border-color: #e3ae52; color: #7a5a1e; }
.idi-mode:not(.go) .idi-mode-ico { background: #f7e4bd; color: #b07d20; }
.idi-mode-ico {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--accent);
}
.idi-mode.go .idi-mode-ico { background: color-mix(in srgb, var(--accent) 22%, #fff); color: var(--accent-2); }
.idi-mode-ico svg { width: 24px; height: 24px; }
.idi-mode-txt { flex: 1; min-width: 0; display: block; }
.idi-mode-txt b { display: block; font-size: 20px; font-weight: 800; line-height: 1.3; }
.idi-mode-txt span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: 0.85; }
.idi-mode-arrow { flex: none; font-size: 26px; line-height: 1; opacity: 0.5; }

/* カテゴリ／ステージの選択リスト。10個ずつクリアできる単位を、押せる札で並べる */
.idi-cat-list { display: grid; gap: 10px; }
.idi-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 18px; cursor: pointer; text-align: left; font: inherit;
  color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: 16px;
}
.idi-cat:active { transform: translateY(2px); }
.idi-cat-main { display: block; min-width: 0; }
.idi-cat-main b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
.idi-cat-main span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.idi-cat-main .idi-cat-words { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--text-dim); opacity: 0.8; white-space: normal; }
.idi-cat.clear { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); }
.idi-cat.clear .idi-mode-arrow { color: var(--accent-2); opacity: 1; font-weight: 800; }

/* 熟語の4択。灰色の箱をやめ、押せる札にする */
.idiom-viewer .quiz-choices {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: auto;
  counter-reset: idi-choice;
}
.idiom-viewer .quiz-choice {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 16px 52px; width: 100%; text-align: left;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.07);
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
}
.idiom-viewer .quiz-choice::before {
  counter-increment: idi-choice; content: counter(idi-choice, upper-alpha);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); font-size: 12px; font-weight: 800;
}
.idiom-viewer .quiz-choice:active { transform: translateY(2px); border-color: var(--accent); }
.idiom-viewer .quiz-choice.ok {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent); color: var(--accent-2);
}
.idiom-viewer .quiz-choice.ok::before { background: var(--accent); color: #fff; }
.idiom-viewer .quiz-choice.ng {
  background: color-mix(in srgb, #e5484d 10%, var(--surface)); border-color: #e5484d; color: #e5484d;
}
.idiom-viewer .quiz-choice.ng::before { background: #e5484d; color: #fff; }

/* 答えたあとの知らせ。何も起きずに次へ行くと、合っていたのか分からない */
.idi-result {
  display: grid; gap: 6px; justify-items: center;
  margin-top: 12px; padding: 14px; border-radius: 12px;
  font-size: 15px; font-weight: 800; line-height: 1.5; text-align: center;
}
.idi-result span { display: inline-flex; align-items: center; gap: 6px; }
.idi-result em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.6; }
.idi-result small { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.idi-result svg { width: 18px; height: 18px; }
.idi-result.ok { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-2); }
.idi-result.ng { background: color-mix(in srgb, #e5484d 12%, var(--surface)); color: #e5484d; }
.idi-result b { font-weight: 800; }

/* Top10の1位（熟語）。丸の中はアイコン */
#road-idioms .road-dot { background: var(--accent); }
#road-idioms .road-dot::after { display: none; }
#road-idioms .road-dot svg { color: #fff; }

/* 探す欄と、探した先での「覚える／答える」 */
.idi-search { position: relative; }
.idi-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--text-dim); pointer-events: none;
}
.idi-search-ico svg { width: 18px; height: 18px; }
.idi-search .search-input { padding-left: 40px; }
.idi-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.idi-pick-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px; color: var(--text);
}
.idi-pick-btn.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.idi-pick-btn svg { width: 17px; height: 17px; }
.idi-pick-btn:active { transform: translateY(2px); }

/* 探した中から複数を選ぶ。行の右の「＋」で選び、下の帯からまとめて始める */
.idiom-item > summary { position: relative; padding-right: 44px; }
.idi-add {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--accent);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px;
}
.idi-add.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.idi-add svg { width: 16px; height: 16px; }
.idi-pickbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; gap: 10px; padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(16, 24, 40, 0.12);
}
.idi-pickbar-n { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.idi-pickbar-n b { font-size: 16px; color: var(--text); }
.idi-pickbar-clear {
  margin-left: auto; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
  background: var(--surface-2); border: 0; border-radius: 999px; color: var(--text-dim);
}
.idi-pickbar-go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.idiom-viewer .epoch-stage { padding-bottom: 120px; }

/* 全体で何個・何セットあるか。見通しを最初に見せる */
.idi-total {
  padding: 16px; margin-bottom: 14px; border-radius: 16px;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff;
}
.idi-total-main { display: flex; align-items: baseline; gap: 6px; }
.idi-total-main b { font-size: 34px; font-weight: 800; line-height: 1; }
.idi-total-main span { font-size: 13px; font-weight: 700; opacity: 0.9; }
.idi-total-sub { margin-top: 6px; font-size: 13px; font-weight: 700; }
.idi-total-sub b { font-size: 16px; }
.idi-total-bar { height: 5px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.idi-total-bar i { display: block; height: 100%; border-radius: 999px; background: #fff; }
.idi-total-meta { margin-top: 6px; font-size: 11px; opacity: 0.9; }
/* これからやる10個の案内 */
.idi-preview { flex: 1; overflow-y: auto; }
/* スタートの下に置く、答えるへの切り替え。主役はスタートなので、控えめな見た目にする */
.idi-preview-switch {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  background: none; border: 0; color: var(--accent-2);
}
.idi-preview-switch svg { width: 16px; height: 16px; }
.idi-preview-list { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.idi-preview-list li { font-size: 14px; line-height: 1.5; }
.idi-preview-list b { font-weight: 800; }
.idi-preview-list span { margin-left: 8px; font-size: 12px; color: var(--text-dim); }

/* もう知っている熟語を外す */
.idi-preview-note {
  margin: 8px 0 0; font-size: 11.5px; color: var(--accent-2); font-weight: 700; user-select: none;
}
.idi-preview-note.right { text-align: right; }
.idi-preview-list li { display: flex; align-items: center; gap: 10px; }
.idi-preview-list { user-select: none; }
.idi-pv-main { flex: 1; min-width: 0; }
/* 「もう知ってる」は、記号よりことばのほうが伝わる */
.idi-known {
  flex: none; padding: 6px 12px; cursor: pointer; user-select: none;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--text-dim);
  background: var(--surface-2); border: 0; border-radius: 999px;
}
.idi-known:active { background: var(--accent); color: #fff; }
.idi-total-btn {
  width: 100%; margin-top: 10px; padding: 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, 0.2); border: 0; border-radius: 999px; color: #fff;
}
.idi-known-list { flex: 1; overflow-y: auto; display: grid; gap: 8px; margin-top: 12px; }
.idi-known-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 12px; font-size: 14px;
}
.idi-known-row > span { flex: 1; min-width: 0; }
.idi-known-row b { font-weight: 800; }
.idi-known-row span span { display: block; font-size: 11.5px; color: var(--text-dim); }
.idi-known-back {
  flex: none; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--accent);
}

/* 下で選んだものが、上に載る。番号と矢印で結びつける */
/* 一番上の1枚。「はじめる」ボタンは置かず、この枠ごと押せる */
.guide-hero {
  display: grid; justify-items: start; gap: 8px; text-align: left; margin-bottom: 16px;
  width: 100%; padding: 20px 18px; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  border: 0; border-radius: 18px;
}
.guide-hero:active { transform: translateY(1px); }
.guide-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; opacity: 0.9;
}
.guide-hero-eyebrow svg { width: 14px; height: 14px; }
.guide-hero-name { font-size: 24px; font-weight: 800; line-height: 1.35; }
.guide-hero-sub { font-size: 12.5px; line-height: 1.6; opacity: 0.92; }
.guide-hero-go {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 800;
  background: #fff; color: var(--accent);
}
.guide-hero-go svg { width: 16px; height: 16px; }
.guide-now { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: 14px; }
.guide-now .guide-name { margin: 0; }
.guide-now .guide-bar { width: 100%; }
.guide-now .guide-meta { margin: 0; }
.guide-now.swap { animation: guide-swap 0.42s ease-out; }
@keyframes guide-swap {
  0% { transform: translateY(26px) scale(0.94); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.01); opacity: 1; }
  100% { transform: none; }
}
/* 選ばれている札から、上へ向かう印 */
.road-item.sel { position: relative; }
.road-item.sel::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--accent);
}

/* 出す順番の切り替え */
.idi-order { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-dim); }
.idi-order-btn {
  padding: 5px 12px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
}
.idi-order-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.idi-preview-from { margin: 0 0 6px; font-size: 11.5px; color: var(--text-dim); }

/* キーボードが出ているあいだは、画面をその上ぶんに縮め、中身を上から詰める */
.idiom-viewer.kb {
  padding-top: 8px; padding-bottom: calc(var(--kbh, 0px) + 8px); overflow: hidden;
}
.idiom-viewer.kb .epoch-stage { justify-content: flex-start; overflow-y: auto; flex: none; }
.idiom-viewer.kb .idi-q { flex: none; align-content: start; }
.idiom-viewer.kb .quiz-head { margin-bottom: 4px; }

.idiom-viewer.kb .idi-ask { margin: 4px 0 8px; padding: 8px 12px; font-size: 12.5px; }
.idiom-viewer.kb .idi-mean { font-size: 18px; margin: 0; }
.idiom-viewer.kb .drill-initials { font-size: 22px; margin: 8px 0; }
.idiom-viewer.kb .epoch-stage { gap: 6px; padding-bottom: 8px; }
.idiom-viewer.kb .epoch-bar { display: none; }
.idiom-viewer.kb .voice-type { margin-top: 6px; }
.idiom-viewer.kb .epoch-skip { display: none; }

/* 熟語の「答える」。10 Epochs と同じカードで出す */
.idiom-viewer .flipcard { margin-top: 8px; }
.idiom-viewer .epoch-ja { font-size: 21px; font-weight: 800; line-height: 1.7; margin-top: 10px; }
.idiom-viewer .epoch-answer { margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1.5; }
.idiom-viewer .idi-small .dim { font-weight: 400; }

/* 聞き流しの設定 */
.lst-group { margin-top: 14px; }
.lst-group:first-of-type { margin-top: 4px; }
.lst-head { font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.lst-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lst-btn {
  padding: 9px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; color: var(--text);
}
.lst-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Top10の札。名前が変な所で折れないよう幅を足し、選んだものは中も薄く色を敷く */
.road-item { width: 152px; }
.road-name { text-wrap: balance; line-break: strict; }
.road-item.sel {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ヒントの中の操作。聞く／1語ひらく を並べる */
.idi-hint-acts { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.idi-hint-acts .drill-play { margin: 0; padding: 7px 14px; font-size: 12px; }
.idi-hint-acts .epoch-skip { margin: 0; }

/* 頭文字の「1語ひらく」は、お手本の隣に置く（答えを見るの隣だと押しやすすぎる） */
.drill-helpers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.drill-helpers .drill-hint-btn { margin: 0; }

/* 言うほど埋まる骨組み */
.idi-skeleton {
  margin: 16px 0 8px; font-size: 21px; font-weight: 700; line-height: 2.1;
  color: var(--text-dim); word-break: keep-all;
}
/* まだ言っていない語は薄く、言えた語は濃い太字。熟語は色で目立たせる */
.sk-w { color: var(--text); }
.sk-w.faint { color: color-mix(in srgb, var(--text) 26%, transparent); font-weight: 600; }
.sk-w.open { color: var(--text-dim); }
.sk-w.said { color: var(--text); font-weight: 800; }
.sk-w.key.said, .sk-w.key.open {
  color: var(--accent-2); font-weight: 800;
  box-shadow: inset 0 -0.42em color-mix(in srgb, var(--accent) 22%, transparent);
}
.sk-b { color: var(--text-dim); letter-spacing: 1px; font-weight: 700; }
.sk-typed { color: var(--text); font-weight: 800; }
.idi-front-acts { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.idi-front-acts .drill-hint-btn { margin: 0; }

/* 答えるカードの表：熟語の札 → 日本語 → 書き込む枠 → 声 */
.idi-chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-radius: 999px;
  font-size: 14px; font-weight: 800; color: var(--accent-2);
}
.idi-chip span { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.idi-jp {
  margin: 14px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: 20px; font-weight: 800; line-height: 1.7;
}
.idiom-viewer .epoch-say { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.idiom-viewer .epoch-say em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
/* 骨組みは「書き込む枠」の中に置く。押すと入力欄に入る */
.idi-field {
  position: relative; margin-top: 12px; padding: 14px 64px 14px 12px; min-height: 74px; cursor: text;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px;
}
.idi-field .idi-skeleton { margin: 0; }
/* この欄は押すとキーボードが開く。押せることが分からなかったので、印を置く */
.idi-type-mark {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
  background: var(--surface-2); color: var(--text-dim); pointer-events: none;
}
.idi-type-mark svg { width: 14px; height: 14px; }
.idi-field.typing { padding-right: 12px; }
.idi-field.typing .idi-type-mark { display: none; }
.idi-type {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
/* マイクは丸だけ。四角い台は置かない */
.idi-mic {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px auto 0;
  padding: 0; cursor: pointer; font: inherit; background: none; border: 0; color: var(--accent-2);
}
/* 押せることが分かるように、待っているあいだもゆっくり波紋を出す。
   聞き取り中は色を変えて速くする。押したか・止まったかに気づけないのがいちばん困る */
.idi-mic::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 64px;
  margin-left: -32px; border-radius: 999px; background: var(--accent);
  opacity: 0.3; pointer-events: none;
  animation: mic-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes mic-ping {
  0% { transform: scale(0.78); opacity: 0.3; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.idi-mic svg {
  position: relative; z-index: 1;
  width: 34px; height: 34px; padding: 15px; box-sizing: content-box;
  background: var(--accent); color: #fff; border-radius: 999px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.idi-mic span { font-size: 11.5px; font-weight: 700; }
.idi-mic:active svg { transform: translateY(2px); }
.idi-mic.rec::before { background: #e5484d; opacity: 0.34; animation-duration: 1.1s; }
.idi-mic.rec svg {
  background: linear-gradient(160deg, #f0616a, #d6304a); transform: scale(1.09);
  box-shadow: 0 10px 28px rgba(214, 48, 74, 0.45);
}
.idi-mic.rec span { color: #d6304a; animation: voice-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .idi-mic::before { animation: none; opacity: 0; }
}
.idi-note:not([hidden]) { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
/* 熟語の空所だけ、太い線で目立たせる */
.sk-b.key { color: var(--accent); font-weight: 800; }

/* 日本語のうち、熟語にあたるところ */
.ja-key { text-decoration: none; color: var(--accent-2); box-shadow: inset 0 -0.36em color-mix(in srgb, var(--accent) 26%, transparent); }
/* 見出しの熟語も同じ色で結びつける */
.idi-chip { border-bottom: 3px solid var(--accent); border-radius: 999px 999px 4px 4px; }

/* 全部言えたら、枠で知らせる（勝手にはめくらない） */
.idi-field.done { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
/* 別の例文にも日本語を添える */
.epoch-alt-ja { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); }

/* 話している間だけ出る画面。いま録っていることを、大きく伝える */
.listen-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; align-content: center; justify-items: center;
  gap: 18px; padding: 32px; text-align: center;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(3px);
}
.lo-mic {
  width: 96px; height: 96px; display: grid; place-items: center; border-radius: 999px;
  background: #d64545; color: #fff; animation: voice-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(214, 69, 69, 0.35);
}
.lo-mic svg { width: 44px; height: 44px; }
.lo-state { font-size: 14px; font-weight: 800; color: var(--text); }
/* 録音が始まる前のカウントダウン。数字だけ大きく、心構えができるようにする */
.lo-state.lo-count {
  font-size: 56px; font-weight: 900; color: var(--accent-2);
  animation: lo-count-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lo-count-pop {
  0% { transform: scale(1.6); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
}
.lo-text {
  min-height: 2.4em; max-width: 520px; font-size: 22px; font-weight: 800; line-height: 1.5; color: var(--accent-2);
}
.lo-stop {
  padding: 12px 28px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; color: var(--text);
}

/* 全部言えたら、次にすることを1つだけ光らせる */
.drill-hint-btn.go {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* 1画面に収める。iPhoneの縦幅（safe area込み）で切れないように詰める */
.idiom-viewer .flipcard-face { padding: 16px 16px 12px; }
.idi-chip { padding: 4px 11px; font-size: 13px; }
.idi-jp { margin: 10px 0 6px; padding: 9px 11px; font-size: 18px; line-height: 1.6; }
.idiom-viewer .epoch-say { font-size: 12px; }
.idi-field { margin-top: 8px; padding: 12px 62px 12px 10px; min-height: 62px; }
.idi-skeleton { font-size: 19px; line-height: 1.9; }
.idi-type { margin-top: 8px; padding: 9px 11px; font-size: 13.5px; }
.idi-mic { margin: 10px auto 0; gap: 4px; }
.idi-mic svg { width: 28px; height: 28px; padding: 13px; }
.idi-front-acts { margin-top: 10px; }
.idiom-viewer .epoch-answer { margin-top: 8px; font-size: 20px; }
.idiom-viewer .epoch-alts { margin-top: 10px; }
.idiom-viewer .epoch-alt { padding: 7px 10px; font-size: 13px; }
.idiom-viewer .epoch-judge { margin-top: 12px; }
.idiom-viewer .drill-plays { margin-top: 10px; }
@media (max-height: 780px) {
  .idi-jp { font-size: 17px; }
  .idi-skeleton { font-size: 17.5px; line-height: 1.8; }
  .idiom-viewer .epoch-say { display: none; }
  .idi-mic svg { width: 24px; height: 24px; padding: 11px; }
}

/* 日本語キーボードのままの人に、1回だけ出す案内 */
.idi-kb-tip {
  margin: 6px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--accent-2); font-weight: 700;
}

/* iPhoneは、文字が16pxより小さい入力欄に触れると画面を勝手に拡大する。
   拡大はそのまま残り、読み込み直してもホームまで大きいままになる。
   小さい画面では入力欄だけ16pxを確保して、拡大自体を起こさない */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* キーボードが出ているあいだは、日本語と骨組みと入力欄だけを残す。
   ほかを畳めば、画面が持ち上がっても問題文が隠れない */
.idiom-viewer.kb .idi-mic,
.idiom-viewer.kb .idi-front-acts,
.idiom-viewer.kb .idi-kb-tip,
.idiom-viewer.kb .epoch-say,
.idiom-viewer.kb .flipcard-mark { display: none; }
.idiom-viewer.kb .flipcard-face { padding: 10px 12px; }
.idiom-viewer.kb .idi-chip { font-size: 12px; padding: 3px 10px; }
.idiom-viewer.kb .idi-jp { margin: 6px 0 4px; padding: 7px 10px; font-size: 16px; line-height: 1.5; }
.idiom-viewer.kb .idi-field { margin-top: 6px; padding: 10px; min-height: 50px; }
.idiom-viewer.kb .idi-skeleton { font-size: 16.5px; line-height: 1.7; }
.idiom-viewer.kb .idi-type { margin-top: 6px; }

/* 打っているあいだの形。iPhoneの縦は、自前のキーボードを出すと
   カードの上半分が画面の外へ出る。日本語は空欄の中の小さい行に移し、
   それ以外（言い方の案内・ヒント・マイク・めくる案内）は畳む */
.idi-field-ja { display: none; }
.idi-field.typing .idi-field-ja {
  display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700;
  line-height: 1.5; color: var(--text-dim);
}
.kb-typing .epoch-ja,
.kb-typing .drill-ja,
.kb-typing .drill-ask,
.kb-typing .drill-cue,
.kb-typing .epoch-cue-ja,
.kb-typing .epoch-cat,
.kb-typing .epoch-say,
.kb-typing .epoch-hintbox,
.kb-typing .drill-hint,
.kb-typing .idi-mic,
.kb-typing .idi-chip,
.kb-typing .idi-jp,
.kb-typing .flipcard-mark { display: none !important; }
/* 打っているのに「押して話すと…」が残っていた。中身が案内文だけのときは畳む
   （打った文字が入ったら、その箱はそのまま結果表示に使う） */
.kb-typing .epoch-heard:has(.voice-empty) { display: none !important; }
.kb-typing .idi-field { margin-top: 0; }
.kb-typing .drill-actions { margin-top: 8px; }

/* ミニゲームの答え欄も、熟語カードと同じ形にそろえる */
.voice-box.plain { display: block; background: none; border: 0; padding: 0; margin-top: 14px; }
.voice-box.plain .idi-type { margin: 0; }
.voice-box.plain .idi-mic { margin-top: 12px; }

/* 下にも小さな出口。右上の✕まで指を伸ばさずに済む */
.viewer-quit {
  display: block; margin: 6px auto 0; padding: 10px 18px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  background: none; border: 0;
}
.viewer-quit:active { color: var(--text); }

/* 録音中に出す、出だしのヒント */
.lo-hint {
  font-size: 17px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.01em;
}

/* 録音中も問題を見せる。見ながら考えて話せるように */
.lo-hint { display: grid; gap: 8px; max-width: 560px; }
.lo-ja { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.6; }
.lo-en { font-size: 17px; font-weight: 700; color: var(--text-dim); line-height: 1.9; }
.lo-en .sk-w.said { color: var(--text); }
.lo-en .sk-w.faint { color: color-mix(in srgb, var(--text) 30%, transparent); }

/* 録音中は英文をぜんぶ見せる（読み上げるため） */
.lo-en.full { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.6; }

/* 押すと沈む立体ボタン。ガイドの「はじめる」に厚みを出す */
.guide-box .btn-primary {
  border-bottom: 6px solid color-mix(in srgb, var(--accent-2) 70%, #000 18%);
  transition: transform 0.06s ease, border-width 0.06s ease, box-shadow 0.12s ease;
}
.guide-box .btn-primary:active {
  transform: translateY(6px);
  border-bottom-width: 0;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* 達成バナーの下辺は1行にまとめる（番号＋最新の1文＋聞き流し） */
.card-foot { flex-direction: row; align-items: stretch; }
.card-foot .today-marquee { flex: 1; min-width: 0; }
.card-foot .foot-btns { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); }

/* きろくの行。星と、日付・時間の副次情報を整える */
.mine-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 13px; font-weight: 800;
  color: var(--text); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-bottom: 1px solid var(--border); }
.mine-head svg { width: 17px; height: 17px; color: #f0b429; }
.mastered-no {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-2); font-size: 11px;
}
.mastered-en { font-size: 14.5px; font-weight: 700; }
.mastered-when { letter-spacing: 0.02em; }

/* 覚えるカードは、押すたびに1段ずつ増える */
.idi-card .idi-body { align-content: center; gap: 14px; }
.idi-more { font-size: 11px; color: var(--text-dim); }
.idi-card .idi-mean.sub { font-size: 17px; }
.idi-card .idi-mean { font-size: 21px; }

/* ---- 覚えたあとに届く「使う場面」 ---- */
.idi-toast {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.14); animation: toast-in 0.32s ease-out;
}
@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } }
.idi-toast-ico {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-2);
}
.idi-toast-ico svg { width: 18px; height: 18px; }
.idi-toast-main { flex: 1; min-width: 0; display: grid; }
.idi-toast-main b { font-size: 13px; }
.idi-toast-main span { font-size: 11px; color: var(--text-dim); }
.idi-toast-no {
  flex: none; padding: 8px 12px; font: inherit; font-size: 12px; cursor: pointer;
  background: none; border: 0; color: var(--text-dim);
}
.idi-toast-go {
  flex: none; padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 999px; color: #fff;
}

/* 打っている語。骨組みの中で、そこだけ色が付く */
.sk-b.now { color: var(--accent-2); }
.idi-field.miss { animation: chat-shake 0.22s; border-color: #e5484d; }

/* 全部書けたら、次にすることを1つだけ光らせる */
.drill-actions .btn-primary.ready {
  animation: ready-pulse 1.4s ease-in-out infinite;
}
@keyframes ready-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 14px color-mix(in srgb, var(--accent) 34%, transparent); }
}

/* ---- 届いたメッセージ（端末の通知のように見せる） ---- */
/* 端末の通知のように上から降りてくるが、置き場所はカードの下の空き。
   ここなら本文の上に被らないし、画面のてっぺんまで手を伸ばさなくていい */
#idi-notify { margin-top: 10px; }
.push-card {
  padding: 12px 14px; cursor: default; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16);
  /* 「ふわふわん」と弾んで届く。ただ現れるより、通知が来たと気づきやすい */
  animation: push-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}
@keyframes push-in {
  0% { transform: translateY(-26px) scale(0.82); opacity: 0; }
  50% { transform: translateY(6px) scale(1.06); opacity: 1; }
  72% { transform: translateY(-3px) scale(0.98); }
  88% { transform: translateY(1px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
.push-head { display: flex; align-items: center; gap: 8px; }
.push-face {
  width: 24px; height: 24px; font-size: 11px;
  animation: push-face-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s 2;
}
@keyframes push-face-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.22) rotate(-6deg); }
  65% { transform: scale(0.94) rotate(4deg); }
}
.push-face.sm { width: 20px; height: 20px; font-size: 10px; }
.push-name { font-size: 12.5px; font-weight: 800; }
.push-time { margin-left: auto; font-size: 10.5px; color: var(--text-dim); }
.push-body { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.55; }
.push-acts { display: flex; gap: 8px; margin-top: 10px; }
.push-later {
  flex: none; padding: 7px 12px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: none; border: 0; color: var(--text-dim);
}
.push-reply {
  flex: 1; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 0; border-radius: 999px;
  color: var(--accent-2); text-align: center;
}
/* 触らずにいると、ここまで小さくたたまれる。消えないので、いつでも押し直せる */
.push-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); border: 0; border-radius: 999px;
  animation: push-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

/* アバター。丸に頭文字。テンプラのキャラではなく「相手」だと分かる見た目にする */
.chat-av, .push-face {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px;
  background: var(--tk-btn); color: var(--tk-text);
  font-weight: 800; font-size: 15px;
}
.chat-av.sm { width: 26px; height: 26px; font-size: 11px; }
.push-face { width: 30px; height: 30px; font-size: 12px; }

/* ---- トークの配色 ----
   アプリのテーマ（設定で変わる）とは切り離して、ここだけで完結させる。
   黒地／温かいグレーの吹き出し／差し色は控えめな青、の3層だけで組む */
:root {
  --tk-bg: #0b0b0c;          /* いちばん奥 */
  --tk-panel: #121211;       /* ヘッダーと下の操作面 */
  --tk-card: #17171a;        /* ポイント・見くらべの面 */
  --tk-them: #b4c2ca;        /* 相手の吹き出し */
  --tk-them-text: #0c1418;   /* 明るい面なので、文字は濃く */
  --tk-mine: #1f74c2;        /* 自分の吹き出し（濃いめの青。白文字が読める明度に） */
  --tk-mine-text: #ffffff;
  --tk-btn: #1d4152;         /* ボタン・アバター */
  --tk-text: #f0ede6;
  --tk-dim: #a19e92;
  --tk-line: rgba(255, 255, 255, 0.13);
  --tk-blue: #8ab4f8;        /* お題・強調などの差し色 */
  --tk-field: #08080a;       /* 打ち込み欄 */
}

/* ---- 熟語を使う練習（チャット） ---- */
/* 本物のチャットアプリのように、地の色を暗くしてカードの外まで沈める */
.idiom-viewer .epoch-stage:has(.chat-app) { padding: 0; gap: 0; }
.chat-app {
  position: absolute; inset: 0; width: 100%; max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--tk-bg); color: var(--tk-text);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  /* チャットは別の場面に切り替わる操作。パッと差し替わるより、
     下からシートが上がってくる方が「別画面に来た」と伝わる */
  animation: chat-sheet-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes chat-sheet-in { from { transform: translateY(4%); opacity: 0; } }
.chat-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 12px;
  border-bottom: 1px solid var(--tk-line); background: var(--tk-panel);
}
.chat-who { display: grid; position: relative; }
.chat-who b { font-size: 15px; font-weight: 800; color: var(--tk-text); }
.chat-who span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #3fb950; }
.chat-who span::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: #3fb950;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}
.chat-log {
  flex: 1; overflow-y: auto; display: grid; gap: 18px; align-content: start; padding: 16px;
  /* 一番上に張り付いたままスクロールすると、直前のメッセージが唐突に切れて見えるので、上端をふわっと隠す */
  mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
}
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.me { justify-content: flex-end; }
.chat-bubble-col { display: grid; gap: 3px; max-width: 78%; }
.chat-row.me .chat-bubble-col { align-items: flex-end; }
.chat-bubble {
  position: relative; padding: 8px 12px; border-radius: 18px 18px 18px 4px;
  background: var(--tk-them); font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--tk-them-text);
  animation: chat-pop 0.26s cubic-bezier(0.2, 1.2, 0.4, 1);
}
/* 吹き出しのしっぽ。四角い箱が「本物のメッセージ」に見えるかどうかは、ここで決まる */
.chat-bubble:not(.dots)::after {
  content: ""; position: absolute; bottom: 0; width: 10px; height: 10px;
  background: inherit; left: -4px; border-bottom-left-radius: 14px;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
@keyframes chat-pop { from { transform: translateY(10px) scale(0.94); opacity: 0; } }
.chat-bubble.mine {
  border-radius: 18px 18px 4px 18px;
  background: var(--tk-mine); color: var(--tk-mine-text);
}
/* 昔の .chat-row.me .chat-bubble（明るい画面用）のほうが強いので、トークの中だけ上書きする */
.chat-app .chat-row.me .chat-bubble,
.ten-thread .chat-row.me .chat-bubble {
  background: var(--tk-mine); color: var(--tk-mine-text); border: none;
}
.chat-app .chat-row.me .chat-bubble .chat-ja,
.ten-thread .chat-row.me .chat-bubble .chat-ja { color: rgba(6, 35, 47, 0.72); }
.chat-bubble.mine::after {
  left: auto; right: -4px;
  border-bottom-left-radius: 0; border-bottom-right-radius: 14px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.chat-bubble.dots { display: flex; gap: 4px; padding: 13px 16px; }
.chat-bubble.dots i {
  width: 6px; height: 6px; border-radius: 999px; background: #8b93a7;
  animation: chat-dot 1.1s ease-in-out infinite;
}
.chat-bubble.dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-bubble.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-time { font-size: 10px; color: var(--tk-dim); padding: 0 4px; }
.chat-ja { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 400; color: rgba(6, 35, 47, 0.72); }
.chat-bubble.mine .chat-ja { color: rgba(255, 255, 255, 0.82); }
.chat-stamp { font-size: 44px; line-height: 1; animation: chat-pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
/* お題は「自分がこれから言うこと」なので、自分の吹き出しとして右に置く */
.chat-task { font-size: 13px; font-weight: 700; line-height: 1.5; }
.chat-task-key { display: inline-block; margin-right: 4px; color: #cde6ff; font-weight: 800; }
.chat-panel {
  flex: none; max-height: 52vh; overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 14px calc(env(safe-area-inset-bottom) + 10px); background: var(--tk-panel);
}
.chat-log { min-height: 34vh; }
.chat-panel-head { font-size: 11.5px; font-weight: 700; color: var(--tk-dim); margin-bottom: 6px; }
.talk-run .chat-panel-head { text-align: right; }
.chat-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 13px 14px;
  text-align: left; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700;
  background: #16323f; border: 1px solid var(--tk-line); border-radius: 14px; color: var(--tk-text);
  animation: chat-pop 0.28s ease both; animation-delay: var(--pop-delay, 0ms);
}
.chat-choice:active { transform: translateY(2px); }
.chat-choice-no {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #c4cadb; font-size: 11px; font-weight: 800;
}
.chat-choice.ok { border-color: var(--tk-blue); background: rgba(138, 180, 248, 0.14); }
.chat-choice.ok .chat-choice-no { background: var(--tk-blue); color: #14181f; }
.chat-choice.ng {
  background: rgba(229, 72, 77, 0.14); border-color: #e5484d; color: #ff9a9d; animation: chat-shake 0.3s;
}
@keyframes chat-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.chat-note { margin: -4px 2px 0; font-size: 11.5px; line-height: 1.7; color: #ff9a9d; }
.chat-tip {
  padding: 14px; border-radius: 14px; font-size: 13px; line-height: 1.8; margin-bottom: 10px;
  background: rgba(138, 180, 248, 0.10); color: var(--tk-text);
}
.chat-tip b { display: block; margin-bottom: 4px; font-size: 11.5px; color: var(--tk-blue); }
/* 履歴では畳んでおく。タップで開く（過去のぶんまで開きっぱなしだと長くなりすぎる） */
.chat-tip summary { cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--tk-blue); }
.chat-tip[open] summary { margin-bottom: 6px; }
.chat-panel .btn-primary {
  background: var(--tk-btn); color: var(--tk-text); border-bottom: 3px solid #12303d;
}

/* Tenとの継続チャット。投稿タブに埋め込む版。フルスクリーンの.chat-appと違い、
   ページの流れに乗る1枚のカードにする */
.ten-thread.card { padding: 0; border: 0; overflow: hidden; background: var(--tk-bg); }
.ten-thread .chat-head { border-radius: var(--radius) var(--radius) 0 0; padding-top: 14px; }
.ten-thread .chat-log { max-height: 56vh; min-height: 0; }
/* キーボードが出ている間は、今の相手のセリフとお題だけを残す。
   過去のやりとりを畳むぶん、この2つは打ちながらずっと見えている */
.ten-thread:has(.kb) .chat-log { max-height: none; gap: 10px; overflow: visible; }
.ten-thread:has(.kb) .chat-log > *:not(:nth-last-child(-n + 2)) { display: none; }
/* 背の低い画面では、トーク中は外側の見出しを畳んで、カードに高さを回す */
@media (max-height: 900px) {
  #plaza-detail:has(.talk-run) .plaza-back,
  #plaza-detail:has(.talk-run) .plaza-detail-title { display: none; }
}
@media (max-height: 760px) {
  .talk-run .chat-head { padding: 8px 14px; }
  .talk-run .chat-head .chat-av { width: 34px; height: 34px; font-size: 17px; }
  .talk-run .chat-panel { padding-top: 4px; }
  .talk-run .kb { margin-top: 5px; gap: 3px; }
  .talk-run .kb-key { padding: clamp(4px, 1.3vw, 7px) 0; }
  .talk-hint { padding: 3px 10px; font-size: 12px; }
  .talk-run .talk-field { margin: 2px 0 5px auto; }
}
.ten-thread .chat-panel {
  border-radius: 0 0 var(--radius) var(--radius); max-height: none; padding-bottom: 14px;
}

/* ---- トーク一覧（チャットアプリのトークリスト）---- */
.talk-list { display: grid; gap: 2px; }
.talk-room {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px;
  cursor: pointer; font: inherit; text-align: left; color: var(--text);
  background: var(--surface); border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.talk-room:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.talk-room:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.talk-room:active { background: var(--surface-2); }
.talk-av {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-radius: 999px;
}
.talk-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.talk-name { font-weight: 700; font-size: 15px; }
.talk-sub {
  font-size: 12.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 右端は本物のトーク一覧と同じで、時刻と未読の数 */
.talk-side { flex: none; display: grid; justify-items: end; gap: 6px; min-width: 52px; }
.talk-time { font-size: 11px; color: var(--text-dim); }
.talk-badge {
  min-width: 20px; padding: 2px 6px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 800; color: #fff; background: #e5484d;
}
.talk-done { font-size: 13px; font-weight: 800; color: var(--accent); }

/* トークの中身。暗いチャット面に骨組みとキーボードを置くので、色だけ暗い側に振る */
.talk-back {
  flex: none; margin-right: -4px; padding: 0 6px; cursor: pointer;
  font: inherit; font-size: 26px; line-height: 1; color: #8b93a7; background: none; border: 0;
}
.talk-run .chat-panel {
  --surface: #17303a; --surface-2: #1f4050; --border: var(--tk-line);
  --text: var(--tk-text); --text-dim: var(--tk-dim); --accent: var(--tk-blue); --accent-2: var(--tk-blue);
}
/* 打ち込み欄も「自分の吹き出し」として右に置く */
.talk-field {
  margin: 4px 0 8px auto; padding: 9px 13px; min-height: 0; max-width: 88%;
  background: var(--tk-field); border: 1px solid var(--tk-mine);
  border-radius: 18px 18px 4px 18px;
}
.talk-field.miss { animation: chat-shake 0.22s; border-color: #e5484d; }
.talk-field .idi-skeleton { margin: 0; font-size: 16px; line-height: 1.6; }
.talk-hint {
  padding: 7px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--tk-text); background: #16323f; border: 1px solid var(--tk-line); border-radius: 999px;
}
/* ---- ルール編 ---- */
.rule-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 8px; }
.rule-head b { font-size: 15px; }
.rule-head span { font-size: 12px; color: var(--text-dim); }
.rule-list { margin-bottom: 18px; }
.rule-list .talk-sub { color: var(--text); font-weight: 600; font-size: 13px; }
/* この回のポイント。開いた瞬間に、何を身につける回かを分からせる */
.rule-point {
  margin: 4px 0 10px; padding: 14px 16px; border-radius: 14px;
  background: var(--tk-card); border: 0; border-left: 3px solid var(--tk-blue);
}
.rule-point span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--tk-blue); }
.rule-point b { font-size: 19px; line-height: 1.6; color: #fff; }
/* 本文の中の肝。蛍光ペンで引いたように見せる */
.rule-key {
  font-style: normal; font-weight: 800; color: #fff;
  background: rgba(138, 180, 248, 0.22); padding: 2px 5px; border-radius: 5px;
  /* 折り返した行にも、それぞれ囲みが付くようにする */
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* 引いた線どうしがぶつからないよう、レッスンの吹き出しだけ行間を広げる */
/* レッスンは説明が主役なので、吹き出しを画面いっぱいに使う */
.talk-run .chat-bubble-col { max-width: 94%; }
/* 自分の発話は幅を詰める。画面いっぱいだと「右にある」ことが伝わらない */
.talk-run .chat-row.me .chat-bubble-col { max-width: 78%; }
.talk-run .chat-log { padding: 14px 12px 8px; }
/* 下のタブバーに隠れないよう、送る位置に余白を見込む */
.talk-run .chat-panel { scroll-margin-bottom: 104px; }
.talk-run .chat-bubble {
  border: 0;
  /* 画面が狭いときの日本語の折り返し。句読点や小さい仮名で行を始めない、
     1文字だけ最終行に残さない、切るなら文節の切れ目で */
  line-break: strict; text-wrap: pretty; overflow-wrap: break-word;
}
/* レッスンは説明が主役なので、そこだけ大きめ・行間広め */
.rule-run .chat-bubble { font-size: 15px; line-height: 1.85; }
.rule-ng-ex { color: #ff9a9d; font-weight: 700; }
.chat-note .rule-key { color: #fff; background: rgba(229, 72, 77, 0.3); }

/* 見くらべ。左右に並べて、違いを一目で分からせる */
.rule-pair {
  display: grid; gap: 8px; margin: 2px 0 2px 36px; padding: 12px 14px;
  background: var(--tk-card); border-left: 3px solid var(--tk-blue); border-radius: 12px;
}
.rule-pair div { display: grid; gap: 2px; }
.rule-pair b { font-size: 14.5px; color: #eef1f8; }
.rule-pair span { font-size: 12px; color: #8b93a7; }
/* ならべかえ */
.rule-line {
  min-height: 44px; margin: 8px 0 10px; padding: 11px 12px; font-size: 16px; font-weight: 700;
  color: var(--tk-text); background: var(--tk-field); border: 1px solid var(--tk-line); border-radius: 12px;
}
.rule-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rule-chip {
  padding: 9px 13px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--tk-text); background: #16323f; border: 1px solid var(--tk-line); border-radius: 10px;
}
.rule-chip.used { opacity: 0.3; }
.rule-chip.ng { animation: chat-shake 0.22s; border-color: #e5484d; }

.talk-hint-text {
  margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  letter-spacing: 1px; color: #9fd3ff;
}

/* ---- 画面の中のキーボード ----
   端末のIMEを通さないので、日本語に切り替わる事故が起きない。
   1行10キーが必ず横1列に収まるよう、幅は画面に合わせて縮める */
.kb {
  width: 100%; margin-top: 14px; display: grid; gap: 6px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.kb-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(3px, 1.1vw, 6px); }
/* 2段目・3段目は少し内側に寄せる（本物のキーボードの並び） */
.kb-row:nth-child(2) { padding: 0 clamp(6px, 3vw, 22px); }
.kb-row:nth-child(3) { padding: 0 clamp(16px, 9vw, 60px); }
.kb-key {
  flex: 1 1 0; min-width: 0; max-width: 44px; padding: clamp(9px, 2.6vw, 13px) 0;
  cursor: pointer; font: inherit; font-size: clamp(13px, 4vw, 17px); font-weight: 700;
  text-transform: uppercase; text-align: center; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-bottom: 2px solid var(--border);
  border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: transform 0.06s ease, background 0.1s ease, border-color 0.1s ease;
}
/* 最下段。記号と空白と削除 */
.kb-row:last-child { padding: 0; gap: clamp(4px, 1.4vw, 8px); }
.kb-key.wide { flex: 1 1 0; max-width: 62px; }
.kb-key.space { flex: 3 1 0; max-width: 200px; font-size: clamp(11px, 3vw, 13px); text-transform: none; }
.kb-key.hit { transform: translateY(2px); background: var(--surface-2); }
/* 次に押す文字 */
.kb-key.hint {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 36%, transparent);
}
/* せまい画面では、カードの余白ぶんまで使い切る */
@media (max-width: 430px) {
  .kb { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }
}
/* 熟語カードの中では、少し小さめに置く */
#idi-kb .kb { margin-top: 10px; }
#idi-kb .kb-key { padding: clamp(8px, 2.2vw, 11px) 0; }
#idi-kb .kb-key.space { max-width: 150px; }
.idiom-viewer.kb #idi-kb { display: none; }
/* いま打っている語 */
.type-slot.here { border-color: var(--accent); }
.type-slot[readonly] { caret-color: transparent; }