/* Ohara storefront - "Night Market" design system (run 2 redesign).
   Static layer: tokens, layout, components. Motion and the reveal theatre
   live in motion.css; choreography lives in theatre.js. See web/DESIGN.md.
   System fonts only and no remote assets - the CSP allows 'self' only.
   admin.html shares this sheet (topbar, panels, tables, forms, chips). */

/* ============================== 1. TOKENS ============================== */
:root{
  --vz:1; /* O26: the big-screen zoom (section "O26 - every screen size" at the end) */
  color-scheme:dark;
  /* run 18 (lead-dev steer): restrained One Piece card-game cues as inspiration only - a deep navy sea, warm
     parchment text, ONE crimson-to-amber action and ONE muted straw-hat gold accent; the tier colours keep
     their order (slate, sea blue, violet, gold) but calmer. Contrast checked by var/run18/tools/contrast.py:
     body 16.8:1, secondary 10.8:1, muted 6.3:1, action text 4.8:1, every tier chip >= 7:1, focus ring 8.6:1. */
  /* ink - a deep navy sea */
  --ink-0:#0a0e18;--ink-1:#10162a;--ink-2:#161e36;--ink-3:#1f2944;--ink-4:#2c3858;
  --line:rgba(214,204,176,.12);--line-2:rgba(214,204,176,.24);
  --text:#f4efe4;--text-2:#c8c1b0;--text-3:#9a9383;
  /* signal - the one action colour (open / confirm) */
  --signal:#de4a33;--signal-2:#e8902e;--signal-ink:#1a0602;
  /* rarity tiers - the colour system is the ladder */
  --base:#9ca6ba;--base-g:rgba(156,166,186,.30);
  --plus:#56b8de;--plus-g:rgba(86,184,222,.34);
  --hit:#ab90f4;--hit-g:rgba(171,144,244,.40);
  --chase:#e2b443;--chase-2:#d97a3a;--chase-g:rgba(226,180,67,.50);
  /* status */
  --ok:#4cc79a;--warn:#e9a440;--bad:#e8706b;--hazard:#e2b443;
  /* type - Bahnschrift is the Windows system DIN; condensed display, tabular numerals */
  --display:Bahnschrift,'DIN Alternate','DIN Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,monospace;
  --fs-xs:11px;--fs-s:13px;--fs-m:15px;--fs-l:19px;--fs-xl:26px;--fs-2xl:40px;--fs-3xl:clamp(58px,8.4vw,124px);
  /* space + shape */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  --r-s:6px;--r-m:12px;--r-l:20px;--r-card:4.8%/3.4%;
  --page:1320px;
  /* motion (used by motion.css and theatre.js) */
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-io:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-1:120ms;--t-2:220ms;--t-3:420ms;--t-4:800ms;
}
[data-tier]{--tier-c:var(--base);--tier-g:var(--base-g)}
[data-tier="plus"]{--tier-c:var(--plus);--tier-g:var(--plus-g)}
[data-tier="hit"]{--tier-c:var(--hit);--tier-g:var(--hit-g)}
[data-tier="chase"]{--tier-c:var(--chase);--tier-g:var(--chase-g)}

/* ============================== 2. BASE ============================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;overflow-x:clip;background:var(--ink-0);color:var(--text);font:400 var(--fs-m)/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
code,kbd{font-family:var(--mono);font-size:12px;color:#c8cbef;word-break:break-all}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.05}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-l)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.kicker,.eyebrow{font:700 var(--fs-xs)/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin:0 0 var(--s2)}
.muted{color:var(--text-2);font-size:var(--fs-s);line-height:1.6}
.fine-print{font-size:var(--fs-xs);line-height:1.55;color:var(--text-3);margin:var(--s3) 0 0}
:focus-visible{outline:2px solid var(--plus);outline-offset:3px}

/* ============================== 3. PRIMITIVES ============================== */
button{font:inherit;color:inherit}
button.ghost,#quote-button,.chip-btn,.toggle{background:transparent;border:1px solid var(--line-2);color:var(--text);border-radius:999px;padding:9px 16px;font:600 var(--fs-s)/1 var(--sans);cursor:pointer;transition:border-color var(--t-2),background var(--t-2),color var(--t-2)}
button.ghost:hover,#quote-button:hover:not(:disabled),.chip-btn:hover,.toggle:hover{border-color:var(--text-2);background:rgba(255,255,255,.05)}
#quote-button:disabled,button.ghost:disabled{opacity:.4;cursor:not-allowed}
.toggle[aria-pressed="true"]{border-color:var(--plus);color:var(--plus)}

.open-button{position:relative;width:100%;border:0;border-radius:var(--r-m);padding:18px 64px 18px 22px;display:grid;justify-items:start;gap:4px;text-align:left;cursor:pointer;
  background:linear-gradient(100deg,var(--signal) 0%,#ff6a2b 55%,var(--signal-2) 100%);color:var(--signal-ink);overflow:hidden;
  box-shadow:0 10px 30px rgba(255,70,54,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform var(--t-2) var(--ease-out),box-shadow var(--t-2),filter var(--t-2)}
.open-button .cta-main{font:700 24px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.open-button .cta-sub{font:600 12px/1.2 var(--sans);opacity:.85}
.open-button .cta-arrow{position:absolute;right:18px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--signal-ink)}
.open-button .cta-arrow::after{content:'';position:absolute;left:11px;top:12px;width:8px;height:8px;border-top:2px solid var(--signal-2);border-right:2px solid var(--signal-2);transform:rotate(45deg)}
.open-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,70,54,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.open-button:active:not(:disabled){transform:translateY(1px) scale(.99)}
.open-button:disabled{cursor:not-allowed;background:var(--ink-3);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.open-button:disabled .cta-arrow{background:var(--ink-1)}
.open-button:disabled .cta-arrow::after{border-color:var(--text-3)}
.open-button.slim{padding:14px 56px 14px 18px}
.open-button.slim .cta-main{font-size:18px}
.open-button.slim .cta-arrow{width:28px;height:28px;margin-top:-14px;right:14px}
.open-button.slim .cta-arrow::after{left:8px;top:9px}

.chip,.tag,.demo-pill{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:5px 9px}
.tag{border:1px solid var(--line-2);color:var(--text-2);font-size:9px}
.demo-pill{background:var(--hazard);color:#14110a}
.tier-chip{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--tier-c);border:1px solid var(--tier-c);border-radius:999px;padding:4px 8px;background:rgba(0,0,0,.35)}
.tier-chip::before{content:'';width:7px;height:7px;transform:rotate(45deg);background:var(--tier-c);box-shadow:0 0 8px var(--tier-c)}

label{font-size:var(--fs-xs);color:var(--text-2);display:grid;gap:6px;letter-spacing:.02em}
input,select,textarea{background:var(--ink-1);border:1px solid var(--line-2);color:var(--text);border-radius:var(--r-s);padding:10px 12px;font:14px var(--sans)}
input:focus,select:focus,textarea:focus{border-color:var(--plus);outline:none;box-shadow:0 0 0 3px rgba(53,208,255,.18)}
input:disabled{opacity:.55}
textarea{width:100%;min-height:140px;font:12px var(--mono)}

.result{border:1px solid rgba(63,224,160,.35);background:rgba(63,224,160,.08);border-radius:var(--r-m);padding:12px 14px;margin-top:var(--s3);color:var(--text);font-size:var(--fs-s);line-height:1.5;display:grid;gap:4px}
.result strong{color:var(--ok);font-family:var(--display);letter-spacing:.03em}
.result.warn{border-color:rgba(255,179,64,.45);background:rgba(255,179,64,.08)}
.result.warn strong{color:var(--warn)}
.result button{justify-self:start;margin-top:6px}

.table-wrap{overflow-x:auto}
.berry-value{display:inline-block;font-variant-numeric:tabular-nums;font-weight:700;color:var(--chase);line-height:1.5}
.pool-card .berry-value{font-size:13px;margin:5px 0}.rail-card .berry-value{font-size:12px}
.card-berry-badge{position:absolute;bottom:8px;left:8px;right:8px;text-align:center;background:var(--ink-0);border:1px solid var(--line-2);border-radius:5px;font-size:13px;z-index:2}
.single-sell{grid-column:1/-1;margin:12px 0}.single-sale-result{font-size:14px;color:var(--chase);margin-top:8px}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-s);margin-top:var(--s2)}
.data-table th{text-align:left;color:var(--text-3);font:700 10px var(--display);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding:10px 8px}
.data-table td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.data-table tr:hover td{background:rgba(255,255,255,.02)}
.data-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:var(--fs-s);margin:10px 0}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text);word-break:break-word}
.state{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:999px;padding:5px 8px;color:var(--text-2);white-space:nowrap;margin-left:8px}
.state-owned_by_customer,.state-completed,.state-delivered{border-color:rgba(63,224,160,.5);color:var(--ok)}
.state-reserved,.state-requested,.state-packed,.state-shipped,.state-pending{border-color:rgba(255,179,64,.5);color:var(--warn)}
.state-exception,.state-payment_failed,.state-voided,.state-cancelled,.state-refunded{border-color:rgba(255,107,107,.5);color:var(--bad)}

/* tcg-card: the real-card-art component (aspect of a 63x88 mm card) */
.tcg-card{position:relative;display:block;aspect-ratio:600/838;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(160deg,var(--ink-3),var(--ink-1));box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.55)}
.tcg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tcg-card[data-tier]{box-shadow:0 0 0 2px var(--tier-c),0 0 26px var(--tier-g),0 18px 40px rgba(0,0,0,.55)}
.tcg-card[data-tier="base"]{box-shadow:0 0 0 1px rgba(147,161,187,.45),0 14px 30px rgba(0,0,0,.5)}
.tcg-card .card-fallback{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:12px;text-align:center;font:700 14px/1.1 var(--display);color:var(--text-2)}
.tcg-card .card-fallback small{font:600 10px var(--sans);color:var(--text-3)}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--t-2) var(--ease-out)}

/* ============================== 4. CHROME ============================== */
.topbar{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:var(--s5);padding:0 clamp(16px,4vw,48px);background:rgba(6,7,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 18px/1 var(--display);letter-spacing:.28em;color:var(--text)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 210deg,var(--signal),var(--signal-2),var(--chase),var(--hit),var(--plus),var(--signal));position:relative;display:grid;place-items:center;font-size:0}
.brand-mark::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--ink-0);box-shadow:0 0 0 3px rgba(6,7,13,.35)}
/* the brand lockup (assets/brand, served at /brand/): shown once it has loaded, replacing the drawn mark */
.brand-logo{display:none;height:36px;width:auto}
.brand.has-logo .brand-logo{display:block}
.brand.has-logo .brand-mark,.brand.has-logo .brand-word{display:none}
.brand-sub{font:600 11px/1 var(--display);letter-spacing:.24em;color:var(--text-2)}
.admin-page .brand-mark{font-size:0}
.appnav{display:flex;gap:4px}
.appnav a{text-decoration:none;color:var(--text-2);font:600 var(--fs-s)/1 var(--sans);padding:9px 12px;border-radius:999px;transition:background var(--t-2),color var(--t-2)}
.appnav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.appnav a[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.08);box-shadow:inset 0 -2px 0 var(--signal)}
.top-meta{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);color:var(--text-2);margin-left:auto;white-space:nowrap}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(63,224,160,.55)}
.top-controls{display:flex;gap:6px}
.top-controls .toggle{padding:7px 12px;font-size:12px}
.customer-tag{border:1px solid var(--line);color:var(--text-3);border-radius:999px;padding:8px 12px;font:600 11px/1 var(--mono);white-space:nowrap}

/* O18C: no demo banner (owner, 2026-10-11: "remove the massive demo banners"). The demo is
   marked by one quiet line in the footer of every page (.demo-mark). */
footer .demo-mark strong{color:var(--chase);font-weight:inherit}
.paused-banner{background:#3b1418;border-bottom:1px solid rgba(255,107,107,.45);color:#ffd2d2;text-align:center;padding:11px 16px;font-size:var(--fs-s)}
.preview-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:center;padding:10px 16px;background:repeating-linear-gradient(-45deg,rgba(182,108,255,.12) 0 10px,transparent 10px 20px),var(--ink-1);border-bottom:1px solid rgba(182,108,255,.4);font-size:var(--fs-s);color:var(--text-2)}
.preview-bar strong{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--hit)}
.preview-buttons{display:flex;gap:6px}
.chip-btn{padding:7px 14px}
.chip-btn[data-preview]{border-color:var(--tier-c,var(--line-2));color:var(--tier-c,var(--text))}
.chip-btn[data-preview="base"]{--tier-c:var(--base)}.chip-btn[data-preview="plus"]{--tier-c:var(--plus)}.chip-btn[data-preview="hit"]{--tier-c:var(--hit)}.chip-btn[data-preview="chase"]{--tier-c:var(--chase)}

main{display:block}
.storefront main>section{max-width:var(--page);margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);margin-bottom:var(--s5)}
.section-head h2{font-size:clamp(28px,3.4vw,44px);text-transform:uppercase;letter-spacing:.01em}
.section-head>.muted{max-width:440px;margin:0}
footer{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;border-top:1px solid var(--line);padding:22px clamp(16px,4vw,48px);color:var(--text-3);font:700 10px/1.4 var(--display);letter-spacing:.2em}
footer span:last-child{letter-spacing:.06em}
/* O104 (W12): the footer's Report a problem button reads as a footer link; its box is the shop's own dialog */
footer .report-open{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
footer .report-open:hover,footer .report-open:focus-visible{color:var(--text)}
/* O114 (item 1): the policies a buyer checks first - Refunds, Shipping, Terms, Privacy, Support - on a line of their own, on every page */
footer .policy-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 24px}
footer .policy-links a{color:var(--text-2);text-decoration:none;font:700 11px/1.6 var(--display);letter-spacing:.16em;text-transform:uppercase}
footer .policy-links a:hover,footer .policy-links a:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:3px}
footer .policy-links a[aria-current="page"]{color:var(--gold)}
.report-label{display:grid;gap:8px;font-weight:600;color:var(--text)}
.report-text{width:100%;box-sizing:border-box;min-height:110px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font:400 15px/1.45 var(--sans,system-ui);resize:vertical}

