@charset "UTF-8";
/* =========================================================
   app-screens.css
   画面コンテンツ用コンポーネントライブラリ
   
   【前提】
   - app-shell.css の構造・基盤の上で動作
   - Material 3準拠のコンポーネント
   - Flutter Widgetsに1:1対応
   
   【ファイル読み込み順】
   1. app-shell.css（基盤・構造・変数定義）
   2. ad.css（広告制御 - shellの変数を利用）
   3. app-screens.css（このファイル - コンポーネント）
   
   ========================================================= */

:root {


  /*――――――――――――――――――――――
    タイポグラフィシステム（完全版）
  ――――――――――――――――――――――*/
  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line-height */
  --lh-display:  1.3;
  --lh-headline: 1.5;
  --lh-body:     1.6;
  --lh-label:    1.4;

  /* Material 3 タイポグラフィスケール */
  --ts-display-large:   clamp(2.5rem, 5vw, 4rem);
  --ts-display-medium:  clamp(2rem, 4vw, 3rem);
  --ts-display-small:   clamp(1.75rem, 3vw, 2.5rem);

  --ts-headline-large:  clamp(1.5rem, 3vw, 2rem);
  --ts-headline-medium: clamp(1.25rem, 2.5vw, 1.75rem);
  --ts-headline-small:  clamp(1.125rem, 2vw, 1.5rem);

  --ts-title-large:     clamp(1rem, 2vw, 1.25rem);
  --ts-title-medium:    clamp(0.875rem, 1.75vw, 1rem);
  --ts-title-small:     clamp(0.75rem, 1.5vw, 0.875rem);

  --ts-body-large:      1.125rem;
  --ts-body-medium:     1rem;
  --ts-body-small:      0.875rem;

  --ts-label-large:     0.875rem;  /* 14px */
  --ts-label-medium:    0.75rem;   /* 12px */
  --ts-label-small:     0.75rem;   /* 12px ← Apple HIG / Android 両規格の最小推奨 12pt/12sp */

  /*――――――――――――――――――――――
    エレベーション（Material 3 Shadow）
  ――――――――――――――――――――――*/
  --elev-0: none;
  --elev-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px rgba(0,0,0,0.15);
  --elev-2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px rgba(0,0,0,0.15);
  --elev-3: 0px 1px 3px rgba(0,0,0,0.3), 0px 4px 8px rgba(0,0,0,0.15);
  --elev-4: 0px 2px 3px rgba(0,0,0,0.3), 0px 6px 10px rgba(0,0,0,0.15);
  --elev-5: 0px 4px 4px rgba(0,0,0,0.3), 0px 8px 12px rgba(0,0,0,0.15);

  /*――――――――――――――――――――――
    Motion トークン（Material 3 Easing）
  ――――――――――――――――――――――*/
  --motion-standard:        cubic-bezier(0.2, 0.0, 0, 1.0);    /* Material 3 Standard Easing */
  --motion-emphasized:      cubic-bezier(0.2, 0.0, 0, 1.0);    /* 入り用（同値） */
  --motion-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1.0); /* 減速（画面IN）Flutter: Curves.easeInOutCubicEmphasized */
  --motion-emphasized-accel: cubic-bezier(0.3, 0.0, 0.8, 0.15); /* 加速（画面OUT） */
  --motion-duration-short:  200ms;
  --motion-duration-medium: 300ms;
  --motion-duration-long:   500ms;

  /*――――――――――――――――――――――
    コンポーネントサイズ（詳細）
  ――――――――――――――――――――――*/
  --comp-button-height:    48px;  /* 子供向け・現代標準。Material 3定義は40dpだがFlutterデフォルトは48dp */
  --comp-icon-button-size: 48px;  /* Material 3 IconButton 標準 */
  --comp-chip-height:      32px;
  --comp-fab-size:         56px;

  /* Flutter準拠ボタン高さ（子供向けに全体を+8dp上方シフト） */
  --button-height-standard: calc(var(--dp-unit) * 48); /* 48dp ← 旧40dp。子供向け・現代標準 */
  --button-height-large:    calc(var(--dp-unit) * 56); /* 56dp ← 旧48dp */
  --button-height-xl:       calc(var(--dp-unit) * 64); /* 64dp ← 旧56dp */

  /* タッチターゲット最小サイズ */
  --min-touch-target: calc(var(--dp-unit) * 48); /* 48dp（Material 3 / Android 準拠）。Apple HIGは44pt */
  
  /*――――――――――――――――――――――
    シェイプトークン
  ――――――――――――――――――――――*/
  --shape-corner-extra-small: 4px;
  --shape-corner-small:       8px;
  --shape-corner-medium:      12px;
  --shape-corner-large:       16px;
  --shape-corner-extra-large: 28px;
  --shape-corner-full:        9999px; /* ★楕円化防止の修正: 50%ではなく9999pxを指定 */
}

/*――――――――――――――――――――――
  1. 画面レイアウトヘルパー
――――――――――――――――――――――*/

/* 画面共通レイアウト（3分割Grid） */
.screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
}

/* fit用：中央寄せ */
.screen-fit {
  align-items: center;
  justify-items: center;
}

/* scroll用：上詰め */
.screen-scroll {
  align-items: start;
}

/* セクション */
.screen > header,
.screen > main,
.screen > footer {
  width: 100%;
}

/* Fit Layout Helpers（Flutter変換用の構造マーカー） */
.fit-top {
  /* Flutter変換時: Spacer()の前に配置される上部要素として認識 */
}

.fit-center {
  /* Flutter変換時: Spacer()で挟まれる中央要素として認識 */
}

.fit-bottom {
  /* Flutter変換時: Spacer()の後に配置される下部要素として認識 */
}

