/* ==========================================================================
   customize.css — Game*Shelf デザインカスタマイズ
   --------------------------------------------------------------------------
   トーン: クリスタル・ガラス（#0e1621 / #1b2838 / #00F0FF）。
   元CSS（tokens.css / style.css / components/*.css）は触らず、本ファイルの上書きで調整。
   読み込みは全CSSの最後（各HTMLの </head> 直前）。

   [1] トークン / [1c] コンテナ幅 / [1b] 背景
   [2] ガラスの艶 / [2a] アクセント / [2d] 未適用パネルの統一
   [2b] PC(>=992px) ナビ整列 / [2c] 中間幅(992〜1199px)
   [3] ヘッダー / [4] ボトムナビ / [5] ボトムシート（<=991px）
   [2e] steam-blue ティントのシアン化 / [2f] 一括操作バー

   設計判断・落とし穴・変更履歴は GameShelf/DESIGN-NOTES.md を参照。
   ========================================================================== */

/* ---------- [1] カスタムトークン（クリスタル・ガラス #00F0FF） ---------- */
:root {
  --gs-accent: #00f0ff;          /* クリスタルシアン（リンク・枠線・ボタン文字） */
  --gs-accent-dim: #00dbe9;      /* グロー付き数値・発光の芯 */
  --gs-accent-light: #7df4ff;    /* 最明部（ホバー文字など） */
  --gs-accent-bright: #00dbe9;   /* --gs-accent-dim の別名（sidebar のアクセントバー等が参照） */
  --gs-heading: #dbfcff;         /* 見出し: わずかにシアンがかった白 */
  --gs-canvas: #0e1621;
  --gs-panel: #1b2838;

  /* ガラスパネル（半透明 + blur）。面=白3% / 枠=#00F0FF 10〜30% */
  --gs-glass-bg: rgba(255, 255, 255, 0.03);
  --gs-glass-bg-cyan: rgba(0, 240, 255, 0.02);       /* 統計カード(crystal)用 */
  --gs-glass-border: rgba(0, 240, 255, 0.14);
  --gs-glass-border-strong: rgba(0, 240, 255, 0.26);
  --gs-glass-border-hover: rgba(0, 240, 255, 0.60);
  --gs-blur: saturate(1.05) blur(20px);

  /* カード上辺の「光の反射」ライン */
  --gs-topline: linear-gradient(90deg,
      rgba(0, 240, 255, 0) 0%,
      rgba(0, 240, 255, 0.55) 50%,
      rgba(0, 240, 255, 0) 100%);

  /* 上端ハイライト（シート/ボタン用） */
  --gs-gloss-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --gs-glow-soft: 0 0 20px rgba(0, 240, 255, 0.15);
  --gs-glow-strong: 0 0 30px rgba(0, 240, 255, 0.35);
  --gs-num-font: "Sora", "Plus Jakarta Sans", var(--font-primary);

  /* 立体感（深く柔らかいドロップシャドウ） */
  --gs-elev-1: 0 2px 12px rgba(0, 0, 0, 0.5);
  --gs-elev-2: 0 12px 34px rgba(0, 0, 0, 0.55);

  /* シアンのグローライン（ヘッダー下端など） */
  --gs-hairline: linear-gradient(90deg,
      rgba(0, 240, 255, 0) 0%,
      rgba(0, 240, 255, 0.55) 28%,
      rgba(0, 240, 255, 0.95) 50%,
      rgba(0, 240, 255, 0.55) 72%,
      rgba(0, 240, 255, 0) 100%);

  /* モバイルのシート/ボトムナビ用（不透明寄りのダーク） */
  --gs-panel-grad: linear-gradient(180deg, #1c2f42 0%, #16222f 60%, #101a26 100%);

  --gs-card-radius: 16px;
  --gs-card-radius-sm: 12px;
  --gs-bottomnav-h: 60px;

  /* 元テンプレの steam-blue 系カラー（base に60箇所以上）をトークンごと
     クリスタル・アクセントに差し替え、色の一貫性を保ったまま一括反映する。 */
  --color-steam-blue: var(--gs-accent);

  /* 選択中/ホバーのカード面色: ガラスに馴染む薄いシアンティント */
  --color-card-hover: rgba(0, 240, 255, 0.07);

  /* steam-blue-bright とペアで使われる hover 面も明るいシアンへ */
  --color-steam-blue-bright: var(--gs-accent-light);
}

/* ---------- [1c] コンテナ幅の拡張（1200px → 1440px） ---------- */
:root {
  --content-max-width: 1440px;
}
/* グリッド基準幅の引き上げは >=769px 限定（無条件だと狭幅で横スクロールする） */
@media (min-width: 769px) {
  .dashboard__stats {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .game-card-grid {
    /* auto-fill を維持（auto-fit だと件数が列数に満たないときカードが全幅まで伸びる） */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .landing__features {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
@media (min-width: 1200px) {
  /* PCヘッダーは横に余裕ができる分、高さも少し余裕を持たせる */
  :root {
    --nav-height: 72px;
  }
  /* ロゴの32px指定は .site-nav__logo-img の基本ルールより後に置くこと（同詳細度は後勝ち） */
}

/* 横スクロール行: flex-basis を「ちょうどN枚が収まる」計算値にする */
@media (min-width: 1200px) {
  .dashboard__section--recommendations .recommendation-card,
  .game-card-scroll .game-card {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 calc((100% - 3 * 16px) / 4);
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .dashboard__section--recommendations .recommendation-card,
  .game-card-scroll .game-card {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 calc((100% - 2 * 16px) / 3);
  }
}

/* ---------- [1b] 背景（135degダークグラデ + シアンのソフトグロー） ---------- */
/* 背景は position:fixed の疑似要素で持つ（background-attachment:fixed は再描画が重い） */
body {
  background-color: var(--gs-canvas);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1100px 700px at 8% -10%, rgba(0, 240, 255, 0.06), rgba(0, 240, 255, 0) 55%),
    radial-gradient(900px 600px at 104% 8%, rgba(0, 240, 255, 0.045), rgba(0, 240, 255, 0) 52%),
    linear-gradient(135deg, #0e1621 0%, #1b2838 100%);
  background-repeat: no-repeat;
}

/* ---------- [2] ガラスの艶（PC/共通） ---------- */

/* ヘッダー: フロステッドガラス + 下端のシアンハイライト */
.site-nav {
  /* .site-nav 本体に backdrop-filter を付けない（内部の #ai-launch(fixed) が壊れる） */
  background: transparent;
  border-bottom: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
/* 半透明ガラス + ブラー（背後のコンテンツをぼかす） */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 15, 23, 0.88) 0%, rgba(9, 15, 23, 0.74) 100%);
  /* blur は 8px（fixed 要素の backdrop-filter はスクロール中ずっと負荷になる） */
  -webkit-backdrop-filter: saturate(1.15) blur(8px);
  backdrop-filter: saturate(1.15) blur(8px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.16);
  pointer-events: none;
}
/* ロゴ: Game*Shelf 画像（各HTMLの <img class="site-nav__logo-img"> を表示） */
.site-nav__logo {
  display: inline-flex;
  align-items: center;
}
.site-nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
  /* クリスタルロゴ: シアングロー */
  filter: drop-shadow(0 0 8px rgba(0, 219, 233, 0.45));
}
@media (min-width: 1200px) {
  .site-nav__logo-img { height: 32px; }
}

/* ベルのバッジ: 赤の正円 + アイコンに少し重ねる */
.site-nav__bell-badge {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  top: -4px;
  right: 2px;
  font-size: 0.6rem;
  line-height: 18px;
}

/* ガラスパネル共通（カード類）: 半透明ガラス + シアン枠 + 上辺の光の反射 */
.game-card,
.stat-card,
.recommendation-card,
.notification-card {
  position: relative;
  border: 1px solid var(--gs-glass-border);
  border-radius: var(--gs-card-radius);
  background: var(--gs-glass-bg);
  box-shadow: var(--gs-elev-1);
  overflow: hidden;   /* 上辺ラインとサムネを角丸内にクリップ */
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
/* blur は大きめのパネルのみ（game-card は枚数が多く負荷が高いため半透明面で代替） */
.stat-card,
.recommendation-card,
.notification-card {
  -webkit-backdrop-filter: var(--gs-blur);
  backdrop-filter: var(--gs-blur);
}
.game-card {
  background: rgba(20, 32, 46, 0.72);
}
/* .game-card だけ clip を解除（ステータスドロップダウンがカード外へ開くため） */
.game-card {
  overflow: visible;
}
/* 上辺の光の反射ライン */
.game-card::before,
.stat-card::before,
.recommendation-card::before,
.notification-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gs-topline);
  pointer-events: none;
  z-index: 1;
}
/* clip 解除に伴う調整。上の ::before ルールより後に置くこと（left/right:0 を上書き） */
.game-card::before {
  left: var(--gs-card-radius);
  right: var(--gs-card-radius);
}
.game-card__bulk-overlay {
  border-radius: var(--gs-card-radius);
}

/* ホバー: 枠がネオン発光 */
.recommendation-card:hover,
.notification-list--dashboard .notification-card:hover,
.game-card:hover {
  border-color: var(--gs-glass-border-hover);
  background-color: rgba(0, 240, 255, 0.05);
  box-shadow: var(--gs-glow-soft), var(--gs-elev-2);
}

/* ゲームカード: サムネの角丸を上辺に合わせ、ホバーでズーム */
.game-card__image-link,
.game-card__image {
  border-radius: var(--gs-card-radius) var(--gs-card-radius) 0 0;
}
.game-card__image-link {
  overflow: hidden;   /* ズーム時のはみ出しをクリップ */
}
.game-card__image-link .game-card__image {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.game-card:hover .game-card__image-link .game-card__image {
  transform: scale(1.05);
}
/* まとめて操作モード中はサムネのズームを止める（base のホバー無効化に合わせる） */
.is-bulk-mode .game-card:hover .game-card__image-link .game-card__image {
  transform: none;
}

/* 統計カード: クリスタルガラス（シアン面 + 内側グロー + 走査線） */
.stat-card {
  padding: 24px 20px;
  border-color: var(--gs-glass-border-strong);
  background: var(--gs-glass-bg-cyan);
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05), var(--gs-elev-1);
}
/* ホログラフィックな走査線 */
.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg,
      transparent, transparent 2px, rgba(0, 240, 255, 0.025) 3px);
  pointer-events: none;
}
.stat-card--link:hover {
  border-color: var(--gs-glass-border-hover);   /* base の border-color:steam-blue を上書き */
  background-color: rgba(0, 240, 255, 0.06);    /* base の --color-card-hover を上書き */
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.08), var(--gs-glow-soft), var(--gs-elev-2);
}
/* 数値: Sora + シアングロー。狭幅で長い金額が枠外に出ないよう clamp + 折り返し */
.stat-card__value {
  font-size: clamp(0.875rem, 4.8vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--gs-accent-dim);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.45), 0 0 30px rgba(0, 240, 255, 0.22);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.stat-card__label {
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  letter-spacing: 0.05em;
}

