/* =========================================
   月間ランキング — Base Styles
   TikTok Neon Dark Theme  v2
   ========================================= */

/* ---- CSS 変数 ---- */
:root {
  /* ネオンカラー */
  --neon-red:    #fe2c55;
  --neon-cyan:   #25f4ee;
  --neon-purple: #bf5af2;
  --neon-pink:   #ff2d78;
  --neon-yellow: #ffe600;
  --neon-blue:   #4d9fff;
  --neon-green:  #4ade80;

  /* 後方互換エイリアス */
  --tt-red:    var(--neon-red);
  --tt-cyan:   var(--neon-cyan);
  --tt-gold:   #ffd700;
  --tt-silver: #c0c0c0;
  --tt-bronze: #cd7f32;

  /* 背景・サーフェス */
  --bg-base:    #05050e;
  --bg-surface: #0b0b1a;
  --bg-card:    #0f0f20;
  --bg-elevated:#151528;

  /* ボーダー */
  --border:      rgba(255,255,255,0.06);
  --border-glow: rgba(254,44,85,0.3);

  /* テキスト */
  --text:       #eeeeff;
  --text-muted: #6b6b8a;
  --text-dim:   #3a3a56;

  /* 後方互換 */
  --tt-dark:       var(--bg-base);
  --tt-surface:    var(--bg-surface);
  --tt-surface2:   var(--bg-elevated);
  --tt-card:       var(--bg-card);
  --tt-border:     var(--border);
  --tt-text:       var(--text);
  --tt-text-muted: var(--text-muted);

  /* グラデーション */
  --grad-red:    linear-gradient(135deg, #fe2c55 0%, #ff6b35 100%);
  --grad-cyan:   linear-gradient(135deg, #25f4ee 0%, #0075c4 100%);
  --grad-purple: linear-gradient(135deg, #bf5af2 0%, #5e5ce6 100%);
  --grad-gold:   linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  --gradient-main: var(--grad-red);
  --gradient-cyan: var(--grad-cyan);

  /* グロー */
  --glow-red:    0 0 20px rgba(254,44,85,0.6),  0 0 50px rgba(254,44,85,0.25), 0 0 80px rgba(254,44,85,0.1);
  --glow-cyan:   0 0 20px rgba(37,244,238,0.55), 0 0 50px rgba(37,244,238,0.2), 0 0 80px rgba(37,244,238,0.08);
  --glow-purple: 0 0 20px rgba(191,90,242,0.5),  0 0 50px rgba(191,90,242,0.2);
  --glow-gold:   0 0 20px rgba(255,215,0,0.7),   0 0 50px rgba(255,215,0,0.3), 0 0 80px rgba(255,215,0,0.12);
  --shadow-glow-red:  var(--glow-red);
  --shadow-glow-cyan: var(--glow-cyan);

  /* 形状 */
  --radius-card: 18px;
  --radius-sm:   10px;
  --header-h:    104px;
  --transition:  0.22s ease;
}

/* ---- ライトモード ---- */
body.light-mode {
  --bg-base:    #f0f0f8;
  --bg-surface: #ffffff;
  --bg-card:    #ffffff;
  --bg-elevated:#f5f5fd;
  --border:     rgba(0,0,0,0.08);
  --text:       #0a0a1a;
  --text-muted: #6b7280;
  --tt-dark:    var(--bg-base);
  --tt-surface: var(--bg-surface);
  --tt-surface2:var(--bg-elevated);
  --tt-card:    var(--bg-card);
  --tt-border:  var(--border);
  --tt-text:    var(--text);
  --tt-text-muted:var(--text-muted);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

/* =========================================
   TikTok風 放射グラデーション背景 (強化版)
   ========================================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 100% 70% at 15% -5%,  rgba(254,44,85,0.22)  0%, transparent 58%),
    radial-gradient(ellipse  80% 60% at 88% 108%,  rgba(37,244,238,0.18) 0%, transparent 58%),
    radial-gradient(ellipse  70% 50% at 50%  50%,  rgba(191,90,242,0.12) 0%, transparent 65%),
    radial-gradient(ellipse  50% 40% at 80%  18%,  rgba(77,159,255,0.10) 0%, transparent 58%),
    radial-gradient(ellipse  45% 35% at 10%  85%,  rgba(255,230,0,0.08)  0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: bg-shift 18s ease-in-out infinite alternate;
}

@keyframes bg-shift {
  0%   {
    opacity: 1;
    transform: scale(1)    translate(0,    0);
  }
  33%  {
    opacity: 0.85;
    transform: scale(1.04) translate(-1.5%, 1.5%);
  }
  66%  {
    opacity: 0.95;
    transform: scale(1.02) translate( 1.5%,-1%);
  }
  100% {
    opacity: 1;
    transform: scale(1.05) translate(-1%,   1%);
  }
}

body.light-mode::before { display: none; }

/* =========================================
   グリッドライン背景テクスチャ
   ========================================= */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  animation: grid-pulse 12s ease-in-out infinite alternate;
}

@keyframes grid-pulse {
  0%   { opacity: 0.7; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.8; }
}

body.light-mode::after { display: none; }

/* =========================================
   パーティクル背景
   ========================================= */
#particles-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: float-up linear infinite;
  filter: blur(0.3px);
}

@keyframes float-up {
  0%   { transform: translateY(0)        translateX(0)     scale(1);    opacity: 0; }
  8%   { opacity: 0.75; }
  40%  { transform: translateY(-40vh)    translateX(15px)  scale(0.9);  opacity: 0.55; }
  70%  { transform: translateY(-75vh)    translateX(-10px) scale(0.6);  opacity: 0.30; }
  100% { transform: translateY(-115vh)   translateX(5px)   scale(0.2);  opacity: 0; }
}

/* =========================================
   ヘッダー
   ========================================= */
#main-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(5,5,14,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  /* ノッチ・ステータスバー対応：セーフエリア分だけ上に余白を追加 */
  padding-top: env(safe-area-inset-top, 0px);
}

body.light-mode #main-header {
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* ネオン下線アクセント（流れるアニメ） */
#main-header::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    transparent   0%,
    var(--neon-red)    20%,
    var(--neon-purple) 50%,
    var(--neon-cyan)   80%,
    transparent   100%);
  background-size: 200% 100%;
  opacity: 0.75;
  animation: neon-slide 4s linear infinite;
}