/* メイン領域＋直後の操作行をペアで中央寄せする汎用クラス
   （Pattern Bゲーム画面向け。盤面/カード/問題文などのメインコンテンツに
   直接 flex:1 を付けると、PC等の縦長ビューポートで余白が生まれ、
   直後の操作ボタン行（リセット/ヒント/もう一度等）がメインコンテンツから
   離れて見えてしまう。メインコンテンツと操作行をこのクラスでまとめて
   ラップすることで、2つは常に隣接したまま、余白はペア全体の上下に分配される） */
.center-pair {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/*――――――――――――――――――――――
  2. Material 3 ボタン（全種類）
  Flutter: FilledButton, OutlinedButton, TextButton, FilledButton.tonal
――――――――――――――――――――――*/

/* 共通ボタンベース */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-6);
  min-height: var(--button-height-standard);
  border-radius: var(--shape-corner-large);
  font-family: var(--font-family-base);
  font-size: var(--ts-label-large);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  cursor: pointer;
  transition: 
    background-color var(--motion-duration-short) var(--motion-standard),
    box-shadow var(--motion-duration-short) var(--motion-standard),
    transform var(--motion-duration-short) var(--motion-standard);
  border: none;
  position: relative;
  overflow: hidden;
  /* タッチターゲット最低サイズ */
  min-width: var(--min-touch-target);
  -webkit-tap-highlight-color: transparent;
}

/* Filled Button（主要アクション） */
.btn-filled {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--elev-1);
}

.btn-filled:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

.btn-filled:active {
  box-shadow: var(--elev-1);
  transform: scale(0.98);
}

/* Outlined Button（副次アクション） */
.btn-outlined {
  background-color: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}

.btn-outlined:hover {
  background-color: color-mix(in srgb, var(--md-primary) 8%, transparent);
  border-color: var(--md-primary);
}

.btn-outlined:active {
  background-color: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

/* Text Button（低強調アクション） */
.btn-text {
  background-color: transparent;
  color: var(--md-primary);
  padding: 0 var(--sp-4);
}

.btn-text:hover {
  background-color: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

.btn-text:active {
  background-color: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

/* Tonal Button（中間強調） */
.btn-tonal {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.btn-tonal:hover {
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}

.btn-tonal:active {
  transform: scale(0.98);
}

/* ボタンサイズバリエーション */
.btn-large {
  min-height: var(--button-height-large);
  padding: 0 var(--sp-8);
  font-size: var(--ts-title-medium);
}

.btn-xl {
  min-height: var(--button-height-xl);
  padding: 0 var(--sp-10);
  font-size: var(--ts-title-large);
}

/* 全幅ボタン */
.btn-block {
  width: 100%;
}

/* 無効状態 */
.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/*――――――――――――――――――――――
  3. Material 3 カード（全種類）
  Flutter: Card, Card.elevated, Card.filled, Card.outlined
――――――――――――――――――――――*/

/* 共通カードベース */
.card {
  background-color: var(--md-surface);
  border-radius: var(--shape-corner-medium);
  padding: var(--sp-4);
  transition: 
    box-shadow var(--motion-duration-short) var(--motion-standard),
    transform var(--motion-duration-short) var(--motion-standard);
  overflow: hidden; /* コンテンツがはみ出ないように */
  width: 100%;
  box-sizing: border-box;
}

/* Elevated Card（デフォルト） */
.card-elevated {
  box-shadow: var(--elev-1);
}

.card-elevated:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}

/* Filled Card（背景色あり） */
.card-filled {
  background-color: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  border: none;
}

/* Outlined Card（枠線のみ） */
.card-outlined {
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: none;
}

/* インタラクティブカード */
.card-interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card-interactive:active {
  transform: scale(0.98);
}

/* カード画像 */
.card-image {
  width: 100%;
  object-fit: cover;
  display: block;
}

/*――――――――――――――――――――――
  4. List Tile（Flutter準拠）
  Flutter: ListTile
――――――――――――――――――――――*/

.list-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  min-height: calc(var(--dp-unit) * 56); /* 56dp */
  border-radius: var(--shape-corner-small);
  cursor: pointer;
  transition: background-color var(--motion-duration-short) var(--motion-standard);
  -webkit-tap-highlight-color: transparent;
}

.list-tile:hover {
  background-color: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.list-tile:active {
  background-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

/* Leading（左側アイコン/アバター） */
.list-tile-leading {
  flex-shrink: 0;
  width: calc(var(--dp-unit) * 40); /* 40dp */
  height: calc(var(--dp-unit) * 40);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content（中央テキスト） */
.list-tile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0; /* テキスト省略を有効化 */
}

.list-tile-title {
  font-size: var(--ts-body-large);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--md-on-surface);
  /* テキスト省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-tile-subtitle {
  font-size: var(--ts-body-small);
  line-height: var(--lh-body);
  color: var(--md-on-surface-variant);
  /* テキスト省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trailing（右側アイコン） */
.list-tile-trailing {
  flex-shrink: 0;
  color: var(--md-on-surface-variant);
}

/*――――――――――――――――――――――
  5. TextField（Flutter準拠）
  Flutter: TextField, OutlinedInputBorder
――――――――――――――――――――――*/

.text-field {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.text-field-input {
  width: 100%;
  padding: var(--sp-4);
  font-family: var(--font-family-base);
  font-size: var(--ts-body-large);
  line-height: var(--lh-body);
  color: var(--md-on-surface);
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-corner-small);
  outline: none;
  transition: border-color var(--motion-duration-short) var(--motion-standard);
}

.text-field-input:focus {
  border-color: var(--md-primary);
  border-width: 2px;
  padding: calc(var(--sp-4) - 1px); /* ボーダー太さ分調整 */
}

.text-field-input::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

/* ラベル付きTextField */
.text-field-label {
  display: block;
  font-size: var(--ts-body-small);
  font-weight: var(--fw-medium);
  color: var(--md-on-surface-variant);
}

/* エラー状態 */
.text-field-input.error {
  border-color: var(--md-error);
}

.text-field-error-text {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--ts-body-small);
  color: var(--md-error);
}

/*――――――――――――――――――――――
  6. その他コンポーネント
――――――――――――――――――――――*/

/* Divider（Flutter: Divider） */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--md-outline-variant);
  border: none;
  margin: var(--sp-2) 0;
}

.divider-thick {
  height: 2px;
  background-color: var(--md-outline);
}

/* Avatar（Flutter: CircleAvatar） */
.avatar {
  width: calc(var(--dp-unit) * 40); /* 40dp */
  height: calc(var(--dp-unit) * 40);
  border-radius: var(--shape-corner-full);
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ts-title-medium);
  font-weight: var(--fw-medium);
  overflow: hidden;
}

