/*
 * roulette — スタイル
 *
 * 実装仕様: docs/UI_KAWAII_2026-08.md
 *
 * ============================================================================
 * 意匠の非交渉（破ったら作り直し）
 * ============================================================================
 * 1. `box-shadow` を1つも書かない（`check:noshadow` が守る）。柔らかさを影で買わない
 * 2. **1px の薄い罫を並べない**。区切りは「面（--plate）と余白」で作る
 *    （現行は 1px alpha .10 が16箇所 = 1.23:1。カメラでモアレ、再エンコードで消える）
 * 3. グラデーション0・glassmorphism 0・回転バッジ0・絵文字0
 * 4. Inter / Poppins / Montserrat を足さない。書体は追加0バイト
 * 5. 余白の上限は 32px。余白を増やして「上品」にしない
 * 6. 騒ぐのは1点だけ。待機中に動くものは0
 *
 * ★ 地を明るくしたのは趣味ではなく**機能要件**。
 *   タブレットをカメラに向ける運用なので、暗い画面はリングライトを映して鏡になる。
 *   そのうえで「縁(--case)が緑/マゼンタ/白を、面(--plate)がダークを担保する」構造にしたので、
 *   **配信モードで色トークンを1つも切り替えない**。
 *
 * ★ `backdrop-filter` / `filter` を親要素に付けない（内側の position:fixed が壊れる）。
 */

:root {
  /* ---- 地と面（純白を使わない。C<=0.010 のごく薄い暖色。2026-08-16 K5 で1段ピンク寄りに） ---- */
  --bg: #f7f2f0;
  --plate: #fdfcfa; /* ★署名。盤面・結果・写真が必ず載る面 */
  --sunk: #efe3e1; /* 入力欄・沈む面 */

  /* ---- 筐体（全背景に対する境界を1色で担保する） ---- */
  --case: #3d3241;

  /* ---- 文字（実測コントラスト） ---- */
  --ink: #281f2c; /* on plate 15.49 */
  --ink-2: #574d5b; /* on plate  7.82 */
  --ink-3: #756c7a; /* on plate  4.90 ← これ以上薄くしない */
  --pin: #fbf6f1; /* on case  11.30 */

  /* ---- アクセント（既定＝さんご。利用者が6色から選べる。★ store.js DEFAULT_ACCENT と同じ値） ---- */
  --accent: #ff7172;
  --accent-ink: #281f2c; /* on accent 5.94 */
  /* 選択状態の淡い塗り（K4）。accent 16% を面に混ぜる。濃紫反転はクロマキー地の .chip だけに残す */
  --sel-bg: color-mix(in oklab, var(--accent) 16%, var(--plate));
  /* 静かな縁（開くカード等）。ink 14% を面に混ぜる（新しい色を足さない） */
  --line: color-mix(in srgb, var(--ink) 14%, var(--plate));
  /* 目立たせる地（「景品を回す」カード）。accent 8% ＝ 選択の --sel-bg（16%）より淡い。選択は縁で示すので両立する */
  --hi-bg: color-mix(in oklab, var(--accent) 8%, var(--plate));

  /* ---- 状態 ---- */
  --danger: #b3261e; /* on plate 6.37 */

  /* ---- 書体 ---- */
  --font-sans: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic',
    Meiryo, sans-serif;
  --font-display: 'Zen Kaku Gothic New', var(--font-sans);

  /* ---- 形（1トークンで配らない。入れ子で半径がズレる） ---- */
  --r-1: 4px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 22px;
  --r-pill: 999px;

  /* ---- 余白 ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* ---- 動き ---- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --e-out: cubic-bezier(0.2, 0, 0, 1);
  --e-emph: cubic-bezier(0.05, 0.7, 0.1, 1);
  --e-back: cubic-bezier(0.34, 1.3, 0.64, 1);

  --shell: 720px;
  --pad: clamp(16px, 5vw, 32px);

  /* ---- 地紋（K11）。96px タイルにハート 12px（#f4a7b3 .28）×2 と 4点スパークル 8px（#f6c454 .22）×2 を千鳥に。
          SVG data URI（CSP の img-src data: で許可済み）。差し替えはここ1箇所。回す画面には出さない ---- */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cg fill=%22%23f4a7b3%22 opacity=%22.28%22%3E%3Cpath d=%22M20 22c-2.6-3-7.5-2.4-8.6 1.5-.9 3.2 2 5.6 8.6 11 6.6-5.4 9.5-7.8 8.6-11-1.1-3.9-6-4.5-8.6-1.5z%22/%3E%3Cpath d=%22M68 70c-2.6-3-7.5-2.4-8.6 1.5-.9 3.2 2 5.6 8.6 11 6.6-5.4 9.5-7.8 8.6-11-1.1-3.9-6-4.5-8.6-1.5z%22/%3E%3C/g%3E%3Cg fill=%22%23f6c454%22 opacity=%22.22%22%3E%3Cpath d=%22M72 20l1.6 4.4L78 26l-4.4 1.6L72 32l-1.6-4.4L66 26l4.4-1.6z%22/%3E%3Cpath d=%22M24 68l1.6 4.4L30 74l-4.4 1.6L24 80l-1.6-4.4L18 74l4.4-1.6z%22/%3E%3C/g%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

/* ★ hidden 属性は display を明示した要素に負ける。実際に事故になった箇所 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   画面の切替（DOM は動かさない）
   =========================================================================== */

/*
 * ★ 画面が4つになったので「他を隠す」列挙をやめ、**既定で全部隠して1つだけ出す**。
 *   列挙式は画面が増えるたびに組合せが増え、書き忘れが**静かに二重表示**になる。
 *   `[hidden]` は別途 `!important` で殺しているので、シートやモーダルの状態は壊れない。
 */
/* body を1つ噛ませて詳細度を (0,1,1) にしておく。
   こうしておくと、あとから誰かが `.shell--play { display: flex }` と書いても勝てない */
body .shell--home,
body .shell--techo,
body .shell--wizard,
body .shell--templates,
body .shell--edit,
body .shell--play,
body #edit-top,
body #cta-bar {
  display: none;
}

body[data-screen='techo'] .shell--techo,
body[data-screen='home'] .shell--home,
body[data-screen='wizard'] .shell--wizard,
body[data-screen='templates'] .shell--templates,
body[data-screen='play'] .shell--play {
  display: flex;
}

body[data-screen='edit'] .shell--edit,
body[data-screen='edit'] #edit-top,
body[data-screen='edit'] #cta-bar {
  display: block;
}

body:not([data-screen='play']) #play-sheet {
  display: none;
}

/* ===========================================================================
   共通パーツ
   =========================================================================== */

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  appearance: none;
  border: none;
  background: var(--sunk);
  color: var(--ink);
  border-radius: var(--r-2);
  padding: 0 var(--s4);
  min-height: 44px; /* ★ タップ領域（WCAG 2.2 SC 2.5.8） */
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  transition: background var(--dur-1) var(--e-out), color var(--dur-1) var(--e-out);
}

/*
 * ★ hover は「マウスがある端末」だけに効かせ、詳細度は (0,1,0) に落とす。
 *   旧 `.btn:hover:not(:disabled)` は (0,3,0) で `.btn--spin` `.btn--go` `.btn--accent` (0,1,0) の
 *   橙に勝ち、しかもタッチ端末は :hover がタップ後も残るので、配信中いちばん大事な
 *   「回す」が最初のタップ以降ずっとベージュ（＝押せない色）に見えていた（2026-08-16 監査 A3）。
 */
@media (hover: hover) and (pointer: fine) {
  .btn:where(:hover:not(:disabled)),
  .btn--soft:hover:not(:disabled) {
    background: #e2dbd4;
  }
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--soft {
  background: var(--sunk);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover:not(:disabled),
  .btn--go:hover:not(:disabled),
  .btn--spin:hover:not(:disabled) {
    filter: brightness(0.96);
  }
}

.btn--danger {
  color: var(--danger);
}

/* 画面下に固定する1本ボタン */
.btn--go,
.btn--spin {
  width: 100%;
  min-height: 56px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.iconbtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iconbtn:hover {
  background: var(--sunk);
  color: var(--ink);
}

.count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.note {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: var(--s3) 0 0;
}

.note--warn {
  background: var(--sunk);
  border-radius: var(--r-2);
  padding: var(--s3) var(--s4);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

/* ===========================================================================
   ホーム（入口）

   ★ 4行だけ（第5段 §5-1・Hiroaki 指定）: ① Myルーレット ② 新しく作る ③ アプリの設定 ④ ルーレットテンプレート。
     配信直前に開く画面なので、これ以上足さない。主 CTA（accent 塗り）は ② だけ。
   =========================================================================== */

/* ★ `.shell` の padding 一括指定より後ろで効かせる必要があるので、
     わざと2クラスにして詳細度を上げてある（同点だと後勝ちで 120px に戻る） */
.shell.shell--techo {
  min-height: 100dvh;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--s6);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  gap: var(--s4);
}

.shell.shell--home,
.shell.shell--wizard {
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--s6);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}

/* ウィザードは上詰め（縦中央寄せだと上に大きな空白が出て「設定フォーム」の密度になる・K12-1）。
   「つぎへ」は下に sticky（.wiz__actions） */
.shell.shell--wizard {
  justify-content: flex-start;
  padding-top: var(--s5);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
}

.home {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.home__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  text-align: center;
}

/* ★ 待機中に動かさない。代わりに「この道具が何をするか」が一目で分かる絵を1枚だけ置く。
     生成画像は白地なので multiply で地になじませる（切り抜き画像を作り直さないで済む） */
.home__mark {
  width: clamp(96px, 30vw, 132px);
  height: clamp(96px, 30vw, 132px);
  background: url('/assets/ui/lotbox.webp') center / contain no-repeat;
  mix-blend-mode: multiply;
}

.home__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.home__lede {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.home__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.homecard {
  appearance: none;
  border: none;
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-4);
  padding: var(--s4) var(--s5);
  min-height: 92px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s4);
  /* 「開く」は --plate に静かな縁。hover / 選択で縁がテーマ色になる（K4） */
  outline: 2px solid var(--line);
  outline-offset: -2px;
  transition: background var(--dur-1) var(--e-out), outline-color var(--dur-1) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .homecard:hover {
    outline-color: var(--accent);
  }
}

