/* Monsters VS Guards store. Tokens and shared components: brand.css (mvg-agent/docs/design-chart.md). */

main { display: block; outline: none; min-height: 60vh; }
.narrow { max-width: 480px; margin: var(--space-7) auto; }
.empty { color: var(--text-muted); padding: var(--space-5); border: 2px dashed var(--border); border-radius: var(--radius-l); text-align: center; }
.breadcrumbs { font-size: var(--fs-s); color: var(--text-muted); margin: var(--space-5) 0; }
.breadcrumbs a { color: var(--text-muted); }
.lede { font-size: var(--fs-l); color: var(--text-muted); max-width: 62ch; }
.flashes { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
input[type="password"] { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-m); }

/* ---------------------------------------------------------------- the store's own header */
/* Desktop: logo, Cart (left, beside the logo), categories, then currency/theme/account.
   Phones and tablets (< 960px): the ≡ menu, the logo and the account; the categories live in the
   full-screen menu and the cart in the bar fixed at the bottom. */
.store-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(10px); }
.store-header__bar { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; }
.store-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; text-decoration: none; }
.store-header__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-l); color: var(--text); padding: 2px var(--space-2); border-radius: var(--radius-s); background: var(--monster-soft); }
.nav-toggle { display: none; flex: none; text-decoration: none; }
.store-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.currency select { min-height: 36px; width: auto; padding: var(--space-1) var(--space-2); font-weight: 600; }
.currency { display: inline-flex; gap: var(--space-1); }
.currency--single { font-weight: 600; font-size: var(--fs-s); color: var(--text-muted); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); }
.site-link { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--text-muted); font-weight: 600; font-size: var(--fs-s); text-decoration: none; }
.site-link:hover { color: var(--text); background: var(--surface-2); }
.site-link svg { width: 18px; height: 18px; }
.cart-link__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--monster-fill); color: var(--on-monster); font-size: var(--fs-xs); font-weight: 700; }
.account-menu { position: relative; }
.account-menu summary { list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); border: 2px solid var(--border); cursor: pointer; font-weight: 600; background: var(--surface); }
.account-chip:hover, .account-menu[open] .account-chip { border-color: var(--monster-fill); }
.account-chip .head { background: var(--surface-3); }
.account-chip__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__unit { color: var(--text-muted); font-weight: 400; font-size: var(--fs-s); }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-2); z-index: 60; }
.account-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.account-menu__panel a, .account-menu__logout { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; }
.account-menu__panel a:hover, .account-menu__logout:hover { background: var(--surface-2); }
.account-menu__panel form { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2); }
@media (max-width: 959px) {
  .nav-toggle { display: inline-grid; }
  .store-header__bar { gap: var(--space-2); }
  .store-header .wordmark { height: 30px; }
  .account-chip__name, .account-chip__unit, .site-link__label { display: none; }
  .site-link { padding: 0 var(--space-2); }
  .store-header__actions { gap: var(--space-1); }
}
@media (max-width: 480px) { .store-header__label { display: none; } }
@media (max-width: 380px) { .currency, .theme-toggle { display: none; } }