/* 未読通知: シアンのティントで区別 */
.notification-card--unread {
  border-color: rgba(0, 240, 255, 0.20);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.035), rgba(0, 240, 255, 0.01));
}

/* プライマリ/Steamボタン: クリスタルゴースト（面0.1 / 枠0.3 / 文字シアン） */
.btn--primary,
.btn--steam {
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.30);
  border-radius: var(--gs-card-radius-sm);
  color: var(--gs-accent);
  text-shadow: 0 0 8px rgba(0, 219, 233, 0.35);
  box-shadow: none;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, color 0.3s ease, transform 0.1s;
}
.btn--primary:hover,
.btn--steam:hover {
  background: rgba(0, 240, 255, 0.20);
  border-color: rgba(0, 240, 255, 0.80);
  color: var(--gs-accent-light);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.40);
}
.btn--primary:active,
.btn--steam:active {
  background: rgba(0, 240, 255, 0.16);
  transform: scale(0.97);
  box-shadow: none;
}

/* セカンダリボタン: ガラスの艶（薄い光沢 + シアンの枠） */
.btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: var(--gs-card-radius-sm);
  color: var(--gs-heading);
  box-shadow: var(--gs-gloss-top);
}
.btn--secondary:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.55);
  color: var(--gs-accent-light);
  box-shadow: var(--gs-gloss-top), var(--gs-glow-soft);
}

