/* Rank data lives in the themed dialogs; the landing page stays visual. */
#store .store-hero { display:block; max-width:1240px; margin-inline:auto; }
#store .rank-cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.5vw,22px); max-width:1120px; margin:34px auto 12px; padding:8px 0 56px; overflow:visible; }
#store .rank-card { --rank-accent-rgb:242,200,75; position:relative; min-width:0; min-height:190px; padding:20px; display:grid; place-items:center; border:1px solid rgba(var(--rank-accent-rgb),.22); border-radius:24px; color:inherit; background:radial-gradient(circle at 50% 42%,rgba(var(--rank-accent-rgb),.13),transparent 56%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); box-shadow:inset 0 1px 0 #ffffff0a,0 18px 42px #0005; appearance:none; cursor:pointer; isolation:isolate; -webkit-tap-highlight-color:transparent; transition:transform .36s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .36s ease,background-color .3s ease; }
#store .rank-cards.rank-motion-ready .rank-card { opacity:0; transform:translateY(28px) scale(.88); }
#store .rank-cards.rank-motion-ready .rank-card.is-visible { opacity:1; transform:none; animation:rank-icon-arrive .62s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--rank-order,0) * 75ms); }
#store .rank-card::before { content:""; position:absolute; inset:8px; z-index:-1; border-radius:18px; opacity:.35; background:radial-gradient(circle at 50% 45%,rgba(var(--rank-accent-rgb),.24),transparent 63%); transform:scale(.82); transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease; }
#store .rank-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.24) 48%,rgba(var(--rank-accent-rgb),.18) 53%,transparent 70%); background-size:240% 100%; background-position:145% 0; transition:opacity .2s ease,background-position .8s cubic-bezier(.16,1,.3,1); }
#store .rank-card img { width:min(155px,100%); height:145px; object-fit:contain; filter:drop-shadow(0 15px 18px #0008) drop-shadow(0 0 0 rgba(var(--rank-accent-rgb),0)); transform:translateZ(0); transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s ease; }
#store .rank-card:is(:hover,:focus-visible) { transform:translateY(-9px) scale(1.025); border-color:rgba(var(--rank-accent-rgb),.62); box-shadow:inset 0 1px 0 #ffffff12,0 24px 62px #0008,0 0 34px rgba(var(--rank-accent-rgb),.13); outline:none; }
#store .rank-card:is(:hover,:focus-visible)::before { transform:scale(1.08); opacity:.9; }
#store .rank-card:is(:hover,:focus-visible)::after { opacity:1; background-position:-75% 0; }
#store .rank-card:is(:hover,:focus-visible) img { transform:translateY(-5px) scale(1.075); filter:drop-shadow(0 18px 20px #0008) drop-shadow(0 0 14px rgba(var(--rank-accent-rgb),.32)); }
#store .rank-card:active { transform:translateY(-2px) scale(.965); transition-duration:.1s; }
#store .rank-card:focus-visible { outline:2px solid rgb(var(--rank-accent-rgb)); outline-offset:5px; }
#store .rank-icon-tooltip { position:absolute; left:50%; top:calc(100% + 12px); z-index:5; width:max-content; min-width:145px; padding:12px 16px; display:grid; gap:3px; border:1px solid rgba(var(--rank-accent-rgb),.42); border-radius:13px; color:#dfe7ed; background:rgba(8,13,19,.96); box-shadow:0 16px 38px #000b,0 0 22px rgba(var(--rank-accent-rgb),.1); opacity:0; pointer-events:none; transform:translate(-50%,-7px) scale(.94); transform-origin:50% 0; font-family:"Poppins",sans-serif; font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1); }
#store .rank-icon-tooltip::before { content:""; position:absolute; left:50%; bottom:100%; width:10px; height:10px; border-left:1px solid rgba(var(--rank-accent-rgb),.42); border-top:1px solid rgba(var(--rank-accent-rgb),.42); background:#080d13; transform:translate(-50%,5px) rotate(45deg); }
#store .rank-icon-tooltip strong { color:rgba(var(--rank-accent-rgb),.94); font-size:14px; font-weight:700; letter-spacing:-.015em; line-height:1.3; }
#store .rank-icon-tooltip small { color:#a7b3bf; font-size:10px; font-weight:400; line-height:1.5; }
#store .rank-icon-tooltip em { margin-top:3px; color:#ced8e0; font-size:10px; font-style:normal; font-weight:500; letter-spacing:.025em; line-height:1.45; text-transform:none; }
#store .rank-card:is(:hover,:focus-visible) .rank-icon-tooltip { opacity:1; transform:translate(-50%,0) scale(1); }
#store .rank-card.is-dialog-return-focus { transform:none; border-color:rgba(var(--rank-accent-rgb),.22); box-shadow:inset 0 1px 0 #ffffff0a,0 18px 42px #0005; outline:none; }
#store .rank-card.is-dialog-return-focus::before { transform:scale(.82); opacity:.35; }
#store .rank-card.is-dialog-return-focus::after { opacity:0; background-position:145% 0; }
#store .rank-card.is-dialog-return-focus img { transform:translateZ(0); filter:drop-shadow(0 15px 18px #0008) drop-shadow(0 0 0 rgba(var(--rank-accent-rgb),0)); }
#store .rank-card.is-dialog-return-focus .rank-icon-tooltip { opacity:0; transform:translate(-50%,-7px) scale(.94); }
@keyframes rank-icon-arrive { from { opacity:0; transform:translateY(28px) scale(.88); } to { opacity:1; transform:none; } }
@media(max-width:900px) { #store .rank-cards { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:680px; } }
@media(max-width:560px) {
  #store .rank-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-bottom:48px; }
  #store .rank-card { min-height:150px; padding:12px; border-radius:20px; }
  #store .rank-card img { height:120px; }
  #store .rank-card:last-child { grid-column:1 / -1; width:calc(50% - 6px); justify-self:center; }
  #store .rank-icon-tooltip { top:auto; bottom:10px; padding:7px 10px; min-width:118px; }
  #store .rank-icon-tooltip::before { display:none; }
}