/* ============================================================
   AWASE — "遊ぶ" ピラー（play/ハブ・シミュレーター・クイズ・デイリー）
   SSOT: docs/design/05-wireframes.html WF-06/WF-07/WF-10,
         docs/design/04-ia-structure.md §6（ゲームUXフロー）,
         docs/design/01-experience-strategy.md §3（品位ライン）。
   このファイルは `@layer pages` に載る（base.css の
   `@layer reset, base, layout, components, pages, utilities;` 宣言順に従い、
   components.css より後・utilities より前）。tokens/base/layout/components.css の
   既存クラス・変数をそのまま再利用し、新規クラスのみを追加する（コア変更禁止）。
   lesson.css とは完全に独立（互いを参照しない。同一ページに同時ロードされないため
   クラス名の重複は起きない設計——このファイル内では sim- / qz- / dl- /
   play-hub- のプレフィックスで用途別に分離する）。
   ============================================================ */
@layer pages {

  /* ---------------------------------------------------------------
     共通：カード型の選択肢（ネイティブradioを非表示にしてlabelをカード化）。
     長いリスト（料理24件・ドリンク20件）でもTab移動が「選択中の1個」で
     済むようにネイティブradio+labelを採用（button+aria-pressedの羅列より
     キーボード効率・SR読み上げが良い＝lesson.cssの.pill-radioと同じ設計判断）。
     シミュレーター（料理・ドリンク）とデイリー（3択）の両方で共有する。
  --------------------------------------------------------------- */
  .pick-card {
    position: relative; display: flex; align-items: center; gap: var(--sp-2);
    min-height: 44px; /* <label>はbase.cssのタッチターゲット規則の対象外のため明示指定（SC 2.5.8） */
    padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--border); cursor: pointer;
    transition: box-shadow var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
  }
  .pick-card:hover { transform: translateY(-1px); }
  .pick-card:has(.pick-card__input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--tint); }
  .pick-card:has(.pick-card__input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .pick-card:has(.pick-card__input:disabled) { opacity: .5; cursor: not-allowed; }
  /* 1x1pxまで縮めず inset:0 でカード全面を覆う（display:flex の親の中で
     static位置に落ちる1x1px版は、実測でクリック判定が兄弟の可視spanに
     奪われるケースがあったため、より頑丈な「全面カバー」方式にする）。
     opacity:0のためポインタイベントは正常に受け取る（pointer-events未指定）。 */
  .pick-card__input { position: absolute; inset: 0; opacity: 0; width: auto; height: auto; margin: 0; min-height: 0; cursor: pointer; }
  .pick-card__body { flex: 1; display: grid; gap: 2px; min-width: 0; }
  .pick-card__title { font-weight: 600; color: var(--text); }
  .pick-card__meta { font-size: .82rem; color: var(--text-muted); }
  .pick-card__check {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; background: var(--border); color: transparent;
    font-size: .78rem; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
  }
  .pick-card:has(.pick-card__input:checked) .pick-card__check { background: var(--ok); color: #fff; }

  /* 集中のための幅制限（宣言済み例外・07 §7-3）：クイズ設問／デイリー設問カード */
  .game-focus { width: min(100%, 840px); margin-inline: auto; }

  .game-empty {
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-m);
    padding: var(--sp-3); text-align: center; color: var(--text-muted); background: var(--surface);
  }

  /* ===============================================================
     PLAY HUB（play/index.html）
  =============================================================== */
  .play-hub-feature {
    display: block; background: var(--tint); padding: var(--sp-4);
  }
  .play-hub-feature__title { font-size: var(--fs-h2); margin-block: var(--sp-1); }
  .play-hub-feature__lede { max-width: 56ch; color: var(--text-muted); }
  .play-hub-feature__stats { margin-block-start: var(--sp-2); }
  .play-hub-feature__cta { margin-block-start: var(--sp-3); }

  .play-hub-grid { margin-block-start: var(--grid-gap); }
  .play-hub-card { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 100%; }
  .play-hub-card__stat { font-size: .88rem; color: var(--text-muted); margin-block-start: 2px; }
  .play-hub-card__cta { margin-block-start: auto; padding-block-start: var(--sp-1); font-weight: 600; color: var(--accent); }

  /* ===============================================================
     SIMULATOR（play/simulator/）— ワクワクの核
  =============================================================== */
  .sim-stepper { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (min-width: 1024px) { .sim-stepper { display: none; } }
  .sim-stepper__btn[aria-current="step"] { background: var(--brand); color: #fff; box-shadow: none; }
  .sim-stepper__btn:disabled { opacity: .45; cursor: not-allowed; }

  /* PC: dish / judge / drink の視覚順。DOM順は dish→drink→judge のまま
     （フォーカス順=操作の意味順・SC 2.4.3）。.panes（layout.css・@layer layout）の
     列定義を @layer pages が上書きする（レイヤー優先度：pages > layout）。 */
  .sim-panes { align-items: start; }
  @media (min-width: 1024px) {
    .sim-panes {
      grid-template-columns: 1fr 1.15fr 1fr;
      grid-template-areas: "dish judge drink";
    }
    .sim-pane--dish  { grid-area: dish; }
    .sim-pane--judge { grid-area: judge; }
    .sim-pane--drink { grid-area: drink; }
  }

  .sim-pane {
    background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-md);
    padding: var(--sp-3); display: grid; gap: var(--sp-2); align-content: start;
  }
  .sim-pane--judge { background: var(--tint); box-shadow: none; }
  .sim-pane[data-active="false"] { display: none; }
  @media (min-width: 1024px) { .sim-pane[data-active] { display: grid; } }
  .sim-pane__heading { font-size: var(--fs-h3); outline-offset: 4px; }
  .sim-pane__heading:focus-visible { outline: 3px solid var(--accent); }

  /* <1024px（SPウィザード・1ペインのみ表示）は内部スクロールを作らず、ページの通常
     スクロール1本に任せる（固定タブバー直上でのネスト・スクロール領域は、ページ全体の
     スクロール位置によってはタブバーの下に一時的に隠れタップしづらくなるケースがある
     ため、SPでは意図的に避ける）。≥1024px（3ペイン同時表示）でのみ、ペイン間の高さの
     偏りを防ぐ目的で内部スクロールに切り替える。 */
  .sim-pick-list { padding-inline-end: 2px; }
  @media (min-width: 1024px) { .sim-pick-list { max-height: 46vh; overflow-y: auto; } }

  .sim-pane__nav { display: flex; justify-content: space-between; gap: 8px; margin-block-start: var(--sp-1); }
  @media (min-width: 1024px) { .sim-pane__nav { display: none; } }

  .sim-empty { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-m); padding: var(--sp-3); color: var(--text-muted); text-align: center; }

  .sim-judge-summary { margin-block-end: 2px; }

  .sim-temp-picker { display: grid; gap: 6px; }
  .sim-temp-picker__label { font-size: .88rem; }
  .temp-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--border); cursor: pointer; font-size: .85rem;
    transition: box-shadow var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
  }
  .temp-chip:has(.temp-chip__input:checked) { background: var(--brand); color: #fff; box-shadow: none; }
  .temp-chip:has(.temp-chip__input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .temp-chip__input { position: absolute; inset: 0; opacity: 0; width: auto; height: auto; margin: 0; min-height: 0; cursor: pointer; }
  .temp-chip__range { opacity: .75; font-size: .78em; margin-inline-start: 2px; }
  .temp-chip__badge { font-size: .72rem; font-weight: 700; color: var(--accent); }
  .temp-chip:has(.temp-chip__input:checked) .temp-chip__badge { color: #FFE1EC; }

  .sim-judge-btn-row { text-align: center; padding-block: 4px; }

  .sim-score { text-align: center; display: grid; gap: 2px; justify-items: center; }
  .sim-score__band { font-family: var(--font-head); }
  /* 発散スケール：excellent/good→--ok・fair→--warn・poor→--ng（design-review H1対応）。
     --accent（ベリー）はCTA専有のためティア表現には使わない。スコア数値・band文言の
     テキスト自体が併記されるため、色のみに依存しない（WCAG 1.4.1）。 */
  .sim-score[data-tier="excellent"] .score--big, .sim-score[data-tier="excellent"] .sim-score__band,
  .sim-score[data-tier="good"] .score--big, .sim-score[data-tier="good"] .sim-score__band { color: var(--ok); }
  .sim-score[data-tier="fair"] .score--big, .sim-score[data-tier="fair"] .sim-score__band { color: var(--warn); }
  .sim-score[data-tier="poor"] .score--big, .sim-score[data-tier="poor"] .sim-score__band { color: var(--ng); }

  .sim-axis-list { display: grid; gap: 8px; margin-block-start: var(--sp-1); }
  .sim-axis { display: grid; grid-template-columns: 6.4em 1fr 3.6em; align-items: center; gap: var(--sp-1); }
  .sim-axis__label { font-size: .85rem; color: var(--text-muted); }
  .sim-axis__value { text-align: end; }

  .sim-evidence { margin-block-start: var(--sp-2); }
  .sim-evidence__list { display: grid; gap: var(--sp-1); margin-block-start: var(--sp-1); }
  .sim-evidence__item { background: var(--surface); border-radius: var(--radius-m); padding: var(--sp-1) var(--sp-2); display: grid; gap: 4px; }
  .sim-evidence__item p { max-width: none; font-size: .92rem; }
  .chip--rule { display: inline-flex; align-items: center; gap: 6px; }

  .sim-advice { display: grid; gap: 8px; margin-block-start: var(--sp-2); }
  .sim-advice__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .sim-advice__apply { margin-inline-start: auto; }

  .sim-profiles { margin-block-start: var(--sp-2); }
  .sim-profiles > * { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-sm); padding: var(--sp-2); }

  .sim-hint { margin-block-start: var(--sp-2); }
  .sim-hint__details summary { cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; }
  .sim-hint__details summary::-webkit-details-marker { display: none; }
  .sim-hint__body { margin-block-start: var(--sp-1); }
  .sim-hint__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .sim-hint__list li { max-width: none; }
  .sim-hint__item { cursor: pointer; }

  .sim-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: var(--sp-2); }

  /* ===============================================================
     QUIZ（play/quiz/）
  =============================================================== */
  .qz-modeselect { display: grid; gap: var(--sp-4); }
  .qz-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin-block-end: var(--sp-2); }
  .qz-set-card { display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center; min-height: 100%; }
  .qz-set-card__label { font-weight: 600; }
  .qz-set-card__score { font-size: .85rem; color: var(--text-muted); }
  .qz-set-card--best .qz-set-card__score { color: var(--ok); font-weight: 600; }
  .qz-daily-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--brand-900); color: #F4F5F2; }
  .qz-daily-cta:hover { transform: translateY(-2px); }

  .qz-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); max-width: 840px; margin-inline: auto; }
  .qz-topbar__meta { font-size: .85rem; color: var(--text-muted); }
  .qz-progress { max-width: 840px; margin: 8px auto 0; }

  .qz-card { display: grid; gap: var(--sp-2); background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-md); padding: var(--sp-3); margin-block-start: var(--sp-3); }
  .qz-prompt { font-size: var(--fs-h3); font-family: var(--font-head); font-weight: 700; color: var(--brand); }

  .qz-options { display: grid; gap: 8px; }
  .qz-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; min-height: 44px;
    border-radius: var(--radius-m); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); cursor: pointer;
  }
  .qz-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--tint); }
  .qz-option input { margin-block-start: 3px; flex: none; min-height: 0; width: 18px; height: 18px; }
  .qz-option__text { max-width: none; }
  .qz-stage-title { font-weight: 600; margin-block-end: 6px; }
  .qz-stage + .qz-stage { margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); border-top: 1px solid var(--border); }

  .qz-matching { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .qz-matching__col { display: grid; gap: 8px; align-content: start; }
  .qz-matching__item { text-align: start; padding: 10px 12px; border-radius: var(--radius-m); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); font-size: .92rem; }
  .qz-matching__item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--tint); }
  .qz-matching__item[data-paired="true"] { box-shadow: inset 0 0 0 2px var(--ok); background: var(--ok-tint); }
  .qz-matching__badge {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 6px;
    border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700;
  }

  .qz-feedback { border-radius: var(--radius-m); padding: var(--sp-2) var(--sp-3); display: grid; gap: 6px; }
  .qz-feedback--correct { background: var(--ok-tint); }
  .qz-feedback--incorrect { background: var(--ng-tint); }
  .qz-feedback__heading { font-family: var(--font-head); font-weight: 700; }
  .qz-feedback__heading:focus-visible { outline-offset: 4px; }
  .qz-feedback__rules { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }

  .qz-result { max-width: 840px; margin-inline: auto; text-align: center; }
  .qz-result-score { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); }
  .qz-result-band { font-weight: 600; }
  .qz-result-band--pass { color: var(--ok); }
  .qz-result-band--fail { color: var(--text-muted); }
  .qz-review { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); text-align: start; }
  .qz-review__item { border-radius: var(--radius-m); background: var(--tint); padding: var(--sp-2); }
  .qz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: var(--sp-2); }

  /* 離脱確認ダイアログ：ネイティブ<dialog>（.showModal()でブラウザが
     フォーカストラップ・Escキャンセル・背景inert化を面倒みる） */
  .qz-leave-dialog {
    border: none; border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
    padding: var(--sp-3); max-width: min(90vw, 420px); background: var(--surface); color: var(--text);
  }
  .qz-leave-dialog::backdrop { background: rgba(22, 29, 43, .5); }
  .qz-leave-dialog__title { font-size: var(--fs-h3); margin-block-end: var(--sp-1); }
  .qz-leave-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-block-start: var(--sp-3); }

  /* ===============================================================
     DAILY（play/daily/）
  =============================================================== */
  .dl-hero { text-align: center; }
  .dl-dish-avatar {
    width: 88px; height: 88px; border-radius: 50%; margin-inline: auto;
    background: var(--brand-900); color: #fff; display: grid; place-items: center;
    font-family: var(--font-head); font-size: 2rem; font-weight: 700;
  }
  .dl-dish-name { margin-block-start: var(--sp-1); }
  .dl-dish-meta { color: var(--text-muted); }

  .dl-choices { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-block-start: var(--sp-2); }
  .dl-choice-card { flex-direction: column; align-items: flex-start; text-align: start; }
  .dl-choice-card.pick-card[data-state="correct"] { box-shadow: inset 0 0 0 2px var(--ok); background: var(--ok-tint); }
  .dl-choice-card.pick-card[data-state="incorrect"] { box-shadow: inset 0 0 0 2px var(--ng); background: var(--ng-tint); }
  .dl-choice-card__badge { font-size: .78rem; font-weight: 700; margin-block-start: 4px; }
  .dl-choice-card__badge--ok { color: var(--ok); }
  .dl-choice-card__badge--ng { color: var(--ng); }

  .dl-submit-row { text-align: center; margin-block-start: var(--sp-2); }

  .dl-result { text-align: center; }
  .dl-result-verdict { font-size: var(--fs-h2); font-family: var(--font-head); margin-block: 4px; }
  .dl-result-verdict--correct { color: var(--ok); }
  .dl-result-verdict--incorrect { color: var(--text); }
  .dl-result-card { text-align: start; margin-block-start: var(--sp-2); }

  .dl-streak { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; }
  .dl-streak__count { font-size: var(--fs-h2); font-family: var(--font-head); color: var(--brand); }
  .dl-week-cal { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .dl-week-cal__day {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-size: .78rem; font-weight: 600; background: var(--border); color: var(--text-muted);
  }
  .dl-week-cal__day[data-state="done"] { background: var(--ok); color: #fff; }
  .dl-week-cal__day[data-state="today"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
  .dl-week-cal__day[data-state="missed"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text-muted); opacity: .7; }
  .dl-week-cal__day[data-state="future"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); opacity: .45; }

  .dl-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: var(--sp-2); }
  .dl-note { margin-block-start: var(--sp-1); }

  /* ---------------------------------------------------------------
     モーション：スクロール進入 stagger（reduced-motionはbase.cssの
     グローバルルールが自動的に無効化するため分岐コードは不要。
     lesson.css §と同一パターン）
  --------------------------------------------------------------- */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}