/* ============================== 5. STAGE ============================== */
.storefront main>.stage{position:relative;max-width:none;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(36px,5vw,72px);overflow:hidden;isolation:isolate;
  background:radial-gradient(700px 420px at 50% 46%,rgba(255,70,54,.16),transparent 70%),radial-gradient(900px 600px at 88% 10%,rgba(182,108,255,.12),transparent 65%),radial-gradient(800px 500px at 8% 80%,rgba(53,208,255,.08),transparent 65%),linear-gradient(180deg,#0a0b16,var(--ink-0));border-bottom:1px solid var(--line)}
.stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(150,160,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,160,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.stage-backdrop{position:absolute;z-index:-2;left:50%;top:50%;width:170px;height:auto;transform:translate(-50%,-50%) rotate(-8deg) scale(6.5);filter:blur(9px) saturate(1.4);opacity:.28;pointer-events:none;will-change:transform}

.opening-layout{max-width:var(--page);margin:0 auto;display:grid;gap:clamp(20px,3vw,40px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1.05fr);grid-template-areas:"head head head" "show pack ladder"}
.stage-head{grid-area:head;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:var(--s6);align-items:end}
.stage-head .kicker{grid-column:1/-1;color:var(--plus)}
.stage-title{font-size:var(--fs-3xl);line-height:.86;text-transform:uppercase;letter-spacing:-.02em;font-stretch:condensed;background:linear-gradient(180deg,#fff 30%,#c9cdf5);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage-sub{align-self:end;margin:0 0 10px;font:600 var(--fs-l)/1.2 var(--display);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
.proof-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:var(--s4) 0 0}
.proof-chips li{border:1px solid var(--line);background:rgba(12,14,26,.6);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--text-2)}
.proof-chips b{color:var(--text);font-family:var(--display);letter-spacing:.04em;margin-right:4px}

/* showcase - the chase card sells the pack */
.showcase{grid-area:show;display:grid;gap:var(--s3);align-content:start}
.showcase-fan{position:relative;height:clamp(330px,30vw,420px);perspective:1200px}
.showcase-fan .tcg-card{position:absolute;width:clamp(150px,14vw,210px);top:24px;left:50%;cursor:pointer}
.showcase-fan .fan-0{z-index:3;margin-left:calc(clamp(150px,14vw,210px) / -2);transform:rotate(-4deg)}
.showcase-fan .fan-1{z-index:2;margin-left:calc(clamp(150px,14vw,210px) / -2 - 70px);transform:rotate(-16deg) translateY(30px) scale(.86);filter:brightness(.7)}
.showcase-fan .fan-2{z-index:1;margin-left:calc(clamp(150px,14vw,210px) / -2 + 70px);transform:rotate(10deg) translateY(30px) scale(.86);filter:brightness(.7)}
.showcase-fan .tcg-card .tier-chip{position:absolute;left:8px;top:8px;z-index:2}
.showcase-fan .tcg-card.is-gone{filter:grayscale(1) brightness(.45)}
.showcase-caption{margin:0;text-align:center;font:600 var(--fs-s)/1.5 var(--sans);color:var(--text-2)}
.showcase-caption b{display:block;font:700 var(--fs-l)/1.1 var(--display);color:var(--chase);letter-spacing:.04em;text-transform:uppercase}

/* pack column - the one action on the page */
.pack-column{grid-area:pack;display:grid;gap:var(--s4)}
.pack-stage{position:relative;display:grid;place-items:center;padding:14px 0 6px}
.pack-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6))}
.pack-halo{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,70,54,.35),transparent 65%);filter:blur(10px)}
.pack-word{font:700 34px var(--display);letter-spacing:8px;fill:#fff4dc;text-anchor:middle}
.pack-name-t{font:700 15px var(--display);letter-spacing:6px;fill:var(--pk-c,#ffc53a);text-anchor:middle}
.pack-name-t.is-long{font-size:12px;letter-spacing:3px}
/* per-pack foil colours: the sprite's gradient stops read the page's --pk-* */
.pk-a{stop-color:var(--pk-a,#e0402c)}.pk-b{stop-color:var(--pk-b,#7d1226)}.pk-c{stop-color:var(--pk-c,#ffc53a)}.pk-d{stop-color:var(--pk-d,#190814)}
.pk-c-stroke{stroke:var(--pk-c,#ffc53a)}
.pack-chip{fill:#14060c;stroke:var(--pk-c,#ffc53a);stroke-opacity:.55}
.pack-chip-t{font:700 9px var(--display);letter-spacing:2.5px;fill:#ffe6a6;text-anchor:middle}
.pack-fine{font:600 7.5px var(--sans);letter-spacing:2px;fill:#ffd9cf;fill-opacity:.65;text-anchor:middle}
.pack-leak{fill:var(--tier-c,#fff);opacity:0}
.art-stamp{position:absolute;right:calc(50% - 150px);top:18px;transform:rotate(8deg);font:700 11px/1 var(--display);letter-spacing:.2em;color:var(--hazard);border:1.5px solid var(--hazard);border-radius:4px;padding:5px 7px;background:rgba(6,7,13,.7)}
.buy-box{display:grid;gap:var(--s3);background:rgba(12,14,26,.9);border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s4)}
.price-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.price{font:700 28px/1 var(--display);letter-spacing:.01em;color:var(--text);white-space:nowrap}
.pool-left{flex:1 1 auto;min-width:0;font:600 12px/1.35 var(--sans);color:var(--text-2);text-align:right}
.price-line{flex-wrap:wrap}
.pack-state{flex:1 0 100%;font:600 13px/1.4 var(--sans);color:var(--warn);overflow-wrap:anywhere}
.pack-state[hidden]{display:none}
.confirm-line{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--text-2);cursor:pointer;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-m);transition:border-color var(--t-2),background var(--t-2)}
.confirm-line:has(input:checked){border-style:solid;border-color:rgba(63,224,160,.5);background:rgba(63,224,160,.06);color:var(--text)}
.confirm-line input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ok);flex:none}

/* ============================== 6. RARITY LADDER ============================== */
.ladder{grid-area:ladder;background:rgba(12,14,26,.9);border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s5);display:grid;gap:var(--s4)}
/* W59 (O103): the pack page leads with the picture, the price and the top cards; the ladder, the pack facts and the
   pool wait behind one Odds tab - hidden, never removed, so app.js fills them as before */
.ladder,.ladder-body{grid-template-columns:minmax(0,1fr)}
.ladder-body{display:grid;gap:var(--s4);min-width:0}
.odds-tab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);width:100%;min-height:48px;padding:12px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-m,12px);background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer;text-align:left}
.odds-tab b{font-size:var(--fs-lg,1.25rem);letter-spacing:.02em}
.odds-tab span{color:var(--text-3)}
.odds-tab:hover,.odds-tab:focus-visible{border-color:var(--plus);background:rgba(255,255,255,.07)}
.stage.odds-closed .ladder{align-self:start}
.stage.odds-closed #ladder-body,.stage.odds-closed~.spec-strip,.stage.odds-closed~#pool{display:none}
.ladder-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3)}
.ladder-head h2{font-size:30px;text-transform:uppercase}
.odds-total{display:grid;justify-items:end;gap:2px;font-size:11px;color:var(--text-3)}
.odds-total strong{font:700 20px/1 var(--display);color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.odds-total strong.is-bad{color:var(--bad)}
.waffle-wrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center}
.waffle{display:grid;grid-template-columns:repeat(10,13px);grid-auto-rows:13px;gap:3px}
.waffle i{border-radius:3px;background:var(--tier-c);opacity:.9}
.waffle i[data-tier="base"]{opacity:.38}
.waffle i.is-void{background:rgba(255,255,255,.06)}
.waffle i[data-tier="chase"]{box-shadow:0 0 10px var(--chase)}
.waffle i[data-tier="hit"]{box-shadow:0 0 6px var(--hit-g)}
.waffle-note{margin:0;font-size:12px;line-height:1.5;color:var(--text-3)}
.rungs{display:grid;gap:8px}
.rung{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"pip name odds" "pip bar bar";column-gap:12px;row-gap:8px;align-items:center;padding:12px 14px;border-radius:var(--r-m);background:linear-gradient(90deg,var(--tier-g),transparent 55%) ,var(--ink-1);border:1px solid var(--line);overflow:hidden}
.rung[data-tier="base"]{background:var(--ink-1)}
.rung-pip{grid-area:pip;width:14px;height:14px;transform:rotate(45deg);background:var(--tier-c);justify-self:center;box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 12px var(--tier-g)}
.rung[data-tier="hit"] .rung-pip{width:16px;height:16px}
.rung[data-tier="chase"] .rung-pip{width:18px;height:18px;background:linear-gradient(135deg,#fff3c4,var(--chase) 45%,var(--chase-2));box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 18px var(--chase)}
.rung .tier-name{grid-area:name;display:flex;flex-wrap:wrap;min-width:0;align-items:baseline;gap:6px 10px;font:700 18px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tier-c)}
.rung .tier-name small{font:600 12px var(--sans);letter-spacing:0;text-transform:none;color:var(--text-3)}
.rung-odds{grid-area:odds;display:grid;justify-items:end;gap:3px}
.rung .tier-odds{font:700 22px/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.rung .one-in{font:600 11px/1 var(--sans);color:var(--text-2);white-space:nowrap}
.rung .bar-track{grid-area:bar;height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.rung .bar-fill{display:block;height:100%;border-radius:6px;background:var(--tier-c);min-width:4px;box-shadow:0 0 10px var(--tier-g)}
.rung.is-empty{opacity:.45}
.ladder-note{margin:0}
.outcome-details summary{cursor:pointer;color:var(--text-2);font-size:var(--fs-s)}
.odds-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text-3);font-size:12px}
.legend-dot{width:8px;height:8px;border-radius:2px;background:var(--plus)}

/* ============================== 7. SPEC STRIP ============================== */
.storefront main>.spec-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:var(--s6);margin-bottom:var(--s6)}
.spec-strip>div{background:var(--ink-1);padding:14px 16px;display:grid;gap:6px;align-content:start}
.spec-strip>div:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.spec-strip>div:nth-child(6){border-radius:0 var(--r-m) var(--r-m) 0}
.spec-strip span{font:700 10px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.spec-strip strong{font-size:var(--fs-s);font-weight:600;color:var(--text);word-break:break-word}
.spec-desc{grid-column:1/-1;margin:var(--s3) 0 0;font-size:var(--fs-s);color:var(--text-3);max-width:860px}

/* ============================== 8. THE POOL ============================== */
.storefront main>.pool{padding-top:var(--s6);padding-bottom:var(--s7)}
.pool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);align-items:start}
.pool-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px 14px}
.pool-card{margin:0;display:grid;gap:8px}
.pool-card figcaption{display:grid;gap:3px}
.pool-card .pc-name{font:700 14px/1.15 var(--display);letter-spacing:.02em}
.pool-card .pc-meta{font-size:11px;color:var(--text-3)}
.pool-card .pc-row{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}
.pool-card .pc-left{font:700 12px/1 var(--display);letter-spacing:.06em;color:var(--tier-c)}
.pool-card .pc-odds{font:600 12px var(--sans);color:var(--text-2);font-variant-numeric:tabular-nums}
.pool-card.is-gone .tcg-card{filter:grayscale(1) brightness(.4)}
.pool-card.is-gone .tcg-card::after{content:'ALL PULLED';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);font:700 13px/1 var(--display);letter-spacing:.2em;color:var(--hazard);border:2px solid var(--hazard);padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.6);white-space:nowrap}
.pool-feed{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow:auto;background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s4)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.feed li{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--text-2);line-height:1.4}
.feed li.feed-empty{display:block;color:var(--text-3)}
.feed .tcg-card{width:36px;border-radius:3px}
.feed b{color:var(--text);font-weight:600}
.feed .feed-who{font:700 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tier-c)}

/* ============================== 9. VAULT ============================== */
.storefront main>.vault{padding-top:var(--s7);padding-bottom:var(--s7);border-top:1px solid var(--line)}
.vault-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s5);align-items:start}
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px;margin:var(--s4) 0}
.binder>.muted{grid-column:1/-1;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r-l);text-align:center}
.vault-card{position:relative;display:grid;gap:8px;cursor:pointer;color:var(--text);font-size:12px}
.vault-card input{position:absolute;opacity:0;pointer-events:none}
.vault-card .tcg-card{transition:transform var(--t-2) var(--ease-out),box-shadow var(--t-2)}
.vault-card:hover .tcg-card{transform:translateY(-3px)}
.vault-card .check{position:absolute;right:8px;top:8px;z-index:2;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(6,7,13,.6)}
.vault-card input:checked~.tcg-card{transform:translateY(-6px);box-shadow:0 0 0 3px var(--ok),0 0 30px rgba(63,224,160,.35)}
.vault-card input:checked~.check{background:var(--ok);border-color:var(--ok)}
.vault-card input:checked~.check::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--ink-0);border-width:0 3px 3px 0;transform:rotate(45deg)}
.vault-card input:focus-visible~.tcg-card{outline:2px solid var(--plus);outline-offset:3px}
.vault-card input:disabled~.check{display:none}
.vault-card.is-locked .tcg-card{filter:saturate(.4) brightness(.7)}
.vault-card .vc-name{font:700 14px/1.15 var(--display)}
.vault-card .vc-meta{color:var(--text-3)}
.vault-card .state{margin-left:0;justify-self:start}
.vault-card code{font-size:10px;color:var(--text-3)}
.ship-panel{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow:auto;background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s5);display:grid;gap:var(--s3)}
.ship-panel h3{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-row label{flex:1 1 140px}
.address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.breakdown{list-style:none;padding:0;margin:4px 0 8px;font-size:var(--fs-s)}
.breakdown li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-2);padding:6px 0}

/* ============================== 10. LEDGER ============================== */
.storefront main>.ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s6);padding-top:var(--s7);padding-bottom:var(--s7);border-top:1px solid var(--line)}
.ledger .section-head h2{font-size:clamp(24px,2.6vw,34px)}
.withdrawal-row{border:1px solid var(--line);background:var(--ink-1);border-radius:var(--r-m);padding:12px 14px;margin-top:8px;display:grid;gap:8px;font-size:var(--fs-s)}
.withdrawal-row .actions{display:flex;gap:8px;flex-wrap:wrap}
.timeline{display:grid;gap:4px;font-size:11px}
.timeline-row{display:grid;grid-template-columns:150px 170px 1fr;gap:10px}
.below-fold{padding-top:var(--s5);padding-bottom:var(--s7);border-top:1px solid var(--line)}
.below-fold>p:last-child{max-width:820px;margin:0;color:var(--text-2);font-size:var(--fs-s);line-height:1.7}

