/* =====================================================================
   ルイーズのWeb道具 共通の見た目（道具の小さなデザインシステム）
   デザイン大臣 2026-09-27 / 第5案「卓の上」に合わせる
   正: 08_design/deliverables/ui/2026-09-27_Web道具の見た目の規則.md
   ---------------------------------------------------------------------
   色の意味（1つの色に1つの意味。design-principles.md）
     卓の緑   #1F6B53  主役の面（上の帯、合計の帯、読み上げの面、選んだもの）
     駒の黄   #FFD447  押せるものだけ（主ボタン、開く矢印）。字は墨みどり
     淡いみどり #BFE3D0  札（非公式・準備中・1位・再生中）と番号の駒
     紙の白   #FFFDF7  カード。緑の面の上の文字
     薄い卓色 #EAF1EC  ページの地。カードの中の入力欄と二番手のボタンの地
     墨みどり #12332A  文字だけ
   文字は4段だけ: 表示48・見出し24・本文16・小13（会社サイトのスマホの段と同じ）
   角丸は3つだけ: カード24・ボタン16・入力欄と札10（番号の駒だけ丸）
   使わないもの: 影、グラデーション、飾りの線、赤（危ない操作は「確認」と言葉で伝える）
   ===================================================================== */

/* 数字とロゴだけの書体。開発では Google Fonts の text= で「0123456789+-−±:/.ルイーズ」だけを
   書き出したファイル（数KB）を同じ場所に置いて読み込む（外部に通信しない）。見本では下の @import を使う */
@font-face {
  font-family: "Louise Num";
  src: local("Dela Gothic One"), local("DelaGothicOne-Regular"), url("fonts/dela-num.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0030-0039, U+002B-002F, U+003A, U+00B1, U+2212, U+30A4, U+30BA, U+30EB, U+30FC; /* 数字・記号と「ルイーズ」だけ */
}

:root {
  /* ---- ブランドの6色（変えない） ---- */
  --felt:   #1F6B53;
  --yellow: #FFD447;
  --mint:   #BFE3D0;
  --paper:  #FFFDF7;
  --base:   #EAF1EC;
  --ink:    #12332A;

  /* ---- 役割の名前（部品はこちらだけを使う。ダークモードではここだけが変わる） ---- */
  --c-page:        var(--base);    /* ページの地 */
  --c-card:        var(--paper);   /* カード */
  --c-field:       var(--base);    /* カードの中の入力欄・二番手のボタン */
  --c-field-line:  var(--felt);    /* 入力欄の下の線（入力できる場所の目印。薄い卓色／紙の白の差が1.13しかないため） */
  --c-text:        var(--ink);
  --c-hint:        #536C64;        /* 見本の薄い字だけ（墨みどり70%＋薄い卓色。薄い卓色の上で4.9） */
  --c-band:        var(--felt);    /* 上の帯、合計の帯、読み上げの面 */
  --c-on-band:     var(--paper);
  --c-tag:         var(--mint);    /* 札、番号の駒 */
  --c-on-tag:      var(--ink);
  --c-press:       var(--yellow);  /* 押せるものだけ */
  --c-on-press:    var(--ink);
  --c-focus:       var(--felt);
  --c-backdrop:    rgba(18, 51, 42, .55);

  /* ---- 書体（2つ） ---- */
  --f-num:  "Louise Num", "Dela Gothic One", "Hiragino Maru Gothic ProN", sans-serif; /* 数字とロゴ「ルイーズ」だけ */
  --f-text: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* ---- 文字の大きさ（4段） ---- */
  --fs-display: 48px;  /* 画面の主役の数字1つ（タイマー、最終の1位の点、区切りの番号） */
  --fs-head:    24px;  /* 道具名、画面の見出し、読み上げる文、合計の数字、入力欄の数字 */
  --fs-body:    16px;  /* 本文、ボタン、名前 */
  --fs-small:   13px;  /* 札、項目の説明、帯の注意書き、ページ下部 */

  /* ---- 余白（4の倍数） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter: 12px;        /* 画面の端とカードの間（パソコンは24px） */
  --card-pad: 20px;      /* カードの内側 */
  --stack: 12px;         /* カードとカードの間 */
  --col: 560px;          /* 道具の列の最大幅（パソコンでも片手の道具の幅のまま） */

  /* ---- 角丸（3つ） ---- */
  --r-card: 24px;
  --r-btn:  16px;
  --r-field: 10px;

  /* ---- 押せる大きさ ---- */
  --tap: 44px;           /* 押せる場所の最小 */
  --btn-h: 56px;         /* 主ボタン */
  --btn2-h: 48px;        /* 二番手のボタン、入力欄 */

  color-scheme: light;
}

/* ---- ダークモード: 色相は増やさず、6色とその混ぜ合わせだけで作る ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-page: var(--ink);
    --c-card: #17493A;          /* 卓の緑40%＋墨みどり60% */
    --c-field: var(--ink);
    --c-field-line: var(--mint);
    --c-text: var(--paper);
    --c-hint: #A0ACA5;          /* 紙の白60%＋墨みどり。墨みどりの上で5.8 */
    --c-band: var(--felt);
    --c-focus: var(--yellow);
    --c-backdrop: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-page: var(--ink);
  --c-card: #17493A;
  --c-field: var(--ink);
  --c-field-line: var(--mint);
  --c-text: var(--paper);
  --c-hint: #A0ACA5;
  --c-band: var(--felt);
  --c-focus: var(--yellow);
  --c-backdrop: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* =====================================================================
   土台
   ===================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.num { font-family: var(--f-num); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 道具の列。下の余白は、ホームバーと下の帯の分 */
.tool {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--gutter) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--stack);
}
@media (min-width: 541px) { :root { --gutter: 24px; } }

