/* ============================================================
   世界の国旗カード — スタイル「Essential ポップ」（2026-06-21 リデザイン）
   参考：あつまれ どうぶつの森 公式サイト。
   メインフォント＝Noto Sans JP（2026-06-25 丸ゴシック M PLUS Rounded 1c から変更：
   ふりがな併記時のつぶれ/可読性を優先）× 砂色クリーム地 × まる角 ×
   ぷっくり押せるボタン × 葉/ドットの装飾。
   モード色分けの var 名は据え置き、値を自然由来のポップ配色へ再マップ。
   自動ふりがな(app.js furiganaize)前提のルビ調整は末尾に保持。
   ============================================================ */
:root {
  /* ブランドの幹（コーラル） — ブランドバー・主要差し色 */
  --brand: #f0705f;
  --brand-deep: #b93d31;
  --brand-bright: #ff8d7d;
  /* モード色分け（var 名は据え置き・値を自然ポップへ再マップ） */
  --teal: #16889f;        /* 空色：白文字でも読める深さを確保 */
  --teal-dark: #0d6f84;
  --terra: #548f2b;       /* 葉グリーン：みつける */
  --terra-dark: #3f7420;
  --navy: #426fc9;        /* ブルーベリー：くらべる */
  --navy-dark: #3156a5;
  --gold: #c76f13;        /* サンドオレンジ：よみあげ／あそびかた／差し色 */
  --gold-dark: #994d00;
  /* 地・墨（あたたかいブラウン） */
  --ink: #4f4334;
  --sub: #71644f;
  --line: #ece0c8;
  --bg: #f8f1e0;          /* 砂色クリーム */
  --card: #fffdf7;        /* あたたかい白 */
  /* 影：足元に薄いソリッド線（ステッカー的）＋やわらかい落ち影 */
  --shadow: 0 3px 0 rgba(120, 95, 50, 0.06), 0 6px 16px rgba(120, 90, 50, 0.10);
  --shadow-lg: 0 6px 0 rgba(120, 95, 50, 0.07), 0 16px 34px rgba(120, 90, 50, 0.18);
  /* 国旗の外周ハネ線：白い縁(マット)が背景と同化しないよう、外側に細いインク色リングを敷く */
  --flag-ring: 0 0 0 1px rgba(79, 67, 52, 0.32);
  --radius: 22px;
  --radius-sm: 14px;
  /* ── フォントサイズ規定（つぶれ防止）────────────────────────
     丸ゴシック＋ふりがな＋太字は、小さいと字画が潰れて読みにくい。
     ・通常テキストの下限: --fs-floor（これ未満は使わない）
     ・太字(700+)の下限:   --fs-floor-bold（通常より一段大きく）
     原則: 役割が同じなら、太字版は通常版より大きいサイズにする。
     例外: 数字のみのカウンタ（1/12 等）は潰れにくいので下限対象外。 */
  --fs-floor: 0.78rem;        /* ≈12.5px */
  --fs-floor-bold: 0.84rem;   /* ≈13.4px：太字ラベルの最小 */
  /* イージング：弾むスプリング（あつ森らしいぷるん） */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  /* ごく薄いドットの地紋（砂浜のような質感） */
  background-image: radial-gradient(rgba(160, 130, 80, 0.07) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  line-height: 1.6;
  padding-bottom: 3rem;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.link-btn {
  background: none; border: none; color: var(--teal-dark);
  text-decoration: underline; font-size: 0.85em; padding: 0; cursor: pointer; font-weight: 700;
}

/* ---- chrome ---- */
.brand-bar {
  display: flex; align-items: center; gap: 0.3rem;
  background: var(--brand-deep); color: #fff5ef;
  text-decoration: none; font-size: 0.8rem; font-weight: 800;
  padding: 0.45rem 0.95rem; min-height: 40px;
}
.brand-bar-arrow { font-size: 1.1rem; line-height: 1; }
.brand-bar-mark { display: inline-flex; width: 18px; height: 18px; color: #fff; }
.brand-bar-mark svg { width: 100%; height: 100%; }
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--teal); color: #fff;
  padding: 0.5rem 1.1rem; min-height: 56px;
  box-shadow: 0 4px 14px rgba(54, 180, 204, 0.28);
}
/* ヘッダ下端のスカラップ（あつ森の波打つ縁） */
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 11px;
  background: radial-gradient(circle at 10px 0, var(--teal) 0 9px, transparent 9.5px);
  background-size: 20px 11px; background-repeat: repeat-x;
}
.app-title {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; color: #fff;
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  /* 狭い端末では少し縮めて「世界の国旗カード」を常に1行に保つ（DES-1）。
     left:50% で右半分に幅制約されるため nowrap で折り返しを止め、
     max-width で戻るボタンへのはみ出しを防ぐ。 */
  font-size: clamp(1rem, 4.2vw, 1.18rem);
  white-space: nowrap;
  max-width: calc(100vw - 8rem);
  position: absolute; left: 50%; transform: translateX(-50%); min-height: 44px;
}
.app-title-label { white-space: nowrap; }
.app-title-icon {
  font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.app-badge {
  margin-left: auto; font-size: 0.7rem; font-weight: 800;
  background: var(--gold); color: #fff; border-radius: 999px; padding: 0.16rem 0.7rem;
  box-shadow: 0 2px 0 var(--gold-dark);
}
.back-btn {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: rgba(255, 255, 255, 0.22); color: #fff; border: none;
  border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; font-weight: 800;
  min-height: 44px; position: relative; z-index: 1;
}
.back-btn:active { transform: translateY(1px); }
.app-main { max-width: 880px; margin: 0 auto; padding: 1.3rem 1rem 1rem; }
.view { display: none; animation: fade 0.28s var(--ease-spring); }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* セクション見出し：色丸＋丸文字のポップな帯 */
.view-head {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: 1.3rem; margin: 0.2rem 0 0.7rem;
  background: #fff; border: 2.5px solid var(--line); border-radius: 999px;
  padding: 0.4rem 1.1rem; box-shadow: var(--shadow);
}
.view-head > span[aria-hidden] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bg); font-size: 1.05rem;
}
.view-lead { color: var(--sub); margin: 0 0 1.1rem; font-size: 0.92rem; }
.empty { color: var(--sub); text-align: center; padding: 2rem 1rem; }