@keyframes neon-slide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

body.light-mode #main-header::after { opacity: 0.3; animation: none; }

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* ロゴアイコン本体ラッパー */
.logo-icon-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 外側回転リング */
.logo-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    #fe2c55   0%,
    #ff6b35  12%,
    #ffe600  24%,
    #25f4ee  37%,
    #bf5af2  50%,
    #25f4ee  63%,
    #ffe600  76%,
    #ff6b35  88%,
    #fe2c55 100%
  );
  animation: logo-ring-spin 4s linear infinite;
  opacity: 0.9;
  z-index: 0;
}

/* リングとアイコン本体の間に黒枠を作る */
.logo-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 16px;
  background: var(--bg-base);
  z-index: 1;
}

body.light-mode .logo-icon-wrap::after {
  background: rgba(240,240,248,0.98);
}

@keyframes logo-ring-spin {
  to { transform: rotate(360deg); }
}

.logo-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a0008 0%, #2d0010 40%, #fe2c55 100%);
  border-radius: 14px;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(254,44,85,0.4),
    0 0 16px rgba(254,44,85,0.5),
    0 0 32px rgba(254,44,85,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15);
  animation: logo-inner-pulse 3s ease-in-out infinite;
}

@keyframes logo-inner-pulse {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(254,44,85,0.4),
      0 0 16px rgba(254,44,85,0.5),
      0 0 32px rgba(254,44,85,0.2),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(254,44,85,0.6),
      0 0 28px rgba(254,44,85,0.9),
      0 0 56px rgba(254,44,85,0.4),
      inset 0 1px 0 rgba(255,255,255,0.2);
  }
}

/* アイコン内部シャイン（斜め光沢） */
.logo-icon::before {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 60%; height: 80%;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}

/* 内部スキャンライン */
.logo-icon::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: logo-scan 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes logo-scan {
  0%,100% { left: -120%; opacity: 0; }
  40%     { opacity: 1; }
  60%     { left: 120%; opacity: 0; }
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.logo-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.03em;
  line-height: 1;
}

.logo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-icon-header {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all var(--transition);
}

.btn-icon-header:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
  box-shadow: 0 0 12px rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.15);
}

.btn-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(254,44,85,0.1);
  border: 1px solid rgba(254,44,85,0.3);
  border-radius: 50px;
  color: var(--neon-red);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
}

