:root {
  --bg: #f4f1ea;
  --card-bg: #ffffff;
  --text: #2a241c;
  --muted: #6b6255;
  --accent: #d97b3f;
  /* 文字を載せる塗り（ボタン・バッジ）用。白文字で4.5:1以上になるよう、accentより少し濃くする */
  --accent-fill: #b3591f;
  --accent-text: #ffffff;
  --border: #e2dccf;
  --error: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a17;
    --card-bg: #2a2620;
    --text: #f2ede2;
    --muted: #b7ae9d;
    --accent: #e8935a;
    --accent-fill: #e8935a;
    --accent-text: #211a12;
    --border: #45402f;
    --error: #ff8b82;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
}

.card {
  width: 100%;
  max-width: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 12px;
}

h2 {
  font-size: 1.3rem;
  margin: 8px 0 4px;
  text-align: center;
}

.lead {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

form label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

/* iOS Safari の date input は固有の最小幅を持ち、width: 100% でもカードからはみ出す。
   appearance を外して最小幅を0にし、空欄時に高さが潰れないよう min-height を持たせる */
form input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

/* iOS Safari では値が中央寄せ・右寄せになることがあるため左に揃える */
form input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}

.error-text {
  color: var(--error);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

/*
 * hidden 属性は必ず効かせる。
 * UA既定の `[hidden] { display: none }` は、`.primary-button { display: block }` のような
 * 同じ詳細度の後続ルールに負ける。属性で隠したつもりの要素が見えてしまうため、ここで固定する。
 */
[hidden] {
  display: none !important;
}

.primary-button,
.secondary-button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
}

.primary-button {
  background: var(--accent-fill);
  color: var(--accent-text);
  font-weight: bold;
}

.secondary-button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* 回数を使い切ったときなど。押せないことは塗りの変化と、直下の残り回数の文言の両方で伝える */
.primary-button:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.primary-button:focus-visible,
.secondary-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 1日の残り回数。主ボタンの直下に小さく出す */
.quota-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.quota-status:empty {
  display: none;
}

.quota-status .quota-sub {
  display: block;
  font-size: 0.75rem;
}

.quota-status.is-exhausted .quota-main {
  color: var(--text);
  font-weight: bold;
}

.result-intro {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 8px;
}

/* 動物ビジュアル枠。画像の有無で高さが変わらないよう正方形で固定する */
.result-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  max-width: 100%;
  margin: 0 auto 4px;
}

.result-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* hidden属性が display 指定に負けないようにする */
.result-image[hidden],
.result-icon[hidden] {
  display: none;
}

.result-icon {
  font-size: 4rem;
  text-align: center;
  line-height: 1;
}

.result-main {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 4px 0 8px;
  white-space: nowrap;
}

.result-comment {
  text-align: center;
  font-size: 1rem;
  margin: 0 0 20px;
}

.result-detail {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.result-detail > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  gap: 8px;
}

.result-detail dt {
  color: var(--muted);
}

.result-detail dd {
  margin: 0;
  text-align: right;
}

.data-status-tag {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}

/* 代表値の根拠（「この数字について」）。既定で閉じ、本文より弱い階層にする。
   summary を display:flex にすると既定の三角が消えるため、目印は自前で用意する（トリビアの出典と同じ作り） */
