/* =========================================================
   みちのおとも — Twilight Highway design system
   ダーク基調 / 夕焼け→藍のグラデ空 / 丸み(有機的) / 車内可読性重視
   ========================================================= */

:root {
  /* --- 空・地のトーン --- */
  --night-1: #14102b;   /* 天頂の藍 */
  --night-2: #271842;   /* 中間 */
  --dusk:    #5a2a52;   /* 地平の紫 */
  --horizon: #c25a45;   /* 地平の残照 */

  /* --- サーフェス --- */
  --surface:    rgba(38, 27, 66, 0.62);
  --surface-2:  rgba(52, 38, 86, 0.78);
  --surface-line: rgba(255, 246, 236, 0.10);
  --surface-line-2: rgba(255, 246, 236, 0.18);

  /* --- 文字 --- */
  --ink:    #fff6ec;   /* クリーム */
  --ink-soft: #d8cadf;
  --ink-mute: #9c8cb0;

  /* --- アクセント(基調) --- */
  --amber:  #ffae5c;
  --coral:  #ff6f59;
  --mint:   #5be3c0;

  /* --- モード別アクセント --- */
  --c-quiz:   #ffb155;   /* クイズ: 夕焼けアンバー */
  --c-nazo:   #5be3c0;   /* なぞなぞ: ミント */
  --c-talk:   #ff8fa3;   /* ガムトーク: コーラルピンク */
  --c-soup:   #7aa7ff;   /* ウミガメのスープ: 深い青 */
  --c-kokon:  #ffd166;   /* 古今東西: 黄 */
  --c-local:  #8fd694;   /* ご当地: 若葉 */
  --c-ten:    #b18cff;   /* テンパズル: 紫 */
  --c-kata:   #5ad1e6;   /* カタカナ禁止: シアン */
  --c-song:   #cf6bff;   /* かな音楽: マゼンタ */

  /* --- かたち --- */
  --r-lg: 32px;
  --r-md: 22px;
  --r-sm: 14px;
  --blob: 42% 58% 56% 44% / 50% 46% 54% 50%;

  --shadow: 0 18px 50px -18px rgba(0,0,0,.6), 0 6px 18px -8px rgba(0,0,0,.5);
  --glow: 0 0 0 1px var(--surface-line), 0 20px 60px -22px rgba(0,0,0,.7);

  --maxw: 880px;
  /* 見出しも本文も丸ゴシックで統一（極太のDelaは潰れるためロゴだけに限定） */
  --font-display: "Zen Maru Gothic", system-ui, sans-serif;
  --font-body: "Zen Maru Gothic", system-ui, sans-serif;
  --font-brand: "Dela Gothic One", "Zen Maru Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--night-1);
  font-size: clamp(17px, 1.4vw + 12px, 20px); /* 車内可読性: 大きめ */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------- 背景: 夜空 ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 112%, var(--horizon) 0%, rgba(194,90,69,0) 42%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 46%, var(--dusk) 84%, #6e2f4e 100%);
}
.sky__glow {
  position: absolute;
  left: 50%; bottom: -22vh;
  width: 130vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,174,92,.45), rgba(255,111,89,.18) 38%, transparent 70%);
  filter: blur(8px);
}
.sky__stars {
  position: absolute;
  inset: 0 0 40% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 34% 9%,  rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 58% 24%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 78% 13%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 88% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 22% 33%, rgba(255,255,255,.55), transparent);
  opacity: .9;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.55} 50%{opacity:1} }
/* 道路の遠近ライン */
.sky__road {
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vw; height: 34vh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, transparent, rgba(20,16,43,.0) 0%, rgba(20,16,43,.35) 100%);
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%);
          mask: linear-gradient(180deg, transparent, #000 60%);
}

