/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PN-STORE REBUILD · 2026-08-15 — the store, taken back to craft.
   CEO (08-15): "total dissatisfaction with the store, and everything in it." This sheet is the
   visual rebuild of every store state (shelf · detail · try-on · top-up · receipt · Pro rail),
   loaded LAST in play.html so it wins by source order — no !important arms race, no element
   catch-alls, every selector scoped to a store class or the store view.

   The doctrine (apple-design craft layer, SUBORDINATE to STYLE_SOURCE_OF_TRUTH + UX_RULES):
   · Whitespace is the luxury signal — sections breathe on an 8pt rhythm; nothing shouts twice.
   · One accent moment per object; type + space carry hierarchy, not boxes-on-boxes.
   · The Vault stays the designed dark boutique seam (recorded, CEO-74) — but every Finder
     window on top of it follows the shell (lg-light porcelain in PLATINUM), AA in both.
   · Deletion, not dimming: gloss layers, glossy orbs, the neon PAID sticker and per-card
     reassurance sublines are REMOVED here or in the same-dated script-01.js pass.
   · Every tappable ≥44px. No element selectors — class/id scoped only.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE FRONT DESK — wallet identity + ONE machined utility rail ─────────────────────────
   At 390 the old plinth wrapped five loose pills into three ragged rows. Now: identity row
   (currencies left, Back right), then the four utilities as one full-width segmented rail —
   hairline-divided cells of the same object (the Alternation Law: a rail never invents itself). */
body[data-view="store"] .pn-store-topbar--v3{
  display:grid; grid-template-columns:1fr auto; align-items:start; gap:12px 10px;
}
body[data-view="store"] .pn-store-topbar--v3 .pn-store-close{
  min-height:44px; align-self:center;
}
/* 2×2 at phone, one row of four from 640px — never an overflowing or stranded pill row. The 1px
   gap over the container's hairline fill draws the dividers, so the rail reads as ONE object. */