.homecard[aria-expanded='true'] {
  outline-color: var(--accent);
  background: var(--sel-bg);
}

/* 主導線は accent 塗り（濃紫反転をやめた・K4）。box-shadow / グラデは使わない */
.homecard--new {
  background: var(--accent);
  color: var(--accent-ink);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .homecard--new:hover {
    filter: brightness(0.96);
  }
}

/* カードのアイコンは2トーン（淡い塗りの丸 + テーマ色の線・K12-2）。accent 塗りのカードの上では --plate の丸 */
.homecard__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--sel-bg);
  color: var(--accent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.homecard--new .homecard__icon {
  background: var(--plate);
  color: var(--accent);
}

.homecard__icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.25;
}

.homecard__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.homecard__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.3;
}

.homecard__note {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.45;
}

.homecard--new .homecard__note {
  color: var(--accent-ink);
}

/* ① Myルーレットの件数（右端・「3件」）。0件のときは hidden */
.homecard__count {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ① が 0件のとき：薄い枠（点線・地は透明）。副題が誘導文になる。無効なので押せない見た目に寄せる
   ★ 文字色は --ink-3（plate 上 4.90:1）より薄くしない。opacity で全体を落とさない（読めなくなる） */
.homecard[data-empty='true'] {
  background: transparent;
  outline: 2px dashed var(--line);
  cursor: default;
}

.homecard[data-empty='true'] .homecard__title {
  color: var(--ink-2);
}

.homecard[data-empty='true'] .homecard__icon {
  background: var(--sunk);
  color: var(--ink-3);
}

/* Myルーレットの一覧は ① の直下に開く（.home__actions の子）。上の gap と揃える */
.home__actions > .home__list {
  margin-top: calc(-1 * var(--s1));
}

.boardlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-height: 46dvh;
  overflow-y: auto;
}

.boardrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--plate);
  border-radius: var(--r-3);
  padding: var(--s2) var(--s3);
}

.boardrow__open {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  flex: 1;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  padding: var(--s2) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.boardrow__name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boardrow__meta {
  font-size: 0.78rem;
  color: var(--ink-3);
}

.boardrow__spin {
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* 文字ボタン「編集」（「回す」の左。本体タップも編集のまま・第5段 §5-1）。静かな沈み色 */
.boardrow__edit {
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--ink-2);
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ③ アプリの設定へのリンク行（1行＋副題）。カードと同じ幅で、静かに */
/* ホーム画面に追加していない人への案内（plate 地・case 縁・影なし） */
.home__install {
  background: var(--plate);
  border: 2px solid var(--case);
  border-radius: var(--r-3);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.home__install-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

.home__install-how {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.home__install-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.homelink {
  appearance: none;
  border: none;
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-3);
  background: transparent;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-align: left;
}

.homelink:hover {
  background: var(--sunk);
  color: var(--ink);
}

.homelink__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ink-2);
}

.homelink__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.homelink__title {
  font-weight: 800;
  line-height: 1.3;
}

/* ★ --ink-3 は hover 地（--sunk）で 4.0:1 に落ちるので --ink-2（bg 7.2 / sunk 6.4） */
.homelink__note {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.4;
}

/* 共有リンクで見ていることと、いつ消えるかを伝える帯。
   ★ 配信に映る画面なので、地の色に馴染ませて主張させない（閉じられる）。 */
.ribbon {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.6;
}

.ribbon__text {
  margin: 0;
  flex: 1 1 auto;
}

.ribbon__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--r-1);
  cursor: pointer;
}

.ribbon__close:hover {
  color: var(--ink);
}

/* 共有の逃げ道（Turnstile が使えないとき・作成に失敗したときだけ出る）。
   ★ 主導線と競合させないため、区切り線の下に一段落として置く。 */
.fallback {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

/* お客様の声（受付口）。
   ★ 主導線の下に、地の色を変えただけの静かな面で置く。
     枠線と余白だけで区切る（box-shadow は使わない＝意匠の境界6条 #1・check:noshadow が守る）。 */
.voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4);
  border-radius: var(--r-3);
  background: var(--sunk);
  text-align: center;
}

