/* 「王に挑戦」と「殿堂と記録」の画面（M3）。土台は app.css の kg-* と qz-*。ここには足りない分だけを書く。
   色は app.css の変数（濃い緑 --c-king-*、金 --c-gold*）。演出は「門をくぐる」「戴冠」「ひばりが飛び去る」の3つだけ。
   動きをひかえる設定の人には、動かさずに終わりの姿を見せる（app.css が animation を止めるので、基本の姿を終わりの姿にしてある）。 */

/* ───── 掟の画面 ───── */
.kg { display: flex; flex-direction: column; }
.kg-view { display: flex; flex-direction: column; gap: 16px; }
.kg-hero { gap: 4px; }
.kg-start { font-size: 1.25rem; }
.kg-start[disabled] { opacity: 0.7; }
.kg-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: 16px; background: #FFFFFF; color: var(--c-ink); }
.kg-card p { margin: 0; font-size: 0.9375rem; line-height: 1.7; word-break: auto-phrase; }
.kg-card__title { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.45; word-break: auto-phrase; }
.kg-card__title .ic { margin-top: 0.2em; color: var(--c-ok-ink); }
.kg-card__btns { gap: 12px; }
.kg-card__admin { font-size: 0.8125rem !important; color: var(--c-sub); }
.kg-card__list { margin: 0; padding-left: 1.2em; font-size: 0.875rem; line-height: 1.7; }
.kg-links { display: flex; justify-content: center; }
.kg-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: var(--c-gold); font-size: 0.9375rem; font-weight: 700; }
.kg-link:hover { color: var(--c-gold-pale); }
.kg-link.qz-btn--text { color: var(--c-gold); font-size: 0.9375rem; }
.kg-tools { display: flex; justify-content: center; }
/* 日本語の文を、ことばの切れ目で折り返す（対応しているブラウザだけ） */
.kg .qz-btn, .kg-ov .qz-btn, .hl-plaque .qz-btn, .kg-lead, .kg-crowned__lead, .kg-semi__lead, .kg-ov__sub, .kg-ov__note,
.hl-lead, .hl-plaque__empty, .hl-plaque__note, .kg-alert { word-break: auto-phrase; }
.kg-switch .qz-switch__label { color: var(--c-king-sub); }
.kg-switch[aria-pressed="true"] .qz-switch__label { color: var(--c-gold); }
/* 濃い緑の上では、テーマの緑のつまみが見えにくいので金にする */
.kg-switch[aria-pressed="true"] .qz-switch__track { background: var(--c-gold-dark); }
.kg-alert { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--c-warn); background: var(--c-warn-pale); color: #5F3B00; font-size: 0.9375rem; font-weight: 700; line-height: 1.6; }

/* ───── 挑戦中：ヘッダーを端まで広げ、ふだんのヘッダーとフッターは隠す ───── */
body.is-playing > .qz-header, body.is-playing > .qz-footer { display: none; }
body.is-playing .qz-main { max-width: none; padding: 0; gap: 0; }
.kg-play { display: flex; flex-direction: column; min-height: 100vh; }
.kg-play__body { flex: 1; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; padding: 16px 20px 20px; }
.kg-header__no, .kg-header__name { white-space: nowrap; }
.kg-header .qz-quit { flex: none; white-space: nowrap; }
/* 文字が特大のときも、門の短い名前（4文字まで）が1行に収まるように */
html.fs-xl .kg-progress__name, html.fs-xl .kg-gates__name { font-size: 0.6875rem; }
.kg-header .qz-quit:hover { color: #FFFFFF; }

/* 時計と正誤は同じ場所に出す（高さをそろえて、画面が上下に動かないように） */
.kg-stage { display: flex; align-items: center; justify-content: center; min-height: 132px; }
.kg-stage.is-verdict { min-height: 0; } /* 正誤は時計より低いので、そのぶん「次へ」が上に来る */
.kg-stage > [data-kg="clock"] { width: 100%; }
.kg-verdict { width: 100%; color: var(--c-ink); }
.kg-verdict .qz-verdict__title { font-size: 1.75rem; }

.kg-q__body:focus, .kg-ov__title:focus { outline: none; } /* 読み上げのために移したフォーカス（押せる部品ではない） */
.kg-q__img { display: block; width: 100%; max-height: 220px; border-radius: 10px; background: var(--c-bg); object-fit: contain; }
.kg-q__audio { display: flex; }
.kg-missed__img { max-height: 160px; margin-bottom: 10px; }
.kg-missed__audio { display: block; width: 100%; margin-bottom: 10px; }
.kg-q__audio .qz-btn { border-color: var(--c-line-strong); }

/* 読む時間：金の線が伸びきると選択肢が出る */
.kg-read { display: flex; flex-direction: column; gap: 6px; }
.kg-read__bar { display: block; height: 6px; border-radius: 3px; background: var(--c-king-line); overflow: hidden; }
.kg-read__bar > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--c-gold); }
.kg-read__text { font-size: 0.8125rem; line-height: 1.5; color: var(--c-king-sub2); text-align: center; }