/* 価格チップ: clamp で縮小 + nowrap で1行に収める */
.game-card__sale-type,
.game-card__sale-end {
  font-size: clamp(0.5rem, 1.3vw, 0.6875rem);
  white-space: nowrap;
  flex-shrink: 1;
}
.game-card__discount {
  font-size: clamp(0.625rem, 1.5vw, 0.875rem);
  white-space: nowrap;
  flex-shrink: 1;
}
.game-card__original-price {
  font-size: clamp(0.625rem, 1.4vw, 0.8125rem);
  white-space: nowrap;
  flex-shrink: 1;
}
.game-card__sale-price {
  /* original-price の clamp 各値 ×1.2 */
  font-size: clamp(0.75rem, 1.68vw, 0.975rem);
  white-space: nowrap;
  flex-shrink: 1;
}
.game-card__pricing {
  column-gap: clamp(4px, 1vw, 8px);
}

/* タグチップ: 上端ハイライトで薄く艶を出す（色は元のまま） */
.game-card__tag,
.custom-tag {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* サイドバー見出し: 文字色のみで表現 */
.sidebar__title {
  color: var(--gs-accent);
}

/* ---------- [2a] クリスタル・アクセント（見出し・リンク・アバター） ---------- */

/* 見出し: シアンがかった白 */
.dashboard__section-title,
.page-header__title,
.content-card__title,
.dashboard__greeting {
  color: var(--gs-heading);
}

/* ダッシュボードの挨拶: 大きく + シアングロー（clamp で SP まで一本化） */
.dashboard__greeting {
  font-size: clamp(1.125rem, 5vw, 1.75rem);
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}
.dashboard__avatar {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.08), 0 0 18px rgba(0, 240, 255, 0.30);
}

/* dashboard__section / dashboard__stats エリアの各カードの枠線を統一 */
.dashboard__section .stat-card,
.dashboard__section .game-card,
.dashboard__section .notification-card,
.dashboard__section .recommendation-card,
.dashboard__stats .stat-card {
  border-color: rgba(0, 240, 255, 0.1);
}
@media (max-width: 600px) {
  .dashboard__avatar { width: 64px; height: 64px; }
}

