/*
PLAYRS CLUB
STORE PURCHASE UI v2

One physical release.
Ten numbered units.
One standard checkout spine.
*/

:root {
  /* V7.1: these used to be hardcoded to a permanent light palette,
     with html/body background forced !important -- the main cause of
     STORE's reported dark-mode contrast failure. They now map onto
     the shared platform tokens (css/playrs-theme-v1.css) so this
     panel follows DARK/LIGHT like the rest of STORE and the platform,
     keeping the previous light values as fallbacks. */
  --playrs-store-bg: var(--playrs-bg, #f1f1ef);
  --playrs-store-fg: var(--playrs-text, #111);
  --playrs-store-muted: var(--playrs-text-muted, rgba(17,17,17,.46));
  --playrs-store-soft: var(--playrs-hover, rgba(17,17,17,.08));
  --playrs-store-line: var(--playrs-border, rgba(17,17,17,.14));
}

html,
body {
  background:
    var(--playrs-store-bg) !important;
}

body {
  min-height:
    100vh;
}

#playrs-store-system-state-v2,
.playrs-store-system-state-v2 {
  display:
    none !important;
}

#catalog {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-height:
    0 !important;

  padding:
    0 !important;

  margin:
    0 !important;
}

#catalog > * {
  box-sizing:
    border-box;
}

.playrs-purchase-v2 {
  width:
    min(1180px, calc(100vw - 96px));

  margin:
    56px auto 120px;

  color:
    var(--playrs-store-fg);

  font-family:
    inherit;
}

.playrs-purchase-v2 * {
  box-sizing:
    border-box;
}

.playrs-purchase-v2-header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    end;

  gap:
    32px;

  padding:
    0 0 22px;

  border-bottom:
    1px solid
    var(--playrs-store-line);
}

.playrs-purchase-v2-kicker {
  margin:
    0 0 14px;

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    .28em;

  text-transform:
    uppercase;

  color:
    var(--playrs-store-muted);
}

.playrs-purchase-v2-title {
  margin:
    0;

  max-width:
    780px;

  font-size:
    clamp(30px, 4vw, 58px);

  line-height:
    .98;

  letter-spacing:
    -.045em;

  font-weight:
    400;
}

.playrs-purchase-v2-stock {
  padding-bottom:
    6px;

  white-space:
    nowrap;

  font-size:
    9px;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;

  color:
    var(--playrs-store-muted);
}

.playrs-purchase-v2-body {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, .55fr);

  gap:
    72px;

  padding-top:
    42px;
}

.playrs-purchase-v2-product {
  min-width:
    0;
}

.playrs-purchase-v2-description {
  max-width:
    560px;

  margin:
    0 0 52px;

  font-size:
    13px;

  line-height:
    1.8;

  letter-spacing:
    .02em;

  color:
    var(--playrs-store-muted, rgba(17,17,17,.67));
}

.playrs-purchase-v2-section-head {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    24px;

  margin:
    0 0 16px;

  padding:
    0 0 12px;

  border-bottom:
    1px solid
    var(--playrs-store-line);
}

.playrs-purchase-v2-section-title {
  margin:
    0;

  font-size:
    10px;

  font-weight:
    400;

  letter-spacing:
    .24em;

  text-transform:
    uppercase;
}

.playrs-purchase-v2-section-note {
  margin:
    0;

  font-size:
    9px;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;

  color:
    var(--playrs-store-muted);
}

.playrs-hat-grid-v2 {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  border-top:
    1px solid
    var(--playrs-store-line);

  border-left:
    1px solid
    var(--playrs-store-line);
}