.avatar-large {
  width: calc(var(--dp-unit) * 56); /* 56dp */
  height: calc(var(--dp-unit) * 56);
  font-size: var(--ts-title-large);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge（Flutter: Badge） */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--dp-unit) * 16); /* 16dp */
  height: calc(var(--dp-unit) * 16);
  padding: 0 var(--sp-1);
  background-color: var(--md-error);
  color: var(--md-on-error);
  border-radius: var(--shape-corner-full);
  font-size: var(--ts-label-small);
  font-weight: var(--fw-medium);
}

/* Progress Indicator（Flutter: CircularProgressIndicator） */
.progress-circular {
  width: calc(var(--dp-unit) * 40); /* 40dp */
  height: calc(var(--dp-unit) * 40);
  border: 4px solid var(--md-primary);
  border-top-color: transparent;
  border-radius: var(--shape-corner-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Linear Progress（Flutter: LinearProgressIndicator） */
.progress-linear {
  width: 100%;
  height: 4px;
  background-color: var(--md-surface-variant);
  border-radius: var(--shape-corner-extra-small);
  overflow: hidden;
  position: relative;
}

.progress-linear-bar {
  height: 100%;
  background-color: var(--md-primary);
  border-radius: inherit;
  transition: width var(--motion-duration-medium) var(--motion-standard);
}

/* 不確定状態のプログレス */
.progress-linear-indeterminate .progress-linear-bar {
  width: 30%;
  animation: indeterminate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Chip（Flutter: Chip） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  height: var(--comp-chip-height);
  background-color: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  border-radius: var(--shape-corner-small);
  font-size: var(--ts-label-large);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--motion-duration-short) var(--motion-standard);
  -webkit-tap-highlight-color: transparent;
}

.chip:hover {
  background-color: color-mix(in srgb, var(--md-on-surface-variant) 12%, var(--md-surface-variant));
}

.chip-selected {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

/*――――――――――――――――――――――
  7. 画面パターン
――――――――――――――――――――――*/

/* Empty State（空状態） */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
  text-align: center;
  color: var(--md-on-surface-variant);
}

.empty-state-icon {
  font-size: calc(var(--dp-unit) * 64); /* 64dp */
  opacity: 0.6;
}

.empty-state-title {
  font-size: var(--ts-title-large);
  font-weight: var(--fw-medium);
  color: var(--md-on-surface);
}

.empty-state-message {
  font-size: var(--ts-body-medium);
  max-width: 320px;
}

/* Error State（エラー状態） */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
  text-align: center;
}

.error-state-icon {
  font-size: calc(var(--dp-unit) * 64);
  color: var(--md-error);
}

.error-state-title {
  font-size: var(--ts-title-large);
  font-weight: var(--fw-medium);
  color: var(--md-error);
}

.error-state-message {
  font-size: var(--ts-body-medium);
  color: var(--md-on-surface-variant);
  max-width: 320px;
}

/* Loading State（ローディング状態） */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
}

.loading-state-message {
  font-size: var(--ts-body-medium);
  color: var(--md-on-surface-variant);
}

/*――――――――――――――――――――――
  8. レイアウトユーティリティ
――――――――――――――――――――――*/

/* Flexboxヘルパー */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* Gapヘルパー */
.gap-xs { gap: var(--sp-1); }
.gap-sm { gap: var(--sp-2); }
.gap-md { gap: var(--sp-4); }
.gap-lg { gap: var(--sp-6); }
.gap-xl { gap: var(--sp-8); }

/* Paddingヘルパー */
.p-0  { padding: 0; }
.p-xs { padding: var(--sp-1); }
.p-sm { padding: var(--sp-2); }
.p-md { padding: var(--sp-4); }
.p-lg { padding: var(--sp-6); }
.p-xl { padding: var(--sp-8); }

/* Marginヘルパー */
.m-0  { margin: 0; }
.m-xs { margin: var(--sp-1); }
.m-sm { margin: var(--sp-2); }
.m-md { margin: var(--sp-4); }
.m-lg { margin: var(--sp-6); }
.m-xl { margin: var(--sp-8); }

/* 上下マージン */
.mt-md { margin-top: var(--sp-4); }
.mb-md { margin-bottom: var(--sp-4); }
.my-md { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }

/* Textヘルパー */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Weightヘルパー */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-bold    { font-weight: var(--fw-bold); }

/* Colorヘルパー */
.text-primary   { color: var(--md-primary); }
.text-secondary { color: var(--md-on-surface-variant); }
.text-error     { color: var(--md-error); }

/*――――――――――――――――――――――
  9. タイポグラフィクラス（Flutter TextTheme準拠）
――――――――――――――――――――――*/