.voice__lede {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.voice__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.home__foot {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.home__foot a {
  color: var(--ink-3);
}

/* ===========================================================================
   作成ウィザード

   ★ 1画面1問。戻ると答えは残る（作り直しをさせない）。
   =========================================================================== */

.wiz {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1 1 auto;
}

/* 「つぎへ」は常に画面下（内容が短ければ下端、長ければ sticky）。地の色で下の内容を隠す */
.wiz__actions {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--bg);
}

.wiz__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.wiz__count {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.wiz__rail {
  display: flex;
  gap: var(--s1);
}

.wiz__rail span {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--sunk);
}

.wiz__rail span[data-on='true'] {
  background: var(--accent);
}

.wiz__title {
  margin: var(--s2) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  line-height: 1.3;
}

.wiz__note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.wiz__body {
  min-height: 0;
}

.picks {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.picks--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pick {
  appearance: none;
  border: none;
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-3);
  padding: var(--s3) var(--s4);
  min-height: 72px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  transition: background var(--dur-1) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .pick:hover {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}

/* 選択肢アイコンは2トーン（淡い塗りの丸 44px + テーマ色の線・K12-2） */
.pick__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--sel-bg);
  color: var(--accent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pick__icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.pick__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pick__title {
  font-weight: 800;
  line-height: 1.3;
}

.pick__note {
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.45;
}

/* 選択＝淡い塗り＋テーマ色の縁（濃紫反転をやめた・K4）。outline なので box-shadow 0 を守れる */
.pick[aria-checked='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pick[aria-checked='true'] .pick__icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.picks--grid .pick {
  flex-direction: column;
  align-items: flex-start;
  min-height: 108px;
}

/*
 * 「景品を回す」（絵が出る＝このアプリの差別化点。第6段で旧 photo モードを統合）だけ目立たせる（Hiroaki 指示 2026-08-16）:
 *   未選択＝淡い accent 地（--hi-bg 8%）＋白丸に accent 線のアイコン。
 *   選択＝いままでどおり --sel-bg（16%）＋accent 縁＋accent 塗りのアイコン（(0,2,0)/(0,3,0) が勝つ）。
 *   注記は --ink-2（--ink-3 だと tint 上で 4.5 を割りうる）
 */
.pick--hi {
  background: var(--hi-bg);
}

.pick--hi .pick__icon {
  background: var(--plate);
  color: var(--accent);
}

.pick--hi .pick__note {
  color: var(--ink-2);
}

.seg--wide {
  display: flex;
  width: 100%;
  margin-bottom: var(--s4);
}

.seg--wide .seg__btn {
  flex: 1;
  min-height: 44px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chips:empty {
  display: none;
}

/* ★ ホーム/ウィザードは明るい地の上。--case 塗りの .chip は使わない */
.chipsoft {
  appearance: none;
  border: none;
  background: var(--sunk);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.chipsoft:hover {
  background: var(--plate);
  color: var(--ink);
}

/* ★ `.chip` の定義より前に書いてあるので、2クラスにして詳細度で勝たせる */
.chip.chip--quiet {
  border: none;
  background: var(--sunk);
  color: var(--ink-2);
  min-height: 40px;
  font-size: 0.88rem;
}

.chip.chip--quiet:hover {
  background: var(--plate);
  color: var(--ink);
}

.field__input--tall {
  min-height: 132px;
  line-height: 1.8;
  resize: vertical;
}

.summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.summary li {
  display: flex;
  gap: var(--s3);
  background: var(--plate);
  border-radius: var(--r-2);
  padding: var(--s3) var(--s4);
}

.summary b {
  flex: 0 0 5.5em;
  color: var(--ink-3);
  font-size: 0.85rem;
  font-weight: 700;
}

.summary span {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

/*
 * 4/6「数と回数」（第7段 §2）。景品の問い（2枚）＋一覧／リスナーの問い（3枚・縦積み）＋本数の seg。
 * ★ 誰に何が は両方を1画面に置き、区切り線（hr）で分ける。一覧は 10 件を超えたら中でスクロール
 */
.wizrules {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.wizrules__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.4;
}

.wizrules__sub {
  margin: 0;
  font-weight: 700;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.wizrules__block {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* 「一度出たら次から出さない」の行は plate の箱に入れて、上の2枚と地を分ける */
.wizrules__rule {
  background: var(--plate);
  border-radius: var(--r-2);
  padding: var(--s3) var(--s4);
}

.wizrules__hr {
  border: none;
  border-top: 2px solid var(--sunk);
  margin: var(--s4) 0;
}

.wizrules__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.wizrules__label {
  font-weight: 700;
}

.wizrules__row .seg__btn {
  min-height: 40px;
}

/* 一覧：名前 ＋ −／＋ の段。10 件を超えたら中でスクロール（≒ 10 行ぶん） */
.wizlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  max-height: min(480px, 46dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wizlist:empty {
  display: none;
}

.wizlist__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--plate);
  border-radius: var(--r-2);
  padding: 2px var(--s2) 2px var(--s3);
}

.wizlist__name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.wizlist .stepper__num {
  width: 36px;
}

/* 折りたたみ「出やすさを変える」の中の一覧は少し下げる */
.wizrules .more .wizlist {
  margin-top: var(--s2);
}

/* ===========================================================================
   編集画面
   =========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s2) var(--pad);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.brand {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-weight: 800;
}

.brand__mark {
  width: 28px;
  height: 28px;
  /* 橙の丸ではなく、タブと同じ絵（favicon.svg）を 28px で（K12-3） */
  background: url('/assets/favicon.svg') center / contain no-repeat;
  flex: 0 0 auto;
}

.topbar__spacer {
  flex: 1;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad) 120px;
}

.edit {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.edit__head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s3);
}

/* 見出し行: 名前入力 ＋ 鉛筆（タップで名前を変えられると分かるように） ＋ 保存インジケータ */
.titlebar {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.title-edit {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.saved {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.saved[data-state='saving'] {
  color: var(--ink-2);
}

/* 試用中は「保存済み」と言わない（saveState は書かない）。2026-08-23 */
/*
 * 日誌の折りたたみ（2026-08-23）。「渡したもの」は既定でたたむ
 * （うっかり配信に映ったときに、リスナー間の待遇差が見えないように）。
 */
.tk__fold > summary {
  cursor: pointer;
  list-style: none;
}
.tk__fold > summary::-webkit-details-marker {
  display: none;
}
.tk__fold > summary::after {
  content: '　▾';
  font-size: 0.8em;
}
.tk__fold[open] > summary::after {
  content: '　▴';
}

/* 「もう1回」の景品につく印（2026-08-23）。名前で判定して自動で回るので、効いていることを見せる */
.item__again {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-2);
  background: var(--sunk);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

.saved[data-state='trial'] {
  color: var(--ink-2);
  font-weight: 700;
}

.title-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.28;
  padding: 0;
  /* ★ 長いタイトルを見切らせない：textarea で最大2行に折り返す（高さは JS が scrollHeight で伸ばす。改行は入れさせない） */
  resize: none;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

.title-input:focus {
  outline: none;
}

.title-input::placeholder {
  color: var(--ink-3);
}

.boards {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.board-chip {
  appearance: none;
  border: none;
  background: var(--sunk);
  color: var(--ink-2);
  border-radius: var(--r-3);
  padding: 6px var(--s3);
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 選択＝淡い塗り＋テーマ色の縁（K4） */
.board-chip[aria-current='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 「＋ 新しく作る」（危険グループの隣に置かないため、盤面チップ列の末尾に1つ） */
.board-chip--add {
  background: transparent;
  color: var(--ink-3);
  outline: 2px dashed color-mix(in srgb, var(--ink) 30%, var(--plate));
  outline-offset: -2px;
}

.board-chip--add:hover {
  background: var(--sunk);
  color: var(--ink);
}

/* リスナー／項目タブの先頭に出す「いま何が回るか」の状態行 */
.note--state {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--plate);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.note--state strong {
  color: var(--ink);
}

/* ---- 回すもの（4枚・2×2。第4段 §1-1） ---- */

.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.mode {
  appearance: none;
  border: none;
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-3);
  padding: var(--s3);
  min-height: 96px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  transition: background var(--dur-1) var(--e-out);
}

/* カードのアイコンは選択肢アイコン（.pick__icon）と同じ2トーン・36px */
.mode__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--sel-bg);
  color: var(--accent);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode__icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.mode__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mode__name {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.35;
}

.mode__note {
  font-size: 0.8rem; /* 12.8px */
  color: var(--ink-3);
  line-height: 1.45;
}

/* 選択＝淡い塗り＋テーマ色の縁（濃紫反転をやめた・K4） */
.mode[aria-checked='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mode[aria-checked='true'] .mode__icon {
  background: var(--accent);
  color: var(--accent-ink);
}

/* 「景品を回す」だけ目立たせる（.pick--hi と同じ規則。★ .mode より後ろに置く＝同じ詳細度なので順序で勝つ） */
.mode--hi {
  background: var(--hi-bg);
}

.mode--hi .mode__icon {
  background: var(--plate);
  color: var(--accent);
}

.mode--hi .mode__note {
  color: var(--ink-2);
}

/* ---- タブ ---- */

/* ★ sticky にして、長い設定タブの下からでもタブ切替に戻れるようにする（監査 S6）。top は topbar の高さ */
.tabs {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 56px;
  z-index: 2;
  background: var(--bg);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-3);
  padding: var(--s2) 0;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.tab[aria-selected='true'] {
  color: var(--ink);
}

.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/*
 * 履歴タブの件数バッジ「履歴 3」（第5段 §2-5）。灰地の小バッジ・0なら数字なし（hidden）。
 * ★ 「回る」バッジ（accent 塗り）は廃止した。状態語に読めたため（説明書なしテスト）
 */
.tab__count {
  display: inline-block;
  margin-left: var(--s1);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}

.pane__lede {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0 0 var(--s3);
  line-height: 1.7;
}

/* 一覧の**下**の一括もどすチップ列（第5段 §2-2・§2-3。該当があるときだけ出す） */
.pane__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 0;
}

/* ---- 項目リスト（罫線を引かず、面で分ける） ---- */

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

/*
 * 1行＝「色つきの札」（K7）。行の地は**その項目の色 8%** を面に混ぜたもの
 * （`renderItems` が `--item-color` を各行に付ける。無い行は --plate のまま）。
 */
.item {
  --item-color: var(--plate);
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 60px;
  padding: var(--s1) var(--s2) var(--s1) var(--s3);
  background: color-mix(in oklab, var(--item-color) 8%, var(--plate));
  border-radius: var(--r-4);
}

/* 出た行（同じものを2回出さない）＝残り0と同じ流儀：名前だけ薄字＋取り消し線。「もどす」は通常色（行ごと薄くしない） */
.item[data-drawn='true'] .item__label {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* 色見本は 14px の丸（色バーをやめた・K7） */
.item__swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}

.item__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-2);
  object-fit: contain;
  background: var(--sunk);
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* 空の写真枠＝点線枠 44px・camera 線アイコン＋「写真」（第5段 §2-2。旧: 「＋」の四角＝景品追加に見えた） */
.item__thumb--empty {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--ink-2);
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--ink) 34%, var(--plate));
}

.item__thumb--empty .icon {
  width: 18px;
  height: 18px;
}

.item__thumb-cap {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.item__label {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: var(--s2) 0;
  font-size: 1rem;
  font-weight: 600;
}

.item__label:focus {
  outline: none;
}

/*
 * 本数／出やすさの段（第4段 §2）。−／＋ は 44×44、数字は直接入力もできる。
 *  リスナー行 : くじ [−] 3本 [＋]（1行に収める）
 *  景品行     : 2段目（.item__ctl）に 残り [−] 3個 [＋]（25%） ／ 出やすさ [−] ×2 [＋]（25%）
 * ★ 見出し・注記は「くじの本数」「出やすさ」「％」だけ。「重み」は UI に出さない
 */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.stepper__tag {
  font-size: 0.8rem; /* 12.8px */
  font-weight: 700;
  color: var(--ink-2);
  margin-right: var(--s1);
  white-space: nowrap;
}

.stepper__btn {
  appearance: none;
  border: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: var(--sunk);
  color: var(--ink);
  cursor: pointer;
}

.stepper__btn:disabled {
  color: var(--ink-3);
  opacity: 0.55;
  cursor: default;
}

.stepper__btn .icon {
  width: 20px;
  height: 20px;
}

.stepper__num {
  width: 40px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.stepper__num::-webkit-outer-spin-button,
.stepper__num::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.stepper__unit {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}

/*
 * リスナー行の名前は1行フル幅・2行まで折り返し（第5段 §2-3。「…」省略をやめた）。
 * ★ input は折り返せないので textarea。高さは JS が scrollHeight で最大2行（64px）まで伸ばす
 */
.item__label--wrap {
  resize: none;
  overflow: hidden;
  white-space: normal;
  line-height: 1.4;
  min-height: 32px;
  padding: 6px 0;
  display: block;
  font-family: inherit;
}

/* 景品行・リスナー行の2段目（セグメント・残り／くじ・％） */
.item {
  flex-wrap: wrap;
}

.item__ctl {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap; /* 390px で入らなければ段が次の行へ */
  align-items: center;
  gap: var(--s1) 6px;
  padding: 0 0 var(--s1);
}

/* 390px で「[限りあり|何度でも] 残り [−] 3 個 [＋]」を1行に収める（数字欄を 4px 詰める。3桁は入る） */
.item__ctl .stepper__num {
  width: 36px;
}

/* リスナー行の2段目：くじ [−] 1本 [＋]  …  20% */
.item__ctl--person .odds__pct {
  margin-left: auto;
}

/* 2択セグメント「限りあり｜何度でも」（現在側を塗る＝ .seg__btn[aria-pressed=true]） */
.item__seg {
  padding: 2px;
  gap: 2px;
}

.item__seg .seg__btn {
  min-height: 34px;
  padding: 0 var(--s2);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* 残り 0 の行の3段目：なくなりました（次から出ません） [1個もどす] */
.item__gone-row {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 0 0 var(--s2) var(--s1);
}

/* 残り 0 ＝名前だけ薄字＋取り消し線（行ごと薄くしない。「＋」と「1個もどす」は通常色） */
.item[data-gone='true'] .item__label {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* ％の札。何度でも＝枠付きチップ（押すと「何％にしますか」の入力に替わる）／限りあり＝灰の文字（押すとトースト） */
.odds {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.odds__pct {
  appearance: none;
  border: 2px solid color-mix(in srgb, var(--ink) 34%, var(--plate));
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-height: 34px;
  padding: 0 var(--s2) 0 var(--s3);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.odds__pct .icon {
  width: 16px;
  height: 16px;
}

.odds__pct--static {
  border-color: transparent;
  color: var(--ink-2);
  padding: 0 var(--s1);
  cursor: default;
}

.odds__input {
  width: 56px;
  min-height: 40px;
  border: none;
  border-radius: var(--r-2);
  background: var(--sunk);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.item__gone {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--danger);
  white-space: nowrap;
}

.item__drag,
.item__del {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--r-2);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .item__del:hover {
    color: var(--danger);
    background: var(--sunk);
  }
}

.item__drag {
  cursor: grab;
}

/* ---- 種別（カテゴリ） ---- */

.cats {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.cat {
  appearance: none;
  border: none;
  background: var(--sunk);
  color: var(--ink-2);
  border-radius: var(--r-3);
  padding: 6px var(--s3);
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.cat[aria-pressed='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---- 設定行 ---- */

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--plate);
  border-radius: var(--r-3);
  min-height: 64px;
  flex-wrap: wrap;
}

.row__text {
  flex: 1;
  min-width: 180px;
}

.row__title {
  font-weight: 700;
  font-size: 0.98rem;
}

.row__note {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/*
 * ★ OFF が見える色にする（旧: トラック --sunk on --plate ≈1.2:1・つまみも同色で、OFF がほぼ見えなかった。監査 S5）。
 *   トラックは ink 22% 混色（≈2.9:1）、つまみは --plate に --case 2px の縁（border は影ではない）。
 *   「オン／オフ」の文字は出さない（幅が足りない）。色で 3:1 を取る。
 */
.switch {
  position: relative;
  width: 52px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  border: none;
  background: color-mix(in srgb, var(--ink) 22%, var(--plate));
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-2) var(--e-out);
}

.switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--plate);
  border: 2px solid var(--case);
  transition: transform var(--dur-2) var(--e-emph);
}

.switch[aria-checked='true'] {
  background: var(--accent);
}

.switch[aria-checked='true']::after {
  transform: translateX(20px);
  border-color: transparent;
}

/* 「景品 / リスナー」の2つ組スイッチ（除外・伏字）。各スイッチの上に小さくラベル */
.duals {
  display: flex;
  gap: var(--s4);
  align-items: flex-end;
  flex: 0 0 auto;
}

.dual {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dual__tag {
  font-size: 0.8rem; /* 12.8px */
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1.3;
}

/* 設定行の下段（「n / m 出ています」＋ 出た人を戻す） */
.row__foot {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.stat {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.seg {
  display: inline-flex;
  gap: var(--s1);
  background: var(--sunk);
  border-radius: var(--r-2);
  padding: var(--s1);
  flex-wrap: wrap;
}

.seg__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--r-2);
  padding: 0 var(--s3);
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

/* 選択＝淡い塗り＋テーマ色の縁（K4） */
.seg__btn[aria-pressed='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.accents {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.accent-dot {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  padding: 0;
}

.accent-dot[aria-pressed='true'] {
  outline: 3px solid var(--case);
  outline-offset: 2px;
}

/* ---- 履歴 ---- */

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.history__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--plate);
  border-radius: var(--r-3);
  min-height: 56px;
}

.history__time {
  font-size: 0.8rem;
  color: var(--ink-3);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.history__value {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  word-break: break-word;
}

.history__done {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: none;
  background: var(--sunk);
  color: var(--ink-3);
  border-radius: var(--r-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.history__row[data-done='true'] .history__value {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* 「渡した」は文字ボタン（.history__txt[aria-pressed=true] で塗る・第5段）。.history__done は「1件を画像にする」だけに残る */

/* ---- 下端の1本ボタン ---- */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, rgba(247, 242, 240, 0));
}

.cta-bar > .btn {
  max-width: var(--shell);
  margin: 0 auto;
}

/* 共有中の内容が変わっているときの1行（CTA の上） */
.cta-note {
  max-width: var(--shell);
  margin: 0 auto var(--s2);
  padding: var(--s1) var(--s3);
  background: var(--plate);
  border-radius: var(--r-2);
  font-size: 0.85rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ===========================================================================
   回す画面
   =========================================================================== */

/*
 * ★ ここに display を書かない。**出す/隠すは画面切替の1箇所だけが決める**。
 *   ここで `display: flex` を宣言すると、上の非表示ルールと詳細度が並んで
 *   **後ろに書いたこちらが勝ち**、どの画面にいても回す画面が下に生えてしまう
 *   （2026-08-15 に実際に発生。ウィザードの下に空の盤面が出た）。
 */
.shell--play {
  min-height: 100dvh;
  flex-direction: column;
  gap: var(--s3);
  padding: clamp(12px, 3dvh, 24px) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom));
}

.playbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  flex: 0 0 auto;
}

.playbar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ★ 背景に直接置く要素は「--case 塗り + --pin リング」の二色にする。
   単色だと、緑/マゼンタ/白/ダークのどれかで必ず消える */
/* アイコンだけのチップ（2026-08-17）。文字が無いぶん左右の余白を詰めて、正方形に近づける。
   ★ 44px は残す（タッチの当たり判定を小さくしない） */
.chip--icon {
  padding: 0;
  width: 44px;
  justify-content: center;
}

.chip {
  appearance: none;
  border: 2px solid var(--pin);
  background: var(--case);
  color: var(--pin);
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: 0 var(--s4);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex: 0 0 auto;
}

.chip--icon {
  width: 44px;
  padding: 0;
}

.chip .icon {
  stroke-width: 2.25;
  width: 24px;
  height: 24px;
}

/* ---- プレート（署名要素。盤面・結果・写真が必ずこの上に載る） ---- */

.plate {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--plate);
  border: 3px solid var(--case);
  border-radius: var(--r-4);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/*
 * ★ 盤面の高さは**プレートの残り**から決める。自分の中身（前回書いた canvas の高さ）を参照させない。
 *   `flex-basis: 0` + `min-height: 0` で縮めるようにし、`contain: size` で「中身の大きさが親の高さに
 *   跳ね返る」循環を切る。これが無いと、縦→横に回したとき canvas の 321px が親を押し広げ、
 *   円盤が縮まず結果欄と「回す」が画面外に出ていた（2026-08-16 監査 A9・844×390 で実測）。
 *   wheel.js の resize() は親（.stage）の rect を測るので、ここが正直な大きさなら円盤も追従する。
 */
.stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  contain: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage__canvas {
  display: block;
  touch-action: manipulation;
}

/* ---- 結果ブロック ---- */

/*
 * 結果ブロック（K10）。
 * ★ 当選は「ステッカー枠」＝ accent 塗り + 3px --case 縁 + r-4（旧: 縁なしの橙一枚板＝警告バナー感）。
 *   縁は border（影ではない）。待機は --sunk のまま、文字だけ 20px・700・--ink-3 に落とす（18px 規則は維持）。
 *   透明の border を待機時から持たせて、状態が変わっても高さが動かないようにする。
 */
.result {
  flex: 0 0 auto;
  min-height: 88px;
  border-radius: var(--r-4);
  border: 3px solid transparent;
  background: var(--sunk);
  color: var(--ink);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
  transition: background var(--dur-3) var(--e-emph), border-color var(--dur-3) var(--e-emph);
}

.result[data-state='done'] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--case);
}

.result__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  letter-spacing: 0.01em;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

/* 待機（「回すと ここに出ます」）は控えめに: 20px・700・--ink-3 */
.result[data-state='idle'] .result__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-3);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.result__sub {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
}

/* 「誰に何が」の1人目を残すチップ */
.result__chip {
  border: 2px solid var(--case);
  border-radius: var(--r-3);
  padding: var(--s1) var(--s3);
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--plate);
  color: var(--ink);
}

/* ---- 写真カード（盤面に重ねるので縦を増やさない） ---- */

.photo {
  position: absolute;
  left: 50%;
  /* ★ 盤面の**上下中央**に出す（2026-08-18）。
     以前は `bottom: 0` で盤面の下端に貼りついていたが、絵のカード（正方形＋見出し56px）は
     盤面より低いので**上だけが大きく空いた**（390×721 で実測 74px。Hiroaki 実機
     「上の方がスペース空いちゃってて若干違和感」）。円盤・抽選箱も中央にあるので、
     当たった絵も中央に出るのが揃う。★ 高さの上限（max-height: 100%）は外さない */
  top: 50%;
  transform: translate(-50%, calc(-50% + 14px));
  width: min(76%, 420px);
  /* ★ 盤面（.stage）からはみ出さない。テンプレ試用の帯が上に乗ると盤面が低くなり、
     4:5 の絵が上へあふれて帯のボタンを覆っていた（Hiroaki 実機 2026-08-16「この画面から進めない」）。
     縦は flex で縮め、絵は cover で切る（本番の写真は縦長でも横長でも中央が出る） */
  max-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 3px solid var(--case);
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--plate);
  opacity: 0;
  cursor: pointer;
  transition: transform var(--dur-3) var(--e-back), opacity var(--dur-2) var(--e-out);
}

.photo[data-shown='true'] {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.photo__img {
  display: block;
  width: 100%;
  /* ★ 絵は切らない（Hiroaki 実機 2026-08-16「アイコンは全部映るように。基本切れてる」）。
     用意した絵は正方形なので窓も正方形＋contain。取り込んだ写真は縦横どちらでも全体が入る（余白は plate） */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--plate);
  flex: 1 1 auto;
  min-height: 0;
}

.photo__cap {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--ink);
  text-align: center;
}

