/* 国旗クイズ固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { min-height: 180px; container-type: inline-size; }
ruby rt { font-size: .5em; font-weight: 400; }

/* ---------- 国旗の画像（縦横比は国ごとの元の比のまま。枠を1本） ---------- */
img.flag { display: block; height: auto; max-width: 100%; box-shadow: 0 0 0 1px rgba(31, 35, 40, .28); background: #FFFFFF; user-select: none; -webkit-user-drag: none; }
img.flag.shaped { box-shadow: none; background: transparent; filter: drop-shadow(0 0 .6px rgba(31, 35, 40, .7)); }

/* ---------- 問題のカード（地は明るいまま。文字の色は固定） ---------- */
.card {
  background: var(--board); color: #1F2328; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 12px; text-align: center; min-height: 250px; display: flex; flex-direction: column; align-items: center;
}
.card[data-kind="flag"], .card[data-kind="cap"] { min-height: 0; }
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 2px; }
.prog i {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C4B8; background: #FFFFFF; font-style: normal;
  font-size: 14px; line-height: 1; font-weight: 700; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.prog i.now { border-color: #2F5D8A; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F5D8A; }
.prog i.ok { background: #2E7D4F; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }
.prog i.ok::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; }
.prog i.ng::after { content: '×'; }

.ask { margin: 4px 0 6px; font-size: 18px; font-weight: 700; color: #5B616B; min-height: 1.6em; }
.ask.ok { color: #2E7D4F; }
.ask.ng { color: #B23A3A; }
.qarea { width: 100%; display: flex; flex-direction: column; align-items: center; }
.qarea.pop { animation: pop-in .22s ease-out; }
.qflag { display: flex; align-items: center; justify-content: center; height: clamp(130px, 38cqw, 210px); width: 100%; }
.qflag img.flag.big { max-height: 100%; width: auto; max-width: min(100%, 330px); }
.qname { margin: 8px 0 0; font-size: clamp(22px, 6cqw, 30px); font-weight: 700; min-height: 1.9em; line-height: 1.5; }
.qname.show { animation: fade-up .25s ease-out; color: #2E7D4F; }
.qtitle { margin: 12px 0 0; font-size: clamp(28px, 8.5cqw, 44px); font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.qtitle .alias, .qname .alias { font-size: .55em; color: #5B616B; font-weight: 700; margin-left: 4px; }
.qsub { margin: 4px 0 8px; color: #5B616B; font-size: 16px; }
.qrow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.qrow img.flag.mid { width: auto; height: clamp(60px, 18cqw, 96px); max-width: 45%; }
.qrow .qtitle { margin: 0; font-size: clamp(24px, 7cqw, 38px); }
.qcap { margin: 10px 0 4px; font-size: clamp(20px, 5.4cqw, 28px); font-weight: 700; color: #5B616B; }
.qcap.show { color: #2E7D4F; animation: fade-up .25s ease-out; }
@keyframes fade-up { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }

/* ---------- 4択 ---------- */
.choices4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 580px; margin: 12px auto 0; }
.opt {
  appearance: none; font: inherit; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 12px; text-align: left; position: relative;
  border-radius: var(--radius); border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.opt .n { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.opt .t { font-size: clamp(18px, 4.8vw, 23px); font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.opt .t.long { font-size: clamp(15px, 3.9vw, 19px); }
.opt .t .alias { font-size: .7em; color: var(--ink-sub); margin-left: 2px; }
.opt:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
.opt:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.opt:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.opt.ng { border-color: var(--ng); color: var(--ng); background: transparent; cursor: default; }
.opt.ng .t { text-decoration: line-through; text-decoration-thickness: 2px; }
.opt.ng .n { border-color: var(--ng); color: var(--ng); }
.opt.ng.shake { animation: shake .35s ease-out; }
/* 正解の選択肢: 成功の色の地に、白ではなく背景の色の文字（ライト・ダークとも 4.5:1 以上。D12） */
.opt.ok { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.opt.ok .n { border-color: var(--bg); color: var(--bg); background: transparent; }
.opt.ok .t .alias { color: var(--bg); }
.opt.show { border-color: var(--ok); border-width: 3px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
/* 国旗を選ぶ4択: 国旗は同じ大きさの枠に元の比のまま入れる */
.choices4.flags .opt { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 8px 6px; min-height: 0; }
.choices4.flags .opt .n { position: absolute; left: 6px; top: 6px; z-index: 1; }
.choices4.flags .fbox { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(84px, 24vw, 130px); }
.choices4.flags img.opt-flag { max-height: 100%; width: auto; max-width: calc(100% - 28px); }
.choices4.flags .fname { font-size: 15px; font-weight: 700; line-height: 1.3; }
.choices4.flags .opt.ng img.opt-flag { opacity: .45; }
.choices4.flags .opt.ok { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); }
.choices4.flags .opt.ok .n { background: var(--ok); color: var(--bg); border-color: var(--ok); }

/* ---------- 国の説明（まちがえたとき） ---------- */
.info, .hintbox {
  margin: 10px auto 0; max-width: 580px; box-sizing: border-box; border-radius: var(--radius); padding: 10px 12px; text-align: left;
  background: var(--board); border: 2px solid #B23A3A; color: #1F2328; font-size: 16px;
}
.hintbox { border: 2px dashed #B7791F; }
.hintbox p { margin: 0; }
.info-main { display: flex; gap: 12px; align-items: flex-start; }
.info img.info-flag { width: 110px; flex: none; margin-top: 4px; }
.info img.info-flag.shaped { width: 70px; }
.info-text { min-width: 0; flex: 1; }
.info-name { margin: 0; font-size: 22px; font-weight: 700; color: #B23A3A; line-height: 1.5; }
.info-name .alias { font-size: .65em; color: #5B616B; margin-left: 4px; }
.info-formal { margin: 0 0 4px; font-size: 14px; color: #5B616B; }
.info-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0; }
.info-dl dt { font-weight: 700; color: #5B616B; font-size: 14px; padding-top: 2px; white-space: nowrap; }
.info-dl dd { margin: 0; line-height: 1.6; }
.info-dl dd small { color: #5B616B; font-size: 14px; }
.info-picked { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #E2DED4; font-size: 15px; }
.info-picked img.flag.mini { width: 56px; flex: none; }
.info-picked img.flag.mini.shaped { width: 36px; }
.info-picked p { margin: 0; }
.info .look { display: inline-block; margin-left: 6px; font-size: 14px; color: #B7791F; border: 1.5px solid #B7791F; border-radius: 999px; padding: 0 8px; line-height: 1.6; }

.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
#next { min-width: 120px; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 64px; text-align: right; margin-left: auto; }
.turnbar .status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; vertical-align: middle; color: var(--accent); }
.tag.retry { color: var(--ng); }

/* ---------- 設定 ---------- */
.scopes .choice span .cnt { font-style: normal; font-size: 14px; color: var(--ink-sub); margin-left: 4px; font-weight: 400; }
.hint.seen { margin: -4px 0 8px; }

/* ---------- 結果 ---------- */
.result-box { position: static; margin: 0 auto; max-width: 580px; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.result-box .weak { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.result-box .weak span { border: 2px solid var(--ng); border-radius: 6px; padding: 4px 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.35; font-size: 14px; }
.result-box .weak span b { color: var(--ng); }
.result-box .weak img.flag.tiny { height: 30px; width: auto; }
.callout { z-index: 5; top: 30%; }

/* ---------- 解説の国旗一覧 ---------- */
.flag-list { list-style: none; padding: 0; margin: 8px 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.flag-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 1.4; }
.flag-list li .fl { height: 64px; display: flex; align-items: center; }
.flag-list img.flag { height: 60px; width: auto; max-width: 140px; }
.flag-list b { font-size: 15px; }
.flag-list small { color: var(--ink-sub); }
.credit { margin: 6px 0 0; font-size: 14px; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .card { min-height: 220px; padding: 8px 6px 10px; }
  .opt { min-height: 56px; padding: 4px 8px; gap: 6px; }
  .opt .n { width: 24px; height: 24px; font-size: 14px; }
  .choices4.flags .opt { padding: 6px 4px 4px; }
  .info img.info-flag { width: 80px; }
  .info-name { font-size: 19px; }
  .controls .btn.icon { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .qarea.pop, .qname.show, .qcap.show, .opt.ng.shake { animation: none; }
}
.howto img.narrow { max-width: 560px; }
/* 英語のページ: 手番のバーの文が長いので、スマホ幅では時計まで1行に収まるよう少し小さく（日本語のページには効かない） */
@media (max-width: 420px) { :root:lang(en) .turnbar .st-text { font-size: 15px; } :root:lang(en) .timer { min-width: 48px; } }
/* 英語のページ: 4択の国名の別名（Ivory Coast など）は次の行に */
:root:lang(en) .opt .t .alias { display: block; margin-left: 0; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */