/* ルイーズのWeb道具: 開発大臣が足した部品（tools.css に無いものだけ）。
   tools.css はデザイン大臣のファイルをそのまま写したもの（08_design/deliverables/ui/2026-09-27_web-tools-ui/tools.css）。
   ここでは tools.css の変数（色・大きさ・余白・角丸）だけを使い、新しい色は足さない。
   デザイン大臣に見てもらう箇所: 下の各部品（見本が無かったもの）。 */

/* hidden 属性を、部品の display（.tag の inline-flex など）より優先する */
[hidden] { display: none !important; }
.app { display: flex; flex-direction: column; gap: var(--stack); }
.app > .dock { margin-top: 0; }
.section-head { font-size: var(--fs-head); font-weight: 700; line-height: 1.4; letter-spacing: .02em; margin: var(--sp-2) var(--sp-2) 0; }
.hint { font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; }
.card .names, .card .seg, .card .rows { margin-top: var(--sp-3); }
.seg--wrap { flex-wrap: wrap; }
/* 2段目も1段目と同じ幅にそろえ、左から並べる（2段目だけ横に伸びると、格子が崩れて見える。デザイン大臣 2026-09-27） */
.seg--wrap > button { flex: 0 0 calc((100% - 4 * var(--sp-2)) / 5); padding: 0; }
.checkrow { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); font-weight: 700; }
.checkrow input { width: 24px; height: 24px; accent-color: var(--felt); }
.warn { font-size: var(--fs-small); font-weight: 700; }
.warn::before { content: "！ "; }
.prow__pts .sub { display: block; font-family: var(--f-text); font-size: var(--fs-small); font-weight: 700; }
.field--area { min-height: 96px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.7; }