/* 狭幅では見出しを1行フルにして、右側リンク（もっと見る 等）は次の行に流す */
@media (max-width: 600px) {
  .dashboard__section-header {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .dashboard__section-title {
    flex: 1 1 100%;
    min-width: 0;
  }
  .dashboard__section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* SP: .gs-scroller を持つセクションは誘導リンクをスクロール行の下へ */
@media (max-width: 991px) {
  .dashboard__section:has(.gs-scroller) {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dashboard__section:has(.gs-scroller) .dashboard__section-header {
    display: contents;
  }
  .dashboard__section:has(.gs-scroller) .dashboard__section-title {
    order: 1;
    flex: none;
  }
  .dashboard__section:has(.gs-scroller) .gs-scroller {
    order: 2;
  }
  .dashboard__section:has(.gs-scroller) .dashboard__section-actions {
    order: 3;
    justify-content: flex-end;
    /* .btn--ghost の padding 分だけ右にずらし、文字の右端をカード右端に揃える */
    margin-right: -16px;
  }
}

/* assets-sync: 狭幅ではボタンを次の行に落とし、テキストに全幅を返す */
@media (max-width: 480px) {
  .assets-sync {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .assets-sync__body {
    flex: 1 1 100%;
  }
}

/* mypage-profile__id: 長い SteamID がカード右端からはみ出さないよう折り返し可にする */
@media (max-width: 480px) {
  .mypage-profile__id {
    flex-wrap: wrap;
  }
  .mypage-profile__id-value {
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

/* ヘッダーのアバター: 細いシアンリング */
.site-nav__avatar {
  border: 1px solid rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.30);
}

/* もっと見る等のゴーストリンク: #00F0FF */
.btn--ghost {
  color: var(--gs-accent);
}
.btn--ghost:hover {
  background-color: rgba(0, 240, 255, 0.08);
  color: var(--gs-accent-light);
}

/* 通知タイトル: clamp でレスポンシブ化（上限1remは section-title より小さく保つ） */
.notification-card__title {
  font-size: clamp(0.875rem, 0.83rem + 0.19vw, 1rem);
}

/* 通知タイトル内リンク: 面に馴染む白 */
.notification-card__title a {
  color: var(--color-text-white);
}
.notification-card__title a:hover {
  color: var(--gs-accent);
}

.site-nav__link:hover {
  color: var(--gs-accent);
  background-color: transparent;
}

/* グローバルナビ: アクティブはシアン文字 + 下線グロー（is-active は customize.js が付与） */
.site-nav__link.is-active {
  position: relative;
  color: var(--gs-accent);
  background-color: transparent;
  box-shadow: none;
  border-radius: 3px 3px 0 0;
  text-shadow: 0 0 8px rgba(0, 219, 233, 0.4);
}
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gs-accent) 50%, transparent);
  pointer-events: none;
}

/* 数値フォント: Plus Jakarta Sans を優先（数字を判読しやすく・等幅数字で桁揃え） */
.stat-card__value,
.stat-number,
.game-card__price,
.game-card__sale-price,
.game-card__original-price,
.game-card__discount,
.recommendation-card__price,
.price-badge__current,
.price-badge__original,
.price-badge__sale,
.price-badge__discount,
.price-badge__target,
.game-detail__price-value,
.game-detail__price-main,
.game-detail__review-value,
.assets-month__value,
.assets-yearrow__value,
.genre-bar__value,
.assets-genre__count,
.mypage-profile__stat-value,
.mypage-profile__id-value,
.playtime-title__value,
.playtime-title__rank,
.ai-search__price,
.ai-search__price-now,
.target-modal__current-price,
.target-modal__sale-price,
.target-modal__original-price,
.filter-checkbox__count,
.filter-tabs__count,
.page-header__count {
  font-family: var(--gs-num-font);
  font-feature-settings: "tnum" 1;
}

/* 同期ボタン: 文字色を鮮やかなシアンに（アイコンの mask 色も currentColor で追従） */
/* LP のモック（.mk-real）では js-* を付けないので、同期ボタンの見た目だけ同じにする */
.js-sync-trigger,
.mk-real .page-header__group--actions .btn--secondary {
  color: var(--gs-accent);
}
.js-sync-trigger:hover {
  color: var(--gs-accent-light);
}
/* 同期アイコン（hover で1回転）。mask + currentColor で文字色に追従。空状態CTAとも共用 */
.js-sync-trigger::before,
.mk-real .page-header__group--actions .btn--secondary::before,
.dashboard__empty--cta .btn::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.6s cubic-bezier(.34, .8, .3, 1);
}
.js-sync-trigger:hover::before,
.dashboard__empty--cta .btn:hover::before {
  transform: rotate(360deg);
}

/* 空状態: 説明文とボタンの間隔（404 の .error-page__message と同じ 32px） */
.dashboard__empty--cta p {
  margin-bottom: 32px;
}

/* ai-search 見出しの検索アイコン（絵文字→SVG置換用のサイズ調整） */
.ai-search__title-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  margin-right: 0.35em;
}

/* 未読通知アイコン: 大きくしてカテゴリ色を目立たせる */
.notification-card__icon {
  width: 46px;
  height: 46px;
  font-size: 19px;
  background-color: color-mix(in srgb, var(--notif-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--notif-color) 22%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--notif-color) 16%, transparent);
}
/* 日本語対応アイコンを分かりやすいグローブ(fa-globe)に差し替え */
.notification-card--japanese .notification-card__icon i::before {
  content: "\f0ac";
}

/* 横スクロールのナビ矢印（customize.js が .gs-scroller でラップし生成）。
   右にコンテンツがあれば次へ、左にあれば前へを表示。端では自動で隠す。 */
.gs-scroller {
  position: relative;
}
.gs-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 25, 37, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--gs-accent);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease, background 0.15s, border-color 0.15s;
}
.gs-scroll-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-scroll-btn--prev { left: -6px; }
.gs-scroll-btn--next { right: -6px; }
.gs-scroll-btn:hover {
  border-color: var(--gs-accent);
  background: rgba(0, 240, 255, 0.14);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), var(--gs-glow-soft);
}
.gs-scroll-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------- フッター（customize.js が生成） ---------- */
.gs-footer {
  margin-top: 40px;
  border-top: 1px solid rgba(0, 240, 255, 0.14);
  background: linear-gradient(180deg, rgba(14, 22, 33, 0.35), rgba(7, 15, 25, 0.6));
}
.gs-footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gs-footer__powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.gs-footer__powered:hover {
  opacity: 0.75;
}
.gs-footer__powered-logo {
  display: block;
  width: auto;
  height: 22px;
}
.gs-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  order: -1;                   /* PC: コピーライトを左端に → Powered by が中央に */
}
.gs-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.gs-footer__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.gs-footer__link:hover {
  color: var(--gs-accent);
}
@media (max-width: 991px) {
  .gs-footer__inner {
    flex-direction: column;
    align-items: center;       /* SP: 3行とも中央寄せ */
    gap: 14px;
    text-align: center;
  }
  .gs-footer__powered {
    order: -2;                 /* SP: Powered by を最上段に（参考サイトと同じ並び） */
  }
  .gs-footer__copy {
    order: 0;                  /* SP: PC用の order:-1 を打ち消して最下段に戻す */
  }
  .gs-footer__links {
    order: -1;                 /* SP: リンクをコピーライトの上に */
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
  }
}

/* ---------- [2d] ガラス未適用パネルの統一 ---------- */

/* ゲーム詳細の小見出しをビューポート幅に追従 */
.game-detail__section-title {
  font-size: clamp(0.875rem, 0.83rem + 0.19vw, 1rem);
}