.btn-header-link:hover {
  background: rgba(254,44,85,0.2);
  border-color: var(--neon-red);
  box-shadow: 0 0 14px rgba(254,44,85,0.35);
}

/* =========================================
   メインコンテンツ
   ========================================= */
#main-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 16px 80px;
  position: relative;
  z-index: 1;
}

/* =========================================
   セクション共通
   ========================================= */
.section-block {
  margin-bottom: 36px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i { color: var(--tt-gold); }

/* =========================================
   ポディウム（TOP3） — TikTok強化版
   ========================================= */
.podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 32px 0 0;
}

.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                /* gapを0にしてmarginで個別制御 */
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.podium-item:hover { transform: translateY(-8px) scale(1.03); }
.podium-item.rank-1 { order: 2; }
.podium-item.rank-2 { order: 1; }
.podium-item.rank-3 { order: 3; }

/* ===== アバターラッパー（アニメーションリング＋バッジ用） ===== */
.podium-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
   * padding: リング(inset -9〜-12px) + バッジはみ出し分を全方向確保
   * margin-bottom: 0 にしてラッパー下端と名前の間に自然な隙間を作る
   * margin-top: 負値でアバターを上に引き上げ
   */
  padding: 14px 18px 20px 14px;
  margin: -14px -18px 0 -14px;
}

/* ==============================================
   回転リング：細線バージョン
   conic-gradient の色帯を狭くし、中心を
   同サイズの黒マスク(::before の内側 circle)
   で塗り潰すことで「細いリング」を実現
   ============================================== */

/* --- 全順位共通 ベースリング --- */
.podium-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -9px;          /* リング外径：さらに張り出し */
  border-radius: 50%;
  /* 色帯を14%幅に → しっかり太いリング */
  background: conic-gradient(
    from 0deg,
    transparent  0%,
    transparent 52%,
    currentColor 62%,    /* 色帯 14% */
    currentColor 76%,
    transparent 86%,
    transparent 96%,
    currentColor 100%
  );
  /* mask境界を64%に → リング幅がさらに太く */
  -webkit-mask: radial-gradient(circle, transparent 64%, black 64%);
          mask: radial-gradient(circle, transparent 64%, black 64%);
  animation: ring-spin 3s linear infinite;
  opacity: 0.85;
  z-index: 0;
}

/* --- 1位: ゴールドリング（最も存在感のある太さ） --- */
.rank-1 .podium-avatar-wrap { color: #ffd700; }
.rank-1 .podium-avatar-wrap::before {
  inset: -12px;         /* 1位：最も外に張り出す */
  background: conic-gradient(
    from 0deg,
    transparent  0%,
    #ffd700      6%,
    #fff4a0     13%,     /* ハイライト */
    #ff8c00     20%,
    #ffd700     26%,
    transparent 34%,
    transparent 54%,
    #ffd700     60%,
    #fff4a0     67%,
    #ff8c00     74%,
    #ffd700     80%,
    transparent 88%
  );
  /* mask境界を60% → 約40%幅の極太リング帯 */
  -webkit-mask: radial-gradient(circle, transparent 60%, black 60%);
          mask: radial-gradient(circle, transparent 60%, black 60%);
  animation: ring-spin 2.5s linear infinite;
  opacity: 1;
}

/* --- 2位: シルバーリング --- */
.rank-2 .podium-avatar-wrap { color: #c0c0c0; }
.rank-2 .podium-avatar-wrap::before {
  inset: -9px;
  background: conic-gradient(
    from 0deg,
    transparent  0%,
    #b0b0b0      8%,
    #e8e8e8     18%,     /* 色帯 14% */
    #c0c0c0     24%,
    transparent 32%,
    transparent 62%,
    #b0b0b0     70%,
    #e8e8e8     80%,
    #c0c0c0     86%,
    transparent 94%
  );
  -webkit-mask: radial-gradient(circle, transparent 65%, black 65%);
          mask: radial-gradient(circle, transparent 65%, black 65%);
  animation: ring-spin 3.5s linear infinite;
  opacity: 0.9;
}

/* --- 3位: ブロンズリング --- */
.rank-3 .podium-avatar-wrap { color: #cd7f32; }
.rank-3 .podium-avatar-wrap::before {
  inset: -9px;
  background: conic-gradient(
    from 0deg,
    transparent  0%,
    #a05a20      8%,
    #e8a050     18%,     /* 色帯 14% */
    #cd7f32     24%,
    transparent 32%,
    transparent 62%,
    #a05a20     70%,
    #e8a050     80%,
    #cd7f32     86%,
    transparent 94%
  );
  -webkit-mask: radial-gradient(circle, transparent 65%, black 65%);
          mask: radial-gradient(circle, transparent 65%, black 65%);
  animation: ring-spin 4s linear infinite;
  opacity: 0.85;
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* --- パルスリング（リングに合わせた太さ） --- */
.podium-avatar-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 5px solid currentColor;
  opacity: 0;
  animation: pulse-ring 2.5s ease-out infinite;
}

.rank-1 .podium-avatar-wrap::after { animation-duration: 2s; }
.rank-2 .podium-avatar-wrap::after { animation-duration: 2.8s; }
.rank-3 .podium-avatar-wrap::after { animation-duration: 3.2s; }

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ===== アバター本体 ===== */
.podium-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  border: 3px solid transparent;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
  width: 74px;
  height: 74px;
  font-size: 1.6rem;
  position: relative;
  z-index: 1;
}

.rank-1 .podium-avatar {
  width: 96px;
  height: 96px;
  font-size: 2.2rem;
  border-color: #ffd700;
  border-width: 4px;
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.3),
    0 0 28px rgba(255,215,0,0.8),
    0 0 56px rgba(255,215,0,0.35),
    0 0 90px rgba(255,215,0,0.15);
  animation: glow-gold 2.5s ease-in-out infinite;
}

@keyframes glow-gold {
  0%,100% {
    box-shadow:
      0 0 0 2px rgba(255,215,0,0.3),
      0 0 28px rgba(255,215,0,0.8),
      0 0 56px rgba(255,215,0,0.35),
      0 0 90px rgba(255,215,0,0.15);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255,215,0,0.4),
      0 0 40px rgba(255,215,0,1.0),
      0 0 80px rgba(255,215,0,0.5),
      0 0 120px rgba(255,215,0,0.2);
  }
}

