/* Package: cards — the catalogue card page (/cards/{game}/{id}, /cards/{game}/all),
 * /market's extra filters, and the tile furniture shared by every product
 * card: TEST stamp, seller chip + shop popup, flag, "ขายแล้ว".
 * Every class sf-cards-*. Tokens from theme-v2.css. */

/* ---------- TEST / ทดลองฟรี stamp (partials/test-stamp) ---------- */
.sf-cards-stamp { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; }
.sf-cards-stamp b { display: block; padding: 4px 16px; font: 900 22px/1.2 var(--v2-display); letter-spacing: 4px; color: #fff; background: #1b1313d9; border: 3px solid #e5342b; box-shadow: 0 6px 18px #000a, inset 0 0 0 1px #e5342b55; text-shadow: 0 1px 3px #0009; }
.sf-cards-stamp.is-demo b { font: 800 18px/1.4 'Noto Sans Thai', var(--v2-display); letter-spacing: .5px; background: #0b1f18d9; border-color: #10b981; box-shadow: 0 6px 18px #000a, inset 0 0 0 1px #10b98155; }
.sf-cards-stamp.is-inline { position: static; display: inline-block; transform: none; vertical-align: middle; margin-left: 6px; }
.sf-cards-stamp.is-inline b { padding: 1px 7px; font-size: 10px; letter-spacing: 1px; border-width: 2px; box-shadow: none; }
@media (max-width: 680px) { .sf-cards-stamp:not(.is-inline) b { font-size: 16px; padding: 3px 10px; letter-spacing: 2px; border-width: 2px; } .sf-cards-stamp.is-demo:not(.is-inline) b { font-size: 13px; letter-spacing: 0; } }

/* ---------- Seller chip (partials/shop-chip) ---------- */
.sf-cards-chip { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #0a0014; border: 1px solid #00f0ff66; box-shadow: 0 4px 12px #000a; transition: transform .2s, border-color .2s; }
.sf-cards-chip:hover, .sf-cards-chip:focus-visible { transform: scale(1.1); border-color: var(--v2-accent); }
/* !important: the chip sits on tile art whose picture rules are written for
 * the CARD (`.sf-card-art img` max-width 78%, `.product-image img` tilt,
 * drop-shadow, hover lift) and they hit the logo too — on auctions/buybacks
 * it came out a 23×30 oval ("เหมือนโดนบีบ"). */
.sf-cards-chip img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; transform: none !important; filter: none !important; object-fit: cover; border-radius: 50%; background: #fff; }
.sf-cards-chip-mono { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; font: 800 14px/1 'Noto Sans Thai', var(--v2-display); color: #fff; background: hsl(var(--h, 190) 55% 42%); }
.sf-cards-chip-ok { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--v2-accent); color: #04121a; box-shadow: 0 0 0 2px #0a0014; }
.sf-cards-chip-ok .icon { width: 9px; height: 9px; stroke-width: 4; }
/* The "จัดโดย" pill (partials/shop-chip with $byline — /tournaments slide + rows; owner
 * 2026-09-29: "วางตัวร้านให้ดีกว่านี้และชัดกว่านี้"): framed like the tournament cover's shop tag —
 * logo · byline over a white name · verified tick · arrow; the whole pill opens the shop popup,
 * so its hover is the interactive-card cyan edge (palette.css). */
.sf-cards-by { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; padding: 5px 14px 5px 5px; color: var(--sf-text); background: #0a0014b8; border: 1px solid var(--sf-border-strong); box-shadow: 0 6px 16px #0006; transition: border-color .2s, background .2s; }
.sf-cards-by:hover, .sf-cards-by:focus-visible { border-color: var(--sf-border-hover); background: #0d0620e6; outline: none; }
.sf-cards-by-logo { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #ffffff3d; }
.sf-cards-by-logo img { width: 100%; height: 100%; object-fit: cover; }
.sf-cards-by-logo .sf-cards-chip-mono { font-size: 15px; }
.sf-cards-by-text { display: grid; gap: 1px; min-width: 0; text-align: left; }
.sf-cards-by-text small { font: 600 11px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-muted); }
.sf-cards-by-text b { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 14px/1.35 'Noto Sans Thai', sans-serif; color: #fff; }
.sf-cards-by-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-cards-by-ok { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--v2-accent); color: #04121a; }
.sf-cards-by-ok .icon { width: 10px; height: 10px; stroke-width: 4; }
.sf-cards-by-go { flex: 0 0 14px; width: 14px; height: 14px; margin-left: 2px; color: var(--sf-muted); transition: transform .2s, color .2s; }
.sf-cards-by:hover .sf-cards-by-go, .sf-cards-by:focus-visible .sf-cards-by-go { color: var(--sf-action); transform: translateX(3px); }
/* One spot on every tile (owner 2026-09-29: "วางไว้ตำแหน่งเดียว … ด้านบนซ้าย"):
 * top-left of the picture — listing tiles, auctions, buybacks. On a listing
 * tile the condition · rarity tag moves over beside it (the chip comes first
 * in partials/product-card, hence `+`). */
.product-image .sf-cards-tile-chip, .sf-card-art .sf-brw-chip { position: absolute; top: 10px; left: 10px; z-index: 4; }
.product-image .sf-cards-tile-chip + .product-tag { left: 49px; top: 26px; transform: translateY(-50%); max-width: calc(100% - 105px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 680px) {
  .product-image .sf-cards-tile-chip, .sf-card-art .sf-brw-chip { top: 7px; left: 7px; width: 28px; height: 28px; }
  .product-image .sf-cards-tile-chip + .product-tag { left: 41px; top: 21px; max-width: calc(100% - 80px); }
  .product-image .sf-cards-chip-mono, .sf-card-art .sf-cards-chip-mono { font-size: 12px; }
}

/* ---------- Shop popup (partials/shop-popup) ---------- */
.sf-cards-popup { width: min(380px, calc(100% - 32px)); }
.sf-cards-popup-body { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 26px 22px 24px; }
.sf-cards-popup-logo { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; border: 2px solid #00f0ff77; box-shadow: 0 0 0 5px #00f0ff14, 0 14px 30px #000b; background: #0d0719; font: 800 30px 'Noto Sans Thai', var(--v2-display); color: #fff; }
.sf-cards-popup-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sf-cards-popup-body h3 { font: 800 19px/1.35 'Noto Sans Thai', var(--v2-display); overflow-wrap: anywhere; }
.sf-cards-popup-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sf-cards-popup-badges .sf-tag { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: .3px; font-family: 'Noto Sans Thai', var(--v2-mono); font-size: 11px; }
.sf-cards-popup-badges .icon { width: 12px; height: 12px; stroke-width: 3; }
.sf-cards-popup-body .button { margin-top: 6px; }

/* ---------- Tile extras ---------- */
.sf-cards-flag { display: inline-block; height: .95em; width: auto; margin-right: 5px; vertical-align: -.12em; border-radius: 2px; box-shadow: 0 0 0 .5px #0006; }
.sf-cards-sold { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: #ffb36b; }
.sf-cards-sold .icon { width: 13px; height: 13px; color: #ff8a3d; }

/* ---------- Card page ---------- */
.sf-cards-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.sf-cards-head > div { min-width: 0; }
.sf-cards-head h1 { text-wrap: pretty; }
/* the code on its own line above the name (owner 2026-10-09: "เอาชื่อการ์ดลงมาอีกบรรทัด") */
.sf-cards-code { display: block; margin: 0 0 6px; font-family: var(--v2-mono); color: var(--sf-code); font-size: .6em; line-height: 1.2; letter-spacing: 0; }
/* Logo cut to its ink (App\Support\HeadLogo) on a WHITE plate — owner 2026-09-29: "logo game bg ควรเป็นสีขาว
   … ทำให้คมชัด": the white rim / glow that kept black ink visible on the dark theme blurred it. A logo drawn
   on its own solid colour (HeadLogo bg: Summoner Master, Talingchan = black) paints the plate that colour
   (--logo-bg). Chamfered like the panels; no border, so no diagonal to paint back. */
.sf-cards-logo { flex: 0 0 auto; box-sizing: border-box; max-width: 200px; max-height: 78px; padding: 10px 15px; object-fit: contain; background: var(--logo-bg, #fff); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.sf-cards-zoom-btn { width: 100%; justify-content: center; margin-top: 12px; }
.sf-cards-buy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.sf-cards-buy small { display: block; font-size: 11px; color: var(--v2-muted); margin-bottom: 6px; }
.sf-cards-buy .sf-price { display: block; font-size: clamp(28px, 3.2vw, 38px); color: var(--v2-accent); margin-bottom: 6px; }
.sf-cards-buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-cards-want { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #8ff0c4; margin-bottom: 12px; }
.sf-cards-want .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }
/* Want panel price stepper (cards/_want-price): − ฿[digits] + in one frame, lit as a whole on focus. */
.sf-want-step { flex: 1 1 260px; display: flex; align-items: stretch; min-width: 0; min-height: 50px; background: #ffffff06; border: 1px solid #ffffff24; }
.sf-want-step:focus-within { border-color: var(--v2-accent); box-shadow: 0 0 14px #00f0ff1f; }
/* − / + are keys with their own cyan face (owner 2026-09-30: "ทำสีปุ่มกดให้รู้ว่าเป็นปุ่มหน่อย" — a bare icon
   on the frame read as decoration); pressed = the full action fill. − with nothing to lower is a flat grey key. */
.sf-want-step > button { flex: 0 0 52px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* key colours (− magenta, + cyan), hover, press, disabled: buttons.css "Steppers" */
.sf-want-step > button:focus-visible { outline: 1px solid #fff; outline-offset: -5px; }
.sf-want-step .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.sf-want-step-field { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 12px; border-inline: 1px solid #ffffff1a; cursor: text; }
.sf-want-step-field span { color: var(--sf-price); font: 700 16px var(--v2-mono); }
.sf-want-step-field input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--v2-text); font: 16px var(--v2-mono); outline: none; }
.sf-want-step-field input::placeholder { color: var(--v2-muted); font: 13px 'Noto Sans Thai', sans-serif; }
/* The form's submit is the panel's one action: the filled cyan button, icon + label centred. */
.sf-want-go { justify-content: center; gap: 10px; min-height: 50px; padding-inline: 26px; font-size: 14px; font-weight: 700; }
.sf-want-go .icon { width: 18px; height: 18px; stroke-width: 2; }
@media (max-width: 680px) { .sf-want-step + .button { flex: 1 1 100%; justify-content: center; } }
/* Outline buttons in the buy box and the want panel ("ดูว่ามีร้านรับซื้อไหม", "เทียบทุกร้าน", "ดูสินค้า",
   "การ์ดที่ตามหาทั้งหมด") are cyan at rest too — the site's grey outline looked like a plain frame here. */
.sf-cards-buy .button-outline, .sf-want .button-outline { gap: 10px; border-color: #00f0ff73; background: #00f0ff0f; color: var(--sf-action); }
/* hover / focus: the shared pink wipe (buttons.css) */
.sf-cards-buy .button-outline .icon, .sf-want .button-outline .icon { width: 16px; height: 16px; stroke-width: 2; }
/* In-line links in the want panel (เพิ่มอีเมล, เชื่อม LINE, การ์ดที่ตามหา) are underlined, so they read as links. */
.sf-want a.sf-accent { text-decoration: underline; text-decoration-color: #00f0ff73; text-underline-offset: 3px; }
.sf-want a.sf-accent:hover { color: #fff; text-decoration-color: currentColor; }
/* Want panel: where alerts go (.sf-want-send) and which shops listed since (.sf-want-log) — cards/want. */
.sf-cards-want small { color: var(--v2-muted); font-size: 12px; }
.sf-want-send, .sf-want-log { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v2-line); }
.sf-want-send h3, .sf-want-log h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13px/1.4 'Noto Sans Thai', sans-serif; color: #fff; }
.sf-want-log h3 .sf-account-count { margin-left: 0; }
.sf-want-send ul { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.sf-want-send li { display: grid; grid-template-columns: 18px 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; background: #ffffff05; border: 1px solid var(--v2-line); font-size: 13px; }
.sf-want-send li > .icon { width: 16px; height: 16px; color: var(--v2-muted); }
.sf-want-send li > span { color: var(--v2-muted); font-size: 12px; }
.sf-want-send li > b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #fff; }
.sf-want-send li > em { font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--v2-muted); }
.sf-want-send li.is-on > .icon, .sf-want-send li.is-on > em { color: #3ee8a0; }
.sf-want-send li.is-test > .icon, .sf-want-send li.is-test > em { color: #ffcf00; }
.sf-want-send li.is-off > b { color: var(--v2-muted); font-weight: 400; }
.sf-want-log-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; grid-template-areas: "who what go" "sent sent sent"; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px dashed #ffffff1a; }
.sf-want-log h3 + .sf-want-log-row { border-top: 0; padding-top: 2px; }
.sf-want-log-who { grid-area: who; min-width: 0; }
.sf-want-log-what { grid-area: what; display: grid; gap: 2px; min-width: 0; }
.sf-want-log-what b { font-size: 13px; font-weight: 600; }
.sf-want-log-what s { color: var(--v2-muted); font-size: 12px; font-weight: 400; margin-left: 4px; }
.sf-want-log-what small { color: var(--v2-muted); font-size: 11px; }
.sf-want-log-what em { font-style: normal; font-weight: 700; color: #ff5c9d; }
.sf-want-log-row.is-drop .sf-want-log-what b { color: #ffb36b; }
.sf-want-log-go { grid-area: go; }
.sf-want-log-sent { grid-area: sent; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 11.5px; color: var(--v2-muted); }
.sf-want-log-sent span { display: inline-flex; align-items: center; gap: 5px; }
.sf-want-log-sent .icon { width: 13px; height: 13px; flex: none; }
.sf-want-log-sent .is-ok { color: #8ff0c4; }
.sf-want-log-sent .is-bad { color: #ff7a7a; }
/* The "ลงขายโดย" pill (partials/shop-chip $byline) at list size. */
.sf-want-by { padding: 4px 12px 4px 4px; box-shadow: none; }
.sf-want-by .sf-cards-by-logo { flex-basis: 32px; width: 32px; height: 32px; }
.sf-want-by .sf-cards-by-logo img { object-fit: contain; }
.sf-want-by-plain { display: grid; gap: 1px; }
.sf-want-by-plain small { font-size: 11px; color: var(--v2-muted); }
.sf-want-by-plain b { font-size: 14px; }
.sf-want-all { margin-top: 12px; }
@media (max-width: 680px) {
  .sf-want-send li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .sf-want-send li > b { grid-column: 2 / -1; grid-row: 2; font-size: 12.5px; }
  .sf-want-log-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who go" "what what" "sent sent"; }
}
.sf-cards-tabs { margin: -4px 0 16px; }
.sf-cards-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 16px; }
.sf-cards-stats div { padding: 9px 11px; background: #ffffff06; border: 1px solid var(--v2-line); min-width: 0; }
.sf-cards-stats dt { font-size: 10px; color: var(--v2-muted); }
.sf-cards-stats dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.sf-cards-defs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: 13px; }
.sf-cards-defs span { display: inline-flex; align-items: center; gap: 5px; }
.sf-cards-defs small { color: var(--v2-muted); font-size: 11px; margin-right: 2px; }
.sf-cards-pip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--e, #9aa1ae); color: #fff; font: 800 10px/1 var(--v2-mono); font-style: normal; box-shadow: inset 0 0 0 1.5px #ffffff55, 0 1px 3px #0008; text-shadow: 0 1px 1px #0008; }
/* The official energy icon (partials/energy-pip) — the round art brings its own rim. */
img.sf-cards-pip { display: inline-block; flex: none; background: none; box-shadow: 0 1px 3px #0009; object-fit: contain; }
.sf-cards-sec + .sf-cards-sec { margin-top: 14px; }
.sf-cards-sec h4 { font: 700 11px/1.4 var(--v2-mono); letter-spacing: 1px; text-transform: uppercase; color: #3ee8a0; margin-bottom: 6px; }
.sf-cards-sec.is-trigger h4 { color: #ffcf00; }
.sf-cards-atk { padding: 10px 0; border-top: 1px dashed #ffffff1a; }
.sf-cards-atk:first-of-type { border-top: 0; padding-top: 2px; }
.sf-cards-atk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 4px; }
.sf-cards-atk-h b { margin-left: 4px; font-size: 14px; }
.sf-cards-atk-h .sf-mono { margin-left: auto; font-weight: 700; font-size: 16px; color: var(--v2-pink); }
.sf-cards-flavor { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #ffffff1a; font-size: 12px; font-style: italic; color: var(--v2-muted); }
.sf-cards-glyph { display: inline-block; height: 1.3em; width: auto; margin: 0 1px; vertical-align: -.3em; }
.sf-cards-mana { display: inline-block; height: 1.1em; width: 1.1em; margin: 0 1px; vertical-align: -.15em; }
/* CardFacts::fmt extras: Pokémon energy inline, a Riftbound energy number with no svg (8, 12)
   drawn as the same white disc, and the arrow Riftbound prints after a condition ([>]). */
.sf-cards-energy { height: 1.25em; vertical-align: -.28em; border-radius: 50%; }
.sf-cards-cost {
  display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; margin: 0 1px; padding: 0 .2em;
  border-radius: 50%; background: #f2f4f8; color: #10121a; font: 800 .78em/1 var(--v2-mono); vertical-align: -.3em;
}
.sf-cards-then { margin: 0 3px 0 1px; color: var(--v2-accent); font-size: .9em; }
.sf-cards-kw { display: inline-block; margin: 0 2px 2px 0; padding: 0 7px; font: 700 11px/1.7 var(--v2-mono); color: #06101a; background: var(--v2-accent); vertical-align: 1px; }
.sf-cards-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 12px; font: 800 13px/1.3 var(--v2-display); letter-spacing: .5px; text-transform: uppercase; }
.sf-cards-sub .icon { width: 16px; height: 16px; color: var(--v2-accent); align-self: center; }
.sf-cards-sub small { flex-basis: 100%; font: 400 11px/1.6 'Noto Sans Thai', sans-serif; text-transform: none; letter-spacing: 0; color: var(--v2-muted); }
.sf-cards-tablewrap { overflow-x: auto; }
.sf-cards-graded td .icon { width: 12px; height: 12px; vertical-align: -1px; }
.sf-cards-graded tr:first-child td { color: inherit; }
.sf-cards-graded .num { white-space: nowrap; }

/* price-history chart (drawn by pkg-cards.js at the element's pixel size): a line
   through each source's recorded prices + a soft fill, a dashed level after its last
   price, legend buttons = latest price · change over the chart (tap = hide / show). */
.sf-cards-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 12px; color: #d9d0e6; }
.sf-cards-legend > :is(button, span) {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 10px;
  font: inherit; color: inherit; background: #ffffff06; border: 1px solid var(--sf-border); border-radius: 3px;
}
.sf-cards-legend > button { cursor: pointer; transition: border-color .15s, opacity .15s, background-color .15s; }
.sf-cards-legend > button[aria-pressed="false"] { opacity: .5; background: transparent; }
.sf-cards-legend > button[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.sf-cards-legend > button[aria-pressed="false"] b, .sf-cards-legend > button[aria-pressed="false"] em { visibility: hidden; }
.sf-cards-legend > button:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sf-cards-legend > button:hover { border-color: var(--sf-border-hover); background: #00f0ff0d; } }
.sf-cards-legend b { font: 700 12px var(--v2-mono); color: var(--sf-price); }
@media (max-width: 680px) {
  /* phones: one slim row per source, price + change on the right */
  .sf-cards-legend { display: grid; gap: 4px; }
  .sf-cards-legend > :is(button, span) { min-height: 34px; padding: 3px 10px; text-align: left; }
  .sf-cards-legend b { margin-left: auto; }
}
.sf-cards-chart :is(.sf-cards-legend, .sf-cards-chart-tip) em { font: 700 11px var(--v2-mono); font-style: normal; white-space: nowrap; }
.sf-cards-chart .is-up { color: var(--sf-sell); }
.sf-cards-chart .is-down { color: var(--sf-danger); }
.sf-cards-chart .is-flat { color: var(--sf-muted); }
.sf-cards-legend span, .sf-cards-chart-empty span { display: inline-flex; align-items: center; gap: 6px; }
.sf-cards-legend i, .sf-cards-chart-empty i, .sf-cards-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sf-cards-legend i, .sf-cards-chart-empty i { margin-right: 0; flex: 0 0 auto; }
.sf-cards-chart-fig { position: relative; margin: 0; }
.sf-cards-chart-svg { display: block; width: 100%; height: 240px; overflow: visible; }
.sf-cards-chart-svg .grid { stroke: #ffffff14; stroke-width: 1; }
.sf-cards-chart-svg .grid.is-v { stroke: #ffffff0a; }
.sf-cards-chart-svg .axis { fill: #a89bbd; font: 11px var(--v2-mono); }
.sf-cards-chart-svg .axis.is-date { font: 11px 'Noto Sans Thai', sans-serif; }
.sf-cards-chart-svg .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sf-cards-chart-svg .tail { fill: none; stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .75; }
.sf-cards-chart-svg .dot { stroke: var(--v2-surface); stroke-width: 1.5; }
.sf-cards-chart-svg .dot.is-last { stroke: #fff; stroke-width: 1.5; }
.sf-cards-chart-svg .cross { stroke: #ffffff55; stroke-width: 1; stroke-dasharray: 2 3; }
.sf-cards-chart-svg .mark { fill: var(--v2-surface); stroke-width: 2.5; pointer-events: none; }
.sf-cards-chart-svg .mark.is-held { stroke-dasharray: 3 2; }
.sf-cards-chart-svg .hit { fill: transparent; cursor: crosshair; }
@media (prefers-reduced-motion: no-preference) {
  .sf-cards-chart-svg.is-intro .line { stroke-dasharray: 1; animation: sf-chart-draw 1.1s cubic-bezier(.3, .7, .3, 1) both; }
  .sf-cards-chart-svg.is-intro :is(.area, .tail, .dot) { animation: sf-chart-fade .5s ease-out .75s both; }
}
@keyframes sf-chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sf-chart-fade { from { opacity: 0; } }
.sf-cards-chart-note { margin: 6px 0 0; font-size: 11px; color: var(--v2-muted); }
/* $compact (the home hero's inspect panel): shorter, chips without the price, no phone list */
.sf-cards-chart.is-compact .sf-cards-chart-svg { height: 160px; }
.sf-cards-chart.is-compact .sf-cards-legend { display: flex; gap: 6px; margin-bottom: 6px; }
.sf-cards-chart.is-compact .sf-cards-legend > :is(button, span) { min-height: 28px; padding: 2px 9px; font-size: 11px; }
.sf-cards-chart.is-compact .sf-cards-chart-note { font-size: 10px; }
.sf-cards-chart-tip { position: absolute; z-index: 3; min-width: 200px; max-width: min(300px, 92%); padding: 9px 11px; background: #0a0014f2; border: 1px solid #00f0ff55; box-shadow: 0 12px 30px #000c; font-size: 12px; pointer-events: none; }
.sf-cards-chart-tip b { display: block; font: 700 12px 'Noto Sans Thai', sans-serif; color: var(--v2-accent); margin-bottom: 4px; }
.sf-cards-chart-tip .r { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; line-height: 1.45; }
.sf-cards-chart-tip .r + .r { border-top: 1px solid #ffffff12; }
.sf-cards-chart-tip .r > i { margin: 4px 0 0; flex: 0 0 auto; }
.sf-cards-chart-tip .l { display: grid; min-width: 0; }
.sf-cards-chart-tip .l small { font-size: 10px; color: var(--v2-muted); }
.sf-cards-chart-tip .v { display: grid; justify-items: end; margin-left: auto; padding-left: 12px; font-family: var(--v2-mono); font-weight: 700; color: var(--sf-price); white-space: nowrap; }
.sf-cards-chart-tip .n { font-weight: 400; color: var(--v2-muted); font-size: 10px; }
.sf-cards-chart-empty { display: grid; gap: 8px; padding: 16px; background: #ffffff05; border: 1px dashed #ffffff26; font-size: 12px; }
.sf-cards-chart-empty p { display: flex; gap: 8px; align-items: center; color: var(--v2-muted); }
.sf-cards-chart-empty .icon { width: 16px; height: 16px; color: var(--v2-accent); }
.sf-cards-chart-empty small { color: var(--v2-muted); }
/* กราฟ | ตาราง tabs (the language tabs' .sf-tabs look, + an icon) and the table tab */
.sf-cards-chart-tabs { margin: 0 0 12px; }
.sf-cards-chart-tabs button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.sf-cards-chart-tabs button .icon { width: 16px; height: 16px; }
.sf-cards-chart-tabs button:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }
.sf-cards-chart-table { font-size: 12px; }
.sf-cards-chart-table th.num { text-align: right; }
.sf-cards-chart-table td { white-space: nowrap; }
.sf-cards-chart-table td.is-price { color: var(--sf-price); font-weight: 700; }
.sf-cards-chart-table tr:first-child td { color: inherit; }
.sf-cards-chart-table tr:first-child td.is-price { color: var(--sf-price); }
.sf-cards-chart-table em { font: 700 11px var(--v2-mono); font-style: normal; }

/* shops selling this card */
.sf-cards-offers { margin-top: 40px; }
.sf-cards-offers h2 b { font-size: 16px; }
.sf-cards-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 16px; margin-bottom: 8px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-cards-range { display: grid; gap: 6px; flex: 1 1 220px; font-size: 12px; color: var(--v2-muted); }
.sf-cards-range b { font-family: var(--v2-mono); color: var(--v2-accent); }
.sf-cards-range input { width: 100%; accent-color: var(--v2-accent); }
.sf-cards-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 12px; }
.sf-cards-stars legend { float: left; margin-right: 6px; color: var(--v2-muted); }
.sf-cards-stars label { position: relative; cursor: pointer; }
.sf-cards-stars input { position: absolute; opacity: 0; }
.sf-cards-stars span { display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border: 1px solid #ffffff24; font: 700 12px var(--v2-mono); color: #c7bdd6; }
.sf-cards-stars .icon { width: 12px; height: 12px; color: #ffcf00; fill: currentColor; }
.sf-cards-stars input:checked + span { border-color: #ffcf00; color: #ffcf00; background: #ffcf0014; }
.sf-cards-stars input:focus-visible + span { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.sf-cards-offer { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(70px, .7fr) minmax(110px, 1fr) minmax(90px, .8fr) auto; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--v2-line); font-size: 13px; }
.sf-cards-offer:last-child { border-bottom: 0; }
.sf-cards-offer[hidden] { display: none; }
.sf-cards-offer-shop { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sf-cards-offer-shop > span { min-width: 0; }
.sf-cards-offer-shop b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cards-offer-shop small { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.sf-cards-rating { color: #ffcf00; font-family: var(--v2-mono); }
.sf-cards-rating .icon { width: 12px; height: 12px; fill: currentColor; }
.sf-cards-rating em { font-style: normal; color: var(--v2-muted); }
.sf-cards-offer-cond { font: 700 12px var(--v2-mono); color: #d9d0e6; }
.sf-cards-offer-price { font: 700 16px var(--v2-mono); color: var(--v2-accent); white-space: nowrap; }
.sf-cards-offer-price em { display: inline-block; margin-left: 7px; padding: 2px 6px; font: 700 10px/1.3 'Noto Sans Thai', sans-serif; font-style: normal; color: #04121a; background: #3ee8a0; vertical-align: 2px; }
.sf-cards-offer-stock { font-size: 12px; color: var(--v2-muted); }
.sf-cards-offer-stock small { display: block; color: #ffb36b; font-size: 11px; }
.sf-cards-offer-go { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sf-cards-similar { margin-top: 70px; }
/* "การ์ดใกล้เคียง" — small fixed tiles (owner 2026-09-28: "การ์ดใหญ่ไป"; pages.css
   gave every shelf a quarter of the row), and the row drifts left on its own
   (pkg-cards.js; a set shorter than half the row stays put): the copies close
   the loop, so the scrollbar would
   only jump back — it is hidden and the edges fade instead. */
.sf-shelf.sf-cards-sim { grid-auto-columns: var(--sim-w, 176px); gap: 14px; }
.sf-shelf.sf-cards-sim.is-drifting { scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.sf-shelf.sf-cards-sim.is-drifting::-webkit-scrollbar { display: none; }
.sf-shelf.sf-cards-sim.is-dragging { cursor: grabbing; user-select: none; }
.sf-cards-sim.is-dragging .sf-card { transition: none; }
.sf-cards-sim-card .sf-card-art { aspect-ratio: 4 / 4.6; padding: 10px; }
.sf-cards-sim-card .sf-card-art img { max-width: 88%; -webkit-user-drag: none; }
.sf-cards-sim-card .sf-card-badge { top: 7px; left: 7px; padding: 4px 6px; }
.sf-cards-sim-card .sf-card-body { gap: 3px; padding: 10px 12px 12px; }
.sf-cards-sim-card .sf-card-body h3 { font-size: 13px; }
@media (max-width: 680px) { .sf-shelf.sf-cards-sim { --sim-w: 140px; gap: 10px; } .sf-cards-sim-card .sf-card-body { padding: 8px 10px 10px; } }

/* full-screen view */
.sf-cards-zoom { width: min(720px, calc(100% - 24px)); }
.sf-cards-zoom .sf-dialog-body { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #00f0ff1a, transparent 60%), #0a0014; }
.sf-cards-zoom img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; filter: drop-shadow(0 24px 40px #000c); }

@media (max-width: 980px) {
  .sf-cards-page .sf-detail { grid-template-columns: 1fr; }
  .sf-cards-page .sf-gallery { position: static; max-width: 440px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .sf-cards-offer { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 2px; }
  .sf-cards-offer-shop { grid-column: 1 / -1; }
  .sf-cards-offer-cond { grid-row: 2; }
  .sf-cards-offer-price { grid-row: 2; grid-column: 2; text-align: right; }
  .sf-cards-offer-stock { grid-row: 3; }
  .sf-cards-offer-go { grid-row: 3; grid-column: 2; }
  .sf-cards-logo { max-width: 108px; max-height: 50px; padding: 7px 10px; }
  .sf-cards-buy { flex-direction: column; align-items: stretch; }
  .sf-cards-buy-actions .button { flex: 1 1 auto; justify-content: center; }
}

/* ---------- /cards/{game}/all ---------- */
.sf-cards-all .sf-head { align-items: center; }
.sf-cards-all-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.sf-cards-all-grid .sf-card-art { aspect-ratio: 4 / 4.8; }
.sf-cards-all-grid .sf-card-art img { max-width: 86%; }
.sf-cards-all-grid .sf-card-foot b { font-size: 15px; color: var(--v2-accent); }
.sf-cards-all-grid .sf-card-foot b.sf-muted { color: var(--v2-muted); }
.sf-cards-all .sf-chip .sf-cards-flag { margin-right: 0; }
@media (max-width: 680px) { .sf-cards-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sf-cards-all-grid .sf-card-body { padding: 10px; } }

/* ---------- /market + /cards/…/all: language-edition chip row (partials/game-chips), active chips ---------- */
.sf-cards-editions { align-items: center; padding: 10px 12px; background: #00f0ff08; border: 1px solid #00f0ff26; }
.sf-cards-editions-label { font: 700 11px var(--v2-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-accent); margin-right: 6px; }
.sf-cards-editions .sf-chip .sf-cards-flag { margin-right: 0; }
.sf-cards-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; font-size: 12px; color: var(--v2-muted); background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-cards-active .sf-chip { color: var(--v2-text); border-color: #00f0ff55; }
.sf-cards-active .sf-chip .icon { width: 12px; height: 12px; }
.sf-cards-active .sf-chip:hover { border-color: var(--v2-pink); color: #ff5c9d; }
.sf-cards-clear { margin-left: auto; color: var(--v2-accent); font-weight: 600; }
.sf-cards-clear:hover { color: #ff5c9d; }
@media (max-width: 680px) { .sf-cards-clear { margin-left: 0; } }

/* ---------- /market: two designs, like last13 (2026-10-09, owner: "แบ่งส่วน pc กับมือถือ … ทำคล้ายของเก่า").
   PC (≥901px): .sf-mk-rail = a sticky "เกม" list left of the grid (last13's shop .shop-sidebar), .sf-mk-tools = search ·
   sort, .sf-mk-bar = ตัวกรองละเอียด · ประเภท · the game's languages; the panel <dialog> .sf-mkf = a drawer from the
   right with condition, rarity, price. Phone (≤900px): search, .sf-mk-chips = a sliding chip rail (เกม · ตัวกรอง ·
   เรียง), the panel full screen with game + type too (owner: "ทำแบบเต็มหน้าจอ"). ---------- */
.sf-mk-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.sf-mk-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.sf-mk-main > .sf-cards-results { margin-top: 10px; }

/* PC: the game rail */
.sf-mk-rail { position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow-y: auto; scrollbar-width: thin; padding: 6px 8px 8px; background: var(--v2-surface); border: 1px solid var(--v2-line); }
.sf-mk-rail-head { display: flex; align-items: center; gap: 8px; padding: 8px 6px 10px; margin-bottom: 6px; font: 800 14px var(--v2-display); letter-spacing: .5px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--sf-action), var(--sf-code), var(--sf-promo)) 1; }
.sf-mk-rail-head .icon { width: 16px; height: 16px; color: var(--sf-action); }
.sf-mk-rail-list { display: grid; gap: 2px; }
.sf-mk-rail-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px 6px 6px; font-size: 13.5px; color: #d9d0e6; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.sf-mk-rail-item .sf-gpick-logo { width: 48px; height: 24px; }
.sf-mk-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mk-rail-item b { flex: none; min-width: 26px; 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-mk-rail-item:hover { color: #fff; background: #ffffff0a; border-left-color: #00f0ff66; }
.sf-mk-rail-item:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }
.sf-mk-rail-item.is-on { color: #fff; font-weight: 700; background: linear-gradient(90deg, #00f0ff2e, #00f0ff08); border-left-color: var(--sf-action); }
.sf-mk-rail-item.is-on b { color: var(--sf-action-ink); background: var(--sf-action); border-color: var(--sf-action); }
.sf-mk-rail-item.is-empty:not(.is-on) { opacity: .5; }

/* search · sort */
.sf-mk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-mk-search { flex: 1 1 320px; width: auto; max-width: none; min-width: 0; }
.sf-mk-search .sf-input { min-height: 44px; font-size: 14px; }
.sf-mk-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--v2-muted); white-space: nowrap; }
.sf-mk-sort .sf-select { min-height: 44px; min-width: 160px; }

/* PC: ตัวกรองละเอียด · ประเภท · languages */
.sf-mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 10px 12px; background: #ffffff04; border: 1px solid var(--v2-line); }
.sf-mkf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 6px 14px; font: 600 13.5px 'Noto Sans Thai', sans-serif; color: var(--v2-text); background: #ffffff06; border: 1px solid #ffffff2e; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sf-mkf-btn .icon { width: 16px; height: 16px; color: var(--sf-action); flex: 0 0 auto; }
.sf-mkf-btn > span { white-space: nowrap; }
.sf-mkf-btn b, .sf-mk-chip b { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; font: 700 11px var(--v2-mono); color: #fff; background: var(--v2-pink); }
.sf-mkf-btn.is-on { border-color: #00f0ff88; background: #00f0ff0f; }
.sf-mkf-btn:hover, .sf-mkf-btn:focus-visible { color: var(--v2-accent); border-color: var(--v2-accent); }
.sf-mkf-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.sf-mk-pills { --pill: var(--sf-code); --pill-ink: #150b33; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-mk-pills.is-eds { --pill: var(--sf-action); --pill-ink: var(--sf-action-ink); margin-left: auto; }
.sf-mk-pills-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12.5px; color: var(--sf-muted); }
.sf-mk-pills-label .icon { width: 15px; height: 15px; color: var(--pill); }
.sf-mk-pills .sf-chip { min-height: 32px; font-size: 12.5px; }
.sf-mk-pills .sf-chip:hover { color: var(--pill); border-color: color-mix(in srgb, var(--pill) 65%, transparent); }
.sf-mk-pills .sf-chip.is-on { color: var(--pill-ink); background: var(--pill); border-color: var(--pill); font-weight: 700; }
.sf-mk-pills .sf-chip.is-link { border-style: dashed; }
.sf-mk-pills .sf-chip .icon { width: 13px; height: 13px; }
.sf-mk-pills .sf-chip b { opacity: .8; }

/* phone: the chip rail (shown ≤900px) */
.sf-mk-chips { display: none; }

/* the panel: PC = a drawer from the right */
.sf-mkf { position: fixed; inset: 0 0 0 auto; width: min(400px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; color: var(--v2-text); background: var(--v2-surface); border: 0; border-left: 1px solid #00f0ff55; box-shadow: -20px 0 60px #000c; }
.sf-mkf::backdrop { background: #05000acc; backdrop-filter: blur(3px); }
.sf-mkf[open] { animation: sf-mkf-side .25s ease-out; }
@keyframes sf-mkf-side { from { transform: translateX(28px); opacity: 0; } }
@keyframes sf-mkf-up { from { transform: translateY(18px); opacity: 0; } }
html.sf-mkf-lock { overflow: hidden; }
.sf-mkf .is-ph, .sf-mkf-sec.is-game, .sf-mkf-sec.is-kind { display: none; }
.sf-mkf-form { height: 100%; max-height: inherit; display: flex; flex-direction: column; }
.sf-mkf-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--sf-action), var(--sf-code), var(--sf-promo)) 1; }
.sf-mkf-head h2 { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 0; font: 800 15px var(--v2-display); letter-spacing: .5px; }
.sf-mkf-head h2 .icon { width: 18px; height: 18px; color: var(--v2-accent); }
.sf-mkf-x { width: 38px; height: 38px; display: grid; place-items: center; color: var(--v2-muted); background: none; border: 1px solid #ffffff24; cursor: pointer; }
.sf-mkf-x:hover, .sf-mkf-x:focus-visible { color: var(--v2-pink); border-color: #ff006e88; }
.sf-mkf-x .icon { width: 16px; height: 16px; }
.sf-mkf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 14px; scrollbar-width: thin; }
.sf-mkf-sec { --sec: var(--sf-action); --sec-ink: var(--sf-action-ink); min-width: 0; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid #ffffff12; }
.sf-mkf-sec:last-child { border-bottom: 0; }
.sf-mkf-sec.is-kind { --sec: var(--sf-code); --sec-ink: #150b33; }
.sf-mkf-sec.is-cond { --sec: var(--sf-sell); --sec-ink: var(--sf-sell-ink); }
.sf-mkf-sec.is-rarity { --sec: var(--sf-eyebrow); --sec-ink: #2b0616; }
.sf-mkf-sec.is-price { --sec: var(--sf-price); --sec-ink: #2a1f00; }
/* float: the legend sits in the content flow, so the section's padding is above it (not between it and the options) */
.sf-mkf-sec legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font-size: 14px; font-weight: 700; color: var(--v2-text); }
.sf-mkf-sec legend + * { clear: both; }
.sf-mkf-sec legend .icon { box-sizing: content-box; flex: none; width: 14px; height: 14px; padding: 5px; color: var(--sec); background: color-mix(in srgb, var(--sec) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sec) 45%, transparent); }
.sf-mkf-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-mkf-opts.is-cond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-mkf-opts.is-cond > :first-child { grid-column: 1 / -1; }
.sf-mkf-opt { position: relative; display: flex; min-width: 0; cursor: pointer; }
.sf-mkf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sf-mkf-opt span { flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13.5px; color: #c7bdd6; border: 1px solid #ffffff24; transition: color .15s, border-color .15s, background .15s; }
.sf-mkf-opt span b { font: 700 12.5px var(--v2-mono); color: var(--v2-text); }
.sf-mkf-opt span small { font-size: 12.5px; color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-mkf-sec .sf-mkf-opt:hover span { color: var(--opt, var(--sec)); border-color: color-mix(in srgb, var(--opt, var(--sec)) 65%, transparent); }
.sf-mkf-sec .sf-mkf-opt input:checked + span { color: var(--opt-ink, var(--sec-ink)); background: var(--opt, var(--sec)); border-color: var(--opt, var(--sec)); }
.sf-mkf-opt input:checked + span b, .sf-mkf-opt input:checked + span small { color: inherit; }
.sf-mkf-sec .sf-mkf-opt input:focus-visible + span { outline: 2px solid var(--opt, var(--sec)); outline-offset: 2px; }
/* an "all" choice that is on is only tinted — a solid fill means a real filter */
.sf-mkf-sec .sf-mkf-opt.is-all input:checked + span { color: var(--sec); background: color-mix(in srgb, var(--sec) 13%, transparent); border-color: color-mix(in srgb, var(--sec) 70%, transparent); }
/* เด็คพร้อมเล่น = a link to /decks/shop, not a choice: dashed, an arrow */
.sf-mkf-sec .sf-mkf-opt.is-link span { color: var(--sec); border-style: dashed; border-color: color-mix(in srgb, var(--sec) 50%, transparent); }
.sf-mkf-opt.is-link .icon { width: 14px; height: 14px; color: var(--sec); }
.sf-mkf-opt.is-link:focus-visible { outline: none; }
.sf-mkf-opt.is-link:focus-visible span { outline: 2px solid var(--sec); outline-offset: 2px; }
/* a condition wears its own colour on a scale */
.sf-mkf-opt[data-cond="NM"] { --opt: #2ee59d; --opt-ink: #03220f; }
.sf-mkf-opt[data-cond="LP"] { --opt: #a6e22e; --opt-ink: #1a2400; }
.sf-mkf-opt[data-cond="MP"] { --opt: #ffd24a; --opt-ink: #2a1f00; }
.sf-mkf-opt[data-cond="HP"] { --opt: #ff9f43; --opt-ink: #2b1300; }
.sf-mkf-opt[data-cond="DMG"] { --opt: #ff4757; --opt-ink: #2b0006; }
.sf-mkf-opt[data-cond="SEALED"] { --opt: #b9a8ff; --opt-ink: #150b33; }
.sf-mkf-opt[data-cond] span b { color: var(--opt); }
.sf-mkf-opt[data-cond] span b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; vertical-align: middle; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.sf-mkf-opt[data-cond] input:checked + span b::before { box-shadow: none; }
/* เกม (phone): partials/game-pick as one full-width box, then the language row of a multi-edition game */
.sf-mkf .sf-gpick { width: 100%; }
.sf-mkf .sf-gpick-btn { width: 100%; max-width: none; min-height: 44px; }
.sf-mkf .sf-gpick-btn .sf-gpick-name { flex: 1; text-align: left; }
.sf-mkf .sf-gpick-list { right: 0; min-width: 0; max-height: min(52vh, 380px); }
.sf-mkf-opts.is-eds { margin-top: 10px; }
.sf-mkf-opts.is-eds span small { flex: none; font-size: 11.5px; }
.sf-mkf-flag { width: 18px; height: 12px; object-fit: cover; flex: none; }
.sf-mkf-help { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--v2-accent); }
.sf-mkf-help .icon { width: 14px; height: 14px; }
.sf-mkf-help:hover { color: #ff5c9d; }
.sf-mkf-hint { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--v2-muted); background: #ffffff08; border: 1px solid var(--v2-line); }
.sf-mkf-price { display: flex; align-items: center; gap: 10px; }
.sf-mkf-price > span { color: var(--sec); font-weight: 700; }
.sf-mkf-price .sf-input { flex: 1 1 0; min-width: 0; min-height: 44px; font-family: var(--v2-mono); -moz-appearance: textfield; }
.sf-mkf-price .sf-input:focus { border-color: var(--sec); box-shadow: 0 0 14px color-mix(in srgb, var(--sec) 22%, transparent); }
.sf-mkf-price .sf-input::-webkit-inner-spin-button, .sf-mkf-price .sf-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf-mkf-foot { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--v2-line); }
.sf-mkf-foot > * { justify-content: center; }
.sf-mkf-foot .button-outline { flex: 0 0 auto; min-width: 96px; }
.sf-mkf-foot .button-primary { flex: 1 1 auto; }
.sf-mkf-foot .is-off { opacity: .4; pointer-events: none; }
.sf-mkf-foot .is-busy { opacity: .7; }

@media (min-width: 901px) {
  /* the grid shares the row with the rail: as many 215px+ tiles as fit (the theme's fixed 4 / 6 would be ~170px) */
  .sf-mk-main .product-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}
@media (min-width: 1400px) { .sf-mk-layout { grid-template-columns: 256px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .sf-mk-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sf-mk-rail, .sf-mk-bar, .sf-mk-sort { display: none; }
  .sf-mk-search { flex-basis: 100%; }
  /* the chip rail slides sideways, edge to edge */
  .sf-mk-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 2px 18px; }
  .sf-mk-chips::-webkit-scrollbar { display: none; }
  .sf-mk-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; font: 600 13.5px 'Noto Sans Thai', sans-serif; white-space: nowrap; color: var(--v2-text); background: #ffffff06; border: 1px solid #ffffff2e; cursor: pointer; }
  .sf-mk-chip > .icon { width: 16px; height: 16px; flex: none; color: var(--sf-action); }
  .sf-mk-chip .sf-mk-caret { width: 14px; height: 14px; color: var(--sf-muted); }
  .sf-mk-chip.is-game { max-width: 62vw; }
  .sf-mk-chip.is-game > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sf-mk-chip.is-on { color: var(--sf-action); border-color: #00f0ff99; background: #00f0ff12; }
  .sf-mk-chip.is-sort select { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .sf-mk-chip.is-sort select:focus { outline: none; }
  .sf-mk-chip.is-sort:focus-within, .sf-mk-chip:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
  /* the panel: the whole screen, with game + type */
  .sf-mkf { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; border: 0; box-shadow: none; }
  .sf-mkf[open] { animation-name: sf-mkf-up; }
  .sf-mkf .is-pc { display: none; }
  .sf-mkf-head .is-ph { display: inline; }
  .sf-mkf-foot .button.is-ph { display: inline-flex; }
  .sf-mkf-sec.is-game, .sf-mkf-sec.is-kind { display: block; }
  .sf-mkf-head { padding: 12px 16px; }
  .sf-mkf-body { padding: 0 16px 12px; }
  .sf-mkf-sec { padding: 14px 0; }
  .sf-mkf-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .sf-mkf[open] { animation: none; } }

/* ---------- Livewire pages (/market, /cards/…/all): the results dim while a
   filter / page change is on its way (wire:loading.delay.class) ---------- */
.sf-cards-results { transition: opacity .15s ease; }
.sf-cards-results.sf-cards-busy { opacity: .55; pointer-events: none; }

/* ---------- Shopee-style tile facts (owner 2026-09-30: "ตัวสินค้าอยากให้มีตัวบอกแบบ shopee") ----------
   partials/product-card: "ใหม่" on the art (bottom-left), the shop's codes (ส่งฟรี / ลด x%) as ticket
   chips under the code line, the stock chip under the price, and on the price row's right
   ★ stars · ขายแล้ว n over the shop's province. Each part renders only when its data is real. */
.sf-pc-new {
  position: absolute; left: 10px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px;
  font: 800 11px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: .02em; color: #fff;
  background: linear-gradient(100deg, #ff2e88, #b44dff);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  box-shadow: inset 0 1px 0 #ffffff59;
}
.sf-pc-new .icon { width: 12px; height: 12px; stroke-width: 2.4; }
@media (prefers-reduced-motion: no-preference) {
  .sf-pc-new::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, #ffffffa6 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
    animation: sf-pc-new-shine 3.2s ease-in-out infinite;
  }
}
@keyframes sf-pc-new-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

.sf-pc-promos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sf-pc-promo {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 7px;
  font: 700 11px/1.4 'Noto Sans Thai', sans-serif; white-space: nowrap; cursor: help;
  border: 1px dashed currentColor; border-radius: 3px;
}
.sf-pc-promo .icon { width: 12px; height: 12px; stroke-width: 2.2; flex: 0 0 auto; }
.sf-pc-promo.is-off { color: #ff6f9f; background: #ff2e881a; }
.sf-pc-promo.is-ship { color: #3cebaa; background: #2ee59d17; }

/* stock under the price: plenty = a quiet line, ≤ 2 left = a red chip with a flame */
.product-price small.sf-pc-stock { display: flex; align-items: center; gap: 4px; width: max-content; margin-top: 6px; color: var(--sf-muted); font-size: 11px; font-weight: 600; }
.product-price small.sf-pc-stock.stock-low { padding: 1px 8px 1px 6px; color: #ff6b7d; background: #ff47571f; box-shadow: inset 0 0 0 1px #ff475773; }
.product-price small.sf-pc-stock .icon { width: 12px; height: 12px; color: #ff8a3d; }

.product-bottom:has(.sf-pc-stats) { align-items: flex-end; }
.sf-pc-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; margin-left: auto; text-align: right; font-size: 11px; line-height: 1.35; color: var(--sf-muted); }
.sf-pc-rate { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sf-pc-rate > * + *::before { content: ''; display: inline-block; width: 1px; height: .9em; margin-right: 6px; vertical-align: -.1em; background: #ffffff33; }
.sf-pc-star { display: inline-flex; align-items: center; gap: 3px; color: var(--sf-price); font-weight: 700; }
.sf-pc-star .icon { width: 12px; height: 12px; fill: currentColor; }
.sf-pc-sold { color: #ffc38a; }
.sf-pc-place { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-pc-place .icon { width: 11px; height: 11px; flex: 0 0 auto; color: #9d8fb3; }
@media (max-width: 680px) {
  .sf-pc-new { left: 7px; bottom: 8px; padding: 2px 8px 2px 6px; font-size: 10px; }
  .sf-pc-promos { gap: 4px; margin-top: 5px; }
  .sf-pc-promo { padding: 1px 6px; font-size: 10px; }
  .sf-pc-stats { font-size: 10px; gap: 2px; }
  .product-price small.sf-pc-stock { font-size: 10px; margin-top: 4px; }
}

/* ---------- ขายเด็ค (2026-10-09): a deck sold as one item — "เด็ค n ใบ" on the art, bottom-right
   (ใหม่ sits bottom-left). Cyan = the action colour; notched like the ใหม่ ribbon, mirrored. ---------- */
.sf-pc-deck {
  position: absolute; right: 10px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 12px;
  font: 800 11px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: .02em; color: #06131c;
  background: linear-gradient(100deg, #5ef2ff, #19c3e6);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 #ffffff80;
}
.sf-pc-deck .icon { width: 13px; height: 13px; stroke-width: 2.3; }