.ranking-weekly-countdown {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .85fr) auto minmax(210px, .8fr);
  align-items: center;
  gap: 22px;
  min-height: 96px;
  margin: 0 17px 12px;
  padding: 15px 20px;
  overflow: hidden;
  border: 1px solid rgba(163, 230, 53, .3);
  border-radius: 14px 4px 14px 4px;
  background:
    linear-gradient(110deg, rgba(39, 61, 15, .36), rgba(5, 17, 25, .96) 38%, rgba(4, 12, 22, .98)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(163, 230, 53, .025) 35px);
  box-shadow: inset 4px 0 #a3e635, inset 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.22);
}

.ranking-weekly-countdown::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 160px;
  left: 27%;
  top: -95px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(163,230,53,.14), transparent 68%);
}

.ranking-weekly-countdown-copy,
.ranking-weekly-countdown-status { position: relative; z-index: 1; min-width: 0; }
.ranking-weekly-countdown-copy { display: flex; flex-direction: column; gap: 6px; }
.ranking-weekly-countdown-kicker { color: #a3e635; font: 700 7px/1 'Press Start 2P', monospace; letter-spacing: .16em; }
.ranking-weekly-countdown-copy > strong { color: #f8fafc; font-size: 14px; }
.ranking-weekly-countdown-copy > small { color: #718093; font-size: 9px; line-height: 1.45; }

.ranking-weekly-countdown-clock {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(250,204,21,.2);
  border-radius: 11px 3px 11px 3px;
  background: rgba(1,7,13,.68);
  box-shadow: inset 0 0 24px rgba(250,204,21,.035);
}

.ranking-weekly-time-unit { display: grid; justify-items: center; gap: 5px; min-width: 48px; }
.ranking-weekly-time-unit b { color: #fde047; font: 700 17px/1 'Press Start 2P', monospace; text-shadow: 0 0 13px rgba(250,204,21,.35); }
.ranking-weekly-time-unit em { color: #617080; font: normal 700 6px/1 'Press Start 2P', monospace; letter-spacing: .08em; }
.ranking-weekly-countdown-clock > i { margin-top: 1px; color: #64748b; font: normal 700 16px/1 'Press Start 2P', monospace; animation: rankingWeeklyColon 1s steps(1) infinite; }
@keyframes rankingWeeklyColon { 50% { opacity: .25; } }

.ranking-weekly-countdown-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.ranking-weekly-countdown-status > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(34,197,94,.24); border-radius: 999px; color: #86efac; background: rgba(20,83,45,.18); font: 700 7px/1 'Press Start 2P', monospace; }
.ranking-weekly-countdown-status > span i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 9px #22c55e; animation: rankingWeeklyLive 1.8s ease-in-out infinite; }
.ranking-weekly-countdown-status > small { color: #718093; font-size: 8px; line-height: 1.45; }
.ranking-weekly-countdown-status > small strong { color: #cbd5e1; font-weight: 700; }
@keyframes rankingWeeklyLive { 50% { opacity: .4; transform: scale(.75); } }

.ranking-weekly-countdown.is-closing { border-color: rgba(248,113,113,.5); box-shadow: inset 4px 0 #f87171, 0 0 24px rgba(239,68,68,.11); }
.ranking-weekly-countdown.is-closing .ranking-weekly-time-unit b { color: #fca5a5; text-shadow: 0 0 13px rgba(248,113,113,.4); }
.ranking-weekly-countdown.is-closing .ranking-weekly-countdown-status > span { border-color: rgba(248,113,113,.3); color: #fecaca; background: rgba(127,29,29,.2); }
.ranking-weekly-countdown.is-closing .ranking-weekly-countdown-status > span i { background:#f87171; box-shadow:0 0 9px #f87171; }
.ranking-weekly-countdown.is-distributing .ranking-weekly-countdown-clock { animation: rankingWeeklyDistribute .8s ease-in-out infinite alternate; }
@keyframes rankingWeeklyDistribute { to { border-color:rgba(250,204,21,.7); filter:brightness(1.18); } }

.ranking-profile-reward-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 9px;
}
.ranking-profile-reward-guide article {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--reward-color) 42%, transparent);
  border-radius: 9px 3px 9px 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--reward-color) 12%, rgba(3,13,20,.94)), rgba(3,13,20,.92));
}
.ranking-profile-reward-guide strong { color: var(--reward-color); font-size: 9px; }
.ranking-profile-reward-guide span { color: #94a3b8; font-size: 8px; line-height: 1.45; }
.ranking-profile-reward-guide .mythic { --reward-color: #facc15; }
.ranking-profile-reward-guide .ascendant { --reward-color: #c084fc; }
.ranking-profile-reward-guide .competitor { --reward-color: #38bdf8; }

#rankingSummaryBar { grid-template-columns: repeat(4, minmax(135px, 170px)) 1fr; }
#rankingTabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ranking-weekly-exp-grid { grid-template-columns: 64px minmax(180px, 1fr) minmax(150px, .7fr) minmax(180px, .8fr); }
.ranking-weekly-exp-value { display: flex; flex-direction: column; gap: 5px; }
.ranking-weekly-exp-value strong { color: #a3e635; font-family: 'Press Start 2P', monospace; font-size: 11px; }
.ranking-weekly-exp-value small { color: #64748b; font-size: 8px; letter-spacing: .08em; }
.ranking-weekly-reward { display: flex; align-items: center; }
.ranking-weekly-prize { font-size: 10px; }
.ranking-weekly-prize.legendary { color: #facc15; text-shadow: 0 0 10px rgba(250,204,21,.25); }
.ranking-weekly-prize.epic { color: #c084fc; }
.ranking-weekly-no-prize { color: #64748b; font-size: 9px; }

@media (max-width: 900px) {
  .ranking-weekly-countdown { grid-template-columns: 1fr auto; gap: 14px; }
  .ranking-weekly-countdown-status { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

@media (max-width: 760px) {
  #rankingSummaryBar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-row.ranking-weekly-exp-grid { grid-template-columns: 52px minmax(0, 1fr); }
  .ranking-weekly-exp-value,
  .ranking-weekly-reward { grid-column: 2; }
}

@media (max-width: 620px) {
  .ranking-weekly-countdown { grid-template-columns: 1fr; padding: 14px; }
  .ranking-weekly-countdown-clock { justify-content: space-between; gap: 3px; }
  .ranking-weekly-time-unit { min-width: 42px; }
  .ranking-weekly-time-unit b { font-size: 14px; }
  .ranking-weekly-countdown-status { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .ranking-profile-reward-guide { grid-template-columns: 1fr; }
}