/* カード面: ガラス + シアン枠 + 上辺の反射（.game-card 等の共通構成と同じ） */
.landing__feature,
.mypage-profile,
.game-detail__user-section,
.game-detail__price-card,
.ai-search__form,
.ai-search__card,
.proselytize-rec,
.discord-channel__help {
  position: relative;
  border: 1px solid var(--gs-glass-border);
  border-radius: var(--gs-card-radius);
  background: var(--gs-glass-bg);
  box-shadow: var(--gs-elev-1);
  overflow: hidden;   /* 上辺ラインを角丸内にクリップ */
}
.landing__feature::before,
.mypage-profile::before,
.game-detail__user-section::before,
.game-detail__price-card::before,
.ai-search__form::before,
.ai-search__card::before,
.proselytize-rec::before,
.discord-channel__help::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gs-topline);
  pointer-events: none;
  z-index: 1;
}
/* blur は枚数が少ない大きめパネルのみ */
.mypage-profile,
.game-detail__user-section,
.game-detail__price-card,
.ai-search__form,
.discord-channel__help {
  -webkit-backdrop-filter: var(--gs-blur);
  backdrop-filter: var(--gs-blur);
}
/* Discord の案内ボックス: コールアウトの意味を保つため左のアクセント線のみ残す */
.discord-channel__help {
  border-left: 3px solid rgba(0, 240, 255, 0.5);
}

/* 行アイテム（設定行・リンク行・Discordモード選択肢）: 小さめ角丸のガラス面 */
.notif-settings__item,
.mypage-link,
.discord-channel__mode-option {
  border: 1px solid var(--gs-glass-border);
  border-radius: var(--gs-card-radius-sm);
  background: var(--gs-glass-bg);
}
.mypage-link:hover,
.discord-channel__mode-option:hover {
  border-color: var(--gs-glass-border-hover);
  background: rgba(0, 240, 255, 0.05);   /* 元の --color-blue-gray ホバーを上書き */
}
/* Discord: ラジオボタンを右側テキスト1行目の縦中央に揃える */
.discord-channel__mode-option input[type="radio"] {
  margin-top: 4px;
}

/* Discord: 選択中モードの強調をシアンへ */
.discord-channel__mode-option:has(input:checked) {
  border-color: var(--gs-glass-border-hover);
  background: rgba(0, 240, 255, 0.06);
}

/* mypage / notification-settings: PC はコンテンツ幅 920px 中央寄せ（:has で限定） */
@media (min-width: 992px) {
  .page-content:has(.notif-settings) {
    max-width: 920px;
  }
  /* base の .notif-settings { max-width: 640px } は幅制御が二重になるため PC では解除 */
  .notif-settings {
    max-width: none;
  }
}

/* SP: 通知カードの meta を絶対配置でラベル行に重ね、content を右端まで広げる */
@media (max-width: 991px) {
  .notification-list .notification-card {
    position: relative;
  }
  .notification-list .notification-card__meta {
    position: absolute;
    top: 17px;              /* ラベル行と縦中央一致 */
    right: 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .notification-list .notification-card__content {
    /* meta が通常フローから外れるため右端まで自然に広がる */
    min-width: 0;
  }
  /* dashboard の通知カードは __meta ラッパーが無く __time が直下（ページごとに DOM が違う） */
  .notification-list--dashboard .notification-card__time {
    position: absolute;
    top: 20px;              /* ラベルチップと縦中央一致 */
    right: 12px;
  }
  .notification-list .notification-card__label {
    max-width: calc(100% - 110px);   /* meta（時刻+星 約100px）とチップの重なり防止 */
  }
}

/* 設定行・リンク行にも mypage-profile と同じ光沢フレームを付与 */
.notif-settings__item,
.mypage-link {
  position: relative;
  overflow: hidden;   /* 上辺ラインを角丸内にクリップ */
  box-shadow: var(--gs-elev-1);
}
.notif-settings__item::before,
.mypage-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gs-topline);
  pointer-events: none;
  z-index: 1;
}

/* asset-value: 年別リストの選択表現を stat-card と同じ光沢フレームに統一 */
.assets-yearrow {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--gs-card-radius-sm);
  overflow: hidden;
}
.assets-yearrow.is-active {
  border-color: var(--gs-glass-border-strong);
  background: var(--gs-glass-bg-cyan);
  box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05), var(--gs-elev-1);
}
.assets-yearrow.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gs-topline);
  pointer-events: none;
}

/* landing の feature アイコン: シアングロー */
.landing__feature-icon {
  color: var(--gs-accent);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

/* mypage の統計値・game-detail の価格: stat-card と同じクリスタル数値に */
.mypage-profile__stat-value,
.game-detail__price-value {
  color: var(--gs-accent-dim);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

/* AI検索の実行ボタン: btn--primary と同じクリスタルゴーストに統一 */
.ai-search__submit {
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.30);
  border-radius: var(--gs-card-radius-sm);
  color: var(--gs-accent);
  text-shadow: 0 0 8px rgba(0, 219, 233, 0.35);
}
.ai-search__submit:hover {
  background: rgba(0, 240, 255, 0.20);
  border-color: rgba(0, 240, 255, 0.80);
  color: var(--gs-accent-light);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.40);
}

/* モーダルの保存/適用ボタン: クリスタルゴーストに統一 */
.target-modal__action--save,
.bulk-tag-modal__action--apply,
.proselytize-modal__action--save {
  background-color: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.30);
  color: var(--gs-accent);
}
.target-modal__action--save:hover:not(:disabled),
.bulk-tag-modal__action--apply:hover:not(:disabled),
.proselytize-modal__action--save:hover:not(:disabled) {
  background-color: rgba(0, 240, 255, 0.20);
  border-color: rgba(0, 240, 255, 0.80);
  color: var(--gs-accent-light);
  filter: none;   /* bulk-tag の brightness(1.1) を打ち消し */
}

/* 資産価値: ジャンル別バーの塗りをシアンに統一 */
.genre-bar__fill {
  background-color: rgba(0, 240, 255, 0.35);
}

