/* インサイダーゲームのタイマー: 共通の部品（tools.css・v2.css・extra.css）への差分だけ。
   UIUX大臣のB案「卓の真ん中に置く時計」の値（09_uiux/deliverables/screens/2026-09-28_インサイダー進行/insider.css）。
   タイマー88pxと面の反転は shared/brand/design-principles.md の例外（2026-09-28 社長承認）の条件どおり: 88pxは残り時間だけ・1画面に1つ、反転は話し合いの1段だけ、動きなし */

/* 1列だけ（パソコンでも左右に分けない。人狼GMと同じ幅560px） */
.play.solo { display: flex; flex-direction: column; max-width: 560px; min-height: 100dvh; }
.play.solo > .app2 { display: contents; }
@media (min-width: 900px) { .play.solo { padding: 24px; } }

/* 上の帯の題名: 375幅で「インサイダー／ゲームのタイマー」で折る（UIUX大臣の公開前の確認の直し1 2026-09-28。h1 に <wbr>） */
#heading { gap: 4px; }
#heading b { word-break: keep-all; letter-spacing: 0; }

/* 段の見出し: 段の名前（24px）と、右に「1 / 4」 */
.stagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 8px 0; }
.stagehead .section-head { margin: 0; }
.stagehead .step { font-family: var(--f-num); font-size: var(--fs-body); color: var(--c-hint); white-space: nowrap; }

/* 注意の1行（段A）: スカルキングの .sg__hint と同じ面（薄い地・13px） */
.note1 { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--c-field); font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; }
.note1 a { color: var(--c-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--felt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card p + p, .card p + .note1, .card .note1 + p { margin-top: var(--sp-3); }
.lead { font-size: var(--fs-body); font-weight: 700; line-height: 1.8; }

.grow { flex: 1; }

/* 面（上の帯と下のボタンの間を埋める） */
.face { flex: 1; min-height: 0; border-radius: var(--r-card); padding: var(--card-pad);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center;
  background: var(--c-card); color: var(--c-text); }
.face--band { background: var(--c-band); color: var(--c-on-band); }        /* 話し合い: 砂時計をひっくり返した＝面の色が反転 */
.face .big { font-family: var(--f-num); font-size: 88px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.face .word { font-size: var(--fs-display); font-weight: 700; line-height: 1.3; letter-spacing: .02em; font-feature-settings: "palt"; word-break: auto-phrase; }
.face .sub { font-size: var(--fs-head); font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; word-break: auto-phrase; }
/* 補足の文は語の途中で折らず、句読点のところで折る（UIUX大臣の依頼 2026-09-28。1行に入らない長い語だけは折ってはみ出しを防ぐ） */
.face .hint { max-width: 22em; word-break: keep-all; overflow-wrap: anywhere; }
.face .btn2 { min-width: 160px; }
.face--band .btn2 { background: var(--c-page); color: var(--c-text); }
.face .tag { height: 30px; font-size: var(--fs-body); }

/* 夜の数（i01b・i02b・i03b のあとの 5・4・3秒を数える。社長の決定 追記175・177。チーズの .nightscreen2__count の考え方）
   時計（88px の .big）と見分けがつくよう、数字だけ・一回り小さい 48px（--fs-display）・字の色は本文と同じ（UIUX大臣の確認で確定 2026-09-28）。
   数えていない間も高さを取っておき、文が上下に動かないようにする */
.face .count { font-family: var(--f-num); font-size: var(--fs-display); line-height: 1; min-height: 1em; font-variant-numeric: tabular-nums; color: var(--c-text); }
.face .count[data-off] { visibility: hidden; }

/* 投票・結果: 二択は縦に、間16px（逆の意味のボタン） */
.choices2 { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.choices2 .btn2 { width: 100%; min-height: var(--btn-h); background: var(--c-card); }
.q { font-size: var(--fs-head); font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; word-break: auto-phrase; }

/* 375×667 は詰める */
@media (max-height: 700px) and (max-width: 899px) {
  .face { padding: 16px; gap: 8px; }
}

/* 暗い表示: 話し合いの面は紙の白に墨みどりの字へ反転する（カード #17493A と卓の緑の差が小さいため） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .face--band { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="light"]) .face--band .btn2 { background: var(--base); color: var(--ink); }
}
:root[data-theme="dark"] .face--band { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .face--band .btn2 { background: var(--base); color: var(--ink); }