/* ---------------------------------------------------------------- the full-screen store menu (phones) */
.nav-drawer { display: none; }
@media (max-width: 959px) {
  .nav-drawer {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100;
    background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
  }
  .nav-drawer.is-open, .nav-drawer:target {
    transform: none; visibility: visible;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer.is-open, .nav-drawer:target { transition: none; }
}
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.nav-drawer__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-l); }
.nav-drawer__close { text-decoration: none; }
.nav-drawer__body { padding: var(--space-4) var(--gutter) var(--space-7); }
.nav-drawer__heading { font-family: var(--font-ui); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: var(--space-4) 0 var(--space-2); }
.nav-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav-drawer__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; text-decoration: none; }
.nav-drawer__list a:hover { border-color: var(--monster-fill); }
.nav-drawer__list--small a { min-height: 44px; font-family: var(--font-ui); font-size: var(--fs-m); }
.nav-drawer__group { margin-top: var(--space-1); }
.nav-drawer__group summary { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; cursor: pointer; }
.nav-drawer__group[open] summary { margin-bottom: var(--space-1); border-color: var(--monster-fill); }
.nav-drawer__group .nav-drawer__list { padding-left: var(--space-4); }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- the cart bar (phones) */
.cart-bar { display: none; }
@media (max-width: 959px) {
  .cart-bar {
    display: flex; align-items: center; gap: var(--space-3);
    position: fixed; left: var(--gutter); right: var(--gutter); z-index: 40;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    min-height: 56px; padding: 0 var(--space-4);
    border-radius: var(--radius-l); background: var(--monster-fill); color: var(--on-monster);
    box-shadow: var(--shadow-2), var(--bevel); font-weight: 700; text-decoration: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .cart-bar:hover { background: var(--monster-fill-hover); }
  .cart-bar:focus-visible { outline-color: var(--text); }
  .cart-bar svg { width: 22px; height: 22px; flex: none; }
  .cart-bar__count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--on-monster); color: var(--monster-fill); font-size: var(--fs-xs); }
  .cart-bar__total { margin-left: auto; font-weight: 600; }
  .cart-bar__go { margin-left: var(--space-1); }
  /* The footer is in view: the bar steps out of its way (store.js), so nothing covers it. */
  .cart-bar.is-away { transform: translateY(calc(100% + var(--space-5) + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; }
  /* Room below the last products, so the bar never covers a button. */
  body.has-cart-bar main { padding-bottom: calc(56px + var(--space-6) + env(safe-area-inset-bottom)); }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { .cart-bar { transition: none; } }

/* ---------------------------------------------------------------- catalogue */
.store-layout { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-7); }
@media (min-width: 960px) { .store-layout { grid-template-columns: 220px 1fr; gap: var(--space-6); } }
.store-rail { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 960px) { .store-rail { position: sticky; top: 84px; align-self: start; } }
@media (max-width: 959px) { .store-rail { display: none; } }
.store-rail__menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.store-rail__title { padding: var(--space-3) var(--space-4) var(--space-1); margin: 0; font-family: var(--font-display); font-size: var(--fs-l); font-weight: 600; }
.store-rail__menu ul { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); }
.store-rail__menu a { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; }
.store-rail__menu a:hover { background: var(--surface-2); }
.store-rail__count { color: var(--text-faint); font-size: var(--fs-s); }
/* The cosmetic kinds, folded; open, they scroll inside the rail instead of making it longer. */
.store-rail__group { margin: 0 var(--space-2) var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.store-rail__group summary { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); cursor: pointer; font-weight: 600; }
.store-rail__group summary:hover { background: var(--surface-2); }
.store-rail__menu .store-rail__scroll { max-height: min(40vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
/* The cart, at the top of the rail (phones have the cart bar instead). */
.rail-cart { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-l); border: 2px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.rail-cart:hover { border-color: var(--monster-fill); }
.rail-cart svg { width: 20px; height: 20px; flex: none; }
.rail-cart__label { flex: 1; }
.rail-card { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--monster-soft), var(--guard-soft)); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.rail-card span { color: var(--text-muted); font-size: var(--fs-s); }
.rail-card:hover { border-color: var(--monster-fill); }
.store-intro { margin-bottom: var(--space-5); }
.store-intro h1 { margin-bottom: var(--space-2); }
.store-intro__note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-s); }
.shelf { scroll-margin-top: 84px; margin-bottom: var(--space-7); }
.shelf__head { margin-bottom: var(--space-4); }
.shelf__head h2 { margin-bottom: var(--space-1); }
.shelf__head p { color: var(--text-muted); margin: 0; }
.product-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.product-card:hover { border-color: var(--border-strong); }
.product-card__image { display: grid; place-items: center; height: 116px; border-radius: var(--radius-m); background: radial-gradient(closest-side, color-mix(in srgb, var(--mvg-monster) 20%, transparent), transparent) center / 90% 90% no-repeat, var(--surface-2); }
.product-card__image img { width: 96px; height: 96px; }
.product-card__ribbon { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; padding: 2px var(--space-2); border-radius: var(--radius-s); background: var(--monster-fill); color: var(--on-monster); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--bevel); }
.product-card__name { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-l); margin: 0 0 var(--space-1); }
.product-card__name a { color: var(--text); text-decoration: none; }
.product-card__name a:hover { color: var(--monster-ink); }
.product-card__tagline { margin: 0; font-size: var(--fs-s); color: var(--text-muted); }
.product-card__buy { display: grid; gap: var(--space-2); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-weight: 700; font-size: var(--fs-l); }
.price--l { font-size: var(--fs-xl); }
.price--none { font-weight: 400; font-size: var(--fs-s); color: var(--text-muted); }
.price__unit { font-weight: 400; font-size: var(--fs-s); color: var(--text-muted); }
.price__was { color: var(--text-faint); font-weight: 400; font-size: 0.85em; }
.stardust--on-fill { color: inherit; }

.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 2px solid var(--border-strong); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.stepper__btn { height: 40px; border: 0; background: var(--surface-2); color: var(--text); font-size: var(--fs-xl); font-weight: 700; cursor: pointer; }
.stepper__btn:hover:not([disabled]) { background: var(--surface-3); }
.stepper__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.stepper__value { text-align: center; font-weight: 700; }
.cart-control form { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cart-control .stepper { display: grid; }
.cart-control__in { font-weight: 600; color: var(--success); }
.cart-control[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.confirm summary { list-style: none; cursor: pointer; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm__panel { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); }
.confirm__panel p { margin-bottom: var(--space-2); }
.confirm__result { margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------- product page */
.product-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-7); }
@media (min-width: 900px) { .product-page { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); } }
.product-page__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-l); background: radial-gradient(closest-side, color-mix(in srgb, var(--mvg-monster) 22%, transparent), transparent), var(--surface); border: 1px solid var(--border); }
.product-page__art img { width: 60%; height: auto; }
.product-page__buy { display: grid; gap: var(--space-3); max-width: 420px; margin: var(--space-5) 0; }
.product-page__h { font-size: var(--fs-l); margin-top: var(--space-5); }
.grants { padding-left: 1.2em; }

