/* Rally — coins and the shop (shop.js, DESIGN.md §10). Tokens: tokens.css.
   A panel like the others, calm and solid: the cards are plain plates of the arena with the item lit
   on a slab of table. The juice goes on the moment of buying, not on the shelves. Gold means coins. */

/* ================================================================== coins */

.coins { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--line); white-space: nowrap; }
.coins .coin { flex: none; width: 1.3em; height: 1.3em; }
.coins.short b { color: var(--line-3); }

/* The title's shop row: the balance where other rows say who they're against. */
.tile-coins .coins { font-size: 12px; }
.mode-shop[hidden], .mode-group-shop[hidden], .title-shop[hidden], .panel-foot .res-shop[hidden] { display: none; }
/* Too short for one more row (a browser window under 560 tall): the way in moves to the top bar. */
.title-shop { display: none; align-items: center; gap: 10px; }
.title-shop .coins { font-size: 12px; }
@media (max-height: 559px) and (min-width: 561px) {
  .title-shop:not([hidden]) { display: inline-flex; }
  .mode-group-shop, .mode-shop { display: none; }
}

/* ================================================================== the shop */

.panel-shop { width: min(1100px, calc(100vw - 48px)); --pad-b: 28px; padding-bottom: var(--pad-b); }
/* The arena rests while shopping; its GL canvas is still available to the superhit preview. */
body.in-shop #gl { visibility: hidden; }
body.in-shop { background: radial-gradient(ellipse at 90% 95%, #381522, var(--arena) 70%); }
.shop-browse { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.shop-browse[hidden] { display: none; }
.shop-browse input { flex: 1 1 180px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: var(--r-1); background: var(--arena); color: var(--line); font: inherit; font-size: 14px; }
.shop-browse input::placeholder { color: var(--line-3); }
.shop-browse input:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.shop-filters { display: flex; gap: 4px; }
.shop-filters button { min-height: 38px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--r-1); background: var(--arena); color: var(--line-2); font: 600 13px var(--sans); cursor: pointer; }
.shop-filters button[aria-pressed='true'] { background: var(--court-deep); border-color: var(--line-2); color: var(--line); }
.shop-filters button:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.shop-empty { grid-column: 1 / -1; padding: 24px 0; color: var(--line-2); }
.shop-empty button { display: block; margin-top: 12px; }
.shop-head { display: inline-flex; align-items: center; gap: 26px; }
.shop-coins .coins { font-size: 17px; }
.shop-coins.bump .coins { animation: coin-bump 520ms var(--ease-snap); }
.shop-coins.drop .coins { animation: coin-drop 420ms var(--ease-out); }
@keyframes coin-bump { 30% { transform: scale(1.18); color: var(--coin-hi); } }
@keyframes coin-drop { 30% { transform: translateY(2px); color: var(--coin); } }

.shop-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.shop-top .panel-title { margin-bottom: 0; }

/* Today's deal: a broadcast plate, leaning, the item's rarity down its edge. */
.shop-deal {
  --rc: var(--rare-common);
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-width: 0; max-width: 460px; padding: 6px 26px 6px 22px;
  background: var(--arena-3); color: var(--line); border: 0; text-align: left;
  clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);
  box-shadow: inset 5px 0 0 var(--rc);
  transition: background-color 160ms, transform 160ms var(--ease-out);
}
.shop-deal[hidden] { display: none; }
.shop-deal:hover, .shop-deal:focus-visible { outline: none; background: var(--court-deep); transform: translateX(3px); }
.sdl-art { display: block; width: 76px; aspect-ratio: 16 / 10; border-radius: var(--r-1); overflow: hidden; background: var(--court-deep); }
.sdl-art svg, .sdl-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sdl-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sdl-kick { color: var(--coin); white-space: nowrap; }
.sdl-left { color: var(--line-3); font-size: 9.5px; }
.sdl-name { font-size: 16px; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdl-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sdl-price s, .sd-was { font-family: var(--mono); font-size: 11.5px; color: var(--line-3); }
.sdl-price .coins { font-size: 15px; color: var(--coin-hi); }
.sdl-yours { color: var(--ok); }

/* Tabs: the slots, then the sets, and how to earn off to the right. */
/* One row, always: on a narrow panel it scrolls sideways rather than wrapping How to earn underneath. */
.shop-tabs { flex: none; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 4px; border-radius: var(--r-2); background: var(--arena); box-shadow: inset 0 0 0 1px var(--hair); }
.shop-tabs button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  background: none; border: 0; border-radius: var(--r-1); color: var(--line-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background-color 140ms var(--ease-out), color 140ms;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs button[hidden] { display: none; }
.shop-tabs button:hover { background: var(--arena-3); color: var(--line); }
.shop-tabs button[aria-selected='true'] { background: var(--line); color: var(--arena); }
.shop-tabs .st-earn { margin-left: auto; }
@media (max-width: 1000px) {
  .shop-tabs button { padding: 0 11px; }
}

.shop-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 22px; align-items: start; margin-top: 18px; }
.shop-body[data-view='slot'] > .shop-grid { grid-column: 1; }
.shop-body[data-view='slot'] > .shop-detail { grid-column: 2; grid-row: 1 / span 2; }
.shop-body:not([data-view='slot']) { grid-template-columns: minmax(0, 1fr); }
.shop-body [hidden] { display: none !important; }

/* ---------------------------------------------------------------- cards */

/* Under Style: a chip for each thing to wear, over the cards (the detail spans both rows beside them). */
.shop-body:has(> .shop-sub:not([hidden])) > .shop-sub { grid-column: 1; grid-row: 1; }
.shop-body:has(> .shop-sub:not([hidden])) > .shop-grid { grid-column: 1; grid-row: 2; margin-top: -10px; }
.shop-body:has(> .shop-sub:not([hidden])) > .shop-detail { grid-column: 2; grid-row: 1 / span 2; }
.shop-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-sub button {
  height: 30px; padding: 0 13px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: 0.02em; color: var(--line-2); background: var(--arena-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.shop-sub button:hover { color: var(--line); background: var(--arena-3); }
.shop-sub button[aria-pressed='true'] { color: var(--arena); background: var(--line); box-shadow: none; }
.shop-sub button.is-worn::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--coin); vertical-align: 1px; }
.shop-sub button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ball); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; align-content: start; }
.shop-card, .ss-item {
  --rc: var(--rare-common);
  position: relative; display: flex; flex-direction: column; gap: 7px; padding: 0 0 11px;
  background: var(--arena-3); color: var(--line); border: 0; border-radius: var(--r-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hair); text-align: left;
  transition: transform 200ms var(--ease-out), background-color 160ms;
}
/* The rarity: a strip of its ink across the top, like a plate's colour bar. */
.shop-card::before, .ss-item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc); z-index: 1; }
.sc-art {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(110% 95% at 50% 38%, color-mix(in srgb, var(--rc) 20%, var(--court-deep)) 0%, var(--court-deep) 58%, #071a48 100%);
}
.sc-art svg, .sc-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.sc-name { padding: 0 10px; font-size: 14.5px; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 9px 0 10px; }
.sc-foot .label { font-size: 12px; }
/* (the price always shows whole: the rarity gives way first) */
.sc-rarity { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rc); }
.sc-foot > :last-child { flex: none; }
.sc-state { color: var(--line-3); }
.shop-card.is-worn .sc-state { color: var(--line); }
.shop-card.is-worn .sc-state::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 0; }
.shop-card .coins { font-size: 11.5px; }
.shop-card:hover { background: var(--court-deep); transform: translateY(-2px); }
.shop-card:hover .sc-art > * { transform: scale(1.04); }
.shop-card[aria-selected='true'] { background: var(--court-deep); box-shadow: inset 0 0 0 2px var(--line), var(--lift-2); transform: translateY(-2px); }
.shop-card:focus-visible, .ss-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ball), var(--lift-2); }
.shop-card[data-rarity='legendary'] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coin) 45%, transparent); }
.shop-card[data-rarity='legendary'][aria-selected='true'] { box-shadow: inset 0 0 0 2px var(--coin), var(--lift-2); }
/* Mythic (the exclusives, exclusive.js): edged in crimson through violet to electric blue, and the
   rarity strip shimmers with it. Seen locked by most players, so the card has to sell itself with no
   price on it. (The shimmer moves by transform only, so it never repaints the card: the shop stays
   cheap with these on screen.) */
.shop-set { position: relative; }
.shop-card[data-rarity='mythic']::after, .shop-set[data-rarity='mythic']::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from 200deg, #FF3D6E, #B46CFF, #2E8BFF, #5FF2FF, #B46CFF, #FF3D6E);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.shop-card[data-rarity='mythic']::before { right: auto; width: 300%; background: linear-gradient(90deg, #FF3D6E, #B46CFF, #2E8BFF, #5FF2FF, #FF3D6E, #B46CFF, #2E8BFF, #5FF2FF, #FF3D6E); animation: myth-strip 3.2s linear infinite; will-change: transform; }
.shop-card[data-rarity='mythic'] .sc-rarity { background: linear-gradient(90deg, #FF6E8F, #C9A0FF, #6FB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes myth-strip { to { transform: translateX(-50%); } }
/* Locked: the art greyed and dimmed behind its padlock and the line that says how to get it. */
.shop-card.is-locked .sc-art > * { filter: grayscale(0.85) brightness(0.55); }
.shop-card.is-locked .sc-name { color: var(--line-2); }
.sc-lock {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 10; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; text-align: center;
  background: radial-gradient(80% 70% at 50% 50%, rgba(6, 9, 20, 0.55), rgba(6, 9, 20, 0.15));
  color: var(--line); pointer-events: none;
}
.sc-lock .lock, .ss-lock .lock { width: 18px; height: 18px; flex: none; color: #FF6E8F; filter: drop-shadow(0 0 6px rgba(255, 61, 110, 0.6)); }
.sc-lock > span, .ss-lock > span { display: flex; flex-direction: column; gap: 1px; }
.sc-lock b, .ss-lock b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.sc-lock i, .ss-lock i { font-style: normal; font-size: 10px; line-height: 1.2; color: var(--line-2); }
/* An exclusive set's lock, where its buy button would be: padlock left, its two lines beside it, no
   wider than a buy button, so the set's items keep their room. */
.ss-lock { display: flex; align-items: center; gap: 10px; max-width: 210px; padding: 6px 4px; text-align: left; color: var(--line); }
.ss-lock b { font-size: 13px; }
.ss-lock i { font-size: 12px; margin-top: 2px; }
.sc-state .lock, .sd-locked .lock { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }
.btn.sd-locked { display: inline-flex; align-items: center; gap: 2px; text-transform: none; font-size: 13px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.2; }
.btn.sd-locked .lock { width: 14px; height: 14px; margin-right: 8px; flex: none; color: #FF6E8F; }
.shop-detail.is-locked .sd-stage { filter: saturate(0.75); }
/* Coming soon (exclusive.js 'soon'): on show, so the art keeps its colour; a gold ribbon across the
   top of the card says it isn't on sale yet, a sheen running along it. */
.shop-card.is-soon .sc-art > * { filter: none; }
.shop-card.is-soon .sc-name { color: var(--line); }
.sc-lock.is-soon {
  top: 8px; bottom: auto; aspect-ratio: auto; flex-direction: row; gap: 6px; padding: 4px 10px 3px; left: 50%; right: auto; transform: translateX(-50%);
  background: linear-gradient(100deg, rgba(40, 22, 2, 0.88), rgba(70, 40, 4, 0.92) 45%, rgba(40, 22, 2, 0.88));
  border: 1px solid rgba(245, 192, 74, 0.7); border-radius: 999px; overflow: hidden; white-space: nowrap;
  box-shadow: 0 0 14px rgba(245, 192, 74, 0.35);
}
.sc-lock.is-soon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 200, 0.45) 50%, transparent 70%);
  transform: translateX(-100%); animation: soon-sheen 2.8s ease-in-out infinite;
}
@keyframes soon-sheen { 60%, 100% { transform: translateX(100%); } }
.sc-lock.is-soon .lock, .ss-lock.is-soon .lock, .shop-detail.is-soon .sd-locked .lock { color: #F5C04A; filter: drop-shadow(0 0 6px rgba(245, 192, 74, 0.6)); }
.sc-lock.is-soon b { color: #FFE7A6; font-size: 10px; }
.ss-lock.is-soon b { color: #FFE7A6; }
.shop-detail.is-soon .sd-stage { filter: none; }
.shop-set.is-soon .sc-art > * { filter: none; }
@media (prefers-reduced-motion: reduce) { .sc-lock.is-soon::after { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .shop-card[data-rarity='mythic']::before { animation: none; }
}
.sc-deal {
  position: absolute; top: 9px; right: 8px; z-index: 1; padding: 3px 9px 2px;
  background: var(--coin); color: var(--arena);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.shop-card.just-bought { animation: card-got 700ms var(--ease-snap); }
@keyframes card-got { 25% { transform: translateY(-6px) scale(1.04); box-shadow: inset 0 0 0 2px var(--coin), 0 0 0 6px color-mix(in srgb, var(--coin) 25%, transparent); } }

/* ---------------------------------------------------------------- the chosen item */

.shop-detail { --rc: var(--rare-common); position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sd-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-3);
  background:
    radial-gradient(90% 80% at 50% 42%, color-mix(in srgb, var(--rc) 26%, var(--court)) 0%, var(--court-deep) 62%, #051334 100%);
  box-shadow: inset 0 0 0 1px var(--hair-strong), var(--lift-2);
}
/* the table's white edge line, low across the stage: the item sits in the hall */
.sd-stage::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 13%; height: 2px; background: var(--line); opacity: 0.18; }
.sd-art, .sd-live { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sd-art svg, .sd-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-stage[data-slot='superhit'] .sd-art svg { object-fit: cover; }
.sd-live { opacity: 0; transition: opacity 240ms; }
.sd-stage[data-live='item'] .sd-live[data-for='item'], .sd-stage[data-live='superhit'] .sd-live[data-for='superhit'] { opacity: 1; }
.sd-stage[data-live='item'] .sd-art, .sd-stage[data-live='superhit'] .sd-art { opacity: 0; }
.sd-rarity {
  position: absolute; left: 12px; top: 12px; padding: 5px 12px 4px;
  background: var(--rc); color: var(--arena); font-weight: 600;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.sd-sound {
  position: absolute; right: 12px; bottom: 12px; display: none; align-items: center; gap: 8px; padding: 6px 12px 5px;
  background: rgba(6, 9, 20, 0.72); color: var(--line); border: 0; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--hair-strong);
}
.sd-sound::before { content: ''; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.sd-sound:hover { background: var(--arena-3); }
.sd-stage[data-slot='superhit'] .sd-sound { display: inline-flex; }
/* Bought: "Yours" slammed in gold over the stage, a ring of it going out. */
.sd-stamp {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -0.55em; text-align: center; pointer-events: none;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 58px; line-height: 1.1; text-transform: uppercase;
  color: var(--coin); text-shadow: 0 3px 0 var(--coin-deep), 0 10px 30px rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.sd-stage::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; box-shadow: 0 0 0 4px var(--coin); opacity: 0; pointer-events: none; }
.sd-stage.bought .sd-stamp { animation: sd-yours 1300ms var(--ease-out) both; }
.sd-stage.bought::after { animation: sd-ring 750ms var(--ease-out) both; }
@keyframes sd-yours {
  0% { opacity: 0; transform: scale(1.9) skewX(-10deg); }
  14% { opacity: 1; transform: scale(0.94) skewX(-10deg); }
  22% { transform: scale(1) skewX(-10deg); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px) skewX(-10deg); }
}
@keyframes sd-ring { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(7); } }

.sd-info { display: flex; flex-direction: column; gap: 8px; }
.sd-kind { color: var(--line-3); }
.sd-name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.sd-blurb { margin: 0; font-size: 15px; line-height: 1.45; color: var(--line-2); text-wrap: pretty; }
.sd-set { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sd-set .label { color: var(--line-3); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip {
  position: relative; width: 58px; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-1);
  background: var(--court-deep); box-shadow: inset 0 0 0 1px var(--hair-strong); opacity: 0.6; transition: opacity 140ms, box-shadow 140ms;
}
.sd-chip svg, .sd-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-chip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rc); }
.sd-chip.is-owned, .sd-chip:hover { opacity: 1; }
.sd-chip.is-on { opacity: 1; box-shadow: inset 0 0 0 2px var(--line); }
.sd-act { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 6px; }
.sd-act .btn { margin-left: 0; }
.sd-need { margin: 0; text-align: right; font-size: 13px; line-height: 1.45; color: var(--line-3); }
.sd-need .coins { font-size: 12px; }
/* Asked twice: the second press spends. Gold says it's coins this time. */
.btn.armed { background: var(--coin); color: var(--arena); }
.btn.armed:hover { background: var(--coin-hi); }

/* ---------------------------------------------------------------- sets */

.shop-sets { display: grid; gap: 12px; }
.shop-set {
  --rc: var(--rare-common);
  display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 14px 18px 14px 20px; background: var(--arena-3); border-radius: var(--r-3);
  box-shadow: inset 4px 0 0 var(--rc), inset 0 0 0 1px var(--hair);
}
.shop-set header { display: flex; flex-direction: column; gap: 6px; }
.shop-set h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.15; }
.shop-set header .label { color: var(--line-3); }
.ss-items { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-item { width: 124px; gap: 5px; padding-bottom: 8px; }
.ss-item .ss-name { padding: 0 9px; font-weight: 700; font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item .label { padding: 0 9px; color: var(--line-3); font-size: 12px; }
.ss-item:not(.is-owned) .sc-art { filter: saturate(0.55) brightness(0.8); }
.ss-item.is-owned .label::after { content: ' · owned'; color: var(--line-2); }
.ss-item:hover { background: var(--court-deep); }
.ss-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* (a column of these: plain buttons, so the orange stays on the one thing chosen) */
.ss-act .btn { min-height: 44px; padding: 0 24px; font-size: 14px; }

/* A bundle (several sets sold together): its own band of the show's colours, a big title, and its
   sets as a strip of tiles until it's opened, then as set rows. */
.shop-bundle {
  position: relative; display: grid; gap: 14px; padding: 16px 18px 18px 20px; border-radius: var(--r-3); overflow: hidden;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--b1) 26%, transparent) 0%, transparent 42%),
    linear-gradient(295deg, color-mix(in srgb, var(--b3) 20%, transparent) 0%, transparent 38%),
    var(--arena-3);
  box-shadow: inset 4px 0 0 var(--b1), inset 0 0 0 1px var(--hair);
}
.shop-bundle.is-soon { box-shadow: inset 4px 0 0 var(--b1), inset 0 0 0 1px rgba(245, 192, 74, 0.45), 0 0 22px rgba(245, 192, 74, 0.08); }
.sb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.sb-title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--line); font: inherit; text-align: left; cursor: pointer;
}
.sb-title h3 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 18px color-mix(in srgb, var(--b1) 45%, transparent); }
.sb-kick { color: var(--coin-hi); }
.sb-blurb { max-width: 62ch; font-size: 13.5px; line-height: 1.4; color: var(--line-2); }
.sb-more { display: inline-flex; align-items: center; gap: 6px; color: var(--line-3); }
.sb-more::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.shop-bundle.is-open .sb-more::after { transform: translateY(1px) rotate(225deg); }
.sb-title:hover .sb-more { color: var(--line); }
.sb-title:focus-visible { outline: none; }
.sb-title:focus-visible h3 { text-decoration: underline 2px var(--ball); text-underline-offset: 5px; }
.sb-all { color: var(--ok); }
.sb-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-bundle.is-open .sb-strip { display: none; }
.sb-set {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 0 10px; border: 0; border-radius: var(--r-2); overflow: hidden; cursor: pointer;
  background: var(--court-deep); color: var(--line); font: inherit; text-align: left; box-shadow: inset 0 0 0 1px var(--hair);
  transition: transform 200ms var(--ease-out), box-shadow 160ms;
}
.sb-set::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--b1), var(--b3)); z-index: 1; }
.sb-set .sb-name { padding: 0 10px; font-size: 14.5px; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-set .label { padding: 0 10px; color: var(--line-3); font-size: 12px; }
.sb-set:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-3), var(--lift-2); }
.sb-set:hover .sc-art > * { transform: scale(1.04); }
.sb-set:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ball), var(--lift-2); }
.sb-sets { display: grid; gap: 10px; }
.sb-sets:empty { display: none; }
.sb-sets .shop-set { background: color-mix(in srgb, var(--court-deep) 70%, var(--arena-3)); }

/* ---------------------------------------------------------------- how to earn */

.shop-earn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.se-col h3 { margin: 0; color: var(--line-2); font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--hair-strong); }
.se-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; }
.se-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.se-list b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--coin-hi); }
.se-list b::before { content: '+'; color: var(--coin); }
.se-miles li.done span { color: var(--line-3); }
.se-miles li.done b { color: var(--line-3); }
.se-miles li.done b::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' stroke='%23060914' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.shop-earn .fine .coins { font-size: 12px; vertical-align: -2px; }

/* ================================================================== results: what the match paid */

.res-coins {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  margin: 0 0 18px; padding: 12px 18px; background: var(--arena-3); border-radius: var(--r-2);
  box-shadow: inset 4px 0 0 var(--coin), inset 0 0 0 1px var(--hair);
}
.res-coins[hidden] { display: none; }
.rc-total { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rc-total .label { color: var(--line-3); }
.rc-plus { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%; font-size: 36px; line-height: 1; color: var(--coin); font-variant-numeric: tabular-nums; }
.rc-plus .coin { width: 28px; height: 28px; }
.rc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--line-2); }
.rc-lines li { white-space: nowrap; }
.rc-lines li b { margin-left: 6px; font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--line); }
.rc-lines li.milestone { color: var(--coin-hi); }
.rc-lines li.milestone b { color: var(--coin); }
.rc-lines li.milestone::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--coin); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 61%, 80% 100%, 50% 77%, 20% 100%, 30% 61%, 0 38%, 38% 36%); vertical-align: -1px; }
.rc-lines li.empty { color: var(--line-3); white-space: normal; }
.res-coins.counting .rc-lines li { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 200ms); }
.rc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.rc-side .label { color: var(--line-3); }
.rc-bal .coins { font-size: 16px; }
.rc-next { font-size: 12.5px; line-height: 1.35; color: var(--line-3); max-width: 26ch; }
.rc-next b { color: var(--line); font-weight: 600; }
.panel-foot .res-shop { color: var(--coin); }
.panel-foot .res-shop:hover { color: var(--coin-hi); }

@media (max-width: 860px) {
  .shop-body { grid-template-columns: minmax(0, 1fr); }
  .shop-body[data-view='slot'] > .shop-detail { grid-column: 1; grid-row: auto; }
  .shop-detail { position: static; order: -1; display: grid; grid-template-columns: minmax(100px, 0.65fr) minmax(0, 1fr); align-items: start; }
  .sd-stage { aspect-ratio: 1; }
  .sd-set { display: none; }
  .shop-body:has(> .shop-sub:not([hidden])) > .shop-sub,
  .shop-body:has(> .shop-sub:not([hidden])) > .shop-grid,
  .shop-body:has(> .shop-sub:not([hidden])) > .shop-detail { grid-column: 1; grid-row: auto; }
  .shop-sub { order: -2; }
  .shop-body:has(> .shop-sub:not([hidden])) > .shop-grid { margin-top: -10px; }
  .shop-top { flex-direction: column; align-items: stretch; }
  .shop-earn { grid-template-columns: minmax(0, 1fr); }
  .shop-set { grid-template-columns: minmax(0, 1fr); }
  .ss-act { align-items: flex-start; }
  .sb-head { grid-template-columns: minmax(0, 1fr); }
  .sb-title h3 { font-size: 28px; }
  .res-coins { grid-template-columns: minmax(0, 1fr); }
  .rc-side { align-items: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  /* (the deal's kicker ran under its price) */
  .sdl-kick { white-space: normal; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-filters { flex: 1; }
  .shop-filters button { flex: 1; padding: 0 8px; }
  .shop-detail { grid-template-columns: 100px minmax(0, 1fr); }
  .sd-name { font-size: 22px; }
  .sd-blurb { font-size: 12px; }
  .shop-detail .btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
}