/* Ohara storefront - O35 UI pass (the owner's demo-night list, 8 Oct 2026).
   Loaded last, after app.css / account.css / levels.css / motion.css / ui.css, and only by the shop's
   shell (the back office keeps its own bar). Sections:
     1. palette and type additions   2. icons   3. the top bar   4. search   5. the account menu
     6. phone layout of the bar      (later sections: the collapsibles, the home page, the account
     area, the reveal's crescendo - each says which owner item it answers) */

/* ============================== 1. PALETTE + TYPE ==============================
   One accent for the shop's own chrome - the straw-hat gold - so the tier colours (slate, sea blue,
   violet, gold) only ever mean a tier. Kickers were the Plus tier's sea blue; they are gold now.
   Contrast on --ink-0: --gold 10.9:1, --gold-2 8.1:1, --text-3 6.3:1. */
:root{
  --gold:#f2c14e;--gold-2:#d9a63c;--gold-ink:#1b1305;--gold-g:rgba(242,193,78,.18);
  --glass:rgba(13,18,33,.97);--glass-line:rgba(255,255,255,.1);
  --shadow-pop:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.35);
}
.storefront .hero-copy .kicker,.storefront .stage-head .kicker,.storefront .how-strip .kicker,.storefront .page-head .kicker{color:var(--gold)}
.storefront .kicker{color:#b9ab8a}
.storefront .hero-title{background:linear-gradient(180deg,#fffaf0 30%,#ead9b4);-webkit-background-clip:text;background-clip:text}

/* ============================== 2. ICONS ============================== */
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* ============================== 3. THE TOP BAR ==============================
   brand | Packs, Vault, (Foundry) | the one search box | berries, the account menu */
.storefront .topbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"brand nav search right";align-items:center;gap:18px;height:68px;
  padding:0 clamp(16px,3vw,40px);background:linear-gradient(180deg,rgba(8,11,20,.97),rgba(10,14,26,.93));backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(242,193,78,.12);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.storefront .topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.6;
  background:linear-gradient(90deg,transparent 4%,rgba(222,74,51,.55) 28%,rgba(242,193,78,.85) 50%,rgba(222,74,51,.55) 72%,transparent 96%)}
.storefront .topbar .brand{grid-area:brand}
.storefront .appnav{grid-area:nav;display:flex;align-items:center;gap:4px}
.storefront .appnav a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;font:600 14px/1 var(--sans);letter-spacing:.01em;color:var(--text-2);
  text-decoration:none;transition:color var(--t-2),background var(--t-2),box-shadow var(--t-2)}
.storefront .appnav a .ico{width:19px;height:19px;color:var(--text-3);transition:color var(--t-2)}
.storefront .appnav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.storefront .appnav a:hover .ico{color:var(--text-2)}
.storefront .appnav a[aria-current="page"]{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* O18F (the owner's "bart", item 9): the tab you are on is marked by a straight gold bar under its label. It was an
   inset shadow, which bent up round the tab's rounded corners into a gold smile that read as a stray mark. */
.storefront .appnav a{position:relative}
.storefront .appnav a[aria-current="page"]::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--gold);pointer-events:none}
.storefront .appnav a[aria-current="page"] .ico{color:var(--gold)}
/* the operator's Foundry: prominent - a gold-rimmed forge tab */
.storefront .appnav a.nav-foundry{margin-left:6px;color:#ffe9b0;background:linear-gradient(180deg,rgba(242,193,78,.2),rgba(242,193,78,.05));box-shadow:inset 0 0 0 1px rgba(242,193,78,.5),0 0 18px rgba(242,193,78,.12)}
.storefront .appnav a.nav-foundry .ico{color:var(--gold)}
.storefront .appnav a.nav-foundry:hover{background:linear-gradient(180deg,rgba(242,193,78,.3),rgba(242,193,78,.08))}
.storefront .appnav a.nav-foundry[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--gold),0 0 22px rgba(242,193,78,.2)}
.storefront .appnav a.nav-foundry[hidden]{display:none}
.storefront .top-right{grid-area:right;display:flex;align-items:center;gap:10px;justify-self:end;min-width:0}
/* the berries: the shop's money, in its own gold-rimmed chip with the top-up inside */
.storefront .wallet-chip{height:40px;gap:2px;padding:0 4px 0 12px;border-radius:999px;border:1px solid rgba(242,193,78,.32);background:linear-gradient(180deg,rgba(242,193,78,.12),rgba(242,193,78,.03))}
.storefront .wallet-chip .berry-mark{width:18px;height:18px}
.storefront .wallet-chip #wallet-balance{font:700 14px/1 var(--sans);letter-spacing:.01em}
.storefront .wallet-add{width:28px;height:28px;background:linear-gradient(180deg,#ffd877,var(--gold-2));box-shadow:0 2px 8px rgba(242,193,78,.35)}
.top-search-btn{display:none;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(255,255,255,.04);color:var(--text-2);cursor:pointer}
.top-search-btn:hover{color:var(--text);border-color:var(--text-3)}

/* ============================== 4. SEARCH (owner item 5) ============================== */
.top-search{grid-area:search;position:relative;justify-self:center;width:min(100%,540px)}
.ts-field{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 14px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  cursor:text;color:var(--text-3);transition:background var(--t-2),border-color var(--t-2),box-shadow var(--t-2)}
.ts-field:hover{border-color:rgba(255,255,255,.18)}
.ts-field:focus-within{background:rgba(255,255,255,.07);border-color:rgba(242,193,78,.6);box-shadow:0 0 0 3px rgba(242,193,78,.14)}
.ts-field .ico{width:18px;height:18px}
.ts-field input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font:500 14px/1 var(--sans)}
.ts-field input:focus{box-shadow:none;outline:none}
.ts-field input::placeholder{color:var(--text-3)}
.ts-field input::-webkit-search-cancel-button{display:none}
.ts-close{display:none;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:var(--text-2);cursor:pointer}
.top-search.is-busy .ts-field>.ico{animation:ts-busy .9s ease-in-out infinite}
@keyframes ts-busy{50%{color:var(--gold);transform:scale(1.12)}}
.search-panel{position:absolute;left:50%;top:calc(100% + 10px);z-index:45;transform:translateX(-50%);width:min(760px,calc(100vw / var(--vz) - 24px));
  max-height:min(74vh,calc(100vh / var(--vz) - 100px));overflow:auto;overscroll-behavior:contain;padding:10px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-pop);backdrop-filter:blur(18px)}
.search-panel:not([hidden]){animation:sp-in .2s var(--ease-out)}
@keyframes sp-in{from{opacity:0;transform:translate(-50%,-6px)}}
.sr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 10px 10px;color:var(--text-2);font-size:13px}
.sr-head p{margin:0}
.sr-head b{color:var(--text);font:700 16px/1 var(--display);letter-spacing:.02em;margin-right:4px}
.sr-head.is-packs{margin-top:8px;border-top:1px solid var(--line)}
.sr-kind{font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(242,193,78,.4);border-radius:999px;padding:4px 8px}
.sr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sr-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid transparent;
  transition:background var(--t-2),border-color var(--t-2)}
.sr-card:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.sr-art{display:block;align-self:start}
.sr-art .tcg-card{width:64px;border-radius:5px}
.sr-body{min-width:0;display:grid;gap:4px}
.sr-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.sr-title b{font:700 16px/1.2 var(--display);letter-spacing:.01em;color:var(--text);overflow-wrap:anywhere}
.sr-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font:500 12px/1.4 var(--sans);color:var(--text-3)}
.sr-meta .berry-value{font-size:13px}
.sr-in{margin:4px 0 0;font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.sr-packs{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}
.sr-pack{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto auto auto 14px;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text-2);
  background:rgba(8,11,20,.55);border:1px solid var(--line);font:500 13px/1.2 var(--sans);transition:border-color var(--t-2),background var(--t-2),transform var(--t-2)}