/* ---- ホーム ---- */
.home-hero { text-align: center; padding: 1.6rem 0 0.6rem; }
.home-title {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 6.4vw, 2.2rem); line-height: 1.4; margin: 0;
}
.home-title .accent {
  color: var(--teal-dark);
  background: linear-gradient(transparent 64%, #bdeaf3 64%);
  border-radius: 2px;
}
.home-lead {
  color: var(--sub); font-size: 0.9rem; margin: 0.7rem auto 1rem; max-width: 28em;
  background: #fff; border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem; width: fit-content;
}
.home-flag-strip {
  display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.4rem 0.2rem 0.8rem;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.home-flag-strip::-webkit-scrollbar { display: none; }
.home-flag-strip img {
  height: 58px; width: auto; border-radius: 8px; border: 2px solid #fff;
  box-shadow: var(--flag-ring), var(--shadow); flex: 0 0 auto; align-self: center;
}

.home-start {
  margin: 0.8rem 0 1.25rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 2.5px dashed var(--line);
  border-radius: var(--radius);
}
.home-start-kicker { margin: 0 0 0.65rem; text-align: center; font-size: var(--fs-floor-bold); font-weight: 800; color: var(--sub); }
.home-start-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.home-start-btn {
  display: flex; align-items: center; gap: 0.75rem; text-align: left;
  min-height: 72px; padding: 0.75rem 0.9rem;
  border: 2.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--line);
}
.home-start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line), var(--shadow); }
.home-start-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: 50%; background: #fdf1dd; font-size: 1.4rem; }
.home-start-btn b, .home-start-btn small { display: block; }
.home-start-btn b { font-size: 1rem; }
.home-start-btn small { margin-top: 0.12rem; color: var(--sub); font-size: var(--fs-floor); }
.home-start-app .home-start-icon { background: #e2f5f8; }

.mode-tiles { display: grid; gap: 1rem; margin-top: 0.6rem; }
@media (min-width: 560px) { .mode-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .mode-tiles { grid-template-columns: repeat(3, 1fr); } }
.mode-tile {
  --c: var(--teal); --cd: var(--teal-dark);
  display: flex; flex-direction: column; gap: 0.25rem; text-align: left;
  background: var(--card);
  border: 2.5px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.25rem 1.3rem;
  box-shadow: 0 5px 0 var(--line), 0 12px 22px rgba(120, 90, 50, 0.12);
  transition: transform 0.16s var(--ease-spring), box-shadow 0.16s, border-color 0.16s;
}
.mode-tile:hover {
  transform: translateY(-4px) rotate(-0.6deg);
  border-color: var(--c);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--c) 30%, var(--line)), 0 20px 34px rgba(120, 90, 50, 0.2);
}
.mode-tile:active { transform: translateY(0); box-shadow: 0 3px 0 var(--line), 0 8px 16px rgba(120, 90, 50, 0.14); }
.mode-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, #fff);
  font-size: 1.7rem; margin-bottom: 0.3rem;
}
.mode-name { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--cd); }
.mode-desc { color: var(--sub); font-size: 0.82rem; }
.mode-find { --c: var(--terra); --cd: var(--terra-dark); }
.mode-compare { --c: var(--navy); --cd: var(--navy-dark); }
.mode-flash { --c: var(--teal); --cd: var(--teal-dark); }
.mode-odai { --c: var(--gold); --cd: var(--gold-dark); }
.mode-browse { --c: var(--teal); --cd: var(--teal-dark); }
.mode-guide { --c: var(--gold); --cd: var(--gold-dark); }

/* ---- 年齢別メインセクション（幼児／低学年／高学年〜大人） ---- */
.age-groups { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 0.4rem; }
.age-group {
  --c: var(--teal); --cd: var(--teal-dark);
  background: rgba(255, 255, 255, 0.5);
  border: 2.5px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 0.8rem 1rem;
}
.age-toddler { --c: var(--teal); --cd: var(--teal-dark); }
.age-low { --c: var(--terra); --cd: var(--terra-dark); }
.age-high { --c: var(--navy); --cd: var(--navy-dark); }
.age-head { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0.25rem 0.75rem; }
.age-emoji { font-size: 1.5rem; line-height: 1; }
.age-label { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--cd); }
.age-range {
  margin-left: auto; font-size: var(--fs-floor-bold); font-weight: 800; color: #fff;
  background: var(--c); border-radius: 999px; padding: 0.12rem 0.65rem; box-shadow: 0 2px 0 var(--cd);
}
.play-tiles { display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .play-tiles { grid-template-columns: repeat(2, 1fr); } }
.play-tile {
  display: flex; align-items: center; gap: 0.7rem; text-align: left; width: 100%;
  background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; box-shadow: 0 4px 0 var(--line);
  transition: transform 0.16s var(--ease-spring), box-shadow 0.16s, border-color 0.16s;
}
.play-tile:hover {
  transform: translateY(-3px); border-color: var(--c);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 30%, var(--line)), var(--shadow);
}
.play-tile:active { transform: translateY(0); box-shadow: 0 3px 0 var(--line); }
.play-tile-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, #fff); font-size: 1.6rem;
}
.play-tile-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.play-tile-name {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--cd);
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.play-tile-desc { color: var(--sub); font-size: var(--fs-floor); }
.play-tile-arrow { color: var(--c); font-size: 1.3rem; font-weight: 800; flex: 0 0 auto; }
.app-only {
  font-size: 0.62rem; font-weight: 800; color: #fff; background: var(--gold);
  border-radius: 999px; padding: 0.1rem 0.5rem; box-shadow: 0 2px 0 var(--gold-dark); white-space: nowrap;
}

/* ---- ホーム：利用文脈の2モード（🎴 カードであそぶ ／ 📱 アプリであそぶ） ---- */
.mode-groups { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0.5rem; }
.mode-section {
  --c: var(--teal); --cd: var(--teal-dark);
  background: rgba(255, 255, 255, 0.55);
  border: 2.5px solid var(--line); border-radius: var(--radius);
  padding: 0.95rem 0.85rem 1.1rem;
}
.mode-cards { --c: var(--terra); --cd: var(--terra-dark); }
.mode-app   { --c: var(--teal);  --cd: var(--teal-dark); }
.mode-head { display: flex; align-items: center; gap: 0.55rem; margin: 0.1rem 0.2rem 0.45rem; }
.mode-emoji { font-size: 1.75rem; line-height: 1; }
.mode-label {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--cd);
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
}
.mode-sub {
  font-size: var(--fs-floor-bold); font-weight: 800; color: #fff;
  background: var(--c); border-radius: 999px; padding: 0.14rem 0.7rem; box-shadow: 0 2px 0 var(--cd);
}
.mode-lead { margin: 0 0.25rem 0.85rem; color: var(--sub); font-size: var(--fs-floor); line-height: 1.7; }
.play-tile-age {
  font-size: 0.62rem; font-weight: 800; color: var(--cd); white-space: nowrap;
  background: color-mix(in srgb, var(--c) 18%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--c) 35%, #fff);
  border-radius: 999px; padding: 0.08rem 0.5rem;
}