.rank-2 .podium-avatar {
  border-color: #c0c0c0;
  border-width: 3px;
  box-shadow:
    0 0 18px rgba(192,192,192,0.6),
    0 0 40px rgba(192,192,192,0.2);
  animation: glow-silver 3s ease-in-out infinite;
}

@keyframes glow-silver {
  0%,100% { box-shadow: 0 0 18px rgba(192,192,192,0.6), 0 0 40px rgba(192,192,192,0.2); }
  50%     { box-shadow: 0 0 28px rgba(192,192,192,0.9), 0 0 60px rgba(192,192,192,0.35); }
}

.rank-3 .podium-avatar {
  border-color: #cd7f32;
  border-width: 3px;
  box-shadow:
    0 0 18px rgba(205,127,50,0.6),
    0 0 40px rgba(205,127,50,0.2);
  animation: glow-bronze 3.5s ease-in-out infinite;
}

@keyframes glow-bronze {
  0%,100% { box-shadow: 0 0 18px rgba(205,127,50,0.6), 0 0 40px rgba(205,127,50,0.2); }
  50%     { box-shadow: 0 0 28px rgba(205,127,50,0.9), 0 0 60px rgba(205,127,50,0.35); }
}

.podium-avatar .avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* =========================================
   ランクバッジ（podium-medal 置き換え）
   ========================================= */
.podium-medal { display: none; } /* 旧絵文字スタイル無効化 */

.rank-badge {
  position: absolute;
  /* アバター右下に自然に重なる位置 */
  bottom: 14px;
  right:   2px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: default;
  /* 五角形（ペンタゴン）シェイプ */
  clip-path: polygon(50% 0%, 100% 28%, 82% 100%, 18% 100%, 0% 28%);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s ease;
}

.rank-badge:hover {
  transform: scale(1.2) rotate(-5deg);
}

/* ====== 1位バッジ：ゴールド ====== */
.rank-badge-1 {
  width: 40px;
  height: 44px;
  font-size: 0.67rem;
  color: #1a0a00;
  background: linear-gradient(
    160deg,
    #fff4a0  0%,
    #ffd700 30%,
    #ff9500 60%,
    #ffd700 80%,
    #fff4a0 100%
  );
  filter:
    drop-shadow(0 0 6px rgba(255,215,0,0.9))
    drop-shadow(0 0 14px rgba(255,200,0,0.6))
    drop-shadow(0 0 28px rgba(255,180,0,0.3));
  animation: badge-gold-pulse 2.5s ease-in-out infinite;
}

