@charset "utf-8";

/* =========================================================
   RE:CREATION 2026 - ランキング (ranking.css)
   【明るいシアンブルー (RGB 44, 159, 216) ＆ 超高視認性・文字特大ランキング】
   ========================================================= */

body, body.page-ranking {
  min-height: 100vh;
  background-color: #071E30 !important;
  background-image:
    url('../images/arena-court-lines.svg'),
    radial-gradient(ellipse 90% 55% at 50% 12%, rgba(56, 182, 240, 0.30) 0%, transparent 70%),
    radial-gradient(circle at 10% 45%, rgba(0, 210, 255, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 90% 45%, rgba(254, 200, 56, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #071E30 0%, #0D3E5E 30%, #125A82 58%, #0A3654 82%, #061D2E 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center top, center, center, center, center !important;
  background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
  color: #FFFFFF;
  font-family: var(--font-main);
  overflow-x: hidden;
}

/* メインコンテナ */
.ranking-main {
  max-width: 980px;
  width: 92%;
  margin: 3.5rem auto 7rem;
  position: relative;
  z-index: 10;
}

/* パンくずリスト */
.breadcrumb {
  max-width: 980px;
  width: 92%;
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #E2F2FD;
}

.breadcrumb a {
  color: #FEC838;
  font-weight: 700;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb a:hover {
  opacity: 0.8;
}

.breadcrumb .sep {
  opacity: 0.6;
  color: #FFFFFF;
}

.breadcrumb .current {
  color: #FFFFFF;
  font-weight: 800;
}

/* =========================================================
   1. タイトルエリア (原作準拠: ランキング)
   ========================================================= */
.ranking-title {
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(10, 48, 76, 0.48) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 182, 240, 0.7);
  border-top: 4px solid #FEC838;
  border-radius: 20px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 16px 45px rgba(5, 30, 48, 0.4), 0 0 35px rgba(56, 182, 240, 0.25);
  margin-bottom: 2.0rem;
}

.ranking-title h2 {
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 182, 240, 0.5);
  margin: 0;
}

/* =========================================================
   2. 導入文 (原作準拠: ランキング結果は以下の通りです。)
   ========================================================= */
.ranking-kousin {
  text-align: center;
  margin-bottom: 2.4rem;
}

.ranking-kousin-text {
  display: inline-block;
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, rgba(7, 36, 56, 0.65) 0%, rgba(12, 60, 92, 0.65) 100%);
  border: 2px solid #FEC838;
  padding: 12px 34px;
  border-radius: 40px;
  box-shadow: 0 8px 30px rgba(5, 30, 48, 0.4), 0 0 20px rgba(254, 200, 56, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   3. ランキングボード
   ========================================================= */
.ranking-table-card {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(8, 36, 60, 0.38) 0%, rgba(5, 24, 42, 0.42) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(56, 182, 240, 0.50);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 20px 55px rgba(5, 30, 48, 0.4), 0 0 35px rgba(44, 159, 216, 0.20);
}

.tableR {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
}

/* 各行スタイル */
.tableR tr {
  transition: all var(--trans-smooth);
}

.tableR tr:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(5, 30, 48, 0.5);
}

.tableR td {
  padding: 20px 24px;
  vertical-align: middle;
}

.rank-badge-cell {
  width: 90px;
  text-align: center;
  border-radius: 16px 0 0 16px;
}

.rank-name-cell {
  text-align: left;
}

.rank-pts-cell {
  width: 180px;
  text-align: right;
  border-radius: 0 16px 16px 0;
}

/* 順位バッジ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

/* 1位: 特大ゴールド */
.tableR tr.rank-1 {
  background: linear-gradient(90deg, rgba(254, 200, 56, 0.25) 0%, rgba(20, 110, 160, 0.65) 100%);
  border: 2px solid #FEC838;
}
.tableR tr.rank-1 .rank-badge.gold {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #FFE066 0%, #FEC838 50%, #F59F00 100%);
  color: #072B42;
  font-size: 2.2rem;
  box-shadow: 0 0 25px rgba(254, 200, 56, 0.7);
}
.tableR tr.rank-1 .rank-class-name {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 15px rgba(254, 200, 56, 0.4);
  letter-spacing: 1px;
}
.tableR tr.rank-1 .rank-score-val {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 900;
  color: #FEC838;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(254, 200, 56, 0.6);
}

/* 2位: 特大シルバー */
.tableR tr.rank-2 {
  background: linear-gradient(90deg, rgba(220, 235, 252, 0.20) 0%, rgba(16, 94, 140, 0.65) 100%);
  border: 1.5px solid rgba(220, 235, 252, 0.8);
}
.tableR tr.rank-2 .rank-badge.silver {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #FFFFFF 0%, #D6EEFB 50%, #A0C5E8 100%);
  color: #072B42;
  font-size: 1.9rem;
  box-shadow: 0 0 20px rgba(220, 235, 252, 0.6);
}
.tableR tr.rank-2 .rank-class-name {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  letter-spacing: 1px;
}
.tableR tr.rank-2 .rank-score-val {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  color: #E2EEFB;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 3位: 特大ブロンズ */
.tableR tr.rank-3 {
  background: linear-gradient(90deg, rgba(255, 140, 66, 0.20) 0%, rgba(16, 94, 140, 0.65) 100%);
  border: 1.5px solid rgba(255, 140, 66, 0.8);
}
.tableR tr.rank-3 .rank-badge.bronze {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #FFB074 0%, #FF8C42 50%, #D9531E 100%);
  color: #FFFFFF;
  font-size: 1.9rem;
  box-shadow: 0 0 20px rgba(255, 140, 66, 0.6);
}
.tableR tr.rank-3 .rank-class-name {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.5px;
}
.tableR tr.rank-3 .rank-score-val {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  color: #FFA07A;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 4位〜8位: 通常行（半透明フロスト ＆ 文字クッキリ高コントラスト） */
.tableR tr.rank-row {
  background: rgba(7, 35, 55, 0.38);
  border: 1.5px solid rgba(56, 182, 240, 0.35);
}
.tableR tr.rank-row:hover {
  background: rgba(16, 94, 140, 0.75);
  border-color: #38B6F0;
}
.tableR tr.rank-row .rank-badge.normal {
  width: 44px;
  height: 44px;
  background: rgba(56, 182, 240, 0.25);
  border: 1.5px solid rgba(56, 182, 240, 0.7);
  color: #FFFFFF;
  font-size: 1.45rem;
}
.tableR tr.rank-row .rank-class-name {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.tableR tr.rank-row .rank-score-val {
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  font-weight: 900;
  color: #FEC838;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   レスポンシブ対応 (スマホ用: 改善案3・改善案4完全適用)
   【改善案3: カード横幅スリム化 (84%) ＆ 左右ウィング余白拡大】
   【改善案4: トップ3表彰台ポディウム ＆ 4位〜8位コンパクトリスト化】
   ========================================================= */
@media screen and (max-width: 768px) {
  /* 改善案3: カード幅を84%（最大334px）に引き締め、左右両端にスタンド席が見えるクリアランスを確保 */
  .ranking-main {
    margin: 1.2rem auto 4.0rem;
    width: 84%;
    max-width: 334px;
  }
  .ranking-title {
    padding: 1.1rem 0.8rem;
    border-radius: 16px;
    margin-bottom: 0.9rem;
    width: 100%;
    max-width: 334px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, rgba(8, 36, 60, 0.65) 0%, rgba(5, 24, 42, 0.70) 100%) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .ranking-title h2 {
    font-size: clamp(1.35rem, 5.0vw, 1.65rem);
    letter-spacing: 1.2px;
  }
  .ranking-kousin {
    margin-bottom: 1.0rem;
  }
  .ranking-kousin-text {
    font-size: 0.84rem;
    padding: 6px 16px;
    letter-spacing: 0.6px;
  }

  /* カード本体: 超薄膜ホログラムフロスト（背後の3Dポリッシュフロア・センターサークルが透ける） */
  .ranking-table-card {
    padding: 10px 6px;
    border-radius: 16px;
    border: 1px solid rgba(56, 182, 240, 0.40);
    width: 100%;
    max-width: 334px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(8, 36, 60, 0.65) 0%, rgba(5, 24, 42, 0.70) 100%) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .tableR {
    border-spacing: 0 4px;
  }

  /* ---------------------------------------------------------
     改善案4: トップ3「表彰台（ポディウム）スタイル」
     1位・2位・3位は金銀銅のアイコニックな栄誉感を堂々と演出
     --------------------------------------------------------- */
  .tableR tr.rank-row-top td {
    padding: 9px 6px;
  }
  .tableR tr.rank-1 {
    background: linear-gradient(90deg, rgba(254, 200, 56, 0.28) 0%, rgba(20, 110, 160, 0.60) 100%);
    border: 1.5px solid #FEC838;
    box-shadow: 0 2px 10px rgba(254, 200, 56, 0.25);
  }
  .tableR tr.rank-1 .rank-badge.gold {
    width: 32px;
    height: 32px;
    font-size: 1.18rem;
    box-shadow: 0 0 14px rgba(254, 200, 56, 0.8);
  }
  .tableR tr.rank-1 .rank-class-name {
    font-size: 1.06rem;
    font-weight: 900;
    letter-spacing: 0.3px;
  }
  .tableR tr.rank-1 .rank-score-val {
    font-size: 1.08rem;
    font-weight: 900;
    color: #FEC838;
  }

  .tableR tr.rank-2 {
    background: linear-gradient(90deg, rgba(220, 235, 252, 0.22) 0%, rgba(16, 94, 140, 0.55) 100%);
    border: 1.5px solid rgba(220, 235, 252, 0.85);
  }
  .tableR tr.rank-2 .rank-badge.silver {
    width: 28px;
    height: 28px;
    font-size: 1.02rem;
  }
  .tableR tr.rank-2 .rank-class-name {
    font-size: 1.00rem;
    font-weight: 900;
  }
  .tableR tr.rank-2 .rank-score-val {
    font-size: 1.02rem;
    font-weight: 900;
    color: #E2EEFB;
  }

  .tableR tr.rank-3 {
    background: linear-gradient(90deg, rgba(255, 140, 66, 0.22) 0%, rgba(16, 94, 140, 0.55) 100%);
    border: 1.5px solid rgba(255, 140, 66, 0.85);
  }
  .tableR tr.rank-3 .rank-badge.bronze {
    width: 28px;
    height: 28px;
    font-size: 1.02rem;
  }
  .tableR tr.rank-3 .rank-class-name {
    font-size: 0.98rem;
    font-weight: 900;
  }
  .tableR tr.rank-3 .rank-score-val {
    font-size: 1.02rem;
    font-weight: 900;
    color: #FFA07A;
  }

  /* ---------------------------------------------------------
     改善案4: 4位〜8位「コンパクトリスト化」
     パディング＆フォントをスリムに圧縮し、縦の圧迫感を大幅解消！
     上下のアリーナ空間（天井照明・床面・スタンド席）の「抜け」を創出
     --------------------------------------------------------- */
  .tableR tr.rank-row td {
    padding: 5px 6px;
  }
  .tableR tr.rank-row {
    background: rgba(6, 28, 46, 0.32);
    border: 1px solid rgba(56, 182, 240, 0.25);
  }
  .rank-badge-cell {
    width: 32px;
    padding-left: 5px !important;
  }
  .rank-name-cell {
    padding-left: 4px !important;
  }
  .rank-pts-cell {
    width: 70px;
    padding-right: 5px !important;
    text-align: right;
  }
  .tableR tr.rank-row .rank-badge.normal {
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
    border-width: 1px;
  }
  .tableR tr.rank-row .rank-class-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #F0F6FC;
  }
  .tableR tr.rank-row .rank-score-val {
    font-size: 0.88rem;
    font-weight: 800;
  }
}

/* =========================================================
   RANKING PREPARING STYLES (COMING SOON)
   ========================================================= */
.rank-prep {
  color: rgba(226, 242, 253, 0.65) !important;
  font-style: italic;
  letter-spacing: 1.5px;
  font-size: 1.15rem;
}

.rank-prep-pts {
  color: rgba(254, 200, 56, 0.7) !important;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 1px;
}