/* poke-pack.rip theme: the card shop after hours (see DESIGN.md).
   Every page stands on the shop's dark back wall. The light and the materials
   belong to the objects the page sheets build (the pack wall, the counter,
   the glass case, the playmat, the receipt); the chrome in this file stays
   plain: ink on the wall, hairlines, space. Orange is the price gun, used for
   price stickers and the one primary action on a screen, and nothing else.
   Bricolage Grotesque sets the signage and the UI, Antonio prints prices,
   Share Tech Mono prints the receipt. On a phone the sections live in a
   bottom tab bar. Loaded after app.css. The page sheets in css/pages/ load
   after this one; the holo sheets load last and are untouched. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The price gun's face. Prices are figures and Latin words, so one subset. */
@font-face {
  font-family: "Antonio";
  src: url("../assets/fonts/antonio-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The till's thermal printer. */
@font-face {
  font-family: "Share Tech Mono";
  src: url("../assets/fonts/share-tech-mono-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: dark;
  /* The shop (DESIGN.md colours). */
  --wall: #221e1a;
  --wall-dark: #161411;             /* header, footer, tab bar, dialogs, inputs */
  --line: #38322b;
  --line-2: #4d453c;
  --ink: #f1ebe0;
  --ink-2: #c4b9a8;
  --muted: #a39887;
  --faint: #968b7b;                 /* the quietest text; still 4.5:1 on the wall and on --surface */
  --orange: #ff6b2b;
  --orange-hover: #ff7c42;
  --on-orange: #1d0d04;
  /* Materials, for the objects the page sheets build. Never on controls. */
  --paper: #f2efe6;
  --label: #e9e5da;
  --print: #1a1714;
  --print-2: #5a544a;
  --counter: #463e36;
  --felt: #110e0b;
  --mat: #1c1e1f;
  --thermal: #f3f1ea;
  --tag: #f7f6f1;
  --tag-ink: #17130f;

  /* The names the rest of the site was written against, mapped onto the shop. */
  --black: var(--wall-dark);        /* dark text on ink, the darkest ground */
  --bg: var(--wall);
  --surface: #2a2520;               /* solid steps up from the wall, never see-through */
  --surface-2: #312b25;
  --surface-3: #3a332c;
  --well: #1b1815;                  /* a sunk surface for real objects: binder pages, stages */
  --rip: var(--orange);
  --rip-hover: var(--orange-hover);
  --on-rip: var(--on-orange);
  --gold: #f2c14e;                  /* rarity and tier marks only; money is the coin and ink */
  --gold-2: #f8d47a;
  --sel: var(--ink);
  --focus: var(--ink);
  --hl: 241 235 224;                /* r g b of the ink, for the odd hairline that still mixes it */
  --ok: #5bc98a;
  --bad: #ff6b6b;
  /* js/fx.js sets this on body from the featured wrapper. The page itself no
     longer takes the tint; this default is the pendant light's warm white. */
  --ambient: 255 214 160;
  --r-sm: 6px;                      /* controls: buttons, inputs, menus, dialogs */
  --r: 8px;                         /* surfaces */
  --r-lg: 8px;                      /* surfaces top out at 8px; real objects keep their own corner */
  --shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.75);
  --gutter: clamp(16px, 3vw, 40px);
  --tabbar: 0px;                    /* height of the phone tab bar, set below 960px */
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --display: var(--font);
  --display-weight: 800;
  --display-stretch: 100%;
  /* app.css still asks for --mono in a few places; figures use the body face
     with tabular numerals. The receipt has its own face, below. */
  --mono: var(--font);
  --price-font: "Antonio", "Bricolage Grotesque", sans-serif;
  --receipt-font: "Share Tech Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scrollbar-color: var(--line-2) var(--wall); }
/* A column, so on a short page the footer still meets the tab bar or the
   bottom edge instead of leaving a strip of wall under it. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > .wrap { flex: 1 0 auto; }
body > .site-footer { flex: none; }
body, body.on-home, body.on-auth, body.on-collection {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 430;
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--black); }
button, a, summary { -webkit-tap-highlight-color: rgb(var(--hl) / 0.08); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-150%); padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--black); font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }
.noise { display: none; }
h1, h2, h3 { text-wrap: balance; }
/* Headings take the optical size of their own point size; only signage asks
   for the display cut. */
h1, h2, h3, h4, .display {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.01em;
}
b, strong { font-weight: 650; }
.lede, .blurb, .inspect-info p { color: var(--ink-2); }

/* Figures: tabular numerals in the same face. */
.balance, .cost, .stat b, .pull-value, .rail-set-copy small, .bulk-result, .box-progress b, .price-card, .coin-count {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* The house coin beside an amount (js/money.js). It scales with the type it sits in. */
.coin-i { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.28em; vertical-align: -0.18em; }

/* Small captions: sentence case in the body face. app.css set these as
   tracked uppercase in a mono; none of that survives here. */
.kicker, .home-set-picker > span,
.soon, .live-tag, .chip, .tag, .friends-kicker, .friends-label, .radio-kicker, .brand-sub, .rail-era-title small, .rail-era-count, .home-strip-label, .home-hit-label, .stat span {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
/* Badges are small, inert and rare. */
.soon, .live-tag {
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 600;
}
.live-tag { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; padding-inline: 0; color: var(--muted); }
.live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ---- Signage and titles -------------------------------------------------- */
/* The shop's sign: a set's name on its own page, the hit's name in the
   opening. The largest thing on a page, and only on pages about a set or a pull. */
.signage {
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 80;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* Set names on the shop and collection pages keep their big sign until those
   pages are rebuilt (css/pages/packs.css and collection.css size them). */
.hero h1, .bulk-head h1 {
  font-size: clamp(38px, 5vw, 60px); line-height: 0.95; letter-spacing: -0.03em;
  font-weight: 800; font-variation-settings: "opsz" 96;
  margin: 0 0 8px;
}
/* Every other page opens with a plain title: cart, settings, social, notes,
   account, all sets, gear, grading, the casino. */
.wrap > section > .section-head:first-child h2, .page-title {
  font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.015em;
  font-weight: 700; font-variation-settings: "opsz" 48;
  margin: 0 0 6px;
}
.section-head { margin: 0 0 20px; align-items: end; gap: 16px; }
.section-head h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.section-head p { color: var(--muted); font-size: 14px; }
.wrap > section > .section-head:first-child { margin-bottom: 28px; padding-bottom: 0; border-bottom: 0; }

/* ---- Header -------------------------------------------------------------- */
/* The mark and name, the sections as plain words, then the purse: the
   balance, a quiet Claim, the level and the trainer. Nothing glows. */
.site-header {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 24px;
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  background: var(--wall-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.brand { gap: 10px; min-height: 44px; }
.brand-logo, .brand-logo.lg { box-shadow: none; border-radius: var(--r-sm); }
.brand-logo { width: 32px; height: 32px; flex-basis: 32px; }
.brand-name { font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; font-variation-settings: "opsz" 24; }
.brand-name span { color: inherit; }
.brand-sub { display: none; }

.nav {
  justify-self: start; gap: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
}
.nav-btn, .nav-more > summary {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 12px; border-radius: 0;
  color: var(--ink-2); background: transparent;
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0;
  transition: color 0.15s ease;
}
.nav-btn:hover, .nav-more > summary:hover { color: var(--ink); background: transparent; }
.nav-btn.active, .nav-btn.active:hover { color: var(--ink); background: transparent; }
/* The current section: ink, and a 2px ink line under the word. When it lives
   in More, the line goes under More. */
.nav > .nav-btn.active::after, .nav > .nav-more:has(.nav-btn.active) > summary::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; background: var(--ink);
}
.nav > .nav-more:has(.nav-btn.active) > summary { color: var(--ink); }
.nav-more { position: relative; }
.nav-more > summary { cursor: pointer; list-style: none; gap: 6px; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.nav-more[open] > summary { color: var(--ink); background: transparent; }
.nav-more-list {
  position: absolute; right: 0; top: calc(100% + 11px); z-index: 35;
  display: grid; gap: 0; min-width: 200px; padding: 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--wall-dark); box-shadow: var(--shadow);
}
.nav-more-list .nav-btn { justify-content: flex-start; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 4px; font-size: 15px; }
.nav-more-list .nav-btn:hover { background: var(--surface); color: var(--ink); }
.nav-more-list .nav-btn.active { background: var(--surface-2); color: var(--ink); }

.header-right { gap: 10px; }
/* The friends list and the radio (js/social.js, js/radio.js), as plain icons. */
.header-tools { display: flex; align-items: center; gap: 0; }
.balance {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: var(--ink); font-size: 16px; font-weight: 600; white-space: nowrap;
  flex: none;
}
.balance .coin-i { width: 22px; height: 22px; margin-right: 8px; vertical-align: 0; }
/* A quiet outline: the daily coins are a nicety, not the page's action. */
.claim {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.claim:hover:not(:disabled) { border-color: var(--ink-2); background: transparent; }
/* A flex item drops its trailing space, so the gap after "Claim" is a margin. */
.claim .btn-word { margin-right: 0.28em; }
.claim:disabled {
  opacity: 1; cursor: default; background: transparent; color: var(--muted);
  border-color: var(--line); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.auth-entry { min-width: 0; min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.trainer-chip {
  gap: 10px; max-width: 210px; min-height: 44px; padding: 0 2px;
  border: 0; border-radius: var(--r-sm); background: none;
}
.trainer-chip:hover { background: none; }
.trainer-chip:hover .trainer-chip-copy b { text-decoration: underline; text-underline-offset: 3px; }
.trainer-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.trainer-chip-copy b { font-size: 14px; font-weight: 600; }
.trainer-chip-copy small { margin-top: 2px; color: var(--ink-2); font-size: 12px; }

/* ---- Phone tab bar --------------------------------------------------------
   Five thumb-sized targets on the bottom edge, below 960px, where the header
   drops its words. z-index sits under the dialogs (40). */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--wall-dark);
  border-top: 1px solid var(--line);
}
.tabbar .nav-btn, .tabbar .nav-more > summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; min-height: 52px; padding: 4px 2px; border-radius: 0;
  color: var(--ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.tabbar svg {
  width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar .nav-btn.active, .tabbar .nav-more[open] > summary, .tabbar .nav-more:has(.nav-btn.active) > summary { color: var(--ink); }
/* The current tab: a short ink line on the bar's top edge. */
.tabbar > .nav-btn.active::before, .tabbar > .nav-more:has(.nav-btn.active) > summary::before {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 28px; height: 2px; margin-left: -14px; background: var(--ink);
}
.tabbar .nav-btn::after { content: none; }
.tabbar .nav-more { position: static; }
.tabbar .nav-more > summary::after { content: none; }
.tabbar .nav-more-list {
  right: 8px; left: 8px; top: auto; bottom: calc(100% + 6px);
  grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px;
}
.tabbar .nav-more-list .nav-btn {
  flex-direction: row; justify-content: flex-start; gap: 12px;
  min-height: 48px; padding: 0 12px; border-radius: 4px;
  font-size: 15px; font-weight: 500; text-align: left;
}
/* Friends and the radio, for when the header has no room for their icons. */
.tabbar .more-dock { display: none; }

/* ---- Layout -------------------------------------------------------------- */
.wrap, body.on-home .wrap, body.on-shop .wrap, body.on-collection .wrap {
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  padding: 36px 0 96px;
}
/* A block that runs edge to edge on a phone (stages, shelves); a normal block
   above 720px. */
@media (max-width: 720px) {
  .bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}

/* ---- Buttons ------------------------------------------------------------- */
/* Primary: orange, one per screen, the same mark as the price. Secondary: an
   outline. Anything quieter is an underlined word. Hover changes colour,
   never size. */
.ghost, .solid, .buy {
  border-radius: var(--r-sm); font-weight: 650; font-size: 15px; letter-spacing: 0;
  padding: 10px 18px; min-height: 44px; box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.solid, .buy, a.solid { position: relative; background: var(--rip); color: var(--on-rip); border: 1px solid transparent; }
.solid:hover:not(:disabled), .buy:hover:not(:disabled) { background: var(--rip-hover); }
.solid:disabled, .buy:disabled { opacity: 0.45; }
.ghost, a.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.ghost:hover:not(:disabled) { background: transparent; border-color: var(--ink-2); }
.ghost:disabled { opacity: 1; color: var(--faint); border-color: var(--line); background: transparent; }
.ghost.accent { border-color: var(--line-2); color: var(--ink); }
.ghost.sm, .solid.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm); }
.link-btn, .text-btn {
  color: var(--ink); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--muted);
}
.link-btn:hover, .text-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---- Controls ------------------------------------------------------------ */
.search, .filter, select.filter, .field input, .field textarea, .friends-add input,
.chat-form input, .dm-form input, .comment-form textarea {
  background: var(--wall-dark); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--ink); box-shadow: none;
  min-height: 44px; font-size: 15px;
}
.search:focus, .filter:focus, .field input:focus, .field textarea:focus, .friends-add input:focus,
.chat-form input:focus, .dm-form input:focus, .comment-form textarea:focus {
  border-color: var(--ink); background: var(--wall-dark); box-shadow: 0 0 0 1px var(--ink); outline: none;
}
select.filter option { background: var(--wall-dark); color: var(--ink); }
.search::placeholder, .filter::placeholder, .field input::placeholder, .field textarea::placeholder,
.friends-add input::placeholder, .chat-form input::placeholder, .dm-form input::placeholder,
.comment-form textarea::placeholder { color: var(--faint); }
.field textarea, .comment-form textarea { min-height: 96px; }

/* Segmented controls (2 to 4 choices): square, one outline, hairlines
   between, the chosen one in ink. */
.seg, .auth-tabs, .friends-tabs, .pc-ranges {
  display: inline-flex; gap: 0; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: transparent;
}
.seg-btn, .auth-tab, .friends-tabs button, .pc-range {
  border: 0; border-radius: 0; background: transparent; min-height: 40px; padding: 0 14px;
  color: var(--ink-2); font-weight: 560; font-size: 14px; box-shadow: none;
}
:is(.seg-btn, .auth-tab, .friends-tabs button, .pc-range) + :is(.seg-btn, .auth-tab, .friends-tabs button, .pc-range) {
  border-left: 1px solid var(--line-2);
}
/* The ends follow the outline's corner (no overflow clip, so focus rings show whole). */
:is(.seg, .auth-tabs, .friends-tabs, .pc-ranges) > :first-child { border-radius: 5px 0 0 5px; }
:is(.seg, .auth-tabs, .friends-tabs, .pc-ranges) > :last-child { border-radius: 0 5px 5px 0; }
:is(.seg, .auth-tabs, .friends-tabs, .pc-ranges) > :only-child { border-radius: 5px; }
.seg-btn:hover, .auth-tab:hover, .friends-tabs button:hover, .pc-range:hover { color: var(--ink); }
.seg-btn.on, .auth-tab.on, .friends-tabs button.on, .pc-range.on {
  background: var(--ink); color: var(--black); box-shadow: none;
}
.acct-dot { background: var(--ink); color: var(--black); }

/* Word pickers (sets, eras, account tabs, filters): a row of words, the
   chosen one in ink with a 2px ink line under it. Never a row of pills. */
.acct-tab, .rarity-chip, .pick-chip, .title-chip, .stat-toggles label, .shop-quick-set {
  border: 0; border-radius: 0; min-height: 44px; padding: 0 8px;
  background: transparent; color: var(--ink-2); font-weight: 560; font-size: 14px;
  box-shadow: none;
}
:is(.acct-tab, .rarity-chip, .pick-chip, .home-set-option, .shop-quick-set):hover { background: transparent; color: var(--ink); }
.acct-tab.on, .rarity-chip.on, .pick-chip.on, .title-chip.on, .shop-quick-set.active {
  background: transparent; color: var(--ink);
}
/* The page sheets draw the line for the pickers they own; these have none. */
.pick-chip.on { box-shadow: inset 0 -2px 0 var(--ink); }
.rarity-chip.on *, .pick-chip.on * { color: inherit; }
.title-chip.on b { color: inherit; }

/* Switches: a track, an ink thumb track when on. */
.switch { border-radius: 999px; background: var(--surface-3); border: 1px solid transparent; box-shadow: none; }
.switch::after { background: var(--ink-2); box-shadow: none; }
.toggle-row input:checked ~ .switch { background: var(--ink); border-color: var(--ink); }
.toggle-row input:checked ~ .switch::after { background: var(--black); }
.check-row input, .radio-vol input { accent-color: var(--ink); }

/* ---- Surfaces ------------------------------------------------------------ */
/* Where a block really is a separate thing, it sits on a solid step up from
   the wall with a hairline: no see-through fills, no gradients, no drop
   shadows. Shadows belong to objects (packs, cards) and to menus that float. */
.panel, .stat, .shop-rail, .rail-era, .home-hit,
.home-strip, .lounge-panel,
.bulk-browse, .bulk-pulse, .binder-page, .binder-spread .binder-page:last-child,
.bulk-empty, .need-account, .set-bar, .price-card,
.notes-entry, .profile-hero, .dm-thread,
.acct-hero, .set-ring, .pull-row, .share-row,
.look-preview, .look-card, .auth-card, .thumbs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
}
.rail-era[open] { background: var(--surface); }
.stat, .pull-row, .set-ring { background: var(--surface); border-color: transparent; }
.stat b { font-weight: 650; }
.set-ring.done { background: var(--surface-2); }
.pocket { border-radius: var(--r-sm); }
/* Real objects sit in a well, a shade darker than the wall. */
.binder-page, .binder-spread .binder-page:last-child, .thumbs, .price-card { background: var(--well); border-color: var(--line); }
.binder-slot { border-radius: var(--r-sm); }

/* ---- Dialogs, menus, toast ----------------------------------------------- */
/* Anything that opens over the page: the wall's darker shade, a line-2
   border, a 6px corner. */
.sheet, .picker {
  background: var(--wall-dark);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}
#overlay, #overlay.dealing { background: var(--wall-dark); }
#inspect { background: var(--wall-dark); }
#price-dialog { background: var(--wall-dark); }
#overlay .overlay-actions .solid { color: var(--on-rip); background: var(--rip); border-color: var(--rip); }
#overlay .overlay-actions .solid:hover { background: var(--rip-hover); }
#overlay .overlay-actions .solid:disabled { opacity: 0.45; cursor: default; }
#overlay .overlay-actions .ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
#overlay .overlay-actions .ghost.accent { background: transparent; border-color: var(--ink-2); color: var(--ink); }
.overlay .spread-head h2 { text-wrap: balance; }
.spread-card { border-radius: var(--r-sm); }
.thumbs { background: transparent; border: 0; }
.thumb.current { outline-color: var(--ink); }
.chip { border-radius: 999px; font-weight: 650; font-size: 11px; }
.chip.new { background: var(--ink); color: var(--black); }
.toast {
  bottom: calc(22px + var(--tabbar));
  background: var(--wall-dark); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); box-shadow: var(--shadow); font-weight: 560;
}

/* ---- Price sticker and price tag ------------------------------------------
   The price gun. A sticker (orange) goes on packs and sealed product; a tag
   (white card stock) goes on singles: cards in the case, in the collection,
   in a slab. Antonio prints these and nothing else. Size them with
   font-size; .tilt (or --tilt) lands them at the angle a hand leaves.
   <span class="price-sticker">6 <small>coins</small></span> */
.price-sticker, .price-tag {
  display: inline-flex; align-items: baseline; gap: 0.16em;
  padding: 0.2em 0.36em 0.14em; border-radius: 2px;
  font-family: var(--price-font); font-size: 20px; font-weight: 700; line-height: 1;
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--tilt, 0deg));
}
.price-sticker { background: var(--orange); color: var(--on-orange); }
.price-tag { background: var(--tag); color: var(--tag-ink); }
.price-sticker small, .price-tag small { font-size: 0.5em; font-weight: 700; }
.price-sticker.tilt { --tilt: -3deg; }
.price-tag.tilt { --tilt: -2deg; }

/* ---- Footer -------------------------------------------------------------- */
/* Laid out in css/pages/extras.css. */
.site-footer { border-top: 1px solid var(--line); background: var(--wall-dark); color: var(--ink-2); }

/* ---- Motion ---------------------------------------------------------------
   Everything here answers the player or shows a change. It all runs on
   transform, opacity or filter, and switches off under prefers-reduced-motion
   and Settings → motion off (body.no-motion). Endless loops are held by
   js/fx.js (.fx-held) when the page is idle or in the background. */
/* Changing page: a short fade, nothing slides. */
.wrap { transition: opacity 0.16s ease; }
.wrap.is-switching { opacity: 0; }

/* Progress bars are drawn at their value; nothing fills in on arrival. */
.dex-bar { height: 4px; border-radius: 2px; background: var(--surface-3); }
.dex-bar span { background: var(--ink); }

/* The card inspector opens with a spin, like a card being turned over. */
#inspect:not(.hidden) .inspect-art {
  animation: fx-card-in 0.7s var(--ease-out) both;
  transform-style: preserve-3d;
}
#inspect:not(.hidden) .inspect-info { animation: fx-rise 0.5s var(--ease-out) 0.15s both; }
@keyframes fx-card-in {
  from { transform: perspective(900px) rotateY(-160deg) scale(0.7); opacity: 0; }
  60% { opacity: 1; }
  to { transform: perspective(900px) rotateY(0) scale(1); }
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } }

/* Looping effects hold still while scrolled out of view, and each endless
   loop while the window is in the background or idle (js/fx.js). */
.fx-paused, .fx-paused *, .fx-paused::before, .fx-paused::after,
.fx-paused *::before, .fx-paused *::after,
.fx-held, .fx-held::before, .fx-held::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wrap { transition: none; }
  #inspect:not(.hidden) .inspect-art, #inspect:not(.hidden) .inspect-info { animation: none; }
}
body.no-motion #inspect:not(.hidden) .inspect-art, body.no-motion #inspect:not(.hidden) .inspect-info { animation: none; }