/* ---- 表示の設定シート ---- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(40, 31, 44, 0.4);
  padding: var(--s4);
}

.sheet__box {
  width: min(560px, 100%);
  background: var(--plate);
  border-radius: var(--r-4);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  /* 共有ページのシートは行数が多い。画面からはみ出したら中でスクロールさせる */
  max-height: 86dvh;
  overflow-y: auto;
}

.sheet__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.sheet__label {
  font-weight: 700;
  min-width: 48px;
}

/*
 * 回す画面のシート（配信中に触るものの写し）。
 * ★ 回す画面なので **18px 未満の文字を出さない**。スイッチは 44px 高（タップ領域）。
 *   共有ページのシート（#view-sheet）には効かせない（.sheet--play で絞る）。
 */
.sheet--play .sheet__row,
.sheet--play .sheet__label,
.sheet--play .sheet__text,
.sheet--play .dual__tag,
.sheet--play .seg__btn,
.sheet--play .swatch,
.sheet--play .btn,
.sheet--play .note {
  font-size: 18px;
}

.sheet--play .sheet__row {
  gap: var(--s2) var(--s4);
}

.sheet--play .sheet__label {
  min-width: 0;
}

.sheet--play .sheet__text {
  color: var(--ink-2);
  font-weight: 600;
}

.sheet--play .switch {
  width: 68px;
  height: 44px;
}

.sheet--play .switch::after {
  width: 36px;
  height: 36px;
}

.sheet--play .switch[aria-checked='true']::after {
  transform: translateX(24px);
}

/*
 * 回す画面のシートを詰める（K12-8）。第2段で縦に長くなり 390×844 で 1 画面を超えていた。
 * 箱の内側余白は 16px、行間は 8px。「伏字／効果音／大きく表示」は 2 列の格子、
 * 「見せ方」は 1 行 4 列（各 44px 高）、除外の 2 ボタンは横並び。18px・44px は維持。
 */
.sheet--play .sheet__box {
  padding: var(--s4);
  gap: var(--s2);
}

/* 第5段: シートは箱内スクロール（max-height 80dvh）になったので 2 列で縦を節約する必要が無くなった。
   2 列だと「結果を大きく（カメラ用）」がラベルとスイッチで別行に折れて読みにくい（NORI 実画面確認）→ 1 列 */
.sheet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2) var(--s4);
  align-items: start;
}

.sheet__grid .sheet__row {
  align-content: start;
}

/* 「大きく表示（カメラで映すとき）」は文言が長く、半分の幅だと 3 行に折れて縦を食う。
   この行だけ 2 列ぶん使い、折り返さずに（文言 2 行 ＋ 右にスイッチ）収める */
.sheet__grid .sheet__row:nth-child(3) {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
}