.lifespan-disclosure {
  margin: 0 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.lifespan-disclosure-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.lifespan-disclosure-summary::-webkit-details-marker {
  display: none;
}

.lifespan-disclosure-summary::after {
  content: "▾";
  display: inline-block; /* inline のままだと transform が効かない */
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.lifespan-disclosure[open] > .lifespan-disclosure-summary::after {
  transform: rotate(180deg);
}

.lifespan-disclosure-summary:hover {
  color: var(--text);
}

.lifespan-disclosure-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.lifespan-disclosure-body {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.lifespan-disclosure-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 代表値そのものを述べる1文だけ、少し強くする */
.lifespan-disclosure-lead {
  color: var(--text) !important;
}

.lifespan-disclosure-sources {
  margin-top: 4px;
}

.lifespan-disclosure-sources-label {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0 0 4px;
}

.lifespan-disclosure-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.lifespan-disclosure-source-list li {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 出典リンクは1行ずつ並ぶため、指で押せる高さ（24px以上）を確保する */
.lifespan-disclosure-source-list a {
  color: var(--muted);
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
}

.lifespan-disclosure-source-list a:hover {
  color: var(--text);
}

.lifespan-disclosure-source-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lifespan-disclosure-source-title {
  display: block;
  font-size: 0.7rem;
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* 動きを減らす設定のときは、目印の回転をしない */
@media (prefers-reduced-motion: reduce) {
  .lifespan-disclosure-summary::after {
    transition: none;
  }
}

.disclaimer {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 8px;
}

.result-actions {
  margin-top: 8px;
}


/* 年齢連動ミニファクト（事実情報）。主役は換算結果なので控えめにする */
.age-fact {
  margin: 0 auto 16px;
  max-width: 30em;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------------- 図鑑 ---------------- */

/* 図鑑への入口。主要機能なので、主ボタン（塗り）と戻るボタン（線のみ）の中間の強さにする */
.encyclopedia-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}

.encyclopedia-cta:hover {
  border-color: var(--accent-fill);
}

.progress-tag {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.progress-tag:empty {
  display: none;
}

/* 発見の通知。主役は換算結果なので小さく出す */
.discovery-badge {
  margin: 0 auto 16px;
  padding: 4px 12px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
}

.screen-title {
  font-size: 1.2rem;
  margin: 0 0 12px;
  text-align: center;
}

.progress-summary {
  display: flex;
  gap: 12px;
  margin: 0 0 8px;
}

.progress-summary > div {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}

.progress-summary dt {
  color: var(--muted);
  font-size: 0.8rem;
}

.progress-summary dd {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.progress-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* 図鑑からの再挑戦・共有リンクで対象が決まっているときの案内 */
.pinned-target {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
}

/* シェア。結果の作られ方に関係なく同じ見た目を使う */
.share-block {
  margin: 0 0 16px;
}

.share-button {
  width: 100%;
}

.share-fallback {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.share-fallback-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.share-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* リンクとボタンを同じ見た目・同じ押せる高さにそろえる */
.share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.share-action:focus-visible,
.share-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.share-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* 一覧のしぼりこみ（すべて／獲得済み／未獲得）。
   選択中は「色」だけで示さず、枠線の太さ・太字・radioのドットの3つで示す。
   .is-selected は script.js が付ける（:has() に依存させず古いSafariでも同じ見え方にする） */
.catalog-filter {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.catalog-filter-legend {
  padding: 0;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.catalog-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-filter-option {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
}

.catalog-filter-option label {
  /* 文字を大きくせず、指で押せる高さ（24px以上）を確保する */
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.catalog-filter-option input {
  margin: 0;
  accent-color: var(--accent-fill);
  cursor: pointer;
}

.catalog-filter-option.is-selected {
  border-width: 2px;
  border-color: var(--accent);
  /* 枠線が太くなるぶん、周りのボタンがずれないように padding で吸収する */
  padding: 1px 9px 1px 7px;
}

.catalog-filter-option.is-selected label {
  font-weight: bold;
}

.catalog-filter-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-count {
  margin-left: 4px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.catalog-filter-option.is-selected .filter-count {
  color: inherit;
}

.encyclopedia-empty {
  margin: 0 0 16px;
  padding: 16px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.encyclopedia-grid {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 0件のときはgridの余白を出さない */
.encyclopedia-grid:empty {
  margin: 0;
}

.encyclopedia-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.encyclopedia-card:not(.is-locked):hover {
  border-color: var(--accent);
}

.encyclopedia-card:focus-visible,
.encyclopedia-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.encyclopedia-card.is-locked {
  cursor: default;
  background: transparent;
}

.card-name {
  font-size: 0.9rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.card-sub {
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  max-width: 100%;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 未遭遇・未発見はシルエットにして、何の生き物かは分からないようにする */
.thumb-locked img {
  filter: brightness(0);
  opacity: 0.14;
}

.thumb-mark {
  font-size: 2rem;
  line-height: 1;
  color: var(--muted);
}

.detail-poses-label {
  margin: 0 0 8px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.detail-poses-label span {
  color: var(--text);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.detail-variants {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-variants li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ---------------- シークレット解放 ---------------- */

/* 解放の知らせ。結果画面では解放された瞬間だけ出す */
.unlock-notice {
  margin: 0 auto 16px;
  padding: 8px 12px;
  max-width: 100%;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

.secret-section {
  margin: 0 0 20px;
}

.secret-heading {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.secret-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 4枠目。通常3枚と見分けがつくよう枠線を変える（色だけに頼らない） */
.secret-thumb {
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.secret-thumb.is-locked,
.secret-thumb.is-pending {
  background: var(--bg);
}

.secret-mark {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
}

.secret-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

.card-secret-tag {
  font-size: 0.7rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------------- 図鑑完全コンプリート ---------------- */

/* 図鑑一覧の達成表示。達成後だけ、進捗の下に控えめに出す */
.completion-badge {
  margin: 0 auto 16px;
  padding: 6px 14px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.completion-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 解放の知らせ（.unlock-notice）より一段上の演出。中央のモーダルにする */
.completion-dialog {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 28px 20px 20px;
  border: 2px solid var(--accent);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text);
  text-align: center;
  overflow: hidden auto;
}

.completion-dialog::backdrop {
  background: rgba(20, 16, 10, 0.55);
}

.completion-dialog[open] {
  animation: completion-pop 0.28s ease-out;
}

/* 紙吹雪より本文・ボタンを手前に置く */
.completion-dialog > :not(.confetti) {
  position: relative;
  z-index: 1;
}

.completion-mark {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.2;
}

.completion-title {
  margin: 8px 0 8px;
  font-size: 1.4rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.completion-count {
  margin: 0 auto 12px;
  padding: 2px 12px;
  width: fit-content;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.completion-text,
.completion-last,
.completion-thanks {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.completion-last {
  color: var(--muted);
  font-size: 0.8rem;
}

.completion-last:empty {
  display: none;
}

.completion-actions .primary-button {
  margin-top: 12px;
}

.completion-actions .secondary-button {
  margin-top: 8px;
}

/* 紙吹雪：静的な18個をCSSで1回だけ落とす（数秒で止まり、閉じると消える） */
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.confetti span {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
}

.completion-dialog.is-celebrating .confetti span {
  animation: confetti-fall 2.4s ease-in var(--d) 1 forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 420px, 0) rotate(540deg);
  }
}

@keyframes completion-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 動きを減らす設定では紙吹雪とポップを出さず、モーダルの内容だけにする */
@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }

  .completion-dialog[open] {
    animation: none;
  }
}

/* ---------------- 図鑑詳細のトリビア（事実情報） ---------------- */

.trivia-section {
  margin: 0 0 20px;
}

.trivia-heading {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.trivia-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.trivia-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}

.trivia-category {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.7rem;
}

.trivia-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* 出典は折りたたみ。本文より弱い階層にする */
.trivia-source-details {
  margin-top: 6px;
}

/* summary を display:flex にすると既定の三角が消えるため、目印は自前で用意する */
.trivia-source-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.trivia-source-summary::-webkit-details-marker {
  display: none;
}

.trivia-source-summary::after {
  content: "▾";
  display: inline-block; /* inline のままだと transform が効かない */
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.trivia-source-details[open] > .trivia-source-summary::after {
  transform: rotate(180deg);
}

.trivia-source-summary:hover {
  color: var(--text);
}

.trivia-source-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 未確認であることを、開かなくても分かるように小さく添える */
.trivia-review-chip {
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.65rem;
  white-space: nowrap;
}

.trivia-source-body {
  margin-top: 6px;
  padding-left: 2px;
}

.trivia-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.trivia-source-list li {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 出典リンクは1行ずつ並ぶため、指で押せる高さ（24px以上）を確保する。
   文字サイズは変えず、padding と min-height だけで領域を作る
   （.lifespan-disclosure-source-list a と同じ指定にそろえている） */
.trivia-source-list a {
  color: var(--muted);
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
}

.trivia-source-list a:hover {
  color: var(--text);
}

.trivia-source-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.trivia-source-title {
  display: block;
  font-size: 0.65rem;
  opacity: 0.85;
  overflow-wrap: anywhere;
}

.trivia-review-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.5;
}

.trivia-disclaimer {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

@media (max-width: 360px) {
  .card {
    padding: 20px 14px;
  }

  .result-visual {
    width: 104px;
    height: 104px;
  }

  .encyclopedia-grid {
    gap: 8px;
  }

  .progress-summary {
    gap: 8px;
  }

  .progress-summary dd {
    font-size: 1rem;
  }

  .thumb {
    width: 60px;
    height: 60px;
  }
}