.playrs-hat-unit-v2 {
  position:
    relative;

  display:
    flex;

  min-height:
    122px;

  flex-direction:
    column;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    24px;

  padding:
    18px;

  margin:
    0;

  appearance:
    none;

  border:
    0;

  border-right:
    1px solid
    var(--playrs-store-line);

  border-bottom:
    1px solid
    var(--playrs-store-line);

  border-radius:
    0;

  background:
    transparent;

  color:
    var(--playrs-store-fg);

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.playrs-hat-unit-v2:hover:not([disabled]),
.playrs-hat-unit-v2:focus-visible:not([disabled]) {
  background:
    var(--playrs-store-soft, rgba(17,17,17,.045));

  outline:
    none;
}

.playrs-hat-unit-v2[data-selected="true"] {
  background:
    var(--playrs-store-fg, #111);

  color:
    var(--playrs-store-bg);
}

.playrs-hat-unit-v2[disabled] {
  cursor:
    default;

  opacity:
    .28;
}

.playrs-hat-unit-number {
  font-size:
    17px;

  line-height:
    1;

  letter-spacing:
    -.01em;
}

.playrs-hat-unit-state {
  font-size:
    8px;

  line-height:
    1;

  letter-spacing:
    .2em;

  text-transform:
    uppercase;

  opacity:
    .55;
}

.playrs-purchase-v2-checkout {
  position:
    sticky;

  top:
    84px;

  align-self:
    start;
}

.playrs-purchase-v2-checkout-head {
  padding:
    0 0 14px;

  margin:
    0 0 22px;

  border-bottom:
    1px solid
    var(--playrs-store-line);

  font-size:
    10px;

  font-weight:
    400;

  letter-spacing:
    .24em;

  text-transform:
    uppercase;
}

.playrs-purchase-v2-summary {
  display:
    grid;

  gap:
    0;

  margin-bottom:
    28px;
}

.playrs-purchase-v2-row {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    20px;

  padding:
    13px 0;

  border-bottom:
    1px solid
    var(--playrs-store-soft);

  font-size:
    9px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.playrs-purchase-v2-row span:first-child {
  color:
    var(--playrs-store-muted);
}

.playrs-selected-unit-v2 {
  color:
    var(--playrs-store-fg);
}

.playrs-purchase-v2-action {
  display:
    block;

  width:
    100%;

  min-height:
    54px;

  padding:
    0 20px;

  border:
    1px solid
    var(--playrs-store-fg, #111);

  border-radius:
    0;

  background:
    var(--playrs-store-fg, #111);

  color:
    var(--playrs-store-bg);

  font:
    inherit;

  font-size:
    9px;

  letter-spacing:
    .24em;

  text-transform:
    uppercase;

  cursor:
    pointer;
}

.playrs-purchase-v2-action:hover:not([disabled]) {
  background:
    transparent;

  color:
    var(--playrs-store-fg, #111);
}

.playrs-purchase-v2-action[disabled] {
  border-color:
    var(--playrs-store-line);

  background:
    transparent;

  color:
    var(--playrs-store-muted);

  cursor:
    default;
}

.playrs-purchase-v2-message {
  min-height:
    32px;

  margin:
    14px 0 0;

  font-size:
    8px;

  line-height:
    1.65;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

  color:
    var(--playrs-store-muted);
}

.playrs-purchase-v2-meta {
  display:
    grid;

  gap:
    8px;

  margin-top:
    44px;

  padding-top:
    18px;

  border-top:
    1px solid
    var(--playrs-store-line);

  font-size:
    8px;

  line-height:
    1.6;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;

  color:
    var(--playrs-store-muted);
}

.playrs-purchase-v2-error {
  padding:
    40px 0;

  border-top:
    1px solid
    var(--playrs-store-line);

  border-bottom:
    1px solid
    var(--playrs-store-line);
}

.playrs-purchase-v2-error-title {
  margin:
    0 0 10px;

  font-size:
    12px;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;
}

.playrs-purchase-v2-error-copy {
  margin:
    0 0 22px;

  font-size:
    10px;

  letter-spacing:
    .1em;

  color:
    var(--playrs-store-muted);
}

.playrs-purchase-v2-retry {
  padding:
    10px 0;

  border:
    0;

  border-bottom:
    1px solid
    currentColor;

  border-radius:
    0;

  background:
    transparent;

  font:
    inherit;

  font-size:
    9px;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  cursor:
    pointer;
}

@media (max-width: 900px) {

  .playrs-purchase-v2 {
    width:
      min(100% - 44px, 720px);

    margin-top:
      38px;
  }

  .playrs-purchase-v2-header {
    grid-template-columns:
      1fr;
  }

  .playrs-purchase-v2-stock {
    padding-bottom:
      0;
  }

  .playrs-purchase-v2-body {
    grid-template-columns:
      1fr;

    gap:
      52px;
  }

  .playrs-hat-grid-v2 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .playrs-purchase-v2-checkout {
    position:
      static;
  }

}

@media (max-width: 520px) {

  .playrs-purchase-v2 {
    width:
      calc(100% - 28px);

    margin:
      26px auto 80px;
  }

  .playrs-purchase-v2-title {
    font-size:
      34px;
  }

  .playrs-purchase-v2-body {
    padding-top:
      30px;

    gap:
      42px;
  }

  .playrs-purchase-v2-description {
    margin-bottom:
      36px;
  }

  .playrs-hat-unit-v2 {
    min-height:
      102px;

    padding:
      14px;
  }

}

/* Shared presentation; inventory and purchase behavior remain in purchase-v2. */
* { box-sizing:border-box; }
body { margin:0; color:var(--playrs-store-fg); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
a { color:inherit; }
.store-room { max-width:1180px; margin:auto; padding:28px 24px 80px; }
.store-links { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:10px; letter-spacing:.1em; }
.store-links a { padding:14px 0; text-decoration:none; min-height:44px; }
.store-intro { margin:80px 0 48px; max-width:640px; }
.store-intro h1 { font-size:clamp(28px,5vw,54px); font-weight:400; letter-spacing:-.05em; }
.store-intro p { line-height:1.7; }
.store-eyebrow { font-size:10px; letter-spacing:.12em; line-height:1.6; opacity:.72; }
.store-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-block:1px solid var(--playrs-store-line); padding:24px 0; }
.store-filters label { font-size:9px; letter-spacing:.14em; }
.store-filters select { display:block; width:100%; min-height:44px; padding:10px 4px; margin-top:12px; background:transparent; color:inherit; border:0; border-bottom:1px solid var(--playrs-store-line); font:inherit; }
.featured-release { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.5fr); align-items:end; gap:32px; padding:56px 0; border-bottom:1px solid var(--playrs-store-line); }
.featured-release h2 { font-size:clamp(20px,3vw,34px); max-width:22ch; font-weight:400; line-height:1.3; }
.featured-release p { font-size:11px; line-height:1.7; }
.playrs-digital-preview { display:block; width:100%; max-width:220px; height:auto; margin:0 0 20px; border:1px solid var(--playrs-store-line); }
.release-context { letter-spacing:.12em; }
.release-link { font-size:10px; letter-spacing:.1em; line-height:1.8; padding:14px 0; }
.store-empty { padding:64px 0; font-size:11px; letter-spacing:.12em; }
.store-room .playrs-purchase-v2 { width:100%; margin:48px 0 80px; }
body[data-store-scope="world"] { --playrs-store-bg:#111110; --playrs-store-fg:#e7e3d9; --playrs-store-muted:#aaa79e; --playrs-store-line:#3b3a36; --playrs-store-soft:#23221f; }
@media(max-width:600px) { .store-room { padding:20px 18px 48px; } .store-filters { gap:12px; } .featured-release { grid-template-columns:1fr; } .store-intro { margin-top:52px; } }
/* Smallest phones (SE-class, ~320px): three equal filter columns leave
   too little room for "ALL UNIVERSES" at the select's native font size,
   truncating it mid-word. Stack instead of shrinking further. */
@media(max-width:340px) { .store-filters { grid-template-columns:1fr; gap:16px; } }
/* PLAYRS-SCRUB-CUBE: owned fragment -- player spans the card */
.featured-release--owned { grid-template-columns:1fr; align-items:start; }
.playrs-owned-player { max-width:560px; width:100%; }
.playrs-owned-player-host:empty { display:none; }
/* player follows the room palette (world rooms are always dark) */
.playrs-owned-player {
  --playrs-text: var(--playrs-store-fg);
  --playrs-text-secondary: var(--playrs-store-fg);
  --playrs-text-muted: var(--playrs-store-muted);
  --playrs-text-faint: color-mix(in srgb, var(--playrs-store-muted) 55%, var(--playrs-store-bg));
  --playrs-bg: var(--playrs-store-bg);
  --playrs-border-strong: var(--playrs-store-muted);
  --playrs-hover: var(--playrs-store-soft);
  --playrs-focus: var(--playrs-store-fg);
}