.sheet__grid .sheet__row:nth-child(3) .sheet__label {
  flex: 1 1 0;
  min-width: 0;
}

.sheet--play .note {
  line-height: 1.5;
}

.sheet--play .seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.sheet--play .seg__btn {
  min-height: 44px;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

/*
 * リスナーの3択（第7段 §3）は 4 列グリッドに載せない（「くじの本数ぶん」が「くじの…」に潰れる）。
 * 3 つを横に流し、入らなければ折り返す（ellipsis で読めなくしない）
 */
.sheet--play #psheet-rmode-row .seg {
  display: flex;
  flex-wrap: wrap;
}

.sheet--play #psheet-rmode-row .seg__btn {
  flex: 1 1 auto;
  padding: 0 6px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

.sheet--play .sheet__actions--start > .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--s2);
  white-space: nowrap;
}

/* 2 つ横並びで 1 行に収めるため、飾りの線アイコンはこの 2 ボタンだけ出さない（文言で足りる） */
.sheet--play .sheet__actions--start .icon {
  display: none;
}

.sheet--play .sheet__actions--start {
  flex-wrap: nowrap;
}

/* 背景 5 択を 1 行に（44px 幅は保つ） */
.sheet--play .swatch {
  padding: 0 var(--s2);
  min-width: 44px;
}

/* 外側の余白は 8px。箱は 80dvh・箱内スクロール（第5段 §3-2）。「閉じる」は見出し行に固定（sticky）なので隠れない */
.sheet.sheet--play {
  padding: var(--s2);
}

.sheet--play .sheet__box {
  max-height: 80dvh;
}

.sheet--play .note {
  margin-top: var(--s1);
}

/* 見出し行「回す画面の設定  [閉じる]」＝ sticky。箱の上余白ぶんを負マージンで食って地を塗る（下の中身が透けない） */
.sheet__head {
  position: sticky;
  top: calc(-1 * var(--s4));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  padding: var(--s4) var(--s4) var(--s2);
  background: var(--plate);
}

.sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.3;
}

/* 小見出し「このルーレット（…）」「この端末（…）」。18px・面と余白で分ける（罫線を引かない） */
.sheet__sub {
  margin: var(--s2) 0 0;
  padding: var(--s1) var(--s3);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink-2);
  background: var(--sunk);
  border-radius: var(--r-2);
}

/* 回らない側（薄字＋無効）。色は --ink-3（on plate 4.90:1） */
.dual[data-off='true'] .dual__tag,
.rule[data-off='true'] .rule__title {
  color: var(--ink-3);
}

.switch:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Space の注記はマウス端末だけ（タッチ端末に「Space」は無い） */
.sheet__hint {
  display: none;
}

@media (pointer: fine) {
  .sheet__hint {
    display: block;
  }
}

.sheet__stat {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ★ .sheet__actions より後ろで効かせるために2クラス（同点だと後勝ちで右寄せに戻る） */
.sheet__actions.sheet__actions--start {
  justify-content: flex-start;
}

.sheet__hint {
  color: var(--ink-3);
}

/* 共有ページの読み取り専用リスト */
.panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.items--plain {
  max-height: 34dvh;
  overflow-y: auto;
}

.items--plain .item {
  min-height: 44px;
  background: var(--sunk);
}

.item__label {
  flex: 1;
  min-width: 0;
}

/* 共有ページの「自分で作る」はリンクなので下線を消す */
a.chip {
  text-decoration: none;
}

.sheet__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2);
}

.bgs {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.swatch {
  appearance: none;
  border: 2px solid var(--case);
  background: var(--sunk);
  color: var(--ink);
  border-radius: var(--r-2);
  min-height: 44px;
  padding: 0 var(--s3);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.swatch[aria-pressed='true'] {
  background: var(--case);
  color: var(--pin);
}

/* ===========================================================================
   演出（カード / 抽選箱 / スロット）
   =========================================================================== */

.strip {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* カードの高さ（.strip__card と目印の位置決めで共有する）。% で書かない理由は下 */
  --card-h: clamp(132px, 30dvh, 264px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.strip__track {
  display: flex;
  align-items: center;
  gap: var(--s1);
  will-change: transform;
}

/*
 * ★ カードは**縦長**にする。
 *   横長（196x124）だと、正方形の絵を入れた瞬間に上下が切れる。
 *   縦にして「絵は絵のまま・文字は帯で下に」と分けると、切らずに済む。
 *   幅は高さから決めるので、盤面が小さい画面でも比率が崩れない。
 */
.strip__card {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  /*
   * ★ 高さを % で書かない。
   *   盤面（.stage）は flex で伸び縮みするので、% だと
   *   「親の高さ→カードの高さ→親の高さ」で参照が循環し、
   *   カードが画像の実寸まで膨らんで盤面ごと押し広げる（実測 784x1045）。
   *   画面の高さから直に決めれば循環しない。
   */
  height: var(--card-h);
  aspect-ratio: 3 / 4;
  width: auto;
  border-radius: var(--r-3);
  /* カード面は 3px --case の縁（K8）。色は項目色（cards.js がインラインで塗る） */
  border: 3px solid var(--case);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s3);
  font-family: var(--font-display);
  font-weight: 900;
  /* ★ 回す画面なので 18px 未満にしない。最小 20px（K8） */
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  line-height: 1.3;
  word-break: break-word;
}

/* 中央（当選）カード: 太い枠（outline＝影ではない）と少し大きい角丸で「止まった1枚」を出す（K8） */
.strip__card.is-hit,
.strip__card--blank {
  outline: 4px solid var(--case);
  outline-offset: -4px;
  border-radius: var(--r-4);
}

/* 待機中に中央へ置く空のカード（先頭の項目名を「今の当たり」と読ませない・監査 F19） */
.strip__card--blank {
  background: var(--sunk);
}

/*
 * 絵のあるカード: 回っているカードにも絵を出す（そのほうが映える。第6段で自動の絵も含めて常時）。
 *
 * ★ 絵は **contain**。`cover` は必ずどこかを切る。用意した絵も取り込んだ写真も
 *   「全部見える」ほうが、何が当たるのか分かる。
 * ★ 面は `--plate`。絵の地が白いので、色は**下の帯だけ**が持つ
 *   （面まで色にすると、白い正方形が浮いてシールみたいに見える）。
 */
.strip__card--photo {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--plate);
}

.strip__card__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  padding: var(--s2);
  box-sizing: border-box;
}

.strip__card__cap {
  padding: 6px var(--s2);
  /* ★ 回す画面なので 18px 未満にしない（旧 14.7px・監査 K8） */
  font-size: 1.125rem;
  line-height: 1.25;
  text-align: center;
  /* 単色バー。グラデーションのスクリムは低ビットレート配信でバンディングが出る */
  /* ★ 第6段 §3-b：切らずに折り返す（最大3行。それ以上は隠れる＝結果欄に全文が出る） */
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/*
 * 中央の目印（K8）。
 * ★ 縦カードにしたので、**全高の線を引かない**（絵の上を横切ってしまう）。
 *   上に雫型マーカー（円盤の針と同じ絵）を1つ。先端がカードの上端に 6px 食い込む。下の爪は無し。
 *   画像は背景で出す（<img> を増やさない）。
 */
.strip__marker {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--card-h) / 2 - 6px);
  height: clamp(36px, 8dvh, 64px);
  aspect-ratio: 256 / 393;
  transform: translateX(-50%);
  background: url('/assets/ui/marker.webp') center / contain no-repeat;
  pointer-events: none;
}

/* ---- 抽選箱 ---- */

.lotbox {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 当たり札の位置を箱の実寸（min(88cqw, 420px)）から出すために、寸法のコンテナにする */
  container-type: size;
}

.lotbox__body {
  position: relative;
  width: min(88%, 420px);
  aspect-ratio: 1 / 1;
  /* ★ CSS で描いた角丸の箱は素っ気なかったので、絵に差し替えた */
  background: url('/assets/ui/lotbox.webp') center / contain no-repeat;
  transform-origin: 50% 88%;
  /* ★ 絵の地は白。プレート(#fdfcfa)の上だと白い四角が浮くので乗算で溶かす。
     透過で作り直すより確実で、作り直し($0.05)も不要 */
  mix-blend-mode: multiply;
}

.lotbox[data-shaking='true'] .lotbox__body {
  animation: lotbox-shake 420ms var(--e-out) infinite;
}

/* 絵に穴が描かれているので、蓋の板は要らない */
.lotbox__lid {
  display: none;
}

/*
 * 当たり札は券の絵（ticket.webp・1200×541）を背景に（白地＋濃紫縁の「事務札」をやめた・K12-5）。
 * 文字は絵の中の平らな窓（left 16.4% / right 10.7% / top 15.3% / bottom 17.1%）に載せる。
 * ★ 上下の % padding は**幅**基準になるので、高さ比（0.4508）を掛けて幅比に直してある（15.3%→6.9% / 17.1%→7.7%）。
 */
.lotbox__ticket {
  position: absolute;
  left: 50%;
  /* 札の下端を箱の口（箱の絵の上から約 22%＝はみ出したくじ束の上・縁の少し上）に置く。
     箱の絵は中央寄せなので「中心から 28% ぶん上」（実画面で合わせた値） */
  bottom: calc(50% + 0.28 * min(88cqw, 420px));
  transform: translate(-50%, 40%) scale(0.5);
  opacity: 0;
  width: min(78%, 420px);
  aspect-ratio: 1200 / 541;
  padding: 6.9% 10.7% 7.7% 16.4%;
  background: url('/assets/ui/ticket.webp') center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-3) var(--e-back), opacity var(--dur-2) var(--e-out);
}

