/* Buybacks — /buybacks (cards) and /buybacks/{uuid} (detail). last13's
 * pieces in the theme-v2 tokens; the seller chip, TEST stamp, heart and copy
 * button come from pkg-browse.css, the sell-offer builder from
 * pkg-selling.css. Every class is sf-bb-*. Markup: storefront/buybacks/*. */

/* ---------- Card ---------- */
.sf-bb-card .sf-card-art { overflow: hidden; }
.sf-bb-flag { position: absolute; top: 10px; right: 10px; z-index: 4; padding: 4px 8px; font: 700 10.5px/1.3 'Noto Sans Thai', sans-serif; background: #0a0014e6; border: 1px solid #ff006e99; color: #ff5c9d; box-shadow: 0 4px 12px #0008; }
.sf-bb-link { color: inherit; }
.sf-bb-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sf-bb-link:hover, .sf-bb-link:focus-visible { color: var(--v2-accent); }
.sf-bb-code { font: 700 11px/1 var(--v2-mono); letter-spacing: .5px; color: var(--sf-code); }
.sf-bb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; padding: 9px 0; border-top: 1px dashed #ffffff1a; border-bottom: 1px dashed #ffffff1a; }
.sf-bb-stats dt { font-size: 10px; color: var(--v2-muted); }
.sf-bb-stats dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 4px; font: 700 15px/1.2 var(--v2-mono); white-space: nowrap; }
.sf-bb-stats dd .icon { width: 12px; height: 12px; color: var(--v2-accent); align-self: center; }
.sf-bb-stats dd small { font: 600 10px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
.sf-bb-stats dd.is-price { color: var(--sf-price); }
.sf-bb-card .sf-tiers { margin-top: 2px; }
.sf-bb-cta { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.sf-bb-cta .button { flex: 1; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; font-size: 12px; }
.sf-bb-cta .button .icon { width: 16px; height: 16px; }

/* ---------- Detail ---------- */
.sf-bb-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.sf-bb-top .sf-crumbs { margin-bottom: 0; }
.sf-bb-locked { margin: 0 0 20px; }
.sf-bb-stage { overflow: hidden; }
.sf-bb-stage .sf-bb-game { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: 700 11px/1.2 var(--v2-mono); letter-spacing: .5px; text-transform: uppercase; background: #0a0014e6; border: 1px solid #ffffff2e; box-shadow: 0 4px 12px #0008; }
.sf-bb-stage .sf-bb-game img, .sf-gallery-stage:hover .sf-bb-game img { width: auto; height: 13px; aspect-ratio: auto; filter: none; transform: none; }
.sf-bb-zoom { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 12px; font-weight: 600; background: #0a0014e6; border: 1px solid #00f0ff66; color: var(--v2-text); box-shadow: 0 6px 16px #0009; transition: border-color .2s, color .2s; }
.sf-bb-zoom .icon { width: 15px; height: 15px; fill: none; stroke: var(--v2-accent); stroke-width: 2; stroke-linecap: round; }
.sf-bb-zoom:hover { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-bb-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sf-bb-title .sf-bb-code { padding: 5px 9px; font-size: 13px; border: 1px solid #00f0ff66; background: #00f0ff0d; }
.sf-bb-title .sf-brw-copy { margin-left: 0; }
.sf-bb-sum { margin-top: 4px; }
.sf-bb-shop { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--v2-line); }
.sf-bb-shop .sf-shop-logo { width: 48px; height: 48px; font-size: 18px; }
.sf-bb-shop small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-bb-shop b { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.sf-bb-shop b .icon { flex: none; width: 15px; height: 15px; color: #3ee8a0; }
.sf-bb-shop > .icon { width: 16px; height: 16px; color: var(--v2-accent); }
a.sf-bb-shop[href]:hover b { color: var(--v2-accent); }
.sf-bb-favform { margin-top: 16px; }
.sf-bb-sum + .sf-panel, .sf-bb-sum ~ .sf-panel { margin-top: 18px; }
.sf-bb-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-bb-tiers li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-bb-tiers li b { display: block; font-size: 14px; }
.sf-bb-tiers li small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-bb-tiers strong { font: 700 18px var(--v2-mono); color: var(--sf-price); white-space: nowrap; text-align: right; }
.sf-bb-tiers strong small { display: inline; margin-left: 3px; font: 600 11px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
.sf-bb-mine { margin: 14px 0 0; }

@media (max-width: 680px) {
  .sf-bb-flag { top: 7px; right: 7px; padding: 3px 6px; font-size: 9.5px; }
  .sf-bb-stats dd { font-size: 13px; }
  .sf-bb-cta .button { min-height: 38px; padding: 8px; font-size: 11px; gap: 6px; }
  .sf-bb-cta .button .icon { display: none; }
  .sf-bb-card .sf-tiers { display: none; }
  .sf-bb-stage .sf-bb-game { top: 10px; right: 10px; }
  .sf-bb-zoom { left: 10px; bottom: 10px; }
  .sf-bb-tiers strong { font-size: 16px; }
}

/* ---------- Game drop-down beside the search (owner 2026-10-08) ----------
   buybacks/_game-pick: replaces the "ทั้งหมด | Digimon" chip row; the game is
   component state, never ?game= in the address. Same height and hairline as
   the search box it sits against; the list = the deck builder's format list
   (tick, cyan on the current row) with each game's logo on a white plate. */
.sf-bb-find { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.sf-bb-find .sf-search-inline { flex: 0 1 auto; width: 320px; min-width: 0; }
.sf-bb-toolbar { justify-content: flex-end; }
.sf-gpick { position: relative; flex: 0 0 auto; display: flex; }
.sf-gpick-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 260px; padding: 0 10px 0 8px;
  background: #ffffff06; border: 1px solid #ffffff24; color: var(--sf-text); font: 700 13px/1.2 'Noto Sans Thai', sans-serif; cursor: pointer;
  transition: border-color .15s, background .15s; }
.sf-gpick-btn:hover, .sf-gpick-btn[aria-expanded="true"] { border-color: var(--sf-action); background: var(--sf-action-soft); }
.sf-gpick-btn:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-gpick-btn .sf-gpick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-gpick-all { width: 18px; height: 18px; color: var(--sf-action); flex: none; }
.sf-gpick-caret { width: 16px; height: 16px; flex: none; color: var(--sf-action); transition: transform .2s; }
.sf-gpick-btn[aria-expanded="true"] .sf-gpick-caret { transform: rotate(180deg); }
/* Logos: black-ink ones vanish on the dark theme, so every logo sits on a white plate
   (a logo drawn on its own solid colour paints the plate that colour — HeadLogo bg). */
.sf-gpick-logo { flex: none; display: grid; place-items: center; width: 52px; height: 26px; padding: 2px 4px; background: var(--logo-bg, #fff); }
.sf-gpick-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-gpick-logo.is-all { background: #ffffff0d; border: 1px solid var(--sf-border); }
.sf-gpick-logo.is-all .icon { width: 16px; height: 16px; color: var(--sf-action); }
/* links too: /play/{game}/report's game box (each game its own page) */
.sf-gpick-list a { text-decoration: none; color: inherit; }
.sf-gpick.is-right .sf-gpick-list { left: auto; right: 0; }
.sf-gpick-list { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; min-width: max(100%, 260px); max-height: min(60vh, 420px); overflow: auto;
  list-style: none; margin: 0; padding: 4px; background: #160d27; border: 1px solid var(--sf-action); box-shadow: 0 16px 40px #000c; }
.sf-gpick-list :is(button, a) { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; text-align: left;
  font: 600 13px/1.25 'Noto Sans Thai', sans-serif; color: #d9cfe9; background: none; border: 0; cursor: pointer; }
.sf-gpick-list :is(button, a):hover, .sf-gpick-list :is(button, a):focus-visible { background: var(--sf-action-soft); color: #fff; outline: none; }
.sf-gpick-list :is(button, a).is-on { color: #fff; }
.sf-gpick-list .sf-gpick-name { flex: 1; min-width: 0; }
.sf-gpick-tick { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid var(--sf-border-strong); background: #ffffff08; }
.sf-gpick-tick .icon { width: 12px; height: 12px; color: var(--sf-action-ink); opacity: 0; }
.sf-gpick-list :is(button, a).is-on .sf-gpick-tick { background: var(--sf-action); border-color: var(--sf-action); }
.sf-gpick-list :is(button, a).is-on .sf-gpick-tick .icon { opacity: 1; }
.sf-gpick-n { flex: none; min-width: 24px; padding: 1px 6px; text-align: center; font: 700 11px/1.5 var(--v2-mono); color: var(--sf-muted); border: 1px solid var(--sf-border); }
.sf-gpick-list :is(button, a).is-on .sf-gpick-n { color: var(--sf-action); border-color: #00f0ff66; }
@media (max-width: 680px) {
  .sf-bb-find { width: 100%; }
  .sf-bb-find .sf-search-inline { width: auto; min-width: 0; flex: 1 1 0; }
  .sf-gpick-btn { max-width: 44vw; }
  .sf-gpick-btn .sf-gpick-logo { width: 40px; }
  .sf-gpick-list { min-width: min(300px, calc(100vw - 32px)); }
}