/* index.html / components.html（モック一覧ページ）のインライン <style> を上書き */
.wrap h2 {
  color: var(--gs-accent);
  border-bottom-color: rgba(0, 240, 255, 0.14);
}
.wrap a.card {
  background: var(--gs-glass-bg);
  border: 1px solid var(--gs-glass-border);
  border-radius: var(--gs-card-radius-sm);
}
.wrap a.card:hover {
  border-color: var(--gs-glass-border-hover);
}
.cmp-wrap .cmp-item__label {
  color: var(--gs-accent);
  border-bottom-color: rgba(0, 240, 255, 0.14);
}
.cmp-wrap .cmp-item__open:hover {
  color: var(--gs-accent);
}

/* ---------- [2b] 横位置ナビ: site-nav__right の整列 ----------
   >=992px は「左アイコン + 右テキスト」。992〜1199px は [2c] でアイコンのみ。 */
@media (min-width: 992px) {
  /* 行全体の間隔をタイトに */
  .site-nav__right {
    gap: 4px;
  }

  /* ナビ全体を少しタイトにして 1200px でも一列に収める */
  .site-nav__logo { margin-right: 20px; }
  .site-nav__links { gap: 2px; }
  .site-nav__link { padding: 8px 12px; white-space: nowrap; }

  /* 各アイテム共通: 左アイコン + 右テキスト、同じ余白・角丸・ホバー */
  .site-nav__search,
  .site-nav__bell,
  .site-nav__account,
  .site-nav__right > a[href*="logout"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;                 /* .site-nav__bell の margin-right:0.5rem を打ち消し */
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--color-text-light);
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s;
  }
  .site-nav__search:hover,
  .site-nav__bell:hover,
  .site-nav__account:hover,
  .site-nav__right > a[href*="logout"]:hover {
    color: var(--color-text-white);
    background-color: rgba(255, 255, 255, 0.06);
  }

  /* アイコンサイズを統一（FA の i と ログアウト擬似アイコン） */
  .site-nav__search > i,
  .site-nav__bell > i,
  .site-nav__right > a[href*="logout"]::before {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex: 0 0 auto;
  }

  /* ログアウト: テキスト左にアイコンを追加 */
  .site-nav__right > a[href*="logout"]::before {
    content: "\f2f5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
  }

  /* アバターもアイコンサイズに合わせて縮小（32px -> 20px） */
  .site-nav__avatar {
    width: 20px;
    height: 20px;
  }

  /* テキストラベルを小さめに統一 */
  .site-nav__search-label,
  .site-nav__username,
  .site-nav__right > a[href*="logout"] {
    font-size: 12px;
    font-weight: 500;
  }

  /* ベルはアイコン + バッジのみ（「通知」ラベルは削除。バッジは既定の右上位置） */
}

/* ---------- [2c] 中間幅(992〜1199px): 横メニュー維持で右側はアイコンのみ ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-nav__search-label,
  .site-nav__username {
    display: none;
  }
  .site-nav__right > a[href*="logout"] {   /* テキストのみ非表示（::before アイコンは残す） */
    font-size: 0;
  }
  .site-nav__right {
    gap: 2px;
  }
  /* トップ横メニューをさらに詰めて 992px でも一列に収める */
  .site-nav__logo { margin-right: 14px; }
  .site-nav__links { gap: 0; }
  .site-nav__link { padding: 7px 9px; }
}