/* ---------------------------------------------------------------- cart */
.cart-page { padding: var(--space-5) 0 var(--space-7); }
.cart-layout { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1fr 360px; align-items: start; } }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.cart-line__image { width: 56px; height: 56px; background: var(--surface-2); border-radius: var(--radius-m); padding: 4px; }
.cart-line__name { font-weight: 700; color: var(--text); text-decoration: none; }
.cart-line__problem { margin: var(--space-1) 0 0; color: var(--danger); font-size: var(--fs-s); }
.cart-line .stepper { width: 140px; }
.cart-line__total { margin: 0; font-weight: 700; text-align: right; min-width: 6ch; }
.cart-line__remove { grid-column: 5; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .cart-line__image { width: 48px; height: 48px; }
  .cart-line .stepper { grid-column: 2; width: 100%; max-width: 140px; grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .cart-line__total { grid-column: 3; grid-row: 1; }
  .cart-line__remove { grid-column: 3; }
}
.cart-summary h2 { font-size: var(--fs-xl); }
.totals { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.totals div { display: flex; justify-content: space-between; gap: var(--space-4); }
.totals dd { margin: 0; font-weight: 600; }
.totals__discount { color: var(--success); }
.totals__total { border-top: 1px solid var(--border); padding-top: var(--space-2); font-size: var(--fs-l); font-weight: 700; }
.checkout-form { display: grid; gap: var(--space-3); }

/* ---------------------------------------------------------------- the promo banner
   A running event's discount code under the header (partials/promo_banner.html): black on white, then
   white on black, scrolling by; the track is two equal halves, so moving it by one half loops. */
.promo-banner { overflow: hidden; background: #000000; border-bottom: 1px solid var(--border); }
.promo-banner__track { display: flex; width: max-content; animation: promo-scroll 40s linear infinite; }
.promo-banner:hover .promo-banner__track { animation-play-state: paused; }
.promo-banner__half { display: flex; }
.promo-banner__item { padding: 6px var(--space-5); font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.promo-banner__item:nth-child(odd) { background: #FFFFFF; color: #000000; }
.promo-banner__item:nth-child(even) { background: #000000; color: #FFFFFF; }
@keyframes promo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-banner__track { animation: none; } }

/* ---------------------------------------------------------------- orders, sign-in */
.order-page, .login-page { max-width: 720px; padding: var(--space-6) 0 var(--space-7); }
.order-summary { margin: var(--space-5) 0; }
.order-summary__ref { font-size: var(--fs-s); color: var(--text-muted); }
.order-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); }
.order-lines li, .order-summary__total { display: flex; justify-content: space-between; gap: var(--space-4); }
.order-summary__total { font-weight: 700; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.order-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Waiting for Tebex's confirmation: a spinner beside the message (a static ring under reduced motion). */
.pending-status { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.pending-status .lede { margin-bottom: var(--space-2); }
.spinner { flex: none; inline-size: 32px; block-size: 32px; margin-top: 6px; border-radius: 50%;
  border: 4px solid var(--monster-soft); border-top-color: var(--monster-fill); animation: mvg-spin 0.9s linear infinite; }
.spinner--stopped { animation: none; border-top-color: var(--border-strong); }
@keyframes mvg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-color: var(--monster-fill); border-right-color: var(--monster-soft); }
}
.refund-offer__confirm { margin-top: var(--space-2); }
.site-footer__language { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.site-footer__language label { display: grid; gap: var(--space-1); }
.legal-translation-notice { margin-bottom: var(--space-5); }
/* The sign-in card: the quick ways, "or", the code's three numbered steps, the warning. */
.login-page { max-width: 560px; }
.login-card { display: grid; gap: var(--space-4); }
.login-card h1 { margin: 0; }
.login-quick { display: grid; gap: var(--space-2); }
.login-quick p { margin: 0; }
.login-or { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--text-muted); font-size: var(--fs-s); }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.login-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.login-steps li { counter-increment: step; position: relative; display: grid; justify-items: start; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 40px); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); }
.login-steps li::before { content: counter(step); position: absolute; left: var(--space-3); top: var(--space-3); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-s); background: var(--monster-fill); color: var(--on-monster); font-weight: 800; box-shadow: var(--bevel); }
.login-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.login-code code { font-size: var(--fs-l); font-weight: 700; padding: var(--space-1) var(--space-2); background: var(--surface); border-radius: var(--radius-s); letter-spacing: 0.04em; white-space: nowrap; }
.login-chat-button { color: var(--success); white-space: nowrap; }
@media (max-width: 560px) { .login-code code { font-size: var(--fs-m); } }
.login-waiting { display: inline-flex; align-items: center; gap: var(--space-2); }
.spinner--s { inline-size: 16px; block-size: 16px; margin: 0; border-width: 3px; }
.login-warning { margin: 0; text-align: center; }
.login-new { margin: 0; }