@keyframes badge-gold-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0 6px rgba(255,215,0,0.9))
      drop-shadow(0 0 14px rgba(255,200,0,0.6))
      drop-shadow(0 0 28px rgba(255,180,0,0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255,230,0,1.0))
      drop-shadow(0 0 24px rgba(255,210,0,0.8))
      drop-shadow(0 0 48px rgba(255,180,0,0.5));
  }
}

/* ====== 2位バッジ：シルバー ====== */
.rank-badge-2 {
  width: 35px;
  height: 39px;
  font-size: 0.62rem;
  color: #0a0a0a;
  background: linear-gradient(
    160deg,
    #f0f0f0  0%,
    #d0d0d0 25%,
    #a0a0a0 55%,
    #d0d0d0 80%,
    #f0f0f0 100%
  );
  filter:
    drop-shadow(0 0 5px rgba(200,200,200,0.8))
    drop-shadow(0 0 12px rgba(180,180,180,0.45));
  animation: badge-silver-pulse 3s ease-in-out infinite;
}

@keyframes badge-silver-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0 5px rgba(200,200,200,0.8))
      drop-shadow(0 0 12px rgba(180,180,180,0.45));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(220,220,220,1.0))
      drop-shadow(0 0 20px rgba(190,190,190,0.6));
  }
}

/* ====== 3位バッジ：ブロンズ ====== */
.rank-badge-3 {
  width: 33px;
  height: 37px;
  font-size: 0.6rem;
  color: #1a0800;
  background: linear-gradient(
    160deg,
    #f5c07a  0%,
    #cd7f32 30%,
    #8b4513 60%,
    #cd7f32 80%,
    #f5c07a 100%
  );
  filter:
    drop-shadow(0 0 5px rgba(205,127,50,0.8))
    drop-shadow(0 0 12px rgba(180,100,30,0.45));
  animation: badge-bronze-pulse 3.5s ease-in-out infinite;
}

@keyframes badge-bronze-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0 5px rgba(205,127,50,0.8))
      drop-shadow(0 0 12px rgba(180,100,30,0.45));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(220,140,60,1.0))
      drop-shadow(0 0 20px rgba(200,120,40,0.6));
  }
}

.podium-name {
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  margin-top: 16px;   /* ラッパー下端〜名前の間隔を確保 */
  margin-bottom: 6px;
}

.podium-points {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  margin-bottom: 10px; /* points〜台座の間隔 */
}

/* ==============================================
   台座ブロック — グラスモーフィズム高級感版
   半透明ガラス層 + カラーグロー で上質な質感
   ============================================== */
.podium-stage-block {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 10px 0 0;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  position: relative;
  overflow: hidden;
  /* ガラス感の共通ベース */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-bottom: none;
}

/* 台座上部ハイライト線 */
.podium-stage-block::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  z-index: 2;
}

/* 台座内部シャイン（流れる光） */
.podium-stage-block::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: stage-shine 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes stage-shine {
  0%,100% { left: -80%; opacity: 0; }
  20%     { opacity: 1; }
  60%     { left: 130%; opacity: 0; }
}