/* ---------- [3] スマホ: ヘッダーのコンパクト化 ---------- */
@media (max-width: 991px) {
  /* スマホ表示時のヘッダー高さは48pxに圧縮 */
  :root {
    --nav-height: 48px;
  }

  /* テキスト要素を隠し、logo / 検索 / 通知 のみに */
  .site-nav__search-label,
  .site-nav__account,
  .site-nav__right > .site-nav__link {   /* ログアウト（ボトムナビへ移設） */
    display: none;
  }

  /* 上部メニューリンクは隠す（customize.js がクローンをメニューシートに表示） */
  .site-nav > .site-nav__links {
    display: none;
  }

  .site-nav__right {
    gap: 4px;
    /* bell-badge のはみ出し分、右側グループだけ少し下げる */
    margin-top: 3px;
  }

  .site-nav__search,
  .site-nav__bell {
    padding: 8px;
    margin-right: 0;
    font-size: 1.125rem;
  }

  /* ボトムナビ分の余白を確保 */
  body.gs-has-bottomnav {
    padding-bottom: calc(var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* 横スクロール対策: sidebar 付きページの .page-content 幅を 100% に抑える */
  .page-layout--sidebar .page-content {
    max-width: 100%;
  }
}

/* ---------- [4] スマホ: ボトムナビ ---------- */

/* PC では非表示（customize.js が生成する要素すべて） */
.gs-bottomnav,
.gs-menu-sheet,
.gs-sheet-overlay,
.gs-sheet__chrome {
  display: none;
}

@media (max-width: 991px) {
  .gs-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    display: flex;
    align-items: stretch;
    height: calc(var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(14, 22, 33, 0.9) 0%, rgba(10, 17, 26, 0.9) 100%);
    /* ヘッダーと同じ理由で blur 8px */
    -webkit-backdrop-filter: saturate(1.3) blur(8px);
    backdrop-filter: saturate(1.3) blur(8px);
    border-top: 1px solid rgba(0, 240, 255, 0.22);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  }
  .gs-bottomnav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--gs-hairline);
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.65));
    pointer-events: none;
  }

  /* 一括操作バーをボトムナビの上へ逃がす（ナビが実在するときだけ持ち上げる） */
  body.gs-has-bottomnav .bulk-op-bar {
    bottom: calc(var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    /* ナビの上向き box-shadow がバーに落ちるので、バーを前面に出して隠す */
    z-index: 970;
  }
  /* シート表示中は base に戻す。上のルールと同詳細度なので必ず後に置くこと */
  body.gs-sheet-open .bulk-op-bar {
    z-index: 900;
  }
  /* バーが一段上がるぶん、ページ下端の余白を積み増す */
  body.gs-has-bottomnav .is-bulk-mode .page-content {
    padding-bottom: calc(76px + var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  .gs-bottomnav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px;
    background: none;
    border: none;
    font-family: var(--font-primary);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .gs-bottomnav__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .gs-bottomnav__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* マイページ: アバター画像 */
  .gs-bottomnav__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .gs-bottomnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gs-bottomnav__item.is-active,
  .gs-bottomnav__item.is-open {
    color: var(--gs-accent);
  }
  .gs-bottomnav__item.is-active .gs-bottomnav__icon svg {
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.6));
  }

  .gs-bottomnav__item.is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  /* ---------- [5] スマホ: ボトムシート（サイドバー / メニュー） ---------- */

  /* 共通オーバーレイ */
  .gs-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(23, 26, 33, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.gs-sheet-open .gs-sheet-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.gs-sheet-open {
    overflow: hidden;
  }

  /* サイドバー: style.css の 768px ルールをボトムシート形式に置き換える */
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    width: 100%;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--gs-panel-grad);
    border: none;
    border-top: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6), var(--gs-gloss-top);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  body.gs-shelf-open .sidebar {
    transform: translateY(0);
    visibility: visible;
  }

  /* シート内ヘッダー（customize.js が sidebar / メニューシートに挿入） */
  .gs-sheet__chrome {
    display: block;
  }

  /* メニューシート（customize.js が生成） */
  .gs-menu-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--gs-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--gs-panel-grad);
    border-top: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6), var(--gs-gloss-top);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  body.gs-menu-open .gs-menu-sheet {
    transform: translateY(0);
    visibility: visible;
  }

  /* シート共通ヘッダー（グラバー + タイトル + 閉じる） */
  .gs-sheet__grabber {
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
  }
  .gs-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .gs-sheet__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
  }
  .gs-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-text-light);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }

  /* メニューシート内のリンク */
  .gs-menu-sheet .site-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* 元の align-items:center を打ち消し（中央寄り防止） */
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .gs-menu-sheet .site-nav__links li {
    width: 100%;
  }
  .gs-menu-sheet .site-nav__link {
    display: block;
    padding: 13px 12px;
    font-size: 0.9375rem;
    border-radius: 6px;
    border-bottom: 1px solid var(--color-divider);
    text-align: center;
  }
  .gs-menu-sheet .site-nav__links li:last-child .site-nav__link {
    border-bottom: none;
  }
}

/* ---------- [2e] steam-blue ティントの一括シアン化 ----------
   base の rgba(102,192,244, α) を rgba(0,240,255, α×0.875) に置き換える（セレクタは base と同一）。 */
