/* static/styles/rp-ranking.css */

/* ===== manuscripts-ranking と同じヘッダー ===== */
.hero {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: visible;
}
.hero-img {
  width: 100%;
  height: 100%;
  background-image: url("/img/rprankingheader.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ===== 本体：上寄せレイアウトにする ===== */
.main-content{
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;

  /* 160(ヘッダー) + 60(フッター) + 余白を差し引く */
  height: calc(932px - 160px - 60px);
  min-height: 0; /* 子のスクロールのため */
}

.section-title{
  font-weight: 900;
  font-size: 16px;
  color: #1f2937;
  text-align: center;
  letter-spacing: .02em;
  margin: 4px 0 2px;
}

.subnote{
  text-align: center;
  font-size: 12px;
  color: #64748b;
  margin: 0 0 10px;
}

/* 一覧：上から始まるように */
.podium{
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* これで “下に落ちる” のを防ぐ */
  margin-top: 0;
  padding: 0;

  /* 件数が多い時だけここがスクロール */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.empty{
  text-align: center;
  color: #64748b;
  font-weight: 700;
  padding: 18px 0;
}
.hidden{ display:none !important; }

/* ===== 横長カード（ここが一番重要） =====
   - 高さを固定して縦長を防止
   - 1行で横長に見えるように */
.podium-card{
  position: relative;
  border-radius: 16px;
  padding: 10px 12px 10px 56px; /* 左にメダル分の余白 */
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;

  /* 横長にする要点 */
  height: 82px;
  display: flex;
  align-items: center;
  text-decoration: none; /* aでも下線消す */
}
.podium-card:active{ transform: translateY(1px) scale(0.995); }
.podium-card:focus-visible{
  outline: 3px solid rgba(37,99,235,0.35);
  outline-offset: 2px;
}

/* アイコン＋名前（横並び） */
.rank-row{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.rank-icon{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(148,163,184,0.6);
  background: #f1f5f9;
  flex: 0 0 auto;
}
.rank-name{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #1e293b;

  /* 上品な立体感 */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 4px rgba(0,0,0,0.08);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* メダル（順位） */
.medal{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: #111827;
  box-shadow:
    0 12px 18px rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.65);
}
.medal.gold{
  background: radial-gradient(circle at 30% 30%, #fff2b8, #f6c744 55%, #d69a00 100%);
}
.medal.silver{
  background: radial-gradient(circle at 30% 30%, #ffffff, #dbe3ea 55%, #9aa7b4 100%);
}
.medal.bronze{
  background: radial-gradient(circle at 30% 30%, #ffe0c7, #e0a06a 55%, #a7652e 100%);
}
.medal.normal{
  background: radial-gradient(circle at 30% 30%, #ffffff, #e2e8f0 60%, #94a3b8 100%);
  color: #0f172a;
}

/* ===== 1位だけ派手（横長でも破綻しない） ===== */
.podium-card.rank-1{
  border: 2px solid rgba(245, 180, 0, 0.75);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 216, 106, 0.35), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 25%, rgba(255, 240, 190, 0.35), rgba(255,255,255,0) 55%),
    rgba(255,255,255,0.88);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    0 0 0 4px rgba(255, 216, 106, 0.18);
}
.podium-card.rank-1::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 216, 106, 0.22) 1px, transparent 1.2px);
  background-size: 10px 10px;
  opacity: 0.7;
}
.podium-card.rank-1::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,0.60) 50%,
    rgba(255,255,255,0) 56%
  );
  transform: translateX(-140%);
  opacity: 0;
  animation: shine 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes shine{
  0%   { transform: translateX(-140%); opacity: 0; }
  10%  { opacity: 0.55; }
  55%  { transform: translateX(140%); opacity: 0.55; }
  60%  { transform: translateX(140%); opacity: 0; }
  100% { transform: translateX(140%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .podium-card.rank-1::after{ animation: none; opacity: 0; }
}