/*
 * 押せる手応えレイヤー（2026-07-18・デザインAI提案「押せるものに"押せる手応え"があるか総点検」）
 *
 * サイト内の押せる要素（rinka- 系のボタン・カード・チップ）に
 * hover の 1px 浮き＋タップ時の沈み込みを一括で与える薄いレイヤー。
 *
 * 設計ルール（厳守）:
 * - :where() で詰めているため詳細度 0 ＝ 既存の個別スタイル（hover 演出など）が必ず勝つ。
 *   既にリッチな hover を持つ要素はそのまま・無い要素にだけ効く「保険」の層。
 * - rds-* クラスには触れない（RDS は自前の hover/active を持つ）。
 * - prefers-reduced-motion では transform を無効化。
 */

:where(
  button[class^="rinka-"]:not(:disabled),
  button[class*=" rinka-"]:not(:disabled),
  summary[class^="rinka-"],
  summary[class*=" rinka-"],
  .rinka-fs-nav__card,
  .rinka-play-links__card,
  .rinka-fs-omikuji__box,
  .rinka-cg-card,
  .rinka-cg-choice:not(.is-locked),
  .rinka-cg-tier:not(.is-locked),
  .rinka-cg-rarity__chip
) {
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

:where(
  button[class^="rinka-"]:not(:disabled),
  button[class*=" rinka-"]:not(:disabled),
  summary[class^="rinka-"],
  summary[class*=" rinka-"],
  .rinka-fs-nav__card,
  .rinka-play-links__card,
  .rinka-fs-omikuji__box,
  .rinka-cg-choice:not(.is-locked),
  .rinka-cg-tier:not(.is-locked),
  .rinka-cg-rarity__chip
):hover {
  transform: translateY(-1px);
}

/* タップ（押した瞬間）の沈み込み＝スマホでの手応えの主役 */
:where(
  button[class^="rinka-"]:not(:disabled),
  button[class*=" rinka-"]:not(:disabled),
  summary[class^="rinka-"],
  summary[class*=" rinka-"],
  .rinka-fs-nav__card,
  .rinka-play-links__card,
  .rinka-fs-omikuji__box,
  .rinka-cg-card,
  .rinka-cg-choice:not(.is-locked),
  .rinka-cg-tier:not(.is-locked),
  .rinka-cg-rarity__chip
):active {
  transform: translateY(1px) scale(.98);
  filter: brightness(.97);
}

/* キーボード操作でも「いま押せる」が分かるように（既存の focus スタイルが勝つ） */
:where(
  button[class^="rinka-"],
  button[class*=" rinka-"]
):focus-visible {
  outline: 2px solid var(--rds-accent, #ef8fb8);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    button[class^="rinka-"],
    button[class*=" rinka-"],
    summary[class^="rinka-"],
    summary[class*=" rinka-"],
    .rinka-fs-nav__card,
    .rinka-play-links__card,
    .rinka-fs-omikuji__box,
    .rinka-cg-card,
    .rinka-cg-choice,
    .rinka-cg-tier,
    .rinka-cg-rarity__chip
  ),
  :where(
    button[class^="rinka-"],
    button[class*=" rinka-"],
    summary[class^="rinka-"],
    summary[class*=" rinka-"],
    .rinka-fs-nav__card,
    .rinka-play-links__card,
    .rinka-fs-omikuji__box,
    .rinka-cg-card,
    .rinka-cg-choice,
    .rinka-cg-tier,
    .rinka-cg-rarity__chip
  ):hover,
  :where(
    button[class^="rinka-"],
    button[class*=" rinka-"],
    summary[class^="rinka-"],
    summary[class*=" rinka-"],
    .rinka-fs-nav__card,
    .rinka-play-links__card,
    .rinka-fs-omikuji__box,
    .rinka-cg-card,
    .rinka-cg-choice,
    .rinka-cg-tier,
    .rinka-cg-rarity__chip
  ):active {
    transition: none;
    transform: none;
  }
}