/* ---------------------------------------------------------------- account */
.account-layout { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-7); }
@media (min-width: 900px) { .account-layout { grid-template-columns: 230px 1fr; gap: var(--space-6); } }
.account-nav { align-self: start; display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.account-nav__who { display: flex; align-items: center; gap: var(--space-3); }
.account-nav__who div { display: grid; }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.account-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text-muted); text-decoration: none; font-weight: 600; }
.account-nav a:hover { background: var(--surface-2); color: var(--text); }
.account-nav a[aria-current="page"] { background: var(--monster-soft); color: var(--monster-ink); }
@media (max-width: 899px) { .account-nav ul { display: flex; flex-wrap: wrap; } }
.account-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.account-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: var(--space-4) 0; }
.account-cards h2 { font-size: var(--fs-l); }
.balance-card__amount { font-size: var(--fs-2xl); margin: 0; }
.balance-inline { font-size: var(--fs-l); margin: 0; }
.account-section { margin-top: var(--space-6); }
.account-section h2 { font-size: var(--fs-xl); }
.rank-list { list-style: none; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; }
.ledger__change--in { color: var(--success); font-weight: 700; }
.ledger__change--out { color: var(--danger); font-weight: 700; }
.purchase-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.purchase-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.order-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.order-card__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.order-card__meta { margin: var(--space-1) 0 0; }
.order-card p:last-child { margin-bottom: 0; }
.freebie-card { display: flex; gap: var(--space-5); align-items: center; }
.freebie-card__art { width: 96px; height: 96px; flex: none; }
.freebie-card h2 { font-size: var(--fs-xl); }
@media (max-width: 480px) { .freebie-card { flex-direction: column; align-items: flex-start; } }
.numbered { padding-left: 1.3em; }

/* ---------------------------------------------------------------- legal, errors, admin */
.legal { max-width: 76ch; padding: var(--space-6) 0 var(--space-7); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
.prose h3 { font-size: var(--fs-l); margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.4em; }
.error-page { padding: var(--space-8) 0; text-align: center; }
.error-page__code { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--monster-ink); margin: 0; }
.error-page .lede { margin-inline: auto; }
/* The admin pages: a side menu, the page beside it (a row of links on phones). */
.admin-layout { padding: var(--space-5) 0 var(--space-7); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.admin-nav { position: sticky; top: var(--space-4); display: grid; gap: var(--space-1); }
.admin-nav__title { margin: 0 0 var(--space-2); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.admin-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; }
.admin-nav a:hover { background: var(--surface-2); }
.admin-nav a[aria-current="page"] { background: var(--monster-soft); color: var(--monster-ink); font-weight: 600; }
.admin-nav .admin-nav__back { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-s); }
.admin-main { min-width: 0; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .admin-nav { position: static; display: flex; overflow-x: auto; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
  .admin-nav__title { display: none; }
  .admin-nav a { white-space: nowrap; }
  .admin-nav .admin-nav__back { margin-top: 0; }
}
.admin-stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-stats .card { display: grid; gap: var(--space-1); }
.admin-stats strong { font-size: var(--fs-2xl); }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }
.inline-form input { min-height: 36px; }
.link-confirm { display: flex; gap: var(--space-4); align-items: flex-start; }

/* ---------------------------------------------------------------- cart lines, checkout, consent */
.cart-line--problem { border-color: var(--warning); }
.cart-control__problem { margin: 0; font-size: var(--fs-s); color: var(--text-muted); }
.cart-control__error { margin: var(--space-2) 0 0; font-size: var(--fs-s); color: var(--danger); }
.cart-line .cart-control__error { grid-column: 1 / -1; }
.consent { padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-s); line-height: 1.45; }
.consent input { width: 22px; height: 22px; }
.consent-record { margin: var(--space-4) 0; }
.consent-record h2 { font-size: var(--fs-l); }
.consent-record__text { margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--monster-fill); background: var(--surface-2); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.consent-details summary { cursor: pointer; color: var(--text-muted); }
.subscribe-summary { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.subscribe-summary__item { display: flex; gap: var(--space-4); align-items: center; }
.subscribe-summary__item img { width: 64px; height: 64px; background: var(--surface-2); border-radius: var(--radius-m); padding: 4px; }
.session-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.session-list li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }

/* ---------------------------------------------------------------- sign-in options */
.btn--discord { --btn-bg: #5865F2; --btn-fg: #FFFFFF; --btn-border: #5865F2; justify-content: center; }
.btn--discord:hover { background: #4752C4; border-color: #4752C4; }
.btn--discord svg { width: 20px; height: 20px; }
.btn--microsoft { --btn-bg: #2F2F2F; --btn-fg: #FFFFFF; --btn-border: #2F2F2F; justify-content: center; }
.btn--microsoft:hover { background: #1F1F1F; border-color: #1F1F1F; }
.btn--microsoft svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- money and Stardust, side by side */
/* Two currencies, never one figure: money is a plain number, Stardust is the gold ✦ amount
   (.stardust, brand.css). The summary has one block per currency. */
.summary-block + .summary-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.summary-block h3 { font-family: var(--font-ui); font-size: var(--fs-s); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 var(--space-2); }
.summary-block .totals { margin-bottom: var(--space-2); }
.totals dt { color: var(--text-muted); }
.totals__total dt, .totals__subtotal dt { color: var(--text); }
.totals__subtotal { border-top: 1px dashed var(--border); padding-top: var(--space-2); font-weight: 700; }
.totals--stardust dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice--stardust { background: var(--stardust-soft); border-color: transparent; margin: var(--space-2) 0 0; }
.cart-summary .notice { margin: var(--space-3) 0; }
.cart-summary .checkout-form { margin-top: var(--space-4); }
.cart-line__pay { margin: var(--space-1) 0 0; }
.cart-control__state { margin: 0 0 var(--space-1); }
.cart-control__hint { margin: var(--space-2) 0 0; }
.cart-control a.cart-control__in { text-decoration: none; }
.cart-control a.cart-control__in:hover { text-decoration: underline; }
.cart-control .confirm + form { margin-top: var(--space-2); }
.cart-control form .btn--block { flex: 1; }
.store-closed { margin: 0 0 var(--space-4); }

/* ---------------------------------------------------------------- the Stardust top-up */
.topup { margin: 0 0 var(--space-3); }
.topup__need { margin: 0 0 var(--space-2); font-weight: 600; }
.topup__options { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.topup-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; }
.topup-option:hover { border-color: var(--border-strong); }
.topup-option:has(input:checked) { border-color: var(--monster-fill); background: var(--monster-soft); }
/* The gold of a Stardust figure is too faint on the chosen option's soft purple in the light theme
   (4.1:1): there it takes the text colour. The dark theme keeps the gold. */
.topup-option { --topup-figure: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topup-option { --topup-figure: var(--stardust); } }
:root[data-theme="dark"] .topup-option { --topup-figure: var(--stardust); }
.topup-option:has(input:checked) .stardust { color: var(--topup-figure); }
.topup-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.topup-option input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--monster-fill); }
.topup-option__body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.topup-option__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.topup-option__price { font-weight: 700; font-size: var(--fs-l); }
.topup-option__what { font-weight: 600; }
.topup__more summary { cursor: pointer; padding: var(--space-2) 0; color: var(--link); font-weight: 600; }
.topup__more[open] summary { margin-bottom: var(--space-1); }
.topup__more .topup-option + .topup-option { margin-top: var(--space-2); }
.topup__more > p { margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------- what the account already has */
.shelf__yours { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-l); }
.shelf__yours-title { font-family: var(--font-ui); font-size: var(--fs-s); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 var(--space-2); }
.shelf__yours-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.shelf__yours-list li { display: inline-flex; align-items: center; gap: var(--space-2); }
.shelf__yours-list img { width: 32px; height: 32px; }
.shelf__yours-list a { color: var(--text); font-weight: 600; }
.account-cards__sub { font-family: var(--font-ui); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }
.rank-list a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- the order page */
.order-line { align-items: flex-start; }
.order-line__what { display: grid; gap: 2px; min-width: 0; }
.order-line__state { color: var(--text-muted); }
.order-line__price { white-space: nowrap; font-weight: 600; }
.order-line--refused .order-line__what > span:first-child { text-decoration: line-through; color: var(--text-muted); }
.order-summary__total + .order-summary__total { border-top: 0; padding-top: 0; }
.order-stardust { margin: var(--space-4) 0; }
.order-stardust h2 { font-size: var(--fs-l); }
.order-stardust p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- admin: store status */
.admin-facts { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.admin-facts div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--space-3); }
.admin-facts dt { color: var(--text-muted); }
.admin-facts dd { margin: 0; }
@media (max-width: 640px) { .admin-facts div { grid-template-columns: 1fr; gap: 0; } }

/* ---------------------------------------------------------------- admin: statistics */
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.stats-period { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.stats-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.stats-tabs a { padding: var(--space-1) var(--space-3); border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.stats-tabs a[aria-current="page"] { background: var(--monster-fill); border-color: var(--monster-fill); color: var(--on-monster); }
.stats-step { display: flex; align-items: center; gap: var(--space-3); }
.stats-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.stats-form label { display: grid; gap: var(--space-1); font-size: var(--fs-s); color: var(--text-muted); }
.stats-pair { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .stats-pair { grid-template-columns: 1fr; } }
.admin-stats .card .small { line-height: 1.35; }
.stats-uses { min-width: 140px; }
.stats-uses .num { display: inline-block; min-width: 3ch; margin-right: var(--space-2); }
.rank-bar { display: inline-block; width: 100px; height: 8px; vertical-align: middle; }
.stats-rank { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.stats-rank li { display: grid; grid-template-columns: minmax(0, 1fr) 6ch 120px; gap: var(--space-3); align-items: center; }
.stats-rank .rank-bar { width: 100%; }
.stats-details { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
.stats-details summary { cursor: pointer; }

/* Charts (services/charts.py): fixed hues that read on both themes; the teams in their own colours. */
:root { --chart-1: #9B4BC4; --chart-2: #2F7FD0; --chart-3: #D8962B; --chart-4: #2E9E6B; --chart-5: #D2556B; --chart-6: #6B6BD6; --chart-7: #3AA7B8; --chart-8: #8C8C8C; }
.chart { margin: var(--space-3) 0; }
.chart__svg { display: block; width: 100%; height: auto; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__tick, .chart__label { font-size: 11px; fill: var(--text-muted); }
.chart__pie { display: block; width: 160px; height: 160px; margin-bottom: var(--space-3); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-s); }
.chart__legend--list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 2px; vertical-align: baseline; }
.chart-c1 { fill: var(--chart-1); background: var(--chart-1); }
.chart-c2 { fill: var(--chart-2); background: var(--chart-2); }
.chart-c3 { fill: var(--chart-3); background: var(--chart-3); }
.chart-c4 { fill: var(--chart-4); background: var(--chart-4); }
.chart-c5 { fill: var(--chart-5); background: var(--chart-5); }
.chart-c6 { fill: var(--chart-6); background: var(--chart-6); }
.chart-c7 { fill: var(--chart-7); background: var(--chart-7); }
.chart-c8 { fill: var(--chart-8); background: var(--chart-8); }
.chart-guards { fill: var(--guard-fill); background: var(--guard-fill); }
.chart-monsters { fill: var(--monster-fill); background: var(--monster-fill); }
.chart-none { fill: var(--border-strong); background: var(--border-strong); }

/* Cosmetic rarities (the Minecraft server says which song has which; the names are the catalogue's).
   Text on a soft background, readable in both themes. */
:root {
  --rarity-particle: #5B6370; --rarity-particle-soft: #EEF0F3;
  --rarity-radiant: #1E7D3A; --rarity-radiant-soft: #E3F6E8;
  --rarity-pulsar: #1666B0; --rarity-pulsar-soft: #E2EFFB;
  --rarity-quasar: #8A3DB5; --rarity-quasar-soft: #F3E7FA;
  --rarity-event-horizon: #A2520A; --rarity-event-horizon-soft: #FDEEDC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rarity-particle: #C9CED6; --rarity-particle-soft: #24272C;
    --rarity-radiant: #6FE08A; --rarity-radiant-soft: #15301D;
    --rarity-pulsar: #4FB6FF; --rarity-pulsar-soft: #12283A;
    --rarity-quasar: #D79BF2; --rarity-quasar-soft: #2C1838;
    --rarity-event-horizon: #FFC56B; --rarity-event-horizon-soft: #33230F;
  }
}
:root[data-theme="dark"] {
  --rarity-particle: #C9CED6; --rarity-particle-soft: #24272C;
  --rarity-radiant: #6FE08A; --rarity-radiant-soft: #15301D;
  --rarity-pulsar: #4FB6FF; --rarity-pulsar-soft: #12283A;
  --rarity-quasar: #D79BF2; --rarity-quasar-soft: #2C1838;
  --rarity-event-horizon: #FFC56B; --rarity-event-horizon-soft: #33230F;
}
.rarity--particle { background: var(--rarity-particle-soft); color: var(--rarity-particle); }
.rarity--radiant { background: var(--rarity-radiant-soft); color: var(--rarity-radiant); }
.rarity--pulsar { background: var(--rarity-pulsar-soft); color: var(--rarity-pulsar); }
.rarity--quasar { background: var(--rarity-quasar-soft); color: var(--rarity-quasar); }
.rarity--event_horizon { background: var(--rarity-event-horizon-soft); color: var(--rarity-event-horizon); }
.product-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: var(--fs-xs); }
.facts { padding-left: 1.2em; }
.odds td.num, .odds th { white-space: nowrap; }
.odds__none { opacity: 0.55; }
/* A phone: the headings may wrap and a rarity's words go under its name, so the four columns fit. */
@media (max-width: 560px) {
  .odds th, .odds td { padding: var(--space-2); }
  .odds thead th { white-space: normal; font-size: var(--fs-xs); }
  .odds th[scope="row"] .small, .odds td .small { display: block; margin-top: 2px; white-space: normal; }
}
.activity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.activity-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.owned-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.owned-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------------------------------------------------------------- the app layer (app.js) */
.nav-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 0; background: var(--monster-fill); opacity: 0; transition: width 0.4s ease, opacity 0.3s ease; pointer-events: none; }
.nav-progress.is-loading { width: 70%; opacity: 1; transition: width 2.5s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.1s ease; }
main#main:focus { outline: none; }
.toasts { position: fixed; z-index: 210; left: 50%; bottom: var(--space-5); transform: translateX(-50%); display: grid; gap: var(--space-2); width: min(440px, calc(100vw - 2 * var(--gutter))); pointer-events: none; }
.toast { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); font-weight: 600; transition: opacity 0.5s ease, transform 0.5s ease; }
.toast--ok { border-left: 4px solid var(--success); }
.toast--error { border-left: 4px solid var(--danger); }
.toast--leaving { opacity: 0; transform: translateY(8px); }
@media (max-width: 959px) { body.has-cart-bar .toasts { bottom: 88px; } }

/* the catalogue's filter */
.store-filter { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.store-filter__search input { width: 100%; min-height: 44px; font-size: var(--fs-m); }
.store-filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.store-filter__count { margin: 0; }
.chip { min-height: 34px; padding: var(--space-1) var(--space-3); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--monster-fill); border-color: var(--monster-fill); color: var(--on-monster); }
.chip--rarity[aria-pressed="false"] { background: var(--surface-2); }
.chip--rarity[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the cart panel */
.cart-panel { position: fixed; inset: 0; z-index: 150; }
.cart-panel__backdrop { position: absolute; inset: 0; background: rgb(10 6 14 / 0.45); }
.cart-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: grid; grid-template-rows: auto auto 1fr auto; background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-2); animation: sheet-in 0.22s ease-out; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.cart-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.cart-panel__head h2 { margin: 0; font-size: var(--fs-xl); }
.cart-panel__state { margin: 0; padding: var(--space-3) var(--space-5) 0; }
.cart-panel__lines { list-style: none; margin: 0; padding: var(--space-3) var(--space-5); overflow-y: auto; display: grid; gap: var(--space-3); align-content: start; }
.cart-panel__line { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.cart-panel__info { display: grid; min-width: 0; }
.cart-panel__info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-panel__stepper { display: inline-grid; grid-template-columns: 34px 28px 34px; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; }
.cart-panel__stepper .stepper__btn { height: 34px; }
.cart-panel__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); display: grid; gap: var(--space-3); background: var(--surface); }
.cart-panel__summary { margin: 0; font-weight: 700; font-size: var(--fs-l); }
.cart-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
body.cart-panel-open, body.reel-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cart-panel__sheet { animation: none; } }