.game-card__playtime-recent {
  background-color: rgba(0, 240, 255, 0.131);
}
.tag--cleared {
  background-color: rgba(0, 240, 255, 0.131);
}
.active-filters__tag--feature {
  background-color: rgba(0, 240, 255, 0.131);
}
.active-filters__tag--custom {
  background-color: rgba(0, 240, 255, 0.105);
}
.badge--unread {
  background-color: rgba(0, 240, 255, 0.131);
}
.page-header__bulk-toggle:hover:not(:disabled) {
  background-color: rgba(0, 240, 255, 0.088);
  border-color: rgba(0, 240, 255, 0.35);
}
/* まとめて操作トグルの ON 状態: アクセント面 + 暗い文字 */
.page-header__bulk-toggle.is-active {
  background-color: var(--color-steam-blue);
  border-color: var(--color-steam-blue);
  color: var(--gs-canvas);
}
/* ON 状態のホバー。上の :hover ルールと同詳細度なので必ず後に置くこと（前だと面が透けて文字が沈む） */
.page-header__bulk-toggle.is-active:hover:not(:disabled) {
  background-color: var(--gs-accent-light);
  border-color: var(--gs-accent-light);
  color: var(--gs-canvas);
}
.game-card__badge--wishlist {
  background-color: rgba(0, 240, 255, 0.787);
}
.custom-tag {
  background-color: rgba(0, 240, 255, 0.105);
  border: 1px solid rgba(0, 240, 255, 0.175);
}
.custom-tag__remove:hover {
  background-color: rgba(0, 240, 255, 0.175);
}
.game-card__tag:hover {
  background-color: rgba(0, 240, 255, 0.131);
}
.tag--wl-japanese {
  background-color: rgba(0, 240, 255, 0.131);
}
.recommendations__info {
  background-color: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.131);
}
.toggle-switch input:checked + .toggle-switch__slider {
  background-color: rgba(0, 240, 255, 0.263);
}
.game-detail__badge--info {
  background-color: rgba(0, 240, 255, 0.131);
}
.is-bulk-mode .game-card__bulk-overlay:hover {
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.263);
}
/* 選択リングを無効化（四隅だけクリップの外へ出て光るため）。選択表現はバッジ + シアン面 */
.is-bulk-mode .game-card__bulk-overlay.is-selected {
  background-color: rgba(0, 240, 255, 0.07);
  box-shadow: none;
}
/* 選択チェックバッジ: アクセント面 + 暗いチェック */
.game-card__bulk-check {
  background-color: var(--color-steam-blue);
  color: var(--gs-canvas);
}
/* バーがシアン面になったのでホバーは反転（ダーク面 + 白文字）。[2f] とセット */
.bulk-op-bar__action:hover:not(:disabled) {
  background-color: var(--gs-canvas);
  border-color: var(--gs-canvas);
  color: var(--color-text-white);
}
.ai-launch__input:focus {
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.175);
}
.ai-search__input:focus {
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.175);
}
.ai-search__badge--owned {
  background: rgba(0, 240, 255, 0.131);
}
.assets-sync {
  background-color: rgba(0, 240, 255, 0.07);
}
.bulk-tag-modal__preset:hover {
  background-color: rgba(0, 240, 255, 0.105);
  border-color: rgba(0, 240, 255, 0.263);
}
.bulk-tag-modal__pill {
  background-color: rgba(0, 240, 255, 0.105);
  border: 1px solid rgba(0, 240, 255, 0.175);
}
.bulk-tag-modal__pill-remove:hover {
  background-color: rgba(0, 240, 255, 0.175);
}
.target-modal__preset.is-selected {
  background-color: rgba(0, 240, 255, 0.158);
}
.sidebar__action-button:hover:not(:disabled) {
  background-color: rgba(0, 240, 255, 0.07);
}
.playtime-sync {
  background-color: rgba(0, 240, 255, 0.07);
}
.playtime-title__bar-fill {
  background-color: rgba(0, 240, 255, 0.35);
}
.proselytize-post__reason {
  background-color: rgba(0, 240, 255, 0.105);
  border: 1px solid rgba(0, 240, 255, 0.175);
}
.proselytize-like:hover {
  border-color: rgba(0, 240, 255, 0.263);
}
.proselytize-like.is-liked {
  background-color: rgba(0, 240, 255, 0.105);
  border-color: rgba(0, 240, 255, 0.263);
}
.proselytize-report-modal__reason:hover {
  border-color: rgba(0, 240, 255, 0.263);
}
.proselytize-btn:hover {
  background-color: rgba(0, 240, 255, 0.105);
  border-color: rgba(0, 240, 255, 0.263);
}
.proselytize-target {
  background-color: rgba(0, 240, 255, 0.105);
  border: 1px solid rgba(0, 240, 255, 0.175);
}
.proselytize-target__remove:hover {
  background-color: rgba(0, 240, 255, 0.175);
}
.proselytize-reason:hover {
  border-color: rgba(0, 240, 255, 0.263);
}
.proselytize-reason.is-selected {
  background-color: rgba(0, 240, 255, 0.105);
  border-color: rgba(0, 240, 255, 0.263);
}
.tag-modal__tag {
  background-color: rgba(0, 240, 255, 0.105);
  border: 1px solid rgba(0, 240, 255, 0.175);
}
.tag-modal__tag-remove:hover {
  background-color: rgba(0, 240, 255, 0.175);
}
.tag-modal__preset:hover {
  background-color: rgba(0, 240, 255, 0.105);
  border-color: rgba(0, 240, 255, 0.263);
}
.target-modal__preset:hover {
  background-color: rgba(0, 240, 255, 0.07);
}

/* フォーカスリングのトークン（tokens.css の --shadow-focus）も同様に変換 */
:root {
  --shadow-focus: 0 0 0 2px rgba(0, 240, 255, 0.35);
}

/* ページネーション: アクティブはシアン面 + ダーク文字で判読性を確保 */
.pagination__item.is-active {
  background-color: var(--gs-accent-dim);
  color: var(--gs-canvas);
}
/* 省略記号「…」: 数字ボタンと同じ 36px の箱で中央寄せし、グリフの下振れを光学補正する */
.pagination {
  align-items: center;
}
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  line-height: 1;
  transform: translateY(-1px);   /* 光学補正 */
}

/* フィルターのチェックボックス */
.filter-checkbox input[type="checkbox"] {
  accent-color: var(--color-steam-blue-bright);
}

/* ラジオは 70%トーンのまま（チェックボックスとは意図的に別値） */
input[type="radio"] {
  accent-color: color-mix(in srgb, var(--gs-accent) 70%, black);
}

/* ==========================================================================
   [2f] 一括操作バー（.bulk-op-bar）: シアン面 + ダーク文字
   ========================================================================== */

/* バー本体。color をここで敷くと .bulk-op-bar__exit の文字色も追従する */
.bulk-op-bar {
  background-color: var(--color-steam-blue);
  border-color: var(--color-steam-blue);
  color: var(--gs-canvas);
}

/* 「選択中 N 件」。base が color:white を直接持つので個別に打ち消す。 */
.bulk-op-bar__status {
  color: var(--gs-canvas);
}

/* 件数: min-width 解除 + 2em。line-height:1em だと沈むので inline-flex で縦中央を取る */
.bulk-op-bar__count {
  color: var(--gs-canvas);
  min-width: auto;
  font-size: 2em;
  line-height: 1em;
  display: inline-flex;
  align-items: center;
}

/* 区切り線 */
.bulk-op-bar__divider {
  background-color: var(--gs-canvas);
}

/* 操作ボタン。アイコンは currentColor 継承なので色指定は不要 */
.bulk-op-bar__action {
  color: var(--gs-canvas);
  border-color: var(--gs-canvas);
}

/* 終了ボタン。base は枠なしなので通常時は枠を出さず、ホバーで反転させる */
.bulk-op-bar__exit {
  color: var(--gs-canvas);
}
.bulk-op-bar__exit:hover {
  background-color: var(--gs-canvas);
  border-color: var(--gs-canvas);
  color: var(--color-text-white);
}

/* ✕ アイコン: 1.2em。line-height:1 + inline-flex で高さを変えずに拡大し縦中央を取る */
.bulk-op-bar__exit .fa-xmark {
  font-size: 1.2em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}