.lotbox__label {
  display: -webkit-box;
  max-width: 100%;
  max-height: 100%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  /* ★ 第6段 §3-b：切らずに折り返す（券の窓の中で最大2行。長ければ文字を小さく＝下の data-len） */
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 券の左の絵（第6段の追補）：窓の高さいっぱいの正方形。名前は右に詰める */
.lotbox__pic {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12%;
  border: 2px solid var(--case);
  background: var(--plate);
  margin-right: 4%;
}

/* 絵つきの券は文字の幅が狭くなるので 1 段小さく（20px は割らない） */
.lotbox__ticket[data-art='true'] .lotbox__label {
  font-size: clamp(1.25rem, 3.8vw, 1.6rem);
  line-height: 1.15;
}

/* 長い名前は 1 段小さく 3 行まで（20px は割らない・回す画面 18px 規則）。lotbox.js が文字数で data-len を付ける */
.lotbox__ticket[data-len='l'] .lotbox__label {
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  line-height: 1.1; /* 20px × 1.1 × 3 行 = 66px ＝ 390px での窓の高さ（実測）。1.15 だと 3 行目の下が 6px 欠ける */
  -webkit-line-clamp: 3;
}

.lotbox[data-open='true'] .lotbox__ticket {
  /* 箱の口から立ち上がって止まる。箱の胴体は隠さない */
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

/*
 * ★ 当たった絵のカードが開いたら、**券は引っ込める**（2026-08-18）。
 *   券とカードには同じ文字が載るので、カードの後ろに券が残ると
 *   **読めない文字と、はみ出したギザギザの縁だけ**が見える
 *   （Hiroaki 実機「この後ろに隠れてしまっている部分。意味なくない？」）。
 *   絵が無い項目・「絵を出す」OFF ではカードが開かないので、券がそのまま結果になる
 *   ——だから消すのではなく **`:has()` でカードが出ているときだけ**引っ込める。
 */
.stage:has(.photo[data-shown='true']) .lotbox__ticket {
  opacity: 0;
  /* 券の文字を読み上げが拾わないように（見えないものを読ませない） */
  visibility: hidden;
}

@keyframes lotbox-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3.5deg); }
  75% { transform: rotate(3.5deg); }
}

/* ---- スロット ---- */

/*
 * スロット（K9）。筐体は `slot-machine.webp` を**背景**で出す（<img> を増やさない）。
 * 窓は絵の中の平らなクリーム面（画像に対する比率 left 10.5% / right 75.8% / top 41.6% / bottom 75.5%）に
 * 絶対配置し、その中に 3 段のリール（前・今・次）を重ねる。
 * ★ 旧 `min-height: min(46%, 200px)` は % が親の高さに依存して効いていなかったので削除。
 */
.slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 筐体の大きさを「幅と高さの両方」から決めるために、この箱を寸法のコンテナにする（cqw / cqh） */
  container-type: size;
}

/*
 * ★ 箱の縦横比は絵と**必ず一致**させる（width から aspect-ratio で高さを出す）。
 *   height を固定して max-width で幅を止めると箱だけ縦長になり、contain で縮んだ絵と % 配置の文字がズレる
 *   （実測: 390×844 で下段の名前が窓の縁に掛かった）。
 */
.slot__window {
  position: relative;
  width: min(100cqw, calc(min(100cqh, 60dvh) * 762 / 936));
  aspect-ratio: 762 / 936;
  background: url('/assets/ui/slot-machine.webp') center / contain no-repeat;
}

.slot__prev,
.slot__value,
.slot__next {
  position: absolute;
  left: 10.5%;
  right: 24.2%;
  text-align: center;
  /* ★ 第6段 §3-b：前後の段は1行（薄い参考表示）、中央は折り返す（下の .slot__value） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  color: var(--ink);
  /* 各段は「中心の高さ」で置く（% で高さを持たせると text-overflow が効かない） */
  transform: translateY(-50%);
}

/* 窓の縦 41.6%〜75.5% を 3 段に割る。中央は少し大きく、上下は前後の項目名（リール） */
.slot__prev {
  top: 47%;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-3);
  opacity: 0.55;
}

.slot__value {
  top: 58.5%;
  font-size: clamp(1.5rem, 5.5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  padding-bottom: 6px;
  transition: transform var(--dur-2) var(--e-emph);
  /* ★ 第6段 §3-b：中央の名前は切らずに折り返す（最大2行）。長いときは 1 段小さく（slot.js が data-len を付ける） */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.slot[data-len='l'] .slot__value {
  font-size: clamp(1.25rem, 4vw, 2rem);
  line-height: 1.1;
}

/* 2行になったら前後の段は隠す（重なるので）。長い名前だけ */
.slot[data-len='l'] .slot__prev,
.slot[data-len='l'] .slot__next {
  visibility: hidden;
}

/*
 * 絵つき（第6段の追補）：窓の左に絵（正方形・窓の高さの 62%）、名前は右に寄せる。前後の段も同じだけ右へ。
 * 窓は画像に対して left 10.5% / right 75.8%（幅 65.3%）・top 41.6% / bottom 75.5%（高さ 33.9%）。
 * 絵の一辺 = 33.9% × 0.62 ≒ 21% を「幅」基準で書くと 21% × 936/762 ≒ 25.8%（aspect-ratio で高さを合わせる）
 */
.slot__pic {
  position: absolute;
  left: 12%;
  top: 58.5%;
  transform: translateY(-50%);
  width: 21%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14%;
  border: 2px solid var(--case);
  background: var(--plate);
}

.slot[data-art='true'] .slot__prev,
.slot[data-art='true'] .slot__value,
.slot[data-art='true'] .slot__next {
  left: 35%;
}

/* 着地の一押し: 1.06 → 200ms で 1（slot.js が data-landed を 200ms だけ立てる） */
.slot[data-landed='true'] .slot__value {
  transform: translateY(-50%) scale(1.06);
  transition: none;
}

/* 窓の中の下線（テーマ色 4px）。中央段の下に 1 本 */
.slot__value::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.slot__next {
  top: 70.5%;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-3);
  opacity: 0.55;
}

/* ===========================================================================
   モーダル
   =========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(40, 31, 44, 0.45);
}

.modal__box {
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--plate);
  border-radius: var(--r-4);
  padding: var(--s5);
}

.modal__title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
}

.modal__note {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin: 0 0 var(--s4);
  line-height: 1.7;
}

.modal__actions {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
  margin-top: var(--s4);
  flex-wrap: wrap;
}

/* モーダルの主ボタンは pill、副ボタンは r-3（K12-4）。箱は r-4（.modal__box） */
.modal__actions .btn--accent {
  border-radius: var(--r-pill);
  padding-inline: var(--s5);
}

.modal__actions .btn--soft {
  border-radius: var(--r-3);
}

.field {
  display: block;
  margin-bottom: var(--s3);
}

.field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: var(--s1);
}

.field__input {
  width: 100%;
  background: var(--sunk);
  border: none;
  border-radius: var(--r-2);
  padding: var(--s3);
  min-height: 44px;
  font-size: 1rem;
}

.field__input:focus {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.keycode {
  background: var(--sunk);
  border-radius: var(--r-2);
  padding: var(--s3);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
  text-align: center;
}

.picklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.picklist__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  min-height: 48px;
  background: var(--sunk);
  border-radius: var(--r-2);
  cursor: pointer;
}

.picklist__row input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

/*
 * 用意した絵のピッカー（第5段 後半・Hiroaki 追加指示）。
 * グループ切替（.presets__tabs = .seg--wide）＋ 箱内スクロールの本体。話のお題は Ver. 名の小見出しで 12 ブロック
 */
.presets__tabs {
  margin-bottom: var(--s3);
}

.presets__tabs .seg__btn {
  padding: 0 var(--s2);
  font-size: 0.82rem;
  /* ★ 5 グループ（第6段で「お題（文字入り）」追加）。1つの札の中で折らず、入らなければ札ごと次の行へ */
  white-space: nowrap;
  flex: 1 1 auto;
}

.presets {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-height: 46dvh;
  overflow-y: auto;
}

.presets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s2);
}

.presets__sub {
  margin: 0 0 var(--s2);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink-2);
}

.presets__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.preset {
  appearance: none;
  border: 2px solid transparent;
  background: var(--sunk);
  border-radius: var(--r-2);
  padding: var(--s1);
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}

.preset img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--r-1);
}

/* 字幕（コイン・話のお題＝文字なしの絵には必須）。1行・はみ出しは「…」 */
.preset__cap {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.preset[aria-pressed='true'] {
  border-color: var(--case);
}

/* ===========================================================================
   トースト
   =========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  /* 3.2 秒のあいだ下のボタンを塞いでいた（K12-6）。触れない帯にする */
  pointer-events: none;
  background: var(--case);
  color: var(--pin);
  border-radius: var(--r-pill);
  padding: var(--s3) var(--s5);
  font-size: 0.92rem;
  font-weight: 700;
  max-width: calc(100vw - 32px);
  text-align: center;
}

.toast[data-tone='error'] {
  background: var(--danger);
  color: #fff;
}

/* 回す画面では結果欄に被らない位置（「回す」の上）に */
body[data-screen='play'] .toast {
  bottom: calc(env(safe-area-inset-bottom) + 96px);
}

/* ===========================================================================
   文書ページ（規約・ポリシー）
   =========================================================================== */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s6) var(--pad) 96px;
}

.doc h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 var(--s2);
}

.doc h2 {
  font-size: 1.1rem;
  margin: var(--s6) 0 var(--s2);
}

.doc p,
.doc li {
  color: var(--ink-2);
  font-size: 0.98rem;
}

.doc strong {
  color: var(--ink);
}

.doc table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--s1);
  font-size: 0.92rem;
  margin: var(--s3) 0;
}

.doc th,
.doc td {
  text-align: left;
  padding: var(--s3);
  background: var(--plate);
  color: var(--ink-2);
  vertical-align: top;
}

.doc th {
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--r-2) 0 0 var(--r-2);
  white-space: nowrap;
}

.doc td {
  border-radius: 0 var(--r-2) var(--r-2) 0;
}

.updated {
  font-size: 0.85rem;
  color: var(--ink-3);
}

.footer {
  margin-top: var(--s6);
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s4) var(--pad);
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.footer a {
  color: var(--ink-3);
  text-decoration: none;
}

.footer a:hover {
  color: var(--ink);
}

.footer__spacer {
  flex: 1;
}

/* ===========================================================================
   背景（配信）
   ★ 縁(--case)が緑/マゼンタ/白を、面(--plate)がダークを担保するので、
     ここで切り替えるのは **body の地だけ**。色トークンは1つも触らない。
   =========================================================================== */

/*
 * ★ 背景の切り替えは **回す画面（＝カメラに映す画面）だけ**のもの。
 *   `data-bg` は body に付くので、画面で絞らないと**ホームも編集も真っ黒になる**。
 *   実際に本番で起きた: 前日「暗い」で試した盤面が保存されていて、
 *   翌日ホームを開いたら全面 #0b0c0e。ローカルは新しい端末データなので再現しない
 *   （＝**残っている保存データでだけ壊れる**型。コードを読んでも出てこない）。
 */