/* 文字の段 */
.t-display { font-family: var(--f-num); font-size: var(--fs-display); line-height: 1.05; letter-spacing: 0; }
.t-head    { font-size: var(--fs-head); font-weight: 700; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt"; }
.t-body    { font-size: var(--fs-body); }
.t-small   { font-size: var(--fs-small); line-height: 1.7; letter-spacing: .06em; }
.t-strong  { font-weight: 700; }

/* =====================================================================
   1. 上の帯（道具名・非公式・ルイーズへのリンク）
   ===================================================================== */
.band {
  background: var(--c-band); color: var(--c-on-band);
  border-radius: var(--r-card);
  padding: var(--sp-2) var(--card-pad) var(--card-pad);
}
.band__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.band__home {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-right: var(--sp-2);
  font-family: var(--f-num); font-size: var(--fs-body); letter-spacing: .02em; line-height: 1;
  color: var(--c-on-band); text-decoration: none;
}
.band__home::before { /* ルイーズの印（緑の角丸の正方形に「ル」）の代わりの小さな印。画像を使わない */
  content: "ル"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--sp-2);
  border-radius: 7px; background: var(--paper); color: var(--felt); font-size: 14px;
}
.band__title { margin-top: var(--sp-1); font-size: var(--fs-head); font-weight: 700; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt"; word-break: auto-phrase; }
.band__note { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; }

/* =====================================================================
   2. 札と番号の駒（押せない）
   ===================================================================== */
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-field);
  background: var(--c-tag); color: var(--c-on-tag);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; line-height: 1; white-space: nowrap;
}
.token { /* プレイヤーの番号、順位。会社サイトの「番号の駒」と同じ形 */
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-tag); color: var(--c-on-tag);
  font-family: var(--f-num); font-size: var(--fs-body); line-height: 1; letter-spacing: 0;
}
.token--lg { width: 48px; height: 48px; font-size: var(--fs-head); }

/* =====================================================================
   3. カード
   ===================================================================== */
.card { background: var(--c-card); border-radius: var(--r-card); padding: var(--card-pad); }
.card__head { font-size: var(--fs-body); font-weight: 700; line-height: 1.5; }
.card__hint { margin-top: var(--sp-1); font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; }
.card > * + .rows { margin-top: var(--sp-3); }

/* =====================================================================
   4. ボタン
   ===================================================================== */
.btn { /* 主ボタン: 画面に1つ。下の帯に置く */
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: var(--btn-h); padding: 0 var(--sp-8); border: 0; border-radius: var(--r-btn);
  background: var(--c-press); color: var(--c-on-press);
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .06em; cursor: pointer; text-decoration: none;
}
.btn2 { /* 二番手のボタン: 地は薄い卓色（カードの上）。字は墨みどり・太字 */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn2-h); min-width: var(--btn2-h); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-btn);
  background: var(--c-field); color: var(--c-text);
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .04em; cursor: pointer;
}
.on-page .btn2, .btn2--page { background: var(--c-card); } /* 地の上に置くときは紙の白 */
.btn:disabled, .btn2:disabled { opacity: .4; cursor: default; }
.textbtn { /* 最初からやり直す など、めったに使わない操作。リンクと同じ下線 */
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-1); border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body); font-weight: 700; color: var(--c-text);
  text-decoration: underline; text-decoration-color: var(--felt); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