.display-large { font-size: var(--ts-display-large); line-height: var(--lh-display); font-weight: var(--fw-regular); }
.display-medium { font-size: var(--ts-display-medium); line-height: var(--lh-display); font-weight: var(--fw-regular); }
.headline-large { font-size: var(--ts-headline-large); line-height: var(--lh-headline); font-weight: var(--fw-medium); }
.headline-medium { font-size: var(--ts-headline-medium); line-height: var(--lh-headline); font-weight: var(--fw-medium); }
.headline-small { font-size: var(--ts-headline-small); line-height: var(--lh-headline); font-weight: var(--fw-medium); }
.title-large { font-size: var(--ts-title-large); line-height: var(--lh-headline); font-weight: var(--fw-medium); }
.title-medium { font-size: var(--ts-title-medium); line-height: var(--lh-headline); font-weight: var(--fw-medium); }
.body-large { font-size: var(--ts-body-large); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.body-medium { font-size: var(--ts-body-medium); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.body-small { font-size: var(--ts-body-small); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.label-large { font-size: var(--ts-label-large); line-height: var(--lh-label); font-weight: var(--fw-medium); }

/*――――――――――――――――――――――
  10. レスポンシブ対応
――――――――――――――――――――――*/

/* タブレット以上 */
@media (min-width: 768px) {
  .screen { gap: var(--sp-6); }
  .card { padding: var(--sp-6); }
  /* タブレットでは画面幅を制限 */
  .screen > * { max-width: var(--app-max-width); margin-left: auto; margin-right: auto; }
}

/* PC以上 */
@media (min-width: 1024px) {
  /* ホバー効果を強化 */
  .card-elevated:hover { transform: translateY(-4px); }
  .btn:hover { transform: translateY(-2px); }
}

/* 横向き（高さ不足時の調整） */
@media (orientation: landscape) and (max-height: 520px) {
  .screen { gap: var(--sp-2); }
  .empty-state, .error-state, .loading-state { padding: var(--sp-4); }
  .btn { min-height: var(--button-height-standard); }
}

/*――――――――――――――――――――――
  11. アクセシビリティ強化
――――――――――――――――――――――*/

/* フォーカス表示 */
.btn:focus-visible,
.text-field-input:focus-visible,
.list-tile:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .btn-outlined, .card-outlined, .text-field-input { border-width: 2px; }
  .divider { height: 2px; }
}

/* アニメーション軽減設定 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*――――――――――――――――――――――
  12. 追加アクション・ナビゲーション (Tabs, FAB, Menus)
――――――――――――――――――――――*/

/* Icon Buttons */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--comp-icon-button-size); height: var(--comp-icon-button-size); border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); border: none; cursor: pointer; transition: background 0.2s; -webkit-tap-highlight-color: transparent; }
.icon-btn:active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }

/* Floating Action Button (FAB) */
.fab { display: inline-flex; align-items: center; justify-content: center; width: var(--comp-fab-size); height: var(--comp-fab-size); border-radius: var(--shape-corner-large); background-color: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: var(--elev-3); cursor: pointer; border: none; transition: all var(--motion-duration-short) var(--motion-standard); -webkit-tap-highlight-color: transparent; }
.fab:active { transform: scale(0.95); box-shadow: var(--elev-1); }

/* Segmented Buttons */
.segmented-control { display: flex; align-items: center; border: 1px solid var(--md-outline); border-radius: var(--shape-corner-full); overflow: hidden; height: 40px; }
.segmented-btn { flex: 1; height: 100%; background: transparent; color: var(--md-on-surface); border: none; border-right: 1px solid var(--md-outline); font-weight: var(--fw-medium); cursor: pointer; transition: background 0.2s; -webkit-tap-highlight-color: transparent; }
.segmented-btn:last-child { border-right: none; }
.segmented-btn.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Top App Bar & Toolbar */
.top-app-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--sp-1); background: var(--md-surface); color: var(--md-on-surface); border-bottom: 1px solid var(--md-outline-variant); }
.top-app-bar .title { font-size: var(--ts-title-large); font-weight: var(--fw-medium); }

/* Tabs */
.tabs { display: flex; width: 100%; border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface); }
.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; color: var(--md-on-surface-variant); font-weight: var(--fw-medium); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; -webkit-tap-highlight-color: transparent; }
.tab-item.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

/* Navigation Drawer (Modal) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.nav-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 280px; background: var(--md-surface); box-shadow: var(--elev-3); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); padding: var(--sp-4); }
.drawer-overlay.open .nav-drawer { transform: translateX(0); }

/* Dropdown Menu */
.dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--md-surface); border-radius: var(--shape-corner-extra-small); box-shadow: var(--elev-2); min-width: 150px; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: all 0.2s; }
.dropdown-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; color: var(--md-on-surface); transition: background 0.2s; }
.menu-item:hover { background: var(--md-surface-variant); }

/* Snackbar (Fix for fixed positioning) */
.snackbar { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 100px); background: var(--md-on-surface); color: var(--md-surface); padding: 14px 24px; border-radius: var(--shape-corner-extra-small); display: flex; align-items: center; gap: 16px; box-shadow: var(--elev-3); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1); z-index: 9999; white-space: nowrap; }
.snackbar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.snackbar-btn { color: var(--md-primary-container); background: transparent; border: none; font-weight: var(--fw-bold); cursor: pointer; padding: 0; }


/*――――――――――――――――――――――
  13. 追加フォーム要素 (Search, Switch, Checkbox, Slider)
――――――――――――――――――――――*/

/* Search Bar */
.search-bar { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; background: color-mix(in srgb, var(--md-surface-variant) 50%, transparent); border-radius: var(--shape-corner-full); width: 100%; box-sizing: border-box; }
.search-bar input { flex: 1; border: none; background: transparent; font-size: var(--ts-body-large); outline: none; color: var(--md-on-surface); min-width: 0; }
.search-bar input::placeholder { color: var(--md-on-surface-variant); }

/* Checkbox & Radio */
.control-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--ts-body-large); -webkit-tap-highlight-color: transparent; }
.control-input { appearance: none; width: 24px; height: 24px; border: 2px solid var(--md-outline); display: flex; align-items: center; justify-content: center; transition: all 0.2s; margin: 0; }
.control-input[type="checkbox"] { border-radius: 4px; }
.control-input[type="radio"] { border-radius: 50%; }
.control-input:checked { background: var(--md-primary); border-color: var(--md-primary); }
.control-input[type="checkbox"]:checked::after { content: ''; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; }
.control-input[type="radio"]:checked::after { content: ''; width: 10px; height: 10px; background: white; border-radius: 50%; }

