/* 仲間はずれさがし固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { min-height: 0; }

/* ---------- 問題のカード（地は明るいまま。文字の色は固定） ---------- */
.card {
  background: var(--board); color: #1F2328; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 14px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 6px; }
.prog i {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C4B8; background: #FFFFFF; font-style: normal;
  font-size: 13px; 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.hint { background: #FFFFFF; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }
.prog i.ok::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.prog i.hint::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }
.prog i.ng::after { content: '×'; }

.qhead { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 2px 0 2px; }
.ftag, .lvtag { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 1px 10px; line-height: 1.6; }
.ftag { background: #E9EEF4; color: #24496E; border: 1px solid #B9C8D8; }
.lvtag { background: #FFFFFF; color: #5B616B; border: 1px solid #C9C4B8; }
.ask { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.ask small { display: block; font-size: 15px; font-weight: 400; color: #5B616B; margin-top: 2px; }
.verdict { margin: 8px 0 0; font-size: 20px; font-weight: 700; min-height: 1.4em; }
.verdict.ok { color: #2E7D4F; } .verdict.ng { color: #B23A3A; }
.verdict .mark { font-size: 26px; margin-right: 6px; }

/* ---------- 選択肢（ことばのカード） ---------- */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; margin: 12px auto 4px; }
.opts.five .opt:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.opt {
  appearance: none; font: inherit; min-height: 68px; border-radius: 8px; border: 2px solid #8C826F; background: #FFFDF7; color: #1F2328;
  font-size: 24px; font-weight: 700; line-height: 1.3; cursor: pointer; padding: 10px 10px 8px 30px; position: relative;
  filter: var(--shadow-piece); touch-action: manipulation; -webkit-tap-highlight-color: transparent; word-break: keep-all; overflow-wrap: anywhere;
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur);
}
.opt.kanji { font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDMincho", "MS PMincho", serif; font-size: 40px; line-height: 1.1; }
.opt.long { font-size: 20px; }
.opt rt { font-size: max(.45em, 10px); font-weight: 400; }
.opt:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.opt:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.opt .n { position: absolute; left: 8px; top: 6px; font: 700 14px/1 var(--font); color: #6B6457; }
.opt[aria-disabled="true"] { cursor: default; }
.opt.ok { background: #E6F3EA; border-color: #2E7D4F; color: #1F5A37; }
.opt.show { background: #E6F3EA; border-color: #2E7D4F; border-style: dashed; color: #1F5A37; }
.opt.ng { background: #FBEDEC; border-color: #B23A3A; color: #7A2424; }
.opt.dim { opacity: .6; }
.opt .res { position: absolute; right: 8px; top: 6px; font: 700 16px/1 var(--font); }
.opt.ok .res, .opt.show .res { color: #2E7D4F; } .opt.ng .res { color: #B23A3A; }
.opt.shake { animation: shake .38s ease-out; }
.card.pop .ask, .opts.pop .opt { animation: pop-in .22s ease-out both; }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
@keyframes pop-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .opt.shake, .card.pop .ask, .opts.pop .opt { animation: none; } }

/* ---------- 説明（答えのあと） ---------- */
.explain { max-width: 560px; margin: 8px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; font-size: 17px; line-height: 1.9; }
.explain p { margin: 0 0 6px; }
.explain .why { font-size: 17px; }
.explain table { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.explain caption { text-align: left; font-size: 14px; font-weight: 700; color: var(--ink-sub); padding-bottom: 2px; }
.explain th, .explain td { border-top: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.explain th { font-weight: 700; white-space: nowrap; }
.explain tr.odd th, .explain tr.odd td { background: var(--accent-soft); }
.explain tr.odd th::before { content: '★ '; color: var(--warn); }
.explain .kj { font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 22px; }
.explain .d { display: block; font-size: 14px; color: var(--ink-sub); }
.hintbox { max-width: 560px; margin: 8px auto 0; text-align: left; background: #FFFDF2; color: #3B3320; border: 2px solid #D9C58A; border-radius: 8px; padding: 8px 12px; font-size: 17px; line-height: 1.8; }
.hintbox p { margin: 0; }
.hintbox .tag { font-size: 14px; font-weight: 700; color: #7A6320; margin-right: 6px; }

/* ボタンの列 */
.next-row { display: flex; justify-content: center; margin: 10px 0 0; }
.next-row .btn { min-width: 10em; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.tag { font-size: 14px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 8px; color: var(--ink-sub); }

/* 設定の中の分野（件数つき） */
.choice .cnt { font-style: normal; font-size: 14px; color: var(--ink-sub); margin-left: 4px; font-weight: 400; }

/* 結果 */
.result-box { position: static; margin: 0 auto; max-width: 600px; }
.result-box .big { margin: 0 0 4px; }
.result-box .rlist { list-style: none; padding: 0; margin: 8px auto 12px; display: grid; gap: 2px; text-align: left; max-width: 560px; }
.rlist li { display: flex; align-items: baseline; gap: 8px; font-size: 16px; padding: 3px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rlist .m { width: 1.4em; flex: none; font-weight: 700; text-align: center; }
.rlist .m.ok, .rlist .m.hint { color: var(--ok); } .rlist .m.ng { color: var(--ng); }
.rlist .x { font-weight: 700; }
.rlist .k { color: var(--ink-sub); font-size: 14px; }
.rlist .f { font-size: 13px; color: var(--ink-sub); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.fstats { font-size: 15px; color: var(--ink-sub); margin: 4px 0 8px; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .card { padding: 8px 6px 10px; }
  .ask { font-size: 20px; }
  .opts { gap: 8px; }
  .opt { min-height: 60px; font-size: 20px; padding: 8px 6px 6px 24px; }
  .opt.kanji { font-size: 34px; }
  .opt.long { font-size: 17px; }
  .opt .n { left: 6px; top: 5px; }
  .explain { padding: 8px 10px 10px; font-size: 16px; }
  .explain table { font-size: 15px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */