/* The marketplace: a street of stores (issue #903). The page is dressed for the store that is open
   (`main[data-store]`, and `data-country` for a country's shop): Bouzoppmania is a chain store in red, yellow
   and blue; the Collectors' Corner a cork board of paper notes; a country's shop a market stall under an
   awning in the country's colour, its packs in crates; the Clubhouse velvet, gold and a rope. One set of
   tiles (`.market-booster`) serves all four, and the store's variables and overrides change what they are. */
.market-page { --ink: #25252d; --store-bg: #fff; --store-ink: var(--ink); --store-border: var(--ink); --store-shadow: var(--ink); --store-accent: #ffe76b; --store-font: inherit; --sign-bg: transparent; --sign-ink: var(--ink); --keeper-bg: #fff; max-width: 1480px; margin: 0 auto 70px; padding: 24px; }
.market-page [hidden] { display: none !important; }

/* ====== The head of the street: the title and the wallet ====== */
.market-hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin: 0 0 22px; }
.market-hero-copy { max-width: 620px; }
.market-kicker, .market-section-heading span, .store-aisle-head span { display: inline-block; padding: 5px 10px; background: var(--kicker-bg, #25252d); color: var(--kicker-ink, #fff); font-size: .72rem; font-weight: 950; letter-spacing: .12em; transform: rotate(-1deg); }
.market-hero h1 { margin: 12px 0 6px; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .9; }
.market-hero p { margin: 0; font-weight: 700; }
.market-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 18px; border: 3px solid var(--ink-border); border-radius: 12px; background: var(--white); box-shadow: 6px 6px 0 var(--ink-shadow); }
.market-wallet div { display: grid; }
.market-wallet strong { font-size: 1.6rem; line-height: 1; }
.market-wallet span { font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.market-wallet [data-protected-credits] { opacity: .6; }
.market-credit-cta { margin-left: 3px; }
.market-credit-cta button { padding: 7px 10px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font-size: .68rem; font-weight: 900; white-space: nowrap; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.market-credit-cta button:hover { box-shadow: 1px 1px 0 var(--ink-shadow); transform: translate(2px, 2px); }
.market-credit-cta button:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }

/* ====== The street: one storefront per store, each under its own awning ====== */
/* The street's row of storefronts is for the folded rail, where the menu's rows are out of reach: with the
   sidebar open, and on a phone, whose menu lists the stores under Marketplace (#922), the page is the store alone. */
.market-street { margin: 0 -24px 26px; padding: 0 24px; }
@media (min-width: 1000px) { html:not([data-nav="rail"]) .market-street { display: none; } }
@media (max-width: 999px) { .market-street { display: none; } }
/* Every storefront is in view at once on a wide screen, the street wrapping to a second row when an admin has
   all six countries' shops; on a phone it is one row that scrolls sideways. */
.market-tabs { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 4px 16px; }
.market-front { --front-awning: repeating-linear-gradient(90deg, #25252d 0 10px, #fff 10px 20px); --front-bg: #fff; --front-ink: #25252d; position: relative; flex: none; display: grid; gap: 2px; min-width: 136px; max-width: 220px; padding: 24px 14px 12px; border: 3px solid var(--ink-border); border-radius: 6px 6px 12px 12px; background: var(--front-bg); box-shadow: 4px 4px 0 var(--ink-shadow); color: var(--front-ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; transition: transform .14s ease, box-shadow .14s ease; }
.market-front:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 var(--ink-shadow); }
.market-front[aria-selected="true"] { transform: translateY(-6px); box-shadow: 6px 10px 0 var(--ink-shadow); }
.market-front:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 4px; }
.market-front-awning { position: absolute; inset: -3px -3px auto; height: 13px; border: 3px solid var(--ink-border); border-radius: 6px 6px 0 0; background: var(--front-awning); }
.market-front-awning::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: radial-gradient(circle at 5px -2px, var(--front-fringe, #25252d) 0 5px, transparent 5.5px) 0 0 / 10px 7px repeat-x; }
.market-front-name { font-family: var(--front-font, inherit); font-size: 1.05rem; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.market-front-small { font-size: .68rem; font-weight: 800; letter-spacing: .04em; opacity: .75; text-transform: uppercase; }
.market-front-count { position: absolute; top: -12px; right: -10px; min-width: 22px; padding: 2px 6px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); color: var(--text-dark); font-size: .7rem; font-weight: 950; text-align: center; }
.market-front .tab-notification-badge { position: absolute; top: -9px; right: -7px; }
.market-front .market-tab-count, .market-front .market-tab-timer { position: absolute; top: -12px; right: -10px; padding: 2px 7px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); color: var(--text-dark); font-size: .68rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.market-country-fronts { display: contents; }
/* The street (#984): every place the visitor may walk into, as a storefront with a word on what is behind it. */
.market-landing-title { margin: 0 0 18px; font-size: 1.4rem; font-weight: 900; }
.market-landing-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 26px 20px; margin: 0; padding: 14px 0 0; list-style: none; }
.market-front.market-landing-shop { min-width: 0; max-width: none; height: 100%; align-content: start; gap: 8px; padding: 28px 18px 18px; text-decoration: none; }
.market-landing-shop .market-front-name { font-size: 1.25rem; }
.market-landing-text { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.market-landing-shop[data-front="general"] .market-landing-text { color: #25252d; }
/* The window of each door (#994): a few of the packs on sale inside, fanned in the doorway, the middle one forward;
   the card market's shows a few of the cards on it. The street's packs stand still: a lively pack on every door
   would be a street of them. The window sits under the awning, over the name, so a door reads as a shop window. */
.market-landing-shop .market-landing-window { order: -1; display: flex; justify-content: center; align-items: flex-end; min-height: 128px; margin: 0 0 6px; padding: 4px 6px 0; pointer-events: none; }
.market-landing-window > * { --pack-tilt: 0deg; --lift: 0px; flex: none; translate: 0 var(--lift); transition: translate .18s cubic-bezier(.2,.8,.2,1); }
.market-landing-window .booster-pack { --pack-width: 76px; margin: 0 -11px; }
.market-landing-window > :first-child:not(:last-child) { --pack-tilt: -9deg; --lift: 6px; }
.market-landing-window > :nth-child(2) { --lift: -4px; z-index: 1; }
.market-landing-window > :nth-child(3) { --pack-tilt: 9deg; --lift: 6px; }
.market-landing-shop:hover .market-landing-window > * { --lift: -10px; }
.market-landing-card { width: 72px; margin: 0 -9px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); transform: rotate(var(--pack-tilt)); }
.market-landing-shop[data-front="shared"] .market-landing-window { filter: drop-shadow(0 0 10px rgba(201, 162, 74, .45)); }
.market-page[data-store="street"] .market-street { display: none; }
/* Each storefront wears its store's colours, so the street reads as different shops before any is entered. */
.market-front[data-front="general"] { --front-awning: repeating-linear-gradient(90deg, #e4002b 0 12px, #ffe600 12px 24px); --front-font: 'Bungee', 'Sora', sans-serif; --front-ink: #e4002b; }
.market-front[data-front="general"] .market-front-small { color: #0b2cff; opacity: 1; }
.market-front[data-front="community"] { --front-awning: repeating-linear-gradient(90deg, #b86b3a 0 12px, #f6d9a8 12px 24px); --front-bg: #cf9b5e; --front-ink: #3a2210; --front-font: 'Permanent Marker', 'Sora', sans-serif; }
.market-front[data-front="country"] { --front-awning: repeating-linear-gradient(90deg, var(--country, #36496c) 0 12px, #fff 12px 24px); --front-bg: #fbf5e6; }
.market-front[data-front="country"] .market-front-name { color: var(--country, #36496c); }
.market-front[data-front="shared"] { --front-awning: repeating-linear-gradient(135deg, #c9a24a 0 10px, #8a1b2e 10px 20px); --front-bg: #141221; --front-ink: #f3e7c6; --front-font: 'Special Elite', 'Sora', serif; }
.market-front[data-front="cards"] { --front-awning: repeating-linear-gradient(90deg, #315bcf 0 12px, #e8f5ff 12px 24px); --front-bg: #e8f5ff; }
.market-front[data-front="auction"] { --front-awning: repeating-linear-gradient(90deg, #8151c9 0 12px, #fff0f6 12px 24px); --front-bg: #fff0f6; }
.market-front[data-front="black"] { --front-awning: repeating-linear-gradient(90deg, #16151b 0 12px, #2a2833 12px 24px); --front-bg: #16151b; --front-ink: #b9f5c8; --front-font: ui-monospace, 'Cascadia Mono', Consolas, monospace; box-shadow: 4px 4px 0 #6ce08c; }
.market-front[data-front="black"][aria-selected="true"] { box-shadow: 6px 10px 0 #6ce08c; }
.market-front[data-front="black"] .market-front-name { text-transform: lowercase; letter-spacing: .04em; }
.market-front[data-front="wallet"] { --front-awning: repeating-linear-gradient(90deg, #625c6d 0 12px, #f4f1ea 12px 24px); --front-bg: #f4f1ea; }
/* The countries' colours, the ones their money wears (wallet.css). */
.market-page[data-country="mongolistan"], .market-front[data-country="mongolistan"] { --country: #8a2a2a; --country-soft: #f3dcd2; }
.market-page[data-country="pedalistan"], .market-front[data-country="pedalistan"] { --country: #23634a; --country-soft: #d7ebdd; }
.market-page[data-country="tagoustan"], .market-front[data-country="tagoustan"] { --country: #1f5f74; --country-soft: #d5e7ed; }
.market-page[data-country="andasmas"], .market-front[data-country="andasmas"] { --country: #3b3594; --country-soft: #e0def4; }
.market-page[data-country="boulemia"], .market-front[data-country="boulemia"] { --country: #8a4b1f; --country-soft: #f0dfcc; }
.market-page[data-country="merguez"], .market-front[data-country="merguez"] { --country: #b9461a; --country-soft: #fde0cf; }

/* ====== The floor: the open room, and the cart beside it ====== */
.market-floor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; padding: 22px; border-radius: 24px; background: var(--floor-bg, transparent); transition: background .25s ease; }
.market-rooms { min-width: 0; }
@media (min-width: 1100px) {
    .market-floor { grid-template-columns: minmax(0, 1fr) 340px; }
    .market-side { order: 2; position: sticky; top: calc(var(--shell-pad-top) + 16px); display: grid; gap: 16px; }
}

/* ====== The room: sign, aisles, tools and shelf ====== */
.store { position: relative; border: 3px solid var(--store-border); border-radius: 18px; background: var(--store-bg); color: var(--store-ink); box-shadow: 8px 8px 0 var(--store-shadow); overflow: hidden; }
.store-sign { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 26px 28px 22px; border-bottom: 3px solid var(--store-border); background: var(--sign-bg); color: var(--sign-ink); }
.store-sign-board { min-width: 0; }
.store-sign-kicker { display: inline-block; margin-bottom: 8px; font-size: .68rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.store-sign-name { margin: 0; font-family: var(--store-font); font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 950; line-height: .95; letter-spacing: -.01em; overflow-wrap: anywhere; }
.store-sign-tagline { margin: 8px 0 0; font-size: .95rem; font-weight: 700; font-style: italic; }
.store-delivery { margin: 10px 0 0; font-size: .82rem; font-weight: 800; }
.store-delivery b { padding: 2px 7px; border: 2px solid currentColor; border-radius: 6px; font-variant-numeric: tabular-nums; }
/* The keeper, behind his counter: his picture and name as anyone's, and what he says today in a bubble. */
.store-keeper { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; width: min(100%, 420px); padding: 14px 16px; border: 3px solid var(--store-border); border-radius: 14px; background: var(--keeper-bg); color: var(--ink); }
.store-keeper .collector { min-width: 0; }
.store-keeper-line { grid-column: 1 / -1; position: relative; margin: 0; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; line-height: 1.4; }
.store-keeper-line::before { content: ''; position: absolute; top: -9px; left: 18px; width: 12px; height: 12px; border: 2px solid var(--ink); border-right: 0; border-bottom: 0; background: #fff; transform: rotate(45deg); }
.store-keeper-line q { quotes: '“' '”'; }
.store-keeper-line.is-alone { width: min(100%, 420px); }
.store-keeper-line.is-alone::before { display: none; }
.store-aisles { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 28px 0; }
.store-aisles button { position: relative; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 900; cursor: pointer; }
.store-aisles [aria-selected="true"] { background: var(--store-accent); box-shadow: 3px 3px 0 var(--ink); }
.store-aisles button:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.store-aisles .tab-notification-badge { position: absolute; top: -8px; right: -8px; }
.store-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 28px 0; }
.store-tools input, .store-tools select { padding: 9px 12px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; }
.store-tools input { flex: 1 1 240px; min-width: 0; }
.store-tools :focus-visible { outline: 3px solid #ff5d8f; outline-offset: 2px; }
.store-shelf { display: grid; gap: 34px; padding: 24px 28px 30px; background: var(--shelf-bg, transparent); }
.store-aisle { padding: 22px 28px 30px; color: var(--ink); }
.store-aisle-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.store-aisle-head h3 { margin: 8px 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.store-aisle-head a { color: var(--ink); font-weight: 900; }

/* ====== The tiles: one pack, its copy and its button, in whatever the store makes of them ====== */
.booster-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 26px; }
.market-booster { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 22px 22px 26px; border: 3px solid var(--tile-border, var(--ink)); border-radius: 15px; background: var(--tile-bg, #fff); color: var(--ink); box-shadow: 7px 7px 0 var(--tile-shadow, var(--ink)); }
.market-booster[id] { scroll-margin-top: calc(var(--shell-pad-top) + 24px); }
.market-booster .booster-pack { --pack-width: 124px; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.market-booster:not(.is-spotlit):hover .booster-pack { transform: rotate(calc(var(--pack-tilt) * -1)) translateY(-6px) scale(1.04); }
.market-booster .market-offer-copy { min-width: 0; }
.market-offer-copy h3 { margin: 0 0 8px; font-size: 1.35rem; overflow-wrap: anywhere; }
.market-offer-copy p { font-size: .82rem; line-height: 1.4; }
.market-offer-copy a { color: inherit; font-weight: 900; }
/* The name is a button, but reads as the heading it sits in: the site's button look is taken off it, and it stays
   static so the overlay it casts covers the tile and not itself. */
.market-offer-copy h3 .market-set-link, .market-offer-copy h3 .market-set-link:hover, .market-offer-copy h3 .market-set-link:active { position: static; display: inline; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; text-decoration: none; transform: none; transition: none; cursor: pointer; }
.market-set-link::after { content: ''; position: absolute; inset: 0; border-radius: 12px; cursor: pointer; }
.market-set-link:focus-visible { outline: none; }
.market-set-link:focus-visible::after { outline: 3px solid #ff5d8f; outline-offset: 4px; }
.market-booster .market-offer-copy > button { position: relative; z-index: 1; width: 100%; }
.market-offer-copy > button { border: 3px solid var(--ink); border-radius: 8px; padding: 10px 13px; background: var(--buy-bg, #9bf6ff); box-shadow: 4px 4px 0 var(--ink); color: var(--buy-ink, var(--ink)); font-weight: 900; cursor: pointer; }
.market-offer-copy > button:disabled { opacity: .55; cursor: default; }
.market-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.market-flag { display: inline-flex; align-items: center; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); }
.market-flag.is-new { background: #ffe600; }
.market-flag.is-reprint { background: #9bf6ff; }
.market-flag.is-last { background: #e4002b; color: #fff; }
.market-flag.is-guest { background: #8a1b2e; color: #f3e7c6; border-color: #c9a24a; box-shadow: 2px 2px 0 #c9a24a; }
.market-set-progress { display: flex; align-items: center; gap: 9px; max-width: 240px; margin: 0 0 10px; }
.market-set-progress span { flex: 1; height: 9px; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(90deg, #7bd88f var(--progress), #fff 0); }
.market-set-progress b { font-size: .74rem; font-variant-numeric: tabular-nums; }
.market-shelf-timer { display: inline-block; margin: 0 0 10px; padding: 4px 9px; border: 2px solid var(--ink); border-radius: 6px; background: #ff5d75; color: var(--ink); font-weight: 950; font-variant-numeric: tabular-nums; animation: market-timer-blink 1.6s steps(2, jump-none) infinite; }
@keyframes market-timer-blink { 50% { background: #ffe76b; } }
.market-custom-info { position: relative; z-index: 2; width: fit-content; max-width: 100%; }
.market-custom-info[open] { z-index: 3; }
.market-custom-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 5px; background: #f4eaff; color: #633590; font-size: .7rem; font-weight: 750; list-style: none; cursor: help; }
.market-custom-badge::-webkit-details-marker { display: none; }
.market-custom-badge:focus-visible { outline: 3px solid #8854d0; outline-offset: 3px; }
.market-offer-copy .market-custom-help { position: absolute; top: 100%; right: 0; width: min(290px, calc(100vw - 80px)); box-sizing: border-box; margin: 0; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; box-shadow: 4px 4px 0 var(--ink); color: var(--ink); font-size: .82rem; line-height: 1.5; }
.market-user-made { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; color: #5d5566; font-size: .72rem; }
.market-user-made a { color: inherit; font-weight: 800; }
.market-user-badge { display: inline-flex; align-items: center; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #c9f7d8; color: #1c4d33; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); }
.market-staple { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; color: #5d5566; font-size: .72rem; font-weight: 700; }
.market-staple-badge { display: inline-flex; align-items: center; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #ffe76b; color: var(--ink); font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); }
/* The Apothecary's errand (#1151): the ingredient in a slot of the shelf, drawn like a pack, its colour gone once
   the order has all it asked for here. */
.market-ingredient-art { width: 124px; height: auto; aspect-ratio: 688 / 960; border: 3px solid var(--ink); border-radius: 10px; object-fit: cover; background: #fff; box-shadow: 4px 4px 0 var(--ink); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.market-ingredient:hover .market-ingredient-art { transform: rotate(-2deg) translateY(-6px) scale(1.04); }
.market-ingredient-count { margin: 10px 0 12px; font-weight: 800; }
.market-ingredient.is-filled .market-ingredient-art { filter: saturate(.7); }
.market-empty { grid-column: 1 / -1; padding: 28px; border: 3px dashed var(--empty-border, #8c8794); border-radius: 12px; text-align: center; font-weight: 800; }
/* A pre-release: caution tape, a clock counting down to the opening, and a pack that rattles to get out. */
.market-prerelease { position: relative; display: grid; gap: 5px; justify-items: start; margin: 4px 0 12px; padding: 14px 12px 9px; border: 2px solid var(--ink); border-radius: 8px; background: #fffdf3; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); }
.market-prerelease::before { content: ''; position: absolute; left: -6px; right: -6px; top: -7px; height: 12px; border: 2px solid var(--ink); background: repeating-linear-gradient(-45deg, #ffe76b 0 9px, #25252d 9px 18px); transform: rotate(1.5deg); }
.market-prerelease p { margin: 0; }
.market-prerelease-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .68rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.market-prerelease-clock b { padding: 3px 9px; border: 2px solid var(--ink); border-radius: 6px; background: #25252d; color: #b8ff3c; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: none; text-shadow: 0 0 7px rgb(184 255 60 / .75); }
.market-prerelease-limit { font-size: .76rem; font-weight: 800; }

/* The spotlight shelf, Bouzoppmania's own: a few packs the store wants seen, on a spinning backdrop. */
.market-spotlight { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 26px; padding: 34px 26px 30px; border: 3px solid var(--ink); border-radius: 18px; background: #fff3b0; box-shadow: 7px 7px 0 var(--ink); }
.market-spotlight::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: repeating-conic-gradient(#fff3b0 0 8deg, #ffd9ec 8deg 16deg); animation: market-spotlight-spin 70s linear infinite; }
@keyframes market-spotlight-spin { to { transform: rotate(1turn); } }
.market-booster.is-spotlit { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; padding: 30px 22px 22px; text-align: center; }
.market-booster.is-spotlit .booster-pack { --pack-width: 158px; margin: 0 18px 6px 0; }
.market-booster.is-spotlit .market-offer-copy { display: grid; justify-items: center; width: 100%; }
.market-booster.is-spotlit .market-set-progress { width: 100%; }
.market-booster.is-spotlit .market-offer-copy .market-custom-help { left: 50%; right: auto; transform: translateX(-50%); }
.market-booster[data-spotlight="pinned"] { background: #fff0f6; }
.market-booster[data-spotlight="close"] { background: #eaffdf; }
.market-booster[data-spotlight="last-call"] { background: repeating-linear-gradient(-45deg, #fff 0 18px, #ffe8ea 18px 36px); }
.market-booster[data-spotlight="new"] { background: #fffbe8; }
.market-booster[data-spotlight="reprint"] { background: #e8f5ff; }
.market-booster[data-spotlight="prerelease"] { background: radial-gradient(circle at 20% 30%, #f3ffd6 0 30%, transparent 31%), radial-gradient(circle at 85% 80%, #fff2c2 0 25%, transparent 26%), #fff; }
.market-booster[data-spotlight="prerelease"] .booster-pack-sticker > span { background: #b8ff3c; }
.market-booster[data-spotlight="prerelease"] .booster-pack { animation: market-prerelease-rattle 4.2s ease-in-out infinite; animation-delay: var(--pack-delay, 0s); }
@keyframes market-prerelease-rattle {
    0%, 78%, 100% { transform: rotate(var(--pack-tilt, 0deg)); }
    81% { transform: rotate(calc(var(--pack-tilt, 0deg) + 7deg)) translateY(-3%); }
    84% { transform: rotate(calc(var(--pack-tilt, 0deg) - 6deg)); }
    87% { transform: rotate(calc(var(--pack-tilt, 0deg) + 4deg)) translateY(-2%); }
    90% { transform: rotate(calc(var(--pack-tilt, 0deg) - 2deg)); }
}
.market-spotlight .market-booster::before, .market-spotlight .market-booster::after { content: '✦'; position: absolute; z-index: 2; color: #8151c9; font-size: 1.6rem; pointer-events: none; animation: market-twinkle 2.4s ease-in-out infinite; }
.market-spotlight .market-booster::before { top: 18px; left: 22px; }
.market-spotlight .market-booster::after { top: 44%; right: 20px; font-size: 1.1rem; color: #ff5d8f; animation-delay: -1.2s; }
@keyframes market-twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* ====== Bouzoppmania: the chain store. Red, yellow and blue, a jingle that never stops, products hung on rails. ====== */
.market-page[data-store="general"] { --store-font: 'Bungee', 'Sora', sans-serif; --store-border: #0b2cff; --store-shadow: #0b2cff; --store-accent: #ffe600; --sign-bg: #fff; --sign-ink: #25252d; --floor-bg: repeating-linear-gradient(0deg, #e6e9f7 0 2px, transparent 2px 56px), repeating-linear-gradient(90deg, #e6e9f7 0 2px, transparent 2px 56px), #f6f7fd; --shelf-bg: #fff; --tile-border: #0b2cff; --tile-shadow: transparent; --buy-bg: #ffe600; --empty-border: #0b2cff; }
.market-page[data-store="general"] .store-sign { padding: 24px 28px 0; border-bottom: 0; }
.market-page[data-store="general"] .store-sign-name { font-size: clamp(1.8rem, 3.8vw, 2.9rem); color: #e4002b; letter-spacing: .02em; text-transform: uppercase; }
.market-page[data-store="general"] .store-sign-tagline { margin-top: 4px; color: #0b2cff; font-size: .78rem; font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.market-page[data-store="general"] .store-sign-tagline::before { content: '★ '; color: #e4002b; }
.market-page[data-store="general"] .store-keeper { border-color: #0b2cff; background: #fff; }
.market-page[data-store="general"] .store-keeper-line { border-color: #0b2cff; }
.market-page[data-store="general"] .store-keeper-line::before { border-color: #0b2cff; }
.market-page[data-store="general"] .store-aisles { padding-top: 18px; }
.market-page[data-store="general"] .store-aisles button { border-radius: 8px; box-shadow: 3px 3px 0 #0b2cff; border-color: #0b2cff; font-family: var(--store-font); font-weight: 400; font-size: .8rem; letter-spacing: .02em; }
.market-page[data-store="general"] .store-aisles [aria-selected="true"] { background: #ffe600; }
.market-page[data-store="general"] .store-tools input, .market-page[data-store="general"] .store-tools select { border-color: #0b2cff; border-radius: 999px; }
/* Products on a rail: narrow boxes hung in rows, a hook hole at the top of each and a shelf under each row. */
.market-page[data-store="general"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 225px), 1fr)); gap: 34px 16px; padding-bottom: 14px; }
.market-page[data-store="general"] .market-booster:not(.is-spotlit) { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 30px 14px 16px; border-radius: 6px; text-align: center; }
.market-page[data-store="general"] .market-booster:not(.is-spotlit)::before { content: ''; position: absolute; top: 9px; left: 50%; width: 20px; height: 8px; border: 3px solid #0b2cff; border-radius: 999px; transform: translateX(-50%); }
.market-page[data-store="general"] .market-booster:not(.is-spotlit)::after { content: ''; position: absolute; left: -11px; right: -11px; bottom: -16px; height: 10px; border-radius: 2px; background: #0b2cff; box-shadow: 0 4px 0 rgba(11, 44, 255, .25); }
.market-page[data-store="general"] .market-booster:not(.is-spotlit) .booster-pack { --pack-width: 118px; margin: 0 14px 4px 0; }
.market-page[data-store="general"] .market-booster:not(.is-spotlit) .market-offer-copy { display: grid; justify-items: center; width: 100%; }
.market-page[data-store="general"] .market-booster:not(.is-spotlit) .market-offer-copy .market-custom-help { left: 50%; right: auto; transform: translateX(-50%); }
.market-page[data-store="general"] .market-offer-copy h3 { font-family: var(--store-font); font-weight: 400; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; color: #0b2cff; }
.market-page[data-store="general"] .market-flags { justify-content: center; }
.market-page[data-store="general"] .market-staple { justify-content: center; }
/* The price tag: yellow, with head office's sticker on its corner. */
.market-page[data-store="general"] .market-offer-copy > button { position: relative; border-color: #0b2cff; border-radius: 4px; background: #ffe600; box-shadow: 4px 4px 0 #0b2cff; font-family: var(--store-font); font-weight: 400; font-size: .82rem; letter-spacing: .02em; color: #e4002b; }
.market-page[data-store="general"] .market-booster:not(.is-spotlit) .market-offer-copy > button::before { content: 'MEGA DEAL'; position: absolute; top: -13px; right: -10px; padding: 3px 7px; border: 2px solid #0b2cff; border-radius: 999px; background: #e4002b; color: #fff; font-size: .52rem; letter-spacing: .08em; transform: rotate(8deg); }
.store-marquee { order: 2; flex: 1 1 100%; width: calc(100% + 56px); margin: 18px -28px 0; padding: 6px 0; overflow: hidden; background: #0b2cff; color: #ffe600; font: 400 .62rem/1 var(--store-font); letter-spacing: .12em; white-space: nowrap; }
.store-marquee span { display: inline-block; animation: store-marquee 32s linear infinite; }
@keyframes store-marquee { to { transform: translateX(-50%); } }

/* ====== The Collectors' Corner: a cork board on a panelled wall, notes pinned at whatever angle, written by hand. ====== */
.market-page[data-store="community"] { --store-font: 'Permanent Marker', 'Sora', sans-serif; --note-font: 'Special Elite', 'Sora', serif; --floor-bg: repeating-linear-gradient(90deg, #d8c3a3 0 2px, #ecdcc2 2px 92px, #cdb48f 92px 94px); --store-bg: radial-gradient(circle at 20% 30%, #d9a86b 0 2px, transparent 3px) 0 0 / 19px 23px, radial-gradient(circle at 70% 60%, #b98451 0 2px, transparent 3px) 7px 9px / 23px 19px, #cf9b5e; --store-border: #5a3a1e; --store-shadow: #5a3a1e; --store-accent: #fff3b0; --keeper-bg: #fffdf5; --tile-border: rgba(90, 58, 30, .4); --tile-bg: repeating-linear-gradient(0deg, transparent 0 25px, rgba(90, 58, 30, .14) 25px 26px), #fffdf5; --tile-shadow: rgba(60, 35, 15, .35); --buy-bg: #fff; --empty-border: #5a3a1e; }
.market-page[data-store="community"] .store { border-width: 12px; border-color: #7a5230; border-image: linear-gradient(135deg, #9a6b3e, #5a3a1e 50%, #8a5e36) 1; border-radius: 0; box-shadow: 10px 12px 0 rgba(60, 35, 15, .35); }
.market-page[data-store="community"] .store-sign { border-bottom: 0; padding-bottom: 6px; }
.market-page[data-store="community"] .store-sign-board { position: relative; padding: 16px 22px 14px; border: 1px solid rgba(90, 58, 30, .4); background: #fffdf5; color: var(--ink); box-shadow: 4px 6px 0 rgba(60, 35, 15, .38); transform: rotate(-1.2deg); }
.market-page[data-store="community"] .store-sign-board::before { content: ''; position: absolute; top: -12px; left: 50%; width: 90px; height: 22px; background: rgba(255, 230, 120, .75); border: 1px solid rgba(90, 58, 30, .25); transform: translateX(-50%) rotate(-3deg); }
.market-page[data-store="community"] .store-sign-kicker { font-family: var(--note-font); letter-spacing: .3em; }
.market-page[data-store="community"] .store-sign-name { font-weight: 400; }
.market-page[data-store="community"] .store-sign-tagline { font-family: var(--note-font); font-style: normal; }
.market-page[data-store="community"] .store-keeper { border-width: 1px; border-color: rgba(90, 58, 30, .4); border-radius: 2px; transform: rotate(1deg); box-shadow: 3px 4px 0 rgba(60, 35, 15, .38); }
.market-page[data-store="community"] .store-keeper::before { content: ''; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; border: 2px solid #5a3a1e; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9bd1ff, #1f5fc4 60%); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transform: translateX(-50%); }
.market-page[data-store="community"] .store-keeper { position: relative; }
.market-page[data-store="community"] .store-keeper-line { border: 0; background: transparent; font-family: var(--store-font); font-weight: 400; font-size: 1.05rem; line-height: 1.35; }
.market-page[data-store="community"] .store-keeper-line::before { display: none; }
.market-page[data-store="community"] .store-tools input, .market-page[data-store="community"] .store-tools select { border: 1px dashed #5a3a1e; border-radius: 0; background: #fffdf5; font-family: var(--note-font); }
.market-page[data-store="community"] .store-shelf { padding-top: 36px; }
/* Notes on the board: each at its own tilt, pinned with a red pin and taped at the pack. A grid, so a pin never
   straddles a column break. */
.market-page[data-store="community"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 40px 30px; align-items: start; padding-top: 6px; }
.market-page[data-store="community"] .market-booster { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 26px 18px 18px; border-width: 1px; border-radius: 2px; text-align: center; transform: rotate(calc((var(--pack-seat, 2) - 2) * 1.3deg)); transition: transform .18s ease; }
.market-page[data-store="community"] .market-booster:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.market-page[data-store="community"] .market-booster::before { content: ''; position: absolute; z-index: 3; top: -10px; left: calc(50% + (var(--pack-seat, 2) - 2) * 18px); width: 16px; height: 16px; border: 2px solid #5a3a1e; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c41d2f 60%); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transform: translateX(-50%); }
.market-page[data-store="community"] .market-booster::after { content: ''; position: absolute; z-index: 2; top: 20px; left: 50%; width: 74px; height: 18px; background: rgba(255, 230, 120, .72); border: 1px solid rgba(90, 58, 30, .25); transform: translateX(-50%) rotate(-5deg); pointer-events: none; }
.market-page[data-store="community"] .market-booster .booster-pack { --pack-width: 112px; margin: 0 12px 2px 0; }
.market-page[data-store="community"] .market-booster:hover .booster-pack { transform: none; }
.market-page[data-store="community"] .market-booster .market-offer-copy { display: grid; justify-items: center; width: 100%; font-family: var(--note-font); }
.market-page[data-store="community"] .market-booster .market-offer-copy .market-custom-help { left: 50%; right: auto; transform: translateX(-50%); }
.market-page[data-store="community"] .market-offer-copy h3 { font-family: var(--store-font); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: #3a2210; }
.market-page[data-store="community"] .market-user-made { justify-content: center; font-family: var(--store-font); font-size: .9rem; color: #3a2210; }
.market-page[data-store="community"] .market-user-badge { display: none; }
.market-page[data-store="community"] .market-offer-copy > p { font-size: .8rem; color: #5a3a1e; }
.market-page[data-store="community"] .market-offer-copy > button { border: 2px dashed #5a3a1e; border-radius: 2px; background: #fff; box-shadow: 2px 3px 0 rgba(60, 35, 15, .3); color: #3a2210; font-family: var(--store-font); font-weight: 400; }
.market-page[data-store="community"] .market-empty { color: #3a2210; background: rgba(255, 253, 245, .7); font-family: var(--store-font); font-weight: 400; }

/* ====== The six country shops: six shops that have never met. The page keeps their colours (`--country`), and
   each one lays out its sign, its keeper and its goods its own way: nothing of one is reused by another. ====== */
.market-page[data-store="country"] { --store-shadow: var(--country, #36496c); --buy-bg: var(--country, #36496c); --buy-ink: #fff; --empty-border: var(--country, #36496c); }
.market-page[data-store="country"] .store-sign-name { color: var(--country, #36496c); }
.market-page[data-store="country"] .store-keeper-line::before { display: none; }
.market-page[data-store="country"] .market-offer-copy h3 { font-family: var(--store-font); }
.market-page[data-store="country"] .market-shelf-timer { background: transparent; border: 2px solid var(--country, #36496c); color: var(--country, #36496c); font-weight: 800; animation: none; }

/* --- Steppe Market: no walls, no doors. A felt rug on the ground, the packs lying on it, a string of pennants over
   the lot, the price on a slip of paper under each pack. --- */
.market-page[data-country="mongolistan"] { --floor-bg: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .06) 0 1px, transparent 2px) 0 0 / 11px 11px, radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .05) 0 1px, transparent 2px) 0 0 / 17px 17px, #e2d3b8; --store-font: 'Sora', sans-serif; }
.market-page[data-country="mongolistan"] .store { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.market-page[data-country="mongolistan"] .store-sign { position: relative; padding: 46px 10px 8px; border: 0; background: transparent; }
.market-page[data-country="mongolistan"] .store-sign::before { content: ''; position: absolute; top: 14px; left: -10px; right: -10px; height: 30px; border-top: 3px solid #5a3a1e; background: conic-gradient(from 152deg at 50% 0, #8a2a2a 0 56deg, transparent 56deg) 0 0 / 28px 26px repeat-x, conic-gradient(from 152deg at 50% 0, #c9a24a 0 56deg, transparent 56deg) 14px 0 / 56px 26px repeat-x; pointer-events: none; }
.market-page[data-country="mongolistan"] .store-sign-board { padding: 0; }
.market-page[data-country="mongolistan"] .store-sign-name { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; color: #5a1f1f; text-shadow: 3px 3px 0 #e2d3b8, 5px 5px 0 #8a2a2a; }
.market-page[data-country="mongolistan"] .store-sign-tagline { color: #5a3a1e; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.market-page[data-country="mongolistan"] .store-keeper { padding: 10px 14px; border: 0; border-radius: 0; background: transparent; color: #25252d; }
.market-page[data-country="mongolistan"] .store-keeper-line { padding: 0; border: 0; background: transparent; color: #5a1f1f; font-size: 1.05rem; font-style: italic; font-weight: 700; }
.market-page[data-country="mongolistan"] .store-keeper-line q { quotes: '— ' ''; }
.market-page[data-country="mongolistan"] .store-tools { padding: 10px 10px 0; }
.market-page[data-country="mongolistan"] .store-tools input, .market-page[data-country="mongolistan"] .store-tools select { border: 2px solid #5a1f1f; border-radius: 0; background: #f6ecd9; }
.market-page[data-country="mongolistan"] .store-shelf { margin: 22px 0 10px; padding: 34px 28px 38px; border: 10px solid #5a1f1f; border-image: repeating-linear-gradient(45deg, #5a1f1f 0 10px, #c9a24a 10px 14px, #5a1f1f 14px 24px) 10; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 16px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 16px), repeating-linear-gradient(90deg, #7d2525 0 60px, #8f3a2a 60px 120px); box-shadow: 0 0 0 1px #3a1212, 0 18px 30px -16px rgba(0, 0, 0, .5); }
.market-page[data-country="mongolistan"] .booster-market-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 30px; }
.market-page[data-country="mongolistan"] .market-booster { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; width: 196px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.market-page[data-country="mongolistan"] .market-booster .booster-pack { --pack-width: 128px; margin: 0; transform: rotate(var(--pack-tilt)); filter: drop-shadow(4px 8px 6px rgba(0, 0, 0, .45)); }
.market-page[data-country="mongolistan"] .market-booster:hover .booster-pack { transform: rotate(0deg) translateY(-6px) scale(1.04); }
.market-page[data-country="mongolistan"] .market-offer-copy { display: grid; justify-items: center; width: 100%; padding: 10px 10px 12px; border-radius: 1px; background: #f6ecd9; box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); transform: rotate(calc(var(--pack-tilt) * -.4)); }
.market-page[data-country="mongolistan"] .market-offer-copy h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 1000; letter-spacing: .04em; text-transform: uppercase; color: #5a1f1f; }
.market-page[data-country="mongolistan"] .market-offer-copy p { font-size: .74rem; }
.market-page[data-country="mongolistan"] .market-offer-copy > button { width: auto; padding: 6px 12px; border: 2px solid #5a1f1f; border-radius: 999px; background: #5a1f1f; color: #f6ecd9; font-size: .74rem; box-shadow: none; }
.market-page[data-country="mongolistan"] .market-empty { background: rgba(246, 236, 217, .85); color: #5a1f1f; border-color: #f6ecd9; }

/* --- The Card Stall: a messenger's. The shop is a delivery van with the side open; a licence plate for a sign, a
   delivery note for the keeper, and every pack a parcel on the shelf, tied with string, its label stuck on. --- */
.market-page[data-country="pedalistan"] { --store-font: 'Pacifico', 'Sora', cursive; --floor-bg: repeating-linear-gradient(0deg, transparent 0 24px, #efe6a8 24px 36px) 50% 0 / 6px 100% no-repeat, #9b9b9f; }
.market-page[data-country="pedalistan"] .store { border: 4px solid #1b2b22; border-radius: 26px 26px 10px 10px; background: #e9f3ec; box-shadow: 0 0 0 10px #d6e5db, 10px 18px 0 #1b2b22; }
.market-page[data-country="pedalistan"] .store-sign { padding: 26px 28px 20px; border-bottom: 4px dashed #1b2b22; background: #23634a; color: #fff; }
.market-page[data-country="pedalistan"] .store-sign-board { padding: 10px 24px 8px; border: 4px solid #1b2b22; border-radius: 8px; background: #fff; color: #1b2b22; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #1b2b22; }
.market-page[data-country="pedalistan"] .store-sign-name { font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); color: #23634a; letter-spacing: .02em; }
.market-page[data-country="pedalistan"] .store-sign-tagline { margin-top: 2px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .74rem; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #1b2b22; }
.market-page[data-country="pedalistan"] .store-keeper { padding: 14px 16px 14px 42px; border: 1px solid #9fb6a8; border-radius: 2px; background: repeating-linear-gradient(0deg, transparent 0 25px, #cfe0ff 25px 26px) 0 12px, #fff; box-shadow: inset 30px 0 0 -28px #ff8a80, 3px 3px 0 rgba(27, 43, 34, .25); color: #1b2b22; }
.market-page[data-country="pedalistan"] .store-keeper .collector { font-family: var(--store-font); }
.market-page[data-country="pedalistan"] .store-keeper-line { padding: 0; border: 0; background: transparent; color: #1b2b22; font-family: 'Permanent Marker', 'Sora', sans-serif; font-weight: 400; line-height: 26px; }
.market-page[data-country="pedalistan"] .store-tools { padding-top: 20px; }
.market-page[data-country="pedalistan"] .store-tools input, .market-page[data-country="pedalistan"] .store-tools select { border: 3px solid #1b2b22; border-radius: 999px; background: #fff; }
.market-page[data-country="pedalistan"] .store-shelf { gap: 0; padding: 18px 28px 28px; }
.market-page[data-country="pedalistan"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 30px 20px; align-items: stretch; }
/* Each parcel on a plank of its own. */
.market-page[data-country="pedalistan"] .market-booster { grid-template-columns: auto minmax(0, 1fr); gap: 14px; min-height: 150px; padding: 12px 14px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent 0 46%, rgba(27, 43, 34, .35) 46% 47%, transparent 47%), linear-gradient(90deg, transparent 0 60%, rgba(27, 43, 34, .35) 60% 61%, transparent 61%), #cfa775; box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .2), 4px 6px 0 rgba(27, 43, 34, .35), -14px 14px 0 -4px #1b2b22, 14px 14px 0 -4px #1b2b22; }
.market-page[data-country="pedalistan"] .market-booster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, transparent 0 48%, rgba(27, 43, 34, .35) 48% 50%, transparent 50%); pointer-events: none; }
.market-page[data-country="pedalistan"] .market-booster .booster-pack { --pack-width: 86px; margin: 0; }
.market-page[data-country="pedalistan"] .market-offer-copy { position: relative; z-index: 1; align-self: center; padding: 10px 12px 12px; border: 2px solid #1b2b22; border-radius: 2px; background: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); transform: rotate(-1.5deg); }
.market-page[data-country="pedalistan"] .market-offer-copy::before { content: 'TO'; position: absolute; top: -9px; left: 10px; padding: 1px 6px; background: #1b2b22; color: #fff; font: 900 .58rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .2em; }
.market-page[data-country="pedalistan"] .market-offer-copy h3 { margin: 4px 0 4px; font-size: 1.15rem; font-weight: 400; color: #23634a; }
.market-page[data-country="pedalistan"] .market-offer-copy p { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .7rem; }
.market-page[data-country="pedalistan"] .market-shelf-timer { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; }
.market-page[data-country="pedalistan"] .market-offer-copy > button { padding: 7px 10px; border: 2px solid #1b2b22; border-radius: 3px; background: #1b2b22; color: #fff; font-size: .78rem; box-shadow: none; }
.market-page[data-country="pedalistan"] .market-empty { background: #fff; border-color: #1b2b22; }

/* --- High Pass Post: a post office up the mountain. Dark wood, a brass plate, the packs sorted into pigeonholes, a
   slip under each one, the keeper behind his counter window. --- */
.market-page[data-country="tagoustan"] { --store-font: 'Special Elite', 'Sora', serif; --floor-bg: linear-gradient(135deg, rgba(31, 95, 116, .22) 25%, transparent 25%) 0 0 / 90px 46px repeat-x, linear-gradient(225deg, rgba(31, 95, 116, .22) 25%, transparent 25%) 0 0 / 90px 46px repeat-x, #c9d7dc; }
.market-page[data-country="tagoustan"] .store { border: 0; border-radius: 3px; background: #3f2d20; box-shadow: inset 0 0 0 8px #5a4332, inset 0 0 0 10px #2a1d14, 8px 10px 0 #1f5f74; color: #f3ead8; }
.market-page[data-country="tagoustan"] .store-sign { padding: 34px 36px 24px; border-bottom: 0; background: transparent; }
.market-page[data-country="tagoustan"] .store-sign-board { padding: 14px 26px 12px; border: 3px solid #6f5324; border-radius: 3px; background: linear-gradient(135deg, #e3c27a, #b8893a 55%, #d9b36b); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 #2a1d14; color: #3a2a10; }
/* The plate's four screws. */
.market-page[data-country="tagoustan"] .store-sign-board { position: relative; }
.market-page[data-country="tagoustan"] .store-sign-board::before, .market-page[data-country="tagoustan"] .store-sign-board::after { content: ''; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #6f5324 70%); box-shadow: 0 calc(100% + 0px) 0 0 transparent; }
.market-page[data-country="tagoustan"] .store-sign-board::before { left: 6px; box-shadow: 0 var(--screw-drop, 0) 0 transparent; }
.market-page[data-country="tagoustan"] .store-sign-board::after { right: 6px; }
.market-page[data-country="tagoustan"] .store-sign-name { font-size: clamp(1.6rem, 3.8vw, 2.6rem); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: #3a2a10; text-shadow: 1px 1px 0 rgba(255, 255, 255, .45); }
.market-page[data-country="tagoustan"] .store-sign-tagline { margin-top: 4px; font-size: .78rem; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #3a2a10; }
.market-page[data-country="tagoustan"] .store-keeper { padding: 14px 16px; border: 6px solid #5a4332; border-radius: 3px; background: #f3ead8; color: #2a1d14; box-shadow: inset 0 0 0 2px #2a1d14, 0 0 0 1px #2a1d14; }
.market-page[data-country="tagoustan"] .store-keeper::after { content: 'HIGH PASS POST · PAID'; position: absolute; right: 14px; top: 10px; padding: 6px 8px; border: 2px double #1f5f74; border-radius: 50%; color: #1f5f74; font: 700 .5rem/1.2 'Special Elite', serif; letter-spacing: .1em; text-align: center; transform: rotate(-12deg); opacity: .8; }
.market-page[data-country="tagoustan"] .store-keeper { position: relative; }
.market-page[data-country="tagoustan"] .store-keeper-line { padding: 0; border: 0; background: transparent; color: #2a1d14; font-family: var(--store-font); font-weight: 400; font-size: 1.02rem; }
.market-page[data-country="tagoustan"] .store-tools { padding: 0 36px; }
.market-page[data-country="tagoustan"] .store-tools input, .market-page[data-country="tagoustan"] .store-tools select { border: 2px solid #2a1d14; border-radius: 2px; background: #f3ead8; color: #2a1d14; font-family: var(--store-font); }
.market-page[data-country="tagoustan"] .store-shelf { gap: 0; margin: 18px 36px 36px; padding: 0; border: 8px solid #5a4332; border-radius: 2px; background: #2a1d14; box-shadow: inset 0 0 0 1px #1a110b; }
.market-page[data-country="tagoustan"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; }
.market-page[data-country="tagoustan"] .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 18px 10px 14px; border: 4px solid #5a4332; border-radius: 0; background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, .06), transparent 60%), #24180f; box-shadow: inset 0 0 18px rgba(0, 0, 0, .8); color: #f3ead8; text-align: center; }
.market-page[data-country="tagoustan"] .market-booster .booster-pack { --pack-width: 76px; margin: 0; transform: rotate(var(--pack-tilt)); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.market-page[data-country="tagoustan"] .market-booster:hover .booster-pack { transform: translateY(-4px) scale(1.04); }
.market-page[data-country="tagoustan"] .market-offer-copy { display: grid; justify-items: center; width: 100%; padding: 8px 8px 10px; background: #f3ead8; color: #2a1d14; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.market-page[data-country="tagoustan"] .market-offer-copy h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 400; letter-spacing: .04em; color: #1f5f74; }
.market-page[data-country="tagoustan"] .market-offer-copy p { font-family: var(--store-font); font-size: .68rem; }
.market-page[data-country="tagoustan"] .market-flags { justify-content: center; }
.market-page[data-country="tagoustan"] .market-shelf-timer { font-family: var(--store-font); font-size: .7rem; padding: 2px 6px; }
.market-page[data-country="tagoustan"] .market-set-progress { max-width: 100%; }
.market-page[data-country="tagoustan"] .market-offer-copy > button { padding: 6px 8px; border: 2px solid #2a1d14; border-radius: 2px; background: #1f5f74; color: #fff; font-family: var(--store-font); font-size: .72rem; font-weight: 400; box-shadow: 2px 2px 0 #2a1d14; }
.market-page[data-country="tagoustan"] .market-empty { color: #f3ead8; border-color: #f3ead8; }

/* --- Royal Dispensary: a pharmacy. White tiles, a green cross, the packs in jars on glass shelves with an
   apothecary label on each, the keeper's word on a prescription pad. --- */
.market-page[data-country="andasmas"] { --store-font: 'Abril Fatface', 'Sora', serif; --floor-bg: linear-gradient(rgba(59, 53, 148, .08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(59, 53, 148, .08) 1px, transparent 1px) 0 0 / 28px 28px, #eef2ee; }
.market-page[data-country="andasmas"] .store { border: 3px solid #3b3594; border-radius: 4px; background: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 9px #3b3594; }
.market-page[data-country="andasmas"] .store-sign { position: relative; padding: 30px 32px 24px 118px; border-bottom: 3px double #3b3594; background: #fff; }
/* The cross, lit. */
.market-page[data-country="andasmas"] .store-sign::before { content: ''; position: absolute; left: 30px; top: 50%; width: 60px; height: 60px; transform: translateY(-50%); background: linear-gradient(#17a34a, #17a34a) 50% 0 / 20px 100% no-repeat, linear-gradient(#17a34a, #17a34a) 0 50% / 100% 20px no-repeat; filter: drop-shadow(0 0 8px rgba(23, 163, 74, .7)); animation: dispensary-cross 2.4s ease-in-out infinite; }
@keyframes dispensary-cross { 50% { filter: drop-shadow(0 0 2px rgba(23, 163, 74, .3)); } }
.market-page[data-country="andasmas"] .store-sign-board { padding: 0; }
.market-page[data-country="andasmas"] .store-sign-name { font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); color: #3b3594; letter-spacing: .01em; }
.market-page[data-country="andasmas"] .store-sign-tagline { margin-top: 4px; padding-top: 6px; border-top: 1px solid #3b3594; font-size: .8rem; font-style: italic; color: #3b3594; }
.market-page[data-country="andasmas"] .store-keeper { position: relative; padding: 40px 16px 14px; border: 1px solid #b9b6d6; border-radius: 3px; background: #fff; box-shadow: 0 6px 0 -3px #dcdaf0, 0 12px 0 -6px #c4c1e6; color: #25252d; }
.market-page[data-country="andasmas"] .store-keeper::before { content: 'Rx'; position: absolute; top: 6px; left: 14px; font: 400 1.5rem/1 var(--store-font); color: #3b3594; }
.market-page[data-country="andasmas"] .store-keeper::after { content: ''; position: absolute; top: 30px; left: 14px; right: 14px; border-top: 2px solid #3b3594; }
.market-page[data-country="andasmas"] .store-keeper-line { padding: 0; border: 0; background: transparent; font-family: 'Special Elite', 'Sora', serif; font-weight: 400; font-size: 1rem; }
.market-page[data-country="andasmas"] .store-tools { padding-top: 18px; }
.market-page[data-country="andasmas"] .store-tools input, .market-page[data-country="andasmas"] .store-tools select { border: 2px solid #3b3594; border-radius: 3px; background: #fff; }
.market-page[data-country="andasmas"] .store-shelf { gap: 0; padding: 30px 28px 10px; background: #fff; }
.market-page[data-country="andasmas"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 22px; align-items: end; }
.market-page[data-country="andasmas"] .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; margin-bottom: 30px; padding: 0 0 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
/* The glass shelf each jar stands on. */
.market-page[data-country="andasmas"] .market-booster::after { content: ''; position: absolute; left: -11px; right: -11px; bottom: 0; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #dfe9f3, #b9cfe0); box-shadow: 0 4px 0 rgba(59, 53, 148, .12); }
/* The jar: a lid, a glass body the pack stands in. */
.market-page[data-country="andasmas"] .market-booster .booster-pack { --pack-width: 92px; margin: 30px 0 0; }
.market-page[data-country="andasmas"] .market-booster::before { content: ''; position: absolute; top: 0; left: 50%; width: 130px; height: 224px; transform: translateX(-50%); border: 2px solid rgba(59, 53, 148, .35); border-radius: 14px 14px 18px 18px; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(220, 235, 240, .35) 40%, rgba(255, 255, 255, .8) 70%, rgba(200, 215, 225, .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), inset 0 -22px 0 -16px rgba(59, 53, 148, .12), inset 0 20px 0 -14px #3b3594; pointer-events: none; }
.market-page[data-country="andasmas"] .market-offer-copy { position: relative; z-index: 1; display: grid; justify-items: center; width: calc(100% - 44px); margin-top: -14px; padding: 10px 10px 12px; border: 4px double #3b3594; background: #fff; }
.market-page[data-country="andasmas"] .market-offer-copy h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 400; color: #3b3594; }
.market-page[data-country="andasmas"] .market-offer-copy p { font-size: .7rem; letter-spacing: .02em; }
.market-page[data-country="andasmas"] .market-shelf-timer { font-size: .7rem; }
.market-page[data-country="andasmas"] .market-offer-copy > button { padding: 7px 10px; border: 2px solid #3b3594; border-radius: 3px; background: #3b3594; color: #fff; font-size: .74rem; box-shadow: none; }
.market-page[data-country="andasmas"] .market-empty { border-color: #3b3594; color: #3b3594; }

/* --- The Kiosk: a newsstand. The packs stand in a rack like the day's papers, name in a headline, the keeper's
   word a column of newsprint. --- */
.market-page[data-country="boulemia"] { --store-font: 'Sora', sans-serif; --floor-bg: linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px) 0 0 / 96px 100%, #cfc9bf; }
.market-page[data-country="boulemia"] .store { border: 3px solid #1c3b2e; border-radius: 0; background: #1c3b2e; box-shadow: 8px 8px 0 #8a4b1f; }
.market-page[data-country="boulemia"] .store-sign { padding: 24px 28px 18px; border-bottom: 0; background: #1c3b2e; color: #f6ecd9; }
.market-page[data-country="boulemia"] .store-sign-board { flex: 1 1 100%; padding: 14px 20px 10px; border-top: 4px double #25252d; border-bottom: 4px double #25252d; background: #f6ecd9; color: #25252d; text-align: center; }
.market-page[data-country="boulemia"] .store-sign-name { font-family: 'Abril Fatface', 'Sora', serif; font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 4.2rem); letter-spacing: .02em; color: #25252d; }
.market-page[data-country="boulemia"] .store-sign-tagline { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: .7rem; font-style: normal; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #25252d; }
.market-page[data-country="boulemia"] .store-sign-tagline::before, .market-page[data-country="boulemia"] .store-sign-tagline::after { content: ''; flex: 1; border-top: 1px solid #25252d; }
.market-page[data-country="boulemia"] .store-keeper { padding: 12px 16px; border: 0; border-radius: 0; background: #f6ecd9; color: #25252d; columns: 1; box-shadow: 0 0 0 1px #25252d; }
.market-page[data-country="boulemia"] .store-keeper-line { padding: 8px 0 0; border: 0; border-top: 1px solid #25252d; border-radius: 0; background: transparent; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: .98rem; line-height: 1.35; }
.market-page[data-country="boulemia"] .store-keeper-line q::first-letter { float: left; margin: 2px 6px 0 0; font: 400 2.4rem/.8 'Abril Fatface', serif; }
.market-page[data-country="boulemia"] .store-tools { padding: 18px 28px 0; }
.market-page[data-country="boulemia"] .store-tools input, .market-page[data-country="boulemia"] .store-tools select { border: 2px solid #f6ecd9; border-radius: 0; background: #f6ecd9; }
.market-page[data-country="boulemia"] .store-shelf { padding: 24px 28px 34px; background: #1c3b2e; }
.market-page[data-country="boulemia"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 30px 14px; align-items: end; }
.market-page[data-country="boulemia"] .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; padding: 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; color: #f6ecd9; }
/* The rack's wire, across the lower part of each pack: measured from the copy under it, so it never crosses the name. */
.market-page[data-country="boulemia"] .market-offer-copy::before { content: ''; position: absolute; z-index: 2; left: -7px; right: -7px; top: -24px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #d9d9d9, #8e8e8e); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.market-page[data-country="boulemia"] .market-booster::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #8a4b1f; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); }
.market-page[data-country="boulemia"] .market-booster .booster-pack { --pack-width: 108px; margin: 0; transform: none; }
.market-page[data-country="boulemia"] .market-booster:hover .booster-pack { transform: translateY(-8px); }
.market-page[data-country="boulemia"] .market-offer-copy { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; margin-top: -6px; padding: 10px 8px 14px; background: #f6ecd9; color: #25252d; border-top: 3px solid #25252d; }
.market-page[data-country="boulemia"] .market-booster .booster-pack { position: relative; z-index: 0; }
.market-page[data-country="boulemia"] .market-offer-copy h3 { margin: 0 0 4px; font-family: 'Abril Fatface', 'Sora', serif; font-weight: 400; font-size: 1.1rem; line-height: 1.05; color: #25252d; }
.market-page[data-country="boulemia"] .market-offer-copy p { font-family: Georgia, serif; font-size: .7rem; }
.market-page[data-country="boulemia"] .market-flags { justify-content: center; }
.market-page[data-country="boulemia"] .market-shelf-timer { font-size: .7rem; padding: 2px 6px; }
.market-page[data-country="boulemia"] .market-offer-copy > button { padding: 6px 8px; border: 2px solid #25252d; border-radius: 0; background: #e4002b; color: #fff; font-size: .72rem; letter-spacing: .02em; box-shadow: 2px 2px 0 #25252d; }
.market-page[data-country="boulemia"] .market-empty { color: #f6ecd9; border-color: #f6ecd9; }

/* --- The Grill Stand: a food truck. The hatch open on a dark kitchen, the name in neon, the menu a list down a
   paper with the price at the end of a dotted line, the keeper in his apron. --- */
.market-page[data-country="merguez"] { --store-font: 'Bangers', 'Sora', sans-serif; --floor-bg: repeating-conic-gradient(#f4d2c2 0 25%, #fff6ef 0 50%) 0 0 / 44px 44px; }
.market-page[data-country="merguez"] .store { border: 6px solid #e8602a; border-radius: 18px; background: #2a211d; box-shadow: inset 0 0 0 3px #2a211d, inset 0 0 0 5px #ffb347, 8px 10px 0 #b9461a; color: #fff6ef; }
.market-page[data-country="merguez"] .store-sign { padding: 28px 30px 20px; border-bottom: 0; background: transparent; justify-content: space-between; }
.market-page[data-country="merguez"] .store-sign-board { padding: 0; }
.market-page[data-country="merguez"] .store-sign-name { font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: .05em; color: #ffb347; text-shadow: 0 0 6px #ff7a2a, 0 0 18px #ff7a2a, 0 0 32px rgba(255, 122, 42, .6), 3px 3px 0 #7a2a0a; animation: grill-neon 5s linear infinite; }
@keyframes grill-neon { 0%, 93%, 96%, 100% { opacity: 1; } 94%, 97% { opacity: .55; } }
.market-page[data-country="merguez"] .store-sign-tagline { margin-top: 2px; font-family: var(--store-font); font-size: 1.05rem; font-style: normal; letter-spacing: .08em; color: #ffd9a8; text-shadow: 0 0 8px rgba(255, 179, 71, .5); }
.market-page[data-country="merguez"] .store-keeper { padding: 14px 16px; border: 0; border-radius: 10px 10px 2px 2px; background: #fff6ef; color: #2a211d; box-shadow: inset 0 -8px 0 #e8602a, 0 0 0 3px #2a211d, 0 0 0 5px #ffb347; }
.market-page[data-country="merguez"] .store-keeper-line { padding: 0; border: 0; background: transparent; font-family: var(--store-font); font-weight: 400; font-size: 1.15rem; letter-spacing: .03em; }
.market-page[data-country="merguez"] .store-tools { padding: 0 30px; }
.market-page[data-country="merguez"] .store-tools input, .market-page[data-country="merguez"] .store-tools select { border: 2px solid #ffb347; border-radius: 6px; background: #fff6ef; }
.market-page[data-country="merguez"] .store-shelf { gap: 0; margin: 18px 30px 30px; padding: 22px 26px 18px; border-radius: 3px; background: #fff6ef; color: #2a211d; box-shadow: 4px 6px 0 rgba(0, 0, 0, .35); }
.market-page[data-country="merguez"] .store-shelf::before { content: 'MENU'; display: block; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 3px solid #2a211d; font: 400 1.6rem/1 var(--store-font); letter-spacing: .2em; text-align: center; color: #b9461a; }
.market-page[data-country="merguez"] .booster-market-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.market-page[data-country="merguez"] .market-booster { grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 4px; border: 0; border-bottom: 2px dotted rgba(42, 33, 29, .35); border-radius: 0; background: transparent; box-shadow: none; color: #2a211d; }
.market-page[data-country="merguez"] .market-booster:last-child { border-bottom: 0; }
.market-page[data-country="merguez"] .market-booster .booster-pack { --pack-width: 58px; margin: 0; transform: rotate(var(--pack-tilt)); }
.market-page[data-country="merguez"] .market-booster:hover .booster-pack { transform: rotate(0deg) scale(1.08); }
.market-page[data-country="merguez"] .market-offer-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: min-content; column-gap: 16px; align-items: center; }
.market-page[data-country="merguez"] .market-offer-copy h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 1.35rem; font-weight: 400; letter-spacing: .04em; color: #b9461a; }
.market-page[data-country="merguez"] .market-offer-copy h3::after { content: ''; flex: 1; min-width: 20px; border-bottom: 3px dotted #2a211d; }
.market-page[data-country="merguez"] .market-offer-copy p { margin: 2px 0 0; font-size: .74rem; }
.market-page[data-country="merguez"] .market-offer-copy .market-flags { margin: 0 0 2px; }
.market-page[data-country="merguez"] .market-shelf-timer { margin: 4px 0 0; font-size: .72rem; }
.market-page[data-country="merguez"] .market-offer-copy > button { grid-column: 2; grid-row: 1 / span 6; width: auto; padding: 10px 14px; border: 3px solid #2a211d; border-radius: 999px; background: #e8602a; color: #fff; font-family: var(--store-font); font-size: 1rem; font-weight: 400; letter-spacing: .06em; box-shadow: 3px 3px 0 #2a211d; }
.market-page[data-country="merguez"] .market-set-progress { grid-column: 1; }
.market-page[data-country="merguez"] .market-empty { border-color: #b9461a; color: #b9461a; }

/* ====== The Clubhouse: a velvet table in the dark, gold and a rope. Members only: a collector's circle. ====== */
.market-page[data-store="shared"] { --store-font: 'Special Elite', 'Sora', serif; --floor-bg: radial-gradient(ellipse at 50% 0, #1d1430, #06050b 70%); --store-bg: radial-gradient(ellipse at 50% 0, #2a1430, #120f1c 70%); --store-ink: #f3e7c6; --store-border: #c9a24a; --store-shadow: #3a0f1c; --sign-ink: #f3e7c6; --keeper-bg: #1d1829; --tile-bg: radial-gradient(ellipse at 50% 30%, #2d1736, #1a1024 72%); --tile-border: #c9a24a; --tile-shadow: transparent; --buy-bg: #c9a24a; --buy-ink: #120f1c; --empty-border: #c9a24a; }
.market-page[data-store="shared"] .store { border-width: 1px; box-shadow: 0 0 0 6px #120f1c, 0 0 0 7px #c9a24a, 0 30px 60px rgba(0, 0, 0, .6); }
.market-page[data-store="shared"] .store-sign { border-bottom: 10px solid; border-image: repeating-linear-gradient(135deg, #c9a24a 0 10px, #8a1b2e 10px 20px) 10; }
.market-page[data-store="shared"] .store-sign-kicker { color: #c9a24a; }
.market-page[data-store="shared"] .store-sign-name { font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: #c9a24a; text-shadow: 0 0 18px rgba(201, 162, 74, .45); }
.market-page[data-store="shared"] .store-sign-tagline { color: #cbbfa6; font-family: var(--store-font); font-style: normal; letter-spacing: .06em; }
.market-page[data-store="shared"] .store-keeper-line { border: 1px solid #c9a24a; background: #f3e7c6; color: #120f1c; font-family: var(--store-font); font-weight: 400; }
.market-page[data-store="shared"] .store-tools input, .market-page[data-store="shared"] .store-tools select { background: #1d1829; color: #f3e7c6; border: 1px solid #c9a24a; border-radius: 0; font-family: var(--store-font); }
.market-page[data-store="shared"] .store-tools input::placeholder { color: #8f8470; }
/* Laid out on the table, one pack to a velvet mat with brass corners, and little said. */
.market-page[data-store="shared"] .store-shelf { padding: 34px 28px 40px; }
.market-page[data-store="shared"] .booster-market-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 34px 28px; }
.market-page[data-store="shared"] .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 34px 22px 24px; border-width: 1px; border-radius: 2px; color: #f3e7c6; text-align: center; box-shadow: inset 0 0 0 6px #120f1c, inset 0 0 0 7px rgba(201, 162, 74, .6), 0 18px 40px rgba(0, 0, 0, .55); }
.market-page[data-store="shared"] .market-booster::before, .market-page[data-store="shared"] .market-booster::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid #c9a24a; pointer-events: none; }
.market-page[data-store="shared"] .market-booster::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.market-page[data-store="shared"] .market-booster::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.market-page[data-store="shared"] .market-booster .booster-pack { --pack-width: 120px; margin: 0 16px 6px 0; transform: rotate(-7deg); filter: drop-shadow(0 0 22px rgba(201, 162, 74, .35)); }
.market-page[data-store="shared"] .market-booster:hover .booster-pack { transform: rotate(-3deg) translateY(-6px) scale(1.04); }
.market-page[data-store="shared"] .market-booster .market-offer-copy { display: grid; justify-items: center; width: 100%; font-family: var(--store-font); }
.market-page[data-store="shared"] .market-booster .market-offer-copy .market-custom-help { left: 50%; right: auto; transform: translateX(-50%); }
.market-page[data-store="shared"] .market-offer-copy h3 { font-family: var(--store-font); font-weight: 400; font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; color: #f3e7c6; }
.market-page[data-store="shared"] .market-offer-copy p:not(.market-custom-help) { color: #f3e7c6; }
/* Its pre-release sign hangs in the Clubhouse's own colours: cream words on the dark wood, not cream on paper. */
.market-page[data-store="shared"] .market-prerelease { border: 1px solid #c9a24a; border-radius: 2px; background: #1d1829; color: #f3e7c6; box-shadow: 0 0 0 3px #120f1c, 0 0 0 4px #c9a24a; }
.market-page[data-store="shared"] .market-prerelease::before { border-color: #c9a24a; }
.market-page[data-store="shared"] .market-user-made { justify-content: center; color: #cbbfa6; }
.market-page[data-store="shared"] .market-user-badge { background: transparent; color: #c9a24a; border-color: #c9a24a; box-shadow: none; }
.market-page[data-store="shared"] .market-flags { justify-content: center; }
.market-page[data-store="shared"] .market-flag.is-guest { transform: rotate(-3deg); font-family: var(--store-font); }
.market-page[data-store="shared"] .market-set-progress span { background: linear-gradient(90deg, #c9a24a var(--progress), #2a1430 0); border-color: #c9a24a; }
.market-page[data-store="shared"] .market-offer-copy > button { border: 1px solid #c9a24a; border-radius: 0; box-shadow: 0 0 0 3px #120f1c, 0 0 0 4px #c9a24a; font-family: var(--store-font); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.market-page[data-store="shared"] .market-empty { color: #f3e7c6; font-family: var(--store-font); }

/* ====== What each store keeps that the others do not ====== */
/* Bouzoppmania's rail stays behind the packs hung on it. */
.market-page[data-store="general"] .market-booster:not(.is-spotlit)::after { z-index: 0; }
/* The Corner: the pack is a polaroid taped to the note, the maker's name written under it. */
.market-page[data-store="community"] .market-polaroid { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 10px 8px; background: #fff; border: 1px solid rgba(90, 58, 30, .3); box-shadow: 2px 3px 0 rgba(60, 35, 15, .25); transform: rotate(calc((2 - var(--pack-seat, 2)) * 1.6deg)); }
.market-page[data-store="community"] .market-polaroid .booster-pack { --pack-width: 104px; margin: 0 10px 0 0; }
.market-page[data-store="community"] .market-polaroid-caption { font-family: var(--store-font); font-size: .95rem; color: #3a2210; }
.market-page[data-store="community"] .market-booster::after { top: 14px; }
.market-page[data-store="community"] .market-user-made { display: none; }
/* The Clubhouse: not a grid but the list itself, one line per set, read down the clipboard. */
.store-count { margin: 10px 0 0; font-family: var(--store-font); font-size: .9rem; letter-spacing: .06em; color: #c9a24a; }
.market-page[data-store="shared"] .store-shelf { padding: 10px 28px 36px; }
.market-page[data-store="shared"] .booster-market-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(201, 162, 74, .5); }
.market-page[data-store="shared"] .market-booster { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 8px; border: 0; border-bottom: 1px solid rgba(201, 162, 74, .5); border-radius: 0; background: transparent; text-align: left; box-shadow: none; }
.market-page[data-store="shared"] .market-booster::before, .market-page[data-store="shared"] .market-booster::after { display: none; }
.market-page[data-store="shared"] .market-booster .booster-pack { --pack-width: 76px; margin: 0 10px 0 0; transform: rotate(-6deg); filter: drop-shadow(0 0 16px rgba(201, 162, 74, .3)); }
.market-page[data-store="shared"] .market-booster .market-offer-copy { display: block; }
.market-page[data-store="shared"] .market-offer-copy h3 { margin-bottom: 4px; font-size: 1.1rem; }
.market-page[data-store="shared"] .market-guest-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; color: #cbbfa6; font-size: .8rem; letter-spacing: .04em; }
.market-page[data-store="shared"] .market-flags { justify-content: flex-start; }
.market-page[data-store="shared"] .market-booster .market-offer-copy > button { width: auto; padding: 8px 14px; font-size: .78rem; }
.market-page[data-store="shared"] .market-booster:hover { background: rgba(201, 162, 74, .06); }
@media (max-width: 520px) {
    .market-page[data-store="shared"] .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
}

/* ====== The other rooms: the card market, the auction and the ledgers keep their own look ====== */
.market-section { margin-top: 0; }
.market-section + .market-section, .market-ledgers .market-section + .market-section { margin-top: 54px; }
.market-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; border-bottom: 4px solid var(--ink-border); padding-bottom: 14px; }
.market-section-heading h2 { margin: 9px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.market-section-heading p { max-width: 440px; margin: 0; font-weight: 650; }
.market-section-heading a { color: var(--text-dark); font-weight: 900; }
.card-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 42px 28px; align-items: start; scroll-margin-top: calc(var(--shell-pad-top) + 24px); }
.market-floor-cards { margin-top: 40px; }
/* The card market's two counters: its own tabs, whatever store the page was last dressed for. */
.market-page[data-store] .card-market-aisles { margin: 0; padding: 0 0 22px; }
.market-page[data-store] .card-market-aisles button { margin: 0; padding: 9px 14px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--white); box-shadow: none; color: var(--text-dark); font: inherit; font-weight: 900; letter-spacing: 0; }
.market-page[data-store] .card-market-aisles [aria-selected="true"] { background: var(--tint-blue); box-shadow: 3px 3px 0 var(--ink-shadow); }
.card-market-aisles .market-tab-timer { margin-left: 8px; }
.market-history { display: grid; gap: 12px; }
.market-transaction { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 18px; border: 3px solid var(--ink-border); border-radius: 10px; background: var(--white); box-shadow: 4px 4px 0 var(--ink-shadow); }
.market-transaction-kind { padding: 5px 8px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-blue); font-size: .68rem; font-weight: 1000; }
.market-transaction-kind.is-sale { background: var(--pastel-green); }
.market-transaction div { display: grid; gap: 3px; min-width: 0; }
.market-transaction a { color: var(--text-dark); font-weight: 950; overflow-wrap: anywhere; }
.market-transaction small { color: var(--text-muted); font-weight: 700; text-transform: capitalize; }
.market-transaction > strong { white-space: nowrap; }
.market-item-shelves { display: grid; gap: 26px; }
.market-item-category { display: grid; gap: 12px; }
.market-item-category > h3 { font-size: .78rem; font-weight: 1000; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.market-item { position: relative; overflow: hidden; padding: 26px; border: 3px solid var(--ink-border); background: var(--tint-yellow); box-shadow: 6px 6px 0 var(--ink-shadow); }
.market-item.is-locked { opacity: .75; }
.market-item.is-locked h3 { font-size: 1.6rem; }
.market-item-new { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border: 2px solid var(--ink-border); border-radius: 999px; background: #ff5d8f; color: #fff; font-size: .72rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); }
.market-sale-ribbon { position: absolute; top: 14px; right: -30px; width: 120px; padding: 5px 0; transform: rotate(35deg); background: #ff5d75; color: var(--text-dark); text-align: center; font-size: .8rem; font-weight: 950; letter-spacing: .08em; }
.market-regular-price { display: block; margin: 0 0 8px; color: var(--text-muted); font-weight: 750; }
.market-item h3 { font-size: 1.8rem; margin: 0 0 12px; }
.market-item-count { margin: -6px 0 12px; font-weight: 700; opacity: .75; }
.market-item button { padding: 12px 18px; border: 2px solid var(--ink-border); background: var(--pastel-yellow); font-weight: 900; cursor: pointer; }
.market-item button:disabled { cursor: default; opacity: .65; }
/* An owned item's button looks exactly like a locked one's: its own fade times the locked card's. */
.market-item.is-owned button:disabled { opacity: calc(.75 * .65); }
/* What a Vanity or Showcase item looks like, shown on hover (#1224): a cosmetic on the collector's own picture or ID,
   an object as a showcase draws it, a background as a showcase stands on it. */
.shelf-preview { position: fixed; z-index: 60; padding: 14px; border: 3px solid var(--ink-border); border-radius: 12px; background: var(--white); box-shadow: 6px 6px 0 var(--ink-shadow); pointer-events: none; }
.shelf-preview[hidden] { display: none; }
.shelf-preview.is-effect { padding: 18px 22px; }
.shelf-preview-scene { display: block; width: 280px; height: 170px; border-radius: 8px; }
.shelf-preview-picture { display: block; max-width: 240px; max-height: 200px; }
.shelf-preview-object { display: block; width: 200px; }
.shelf-preview-object > * { width: 100%; height: 100%; }
.wallet-balances { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.wallet-balances > div { display: grid; gap: 2px; padding: 12px 16px; border: 3px solid var(--ink-border); border-radius: 10px; background: var(--white); box-shadow: 4px 4px 0 var(--ink-shadow); }
.wallet-balances span { color: var(--text-muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.wallet-balances strong { font-size: 1.4rem; font-weight: 1000; }
.wallet-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.wallet-filters label { display: grid; gap: 4px; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.wallet-filters select { padding: 8px 10px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--white); font: inherit; font-weight: 800; }
#walletHistoryMore { margin-top: 12px; padding: 10px 16px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--pastel-peach); font: inherit; font-weight: 1000; cursor: pointer; box-shadow: 4px 4px 0 var(--ink-shadow); }
#walletHistoryMore:disabled { cursor: progress; opacity: .6; }

/* ====== The inspector: a booster taken off the shelf, its pack large and its cast laid out ====== */
.market-inspector-frame { background: var(--tint-yellow); }
.market-inspector-stage { display: grid; place-items: center; min-height: 360px; padding: 34px 24px 40px; background: radial-gradient(circle at 50% 36%, var(--white) 0, #fff0 62%), repeating-conic-gradient(from 0deg, var(--tint-yellow) 0 9deg, var(--tint-pink) 9deg 18deg); }
.market-inspector-stage .booster-pack { --pack-width: min(100%, 230px); filter: drop-shadow(0 22px 22px rgb(37 37 45 / .3)); }
.market-inspector-frame .market-sheet-head { display: grid; gap: 10px; }
.market-inspector-frame .market-flags { margin: 0; }
.market-inspector-frame .market-sheet-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.market-inspector-frame .market-sheet-kicker .collector { font-size: .74rem; text-transform: none; letter-spacing: 0; }
.market-inspector-description { margin: 0; font-size: .98rem; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.market-inspector-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.market-inspector-facts div { display: grid; gap: 2px; min-width: 96px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 10px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.market-inspector-facts dt { font-size: .62rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.market-inspector-facts dd { margin: 0; font-size: 1.15rem; font-weight: 1000; font-variant-numeric: tabular-nums; }
.market-inspector-frame .market-shelf-timer { justify-self: start; margin: 0; }
.market-inspector-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.market-inspector-actions button, .market-inspector-view { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 3px solid var(--ink); border-radius: 10px; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 950; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.market-inspector-actions button { background: var(--pastel-yellow); }
.market-inspector-actions button:disabled { opacity: .55; cursor: default; }
.market-inspector-view { background: var(--white); }
.market-inspector-view::after { content: '→'; }
.market-inspector-actions button:not(:disabled):hover, .market-inspector-view:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px); }
.market-inspector-actions :focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.market-inspector-cast { padding-top: 22px; border-top: 3px solid var(--ink); }
.market-inspector-cast h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.3rem; }
.market-inspector-cast h3 span { padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #ffe76b; font-size: .8rem; font-weight: 1000; }
.market-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
.market-cast-member { display: grid; gap: 6px; justify-items: center; min-width: 0; text-align: center; }
.market-cast-portrait { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: #ffd9ec; color: var(--ink); font-size: 2.4rem; font-weight: 1000; box-shadow: 4px 4px 0 var(--ink); }
.market-cast-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.market-cast-member b { font-size: .92rem; line-height: 1.15; overflow-wrap: anywhere; }
.market-inspector-nobody { margin: 0; padding: 22px; border: 3px dashed #8c8794; border-radius: 12px; text-align: center; font-weight: 800; color: var(--text-muted); }
.market-cast + .market-inspector-nobody { margin-top: 18px; padding: 12px; border-width: 2px; font-size: .82rem; }
.market-inspector-odds { padding-top: 22px; border-top: 3px solid var(--ink); }
.market-inspector-odds h3 { margin: 0 0 12px; font-size: 1.3rem; }
.market-inspector-odds ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.market-inspector-odds li { display: grid; gap: 2px; min-width: 96px; padding: 8px 12px; border: 2px solid var(--ink); border-left: 8px solid var(--rarity-color, #75818f); border-radius: 8px; background: var(--white); }
.market-inspector-odds li span { font-size: .62rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.market-inspector-odds li strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* The frame takes the open store's colour at its edge. */
.market-inspector-frame[data-store="general"] { border-color: #0b2cff; box-shadow: 10px 10px 0 #0b2cff; }
.market-inspector-frame[data-store="community"] { border-color: #5a3a1e; box-shadow: 10px 10px 0 #b86b3a; }
.market-inspector-frame[data-store="country"] { border-color: var(--country, #36496c); box-shadow: 10px 10px 0 var(--country, #36496c); }
.market-inspector-frame[data-store="shared"] { border-color: #c9a24a; box-shadow: 10px 10px 0 #8a1b2e; }
.market-inspector-frame[data-country="mongolistan"] { --country: #8a2a2a; }
.market-inspector-frame[data-country="pedalistan"] { --country: #23634a; }
.market-inspector-frame[data-country="tagoustan"] { --country: #1f5f74; }
.market-inspector-frame[data-country="andasmas"] { --country: #3b3594; }
.market-inspector-frame[data-country="boulemia"] { --country: #8a4b1f; }
.market-inspector-frame[data-country="merguez"] { --country: #b9461a; }
@media (max-width: 820px) {
    .market-inspector-frame { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
    .market-inspector-stage { position: static; min-height: 0; padding: 26px 18px 30px; }
    .market-inspector-stage .booster-pack { --pack-width: 170px; }
    .market-cast { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ====== The cart: beside the room on a wide screen, over it on a phone ====== */
.market-cart { position: sticky; top: calc(var(--shell-pad-top) + 12px); z-index: 20; border: 3px solid var(--ink-border); border-radius: 12px; background: var(--tint-yellow); box-shadow: 5px 5px 0 var(--ink-shadow); }
.market-cart summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 850; list-style: none; }
.market-cart summary::-webkit-details-marker { display: none; }
.market-cart summary::after { content: '+'; font-size: 1.4rem; }
.market-cart[open] summary::after { content: '−'; }
.market-cart summary > span { margin-left: auto; }
.market-cart summary strong { display: flex; align-items: center; gap: 10px; }
.market-cart-icon { font-size: 1.1rem; }
#cartCount { min-width: 28px; padding: 3px 7px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-yellow); text-align: center; font-size: .8rem; }
.market-cart-body { padding: 0 20px 16px; }
#cartLines { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.market-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 2px solid #ded9cd; }
.market-cart-line strong, .market-cart-line small { display: block; overflow-wrap: anywhere; }
.market-cart-line small { margin-top: 4px; color: var(--text-muted); }
.market-cart-line .market-cart-problem { color: var(--danger); font-weight: 800; }
.market-cart-quantity { display: flex; align-items: center; gap: 8px; }
.market-cart-quantity input { width: 62px; padding: 8px 4px; border: 2px solid var(--ink-border); border-radius: 5px; background: var(--white); color: var(--text-dark); text-align: center; font: inherit; font-weight: 800; }
.market-cart button { padding: 9px 12px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-blue); color: var(--text-dark); font-weight: 900; cursor: pointer; }
.market-cart .market-cart-remove, .market-cart .market-cart-clear { background: transparent; }
.market-cart-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 2px solid var(--ink-border); }
.market-cart #checkoutCart { background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); }
.market-cart button:disabled { opacity: .5; cursor: default; }
.market-cart :focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
#cartStatus:empty { display: none; }
#cartStatus { margin: 14px 0 0; font-weight: 700; }
.market-cart-empty { padding: 6px 0 18px; color: var(--text-muted); }
.market-cart-receipt { margin-top: 16px; padding: 18px 20px; border: 3px solid var(--ink-border); border-radius: 10px; background: var(--pastel-green); }
.market-cart-receipt p { margin: 0 0 10px; font-weight: 800; }
.market-cart-receipt a { display: inline-block; margin: 4px 18px 4px 0; color: var(--text-dark); font-weight: 850; }
.market-purchase-warning { width: min(460px, calc(100% - 32px)); padding: 24px; border: 3px solid var(--ink-border); border-radius: 14px; background: var(--tint-yellow); color: var(--text-dark); box-shadow: 8px 8px 0 var(--ink-shadow); }
.market-purchase-warning::backdrop { background: rgb(37 37 45 / .58); }
.market-purchase-warning h2 { margin: 0 0 10px; font-size: 1.65rem; }
.market-purchase-warning p { margin: 0; line-height: 1.5; font-weight: 700; }
.market-purchase-warning-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.market-purchase-warning button { padding: 10px 14px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--white); color: var(--text-dark); font-weight: 900; cursor: pointer; }
.market-purchase-warning [data-warning-confirm] { background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); }
.market-purchase-warning [data-warning-confirm].is-danger { background: var(--danger); color: var(--white); }
.market-purchase-warning :focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }

/* ====== By night (docs/design-system.md, Themes) ====== */
/* The street and the page's chrome follow the dark theme; the rooms are scenes and keep their colours, lit shops
   on a dark street. A storefront puts its lights on: its awning and its name's colour stay, lifted where the day's
   would sink into the dark, on a dark body. The Corner's cork, the Clubhouse's velvet and the back room are
   already their own colour, day or night: the night's default is written with `:where()` so theirs still wins. */
html[data-theme="dark"] .market-page { --kicker-bg: var(--text-dark); --kicker-ink: var(--bg-cream); }
/* The floor round a lit room is the street at night, not the room's own: the Clubhouse keeps its dark one, and
   the street, the card market and the ledgers had no floor by day. */
html[data-theme="dark"] .market-page[data-store="general"], html[data-theme="dark"] .market-page[data-store="community"], html[data-theme="dark"] .market-page[data-store="country"] { --floor-bg: var(--bg-subtle); }
/* Bouzoppmania by night (#1096): the chain store keeps its red, yellow and blue, on navy under its strip lights
   instead of white, and its blue is lifted where text or a line would sink into it. */
html[data-theme="dark"] .market-page[data-store="general"] { --ink: #eef0ff; --store-bg: #141838; --sign-bg: #141838; --sign-ink: #eef0ff; --store-border: #5872ff; --shelf-bg: #181d45; --tile-bg: #1f2557; --tile-border: #5872ff; --keeper-bg: #1f2557; --empty-border: #5872ff; }
html[data-theme="dark"] .market-page[data-store="general"] :is(.store-keeper, .store-keeper-line, .store-tools input, .store-tools select, .market-flag) { background: #262d66; color: var(--ink); }
html[data-theme="dark"] .market-page[data-store="general"] .store-keeper-line::before { background: #262d66; }
html[data-theme="dark"] .market-page[data-store="general"] :is(.store-sign-tagline, .market-offer-copy h3) { color: #8ea0ff; }
html[data-theme="dark"] .market-page[data-store="general"] .store-sign-name { color: #ff4f66; }
html[data-theme="dark"] .market-page[data-store="general"] .market-flag:is(.is-new, .is-reprint) { background: #ffe600; color: #25252d; }
html[data-theme="dark"] .market-page[data-store="general"] .market-flag.is-last { background: #e4002b; color: #fff; }
html[data-theme="dark"] .market-page[data-store="general"] .market-item { border-color: #5872ff; background: #1f2557; box-shadow: 6px 6px 0 #0b2cff; color: var(--ink); }
/* Its buttons by night are one kind, and a quiet one: a navy face a step above the shelf, ringed in the lifted
   blue, its shadow cast into the night rather than in electric blue, the chain's yellow kept for the lettering of
   what is chosen or bought. */
html[data-theme="dark"] .market-page[data-store="general"] :is(.store-aisles button, .market-offer-copy > button, .market-item button) { border-color: #5872ff; background: #262d66; box-shadow: 3px 3px 0 #080b24; color: #ffe600; }
html[data-theme="dark"] .market-page[data-store="general"] .store-aisles button:not([aria-selected="true"]) { color: var(--ink); }
html[data-theme="dark"] .market-page[data-store="general"] .store-aisles [aria-selected="true"] { border-color: #ffe600; }
/* Its spotlight by night (#1214): the backdrop still spins, navy on navy, and each reason keeps a hint of its day
   colour on the night's body instead of a pastel sheet the lifted ink would vanish into. */
html[data-theme="dark"] .market-page[data-store="general"] .market-spotlight { border-color: #5872ff; background: #181d45; box-shadow: 7px 7px 0 #0b2cff; }
html[data-theme="dark"] .market-page[data-store="general"] .market-spotlight::before { background: repeating-conic-gradient(#181d45 0 8deg, #262d66 8deg 16deg); }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="pinned"] { background: #2e2152; }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="close"] { background: #173a35; }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="last-call"] { background: repeating-linear-gradient(-45deg, #1f2557 0 18px, #3a1f45 18px 36px); }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="new"] { background: #2b2c45; }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="reprint"] { background: #1a2e5c; }
html[data-theme="dark"] .market-page[data-store="general"] .market-booster[data-spotlight="prerelease"] { background: radial-gradient(circle at 20% 30%, #26401f 0 30%, transparent 31%), radial-gradient(circle at 85% 80%, #403a1c 0 25%, transparent 26%), #1f2557; }
html[data-theme="dark"] .market-page[data-store="general"] :is(.market-offer-copy .market-custom-help, .market-prerelease) { background: #262d66; }
html[data-theme="dark"] .market-page[data-store="general"] .market-set-progress span { background: linear-gradient(90deg, #7bd88f var(--progress), #141838 0); }
/* The Royal Dispensary by night: a pharmacy open late, its white tiles gone to a deep indigo, the cross still lit,
   the jars dark glass catching the light, and its indigo lifted where a line or a word would sink into the dark. */
html[data-theme="dark"] .market-page[data-country="andasmas"] { --ink: #ecebff; --country: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store { border-color: #a39cf5; background: #15142b; box-shadow: 0 0 0 6px #15142b, 0 0 0 9px #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-sign { border-bottom-color: #a39cf5; background: #15142b; }
html[data-theme="dark"] .market-page[data-country="andasmas"] :is(.store-sign-name, .store-sign-tagline, .market-offer-copy h3, .market-empty) { color: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-sign-tagline { border-top-color: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-keeper { border-color: #4a4680; background: #1f1d3d; box-shadow: 0 6px 0 -3px #2a2852, 0 12px 0 -6px #36336b; color: var(--ink); }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-keeper::before { color: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-keeper::after { border-top-color: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] :is(.store-tools input, .store-tools select) { border-color: #a39cf5; background: #1f1d3d; color: var(--ink); }
html[data-theme="dark"] .market-page[data-country="andasmas"] .store-shelf { background: #15142b; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .market-booster::after { background: linear-gradient(180deg, #4b5a78, #2f3a52); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
html[data-theme="dark"] .market-page[data-country="andasmas"] .market-booster::before { border-color: rgba(163, 156, 245, .45); background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(180, 200, 230, .05) 40%, rgba(255, 255, 255, .16) 70%, rgba(180, 200, 230, .08)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 -22px 0 -16px rgba(163, 156, 245, .2), inset 0 20px 0 -14px #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .market-offer-copy { border-color: #a39cf5; background: #1f1d3d; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .market-offer-copy > button { border-color: #a39cf5; }
html[data-theme="dark"] .market-page[data-country="andasmas"] .market-empty { border-color: #a39cf5; }
html[data-theme="dark"] .market-page .store-aisle-head span { --kicker-bg: #25252d; --kicker-ink: #fff; }
html[data-theme="dark"] :where(.market-front) { --front-awning: repeating-linear-gradient(90deg, #d9d2e3 0 10px, #26282b 10px 20px); --front-bg: var(--white); --front-ink: var(--text-dark); --front-fringe: #d9d2e3; }
html[data-theme="dark"] .market-front[data-front="general"] { --front-bg: #171b3c; --front-ink: #ff4f66; }
html[data-theme="dark"] .market-front[data-front="community"] { --front-fringe: #25252d; }
html[data-theme="dark"] .market-front[data-front="general"] .market-front-small { color: #ffe600; }
html[data-theme="dark"] .market-landing-shop[data-front="general"] .market-landing-text { color: var(--text-dark); }
html[data-theme="dark"] .market-front[data-front="country"] { --front-awning: repeating-linear-gradient(90deg, var(--country-night, #8fa6d6) 0 12px, var(--white) 12px 24px); --front-bg: var(--white); }
html[data-theme="dark"] .market-front[data-front="country"] .market-front-name { color: var(--country-night, #8fa6d6); }
html[data-theme="dark"] .market-front[data-front="cards"] { --front-awning: repeating-linear-gradient(90deg, #5b84e8 0 12px, #1e2b3e 12px 24px); --front-bg: #1e2b3e; }
html[data-theme="dark"] .market-front[data-front="auction"] { --front-awning: repeating-linear-gradient(90deg, #b48cf0 0 12px, #3a2332 12px 24px); --front-bg: #3a2332; }
html[data-theme="dark"] .market-front[data-front="wallet"] { --front-awning: repeating-linear-gradient(90deg, #9a92a8 0 12px, #2a2733 12px 24px); --front-bg: #2a2733; }
/* The countries' colours lifted for the night, so a name reads on a dark front. */
html[data-theme="dark"] .market-front[data-country="mongolistan"] { --country-night: #e8807a; }
html[data-theme="dark"] .market-front[data-country="pedalistan"] { --country-night: #6fd39b; }
html[data-theme="dark"] .market-front[data-country="tagoustan"] { --country-night: #6fc6de; }
html[data-theme="dark"] .market-front[data-country="andasmas"] { --country-night: #a39cf5; }
html[data-theme="dark"] .market-front[data-country="boulemia"] { --country-night: #e3a063; }
html[data-theme="dark"] .market-front[data-country="merguez"] { --country-night: #ff8c5a; }

/* ====== Motion and small screens ====== */
.motion-reduced .market-booster .booster-pack, .motion-reduced .market-front { transition: none; }
.motion-reduced .store-marquee span, .motion-reduced .market-spotlight::before, .motion-reduced .market-shelf-timer { animation: none; }
@media (max-width: 700px) {
    /* On a phone the shop reaches nearly to the screen's edges (#981): the page's gutter, the floor's and the
       store's own no longer add up round it. */
    .market-page { margin-inline: -14px; padding: 16px 0 14px; }
    .market-page > :not(.market-floor) { margin-inline: 8px; }
    .market-floor { padding: 0; border-radius: 0; }
    .market-page .store { box-shadow: 4px 4px 0 var(--store-shadow); }
    .market-page[data-store] :is(.store-sign, .store-shelf, .store-aisle, .store-aisles, .store-tools) { padding-left: 12px; padding-right: 12px; }
    .market-page[data-store] .store-marquee { width: calc(100% + 24px); margin: 14px -12px 0; }
    .market-page[data-country="mongolistan"] .store-shelf, .market-page[data-country="tagoustan"] .store-shelf, .market-page[data-country="merguez"] .store-shelf { margin-left: 8px; margin-right: 8px; padding-left: 12px; padding-right: 12px; }
    .market-page[data-country="andasmas"] .store-sign { padding-left: 90px; }
    .market-page[data-country="andasmas"] .store-sign::before { left: 16px; width: 48px; height: 48px; }
    .market-street { margin: 0 -14px 20px; padding: 0 14px; }
    .market-tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .market-front { min-width: 136px; padding: 22px 12px 10px; }
    .market-hero h1 { font-size: 2.4rem; }
    .market-wallet { width: 100%; }
    .store-sign, .store-shelf, .store-aisle { padding-left: 16px; padding-right: 16px; }
    .store-aisles, .store-tools { padding-left: 16px; padding-right: 16px; }
    .store-marquee { width: calc(100% + 32px); margin: 14px -16px 0; }
    .market-section-heading { align-items: start; flex-direction: column; }
    .market-booster { gap: 18px; padding: 16px 15px 16px 18px; }
    .market-booster .booster-pack { --pack-width: 96px; }
    .market-spotlight { padding: 22px 14px; }
    .wallet-balances > div { flex: 1 1 100%; }
}
@media (max-width: 520px) {
    .market-booster { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 22px 16px 18px; text-align: center; }
    .market-booster .booster-pack { --pack-width: 128px; }
    .market-booster .market-offer-copy { display: grid; justify-items: center; width: 100%; }
    .market-offer-copy .market-custom-help { left: 50%; right: auto; transform: translateX(-50%); width: min(290px, calc(100vw - 48px)); }
    .market-flags { justify-content: center; }
    /* The country shops on a phone: a parcel keeps its label beside it, a menu line its price; the pigeonholes and the
       rack go two across. The chain store's name fits on one line of its sign. */
    .market-page[data-country="pedalistan"] .market-booster, .market-page[data-country="merguez"] .market-booster { grid-template-columns: auto minmax(0, 1fr); padding: 12px 10px; text-align: left; }
    .market-page[data-country="pedalistan"] .market-booster .market-offer-copy, .market-page[data-country="merguez"] .market-booster .market-offer-copy { display: grid; justify-items: start; }
    .market-page[data-country="merguez"] .market-offer-copy { grid-template-columns: minmax(0, 1fr); }
    .market-page[data-country="merguez"] .market-offer-copy > button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
    .market-page[data-country="tagoustan"] .booster-market-grid, .market-page[data-country="boulemia"] .booster-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-page[data-store="general"] .store-sign-name { font-size: clamp(1.3rem, 7vw, 4rem); }
    .market-transaction { grid-template-columns: auto 1fr; }
    .market-transaction > strong { grid-column: 2; }
}
@media (max-width: 600px) {
    .market-cart summary { padding: 12px; }
    .market-cart-body { padding: 0 12px 12px; }
    .market-cart-line { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .market-cart-quantity { grid-column: 1; grid-row: 2; }
    .market-cart-remove { grid-column: 2; grid-row: 2; }
    .market-cart-footer { flex-wrap: nowrap; }
    .market-cart-footer #checkoutCart { flex: 1; padding: 10px 8px; font-size: .82rem; white-space: nowrap; }
    .market-cart-footer .market-cart-clear { padding: 6px; border: 0; box-shadow: none; font-size: .75rem; }
}

/* The sign on a store's door while it is shut: the High Pass Post at dinner (#1162). */
.store-closed-sign { grid-column: 1 / -1; justify-self: center; max-width: 26rem; margin: 24px auto; padding: 22px 28px; border: 3px solid currentColor; border-radius: 6px; background: var(--surface, #fffdf5); box-shadow: 4px 4px 0 currentColor; text-align: center; transform: rotate(-2deg); }
.store-closed-sign p { margin: 0; font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.store-closed-sign p + p { margin-top: 8px; font-weight: 700; font-size: 1rem; text-transform: none; letter-spacing: 0; }