:root[data-theme="dark"] .textbtn { text-decoration-color: var(--mint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .textbtn { text-decoration-color: var(--mint); } }

/* 選ぶボタン（人数、対象の人）。選んだものは卓の緑の面＋紙の白の字＋「✓」 */
.seg { display: flex; gap: var(--sp-2); }
.seg > button { flex: 1; }
.choice[aria-pressed="true"], .seg > [aria-pressed="true"] { background: var(--c-band); color: var(--c-on-band); }
.choice { width: 100%; justify-content: flex-start; min-height: var(--btn-h); padding: 0 var(--sp-4); }
.choice[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.choices { display: flex; flex-direction: column; gap: var(--sp-2); }

/* 下の帯: 主ボタンを親指の届く場所に固定。ホームバーに重ならない。グラデーションは使わない */
.dock {
  position: sticky; bottom: 0; z-index: 10;
  margin: 0 calc(var(--gutter) * -1); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--c-page);
  display: flex; gap: var(--sp-2); align-items: stretch;
}
.dock .btn { flex: 1; }
.dock .btn2 { min-height: var(--btn-h); background: var(--c-card); }

/* =====================================================================
   5. 入力: プレイヤー名、数字
   ===================================================================== */
.field {
  width: 100%; min-height: var(--btn2-h); padding: 0 var(--sp-3);
  border: 0; border-bottom: 2px solid var(--c-field-line); border-radius: var(--r-field) var(--r-field) 4px 4px;
  background: var(--c-field); color: var(--c-text);
  font-size: var(--fs-body); /* 16px以上: iPhoneのSafariが勝手に拡大しない */
}
.field::placeholder { color: var(--c-hint); opacity: 1; }
.field:focus-visible { outline-offset: 0; }
.names { display: flex; flex-direction: column; gap: var(--sp-2); }
.name-row { display: flex; align-items: center; gap: var(--sp-3); }

.numbox { display: inline-flex; align-items: center; gap: var(--sp-1); }
.numfield { /* 数字の欄: 数字は Dela Gothic One の24px、右揃え */
  width: 4.2em; min-height: var(--btn2-h); padding: 4px var(--sp-2) 0; text-align: right;
  border: 0; border-bottom: 2px solid var(--c-field-line); border-radius: var(--r-field) var(--r-field) 4px 4px;
  background: var(--c-field); color: var(--c-text);
  font-family: var(--f-num); font-size: var(--fs-head); letter-spacing: 0;
}
.numfield::placeholder { color: var(--c-hint); opacity: 1; }
.numbox .btn2 { min-width: var(--tap); width: var(--tap); padding: 0; font-family: var(--f-num); font-size: var(--fs-body); }
.numbox__unit { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }

/* 1項目の中の、プレイヤーごとの行（区切りは線ではなく間隔） */
.rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.prow { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--btn2-h); }
.prow__who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.prow__who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.prow__pts { min-width: 3.6em; text-align: right; font-family: var(--f-num); font-size: var(--fs-body); letter-spacing: 0; }
.prow__pts small { font-family: var(--f-text); font-size: var(--fs-small); font-weight: 700; margin-left: 2px; }

/* 増減（人狼の配役の数など） */
.stepper { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--btn2-h); }
.stepper__label { flex: 1; font-weight: 700; }
.stepper__val { min-width: 2em; text-align: center; font-family: var(--f-num); font-size: var(--fs-head); }
.stepper .btn2 { width: var(--btn2-h); padding: 0; font-family: var(--f-num); font-size: var(--fs-head); }

/* =====================================================================
   6. 合計と順位
   ===================================================================== */
.totals { /* 入力の上に固定。キーボードやスクロールで隠れない */
  position: sticky; top: var(--sp-2); z-index: 5;
  background: var(--c-band); color: var(--c-on-band); border-radius: var(--r-btn);
  padding: var(--sp-2) var(--sp-3);
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--sp-2);
}
.totals__p { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.totals__nm { max-width: 100%; font-size: var(--fs-small); font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.totals__sum { font-family: var(--f-num); font-size: var(--fs-head); line-height: 1.1; letter-spacing: 0; }
.totals__rk { min-height: 22px; }
.totals__rk .tag { height: 22px; padding: 0 8px; }
.totals__rk .rk { font-size: var(--fs-small); font-weight: 700; }

.ranking { display: flex; flex-direction: column; gap: var(--sp-3); }
.ranking li { display: flex; align-items: center; gap: var(--sp-3); }
.ranking .nm { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .pt { font-family: var(--f-num); font-size: var(--fs-head); }
.ranking li:first-child .pt { font-size: var(--fs-display); }

/* =====================================================================
   7. 読み上げる文（GM）と音声の再生
   ===================================================================== */
.read { /* 声に出して読む文。緑の面に紙の白の大きな字 */
  background: var(--c-band); color: var(--c-on-band); border-radius: var(--r-card);
  padding: var(--sp-6) var(--card-pad);
  font-size: var(--fs-head); font-weight: 700; line-height: 1.6; letter-spacing: .02em; white-space: pre-line; word-break: auto-phrase;
}
.gm { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-body); }
.gm .tag { flex: none; transform: translateY(-1px); }

.player { /* 音声: 区切りの番号・状態・いま流れている文 */
  background: var(--c-band); color: var(--c-on-band); border-radius: var(--r-card); padding: var(--card-pad);
}
.player__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.player__count { display: flex; align-items: baseline; gap: var(--sp-2); }
.player__count .now { font-family: var(--f-num); font-size: var(--fs-display); line-height: 1; }
.player__count .all { font-family: var(--f-num); font-size: var(--fs-body); }
.player__text { margin-top: var(--sp-4); font-size: var(--fs-head); font-weight: 700; line-height: 1.6; letter-spacing: .02em; word-break: auto-phrase; }
.steps { display: flex; gap: 6px; margin-top: var(--sp-4); } /* 区切りの位置（押せない）。済んだもの＝淡いみどり */
.steps i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 253, 247, .22); }
.steps i.done { background: var(--mint); }