/* 表示の段の数字（タイマー） */
.timer { font-family: var(--f-num); font-size: var(--fs-display); line-height: 1.05; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }
.timerbox { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.timerbox .seg { width: 100%; }

/* ---- 人狼のGMツール ---- */
.tapcard { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60vh; border: 0; border-radius: var(--r-card);
  background: var(--c-card); color: var(--c-text); font-size: var(--fs-head); font-weight: 700; line-height: 1.6; white-space: pre-line; text-align: center; padding: var(--card-pad); cursor: pointer; }
.rolecard .rolehead { font-size: var(--fs-head); font-weight: 700; line-height: 1.4; }
.rolecard p + p { margin-top: var(--sp-2); }
.rolecard .mates { font-weight: 700; }
.bigline { font-size: var(--fs-head); font-weight: 700; line-height: 1.5; }
table.list { border-collapse: collapse; width: 100%; }
table.list th, table.list td { text-align: left; padding: var(--sp-2) var(--sp-1); font-size: var(--fs-body); }
table.list th { font-size: var(--fs-small); }
table.list tr.out td:not(:last-child) { text-decoration: line-through; }
dialog.confirm.roster { width: min(calc(100vw - 32px), 520px); max-height: 85vh; overflow: auto; }
.gmtools { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.gmtools .textbtn { margin-left: auto; }

/* ---- スタートプレイヤー決め ---- */
.fingerarea { position: relative; height: 58vh; min-height: 320px; border-radius: var(--r-card); background: var(--c-card);
  touch-action: none; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 「1人を選ぶ／順番を決める／チームに分ける」: 375pxで語の途中（「決め／る」）で折れていた。
   語の中では折らず、字の長さに合わせた幅にする。入らない狭い画面では、ボタンごと2段目に送る（デザイン大臣 2026-09-27） */
.card:has(+ .fingerarea) { padding: var(--sp-3); } /* 3つを1行に入れるため、このカードだけ内側を12pxにする */
.card:has(+ .fingerarea) > .seg:first-child { flex-wrap: wrap; gap: var(--sp-1); }
.card:has(+ .fingerarea) > .seg:first-child > button { flex: 1 1 auto; white-space: nowrap; letter-spacing: 0; padding: 0 var(--sp-1); }
.fingerarea__msg { position: absolute; inset: auto var(--card-pad) var(--card-pad); font-weight: 700; text-align: center; pointer-events: none; }
.finger { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 10px solid var(--felt);
  display: grid; place-items: center; font-family: var(--f-num); font-size: var(--fs-head); pointer-events: none; background: var(--c-card); color: var(--c-text); }
.finger.win { border-color: var(--yellow); transform: scale(1.3); }
.finger.lose { opacity: .25; }
.finger.t0 { border-color: var(--felt); } .finger.t1 { border-color: var(--yellow); } .finger.t2 { border-color: var(--mint); } .finger.t3 { border-color: var(--c-text); }
.ring { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--felt); width: calc(var(--p, 0) * 100%); }

/* ---- ラウンド制の得点表・スカルキング・ロストシティ ---- */
.roundnav { display: flex; gap: var(--sp-2); }
.lc-color { padding-top: var(--sp-3); }
.lc-color + .lc-color { margin-top: var(--sp-3); }
.lc-head { display: flex; align-items: center; gap: var(--sp-2); }
.lc-head .nm { font-weight: 700; min-width: 2em; }
.lc-head .stepper__val { font-size: var(--fs-body); min-width: 1.5em; }
.lc-head .btn2 { width: var(--tap); min-width: var(--tap); padding: 0; font-family: var(--f-num); }
.lc-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.lc-nums .btn2 { font-family: var(--f-num); padding: 0; }
.lc-nums .btn2[aria-pressed="true"] { background: var(--c-band); color: var(--c-on-band); }
.lc-calc { margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 700; }

/* ---- タギロンのメモ ---- */
.tg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.tg-grid .btn2 { flex-direction: column; gap: 0; padding: 0; line-height: 1.1; }
.tg-grid .btn2 .c { font-size: var(--fs-small); }
.tg-grid .btn2 .n { font-family: var(--f-num); font-size: var(--fs-head); }
.tg-grid .btn2.no { opacity: .35; text-decoration: line-through; }
.tg-grid .btn2.yes { background: var(--c-band); color: var(--c-on-band); }

/* ---- チーズの夜の読み上げ: 夜の間の画面（規則 5章14。帯・ボタン・黄色・時刻を出さない） ---- */
body.night { background: var(--ink); }
body.night .band, body.night .foot { display: none; }
.nightscreen { min-height: 80vh; display: grid; place-items: center; padding: var(--sp-6) var(--sp-8); }
.nightscreen p { color: #A0ACA5; font-size: var(--fs-body); font-weight: 500; line-height: 1.9; text-align: center; max-width: 20em; }

/* ---- 道具の一覧（site/index.html）: tools.css の .tgrid/.tcard を使う。列の幅だけ道具に合わせる ---- */
.list-page { max-width: 1232px; }
/* 書体が入って字の幅が広がり、1280pxの3列で「スタートプレイヤー決め」（切れ目の無い1語）がカードからはみ出した。
   切れ目は index.html の <wbr>（「スタートプレイヤー／決め」）で作り、それでも入らないときは字の間で折る（デザイン大臣 2026-09-27） */
.tcard__name, .band__title { overflow-wrap: anywhere; }
/* 説明の最後の行に「す。」だけが残らないようにする（対応するブラウザだけ効く。効かなくても今と同じ） */
.band__note, .tcard__desc { text-wrap: pretty; }

/* 1人に数字の欄が3つ以上ある行（スカルキング）: 375pxで名前が入らないため、番号の駒だけにする。名前は合計の帯で見る */
.rows--tight .prow__who .nm { display: none; }
/* 選ぶボタンが5つ並ぶとき（人数など）、375pxで「4人」が2行に折れないよう、左右の余白を小さくする */
.seg > button { padding: 0 var(--sp-1); }

/* ---- プライバシーポリシーのページ（デザイン大臣の依頼 2026-09-27: 見出しは見出しの段24px、本文16px・行間1.8、新しい部品なし） ---- */
.policy h2 { font-size: var(--fs-head); font-weight: 700; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt"; margin-top: var(--sp-8); }
.policy > * + * { margin-top: var(--sp-3); }
.policy h2 + * { margin-top: var(--sp-3); }
.policy p, .policy li { font-size: var(--fs-body); line-height: 1.8; }
.policy ul { list-style: disc; padding-left: 1.4em; }
.policy li + li { margin-top: var(--sp-1); }
.policy .policy__date { margin-top: var(--sp-8); }
/* 見出しを文節で折り、行の長さをそろえる（375pxで「情報」だけが2行目に落ちていた。デザイン大臣 2026-09-27） */
.policy h2 { word-break: auto-phrase; text-wrap: balance; overflow-wrap: anywhere; }

/* 合計の帯が5列（5人以上）のスマホ幅: 列の幅59pxに、書体（Dela Gothic One）24pxの3桁（例 450 = 65px）や4桁が入らず、隣の数字と重なった。
   5列のときだけ、合計を本文の段（16px）にする（-230 = 50px、1190 = 47px で入る）。字の大きさの段は増やさない（後1。デザイン大臣 2026-09-27） */
@media (max-width: 540px) {
  .totals[style*="--n: 5"] .totals__sum, .totals[style*="--n:5"] .totals__sum { font-size: var(--fs-body); line-height: 1.5; }
}

/* 数字の列（1回の点）: 書体16pxで「-230」が50pxになり、48pxの列を越えていた（後8。デザイン大臣の値 52px）。
   それでも入らない桁は、common.js の fitNumber が字を縮めて入れる（合計の帯も同じ。社長のiPhone確認 2026-09-27） */
.rows--multi .prow, .rows__head { grid-template-columns: minmax(0, 1fr) repeat(var(--k, 2), 56px) 52px; }
.totals__sum, .prow__pts { white-space: nowrap; }

/* スタートプレイヤー決め: 順番の数字（★・チーム名）を、指に隠れない場所（指の円の外、画面の中央の向き）にも大きく出す（社長のiPhone確認 2026-09-27） */
.finger__label { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-band); color: var(--c-on-band);
  font-family: var(--f-num); font-size: var(--fs-display); line-height: 1; pointer-events: none; }
.finger__label.lose { opacity: .25; }
/* チームの札は指の輪と同じ色（字: 駒の黄・淡いみどりの上は墨みどり 9.6／9.9）デザイン大臣 2026-09-27 */
.finger__label.t1 { background: var(--yellow); color: var(--ink); } .finger__label.t2 { background: var(--mint); color: var(--ink); } .finger__label.t3 { background: var(--c-text); color: var(--c-card); }