/* Cosmetic Shop (shop.js) and the leaderboard (leaderboard.js). Builds on decks.css. */
.shopgrid { grid-template-columns: minmax(0, 1fr) 400px; }
.spanel { gap: 12px; }
.sbal { font: 600 13px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #8fa3b0; }
.sbal b { font-size: 24px; color: #E0BE72; letter-spacing: .02em; }
.sbal span { color: #728A9B; }
.sprev { width: min(260px, 70%); margin: 30px auto 0; }
.sname { font: 700 18px var(--hud, system-ui) !important; text-transform: uppercase; letter-spacing: .04em; text-align: center; margin: 0; }
.sfoils { display: grid; gap: 6px; }
.sfoil { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; cursor: pointer; color: #e8f2f8; font: inherit;
  background: rgba(14,24,34,.85); border: 1px solid rgba(114,220,255,.18); }
.sfoil:hover { border-color: rgba(114,220,255,.5); }
.sfoil.on { border-color: #18BFFF; box-shadow: inset 0 0 22px -12px #18BFFF; }
.sfoil b { display: block; font: 700 14px var(--hud, system-ui); text-transform: uppercase; letter-spacing: .06em; }
.sfoil small { display: block; font-size: 12px; color: #8fa3b0; }
.sfoil em { font: 700 12px var(--hud, system-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #E0BE72; white-space: nowrap; }
.sfoil.owned em { color: #8FD0B8; }
.sfoil.short em { color: #728A9B; }
.sw { width: 34px; height: 34px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); }
.sw-none { background: linear-gradient(135deg, #26323c, #0e1822); }
.sw-prism { border: 2px solid #a86bff; box-shadow: 0 0 8px -2px #a86bff; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff6b9a'/><stop offset='.25' stop-color='%23ffd36b'/><stop offset='.5' stop-color='%237dff9a'/><stop offset='.75' stop-color='%236bd9ff'/><stop offset='1' stop-color='%23a86bff'/></linearGradient></defs><path d='M17 3 L31 17 L17 31 L3 17Z' fill='url(%23g)'/><path d='M17 9 L25 17 L17 25 L9 17Z' fill='%23fff' opacity='.35'/></svg>") center / 100% 100% no-repeat, #0b1620; }
.sw-gold { border: 2px solid #ffd56a; box-shadow: 0 0 8px -2px #ffd56a; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><radialGradient id='g' cx='.35' cy='.3'><stop offset='0' stop-color='%23fff4c9'/><stop offset='.5' stop-color='%23ffd56a'/><stop offset='1' stop-color='%23a8781f'/></radialGradient></defs><circle cx='17' cy='17' r='11' fill='url(%23g)'/><circle cx='6' cy='6' r='2' fill='%23fff4c9'/><circle cx='28' cy='28' r='1.6' fill='%23ffd56a'/></svg>") center / 100% 100% no-repeat, #1a1206; }
.sw-obsidian { border: 2px solid #18BFFF; box-shadow: 0 0 8px -2px #18BFFF; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><path d='M3 19 L10 12 L14 18 L20 9 L24 16 L31 11' fill='none' stroke='%23bff4ff' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M3 27 L9 23 L15 27 L21 22 L31 26' fill='none' stroke='%2318BFFF' stroke-width='2' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat, #000; }
.sw-aurora { border: 2px solid #3dffb0; box-shadow: 0 0 8px -2px #3dffb0; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><filter id='b'><feGaussianBlur stdDeviation='1.6'/></filter></defs><g filter='url(%23b)'><ellipse cx='11' cy='15' rx='4.5' ry='13' fill='%233dffb0'/><ellipse cx='23' cy='13' rx='4.5' ry='12' fill='%23b06bff'/></g></svg>") center / 100% 100% no-repeat, #0c1b33; }
.sw-mist { border: 2px solid #9fe6ff; box-shadow: 0 0 8px -2px #9fe6ff; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><filter id='b'><feGaussianBlur stdDeviation='1.4'/></filter></defs><g filter='url(%23b)'><rect x='-2' y='18' width='38' height='9' rx='4.5' fill='%23f0fbff'/><ellipse cx='9' cy='12' rx='3' ry='6' fill='%23cfefff' opacity='.85'/><ellipse cx='24' cy='10' rx='3' ry='7' fill='%23cfefff' opacity='.85'/></g></svg>") center / 100% 100% no-repeat, #0a2a3f; }
.sw-shield { border: 2px solid #5FD3A8; box-shadow: 0 0 8px -2px #5FD3A8; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><g fill='none' stroke='%238ff0c8' stroke-width='1.8'><path d='M17 4 l7 4 v8 l-7 4 -7 -4 v-8Z'/><path d='M10 16 l7 4 v8 M24 16 l-7 4' /><path d='M3 8 l7 -4 M31 8 l-7 -4 M3 8 v8 l7 4 M31 8 v8 l-7 4 M3 24 l7 4 M31 24 l-7 4'/></g></svg>") center / 100% 100% no-repeat, #04140e; }
.sw-ribbon { border: 2px solid #ffd56a; box-shadow: 0 0 8px -2px #ffd56a; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><path d='M3 26 C8 4 20 4 18 16 C16 28 28 30 31 8' fill='none' stroke='%23ffd56a' stroke-width='4' stroke-linecap='round'/><path d='M3 26 C8 4 20 4 18 16' fill='none' stroke='%23fff4c9' stroke-width='1.5' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat, #2a1c08; }
.sw-glitch { border: 2px solid #FF7A59; box-shadow: 0 0 8px -2px #FF7A59; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><rect x='0' y='7' width='26' height='5' fill='%23ff3c5a'/><rect x='8' y='15' width='26' height='4' fill='%233cdcff'/><rect x='2' y='23' width='22' height='5' fill='%23FF7A59'/><rect x='26' y='24' width='4' height='3' fill='%23fff'/></svg>") center / 100% 100% no-repeat, #1a0703; }
.sw-mooncrown { border: 2px solid #ffd56a; box-shadow: 0 0 8px -2px #ffd56a; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><path d='M8 17 A11 11 0 1 0 27 6 A9 9 0 1 1 8 17Z' fill='%23fff4d6'/><circle cx='26' cy='24' r='1.4' fill='%23ffd56a'/><circle cx='9' cy='7' r='1.2' fill='%23f2f8ff'/></svg>") center / 100% 100% no-repeat, #0b1a33; }
.sw-panther { border: 2px solid #ffaa3c; box-shadow: 0 0 8px -2px #ffaa3c; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><g transform='translate(1 9) scale(.32)'><path d='M3 20 Q-1 9 7 6 Q5 13 11 17 L21 15 Q40 9 61 13 L71 11 Q75 4 79 6 L81 3 L83 7 Q91 8 96 14 Q95 19 87 19 L81 21 L79 32 L75 32 L74 23 L64 23 L62 32 L58 32 L57 23 L37 23 L32 32 L28 32 L28 22 L22 21 L18 32 L14 32 L16 21 Q8 21 3 20 Z' fill='%23000' stroke='%23e8f2f8' stroke-width='2.5'/><circle cx='88' cy='12' r='4' fill='%23ffb347'/></g></svg>") center / 100% 100% no-repeat, #05070A; }
#savatar.on { border-color: #8FD0B8 !important; color: #8FD0B8 !important; }
.dcell .sown { position: absolute; left: 6px; top: 6px; z-index: 6; font: 700 10px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; background: rgba(3,7,11,.85); color: #ffd56a; border: 1px solid rgba(255,213,106,.5); }
.dcell.sel .holo { outline: 2px solid #18BFFF; outline-offset: 3px; }
@media (max-width: 900px) { .shopgrid { grid-template-columns: 1fr; } .spanel { order: -1; } }

/* shop tabs and the account-wide looks (avatar frames, card backs) */
.stabs { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.stab { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 12px; cursor: pointer; white-space: nowrap; color: #cfeefc; font: 700 13px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(3,7,11,.86); border: 1px solid rgba(114,220,255,.25); backdrop-filter: blur(4px); }
.stab[aria-selected="true"] { border-color: #18BFFF; background: rgba(24,191,255,.18); color: #fff; box-shadow: inset 0 -2px 0 #18BFFF; }
.stab + .stab { margin: 0; }
.shopgrid, .lkgrid { margin-top: 12px; }
.lkgrid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.lkgrid > * { min-width: 0; }
.lkstage { position: relative; min-height: 340px; display: grid; place-items: center; align-content: center; gap: 22px; padding: 30px 16px; background: radial-gradient(60% 60% at 50% 45%, rgba(24,191,255,.12), rgba(3,7,11,.86) 70%); border: 1px solid var(--edge2, rgba(114,220,255,.2)); backdrop-filter: blur(6px); overflow: hidden; }
.lkav { padding: 34px; }
.lkchip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(14,24,34,.9); border: 1px solid rgba(114,220,255,.25); max-width: 100%; }
.lkchip b { font: 700 14px var(--hud, system-ui); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkchip span { font-size: 12px; color: #8fa3b0; white-space: nowrap; }
/* card backs: three in a fan, laid out in the flow (a back's own rules set position: relative), caption below */
.lkfan { display: flex; justify-content: center; align-items: center; padding: 12px 0 6px; max-width: 100%; }
.lkfan .lkb { flex: none; width: 140px; margin: 0 -34px; box-shadow: 0 18px 40px -14px #000; }
.lkfan .l1 { transform: rotate(-12deg) scale(.84); opacity: .8; }
.lkfan .l3 { transform: rotate(12deg) scale(.84); opacity: .8; }
.lkfan .l2 { z-index: 1; }
.lkcap { position: relative; z-index: 2; margin: 0; text-align: center; color: #8fa3b0; font-size: 13px; }
.lkb:not([class*="back-"]) { background: radial-gradient(70% 55% at 50% 45%, #10314a, #060a10 75%); border: 1px solid #1d3242; }
.sw.lksw { display: grid; place-items: center; border: 0; background: none; overflow: visible; }
.lksw .lkmini { width: 24px; border-radius: 3px; }
.lkpanel { position: relative; top: 0; }
/* room for the fixed music player, so the last rows and the preview scroll clear of it */
main.dwrap { padding-bottom: 130px; }
@media (max-width: 900px) {
  .lkgrid { grid-template-columns: minmax(0, 1fr); } .lkgrid .lkpanel { order: 0; }
  .lkstage { min-height: 0; padding: 14px 12px; gap: 10px; } .lkav { padding: 22px; }
  .lkfan .lkb { width: 110px; margin: 0 -26px; }
}
/* tall portrait phones: the preview pinned under the header; shorter ones scroll it into view on each try-on (shop.js) */
@media (max-width: 900px) and (min-height: 700px) {
  .lkstage { position: sticky; top: 54px; z-index: 3; padding: 8px 12px 10px; gap: 6px; background: radial-gradient(60% 60% at 50% 45%, rgba(24,191,255,.14), rgba(3,7,11,.97) 70%); }
  .lkav { padding: 16px; } .lkav .avatar { --s: 96px !important; }
  .lkfan { padding: 6px 0 2px; } .lkfan .lkb { width: 84px; margin: 0 -20px; }
  .lkchip { padding: 4px 10px; } .lkcap { font-size: 12px; }
}
/* sideways phones: preview and list side by side, the preview pinned */
@media (orientation: landscape) and (max-height: 560px) {
  .lkgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; } .lkgrid .lkpanel { order: 0; }
  .lkstage { position: sticky; top: 64px; padding: 8px; gap: 6px; } .lkav { padding: 14px; } .lkav .avatar { --s: 88px !important; }
  .lkfan .lkb { width: 76px; margin: 0 -18px; } .lkcap { font-size: 12px; }
  .sprev { width: 150px; }
}
@media (max-width: 360px) { .stab { font-size: 12px; letter-spacing: .02em; padding: 8px 5px; } }
@media (pointer: coarse) { .sfoil { min-height: 44px; } .stab { min-height: 44px; } }

/* leaderboard */
.lbtabs { display: flex; gap: 8px; margin-top: 18px; }
.lbtabs .dtab { padding: 8px 16px; font-size: 14px; max-width: none; }
.lbopt { margin-top: 12px; padding: 14px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: rgba(3,7,11,.88); border: 1px solid rgba(114,220,255,.3); }
.lbopt p { margin: 0; flex: 1 1 300px; color: #c9d8e1; }
.lb { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.lb li { display: grid; grid-template-columns: 44px 40px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; background: rgba(3,7,11,.86); border: 1px solid rgba(114,220,255,.14); backdrop-filter: blur(4px); }
.lb li.you { border-color: #18BFFF; box-shadow: inset 0 0 30px -14px #18BFFF; }
.lb .rk { font: 700 22px var(--hud, system-ui); color: #8fa3b0; text-align: center; }
.lb li.top1 .rk { color: #ffd56a; text-shadow: 0 0 12px #ffd56a; } .lb li.top2 .rk { color: #e8f2f8; } .lb li.top3 .rk { color: #e0a072; }
.lb li.top1 { border-color: rgba(255,213,106,.5); }
.lb .who b { display: block; font: 700 17px var(--hud, system-ui); letter-spacing: .03em; }
.lb .who small { color: #8fa3b0; font-size: 12.5px; }
.lb .sc { font: 700 20px var(--hud, system-ui); color: #9fe6ff; text-align: right; }
.lb .sc small { font-size: 12px; color: #728A9B; margin-left: 4px; letter-spacing: .1em; }
.lb li.gap, .lb li.lbwait { display: block; text-align: center; color: #8fa3b0; }
.lbfoot { margin-top: 10px; }
@media (max-width: 520px) { .lb li { grid-template-columns: 30px 36px 1fr auto; gap: 8px; padding: 8px; } .lb .rk { font-size: 17px; } .lb .sc { font-size: 16px; } }
/* short portrait phones: a smaller preview that is not pinned, so it never covers list rows */
@media (max-width: 900px) and (max-height: 699px) and (orientation: portrait) {
  .lkav { padding: 16px; } .lkav .avatar { --s: 96px !important; }
  .lkfan { padding: 6px 0 2px; } .lkfan .lkb { width: 84px; margin: 0 -20px; }
}
/* the message toast next to the tapped button (shop.js toast) */
.stoast { position: fixed; z-index: 60; padding: 10px 12px; font: 600 14px/1.35 var(--sans, system-ui); color: #e8f2f8; background: rgba(6,16,26,.96); border: 1px solid rgba(114,220,255,.45); border-left: 3px solid #8FD0B8; box-shadow: 0 10px 30px rgba(0,0,0,.55); pointer-events: none; animation: stoastin .22s ease-out; }
.stoast.bad { border-left-color: #FF7A59; color: #ffd9cf; }
@keyframes stoastin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stoast { animation: none; } }
/* the Ranked tab: the season prize, on a panel so it reads over the hangar */
.lbprize { margin: 12px 0 0; padding: 10px 14px; background: rgba(3,7,11,.88); border: 1px solid rgba(255,213,106,.35); border-radius: 10px; color: #e6eef3; }
.lbfoot { background: rgba(3,7,11,.78); padding: 8px 12px; border-radius: 8px; }
.lb .who .honour { margin-left: 6px; vertical-align: middle; }