/* --- 1位: ゴールド台座（半透明） --- */
.rank-1 .podium-stage-block {
  width: 108px; height: 72px;
  background: linear-gradient(
    160deg,
    rgba(255,200,0,0.55)  0%,
    rgba(255,215,0,0.75) 40%,
    rgba(255,236,110,0.6) 70%,
    rgba(200,150,0,0.5)  100%
  );
  box-shadow:
    0 0 28px rgba(255,215,0,0.5),
    0 0 60px rgba(255,215,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* --- 2位: シルバー台座（半透明） --- */
.rank-2 .podium-stage-block {
  width: 96px; height: 54px;
  background: linear-gradient(
    160deg,
    rgba(180,180,180,0.45) 0%,
    rgba(210,210,210,0.65) 40%,
    rgba(240,240,240,0.5)  70%,
    rgba(140,140,140,0.4)  100%
  );
  box-shadow:
    0 0 14px rgba(192,192,192,0.4),
    0 0 30px rgba(192,192,192,0.12),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* --- 3位: ブロンズ台座（半透明） --- */
.rank-3 .podium-stage-block {
  width: 96px; height: 40px;
  background: linear-gradient(
    160deg,
    rgba(120,58,16,0.5)   0%,
    rgba(205,127,50,0.65) 40%,
    rgba(232,160,80,0.55) 70%,
    rgba(100,50,10,0.45)  100%
  );
  box-shadow:
    0 0 14px rgba(205,127,50,0.4),
    0 0 30px rgba(205,127,50,0.12),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

.podium-rank-num {
  font-size: 1.7rem;
  font-weight: 900;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    0 0 16px rgba(255,255,255,0.15);
  position: relative;
  z-index: 3;
  /* 半透明台座でも数字がくっきり見えるよう強化 */
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.3);
}

/* =========================================
   タブナビ（汎用）
   ========================================= */
.tab-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.active {
  color: var(--neon-red);
  border-bottom-color: var(--neon-red);
  text-shadow: 0 0 10px rgba(254,44,85,0.55);
}

.tab-panel { animation: fadeIn .22s ease; }
.tab-panel.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================
   ランキングテーブル — ネオン強化版
   ========================================= */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  overflow-x: auto;
  box-shadow:
    0 0 0 1px rgba(254,44,85,0.07),
    0 4px 32px rgba(0,0,0,0.35),
    inset 0 0 80px rgba(254,44,85,0.02);
  position: relative;
}

/* テーブルトップグロー線 */
.table-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(254,44,85,0.5), rgba(37,244,238,0.4), transparent);
  z-index: 1;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
}

.ranking-table thead tr {
  background: rgba(254,44,85,0.05);
  border-bottom: 1px solid var(--border);
}

body.light-mode .ranking-table thead tr {
  background: rgba(0,0,0,0.03);
}

.ranking-table th {
  padding: 14px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.ranking-table th.sortable { cursor: pointer; }
.ranking-table th.sortable:hover { color: var(--neon-red); }

.ranking-table td {
  padding: 13px 16px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.ranking-table tbody tr:last-child td { border-bottom: none; }

.ranking-table tbody tr {
  transition: background var(--transition), box-shadow var(--transition);
}

.ranking-table tbody tr:hover {
  background: rgba(254,44,85,0.05);
  box-shadow: inset 3px 0 0 var(--neon-red);
}

body.light-mode .ranking-table tbody tr:hover {
  background: rgba(0,0,0,0.025);
  box-shadow: none;
}

/* 列幅 */
.col-rank     { width: 56px; }
.col-streamer { min-width: 200px; }
.col-num      { width: 100px; text-align: right !important; }
.col-diff     { width: 170px; text-align: center !important; }
.col-actions  { width: 80px;  text-align: center !important; }

/* ランク番号 */
.rank-num {
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
}

.rank-num.gold   { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.7); }
.rank-num.silver { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,0.5); }
.rank-num.bronze { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,0.5); }

/* 配信者セル */
.streamer-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.08);
  transition: box-shadow var(--transition);
}

.table-avatar:hover {
  box-shadow: 0 0 12px rgba(254,44,85,0.4);
}

.table-avatar .avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.streamer-name {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* 数値セル */
.num-cell {
  font-weight: 700;
  text-align: right;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', sans-serif;
}

.points-cell { color: var(--neon-red); font-size: 1rem; }

/* ローディング */
.loading-cell {
  text-align: center;
  padding: 60px;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--neon-red);
  border-right-color: var(--neon-purple);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 0 auto;
  box-shadow: 0 0 14px rgba(254,44,85,0.3);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 空状態 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state i { font-size: 2.5rem; opacity: 0.3; }
.empty-state p { font-size: 0.9rem; }

/* hidden-sm */
@media (max-width: 600px) {
  .hidden-sm { display: none; }
}

/* =========================================
   統計カード — ネオン強化版
   ========================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}

/* カード上部グロー線 */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-red);
  opacity: 0;
  transition: opacity var(--transition);
}

/* カード内スキャンライン */
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 24px rgba(254,44,85,0.12);
  border-color: rgba(254,44,85,0.2);
}

.stat-card:hover::before { opacity: 1; }

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text) 0%, rgba(238,238,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 5px;
}

/* =========================================
   チャート
   ========================================= */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.chart-card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(254,44,85,0.03);
}

.chart-card-header h3 {
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.chart-card-header h3 i { color: var(--neon-red); }

.chart-wrap {
  padding: 18px;
  position: relative;
}

/* =========================================
   ボタン共通 — ネオン強化版
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* ボタン内部シャイン */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.btn:hover::after { left: 150%; }

.btn-primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: 0 2px 14px rgba(254,44,85,0.4);
}