/* ---------- グレイン ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- トップバー ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(16px, 4vw, 34px);
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--blob);
  background: linear-gradient(140deg, var(--amber), var(--coral));
  color: #2a1330;
  font-family: var(--font-brand);
  font-size: 22px;
  box-shadow: 0 8px 22px -8px var(--coral);
  animation: blobMorph 14s ease-in-out infinite;
}
@keyframes blobMorph {
  0%,100% { border-radius: 42% 58% 56% 44% / 50% 46% 54% 50%; }
  50%     { border-radius: 58% 42% 44% 56% / 44% 56% 44% 56%; }
}
.brand__name {
  font-family: var(--font-brand);
  font-size: 18px;
  letter-spacing: .02em;
}

.iconbtn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--surface-line-2);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
.iconbtn:hover { transform: translateY(-1px); }
.iconbtn .iconbtn__off { display: none; }
.iconbtn[aria-pressed="false"] { opacity: .65; }
.iconbtn[aria-pressed="false"] .iconbtn__on { display: none; }
.iconbtn[aria-pressed="false"] .iconbtn__off { display: inline; }

/* ---------- アプリ本体 ---------- */
.app {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 34px) 48px;
}

.footer {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 34px) 30px;
  color: var(--ink-mute);
  font-size: 13px;
  text-align: center;
}

/* =========================================================
   ホーム(ハブ)
   ========================================================= */
.hero {
  text-align: center;
  padding: 14px 0 30px;
  animation: rise .6s ease both;
}
.hero__kicker {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--amber);
  border: 1px solid var(--surface-line-2);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.08;
  margin: 0 0 14px;
  letter-spacing: .01em;
}
.hero__title .hl {
  background: linear-gradient(120deg, var(--amber), var(--coral) 60%, var(--mint));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero__lead {
  color: var(--ink-soft);
  max-width: 28em;
  margin: 14px auto 0;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.85;
}

.modegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.modecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 26px 24px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  cursor: pointer;
  overflow: hidden;
  color: var(--ink);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .2s ease;
  animation: rise .5s ease both;
}
.modecard:nth-child(1){animation-delay:.04s}
.modecard:nth-child(2){animation-delay:.09s}
.modecard:nth-child(3){animation-delay:.14s}
.modecard:nth-child(4){animation-delay:.19s}
.modecard:nth-child(5){animation-delay:.24s}
.modecard:nth-child(6){animation-delay:.29s}
.modecard:nth-child(7){animation-delay:.34s}
.modecard:nth-child(8){animation-delay:.39s}
.modecard:nth-child(9){animation-delay:.44s}
.modecard:nth-child(10){animation-delay:.49s}
.modecard:hover {
  transform: translateY(-5px);
  border-color: var(--surface-line-2);
  box-shadow: var(--shadow), 0 0 50px -18px var(--accent, var(--amber));
}
.modecard::before { /* 有機的な色だまり */
  content: "";
  position: absolute;
  right: -40px; top: -50px;
  width: 150px; height: 150px;
  border-radius: var(--blob);
  background: radial-gradient(closest-side, var(--accent, var(--amber)), transparent);
  opacity: .42;
  filter: blur(6px);
  transition: transform .4s ease, opacity .3s ease;
}
.modecard:hover::before { transform: scale(1.25) rotate(12deg); opacity: .6; }
.modecard__icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-size: 30px;
  border-radius: var(--blob);
  background: color-mix(in srgb, var(--accent, var(--amber)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--amber)) 45%, transparent);
  animation: blobMorph 16s ease-in-out infinite;
}
.modecard__title {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 6px 0 0;
}
.modecard__desc {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
.modecard__tag {
  margin-top: auto;
  font-size: 12px;
  color: var(--accent, var(--amber));
  font-weight: 700;
  letter-spacing: .04em;
}

/* =========================================================
   汎用パーツ
   ========================================================= */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.screen { animation: rise .4s ease both; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 6px;
}
.crumb:hover { color: var(--ink); }

.screen__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 22px;
}
.screen__head .badge {
  width: 50px; height: 50px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 26px;
  border-radius: var(--blob);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.screen__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  margin: 0;
}
.screen__sub { color: var(--ink-soft); font-size: 14px; margin: 2px 0 0; }

/* カード */
.card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: clamp(22px, 4vw, 36px);
}