/* Material 3 Switch (Functional CSS only) */
.switch-label { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switch-text { display: flex; align-items: center; gap: 12px; font-weight: var(--fw-medium); color: var(--md-on-surface); }
.switch-toggle { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
.switch-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--md-surface-variant); border: 2px solid var(--md-outline); border-radius: 32px; transition: 0.3s; }
.switch-track:before { position: absolute; content: ""; height: 16px; width: 16px; left: 6px; bottom: 6px; background-color: var(--md-outline); border-radius: 50%; transition: 0.3s cubic-bezier(0.2, 0, 0, 1); }
.switch-toggle input:checked + .switch-track { background-color: var(--md-primary); border-color: var(--md-primary); }
.switch-toggle input:checked + .switch-track:before { transform: translateX(20px); background-color: var(--md-on-primary); height: 24px; width: 24px; bottom: 2px; }

/* Slider */
.slider-container { display: flex; align-items: center; gap: 16px; width: 100%; }
.slider { appearance: none; width: 100%; height: 16px; border-radius: 8px; background: var(--md-surface-variant); outline: none; }
.slider::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--md-primary); box-shadow: var(--elev-1); cursor: pointer; }


/*――――――――――――――――――――――
  14. 追加データ表示 (Select, Accordion)
――――――――――――――――――――――*/

/* Select / Pull-down */
.select-wrapper { position: relative; width: 100%; }
.select-wrapper::after { content: '\e313'; font-family: 'Material Symbols Rounded'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--md-on-surface-variant); pointer-events: none; }
.select-input { width: 100%; padding: var(--sp-3) calc(var(--sp-4) + 24px) var(--sp-3) var(--sp-4); font-size: var(--ts-body-large); color: var(--md-on-surface); background-color: var(--md-surface); border: 1px solid var(--md-outline); border-radius: var(--shape-corner-small); appearance: none; outline: none; box-sizing: border-box; }
.select-input:focus { border-color: var(--md-primary); border-width: 2px; padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) + 23px) calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px); }

/* Accordion (Details/Summary) */
details.accordion { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-corner-medium); overflow: hidden; width: 100%; }
details.accordion summary { padding: 16px; font-weight: var(--fw-medium); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--md-on-surface); }
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::after { content: '\e313'; font-family: 'Material Symbols Rounded'; transition: transform 0.2s; color: var(--md-on-surface-variant); }
details.accordion[open] summary::after { transform: rotate(180deg); }
details.accordion .accordion-content { padding: 0 16px 16px; color: var(--md-on-surface-variant); font-size: var(--ts-body-medium); }


/*――――――――――――――――――――――
  15. キッズUI & 学習UI拡張 (Kids Variants, Progress)
――――――――――――――――――――――*/

/* Quiz Linear Progress (ゲージ式) */
.quiz-progress { width: 100%; height: 12px; background: var(--md-surface-variant); border-radius: var(--shape-corner-full); overflow: hidden; }
.quiz-progress-bar { height: 100%; background: var(--md-primary); border-radius: var(--shape-corner-full); transition: width 0.3s ease-out; }

/* Circular Dots Progress (丸形ドット) */
.step-dots-row { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
.step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--md-outline-variant); flex-shrink: 0; transition: background 0.3s; }
.step-dot.done { background: var(--md-primary); }
.step-dot.cur { background: var(--md-primary); opacity: 0.5; transform: scale(1.2); }

/* ═══════════════════════════════════════════════
   FW テーマ変数（デフォルト値 = FW標準）
   テーマCSSは :root のここを上書きするだけ
   ═══════════════════════════════════════════════ */
:root {
  /* ボタン */
  --fw-btn-radius:       28px;   /* pill=28 / rounded=16 / square=4 */
  --fw-btn-height:       56px;
  --fw-btn-font-size:    var(--ts-title-large);
  --fw-btn-font-weight:  800;
  --fw-btn-border-width: 2px;
  --fw-btn-depth:        6px;    /* 立体感（bottom border） */
  --fw-btn-depth-active: 2px;    /* 押したとき */
  --fw-btn-press-y:      4px;    /* 押し込み量 */

  /* アイコンボタン */
  --fw-icon-btn-size:        64px;
  --fw-icon-btn-radius:      50%;   /* 丸=50% / 角=var(--fw-btn-radius) */
  --fw-icon-btn-icon-size:   32px;

  /* カード */
  --fw-card-radius:      var(--shape-corner-extra-large);
  --fw-card-border-width:2px;
  --fw-card-depth:       6px;

  /* プログレスバー */
  --fw-progress-height:  24px;
  --fw-progress-radius:  var(--shape-corner-full);

  /* テキストフィールド */
  --fw-field-radius:      var(--shape-corner-large);
  --fw-field-font-size:   24px;
  --fw-field-border-width:3px;

  /* タイポグラフィ */
  --ts-fw-display-lg:  4rem;      /* 64px */
  --ts-fw-display-md:  3rem;      /* 48px */
  --ts-fw-display-sm:  2.25rem;   /* 36px */
  --ts-fw-headline-lg: 2rem;      /* 32px */
  --ts-fw-headline-md: 1.75rem;   /* 28px */
  --ts-fw-headline-sm: 1.5rem;    /* 24px */
  --ts-fw-title-lg:    1.375rem;  /* 22px */
  --ts-fw-title-md:    1.25rem;   /* 20px */
  --ts-fw-title-sm:    1.125rem;  /* 18px */
  --ts-fw-body-lg:     1.25rem;   /* 20px */
  --ts-fw-body-md:     1.125rem;  /* 18px */
  --ts-fw-body-sm:     1rem;      /* 16px */
  --ts-fw-label-lg:    1rem;      /* 16px */
  --ts-fw-label-md:    0.875rem;  /* 14px */
  --ts-fw-label-sm:    0.75rem;   /* 12px */
}