/* ---- サブ：国旗図鑑 ---- */
.home-sub { margin-top: 1.6rem; }
.home-sub-kicker { margin: 0 0 0.5rem 0.3rem; font-size: var(--fs-floor-bold); font-weight: 800; color: var(--sub); }
.sub-tile {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1rem; box-shadow: 0 4px 0 var(--line);
  transition: transform 0.16s var(--ease-spring), box-shadow 0.16s, border-color 0.16s;
}
.sub-tile:hover {
  transform: translateY(-3px); border-color: var(--teal);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--teal) 30%, var(--line)), var(--shadow);
}
.sub-tile:active { transform: translateY(0); box-shadow: 0 3px 0 var(--line); }
.sub-tile-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: #e2f5f8; font-size: 1.6rem; }
.sub-tile-body { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; min-width: 0; }
.sub-tile-name { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--teal-dark); }
.sub-tile-desc { color: var(--sub); font-size: var(--fs-floor); }
.sub-tile-arrow { color: var(--teal); font-size: 1.4rem; font-weight: 800; flex: 0 0 auto; }

/* ---- あそびかた（各遊びの中に内蔵する折りたたみ） ---- */
.howto { margin: 0 0 1.1rem; }
.howto-card {
  background: #fff; border: 2.5px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden;
}
.howto-card > summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.6rem 0.9rem; font-weight: 800; min-height: 44px;
}
.howto-card > summary::-webkit-details-marker { display: none; }
.howto-card > summary::after { content: "▾"; margin-left: auto; color: var(--sub); transition: transform 0.18s; }
.howto-card[open] > summary::after { transform: rotate(180deg); }
.howto-tag { font-size: var(--fs-floor); font-weight: 800; color: #fff; background: var(--gold); border-radius: 999px; padding: 0.14rem 0.6rem; box-shadow: 0 2px 0 var(--gold-dark); }
.howto-title { font-family: "Noto Sans JP", sans-serif; color: var(--ink); font-size: 1rem; }
.howto-steps { margin: 0; padding: 0.1rem 1.1rem 0.7rem 2.5rem; color: var(--ink); }
.howto-steps li { margin: 0.3rem 0; font-size: 0.9rem; }
.howto-note {
  margin: 0 0.9rem 0.85rem; font-size: var(--fs-floor); font-weight: 700; color: var(--gold-dark);
  background: #fdf1dd; border-radius: var(--radius-sm); padding: 0.45rem 0.7rem;
}

/* ---- 低学年かるた：国名（読み札）カード ---- */
.reader-name .reader-odai { font-size: clamp(1.6rem, 7vw, 2.1rem); }
.name-reveal { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 0.7rem; }
.name-reveal-flag { width: min(62%, 220px); border-radius: 10px; border: 3px solid #fff; box-shadow: var(--flag-ring), var(--shadow); }
.name-reveal-name { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.2rem; margin: 0; }
.name-reveal-sub { color: var(--sub); font-size: 0.85rem; margin: 0; }

/* ---- フィルタ ---- */
.filter-bar {
  position: sticky; top: 66px; z-index: 8;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr); gap: 0.45rem 0.6rem;
  margin: -0.35rem 0 1.1rem; padding: 0.5rem 0 0.65rem;
  background: linear-gradient(var(--bg) 88%, transparent);
}
.filter-q {
  width: 100%; padding: 0.7rem 1rem; font-size: 1rem; font-family: inherit;
  border: 2.5px solid var(--line); border-radius: 999px; background: #fff;
}
.filter-region {
  width: 100%; min-height: 44px; padding: 0.55rem 2rem 0.55rem 0.85rem;
  border: 2.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
}
.filter-q:focus { outline: none; border-color: var(--teal); }
.filter-chips { grid-column: 1 / -1; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.1rem 0 0.25rem; scrollbar-width: thin; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  min-height: 44px; flex: 0 0 auto; padding: 0.3rem 0.8rem; font-size: var(--fs-floor-bold); font-weight: 800; color: var(--sub);
}
.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip-feat.on { background: var(--navy); border-color: var(--navy); }
.chip-flag.on { background: var(--terra); border-color: var(--terra); }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.18); }
.dot-red { background: #f0705f; } .dot-blue { background: #5b8def; } .dot-white { background: #fff; }
.dot-green { background: #79bf45; } .dot-yellow { background: #f4cf45; } .dot-black { background: #4f4334; }
.filter-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; color: var(--sub); }

.more-btn {
  display: block; min-width: min(100%, 320px); min-height: 48px; margin: 1rem auto;
  padding: 0.7rem 1.25rem; border: 2.5px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--teal-dark); font-weight: 800; box-shadow: var(--shadow);
}
.more-btn[hidden] { display: none; }

/* ---- 一覧グリッド ---- */
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.flag-card {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: center;
  background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.8rem 0.6rem 0.9rem; box-shadow: var(--shadow);
  transition: transform 0.16s var(--ease-spring), box-shadow 0.16s, border-color 0.16s;
}
.flag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.flag-card-img { display: flex; align-items: center; justify-content: center; height: 96px; }
.flag-card-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 7px; border: 2px solid #fff; box-shadow: var(--flag-ring), 0 2px 6px rgba(120,90,50,0.16); }
.flag-card-name { font-weight: 800; font-size: 0.95rem; }
.flag-card-sub { font-size: var(--fs-floor); color: var(--sub); }