/* 選択チップ群 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: transform .14s ease, background .2s, border-color .2s, color .2s;
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip.is-on {
  background: linear-gradient(130deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff 0%));
  color: #1c1230;
  border-color: transparent;
}
.field-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin: 22px 0 10px;
  text-transform: uppercase;
}
.field-label:first-child { margin-top: 0; }

/* ボタン */
.btn {
  font-family: var(--font-display);
  font-size: 17px;
  color: #1c1230;
  background: linear-gradient(130deg, var(--accent, var(--amber)), color-mix(in srgb, var(--accent, var(--amber)) 50%, #ffd9a0));
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px var(--accent, var(--amber));
  transition: transform .15s ease, box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--ghost {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--surface-line-2);
  box-shadow: none;
}
.btn--lg { font-size: 19px; padding: 18px 36px; }
.btn--block { width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* 進行ヘッダ(問題番号/スコア) */
.runbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.runbar .progress {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.runbar .progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 40%, #fff));
  border-radius: 999px;
  transition: width .4s ease;
}

/* 大きな出題テキスト */
.qtext {
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 32px);
  line-height: 1.5;
  margin: 6px 0 24px;
}
.meta-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tag {
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 答えの開閉 */
.reveal {
  margin-top: 8px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  overflow: hidden;
  animation: pop .3s ease both;
}
.reveal__label { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing:.08em; }
.reveal__answer { font-family: var(--font-display); font-size: clamp(20px,3.6vw,26px); margin: 6px 0; }
.reveal__note { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.reveal-inner { padding: 20px 22px; }

/* お題の特大表示 (ガムトーク/古今東西) */
.bigtopic {
  text-align: center;
  padding: 18px 6px 8px;
}
.bigtopic__theme {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 50px);
  line-height: 1.25;
  margin: 8px 0 18px;
  background: linear-gradient(120deg, var(--accent), #fff8ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bigtopic__rule {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  border-radius: var(--r-md);
  padding: 14px 22px;
  color: var(--ink-soft);
  font-size: 16px;
}
.bigtopic__rule b { color: var(--accent); }

/* ヒントのリスト(ウミガメ) */
.hintlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.hintlist li {
  background: var(--surface-2);
  border: 1px solid var(--surface-line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 15px;
  animation: pop .3s ease both;
}
.hintlist li .n { font-weight: 700; color: var(--accent); margin-right: 8px; }

/* 空状態 / 注記 */
.note {
  color: var(--ink-mute);
  font-size: 13.5px;
  margin-top: 14px;
}
.center { text-align: center; }

/* スコア表示 */
.result {
  text-align: center;
  padding: 12px 0;
}
.result__num {
  font-family: var(--font-display);
  font-size: clamp(56px, 16vw, 110px);
  line-height: 1;
  background: linear-gradient(120deg, var(--accent), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result__msg { font-size: 18px; color: var(--ink-soft); margin: 8px 0 20px; }

/* セレクトボックス(ご当地の県選択) */
.selectwrap { position: relative; display: inline-block; width: 100%; max-width: 360px; }
.selectwrap select {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  border-radius: 999px;
  padding: 14px 44px 14px 22px;
  appearance: none;
  cursor: pointer;
}
.selectwrap::after {
  content: "▾";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent); pointer-events: none;
}

/* スピーカーアイコンボタン(個別読み上げ) */
.saybtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  color: var(--ink-soft);
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 8px 14px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.saybtn:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 560px) {
  .modegrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .modecard { padding: 18px 16px; }
  .modecard__title { font-size: 17px; }
  .modecard__desc { display: none; } /* 狭い画面はアイコン+名前で簡潔に */
}

/* ===== テンパズル ===== */
.tinput { display: flex; gap: 12px; justify-content: center; margin: 8px 0 24px; }
.tinput .slot {
  width: clamp(56px, 16vw, 70px); height: clamp(70px, 20vw, 86px);
  border-radius: 18px; background: var(--surface-2);
  border: 2px solid var(--surface-line-2);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 9vw, 42px);
  color: var(--ink-mute);
}
.tinput .slot.filled { border-color: var(--accent); color: var(--accent); }
.tenkey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 320px; margin: 0 auto; }
.tenkey button {
  font-family: var(--font-display); font-weight: 900; font-size: 26px;
  padding: 16px 0; border-radius: 18px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--surface-line-2); cursor: pointer;
  transition: transform .12s ease, background .2s;
}
.tenkey button:hover { transform: translateY(-2px); }
.tenkey button:active { background: color-mix(in srgb, var(--accent) 25%, var(--surface-2)); }
.tenkey button.spec { font-size: 22px; color: var(--accent); }

.diffbadge { display: inline-block; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.diffbadge.ng { color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, transparent); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }

.calcrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.numtile {
  width: clamp(52px, 15vw, 64px); height: clamp(64px, 18vw, 78px);
  border-radius: 16px; background: var(--surface-2);
  border: 2px solid var(--surface-line-2);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 8vw, 36px);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s, border-color .2s;
}
.numtile:hover { transform: translateY(-2px); }
.numtile.sel { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 38%, transparent); }
.opbtn {
  width: clamp(46px, 13vw, 54px); height: clamp(46px, 13vw, 54px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-size: 24px; font-weight: 900; cursor: pointer;
  font-family: var(--font-display);
  transition: transform .12s ease;
}
.opbtn:hover { transform: scale(1.08); }
.exprline { text-align: center; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 5vw, 32px); margin: 14px 0 4px; word-break: break-word; }
.exprline .res { color: var(--amber); }
.ten-win { color: var(--mint); }
.swap-hint { text-align: center; }