/* checkout */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); padding: 0; font-size: var(--fs-s); color: var(--text-muted); counter-reset: step; }
.steps li { counter-increment: step; display: inline-flex; align-items: center; gap: var(--space-2); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-weight: 700; font-size: var(--fs-xs); }
.steps li + li { padding-left: var(--space-4); background: linear-gradient(var(--border-strong), var(--border-strong)) left center / 12px 2px no-repeat; }
.steps .steps__done::before { background: var(--success); color: #fff; }
.steps__current { color: var(--text); font-weight: 700; }
.steps .steps__current::before { background: var(--monster-fill); color: var(--on-monster); }
.checkout-page { padding-bottom: var(--space-7); }
.checkout-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.checkout-review__head h2 { margin: 0; }
.review-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.review-line { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.review-line__image { width: 48px; height: 48px; background: var(--surface-2); border-radius: var(--radius-s); }
.review-line__total { font-weight: 700; }
.review-line__problem { grid-column: 2 / -1; margin: 0; color: var(--danger); font-size: var(--fs-s); }

/* the account's dashboard */
.dash-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--space-5); }
.dash-tile { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); color: var(--text); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color 0.15s ease, transform 0.15s ease; }
.dash-tile:hover { border-color: var(--monster-fill); transform: translateY(-1px); }
.dash-tile__label { font-size: var(--fs-s); font-weight: 600; color: var(--text-muted); }
.dash-tile__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; }
.dash-tile__note { margin: 0; }