/* Avatars without a picture sit on the surface. */
.user-face { background: var(--avatar, var(--surface-3)); }
.user-face.empty { background: var(--surface-3); color: var(--ink-2); }

/* ---- Responsive ---------------------------------------------------------- */
/* Narrow desktops: the trainer keeps the avatar and loses the words beside
   it (the full purse with a cart icon needs 1330px beside the section words),
   then the brand keeps its mark, so the section words never squeeze. */
@media (max-width: 1340px) {
  .trainer-chip-copy { display: none; }
  .trainer-chip { padding: 0 5px; }
}
@media (max-width: 1100px) {
  .site-header { gap: 8px; }
  .brand-copy { display: none; }
  .nav-btn, .nav-more > summary { padding: 0 7px; }
  .nav > .nav-btn.active::after, .nav > .nav-more:has(.nav-btn.active) > summary::before { left: 7px; right: 7px; }
  .header-right { gap: 4px; }
}
@media (max-width: 960px) {
  :root { --tabbar: calc(64px + env(safe-area-inset-bottom)); }
  .site-header > .nav { display: none; }
  .brand-copy { display: block; }
  .tabbar { display: grid; }
}
@media (max-width: 720px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand . tools";
    gap: 8px; min-height: 60px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  }
  .brand-name { font-size: 16px; }
  .brand-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .header-right { gap: 4px; }
  /* No room in the top bar on a phone: friends and the radio move to More. */
  .header-tools .friends .friends-peek, .header-tools .radio .radio-peek { display: none; }
  .tabbar .more-dock { display: flex; }
  .balance { font-size: 15px; }
  .balance .coin-i { width: 20px; height: 20px; margin-right: 6px; }
  .claim { padding: 0 11px; font-size: 13px; }
  .claim .btn-word { display: inline; }
  .claim:disabled .btn-word { display: none; }
  .lvl-read { min-width: 40px; }
  .trainer-chip { padding: 0; }
  .wrap, body.on-home .wrap, body.on-shop .wrap, body.on-collection .wrap {
    width: calc(100% - 32px); padding-top: 18px; padding-bottom: calc(40px + var(--tabbar));
  }
  .wrap > section > .section-head:first-child { margin-bottom: 20px; }
  .hero h1, .bulk-head h1 { font-size: clamp(34px, 9.5vw, 44px); }
  .section-head h2 { font-size: 22px; }
  .ghost, .solid, .buy { min-height: 46px; }
  .auth-entry { min-height: 44px; }
}
/* The name needs room beside the purse; below this the mark speaks alone. */
@media (max-width: 480px) {
  .brand-copy { display: none; }
  .brand { gap: 0; }
}
/* With the cart icon in the bar too, the claim drops its word on small phones
   (its aria-label still says "Claim 100 daily coins"). */
@media (max-width: 375px) {
  .header-right:has(.cart-link:not(.hidden)) .claim .btn-word { display: none; }
}
@media (max-width: 359px) {
  .site-header { padding-inline: 10px; }
  .header-right { gap: 2px; }
  .claim { padding: 0 8px; }
  .balance .coin-i { margin-right: 4px; }
  .lvl-read { min-width: 36px; padding: 0 2px; }
}