.store-header-nav:has(.store-ranking) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.store-header-nav > .store-ranking { justify-self: center; }
.store-header-nav:has(.store-ranking) > ul { justify-self: end; }
.store-navbar-search { width: clamp(180px, 32vw, 410px); }
@media (min-width: 768px) {
  .store-mode-navbar:has(.store-navbar-search) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .store-mode-navbar > .store-mode-current { justify-self: start; white-space: nowrap; }
  .store-mode-navbar > .store-mode-button { justify-self: end; }
}
.store-ranking {
  --rank-accent: hsl(var(--primary));
  --rank-glow: hsl(var(--primary) / .32);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 620px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid hsl(var(--primary) / .18);
  border-radius: 15px;
  background: radial-gradient(ellipse at 35% 0%, hsl(var(--primary) / .12), transparent 65%), linear-gradient(105deg, #080d0bcc, #0b100ee6);
  box-shadow: inset 0 1px 0 hsl(var(--primary) / .1);
  isolation: isolate;
}
.store-ranking-title { flex-shrink: 0; font-size: 10px; font-weight: 800; line-height: 1.1; letter-spacing: -.2px; }
.store-ranking-title > div { display: flex; align-items: center; gap: 4px; }
.store-ranking-title svg { width: 14px; height: 14px; color: var(--rank-accent); fill: hsl(var(--primary) / .2); }
.store-ranking-title strong { display: block; color: var(--rank-accent); }
.store-ranking-title::after { content: ''; display: block; width: 35px; height: 1px; margin-top: 4px; background: linear-gradient(90deg, var(--rank-accent), transparent); }
.store-ranking-list { display: flex; align-items: center; gap: 8px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.store-ranking-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 32px;
  padding: 3px 7px;
  border: 1px solid #ffffff20;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff05, #0000005c);
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.store-ranking-card--1 {
  min-height: 38px;
  border-color: var(--rank-accent);
  background: radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / .18), transparent 85%), #080d0beb;
  box-shadow: 0 0 8px var(--rank-glow), inset 0 0 6px hsl(var(--primary) / .1);
  animation: ranking-champion-glow 3s ease-in-out infinite;
}
.store-ranking-card--1::after { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; border-radius: 50%; background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 6px var(--rank-accent); pointer-events: none; }
.store-ranking-card--3 { border-color: #a9693e40; }
.store-ranking-medal, .store-ranking-avatar { display: block; flex-shrink: 0; background-repeat: no-repeat; background-size: contain; background-position: center; }
.store-ranking-medal { width: 22px; height: 28px; margin-top: -3px; }
.store-ranking-card--1 .store-ranking-medal { width: 27px; height: 32px; }
.store-ranking-avatar { width: 23px; height: 23px; }
.store-ranking-card--1 .store-ranking-avatar { width: 26px; height: 26px; }
.store-ranking-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 85px; }
.store-ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: #f6f6f6; line-height: 1.15; }
.store-ranking-amount { color: var(--rank-accent); font-size: 11px; font-weight: 800; white-space: nowrap; line-height: 1.15; }
@keyframes ranking-champion-glow {
  0%, 100% { box-shadow: 0 0 6px var(--rank-glow), inset 0 0 5px hsl(var(--primary) / .1); }
  50% { box-shadow: 0 0 13px var(--rank-glow), inset 0 0 9px hsl(var(--primary) / .16); }
}
@keyframes ranking-card-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (hover: hover) and (pointer: fine) {
  .store-ranking-card:hover { animation: ranking-card-breathe 1.8s ease-in-out infinite; }
  .store-ranking-card--1:hover { animation: ranking-champion-glow 3s ease-in-out infinite, ranking-card-breathe 1.8s ease-in-out infinite; }
}
@media (max-width: 1100px) {
  .store-ranking { gap: 6px; padding: 3px 6px; }
  .store-ranking-title, .store-ranking-avatar { display: none; }
  .store-ranking-list { gap: 5px; }
  .store-ranking-card { padding: 3px 5px; gap: 3px; }
  .store-ranking-info { max-width: 55px; }
  .store-ranking-name { font-size: 11px; }
  .store-ranking-amount { font-size: 10px; }
  .store-ranking-medal { width: 18px; height: 24px; }
  .store-ranking-card--1 .store-ranking-medal { width: 22px; height: 28px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .store-header-nav:has(.store-ranking) { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  .store-header-nav:has(.store-ranking) { grid-template-columns: minmax(0, 1fr) auto; }
  .store-header-nav:has(.store-ranking) > ul { grid-column: 2; grid-row: 1; }
  .store-header-nav > .store-ranking { grid-column: 1 / -1; grid-row: 2; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .store-ranking-card--1, .store-ranking-card:hover { animation: none; }
}