.btn-primary:hover {
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: rgba(254,44,85,0.4);
  color: var(--neon-red);
  background: rgba(254,44,85,0.05);
}

.btn-danger {
  background: linear-gradient(135deg, #fe2c55, #c0002e);
  color: #fff;
  box-shadow: 0 2px 12px rgba(254,44,85,0.4);
}

.btn-danger:hover {
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  border-color: rgba(254,44,85,0.45);
  color: var(--neon-red);
}

.btn-danger-outline {
  color: var(--neon-red);
  border-color: rgba(254,44,85,0.3);
}

.btn-danger-outline:hover {
  background: rgba(254,44,85,0.1);
  border-color: var(--neon-red);
  box-shadow: 0 0 12px rgba(254,44,85,0.25);
}

.btn-sm {
  padding: 6px 13px;
  font-size: 0.8rem;
}

/* =========================================
   モーダル — ネオン強化版
   ========================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid rgba(254,44,85,0.12);
  border-radius: var(--radius-card);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(254,44,85,0.08),
    0 0 80px rgba(254,44,85,0.06),
    inset 0 1px 0 rgba(255,255,255,0.05);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-box-sm { max-width: 420px; }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(-20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

/* モーダルヘッダー ネオン線 */
.modal-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-red), var(--neon-cyan), transparent);
  opacity: 0.4;
}

.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.modal-close:hover {
  background: rgba(254,44,85,0.15);
  color: var(--neon-red);
  border-color: rgba(254,44,85,0.4);
  box-shadow: 0 0 10px rgba(254,44,85,0.25);
}

.modal-body {
  padding: 22px 24px 26px;
  overflow-y: auto;
  flex: 1;
}

/* =========================================
   フォーム
   ========================================= */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row .form-group { flex: 1; }

.form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.req { color: var(--neon-red); }

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--neon-red);
  box-shadow: 0 0 0 3px rgba(254,44,85,0.12), 0 0 16px rgba(254,44,85,0.08);
}

.form-group textarea { resize: vertical; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* =========================================
   Toast — ネオン強化版
   ========================================= */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--bg-elevated);
  border: 1px solid rgba(74,222,128,0.25);
  color: var(--text);
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    0 0 24px rgba(74,222,128,0.12);
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast #toast-icon { color: var(--neon-green); }
.toast.error {
  border-color: rgba(254,44,85,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 24px rgba(254,44,85,0.12);
}
.toast.error #toast-icon { color: var(--neon-red); }

/* =========================================
   フッター — ネオン強化版
   ========================================= */
#main-footer {
  text-align: center;
  padding: 22px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
  background: rgba(5,5,14,0.6);
  backdrop-filter: blur(10px);
}

#main-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(254,44,85,0.4), rgba(37,244,238,0.3), transparent);
}

#main-footer i { color: var(--neon-red); }

body.light-mode #main-footer {
  background: rgba(255,255,255,0.8);
}

/* =========================================
   hidden ユーティリティ
   ========================================= */
.hidden { display: none !important; }

/* =========================================
   スクロールバー（ネオン赤）
   ========================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(254,44,85,0.5), rgba(191,90,242,0.4));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(254,44,85,0.7); }

/* =========================================
   レスポンシブ
   ========================================= */
@media (max-width: 640px) {
  .form-row { flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .podium-avatar { width: 62px; height: 62px; font-size: 1.3rem; }
  .rank-1 .podium-avatar { width: 80px; height: 80px; font-size: 1.8rem; }
  .podium-container { gap: 12px; }

  /* バッジ小型化 */
  .rank-badge-1 { width: 32px; height: 36px; font-size: 0.56rem; }
  .rank-badge-2 { width: 28px; height: 32px; font-size: 0.52rem; }
  .rank-badge-3 { width: 26px; height: 30px; font-size: 0.50rem; }

  /* ロゴ縮小 */
  .logo-icon-wrap { width: 44px; height: 44px; }
  .logo-icon { width: 38px; height: 38px; font-size: 1.1rem; }
}

@media (max-width: 480px) {
  #main-content { padding: 16px 12px 60px; }
  .stats-grid { grid-template-columns: 1fr; }
  .modal-header, .modal-body { padding-left: 16px; padding-right: 16px; }
}