/* =====================================================================
   8. 確認
   ===================================================================== */
dialog.confirm {
  width: min(calc(100vw - 32px), 420px); padding: var(--sp-6); border: 0; border-radius: var(--r-card);
  background: var(--c-card); color: var(--c-text);
}
dialog.confirm::backdrop { background: var(--c-backdrop); }
.confirm__msg { font-size: var(--fs-body); font-weight: 700; line-height: 1.7; }
.confirm__row { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.confirm__row > * { flex: 1; }

/* =====================================================================
   9. ページ下部（道具の中）
   ===================================================================== */
.foot { padding: var(--sp-4) var(--sp-2) 0; font-size: var(--fs-small); line-height: 1.8; letter-spacing: .04em; }
.foot p + p { margin-top: var(--sp-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); margin-top: var(--sp-1); }
.link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--c-text); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--felt); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
:root[data-theme="dark"] .link { text-decoration-color: var(--mint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link { text-decoration-color: var(--mint); } }

/* =====================================================================
   10. 会社サイトのトップの道具カード（Studioで組む。見本 top.html / top-all.html と同じ値）
   文言: 名前／一言説明／人数／注記／ボタン「開く」（コンテンツ大臣 2026-09-27）
   ===================================================================== */
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tcard { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--paper); color: var(--ink); border-radius: 32px; padding: 28px; text-decoration: none; }
.tcard__face { flex: none; width: 56px; height: 56px; border-radius: 13px; background: var(--felt); display: grid; place-items: center; }
.tcard__face img { width: 36px; height: 36px; display: block; }
.tcard__name { font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; font-feature-settings: "palt"; word-break: auto-phrase; }
.tcard__desc { font-size: 16px; line-break: strict; }
.tcard__meta { display: flex; flex-direction: column; font-size: 13px; line-height: 1.7; }
.tcard__ppl { font-weight: 700; letter-spacing: .08em; }
.tcard__go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 16px;
  background: var(--yellow); font-weight: 700; letter-spacing: .06em; }
.tcard__go::after { content: ""; width: 8px; height: 8px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); }
@media (max-width: 540px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tcard { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; border-radius: 24px; padding: 20px; }
  .tcard__face { width: 48px; height: 48px; border-radius: 11px; }
  .tcard__face img { width: 30px; height: 30px; }
  .tcard__name { font-size: 24px; }
  .tcard__desc, .tcard__meta, .tcard__go { grid-column: 1 / -1; }
  .tcard__go { justify-content: center; width: 100%; margin-top: 4px; }
}

/* 補足 */
.numfield--s { width: 2.4em; }
.prow { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sp-1); }
.prow__who { flex: 1 1 7em; }
/* 1人に数字の欄が2つ以上ある項目（褒賞の1位・2位など）: 欄の名前は上に1回だけ。行は格子で揃える */
.rows--multi .prow, .rows__head {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--k, 2), 56px) 48px; gap: var(--sp-2); align-items: center;
}
.rows__head { font-size: var(--fs-small); font-weight: 700; line-height: 1.4; text-align: center; margin-bottom: calc(var(--sp-1) * -1); }
.rows__head span:last-child { text-align: right; }
.rows--multi .numfield { width: 100%; text-align: center; padding: 4px 0 0; }
.rows--multi .prow__pts { min-width: 0; }
.numbox .btn2 { font-size: var(--fs-head); }
/* 読み上げる長い文は、文節で折り返さない（auto-phrase は短い見出しだけ。長い文では行末が大きく空くため） */
.read, .player__text { word-break: normal; line-break: strict; }

/* ダークモードでは、卓の緑の「選んだもの」とカードの差が小さいので、淡いみどりの縁を足す（状態を伝える線だけ例外） */
:root[data-theme="dark"] .choice[aria-pressed="true"], :root[data-theme="dark"] .seg > [aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: -2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .choice[aria-pressed="true"], :root:not([data-theme="light"]) .seg > [aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: -2px; } }