/* 選択肢：読むあいだは点線の枠だけ。出たら軽く浮き上がる */
.kg-choice--wait { border: 1.5px dashed var(--c-king-line); background: transparent; color: var(--c-king-sub2); cursor: default; }
.kg-choice--wait .kg-choice__key { border: 1.5px solid var(--c-king-line); background: transparent; color: var(--c-king-sub2); }
.kg-choice__dots { width: 40%; height: 8px; border-radius: 4px; background: var(--c-king-line); }
.kg-choice__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kg-choice .ic { flex: none; }
/* fill-mode は backwards：終わったあとは is-dim などの不透明度が効くように */
.kg-choice:not(.kg-choice--wait) { animation: kg-pop 0.2s ease-out backwards; }
.kg-choice:not([disabled]):not(.kg-choice--wait):hover { border-color: var(--c-gold-dark); }
.kg-choice:not([disabled]):not(.kg-choice--wait):active { transform: translateY(1px); }
.kg-choice.is-selected { border: 2px solid var(--c-gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.35); }
.kg-choice.is-correct .kg-choice__key { background: var(--c-ok); color: #FFFFFF; }
.kg-choice.is-wrong .kg-choice__key { background: var(--c-ng); color: #FFFFFF; }
.kg-choice.is-dim { opacity: 0.5; }
.kg-choice[disabled] { color: var(--c-ink); }
@keyframes kg-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 助け（選択肢を2つにしぼる） */
.kg-lifeline {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 14px;
  border: 1.5px solid var(--c-gold); border-radius: 12px; background: transparent; color: var(--c-gold);
  font-size: 0.9375rem; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.kg-lifeline:hover:not([disabled]) { background: rgba(233, 196, 106, 0.12); }
.kg-lifeline[disabled] { border-style: dashed; border-color: var(--c-king-line); color: var(--c-king-sub2); cursor: default; }
.kg-lifeline__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-gold); color: var(--c-ink); font-family: var(--font-head); font-weight: 900; font-size: 15px; line-height: 1; }
.kg-lifeline[disabled] .kg-lifeline__mark { background: var(--c-king-line); color: var(--c-king-sub2); }
.kg-lifeline__left { font-size: 0.8125rem; font-weight: 400; color: var(--c-king-sub); }

/* ひばり：お手つきのたびに1羽飛び去る（残った跡は点線） */
.kg-lives__icons { position: relative; }
.kg-bird.is-flying { position: absolute; margin: 0; pointer-events: none; animation: kg-fly 1.2s cubic-bezier(0.4, 0, 0.9, 0.6) forwards; }
@keyframes kg-fly {
  0% { opacity: 1; transform: none; }
  30% { transform: translate(14px, -18px) rotate(-8deg) scaleY(0.7); }
  55% { transform: translate(34px, -40px) rotate(-14deg) scaleY(1.1); }
  100% { opacity: 0; transform: translate(80px, -96px) rotate(-20deg) scale(0.6); }
}
/* 桜（設定 king.life_icon = sakura）：花の形。お手つきのたびに1輪、ひらひらと散る（残った跡は点線） */
.kg-bird--sakura { color: #F6C3D2; fill: currentColor; fill-opacity: 0.92; stroke: #FFFFFF; stroke-width: 0.9; stroke-opacity: 0.85; }
.kg-bird--sakura.is-lost { color: #8592AD; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-opacity: 1; stroke-dasharray: 2 2.4; }
.kg-bird--sakura.is-flying { animation: kg-fall 1.4s cubic-bezier(0.3, 0, 0.7, 1) forwards; }
@keyframes kg-fall {
  0% { opacity: 1; transform: none; }
  35% { transform: translate(10px, 16px) rotate(80deg) scale(0.95); }
  70% { transform: translate(-4px, 40px) rotate(170deg) scale(0.85); }
  100% { opacity: 0; transform: translate(14px, 72px) rotate(250deg) scale(0.7); }
}

.kg-timeout .qz-overlay__box { gap: 4px; }

/* ───── 重ねて見せる画面（門の紹介・門の突破・戴冠・再開） ───── */
.kg-ov { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(16, 18, 46, 0.88); overflow-y: auto; }
.kg-ov__box {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 400px; margin: auto; padding: 26px 20px 20px; border-radius: 20px;
  background: var(--c-king-deep); border: 2px solid var(--c-gold); color: #FFFFFF; text-align: center;
  box-shadow: 0 0 0 6px rgba(233, 196, 106, 0.14);
}
.kg-ov__art { display: flex; justify-content: center; }
.kg-ov__kicker { font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; line-height: 1.4; color: var(--c-gold); }
.kg-ov__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 1.625rem; line-height: 1.35; word-break: auto-phrase; overflow-wrap: anywhere; }
.kg-ov__sub { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--c-king-sub); }
.kg-ov__note { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--c-king-sub2); }
.kg-ov__box .qz-btn { margin-top: 8px; }
.kg-ov__box--intro { padding: 30px 20px; animation: kg-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.kg-ov__box--intro .kg-ov__kicker { font-size: 1.0625rem; }
.kg-ov__box--intro .kg-ov__title { font-size: 2.375rem; letter-spacing: 0.04em; }
.kg-ov__box--win .kg-ov__kicker { font-size: 1.125rem; letter-spacing: 0.08em; }
.kg-ov__box--win .kg-ov__note { padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--c-gold); color: var(--c-gold); font-weight: 700; }
.kg-ov__box--win .kg-ov__title { color: var(--c-gold); font-size: 1.875rem; }
@keyframes kg-rise { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* 門の絵：朱の柱と金の屋根。扉が左右にひらいて、奥が光る */
.kg-gateart { width: 200px; height: 150px; overflow: visible; }
.kg-gateart__glow { fill: var(--c-gold-pale); }
.kg-gateart__rays { fill: none; stroke: var(--c-gold-dark); stroke-width: 3; stroke-linecap: round; }
.kg-gateart__roof { fill: var(--c-gold); }
.kg-gateart__beam { fill: var(--c-gold-dark); }
.kg-gateart__pillar { fill: var(--c-ok); }
.kg-gateart__ground { fill: none; stroke: var(--c-king-line); stroke-width: 3; stroke-linecap: round; }
.kg-gateart__door { transform-box: fill-box; transform: scaleX(0.16); }
.kg-gateart__door--l { transform-origin: left center; }
.kg-gateart__door--r { transform-origin: right center; }
.kg-gateart__door rect { fill: var(--c-king-line); stroke: var(--c-gold); stroke-width: 2; }
.kg-gateart__door path { fill: none; stroke: var(--c-gold); stroke-width: 1.5; opacity: 0.55; }
.kg-gateart__door circle { fill: var(--c-gold); }
@media (prefers-reduced-motion: no-preference) {
  .kg-gateart__door { animation: kg-door 1s 0.3s cubic-bezier(0.55, 0, 0.25, 1) both; }
  .kg-gateart__glow { animation: kg-glow 1.1s 0.35s ease-out both; }
  .kg-gateart__rays { animation: kg-glow 0.9s 0.9s ease-out both; }
}
@keyframes kg-door { from { transform: scaleX(1); } to { transform: scaleX(0.16); } }
@keyframes kg-glow { from { opacity: 0; } to { opacity: 1; } }

/* 王冠（戴冠と結果） */
.kg-crown { width: 120px; height: 96px; overflow: visible; }
.kg-crown__body { fill: var(--c-gold); stroke: var(--c-gold-dark); stroke-width: 3; stroke-linejoin: round; }
.kg-crown__band { fill: var(--c-gold-dark); }
.kg-crown__gem { fill: var(--c-ok); }
.kg-crown__gem--s { fill: #FFFFFF; }
.kg-crown__tip { fill: var(--c-gold-pale); stroke: var(--c-gold-dark); stroke-width: 2; }
.kg-crown__rays path { fill: none; stroke: var(--c-gold-pale); stroke-width: 3; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .kg-ov__box--win .kg-crown { animation: kg-drop 0.9s 0.1s cubic-bezier(0.3, 1.45, 0.5, 1) both; }
  .kg-ov__box--win .kg-crown__rays { animation: kg-twinkle 1.4s 1s ease-in-out 3 both; }
}
@keyframes kg-drop { from { opacity: 0; transform: translateY(-70px) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes kg-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* 紙ふぶき（戴冠のときだけ。動きをひかえる設定では出さない） */
.kg-confetti { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kg-confetti__p { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation-name: kg-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes kg-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0.85; transform: translate(var(--kg-drift, 0), 108vh) rotate(var(--kg-spin, 360deg)); }
}

/* ───── 結果の画面 ───── */
.kg-crowned { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px 22px; border-radius: 20px; background: var(--c-king-deep); border: 2px solid var(--c-gold); text-align: center; }
.kg-crowned--lost { border-color: var(--c-king-line); }
.kg-emblem { margin-bottom: 6px; }
.kg-crowned__gen { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--c-gold); letter-spacing: 0.08em; }
.kg-crowned__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 2.125rem; line-height: 1.3; overflow-wrap: anywhere; }
.kg-crowned--lost .kg-crowned__title { font-size: 1.75rem; }
.kg-crowned__lead { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-king-sub); }
.kg-crowned__rest { margin: 8px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--c-gold); }
.kg-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.kg-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: 999px; border: 1.5px solid var(--c-gold); color: var(--c-gold); font-size: 0.8125rem; font-weight: 700; line-height: 1.6; }
.kg-tag .ic, .kg-gates__no .ic { color: inherit; }
/* 結果の門：抜けた門は金の丸に✓、終わった門は白の×、その先は薄く */
.kg-gates--result .kg-gates__item.is-done .kg-gates__no { background: var(--c-gold); color: var(--c-ink); }
.kg-gates--result .kg-gates__item.is-lost .kg-gates__no { border-color: #FFFFFF; color: #FFFFFF; }
.kg-gates--result .kg-gates__item.is-locked { opacity: 0.45; }
.kg-semi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--c-gold); background: rgba(233, 196, 106, 0.08); }
.kg-semi__seal { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--c-gold); color: var(--c-gold); transform: rotate(-8deg); }
.kg-semi__title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.45; color: var(--c-gold); }
.kg-semi__lead { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--c-king-sub); }
.kg-h2 { color: #FFFFFF; }
.kg-sub { font-size: 0.8125rem; line-height: 1.5; color: var(--c-king-sub2); }
.is-king .qz-results { color: var(--c-ink); }
.kg-rmeta { font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: var(--c-sub); }
.is-king .qz-btn--sub .ic { color: var(--c-theme-dark); }

/* ───── 殿堂と記録（ふつうの明るい画面。歴代の王だけを、濃い緑と金の額に入れる） ───── */
.hl-lead { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--c-sub); }
.hl-plaque {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 18px; border-radius: 20px;
  background: var(--c-king-bg); color: #FFFFFF; border: 2px solid var(--c-gold);
  box-shadow: inset 0 0 0 4px var(--c-king-bg), inset 0 0 0 5px rgba(233, 196, 106, 0.45);
}
.hl-plaque__head { display: flex; align-items: center; gap: 8px; color: var(--c-gold); }
.hl-plaque__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 1.375rem; line-height: 1.4; color: #FFFFFF; }
.hl-plaque__empty { margin: 6px 0; font-size: 0.9375rem; line-height: 1.7; color: var(--c-king-sub); }
.hl-plaque__note { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--c-king-sub2); }
.hl-plaque .qz-btn { margin-top: 10px; }
.hl-kings { list-style: none; margin: 4px 0 0; padding: 0; }
.hl-king { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--c-king-line); }
.hl-king:last-child { border-bottom: 1px solid var(--c-king-line); }
.hl-king__gen {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c-gold);
  color: var(--c-gold); font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; line-height: 1; white-space: nowrap;
}
.hl-king__gen b { margin: 0 1px; font-weight: 900; font-size: 1.5rem; }
.hl-king__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hl-king__name { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
.hl-king__name.is-private { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--c-king-sub2); }
.hl-king__date { font-size: 0.8125rem; line-height: 1.4; color: var(--c-king-sub); }
.hl-king__chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hl-chip { padding: 0 8px; border-radius: 999px; border: 1px solid var(--c-gold); color: var(--c-gold); font-size: 0.75rem; font-weight: 700; line-height: 1.8; }
.hl-sum { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hl-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1.5px solid var(--c-line); }
.hl-sum dt { font-size: 0.8125rem; line-height: 1.5; color: var(--c-sub); }
.hl-sum dd { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 1.75rem; line-height: 1.2; }
.hl-sum dd span { margin-left: 2px; font-size: 0.9375rem; font-weight: 700; }
/* 門ごとの到達：1本の系列なので色は1つ（テーマの緑）。値は棒の先に文字で出す */
.hl-reach { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 16px; background: #FFFFFF; border: 1.5px solid var(--c-line); }
.hl-reach__row { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3.5em; align-items: center; gap: 10px; font-size: 0.875rem; line-height: 1.4; }
.hl-reach__name { display: flex; align-items: center; gap: 4px; font-weight: 700; overflow-wrap: anywhere; }
.hl-reach__name .ic { color: var(--c-gold-dark); }
.hl-reach__bar { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--c-theme-pale2); overflow: hidden; }
.hl-reach__bar > span { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--c-theme); }
.hl-reach__n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-tablewrap { border-radius: 16px; background: #FFFFFF; border: 1.5px solid var(--c-line); overflow-x: auto; }
.hl-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.hl-table th, .hl-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line2); text-align: left; }
.hl-table tr:last-child th, .hl-table tr:last-child td { border-bottom: none; }
.hl-table thead th { font-size: 0.75rem; font-weight: 700; color: var(--c-sub); white-space: nowrap; }
.hl-table tbody th { font-weight: 700; }
.hl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-table .dim { color: var(--c-sub); }