/* ---- 詳細 ---- */
.detail-hero {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.detail-flag { flex: 0 0 auto; width: min(260px, 60vw); }
.detail-flag img { width: 100%; height: auto; border-radius: 12px; border: 3px solid #fff; box-shadow: var(--flag-ring), var(--shadow); }
.detail-headline { flex: 1 1 200px; }
.detail-name { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.6rem; margin: 0; }
.detail-official { margin: 0.2rem 0; font-weight: 800; color: var(--navy-dark); }
.detail-en { margin: 0.1rem 0 0.6rem; color: var(--sub); font-size: 0.85rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--fs-floor-bold); font-weight: 800; border-radius: 999px; padding: 0.2rem 0.7rem;
}
.tag-color { background: #f5eedd; color: var(--ink); }
.tag-feat { background: var(--navy); color: #fff; }
.data-table { width: 100%; border-collapse: collapse; background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.data-table th, .data-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.data-table th { width: 38%; color: var(--sub); font-weight: 800; background: #faf4e6; }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: none; }
.detail-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
.ghost-btn {
  background: #fff; border: 2.5px solid var(--line); border-radius: 999px;
  padding: 0.55rem 1.2rem; font-weight: 800; color: var(--ink); font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, border-color 0.12s;
}
.ghost-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.ghost-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }

/* ---- みつける ---- */
.find-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 1rem; }
.level-filter { display: flex; gap: 0.4rem; }
.level-btn { min-height: 44px; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem; font-weight: 800; color: var(--sub); font-size: 0.85rem; }
.level-btn.on { background: var(--terra); border-color: var(--terra); color: #fff; box-shadow: 0 3px 0 var(--terra-dark); }

/* ---- 出題範囲（対象の国）バー：クイズ・読み上げ・おぼえる・みつける 共通 ---- */
.scope-bar {
  margin: 0 0 1.2rem; padding: 0.7rem 0.85rem 0.85rem;
  background: rgba(255, 253, 247, 0.85); border: 2.5px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.scope-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.scope-title { font-weight: 800; font-size: 0.92rem; color: var(--gold-dark); }
.scope-summary {
  font-weight: 800; font-size: var(--fs-floor-bold); color: var(--sub);
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 0.12rem 0.7rem; white-space: nowrap;
}
.scope-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.scope-chip {
  min-height: 40px; background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.85rem; font-weight: 800; color: var(--sub); font-size: 0.82rem;
  transition: transform 0.1s var(--ease-spring);
}
.scope-chip:active { transform: translateY(2px); }
.scope-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 3px 0 var(--gold-dark); }
.scope-chip-custom { border-style: dashed; color: var(--gold-dark); }
.scope-chip-custom.on { border-style: solid; }

/* ---- 準備画面（対象の国・オプションを選んで ▶スタート） ---- */
.setup-note { margin: -0.4rem 0 1.1rem; color: var(--sub); font-size: 0.88rem; line-height: 1.7; }
.setup-options { display: grid; gap: 0.9rem; }
.setup-opt { display: grid; gap: 0.45rem; }
.setup-opt-label { font-weight: 800; font-size: 0.92rem; color: var(--gold-dark); }
.setup-opt .flash-dir,
.setup-opt .reader-timer-ctrl { margin: 0; }
/* みつける：準備画面に出すお題リスト */
.setup-find, .setup-reader-odai { margin: 0.2rem 0 0.4rem; }
.setup-find-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0 0.2rem 0.55rem; }
.setup-find-hint { font-size: var(--fs-floor); color: var(--sub); font-weight: 700; margin: 0 0.2rem 0.6rem; }
/* 読み手お題ピッカー：選択中（出す）お題はチェック付きで強調 */
.odai-pick { position: relative; }
.odai-pick.picked { border-color: var(--terra); background: #f1f9e8; }
.odai-pick.picked::after {
  content: '✓'; position: absolute; top: 6px; right: 9px;
  color: #fff; background: var(--terra); border-radius: 50%;
  width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 0.72rem; font-weight: 900;
}
.odai-pick:not(.picked):not([disabled]) { opacity: 0.72; }
/* セクションごとの 全部選択／全部外す */
.odai-group-bulk { display: flex; gap: 0.5rem; padding: 0.55rem 0.7rem 0.1rem; }
.odai-group-bulk-btn {
  min-height: 34px; padding: 0.25rem 0.75rem; border: 2px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 800; color: var(--sub); font-size: 0.76rem;
}
.odai-group-bulk-btn[data-act="all"] { border-color: var(--terra); color: var(--terra-dark); }
.odai-group-bulk-btn:active { transform: translateY(2px); }
.setup-start-row { margin: 1.5rem 0 0.6rem; }
.setup-start-btn {
  width: 100%; font-size: 1.35rem; padding: 1.05rem 1rem; border-radius: 999px;
}
/* 対象の国一覧（場に出すカード）：旗＋国名のコンパクトなチップを敷き詰め */
.setup-scope-list {
  margin: 0 0 1.2rem; padding: 0.7rem 0.85rem 0.85rem;
  background: rgba(255, 253, 247, 0.85); border: 2.5px dashed var(--line);
  border-radius: var(--radius-sm);
}
.setup-scope-list-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.setup-scope-list-title { font-weight: 800; font-size: 0.92rem; color: var(--terra-dark); }
.setup-scope-list-count {
  font-weight: 800; font-size: var(--fs-floor-bold); color: #fff; background: var(--terra);
  border-radius: 999px; padding: 0.12rem 0.7rem; white-space: nowrap;
}
.setup-scope-allnote { margin: 0; font-weight: 800; color: var(--terra-dark); line-height: 1.7; }
.setup-scope-allnote span { font-weight: 700; color: var(--sub); font-size: 0.9rem; }
.scope-flag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.5rem;
  max-height: 270px; overflow-y: auto; padding: 0.1rem;
}
.scope-flag { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; }
.scope-flag img {
  width: 100%; max-width: 52px; height: 34px; object-fit: contain; border-radius: 4px;
  border: 2px solid #fff; box-shadow: var(--flag-ring), 0 1px 3px rgba(120,90,50,0.16);
}
.scope-flag span { font-size: 0.66rem; font-weight: 700; line-height: 1.2; word-break: break-word; }
.scope-flag rt { font-size: 0.42em; }

/* 一括選択／解除ツールバー（ピッカー） */
.picker-bulk { display: flex; gap: 0.5rem; padding: 0 1rem 0.2rem; }
.picker-bulk-btn {
  min-height: 38px; padding: 0.3rem 0.85rem; border: 2px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 800; color: var(--sub); font-size: 0.8rem;
}
.picker-bulk-all { border-color: var(--navy); color: var(--navy-dark); }
.picker-bulk-btn:active { transform: translateY(2px); }
.odai-list { display: grid; gap: 0.7rem; }
.random-odai-btn { min-height: 44px; padding: 0.45rem 1rem; border: 0; border-radius: 999px; background: var(--terra); color: #fff; font-weight: 800; box-shadow: 0 3px 0 var(--terra-dark); }
.odai-group, .guide-odai-group { border: 2.5px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,0.68); box-shadow: var(--shadow); overflow: clip; }
.odai-group > summary, .guide-odai-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 52px; padding: 0.65rem 1rem; color: var(--terra-dark); font-weight: 800; cursor: pointer; list-style: none;
}
.odai-group > summary::-webkit-details-marker, .guide-odai-group > summary::-webkit-details-marker { display: none; }
.odai-group > summary::after, .guide-odai-group > summary::after { content: "＋"; margin-left: auto; color: var(--sub); }
.odai-group[open] > summary::after, .guide-odai-group[open] > summary::after { content: "−"; }
.odai-group > summary span:last-child, .guide-odai-group > summary span:last-child { color: var(--sub); font-size: var(--fs-floor-bold); }
.odai-group-list { display: grid; gap: 0.55rem; padding: 0 0.7rem 0.75rem; }
.odai-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
  background: var(--card); border: 2.5px solid var(--line); border-left: 8px solid var(--terra);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; text-align: left; box-shadow: var(--shadow);
  transition: transform 0.14s var(--ease-spring), box-shadow 0.14s;
}
.odai-item:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.odai-cat { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--terra-dark); background: #ecf6e1; border-radius: 999px; padding: 0.14rem 0.6rem; white-space: nowrap; }
.odai-label { font-weight: 800; font-size: 1.02rem; grid-column: 1 / -1; grid-row: 2; }
.odai-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.odai-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 1px; }
.odai-num { font-size: 0.72rem; color: var(--sub); }
/* 全国版で対応（20か国サンプルで判定不可／該当0のお題）— マニュアル準拠で一覧には表示 */
.odai-item-soon { border-left-color: var(--line); opacity: 0.72; cursor: default; }
.odai-item-soon:hover { transform: none; box-shadow: var(--shadow); }
.odai-soon { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--sub); background: #f3ecdd; border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.55rem; white-space: nowrap; }

