/* 語彙力年齢テスト：辞書の紙と藍のインク */
:root {
  --accent: #a8322d; --accent-ink: #ffffff; --accent-soft: #f6e2dc;
  --gn-paper: #fbf6ea; --gn-paper-2: #efe5cd; --gn-ink: #1f2a44; --gn-ink-soft: rgba(31, 42, 68, .55); --gn-mt: #2f4a7a;
  --serif: "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d;
    --gn-paper: #1f1d19; --gn-paper-2: #2b2720; --gn-ink: #ece4d2; --gn-ink-soft: rgba(236, 228, 210, .5); --gn-mt: #8fb0e8;
  }
}
:root[data-theme="dark"] {
  --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d;
  --gn-paper: #1f1d19; --gn-paper-2: #2b2720; --gn-ink: #ece4d2; --gn-ink-soft: rgba(236, 228, 210, .5); --gn-mt: #8fb0e8;
}
.mn-title { font-family: var(--serif); letter-spacing: .04em; }

/* ヒーロー：開いた本 */
.gn-hero { position: relative; height: 180px; border-radius: var(--radius); background: radial-gradient(circle at 50% 30%, var(--gn-paper), var(--gn-paper-2)); border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.gn-book { width: min(320px, 92%); height: auto; margin-bottom: 6px; }
.gn-book-page { fill: var(--surface); stroke: var(--gn-ink-soft); stroke-width: 2; }
.gn-book-spine { stroke: var(--gn-ink-soft); stroke-width: 2; }
.gn-book-lines path { fill: none; stroke: var(--gn-ink-soft); stroke-width: 2; opacity: .45; stroke-linecap: round; }
.gn-fly { position: absolute; font-family: var(--serif); font-weight: 800; color: var(--gn-ink); font-size: 22px; animation: gn-float 5s ease-in-out infinite; }
.gn-fly.f1 { left: 14%; top: 14px; }
.gn-fly.f2 { left: 44%; top: 4px; font-size: 26px; color: var(--accent); animation-delay: -1.5s; }
.gn-fly.f3 { right: 14%; top: 18px; animation-delay: -3s; }
.gn-fly.f4 { right: 33%; top: 46px; font-size: 18px; opacity: .6; animation-delay: -2s; }
@keyframes gn-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }

/* 出題カード */
.gn-card { position: relative; background: var(--gn-paper); border: 1px solid var(--line); border-radius: var(--radius); min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; box-shadow: var(--shadow); }
.gn-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 14px; height: 1px; background: var(--gn-ink-soft); opacity: .35; }
.gn-card-no { position: absolute; top: 20px; left: 20px; font-size: 12px; color: var(--text-sub); }
.gn-word { font-family: var(--serif); font-size: clamp(56px, 18vw, 84px); font-weight: 800; color: var(--gn-ink); line-height: 1.15; letter-spacing: .06em; text-align: center; }
.gn-word.is-long { font-size: clamp(44px, 14vw, 72px); }
.gn-yomi { font-size: 15px; color: var(--text-sub); margin-top: 6px; letter-spacing: .1em; }
.gn-in { animation: gn-in .28s ease-out; }
@keyframes gn-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.gn-out-k { animation: gn-out-k .28s ease-in forwards; }
.gn-out-n { animation: gn-out-n .28s ease-in forwards; }
@keyframes gn-out-k { to { opacity: 0; transform: translateX(40px) rotate(4deg); } }
@keyframes gn-out-n { to { opacity: 0; transform: translateX(-40px) rotate(-4deg); } }
.gn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gn-btns .mn-btn { min-height: 64px; font-size: 19px; }

/* 採点スタンプ */
.gn-stamp { display: inline-flex; width: 120px; height: 120px; margin: 18px auto; border-radius: 50%; border: 6px double var(--accent); color: var(--accent); font-family: var(--serif); font-size: 34px; font-weight: 900; align-items: center; justify-content: center; transform: rotate(-12deg); animation: gn-stamp .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes gn-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: rotate(-12deg); opacity: 1; } }

/* 結果 */
.gn-result { text-align: center; background: var(--gn-paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px; }
.gn-r-label { margin: 0; font-size: 14px; color: var(--text-sub); }
.gn-result .mn-big small { font-size: 28px; margin-left: 4px; color: var(--text); }
.gn-r-age { font-size: 20px; margin: 6px 0; }
.gn-r-age b { font-size: 30px; color: var(--accent); font-family: var(--serif); }
.gn-warn { background: var(--warn-soft); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0; }
.gn-mt { width: 100%; height: auto; display: block; margin-top: 6px; }
.gn-mt-fill { fill: var(--gn-mt); opacity: .85; }
.gn-mt-base { stroke: var(--line); stroke-width: 2; }
.gn-mt-lb text { font-size: 10px; fill: var(--text-sub); text-anchor: middle; }
.gn-review summary { cursor: pointer; font-weight: 700; }
.gn-words { list-style: none; padding: 0; margin: 10px 0 0; }
.gn-words li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.gn-words b { font-family: var(--serif); font-size: 17px; }
.gn-y { color: var(--text-sub); margin-right: 6px; }
.gn-titles { list-style: none; padding: 0; margin: 6px 0 0; columns: 2; }
.gn-titles li.is-got { color: var(--accent); font-weight: 700; }

/* 図鑑 */
.gn-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.gn-zk { min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-sub); font-family: var(--serif); font-size: 15px; cursor: default; padding: 2px; }
.gn-zk.is-got { background: var(--gn-paper); color: var(--gn-ink); cursor: pointer; font-weight: 700; }