.sr-pack:hover,.sr-pack:focus-visible{border-color:var(--tier-c);background:rgba(255,255,255,.05);color:var(--text);transform:translateX(2px)}
.sr-pack:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sp-name{font:700 14px/1.2 var(--display);letter-spacing:.03em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-price{color:var(--text-2);white-space:nowrap}
.sp-odds{font:700 13px/1 var(--display);color:var(--tier-c);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-left{color:var(--text-3);white-space:nowrap;font-size:12px}
.sp-left.is-out{color:var(--chase)}
.sp-state{font:700 9px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(233,164,64,.5);border-radius:999px;padding:3px 6px}
.sp-go{width:8px;height:8px;border-top:2px solid var(--text-3);border-right:2px solid var(--text-3);transform:rotate(45deg);justify-self:center}
.sr-pack:hover .sp-go{border-color:var(--gold)}
.sr-more{display:block;margin:10px auto 4px}
.sr-foot{margin:10px;color:var(--text-3);font-size:12px;text-align:center}
.sr-packhits{list-style:none;margin:0;padding:0 4px 4px;display:flex;flex-wrap:wrap;gap:6px}
.sr-packhit{display:grid;gap:3px;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);text-decoration:none;color:var(--text-2);font-size:12px}
.sr-packhit b{font:700 14px/1 var(--display);color:var(--text);letter-spacing:.03em}
.sr-packhit:hover,.sr-packhit:focus-visible{border-color:var(--gold);color:var(--text)}
.sr-empty{padding:18px 16px;color:var(--text-2);font-size:14px}
.sr-empty p{margin:0 0 8px}
.sr-empty b{color:var(--text);font:700 17px/1.3 var(--display);letter-spacing:.01em}
.sr-try{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px!important}
.sr-try .chip-btn{padding:7px 12px}

/* ============================== 5. THE ACCOUNT MENU (owner item 2: the ledger and help live here) ============================== */
.user-menu{position:relative}
.user-menu>summary{list-style:none;position:relative;display:flex;align-items:center;gap:2px;height:44px;padding:0 6px 0 0;border-radius:999px;cursor:pointer;color:var(--text-2)}
.user-menu>summary::-webkit-details-marker{display:none}
.user-menu>summary:hover{color:var(--text)}
.user-menu>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.um-avatar{display:grid;place-items:center;width:36px;height:36px;margin:4px;border-radius:50%;background:linear-gradient(140deg,#2b3657,#141b31);color:var(--text-2);
  font:700 16px/1 var(--display);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.um-avatar .ico{width:19px;height:19px}
.um-avatar.has-initial,.up-avatar.has-initial{background:linear-gradient(140deg,var(--signal) 10%,var(--signal-2));color:#fff8ec;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.um-ring{position:absolute;left:0;top:0;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none}
.um-ring circle{fill:none;stroke-width:2.6}
.um-ring-track{stroke:rgba(255,255,255,.1)}
.um-ring-fill{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .8s var(--ease-out);filter:drop-shadow(0 0 3px rgba(242,193,78,.6))}
.um-lv{position:absolute;left:27px;bottom:-1px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--gold);color:var(--gold-ink);font:800 11px/19px var(--display);text-align:center;box-shadow:0 0 0 2px #0a0e18}
.um-chev{width:16px;height:16px;color:var(--text-3);transition:transform var(--t-2)}
.user-menu[open] .um-chev{transform:rotate(180deg)}
.user-menu.is-current>summary .um-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 2px rgba(242,193,78,.45)}
.user-menu:not([open]) .user-panel{display:none}
.user-panel{position:absolute;right:-6px;top:calc(100% + 10px);z-index:45;width:330px;max-width:calc(100vw / var(--vz) - 20px);padding:8px;border-radius:18px;background:var(--glass);
  border:1px solid var(--glass-line);box-shadow:var(--shadow-pop);backdrop-filter:blur(18px);animation:up-in .18s var(--ease-out)}
@keyframes up-in{from{opacity:0;transform:translateY(-6px)}}
.up-head{display:flex;align-items:center;gap:12px;padding:12px 12px 10px}
.up-avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(140deg,#2b3657,#141b31);color:var(--text-2);font:700 20px/1 var(--display)}
.up-avatar .ico{width:22px;height:22px}
.up-who{min-width:0;display:grid;gap:3px}
.up-who b{font:700 17px/1.15 var(--display);letter-spacing:.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-who small{font:500 12px/1.3 var(--sans);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storefront .user-panel .level-chip{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:0 8px 6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(242,193,78,.25);
  background:linear-gradient(90deg,rgba(242,193,78,.1),rgba(242,193,78,.02));font:700 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.storefront .user-panel .level-chip[hidden]{display:none}
.storefront .user-panel .level-chip progress{display:block;width:100%;height:6px;accent-color:var(--gold)}
.up-links{display:grid;gap:2px;padding:4px 0}
.up-links a{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 10px;border-radius:12px;text-decoration:none;color:var(--text)}
.up-links a[hidden]{display:none}
.up-links a .ico{grid-row:1/3;width:38px;height:38px;padding:9px;border-radius:11px;background:rgba(255,255,255,.05);color:var(--text-2);transition:background var(--t-2),color var(--t-2)}
.up-links .up-l{font:600 14px/1.2 var(--sans)}
.up-links small{font:500 12px/1.3 var(--sans);color:var(--text-3)}
.up-links a:hover,.up-links a:focus-visible{background:rgba(255,255,255,.05)}
.up-links a:hover .ico{background:rgba(242,193,78,.14);color:var(--gold)}
.up-links a[aria-current="page"]{background:rgba(242,193,78,.08)}
.up-links a[aria-current="page"] .ico{background:rgba(242,193,78,.18);color:var(--gold)}
.up-settings{display:grid;gap:10px;margin:6px 6px 4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.up-k{margin:0;font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#b9ab8a}
.up-settings .ts-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.up-settings .volume{display:flex}
.up-settings .volume input{width:130px;accent-color:var(--gold)}
.up-settings .toggle{min-width:118px;padding:8px 12px;font-size:12px}
.up-signout{display:flex;align-items:center;gap:10px;width:calc(100% - 12px);margin:4px 6px 2px;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--text-2);font:600 13px/1 var(--sans);cursor:pointer}
.up-signout .ico{width:18px;height:18px}
.up-signout:hover{background:rgba(232,112,107,.1);color:#ffb3ae}
/* the run-18 rules this bar replaces */
.storefront .top-settings,.storefront .customer-tag{border:0;padding:0}

/* ============================== 6. THE BAR ON SMALLER SCREENS ============================== */
@media (max-width:1180px){
  .storefront .topbar{gap:12px}
  .storefront .appnav a{padding:0 11px}
}
@media (max-width:1020px){
  .storefront .topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand search right" "nav nav nav";height:auto;padding-top:10px;padding-bottom:8px;row-gap:8px}
  .storefront .appnav{overflow-x:auto;scrollbar-width:none}
  .storefront .appnav::-webkit-scrollbar{display:none}
}
@media (max-width:760px){
  .storefront .topbar{grid-template-columns:auto 1fr auto;grid-template-areas:"brand . right" "nav nav nav";padding-left:12px;padding-right:12px}
  /* W18 (O103): on a phone the logo gives way to the controls - a long balance (99,550 berries) pushed the search
     button over it; the logo's column now shrinks and the logo scales down inside it */
  .storefront .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand right" "nav nav"}
  .storefront .topbar .brand{min-width:0;overflow:hidden}
  .storefront .brand-logo{max-width:100%;object-fit:contain;object-position:left center}
  .storefront .brand-logo{height:30px}
  .top-search{display:none}
  .top-search-btn{display:grid}
  .storefront .wallet-chip{height:38px;padding-left:9px}
  .storefront .appnav a{height:36px;padding:0 12px;font-size:13px}
  .um-chev{display:none}
  body.search-open{overflow:hidden}
  body.search-open .top-search{display:block;position:fixed;left:0;right:0;top:0;z-index:75;width:auto;padding:10px 12px;background:var(--ink-0);border-bottom:1px solid var(--line)}
  body.search-open .ts-close{display:grid}
  body.search-open .search-panel{position:fixed;left:0;right:0;top:62px;bottom:0;transform:none;width:auto;max-height:none;border-radius:0;border:0;box-shadow:none;animation:none}
  .user-panel{position:fixed;right:8px;left:8px;top:64px;width:auto;max-height:calc(100vh - 80px);overflow:auto}
  .sr-pack{grid-template-columns:minmax(0,1fr) auto auto 12px;row-gap:4px}
  .sr-pack .sp-price{grid-column:1;grid-row:2;font-size:12px}
  .sr-pack .sp-left{grid-column:2/4;grid-row:2;justify-self:end}
  .sr-pack .sp-state{grid-column:3;grid-row:1}
  .sr-pack .sp-go{grid-column:4;grid-row:1/3}
}

/* the card the search box sent you to, on its pack's pool wall */
.pool-card.is-found{position:relative;z-index:2;border-radius:10px;box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(242,193,78,.4);animation:found-pulse 1.6s var(--ease-out) 3}
@keyframes found-pulse{0%{box-shadow:0 0 0 2px var(--gold),0 0 0 rgba(242,193,78,.6)}40%{box-shadow:0 0 0 4px var(--gold),0 0 60px rgba(242,193,78,.55)}100%{box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(242,193,78,.4)}}
.found-tag{position:absolute;left:50%;top:-11px;z-index:3;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font:800 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45)}
/* the menu's account row is an old .customer-tag (run 18): it is a menu row now */
.storefront .up-links a#customer-tag{display:grid;border:0;border-radius:12px;padding:8px 10px;font:inherit;color:var(--text);white-space:normal}
/* a fixed sheet inside the bar would be held to the bar's box by its backdrop filter: none on a phone */
@media (max-width:760px){ .storefront .topbar{backdrop-filter:none;background:rgba(9,12,22,.98)} }
/* O74: four places in the bar now (Packs, Vault, Binder, Foundry) - on a phone all four fit without a sideways scroll */
@media (max-width:480px){
  .storefront .appnav{gap:2px}
  .storefront .appnav a{gap:5px;padding:0 8px;font-size:12.5px}
  .storefront .appnav a .ico{width:16px;height:16px}
  .storefront .appnav a.nav-foundry{margin-left:2px}
  .storefront .appnav a[aria-current="page"]::after{left:8px;right:8px}
}

/* ============================== 7. FEWER WORDS, BETTER TYPE (owner item 4) ==============================
   The stock-replacement note: one line - its name and a live status - with its frozen words one tap down
   ("Details"). Nothing in it is reworded: the paragraphs are the sales-1.5.0 text, unchanged. */
.storefront .replacement-note{margin:var(--s2) 0 0;padding:0;border:1px solid var(--line-2);border-radius:12px;background:rgba(8,11,20,.55);overflow:hidden;color:var(--text-2)}
.storefront .replacement-note[open]{border-color:rgba(242,193,78,.35)}
.rn-summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none}
.rn-summary::-webkit-details-marker{display:none}
.rn-summary:hover .rn-more{color:#ffe08f}
.rn-summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
.rn-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(242,193,78,.12);color:var(--gold)}
.rn-icon .ico{width:17px;height:17px}
.rn-head{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.storefront .replacement-note .rn-title{margin:0;font:700 14px/1.2 var(--display);letter-spacing:.05em;color:var(--text)}
.rn-status{display:inline-flex;align-items:center;gap:7px;font:600 12px/1.2 var(--sans);color:var(--text-2)}
.rn-status::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,199,154,.16)}
.rn-status[data-state="out"]{color:#f3d28a}
.rn-status[data-state="out"]::before{background:var(--chase);box-shadow:0 0 0 3px rgba(226,180,67,.2)}
.rn-status[data-state="warn"]{color:var(--warn)}
.rn-status[data-state="warn"]::before{background:var(--warn);box-shadow:0 0 0 3px rgba(233,164,64,.22)}
.rn-more{flex:none;display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);transition:color var(--t-2)}
.rn-more::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t-2)}
.replacement-note[open] .rn-more::after{transform:translateY(1px) rotate(-135deg)}
.rn-body{display:grid;gap:8px;padding:2px 14px 14px 52px;font:400 13px/1.6 var(--sans);color:var(--text-2)}
.replacement-note[open] .rn-body{animation:rn-in .26s var(--ease-out)}
@keyframes rn-in{from{opacity:0;transform:translateY(-4px)}}
.storefront .replacement-note .rn-body p{margin:0}
.rn-body .rn-draw{font-size:12px;color:var(--text-3)}
.storefront .replacement-note .rn-now{font-weight:600;color:#f3d28a}
/* a run's result in the buy box: a tally and two ways on, not a sentence */
.result.is-run{gap:6px}
.result.is-run>strong{font:700 17px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.res-tally{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.res-links{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 0}
.res-links a{font:600 13px/1.2 var(--sans);color:var(--text);text-decoration:underline;text-decoration-color:rgba(242,193,78,.6);text-underline-offset:3px}
.res-links a:hover{text-decoration-color:var(--gold)}
/* section intros as chips, not sentences */
.head-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;list-style:none;margin:0;padding:0;max-width:520px}
.head-chips li{padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font:600 12px/1 var(--sans);color:var(--text-2);white-space:nowrap}
.head-chips li:first-child{border-color:rgba(242,193,78,.4);color:#f1dca8}
@media (max-width:760px){ .head-chips{justify-content:flex-start} }
.bp-empty{font:500 14px/1.5 var(--sans);color:var(--text-3)}
/* the catalogue: the one search lives in the bar; this opens it */
.cat-find{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px}
.cat-find .ico{width:17px;height:17px;color:var(--gold)}
/* how it works: three headline cards, the full words a tap away */
.storefront .how-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(20px,3vw,32px);border-top:1px solid var(--line)}
.how-card{align-self:start;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color var(--t-2)}
.how-card[open]{border-color:rgba(242,193,78,.35)}
.how-card>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.how-card>summary::-webkit-details-marker{display:none}
.how-card>summary::after{content:'';flex:none;margin-left:auto;width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:translateY(-2px) rotate(45deg);transition:transform var(--t-2)}
.how-card[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.how-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(242,193,78,.12);color:var(--gold);font:700 18px/1 var(--display)}
.how-h{display:grid;gap:4px;min-width:0}
.how-h b{font:700 17px/1.15 var(--display);letter-spacing:.03em;color:var(--text)}
.how-h small{font:500 13px/1.35 var(--sans);color:var(--text-3)}
.how-card>p{margin:0;padding:0 18px 18px 70px;font:400 13.5px/1.6 var(--sans);color:var(--text-2)}
.how-card[open]>p{animation:rn-in .26s var(--ease-out)}
@media (max-width:900px){ .storefront .how-strip{grid-template-columns:1fr} }
/* the demo note: one line, its words a tap away */
.storefront details.demo-note{max-width:var(--page);margin:0 auto;padding:6px clamp(16px,4vw,40px) 28px;border:0;color:var(--text-3)}
.demo-note>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#b9ab8a}
.demo-note>summary::-webkit-details-marker{display:none}
.demo-note>summary::before{content:'i';display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;font:700 10px/1 var(--display);letter-spacing:0;text-transform:none}
.demo-note>p{max-width:860px;margin:12px 0 0;font:400 13px/1.6 var(--sans);color:var(--text-2)}
/* the vault's one-line hint and the label that carries the tier note */
.vault-hint{margin:10px 0 14px;font:500 14px/1.5 var(--sans);color:var(--text-2)}
.vault-hint b{color:var(--text)}
.bulk-label{display:inline-flex;align-items:center;gap:6px;cursor:help}
.i-dot{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;font:700 9px/1 var(--display);letter-spacing:0;opacity:.8}

/* ============================== 8. THE REVEAL: PACING AND THE CRESCENDO (owner item 1) ==============================
   theatre.js drives it (O35 notes there): every card holds face up with its value counting up under it
   (.t-plate); before a hit or a chase turns, the BREATH - the room goes black and still, the card's
   edge charges; as it turns it GROWS (--hero, .is-crescendo); on the face, light, rays, rings, sparks,
   and the tier's RIBBON sweeps in behind it (.t-crest); the SHOWCASE (.is-showcase) floats it while
   embers rise. Reduced motion (.is-calm) keeps none of it but the plate. */
.theatre{--hero:1}
/* the breath */
.theatre[data-stage="breath"] .t-backdrop{opacity:1;transition:opacity .25s ease-out}
.theatre[data-stage="breath"] .t-vignette{opacity:1;background:radial-gradient(ellipse at center,transparent 12%,rgba(0,0,0,.94) 58%);animation:none;transition:opacity .25s ease-out}
.theatre[data-stage="breath"] .t-spot,.theatre[data-stage="breath"] .t-rays{opacity:0;transition:opacity .2s}
.theatre[data-stage="breath"] .t-ladder{opacity:.15}
.theatre[data-stage="breath"] .t-card::before,.theatre[data-stage="breath"] .r-card:last-of-type::before{opacity:1;animation:charge var(--d-breath,600ms) cubic-bezier(.5,0,.9,.4) forwards}
@keyframes charge{0%{box-shadow:0 0 0 3px var(--glow-c),0 0 50px var(--glow-g),0 0 120px var(--glow-g)}100%{box-shadow:0 0 0 4px #fffbe8,0 0 26px 6px var(--glow-c),0 0 200px 30px var(--glow-g)}}
.theatre[data-stage="breath"] .t-card-tilt,.theatre[data-stage="breath"] .r-card:last-of-type .r-inner{animation:shiver 90ms linear infinite}
@keyframes shiver{0%{translate:0 0}25%{translate:1px -1px}50%{translate:-1px 1px}75%{translate:1px 1px}100%{translate:0 0}}
.theatre[data-stage="breath"] .t-meter{opacity:.35}
/* the card grows as it turns; the meter above it and the plate below it make room */
.theatre{--grow:calc((var(--hero) - 1) * var(--card-w) * .7)}
.theatre.is-crescendo .t-card,.theatre .r-card.is-hero{scale:var(--hero);transition:scale .9s cubic-bezier(.2,.9,.25,1.06)}
.t-meter{transition:opacity .25s var(--ease-out),bottom .9s cubic-bezier(.2,.9,.25,1.06)}
.theatre.is-crescendo .t-meter{bottom:calc(100% + 14px + var(--grow))}
@media (max-width:820px),(max-height:760px){ .theatre.is-crescendo .t-card,.theatre .r-card.is-hero{scale:min(var(--hero),1.1)} .theatre{--grow:calc((min(var(--hero),1.1) - 1) * var(--card-w) * .7)} }
/* the value plate */
.t-plate{position:absolute;z-index:8;left:50%;top:calc(100% + 18px + var(--grow));margin:0;display:grid;justify-items:center;gap:4px;width:max-content;max-width:min(560px,92vw);
  transform:translate(-50%,6px);opacity:0;pointer-events:none;text-align:center;transition:opacity .25s var(--ease-out),transform .35s var(--ease-out),top .9s cubic-bezier(.2,.9,.25,1.06)}
.t-plate.is-on{opacity:1;transform:translate(-50%,0)}
.t-plate small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.t-plate b{font:700 clamp(24px,3.6vh,34px)/1 var(--display);letter-spacing:.01em;color:#eef2fa;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.t-plate[data-tier="plus"] b{color:#9fe0f7}
.t-plate[data-tier="hit"] b{color:#d6c6ff;text-shadow:0 0 22px rgba(171,144,244,.55),0 2px 10px rgba(0,0,0,.8)}
.t-plate[data-tier="chase"] b{font-size:clamp(30px,4.8vh,48px);background:linear-gradient(180deg,#fff7d6 10%,#ffd36a 55%,#e08a2c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 18px rgba(255,197,58,.55))}
.t-plate[data-tier="hit"] small,.t-plate[data-tier="chase"] small{color:var(--tier-c,#fff)}
.theatre.is-settled .t-plate,.theatre.is-board .t-plate{display:none}
.theatre.is-run .t-status{display:none}
/* the ribbon: the tier's name, again and again, on a band that sweeps in behind the card */
.t-crest{position:absolute;z-index:2;left:50%;top:60%;width:240vmax;height:clamp(46px,7vh,74px);margin:0;overflow:hidden;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) rotate(-7deg) scaleX(0);display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%,transparent 70%,rgba(0,0,0,.35)),linear-gradient(90deg,#5b3a09,#c98a1f 18%,#ffd36a 34%,#fff3c4 50%,#ffd36a 66%,#c98a1f 82%,#5b3a09);
  box-shadow:0 0 0 1px rgba(255,236,170,.6),0 0 40px rgba(255,197,58,.45),0 18px 40px rgba(0,0,0,.55)}
.t-crest[data-tier="hit"]{background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 30%,transparent 70%,rgba(0,0,0,.35)),linear-gradient(90deg,#2a1858,#6f4ed6 20%,#b9a0ff 40%,#efe6ff 50%,#b9a0ff 60%,#6f4ed6 80%,#2a1858);
  box-shadow:0 0 0 1px rgba(214,198,255,.6),0 0 40px rgba(171,144,244,.45),0 18px 40px rgba(0,0,0,.55)}
.t-crest.is-on{animation:crest-in .55s cubic-bezier(.2,.9,.2,1) .12s forwards}
@keyframes crest-in{0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scaleX(0)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scaleX(1)}}
.t-crest-track{display:flex;gap:0;white-space:nowrap;animation:crest-slide 14s linear infinite}
.t-crest-track span{padding:0 .5em;font:800 clamp(22px,3.4vh,34px)/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:#1b1305;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.t-crest[data-tier="hit"] .t-crest-track span{color:#150b33}
.t-crest-track span::after{content:'\2726';margin-left:.9em;letter-spacing:0;opacity:.75}
@keyframes crest-slide{to{transform:translateX(-50%)}}
.t-crest::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-100%);animation:crest-shine 2.6s ease-in-out .7s infinite}
@keyframes crest-shine{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
/* the showcase: the card floats, the rays burn brighter */
.theatre.is-showcase .t-card-tilt{animation:hero-float 3.4s ease-in-out infinite}
.theatre.is-showcase .r-card.is-hero{animation:hero-float 3.4s ease-in-out infinite}
@keyframes hero-float{0%,100%{translate:0 0;rotate:-.8deg}50%{translate:0 -10px;rotate:.8deg}}
.theatre.is-showcase[data-tier="chase"] .t-rays{opacity:1}
.theatre.is-showcase .t-floor::before{opacity:1;filter:brightness(1.3)}
/* embers */
.t-particles i.is-ember{width:var(--sz);height:var(--sz);border-radius:50%;background:var(--pc);box-shadow:0 0 8px 2px var(--pc);opacity:0;animation:ember var(--dur) cubic-bezier(.25,.6,.4,1) var(--delay) forwards}
@keyframes ember{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.5)}12%{opacity:1}70%{opacity:.85}100%{opacity:0;transform:translate(calc(-50% + var(--sx) + var(--dx)),calc(-50% + var(--sy) - var(--rise))) scale(.15)}}
/* reduced motion: none of it but the plate */
.theatre.is-calm .t-crest,.theatre.is-calm .t-particles i.is-ember{display:none}
.theatre.is-calm .t-plate{transition:opacity .2s linear}
@media (prefers-reduced-motion:reduce){ .t-crest-track,.t-crest::after{animation:none} }

/* ============================== 9. THE ACCOUNT AREA (owner item 6: "a wall of text") ==============================
   A profile hero (your initial in a ring that fills toward your next level; berries, cards and packs as
   live tiles), the sections as icon tabs, an overview of real card art, berry bundles you tap, and - signed
   out - a pitch with a fan of the shelf's chase cards beside the two forms as tabs. account-home.js draws it. */
.storefront .account-page,.storefront .account-page:has(#portal:not([hidden])){max-width:var(--page);margin:0 auto;padding:clamp(20px,3vw,36px) clamp(16px,4vw,40px) 56px}
.acct-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;
  padding:clamp(20px,3vw,34px);margin:0 0 20px;border-radius:26px;border:1px solid rgba(242,193,78,.2);box-shadow:0 30px 70px rgba(0,0,0,.45);
  background:radial-gradient(620px 320px at 8% -10%,rgba(222,74,51,.3),transparent 70%),radial-gradient(640px 420px at 105% 110%,rgba(242,193,78,.16),transparent 70%),linear-gradient(160deg,#151c35,#0b1020);
  animation:rise-in .6s var(--ease-out) both}
.acct-hero[hidden]{display:none}
.acct-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(242,193,78,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(242,193,78,.05) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 75%)}
.ah-id{display:flex;align-items:center;gap:clamp(14px,2vw,24px);min-width:0}
.ah-avatar{position:relative;flex:none;display:grid;place-items:center;width:112px;height:112px}
.ah-avatar>b{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:linear-gradient(140deg,var(--signal) 10%,var(--signal-2));color:#fff8ec;font:700 40px/1 var(--display);
  text-shadow:0 2px 4px rgba(0,0,0,.3);box-shadow:0 14px 30px rgba(222,74,51,.4),inset 0 2px 0 rgba(255,255,255,.3)}
.ah-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ah-ring circle{fill:none;stroke-width:5}
.ah-ring-track{stroke:rgba(255,255,255,.1)}
.ah-ring-fill{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.3s var(--ease-out) .25s;filter:drop-shadow(0 0 6px rgba(242,193,78,.7))}
.ah-lvbadge{position:absolute;right:2px;bottom:6px;min-width:32px;height:32px;padding:0 8px;border-radius:16px;background:var(--gold);color:var(--gold-ink);font:800 16px/32px var(--display);text-align:center;box-shadow:0 0 0 3px #10162b}
.ah-who{min-width:0;display:grid;gap:4px}
.ah-who .kicker{margin:0;color:var(--gold)}
.ah-name{margin:0;font:700 clamp(30px,4vw,50px)/1 var(--display);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-email{margin:0;font:500 13px/1.3 var(--sans);color:var(--text-3);overflow-wrap:anywhere}
.ah-level{display:grid;gap:7px;max-width:460px;margin-top:12px}
.ah-level[hidden]{display:none}
.ah-level-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font:600 12px/1 var(--sans);color:var(--text-3)}
.ah-level-t b{font:700 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ah-bar{display:block;height:9px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.ah-bar i{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--gold-2),var(--gold) 60%,#fff1c2);box-shadow:0 0 14px rgba(242,193,78,.6);transition:width 1.3s var(--ease-out) .25s}
.ah-level-next{margin:0;font:500 12px/1.4 var(--sans);color:var(--text-3)}
.ah-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ah-stat{animation:rise-in .55s var(--ease-out) backwards}
.ah-stat:nth-child(2){animation-delay:.08s}.ah-stat:nth-child(3){animation-delay:.16s}
.ah-stat a{display:grid;gap:12px;height:100%;padding:16px;border-radius:18px;text-decoration:none;color:var(--text);background:rgba(8,11,20,.55);border:1px solid var(--line-2);
  transition:transform var(--t-2) var(--ease-out),border-color var(--t-2),background var(--t-2)}
.ah-stat a:hover,.ah-stat a:focus-visible{transform:translateY(-3px);border-color:rgba(242,193,78,.5);background:rgba(242,193,78,.06)}
.ah-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.06);color:var(--gold)}
.ah-ico .berry-mark{width:24px;height:24px}
.ah-num{display:grid;gap:3px}
.ah-num b{font:700 clamp(26px,2.6vw,36px)/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ah-stat.is-berries .ah-num b{color:var(--gold)}
.ah-num small{font:500 12px/1.35 var(--sans);color:var(--text-3)}
.ah-go{font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.ah-go::after{content:'  \2192'}
.ah-stat a:hover .ah-go{color:var(--gold)}
/* the status line: the signed-out title, or a question about the documents */
.acct-intro{margin:0 0 18px}
.acct-intro[hidden]{display:none}
.acct-title{margin:0;font:700 clamp(36px,5vw,60px)/1 var(--display);text-transform:uppercase}
.acct-status{margin:10px 0 0;font:500 14px/1.5 var(--sans);color:var(--text-2)}
.account-page.is-member .acct-title{display:none}
.account-page.is-member .acct-status{margin:0;padding:12px 16px;border-radius:12px;border:1px solid rgba(233,164,64,.5);background:rgba(233,164,64,.08);color:#ffd9a0}
/* signed out: the pitch and the two forms */
.acct-gate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(20px,4vw,52px);align-items:stretch}
.acct-gate[hidden]{display:none}
.ag-pitch{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:16px;padding:clamp(22px,3vw,36px);border-radius:26px;border:1px solid rgba(242,193,78,.2);
  background:radial-gradient(520px 300px at 0% 0%,rgba(222,74,51,.28),transparent 70%),radial-gradient(520px 380px at 100% 100%,rgba(242,193,78,.14),transparent 70%),linear-gradient(160deg,#151c35,#0b1020)}
.ag-pitch .kicker{margin:0;color:var(--gold)}
.ag-title{margin:0;max-width:13ch;font:700 clamp(32px,3.8vw,50px)/1 var(--display);text-transform:uppercase}
.ag-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ag-points li{display:flex;align-items:center;gap:12px;font:500 15px/1.35 var(--sans);color:var(--text-2)}
.ag-points .ico{width:36px;height:36px;padding:8px;border-radius:11px;background:rgba(242,193,78,.12);color:var(--gold)}
.ag-points b{color:var(--text)}
.ag-fan{position:relative;height:250px}
.ag-fan .tcg-card{position:absolute;bottom:6px;left:50%;width:150px;transition:transform .5s var(--ease-out)}
.ag-fan .fan-0{z-index:3;margin-left:-75px;transform:rotate(-3deg)}
.ag-fan .fan-1{z-index:2;margin-left:-178px;transform:rotate(-15deg) translateY(18px) scale(.88);filter:brightness(.75)}
.ag-fan .fan-2{z-index:1;margin-left:28px;transform:rotate(12deg) translateY(18px) scale(.88);filter:brightness(.75)}
.ag-elig{margin:0;font:500 12px/1.55 var(--sans);color:var(--text-3)}
.ag-forms{align-self:start;padding:clamp(18px,2.4vw,28px);border-radius:26px;background:var(--ink-1);border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.ag-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;border-radius:14px;background:rgba(255,255,255,.045)}
.ag-tab{padding:12px;border:0;border-radius:11px;background:none;color:var(--text-2);font:700 14px/1 var(--sans);cursor:pointer}
.ag-tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.storefront .account-form{display:grid;gap:14px;margin:0;padding:0;border:0}
.storefront .account-form[hidden]{display:none}
.storefront .account-form label{font:600 13px/1.35 var(--sans);color:var(--text-2);letter-spacing:0}
.storefront .account-form input:not([type=checkbox]){max-width:none;padding:12px 14px;border-radius:12px;font:500 15px var(--sans)}
.storefront .account-form .af-check{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.45}
.storefront .account-form .af-check input{margin:2px 0 0;width:18px;height:18px;flex:none;accent-color:var(--gold)}
.af-note{margin:0;font:500 13px/1.5 var(--sans);color:var(--text-3)}
.storefront .account-form .open-button{justify-self:stretch}
.storefront .accept-form{margin-top:18px;padding:20px;border-radius:18px;border:1px solid rgba(233,164,64,.5);background:rgba(233,164,64,.06)}
/* the sections: icon tabs, pinned under the bar */
.storefront .portal-nav{position:sticky;top:68px;z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 22px;padding:10px 0;border-bottom:1px solid var(--line);background:rgba(10,14,24,.94);backdrop-filter:blur(10px)}
.storefront .portal-nav::-webkit-scrollbar{display:none}
.storefront .portal-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.04);color:var(--text-2);font:600 14px/1 var(--sans);text-decoration:none;transition:background var(--t-2),color var(--t-2),border-color var(--t-2)}
.storefront .portal-nav a .ico{width:18px;height:18px;color:var(--text-3)}
.storefront .portal-nav a:hover{background:rgba(255,255,255,.07);color:var(--text)}
.storefront .portal-nav a[aria-current="page"]{background:linear-gradient(180deg,rgba(242,193,78,.2),rgba(242,193,78,.06));border-color:rgba(242,193,78,.45);color:var(--text)}
.storefront .portal-nav a[aria-current="page"] .ico{color:var(--gold)}
.portal-panel:not([hidden]){animation:panel-in .35s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}}
.pp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.storefront .pp-head h2{margin:0;font:700 clamp(26px,3vw,38px)/1 var(--display);text-transform:uppercase}
.pp-note{max-width:760px;margin:-4px 0 18px;font:500 13px/1.55 var(--sans);color:var(--text-3)}
.pp-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pp-steps li{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line-2);font:600 12px/1 var(--sans);color:var(--text-2)}
.pp-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(242,193,78,.16);color:var(--gold);font:800 11px/1 var(--display)}
/* the overview */
.ov-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.ov-card{min-width:0;padding:18px;border-radius:22px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.ov-recent{grid-column:1/-1}
.ov-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.ov-head h3{margin:0;font:700 18px/1 var(--display);letter-spacing:.07em;text-transform:uppercase}
.ov-more{font:700 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.ov-pulls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.ov-pulls li{min-width:0;animation:rise-in .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms + 180ms)}
.ov-pull{display:grid;gap:6px;text-decoration:none;color:var(--text);transition:transform var(--t-2) var(--ease-out)}
.ov-pull:hover,.ov-pull:focus-visible{transform:translateY(-5px) rotate(-1deg)}
.ovp-v{font-size:13px;line-height:1.2}
.ovp-n{overflow:hidden;font:600 11px/1.25 var(--sans);color:var(--text-3);text-overflow:ellipsis;white-space:nowrap}
.ov-empty{grid-column:1/-1;margin:0;padding:26px;border-radius:16px;border:1px dashed var(--line-2);text-align:center;font:500 14px/1.5 var(--sans);color:var(--text-3)}
.ov-empty a{color:var(--gold)}
.ov-best-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.ov-best-body>.ov-empty{grid-column:1/-1}
.ovb-card{display:block;transition:transform var(--t-3) var(--ease-out)}
.ovb-card:hover{transform:rotate(-2deg) scale(1.03)}
.ovb-copy{display:grid;gap:7px;min-width:0}
.ovb-copy .tier-chip{justify-self:start}
.ovb-name{font:700 22px/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.ovb-meta,.ovb-from{font:500 12px/1.4 var(--sans);color:var(--text-3)}
.ovb-v{font:700 28px/1 var(--display)}
.ov-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ov-tiles a{display:grid;gap:6px;height:100%;padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(8,11,20,.5);text-decoration:none;color:var(--text);transition:transform var(--t-2) var(--ease-out),border-color var(--t-2)}
.ov-tiles a:hover,.ov-tiles a:focus-visible{transform:translateY(-2px);border-color:rgba(242,193,78,.45)}
.ov-tiles .ico{width:38px;height:38px;padding:9px;border-radius:11px;background:rgba(242,193,78,.12);color:var(--gold)}
.ov-tiles b{font:700 15px/1.1 var(--display);letter-spacing:.03em}
.ov-tiles small{font:500 12px/1.35 var(--sans);color:var(--text-3)}
.storefront .ov-grid .level-panel{grid-column:1/-1;margin:0;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.storefront .ov-grid .level-panel h2{font-size:18px;letter-spacing:.07em;text-transform:uppercase}
.storefront .ov-grid .level-panel>progress{accent-color:var(--gold)}
/* buy berries: bundles */
.bundles{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.bundles li{animation:rise-in .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.bundle{position:relative;width:100%;height:100%;display:grid;justify-items:center;align-content:start;gap:5px;padding:22px 14px 18px;border-radius:22px;border:1px solid var(--line-2);color:var(--text);cursor:pointer;
  background:radial-gradient(circle at 50% 0%,rgba(242,193,78,.16),transparent 62%),var(--ink-1);transition:transform var(--t-2) var(--ease-out),border-color var(--t-2),box-shadow var(--t-2)}
.bundle:hover:not(:disabled){transform:translateY(-4px);border-color:rgba(242,193,78,.5)}
.bundle[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 18px 44px rgba(242,193,78,.2)}
.bundle[aria-pressed="true"]::after{content:'\2713';position:absolute;top:10px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font:800 13px/24px var(--sans)}
.bundle:disabled{opacity:.55;cursor:not-allowed}
.bd-pile{position:relative;display:block;width:130px;height:58px;margin-bottom:6px}
.bd-pile .berry-mark{position:absolute;bottom:0;left:calc(50% - 18px + (var(--k,0) - 1) * 15px);width:36px;height:36px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.bd-pile .berry-mark:nth-child(even){bottom:16px}
.bd-pile .berry-mark:first-child{left:calc(50% - 18px)}
.bd-n{font:700 32px/1 var(--display);letter-spacing:.01em}
.bd-unit{font:700 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.bd-price{margin-top:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);font:700 14px/1 var(--sans)}
.storefront #buy-berries #topup-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin:0;padding:16px;border-radius:18px;border:1px solid var(--line-2);background:rgba(8,11,20,.55)}
.storefront #buy-berries #topup-form[hidden]{display:none}
.storefront #buy-berries #topup-form h3{display:none}
.storefront #buy-berries #topup-mode{grid-column:1/-1;margin:0;font:500 13px/1.4 var(--sans);color:var(--text-3)}
.storefront #buy-berries #topup-submit{min-height:48px;padding:0 24px;border:0;border-radius:14px;background:linear-gradient(100deg,var(--signal),#ff6a2b 55%,var(--signal-2));color:var(--signal-ink);font:700 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 26px rgba(255,70,54,.3)}
.storefront #buy-berries #topup-submit:disabled{opacity:.5}
.storefront #buy-berries #topup-history{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.storefront #buy-berries #topup-history li{padding:10px 14px;border-radius:12px;border:1px solid var(--line);font:500 13px/1.4 var(--sans);color:var(--text-2)}
/* documents */
.doc-list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.doc-list li{position:relative;padding:14px 14px 14px 54px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);font:500 12px/1.4 var(--sans);color:var(--text-3)}
.doc-list li::before{content:'';position:absolute;left:14px;top:14px;width:26px;height:32px;border-radius:4px 10px 4px 4px;background:linear-gradient(160deg,rgba(242,193,78,.5),rgba(242,193,78,.15));box-shadow:inset 0 0 0 1px rgba(242,193,78,.6)}
.doc-list a{display:block;margin-bottom:3px;font:700 15px/1.25 var(--display);letter-spacing:.03em;color:var(--text);text-transform:capitalize;text-decoration:none}
.doc-list a:hover{color:var(--gold)}
#acceptance-history details{margin:6px 0;padding:10px 14px;border-radius:12px;border:1px solid var(--line)}
/* phones and narrow windows */
@media (max-width:980px){
  .acct-hero,.acct-gate,.ov-grid{grid-template-columns:1fr}
  .ov-pulls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .ah-avatar{width:88px;height:88px}
  .ah-avatar>b{width:64px;height:64px;font-size:30px}
  .ah-stats{grid-template-columns:1fr}
  .ah-stat a{grid-template-columns:auto 1fr auto;align-items:center}
  .ov-best-body{grid-template-columns:110px minmax(0,1fr)}
  .storefront .portal-nav{top:96px}
  .storefront #buy-berries #topup-form{grid-template-columns:1fr}
}
/* the hero is compact on every section but the overview */
.account-page[data-tab]:not([data-tab="overview"]) .acct-hero{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:14px 18px;border-radius:20px;animation:none}
.account-page[data-tab]:not([data-tab="overview"]) .ah-avatar{width:64px;height:64px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-avatar>b{width:46px;height:46px;font-size:22px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-lvbadge{min-width:22px;height:22px;font-size:11px;line-height:22px;padding:0 5px;right:-2px;bottom:0}
.account-page[data-tab]:not([data-tab="overview"]) .ah-who .kicker,.account-page[data-tab]:not([data-tab="overview"]) .ah-level,.account-page[data-tab]:not([data-tab="overview"]) .ah-email{display:none}
.account-page[data-tab]:not([data-tab="overview"]) .ah-name{font-size:24px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-stats{gap:8px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-stat{animation:none}
.account-page[data-tab]:not([data-tab="overview"]) .ah-stat a{grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:14px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-ico{width:32px;height:32px;border-radius:10px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-ico .berry-mark{width:18px;height:18px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-num b{font-size:20px}
.account-page[data-tab]:not([data-tab="overview"]) .ah-num{gap:1px;min-width:0}
.account-page[data-tab]:not([data-tab="overview"]) .ah-num small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-page[data-tab]:not([data-tab="overview"]) .ah-go{display:none}
@media (max-width:980px){.account-page[data-tab]:not([data-tab="overview"]) .acct-hero{grid-template-columns:1fr}.account-page[data-tab]:not([data-tab="overview"]) .ah-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.account-page[data-tab]:not([data-tab="overview"]) .ah-stat a{grid-template-columns:1fr}.account-page[data-tab]:not([data-tab="overview"]) .ah-ico{display:none}
  /* O45-25: "in your vault - 7.9k today" wraps on a phone rather than being cut to "in your vault ..." */
  .account-page[data-tab]:not([data-tab="overview"]) .ah-num small{white-space:normal;overflow:visible}}
/* the overview's level card: the thresholds and perks (the hero has the level and the bar) */
.ov-grid #level-title,.ov-grid #level-xp,.ov-grid #level-progress,.ov-grid #level-next{display:none}
.ov-grid #level-rewards{margin:0 0 4px;font:500 13px/1.55 var(--sans);color:var(--text-2)}
/* documents: proper names, the version, an informational tag */
.doc-list a{text-transform:none}
.doc-list small{display:block;font:500 12px/1.4 var(--mono);color:var(--text-3);overflow-wrap:anywhere}
.doc-tag{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);font:700 9px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ============================== 10. ROUND 2 FIXES (docs/E2E_AUDIT_O35_ROUND2.md) ============================== */
/* R2: the account's section tabs scroll in one row on a phone (account.css let them wrap into four rows) */
.storefront .portal-nav{flex-wrap:nowrap}
/* R2: the ledger's opening history on a phone - each row a small card, not a six-column squeeze */
@media (max-width:640px){
  #history-table thead{display:none}
  #history-table,#history-table tbody{display:block}
  #history-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  #history-table td{display:block;padding:0;border:0}
  #history-table td:nth-child(1){grid-column:1;font-size:12px;color:var(--text-3)}
  #history-table td:nth-child(2){display:none}
  #history-table td:nth-child(3){grid-column:2;grid-row:1}
  #history-table td:nth-child(4){grid-column:1/-1}
  #history-table td:nth-child(5),#history-table td:nth-child(6){font-size:12px;color:var(--text-2)}
  #history-table td:nth-child(6){text-align:right}
}

/* R2-02: the legal documents, rendered for reading (internal/httpapi/legal_render.go) - the shop's type and
   colours, a reading column, the other documents as chips across the top */
body.legal-page{margin:0;background:var(--ink-0);color:var(--text);font:400 16px/1.65 var(--sans)}
.legal-bar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px clamp(16px,3vw,40px);background:rgba(9,12,22,.97);border-bottom:1px solid rgba(242,193,78,.14)}
.legal-brand{font:700 18px/1 var(--display);letter-spacing:.28em;color:var(--gold);text-decoration:none}
.legal-docs{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.legal-docs a{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);font:600 12px/1 var(--sans);color:var(--text-2);text-decoration:none;white-space:nowrap}
.legal-docs a:hover{color:var(--text);border-color:var(--text-3)}
.legal-docs a[aria-current="page"]{border-color:var(--gold);color:var(--text);background:rgba(242,193,78,.1)}
.legal-back{font:600 13px/1 var(--sans);color:var(--gold);white-space:nowrap}
.legal-doc{max-width:820px;margin:0 auto;padding:clamp(24px,4vw,56px) clamp(16px,4vw,32px) 80px}
.legal-version{display:inline-block;margin:0 0 18px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);font:600 12px/1 var(--mono);color:var(--text-3)}
.legal-doc h1{margin:0 0 14px;font:700 clamp(34px,5vw,54px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em}
.legal-doc h2{margin:40px 0 12px;padding-top:18px;border-top:1px solid var(--line);font:700 26px/1.15 var(--display);letter-spacing:.02em}
.legal-doc h3{margin:28px 0 10px;font:700 19px/1.25 var(--display);letter-spacing:.03em;color:var(--text)}
.legal-doc h4,.legal-doc h5,.legal-doc h6{margin:22px 0 8px;font:700 16px/1.3 var(--display);letter-spacing:.04em}
.legal-doc p{margin:0 0 14px;color:var(--text-2)}
.legal-doc strong{color:var(--text);font-weight:700}
.legal-doc a{color:#f3d28a;text-decoration:underline;text-decoration-color:rgba(242,193,78,.45);text-underline-offset:3px}
.legal-doc a:hover{text-decoration-color:var(--gold)}
.legal-doc code{padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.07);font-size:13px;color:#e8dcc0;word-break:normal}
.legal-doc blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:rgba(242,193,78,.07)}
.legal-doc blockquote p{margin:0;color:var(--text)}
.legal-doc hr{margin:30px 0;border:0;border-top:1px solid var(--line-2)}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px;color:var(--text-2)}
.legal-doc ol{list-style:none;padding-left:4px}
.legal-doc li{margin:6px 0}
.legal-doc li>ul,.legal-doc li>ol{margin:6px 0 0}
.legal-doc .li-n{display:inline-block;min-width:1.8em;font-weight:700;color:var(--text)}
.legal-table{margin:0 0 18px;overflow-x:auto;border:1px solid var(--line-2);border-radius:12px}
.legal-doc table{width:100%;border-collapse:collapse;font-size:14px}
.legal-doc th{padding:10px 12px;text-align:left;font:700 11px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-2)}
.legal-doc td{padding:10px 12px;vertical-align:top;color:var(--text-2);border-bottom:1px solid var(--line)}
.legal-doc tr:last-child td{border-bottom:0}
/* O46 (U46-13): on a phone the document tabs were squeezed between the brand and "Your documents" - the second tab cut
   to "P..." and under the back link. The brand and the back link share the first row; the tabs wrap on rows of their
   own below, so every document - the current one too - is in view (these pages run no script to scroll one in). */
@media (max-width:640px){.legal-bar{position:static;justify-content:space-between}.legal-docs{order:3;flex:1 0 100%;flex-wrap:wrap}}
/* R2: reduced motion - the O35 entrances (the account's hero, tiles and panels; the search and menu panels; the
   found card; the notes) stand still, as the rest of the shop's motion does */
@media (prefers-reduced-motion:reduce){
  .acct-hero,.ah-stat,.ov-pulls li,.bundles li,.portal-panel:not([hidden]),.search-panel:not([hidden]),.user-panel,.pool-card.is-found,
  .replacement-note[open] .rn-body,.how-card[open]>p,.ag-fan .tcg-card,.top-search.is-busy .ts-field>.ico{animation:none!important}
  .ah-ring-fill,.ah-bar i,.um-ring-fill{transition:none!important}
  .ah-stat a:hover,.ov-pull:hover,.ov-tiles a:hover,.bundle:hover,.sr-pack:hover{transform:none}
}
/* R2: the account's Withdrawals tab is for shipping - the vault's Sell all stays in My cards and Sell back */
.account-page[data-tab="withdrawals"] #sell-all{display:none}
/* R2-12: one opening's page - the pull leads (tier, value), its facts under it, the technical receipt one tap down */
.ob-copy{display:grid;gap:16px;min-width:0;align-content:start}
.ob-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:0}
.ob-head .tier-chip{align-self:center}
.ob-value{font:700 clamp(32px,4vw,48px)/1 var(--display);letter-spacing:.01em}
.ob-single[data-tier="chase"] .ob-value{background:linear-gradient(180deg,#fff7d6 10%,#ffd36a 55%,#e08a2c);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-head small{font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ob-facts{margin:0;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.025)}
.ob-receipt{margin:0;padding:12px 16px;border-radius:14px;border:1px solid var(--line);font-size:13px}
.ob-receipt summary{color:var(--text-2)}
.ob-single .ob-card{margin:0}
/* R2: a long printing name on its opening page in a smaller size (it ran to three screen-wide lines) */
.page-title#open-title.is-long{font-size:clamp(30px,4.2vw,60px);line-height:1}
/* R2-13: the hero CTA while openings are paused - the quiet look, not the action colour */
.open-button.hero-cta.is-paused{background:var(--ink-3);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.open-button.hero-cta.is-paused .cta-arrow{background:var(--ink-1)}
.res-card{font:600 13px/1.3 var(--sans);color:var(--text)}
/* R2-15: inside the account the vault is a section, not a page - its own Refresh and summary line go (the hero has the figures) */
.portal-panel #refresh-inventory,.portal-panel #vault-summary{display:none}

/* ============================== 11. THE PACK PICKER (O36: the owner's pack-opening carousel) ==============================
   Open a pack -> this pops up over the page -> scroll, swipe, the arrows or the arrow keys -> pick one -> that pack
   opens (web/picker.js). The slides are the shop's own tiles (their art), the panel under them is the middle tile's
   own words plus its odds by tier. It sits under the reveal theatre (z 100), which takes over in the same frame. */
html.picker-open{overflow:hidden}
.picker{position:fixed;inset:0;z-index:95;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--text);opacity:0;transition:opacity .22s ease}
.picker[hidden]{display:none}
.picker.is-on{opacity:1}
.picker.is-leaving{opacity:0;transition-duration:.18s}
.picker.is-picking{opacity:0;transition:opacity .24s ease .08s}
.pk-backdrop{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 52% at 50% 44%,color-mix(in srgb,var(--pk-a,#e0402c) 30%,transparent),transparent 72%),
    radial-gradient(110% 70% at 50% 118%,rgba(242,193,78,.1),transparent 62%),rgba(4,6,12,.985)}
.pk-top{display:flex;align-items:flex-start;gap:16px;padding:18px clamp(16px,3vw,40px) 0}
.pk-head{display:grid;gap:5px;min-width:0;margin-right:auto}
.pk-kicker{margin:0;font:700 11px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.pk-title{margin:0;font:700 clamp(26px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:#fffaf0}
.pk-sub{margin:0;font-size:13px;color:var(--text-2)}
.pk-how-touch{display:none}
@media (pointer:coarse),(max-width:640px){.pk-how{display:none}.pk-how-touch{display:inline}}
.pk-views{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.pk-view{border:0;background:none;color:var(--text-2);font:600 13px/1 var(--sans);padding:8px 14px;border-radius:999px;cursor:pointer}
.pk-view[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.pk-close{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--text);border-radius:999px;padding:9px 14px;font:600 13px/1 var(--sans);cursor:pointer}
.pk-close kbd{font:600 10px/1 var(--mono);padding:3px 5px;border-radius:4px;border:1px solid var(--line-2);color:var(--text-3)}
.pk-view:focus-visible,.pk-close:focus-visible,.pk-arrow:focus-visible,.pk-oddslink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the carousel: one scroll-snapped row; every slide leans and sinks by its distance from the middle (--d, --ad from picker.js) */
/* registered and not inherited: a slide's lean restyles that slide alone, never the drawing inside it */
@property --d{syntax:'<number>';inherits:false;initial-value:0}
@property --ad{syntax:'<number>';inherits:false;initial-value:0}
@property --z{syntax:'<integer>';inherits:false;initial-value:1}
@property --sd{syntax:'<number>';inherits:false;initial-value:0}
.pk-stage{position:relative;min-height:0;display:grid;align-items:center}
.pk-track{--sw:clamp(210px,min(23vw,36vh),340px);display:flex;align-items:center;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding-inline:calc(50% - var(--sw) / 2);scrollbar-width:none;outline:none;overscroll-behavior-x:contain}
.pk-track::-webkit-scrollbar{display:none}
.pk-track:focus-visible .pk-slide.is-center .pt-art{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--r-l)}
.pk-slide{flex:0 0 var(--sw);scroll-snap-align:center;position:relative;z-index:var(--z,1);display:grid;place-items:center;cursor:pointer}
/* Keep scroll-snap targets untransformed; only the artwork carries the coverflow. */
.pk-slide > .pt-art{transform:perspective(1100px) translateX(calc(var(--d,0) * -14%)) translateZ(calc(var(--ad,0) * -150px)) rotateY(calc(var(--d,0) * -32deg));
  opacity:calc(1 - var(--ad,0) * .24)}
.pk-slide .pt-art{width:100%;height:calc(var(--sw) * 1.3);overflow:visible;border-radius:var(--r-l);
  background:radial-gradient(closest-side at 50% 56%,color-mix(in srgb,var(--pk-a,#e0402c) 38%,transparent),transparent)}
.pk-slide .pt-pack{width:58%;transform:translate(-22%,5%) rotate(-6deg)}
.pk-slide .pt-chase{width:50%;top:11%;transform:translateX(-2%) rotate(9deg)}
.pk-slide .pt-badge{left:8%;top:6%}
/* the pack in the middle: lit, floating, its sheen sweeping, a pool of its own light under it */
.pk-slide.is-center .pt-art::after{content:'';position:absolute;left:12%;right:12%;bottom:2%;height:9%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pk-a,#e0402c) 55%,transparent),transparent)}
.pk-slide.is-center .pt-pack{animation:pk-float 3.4s var(--ease-io) infinite}
@keyframes pk-float{0%,100%{transform:translate(-22%,5%) rotate(-6deg)}50%{transform:translate(-22%,2%) rotate(-4.5deg)}}
.pk-slide.is-center .pack-gloss::after{opacity:1;animation:gloss-sweep 4.2s var(--ease-io) infinite}
.pk-slide.is-center .pkr-sheen{opacity:1;animation:pkr-sweep 4.2s var(--ease-io) infinite}
.picker.is-on .pk-slide{animation:pk-in .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 24ms)}
@keyframes pk-in{from{opacity:0;translate:0 34px}}
/* O37 - the booster box (the default): the packs stand close-packed in a row, like packs in a box - each one pulled
   toward the middle by its distance (--sd), so the neighbours tuck in behind the pack you are looking at */
.picker[data-mode="box"] .pk-slide > .pt-art{transform:perspective(1100px) translateX(calc(var(--sd,0) * -42%)) translateZ(calc(var(--ad,0) * -110px)) rotateY(calc(var(--d,0) * -40deg));
  opacity:calc(1 - var(--ad,0) * .17)}
@media (max-width:640px){.picker[data-mode="box"] .pk-slide > .pt-art{transform:perspective(900px) translateX(calc(var(--sd,0) * -38%)) translateZ(calc(var(--ad,0) * -90px)) rotateY(calc(var(--d,0) * -36deg))}}
/* a box of copies (the default): the pack alone, upright, each leaning its own little way */
.picker[data-mode="box"] .pk-slide .pt-pack{width:68%;transform:translate(0,4%) rotate(var(--lean,0deg))}
.picker[data-mode="box"] .pk-slide.is-center .pt-pack{animation:pk-float-box 3.4s var(--ease-io) infinite}
@keyframes pk-float-box{0%,100%{transform:translate(0,4%) rotate(var(--lean,0deg))}50%{transform:translate(0,1%) rotate(var(--lean,0deg))}}
/* O37: a box's packs carry no shelf badge (NEW, LOW STOCK): those belong to the box's tile on the shelf */
.picker[data-mode="box"] .pk-slide .pt-badge{display:none}
/* on the pick the others fall away; the picked pack is the one that flies into the reveal (.pk-flyer) */
.picker.is-picking .pk-slide:not(.is-center){opacity:0;transition:opacity .16s}
.picker.is-picking .pk-slide.is-center .pt-pack{visibility:hidden}
.pk-arrow{position:absolute;top:50%;z-index:30;width:52px;height:52px;margin-top:-26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(10,14,26,.82);color:var(--text);cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,border-color .15s}
.pk-arrow:hover:not(:disabled){border-color:var(--gold);background:rgba(242,193,78,.12)}
.pk-arrow .ico{width:24px;height:24px}
.pk-arrow.is-prev{left:clamp(12px,4vw,64px)}
.pk-arrow.is-prev .ico{transform:rotate(90deg)}
.pk-arrow.is-next{right:clamp(12px,4vw,64px)}
.pk-arrow.is-next .ico{transform:rotate(-90deg)}
.pk-arrow:disabled{opacity:.28;cursor:default}

/* the List view: the same packs as rows (the owner: "a list of all the things you can open") */
.pk-list{list-style:none;margin:0 auto;padding:6px;width:min(880px,calc(100% - 32px));max-height:100%;overflow:auto;display:grid;gap:6px;align-content:start;outline:none;overscroll-behavior:contain}
.pk-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:8px 16px 8px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(16,22,42,.72);cursor:pointer}
.pk-row:hover{border-color:var(--line-2)}
.pk-row.is-center{border-color:color-mix(in srgb,var(--pk-a,#e0402c) 70%,transparent);background:color-mix(in srgb,var(--pk-a,#e0402c) 14%,rgba(16,22,42,.92));box-shadow:0 0 0 1px color-mix(in srgb,var(--pk-a,#e0402c) 40%,transparent)}
.pk-list:focus-visible .pk-row.is-center{outline:2px solid var(--gold);outline-offset:1px}
.pk-row-art{display:grid;place-items:center;width:52px}
.pk-row-art .pack-object{width:40px}
.pk-row-art .pack-svg{filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.pk-row-main{display:grid;gap:3px;min-width:0}
.pk-row-main b{font:700 17px/1.1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-row-main small{font:700 9px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--pk-c,var(--text-3))}
.pk-row-chase{font-size:12px;color:var(--chase);white-space:nowrap}
.pk-row-left{font-size:12px;color:var(--text-2);white-space:nowrap}
.pk-row-price{font:700 17px/1 var(--display);font-variant-numeric:tabular-nums;text-align:right;min-width:10ch;white-space:nowrap}

/* the panel: the middle pack's own tile words, its odds by tier, Open */
.pk-panel{display:grid;justify-items:center;gap:10px;padding:4px clamp(16px,3vw,40px) clamp(14px,2.4vh,26px);text-align:center}
.pk-info{width:min(560px,100%)}
.pk-info .pt-body{padding:0;gap:6px;justify-items:center}
.pk-info .pt-title{font-size:clamp(24px,2.5vw,34px)}
.pk-info .pt-sub{display:none} /* the pack's line, already its kicker */
.pk-info .pt-shape{width:min(340px,86%)}
.pk-info .pt-foot{justify-content:center;gap:14px}
.pk-info .pt-odds{font-size:12px}
.pk-oddsrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px}
.pk-odds-k{font:700 10px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.pk-odds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pk-tier{--tc:var(--base);display:flex;gap:7px;align-items:baseline;padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);
  background:color-mix(in srgb,var(--tc) 12%,transparent);font-size:12px}
.pk-tier[data-tier="plus"]{--tc:var(--plus)}
.pk-tier[data-tier="hit"]{--tc:var(--hit)}
.pk-tier[data-tier="chase"]{--tc:var(--chase)}
.pk-tier b{font:700 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.pk-tier span{font-variant-numeric:tabular-nums;color:var(--text)}
.pk-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;width:100%}
.picker .pk-open{width:min(440px,100%)}
.pk-buy{margin:0}
.pk-oddslink{font-size:13px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.pk-oddslink:hover{color:var(--text)}
.pk-note{margin:0;color:var(--warn);font-size:13px}
.pk-fine{margin:0;font-size:11px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center}
.pk-pos{font:700 11px/1 var(--display);letter-spacing:.12em;color:var(--text-2);font-variant-numeric:tabular-nums}

/* the flight: the picked pack, from its slide to where the theatre tears it */
.pk-flyer{position:fixed;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:120;pointer-events:none;transform-origin:50% 50%}
.pk-flyer .pack-object{display:block;width:100%}
.pk-flyer .pack-svg{filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.theatre.is-picked .t-pack{visibility:hidden}

@media (max-width:640px){
  .pk-top{padding:12px 14px 0;gap:10px;flex-wrap:wrap;align-items:center}
  .pk-head{flex:1 1 60%}
  .pk-title{font-size:24px}
  .pk-sub{font-size:12px}
  .pk-close{padding:8px 12px}
  .pk-close kbd{display:none}
  .pk-track{--sw:min(62vw,40vh)}
  .pk-slide > .pt-art{transform:perspective(900px) translateX(calc(var(--d,0) * -10%)) translateZ(calc(var(--ad,0) * -110px)) rotateY(calc(var(--d,0) * -28deg))}
  .pk-arrow{display:none}
  .pk-panel{gap:8px;padding:2px 14px 14px}
  .pk-info .pt-sub{display:none}
  .pk-info .pt-title{font-size:24px}
  .pk-odds{gap:4px}
  .pk-tier{padding:4px 8px;font-size:11px}
  .picker .pk-open{width:100%}
  .pk-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:6px 12px 6px 6px}
  .pk-row-art{width:44px}
  .pk-row-art .pack-object{width:34px}
  .pk-row-chase,.pk-row-left{display:none}
  .pk-row-main b{font-size:15px}
  .pk-row-price{font-size:15px;min-width:0}
}
@media (max-height:620px){
  .pk-info .pt-sub,.pk-info .pt-shape{display:none}
  .pk-panel{gap:6px}
}
/* reduced motion: the picker stands still - no lean, no float, no spin, no flight (picker.js skips it) */
@media (prefers-reduced-motion:reduce){
  .picker,.picker.is-picking,.picker.is-leaving{transition:none}
  .pk-slide > .pt-art{transform:none!important}
  .picker.is-on .pk-slide,.pk-slide.is-center .pt-pack,.pk-slide.is-center .pack-gloss::after,.pk-slide.is-center .pkr-sheen{animation:none!important}
}

/* ============================== 12. PACK ART (O36: the owner's showcase for Foundry and customer boxes) ==============================
   The styles a built box can wear (web/app.js ART_STYLES). 'fun' is a placeholder: the classic front recoloured. */
.pack-svg[data-tone="fun"] .pkr-front{filter:hue-rotate(275deg) saturate(1.7) brightness(1.12) contrast(1.05)}
.art-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.art-opt{display:grid;justify-items:center;gap:4px;padding:10px 8px 9px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;
  font:inherit;text-align:center;transition:border-color .15s,background .15s,transform .15s}
.art-opt:hover{border-color:var(--line-2);transform:translateY(-2px)}
.art-opt[aria-checked="true"]{border-color:var(--gold);background:rgba(242,193,78,.1);box-shadow:0 0 0 1px var(--gold)}
.art-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.art-thumb{display:block;width:62px}
.art-thumb .pack-object{width:100%}
.art-thumb .pack-svg{filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
/* the Foundry's own preview, a little bigger so the art can be judged */
.storefront .fd-pack{width:132px}
.art-name{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;justify-content:center;max-width:100%} /* O37: the placeholder badge wraps under the name in a narrow tile */
.art-name b{font:700 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.art-ph{font:700 8px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:2px 5px}
.art-blurb{font-size:11px;line-height:1.3;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.art-opt{transition:none}.art-opt:hover{transform:none}}

/* ============================== 13. BUILD A BOX (O36: the customer's builder - "super simple and friendly") ==============================
   Three plain steps: pick cards, name / art / price, your box (fair odds set by the house engine). web/boxes.js. */
.bx{display:grid;gap:var(--s6);padding:clamp(20px,3vw,40px) clamp(16px,4vw,40px) var(--s7);max-width:var(--page);margin:0 auto}
.bx-head{display:grid;gap:10px;max-width:880px}
.bx-head .page-title{margin:0;font-size:clamp(34px,5vw,64px)}
.bx-lede{margin:0;font-size:16px;line-height:1.5;color:var(--text-2);max-width:68ch}
.bx-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bx-steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:13px;color:var(--text-2)}
.bx-steps b,.bx-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font:700 12px/1 var(--display)}
.bx-gate{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;border-radius:var(--r-l);border:1px solid rgba(242,193,78,.35);background:rgba(242,193,78,.07)}
.bx-gate p{margin:0;color:var(--text)}
.bx-gate .open-button{width:auto}
.bx-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--s5);align-items:start}
.bx-main{display:grid;gap:var(--s5);min-width:0}
.bx-step,.bx-box{display:grid;gap:var(--s3);padding:var(--s5);border-radius:var(--r-l);border:1px solid var(--line-2);background:var(--ink-1)}
.bx-step h2,.bx-box h2{display:flex;align-items:center;gap:10px;margin:0;font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.bx-search{display:flex;flex-wrap:wrap;gap:10px}
.bx-q{flex:1 1 280px;margin:0}
.bx-q input{width:100%}
.bx-found{margin:0;font-size:13px;color:var(--text-2)}
.bx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.bx-card{position:relative;display:grid;gap:3px;width:100%;padding:8px 8px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .15s,background .15s,transform .15s}
.bx-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.bx-card .tcg-card{width:100%}
.bx-card[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,193,78,.1);box-shadow:0 0 0 1px var(--gold)}
.bx-card-tick{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font:700 14px/1 var(--sans);
  opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.bx-card[aria-pressed="true"] .bx-card-tick{opacity:1;transform:none}
.bx-card-name{font:600 12px/1.25 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.bx-card-meta{font-size:11px;color:var(--text-3)}
.bx-card-value{font:700 13px/1 var(--display);color:var(--gold)}
.bx-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bx-grid-foot{display:flex;justify-content:center}
.bx-field{display:grid;gap:6px;font-size:13px;color:var(--text-2)}
.bx-field small{color:var(--text-3);font-size:11px}
.bx-field input{font-size:16px}
.bx-box{position:sticky;top:84px;max-height:calc(100vh / var(--vz) - 100px);overflow:auto}
.bx-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.bx-pack{display:block;width:118px}
.bx-pack .pack-object{width:100%;transform:rotate(-4deg)}
.bx-sum{display:grid;gap:4px;min-width:0}
.bx-sum p{margin:0}
.bx-sum-name{font:700 22px/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.bx-sum-price{font:700 16px/1 var(--display);color:var(--gold)}
.bx-sum-count{font-size:12px;color:var(--text-3)}
.bx-status{margin:0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text-2)}
.bx-status[data-state="ok"]{border-color:rgba(76,199,154,.45);background:rgba(76,199,154,.08);color:var(--text)}
.bx-status[data-state="ok"] b,.bx-status[data-state="warn"] b{color:var(--ok)}
.bx-status[data-state="warn"]{border-color:rgba(233,164,64,.5);background:rgba(233,164,64,.08);color:var(--text)}
.bx-status[data-state="bad"]{border-color:rgba(232,112,107,.5);background:rgba(232,112,107,.08);color:var(--text)}
.bx-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bx-line{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.bx-line-art .tcg-card{width:44px}
.bx-line-main{display:grid;gap:2px;min-width:0}
.bx-line-main b{font:600 12px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-line-main small{font-size:11px;color:var(--text-3)}
.bx-line-odds{display:grid;justify-items:end;gap:2px}
.bx-line-odds b{font:700 12px/1 var(--display);font-variant-numeric:tabular-nums}
.bx-line-odds small{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bx-rm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--text-2);cursor:pointer;font:600 16px/1 var(--sans)}
.bx-rm:hover{border-color:var(--bad);color:var(--bad)}
.bx-left{margin:0;font-size:12px;color:var(--text-3)}
.bx-actions{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.bx-msg{margin:0;font-size:13px;color:var(--text-2)}
.bx-msg[data-tone="ok"]{color:var(--ok)}
.bx-msg[data-tone="warn"]{color:var(--warn)}
.bx-msg[data-tone="bad"]{color:var(--bad)}
.bx-fine{margin:0;font-size:11px;color:var(--text-3)}
.bx-mine{display:grid;gap:var(--s3)}
.bx-mine h2{margin:0;font:700 22px/1 var(--display);text-transform:uppercase}
.bx-history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bx-mine-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:14px;border:1px solid var(--line);background:var(--ink-1)}
.bx-mine-pack{width:44px}
.bx-mine-pack .pack-object{width:100%}
.bx-mine-main{display:grid;gap:3px;min-width:0}
.bx-mine-main b{font:700 15px/1.1 var(--display);text-transform:uppercase}
.bx-mine-main small{font-size:12px;color:var(--text-3)}
.bx-mine-state{font:700 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.bx-mine-state[data-state="submitted"]{border-color:var(--plus);color:var(--plus)}
.bx-mine-state[data-state="approved"]{border-color:var(--ok);color:var(--ok)}
.bx-mine-state[data-state="rejected"]{border-color:var(--bad);color:var(--bad)}
.bx-mine-why{grid-column:2/-1;font-size:12px;color:var(--text-2)}
.bx-mine-act{display:flex;gap:8px;justify-content:flex-end}
.bx-mine-empty{padding:14px;border-radius:14px;border:1px dashed var(--line-2);color:var(--text-3);font-size:13px}
@media (max-width:900px){
  .bx-layout{grid-template-columns:1fr}
  .bx-box{position:static;max-height:none}
}
@media (max-width:560px){
  .bx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx-mine-row{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .bx-mine-state,.bx-mine-act{grid-column:2}
  .bx-mine-act{justify-content:flex-start}
  .bx-actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.bx-card,.bx-card-tick{transition:none}.bx-card:hover{transform:none}}

/* ============================== 14. THE VAULT'S SIDE PANEL ON A SHORT SCREEN (O36: the owner's "glitch beside the clicking cells") ==============================
   The Ship / Sell panel is sticky beside the grid of cards you click to pick. On a laptop-height screen it is taller than
   the window: before the cap in app.css its bottom hung below the screen; with the cap it scrolls inside itself, which
   left Sell selected under the panel's own fold. The action stays pinned to the bottom of the panel while the rest
   scrolls, so the button that does the job is always in view. Display only. */
.vault-side #sell-selected{position:sticky;bottom:0;z-index:2;box-shadow:0 -14px 22px rgba(10,14,24,.85),0 10px 30px rgba(255,70,54,.35)}
.vault-side #sell-selected:disabled{box-shadow:0 -14px 22px rgba(10,14,24,.85),inset 0 0 0 1px var(--line-2)}

/* O37: the card view's way into the box builder (storefront cards only) */
.card-view .cv-build{justify-self:start;margin-top:4px;padding:8px 14px;border-radius:999px;border:1px solid rgba(242,193,78,.55);color:var(--gold);text-decoration:none;font:600 13px/1 var(--sans)}
.card-view .cv-build:hover{background:rgba(242,193,78,.1)}
.card-view .cv-build[hidden]{display:none}

/* ============================== 15. THE FOUNDRY - THE BOXES CUSTOMERS BUILD (O37: the owner's "its own ecosystem") ==============================
   A customer's /foundry: a small marketplace of their boxes - never the shelf - with its own hits and browse and sort, and
   "Make your own box" into the builder. A private box (its builder and their guests) wears its badge. web/market.js. */
.fm{display:grid;gap:var(--s6);padding:clamp(20px,3vw,40px) clamp(16px,4vw,40px) var(--s7);max-width:var(--page);margin:0 auto}
.fm-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:var(--s5);align-items:center;padding:clamp(20px,3vw,36px);border-radius:var(--r-l);
  border:1px solid rgba(242,193,78,.28);background:radial-gradient(120% 140% at 0% 0%,rgba(242,193,78,.12),transparent 60%),var(--ink-1)}
.fm-hero-copy{display:grid;gap:12px;min-width:0}
.fm-hero .kicker{color:var(--gold)}
.fm-hero .page-title{margin:0;font-size:clamp(34px,5vw,64px)}
.fm-lede{margin:0;font-size:16px;line-height:1.5;color:var(--text-2);max-width:62ch}
.fm-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.fm-make{width:auto;min-width:min(320px,100%);text-decoration:none}
.fm-how{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fm-how li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:14px;line-height:1.35;color:var(--text-2)}
.fm-how b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font:700 14px/1 var(--display)}
.fm-q{flex:1 1 300px;margin:0}
.fm-q input{width:100%}
.fm-empty{display:grid;justify-items:start;gap:12px;padding:var(--s5);border-radius:var(--r-l);border:1px dashed var(--line-2);color:var(--text-2)}
.fm-empty p{margin:0;max-width:62ch;line-height:1.5}
.fm-empty .open-button{width:auto}
.fm-mine .head-chips a{color:inherit}
.pack-tile.is-private{outline:1px dashed rgba(242,193,78,.55);outline-offset:-1px}
.pt-badge[data-kind="private"]{background:rgba(10,14,24,.85);border-color:var(--gold);color:var(--gold)}
/* the pack page of a private box says who can see it */
.pack-private{margin:6px 0 0;display:inline-block;padding:6px 10px;border-radius:999px;border:1px dashed rgba(242,193,78,.6);color:var(--gold);font:600 12px/1.3 var(--sans)}
.pack-private[hidden]{display:none}
/* the builder: back to the Foundry, a box's state, its invite link and its release */
.bx-back{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.bx-mine-state[data-state="private"]{border-color:var(--gold);color:var(--gold)}
.bx-mine-state[data-state="review"]{border-color:var(--plus);color:var(--plus)}
.bx-mine-state[data-state="public"]{border-color:var(--ok);color:var(--ok)}
.bx-mine-state[data-state="retired"]{border-color:var(--line-2);color:var(--text-3)}
.bx-mine-act{flex-wrap:wrap}
.bx-release{border-color:rgba(76,199,154,.6);color:var(--ok)}
.bx-invite{grid-column:2/-1;display:grid;gap:6px;margin:0}
.bx-invite[hidden]{display:none}
.bx-invite-url{width:100%;font:500 13px/1.3 var(--mono,ui-monospace,monospace);padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--ink-0);color:var(--text)}
.bx-invite-note{font-size:12px;color:var(--text-3)}
@media (max-width:900px){.fm-hero{grid-template-columns:1fr}}
@media (max-width:560px){.bx-invite{grid-column:1/-1}.bx-mine-state{white-space:normal;line-height:1.35;justify-self:start}}

/* ============================== 16. ACCOUNT SETTINGS AND A BOX'S GUESTS (O38: the lead dev's queue) ==============================
   The account's own settings - collector name, password, devices (account-settings.js) - and, in the builder's My boxes, who
   joined a private box (by collector name, never an email), with Remove and a New link (boxes.js). */
.as-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s4);align-items:start}
.as-card{display:grid;gap:10px;padding:var(--s4);border-radius:var(--r-l);border:1px solid var(--line-2);background:var(--ink-1)}
.as-card h3{margin:0;font:700 18px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.as-card .pp-note{margin:0}
.as-card .open-button{width:auto;justify-self:start}
.as-card .ghost{justify-self:start}
.as-hint{font-size:11px;color:var(--text-3)}
#as-result{margin-top:var(--s3)}
.bx-guests{grid-column:2/-1;display:grid;gap:6px;padding:8px 10px;border-radius:12px;border:1px dashed var(--line-2);background:rgba(255,255,255,.02)}
.bx-guests-h{font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.bx-guests ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bx-guests li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px}
.bx-guest-name{font:600 13px/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-guests small{font-size:11px;color:var(--text-3);white-space:nowrap}
.bx-guest-rm{padding:4px 10px;font-size:12px}
.bx-guest-rm:hover{border-color:var(--bad);color:var(--bad)}
.bx-invite-row{display:flex;gap:8px;align-items:center}
.bx-invite-row .bx-invite-url{flex:1 1 auto;min-width:0}
.bx-invite-new{flex:none;padding:7px 12px;font-size:12px}
@media (max-width:560px){.bx-guests{grid-column:1/-1}.bx-guests li{grid-template-columns:minmax(0,1fr) auto}.bx-guests small{grid-column:1}.bx-guest-rm{grid-row:1/span 2;grid-column:2}}

/* ============================== 17. THE BUILDER'S ODDS AND THE ENGINE'S PRICE (O38, steer #14: "THE ENGINE CHOOSES THE PRICE") ==============================
   Each card in Your box: how many copies go in and how often it pulls (a slider, rarer to more often), its chance and its share
   of the box's worth; above them the engine's price and every house rule not met yet (boxes.js). A box on sale being edited says
   so, and a box a sell-out closed wears its own state in My boxes. */
.bx-line-tune{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"art main odds rm" "tune tune tune tune";row-gap:8px}
.bx-line-tune .bx-line-art{grid-area:art;align-self:start}
.bx-line-tune .bx-line-main{grid-area:main}
.bx-line-tune .bx-line-odds{grid-area:odds}
.bx-line-tune .bx-rm{grid-area:rm}
.bx-tune{grid-area:tune;display:flex;align-items:center;gap:14px;min-width:0}
.bx-tune-rate{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:6px}
.bx-tune-rate small{font-size:10px;color:var(--text-3);white-space:nowrap}
.bx-rate{width:100%;accent-color:var(--gold)}
.bx-share{font-size:10px;color:var(--text-3)}
.bx-line-odds .tier-chip[hidden]{display:none}
.bx-line[data-problem="true"]{border-color:rgba(233,164,64,.6);background:rgba(233,164,64,.06)}
.bx-left{list-style:none;padding:0;display:grid;gap:4px}
.bx-left[hidden]{display:none}
.bx-left li{position:relative;padding:6px 10px 6px 24px;border-radius:10px;background:rgba(233,164,64,.06);border:1px solid rgba(233,164,64,.35);color:var(--text);font-size:12px;line-height:1.4}
.bx-left li::before{content:"!";position:absolute;left:10px;top:6px;font-weight:700;color:var(--warn)}
.bx-editing{margin:0;padding:8px 12px;border-radius:12px;border:1px dashed rgba(242,193,78,.6);color:var(--gold);font-size:12px;line-height:1.4}
.bx-editing[hidden]{display:none}
.bx-mine-state[data-state="closed"],.bx-mine-state[data-state="paused"]{border-color:var(--warn);color:var(--warn)}
/* O64 (owner screenshot 18 Oct 12:56): with a "why" line the action buttons wrapped into the 48px picture column and
   spilled out of the card. Pin them (and the why line) to the text column, in one row, left-aligned. */
.bx-mine-pack{align-self:start}
.bx-mine-why{grid-column:2/-1;max-width:72ch;line-height:1.45}
.bx-mine-act{grid-column:2/-1;justify-content:flex-start;flex-wrap:wrap}
.bx-mine-act>*{white-space:nowrap}
/* O45-C17: the ledger tables page past their first window */
.table-more{display:block;margin:var(--s2,8px) auto 0}
.table-more[hidden]{display:none}
.bx-even{justify-self:start;padding:6px 12px;font-size:12px}
.bx-even[hidden]{display:none}
.bx-fit{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bx-fit[hidden]{display:none}
.bx-fit-chip{padding:4px 10px;font-size:12px}
.bx-fit-chip[data-on="true"]{border-color:var(--gold);color:var(--gold)}
.bx-card.is-too-cheap{opacity:.45;cursor:not-allowed}
.bx-card.is-too-cheap:hover{transform:none;border-color:var(--line)}
@media (max-width:560px){.bx-line-tune{grid-template-areas:"art main odds rm" "tune tune tune tune"}.bx-tune{gap:10px}}

/* ============================== 18. O18D - THE OWNER'S EVENING LIST (11 Oct) ==============================
   Item 1: the rewards left the home page - their own page is 18e. Item 2: the shop front - family tabs that
   say what their packs cost, and small tiles with the real pack art (web/art/packs), so more of the shelf fits
   on a screen. Item 3: the big pulls - a slim reel at the very top; hover a pull for the pack it came from.
   Item 4: the shop window - one rotating panel of packs and adverts (Veles' animation lab, web/art/anim, ported:
   the foil sweep, the pack pop, the card flip, the rotating panel). Everything that moves moves with transform
   and opacity only; prefers-reduced-motion stills it all (18f). */

/* ---------- 18a. the hit reel (item 3) ---------- */
.storefront main>.hit-reel{position:relative;z-index:6;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;
  padding:9px max(clamp(16px,4vw,40px),calc((100vw / var(--vz) - var(--page)) / 2 + 40px));
  background:linear-gradient(180deg,rgba(16,22,42,.9),rgba(10,14,24,.75));border-bottom:1px solid var(--line)}
.hr-head{margin:0;display:grid;gap:3px;max-width:138px}
.hr-head b{display:flex;align-items:center;gap:8px;font:700 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hr-head b::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,199,154,.18)}
.hr-head span{font:500 10.5px/1.3 var(--sans);color:var(--text-3)}
.hr-viewport{min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
/* the track is the list twice: a padding the width of the gap makes half of it exactly one lap */
.hr-track{list-style:none;margin:0;padding:3px 10px 3px 0;display:flex;gap:10px;width:max-content}
.hr-track.is-moving{animation:marquee calc(var(--n,8) * 4.6s) linear infinite}
.hr-viewport:hover .hr-track,.hr-viewport:focus-within .hr-track{animation-play-state:paused}
.hr-hit{display:grid;grid-template-columns:38px auto;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--text);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tier-c) 15%,transparent),rgba(255,255,255,.02) 70%);transition:border-color var(--t-2),transform var(--t-2) var(--ease-out)}
.hr-hit:hover,.hr-hit:focus-visible{border-color:var(--tier-c);transform:translateY(-2px)}
.hr-card{display:block;line-height:0}
.hr-card .tcg-card{display:block;width:38px}
.hr-txt{display:grid;gap:2px;min-width:0}
.hr-value{display:flex;align-items:center;gap:4px;font:700 15px/1.05 var(--display);font-variant-numeric:tabular-nums;color:var(--tier-c);white-space:nowrap}
.hr-value .berry-mark{width:13px;height:13px;font-size:11px}
.hr-x{font:700 10px/1.15 var(--sans);letter-spacing:.02em;color:var(--text-2);white-space:nowrap}
.hr-name{max-width:128px;font:500 10.5px/1.15 var(--sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storefront .hit-reel .hr-empty{margin:0;padding:6px 0;border:0;border-radius:0;text-align:left;font:500 13px/1.4 var(--sans);color:var(--text-3)}
/* the pull's box, under the pull: its art, its name, its place on the shelf */
.hr-pop{position:absolute;left:0;top:0;z-index:30;width:300px;display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;
  background:var(--glass);border:1px solid rgba(242,193,78,.4);box-shadow:var(--shadow-pop);transform:translate(var(--x,0),var(--y,0));pointer-events:none;opacity:0;transition:opacity .16s ease}
.hr-pop.is-on{opacity:1}
.hr-pop::before{content:'';position:absolute;top:-7px;left:calc(var(--tip,40px) - 6px);width:12px;height:12px;background:#121a2e;border-left:1px solid rgba(242,193,78,.4);border-top:1px solid rgba(242,193,78,.4);transform:rotate(45deg)}
.hp-art{display:grid;place-items:center;line-height:0}
.hp-art .pack-face{display:block;width:90px}
.hp-art .pack-shot{display:block;width:90px;height:120px;object-fit:cover;border-radius:9px;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.hp-art .pack-object{width:76px}
.hp-body{display:grid;align-content:center;gap:3px;min-width:0}
.hp-k{font:700 9.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.hp-pack{font:700 20px/1.02 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.hp-where{font:700 11.5px/1.3 var(--sans);color:var(--gold)}
.hp-card{margin-top:6px;font:600 12px/1.3 var(--sans);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-val{font:700 12px/1.3 var(--sans);color:var(--chase)}
.hp-who{font:500 11px/1.3 var(--sans);color:var(--text-3)}

/* ---------- 18b. the shop window (item 4) ---------- */
.storefront main>.shop-window{margin-top:18px;margin-bottom:6px;--sw-dwell:7s}
.sw-frame{position:relative}
.sw-slides{position:relative;height:clamp(300px,26vw,360px);border-radius:22px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-1);
  box-shadow:0 30px 70px rgba(0,0,0,.35);touch-action:pan-y;isolation:isolate}
.sw-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:24px;padding:0 clamp(28px,5vw,72px);
  background:radial-gradient(60% 120% at 78% 50%,color-mix(in srgb,var(--pk-a,#de4a33) 30%,transparent),transparent 72%),
    linear-gradient(115deg,#0d1327 0%,#0a0e18 55%,color-mix(in srgb,var(--pk-b,#2a1430) 55%,#0a0e18) 100%);
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease-io),visibility 0s linear .7s}
.sw-slide.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease-io),visibility 0s}
.sw-slide::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(150,160,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(150,160,255,.045) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 75% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 75% 50%,#000,transparent 75%)}
.sw-copy{position:relative;z-index:2;display:grid;gap:12px;align-content:center;justify-items:start;max-width:560px}
.sw-kick{margin:0;font:700 11px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.sw-title{margin:0;font:700 clamp(30px,3.7vw,56px)/.95 var(--display);letter-spacing:-.01em;text-transform:uppercase;
  background:linear-gradient(180deg,#fffaf0 30%,#ead9b4);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.04em}
.sw-line{margin:0;max-width:470px;font:500 15px/1.45 var(--sans);color:var(--text-2)}
.storefront .sw-cta{width:auto;min-width:min(300px,100%);margin-top:6px;text-decoration:none}
.sw-cta .cta-main{font-size:21px}
.sw-link{margin-top:6px}
.sw-link .ico{width:16px;height:16px}
.sw-slide.is-on .sw-copy>*{animation:sw-rise .7s var(--ease-out) backwards}
.sw-slide.is-on .sw-copy>:nth-child(2){animation-delay:.07s}
.sw-slide.is-on .sw-copy>:nth-child(3){animation-delay:.14s}
.sw-slide.is-on .sw-copy>:nth-child(4){animation-delay:.21s}
@keyframes sw-rise{from{opacity:0;transform:translateY(14px)}}
.sw-visual{position:relative;height:100%;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;pointer-events:none}
.sw-stage{position:relative;width:min(100%,440px);height:88%;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}
.sw-stage>*{grid-area:1/1}
.sw-glow{width:78%;height:86%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pk-a,#e2b443) 60%,transparent),transparent);opacity:.7}
.sw-slide.is-on .sw-glow{animation:sw-breathe 5s var(--ease-io) infinite}
@keyframes sw-breathe{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.9;transform:scale(1.04)}}
/* the pack: its shot, its edges faded into the window; a foil sweep across it; a slow float */
.sw-pack{position:relative;z-index:2;height:100%;max-height:330px;aspect-ratio:3/4}
.sw-slide.is-on .sw-pack{animation:sw-float 6s var(--ease-io) infinite}
@keyframes sw-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.sw-pack .pack-face{display:block;width:100%;height:100%}
.sw-pack .pack-shot,.sw-half .pack-shot{display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.sw-pack:not(.is-shot) .pack-face{display:grid;place-items:center}
.sw-pack:not(.is-shot) .pack-object{width:74%}
.sw-foil{position:absolute;inset:7% 14%;border-radius:10px;overflow:hidden;pointer-events:none}
.sw-foil::before{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:46%;background:linear-gradient(100deg,transparent 10%,rgba(234,252,255,.42) 45%,rgba(255,243,196,.36) 55%,transparent 90%);transform:translateX(0) skewX(-14deg)}
.sw-slide.is-on .sw-foil::before{animation:sw-sweep 3.6s var(--ease-io) .4s infinite}
@keyframes sw-sweep{0%,35%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(420%) skewX(-14deg)}}
.sw-fan{position:relative;z-index:1;width:100%;height:100%}
.sw-fan .tcg-card{position:absolute;left:50%;top:50%;width:clamp(96px,9.5vw,138px)}
.sw-fan .sw-fan-0{transform:translate(8%,-56%) rotate(13deg)}
.sw-fan .sw-fan-1{transform:translate(-108%,-44%) rotate(-12deg) scale(.9);filter:brightness(.78)}
.sw-slide.is-on .sw-fan .tcg-card{animation:sw-fan-in .9s var(--ease-out) .15s backwards}
@keyframes sw-fan-in{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
.sw-fan .holo::before{animation:holo 4.5s linear infinite}
.sw-burst{position:relative;z-index:3;align-self:start;justify-self:end;margin:2% 6% 0 0;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff1bf,var(--chase) 58%,var(--chase-2));color:#1a1200;font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 4px rgba(226,180,67,.22);transform:rotate(-12deg)}
.sw-slide.is-on .sw-burst{animation:sw-pulse 2.4s var(--ease-io) infinite}
@keyframes sw-pulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-12deg) scale(1.09)}}
/* the card flip: dealt face down, turned over (the chase slide loops it; the reveal turns it once a lap) */
.sw-flip{position:relative;z-index:2;width:clamp(140px,14vw,200px);aspect-ratio:600/838;perspective:900px}
.sw-flip-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
.is-chase .sw-flip{transform:rotate(-4deg)}
.sw-slide.is-on .is-chase .sw-flip-in{animation:sw-turn 6.8s var(--ease-io) infinite}
@keyframes sw-turn{0%,10%{transform:rotateY(0)}24%,86%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.sw-face{position:absolute;inset:0;border-radius:4.8%/3.4%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sw-front{transform:rotateY(180deg);box-shadow:0 0 0 2px var(--chase),0 0 40px var(--chase-g),0 24px 50px rgba(0,0,0,.55)}
.sw-front .tcg-card{display:block;width:100%;height:100%}
.sw-front .holo::before{animation:holo 3.2s linear infinite}
.sw-front .foil-glitter::before{animation:glitter-a 7s ease-in-out infinite alternate}
.sw-front .foil-glitter::after{animation:glitter-b 7s ease-in-out infinite alternate}
.sw-back{display:grid;place-content:center;justify-items:center;gap:10px;color:#fff3c4;border:6px solid #090a14;
  background:radial-gradient(circle at 50% 46%,rgba(255,197,58,.22),transparent 42%),repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 13px),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 13px),linear-gradient(160deg,#1d2142,#0a0c1b);
  box-shadow:0 0 0 2px rgba(226,180,67,.45),0 24px 50px rgba(0,0,0,.55)}
.sw-back i{width:46%;aspect-ratio:1;border-radius:50%;border:3px solid var(--chase);box-shadow:inset 0 0 0 9px rgba(0,0,0,.35),inset 0 0 0 11px rgba(255,197,58,.35);background:radial-gradient(circle,#2b0b1d 0 12%,transparent 13%)}
.sw-back b{font:700 17px/1 var(--display);letter-spacing:.34em;margin-right:-.34em}
.sw-mini{position:relative;z-index:3;align-self:end;justify-self:end;margin:0 4% 2% 0;width:clamp(62px,6vw,88px);line-height:0;transform:rotate(8deg)}
.sw-mini .pack-face{display:block}
.sw-mini .pack-shot{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;box-shadow:0 10px 22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
.sw-mini .pack-object{width:100%}
.sw-mini.is-odds{align-self:start;justify-self:start;margin:0;width:clamp(56px,5.2vw,76px);transform:rotate(-8deg)}
/* the pools: the chase cards still in, dealt into a fan */
.is-pools{display:flex;align-items:center;justify-content:center}
.sw-deal{position:relative;width:clamp(84px,8.4vw,122px);margin-left:-30px;line-height:0}
.sw-deal:first-child{margin-left:0}
.sw-deal .tcg-card{display:block}
.sw-deal:nth-child(1){transform:rotate(-12deg) translateY(18px)}
.sw-deal:nth-child(2){transform:rotate(-6deg) translateY(5px)}
.sw-deal:nth-child(3){z-index:2;transform:translateY(-4px)}
.sw-deal:nth-child(4){transform:rotate(6deg) translateY(5px)}
.sw-deal:nth-child(5){transform:rotate(12deg) translateY(18px)}
.sw-slide.is-on .sw-deal{animation:sw-deal .7s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * .12s + .2s)}
@keyframes sw-deal{from{opacity:0;transform:translateY(70px) scale(.85)}}
.is-pools .holo::before{animation:holo 4.5s linear infinite}
/* the reveal: the pack pops - its art parts in two over light - and a card rises and turns over */
.sw-rays{z-index:0;width:120%;aspect-ratio:1;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,233,168,.24) 0deg 5deg,transparent 5deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);mask-image:radial-gradient(closest-side,#000 18%,transparent 72%)}
.sw-slide.is-on .sw-rays{animation:sw-spin 18s linear infinite,sw-rays-on 6.8s var(--ease-io) infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}
@keyframes sw-rays-on{0%,16%{opacity:0}28%,84%{opacity:1}100%{opacity:0}}
.sw-pop{position:relative;z-index:2;height:86%;aspect-ratio:3/4}
.sw-half{position:absolute;inset:0;line-height:0}
.sw-half .pack-face{display:block;width:100%;height:100%}
.sw-half .pack-face:not(.has-shot){display:grid;place-items:center}
.sw-half .pack-object{width:74%}
.sw-half.is-l{clip-path:inset(0 50% 0 0)}
.sw-half.is-r{clip-path:inset(0 0 0 50%)}
.sw-slide.is-on .sw-half.is-l{animation:sw-part-l 6.8s var(--ease-io) infinite}
.sw-slide.is-on .sw-half.is-r{animation:sw-part-r 6.8s var(--ease-io) infinite}
@keyframes sw-part-l{0%{opacity:0;transform:none}6%,16%{opacity:1;transform:none}28%,84%{opacity:1;transform:translateX(-38%) rotate(-10deg)}94%,100%{opacity:0;transform:translateX(-38%) rotate(-10deg)}}
@keyframes sw-part-r{0%{opacity:0;transform:none}6%,16%{opacity:1;transform:none}28%,84%{opacity:1;transform:translateX(38%) rotate(10deg)}94%,100%{opacity:0;transform:translateX(38%) rotate(10deg)}}
.is-reveal .sw-flip{z-index:3;opacity:0;width:clamp(118px,11.5vw,166px)}
.is-reveal .sw-flip-in{transform:rotateY(0)}
.sw-slide.is-on .is-reveal .sw-flip{animation:sw-card-up 6.8s var(--ease-out) infinite}
.sw-slide.is-on .is-reveal .sw-flip-in{animation:sw-card-turn 6.8s var(--ease-io) infinite}
@keyframes sw-card-up{0%,20%{opacity:0;transform:translateY(26%) scale(.7)}34%,86%{opacity:1;transform:translateY(-4%) scale(1)}96%,100%{opacity:0;transform:translateY(-4%) scale(1)}}
@keyframes sw-card-turn{0%,38%{transform:rotateY(0)}52%,100%{transform:rotateY(180deg)}}
.sw-sparks{z-index:4;position:relative;width:100%;height:100%}
.sw-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff6d0;box-shadow:0 0 10px 3px rgba(255,233,168,.75);opacity:0}
.sw-sparks i:nth-child(1){left:24%;top:22%}.sw-sparks i:nth-child(2){left:72%;top:18%;animation-delay:.15s!important}
.sw-sparks i:nth-child(3){left:16%;top:62%;animation-delay:.3s!important}.sw-sparks i:nth-child(4){left:80%;top:58%;animation-delay:.1s!important}
.sw-sparks i:nth-child(5){left:50%;top:10%;animation-delay:.22s!important}.sw-sparks i:nth-child(6){left:44%;top:84%;animation-delay:.36s!important}
.sw-slide.is-on .sw-sparks i{animation:sw-spark 6.8s ease-out infinite}
@keyframes sw-spark{0%,22%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.25)}48%,100%{opacity:0;transform:scale(.5)}}
.is-reveal .sw-glow{opacity:.35}
.sw-slide.is-on .is-reveal .sw-glow{animation:sw-flash 6.8s var(--ease-io) infinite}
@keyframes sw-flash{0%,16%{opacity:.35;transform:scale(.9)}28%{opacity:1;transform:scale(1.18)}60%,84%{opacity:.7;transform:scale(1)}100%{opacity:.35;transform:scale(.9)}}
/* the odds: each tier's real share, the bars drawn in */
.sw-odds{position:relative;z-index:2;list-style:none;margin:0;padding:20px 22px;width:min(100%,410px);display:grid;gap:15px;border-radius:16px;border:1px solid var(--line-2);background:rgba(8,11,20,.72);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.sw-odds li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px}
.sw-tier{font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--tier-c)}
.sw-meter{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.sw-meter i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--tier-c);transform-origin:left;transform:scaleX(var(--w,0))}
.sw-odds li[data-tier="chase"] .sw-meter i{background:linear-gradient(90deg,var(--chase),#fff1bf)}
.sw-slide.is-on .sw-meter i{animation:sw-meter 1.1s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * .14s + .25s)}
@keyframes sw-meter{from{transform:scaleX(0)}}
.sw-odds b{font:700 14px/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
/* a box of your own: cards fly into a pack */
.sw-box{position:relative;z-index:2;width:clamp(116px,11vw,160px);line-height:0}
.sw-box .pack-face{display:block}
.sw-box .pack-object{width:100%}
.sw-in{position:relative;z-index:1;width:clamp(78px,7.4vw,106px);line-height:0;opacity:0}
.sw-in .tcg-card{display:block}
.sw-in:nth-child(1){--dx:-190%;--r:-12deg}.sw-in:nth-child(2){--dx:-108%;--r:-4deg}.sw-in:nth-child(3){--dx:150%;--r:10deg}
.sw-slide.is-on .sw-in{animation:sw-in 4.4s var(--ease-io) infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes sw-in{0%{opacity:0;transform:translate(var(--dx),-2%) rotate(var(--r)) scale(.9)}14%,44%{opacity:1;transform:translate(var(--dx),-8%) rotate(var(--r)) scale(.95)}66%{opacity:1;transform:translate(0,-6%) rotate(0) scale(.72)}78%,100%{opacity:0;transform:translate(0,4%) rotate(0) scale(.5)}}
/* the controls: arrows on hover, dots that fill while a slide shows, a pause */
.sw-arrow{position:absolute;top:calc(50% - 22px);z-index:5;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,11,20,.75);color:var(--text);cursor:pointer;opacity:0;transition:opacity var(--t-2),border-color var(--t-2)}
.shop-window:hover .sw-arrow,.sw-arrow:focus-visible{opacity:1}
.sw-arrow:hover{border-color:var(--gold)}
.sw-arrow.is-prev{left:14px}
.sw-arrow.is-next{right:14px}
.sw-arrow .ico{width:20px;height:20px}
.sw-arrow.is-prev .ico{transform:rotate(90deg)}
.sw-arrow.is-next .ico{transform:rotate(-90deg)}
.sw-bar{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;align-items:center;gap:12px;pointer-events:none}
.sw-dots{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;pointer-events:auto}
.sw-dot{position:relative;display:block;width:24px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;cursor:pointer;transition:width var(--t-2) var(--ease-out)}
.sw-dot:hover{background:rgba(255,255,255,.4)}
.sw-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sw-dots li.is-on .sw-dot{width:46px}
.sw-dot i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.sw-dots li.is-on .sw-dot i{animation:sw-fill var(--sw-dwell,7s) linear forwards}
@keyframes sw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* (as specific as the fill's own rule, or its shorthand would set it running again) */
.shop-window:hover .sw-dots li .sw-dot i,.shop-window:has(:focus-visible) .sw-dots li .sw-dot i,.shop-window.is-stopped .sw-dots li .sw-dot i{animation-play-state:paused}
.sw-pause{pointer-events:auto;width:26px;height:26px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,11,20,.75);color:var(--text-2);cursor:pointer}
.sw-pause:hover{color:var(--text);border-color:var(--gold)}
.sw-pause span{width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.shop-window.is-stopped .sw-pause span{width:0;height:0;border:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.shop-window.is-stopped .sw-slide,.shop-window.is-stopped .sw-slide *,.shop-window.is-stopped .sw-slide *::before,.shop-window.is-stopped .sw-slide *::after{animation-play-state:paused!important}
.shop-window.is-single .sw-arrow,.shop-window.is-single .sw-bar{display:none}

/* ---------- 18c. the shop front (item 2) ---------- */
.storefront main>.catalogue{padding-top:30px}
.shop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:12px}
.sh-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.sh-title h2{font:700 30px/1 var(--display);letter-spacing:.01em}
.sh-title .muted{margin:0;font:500 13px/1.3 var(--sans);color:var(--text-3)}
.catalogue .cat-filters{align-items:center}
.catalogue .cat-find{height:38px}
.catalogue .sort select{height:38px}
.catalogue .family-tabs{display:flex;flex-wrap:nowrap;gap:0;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line-2)}
.catalogue .family-tabs::-webkit-scrollbar{display:none}
.catalogue .fam-tab{position:relative;flex:1 0 auto;display:grid;justify-items:start;gap:4px;padding:10px 16px 12px;border:0;border-radius:0;background:transparent;color:var(--text-2);text-align:left;font:inherit;cursor:pointer;transition:color var(--t-2),background var(--t-2)}
.catalogue .fam-tab b{display:flex;align-items:center;gap:7px;font:700 14px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.catalogue .fam-tab b::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--fam,var(--gold));box-shadow:0 0 8px color-mix(in srgb,var(--fam,var(--gold)) 60%,transparent)}
.catalogue .fam-tab small{font:500 11.5px/1.2 var(--sans);color:var(--text-3);white-space:nowrap}
.catalogue .fam-tab small:empty::before{content:'\2014'}
.catalogue .fam-tab::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--fam,var(--gold));transform:scaleX(0);transition:transform var(--t-2) var(--ease-out)}
.catalogue .fam-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.catalogue .fam-tab[aria-selected="true"]{color:var(--text);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--fam,var(--gold)) 10%,transparent));border-color:transparent}
.catalogue .fam-tab[aria-selected="true"]::after{transform:scaleX(1)}
.catalogue .fam-tab[aria-selected="true"] small{color:var(--text-2)}
.fam-tab[data-family="shoreline"]{--fam:hsl(192 74% 56%)}
.fam-tab[data-family="harbour"]{--fam:hsl(214 74% 62%)}
.fam-tab[data-family="opensea"]{--fam:hsl(230 74% 68%)}
.fam-tab[data-family="treasure"]{--fam:hsl(42 80% 56%)}
.fam-tab[data-family="deepwater"]{--fam:hsl(262 70% 70%)}
.fam-tab[data-family="grandvoyage"]{--fam:hsl(352 74% 62%)}
/* the small tile: the pack's art on top, its figures under it */
.pack-grid.is-shelf{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px 12px}
.pack-tile.is-shelf{border-radius:14px;contain-intrinsic-size:auto 340px;background:linear-gradient(180deg,color-mix(in srgb,var(--pk-b,#1a2340) 26%,var(--ink-1)),var(--ink-1) 60%)}
.pack-tile.is-shelf:hover,.pack-tile.is-shelf:focus-visible{transform:translateY(-4px)}
.st-art.pt-art{display:block;height:auto;aspect-ratio:4/5;overflow:hidden;background:#111317}
.st-fam{position:absolute;left:8px;top:8px;z-index:3;padding:3px 8px;border-radius:999px;background:rgba(8,11,20,.8);border:1px solid rgba(255,255,255,.1);font:700 8.5px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--pk-c,var(--text-2))}
.st-art .pack-face{display:block;width:100%;height:100%}
.st-art .pack-shot{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.pack-tile.is-shelf:hover .pack-shot,.pack-tile.is-shelf:focus-visible .pack-shot{transform:scale(1.05)}
.st-art::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%);transform:translateX(-120%)}
.pack-tile.is-shelf:hover .st-art::after{transform:translateX(120%);transition:transform .75s var(--ease-io)}
.st-art:not(.has-shot){background:radial-gradient(closest-side at 50% 56%,color-mix(in srgb,var(--pk-a,#e0402c) 42%,transparent),transparent),#111317}
.st-art:not(.has-shot) .pack-face{display:grid;place-items:center}
.st-art:not(.has-shot) .pack-object{width:64%}
.st-art:not(.has-shot) .pack-svg{filter:drop-shadow(0 12px 16px rgba(0,0,0,.55))}
.pack-tile.is-shelf .pt-body{gap:5px;padding:10px 12px 12px}
.pack-tile.is-shelf .pt-fam{font-size:8.5px;letter-spacing:.18em}
.pack-tile.is-shelf .pt-title{font:700 16px/1.05 var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack-tile.is-shelf .pt-foot{margin-top:1px}
.pack-tile.is-shelf .pt-price{font:700 15px/1 var(--display);color:var(--gold)}
.pack-tile.is-shelf .pt-left{font-size:10.5px}
.pack-tile.is-shelf .shape-bar{height:5px}
.pack-tile.is-shelf .pt-odds{font-size:10.5px;line-height:1.3}
.pt-stock{font:500 10px/1.3 var(--sans);color:var(--text-3)}
.pack-tile.is-shelf .pt-buyback{justify-self:start;margin-top:2px;padding:1px 7px;font-size:9.5px}
.pack-tile.is-shelf .pt-badge{left:auto;right:8px;top:8px;padding:4px 7px;font-size:8px}
.pack-tile.is-shelf .pt-closed{left:6px;right:6px;bottom:6px;padding:7px 8px}
.pack-tile.is-shelf.is-closed .st-art{filter:grayscale(.85) brightness(.55)}

/* ---------- O18E item 11: a pack's shot stays inside its tile ----------
   The owner: a couple of shots ran over the tile's rounded top corners and its border, and the packet's bottom seal
   sat on the line between the art and the figures. A tile now shows the packet alone (crop=pack, packframe.go), cut
   just inside its own outline (.is-cut) and contained in a padded art box that clips - its own top radius, isolated,
   so a lifted or zoomed shot is clipped too - at every tile size. The hit reel's pop and the shop window do the same. */
.pack-shot.is-cut{clip-path:inset(1.4% .8% round 5px)}
.pack-face.is-cut{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.st-art.pt-art.has-shot{isolation:isolate;border-radius:13px 13px 0 0;
  background:radial-gradient(closest-side at 50% 56%,color-mix(in srgb,var(--pk-a,#e0402c) 38%,transparent),transparent),#111317}
.st-art .pack-face.is-cut,.sw-pack .pack-face.is-cut,.sw-half .pack-face.is-cut{position:absolute;display:flex;align-items:center;justify-content:center;width:auto;height:auto}
.st-art .pack-face.is-cut{inset:13% 12% 6%}
.sw-pack .pack-face.is-cut,.sw-half .pack-face.is-cut{inset:0}
.st-art .pack-shot.is-cut,.sw-pack .pack-shot.is-cut,.sw-half .pack-shot.is-cut{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;-webkit-mask-image:none;mask-image:none}
.hp-art .pack-face.is-cut{display:flex;align-items:center;justify-content:center;height:120px}
.hp-art .pack-shot.is-cut{width:auto;height:120px;max-width:90px;object-fit:contain;border-radius:0;box-shadow:none}
.sw-mini .pack-face.is-cut{display:block}
.sw-mini .pack-shot.is-cut{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none}

/* ---------- 18d. smaller screens ---------- */
@media (max-width:1000px){
  .sw-slide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:0 28px}
  .sw-title{font-size:clamp(28px,4.4vw,44px)}
}
@media (max-width:760px){
  .storefront main>.hit-reel{grid-template-columns:minmax(0,1fr);gap:6px;padding-top:8px;padding-bottom:8px}
  .hr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;max-width:none}
  .storefront main>.shop-window{margin-top:12px}
  .sw-slides{height:452px;border-radius:18px}
  .sw-slide{grid-template-columns:minmax(0,1fr);grid-template-rows:196px minmax(0,1fr);align-items:start;gap:6px;padding:14px 18px 46px}
  .sw-visual{grid-row:1}
  .sw-copy{grid-row:2;gap:9px}
  .sw-title{font-size:30px}
  .sw-line{font-size:13.5px;line-height:1.4}
  .storefront .sw-cta{width:100%;min-width:0;padding-top:14px;padding-bottom:14px}
  .sw-cta .cta-main{font-size:18px}
  .sw-arrow{display:none}
  .sw-stage{height:100%}
  .sw-odds{padding:12px 14px;gap:9px}
  .sw-fan .tcg-card{width:88px}
  .sw-deal{width:76px;margin-left:-22px}
  .shop-head{align-items:center}
  .sh-title h2{font-size:26px}
  .catalogue .fam-tab{padding:9px 12px 11px}
  .pack-grid.is-shelf{gap:12px 10px}
}

/* ---------- 18f. reduced motion: everything still, nothing lost ----------
   The reel is a strip to scroll; the window moves only when asked (arrows, dots, a swipe) and each slide shows
   its finished picture: the pack whole, the card face up, the odds bars drawn. */
@media (prefers-reduced-motion:reduce){
  .hr-track.is-moving{animation:none}
  .hr-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hr-pop{transition:none}
  .sw-slide,.sw-slide.is-on{transition:none}
  .shop-window .sw-slide *,.shop-window .sw-slide *::before,.shop-window .sw-slide *::after{animation:none!important}
  .sw-dots li.is-on .sw-dot i{animation:none;transform:scaleX(1)}
  .sw-pause{display:none}
  .sw-flip-in{transform:rotateY(180deg)}
  .is-reveal .sw-flip-in{transform:rotateY(180deg)}
  .is-reveal .sw-flip{opacity:1}
  .is-reveal .sw-half.is-l{transform:translateX(-30%) rotate(-8deg)}
  .is-reveal .sw-half.is-r{transform:translateX(30%) rotate(8deg)}
  .is-reveal .sw-rays{opacity:.6}
  .sw-in{opacity:1;transform:translate(var(--dx),-6%) rotate(var(--r)) scale(.9)}
  .st-art .pack-shot,.st-art::after{transition:none}
  .pack-tile.is-shelf:hover .pack-shot{transform:none}
  .pack-tile.is-shelf:hover .st-art::after{transform:translateX(-120%)}
}

/* ---------- 18e. the rewards page (item 1: off the home page, its own page in Settings) ----------
   The free box of the day on its own stage - it floats under a turning light and bursts when claimed - beside
   the shards; then the reward line and the tickets. Every box is the shop's pack object, lit and swept like the
   shelf's packs; a box that is yours floats on the line until it is opened. */
.storefront main>.rw-page{padding-top:26px;padding-bottom:44px}
.rw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.rw-head .kicker{margin:0 0 6px;color:var(--gold)}
.rw-head h1{font:700 clamp(32px,3.4vw,46px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.rw-page>.rw-note{margin:0 0 12px}
.rw-page .rewards-strip{margin:0}
.rw-top{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;margin-bottom:30px}
.rw-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px);
  padding:18px clamp(18px,3vw,36px);border-radius:20px;border:1px solid rgba(242,193,78,.3);
  background:radial-gradient(60% 120% at 16% 50%,rgba(226,180,67,.22),transparent 70%),linear-gradient(120deg,#151b33,#0c1122 70%)}
.rw-hero-art{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;height:250px}
.rw-hero-art>*{grid-area:1/1}
.rw-hero-box{position:relative;z-index:2;width:clamp(128px,12vw,162px);line-height:0;animation:sw-float 6s var(--ease-io) infinite}
.rw-hero-box .pack-object,.rw-hero-box .rw-art{width:100%;margin:0}
.rw-hero-art .pkr-sheen{opacity:1;animation:pkr-sweep 4.2s var(--ease-io) infinite}
.rw-hero-art .pack-gloss::after{opacity:1;animation:gloss-sweep 4.2s var(--ease-io) infinite}
.rw-hero-art.is-claimed .rw-hero-box{animation:none;filter:saturate(.55) brightness(.8)}
.rw-hero-art.is-claimed .pkr-sheen,.rw-hero-art.is-claimed .pack-gloss::after{animation:none;opacity:0}
.rw-rays{width:270px;aspect-ratio:1;border-radius:50%;opacity:.7;background:repeating-conic-gradient(from 0deg,rgba(255,233,168,.34) 0deg 5deg,transparent 5deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 15%,transparent 72%);mask-image:radial-gradient(closest-side,#000 15%,transparent 72%);animation:sw-spin 24s linear infinite}
.rw-hero-art.is-claimed .rw-rays{opacity:.14}
.rw-sparks{position:relative;z-index:3;width:100%;height:100%;pointer-events:none}
.rw-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff6d0;box-shadow:0 0 10px 3px rgba(255,233,168,.75);opacity:0}
.rw-sparks i:nth-child(1){left:18%;top:20%}.rw-sparks i:nth-child(2){left:78%;top:16%}.rw-sparks i:nth-child(3){left:12%;top:64%}
.rw-sparks i:nth-child(4){left:84%;top:60%}.rw-sparks i:nth-child(5){left:50%;top:6%}.rw-sparks i:nth-child(6){left:46%;top:90%}
/* the claim: the box squeezes, bursts out and settles; the light flares; sparks fly */
.rw-hero-art.is-popping .rw-hero-box{animation:rw-pop 1.5s var(--ease-spring)}
@keyframes rw-pop{0%{transform:scale(1)}18%{transform:scale(.86) rotate(-3deg)}44%{transform:scale(1.14) rotate(2deg)}100%{transform:scale(1)}}
.rw-hero-art.is-popping .rw-rays{animation:rw-flare 1.5s var(--ease-out)}
@keyframes rw-flare{0%{opacity:.55;transform:scale(.8)}40%{opacity:1;transform:scale(1.28)}100%{opacity:.14;transform:scale(1)}}
.rw-hero-art.is-popping .rw-sparks i{animation:rw-spark 1.3s ease-out backwards}
.rw-hero-art.is-popping .rw-sparks i:nth-child(2n){animation-delay:.12s}
.rw-hero-art.is-popping .rw-sparks i:nth-child(3n){animation-delay:.22s}
@keyframes rw-spark{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:translateY(-16px) scale(.4)}}
.rw-hero-copy{position:relative;z-index:2;display:grid;justify-items:start;gap:10px}
.rw-hero-copy .kicker{margin:0;color:var(--gold)}
.rw-hero-copy h2{font:700 clamp(28px,2.8vw,40px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.rw-hero-copy .rw-note{margin:0;max-width:440px}
.storefront .rw-hero .rw-daily{width:auto;min-width:min(300px,100%);margin-top:4px}
.rw-page .rw-shards{margin:0;padding:20px 22px;display:grid;align-content:start;gap:8px;border-radius:20px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.rw-page .rw-shards h2{font:700 15px/1.1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.rw-page .rw-shard-count{margin:0;font:700 26px/1.1 var(--display);color:var(--text)}
.rw-page .rw-shards .rw-note{margin:0}
.rw-page .rw-shard-meter{width:100%;margin:2px 0 6px}
/* O45-21: the box the shards buy - the biggest they cover, or a smaller one picked beside the button */
.rw-page .rw-shard-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rw-page .rw-shard-pick[hidden]{display:none}
.rw-page .rw-shard-pick select{height:40px}
.ship-panel .ship-from{margin:0 0 6px;font:600 13px/1.4 var(--sans);color:var(--text-2)}
.ship-panel .ship-from[hidden]{display:none}
.shipping-tier{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;margin:12px 0;align-items:start;cursor:pointer}
.shipping-tier span{grid-column:2;font-size:12px;line-height:1.5}
.rw-page #rewards-shard-claim{justify-self:start}
.rw-fine{margin:4px 0 0;font:500 12px/1.5 var(--sans);color:var(--text-3)}
.rw-block{margin:0 0 30px}
.rw-block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:12px}
.rw-block-head h2{font:700 22px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.rw-block-head .rw-note{margin:0;font-size:13px;color:var(--text-3)}
/* the reward line: six boxes on one rope, the ones you hold lit */
.rw-page .rw-line{position:relative;margin:0;padding:4px 0}
.rw-page .rw-line::before{content:'';position:absolute;z-index:0;left:7%;right:7%;top:88px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-2),rgba(242,193,78,.55),var(--line-2))}
.rw-page .rw-line-step,.rw-page .rw-ticket{position:relative;z-index:1;background:linear-gradient(180deg,#141b33,var(--ink-1) 70%);transition:transform var(--t-2) var(--ease-out),border-color var(--t-2),box-shadow var(--t-2);
  animation:tile-in .55s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
.rw-page .rw-line-step.is-old,.rw-page .rw-ticket.is-old{animation:none}
/* Veles' reward-box art: the whole picture, a light passing across it like the shelf's tiles */
.rw-box.is-shot{position:relative;width:100%;overflow:hidden;border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.rw-shot{display:block;line-height:0}
.rw-shot .pack-shot{display:block;width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover}
.rw-box.is-shot::after,.rw-hero-box.is-shot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-120%)}
.rw-line-step:hover .rw-box.is-shot::after,.rw-ticket:hover .rw-box.is-shot::after{transform:translateX(120%);transition:transform .75s var(--ease-io)}
.rw-line-step:hover .rw-box.is-shot,.rw-ticket:hover .rw-box.is-shot{transform:translateY(-4px)}
.rw-hero-box.is-shot{width:clamp(220px,22vw,320px);overflow:hidden;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(242,193,78,.35)}
.rw-hero-box.is-shot::after{animation:rw-sheen 4.2s var(--ease-io) infinite}
@keyframes rw-sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (min-width:621px){.rw-hero:has(.rw-hero-box.is-shot){grid-template-columns:minmax(220px,340px) minmax(0,1fr)}}
.rw-page .rw-line:has(.rw-box.is-shot)::before{top:66px}
.rw-page .rw-line-step:hover,.rw-page .rw-ticket:hover{transform:translateY(-4px);border-color:rgba(242,193,78,.5);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.rw-box{display:block;width:92px;max-width:100%;margin:0 auto 8px;line-height:0;transition:transform .45s var(--ease-out)}
.rw-box .rw-art{display:block;width:100%;margin:0}
.rw-line-step:hover .rw-box,.rw-ticket:hover .rw-box{transform:translateY(-4px) rotate(-3deg)}
.rw-line-step:hover .pkr-sheen,.rw-ticket:hover .pkr-sheen{opacity:1;animation:pkr-sweep 4.2s var(--ease-io) infinite}
.rw-line-step:hover .pack-gloss::after,.rw-ticket:hover .pack-gloss::after{opacity:1;animation:gloss-sweep 4.2s var(--ease-io) infinite}
.rw-line-step[data-owned="true"] .rw-box{animation:sw-float 5s var(--ease-io) infinite}
.rw-line-step[data-owned="true"]::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(232,184,74,.7),0 0 26px rgba(232,184,74,.35);animation:new-glow 2.6s ease-in-out infinite}
.rw-line-step .rw-open{justify-self:center;margin-top:4px}
.rw-page .rw-ticket{text-align:center;justify-items:center}
.rw-page .rw-ticket .rw-open{justify-self:center}
.rw-page .rw-list:not(.rw-line){grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media (max-width:1000px){
  .rw-top{grid-template-columns:minmax(0,1fr)}
  .rw-page .rw-line{grid-template-columns:repeat(6,150px);overflow-x:auto;scroll-snap-type:x proximity}
  .rw-page .rw-line::before{display:none}
}
@media (max-width:620px){
  .rw-hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:14px 16px 20px}
  .rw-hero-art{height:200px}
  .rw-hero-copy{justify-items:center}
  .storefront .rw-hero .rw-daily{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .rw-hero-box,.rw-rays,.rw-hero-art .pkr-sheen,.rw-hero-art .pack-gloss::after,.rw-line-step[data-owned="true"] .rw-box,.rw-line-step[data-owned="true"]::after,
  .rw-page .rw-line-step,.rw-page .rw-ticket,.rw-hero-art.is-popping .rw-hero-box,.rw-hero-art.is-popping .rw-rays,.rw-hero-art.is-popping .rw-sparks i{animation:none!important}
  .rw-box,.rw-page .rw-line-step,.rw-page .rw-ticket{transition:none}
  .rw-hero-box.is-shot::after{animation:none}
}
/* ---------- O18E items 2 and 4: what's inside a box - its picture large, its pulls from its own pool ---------- */
.inside{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:0;border:1px solid rgba(242,193,78,.32);border-radius:20px;
  background:linear-gradient(180deg,#141b30,#0c1120);color:var(--text);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.inside::backdrop{background:rgba(4,6,14,.72)}
.in-panel{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:calc(100vh - 42px)}
.in-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 12px;border-bottom:1px solid var(--line)}
.in-head h2{margin:2px 0 0;font:700 clamp(24px,3vw,34px)/1.02 var(--display);letter-spacing:.02em;text-transform:uppercase}
.in-sub{margin:6px 0 0;font:500 13px/1.35 var(--sans);color:var(--text-2)}
.in-close{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);font:600 13px/1 var(--sans);cursor:pointer}
.in-close:hover,.in-close:focus-visible{border-color:var(--gold)}
.in-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;padding:18px 24px 24px;overflow:auto}
.in-pic{margin:0;display:grid;gap:8px;align-content:start}
.in-lens{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent),#0a0f1c;
  aspect-ratio:1;cursor:zoom-in;isolation:isolate}
.in-lens > img,.in-lens > .pack-object{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .25s var(--ease-out);transform-origin:var(--zx,50%) var(--zy,50%)}
.in-lens > img{position:absolute;inset:0;margin:auto}
.in-lens > .pack-object{width:62%}
.in-lens.is-zoomed{cursor:zoom-out}
.in-lens.is-zoomed > img,.in-lens.is-zoomed > .pack-object{transform:scale(2.2)}
.in-pic figcaption{font:500 11.5px/1.3 var(--sans);color:var(--text-3);text-align:center}
.in-pulls h3{margin:0 0 8px;font:700 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.in-tiers{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.in-tiers li{display:flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font:600 11px/1.2 var(--sans);color:var(--text-2)}
.in-tiers li b{font:700 12px/1 var(--mono);color:var(--text)}
.in-tiers li[data-tier="chase"]{border-color:color-mix(in srgb,var(--chase,#f2c14e) 60%,transparent)}
.in-tiers li[data-tier="hit"]{border-color:color-mix(in srgb,var(--hit,#a78bfa) 60%,transparent)}
.in-hits{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.in-hit{display:grid;gap:3px;align-content:start;min-width:0}
.in-art{display:block;line-height:0}
.in-art .tcg-card{display:block;width:100%}
.in-name{font:700 12px/1.2 var(--sans);color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.in-value{font:700 13px/1.1 var(--display);color:var(--gold)}
.in-odds{font:500 10.5px/1.3 var(--sans);color:var(--text-3)}
.in-odds b{color:var(--text-2);font-weight:700}
.in-wait{grid-column:1/-1;padding:16px 0;color:var(--text-3);font:500 13px/1.4 var(--sans)}
.in-fine{margin:14px 0 0;font:500 11.5px/1.45 var(--sans);color:var(--text-3)}
.in-act{margin-top:14px}
@media (max-width:760px){
  .in-body{grid-template-columns:minmax(0,1fr);padding:14px 16px 18px}
  .in-lens{aspect-ratio:4/3}
  .in-head{padding:16px 16px 10px}
  .in-hits{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){.in-lens > img,.in-lens > .pack-object{transition:none}}
/* item 2: a shelf tile's hits, beside it while it is pointed at (a tooltip: it never takes the pointer) */
.peek{position:absolute;left:0;top:0;z-index:40;width:min(372px,calc(100vw - 16px));display:grid;gap:10px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(22,30,52,.97),rgba(12,17,32,.97));border:1px solid rgba(242,193,78,.36);box-shadow:var(--shadow-pop);
  transform:translate(var(--x,0),var(--y,0));pointer-events:none;opacity:0;transition:opacity .16s ease}
.peek.is-on{opacity:1}
.pe-head{display:grid;gap:2px}
.pe-k{margin:0;font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pe-n{font:700 20px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase}
.peek .in-tiers{margin:0}
.pe-hits{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pe-hits .in-name{font-size:10.5px}
.pe-hits .in-value{font-size:11.5px}
.pe-hits .in-odds{font-size:9.5px}
.pe-more{margin:0;font:500 11px/1.35 var(--sans);color:var(--text-3)}
@media (hover:none){.peek{display:none}}
/* the pack page: the whole pool, from the pack itself */
.pack-inside{display:flex;margin:6px auto 12px}

/* the rewards page: a chest's own "what's inside" beside its Open */
.rw-peek{margin-top:10px}
.rw-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rw-inspect{padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text-2);font:600 11.5px/1.1 var(--sans);cursor:pointer}
.rw-inspect:hover,.rw-inspect:focus-visible{border-color:var(--gold);color:var(--text)}

/* O18E item 9: no letters cut off. A box that clips its text (a clamp, an ellipsis) has room above the letters on
   every font - the shop runs on phones without Bahnschrift, whose fallbacks sit taller in a line of .95 to 1.1 - and a
   run board card's value fits its card (it ran out of it: "1,031 berri"). */
.sw-title{padding-top:.1em;margin-top:-.1em}
.pack-tile.is-shelf .pt-title{line-height:1.22;margin-block:-.08em}
.pk-row-main b,.fd-row-name b,.mbb-price b{line-height:1.25}
.t-back small{line-height:1.3}
.t-board .rb-grid li{container-type:inline-size}
.t-board .rb-grid li .rb-val{font-size:clamp(8.5px,12cqi,13px);white-space:nowrap;letter-spacing:0}

/* O18E item 5: the free box's reset - midnight, Melbourne time - counted down under its button */
.rw-reset{margin:10px 0 0;font:500 12.5px/1.4 var(--sans);color:var(--text-3)}
.rw-reset b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- O18E item 10: the sky (the owner, 11 Oct night: "orange is the choice, sky in blue/purple/green") ----------
   The one action colour stays the orange (--signal, --signal-2: Open, Buy, the shop window's call). The page behind the
   shop moves off the near-black navy to a twilight sky - deep blue overhead, violet through the middle, sea-green at
   the horizon, with soft glows - painted once on a fixed layer behind the page, so it never scrolls or repaints. It is
   deep enough that the parchment text keeps its contrast (body text 8:1 and more, muted words 4.5:1 and more on it);
   the panels are dark glass over it. The back office keeps its dark working surface: admin.html does not load this
   sheet. */
body.storefront{
  --sky-1:#1b3a8f;--sky-2:#3a2f9a;--sky-3:#14606b;
  --ink-0:#0d1430;
  --ink-1:rgba(14,20,46,.86);
  --text-3:#b5afa0;
  background:var(--sky-2)}
body.storefront::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vw 52vh at 8% -6%,rgba(104,196,255,.30),transparent 64%),
    radial-gradient(60vw 56vh at 96% 4%,rgba(196,118,255,.30),transparent 66%),
    radial-gradient(90vw 52vh at 50% 108%,rgba(62,214,160,.32),transparent 68%),
    linear-gradient(178deg,var(--sky-1) 0%,#26338f 30%,var(--sky-2) 55%,#22408a 78%,var(--sky-3) 100%)}
.storefront .topbar{background:rgba(12,18,48,.74);border-bottom-color:rgba(160,180,255,.16)}
.storefront main>.hit-reel{background:linear-gradient(180deg,rgba(12,18,46,.78),rgba(12,18,46,.5));border-bottom-color:rgba(160,180,255,.14)}
.storefront main>.stage{background:radial-gradient(700px 420px at 50% 46%,rgba(255,106,43,.16),transparent 70%),radial-gradient(900px 600px at 88% 10%,rgba(182,108,255,.14),transparent 65%),radial-gradient(800px 500px at 8% 80%,rgba(53,208,255,.10),transparent 65%)}
.storefront footer{border-top-color:rgba(160,180,255,.16);background:rgba(10,16,40,.35)}
.st-art.pt-art,.st-art.pt-art.has-shot{background:radial-gradient(closest-side at 50% 56%,color-mix(in srgb,var(--pk-a,#e0402c) 36%,transparent),transparent),rgba(8,12,32,.62)}
.sw-slides{background:rgba(12,18,44,.8)}

/* ============================== O18F item 3: the front-end audit (12 Oct 2026) ==============================
   The owner: the shop must be seamless, and its words are hard to read in places. One set of colours for words on
   the sky, one type floor, one look for a control that is off, and the places that looked unfinished. The list of
   what changed and what was left is in opus_o18f_report.md. Storefront only: the back office keeps its own sheet. */

/* ---------- words on the sky ----------
   The O18E sky is brighter than the navy it replaced, so the secondary and muted words move up: #e2dccf and #d6d0c2
   read 4.5:1 or better on 99.9% and 98.7% of the sky's own pixels, where a word sits straight on the sky with no
   panel under it (var/o18f/contrast_pick.py; the old #c8c1b0 and #b5afa0 managed 91% and 60%). Every section kicker
   is the one gold (96%; the khaki #b9ab8a managed 43%). */
body.storefront{--text-2:#e2dccf;--text-3:#d6d0c2}
.storefront .kicker{color:var(--gold)}
.storefront .demo-note>summary{color:var(--text-2)}

/* ---------- one type floor ----------
   The shop's smallest size (--fs-xs) is 12px; nothing a customer reads is under 11px, and only capitals with wide
   tracking (labels, chips) sit at 11px. The shelf tile keeps its size - its figures are a size up, not longer. */
body.storefront{--fs-xs:12px}
body.storefront .pack-tile.is-shelf .pt-left,body.storefront .pack-tile.is-shelf .pt-odds,body.storefront .pt-stock{font-size:12px}
body.storefront .pack-tile.is-shelf .pt-buyback{padding:2px 8px;font-size:11px}
body.storefront .st-fam{padding:4px 8px;font-size:10px;letter-spacing:.14em}
body.storefront .pt-fam,body.storefront .pack-tile.is-shelf .pt-fam{font-size:11px;letter-spacing:.16em}
body.storefront .pool-card .pc-meta,body.storefront .art-blurb,body.storefront .bx-card-meta,body.storefront .rung .one-in{font-size:12px}
body.storefront .rc-meta,body.storefront .hr-head span,body.storefront .hr-name{font-size:11.5px}
body.storefront .hr-x,body.storefront .doc-tag{font-size:11px}
body.storefront .vault-headline .vh-k,body.storefront .bulk-label,body.storefront .pool-sort,body.storefront .spec-strip span,
body.storefront .data-table th,body.storefront .ov-more,body.storefront .ah-go,body.storefront .demo-note>summary{font-size:11px;letter-spacing:.14em}
body.storefront .spec-strip span,body.storefront .data-table th{color:var(--text-2)}
body.storefront footer{font-size:11px;letter-spacing:.14em;color:var(--text-2)}

/* ---------- one spelling for the tiers ----------
   The pool's tier tabs said chase, hit, plus, base in small letters; the vault's filters, the "What's inside" chips
   and the reveal say Chase, Hit, Plus, Base. The tabs sit on dark glass so each tier's colour keeps its contrast. */
body.storefront .pool-tab{background:rgba(8,11,28,.9);text-transform:capitalize} /* O45-25: 4.5:1 for every tier colour */
body.storefront .pool-tab small{font-size:11px;opacity:.9}

/* ---------- nothing cut short, nothing showing through ----------
   The odds check's sentence ended "...match the" with an ellipsis: it has two lines now (and says its signal once,
   app.js). The top bar and the account's tab strip are solid enough that the page scrolling under them no longer
   shows through their words. On a wide screen the account's tabs wrap rather than hide Settings off the strip's
   end; on a phone the strip still scrolls sideways, as phone tab strips do. */
/* O46 (U46-15): two lines still cut a long first sentence mid-word on a phone ("... each at its own published odd..."),
   where no tooltip can show the rest. It is one sentence: it wraps whole. */
body.storefront .odds-check #odds-check-note{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.storefront .topbar{background:rgba(12,18,48,.94)}
.storefront .portal-nav{background:rgba(12,18,48,.94)}
@media (min-width:761px){
  .storefront .portal-nav{flex-wrap:wrap;overflow:visible}
  .storefront .portal-nav a{gap:7px;padding:10px 12px}
}
/* a short page's footer sits at the foot of the screen, not halfway up it */
.storefront main{min-height:calc(100vh - 150px)}

/* ---------- one set of buttons ----------
   A link drawn as the big button never wears a link's underline (the 404's "Back to the packs" did). A control that
   is off reads as off, but its words stay readable (it was at 40% on the sky). On the reward line a box's state is a
   label, not a pill that looks pressable: only "What's inside" and "Open" are buttons, and "What's inside" is big
   enough for a thumb. The vault's two views are full-size chips. */
a.open-button{text-decoration:none}
body.storefront button.ghost:disabled,body.storefront #quote-button:disabled{opacity:.62}
body.storefront .rw-state{padding:2px 0;border:0;background:none;font-size:12px;letter-spacing:.02em;color:var(--text-2)}
body.storefront .rw-line-step[data-owned="true"] .rw-state{background:none;color:var(--gold)}
body.storefront .rw-inspect{min-height:32px;padding:7px 14px;font-size:12.5px}
body.storefront .vault-views .chip-btn{min-height:36px;padding:8px 16px;font-size:13px}

/* ---------- the run board ----------
   "Ship them to me" and "See them in your vault" sat under the pinned sell bar and peeked out above it. Keeping now
   leads the board (theatre.html: the kept line is above the cards, as the owner's run-17 ruling has it), so the bar
   pins over the cards' foot only. On a phone the bar is one row of picks that scrolls sideways and a slim button,
   so it covers a fifth of the screen, not a quarter. */
.t-board .rb-keep{margin-top:0}
@media (max-width:620px){
  .t-board .rb-sellbar .rb-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .t-board .rb-sellbar .rb-quick::-webkit-scrollbar{display:none}
  .t-board .rb-sellbar .rb-quick .chip-btn{flex:none}
  .t-board #rb-sell.sell-btn{padding:9px 14px}
  .t-board #rb-sell.sell-btn .cta-sub{display:none}
}

/* ---------- a thumb's worth ----------
   On a phone the shop window's dots and pause, the trail of links over a pack and the account's "All openings" were
   6 to 26px tall. Their hit areas grow; what they look like does not (a dot is still a 6px bar). */
@media (max-width:760px){
  .storefront .sw-dot{height:26px;border-top:10px solid transparent;border-bottom:10px solid transparent;background-clip:padding-box}
  .storefront .sw-pause{width:34px;height:34px}
  .storefront main>.crumbs a{padding:9px 0}
  body.storefront .ov-more{padding:8px 0}
  .storefront main{min-height:calc(100vh - 190px)}
}
/* the operator's Foundry builder (in the shop's shell): a card's code and rarity line was 10px */
body.storefront .fd-meta{font-size:11.5px}

/* ---------- the same, second look ----------
   A shelf tile's price and stock stay whole - "1,000 berries" and "2,993 left" never break inside - and the stock
   count is a figure, at 11px like the other small figures. */
body.storefront .pack-tile.is-shelf .pt-foot{flex-wrap:wrap;row-gap:2px}
body.storefront .pack-tile.is-shelf .pt-price,body.storefront .pack-tile.is-shelf .pt-left{white-space:nowrap}
body.storefront .pack-tile.is-shelf .pt-left{margin-left:auto;font-size:11px}
body.storefront .pt-odds{font-size:12px}
/* a tier's colour as words on the sky: the same hue lifted toward white, so slate, sea blue and violet read 4.5:1 or
   better there; on a tile the family chip's words are lifted the same way on their dark chip */
body.storefront .pool-card .pc-left,body.storefront .rc-meta{color:color-mix(in srgb,var(--tier-c) 60%,#fff)}
body.storefront .st-fam{color:color-mix(in srgb,var(--pk-c,var(--text-2)) 55%,#fff)}
/* one kind of panel on the sky: the account's cards, the level panel, the shards and the chips over a section were
   clear glass (made for the old navy), so their words sat on the sky; they are dark glass like every other panel */
body.storefront .ov-card,body.storefront .ov-grid .level-panel,body.storefront .rw-page .rw-shards{background:var(--ink-1)}
body.storefront .head-chips li{background:rgba(10,14,36,.55)}
/* a kicker over a bright glow keeps its edge */
.storefront .kicker{text-shadow:0 1px 2px rgba(5,8,24,.45)}
/* the box builder's "Not yet - 4 things to fix" was printed in the success green; a warning wears the warning colour */
.bx-status[data-state="warn"] b{color:var(--warn)}
/* on a phone the bar has no blur (shop.css section 6), so it is all but solid there, as section 6 meant it to be (the
   O18E sky's .74 had overridden that) */
@media (max-width:760px){.storefront .topbar,.storefront .portal-nav{background:rgba(12,18,48,.985)}}
/* O45-09: a card's value today, beneath the value its revision was published with */
#outcome-table td.berry-value{display:table-cell;text-align:right} /* .berry-value made the cell inline-block, off its column */
.value-today{display:block;font:500 12px/1.3 var(--sans);color:var(--text-3);white-space:nowrap}

/* ---------- O46 (U46-16, the owner's #420): big pulls, small ----------
   A slim strip of fire hits: the card, its value, its name and the pack it came from - named in the tile itself,
   because a phone has no hover for the pop. One line of heading on a phone instead of two. */
.storefront main>.hit-reel{padding-top:6px;padding-bottom:6px}
.hr-hit{grid-template-columns:30px auto;gap:8px;padding:3px 10px 3px 4px}
.hr-card .tcg-card{width:30px}
.hr-value{font-size:13.5px}
.hr-x{max-width:128px;color:var(--gold);overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .storefront main>.hit-reel{gap:4px}
  .hr-head{flex-wrap:nowrap;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
  .hr-head b{font-size:11px;letter-spacing:.14em}
  body.storefront .hr-head span{font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
}

/* O46 (U46-23): the chase wall's "pack - odds" line was cut with an ellipsis on a long pack name ("Emperor's Hoard -
   0.1...") - a number cut mid-way reads as a different number. It wraps: the odds always show whole. */
body.storefront .rc-meta{white-space:normal;overflow:visible}

/* O46 (U46-24): the three "how it works" cards sat at different heights when all were closed (the third's line is
   shorter). Closed, they share a height; once one is opened they go back to their own, so it never stretches the
   other two. */
.how-strip:not(:has(.how-card[open])) .how-card{align-self:stretch}

/* O46 (U46-18): the account's tables and card list sat straight on the sky, and where it turns teal their figures fell
   under 4.5:1 ("+20k" and "Top-up" 2.6:1, a card's value 2.9-3.4:1 at 390 px). They sit on a panel, like the account's
   other cards. */
body.storefront .portal-panel .table-wrap{background:rgba(8,11,28,.8);border:1px solid var(--line);border-radius:14px}
body.storefront .portal-panel .item-list.binder{background:rgba(8,11,28,.66);border:1px solid var(--line);border-radius:14px;padding:12px}