.play-head { text-align: center; margin-bottom: 1rem; }
.play-head-find { background: linear-gradient(180deg, #ecf6e1, transparent); border-radius: var(--radius); padding: 1.1rem; }
.play-cat { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--terra-dark); }
.play-odai { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.8rem); margin: 0.3rem 0; }
.play-hint { color: var(--sub); font-size: 0.85rem; margin: 0; }
.flag-grid-find { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.flag-pick, .pick-flag {
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; align-items: center;
  background: #fff; border: 3px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.4rem; box-shadow: var(--shadow);
  transition: transform 0.12s var(--ease-spring), border-color 0.12s, background 0.12s;
}
.flag-pick img, .pick-flag img { height: 58px; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; border: 2px solid #fff; box-shadow: var(--flag-ring), 0 1px 4px rgba(120,90,50,0.18); }
.flag-pick span, .pick-flag span { font-size: var(--fs-floor-bold); font-weight: 800; }
.flag-pick.picked, .pick-flag.picked { border-color: var(--terra); background: #f1f9e8; transform: scale(0.96); }
.pick-flag.picked { border-color: var(--navy); background: #eaf1fe; }
.flag-pick.ok { border-color: #4caf50; background: #eaf7ec; }
.flag-pick.ng { border-color: var(--brand); background: #fdeeec; }
.flag-pick.miss { border-color: var(--gold); background: #fdf4e2; }
.flag-pick.dim { opacity: 0.4; }
.play-actions { display: flex; gap: 0.6rem; justify-content: center; margin: 1.3rem 0; }
.primary-btn {
  border: none; border-radius: 999px; padding: 0.75rem 2rem; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark), 0 10px 18px rgba(120,90,50,0.18);
  transition: transform 0.1s, box-shadow 0.1s;
}
.primary-btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--teal-dark), 0 4px 10px rgba(120,90,50,0.16); }
.primary-find { background: var(--terra); box-shadow: 0 5px 0 var(--terra-dark), 0 10px 18px rgba(120,90,50,0.18); }
.primary-find:active { box-shadow: 0 0 0 var(--terra-dark), 0 4px 10px rgba(120,90,50,0.16); }
.primary-btn:disabled { opacity: 0.5; box-shadow: none; }
.primary-btn:disabled:active { transform: none; }
.play-result { text-align: center; }
.score { font-weight: 800; font-size: 1.15rem; }
.score-perfect { color: #2e7d32; }   /* 白背景でも AA を満たす濃い緑（旧 #4caf50 は薄く低コントラスト） */
.ng-text { color: var(--brand-deep); } .miss-text { color: var(--gold-dark); }
.score-legend { display: flex; gap: 0.8rem; justify-content: center; font-size: 0.75rem; color: var(--sub); margin-top: 0.4rem; }
.lg { display: inline-flex; align-items: center; gap: 0.25rem; }
.lg::before { content: ""; width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg.ok::before { background: #4caf50; } .lg.ng::before { background: var(--brand); } .lg.miss::before { background: var(--gold); }

/* ---- くらべる ---- */
.compare-metrics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.metric-btn { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 0.4rem 0.95rem; font-weight: 800; color: var(--sub); font-size: 0.85rem; }
.metric-btn { min-height: 44px; }
.metric-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 3px 0 var(--navy-dark); }
.compare-pick-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 800; margin-bottom: 0.5rem; }
.compare-pick-actions { display: flex; gap: 0.7rem; }
.compare-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 0.5rem; margin-bottom: 1.2rem; }
.pick-open-btn { width: 100%; min-height: 48px; margin: 0 0 0.75rem; border: 2.5px dashed var(--navy); border-radius: var(--radius-sm); background: #f5f8ff; color: var(--navy-dark); font-weight: 800; }
.compare-pick .pick-flag { padding: 0.4rem 0.3rem; }
.compare-pick .pick-flag img { height: 42px; }
.compare-pick .pick-flag span { font-size: var(--fs-floor-bold); }
.compare-pick-empty { grid-column: 1 / -1; margin: 0; padding: 1rem; border: 2px dashed var(--line); border-radius: var(--radius-sm); color: var(--sub); text-align: center; }
.pick-remove { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy-dark); color: #fff; }
.compare-result { background: var(--card); border: 2.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; }
.compare-title { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.1rem; margin-bottom: 0.8rem; }
.compare-sub { font-size: 0.75rem; color: var(--sub); font-weight: 600; }
.bar-row { display: grid; grid-template-columns: 1.4rem 48px auto 1fr auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.bar-rank { font-weight: 800; color: var(--sub); text-align: center; }
.bar-row.top .bar-rank { color: var(--gold-dark); }
.bar-flag { height: 22px; width: auto; max-width: 44px; object-fit: contain; border-radius: 4px; border: 2px solid #fff; box-shadow: var(--flag-ring), 0 1px 3px rgba(120,90,50,0.2); }
.bar-name { font-size: 0.85rem; font-weight: 800; white-space: nowrap; }
.bar-track { background: #f0e9d8; border-radius: 999px; height: 16px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--navy)); border-radius: 999px; }
.bar-row.top .bar-fill { background: linear-gradient(90deg, var(--gold), var(--brand)); }
.bar-val { font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.bar-val small { color: var(--sub); font-weight: 600; }
.compare-foot { font-size: 0.82rem; color: var(--sub); margin: 0.8rem 0 0; }

.country-picker { width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 820px); padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px rgba(55,40,20,0.35); }
.country-picker::backdrop { background: rgba(38, 31, 23, 0.56); backdrop-filter: blur(3px); }
.picker-shell { display: flex; flex-direction: column; max-height: min(86vh, 820px); }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.7rem; border-bottom: 2px solid var(--line); background: #fff; }
.picker-head h3 { margin: 0; font-size: 1.3rem; }
.picker-kicker { color: var(--navy-dark); font-size: var(--fs-floor-bold); font-weight: 800; }
.picker-close { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 1.35rem; }
.picker-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 0.55rem; padding: 0.8rem 1rem 0.5rem; }
.picker-filters input, .picker-filters select { min-height: 44px; padding: 0.55rem 0.8rem; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; }
.picker-status { margin: 0; padding: 0 1rem 0.55rem; color: var(--sub); font-size: 0.82rem; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.55rem; padding: 0 1rem 1rem; overflow-y: auto; }
.picker-grid .pick-flag { min-height: 88px; padding: 0.5rem 0.3rem; }
.picker-grid .pick-flag img { height: 42px; }
/* 国名がタイル幅を超えてはみ出すのを防ぐ：本文を一段小さく・折り返し許可・行間詰め */
.picker-grid .pick-flag span {
  font-size: 0.72rem; line-height: 1.25; text-align: center;
  width: 100%; word-break: break-word; overflow-wrap: anywhere;
}
/* ルビ（しゅちょうこくれんぽう 等）が少ない漢字に乗ると横にせり出す → ルビを縮小 */
.picker-grid .pick-flag rt { font-size: 0.42em; }
.picker-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-top: 2px solid var(--line); background: #fff; }
.primary-compare { background: var(--navy); box-shadow: 0 5px 0 var(--navy-dark), 0 10px 18px rgba(120,90,50,0.18); }

/* ---- おだいカード（読み手）＝よみあげ ---- */
.reader-tabs { display: flex; gap: 0; background: #fff; border: 2.5px solid var(--line); border-radius: 999px; padding: 0.3rem; margin-bottom: 1.2rem; }
.reader-tabs button { flex: 1; border: none; background: none; border-radius: 999px; padding: 0.55rem; font-weight: 800; color: var(--sub); font-size: 0.92rem; transition: background 0.12s, color 0.12s; }
.reader-tabs button.on { color: #fff; }
.reader-tabs button[data-type="quiz"].on { background: var(--teal); }
.reader-tabs button[data-type="find"].on { background: var(--terra); }
.reader-tabs button[data-type="compare"].on { background: var(--navy); }

.reader-stage { min-height: 280px; display: flex; justify-content: center; }
.reader-card {
  width: 100%; max-width: 540px; border-radius: var(--radius); padding: 0; overflow: hidden;
  box-shadow: var(--shadow-lg); background: #fff; border: 2.5px solid var(--line);
  animation: cardpop 0.3s var(--ease-spring);
}
@keyframes cardpop { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
.reader-band {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  color: #fff; font-weight: 800; font-size: var(--fs-floor-bold); padding: 0.7rem 1.1rem;
}
.reader-name .reader-band { background: var(--gold); }
.reader-find .reader-band { background: var(--terra); }
.reader-compare .reader-band { background: var(--navy); }
.reader-quiz .reader-band { background: var(--teal); }
.reader-stars { color: #fff3cf; letter-spacing: 1px; }
.band-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.band-speak { background: rgba(255, 255, 255, 0.26); border: none; color: #fff; border-radius: 50%; width: 30px; height: 30px; font-size: 0.9rem; line-height: 1; padding: 0; }
.band-speak:hover { background: rgba(255, 255, 255, 0.45); }
.reader-counter { background: rgba(255, 255, 255, 0.26); border-radius: 999px; padding: 0.12rem 0.65rem; font-size: 0.72rem; }
.reader-odai {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.1rem); text-align: center; margin: 1.5rem 1rem 0.4rem; line-height: 1.4;
}
.reader-sub { text-align: center; color: var(--terra-dark); font-weight: 800; margin: 0 1rem 1.3rem; }
/* おわり画面：対象をすべて読み終わったとき（大きな「おわり！」＋大きな戻る） */
.reader-end { text-align: center; padding: 2.2rem 1.2rem 2rem; }
.reader-end-emoji { font-size: 3.6rem; line-height: 1; }
.reader-end-title { font-weight: 900; font-size: clamp(2.6rem, 13vw, 3.6rem); color: var(--terra-dark); margin: 0.4rem 0 0.35rem; }
.reader-end-sub { color: var(--sub); font-weight: 700; margin: 0 0 1.7rem; font-size: 1rem; }
.reader-end-actions { display: grid; gap: 0.85rem; max-width: 360px; margin: 0 auto; }
.reader-again-btn { width: 100%; font-size: 1.1rem; padding: 0.85rem 1rem; border-radius: 999px; }
.reader-back-btn {
  width: 100%; font-size: 1.45rem; font-weight: 900; padding: 1.15rem 1rem; border-radius: 999px;
  border: 3px solid var(--navy); background: #fff; color: var(--navy-dark);
  box-shadow: 0 5px 0 var(--navy-dark), 0 10px 18px rgba(120,90,50,0.18);
}
.reader-back-btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--navy-dark); }
.reader-compare-dir { text-align: center; font-size: 1.3rem; color: var(--navy-dark); margin: 0 1rem 1.3rem; font-weight: 800; }
.reader-compare-dir b { background: #eaf1fe; border-radius: 999px; padding: 0.12rem 0.7rem; }

.reveal-btn {
  display: block; margin: 0 auto 1.4rem; background: #fff; border: 2.5px solid var(--line);
  border-radius: 999px; padding: 0.6rem 1.5rem; font-weight: 800; color: var(--ink); font-size: 0.92rem;
  box-shadow: 0 3px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, border-color 0.12s;
}
.reveal-btn:hover { border-color: var(--gold); }
.reveal-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }

/* 読み手モード（お題提供）は遠目に読めるよう特大化。クイズ（画面タップ）は据え置き */
.reader-name .reader-odai,
.reader-find .reader-odai,
.reader-compare .reader-odai {
  font-size: clamp(2.3rem, 11vw, 3.5rem); margin: 1.7rem 0.7rem 0.6rem; line-height: 1.3;
}
.reader-name .reader-sub,
.reader-find .reader-sub { font-size: 1.1rem; margin-bottom: 1.5rem; }
.reader-compare .reader-compare-dir { font-size: 1.7rem; }
.reader-name .reveal-btn,
.reader-find .reveal-btn,
.reader-compare .reveal-btn { font-size: 1.05rem; padding: 0.8rem 1.9rem; }

/* 早取りタイマー：操作（プリセット）＋バンド内カウントダウン */
.reader-timer-ctrl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; margin: 0.1rem 0 0.9rem;
}
.rt-label { font-weight: 800; color: var(--sub); font-size: 0.82rem; }
.rt-sec {
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.9rem; min-height: 40px; font-weight: 800; color: var(--ink); font-size: 0.82rem;
  box-shadow: 0 2px 0 var(--line); transition: transform 0.1s, border-color 0.12s, background 0.12s;
}
.rt-sec.on { background: var(--gold); color: #fff; border-color: var(--gold-dark); box-shadow: 0 2px 0 var(--gold-dark); }
.rt-sec:active { transform: translateY(2px); box-shadow: none; }
.reader-timer-val {
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-weight: 800;
  border-radius: 999px; padding: 0.14rem 0.7rem; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.reader-timer-val.is-up { background: #ffe3e0; color: #c0392b; }

.reader-reveal { background: #faf4e6; border-top: 2px dashed var(--line); padding: 1rem 1.1rem 1.3rem; }
.reveal-label { font-weight: 800; font-size: 0.85rem; color: var(--sub); margin: 0 0 0.6rem; }
.reveal-flags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reveal-flag { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 64px; }
.reveal-flag img { height: 30px; width: auto; border-radius: 4px; border: 2px solid #fff; box-shadow: var(--flag-ring), 0 1px 3px rgba(120,90,50,0.2); }
.reveal-flag span { font-size: 0.66rem; text-align: center; }
.reveal-rank { margin: 0; padding-left: 1.4rem; }
.reveal-rank li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.85rem; }
.reveal-rank img { height: 18px; width: auto; border-radius: 3px; border: 1px solid rgba(120,90,50,0.2); }
.rk-name { font-weight: 800; }
.rk-val { margin-left: auto; font-weight: 800; }
.rk-val small { color: var(--sub); font-weight: 600; }

.quiz-flag { display: flex; justify-content: center; padding: 1.5rem 1rem 0; }
.quiz-flag img { height: 120px; width: auto; border-radius: 12px; border: 3px solid #fff; box-shadow: var(--flag-ring), var(--shadow); }
.quiz-q { font-size: clamp(1.2rem, 5vw, 1.6rem); margin-top: 1rem; font-weight: 800; }
.quiz-choices { display: grid; gap: 0.6rem; padding: 0 1rem 1.2rem; }
.quiz-choice {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 0.6rem; justify-content: center;
  background: #fff; border: 2.5px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  font-weight: 800; font-size: 1rem; color: var(--ink);
  box-shadow: 0 3px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, border-color 0.12s;
}
.quiz-choice img { height: 26px; width: auto; border-radius: 4px; border: 2px solid #fff; box-shadow: var(--flag-ring); }
.quiz-choice.has-value { justify-content: space-between; padding-right: 3rem; text-align: left; }
.quiz-choice-main { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.quiz-choice-value {
  flex: none; margin-left: auto; color: var(--teal-dark); font-size: 0.9rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quiz-choice:not(:disabled):hover { border-color: var(--teal); }
.quiz-choice:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.quiz-choice.ok { border-color: #4caf50; background: #eaf7ec; box-shadow: 0 3px 0 #b6dcb8; }
.quiz-choice.ng { border-color: var(--brand); background: #fdeeec; box-shadow: 0 3px 0 #f3b8b0; }
.quiz-choice.ok::after {
  content: "○";
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  font-size: 1.8rem; font-weight: 900; line-height: 1;
  color: #2e8b57; pointer-events: none;
}
.quiz-choice.ng::after {
  content: "×";
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  font-size: 1.8rem; font-weight: 900; line-height: 1;
  color: var(--brand); pointer-events: none;
}
.quiz-choice:disabled { cursor: default; }
.quiz-result { text-align: center; font-weight: 800; font-size: 1.1rem; margin: 0 1rem 1.2rem; }

.reader-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.4rem 0 0.5rem; }
.primary-odai { background: var(--gold); box-shadow: 0 5px 0 var(--gold-dark), 0 10px 18px rgba(120,90,50,0.18); }
.primary-odai:active { box-shadow: 0 0 0 var(--gold-dark), 0 4px 10px rgba(120,90,50,0.16); }
#reader-mute.muted { color: var(--sub); border-color: var(--line); opacity: 0.8; }
.reader-audio-note { text-align: center; color: var(--sub); font-size: 0.72rem; margin: 0 0 1rem; }
.key-hint { text-align: center; color: var(--sub); font-size: 0.72rem; margin: 0.1rem 0 0.6rem; line-height: 1.9; }
/* DES-8④: 各「キー＝動作」を 1 かたまり(nowrap)にし、区切り「 ・ 」でのみ折り返す
   （句の途中や ／ で不自然に折れないように）。<wbr> が区切り直後を改行点にする。 */
.key-hint .kh-seg, .key-hint .kh-sep { white-space: nowrap; }
.key-hint b {
  color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 6px;
  padding: 0.02rem 0.4rem; font-weight: 800; box-shadow: 0 1.5px 0 var(--line); white-space: nowrap;
}

/* ---- あそびかた（説明書） ---- */
.guide-games { display: grid; gap: 0.9rem; margin-bottom: 1.5rem; }
@media (min-width: 620px) { .guide-games { grid-template-columns: 1fr 1fr; } }
.guide-game { background: var(--card); border: 2.5px solid var(--line); border-left: 8px solid var(--teal); border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.gg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.gg-name { font-weight: 800; font-family: "Noto Sans JP", sans-serif; font-size: 1.05rem; }
.gg-tag { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--gold-dark); background: #fdf4e2; border-radius: 999px; padding: 0.12rem 0.6rem; white-space: nowrap; }
.gg-desc { font-size: 0.84rem; color: var(--sub); margin: 0.2rem 0 0.6rem; }
.gg-meta { display: flex; align-items: center; gap: 0.8rem; font-size: 0.75rem; color: var(--sub); }
.gg-go { margin-left: auto; background: var(--teal); border: none; color: #fff; font-weight: 800; font-size: 0.8rem; border-radius: 999px; padding: 0.35rem 0.9rem; box-shadow: 0 3px 0 var(--teal-dark); }
.gg-go { min-height: 44px; }
.gg-go:active { transform: translateY(3px); box-shadow: 0 0 0 var(--teal-dark); }
.guide-h { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.15rem; margin: 1.6rem 0 0.3rem; }
.guide-sub { font-weight: 800; color: var(--navy-dark); margin: 1.1rem 0 0.4rem; font-size: 0.92rem; }
.om-cat { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--terra-dark); background: #ecf6e1; border-radius: 999px; padding: 0.16rem 0.6rem; display: inline-block; margin: 0.6rem 0 0.3rem; }
.om-list { display: grid; gap: 0.3rem; margin-bottom: 0.4rem; }
.guide-odai-group { margin-bottom: 0.6rem; }
.guide-odai-group > summary { color: var(--navy-dark); }
.guide-odai-group .om-list { padding: 0 0.65rem 0.65rem; }
.om-row { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.om-row.na { opacity: 0.6; }
.om-badge { font-size: var(--fs-floor-bold); font-weight: 800; border-radius: 999px; padding: 0.12rem 0.6rem; white-space: nowrap; }
.om-badge.ok { background: #eaf7ec; color: #3c8a40; }
.om-badge.na { background: #f0e9d8; color: var(--sub); }

/* ---- フラッシュカード ---- */
.flash-dir { display: flex; gap: 0; background: #fff; border: 2.5px solid var(--line); border-radius: 999px; padding: 0.3rem; margin: 0 auto 1.3rem; max-width: 340px; }
.flash-dir button { flex: 1; border: none; background: none; border-radius: 999px; padding: 0.55rem; font-weight: 800; color: var(--sub); font-size: 0.9rem; }
.flash-dir button.on { background: var(--teal); color: #fff; }
.flash-stage { display: flex; flex-direction: column; align-items: center; }
/* justify-content:flex-start で上端アンカー＝タップで答えが増えても国旗が動かない */
.flash-card { width: 100%; max-width: 420px; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.6rem; background: #fff; border: 3px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.2rem; box-shadow: var(--shadow-lg); position: relative; animation: cardpop 0.24s var(--ease-spring); }
/* 上段＝国旗（または国名）の固定スロット。下段＝答えの差し替え枠（高さ予約） */
.flash-top { width: 100%; min-height: 140px; display: flex; align-items: center; justify-content: center; }
.flash-bottom { width: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; }
.flash-flag { height: 130px; width: auto; border-radius: 12px; border: 3px solid #fff; box-shadow: var(--flag-ring), var(--shadow); }
.flash-name { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 1.6rem; text-align: center; }
.flash-detail { color: var(--sub); font-size: 0.85rem; text-align: center; line-height: 1.7; }
.flash-q { color: var(--teal-dark); font-weight: 800; }
.flash-hint { position: absolute; bottom: 0.6rem; font-size: 0.68rem; color: var(--sub); }
.flash-counter { color: var(--sub); font-size: 0.8rem; margin-top: 0.8rem; }
.primary-flash { background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark), 0 10px 18px rgba(120,90,50,0.18); }
.primary-flash:active { box-shadow: 0 0 0 var(--teal-dark), 0 4px 10px rgba(120,90,50,0.16); }

/* ---- footer ---- */
.app-footer { max-width: 880px; margin: 2rem auto 0; padding: 1rem; text-align: center; color: var(--sub); font-size: 0.78rem; }
.app-footer p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1rem; }
.app-footer .link-btn { min-height: 44px; padding: 0 0.5rem; }

/* ---- カードであそぶ（home の購入導線）＋フッタのストアリンク ---- */
.home-shop { margin-top: 1.6rem; }
.shop-card {
  display: flex; flex-direction: column; gap: 0.65rem;
  background: var(--card); border: 2.5px solid var(--brand);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--brand) 24%, var(--line)), 0 12px 22px rgba(120, 90, 50, 0.12);
  transition: transform 0.12s var(--ease-spring), box-shadow 0.12s;
}
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 color-mix(in srgb, var(--brand) 32%, var(--line)), var(--shadow-lg); }
.shop-card:active { transform: translateY(0); box-shadow: 0 3px 0 color-mix(in srgb, var(--brand) 24%, var(--line)); }
.shop-card-head { display: flex; align-items: center; gap: 0.8rem; }
.shop-card-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #fdeae6; font-size: 1.7rem;
}
.shop-card-titles { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.shop-card-eyebrow { font-size: var(--fs-floor-bold); font-weight: 800; color: var(--brand-deep); }
.shop-card-title { font-weight: 800; font-size: 1.15rem; color: var(--ink); line-height: 1.7; }
.shop-card-title rt { font-size: 0.42em; }
.shop-card-note { font-size: var(--fs-floor); font-weight: 700; color: var(--sub); margin-left: 0.45rem; white-space: nowrap; }
.shop-card-desc { color: var(--sub); font-size: 0.88rem; line-height: 1.9; }
.shop-card-cta {
  align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 0.98rem;
  border-radius: 999px; padding: 0.6rem 1.3rem; min-height: 44px; white-space: nowrap;
  box-shadow: 0 3px 0 var(--brand-deep);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.12s;
}
.shop-card:hover .shop-card-cta { filter: brightness(1.06); }
.shop-card:active .shop-card-cta { transform: translateY(3px); box-shadow: 0 0 0 var(--brand-deep); }
.shop-card-cta rt { color: rgba(255, 255, 255, 0.85); }

.app-footer-shop { margin: 0.2rem 0 0; }
.app-footer-shop a { color: var(--brand-deep); font-weight: 800; text-decoration: none; }
.app-footer-shop a:hover { text-decoration: underline; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #7b3fc6;
  outline-offset: 3px;
}

/* ビュー遷移時にプログラムでフォーカスを移す見出し・コンテナ（tabindex="-1"、A11y-2）は
   キーボード操作で到達できないためフォーカス枠を描かない（SR への通知は維持される） */
[tabindex="-1"]:focus { outline: none; }

.link-btn, .reader-tabs button, .flash-dir button, .band-speak { min-height: 44px; }
.band-speak { min-width: 44px; }

@media (max-width: 480px) {
  .home-start-actions { grid-template-columns: 1fr; }
  .filter-bar { top: 66px; grid-template-columns: minmax(0, 1.7fr) minmax(128px, 1fr); }
  .compare-pick-head { align-items: flex-start; gap: 0.5rem; }
  .compare-pick-actions { flex-wrap: wrap; justify-content: flex-end; }
  .picker-filters { grid-template-columns: 1fr; }
  .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar-row { grid-template-columns: 1.2rem 44px auto 1fr auto; gap: 0.35rem; }
  .bar-name { font-size: var(--fs-floor-bold); }
  .data-table th { width: 42%; }
}

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

/* スクリーンリーダー専用（視覚的に隠しつつ SR には読ませる）。正誤・結果の通知に使う */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   ふりがな（ルビ）— 自動付与(app.js furiganaize)対応
   rt が上に乗るぶんの行間確保・濃色背景での rt 配色・大見出しの rt 縮小。
   ============================================================ */
ruby { ruby-align: center; ruby-position: over; }
rt {
  font-size: 0.5em; font-weight: 500; color: var(--sub);
  line-height: 1.05; letter-spacing: 0.02em;
  -webkit-user-select: none; user-select: none;
}
/* 大きな見出し系は rt を相対的に小さく（嵩張り・かぶり防止） */
.home-title rt, .view-head rt, .mode-name rt, .reader-odai rt,
.play-odai rt, .detail-name rt, .flash-name rt, .compare-title rt,
.guide-h rt, .gg-name rt, .app-title rt, .quiz-q rt,
.age-label rt, .mode-label rt, .play-tile-name rt, .sub-tile-name rt, .howto-title rt,
.name-reveal-name rt { font-size: 0.42em; }
/* 濃色背景に乗る白文字のルビは明るく（暗い既定色だと読めないため） */
.app-header rt, .back-btn rt, .app-title rt, .app-badge rt,
.reader-band rt, .tag-feat rt, .mode-sub rt,
.chip.on rt, .chip-feat.on rt, .chip-flag.on rt,
.level-btn.on rt, .metric-btn.on rt, .gg-go rt,
.reader-tabs button.on rt, .flash-dir button.on rt,
.primary-btn rt { color: rgba(255, 255, 255, 0.85); }
/* ルビが上にせり出すぶん、本文ブロックの行間を確保して上の行と干渉させない */
.view-lead, .mode-desc, .mode-lead, .gg-desc, .flash-detail,
.reader-audio-note, .compare-foot, .play-hint,
.data-table th, .data-table td, .om-row, .odai-label,
.play-tile-desc, .sub-tile-desc, .howto-steps li, .howto-note, .name-reveal-sub { line-height: 1.95; }
/* 縦詰まり防止：ルビ付きの見出し・お題は行間を少し広げる */
.reader-odai, .play-odai, .home-title { line-height: 1.5; }