body[data-view="store"] .pn-store-util{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  justify-content:stretch;
  border:1px solid rgba(255,255,255,.16); border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
}
@media (min-width:640px){
  body[data-view="store"] .pn-store-util{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
/* the segments: uniform quiet cells — the rail is the object, not the buttons */
body[data-view="store"] .pn-store-util .pn-btn{
  margin:0; min-width:0; min-height:46px; border:0; border-radius:0; box-shadow:none; filter:none;
  background:rgba(8,11,16,.94); color:#eaf1fb; font-size:11.5px; letter-spacing:.04em;
  clip-path:none;
}
body[data-view="store"] .pn-store-util .pn-btn:hover{
  background:rgba(28,33,42,.96); transform:none;
}
body[data-view="store"] .pn-store-util .vv-badge{ position:static; margin-left:6px }

/* ── 2 · RHYTHM — whitespace as the luxury signal ─────────────────────────────────────────────
   Sections step from a 28-44px drumbeat to a 56-88px stride; the masthead gets air before the
   first shelf. Restraint axis: nothing added — only space. */
body[data-view="store"] .pn-store-sec{ margin-top:clamp(56px,8vw,88px) }
body[data-view="store"] .pn-store-mast{ margin:26px 0 10px }
body[data-view="store"] .pn-store-mast .pn-body{ font-size:15px; line-height:1.55 }
body[data-view="store"] .pn-head{ margin-bottom:18px }

/* ── 3 · THE SHELF — every pack a premium object ──────────────────────────────────────────────
   The card anatomy stays (mood plate → copy → price row); this pass disciplines the price row
   into a single baseline-aligned object and gives owned/short states one quiet voice. */
body[data-view="store"] .pn-pack-pricerow{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
}
body[data-view="store"] .pn-pack-price{
  font-family:var(--pn-disp); font-size:24px; line-height:1; color:var(--mvc-fg,#eef3fb);
  font-variant-numeric:tabular-nums;
}
body[data-view="store"] .pn-pack-price small{
  display:block; margin-top:5px; font:500 10px var(--pn-mono); letter-spacing:.06em;
  color:var(--mvc-fg-55,rgba(238,243,251,.62));
}
/* the honest Pro promo tag (spec §2.2.1) — one quiet mono note, never a badge shouting */
body[data-view="store"] .pn-protag{
  font:700 10px var(--pn-mono); letter-spacing:.08em; text-transform:uppercase;
  color:#e8c15a;
}
/* affordability: the gap is a number, stated once, with a 44px route to the money */
body[data-view="store"] .pn-afford{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:12px 0 0;
  padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-left:2px solid var(--p2,#f97316);
  border-radius:2px; background:rgba(6,9,14,.45);
}
body[data-view="store"] .pn-afford-go{ min-height:44px; padding-inline:14px }

/* ── 4 · PRO TEASER RAIL — the locked shelf (spec §1.2.2) ─────────────────────────────────────
   Three sealed objects on black glass: gold hairlines, a pressed PRO·SEASON 1 seal, one line of
   want each. The whole card is the tap target (≥44px by construction); its own footer says when
   it can be bought — deliberate merchandising, never a dead button. */
body[data-view="store"] .pn-pro-grid{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
body[data-view="store"] .pn-pro-card{
  position:relative; isolation:isolate; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; min-height:172px;
  padding:20px 18px 16px; border:1px solid rgba(232,193,90,.28); border-radius:2px;
  background:
    linear-gradient(160deg, rgba(20,16,8,.92), rgba(8,10,14,.96)),
    rgba(6,9,14,.9);
  color:#eef3fb; transition:transform .35s var(--pn-ease,ease), border-color .35s;
}
body[data-view="store"] .pn-pro-card:hover{ transform:translateY(-3px); border-color:rgba(232,193,90,.55) }
body[data-view="store"] .pn-pro-card:focus-visible{ outline:2px solid #e8c15a; outline-offset:2px }
/* one restrained motif per object: a gold top hairline, brightest on the golden roster card */
body[data-view="store"] .pn-pro-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,193,90,.75), transparent);
}
body[data-view="store"] .pn-pro-card.is-gold{
  border-color:rgba(232,193,90,.5);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(232,193,90,.16), transparent 60%),
    linear-gradient(160deg, rgba(26,20,8,.94), rgba(8,10,14,.97));
}
/* the seal — a pressed mark, not a sticker: hairline ring, mono, no glow */
body[data-view="store"] .pn-pro-seal{
  position:absolute; top:14px; right:14px; width:58px; height:58px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1px solid rgba(232,193,90,.55); box-shadow:inset 0 0 0 3px rgba(232,193,90,.12);
  transform:rotate(8deg);
}
body[data-view="store"] .pn-pro-seal b{ font:900 12px/1 var(--pn-sans); letter-spacing:.08em; color:#e8c15a }
body[data-view="store"] .pn-pro-seal i{ font:700 6.5px/1 var(--pn-mono); font-style:normal; letter-spacing:.14em; color:rgba(232,193,90,.8) }
body[data-view="store"] .pn-pro-eye{
  font:700 9.5px/1 var(--pn-mono); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,193,90,.85); padding-right:70px;
}
body[data-view="store"] .pn-pro-name{
  font-family:var(--pn-disp); font-style:italic; font-size:clamp(26px,4.6vw,34px); line-height:.92;
  letter-spacing:-.02em; text-transform:uppercase; color:#f6f2e4; padding-right:64px;
}
body[data-view="store"] .pn-pro-line{
  font:400 13px/1.5 var(--pn-sans); color:rgba(238,243,251,.78); max-width:34ch;
  text-transform:none; letter-spacing:0;   /* the shelf's uppercase chrome stops at the copy line */
}
body[data-view="store"] .pn-pro-open{
  margin-top:auto; padding-top:12px;
  font:700 10.5px/1 var(--pn-mono); letter-spacing:.14em; text-transform:uppercase; color:#e8c15a;
}
body[data-view="store"] .pn-pro-when{ margin-top:14px; max-width:60ch; color:var(--mvc-fg-70,rgba(238,243,251,.72)) }
body[data-view="store"] .pn-pro-when b{ color:#e8c15a }

/* the Pro promo SHEET (inside the theme-following Finder window — ink via --lg-ink, AA both shells) */
.vv-win .pn-pro-list{ margin:16px 0 4px }
.vv-win .pn-pro-row{
  display:grid; grid-template-columns:118px 1fr; gap:10px; padding:11px 0; align-items:baseline;
  border-top:1px solid var(--lg-hair,rgba(255,255,255,.12));
}
.vv-win .pn-pro-k{
  font:800 10px/1.5 var(--pn-mono); letter-spacing:.12em; color:var(--lg-ink,#eef3fb);
}
.vv-win .pn-pro-v{
  font:400 12.5px/1.5 var(--pn-sans);
  color:color-mix(in srgb, var(--lg-ink,#eaf1fb) 76%, transparent);
}
.vv-win .pn-pro-prize{
  display:flex; flex-direction:column; gap:5px; margin:14px 0 0; padding:14px 16px;
  border:1px solid rgba(232,193,90,.45); border-radius:2px;
  background:linear-gradient(160deg, rgba(232,193,90,.14), transparent 70%);
}
.vv-win .pn-pro-prize b{ font:900 13px/1.2 var(--pn-sans); letter-spacing:.04em; color:var(--lg-ink,#eef3fb) }
.vv-win .pn-pro-prize span{ font:400 12px/1.5 var(--pn-sans); color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 74%,transparent) }
.vv-win .pn-pro-honest{
  margin:12px 0 0; font:500 11px/1.6 var(--pn-mono); letter-spacing:.02em;
  color:color-mix(in srgb, var(--lg-ink,#eaf1fb) 62%, transparent); max-width:52ch;
}

/* ── 5 · BUREAU DE CHANGE — the flagship pricing rail ─────────────────────────────────────────
   Four tiers, one rail; the £ alone on the button; the 2,600 anchor led by structure (taller,
   accent hairline) not by claims. 2-up at phone, 4-up wide. */
body[data-view="store"] .pn-bureau-earn{ max-width:62ch; margin-bottom:6px; opacity:.85 }
body[data-view="store"] .pn-price-rail{
  display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;
  margin-top:6px;
}
@media (min-width:840px){
  body[data-view="store"] .pn-price-rail{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
body[data-view="store"] .pn-price{
  display:flex; flex-direction:column; gap:7px; padding:18px 14px 14px;
  border:1px solid rgba(255,255,255,.14); border-radius:2px; background:rgba(6,9,14,.55);
}
body[data-view="store"] .pn-price.is-feat{
  border-color:color-mix(in srgb, var(--p2,#f97316) 55%, transparent);
  background:linear-gradient(180deg, rgba(249,115,22,.09), transparent 46%), rgba(6,9,14,.62);
}
body[data-view="store"] .pn-price.is-feat::before{
  content:""; display:block; height:2px; margin:-18px -14px 10px;
  background:var(--p2,#f97316);
}
body[data-view="store"] .pn-price-tier{
  font:700 9.5px/1 var(--pn-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mvc-fg-55,rgba(238,243,251,.6));
}
body[data-view="store"] .pn-price.is-feat .pn-price-tier{ color:var(--p2,#f97316) }
body[data-view="store"] .pn-price-coins{
  font-family:var(--pn-disp); font-size:clamp(26px,5vw,32px); line-height:1;
  color:var(--mvc-fg,#eef3fb); font-variant-numeric:tabular-nums;
}
body[data-view="store"] .pn-price-coins .cur{ font-size:.55em; color:var(--pn-coin-face,#f97316); margin-left:3px }
body[data-view="store"] .pn-price-rate{
  font:500 10px/1 var(--pn-mono); letter-spacing:.04em; color:var(--mvc-fg-55,rgba(238,243,251,.6));
  font-variant-numeric:tabular-nums;
}
body[data-view="store"] .pn-price-note{
  font:500 10.5px/1.45 var(--pn-mono); color:var(--mvc-fg-70,rgba(238,243,251,.74));
}
body[data-view="store"] .pn-price-buy{ margin-top:auto; min-height:46px; font-size:15px; font-variant-numeric:tabular-nums }
body[data-view="store"] .pn-bureau-safe{
  display:flex; align-items:flex-start; gap:9px; margin:16px 0 0; max-width:62ch;
  font:500 11px/1.55 var(--pn-mono); color:var(--mvc-fg-70,rgba(238,243,251,.72));
  text-align:left;   /* the old bureau centred this line; a trust note reads, it doesn't announce */
}
body[data-view="store"] .pn-bureau-safe svg{ width:15px; height:15px; flex:none; margin-top:1px; stroke:var(--p2,#f97316); fill:none; stroke-width:1.8 }
body[data-view="store"] .pn-bureau-legal{ margin-top:10px; max-width:62ch; opacity:.66 }
body[data-view="store"] .pn-bureau-legal a{ color:var(--p2,#f97316) }

/* ── 6 · THE TOP-UP WINDOW — de-glossed ───────────────────────────────────────────────────────
   The glossy orange orbs and bevelled £ slabs read as arcade chrome, not a bureau. The row is
   now a ledger line: flat coin mark, figures, one flat price button. Same DOM, same handlers. */
.vv-win .vv-pack{ gap:12px; padding:13px 14px }
.vv-win .vv-pack-orb{
  width:38px; height:38px; border-radius:2px; background:none;
  border:1px solid color-mix(in srgb, var(--pn-coin-face,#f97316) 60%, transparent);
  box-shadow:none; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--pn-coin-face,#f97316);
}
/* flatten the £ button INSIDE the bureau window only — the lit-glass primary stays canon elsewhere */
.vv-win .vv-pack .lg-btn--primary{
  background:var(--pn-coin-face,var(--accent,#FF2E88)); color:#0b1c30; text-shadow:none;
  --lg-shadow:none; --lg-inset:none; box-shadow:none; border-color:transparent;
  font-variant-numeric:tabular-nums;
}
.vv-win .vv-pack .lg-btn--primary::before,
.vv-win .vv-pack .lg-btn--primary::after{ content:none }
.vv-win .vv-pack .lg-btn--primary:hover{
  background:var(--pn-coin-face,var(--accent,#FF2E88)); color:#0b1c30; filter:brightness(1.06); transform:none;
}

/* ── 7 · THE RECEIPT — a printed object, settled in ink (#111) ────────────────────────────────
   The paper stays; the neon-green sticker and the lit-glass CTA go. The stamp becomes a pressed
   red-ink impression (the same species as the dossier's pn-stamp — one stamp language in the
   product), figures print in till ink, and the actions are flat plates on the paper. */
.vv-win .vv-receipt .vv-paid{
  position:absolute; top:48px; right:26px; z-index:3; transform:rotate(-8deg);
  padding:5px 12px 4px; background:none; border:2px solid rgba(154,44,26,.75); border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(154,44,26,.28);
  font:900 15px/1 var(--pn-mono,monospace); letter-spacing:.22em; color:rgba(154,44,26,.88);
  animation:none; text-shadow:none; filter:none;
  -webkit-mask-image:none; mask-image:none;
}
/* till figures print in ink, not in the window's porcelain — the 08-15 illegibility fix */
.vv-win .vv-receipt .vv-totals{ border:0; background:none; padding:8px 0 0 }
.vv-win .vv-receipt .vv-totals span{ color:#241d15; font:700 12px/1.7 var(--pn-mono,monospace); letter-spacing:.06em }
.vv-win .vv-receipt .vv-totals i{ color:#6b6053 }
.vv-win .vv-receipt .vv-thanks{ color:#5d5245; font:600 11px/1.7 var(--pn-mono,monospace); letter-spacing:.12em; text-transform:uppercase; text-align:center }
.vv-win .vv-receipt .vv-simbadge{ color:#8a5a12; display:block; text-align:center; margin-top:10px;
  font:700 9.5px/1.5 var(--pn-mono,monospace); letter-spacing:.18em }
/* actions: flat plates on paper — the ink slab carries the primary, the ghost is a ruled line */
.vv-win .vv-receipt .vv-foot{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.vv-win .vv-receipt .vv-foot .lg-btn{
  min-height:46px; flex:1 1 auto; box-shadow:none; --lg-shadow:none; --lg-inset:none;
  text-shadow:none; filter:none;
}
.vv-win .vv-receipt .vv-foot .lg-btn::before,
.vv-win .vv-receipt .vv-foot .lg-btn::after{ content:none }
.vv-win .vv-receipt .vv-foot .lg-btn--primary{
  background:#241d15; color:#f6efe2; border-color:#241d15;
}
.vv-win .vv-receipt .vv-foot .lg-btn--primary:hover{
  background:#2c2419; color:#f6efe2; transform:none; filter:none;
}
.vv-win .vv-receipt .vv-foot .lg-btn--ghost{
  background:none; color:#241d15; border:1px solid rgba(36,29,21,.45);
}
@media (max-width:480px){
  .vv-win .vv-receipt .vv-foot{ flex-direction:column }
  .vv-win .vv-receipt .vv-foot .lg-btn{ width:100% }
  .vv-win .vv-receipt .vv-paid{ top:40px; right:18px; font-size:13px }
}

/* ── 8 · GLOBAL STORE POLISH ──────────────────────────────────────────────────────────────────
   The one-tap try-on affordance and detail sheet keep their behaviour; footers align to the
   8pt rhythm and every store CTA clears the 44px floor at every width. */
body[data-view="store"] .pn-card .pn-btn--sm{ min-height:44px }
body[data-view="store"] .pn-spec-foot .pn-btn{ min-height:44px }
body[data-view="store"] .pn-store-tile .pn-btn{ min-height:44px }
#pn-detail .pn-detail-foot .pn-btn{ min-height:48px }

/* ══ QA48 SEV-3 batch (2026-08-15) — tap floors + honesty on the Vault chrome ═══════════════════
   Every rule here answers a MEASURED line in qa/2026-08-14_mobile-arcade-vault-purchase.md. */
/* S3-1: detail close was 34×34; compare toggles 163×31. Visuals unchanged, targets floored. */
.pn-detail-x{ min-width:44px; min-height:44px; }
[data-cmp-set]{ min-height:44px; }
/* S3-2: basket row-remove 34×26, "Keep shopping" 135×38, window red dot 28 short-side. The dot
   keeps its 12px paint and gains an invisible 44px hit disc (the M3 mac-dot law). */
.vv-x{ min-width:44px; min-height:44px; }
#vv-ov [data-vv-close2]{ min-height:44px; }
#vv-ov .lg-dot.red{ position:relative; }
#vv-ov .lg-dot.red::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; }
/* S3-3: bureau legal links were 88×16 / 47×16 — padding lifts the target, type stays quiet. */
.vv-legal a{ display:inline-block; padding:12px 6px; }
/* S3-4: the ONE field that identifies the purchase was the one that clipped ("NOIR CL…").
   Let the name wrap to two lines before any ellipsis. */
#vv-ov .vv-line b{ white-space:normal; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 8 · PACKS WITHDRAWN FROM SALE (CEO, 2026-08-16) ──────────────────────────────────────────
   "Remove the option to buy packs from the vault for now." The shelf stays — the worlds are still
   worth looking at and still previewable — so what this styles is ABSENCE done deliberately:
   a pressed NOT-FOR-SALE seal borrowed wholesale from the Pro rail's vocabulary (same geometry,
   same hairline ring, steel instead of gold), and a price slot that reads as withdrawn rather
   than as free or broken.

   Steel, not red. Red is the game's error colour and nothing here is an error — this is a shelf
   with a product off it, which is an ordinary thing for a shop to say. Nothing in this block is
   an overlay or a disabled-state grey: a greyed control with no explanation is precisely what the
   brief forbids, and the explanation lives in .pn-head-note above the grid. */
body[data-view="store"] .pn-pack-seal{
  position:absolute; top:14px; right:14px; width:58px; height:58px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1px solid rgba(203,212,224,.5); box-shadow:inset 0 0 0 3px rgba(203,212,224,.1);
  background:rgba(8,10,14,.55); backdrop-filter:blur(2px); transform:rotate(-8deg); z-index:2;
}
body[data-view="store"] .pn-pack-seal b{ font:900 11px/1 var(--pn-sans); letter-spacing:.06em; color:#cbd4e0 }
body[data-view="store"] .pn-pack-seal i{ font:700 8px/1 var(--pn-mono); font-style:normal; letter-spacing:.18em; color:rgba(203,212,224,.82) }

/* The reason, said once, under the shelf head — where a price list would normally promise value. */
body[data-view="store"] .pn-head-note{
  margin-top:10px; max-width:62ch;
  font:400 13px/1.6 var(--pn-sans); letter-spacing:0; text-transform:none;
  color:var(--mvc-fg-70,rgba(238,243,251,.74));
}
/* The price slot, withdrawn. Same size and weight as a real price so the card's rhythm holds. */
body[data-view="store"] .pn-pack-nfs{
  font:800 15px/1 var(--pn-mono); letter-spacing:.1em; color:#cbd4e0;
}
body[data-view="store"] .pn-pack-card.is-withdrawn{ border-color:rgba(203,212,224,.24) }

/* The detail sheet: the sentence sits ABOVE the foot, so it is read before the button is reached. */
#pn-detail .pn-detail-nfs{
  margin:0; padding:14px 20px 0;
  font:400 13px/1.6 var(--pn-sans); color:var(--mvc-fg-70,rgba(238,243,251,.76)); max-width:60ch;
}
#pn-detail .dp-num--nfs{ font:800 15px/1 var(--pn-mono); letter-spacing:.1em; color:#cbd4e0 }