/* 水平思考クイズ固有の見た目（共通は ../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 18px 16px; display: flex; flex-direction: column; align-items: center;
}
.prog { display: flex; justify-content: center; gap: 6px; min-height: 0; }
.prog:not(:empty) { margin-bottom: 6px; min-height: 16px; }
.prog i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C9C4B8; background: #FFFFFF; }
.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; }
.qhead { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 2px 0 2px; }
.lvtag { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 1px 10px; line-height: 1.6; background: #FFFFFF; color: #5B616B; border: 1px solid #C9C4B8; }
.ttl { font-size: 16px; font-weight: 700; color: #24496E; }
.ttl rt { font-weight: 400; }
/* 問題文: 紙のカードに書いたような大きめの文字 */
.problem { margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.85; letter-spacing: .02em; max-width: 34em; text-align: left; }
.problem rt, .qlist rt, .opts rt, .reveal rt, .secret rt { font-size: max(.5em, 10px); font-weight: 400; }
.card.pop .problem { animation: pop-in .22s ease-out both; }

/* ---------- タブ（質問する／真相を当てる） ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 12px auto 0; max-width: 600px; border-bottom: 2px solid var(--accent); }
.tab {
  appearance: none; font: inherit; font-size: 18px; font-weight: 700; min-height: 48px; cursor: pointer; padding: 6px 8px 4px;
  border: 2px solid var(--line-strong); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--surface); color: var(--ink-sub);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.tab rt { font-weight: 400; }
.tcount { font-size: 15px; margin-left: 2px; }
.scoreline { max-width: 600px; margin: 6px auto 0; font-size: 15px; color: var(--ink-sub); text-align: center; }
.scoreline b { color: var(--ink); font-size: 17px; }
.scoreline .miss { color: var(--ng); font-weight: 700; margin-left: 6px; }

/* ---------- 質問の一覧 ---------- */
.qlist { list-style: none; padding: 0; margin: 8px auto 0; max-width: 600px; display: grid; gap: 6px; }
.qbtn {
  appearance: none; font: inherit; width: 100%; min-height: 48px; display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 8px;
  text-align: left; cursor: pointer; padding: 6px 10px; border-radius: 8px; border: 2px solid #8C826F; background: #FFFDF7; color: #1F2328;
  font-size: 17px; font-weight: 700; line-height: 1.6; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur);
}
.qbtn:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.qbtn:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.qbtn .n { font: 700 14px/1 var(--font); color: #6B6457; text-align: center; }
.qbtn.asked { cursor: default; background: #F1EFE8; border-color: #C9C4B8; font-weight: 400; }
.qbtn.flash { animation: pop-in .22s ease-out; }
/* 答えの札（色＋文字。色だけに頼らない） */
.ans { display: inline-block; font-size: 15px; font-weight: 700; border-radius: 999px; padding: 1px 10px; line-height: 1.6; white-space: nowrap; border: 2px solid; }
.ans.Y { color: #1F5A37; background: #E6F3EA; border-color: #2E7D4F; }
.ans.N { color: #7A2424; background: #FBEDEC; border-color: #B23A3A; }
.ans.X { color: #4A4F57; background: #EEEDE9; border-color: #9A9DA3; border-style: dashed; }
.ans-inline { font-size: 1.1em; }
.ans-inline.Y { color: var(--ok); } .ans-inline.N { color: var(--ng); } .ans-inline.X { color: var(--ink-sub); }

/* ---------- 真相の選択肢 ---------- */
.asked-list { max-width: 600px; margin: 8px auto 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px 6px; background: var(--surface); }
.asked-list .lab { margin: 0; }
.asked-list ul { list-style: none; padding: 0; margin: 0; }
.asked-list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 15px; line-height: 1.6; }
.asked-list li:last-child { border-bottom: none; }
.asked-list rt { font-size: max(.5em, 10px); }
.guess-lead { max-width: 600px; margin: 8px auto 0; font-size: 15px; color: var(--ink-sub); }
.opts { display: grid; gap: 8px; width: 100%; max-width: 600px; margin: 8px auto 4px; }
.opt {
  appearance: none; font: inherit; min-height: 56px; border-radius: 8px; border: 2px solid #8C826F; background: #FFFDF7; color: #1F2328;
  font-size: 17px; font-weight: 700; line-height: 1.6; cursor: pointer; padding: 8px 34px 8px 10px; position: relative; text-align: left;
  display: grid; grid-template-columns: 1.6em 1fr; gap: 8px; align-items: center;
  filter: var(--shadow-piece); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur), opacity var(--dur);
}
.opt:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.opt:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.opt .n { font: 700 16px/1 var(--font); color: #6B6457; text-align: center; }
.opt.sel { background: #E3ECF5; border-color: #2F5D8A; box-shadow: 0 0 0 2px #2F5D8A inset; }
.opt.sel .n { color: #2F5D8A; }
.opt.ng { background: #FBEDEC; border-color: #B23A3A; color: #7A2424; opacity: .75; filter: none; cursor: default; text-decoration: line-through; }
.opt.gone { opacity: .35; border-style: dashed; filter: none; text-decoration: line-through; cursor: default; }
.opt .res { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 20px/1 var(--font); color: #B23A3A; }
.opt.shake { animation: shake .38s ease-out; }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
@keyframes pop-in { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .opt.shake, .card.pop .problem, .qbtn.flash { animation: none; } }

/* ---------- ヒント・答え ---------- */
.hintbox { max-width: 600px; margin: 10px 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 p + p { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #D9C58A; }
.hintbox .tag { font-size: 14px; font-weight: 700; color: #7A6320; margin-right: 6px; border-color: #D9C58A; }
.hintbox rt { font-size: max(.5em, 10px); }
.reveal { max-width: 600px; margin: 10px auto 0; }
.verdict { margin: 0 0 8px; font-size: 20px; font-weight: 700; text-align: center; }
.verdict.ok { color: var(--ok); } .verdict.ng { color: var(--ng); }
.verdict .mark { font-size: 26px; margin-right: 6px; }
.truth, .secret { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 8px; padding: 8px 14px 10px; line-height: 1.9; }
.truth p, .secret p { margin: 0 0 6px; }
.lab { font-size: 14px; font-weight: 700; color: var(--ink-sub); }
.tt { font-size: 19px; font-weight: 700; }
.story { font-size: 17px; }
.calc { font-size: 15px; color: var(--ink-sub); margin: 6px 0 0; text-align: center; }
.allq { margin-top: 8px; font-size: 16px; }
.allq summary, .gq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--accent); }
.allq ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.allq li { display: grid; grid-template-columns: 1.2em 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); line-height: 1.6; color: var(--ink-sub); }
.allq li.asked { color: var(--ink); font-weight: 700; }
.allq .key-mark { color: #D9A21B; font-weight: 700; }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars i { width: 16px; height: 16px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: var(--line-strong); opacity: .45; }
.stars i.on { background: #D9A21B; opacity: 1; }

/* ---------- みんなで ---------- */
.host { max-width: 600px; margin: 12px auto 0; text-align: center; }
.secret { text-align: left; margin-top: 8px; border-left-color: #D9A21B; }
.hostq { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 2px; font-size: 16px; }
.hostq li { line-height: 1.7; }
.secret .note { font-size: 15px; color: var(--ink-sub); }
.tally { max-width: 600px; margin: 12px auto 0; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; }
.tally-lead { margin: 0 0 6px; font-size: 15px; color: var(--ink-sub); }
.tally-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ans-btn {
  appearance: none; font: inherit; min-height: 56px; font-size: 19px; font-weight: 700; border-radius: 8px; border: 2px solid; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; filter: var(--shadow-piece);
}
.ans-btn.Y { color: #1F5A37; background: #E6F3EA; border-color: #2E7D4F; }
.ans-btn.N { color: #7A2424; background: #FBEDEC; border-color: #B23A3A; }
.ans-btn.X { color: #3B4048; background: #EEEDE9; border-color: #767B85; border-style: dashed; }
.ans-btn:active:not(:disabled) { transform: translateY(1px); }
.ans-btn:disabled { opacity: .5; cursor: default; filter: none; }
.ans-btn:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.ans-btn rt { font-weight: 400; font-size: max(.5em, 10px); }
.tally-count { margin: 8px 0 4px; font-size: 16px; }
.tally-count b { font-size: 22px; }
.btn.small { min-height: 44px; font-size: 16px; padding: 4px 14px; }
.gq { max-width: 600px; margin: 10px auto 0; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
.gq-list { margin: 0 0 8px; padding-left: 1.6em; line-height: 1.8; font-size: 16px; }

/* ボタンの列 */
.next-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; 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); }
#ctrl-row { margin-top: 12px; }

/* 設定の中のむずかしさ（件数つき） */
.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: 520px; }
.rlist li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 8px; font-size: 16px; padding: 4px 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.rlist .m { font-weight: 700; text-align: center; font-size: 17px; }
.rlist .m.ok { color: var(--ok); } .rlist .m.ng { color: var(--ng); }
.rlist .x { font-weight: 700; white-space: nowrap; }
.rlist rt { font-size: 10px; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .card { padding: 8px 10px 12px; }
  .problem { font-size: 18px; line-height: 1.8; }
  .tab { font-size: 17px; }
  .qbtn { font-size: 16px; padding: 6px 8px; gap: 6px; grid-template-columns: 1.3em 1fr auto; }
  .ans { font-size: 14px; padding: 1px 7px; }
  .opt { font-size: 16px; padding: 8px 30px 8px 8px; }
  .truth, .secret { padding: 8px 10px; }
  .story { font-size: 16px; }
  .ans-btn { font-size: 17px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --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: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */