/* The shop, redesign (claude/shop-redesign, 20 Oct 2026).
 *
 * Builds on nova.css (the site's tokens, the nav, the footer). Replaces
 * shop.css and web-shop.css on /shop/account/ only.
 *
 * The system, in one place:
 *   type   Barlow Condensed (the site's display face) for names, numbers and
 *          buttons; Inter for sentences. Scale: a major third from 16px
 *          (12 · 14 · 16 · 20 · 25 · 31 · 39 · 49).
 *   space  a 4px base: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64.
 *   colour the site's navy and gold; cyan says "where it goes"; each gem
 *          kind carries the game's own stone colour.
 *   shape  cards with the game's gold corner brackets (the HUD frame), one
 *          4px radius for controls, 8px for panels.
 *   motion a quiet float and orbit on the season's world; a card lifts on
 *          tap, a receipt rises and the wallet counts down. All respect
 *          prefers-reduced-motion.
 */

.s3 {
  --s3-ink: var(--ink, #f7f2e8);
  --s3-muted: var(--muted, #9fb2c9);
  --s3-gold: var(--gold, #f4d58d);
  --s3-gold-2: var(--gold-mid, #d9a83e);
  --s3-rule: rgba(238, 192, 103, .22);
  --s3-hair: rgba(159, 178, 201, .14);
  --s3-card: linear-gradient(180deg, rgba(17, 38, 66, .88), rgba(7, 18, 34, .94));
  --s3-where: #8fd8f2;
  --s3-ok: #7ee2a8;
  --s3-warn: #ffb35c;
  --s3-season: #ff9a4d;

  --fs-1: .75rem; --fs-2: .875rem; --fs-3: 1rem; --fs-4: 1.25rem;
  --fs-5: 1.5625rem; --fs-6: 1.953rem; --fs-7: 2.441rem; --fs-8: 3.052rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  padding-top: var(--s3-top, 82px);
  min-height: 70vh;
}
@media (max-width: 740px) { .s3 { padding-top: var(--s3-top, 70px); } }
.s3 [hidden] { display: none !important; }
.s3 :focus-visible { outline: 2px solid var(--cyan, #45d2ff); outline-offset: 2px; }
.s3 h1, .s3 h2, .s3 h3 { font-family: var(--display); text-transform: none; }

/* --------------------------------------------------------------- buttons */
.s3-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: 4px;
  font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease-out), filter .15s, background .2s, box-shadow .2s;
}
.s3-btn.is-gold {
  color: #1a0f02;
  background: linear-gradient(180deg, #f9e4ae, #d9a83e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px -10px rgba(217, 168, 62, .9);
}
.s3-btn.is-gold:hover { filter: brightness(1.07); }
.s3-btn.is-gold:active { transform: translateY(1px); }
.s3-btn.is-gold .coin { width: .8em; height: .8em; }
.s3-btn.is-confirm {
  color: #1a0f02; background: #fff3cf;
  box-shadow: 0 0 0 2px var(--s3-gold), 0 0 24px rgba(244, 213, 141, .55);
  animation: s3-ring 1.4s ease-in-out infinite;
}
.s3-btn.is-short {
  flex-direction: column; gap: 2px; padding-block: 6px;
  color: var(--s3-warn); background: rgba(255, 179, 92, .06); border-color: rgba(255, 179, 92, .45);
}
.s3-btn.is-short b { font-size: .95rem; }
.s3-btn.is-short span { color: var(--s3-gold); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.s3-btn.is-quiet {
  color: var(--s3-muted); background: rgba(159, 178, 201, .07); border-color: var(--s3-hair);
  font-size: .95rem; font-weight: 700; cursor: default;
}
.s3-btn.is-owned { color: var(--s3-ok); background: rgba(126, 226, 168, .07); border-color: rgba(126, 226, 168, .25); cursor: default; }
.s3-btn.is-line { width: auto; color: var(--s3-gold); background: transparent; border-color: rgba(244, 213, 141, .45); }
.s3-btn.is-line:hover { background: rgba(244, 213, 141, .08); }
.s3-btn.is-small { min-height: 36px; font-size: .9rem; }
.s3-btn.is-busy { opacity: .7; }
.s3-btn:disabled { cursor: not-allowed; }
.s3-btn.is-gold:disabled { filter: saturate(.4) brightness(.8); }

.coin {
  display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4 0 18%, #f2c75e 40%, #b07a1f 78%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 78, 12, .8), 0 0 10px rgba(244, 213, 141, .35);
}

/* ------------------------------------------------------- signed out */
.s3-signin { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8); }
.s3-signin-intro h1 { margin: var(--sp-3) 0 var(--sp-3); font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 800; line-height: .95; letter-spacing: .01em; }
.s3-signin-intro p { max-width: 38ch; margin: 0; color: var(--s3-muted); font-size: var(--fs-3); }
.s3-signin-world { display: block; width: clamp(150px, 42vw, 300px); height: auto; filter: drop-shadow(0 0 40px rgba(244, 196, 90, .35)); }
.s3-signin-card { padding: var(--sp-5); border: 1px solid var(--s3-hair); border-radius: 8px; background: var(--s3-card); }
@media (min-width: 900px) {
  .s3-signin { grid-template-columns: 1fr 420px; align-items: center; padding-block: var(--sp-8); }
}
.ws-oauth { display: grid; gap: var(--sp-3); }
.ws-provider {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px;
  color: var(--s3-ink); background: rgba(255, 255, 255, .04);
  font: 600 .95rem/1 var(--sans); cursor: pointer;
}
.ws-provider:hover { background: rgba(255, 255, 255, .08); }
.ws-provider:disabled { opacity: .5; cursor: not-allowed; }
.ws-provider small { color: var(--s3-muted); font-weight: 500; }
.ws-logo { flex: none; width: auto; height: 20px; fill: currentColor; }
.ws-or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); color: var(--s3-muted); font-size: var(--fs-1); }
.ws-or::before, .ws-or::after { content: ""; flex: 1; height: 1px; background: var(--s3-hair); }
.ws-form { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
.ws-form label { display: grid; gap: 6px; color: var(--s3-muted); font-size: var(--fs-2); font-weight: 600; }
.ws-form input, .s3 select {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  border: 1px solid rgba(238, 192, 103, .28); border-radius: 4px;
  color: var(--s3-ink); background: rgba(4, 12, 24, .8); font: 400 1rem var(--sans);
}
.s3 select { min-height: 44px; }
.s3-note { margin: var(--sp-3) 0 0; color: var(--s3-muted); font-size: var(--fs-2); }
.s3-note b { color: var(--s3-ink); }
.ws-status { margin: var(--sp-2) 0; font-size: var(--fs-2); color: var(--s3-ink); }
.ws-status:empty { display: none; }
.ws-status[data-tone="ok"] { color: var(--s3-ok); }
.ws-status[data-tone="warn"] { color: var(--s3-warn); }

/* ------------------------------------------------- the top: who and gold */
.s3-top {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--s3-rule);
  background: radial-gradient(120% 140% at 85% 40%, rgba(48, 125, 255, .16), transparent 55%),
    linear-gradient(180deg, rgba(7, 20, 38, .2), rgba(7, 20, 38, .75));
}
.s3-top-world {
  position: absolute; z-index: -1; top: 50%; right: -18%;
  width: clamp(230px, 62vw, 470px); aspect-ratio: 1;
  transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
  opacity: .5;
}
.s3-top-world img { display: block; width: 100%; height: auto; animation: s3-world .9s var(--ease-out) both; }
.s3-top-in { position: relative; display: grid; gap: var(--sp-4); padding-block: var(--sp-5); }
.s3-who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.s3-crest {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden;
  border: 1.5px solid rgba(244, 213, 141, .6); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(217, 168, 62, .3), rgba(6, 18, 35, .95));
  color: var(--s3-gold); font: 800 1.4rem var(--display);
}
.s3-crest img { width: 100%; height: 100%; object-fit: cover; }
.s3-name { margin: 0; overflow-wrap: anywhere; font: 800 var(--fs-6)/1 var(--display); letter-spacing: .02em; }
.s3-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0 0; color: var(--s3-muted); font-size: var(--fs-2); line-height: 1.3; }
.s3-meta > span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; vertical-align: middle; background: var(--s3-gold-2); transform: rotate(45deg); }
.wsx-tag { color: var(--s3-gold); font-weight: 700; }
.s3-wallet { display: flex; align-items: center; gap: var(--sp-4); }
.s3-gold { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); }
.s3-gold .coin { width: 30px; height: 30px; }
.s3-gold b { color: var(--s3-gold); font-size: var(--fs-7); font-weight: 800; line-height: 1; letter-spacing: .01em; transition: color .3s, text-shadow .3s; font-variant-numeric: tabular-nums; }
.s3-gold.is-ticking b { color: #fff; text-shadow: 0 0 18px rgba(244, 213, 141, .8); }
.s3-gold small { align-self: flex-end; margin-bottom: 6px; color: var(--s3-muted); font: 700 var(--fs-3) var(--display); }
.s3-getgold {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid rgba(244, 213, 141, .5); border-radius: 4px;
  color: var(--s3-gold); background: rgba(3, 8, 20, .5);
  font: 800 1rem var(--display); letter-spacing: .04em; text-decoration: none;
}
.s3-getgold:hover { background: rgba(244, 213, 141, .1); }
.s3-line { max-width: 44ch; margin: 0; color: var(--s3-muted); font-size: var(--fs-2); }
@media (min-width: 900px) {
  .s3-top-in { grid-template-columns: 1fr auto; align-items: center; padding-block: var(--sp-7) var(--sp-6); }
  .s3-top-world { right: 22%; width: 420px; opacity: .55; }
  .s3-name { font-size: var(--fs-8); }
  .s3-crest { width: 68px; height: 68px; font-size: 1.8rem; }
  .s3-gold b { font-size: var(--fs-8); }
  .s3-gold .coin { width: 38px; height: 38px; }
  .s3-line { grid-column: 1 / -1; font-size: var(--fs-3); }
}

/* -------------------------------------------- the section bar (sticky) */
.s3-tabs {
  position: sticky; top: var(--s3-top, 82px); z-index: 60;
  border-bottom: 1px solid var(--s3-rule);
  background: rgba(3, 8, 20, .93);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (max-width: 740px) { .s3-tabs { top: var(--s3-top, 70px); } }
.s3-tabs ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 auto; padding: 0; list-style: none; }
.s3-tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 58px; padding: 6px 2px;
  color: var(--s3-muted); text-decoration: none;
  font: 700 .74rem/1 var(--display); letter-spacing: .01em; white-space: nowrap;
  transition: color .2s;
}
.s3-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: transform .25s var(--ease-out); }
.s3-tabs a:hover { color: var(--s3-ink); }
.s3-tabs a[aria-current="page"] { color: var(--s3-gold); }
.s3-tabs a[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 6px rgba(244, 213, 141, .5)); }
.s3-tabs-ink {
  position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--s3-gold) 20%, var(--s3-gold) 80%, transparent);
  box-shadow: 0 0 12px rgba(244, 213, 141, .7);
  transition: transform .38s var(--ease-out), width .38s var(--ease-out), opacity .2s;
}
@media (min-width: 900px) {
  .s3-tabs ul { display: flex; justify-content: center; gap: var(--sp-2); }
  .s3-tabs a { flex-direction: row; gap: 8px; min-height: 60px; padding: 0 var(--sp-4); font-size: 1.05rem; }
  .s3-tabs svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------- the sections */
.s3-under { padding-top: var(--sp-3); }
.s3-panel { display: none; padding-block: var(--sp-5) var(--sp-8); }
.s3-panel.is-active { display: block; }
.s3-panel.is-entering { animation: s3-in .32s var(--ease-out) both; }
.s3-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); }
.s3-panel-head h2 { margin: 0; font-size: var(--fs-7); font-weight: 800; line-height: 1; letter-spacing: .01em; }
.s3-panel-head p { flex: 0 0 100%; max-width: none; margin: 0; color: var(--s3-muted); font-size: var(--fs-2); }
.s3-panel-head::after { content: ""; flex-basis: 100%; height: 1px; margin-top: var(--sp-2); background: linear-gradient(90deg, var(--s3-gold-2), rgba(217, 168, 62, .15) 40%, transparent); }
@media (min-width: 900px) {
  .s3-panel { padding-block: var(--sp-6) var(--sp-8); }
  .s3-panel-head h2 { font-size: var(--fs-8); }
  .s3-panel-head p { font-size: var(--fs-3); }
}

/* ---------------------------------------------------------------- grids */
.s3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.s3-grid.is-bundles, .s3-grid.is-items, .s3-grid.is-speed { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .s3-grid.is-skins, .s3-grid.is-gems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s3-grid.is-bundles, .s3-grid.is-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .s3-grid { gap: var(--sp-4); }
  .s3-grid.is-packs, .s3-grid.is-gems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s3-grid.is-skins { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s3-grid.is-bundles, .s3-grid.is-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s3-grid.is-speed { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .s3-grid.is-speed .is-wide { grid-column: span 2; max-width: 860px; }
  .s3-grid.is-speed .is-wide:only-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- cards */
.s3-card {
  --glow: #4f8dff;
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--s3-hair); border-radius: 6px;
  background: var(--s3-card); text-align: center;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.s3-card::before, .s3-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--s3-gold-2); opacity: .75; pointer-events: none; }
.s3-card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.s3-card::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 6px; }
.s3-card > .s3-btn { margin-top: auto; }
@media (hover: hover) {
  .s3-card:hover { transform: translateY(-4px); border-color: rgba(244, 213, 141, .38); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--glow) 70%, transparent); }
  .s3-card:hover .s3-art img { transform: scale(1.06); }
}
.s3-card.is-confirming { transform: translateY(-4px); border-color: var(--s3-gold); box-shadow: 0 0 0 1px var(--s3-gold), 0 18px 40px -12px rgba(244, 213, 141, .55); }
.s3-card.is-covers { border-color: rgba(69, 210, 255, .6); }
.s3-card.is-out .s3-art img { filter: grayscale(.75) brightness(.7); }
.s3-card.is-pack { --glow: #f2c75e; }

/* A <picture> (WebP 1x/2x over a PNG) lays out as if the img inside were there alone. */
picture.ws-pic { display: contents; }
picture.ws-pic > source { display: none; }
.s3-art { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .82; margin: 0 0 var(--sp-1); }
.s3-art::before { content: ""; position: absolute; inset: 6% 12%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 38%, transparent), transparent 68%); }
.s3-art img { position: relative; width: 76%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); transition: transform .45s var(--ease-out); }
.s3-art.is-artless img { visibility: hidden; }
.s3-art.is-artless::after { content: ""; position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a5c86, #0b1a2e 70%); }

.s3-title { margin: 0; font-size: var(--fs-4); font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.s3-sub-line { margin: 0; color: var(--s3-muted); font-size: var(--fs-2); line-height: 1.35; }
.s3-sub-line.is-ok { color: var(--s3-ok); }
.s3-copy { margin: 0; color: var(--s3-muted); font-size: var(--fs-2); line-height: 1.45; }
.s3-goldbig { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--s3-gold); font: 800 var(--fs-5)/1 var(--display); font-variant-numeric: tabular-nums; }
.s3-goldbig .coin { width: .8em; height: .8em; }
.s3-goldbig small { color: var(--s3-muted); font-size: var(--fs-2); font-weight: 700; }
.s3-lands { display: block; text-align: center; margin: 2px 0 0; color: var(--s3-where); font-size: var(--fs-1); line-height: 1.3; }
.s3-lands::before { content: ""; display: inline-block; margin-right: 6px; vertical-align: 1px; width: 9px; height: 6px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; }
.wsx-line { margin: 0; color: var(--s3-warn); font-size: var(--fs-1); }
.wsx-line:empty { display: none; }

.s3-ribbon {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 3px 8px; border-radius: 3px;
  color: #1a0f02; background: var(--s3-gold);
  font: 800 .78rem/1.2 var(--display); letter-spacing: .04em;
}
.s3-ribbon.is-quiet { color: var(--s3-ink); background: rgba(159, 178, 201, .16); }
.s3-ribbon.is-cyan { left: auto; right: 10px; color: #021018; background: var(--cyan, #45d2ff); }
.s3-ribbon.is-season { position: static; display: inline-block; color: #ffd2a8; background: rgba(255, 154, 77, .16); border: 1px solid rgba(255, 154, 77, .4); }

/* ----------------------------------------------------- skins: the season */
.s3-season {
  --glow: var(--s3-season);
  display: grid; gap: var(--sp-3); align-items: center;
  margin-bottom: var(--sp-6); padding: var(--sp-4);
  border: 1px solid rgba(255, 154, 77, .35); border-radius: 8px;
  background: radial-gradient(90% 120% at 20% 40%, rgba(255, 120, 40, .2), transparent 60%), var(--s3-card);
  transition: box-shadow .25s, border-color .25s;
}
.s3-season.is-confirming { border-color: var(--s3-gold); box-shadow: 0 0 0 1px var(--s3-gold), 0 18px 44px -14px rgba(244, 213, 141, .5); }
.s3-season .s3-art { max-width: 300px; width: 80%; margin: 0 auto; aspect-ratio: 1; }
.s3-season .s3-art img { width: 100%; }
.s3-season-body { display: grid; gap: var(--sp-2); justify-items: start; }
.s3-season-body h3 { margin: 0; font-size: var(--fs-7); font-weight: 800; line-height: 1; }
.s3-season-body .s3-goldbig { font-size: var(--fs-6); }
.s3-season-cta { display: grid; gap: 6px; width: 100%; max-width: 340px; margin-top: var(--sp-2); }
.s3-season-cta .s3-lands, .s3-speed-body .s3-lands, .s3-card.is-bundle .s3-lands, .s3-code .s3-lands { text-align: left; }
.s3-code .s3-lands { margin-top: var(--sp-2); }
@media (min-width: 900px) {
  .s3-season { grid-template-columns: 300px 1fr; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); }
  .s3-season .s3-art { width: 100%; }
  .s3-season-body h3 { font-size: var(--fs-8); }
}
.s3-tier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.s3-season + div > .s3-tier:first-child, [data-ws-tiers] > .s3-tier:first-child { margin-top: 0; }
.s3-tier h3 { margin: 0; font-size: var(--fs-5); font-weight: 800; }
.s3-tier p { margin: 0; color: var(--s3-muted); font-size: var(--fs-2); }

/* ---------------------------------------------------------------- gold */
.s3-off {
  display: grid; gap: var(--sp-2); justify-items: start;
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed rgba(244, 213, 141, .4); border-radius: 8px; background: rgba(244, 213, 141, .04);
}
.s3-off p { margin: 0; color: var(--s3-muted); font-size: var(--fs-2); }
.s3-off b { color: var(--s3-ink); font-size: var(--fs-3); }
.s3-off .s3-btn { margin-top: var(--sp-2); }
.s3-paynotes { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.wsx-paynote { display: flex; gap: 8px; margin: 0; color: var(--s3-muted); font-size: var(--fs-1); }
.wsx-paynote a { color: var(--s3-gold); }
.wsx-paynote.wsx-refunds { display: block; }  /* the refunds line has no padlock: one paragraph, not three flex columns around the link */
.wsx-padlock { flex: none; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--s3-gold); stroke-width: 1.4; }
.s3-founders { margin: 0 0 var(--sp-4); color: var(--s3-gold); font-size: var(--fs-2); }
/* Creator codes (CF-1299): one quiet box on the Gold tab, above the packs. */
.s3-creator {
  display: grid; gap: var(--sp-3); max-width: 640px; margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(244, 213, 141, .32); border-radius: 8px; background: rgba(244, 213, 141, .05);
}
.s3-creator-head h3 { margin: 0; font: 800 var(--fs-5)/1.1 var(--display); letter-spacing: .02em; }
.s3-creator-head p { max-width: none; margin: var(--sp-1) 0 0; color: var(--s3-muted); font-size: var(--fs-2); }
.s3-creator .s3-creator-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); margin: 0; }
.s3-creator .s3-creator-row input { min-height: 48px; font: 800 1.15rem var(--display); letter-spacing: .14em; text-transform: uppercase; }
.s3-creator .s3-creator-row .s3-btn { width: auto; min-height: 48px; margin: 0; padding: 0 var(--sp-5); }
.s3-creator .ws-status { margin: 0; }
.s3-creator-applied { margin: 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--s3-ok); color: var(--s3-ok); background: rgba(126, 226, 168, .07); font-weight: 600; font-size: var(--fs-3); }
.s3-creator-out { margin-top: var(--sp-4); }
/* Promo codes (CF-1313): the same quiet box, under the creator box. */
.s3-promo-used { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--s3-muted); font-size: var(--fs-2); }
/* The extra gold a creator or promo bonus adds, on each pack card, and the one line under the packs. */
.s3-sub-line.is-bonus { color: var(--s3-ok); font-weight: 700; }
.s3-sub-line.is-bonus span { white-space: nowrap; }
/* Under 360px (review S3): one figure per line, a size smaller, free to wrap, so "+1,400 promo gold" stays inside a 320px card. */
@media (max-width: 359px) {
  .s3-sub-line.is-bonus { font-size: .8125rem; }
  .s3-sub-line.is-bonus span { display: block; white-space: normal; }
  .s3-sub-line.is-bonus .is-sep { display: none; }
}
.s3-bonusline { max-width: 640px; margin: var(--sp-3) 0 0; color: var(--s3-ok); font-weight: 600; font-size: var(--fs-2); }
.s3-featured { margin-bottom: var(--sp-4); }
.wsx-featured {
  --glow: #f2c75e;
  position: relative; display: grid; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4); border: 1px solid rgba(244, 213, 141, .4); border-radius: 8px;
  background: radial-gradient(80% 120% at 15% 50%, rgba(242, 199, 94, .16), transparent 60%), var(--s3-card);
}
.wsx-featured .s3-art { width: 120px; }
.wsx-featured h2 { margin: 6px 0 0; font-size: var(--fs-6); }
.wsx-featured .s3-ribbon { position: static; display: inline-block; }
.wsx-why { margin: 4px 0 0; color: var(--s3-muted); font-size: var(--fs-2); }
.wsx-buy { display: grid; gap: 6px; }
.wsx-from { color: var(--s3-gold); font-size: var(--fs-2); }
@media (min-width: 900px) { .wsx-featured { grid-template-columns: auto 1fr 260px; } }

/* ----------------------------------------------------------- speed-ups */
.s3-card.is-speed { --glow: #45d2ff; }
.s3-card.is-wide { text-align: left; }
.s3-card.is-wide .s3-art { max-width: 160px; width: 46%; margin: 0 auto; }
.s3-speed-body { display: grid; gap: var(--sp-2); }
.s3-speed-body .s3-btn { margin-top: var(--sp-2); }
.s3-qty-label { margin: var(--sp-2) 0 0; color: var(--s3-muted); font-size: var(--fs-1); font-weight: 600; }
.s3-qty { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.s3-qty-btn {
  min-height: 44px; border: 1px solid var(--s3-hair); border-radius: 4px;
  color: var(--s3-ink); background: rgba(159, 178, 201, .07);
  font: 800 1.15rem var(--display); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.s3-qty-btn:hover { border-color: rgba(244, 213, 141, .45); }
.s3-qty-btn[aria-pressed="true"] { color: #1a0f02; background: var(--s3-gold); border-color: var(--s3-gold); transform: translateY(-1px); }
@media (min-width: 600px) {
  .s3-card.is-wide { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-5); }
  .s3-card.is-wide .s3-art { width: 100%; max-width: none; }
}
@media (min-width: 900px) { .s3-qty { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* ------------------------------------------------------------- bundles */
.s3-card.is-bundle { --glow: #8b51ff; text-align: left; padding-top: var(--sp-6); }
.s3-card.is-bundle .s3-title { font-size: var(--fs-5); }
.s3-holds { display: grid; margin: var(--sp-1) 0; padding: 0; list-style: none; }
.s3-holds li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(159, 178, 201, .1); font-size: var(--fs-2); }
.s3-holds li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--s3-gold-2); transform: translateY(-1px) rotate(45deg); }
.wsx-pick { display: grid; gap: 4px; color: var(--s3-muted); font-size: var(--fs-1); font-weight: 600; }

/* ---------------------------------------------------------------- gems */
.s3-card.is-gem { padding-top: var(--sp-6); }
.s3-card.is-gem .s3-art { aspect-ratio: 1 / .78; }
.s3-card.is-gem .s3-art img { width: 62%; }
.s3-card.is-gem .s3-art::before { inset: 4% 14%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 30%, transparent), transparent 66%); }
.s3-card.is-gem.is-glow .s3-art::before { background: radial-gradient(circle, color-mix(in srgb, var(--glow) 62%, transparent), transparent 70%); animation: s3-glow 2.6s ease-in-out infinite; }
.s3-art.is-swap img { animation: s3-pop .34s var(--ease-out); }
.s3-title.is-gemname { color: color-mix(in srgb, var(--glow) 45%, #ffffff); font-size: var(--fs-5); font-weight: 800; letter-spacing: .08em; }
.s3-gemlevel { margin: var(--sp-1) 0 0; font: 700 var(--fs-3) var(--display); letter-spacing: .03em; }
.s3-pips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--sp-2); }
.s3-pip {
  min-height: 38px; padding: 0; border: 1px solid var(--s3-hair); border-radius: 4px;
  color: var(--s3-muted); background: rgba(159, 178, 201, .06);
  font: 800 1rem var(--display); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.s3-pip:hover { color: var(--s3-ink); border-color: color-mix(in srgb, var(--glow) 60%, transparent); }
.s3-pip[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--glow) 55%, #071426); border-color: var(--glow); }

/* --------------------------------------------------------------- codes */
.s3-code { max-width: 560px; padding: var(--sp-5); border: 1px solid var(--s3-hair); border-radius: 8px; background: var(--s3-card); }
.s3-code-row { grid-template-columns: 1fr auto; margin: 0; }
.s3-code-row input { min-height: 52px; font: 800 1.25rem var(--display); letter-spacing: .14em; text-transform: uppercase; }
.s3-code-row input::placeholder { font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; color: rgba(159, 178, 201, .7); }
.s3-code-row .s3-btn { width: auto; min-height: 52px; padding: 0 var(--sp-5); }
.ws-gave { display: grid; gap: 4px; }
.ws-gave-title { margin: var(--sp-3) 0 0; color: var(--s3-gold); font: 800 var(--fs-4) var(--display); }
.ws-gave-list { margin: 0; padding-left: var(--sp-4); }
.ws-code-history { display: grid; gap: var(--sp-2); max-width: 560px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.ws-code-row { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--s3-hair); border-radius: 6px; font-size: var(--fs-2); }
.ws-code-row b { font-family: var(--display); font-size: var(--fs-3); }
.ws-code-gave { color: var(--s3-gold); }
.ws-code-state { color: var(--s3-where); font-size: var(--fs-1); }

/* ------------------------------------------------------------- account */
.s3-level { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--s3-hair); border-radius: 8px; background: var(--s3-card); }
.s3-level-text { margin: 0 0 var(--sp-2); font: 700 var(--fs-4) var(--display); letter-spacing: .02em; }
.ws-level { height: 10px; overflow: hidden; border-radius: 5px; background: rgba(159, 178, 201, .12); }
.ws-level-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--s3-gold-2), var(--s3-gold)); box-shadow: 0 0 12px rgba(244, 213, 141, .5); transition: width .9s var(--ease-out); }
.s3-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.ws-stat { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--s3-hair); border-radius: 6px; background: rgba(7, 18, 34, .7); }
.ws-stat-value { color: var(--s3-gold); font: 800 var(--fs-6)/1 var(--display); font-variant-numeric: tabular-nums; }
.ws-stat-label { color: var(--s3-muted); font-size: var(--fs-1); }
@media (min-width: 900px) { .s3-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.s3-sub { margin-top: var(--sp-7); }
.s3-sub h3 { margin: 0; font-size: var(--fs-6); font-weight: 800; }
.s3-sub-lede { margin: 4px 0 var(--sp-4); color: var(--s3-muted); font-size: var(--fs-2); }
.s3-card.is-item, .s3-grid.is-items .s3-card { --glow: #f2c75e; text-align: left; }
.s3-card.is-off { opacity: .62; }
.wsx-item-head { display: flex; align-items: center; gap: var(--sp-3); }
.wsx-item-head img { width: 40px; height: 40px; }
.s3-grid.is-items .s3-goldbig { justify-content: flex-start; }
.wsx-shield { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wsx-shield span { display: grid; padding: 6px; border: 1px solid var(--s3-hair); border-radius: 4px; color: var(--s3-muted); font-size: var(--fs-1); text-align: center; }
.wsx-shield b { color: var(--s3-ink); font: 800 var(--fs-4) var(--display); }

/* ------------------------------------------- landed banner, skeletons */
.wsx-landed {
  display: grid; grid-template-columns: 48px 1fr 32px; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(126, 226, 168, .4); border-radius: 8px; background: rgba(126, 226, 168, .06);
}
.wsx-landed[data-tone="warn"] { border-color: rgba(255, 179, 92, .45); background: rgba(255, 179, 92, .06); }
.wsx-landed b { font: 800 var(--fs-4) var(--display); }
.wsx-landed p { margin: 0; color: var(--s3-muted); font-size: var(--fs-2); }
.wsx-landed .tile-art img { width: 44px; height: 44px; }
.wsx-x, .s3-toast-x { width: 32px; height: 32px; border: 0; border-radius: 4px; color: var(--s3-muted); background: transparent; cursor: pointer; }
.wsx-x:hover, .s3-toast-x:hover { color: var(--s3-ink); background: rgba(255, 255, 255, .06); }
.wsx-skel { min-height: 220px; border-radius: 6px; background: linear-gradient(100deg, rgba(159, 178, 201, .05) 30%, rgba(159, 178, 201, .12) 50%, rgba(159, 178, 201, .05) 70%) 0 0 / 300% 100%; animation: s3-shimmer 1.4s linear infinite; }

/* ----------------------------------------------- the buy confirmation */
.s3-toast {
  position: fixed; z-index: 90; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 64px 1fr 32px; gap: var(--sp-3); align-items: center;
  width: min(calc(100% - 32px), 460px); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid rgba(244, 213, 141, .7); border-radius: 10px;
  background: linear-gradient(180deg, #15304f, #0a1b30);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 44px -12px rgba(244, 213, 141, .5);
  transform: translateX(-50%);
}
.s3-toast.is-in { animation: s3-rise .55s cubic-bezier(.2, 1.25, .35, 1) both; }
.s3-toast-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.s3-toast-art::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--s3-gold); border-radius: 50%; opacity: 0; }
.s3-toast.is-in .s3-toast-art::before { animation: s3-burst .9s .15s var(--ease-out) both; }
.s3-toast-art img { position: relative; width: 60px; height: 60px; object-fit: contain; }
.s3-toast.is-in .s3-toast-art img { animation: s3-pop .5s .1s var(--ease-out) both; }
.s3-toast-body b { display: block; color: var(--s3-gold); font: 800 var(--fs-4)/1.1 var(--display); }
.s3-toast-body p { margin: 4px 0 0; color: var(--s3-muted); font-size: var(--fs-2); line-height: 1.35; }

/* ---------------------------------------------------------------- motion */
@keyframes s3-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes s3-world { from { opacity: 0; transform: scale(.9) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes s3-rise { from { opacity: 0; transform: translate(-50%, 130%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes s3-pop { from { transform: scale(.7); } 60% { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes s3-burst { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.7); } }
@keyframes s3-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--s3-gold), 0 0 14px rgba(244, 213, 141, .35); } 50% { box-shadow: 0 0 0 2px var(--s3-gold), 0 0 28px rgba(244, 213, 141, .7); } }
@keyframes s3-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes s3-shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .s3 *, .s3 *::before, .s3 *::after { animation: none !important; transition: none !important; }
}

/* Round 2: a compact command band, six doors and one shared widget language. */
.s3 { --s3-gold:#ffda70; --s3-gold-2:#e6ae40; --s3-where:#35d8fb; }
.s3-layout { min-width:0; }
.s3-layout:has([data-ws-account][hidden]) { display:none; }
.s3-band { position:sticky; top:var(--s3-top,82px); z-index:40; background:#071225f5; backdrop-filter:blur(16px); border-bottom:1px solid #ad823d; box-shadow:0 12px 28px #0005; }
.s3-top { padding:8px 0 0; border:0; background:transparent; }
.s3-top-world { display:none; }
.s3-top-in.s3-plaque { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid #8a6939; border-radius:10px; background:linear-gradient(125deg,#142841,#071526); }
.s3-who { appearance:none; padding:0; border:0; color:inherit; background:none; text-align:left; cursor:pointer; gap:8px; }
.s3-identity { display:block; min-width:0; }
.s3-who:hover .s3-name { color:var(--s3-gold); }
.s3-who::after { content:"⌄"; flex:none; margin-left:auto; color:var(--s3-gold); }
.s3-meta [data-ws-clan] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s3-crest { width:32px; height:38px; border-radius:7px 7px 16px 16px; background:#30305b; border-color:#e9b747; }
.s3-name { display:block; font-size:clamp(1.4rem,5.3vw,2rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s3-meta { gap:2px 6px; margin-top:4px; font-size:.65rem; }
.s3-meta > span + span::before { display:none; }
.s3-meta [data-ws-level], .s3-meta [data-ws-galaxy-bar] { display:none; }
.s3-wallet { flex-direction:column; align-items:flex-end; gap:0; }
.s3-gold { gap:5px; }
.s3-gold b { font-size:clamp(1.3rem,5vw,1.8rem); }
.s3-gold .coin { width:22px; height:22px; }
.s3-gold small { align-self:center; margin:0; color:var(--s3-gold); font-size:.85rem; }
.s3-getgold { min-height:28px; padding:4px 0; border:0; background:transparent; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }
.s3-line { display:none; }
.s3-band-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:40px; }
.s3-band-tools > span { font:700 .65rem var(--sans); letter-spacing:.12em; color:var(--s3-muted); }
.s3-code-chip { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:1px solid #527888; border-radius:30px; padding:5px 12px; min-height:34px; color:#a7efff; background:#0c2837; font:700 .9rem var(--display); cursor:pointer; }
.s3-code-chip b { margin-left:8px; color:#fff; }
.s3-tabs { position:relative; top:auto; border:0; background:transparent; }
.s3-tabs ul { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-flow:initial; gap:0; }
.s3-tabs a { position:relative; flex-direction:column; min-height:65px; gap:4px; padding:7px 1px; font-size:1rem; white-space:nowrap; }
.s3-tabs a[aria-current] { background:linear-gradient(0deg,#f4c55718,transparent); }
.s3-tabs svg { width:23px; height:23px; }
.s3-tabs small { display:none; }
.s3-tabs a.is-soon::after, .s3-tabs a[data-chip="gems"]::after { content:""; position:absolute; top:7px; right:27%; width:4px; height:4px; background:var(--s3-muted); border-radius:50%; }
.s3-content { min-width:0; }
.s3-under:has(> [data-ws-landed][hidden]):has(> .ws-status:empty) { padding-top:0; }
.s3-skins-heading { justify-content:center; margin-bottom:10px; }
.s3-skins-heading h2 { font-size:.9rem; letter-spacing:.24em; color:var(--s3-muted); text-transform:uppercase; }
.s3-skins-heading::after { display:none; }
.s3-skins-guide { margin:24px 0 32px; text-align:center; }
.s3-season-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; margin:0 auto 28px; max-width:660px; border:0; background:radial-gradient(ellipse at 50% 40%,#442b6b55,transparent 65%); }
.s3-season-hero .s3-season-body, .s3-season-hero .s3-season-cta { display:contents; }
.s3-season-hero .s3-ribbon.is-season { grid-row:1; position:static; display:flex; align-items:center; justify-content:center; gap:10px; padding:0; margin:0; border:0; background:none; color:var(--s3-gold); font:800 clamp(1.2rem,5vw,1.8rem)/1.2 var(--display); text-align:center; }
.s3-season-hero .s3-ribbon.is-season::before, .s3-season-hero .s3-ribbon.is-season::after { content:""; flex:1; height:2px; background:linear-gradient(90deg,transparent,#e6ae40); }
.s3-season-hero .s3-ribbon.is-season::after { transform:rotate(180deg); }
.s3-season-hero .s3-art { grid-row:2; position:relative; isolation:isolate; width:100%; max-width:none; aspect-ratio:1; margin:10px 0; }
.s3-season-hero .s3-art img { z-index:1; width:98%; max-height:100%; filter:drop-shadow(0 10px 22px #060319) drop-shadow(0 0 22px #913ce533); animation:s3-hero-float 6s ease-in-out infinite; }
.s3-season-hero .s3-art::before { z-index:0; inset:8%; border:3px solid #b57b2c; border-top-color:#ffe17d; border-left-color:#f6c34c; background:radial-gradient(circle,#6e24bb33,transparent 68%); transform:rotate(-24deg); }
.s3-season-hero .s3-art::after { content:""; position:absolute; z-index:2; pointer-events:none; width:98%; height:30%; left:1%; top:38%; border:3px solid #ffe18a; border-top-color:transparent; border-radius:50%; transform:rotate(-29deg); box-shadow:0 3px 0 #9b601a,0 5px 12px -5px #fbc248; }
.s3-season-hero h3 { grid-row:3; margin:0; font-size:clamp(3.3rem,14vw,5.8rem); line-height:1; overflow-wrap:anywhere; letter-spacing:-.02em; }
.s3-season-hero .s3-copy { grid-row:4; font-size:1rem; max-width:34ch; margin:12px 0 22px; }
.s3-season-hero .s3-season-cta > .s3-btn { grid-row:6; min-height:68px; padding:12px 16px; border-radius:13px; font-size:1.7rem; }
.s3-season-hero .s3-season-cta > .is-gold { border:3px solid #f8bc45; background:linear-gradient(#ffe77a,#f9c54c 48%,#df9626); color:#031225; box-shadow:inset 0 0 0 2px #68420b,inset 0 0 0 4px #ffdf78,0 0 25px #d99a2622; }
.s3-season-hero .s3-season-cta > .s3-lands { grid-row:7; text-align:center; margin:12px 0 0; font-size:1rem; }
.s3-season-hero .s3-goldbig { grid-row:5; justify-content:flex-start; margin-bottom:10px; }
.s3-season-hero .s3-shortfall { grid-row:6; }
.s3-season-hero .wsx-line { grid-row:8; }
.s3-shortfall { display:grid; gap:8px; padding:12px; border:1px solid #c98b42; border-radius:9px; background:#39271366; text-align:left; }
.s3-shortfall b { color:#ffcf81; font:700 1.1rem var(--display); }
.s3-shortfall p { margin:0; color:#c6cddd; font-size:.8rem; }
.wsx-line:not(:empty) { border-left:3px solid #ffb35c; padding:10px; color:#ffcc94; background:#442b1644; }
.s3-widget { width:min(520px,calc(100% - 28px)); max-height:85dvh; overflow:auto; padding:28px; border:2px solid #ba8d42; border-radius:18px; color:var(--s3-ink); background:radial-gradient(ellipse at top,#24395a,#091629 70%); box-shadow:0 24px 100px #000b,inset 0 0 0 4px #07111f; }
.s3-widget::backdrop { background:#020817c9; backdrop-filter:blur(5px); }
.s3-widget[open] { animation:s3-in .2s ease-out; }
.s3-widget .s3-panel { display:block; width:100%; padding:0; }
.s3-widget h2 { margin:8px 30px 12px 0; font:800 2rem/1.1 var(--display); overflow-wrap:anywhere; }
.s3-widget-close { position:absolute; right:8px; top:8px; width:44px; height:44px; color:#fff; background:transparent; border:0; font-size:1.7rem; cursor:pointer; }
.s3-eyebrow { margin:4px 0; font:700 .72rem var(--sans); letter-spacing:.18em; color:var(--s3-gold); }
.s3-widget .s3-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.s3-widget .s3-btn { margin-top:12px; }
.s3-code { padding:0; border:0; background:none; }
.s3-code-row { grid-template-columns:1fr; }
.s3-code-row .s3-btn { margin:0; }
.s3-confirm { max-width:400px; text-align:center; }
.s3-confirm-art { display:block; width:110px; height:110px; object-fit:contain; margin:0 auto 14px; }
.s3-confirm h2 { margin-right:0; }
.s3-confirm-cost { margin:16px 0 0; color:var(--s3-gold); font:800 2.3rem var(--display); }
.s3-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.s3-confirm .s3-btn { min-height:50px; }
.s3-toast { border-width:2px; border-radius:14px; grid-template-columns:48px 1fr 44px; width:min(calc(100% - 24px),460px); padding:12px; }
.s3-toast-art { width:48px; height:48px; }
.s3-toast-art img { width:48px; height:48px; }
.s3-toast-x { width:44px; height:44px; }
.s3-toast.is-leaving { opacity:0; animation:none; transition:opacity .18s ease; pointer-events:none; }
.s3-toast-body { min-width:0; overflow-wrap:anywhere; }
.ws-stat { min-width:0; overflow-wrap:anywhere; }
.s3-card .s3-btn { letter-spacing:.01em; }
.s3-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
@keyframes s3-hero-float { 50% { transform:translateY(-6px); } }
@media (max-width:599px) {
  .s3-widget { margin:auto auto 12px; border-radius:18px 18px 10px 10px; }
  .s3-confirm { margin:auto; }
  .s3 .shell { width:calc(100% - 24px); }
  .s3-widget .shell { width:100%; }
  .s3-band .shell { width:calc(100% - 16px); }
  .s3-panel { padding-top:22px; }
}
@media (min-width:900px) and (max-width:1279px) {
  .s3-band .shell { max-width:1000px; }
  .s3-season-hero { max-width:680px; }
  .s3-grid.is-skins { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1280px) {
  .s3-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; max-width:1320px; margin:28px auto 0; padding:0 28px; align-items:start; }
  .s3-band { top:calc(var(--s3-top,82px) + 20px); max-height:calc(100dvh - var(--s3-top,82px) - 40px); border:1px solid #8a693955; border-radius:14px; overflow:auto; padding:8px; }
  .s3-band .shell { width:100%; }
  .s3-top { padding:0; }
  .s3-top-in.s3-plaque { grid-template-columns:minmax(0,1fr); padding:16px; gap:16px; }
  .s3-name { font-size:2rem; }
  .s3-meta { font-size:.75rem; }
  .s3-wallet { flex-direction:row; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid #fff2; }
  .s3-gold b { font-size:1.8rem; }
  .s3-band-tools { padding:10px 4px; }
  .s3-band-tools > span { display:none; }
  .s3-code-chip { width:100%; min-height:40px; font-size:1rem; }
  .s3-tabs ul { display:flex; flex-direction:column; gap:6px; padding:6px 0; }
  .s3-tabs a { flex-direction:row; justify-content:flex-start; padding:14px 18px; gap:16px; min-height:62px; font-size:1.3rem; border-radius:7px; }
  .s3-tabs a[aria-current] { background:linear-gradient(90deg,#f4c55724,transparent); }
  .s3-tabs a > span { display:flex; align-items:center; justify-content:space-between; width:100%; }
  .s3-tabs small { display:inline; font:500 .7rem var(--sans); color:var(--s3-muted); }
  .s3-tabs a.is-soon::after, .s3-tabs a[data-chip="gems"]::after { display:none; }
  .s3-tabs-ink { top:0; bottom:auto; }
  .s3-content > .shell { width:100%; }
  .s3-content .s3-panel { padding-top:12px; }
  .s3-skins-heading { justify-content:flex-start; padding:4px 0 18px; }
  .s3-season-hero { max-width:none; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:24px; row-gap:0; padding:28px 24px; border:1px solid #b98b3c55; border-radius:18px; background:radial-gradient(ellipse at 20% 45%,#442b6b77,transparent 66%),linear-gradient(135deg,#101c36,#070f20); }
  .s3-season-hero .s3-ribbon.is-season { grid-column:1 / -1; margin-bottom:22px; font-size:1.7rem; }
  .s3-season-hero .s3-art { grid-row:2 / 9; grid-column:1; align-self:center; }
  .s3-season-hero h3 { grid-row:3; grid-column:2; font-size:clamp(3.2rem,4.4vw,4.5rem); align-self:end; }
  .s3-season-hero .s3-copy { grid-column:2; }
  .s3-season-hero .s3-season-cta > *, .s3-season-hero .s3-goldbig { grid-column:2; }
  .s3-season-hero .s3-season-cta > .s3-btn { font-size:1.5rem; min-height:64px; }
  .s3-grid.is-skins, .s3-grid.is-gems, .s3-grid.is-packs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s3-grid.is-items, .s3-grid.is-bundles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .s3-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s3-widget { margin:calc(var(--s3-top,82px) + 24px) 32px auto auto; }
  .s3-confirm { margin:auto; }
  .s3-toast { left:auto; right:24px; top:calc(var(--s3-top,82px) + 20px); bottom:auto; transform:none; }
  .s3-toast.is-in { animation:s3-in .4s ease-out; }
}
@media (prefers-reduced-motion:reduce) {
  .s3 *, .s3 *::before, .s3 *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Round 3 (the design, accepted by the studio 22 Oct 2026): the war-token chip and card, and the
   "Not sold - for your information" section. Copied from her round-3 demo. */
.s3-top-in.s3-plaque { grid-template-columns:minmax(0,1fr); gap:8px; }
.s3-wallet { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:start; width:100%; padding-top:8px; border-top:1px solid #ffffff22; }
.r3-gold-wallet { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 8px; }
.r3-token-info { min-width:0; }
.r3-token-toggle { display:flex; align-items:center; gap:7px; width:100%; min-height:44px; padding:5px 7px; border:1px solid #ad8643; border-radius:9px; background:#15283c; color:#ffda70; text-align:left; cursor:pointer; font:700 1.25rem var(--display); }
.r3-token-toggle img { flex:none; object-fit:contain; }
.r3-token-toggle > span { min-width:0; }
.r3-token-label { display:block; color:#c1d0e3; font:500 .75rem/1.3 var(--sans); }
.r3-info-mark { margin-left:auto; display:grid; place-items:center; flex:none; width:18px; height:18px; border:1px solid #7cb7cd; border-radius:50%; color:#a7efff; font:700 .75rem var(--sans); }
.r3-token-toggle:hover { background:#213b55; }
.r3-token-toggle:focus-visible { outline:3px solid #a7efff; outline-offset:3px; }
.r3-token-explanation { margin:8px 0 0; padding:8px; border-left:3px solid #e6ae40; color:#e0eafa; font-size:.875rem; line-height:1.5; text-align:left; background:#102439; }
.r3-token-card { display:block; margin-bottom:24px; padding:16px; border:3px solid #d6aa4d; background:linear-gradient(145deg,#203b54,#102137); box-shadow:inset 0 0 0 2px #071326,0 5px 0 #030b16; }
.r3-token-card .r3-token-toggle { padding:0; border:0; background:transparent; font-size:2rem; }
.r3-token-card .r3-token-label { font-size:.95rem; margin-top:4px; }
.r3-token-caption { margin:12px 0 0; color:#a7efff; font:700 1rem var(--display); text-align:left; }
.s3-tabs a.is-soon::after,.s3-tabs a[data-chip="gems"]::after { content:none; }
.r3-information { padding-block:28px 36px; border-top:2px solid #a7803c; scroll-margin-top:320px; }
.r3-information h2 { margin:8px 0 20px; font:800 clamp(1.6rem,5.9vw,2rem)/1.15 var(--display); color:#ffda70; }
.r3-info-list, .s3-grid.r3-info-list { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0; padding:0; list-style:none; }
.r3-info-row { display:flex; align-items:center; gap:12px; min-width:0; padding:12px 0; border-bottom:1px solid #a3b8d522; font-size:.9rem; color:#c1d0e3; }
.r3-info-row img { flex:none; object-fit:contain; }
.r3-info-row p { margin:0; line-height:1.55; }
.r3-info-row b { color:#edf3ff; }
.r3-info-row.is-gem { display:grid; grid-template-columns:40px minmax(0,1fr); }
@media(min-width:1280px) { .s3-top-in.s3-plaque { padding:12px; } .s3-wallet { gap:6px; } .s3-gold b { font-size:1.45rem; } .s3-gold small { font-size:.75rem; } .r3-token-chip .r3-token-toggle { gap:4px; padding:4px; } .r3-token-chip img { width:22px; height:22px; } .r3-token-chip .r3-info-mark { display:none; } .r3-token-label { font-size:.75rem; } .r3-information { scroll-margin-top:110px; } }
.r3-information[hidden] { display: none; }

/* Round 4 (the studio 22 Oct 2026, the Mac's iPhone SE shots): below the desktop's
   left column the band folds to one line once the shop has scrolled up under
   it (web-shop.js, foldBand). Crest, name, gold and war tokens stay; "Get gold"
   is the Gold tab beside it; the exchange row and its "Have a code?" fold away
   and come back at the top; the six tabs stay on one line, smaller. The
   desktop (1280 and up) never folds. */
@media (max-width:1279px) {
  /* Round 4b (review): the header clips its contents (overflow:hidden), which hid
     the (i) sentence while folded; folded, it shows them and sits above the tabs. */
  .s3-band.is-compact .s3-top { padding-top:4px; overflow:visible; z-index:61; }
  .s3-band.is-compact .s3-top-world { display:none; }
  .s3-band.is-compact .s3-top-in.s3-plaque { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:8px; }
  .s3-band.is-compact .s3-who { position:relative; flex:1 1 auto; gap:7px; }
  /* 44 px to tap, the look unchanged: an invisible pad above and below the
     commander button (30 px) and the war-token toggle (34 px). */
  .s3-band.is-compact .s3-who::before { content:""; position:absolute; left:0; right:0; top:-7px; bottom:-7px; }
  .s3-band.is-compact .r3-token-chip .r3-token-toggle { position:relative; }
  .s3-band.is-compact .r3-token-chip .r3-token-toggle::before { content:""; position:absolute; left:-1px; right:-1px; top:-6px; bottom:-6px; }
  .s3-band.is-compact .s3-who::after { content:none; }
  .s3-band.is-compact .s3-crest { width:26px; height:30px; border-radius:5px 5px 12px 12px; }
  .s3-band.is-compact .s3-name { font-size:1.05rem; }
  .s3-band.is-compact .s3-meta { display:none; }
  .s3-band.is-compact .s3-wallet { display:flex; flex:none; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:6px; width:auto; padding-top:0; border-top:0; }
  .s3-band.is-compact .s3-gold { gap:4px; }
  .s3-band.is-compact .s3-gold .coin { width:16px; height:16px; }
  .s3-band.is-compact .s3-gold b { font-size:1.1rem; }
  .s3-band.is-compact .s3-gold small { font-size:.7rem; }
  .s3-band.is-compact .r3-gold-wallet { flex-wrap:nowrap; }
  .s3-band.is-compact .s3-getgold { display:none; }
  .s3-band.is-compact .s3-mycodes { display:none; }
  .s3-band.is-compact .r3-token-chip { position:relative; }
  .s3-band.is-compact .r3-token-chip .r3-token-toggle { min-height:34px; gap:4px; padding:2px 6px; font-size:1.05rem; }
  .s3-band.is-compact .r3-token-chip img { width:20px; height:20px; }
  .s3-band.is-compact .r3-token-chip .r3-token-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .s3-band.is-compact .r3-token-chip .r3-info-mark { width:16px; height:16px; font-size:.65rem; }
  .s3-band.is-compact .r3-token-chip .r3-token-explanation { position:absolute; z-index:2; top:calc(100% + 6px); right:0; width:min(260px, calc(100vw - 32px)); margin:0; box-shadow:0 12px 28px #000a; }
  .s3-band.is-compact .s3-band-tools { display:none; }
  .s3-band.is-compact .s3-tabs a { min-height:46px; gap:2px; padding:4px 1px; font-size:clamp(.68rem,3.1vw,.85rem); }
  .s3-band.is-compact .s3-tabs svg { width:18px; height:18px; }
  .r3-information { scroll-margin-top:calc(var(--s3-top, 70px) + 130px); }
}

/* Round 4, the receipt (the studio 22 Oct 2026, the Mac's iPhone SE shot): it lives
   in the band, under the tab row, and opens by growing the band, so it pushes
   the shop down and sits over no card and no button. Same words, same ✕, same
   timer. On the desktop it opens at the top of the left column, above the gold
   it has just counted down. */
.s3-receipt { display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease-out); }
.s3-receipt.is-open { grid-template-rows:1fr; }
.s3-receipt-in { min-height:0; overflow:hidden; }
.s3-receipt .s3-toast { position:static; z-index:auto; inset:auto; transform:none; width:auto; max-width:520px; margin:4px auto 8px; box-shadow:0 0 30px -14px rgba(244,213,141,.6); }
.s3-receipt .s3-toast.is-in { animation:none; }
.s3.is-receipt-moving { overflow-anchor:none; }
/* A short tab (Speed, Gems, Account, since the guide became the Info tab) shows the footer
   on screen; Chrome would anchor on it and scroll the shop up under the band. */
.s3.is-receipt-moving ~ .footer { overflow-anchor:none; }
@media (min-width:1280px) {
  .s3-band { display:flex; flex-direction:column; }
  .s3-band > * { flex-shrink:0; }
  .s3-receipt { order:-1; }
  .s3-receipt .s3-toast { margin:0 0 8px; grid-template-columns:40px 1fr 36px; gap:8px; padding:10px; }
  .s3-receipt .s3-toast-art, .s3-receipt .s3-toast-art img { width:40px; height:40px; }
  .s3-receipt .s3-toast-x { width:36px; height:36px; }
}

/* Coming soon (the studio 23 Oct 2026 21:1x: "You can do the chests and all like
   coming soon"): chests and the welcome bundle, at the foot of the Gold and
   Bundles tabs (review, round 2). Shown, never sold: the cards carry the COMING SOON
   ribbon, no button and no link, and they do not lift on hover the way a card
   you can buy does. Rarity colours are the game's own (GearPieceTile). */
.r3-soon { padding-block:28px 8px; border-top:2px solid #a7803c; }
.r3-soon[hidden] { display:none; }
.r3-soon h2 { margin:8px 0 6px; font:800 clamp(1.6rem,5.9vw,2rem)/1.15 var(--display); color:#ffda70; }
.r3-soon-lede { margin:0 0 18px; }
.r3-soon .s3-card:hover { transform:none; border-color:var(--s3-hair); box-shadow:none; }
.s3-grid.is-chests { grid-template-columns:repeat(2,minmax(0,1fr)); }
.s3-card.is-chest { --glow:#f2c75e; gap:6px; padding:36px 12px 12px; }
.s3-card.is-chest .s3-title { font-size:var(--fs-4); }
.s3-card.is-chest .s3-goldbig { justify-content:flex-start; font-size:var(--fs-4); }
.s3-card.is-chest .s3-holds li { padding:6px 0; font-size:var(--fs-1); line-height:1.35; }
.r3-chest-head { display:flex; align-items:center; gap:10px; min-width:0; }
.r3-chest-head > div { min-width:0; }
/* The premium 3D art (the studio 25 Oct 2026: "like Million Lords"): the Equipment
   chest and the Jewelry box side by side on every card, silver tier on the
   regular cards and gold tier on the Big ones, which also get the purple glow. */
.r3-chest-art { position:relative; display:flex; justify-content:center; align-items:flex-end; margin:-6px 0 2px; }
.r3-chest-art::before { content:""; position:absolute; inset:8% 6% 0; border-radius:50%; background:radial-gradient(circle, rgba(242,199,94,.26), transparent 68%); }
.s3-card.is-big .r3-chest-art::before { background:radial-gradient(circle, rgba(139,81,255,.42), rgba(242,199,94,.12) 45%, transparent 70%); }
.r3-chest-art img { position:relative; width:54%; max-width:112px; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.r3-chest-art picture + picture img { margin-left:-8%; }
.r3-odds { margin-top:16px; padding:12px; border:1px solid var(--s3-hair); border-radius:6px; background:var(--s3-card); }
.r3-odds-title { margin:0 0 8px; color:var(--s3-muted); font:700 .72rem var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.r3-odds-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.r3-odds-list li { display:grid; gap:2px; min-width:0; padding:6px 2px; border-top:3px solid var(--r); border-radius:3px; background:rgba(159,178,201,.06); text-align:center; }
.r3-odds-list .is-common { --r:#b9c6d6; } .r3-odds-list .is-rare { --r:#20c8ff; } .r3-odds-list .is-epic { --r:#a88cff; } .r3-odds-list .is-mythic { --r:#f06b8f; } .r3-odds-list .is-legendary { --r:#e8c47a; }
.r3-odds-list b { color:var(--r); font:800 1.1rem/1 var(--display); font-variant-numeric:tabular-nums; }
.r3-odds-list span { color:#c1d0e3; font-size:.68rem; overflow-wrap:anywhere; }
.r3-soon-when { margin:12px 0 0; color:var(--s3-gold); font:700 1rem var(--display); letter-spacing:.03em; }
.r3-soon-sub { margin:28px 0 12px; font:800 1.35rem/1.15 var(--display); color:#ffda70; }
.s3-card.is-welcome { --glow:#8b51ff; }
.s3-card.is-welcome .s3-goldbig { justify-content:flex-start; }
.r3-welcome-art { display:flex; gap:8px; }
.r3-welcome-art img { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
@media (max-width:599px) {
  .r3-chest-head { flex-direction:column; align-items:flex-start; gap:6px; }
  .s3-card.is-chest .s3-title { font-size:1.15rem; }
}
@media (min-width:1100px) {
  .s3-grid.is-chests { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .r3-odds-list span { font-size:.78rem; }
}

/* The Info tab (the studio 23 Oct 2026, through review, round 2): the field guide is a
   seventh tab. The phone bar keeps all seven on one line by taking the labels
   down a size; nothing scrolls sideways. The coming-soon shelf shows only
   under Gold and Bundles. */
.s3:not([data-section="gold"]):not([data-section="bundles"]) .r3-soon { display:none; }
.s3-panel.r3-information { border-top:0; padding-top:var(--sp-5); }
/* A short tab (Speed, Gems, Account) still scrolls far enough for the band to
   fold for good, and keeps the footer off the screen, as when the guide sat
   under every tab: the content is at least one screen tall below the desktop. */
@media (max-width:1279px) { .s3-content { min-height:100svh; } }
@media (max-width:599px) {
  .s3-tabs a { font-size:clamp(.72rem,3.4vw,.95rem); }
}

/* ONE code box (t-20261024-h5azzp, "one box for everything"): under the gold
   packs, the same quiet box the creator and promo boxes were, one field and
   one Apply for any code. The chip in the band jumps here. */
.s3-onecode {
  display: grid; gap: var(--sp-3); max-width: 640px; margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(244, 213, 141, .32); border-radius: 8px; background: rgba(244, 213, 141, .05);
  scroll-margin-top: calc(var(--s3-top, 0px) + 120px);
}
.s3-onecode h3 { margin: 0; font: 800 var(--fs-5)/1.1 var(--display); letter-spacing: .02em; }
.s3-onecode .s3-onecode-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); margin: 0; }
.s3-onecode .s3-onecode-row input { min-height: 48px; font: 800 1.15rem var(--display); letter-spacing: .14em; text-transform: uppercase; }
.s3-onecode .s3-onecode-row .s3-btn { width: auto; min-height: 48px; margin: 0; padding: 0 var(--sp-5); }
.s3-onecode .ws-status { margin: 0; }
.s3-onecode .ws-code-history[hidden] { display: none; }
/* One line of small print under the packs; the paragraphs are in Info. */
.s3-payline { margin: var(--sp-4) 0 0; }
.s3-payline a { color: var(--s3-muted); text-decoration: underline; text-underline-offset: 3px; }
/* The codes on the account, one quiet line under the wallet. */
.s3-mycodes { grid-column: 1 / -1; margin: 0; color: var(--s3-ok); font: 700 var(--fs-1) var(--sans); letter-spacing: .04em; }
.s3-mycodes[hidden] { display: none; }
.s3-onecode .ws-gave[hidden] { display: none; }

/* The SHOP pill's NEW tag is for the rest of the site, not the shop itself. */
.nav-shop[aria-current="page"]::after { display: none; }

/* War tokens: the number in the wallet, nothing explained beside it. */
.s3-tokens { display: flex; align-items: center; gap: 6px; margin: 0; color: #ffda70; font: 700 1.05rem var(--display); white-space: nowrap; }
.s3-tokens[hidden] { display: none; }
.s3-tokens img { flex: none; object-fit: contain; }
.s3-tokens span { color: #c1d0e3; font: 500 .75rem var(--sans); }

/* The account card: a dropdown under the commander's name on a phone, a card
   in the sidebar on a wide screen. */
.s3-acct { display: none; grid-column: 1 / -1; gap: 6px; padding: 12px; border: 1px solid #8a6939; border-radius: 10px; background: #0b1b2e; }
.s3-acct.is-open { display: grid; position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 70; box-shadow: 0 16px 34px #000a; max-width: 360px; }
.s3-acct p { margin: 0; }
.s3-acct-name { font: 800 1.15rem var(--display); letter-spacing: .03em; overflow-wrap: anywhere; }
.s3-acct-wallet { color: var(--s3-gold, #f4d58d); font: 700 .95rem var(--sans); }
.s3-acct-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid #2c4561; border-radius: 8px; color: #e0eafa; background: #10243a; font: 600 .95rem var(--sans); text-align: left; cursor: pointer; }
.s3-acct-line[hidden] { display: none; }
.s3-acct-line::after { content: "ⓘ"; color: #a7efff; }
.s3-acct-line:focus-visible { outline: 3px solid #a7efff; outline-offset: 2px; }
.s3-acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (min-width: 1280px) {
  .s3-acct, .s3-acct.is-open { display: grid; position: static; box-shadow: none; max-width: none; }
}

/* The code overlay: one card, one close. */
.s3-codeinfo { max-width: min(420px, calc(100% - 24px)); }
.s3-codeinfo p { margin: 0 0 10px; color: #e0eafa; line-height: 1.5; }
.s3-codeinfo .s3-btn { margin-top: 6px; }

/* Signed out: the packs and their prices above the sign-in form. */
.s3-public { grid-column: 1 / -1; }
.s3-public[hidden] { display: none; }
.s3-public h2 { margin: 0 0 12px; }
.s3-public-price { margin: 0; color: var(--s3-gold, #f4d58d); font: 800 1.2rem var(--display); }
/* The open dropdown escapes the header's clip and sits over the tabs. */
.s3-top:has(.s3-acct.is-open) { overflow: visible; z-index: 61; }
@media (min-width: 900px) { .s3-public .s3-grid.is-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* A jump to #gold (or any tab) lands the panel's heading below the fixed header (the Mac, 320px). */
.s3-panel, .s3-panel-head { scroll-margin-top: calc(var(--s3-top, 82px) + 12px); }
@media (max-width: 740px) { .s3-panel, .s3-panel-head { scroll-margin-top: calc(var(--s3-top, 70px) + 12px); } }

/* The creator's own panel (t-20261025-etioc8): the eighth tab, only for a
   creator; and, for everyone else, one quiet line under the account card. */
.s3-tabs ul.has-creator { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1279px) { .s3-tabs ul.has-creator a { font-size: .8rem; padding-inline: 0; } }
/* The sidebar keeps the height seven tabs had: eight slightly shorter ones. */
@media (min-width: 1280px) { .s3-tabs ul.has-creator a { min-height: 52px; padding-block: 9px; } }
.s3-acct-line.is-own::after { content: "→"; color: var(--s3-gold, #f4d58d); }
.s3-acct-join { display: block; padding: 2px 2px 0; color: var(--s3-muted, #9fb2c9); font: 500 .85rem/1.4 var(--sans); text-decoration: underline; text-decoration-color: #9fb2c955; text-underline-offset: 3px; }
.s3-acct-join:hover, .s3-acct-join:focus-visible { color: var(--s3-ink, #f7f2e8); }
.s3-acct-join[hidden] { display: none; }
.cr-panel [hidden] { display: none !important; }
.cr-code { display: grid; gap: 6px; padding: 18px; border: 1px solid #b98b3c66; border-radius: 12px; background: radial-gradient(ellipse at 15% 0%, #442b6b55, transparent 70%), #0b1b2e; }
.cr-code .s3-eyebrow { margin: 0; }
.cr-code-big { margin: 0; color: var(--s3-gold); font: 800 clamp(2.2rem, 9vw, 3.2rem)/1 var(--display); letter-spacing: .06em; overflow-wrap: anywhere; }
.cr-link { margin: 0; font-size: var(--fs-2); overflow-wrap: anywhere; }
.cr-link a { color: #a7efff; }
.cr-copy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cr-copy .s3-btn { flex: 0 1 auto; width: auto; min-height: 44px; padding-inline: 18px; }
.cr-code .ws-status { margin: 0; }
.cr-figures { margin-top: 18px; }
.cr-figure-note { color: var(--s3-muted); font-size: .78rem; line-height: 1.35; }
.cr-figure[data-figure="owed"] { border-color: #b98b3c99; }
@media (max-width: 699px) { .cr-figure[data-figure="owed"] { grid-column: 1 / -1; } }
.cr-panel.is-paused .cr-code-big, .cr-panel.is-paused .cr-link { opacity: .5; }
.cr-panel.is-paused .cr-copy .s3-btn:disabled { opacity: .45; cursor: not-allowed; }
.cr-way .ws-status { margin: 0; }
.cr-ways { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 700px) { .cr-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-way { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--s3-hair, #2c4561); border-radius: 10px; background: rgba(7, 18, 34, .7); }
.cr-way h3 { margin: 0; font-size: var(--fs-4); }
.cr-way .s3-note { margin: 0; }
.cr-way .s3-btn { min-height: 48px; }
.cr-way .s3-btn:disabled { opacity: .5; cursor: not-allowed; }
.cr-rules { margin-top: 22px; padding: 16px; border: 1px solid var(--s3-hair, #2c4561); border-radius: 10px; }
.cr-rules h3 { margin: 0 0 8px; font-size: var(--fs-4); }
.cr-rules ul { display: grid; gap: 8px; margin: 0; padding-left: 1.1em; color: #e0eafa; font-size: var(--fs-2); line-height: 1.5; }
/* CF-1319: the agreement line, the payouts and the month table. */
.cr-terms { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #b98b3c99; border-left: 3px solid var(--s3-gold); border-radius: 10px; background: rgba(122, 80, 10, .2); font-size: var(--fs-2); }
.cr-terms a { color: var(--s3-gold); font-weight: 700; }
.cr-terms a::after { content: " →"; }
.cr-payouts, .cr-statements { margin-top: 18px; padding: 16px; border: 1px solid var(--s3-hair, #2c4561); border-radius: 10px; }
.cr-payouts h3, .cr-statements h3 { margin: 0 0 8px; font-size: var(--fs-4); }
.cr-payouts ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-payout { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: var(--fs-2); }
.cr-payout-when { min-width: 7.5em; color: var(--s3-muted); }
.cr-payout-what { color: #e0eafa; font-weight: 700; }
.cr-table-wrap { overflow-x: auto; }
.cr-statements table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.cr-statements th, .cr-statements td { padding: 8px 6px; border-bottom: 1px solid var(--s3-hair, #2c4561); text-align: right; white-space: nowrap; vertical-align: top; }
.cr-statements th:first-child { text-align: left; }
.cr-statements thead th { color: var(--s3-muted); font-weight: 700; }
.cr-statements tbody th { color: #e0eafa; font-weight: 700; }
.cr-statements td small { display: block; }