body[data-bg='plate'],
body:not([data-screen='play']) {
  background: var(--bg);
}

/*
 * 編集画面にだけ淡い模様を敷く。
 * ★ 回す画面（配信で映す・クロマキーで抜く）には出さない。
 *   模様が入るとキーが抜けにくくなり、カメラ越しでもノイズになる。
 */
body[data-screen='home'],
body[data-screen='wizard'],
body[data-screen='edit'][data-bg='plate'] {
  background-image: var(--pattern);
  background-size: 96px 96px;
  background-repeat: repeat;
}
body[data-screen='play'][data-bg='magenta'] {
  background: #ff00ff;
}
body[data-screen='play'][data-bg='green'] {
  background: #00b140;
}
body[data-screen='play'][data-bg='white'] {
  background: #ffffff;
}
body[data-screen='play'][data-bg='ink'] {
  background: #0b0c0e;
}

/*
 * 配信モード: 題字を落として、プレートと「回す」を主役にする。
 *
 * ★ 設定ボタンは**消さない**。地の切り替えはこのシートの中にしか無いので、
 *   消すと「暗い」を選んだ瞬間に通常へ戻す手段が画面から消える（キーボードの無い
 *   タブレット運用では詰む）。隅の小さな丸は画角に入っても邪魔にならない。
 */
/*
 * ★ 「大きく表示」（data-big）も同じ規則。背景を「通常」のまま2台目のスマホをカメラで映す運用が大半で、
 *   背景に紐づけていた拡大が発動しなかった（監査 P08・C-10）。背景から独立したスイッチにした。
 */
body[data-broadcast='on'] .playbar__title,
body[data-screen='play'][data-big='on'] .playbar__title {
  display: none;
}

body[data-broadcast='on'] .shell--play,
body[data-screen='play'][data-big='on'] .shell--play {
  padding-inline: clamp(20px, 5vw, 80px);
}

body[data-broadcast='on'] .result__value,
body[data-screen='play'][data-big='on'] .result__value {
  font-size: clamp(2rem, 9vw, 4.2rem);
  line-height: 1.14;
}

/*
 * 横持ち（844×390 など）。盤面・結果・「回す」が**同時に見える**ように横並びにする。
 * ★ 「回す」は四隅ルールの例外（横持ちのみ）。右下に固定して、結果欄の下に 72px 空ける。
 */
@media (orientation: landscape) and (max-height: 520px) {
  .shell--play {
    padding: 12px;
  }
  .plate {
    flex-direction: row;
    align-items: stretch;
  }
  .stage {
    flex: 1 1 0;
    height: auto;
  }
  .result {
    flex: 0 0 40%;
    align-self: center;
    margin-bottom: 72px;
  }
  .btn--spin {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: auto;
    min-width: 200px;
    z-index: 5;
  }
}

@media (min-width: 900px) {
  :root {
    --shell: 860px;
  }
  .modes {
    gap: var(--s3);
  }
  /* PC 幅で行が 860px に伸びると名前と × が離れすぎる（K7） */
  .items {
    max-width: 640px;
  }
}

/* モーションを減らす設定を尊重（canvas の rAF は JS 側で止める） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ファイル選択を .btn の見た目にする（label なので cursor と行揃えを補う） */
label.btn {
  cursor: pointer;
}

/* 読み込み確認の一覧は横に長くなるので、狭い画面では縦に折る */
#restore-summary b {
  flex: 0 0 7.5em;
}

@media (max-width: 420px) {
  #restore-summary li {
    flex-direction: column;
    gap: 2px;
  }
  #restore-summary b {
    flex: none;
  }
}

/* はじめの案内の手順 */
.steps {
  margin: var(--s3) 0 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.steps li::marker {
  font-weight: 800;
  color: var(--ink-3);
}

/* 案内は行数が多い。画面からはみ出したら中でスクロールさせる */
#modal-intro .modal__box {
  max-height: 88dvh;
  overflow-y: auto;
}

/* ===========================================================================
   設定のまとまり

   ★ 平らに並べない。**効く範囲**でまとめて見出しを付ける。
     「この抽選だけ」なのか「アプリ全体」なのかが分からないと、
     初めて開いた人は1つ触るたびに何が起きるか予測できない。
   =========================================================================== */

.group {
  margin-top: var(--s6);
}

.group:first-child {
  margin-top: var(--s4);
}

.group__title {
  margin: 0 0 var(--s1);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.4;
}

.group__note {
  margin: 0 0 var(--s3);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-3);
}

/* 取り返しのつかない操作のまとまり。最後に置いたうえで、見出しの色で警告する */
.group--danger .group__title {
  color: var(--danger);
}

/* モーダルの中のまとまり（アプリの設定）は間隔を詰める */
.modal__box .group {
  margin-top: var(--s5);
}

/* 畳める説明（バックアップの2・3段落目） */
.more {
  margin-top: var(--s3);
}

/* FAQ（2026-08-17）。★ `.more` は単体で置く前提で上マージンだけを持つので、
   12個並べると間延びする。まとめて置く場所だけ間隔を詰めて、区切り線で読みやすくする */
.faq {
  display: flex;
  flex-direction: column;
  margin-top: var(--s2);
}
.faq .more {
  margin-top: 0;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.faq .more:last-child {
  border-bottom: 0;
}
.faq .more summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.faq .more .note {
  margin-top: 6px;
}

.more summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
  padding: var(--s1) 0;
}

/* ===========================================================================
   第5段（2026-08-16「説明書なしテスト」）— 畳み行・タブ件数・履歴の文字ボタン・回らない側・状態行・元に戻すトースト
   実装仕様: docs/UX_FIX_SPEC_STAGE5.md §2〜§4
   =========================================================================== */

/* 上部の共有ボタン＝線アイコン＋文字「共有」（アイコンだけでは何か分からなかった） */
.iconbtn--label {
  width: auto;
  padding: 0 var(--s3);
  gap: var(--s1);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ほかのルーレット: [土曜くじ] [＋ 別のルーレットを作る]（2件以上のときだけ） */
.boards {
  align-items: center;
}

.boards__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}

.boards__chips {
  display: contents;
}

/* ---- 畳み行（回すもの／見せ方）。小見出し＋44px の行＋直下に開く4枚／seg ---- */
.picker {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.picker__title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink-2);
  padding-left: var(--s1);
}

.picker__row {
  appearance: none;
  border: none;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-align: left;
}

/* 開いているあいだは淡塗り＋accent 縁（選択状態と同じ語彙） */
.picker__row[aria-expanded='true'] {
  background: var(--sel-bg);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.picker__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.picker__icon .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.picker__value {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
}

.picker__chev {
  display: inline-flex;
  transition: transform var(--dur-2) var(--e-out);
}

.picker__chev .icon {
  width: 18px;
  height: 18px;
}

.picker__row[aria-expanded='true'] .picker__chev {
  transform: rotate(180deg);
}

.picker .modes {
  margin-top: var(--s1);
}

.picker__seg {
  margin: var(--s1) 0 0;
}

/* ---- 回らない側の pane（景品を回す のリスナータブ／リスナーを回す の景品タブ）。名前と × だけ・地を薄く ---- */
.pane[data-off='true'] .pane__lede,
.pane[data-off='true'] .pane__tools,
.pane[data-off='true'] #btn-shuffle {
  display: none;
}

.pane[data-off='true'] .item {
  background: color-mix(in srgb, var(--plate) 55%, transparent);
  min-height: 48px;
}

.pane[data-off='true'] .item__label {
  color: var(--ink-2);
  font-weight: 600;
}

/* ---- 履歴の文字ボタン「渡した」「取り消す」（アイコンだけでは何のボタンか分からなかった） ---- */
.history__txt {
  appearance: none;
  border: none;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s2);
  border-radius: var(--r-2);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.history__txt[aria-pressed='true'] {
  background: var(--case);
  color: var(--pin);
}

.history__row {
  flex-wrap: wrap;
}

/* 「履歴を全部消す」は右端・赤文字 */
.row-actions__end {
  margin-left: auto;
}

/* ---- 設定タブ「同じものを2回出さない」の2行（景品／リスナー）。row を縦積みにして中を並べる ---- */
.row--stack {
  flex-direction: column;
  align-items: stretch;
}

.row--stack .row__text {
  min-width: 0;
}

.row--stack .duals {
  align-self: flex-start;
}

.rules {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.rule__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
}

.rule__note {
  font-size: 0.8rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/*
 * リスナーの3択（第7段 §3）：見出しの下に seg を置く（390px では横に並ばない）。
 * 回らない盤面は薄字＋無効（data-off は renderSettings が親の .rule / .sheet__row に付ける）
 */
.rule--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
}

.rule--stack .seg {
  align-self: flex-start;
}

