.ranking-page .ranking-intro { margin: 0 0 25px; color: var(--p-muted); font-size: 14px; line-height: 1.6; }
.ranking-month-picker { display: flex; align-items: center; gap: 14px; padding: 18px 20px; flex-wrap: wrap; background: linear-gradient(100deg, #26140ad9, #100805e8); }
.ranking-month-picker label { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--p-muted); }
.ranking-month-picker input { color-scheme: dark; background: var(--p-espresso); color: var(--p-cream); border: 1px solid #735923; border-radius: 11px; padding: 11px 14px; font: inherit; min-height: 44px; max-width: 100%; }
.ranking-month-picker input:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 2px; }
.ranking-month-picker .ghost-action { min-height: 44px; border-radius: 11px; font-size: 13px; }
.ranking-my-position { margin-left: auto; padding-left: 28px; border-left: 1px solid #ffd44725; display: flex; gap: 14px; align-items: center; }
.ranking-my-position span { color: var(--p-muted); font-size: 12px; }
.ranking-my-position strong { color: var(--p-gold-bright); font-size: 26px; line-height: 1; font-weight: 850; }
.ranking-standings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 16px; }
.ranking-standings-head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.ranking-standings-head > span { color: var(--p-muted); font-size: 12px; white-space: nowrap; }
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.ranking-award { --rank-metal: #ffd447; --rank-glow: 255, 212, 71; position: relative; min-width: 0; min-height: 222px; padding: 24px 24px 22px; border: 1px solid rgba(var(--rank-glow), .36); border-radius: 21px; background: radial-gradient(ellipse at 50% 0, rgba(var(--rank-glow), .12), transparent 68%), linear-gradient(150deg, #26140a, #130a05); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.ranking-award::before { content: ''; position: absolute; top: 0; left: 23%; right: 23%; height: 2px; background: linear-gradient(90deg, transparent, var(--rank-metal), transparent); }
.ranking-award.gold { order: 2; min-height: 254px; border-color: #ffd44780; box-shadow: 0 16px 50px #00000035; background: radial-gradient(ellipse at 50% 0, #ffd44724, transparent 65%), linear-gradient(150deg, #301d0c, #1b0e07); }
.ranking-award.silver { order: 1; --rank-metal: #c6d1dd; --rank-glow: 198, 209, 221; }
.ranking-award.bronze { order: 3; --rank-metal: #d6a073; --rank-glow: 214, 160, 115; }
.ranking-medal { width: 74px; height: 74px; margin-bottom: 10px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--rank-metal); background: radial-gradient(circle at 35% 25%, rgba(var(--rank-glow), .1), transparent 75%); border: 1px solid rgba(var(--rank-glow), .2); }
.ranking-medal svg { width: 45px; height: 45px; filter: drop-shadow(0 4px 7px #00000070); }
.gold .ranking-medal { width: 86px; height: 86px; }
.gold .ranking-medal svg { width: 53px; height: 53px; }
.ranking-place { color: var(--rank-metal); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.ranking-name { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.ranking-name strong { min-width: 0; font-size: 19px; font-weight: 850; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-name > span { padding: 3px 7px; border: 1px solid #ffd44740; border-radius: 6px; color: var(--p-gold-bright); font-size: 9px; font-weight: 750; line-height: 1; background: #ffd4470b; white-space: nowrap; }
.ranking-score { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 10px; }
.ranking-score strong { color: var(--rank-metal); font-size: 30px; letter-spacing: -.7px; }
.ranking-score span { color: var(--p-muted); font-size: 12px; }
.ranking-unknown { font-size: 38px; font-weight: 750; }
.ranking-name strong { overflow-wrap: anywhere; }
.ranking-award.unoccupied .ranking-name strong { color: var(--p-muted); font-size: 13px; font-weight: 600; white-space: normal; }
.ranking-score strong { max-width: 100%; overflow-wrap: anywhere; }
.ranking-rules { margin-top: 20px; border-top: 1px solid #ffd44716; padding-top: 15px; color: var(--p-muted); font-size: 12px; line-height: 1.65; }
.ranking-rules summary { cursor: pointer; display: flex; align-items: center; gap: 7px; color: #d7c4b3; list-style: none; }
.ranking-rules summary::-webkit-details-marker { display: none; }
.ranking-rules summary:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 4px; border-radius: 4px; }
.ranking-rules summary svg { width: 15px; height: 15px; color: var(--p-gold); }
.ranking-rules summary > span { color: var(--p-gold); font-size: 18px; }
.ranking-rules[open] summary > span { transform: rotate(90deg); }
.ranking-rules p { max-width: 760px; margin: 9px 0 0; font-size: 12px; }
.ranking-empty { padding: 55px 20px; text-align: center; color: var(--p-muted); border: 1px solid #ffd44725; border-radius: 20px; background: #1b0e0777; margin-top: 24px; }
.ranking-empty > svg { width: 52px; height: 52px; margin: auto; color: var(--p-gold); }
.ranking-empty h3 { color: var(--p-cream); font-size: 20px; }
.ranking-loading { margin: 24px 0; color: var(--p-muted); }
@media (max-width: 700px) {
  .ranking-month-picker { padding: 15px 14px; gap: 12px; }
  .ranking-month-picker label { width: 100%; justify-content: space-between; }
  .ranking-my-position { margin-left: auto; padding-left: 0; border: 0; gap: 9px; }
  .ranking-my-position span { font-size: 11px; }
  .ranking-my-position strong { font-size: 21px; }
  .ranking-standings-head { margin: 23px 0 14px; gap: 10px; }
  .ranking-standings-head h3 { font-size: 16px; }
  .ranking-standings-head > span { font-size: 10px; }
  .ranking-podium { gap: 9px; }
  .ranking-award { min-height: 180px; padding: 16px 7px 14px; border-radius: 15px; }
  .ranking-award.gold { min-height: 206px; }
  .ranking-medal { width: 49px; height: 49px; margin-bottom: 8px; }
  .ranking-medal svg { width: 29px; height: 29px; }
  .gold .ranking-medal { width: 59px; height: 59px; }
  .gold .ranking-medal svg { width: 37px; height: 37px; }
  .ranking-place { font-size: 8px; letter-spacing: .04em; }
  .ranking-name { flex-direction: column; gap: 5px; }
  .ranking-name strong { max-width: 100%; font-size: 13px; }
  .ranking-name > span { font-size: 8px; padding: 3px 5px; }
  .ranking-award.unoccupied .ranking-name strong { font-size: 10px; }
  .ranking-unknown { font-size: 26px; }
  .ranking-score { margin-top: 8px; display: grid; gap: 0; }
  .ranking-score strong { font-size: 26px; line-height: 1.15; }
  .ranking-score span { font-size: 10px; }
}