/* ===== かな音楽 ===== */
.km-input {
  width: 100%;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(20px, 5vw, 26px);
  color: var(--ink); text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  letter-spacing: .08em;
}
.km-input:focus { outline: none; border-color: var(--accent); }
.km-bars {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  min-height: 110px;
  padding: 18px 8px 8px;
  margin-top: 14px;
}
.km-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.km-bar .km-h {
  width: clamp(26px, 8vw, 38px);
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #2a1330));
  box-shadow: 0 6px 16px -8px var(--accent);
  transition: transform .12s ease, filter .12s ease;
}
.km-bar.rest .km-h, .km-bar.nmora .km-h {
  background: linear-gradient(180deg, var(--ink-mute), color-mix(in srgb, var(--ink-mute) 40%, #2a1330));
  box-shadow: none;
}
.km-bar.long .km-h { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); }
.km-bar .km-lab { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--ink-soft); }
.km-bar.active .km-h { transform: scaleY(1.08); filter: brightness(1.3); }
.km-bar.active .km-lab { color: var(--accent); }

.km-keys { display: flex; flex-wrap: wrap; gap: 10px; }
.km-key {
  position: relative;
  width: clamp(54px, 16vw, 66px); height: clamp(54px, 16vw, 66px);
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--surface-line-2);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 24px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .12s ease, border-color .2s, background .2s;
}
.km-key:hover { transform: translateY(-2px); border-color: var(--accent); }
.km-key:active { background: color-mix(in srgb, var(--accent) 25%, var(--surface-2)); }
.km-key small { position: absolute; bottom: 5px; font-size: 9px; color: var(--ink-mute); font-weight: 700; }
.km-vowel { background: color-mix(in srgb, var(--accent) calc(8% + var(--lv) * 6%), var(--surface-2)); }
.km-legend-wrap { margin-top: 20px; }
.km-legend-wrap summary {
  cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px;
  padding: 8px 0; list-style: none;
}
.km-legend-wrap summary::-webkit-details-marker { display: none; }
.km-legend-wrap summary::before { content: "▸ "; }
.km-legend-wrap[open] summary::before { content: "▾ "; }
.km-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }

.km-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--surface-line-2);
  border-radius: 999px; padding: 12px 22px;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow); z-index: 50;
  animation: pop .25s ease both;
}

/* ===== 丸ゴシックでも見出しの“強さ”を保つ。極太Delaの潰れを避けつつ可読性を確保 ===== */
.hero__title,
.screen__title,
.modecard__title,
.qtext,
.bigtopic__theme,
.result__num,
.reveal__answer {
  font-weight: 900;
  letter-spacing: .015em;
}
.btn { font-weight: 800; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}