.seg__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* リスナー行の「残り M」（くじの本数ぶん・当たって減った分だけ出す） */
.item__left {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 回す画面 ---- */

/* 上のバーの chip（編集／表示）は 18px 規則に合わせる */
.playbar .chip {
  font-size: 18px;
}

/* 状態行：残り 4/5 ・ 同じものは1回だけ ・ かくし中（18px 灰・該当があるときだけ） */
.play-state {
  margin: calc(-1 * var(--s1)) 0 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* 配信の地（暗い／マゼンタ／緑／白）では chip と同じ二色（--case 塗り＋--pin 縁）にして必ず読める */
body[data-broadcast='on'] .play-state {
  align-self: center;
  background: var(--case);
  color: var(--pin);
  border: 2px solid var(--pin);
  border-radius: var(--r-pill);
  padding: 2px var(--s4);
}

/* ---- 「元に戻す」付きトースト（× で消した景品／一括もどす。5 秒だけ押せる） ---- */
.toast[data-action='true'] {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding-right: var(--s3);
}

.toast__action {
  appearance: none;
  border: none;
  background: var(--pin);
  color: var(--case);
  border-radius: var(--r-pill);
  min-height: 32px;
  padding: 0 var(--s3);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* ===========================================================================
   第5段 後半（2026-08-16）— ルーレットテンプレート画面・試している帯・テンプレの note
   実装仕様: docs/UX_FIX_SPEC_STAGE5.md §5
   ★ 影・グラデ無し。絵文字無し。回す画面（帯）は 18px 以上
   =========================================================================== */

/* テンプレート画面はホームと同じ shell 規則（上詰め）。★ 詳細度は .shell.shell--home と同じ (0,2,0) */
.shell.shell--templates {
  min-height: 100dvh;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--s5);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}

.tpl {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.tpl__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.tpl__title {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.3;
}

.tpl__lede {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.7;
}

.tpl__loading {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.tpl__body {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.tpl__cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* 第1階層：グループのカード（代表の絵1枚＋グループ名＋本数）。押すと第2階層へ */
.tplgroup {
  appearance: none;
  border: none;
  width: 100%;
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-4);
  padding: var(--s3) var(--s4);
  min-height: 88px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s4);
  outline: 2px solid var(--line);
  outline-offset: -2px;
  transition: outline-color var(--dur-1) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .tplgroup:hover {
    outline-color: var(--accent);
  }
}

.tplgroup__pic {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-2);
  background: var(--sunk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tplgroup__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.tplgroup__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tplgroup__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.3;
}

.tplgroup__meta {
  font-size: 0.82rem;
  color: var(--ink-2);
}

/* 右端の山形（右向き＝進む）。chevronDown を回して使う（アイコンを増やさない） */
.tplgroup__chev {
  flex: 0 0 auto;
  color: var(--ink-3);
  display: inline-flex;
}

.tplgroup__chev .icon {
  transform: rotate(-90deg);
}

/* 1枚＝押すと「試す」。plate の面＋静かな縁（Myルーレットの一覧と同じ語彙） */
.tplcard {
  appearance: none;
  border: none;
  width: 100%;
  background: var(--plate);
  color: var(--ink);
  border-radius: var(--r-3);
  padding: var(--s3) var(--s4);
  min-height: 72px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  outline: 2px solid var(--line);
  outline-offset: -2px;
  transition: outline-color var(--dur-1) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .tplcard:hover {
    outline-color: var(--accent);
  }
}

/* 先頭 4 件の絵のサムネ（2×2）。絵は正方形の webp・沈み色の地に載せる */
.tplcard__thumbs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 28px);
  grid-auto-rows: 28px;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-2);
  background: var(--sunk);
}

.tplcard__thumb {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--r-1);
  display: block;
}

.tplcard__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tplcard__title {
  font-weight: 800;
  line-height: 1.3;
}

.tplcard__lead {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.tplcard__meta {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/*
 * テンプレの中身（2026-08-23）。抽選箱・スロットは回しても中身が見えないので、選ぶ前にここで見せる。
 * 2行で切る（カードの高さを揃えたまま、だいたい何が入っているかは伝わる）。
 */
.tplcard__items {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 右端の「試す」ピル（カード全体が押せる。押せる場所だと分かる印） */
.tplcard__go {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}

/* ---- 回す画面：テンプレートを試している帯（18px・plate 地・縁は --case で配信の地でも消えない） ---- */
.trial-bar {
  flex: 0 0 auto;
  position: relative;
  z-index: 2; /* 盤面の絵や紙吹雪より常に手前（ここが試用から出る唯一の出口） */
  background: var(--plate);
  color: var(--ink);
  border: 2px solid var(--case);
  border-radius: var(--r-3);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.trial-bar__text {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.trial-bar__sub {
  margin: 0;
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.4;
}

.trial-bar__actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.trial-bar__actions .btn {
  font-size: 18px;
  flex: 1 1 auto;
}

/* 編集画面：テンプレの note（景品タブ lede の直後・薄字1行。長ければ省略） */
.pane__tplnote {
  margin: calc(-1 * var(--s2)) 0 var(--s3);
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.6;
  /* 見切らせない（1行で「…」に切れていた。実機 2026-08-16） */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ===========================================================================
   第6段（2026-08-16・docs/UX_FIX_SPEC_STAGE6.md）: 結果欄チケット風／紙吹雪／自動の絵のサムネ／長い名前の予告
   =========================================================================== */

/*
 * 結果欄＝チケット風（§3）。左右の中央に半円の切れ込み（radial-gradient 2つで**抜く**＝mask。影なし）。
 * ★ background で描かない（地が変わると切れ込みの色が合わなくなる）。mask なら地が何色でも抜ける。
 *   縁（border 3px --case）も一緒に抜けるので、切れ込みの縁が線で残らない。
 */
.result {
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 13px, #000 13.5px),
    radial-gradient(circle at 100% 50%, transparent 13px, #000 13.5px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 50%, transparent 13px, #000 13.5px),
    radial-gradient(circle at 100% 50%, transparent 13px, #000 13.5px);
  mask-composite: intersect;
  /* 切れ込みの内側に文字が入らないよう左右を空ける */
  padding-left: calc(var(--s4) + 14px);
  padding-right: calc(var(--s4) + 14px);
}

/* 紙吹雪の canvas：盤面に重ねる・触れない。着地の瞬間だけ confetti.js が hidden を外す */
.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* 自動の絵のサムネ（§2）：絵＋右下に小さな「自動」札。自分で選ぶと札が消える */
.item__thumb {
  position: relative;
}

.item__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

.item__thumb--auto {
  border: 1px dashed color-mix(in srgb, var(--ink) 34%, var(--plate));
}

.item__thumb-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  padding: 1px 4px;
  border-radius: var(--r-1);
  background: var(--case);
  color: var(--pin);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* 12 字を超える名前の予告（§3-b）。行の下に薄字 1 行・1盤面に1回 */
.item__longnote {
  flex: 1 0 100%;
  margin: 0 0 var(--s1);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* 回す画面のシート：景品が回らない盤面では「絵を出す」行を薄字に（switch は :disabled で薄くなる） */
.sheet__row[data-off='true'] .sheet__label {
  color: var(--ink-3);
}


/* ===========================================================================
   ライバー3分間日誌（docs/TECHO_DESIGN.md）
   ★ 色を新しく作らない。既存トークンだけで組む（check:contrast の対象を増やさない）
   =========================================================================== */

/* ホームの区切り見出し。★ 容れ物であって、押せるものではない（button にしない） */
.homesec {
  margin: var(--s5) 0 var(--s2);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

.tk__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.tk__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
}
.tk__when {
  color: var(--ink-3);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.tk__lead {
  color: var(--ink-2);
  margin: 0;
  font-size: 0.92rem;
}
.tk__sec {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
/* ★ グループが続くとき、次の見出しが前のカードに食い込んで見える
   （2026-08-17 の実機スクリーンショットで発見。gap だけでは足りない）。
   見出しは「上の塊の終わり」を示すので、上にだけ余白を足す */
.tk__rows + .tk__sec {
  margin-top: var(--s3);
}
.tk__card {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk__name {
  font-weight: 700;
}
.tk__sub {
  color: var(--ink-2);
  font-size: 0.86rem;
}
/* ★ 母数は必ず添える（記録した◯回のうち）。薄くしても消さない */
.tk__basis {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.tk__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.tk__empty {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0;
}
.tk__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
}
.tk__tile {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s3);
}
.tk__tile b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tk__tile span {
  color: var(--ink-2);
  font-size: 0.82rem;
}
.tk__tile--core {
  background: var(--hi-bg);
}
/* 付箋（タグ）。押せるものなので button として組む */
.tk__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tk__tag {
  border: 1px solid var(--line-2, var(--line));
  background: var(--plate);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.84rem;
  min-height: 32px;
}
.tk__tag[aria-pressed='true'] {
  background: var(--sel-bg);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
.tk__person {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* リスナー手帳の1行（2026-08-17・§25）。
   ★ 行そのものは <div>。中の「名前ぶん」だけがボタンで、右にハートが並ぶ。
   行を <button> にするとハートが button の入れ子になり、HTML として壊れる */
.tk__prow {
  flex-direction: row;
  align-items: center;
  gap: var(--s2);
  padding: 0;
}
.tk__prow__main {
  appearance: none;
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) 0 var(--s3) var(--s4);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tk__prow__main > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* サポートメンバーの印。★ 絵文字ではなく線アイコン（非交渉#7）。
   押されたら塗る＝ fill を currentColor にするだけ（色は CSS が単一の出所） */
.tk__heart {
  appearance: none;
  background: transparent;
  border: 0;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: var(--s2);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  cursor: pointer;
}
.tk__heart .icon {
  width: 22px;
  height: 22px;
}
.tk__heart[aria-pressed='true'] {
  color: var(--accent);
}
.tk__heart[aria-pressed='true'] .icon {
  fill: currentColor;
}
@media (hover: hover) {
  /* ★ :hover は必ず (hover:hover) の中に置く（CLAUDE.md #23）。
     タッチ端末で :hover が residual に残り、押したあとずっと色が変わって見える */
  .tk__heart:hover {
    background: var(--sunk);
    color: var(--ink);
  }
}

/* 人のページの入力（呼び名・知り合った時期） */
.tk__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tk__picks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.tk__select {
  appearance: none;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.tk__select:disabled {
  color: var(--ink-3);
  background: var(--sunk);
}
.tk__note {
  width: 100%;
  min-height: 72px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink);
  padding: var(--s2) var(--s3);
  font: inherit;
}
.tk__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ★ 「事務所に出す1枚」（PDF / 印刷）は削除した（2026-08-17 Hiroaki 指示・§12）。
   `.tk__sheet` と `@media print` の一式もここにあったが、
   **使う画面が無くなった CSS は残さない**（次に読む人が「まだある」と誤読する）。
   戻すときは docs/TECHO_DESIGN.md §12 に仕様が残してある */

/* 一覧から消す（2026-08-17）。★ 主導線（回す・編集）と競わせない。
   ★ 「回す」の右に置くが、色は付けない。押し間違いは取り返しがつかない */
.boardrow__del {
  min-height: 40px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* 日誌トップの副導線。★ 主行動（配信のあとに書く）と競わせない。
   ボタンだが、見た目は文字リンク寄りにして重さを落とす */
.tk__subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: center;
  padding-top: var(--s2);
}
.tk__link {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  min-height: 40px;
  padding: 0 var(--s1);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* 日誌の共通ヘッダ（全ページに トップへ戻る）。★ 置き忘れた画面から出られなくなるのを防ぐ */
.tk__nav {
  display: flex;
  margin-bottom: var(--s1);
}