/* Kids Button (Duolingo Style) */
.btn-fw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--fw-btn-height);
  padding: 0 var(--sp-6);
  border-radius: var(--fw-btn-radius);
  font-size: var(--fw-btn-font-size);
  font-weight: var(--fw-btn-font-weight);
  cursor: pointer;
  border: var(--fw-btn-border-width) solid transparent;
  border-bottom-width: var(--fw-btn-depth);
  transition: transform 0.1s, border-bottom-width 0.1s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
}
.btn-fw:active {
  transform: translateY(var(--fw-btn-press-y));
  border-bottom-width: var(--fw-btn-depth-active);
}
.btn-fw .ms { font-size: 24px; }

.btn-fw-primary  { background-color: var(--md-primary);  color: var(--md-on-primary);  border-color: color-mix(in srgb, var(--md-primary) 70%, black); }
.btn-fw-outlined { background-color: var(--md-surface);  color: var(--md-primary);     border-color: var(--md-outline-variant); }
.btn-fw-tonal    { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: color-mix(in srgb, var(--md-secondary-container) 70%, black); }

/* シェイプ修飾クラス（テーマでは --fw-btn-radius を上書きするほうが推奨） */
.btn-fw-pill    { border-radius: 28px; }
.btn-fw-rounded { border-radius: var(--shape-corner-large); }
.btn-fw-square  { border-radius: var(--shape-corner-extra-small); }

/* アイコン位置 */
.btn-fw-icon-left  { justify-content: center; }
.btn-fw-icon-right { justify-content: space-between; }
.btn-fw-icon-right .btn-fw-text { flex: 1; text-align: center; }
.btn-fw-icon-right .ms { flex-shrink: 0; }

/* Kids Card */
.card-fw {
  background: var(--md-surface);
  border: var(--fw-card-border-width) solid var(--md-outline-variant);
  border-bottom-width: var(--fw-card-depth);
  border-radius: var(--fw-card-radius);
  padding: var(--sp-5);
  width: 100%;
  box-sizing: border-box;
}

/* Kids Icon Button */
.icon-btn-fw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fw-icon-btn-size);
  height: var(--fw-icon-btn-size);
  flex-shrink: 0;
  border-radius: var(--fw-icon-btn-radius);
  background: var(--md-surface);
  color: var(--md-primary);
  border: var(--fw-btn-border-width) solid var(--md-outline-variant);
  border-bottom-width: var(--fw-btn-depth);
  font-size: var(--fw-icon-btn-icon-size);
  cursor: pointer;
  transition: transform 0.1s, border-bottom-width 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn-fw:active {
  transform: translateY(var(--fw-btn-press-y));
  border-bottom-width: var(--fw-btn-depth-active);
}

/* Kids Progress Bar */
.quiz-progress-fw {
  width: 100%;
  height: var(--fw-progress-height);
  background: var(--md-surface);
  border: var(--fw-btn-border-width) solid var(--md-outline-variant);
  border-radius: var(--fw-progress-radius);
  overflow: hidden;
  position: relative;
}
.quiz-progress-bar-fw {
  height: 100%;
  background: var(--md-primary);
  border-radius: var(--fw-progress-radius);
  transition: width 0.3s ease-out;
  border-right: var(--fw-btn-border-width) solid color-mix(in srgb, var(--md-primary) 70%, black);
}

/* Kids Text Field */
.text-field-fw {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-family-base);
  font-size: var(--fw-field-font-size);
  font-weight: var(--fw-black);
  text-align: center;
  color: var(--md-on-surface);
  background-color: var(--md-surface);
  border: var(--fw-field-border-width) solid var(--md-outline);
  border-radius: var(--fw-field-radius);
  outline: none;
  transition: border-color 0.2s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
}
.text-field-fw:focus { border-color: var(--md-primary); }

/* ─────────────────────────────────────────
   FW FAB (Floating Action Button)
   Kids向け大型・立体感あり
   ───────────────────────────────────────── */
