/*
 * 押せる手応えレイヤー（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;
}

/* ============================================================
 * 【2026-07-29 総点検 v2・追加のみ】
 * 上の v1 は <button>/<summary> と一部カードだけが対象で、
 * サイトの押せる要素の多くを占める **<a> のカード・ボタン** が
 * 素通りしていた（＝押しても何も起きない＝押されない）。
 * ここで実テンプレを総ざらいして拾い直す。
 *
 * 設計ルールは v1 と同じ（厳守）:
 * - :where() ＝詳細度0。既にリッチな hover を持つ要素はそのまま勝つ。
 * - rds-* には触れない（RDS は自前の hover/active を持つ）。
 * - 無効・ロック中（:disabled / aria-disabled / .is-locked）は浮かせない。
 * - v1 のセレクタは1つも消していない（この節は純粋な追加）。
 * ========================================================== */

/* 押せる <a>（カード型・ボタン型）を一括で拾う。
   ※ .rinka-card は記事カード、.rinka-cg-card（v1）とは別物 */
:where(
  .rinka-button,
  .rinka-card,
  .rinka-feature-nav__card,
  .rinka-world-daily__card,
  .rinka-fs-ranking__hero,
  .rinka-new-band__link,
  .rinka-fs-tags__card,
  .rinka-fs-tag,
  .rinka-fs-featlist__item,
  .rinka-fs-back,
  .rinka-pg-related__chip,
  .rinka-pg-hub__card,
  .rinka-pillar,
  .rinka-tk-tool,
  .rinka-tk-btn,
  .rinka-lu__btn,
  .rinka-support-btn,
  .rinka-dice-button,
  .rinka-home-welcome__buttons > a,
  [role="button"][class^="rinka-"],
  [role="button"][class*=" rinka-"]
):not([aria-disabled="true"]):not(.is-locked) {
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease,
    background-color .15s ease,
    border-color .15s ease;
  /* スマホの「押した瞬間」を必ず見せる（:active が発火しない端末の保険） */
  -webkit-tap-highlight-color: rgba(239, 143, 184, .18);
}

:where(
  .rinka-button,
  .rinka-card,
  .rinka-feature-nav__card,
  .rinka-world-daily__card,
  .rinka-fs-ranking__hero,
  .rinka-new-band__link,
  .rinka-fs-tags__card,
  .rinka-fs-tag,
  .rinka-fs-featlist__item,
  .rinka-fs-back,
  .rinka-pg-related__chip,
  .rinka-pg-hub__card,
  .rinka-pillar,
  .rinka-tk-tool,
  .rinka-tk-btn,
  .rinka-lu__btn,
  .rinka-support-btn,
  .rinka-dice-button,
  .rinka-home-welcome__buttons > a,
  [role="button"][class^="rinka-"],
  [role="button"][class*=" rinka-"]
):not([aria-disabled="true"]):not(.is-locked):hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

:where(
  .rinka-button,
  .rinka-card,
  .rinka-feature-nav__card,
  .rinka-world-daily__card,
  .rinka-fs-ranking__hero,
  .rinka-new-band__link,
  .rinka-fs-tags__card,
  .rinka-fs-tag,
  .rinka-fs-featlist__item,
  .rinka-fs-back,
  .rinka-pg-related__chip,
  .rinka-pg-hub__card,
  .rinka-pillar,
  .rinka-tk-tool,
  .rinka-tk-btn,
  .rinka-lu__btn,
  .rinka-support-btn,
  .rinka-dice-button,
  .rinka-home-welcome__buttons > a,
  [role="button"][class^="rinka-"],
  [role="button"][class*=" rinka-"]
):not([aria-disabled="true"]):not(.is-locked):active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.97);
}

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

/* 押せない状態は「押せない」と分かるように（浮かせない・少し沈ませる） */
:where(
  button[class^="rinka-"],
  button[class*=" rinka-"]
):disabled,
:where(
  [class^="rinka-"],
  [class*=" rinka-"]
)[aria-disabled="true"] {
  filter: saturate(.6) opacity(.65);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  /* v2 で追加した <a> 群も動かさない */
  :where(
    .rinka-button,
    .rinka-card,
    .rinka-feature-nav__card,
    .rinka-world-daily__card,
    .rinka-fs-ranking__hero,
    .rinka-new-band__link,
    .rinka-fs-tags__card,
    .rinka-fs-tag,
    .rinka-fs-featlist__item,
    .rinka-fs-back,
    .rinka-pg-related__chip,
    .rinka-pg-hub__card,
    .rinka-pillar,
    .rinka-tk-tool,
    .rinka-tk-btn,
    .rinka-lu__btn,
    .rinka-support-btn,
    .rinka-dice-button,
    .rinka-home-welcome__buttons > a
  ),
  :where(
    .rinka-button,
    .rinka-card,
    .rinka-feature-nav__card,
    .rinka-world-daily__card,
    .rinka-fs-ranking__hero,
    .rinka-new-band__link,
    .rinka-fs-tags__card,
    .rinka-fs-tag,
    .rinka-fs-featlist__item,
    .rinka-fs-back,
    .rinka-pg-related__chip,
    .rinka-pg-hub__card,
    .rinka-pillar,
    .rinka-tk-tool,
    .rinka-tk-btn,
    .rinka-lu__btn,
    .rinka-support-btn,
    .rinka-dice-button,
    .rinka-home-welcome__buttons > a
  ):hover,
  :where(
    .rinka-button,
    .rinka-card,
    .rinka-feature-nav__card,
    .rinka-world-daily__card,
    .rinka-fs-ranking__hero,
    .rinka-new-band__link,
    .rinka-fs-tags__card,
    .rinka-fs-tag,
    .rinka-fs-featlist__item,
    .rinka-fs-back,
    .rinka-pg-related__chip,
    .rinka-pg-hub__card,
    .rinka-pillar,
    .rinka-tk-tool,
    .rinka-tk-btn,
    .rinka-lu__btn,
    .rinka-support-btn,
    .rinka-dice-button,
    .rinka-home-welcome__buttons > a
  ):active {
    transition: none;
    transform: none;
  }
}

@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;
  }
}