/* ==========================================================================
   modern-polish.css — サイト全体の見た目を洗練させる上書きレイヤー (2026-07-05)
   方針:
   - 各ページ専用CSSの「後」に読み込み、色・角丸・影・余白・ホバーだけを上書きする
   - display / position / グリッド構造は変更しない（レイアウト事故防止）
   - CLS対策の min-height 予約や広告関連には触らない
   ========================================================================== */

:root {
  --mp-bg: #0a0a14;
  --mp-surface: rgba(18, 18, 30, 0.82);
  --mp-surface-solid: #12121e;
  --mp-border: rgba(255, 255, 255, 0.07);
  --mp-border-strong: rgba(255, 255, 255, 0.12);
  --mp-pink: #ff3d7f;
  --mp-cyan: #00d4ff;
  --mp-text: #eeeef2;
  --mp-text-dim: #9fa0b5;
  --mp-radius: 14px;
  --mp-radius-sm: 10px;
  --mp-grad: linear-gradient(135deg, rgba(255, 61, 127, 0.9), rgba(0, 212, 255, 0.85));
  --mp-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --mp-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   1. 背景に奥行き（アンビエントグラデーション）＋文字描画の品質
   -------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(0, 212, 255, 0.055), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(255, 61, 127, 0.05), transparent 55%),
    var(--mp-bg) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255, 61, 127, 0.35); color: #fff; }

/* 細いダークスクロールバー（全体） */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* キーボード操作時のフォーカスリングを統一 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.75) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   2. ヘッダー / タブメニュー（すりガラス化 + 余白圧縮）
   -------------------------------------------------------------------------- */
/* 注意: header に backdrop-filter を付けてはいけない。
   backdrop-filter は内部の position:fixed 要素(モバイル下部の言語ボタン群等)の基準を
   ヘッダー自身に変えてしまい、ボタンがタイトルに重なる(実測で確認済 2026-07-05) */
header {
  background: rgba(10, 10, 22, 0.96) !important;
  border-bottom: 1px solid var(--mp-border) !important;
  box-shadow: var(--mp-shadow-soft) !important;
}

.tab-nav-wrapper { background: transparent; }
.tab-nav {
  background: rgba(16, 16, 28, 0.78) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--mp-border) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  margin: 6px auto 8px !important;
  box-shadow: var(--mp-shadow-soft);
}
.tab-item {
  border-radius: 999px !important;
  color: var(--mp-text-dim) !important;
  transition: color .18s ease, background .18s ease, transform .18s ease !important;
}
.tab-item:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.tab-item.active {
  color: #fff !important;
  background: var(--mp-grad) !important;
  box-shadow: 0 2px 14px rgba(255, 61, 127, 0.35) !important;
}
.tab-item.active::after { display: none !important; } /* 旧下線は角丸ピルと干渉するため廃止 */
.tab-text { font-size: 11.5px !important; letter-spacing: .02em; }

/* モバイルのタブ文字を読みやすく */
@media (max-width: 768px) {
  .tab-nav { border-radius: 16px !important; margin: 4px 8px 8px !important; }
  .tab-item { border-radius: 12px !important; }
  .tab-text { font-size: 10px !important; }
}

/* --------------------------------------------------------------------------
   3. カード類の統一（角丸・境界線・ホバー浮き上がり）
   -------------------------------------------------------------------------- */
.ranking-card,
.sidebar-card,
.rise-item, .matome-item, .mi-card,
.rise-links, .matome-others,
.compact-settings-panel {
  border-radius: var(--mp-radius) !important;
  border: 1px solid var(--mp-border) !important;
  box-shadow: var(--mp-shadow-soft);
}

.ranking-card, .rise-item, .matome-item, .mi-card {
  background: var(--mp-surface-solid) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.ranking-card:hover, .rise-item:hover, .matome-item:hover, .mi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 61, 127, 0.55) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 61, 127, 0.15);
}

/* サムネイルの角丸を統一 */
.card-thumbnail, .card-thumbnail img, .rise-thumb, .matome-thumb { border-radius: 8px !important; }

/* サイドバー（TOP10等）はすりガラス */
.sidebar-card {
  background: var(--mp-surface) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sidebar-card-title { letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   4. ボタン / ピル / 入力欄の統一
   -------------------------------------------------------------------------- */
.metric-pill, .compact-btn, .type-btn-mobile, .modern-btn,
.rise-sort a, .matome-sort a {
  border-radius: 999px !important;
  border: 1px solid var(--mp-border-strong) !important;
  transition: all .16s ease !important;
}
.metric-pill:hover, .compact-btn:hover, .type-btn-mobile:hover, .modern-btn:hover,
.rise-sort a:hover, .matome-sort a:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 61, 127, 0.6) !important;
}
.metric-pill.active, .compact-btn.active, .type-btn-mobile.active,
.rise-sort a.active, .matome-sort a.active {
  background: var(--mp-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(255, 61, 127, 0.3) !important;
}

.compact-search-input, .compact-date-select, input[type="text"], input[type="search"], select {
  border-radius: var(--mp-radius-sm) !important;
  border: 1px solid var(--mp-border-strong) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--mp-text) !important;
}
.compact-search-input:focus, input[type="text"]:focus, select:focus {
  border-color: rgba(0, 212, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12) !important;
}

/* 絞り込みパネル（トップのまとめバー）をすりガラス化 */
.compact-settings-panel {
  background: rgba(14, 14, 26, 0.88) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.compact-settings-summary { border-radius: var(--mp-radius) !important; }

/* --------------------------------------------------------------------------
   5. 見出しのネオン光量を上品に（強すぎるグローを緩和）
   -------------------------------------------------------------------------- */
.rise-hero h1, .matome-hero h1, .mi-hero h1 {
  text-shadow: 0 0 22px rgba(255, 61, 127, 0.28) !important;
  letter-spacing: .01em;
}
.rise-hero, .matome-hero, .mi-hero { padding-top: 12px !important; } /* 上余白を圧縮 */

/* --------------------------------------------------------------------------
   6. 余白の圧縮（読みやすさは維持しつつ、間延びをなくす）
   -------------------------------------------------------------------------- */
.rise-list, .matome-list { margin-top: 12px !important; }
.rise-item, .matome-item { margin-bottom: 6px !important; padding: 8px 10px !important; }
.share-buttons { margin: 6px 0 !important; }

/* --------------------------------------------------------------------------
   7. テーブル・リンクの微調整
   -------------------------------------------------------------------------- */
.ranking-table tbody tr { transition: background .15s ease; }
.ranking-table tbody tr:hover { background: rgba(0, 212, 255, 0.05) !important; }

a { text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   8. アクセシビリティ: 動きを減らす設定を尊重
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}