.fab-fw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fw-icon-btn-size);   /* 64px */
  height: var(--fw-icon-btn-size);
  border-radius: var(--fw-icon-btn-radius); /* デフォルト50% / テーマで変更可 */
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: var(--fw-btn-border-width) solid color-mix(in srgb, var(--md-primary) 70%, black);
  border-bottom-width: var(--fw-btn-depth);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  font-size: var(--fw-icon-btn-icon-size);
  transition: transform 0.1s, border-bottom-width 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.fab-fw:active {
  transform: translateY(var(--fw-btn-press-y));
  border-bottom-width: var(--fw-btn-depth-active);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Extended FAB: ラベル付き横長ボタン */
.fab-fw-extended {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--fw-icon-btn-size);
  padding: 0 var(--sp-5);
  border-radius: var(--fw-btn-radius);
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: var(--fw-btn-border-width) solid color-mix(in srgb, var(--md-primary) 70%, black);
  border-bottom-width: var(--fw-btn-depth);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  font-size: var(--fw-btn-font-size);
  font-weight: var(--fw-btn-font-weight);
  white-space: nowrap;
  transition: transform 0.1s, border-bottom-width 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.fab-fw-extended:active {
  transform: translateY(var(--fw-btn-press-y));
  border-bottom-width: var(--fw-btn-depth-active);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.fab-fw-extended .ms { font-size: 24px; }

/* ─────────────────────────────────────────
   FW Top App Bar
   ───────────────────────────────────────── */
.top-app-bar-fw {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--comp-header-h) + var(--safe-area-top));
  padding-top: var(--safe-area-top);
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-sizing: border-box;
  flex-shrink: 0;
  border-bottom: var(--fw-btn-border-width) solid color-mix(in srgb, var(--md-primary) 70%, black);
}
.top-app-bar-fw .bar-title {
  flex: 1;
  padding: 0 var(--sp-2);
  font-size: var(--ts-fw-title-sm);
  font-weight: var(--fw-btn-font-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 左リード・右アクションのicon-btnはon-primaryカラーで上書き */
.top-app-bar-fw .icon-btn {
  color: var(--md-on-primary);
}
.top-app-bar-fw .icon-btn:active {
  background: rgba(255,255,255,0.15);
}

/* ─────────────────────────────────────────
   FW Bottom Navigation
   Kidsアプリ向け・アクティブピル型
   ───────────────────────────────────────── */
.bottom-nav-fw {
  display: flex;
  align-items: center;
  justify-content: space-evenly;      /* space-around より均等 */
  width: 100%;
  height: calc(var(--comp-nav-h) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--md-surface);
  border-top: var(--fw-btn-border-width) solid color-mix(in srgb, var(--md-outline-variant) 80%, black);
  box-sizing: border-box;
  flex-shrink: 0;
}
.nav-item-fw {
  flex: 1;
  min-width: 0;                        /* flex子要素の縮小を許可 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  font-size: var(--ts-fw-label-sm);
  font-weight: var(--fw-medium);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.nav-item-fw.active {
  color: var(--md-primary);
}
/* nav-icon-fw: nav-icon と同じ設計（32×32正方形 + border-radius:50%）
   active時に primary-container の背景色が入る */
.nav-icon-fw {
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.nav-item-fw.active .nav-icon-fw {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.nav-item-fw .ms {
  font-size: 24px;
}

/* 2列グリッドユーティリティ */
.btn-grid-fw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  width: 100%;
}

/* FW タイポグラフィクラス */
.display-lg-fw  { font-size: var(--ts-fw-display-lg);  line-height: 1.15; font-weight: var(--fw-black); }
.display-md-fw  { font-size: var(--ts-fw-display-md);  line-height: 1.15; font-weight: var(--fw-black); }
.display-sm-fw  { font-size: var(--ts-fw-display-sm);  line-height: 1.2;  font-weight: var(--fw-black); }
.headline-lg-fw { font-size: var(--ts-fw-headline-lg); line-height: 1.25; font-weight: var(--fw-black); }
.headline-md-fw { font-size: var(--ts-fw-headline-md); line-height: 1.25; font-weight: var(--fw-black); }
.headline-sm-fw { font-size: var(--ts-fw-headline-sm); line-height: 1.3;  font-weight: var(--fw-bold);  }
.title-lg-fw    { font-size: var(--ts-fw-title-lg);    line-height: 1.35; font-weight: var(--fw-bold);  }
.title-md-fw    { font-size: var(--ts-fw-title-md);    line-height: 1.35; font-weight: var(--fw-bold);  }
.title-sm-fw    { font-size: var(--ts-fw-title-sm);    line-height: 1.4;  font-weight: var(--fw-bold);  }
.body-lg-fw     { font-size: var(--ts-fw-body-lg);     line-height: 1.6;  font-weight: var(--fw-regular); }
.body-md-fw     { font-size: var(--ts-fw-body-md);     line-height: 1.6;  font-weight: var(--fw-regular); }
.body-sm-fw     { font-size: var(--ts-fw-body-sm);     line-height: 1.6;  font-weight: var(--fw-regular); }
.label-lg-fw    { font-size: var(--ts-fw-label-lg);    line-height: 1.4;  font-weight: var(--fw-medium); }
.label-md-fw    { font-size: var(--ts-fw-label-md);    line-height: 1.4;  font-weight: var(--fw-medium); }
.label-sm-fw    { font-size: var(--ts-fw-label-sm);    line-height: 1.4;  font-weight: var(--fw-medium); }


/*――――――――――――――――――――――
  16. 構造的修正パッチ
――――――――――――――――――――――*/

/* .content-scroll の強制表示対応（静的HTMLカタログ等での事故防止用）
   app-shell.css 側で display: none が掛かっていても、このクラスで強制表示し
   正しく縦積みFlexレイアウトとして機能させます。
*/
.content-scroll {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
}
/* ═══════════════════════════════════════════════
   FW Inputs & Selection / Game UI
   セクション15の続き
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   FW Toggle Switch
   Kids向け大型・立体感あり。設定画面で使用。
   HTML: <label class="toggle-fw">
           <input type="checkbox">
           <span class="toggle-thumb-fw"></span>
         </label>
   ───────────────────────────────────────── */
.toggle-fw {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-fw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-thumb-fw {
  position: absolute;
  inset: 0;
  background: var(--md-outline-variant);
  border-radius: var(--shape-corner-full);
  transition: background 0.2s;
  border-bottom: 3px solid color-mix(in srgb, var(--md-outline-variant) 70%, black);
}
.toggle-thumb-fw::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-fw input:checked + .toggle-thumb-fw {
  background: var(--md-primary);
  border-bottom-color: color-mix(in srgb, var(--md-primary) 70%, black);
}
.toggle-fw input:checked + .toggle-thumb-fw::before {
  transform: translateY(-50%) translateX(22px);
}

/* ─────────────────────────────────────────
   FW Setting Row
   ラベル + 説明 + コントロール（トグル等）の横並び行。
   Settings Modal / Screen で使用。
   ───────────────────────────────────────── */
.setting-row-fw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--touch, 48px);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--md-outline-variant);
}
.setting-row-fw:last-child {
  border-bottom: none;
}
.setting-row-fw-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.setting-row-fw-title {
  font-size: var(--ts-fw-label-lg);
  font-weight: var(--fw-bold);
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.setting-row-fw-desc {
  font-size: var(--ts-fw-label-sm);
  color: var(--md-on-surface-variant);
}

/* ─────────────────────────────────────────
   FW Modal
   Settings / Pause / Hint / Reset 共通。
   backdrop-filter でブラー演出。
   HTML: <div class="modal-overlay-fw" id="xxx">
           <div class="modal-card-fw">
             <div class="modal-header-fw">...</div>
             <div class="modal-body-fw">...</div>
           </div>
         </div>
   JS: document.getElementById('xxx').classList.toggle('open')
   ───────────────────────────────────────── */
.modal-overlay-fw {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  box-sizing: border-box;
}
.modal-overlay-fw.open {
  display: flex;
}
.modal-card-fw {
  background: var(--md-surface);
  border-radius: var(--fw-card-radius);
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,0.25);
  border-bottom: var(--fw-card-depth) solid color-mix(in srgb, var(--md-outline-variant) 70%, black);
}
.modal-header-fw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--md-outline-variant);
}
.modal-title-fw {
  font-size: var(--ts-fw-title-lg);
  font-weight: var(--fw-black);
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.modal-body-fw {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.modal-footer-fw {
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  gap: var(--sp-3);
}

/* ─────────────────────────────────────────
   FW Badge
   スコア・レベル・NEW ラベルなど。
   立体感あり。サイズ sm / md / lg の3種。
   ───────────────────────────────────────── */
.badge-fw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 4px 12px;
  border-radius: var(--shape-corner-full);
  font-weight: var(--fw-black);
  font-size: var(--ts-fw-label-lg);
  line-height: 1;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.badge-fw-sm { font-size: var(--ts-fw-label-sm); padding: 2px 8px;  border-bottom-width: 2px; }
.badge-fw-lg { font-size: var(--ts-fw-title-sm); padding: 6px 16px; border-bottom-width: 4px; }

/* カラーバリアント */
.badge-fw-primary  { background: var(--md-primary);   color: var(--md-on-primary);   border-color: color-mix(in srgb, var(--md-primary)   70%, black); }
.badge-fw-secondary{ background: var(--md-secondary);  color: var(--md-on-secondary);  border-color: color-mix(in srgb, var(--md-secondary)  70%, black); }
.badge-fw-tertiary { background: var(--md-tertiary);   color: var(--md-on-tertiary);   border-color: color-mix(in srgb, var(--md-tertiary)   70%, black); }
.badge-fw-error    { background: var(--md-error);      color: var(--md-on-error);      border-color: color-mix(in srgb, var(--md-error)      70%, black); }
.badge-fw-surface  { background: var(--md-surface-variant); color: var(--md-on-surface-variant); border-color: color-mix(in srgb, var(--md-outline-variant) 70%, black); }

/* ─────────────────────────────────────────
   FW Chip
   カテゴリ・フィルター・タグなど。
   選択式（input:checkbox/radio と組み合わせ可）。
   ───────────────────────────────────────── */
.chip-fw {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  border-radius: var(--shape-corner-full);
  border: 2px solid var(--md-outline-variant);
  border-bottom-width: 4px;
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font-size: var(--ts-fw-label-lg);
  font-weight: var(--fw-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.chip-fw:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
.chip-fw.selected {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: var(--md-primary);
  border-bottom-color: color-mix(in srgb, var(--md-primary) 70%, black);
}
.chip-fw .ms { font-size: 18px; }
/* Chip グループ（横スクロール行） */
.chip-group-fw {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.chip-group-fw-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px; /* border-bottom が切れないよう */
}
.chip-group-fw-scroll::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────
   FW Score Display
   ゲーム中のスコア・コンボ・レベル表示。
   ───────────────────────────────────────── */
.score-display-fw {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
/* 数値を大きく出す */
.score-num-fw {
  font-size: var(--ts-fw-display-sm);
  font-weight: var(--fw-black);
  color: var(--md-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-label-fw {
  font-size: var(--ts-fw-label-md);
  font-weight: var(--fw-medium);
  color: var(--md-on-surface-variant);
}
/* Streak Bar: 連続正解などに使う細いバー */
.streak-bar-fw {
  width: 100%;
  height: 6px;
  background: var(--md-outline-variant);
  border-radius: var(--shape-corner-full);
  overflow: hidden;
}
.streak-bar-fill-fw {
  height: 100%;
  background: var(--md-secondary);
  border-radius: var(--shape-corner-full);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────
   FW Accordion
   設定グループ・FAQ・カテゴリ折りたたみに使用。
   .acc-fw に .open クラスで展開。
   JS: el.classList.toggle('open')
   ───────────────────────────────────────── */
.acc-fw {
  background: var(--md-surface);
  border: 2px solid var(--md-outline-variant);
  border-radius: var(--fw-card-radius);
  overflow: hidden;
  transition: border-color 0.2s;
}
.acc-fw + .acc-fw {
  margin-top: var(--sp-2);
}
/* ヘッダー行（タップ領域） */
.acc-header-fw {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 56px;
}
.acc-header-fw:active { opacity: 0.7; }
/* 左アイコン（任意） */
.acc-icon-fw {
  width: 36px;
  height: 36px;
  border-radius: var(--shape-corner-medium);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* タイトル・サブテキスト */
.acc-info-fw {
  flex: 1;
  min-width: 0;
}
.acc-title-fw {
  font-size: var(--ts-fw-label-lg);
  font-weight: var(--fw-bold);
  color: var(--md-on-surface);
}
.acc-sub-fw {
  font-size: var(--ts-fw-label-sm);
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}
/* chevron（展開矢印） */
.acc-chevron-fw {
  color: var(--md-on-surface-variant);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}
.acc-fw.open .acc-chevron-fw {
  transform: rotate(180deg);
}
/* ボディ（折りたたみ領域） */
.acc-body-fw {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 0px solid var(--md-outline-variant);
}
.acc-fw.open .acc-body-fw {
  max-height: 2000px;
  border-top-width: 1px;
}
.acc-body-inner-fw {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}