/* the inventory */
.inventory { padding: var(--space-5) 0 var(--space-7); }
.inventory__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.inventory__head h1 { margin: 0; }
.inventory__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; }
.inventory-tabs { display: flex; gap: var(--space-1); overflow-x: auto; margin-bottom: var(--space-5); border-bottom: 2px solid var(--border); scrollbar-width: none; }
.inventory-tabs a { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--text-muted); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.inventory-tabs a:hover { color: var(--text); }
.inventory-tabs a[aria-current] { color: var(--text); border-bottom-color: var(--monster-fill); }
.inventory-tabs__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: var(--fs-xs); }
.inventory-tabs__count--hot { background: var(--monster-fill); color: var(--on-monster); }
/* A phone shows the four sections as a 2 x 2 block: a scrolling row hid the last one (and its own page's tab). */
@media (max-width: 560px) {
  .inventory-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); overflow: visible; border-bottom: 0; }
  .inventory-tabs a { justify-content: center; padding: var(--space-2) var(--space-3); margin: 0; border: 1px solid var(--border); border-radius: var(--radius-m); }
  .inventory-tabs a[aria-current] { border-color: var(--monster-fill); background: var(--monster-soft); color: var(--monster-ink); }
}
.inventory-cosmetics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .inventory-cosmetics { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.inventory-categories ul { list-style: none; margin: 0; padding: var(--space-2); display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
@media (min-width: 900px) { .inventory-categories { position: sticky; top: 84px; } }
@media (max-width: 899px) { .inventory-categories ul { display: flex; overflow-x: auto; } .inventory-categories li { flex: none; } }
.inventory-categories a { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; }
.inventory-categories a:hover { background: var(--surface-2); }
.inventory-categories a[aria-current] { background: var(--monster-soft); color: var(--monster-ink); }
.inventory-categories__name { font-weight: 700; }
.inventory-grid-wrap__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.inventory-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.inventory-grid__empty { grid-column: 1 / -1; }
.item-card { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-3); text-align: center; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--rarity-edge, var(--border)); border-radius: var(--radius-l); }
.item-card--on { box-shadow: 0 0 0 2px var(--success); }
.item-card__link { display: grid; justify-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; width: 100%; }
.item-card__kind { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.item-card__image { width: 64px; height: 64px; }
.item-card__image--none { border: 2px dashed var(--border-strong); border-radius: var(--radius-m); }
.item-card__name { font-weight: 700; line-height: 1.2; }
.rarity-edge--particle { --rarity-edge: var(--rarity-particle); }
.rarity-edge--radiant { --rarity-edge: var(--rarity-radiant); }
.rarity-edge--pulsar { --rarity-edge: var(--rarity-pulsar); }
.rarity-edge--quasar { --rarity-edge: var(--rarity-quasar); }
.rarity-edge--event_horizon { --rarity-edge: var(--rarity-event-horizon); }
.inventory-unavailable { max-width: 640px; }
.inventory-section { margin-bottom: var(--space-6); }
.crate-grid, .freebie-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.crate-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: start; }
.crate-card__art img { width: 96px; height: 96px; }
.crate-card__name { margin: 0 0 var(--space-1); font-size: var(--fs-xl); }
.crate-card__keys { margin: 0 0 var(--space-2); color: var(--text-muted); }
.crate-card__count { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--text); }
.crate-card__odds { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crate-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* A phone: the crate and its keys side by side, then the odds and the buttons the card's whole width. */
@media (max-width: 560px) {
  .crate-card { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; }
  .crate-card__body { display: contents; }
  .crate-card__art { grid-row: span 2; }
  .crate-card__art img { width: 64px; height: 64px; }
  .crate-card__name, .crate-card__keys { grid-column: 2; margin: 0; }
  .crate-card__body > :not(.crate-card__name):not(.crate-card__keys) { grid-column: 1 / -1; margin: 0; }
  .crate-card__actions .btn { flex: 1; justify-content: center; }
}
.freebie-collect__count { font-size: var(--fs-l); }
.gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gift-row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--rarity-edge, var(--border)); border-radius: var(--radius-m); }
.gift-row__image { width: 48px; height: 48px; background: var(--surface-2); border-radius: var(--radius-s); }
.gift-row__info p { margin: var(--space-1) 0 0; }
.gift-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.gift-send { display: flex; gap: var(--space-2); }
.gift-send select { min-height: 36px; }
@media (max-width: 640px) { .gift-row { grid-template-columns: 48px 1fr; } .gift-row__actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* the reel: a picture of what the server drew */
.reel-stage { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: var(--gutter); background: rgb(10 6 14 / 0.72); }
.reel-stage[hidden] { display: none; }
.reel-stage__panel { width: min(920px, 100%); display: grid; gap: var(--space-4); text-align: center; }
.reel-stage__title { margin: 0; font-size: var(--fs-xl); }
.reel { position: relative; overflow: hidden; height: 156px; border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.reel__marker { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--stardust); box-shadow: 0 0 12px var(--stardust); }
.reel__track { list-style: none; margin: 0; padding: 12px 0; display: flex; gap: 10px; will-change: transform; }
.reel-card { flex: none; width: 118px; height: 130px; display: grid; justify-items: center; align-content: center; gap: var(--space-2); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-bottom: 5px solid var(--rarity-edge, var(--border)); border-radius: var(--radius-m); }
.reel-card img { width: 64px; height: 64px; }
.reel-card__blank { width: 64px; height: 64px; }
.reel-card__name { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.reel-card.is-won { box-shadow: 0 0 0 3px var(--rarity-edge), 0 0 26px var(--rarity-edge); transform: scale(1.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.reel-stage__prize { padding: var(--space-3); border-radius: var(--radius-m); }
.reel-stage__won { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.rarity-glow--particle { background: var(--rarity-particle-soft); }
.rarity-glow--radiant { background: var(--rarity-radiant-soft); }
.rarity-glow--pulsar { background: var(--rarity-pulsar-soft); }
.rarity-glow--quasar { background: var(--rarity-quasar-soft); }
.rarity-glow--event_horizon { background: var(--rarity-event-horizon-soft); box-shadow: 0 0 28px var(--rarity-event-horizon); }
.reel-stage__actions { display: flex; justify-content: center; gap: var(--space-3); }
@media (max-width: 640px) { .reel { height: 130px; } .reel-card { width: 96px; height: 106px; } .reel-card img { width: 48px; height: 48px; } }

/* ------------------------------------------------------------------ previews (product page)
   An MVP song's audio, and a cosmetic's YouTube video loaded on a click (services/previews.py). */
.preview-audio { display: block; width: 100%; max-width: 480px; margin: 0 0 var(--space-3); }
.preview-video {
  display: grid; place-items: center; gap: var(--space-2); aspect-ratio: 16 / 9; max-width: 640px; margin: 0 0 var(--space-3);
  padding: var(--space-4); text-align: center; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface-2);
}
.preview-video:has(.preview-video__frame) { padding: 0; border: 0; }
.preview-video__frame { width: 100%; height: 100%; border: 0; border-radius: var(--radius-l); }