/* ============================== 11. ADMIN ============================== */
.admin-grid{max-width:1180px;margin:0 auto;padding:32px clamp(16px,4vw,40px) 60px;display:grid;gap:18px}
.admin-section{border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;background:var(--ink-1)}
.admin-section h2{font-size:24px;margin:0 0 10px;text-transform:uppercase}
.admin-section h3{margin:16px 0 8px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
pre.out{white-space:pre-wrap;word-break:break-word;background:var(--ink-0);border:1px solid var(--line);border-radius:var(--r-s);padding:10px;font:12px var(--mono);max-height:320px;overflow:auto}

/* ============================== 12. RESPONSIVE ============================== */
@media(max-width:1180px){
  .opening-layout{grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"head head" "pack ladder" "show show"}
  .showcase-fan{height:360px}
  .storefront main>.spec-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec-strip>div{border-radius:0!important}
  .appnav{display:none}
}
@media(max-width:900px){
  .pool-layout,.vault-layout,.storefront main>.ledger{grid-template-columns:1fr}
  .pool-feed,.ship-panel{position:static}
  .top-controls .toggle{padding:6px 9px;font-size:11px}
  .customer-tag{display:none}
}
@media(max-width:720px){
  .opening-layout{grid-template-columns:1fr;grid-template-areas:"head" "pack" "ladder" "show"}
  .stage-head{grid-template-columns:1fr}
  .stage-sub{margin:8px 0 0}
  .storefront main>.spec-strip{grid-template-columns:1fr 1fr}
  .section-head{flex-direction:column;align-items:flex-start}
  .topbar{gap:10px;padding:0 12px}
  .top-meta #live-pool{display:none}
  .brand-word{display:none}
  .address-grid{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:1fr}
  .waffle{grid-template-columns:repeat(10,11px);grid-auto-rows:11px}
}

/* ============================== 13. RUN 3: SCREENS ==============================
   Real pages share one shell (shell.html). Home is a catalogue; the pack page
   keeps the stage/ladder layout above; vault, ledger and open are page-head +
   content screens. Card art is always a server thumbnail with a reserved box. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.volume{display:flex;align-items:center}
.volume input{width:76px;accent-color:var(--plus);padding:0;background:none;border:0}
.volume input:disabled{opacity:.35}
.ghost-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font:600 var(--fs-s)/1 var(--sans);color:var(--text);transition:border-color var(--t-2),background var(--t-2)}
.ghost-link:hover{border-color:var(--text-2);background:rgba(255,255,255,.05)}
.cat-more{display:flex;justify-content:center;padding:var(--s5) 0}
.section-head.slim{margin-bottom:var(--s4)}

/* --- home hero --- */
.storefront main>.home-hero{position:relative;max-width:none;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(32px,5vw,72px) max(clamp(16px,4vw,40px),calc((100vw / var(--vz) - var(--page)) / 2 + 40px));
  background:radial-gradient(700px 460px at 72% 50%,rgba(255,70,54,.2),transparent 70%),radial-gradient(900px 600px at 10% 0%,rgba(182,108,255,.14),transparent 65%),linear-gradient(180deg,#0a0b16,var(--ink-0));border-bottom:1px solid var(--line)}
.home-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(150,160,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,160,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 60% 50%,#000,transparent 75%)}
.hero-copy{display:grid;gap:var(--s4);align-content:center}
.hero-copy .kicker{color:var(--plus);margin:0}
.hero-title{font-size:var(--fs-3xl);line-height:.84;text-transform:uppercase;letter-spacing:-.02em;margin:0;background:linear-gradient(180deg,#fff 30%,#c9cdf5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:0;font:600 var(--fs-l)/1.3 var(--display);color:var(--text-2);letter-spacing:.03em;text-transform:uppercase;max-width:560px}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.hero-stats li{display:grid;gap:4px;min-width:130px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:rgba(12,14,26,.7)}
.hero-stats b{font:700 26px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.hero-stats li:nth-child(2) b{color:var(--chase)}
.hero-stats li:nth-child(3) b{color:var(--ok)}
.hero-stats span{font:600 11px/1.2 var(--sans);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.hero-cta{width:auto;min-width:min(340px,100%);text-decoration:none}
.hero-art{position:relative;height:clamp(340px,34vw,460px);display:grid;place-items:center;text-decoration:none}
.hero-fan{position:absolute;inset:0}
.hero-fan .tcg-card{position:absolute;width:clamp(140px,13vw,200px);left:50%;top:50%}
.hero-fan .fan-0{z-index:2;transform:translate(-8%,-62%) rotate(12deg)}
.hero-fan .fan-1{z-index:1;transform:translate(-112%,-44%) rotate(-14deg) scale(.86);filter:brightness(.75)}
.hero-fan .fan-2{z-index:1;transform:translate(14%,-30%) rotate(22deg) scale(.82);filter:brightness(.65)}
.hero-fan .is-gone{filter:grayscale(1) brightness(.45)}

/* --- shop strip, chase wall, how it works --- */
.storefront main>.shop-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--s6);margin-bottom:var(--s6)}
.shop-strip>div{background:var(--ink-1);padding:16px 18px;display:grid;gap:6px}
.shop-strip>div:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.shop-strip>div:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.shop-strip b{font:700 30px/1 var(--display);font-variant-numeric:tabular-nums}
.shop-strip>div:last-child b{color:var(--ok)}
.shop-strip span{font:700 10px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.storefront main>.chase-rail{padding-bottom:var(--s6)}
.rail-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rail-track{display:flex;gap:14px;width:max-content;padding:10px 0}
.rail-card{width:120px;display:grid;gap:5px;text-decoration:none;color:var(--text)}
.rail-card .tcg-card{transition:transform var(--t-2) var(--ease-out)}
.rail-card:hover .tcg-card{transform:translateY(-6px)}
.rc-name{font:700 12px/1.15 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-meta{font-size:10px;color:var(--tier-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storefront main>.how-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);padding-top:var(--s6);padding-bottom:var(--s6);border-top:1px solid var(--line)}
.how-strip p{margin:0;color:var(--text-2);font-size:var(--fs-s);line-height:1.6}
.how-strip .kicker{color:var(--plus);margin-bottom:var(--s2)}

/* --- the catalogue --- */
.storefront main>.catalogue{padding-top:var(--s6);padding-bottom:var(--s5)}
.cat-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.family-tabs{display:flex;flex-wrap:wrap;gap:6px}
.fam-tab,.pool-tab{background:transparent;border:1px solid var(--line-2);color:var(--text-2);border-radius:999px;padding:8px 14px;font:600 var(--fs-s)/1 var(--sans);cursor:pointer;transition:all var(--t-2)}
.fam-tab:hover,.pool-tab:hover{color:var(--text);border-color:var(--text-2)}
.fam-tab[aria-selected="true"]{background:linear-gradient(100deg,var(--signal),var(--signal-2));border-color:transparent;color:var(--signal-ink)}
.pool-tab[data-tier]{color:var(--tier-c)}
.pool-tab[aria-selected="true"]{background:rgba(255,255,255,.08);border-color:var(--tier-c,var(--text));color:var(--tier-c,var(--text))}
.pool-tab small{font:700 10px var(--mono);opacity:.7;margin-left:2px}
.pool-tabs,.vault-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.cat-filters{display:flex;gap:8px;flex-wrap:wrap}
.cat-filters input{width:min(300px,70vw)}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:22px 18px}
.pack-tile{position:relative;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pk-b,#7d1226) 34%,var(--ink-1)),var(--ink-1) 62%);
  transition:transform var(--t-2) var(--ease-out),border-color var(--t-2),box-shadow var(--t-2);content-visibility:auto;contain-intrinsic-size:auto 430px}
.pack-tile:hover,.pack-tile:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pk-a,#e0402c) 70%,transparent);box-shadow:0 24px 50px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--pk-a,#e0402c) 50%,transparent)}
.pt-art{position:relative;height:214px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(closest-side at 50% 58%,color-mix(in srgb,var(--pk-a,#e0402c) 45%,transparent),transparent)}
.pt-chase{position:absolute;width:108px;left:50%;top:20px;z-index:1;transform:translateX(-4%) rotate(9deg);transition:transform .45s var(--ease-out)}
.pack-tile:hover .pt-chase{transform:translate(4%,-14px) rotate(14deg)}
.pt-badge{position:absolute;left:12px;top:12px;z-index:3;font:700 9px/1 var(--display);letter-spacing:.16em;border-radius:999px;padding:5px 8px;background:var(--ink-0);border:1px solid var(--line-2);color:var(--text-2)}
.pt-badge[data-kind="chase-pulled"]{border-color:var(--chase);color:var(--chase)}
.pt-badge[data-kind="low-stock"]{border-color:var(--warn);color:var(--warn)}
.pt-badge[data-kind="new"]{background:var(--ok);border-color:var(--ok);color:var(--ink-0)}
.pt-badge[data-kind="closed"]{border-color:var(--bad);color:var(--bad)}
.pt-body{display:grid;gap:7px;align-content:start;padding:12px 16px 16px}
.pt-fam{font:700 9px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--pk-c,var(--text-3))}
.pt-title{font:700 20px/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--text)}
.pt-sub{font-size:12px;line-height:1.4;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pt-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:2px}
.pt-price{font:700 22px/1 var(--display);font-variant-numeric:tabular-nums}
.pt-left{font:600 11px var(--sans);color:var(--text-2)}
.pt-odds{font:600 11px/1.3 var(--sans);color:var(--chase)}
/* O40-4 (audit P-4): the 100% berry buy-back on every box */
.pt-buyback{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;border:1px solid rgba(242,193,78,.55);color:var(--gold);font:700 10.5px/1.4 var(--sans);letter-spacing:.02em}
.pt-buyback[hidden]{display:none}
.pack-tile.is-closed .pt-art{filter:grayscale(.85) brightness(.6)}
.pack-tile.is-closed .pt-odds{color:var(--text-3)}
.shape-bar{display:flex;height:7px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06);gap:1px}
.shape-bar i{flex:0 0 max(4px,var(--w));background:var(--tier-c)}
.shape-bar i[data-tier="base"]{flex:1 1 auto;opacity:.45}
.shape-bar i[data-tier="chase"]{box-shadow:0 0 8px var(--chase)}

/* --- pack page additions --- */
.storefront main>.crumbs{display:flex;gap:10px;align-items:center;padding-top:14px;padding-bottom:0;font:600 12px var(--sans);color:var(--text-3);max-width:var(--page);margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text)}
.qty{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.qty legend{font:700 var(--fs-xs)/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;padding:0}
.qty-chips{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.qty-chip{background:var(--ink-2);border:1px solid var(--line-2);color:var(--text);border-radius:var(--r-s);padding:9px 0;font:700 15px/1 var(--display);cursor:pointer;font-variant-numeric:tabular-nums;transition:all var(--t-1)}
.qty-chip:hover:not(:disabled){border-color:var(--text-2)}
.qty-chip[aria-pressed="true"]{background:linear-gradient(160deg,var(--signal),var(--signal-2));border-color:transparent;color:var(--signal-ink);box-shadow:0 6px 18px rgba(255,70,54,.35)}
.qty-chip:disabled{opacity:.3;cursor:not-allowed}
.run-total{margin:0;font-size:12px;line-height:1.45;color:var(--text-2)}
.run-total b{color:var(--text);font-family:var(--display);font-size:15px;letter-spacing:.02em}

/* --- page heads: vault, ledger, open, 404 --- */
.storefront main>.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;padding-top:clamp(32px,5vw,64px);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.page-head .kicker{color:var(--plus)}
.page-title{font-size:clamp(44px,6.4vw,92px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 var(--s3);overflow-wrap:anywhere}
.page-head .muted{margin:0;max-width:720px}
.page-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.page-head-actions .open-button{width:auto}
.page-head.missing{min-height:50vh;align-items:center;border:0}
.storefront main>.vault{border-top:0;padding-top:var(--s5)}
.storefront main>.ledger{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);border-top:0;padding-top:var(--s5)}
.run-list{display:grid;gap:8px;margin-bottom:var(--s4)}
.run-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--tier-c,var(--line-2));border-radius:var(--r-m);background:var(--ink-1);text-decoration:none;color:var(--text);transition:border-color var(--t-2),background var(--t-2)}
.run-row:hover{background:var(--ink-2)}
.run-row .tcg-card{width:44px;border-radius:3px}
.rr-main{display:grid;gap:3px}
.rr-main b{font:700 15px/1.1 var(--display);letter-spacing:.02em}
.rr-main small{font-size:11px;color:var(--text-3)}
.run-tag{color:var(--text-3)}
.mono-link{text-decoration:none}
.mono-link:hover code{color:var(--plus)}

/* --- open page boards --- */
.storefront main>.open-board{padding-top:var(--s6);padding-bottom:var(--s7)}
.ob-single{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--s6);align-items:start}
.ob-run{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:var(--s6);align-items:start}
.ob-best{margin:0;display:grid;gap:10px}
.ob-best figcaption{display:grid;gap:4px;font-size:12px;color:var(--text-2)}
.ob-best figcaption b{font:700 22px/1.05 var(--display);text-transform:uppercase;color:var(--text)}
.ob-best figcaption .tier-chip{justify-self:start}
.rb-side{display:grid;gap:var(--s4);align-content:start}
.rb-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.rb-tiers li{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-m);background:linear-gradient(160deg,var(--tier-g),transparent 70%),var(--ink-1);border:1px solid var(--line)}
.rb-tiers li.is-zero{opacity:.4}
.rb-tiers b{font:700 32px/1 var(--display);color:var(--tier-c);font-variant-numeric:tabular-nums}
.rb-tiers span{font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.rb-grid li{position:relative}
.rb-grid li a{display:block;text-decoration:none;color:var(--text-2)}
.rb-grid .tcg-card{border-radius:4px}
.rb-k{position:absolute;left:4px;bottom:4px;font:700 9px/1 var(--mono);background:rgba(0,0,0,.7);padding:2px 4px;border-radius:3px}
.rb-grid li .rb-val{position:absolute;right:4px;bottom:4px;font:700 9px/1 var(--mono);background:rgba(0,0,0,.72);color:#fff;padding:2px 4px;border-radius:3px;white-space:nowrap}
.open-board .rb-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
/* Run 19 (owner, issue 2): the reload-safe run page sells too - a pick circle on
   every card the server quotes, and one sticky bar: Pick all, Clear, Sell. */
.ob-pick{position:absolute;top:4px;left:4px;z-index:3;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(4,5,12,.6);cursor:pointer;padding:0}
.ob-pick[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.ob-pick[aria-pressed="true"]::after{content:'';position:absolute;top:3px;left:6px;width:5px;height:9px;border:solid #04120c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ob-pick:focus-visible{outline:2px solid var(--plus);outline-offset:2px}
.rb-grid li.is-picked .tcg-card{box-shadow:0 0 0 2px var(--ok),0 0 16px rgba(63,224,160,.4)}
.rb-grid li.is-sold{opacity:.5;filter:saturate(.3)}
.rb-grid li.is-sold .ob-pick{display:none}
.ob-sellbar{grid-column:1/-1;position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;margin-top:var(--s4);padding:12px 14px;
  background:rgba(10,12,22,.97);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:0 -14px 30px rgba(0,0,0,.5)}
.ob-sellbar[hidden]{display:none}
.ob-sell-copy{margin:0;font-size:var(--fs-s);color:var(--text)}
.ob-sell-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.ob-sell-actions .sell-btn{padding:10px 16px;border-color:var(--chase);background:rgba(255,197,58,.1)}
.ob-sell-actions .sell-btn:disabled{opacity:1;border-color:var(--line-2);background:transparent;color:var(--text-2)}
.ob-sale-note{grid-column:1/-1;margin:0;font-size:var(--fs-s);color:var(--text-2)}
.ob-sale-note:empty{display:none}
@media(max-width:620px){.ob-sellbar{grid-template-columns:1fr}.ob-sell-actions{justify-content:stretch}.ob-sell-actions .sell-btn{flex:1 1 100%}}

@media(max-width:1180px){
  .storefront main>.home-hero{grid-template-columns:1fr}
  .hero-art{height:340px}
  .storefront main>.shop-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-strip>div{border-radius:0!important}
  .volume{display:none}
}
@media(max-width:900px){
  .storefront main>.ledger{grid-template-columns:1fr}
  .storefront main>.how-strip{grid-template-columns:1fr}
  .ob-single,.ob-run{grid-template-columns:1fr}
  .rb-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .pack-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px 10px}
  .pt-art{height:180px}
  .pt-chase{width:88px}
  .pt-title{font-size:16px}
  .qty-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cat-filters input{width:100%}
}
.stage-title.is-long{font-size:clamp(44px,5.6vw,84px);line-height:.9}
.stage-head:has(.stage-title.is-long){grid-template-columns:1fr}
.stage-head:has(.stage-title.is-long) .stage-sub{margin:10px 0 0}

/* ============================== 14. THE FOUNDRY ============================== */
.storefront main>.foundry{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:var(--s5);align-items:start;padding-top:var(--s5);padding-bottom:var(--s7)}
.fd-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fd-filters input[type=search]{width:min(320px,80vw)}
.fd-filters select{max-width:260px}
.fd-check{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--text-2)}
.fd-check input{accent-color:var(--ok)}
.fd-count{margin:12px 0}
.fd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 12px}
.fd-card{display:grid;gap:5px;align-content:start;animation:rise-in .4s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 18ms);content-visibility:auto;contain-intrinsic-size:auto 300px}
.fd-card.is-in .tcg-card{box-shadow:0 0 0 2px var(--ok),0 0 18px rgba(63,224,160,.35)}
.fd-name{font:700 13px/1.15 var(--display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-meta{font-size:10px;color:var(--text-3)}
.fd-free{font:700 11px var(--display);color:var(--ok);letter-spacing:.04em}
.fd-value{font:700 13px var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.fd-add{border:1px solid var(--line-2);background:var(--ink-2);color:var(--text);border-radius:var(--r-s);padding:7px 0;font:700 12px var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.fd-add:hover:not(:disabled){border-color:var(--ok);color:var(--ok)}
.fd-add:disabled{opacity:.55;cursor:default}
.fd-card.is-in .fd-add{color:var(--ok);border-color:rgba(63,224,160,.45)}
.fd-build{position:sticky;top:76px;max-height:calc(100vh / var(--vz) - 92px);overflow:auto;display:grid;gap:var(--s4);padding:var(--s5);background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r-l)}
.fd-head{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center}
.fd-pack{display:block;width:104px}
.fd-pack .pack-object{width:100%;transform:rotate(-5deg)}
.fd-pack .pack-svg{filter:drop-shadow(0 12px 16px rgba(0,0,0,.55))}
.fd-fan{position:relative;height:150px}
.fd-fan .tcg-card{position:absolute;width:96px;top:4px;left:50%}
.fd-fan .fan-0{z-index:3;transform:translateX(-50%) rotate(-3deg)}
.fd-fan .fan-1{z-index:2;transform:translateX(-120%) rotate(-14deg) scale(.86);filter:brightness(.75)}
.fd-fan .fan-2{z-index:1;transform:translateX(20%) rotate(12deg) scale(.86);filter:brightness(.7)}
.fd-fields{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px}
.fd-fields input{width:100%;min-width:0}
.fd-fields .wide{grid-column:1/-1}
.fd-fields .fine-print{margin:0}
.fd-engine{display:grid;gap:10px;transition:opacity .2s var(--ease-out)}
.fd-engine.is-solving{opacity:.62}
.fd-window{margin:0;font-size:12px;color:var(--text-2)}
.fd-refusal{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-m);border:1px solid rgba(255,107,107,.55);background:repeating-linear-gradient(135deg,rgba(255,107,107,.06) 0 10px,transparent 10px 20px),var(--ink-0);font-size:12px;line-height:1.45;color:var(--text-2)}
.fd-refusal b{font:700 13px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}
.fd-refusal small{color:var(--text-3)}
.fd-near{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--text)}
.fd-near .chip-btn{border:1px solid var(--ok);background:transparent;color:var(--ok);border-radius:999px;padding:4px 10px;font:700 12px var(--display);cursor:pointer}
.fd-near .chip-btn:hover{background:rgba(63,224,160,.12)}
.fd-econ{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fd-stat{display:grid;gap:4px;padding:10px 12px;border-radius:var(--r-m);background:var(--ink-0);border:1px solid var(--line)}
.fd-stat span,.fd-chase-line span{font:700 10px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.fd-stat strong{font:700 20px/1 var(--display);font-variant-numeric:tabular-nums}
.fd-stat-big strong{font-size:26px;color:var(--ok)}
.fd-stat small{font-size:11px;line-height:1.4;color:var(--text-2)}
.fd-chase-line{grid-column:1/-1;margin:0;font-size:12px;color:var(--text-2)}
.fd-chase-line b{color:var(--chase);font-weight:700}
.fd-excluded{grid-column:1/-1;font-size:11px;color:var(--text-3)}
.fd-excluded p{margin:0 0 4px}
.fd-excluded ul{margin:0;padding-left:16px;display:grid;gap:2px}
.fd-row.is-excluded{opacity:.55}
.fd-row.is-excluded .tier-chip{color:var(--bad);border-color:rgba(255,107,107,.5)}
.fd-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fd-total span{font:700 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.fd-total strong{font:700 30px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text-2)}
.fd-total strong.is-good{color:var(--ok)}
.fd-total strong.is-bad{color:var(--bad)}
.fd-total small{font-size:12px;color:var(--text-3)}
.fd-ladder{display:grid;gap:6px}
.fd-ladder .rung{padding:8px 12px;animation:none}
.fd-ladder .rung .tier-name{font-size:14px}
.fd-ladder .rung .tier-odds{font-size:17px}
.fd-tiers{display:grid;gap:12px}
.fd-tier h3{display:flex;align-items:center;gap:10px;font-size:13px;margin:0 0 6px}
.fd-tier h3 small{font:600 11px var(--sans);color:var(--text-3);letter-spacing:0;text-transform:none}
.fd-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto minmax(64px,auto) 24px;grid-template-areas:"art name tier odds x" "art qty qty qty qty";gap:4px 8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.fd-row>.tcg-card{grid-area:art;align-self:start}.fd-row>.fd-row-name{grid-area:name}.fd-row>.fd-row-inf{grid-area:qty}
.fd-row>.tier-chip{grid-area:tier}.fd-row>.fd-row-odds{grid-area:odds}.fd-row>.fd-remove{grid-area:x}
.fd-row .tcg-card{width:40px;border-radius:3px}
.fd-row-name{display:grid;gap:2px;min-width:0}
.fd-row-name b{font:700 13px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-row-name small{font-size:10px;color:var(--text-3)}
.fd-row input,.fd-row select{padding:6px 8px;font-size:12px;width:100%}
.fd-row-odds{font:700 12px var(--display);font-variant-numeric:tabular-nums;color:var(--tier-c);text-align:right}
.fd-remove{border:0;background:none;color:var(--text-3);font-size:18px;cursor:pointer;line-height:1}
.fd-remove:hover{color:var(--bad)}
.fd-checks{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px}
.fd-checks li{display:flex;gap:8px;align-items:baseline;color:var(--text-2)}
.fd-checks li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-2);transform:translateY(-1px)}
.fd-checks li.is-ok{color:var(--text)}
.fd-checks li.is-ok::before{background:var(--ok);box-shadow:0 0 8px rgba(63,224,160,.6)}
.fd-publish{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:var(--s4)}
.fd-operator{max-width:var(--page);margin:0 auto var(--s4);padding:10px 14px;border:1px solid rgba(53,208,255,.35);border-radius:var(--r-m);background:rgba(53,208,255,.06);color:var(--text-2);font-size:var(--fs-s)}
.fd-publish .kicker,.fd-publish .fine-print{margin:0}
.fd-log{margin:0;padding-left:18px;display:grid;gap:4px;font:12px/1.45 var(--mono);color:var(--text-2)}
.fd-log li.ok{color:var(--ok)}
.fd-log li.bad{color:var(--bad)}
.fd-log .fd-go{margin-top:8px;width:auto;text-decoration:none}
@media(max-width:1000px){
  .storefront main>.foundry{grid-template-columns:1fr}
  .fd-build{position:static;max-height:none}
}
.fd-checks li.is-warn{color:var(--warn)}
.fd-checks li.is-warn::before{background:var(--warn)}
/* O26: the stock rule (Task B), the run meter (Task D), the copies field (Task A) and the note */
.fd-replace{border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px 12px;margin:0;display:grid;gap:6px;background:var(--ink-0);min-width:0}
.fd-replace-switch{color:var(--text);align-items:flex-start;font-size:13px;line-height:1.35}
.fd-fields .fd-replace-switch input{width:auto;margin-top:2px;flex:none}
.fd-replace .fine-print{font-size:11px;line-height:1.5;color:var(--text-3)}
.fd-disclosure summary{cursor:pointer;font-size:12px;color:var(--text-2);width:max-content;max-width:100%}
.fd-disclosure p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-2)}
.fd-meter{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-0);min-width:0}
.fd-meter[data-state=short]{border-color:rgba(255,107,107,.6)}
.fd-meter[data-state=full]{border-color:rgba(63,224,160,.5)}
.fd-meter[data-state=replaced]{border-color:rgba(255,197,58,.55)}
.fd-meter-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.fd-meter-head .kicker{margin:0}
.fd-meter-num{font:700 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.fd-meter[data-state=short] .fd-meter-num{color:var(--bad)}
.fd-meter[data-state=full] .fd-meter-num{color:var(--ok)}
.fd-meter[data-state=replaced] .fd-meter-num{color:var(--chase,#ffc53a)}
.fd-meter-act{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px}
.fd-meter-act .ghost{padding:7px 12px;font-size:12px}
.fd-meter-act small{font-size:11px;color:var(--text-3)}
.fd-meter-bar{display:flex;height:10px;border-radius:999px;background:var(--ink-2);overflow:hidden}
.fd-meter-cards{background:var(--ok);transition:width .25s var(--ease-out)}
.fd-meter[data-state=short] .fd-meter-cards{background:var(--bad)}
.fd-meter-repl{background:repeating-linear-gradient(135deg,rgba(255,197,58,.9) 0 6px,rgba(255,197,58,.45) 6px 12px);transition:width .25s var(--ease-out)}
.fd-meter-text p{margin:0;font-size:12px;line-height:1.5;color:var(--text-2)}
.fd-meter-text p+p{margin-top:4px}
.fd-meter.is-heavy{border-color:rgba(255,179,64,.75)}
#fd-points.qty-chips{display:flex;flex-wrap:wrap;gap:4px}
/* O27 N2: the picker's value range; the pack at a glance (spine + money), pinned in the build panel; inline rules */
.fd-range{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.fd-range input{width:84px;min-width:0}
.fd-summary{position:sticky;top:calc(-1 * var(--s5));z-index:6;margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;padding:12px var(--s5) 10px;background:var(--ink-1);box-shadow:0 8px 16px rgba(0,0,0,.35);border-bottom:1px solid var(--line-2);border-radius:var(--r-l) var(--r-l) 0 0;display:grid;gap:8px}
.fd-spine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.fd-spine button{width:100%;display:flex;align-items:center;gap:6px;min-width:0;padding:5px 6px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--text-2);font:600 11px/1.1 var(--sans);cursor:pointer;text-align:left}
.fd-spine button b{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--display);background:var(--ink-3);color:var(--text)}
.fd-spine button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-spine li.is-done button{border-color:rgba(63,224,160,.5);color:var(--text)}
.fd-spine li.is-done button b{background:var(--ok);color:#03140d}
.fd-spine button:hover,.fd-spine button:focus-visible{border-color:var(--text-2)}
.fd-money{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;line-height:1.4;color:var(--text-2)}
.fd-money-run{margin-left:auto;font:700 12px/1.4 var(--display);font-variant-numeric:tabular-nums;color:var(--ok)}
.fd-money-run.is-short{color:var(--bad)}
.fd-hint{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--text-3);font-weight:400;letter-spacing:0}
@media(max-width:1000px){.fd-summary{position:static;margin:0;border-radius:var(--r-m);border:1px solid var(--line-2)}.fd-spine{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
#fd-points .qty-chip{flex:1 0 46px;max-width:64px;padding:7px 4px;font-size:12px}
.fd-meter-text p.is-warn{color:var(--warn)}
.fd-toast{position:fixed;right:16px;bottom:16px;z-index:60;width:min(440px,calc(100vw - 32px));display:grid;gap:8px;padding:12px 14px;border:1px solid rgba(63,224,160,.55);border-radius:var(--r-m);background:var(--ink-1);box-shadow:0 18px 40px rgba(0,0,0,.55);font-size:13px;line-height:1.45;color:var(--text)}
.fd-toast[hidden]{display:none}
.fd-toast p{margin:0;overflow-wrap:anywhere}
.fd-toast-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.fd-toast-actions .ghost{padding:6px 12px;font-size:12px}
@media(max-width:520px){.fd-toast{right:8px;left:8px;bottom:8px;width:auto}.fd-row{grid-template-columns:40px minmax(0,1fr) auto 24px;grid-template-areas:"art name name x" "art tier odds odds" "art qty qty qty"}}

/* =====================================================================
   RUN 5 - P4 - THE PACK OBJECT, THE SHELF, THE MATHS
   The pack is a layered inline SVG (web/shell.html #tpl-pack) wrapped in
   .pack-object with an HTML gloss layer (pointer light rig + sheen) that
   moves with transform/opacity only. Families get their own material
   (pattern, emblem, finish); colours come from --pk-a/b/c/d.
   ===================================================================== */
.pack-object{position:relative;display:inline-block;width:min(240px,62vw);line-height:0;--lx:.32;--ly:.26}
.pack-object .pack-svg{width:100%;height:auto}
.hero-pack .pack-object{width:clamp(180px,17vw,240px);position:relative;z-index:3}
.pk-c-fill{fill:var(--pk-c,#ffc53a)}
.pk-set{font:700 17px var(--display);letter-spacing:3px;fill:#fff4dc;text-anchor:middle}
.pk-setname{font:700 5.6px var(--display);letter-spacing:1.6px;fill:var(--pk-c,#ffc53a);text-anchor:middle}
.pk-em,.pk-pattern{display:none}
.pk-em-t{font:700 11px var(--display);letter-spacing:1px;fill:#2b0b1d;text-anchor:middle}
.pack-svg[data-family="main"] .pk-em-main,.pack-svg[data-family="main"] .pk-pattern-main,
.pack-svg[data-family="extra"] .pk-em-extra,.pack-svg[data-family="extra"] .pk-pattern-extra,
.pack-svg[data-family="premium"] .pk-em-premium,.pack-svg[data-family="premium"] .pk-pattern-premium,
.pack-svg[data-family="starter"] .pk-em-starter,.pack-svg[data-family="starter"] .pk-pattern-starter,
.pack-svg[data-family="promo"] .pk-em-promo,.pack-svg[data-family="promo"] .pk-pattern-promo,
.pack-svg[data-family="showcase"] .pk-em-showcase,.pack-svg[data-family="showcase"] .pk-pattern-showcase,
.pack-svg[data-family="foundry"] .pk-em-foundry,.pack-svg[data-family="foundry"] .pk-pattern-foundry{display:inline}
/* materials: premium is black-and-gold foil with a heavier rim; promo a satin starburst;
   extra a chrome hex; starter a two-tone deck stripe; showcase a ladder; foundry a blueprint */
.pack-svg[data-family="premium"] .pk-shape{filter:saturate(.75) brightness(.8)}
.pack-svg[data-family="premium"] .pk-seam{opacity:.35}
.pack-svg[data-family="premium"] .pk-plate-rim{fill:#0a0705}
.pack-svg[data-family="extra"] .pk-seam{opacity:.38}
.pack-svg[data-family="promo"] .pk-plate-rim{fill:#1a0a24}
.pack-svg[data-family="starter"] .pk-seam,.pack-svg[data-family="starter"] .pk-seam-line{display:none}
.pack-svg[data-family="foundry"] .pk-shape{filter:saturate(.6)}
.pk-stamp{opacity:.9}
.pk-stamp-t{font:700 12px var(--display);letter-spacing:3px;fill:#ff5d4d;text-anchor:middle}
.pk-stamp-s{font:700 4.6px var(--display);letter-spacing:1px;fill:#ff8c80;text-anchor:middle}
.pk-tear{font:700 5.5px var(--display);letter-spacing:1.4px;fill:#fff;fill-opacity:.65;text-anchor:middle}
.pk-soldout{display:none}
.pk-soldout text{font:700 17px var(--display);letter-spacing:4px;fill:#ff6b6b;text-anchor:middle}
.pack-tile.is-closed .pk-soldout,.is-pack-closed .pack-stage .pk-soldout{display:inline}
/* the gloss: the light rig follows the pointer; the sheen sweeps on hover. Clipped to the pack, inside the crimps. */
.pack-gloss{position:absolute;inset:2.4% 0 2.4%;overflow:hidden;pointer-events:none;mix-blend-mode:soft-light;border-radius:2px}
.pack-gloss::before{content:'';position:absolute;left:-60%;top:-45%;width:220%;height:190%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.25) 45%,transparent 75%);opacity:0;
  transform:translate(calc((var(--lx) - .5) * 48%),calc((var(--ly) - .5) * 52%));transition:opacity .35s var(--ease-out)}
.pack-object.is-lit .pack-gloss::before{opacity:.85}
.pack-gloss::after{content:'';position:absolute;top:-10%;bottom:-10%;left:-45%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(0) skewX(-12deg);opacity:0}
.storefront.is-armed .pack-gloss::after,.pack-stage:hover .pack-gloss::after,.hero-art:hover .pack-gloss::after,.pack-tile:hover .pack-gloss::after{opacity:1;animation:gloss-sweep 4.2s var(--ease-io) infinite}
@keyframes gloss-sweep{0%,55%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(480%) skewX(-12deg)}}
.pack-tile.is-closed .pack-gloss,.is-pack-closed .pack-gloss{display:none}

/* --- the shelf: every tile carries the pack object, its price, chase thumb, payout and tier bar --- */
.pt-pack{position:relative;z-index:2;width:118px;transform:translate(-24%,8px) rotate(-6deg);transition:transform .45s var(--ease-out)}
.pt-pack .pack-object{width:100%}
.pt-pack .pack-svg{filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.pack-tile:hover .pt-pack{transform:translate(-28%,2px) rotate(-9deg)}
.pt-badge[data-kind="price-ladder"]{border-color:var(--ok);color:var(--ok)}
.pt-closed{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:grid;gap:3px;padding:9px 11px;border-radius:var(--r-m);background:rgba(10,8,14,.9);border:1px solid rgba(255,107,107,.55);
  box-shadow:0 0 0 4px rgba(255,107,107,.08);font:600 11px/1.35 var(--sans);color:var(--text-2);text-align:left;line-height:1.35}
.pt-closed b{font:700 11px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--bad)}
.pt-closed span{color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-closed small{font-size:10px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pack-tile.is-closed{border-color:rgba(255,107,107,.35);background:repeating-linear-gradient(135deg,rgba(255,107,107,.05) 0 10px,transparent 10px 20px),var(--ink-1)}
.pack-tile.is-closed .pt-art{filter:grayscale(.9) brightness(.55)}
.pack-tile.is-closed .pt-closed{filter:none}
.pack-tile.is-closed .pt-price{text-decoration:line-through;text-decoration-color:rgba(255,107,107,.7);color:var(--text-3)}

/* --- the pack page: closed is a considered state --- */
.closed-panel{display:grid;gap:6px;padding:14px 16px;border-radius:var(--r-m);border:1px solid rgba(255,107,107,.55);background:repeating-linear-gradient(135deg,rgba(255,107,107,.06) 0 10px,transparent 10px 20px),rgba(10,8,14,.9)}
.closed-panel p{margin:0}
.cp-stamp{font:700 12px/1 var(--display);letter-spacing:.28em;color:var(--bad)}
.cp-reason{font:600 var(--fs-m)/1.45 var(--sans);color:var(--text)}
.cp-reopen{font-size:var(--fs-s);line-height:1.5;color:var(--text-2)}
.is-pack-closed .pack-stage .pack-object{filter:grayscale(.85) brightness(.7)}
.is-pack-closed .confirm-line,.is-pack-closed .qty,.is-pack-closed #buy-fine{display:none}

@media(max-width:720px){.pt-pack{width:98px}}

/* ============================== 12. BERRY WALLET (A0) ==============================
   The berry-economy touchpoints: the header chip, the per-card value in the
   vault with its sell-back button, and the berry ledger table. Values only -
   never a ratio, a margin or a return (design/tokenomics_policy.md section 3). */

.wallet-chip{display:flex;align-items:center;gap:var(--s2);padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:linear-gradient(180deg,rgba(255,197,58,.10),rgba(255,197,58,.02));white-space:nowrap}
.wallet-chip .berry-mark{font-size:var(--fs-s)}
.wallet-chip[data-empty="yes"]{border-color:var(--line);opacity:.7}
.wallet-chip #wallet-balance{font:600 var(--fs-s)/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums}
.wallet-chip .wallet-value{font:600 var(--fs-xs)/1 var(--sans);color:var(--text-3);font-variant-numeric:tabular-nums}
.wallet-chip .wallet-link{font:600 var(--fs-xs)/1 var(--sans);color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.wallet-chip .wallet-link:hover{color:var(--text);border-color:var(--text-2)}

.vc-value{font:600 var(--fs-s)/1 var(--sans);color:var(--chase);font-variant-numeric:tabular-nums;white-space:nowrap}
.vc-sell{display:inline-flex;align-items:center}
.sell-btn{background:transparent;border:1px solid var(--line-2);color:var(--text);border-radius:999px;padding:7px 12px;font:600 var(--fs-xs)/1 var(--sans);cursor:pointer;white-space:nowrap;transition:border-color var(--t-2),background var(--t-2),color var(--t-2)}
.sell-btn:hover:not(:disabled){border-color:var(--chase);background:rgba(255,197,58,.12);color:var(--text)}
.sell-btn:disabled{opacity:.4;cursor:not-allowed}
#vault-sale{margin:var(--s3) 0 0}

.berry-kind{font:600 var(--fs-s)/1.4 var(--sans)}
.berry-kind.berry-topup{color:var(--ok)}
.berry-kind.berry-open_debit{color:var(--text-2)}
.berry-kind.berry-buyback{color:var(--chase)}
.berry-kind.berry-pull_credit{color:var(--chase)}
.berry-kind.berry-open_refund{color:var(--warn)}
.berry-amount{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.berry-amount.pos{color:var(--ok)}
.berry-amount.neg{color:var(--text-2)}

@media(max-width:900px){
  .wallet-chip{padding:6px 10px}
  .wallet-chip .wallet-value,.wallet-chip .wallet-link{display:none}
}

/* ============================== 13. BULK SELL-BACK ==============================
   Turning a vault into berries: the quick-select bar, the sell panel with its
   running total, and the per-card values on the end-of-run board. All values,
   never a ratio or a return (design/tokenomics_policy.md section 3). */

.vault-side{display:grid;gap:var(--s4);align-content:start;position:sticky;top:84px;max-height:calc(100vh - 108px);overflow:auto}
.vault-side .ship-panel{position:static}
.sell-panel{background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s5);display:grid;gap:var(--s3)}
.sell-panel h3{margin:0}
.sell-panel .kv{margin:0}
.sell-panel .kv dd{font-variant-numeric:tabular-nums}
.sell-panel .open-button{width:100%}
.bulk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:var(--s3) 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--ink-1)}
.bulk-label{font:700 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.bulk-tiers{display:inline-flex;flex-wrap:wrap;gap:8px}
.chip-btn{background:transparent;border:1px solid var(--line-2);color:var(--text-2);border-radius:999px;padding:6px 11px;font:600 var(--fs-xs)/1 var(--sans);cursor:pointer;transition:border-color var(--t-2),color var(--t-2),background var(--t-2)}
.chip-btn:hover:not(:disabled){border-color:var(--chase);color:var(--text);background:rgba(255,197,58,.10)}
.chip-btn:focus-visible{outline:2px solid var(--plus);outline-offset:2px}
.chip-btn:disabled{opacity:.4;cursor:not-allowed}
.chip-btn.is-plain:hover:not(:disabled){border-color:var(--text-3);background:transparent}
@media(max-width:900px){
  .vault-side{position:static}
}

/* ===================== run 8 =====================
   The card view (tap any card), the vault's own headline, the sell quick-picks'
   tier chips, and the top-up entry point on the pack page. */

/* ---- the card view: one overlay for every card on every surface ---- */
.card-view{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.card-view .cv-backdrop{position:absolute;inset:0;background:rgba(3,4,9,.82);backdrop-filter:blur(8px)}
.card-view .cv-panel{position:relative;display:grid;grid-template-columns:minmax(220px,min(440px,46vw)) minmax(0,380px);gap:clamp(18px,3vw,36px);align-items:center;
  max-width:min(940px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(16px,2.6vw,30px);border-radius:var(--r-l);
  background:linear-gradient(150deg,var(--tier-g),transparent 50%),rgba(10,11,20,.97);border:1px solid var(--line-2);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--tier-c) 30%,transparent)}
.card-view .cv-art{margin:0}
.card-view .cv-art .tcg-card{width:100%;box-shadow:0 0 0 2px var(--tier-c),0 0 70px var(--tier-g),0 30px 60px rgba(0,0,0,.6)}
.card-view .cv-info{display:grid;gap:12px;align-content:center}
.card-view .cv-kicker{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 12px/1.3 var(--sans);color:var(--text-2)}
.card-view h2{font-size:clamp(28px,3.4vw,44px);line-height:.98;text-transform:uppercase;margin:0}
.card-view .cv-printing{margin:0;color:var(--text-2);font-size:var(--fs-s);line-height:1.5}
.card-view .cv-worth{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-m);border:1px solid rgba(255,197,58,.35);background:rgba(255,197,58,.07)}
.card-view .cv-worth span{font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.card-view .cv-worth b{font:700 clamp(28px,3vw,40px)/1.05 var(--display);color:var(--chase);font-variant-numeric:tabular-nums}
.card-view .cv-worth small{font-size:var(--fs-xs);color:var(--text-2)}
/* run 18: the reference price under the berry value - one figure, two units */
.card-view .cv-worth .cv-aud-label{margin-top:10px}
.card-view .cv-worth b.cv-aud{font:700 clamp(20px,2.2vw,26px)/1.1 var(--display);color:var(--text)}
.card-view .cv-ref-note{margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.card-view .cv-ref-note:empty{display:none}
/* 24 Oct: the card's price line - the last 3, 6, 9 or 12 months of the market
   price the shop recorded, drawn in the card view itself. */
.card-view .cv-chart{display:grid;gap:7px;padding:12px 14px 10px;border-radius:var(--r-m);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.card-view .cv-chart[hidden]{display:none}
.card-view .cv-chart-head{display:flex;align-items:center;gap:10px}
.card-view .cv-chart-title{font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.card-view .cv-chart-ranges{display:flex;gap:4px}
.card-view .cv-range{font:700 10px/1 var(--display);letter-spacing:.08em;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--text-2);cursor:pointer}
.card-view .cv-range:hover{border-color:rgba(255,197,58,.5);color:var(--text)}
.card-view .cv-range[aria-pressed="true"]{border-color:var(--chase);color:var(--chase);background:rgba(255,197,58,.12)}
.card-view .cv-range:focus-visible{outline:2px solid var(--chase);outline-offset:2px}
.card-view .cv-chart-move{margin-left:auto;font:700 13px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text-2)}
.card-view .cv-chart-move[data-dir="up"]{color:#6ee7a8}
.card-view .cv-chart-move[data-dir="down"]{color:#ff8a8a}
.card-view .cv-plot{width:100%;height:auto;display:block;overflow:visible}
.card-view .cv-chart-note{margin:0;font-size:10px;line-height:1.45;color:var(--text-3)}
.card-view .cv-chart-empty{margin:6px 0;font-size:var(--fs-xs);color:var(--text-3)}
.card-view [hidden]{display:none!important}
.card-view .cv-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:var(--fs-s)}
.card-view .cv-facts:empty{display:none}
.card-view .cv-facts dt{color:var(--text-3)}
.card-view .cv-facts dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.card-view .cv-sell{margin:0;font-size:var(--fs-s);line-height:1.5;color:var(--ok)}
.card-view .cv-sell:empty{display:none}
.card-view .cv-close{justify-self:start;margin-top:4px}
.card-view-open body{overflow:hidden}
@media(max-width:720px){
  .card-view .cv-panel{grid-template-columns:1fr;max-height:calc(100vh - 20px)}
  .card-view .cv-art{width:min(260px,70vw);justify-self:center}
}
.is-viewable{cursor:zoom-in}
.is-viewable:focus-visible{outline:2px solid var(--plus);outline-offset:3px}
.link-btn{background:none;border:0;padding:0;color:var(--text);font:inherit;font-weight:700;cursor:zoom-in;text-align:left;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.link-btn:hover{text-decoration-color:var(--chase)}
.link-btn:focus-visible{outline:2px solid var(--plus);outline-offset:2px}
.vault-card .vc-look{position:absolute;left:8px;top:8px;z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(6,7,13,.72);
  color:#fff;font:700 14px/1 var(--sans);display:grid;place-items:center;cursor:zoom-in;opacity:.0;transition:opacity var(--t-2)}
.vault-card:hover .vc-look,.vault-card .vc-look:focus-visible{opacity:1}
.vault-card .vc-look:focus-visible{outline:2px solid var(--plus);outline-offset:1px}
@media(hover:none){.vault-card .vc-look{opacity:.85}}

/* ---- the vault's own headline (the server's holdings, at the run board's weight) ---- */
.vault-headline{display:grid;gap:2px;justify-items:end;text-align:right;padding:14px 20px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:linear-gradient(160deg,rgba(255,197,58,.10),transparent 60%),rgba(8,9,18,.6);min-width:min(340px,100%)}
.vault-headline .vh-k{margin:0;font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.vault-headline .vh-v{margin:4px 0 0;display:flex;align-items:baseline;gap:10px;justify-content:flex-end}
.vault-headline .vh-v b{font:700 clamp(36px,4.8vw,60px)/1 var(--display);color:var(--chase);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vault-headline .vh-v small{font:700 14px/1 var(--display);color:var(--text-2);letter-spacing:.04em}
.vault-headline .vh-n{margin:2px 0 0;font-size:var(--fs-xs);color:var(--text-2)}
.vault-headline[data-empty="yes"] .vh-v b{color:var(--text-3)}
@media(max-width:820px){.vault-headline{justify-items:start;text-align:left}.vault-headline .vh-v{justify-content:flex-start}}

/* ---- the sell quick-picks: Bulk / Plus / Hit / Chase ---- */
.bulk-bar .chip-btn{display:inline-flex;align-items:baseline;gap:6px}
.bulk-note{margin:6px 0 10px}

/* ---- the top-up entry point on the pack page ---- */
.buy-inline{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,197,58,.55);
  background:rgba(255,197,58,.10);color:var(--chase);font:700 var(--fs-s)/1 var(--sans);text-decoration:none;justify-self:start}
.buy-inline:hover{background:rgba(255,197,58,.18);color:#ffe3a1}
.buy-inline .berry-mark{font-size:14px}
.buy-shortfall{margin:8px 0;color:var(--warn);overflow-wrap:anywhere}
.opening-layout > *{min-width:0}
.ladder-head{flex-wrap:wrap}
.waffle-wrap{grid-template-columns:auto minmax(0,1fr)}
.ladder-note,.rung-value{overflow-wrap:anywhere}

/* ---- the header fits the screens the shop is used on (run 8) ----
   r8/r9 added the level chip, Buy berries and the account tag to the bar; between
   1181px and 1640px it overflowed and the body's overflow clip cut "Buy berries"
   and the account tag off the right edge. The live-pool sentence steps back
   (its dot and the DEMO pill stay), the gaps tighten and the toggles stay on
   one line, so every entry point is on screen. */
@media(max-width:1640px){
  .topbar{gap:12px}
  .top-meta #live-pool{display:none}
  .top-controls .toggle{white-space:nowrap;padding:7px 10px}
  .volume input{width:60px}
}
@media(max-width:1440px){
  .appnav a{padding:9px 10px}
  .appnav a[data-nav="account"]{display:none}
  #sound-toggle[aria-pressed="false"]~.volume{display:none}
  .wallet-chip .wallet-link{display:none}
  .level-chip progress{display:none}
}

/* The berry glyph - the currency mark (run 10: gems were renamed berries at the same numbers, the owner's decision N.3).
   The brand kit's /brand/ohara-berry.svg - a struck 'b' in gold, variant A cut 3 (owner, 12 Oct 2026).
   There is NO drawn fallback any more: the old one was a red disc, which is the fruit-and-leaf coin the
   owner retired. The mark is decorative (the figure beside it always says "berries"), so on the rare
   kit-less build the space is simply empty rather than wrong. */
.berry-mark{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.15em;
  background:url(/brand/ohara-berry.svg) center/contain no-repeat}
.price .berry-mark{width:.9em;height:.9em;margin-right:.1em}
.r-worth .berry-mark{width:.95em;height:.95em;margin-right:1px;vertical-align:-.12em}
.vh-v .berry-mark{width:.8em;height:.8em;margin-right:.12em}
.rung-value{color:var(--chase);font-variant-numeric:tabular-nums}
.ladder-note#ladder-range{color:var(--chase);font-weight:700}

/* ---------- run 10: the pack-count promise, berry prizes ---------- */
/* "Max N": the most packs this box can open in full right now that the wallet can pay for. */
.qty-chip.qty-max{font-size:12px;letter-spacing:.02em}
.qty-chip.qty-max b{font-size:15px}
/* a count the wallet does not cover yet: still choosable (top up first), shown as such */
.qty-chip.is-over-wallet:not([aria-pressed="true"]){border-style:dashed;color:var(--text-3)}
.run-total .run-cap{color:var(--warn)}
.run-total .run-afford{color:var(--text-2)}
/* O31 (owner, 6 Oct): the berry forecast as a little tab under the run total -
   collapsed so the buy box stays clean, one tap opens the honest figure. */
.run-forecast{margin:8px 0 0;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--ink-2)}
.run-forecast[hidden]{display:none}
.run-forecast .rf-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;cursor:pointer;list-style:none;font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);transition:color var(--t-1)}
.run-forecast .rf-tab::-webkit-details-marker{display:none}
.run-forecast .rf-tab::marker{content:""}
.run-forecast .rf-tab:hover,.run-forecast[open] .rf-tab{color:var(--text)}
.run-forecast .rf-arrow{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-1)}
.run-forecast[open] .rf-arrow{transform:rotate(-135deg)}
.run-forecast .rf-body{margin:0;padding:0 11px 8px;font-size:12px;line-height:1.45;color:var(--text-2)}
.run-forecast .rf-fine{margin:0;padding:0 11px 10px;font-size:11px;line-height:1.4;color:var(--text-3)}
/* O31 (owner): /qa - the short answers. Written up front so the front-door
   marketing sign does not have to carry a paragraph. */
.qa{display:flex;flex-direction:column;gap:10px;max-width:820px;padding-top:var(--s3)}
.qa-item{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-2)}
.qa-item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.qa-item>summary::-webkit-details-marker{display:none}
.qa-item>summary::marker{content:""}
.qa-item>summary h2{font-size:17px;line-height:1.25;margin:0;letter-spacing:-.01em;color:var(--text)}
.qa-item>summary::after{content:"+";font:700 20px/1 var(--display);color:var(--text-3)}
.qa-item[open]>summary::after{content:"\2013"}
.qa-item>summary:hover h2{color:var(--signal)}
.qa-body{padding:0 16px 16px;color:var(--text-2);font-size:14px;line-height:1.55}
.qa-body p{margin:0 0 10px}
.qa-body p:last-child{margin-bottom:0}
.qa-body ul{margin:0 0 10px;padding-left:20px}
.qa-body li{margin-bottom:5px}
.qa-body a{color:var(--text)}
/* O114 (item 2): the support page - what the shop is and is not, how to reach a person, the form, your messages */
.support{display:flex;flex-direction:column;gap:14px;max-width:820px;padding-top:var(--s3);padding-bottom:var(--s6)}
.support-status{padding:12px 16px;border:1px solid rgba(255,107,107,.45);border-radius:var(--r-m);background:#2a1216;color:#ffd2d2;font-size:14px;line-height:1.5}
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.support-card{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-2);padding:16px 18px;color:var(--text-2);font-size:14px;line-height:1.55}
.support-card h2{margin:0 0 10px;font-size:18px;color:var(--text)}
.support-card ul{margin:0;padding-left:20px}.support-card li{margin-bottom:6px}
.support-facts{display:grid;gap:10px;margin:0}.support-facts div{display:grid;grid-template-columns:150px 1fr;gap:12px}
.support-facts dt{font-weight:700;color:var(--text)}.support-facts dd{margin:0}
@media (max-width:560px){.support-facts div{grid-template-columns:1fr;gap:2px}}
.support-form{display:grid;gap:12px}.support-form label{display:grid;gap:6px;font-weight:600;color:var(--text)}
.support-form select,.support-form input,.support-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font:400 15px/1.45 var(--sans,system-ui)}
.support-form textarea{min-height:130px;resize:vertical}.support-form button{justify-self:start}
.support-who,.support-result{margin:0;color:var(--text-2)}.support-result:empty{display:none}
.support-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.support-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px}.support-item.is-answered{border-color:rgba(83,214,145,.45)}
.support-meta{margin:0 0 6px;font-size:12px;color:var(--text-3)}.support-meta b{color:var(--text);font-family:var(--mono)}
.support-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2)}
.support-answer{margin-top:10px;padding:10px 12px;border-left:3px solid var(--plus,#53d691);background:rgba(83,214,145,.07);border-radius:0 10px 10px 0}
.support-rules{color:var(--text-3);font-size:13px}.support-rules a{color:var(--text-2)}
/* O114 (item 3): the average value per open - above the pack page's Open button, and a line on each shelf tile */
.open-value{margin:2px 0 10px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.03)}
.open-value>summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.open-value>summary::-webkit-details-marker{display:none}.open-value>summary::marker{content:""}
.ov-label{font:700 12px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.ov-amount{font:700 18px/1 var(--display);color:var(--gold);white-space:nowrap}
.ov-body{margin:0;padding:0 14px 12px;color:var(--text-2);font-size:13px;line-height:1.5}
.pt-avg{display:block;font-size:12px;color:var(--gold)}
/* O114 (item 4): check a pull (/fair) and the ticket column on the pack page */
.fair-page{display:flex;flex-direction:column;gap:14px;max-width:880px;padding-top:var(--s3);padding-bottom:var(--s6)}
.fair-how summary{cursor:pointer}.fair-how ol{margin:10px 0 0;padding-left:20px}.fair-how li{margin-bottom:8px}
.fair-pick{display:grid;gap:12px}.fair-pick label{display:grid;gap:6px;font-weight:600;color:var(--text)}
.fair-pick select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font:400 14px/1.4 var(--sans,system-ui)}
.fair-pick button{justify-self:start}
.fair-result h2{font-size:20px}.fair-result h2.fair-good{color:#7ee2a8}.fair-result h2.fair-bad{color:#ff8b8b}
.fair-got{color:var(--text);font-weight:600}
.fair-checks{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.fair-check{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.fair-check p{margin:4px 0 0;overflow-wrap:anywhere}
.fair-check.is-pass{border-color:rgba(83,214,145,.5)}.fair-check.is-fail{border-color:rgba(255,107,107,.6)}
.fc-mark{font:700 20px/1 var(--display)}.is-pass .fc-mark{color:#7ee2a8}.is-fail .fc-mark{color:#ff8b8b}.is-none .fc-mark{color:var(--text-3)}
.fair-raw pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.45 var(--mono);color:var(--text-2)}
#odds-fingerprints{overflow-wrap:anywhere}
.data-table td.tickets{white-space:nowrap;font-family:var(--mono);font-size:12px}
/* O114 (item 5): the postage line under the account's level */
.ah-level-post{margin:6px 0 0;font-size:13px;color:var(--gold)}
/* O114 (item 6): the monthly race and the invite card */
.race{display:flex;flex-direction:column;gap:14px;max-width:880px;padding-top:var(--s3);padding-bottom:var(--s6)}
.race-prizes{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.race-prize{display:grid;gap:4px;padding:12px 16px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-2);min-width:150px}
.race-prize b{font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}.race-prize span{font:700 20px/1 var(--display);color:var(--gold)}
.race-me{margin:0;color:var(--text);font-weight:600}.race-board tr.is-me td{color:var(--gold)}
.race-sub{margin:10px 0 0;font-size:20px}.race-winners{margin:0;padding-left:20px;color:var(--text-2)}.race-rules{color:var(--text-3);font-size:13px}
.ah-invite{margin-top:10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:12px;font-size:13px;color:var(--text-2)}
.ah-invite p{margin:0 0 4px}.ah-invite code{font-family:var(--mono);color:var(--text)}.ah-invite a{overflow-wrap:anywhere}
/* O114 (item 7): the sign-up form's phone step */
.signup-phone{display:grid;gap:8px;margin:0;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px}
.signup-phone legend{padding:0 6px;font-weight:700;color:var(--text)}.signup-phone button{justify-self:start}
.qa-note{margin-top:var(--s3);padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-m);color:var(--text-2);font-size:13px;line-height:1.5}
/* a berry prize's card face is drawn by the server: no holo, no tier frame glow over it */
.tcg-card.is-prize img{background:#170812}
.fd-prize{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:var(--s3) 0}
.fd-prize label{display:flex;align-items:center;gap:8px;font-weight:700}
.fd-prize input{width:9em}
.fd-prize small{color:var(--text-3);flex-basis:100%}
.fd-row-inf{font:700 20px/1 var(--display);color:var(--chase);text-align:center}

/* Run 10 (J28): rebuilding a live pack - the revision on sale beside the one that would replace it. */
.fd-diff{display:grid;gap:10px;margin:10px 0;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-0)}
.fd-diff[hidden]{display:none}
.fd-diff table{width:100%;border-collapse:collapse;font-size:12px}
.fd-diff th,.fd-diff td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.fd-diff .num{text-align:right;font-variant-numeric:tabular-nums}
.fd-diff-sum th{color:var(--text-3);font-weight:600;width:42%}
.fd-diff-sum td:last-child{color:var(--text);font-weight:700}
.fd-diff-lines td small{color:var(--text-3)}
.fd-diff-lines tr.is-new td:first-child b{color:var(--ok)}
.fd-diff-lines tr.is-removed td,.fd-diff-lines tr.is-left td{color:var(--text-3)}
.fd-diff-refusal{margin:0;color:var(--bad);font-size:13px}
#fd-name:disabled,#fd-desc:disabled{opacity:.75;cursor:not-allowed}

/* Run 10 (J8, J31): the pool says how it is sorted; a pack's longer words wait behind "More". */
.pool-sort{margin-left:auto;align-self:center;font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.spec-more{display:inline}
.spec-more summary{display:inline;cursor:pointer;color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.spec-more[open] summary{color:var(--text)}
.spec-more p{margin:6px 0 0}

/* ============================== RUN 10 - J32 - THE RASTER PACK FRONT ==============================
   A family with art is drawn as the brand kit's photographed booster (rasterFront in app.js): the
   picture cut out along its own crimp scallops, the strip above its top rail, this pack's set block,
   name and price printed on the clear parts in the family's foil (gold, or silver on the blue extra).
   The drawn shell stays only as the fallback for a family with no art. A tight contact shadow under
   a soft cast one, so the pack sits on the page as an object. */
.pack-svg.is-raster{filter:drop-shadow(0 1.5px 1.2px rgba(0,0,0,.6)) drop-shadow(0 24px 28px rgba(0,0,0,.62))}
.pt-pack .pack-svg.is-raster{filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)) drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.t-pack .pack-svg.is-raster{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)) drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.pkr-print text{text-anchor:middle;paint-order:stroke;stroke:rgba(4,5,12,.72);stroke-linejoin:round}
.pkr-plate rect,.pkr-chip rect,.pkr-plaque{stroke-width:.6}
.pkr-print.is-gold .pkr-plate rect,.pkr-print.is-gold .pkr-chip rect,.pkr-print.is-gold .pkr-plaque{stroke:rgba(243,210,126,.72)}
.pkr-print.is-silver .pkr-plate rect,.pkr-print.is-silver .pkr-chip rect,.pkr-print.is-silver .pkr-plaque{stroke:rgba(236,243,250,.78)}
.pkr-plate rect{fill:rgba(5,6,12,.6)}
/* O43: the plaque under the house mark and the name on a pale front (PACK_FRONTS plaque) */
.pkr-plaque{fill:rgba(5,6,12,.66)}
.pkr-set{font:700 7.2px var(--display);letter-spacing:1.4px;stroke-width:1.1px}
.pkr-setname{font:700 4.1px var(--display);letter-spacing:.8px;stroke:none}
.pkr-word{font:700 7px var(--display);letter-spacing:5.5px;stroke-width:1.4px}
.pkr-name{font-weight:700;font-family:var(--display);stroke-width:2.4px}
.pkr-chip rect{fill:rgba(5,6,12,.74)}
.pkr-chip text{font:700 5.6px var(--display);letter-spacing:1.5px;stroke:none}
.pkr-perf{fill:none;stroke:#fff;stroke-opacity:.42;stroke-width:.6;stroke-dasharray:2.6 2.2}
.pack-svg.is-raster .pk-tear{font-size:4.2px;fill-opacity:.7}
/* run 18: a raster front's light is drawn inside the art, under its own silhouette (.pkr-gloss, app.js
   rasterFront); the HTML rectangle - wider than the pack's waist and crimps - is off for it, so no white
   light lands on the page beside the art on hover, while armed or under the pointer */
.pack-object.is-raster .pack-gloss{display:none}
.pkr-gloss{mix-blend-mode:soft-light;pointer-events:none}
.pkr-glow{opacity:0;transition:opacity var(--t-3)}
.pack-object.is-lit .pkr-glow{opacity:.85}
.pkr-sheen{opacity:0;transform-box:fill-box}
.storefront.is-armed .pkr-sheen,.pack-stage:hover .pkr-sheen,.hero-art:hover .pkr-sheen,.pack-tile:hover .pkr-sheen{opacity:1;animation:pkr-sweep 4.2s var(--ease-io) infinite}
@keyframes pkr-sweep{0%,55%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(480%) skewX(-12deg)}}
.pack-tile.is-closed .pkr-gloss,.is-pack-closed .pkr-gloss{display:none}
@media (prefers-reduced-motion:reduce){.pkr-sheen{animation:none!important}}
/* run 16 (audit U2): the phone buy bar - the price, the run size and Open, pinned
   to the bottom while the buy box's own Open button is off screen */
.mbb{display:none}
@media (max-width:760px){
  body.mbb-on .mbb:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(9,9,13,.95);border-top:1px solid var(--line-2);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  body.mbb-on{padding-bottom:76px}
  .mbb-price{flex:1;min-width:0;display:grid;gap:2px}
  .mbb-price b{font:700 17px/1.1 var(--display);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbb-price small{font:600 11px/1.2 var(--sans);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbb-qty{flex:none;max-width:104px;padding:10px 8px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--ink-1);color:var(--text);font:600 14px/1 var(--sans)}
  .mbb .open-button.slim{width:auto;flex:none;min-height:46px;padding:0 18px;display:flex;align-items:center}
  .mbb .open-button.slim .cta-main{font-size:16px}
}
/* Run 17 (B6): the open page board leads with keeping and shipping */
.ob-keep{grid-column:1/-1;margin:12px 0 0}
/* Run 17 (B1): the binder - your sets, what you have, what is still to find, your best pull */
.storefront main>.vault-views{display:flex;gap:8px;max-width:var(--page);margin:var(--s4) auto 0;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.vault-views [aria-selected="true"]{border-color:var(--chase);color:var(--text)}
.set-binder[hidden]{display:none}
.set-binder{margin:var(--s4) 0}
.sb-sets{display:grid;gap:18px;margin-top:14px}
.sb-set{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-l);background:rgba(255,255,255,.02)}
.sb-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.sb-head h3{margin:0;display:flex;gap:10px;align-items:baseline}
.sb-code{font:700 var(--fs-m)/1 var(--display);letter-spacing:.04em}
.sb-name{color:var(--text-2);font-size:var(--fs-s)}
.sb-count{margin:0;display:flex;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums}
.sb-count span{color:var(--text-2);font-size:var(--fs-s)}
.sb-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.sb-fill{display:block;height:100%;border-radius:999px;background:var(--chase)}
.sb-best{display:flex;gap:14px;align-items:center}
.sb-best .tcg-card{width:110px;flex:none}
.sb-best p{margin:0;display:grid;gap:3px}
.sb-strip{display:grid;gap:8px}
.sb-strip-k{margin:0;font-size:var(--fs-s)}
.sb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 10px}
.sb-tile{display:grid;gap:3px;color:var(--text);text-decoration:none;font-size:var(--fs-xs)}
.sb-tile .tcg-card{width:100%}
.sb-tile b{font-size:var(--fs-xs);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-link:hover b{text-decoration:underline}
/* Run 17 (B4): big pulls this week - real pulls only, the hype strip */
.big-pulls{padding-bottom:clamp(28px,3.5vw,48px)}
.big-pulls .section-head{margin-bottom:14px}
.bp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.bp-grid[hidden],.bp-empty[hidden]{display:none}
.bp-tile{display:grid;gap:4px;align-content:start;height:100%;text-decoration:none;color:var(--text);padding:10px 10px 12px;border:1px solid var(--line-2);border-radius:var(--r-l);
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,197,58,.16),transparent 70%);transition:border-color var(--t-2),transform var(--t-2)}
.bp-tile:hover{border-color:var(--chase);transform:translateY(-2px)}
.bp-art{position:relative;display:block;margin-bottom:6px}
.bp-art .tcg-card{width:100%}
.bp-x{position:absolute;top:8px;right:8px;padding:5px 9px;border-radius:999px;background:var(--chase);color:#1a1200;font:800 12px/1 var(--sans);box-shadow:0 2px 10px rgba(0,0,0,.45)}
/* O40 fix 7: the box a big pull came from, shown over the card on hover / keyboard focus */
.bp-box{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:22px 10px 10px;border-radius:0 0 var(--r-m,10px) var(--r-m,10px);background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.55) 70%,transparent);color:#fff;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.bp-box small{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bp-box b{font:800 15px/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-tile:hover .bp-box,.bp-tile:focus-visible .bp-box{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.bp-box{transition:none;transform:none}}
.bp-value{font:800 clamp(18px,1.6vw,23px)/1.1 var(--display);color:var(--chase);white-space:nowrap}
.bp-name{font-size:var(--fs-s);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-from{font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-who{font-size:var(--fs-xs);color:var(--text-2);line-height:1.35}
.bp-empty{margin:0;padding:22px;border:1px dashed var(--line-2);border-radius:var(--r-l);color:var(--text-2);text-align:center}
@media(max-width:520px){.bp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* =====================================================================
   RUN 17 - B3 SCHEDULED DROPS + B2 LEVEL FRAMES
   ===================================================================== */
/* the home strip: the real drops of the next 7 days, soonest first; hidden when there are none */
.drops{padding-bottom:clamp(28px,3.5vw,48px)}
.drops[hidden]{display:none}
.drops .section-head{margin-bottom:14px}
.drop-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.drop-tile{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:12px 14px;text-decoration:none;color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-l);background:linear-gradient(135deg,color-mix(in srgb,var(--pk-a,#7a3cff) 22%,transparent),transparent 65%),var(--ink-1);
  transition:border-color .2s,transform .2s var(--ease-out)}
.drop-tile:hover{border-color:var(--chase);transform:translateY(-2px)}
.drop-pack{display:block;line-height:0}
.drop-pack .pack-object{width:100%}
.drop-pack .pack-svg{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.drop-body{display:grid;gap:3px;min-width:0}
.drop-when{font:700 10px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--chase)}
.drop-name{font:700 var(--fs-m)/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-sub,.drop-price,.drop-early{font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-early{color:var(--ok)}
.drop-count{font:800 clamp(15px,1.25vw,19px)/1.15 var(--display);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.is-drop #open-button .cta-main,.is-drop #mbb-label{font-variant-numeric:tabular-nums}
@media(max-width:520px){.drop-grid{grid-template-columns:minmax(0,1fr);gap:10px}}
.pt-badge[data-kind="drop"]{background:var(--chase);border-color:var(--chase);color:#1a1200}
.pt-badge[data-kind="sold-out"]{border-color:var(--bad);color:var(--bad)}
/* run 17, C: the reveal's buy-back guarantee line, under its quiet sell button */
.sell-guarantee{margin:6px 0 0;font-size:var(--fs-xs);line-height:1.4;color:var(--text-3)}
/* steer #5: a drop that sold out in early access stays on the strip, sold out, until its time */
.drop-tile.is-sold-out{border-color:rgba(255,107,107,.45);background:repeating-linear-gradient(135deg,rgba(255,107,107,.05) 0 10px,transparent 10px 20px),var(--ink-1)}
.drop-tile.is-sold-out .drop-pack{filter:grayscale(.85) brightness(.7)}
.drop-tile.is-sold-out .drop-when{color:var(--text-3);text-decoration:line-through}
.drop-tile.is-sold-out .drop-count{color:var(--bad)}
/* the pack page: the drop's countdown above the buy box; Open waits for the sale, or the customer's early access */
.drop-panel{display:grid;gap:4px;margin-bottom:12px;padding:12px 14px;border-radius:var(--r-m);border:1px solid var(--chase);
  background:linear-gradient(135deg,rgba(255,197,58,.12),transparent 70%),rgba(10,8,14,.85)}
.drop-panel[hidden]{display:none}
.drop-panel p{margin:0}
.dp-kicker{font:700 11px/1 var(--display);letter-spacing:.24em;color:var(--chase)}
.dp-count{font:800 clamp(20px,2vw,26px)/1.15 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.dp-when{font-size:var(--fs-s);line-height:1.45;color:var(--text-2)}
.dp-early{font-size:var(--fs-s);line-height:1.45;color:var(--ok)}
.dp-early[hidden]{display:none}
/* B2: the level frames - a cosmetic rim the customer's own level unlocks, on the packs of their own screens.
   It follows the pack's silhouette, crimps included, and changes nothing else. */
body[data-skin="frame-bronze"]{--skin-1:#d08f50;--skin-2:#b8743a;--skin-g:rgba(208,143,80,.55)}
body[data-skin="frame-silver"]{--skin-1:#eef2f7;--skin-2:#b9c2cf;--skin-g:rgba(227,232,239,.5)}
body[data-skin="frame-gold"]{--skin-1:#ffe08a;--skin-2:#ffc53a;--skin-g:rgba(255,197,58,.6)}
body[data-skin="frame-holo"]{--skin-1:#ff7ad9;--skin-2:#7af0ff;--skin-g:rgba(180,120,255,.6)}
body[data-skin] .pack-stage .pack-svg,body[data-skin] .hero-pack .pack-svg{filter:drop-shadow(2px 0 0 var(--skin-1)) drop-shadow(-2px 0 0 var(--skin-2)) drop-shadow(0 2px 0 var(--skin-2))
  drop-shadow(0 -2px 0 var(--skin-1)) drop-shadow(0 0 14px var(--skin-g)) drop-shadow(0 26px 34px rgba(0,0,0,.6))}
body[data-skin] .pt-pack .pack-svg,body[data-skin] .drop-pack .pack-svg{filter:drop-shadow(1px 0 0 var(--skin-1)) drop-shadow(-1px 0 0 var(--skin-2)) drop-shadow(0 1px 0 var(--skin-2))
  drop-shadow(0 -1px 0 var(--skin-1)) drop-shadow(0 12px 16px rgba(0,0,0,.55))}
body[data-skin] .t-pack .pack-svg{filter:drop-shadow(2px 0 0 var(--skin-1)) drop-shadow(-2px 0 0 var(--skin-2)) drop-shadow(0 2px 0 var(--skin-2))
  drop-shadow(0 -2px 0 var(--skin-1)) drop-shadow(0 0 18px var(--skin-g)) drop-shadow(0 30px 40px rgba(0,0,0,.65))}
#level-thresholds tr.is-reached.has-perk td:last-child{color:var(--ok)}

/* ============================== 15. RUN 18: THE TOP BAR ==============================
   One hierarchy (lead-dev steer): brand and the three screens on the left; one right-hand cluster -
   berries (the top-up "+" inside the chip), level, a Settings popover (reveal style, sound, a labelled
   volume) and one account control. The environment line (the demo line under the bar) carries the
   disclosure; the bar carries no status text. Scoped to the storefront: the back office keeps its bar. */
.storefront .topbar{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);height:64px}
.storefront .top-right{display:flex;align-items:center;gap:8px;justify-self:end;min-width:0}
.storefront .wallet-chip{gap:2px;padding:0 4px 0 12px;height:36px}
.storefront .wallet-bal-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--text);padding:8px 4px}
.storefront .wallet-add{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;text-decoration:none;font:700 16px/1 var(--sans);color:var(--ink-0);background:var(--chase)}
.storefront .wallet-add:hover{filter:brightness(1.08)}
.storefront .wallet-add[hidden]{display:none}
.storefront .customer-tag{font:600 var(--fs-s)/1 var(--sans);color:var(--text);border-color:var(--line-2);padding:10px 14px;text-decoration:none}
.storefront .customer-tag:hover{border-color:var(--text-2)}
.top-settings{position:relative}
.top-settings>summary{list-style:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;color:var(--text);font:600 var(--fs-s)/1 var(--sans)}
.top-settings>summary::-webkit-details-marker{display:none}
.top-settings>summary:hover{border-color:var(--text-2)}
.top-settings[open]>summary{border-color:var(--plus)}
.top-settings .gear{font:400 16px/1 "Segoe UI Symbol","Segoe UI",system-ui,sans-serif;color:var(--text-2)}
.top-settings:not([open]) .top-settings-panel{display:none}
.top-settings-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;gap:10px;min-width:260px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--ink-1);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ts-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.ts-label{font:600 var(--fs-s)/1 var(--sans);color:var(--text-2)}
.top-settings-panel .volume{display:flex}
.top-settings-panel .volume input{width:120px}
@media(max-width:1180px){.storefront .appnav{display:flex}}
@media(max-width:900px){
  .storefront .topbar{grid-template-columns:auto 1fr;grid-template-areas:"brand right" "nav nav";height:auto;padding-top:8px;padding-bottom:6px;row-gap:6px}
  .storefront .topbar .brand{grid-area:brand}
  .storefront .top-right{grid-area:right}
  .storefront .appnav{grid-area:nav;display:flex;justify-content:flex-start;overflow-x:auto}
  .storefront .customer-tag{display:inline-flex;padding:9px 11px}
  .storefront .level-chip progress{display:none}
}
@media(max-width:520px){
  .storefront .top-settings-word{display:none}
  .storefront .top-settings>summary{padding:0 10px}
  .storefront .wallet-chip{padding-left:8px}
  .storefront .level-chip{display:none}
  .top-settings-panel{right:-60px}
}

/* ---------- O24 E1: berry stock replacement (said plainly before and after a draw) ---------- */
.replacement-note{margin:var(--s3) 0 0;padding:var(--s3);border:1px solid var(--line-2);border-left:3px solid var(--chase);border-radius:var(--r-s);background:var(--ink-1);font-size:var(--fs-s);line-height:1.5;color:var(--text-2)}
.replacement-note p{margin:0 0 var(--s2)}
.replacement-note p:last-child{margin-bottom:0}
.replacement-note .rn-title{color:var(--text);margin-bottom:var(--s1)}
.replacement-note .rn-now{color:var(--chase);font-weight:600;overflow-wrap:anywhere}
.pool-card.is-replaced .tcg-card{filter:saturate(.35) brightness(.7)}
.pool-card.is-replaced .tcg-card::after{content:'OUT OF STOCK \00B7  PAYS ITS VALUE';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);font:700 10px/1.2 var(--display);letter-spacing:.12em;color:var(--chase);border:2px solid var(--chase);padding:5px 6px;border-radius:4px;background:rgba(0,0,0,.65);text-align:center;width:max-content;max-width:90%;white-space:normal}
.pool-card.is-replaced .pc-left{color:var(--chase);font-weight:600}
.showcase-fan .tcg-card.is-replaced{filter:saturate(.35) brightness(.7)}
.t-card.is-replaced .reveal-img{filter:saturate(.55)}
.t-card.is-replaced::after{content:'OUT OF STOCK \00B7  REPLACED BY BERRIES';position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:3;font:700 11px/1.2 var(--display);letter-spacing:.12em;color:var(--ink-0);background:var(--chase);padding:5px 8px;border-radius:4px;white-space:nowrap;pointer-events:none}
.berry-kind.berry-stock_replacement{color:var(--chase)}

/* ---------- O24: the live odds check (green / yellow) and the odds explanation ---------- */
.odds-check{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:var(--s2) 0 var(--s3);padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--ink-1);font-size:var(--fs-s);line-height:1.45;color:var(--text-2)}
.odds-check b{color:var(--text)}
.odds-check .oc-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,199,154,.18);transform:translateY(1px)}
.odds-check[data-signal="yellow"]{border-color:var(--warn)}
.odds-check[data-signal="yellow"] .oc-dot{background:var(--warn);box-shadow:0 0 0 3px rgba(233,164,64,.22)}
.odds-check #odds-check-note{flex:1 1 220px;overflow-wrap:anywhere}
/* O18C: the odds check leads with its signal; the server's sentence is one line, whole in its tooltip */
.odds-check{align-items:center}
.odds-check #odds-check-note{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;color:var(--text-2)}
#history-table td:last-child{white-space:nowrap}
/* O18C: the ledger shows each pull by its card art */
#history-table td{vertical-align:middle}
#history-table .lc-when{white-space:nowrap}
.lc-card{display:flex;align-items:center;gap:12px;min-width:220px}
.lc-thumb{display:block;width:40px;height:56px;object-fit:cover;border-radius:4px;flex:none;background:var(--ink-2);box-shadow:0 0 0 1px var(--tier-c,var(--line-2))}
.lc-thumb.is-berries{background:radial-gradient(circle at 50% 42%,#ff6a4d 0 26%,#b3261e 27% 34%,transparent 35%),var(--ink-2)}
tr[data-tier="hit"] .lc-thumb,tr[data-tier="chase"] .lc-thumb{box-shadow:0 0 0 2px var(--tier-c)}
/* O74 R3: a receipt's pack is drawn beside its name (its shot, or its front in its own art style) */
.lp-pack{display:flex;align-items:center;gap:10px;min-width:160px}
.lp-art{display:block;flex:none;width:34px;line-height:0}
.lp-art .pack-object,.lp-art .pack-face,.lp-art .pack-shot{display:block;width:100%;height:auto}
.lp-name{display:grid;gap:2px;min-width:0}.lp-name b{font-weight:600}.lp-name small{color:var(--text-3);font-size:var(--fs-xs)}
.run-row{grid-template-columns:44px 30px minmax(0,1fr) auto}
.run-row .rr-art{width:30px}
.odds-explain{margin:var(--s3) 0 0;font-size:var(--fs-s);line-height:1.55;color:var(--text-2)}
.odds-explain summary{cursor:pointer;color:var(--text);font-weight:600}
.odds-explain p{margin:var(--s2) 0 0}
/* ============================== O26 - every screen size (Task C) ==============================
   Measured with var/o26/tools/layout_sweep.mjs at 1280x720, 1366x768, 1440x900, 1920x1080,
   2560x1440, 3440x1440, 390x844 and 1024x768 (before: var/o26/ui-before, after: var/o26/ui-after). */

/* Laptop heights (720-940 px): the pack page put the price, the run sizes and Open below the
   fold - a customer had to scroll to buy. The hero gets tighter and the pack art scales with
   the screen's height, and the buy bar the phone already has (the price, the run, Open -
   painted by Pack.paintBuyBar from the buy box itself) floats at the bottom whenever the buy
   box's own Open button is off screen. */
@media (min-width:761px) and (max-height:940px){
  .storefront main>.stage{padding-top:18px}
  .stage-title{font-size:min(var(--fs-3xl),11vh)}
  .proof-chips{margin-top:10px}
  .opening-layout{row-gap:16px}
  .pack-stage .pack-object{width:min(240px,25vh)}
  .pack-halo{width:min(300px,30vh);height:min(300px,30vh)}
}
@media (min-width:761px){
  body.mbb-on .mbb:not([hidden]){display:flex;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;width:min(640px,calc(100vw / var(--vz) - 32px));align-items:center;gap:12px;padding:10px 12px 10px 18px;background:rgba(9,9,13,.95);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:0 18px 48px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
  body.mbb-on{padding-bottom:96px}
  .mbb-price{flex:1;min-width:0;display:grid;gap:2px}
  .mbb-price b{font:700 18px/1.1 var(--display);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbb-price small{font:600 12px/1.2 var(--sans);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbb-qty{flex:none;max-width:120px;padding:10px 8px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--ink-1);color:var(--text);font:600 14px/1 var(--sans)}
  .mbb .open-button.slim{width:auto;flex:none;min-height:48px;padding:0 20px;display:flex;align-items:center}
  .mbb .open-button.slim .cta-main{font-size:17px}
}

/* Big screens: at 2560x1440 or 3440x1440 with 100% display scaling both the shop and the back
   office drew at laptop size - 12-15 px type, a form field 2,900 px wide. From 2400 x 1100 the
   page's own containers are drawn 25% larger (50% on a 4K-class screen), like the browser's
   zoom; the overlays (the reveal theatre, dialogs, tips, the card view) keep the real
   viewport, so the motion and every pointer-placed element stay exact. --vz carries the
   factor: a viewport-unit size inside the zoomed content divides by it, so a 100vh panel
   still ends at the bottom of the screen. */
@media (min-width:2400px) and (min-height:1100px){
  :root{--vz:1.25}
  body>.topbar,body>.co-alerts,body>.paused-banner,body>.preview-bar,body>main,body>footer,
  body>.co-frame,body>.co-tray,body>.co-toast{zoom:var(--vz)}
}
@media (min-width:3200px) and (min-height:1800px){
  :root{--vz:1.5}
}

/* O40-8: Fair play panel (ledger) */
.fair-panel{margin:1.5rem 0}
.fair-now{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:.75rem 0}
.fair-now dt{color:var(--muted,#8a8f98)}
.fair-now code{word-break:break-all;font-size:.85em}
.fair-revealed{margin:.5rem 0;padding:.5rem .75rem;border:1px solid var(--line,#2a2f38);border-radius:8px}
.fair-good{color:var(--good,#3ecf8e)}
.fair-bad{color:var(--bad,#ff6b6b);font-weight:600}

/* O40-11d: the same reward boxes on home and their own page (signed-in only) */
.rewards-strip{margin:32px 0;min-width:0}
.rewards-strip[hidden],.rw-daily[hidden]{display:none}
.rewards-strip .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rw-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rw-list:empty{display:none}
.rw-ticket,.rw-line-step{display:grid;align-content:start;gap:6px;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--ink-1)}
.rw-step{font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.rw-name{font:700 17px/1.25 var(--sans)}
.rw-why{font:500 13px/1.4 var(--sans);color:var(--text-2)}
.rw-open{margin-top:8px;justify-self:start;padding:8px 18px;border-radius:999px;border:0;font:700 14px/1 var(--sans);cursor:pointer;background:#e8b84a;color:#14110a}
.rw-open:disabled{opacity:.5;cursor:default}
.rw-note{margin:12px 0 0;color:var(--text-2);font:500 14px/1.5 var(--sans)}
.rw-shards{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.rw-shards>p:first-child{margin:0 0 8px;font-weight:700}
.rw-line-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.rw-line{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:16px 0 24px;padding:4px 2px 12px}
.rw-line-step{min-width:0;text-align:center;position:relative}
.rw-art{display:block;width:100px;max-width:100%;margin:0 auto 10px}
.rw-art svg{display:block;width:100%;height:auto}
.rw-line-step .rw-name{font-size:14px;min-height:2.5em}
.rw-state{justify-self:center;font:700 11px/1.4 var(--sans);border:1px solid var(--line-2);border-radius:999px;padding:5px 9px;color:var(--text-2)}
.rw-line-step[data-owned="true"]{border-color:#e8b84a;box-shadow:inset 0 0 0 1px #e8b84a}
.rw-line-step[data-owned="true"] .rw-state{background:#e8b84a;color:#14110a;border-color:#e8b84a}
.rw-line-step[data-available="false"] .rw-art{opacity:.45}
.rw-heading{margin:20px 0 12px}
.rw-ticket .rw-open{margin-top:12px}
.rw-daily:disabled{cursor:default;opacity:.75;filter:saturate(.35)}
.rw-daily .cta-sub{white-space:normal}
.rw-shard-meter{display:block;width:min(100%,520px);height:10px;margin:10px 0 16px;border:0;border-radius:999px;overflow:hidden;background:var(--line-2);accent-color:#e8b84a}
.rw-shard-meter::-webkit-progress-bar{background:var(--line-2);border-radius:999px}
.rw-shard-meter::-webkit-progress-value{background:#e8b84a;border-radius:999px}
.rw-shard-meter::-moz-progress-bar{background:#e8b84a;border-radius:999px}
.rw-gate{max-width:660px;padding:clamp(20px,4vw,40px);border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--ink-1)}
.rw-gate[hidden]{display:none}
.rw-gate p{color:var(--text-2);line-height:1.6}
@media(max-width:1000px){.rw-line{grid-template-columns:repeat(6,150px);overflow-x:auto;scroll-snap-type:x proximity}.rw-line-step{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){.rw-line{scroll-behavior:auto}}