/* Package F — decks, sell, buy, image search (2026-09-27).
 * Same tokens as theme-v2 / pages.css (violet-black, cyan lead, magenta
 * second, Space Mono numbers, notched corners). Every class is sf-decks-*;
 * the few element rules are scoped under .sf-decks or a sf-decks-* block. */

.sf-decks [x-cloak], .sf-decks-ov[x-cloak] { display: none !important; }
.sf-decks .icon { width: 18px; height: 18px; }
.sf-decks .button .icon { width: 17px; height: 17px; }
.sf-decks .button.is-sm { gap: 8px; }

/* ---------- shared bits ---------- */
.sf-decks-find { position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; background: #ffffff06; border: 1px solid #ffffff24; flex: 1 1 220px; min-width: 0; }
.sf-decks-find:focus-within { border-color: var(--v2-accent); box-shadow: 0 0 14px #00f0ff1f; }
.sf-decks-find .icon { color: var(--v2-accent); }
.sf-decks-find input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--v2-text); font: 13px 'Noto Sans Thai', sans-serif; padding: 10px 0; outline: none; }
.sf-decks-find-inline { max-width: 300px; }
.sf-decks-spin { width: 14px; height: 14px; border: 2px solid #00f0ff44; border-top-color: var(--v2-accent); border-radius: 50%; animation: sf-decks-spin .7s linear infinite; }
@keyframes sf-decks-spin { to { transform: rotate(360deg); } }
.sf-decks-x { width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--v2-muted); border: 1px solid transparent; flex: 0 0 auto; }
.sf-decks-x:hover { color: var(--v2-accent); border-color: #00f0ff44; }
.sf-decks-num { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; font: 700 12px var(--v2-mono); color: var(--v2-bg); background: var(--v2-accent); }
/* the dark ring keeps the pink badge readable on red / pink card art */
.sf-decks-count { position: absolute; right: 6px; bottom: 6px; z-index: 2; font: 800 13px/1 var(--v2-mono); padding: 5px 7px; background: var(--v2-pink); color: #fff; box-shadow: 0 0 0 2px #0a0014, 0 4px 14px #000c; }
.sf-decks-warn { color: #ffcf00; font-size: 12px; }
a.sf-decks-warn:hover { text-decoration: underline; }
.sf-decks-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--v2-muted); }
.sf-decks-stats b { color: var(--v2-text); }
.sf-decks-type { padding: 3px 8px; background: #ffffff08; border: 1px solid var(--v2-line); }
.sf-decks-thumb { position: relative; display: block; flex: 0 0 auto; width: 52px; aspect-ratio: 5 / 7; background: var(--v2-surface-2); overflow: hidden; }
.sf-decks-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- overlays (picker, series, import) ---------- */
.sf-decks-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: #05000cd9; backdrop-filter: blur(4px); }
.sf-decks-ov-card { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--v2-surface); border: 1px solid #00f0ff55; box-shadow: 0 30px 80px #000d; }
.sf-decks-ov-wide { width: min(860px, 100%); }
.sf-decks-ov-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-ov-head h2 { font: 800 15px/1.3 var(--v2-display); text-transform: uppercase; letter-spacing: .5px; }
.sf-decks-ov-body { padding: 18px 20px 20px; overflow: auto; display: grid; gap: 14px; }
.sf-decks-none { padding: 18px; text-align: center; font-size: 13px; color: var(--v2-muted); border: 1px dashed #ffffff24; }

/* ---------- /decks/build ---------- */
.sf-decks-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-top-game { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sf-decks-top-logo { width: 84px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; padding: 6px; background: #ffffff08; border: 1px solid #00f0ff33; }
.sf-decks-top-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-decks-top h1 { font: 900 clamp(22px, 3vw, 34px)/1.15 var(--v2-display); text-transform: uppercase; letter-spacing: -.3px; }
.sf-decks-top-acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sf-decks-top-acts .text-link { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }

/* the deck panel takes ~46% of the row (owner 2026-09-29: "ตัวจัดเด็คเหมือนเล็กเกินไป …
   ตัวการ์ดอาจชิดกันหน่อย เพื่อให้ตัวจัดเด็คใหญ่ขึ้น"; 2026-10-09: "ขยายเด็คของคุณให้ใหญ่ขึ้น" — 38% / 640px → 46% /
   860px once the filter column left the pool) — the pool pays with a tighter gap */
.sf-decks-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 46%, 860px); gap: 16px; align-items: start; }
.sf-decks-pool { min-width: 0; }
.sf-decks-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sf-decks-series-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 14px; max-width: 300px; min-width: 0; background: #00f0ff0d; border: 1px solid #00f0ff55; color: var(--v2-text); font-size: 13px; }
.sf-decks-series-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-decks-series-btn .icon { color: var(--v2-accent); }
.sf-decks-filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #ffffff24; font-size: 13px; color: #d9d0e6; }
.sf-decks-filter-btn:hover, .sf-decks-filter-btn[aria-expanded=true] { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-decks-filter-btn b { font: 700 11px var(--v2-mono); padding: 2px 6px; background: var(--v2-pink); color: #fff; }
.sf-decks-poolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin: 4px 0 12px; font-size: 12px; color: var(--v2-muted); }
.sf-decks-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf-decks-pager .sf-chip .icon { width: 13px; height: 13px; }
.sf-decks-pg { min-width: 40px; height: 36px; padding: 0 10px; border: 1px solid #ffffff24; font: 13px var(--v2-mono); color: var(--v2-text); }
.sf-decks-pg:hover:not(:disabled) { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-decks-pager-foot { justify-content: center; margin-top: 18px; gap: 12px; font-size: 13px; }
/* a page is whole rows of these columns (Build::setPoolCols, measured by pkg-decks.js) */
.sf-decks-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px; transition: opacity .2s; }
.sf-decks-pool-grid.is-loading, .sf-decks-slots-wrap.is-loading { opacity: .45; pointer-events: none; }
.sf-decks-card { position: relative; display: flex; flex-direction: column; background: var(--v2-surface); border: 1px solid #ffffff14; min-width: 0; transition: border-color .2s; }
.sf-decks-card:hover { border-color: #00f0ff55; }
.sf-decks-card.is-in { border-color: #ff006e88; }
.sf-decks-card-art { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; background: #0d0719; overflow: hidden; cursor: zoom-in; }
.sf-decks-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sf-decks-card:hover .sf-decks-card-art img { transform: scale(1.04); }
.sf-decks-card-info { padding: 5px 6px 1px; display: grid; gap: 1px; min-width: 0; }
.sf-decks-card-info b { font: 700 11px var(--v2-mono); color: var(--v2-accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-decks-card-info span { font-size: 11px; line-height: 1.4; color: #d9d0e6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-decks-add { margin: 4px 6px 6px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--v2-bg); background: var(--v2-accent); }
.sf-decks-add:hover { background: #7ff7ff; }
.sf-decks-add .icon { width: 15px; height: 15px; stroke-width: 2.4; }

.sf-decks-panel { position: sticky; top: 150px; display: flex; flex-direction: column; max-height: calc(100vh - 170px); background: var(--v2-surface); border: 1px solid #00f0ff44; box-shadow: inset 0 0 40px #00f0ff08; }
/* when even the slots' 160px floor doesn't fit under the cap (a guest card on a 768px-tall screen, the rules list
   open) the panel scrolls itself — its foot (save) used to hang below the frame, off the screen. Desktop only:
   ≤ 900px the panel is a static block (Phone app flow) and its tab strip sticks to the window. */
@media (min-width: 901px) { .sf-decks-panel { overflow: hidden auto; } }
.sf-decks-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-panel-head h2 { display: flex; align-items: center; gap: 10px; font: 800 14px var(--v2-display); text-transform: uppercase; }
.sf-decks-panel-head h2 .icon { color: var(--v2-accent); }
.sf-decks-sheet-close { display: none; }
.sf-decks-namebar { display: flex; gap: 8px; align-items: stretch; padding: 12px 16px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-name { flex: 1; display: flex; min-width: 0; border: 1px solid #ffffff24; }
.sf-decks-name:focus-within { border-color: var(--v2-accent); }
.sf-decks-name span { display: grid; place-items: center; padding: 0 10px; font-size: 11px; color: var(--v2-bg); background: var(--v2-accent); white-space: nowrap; }
.sf-decks-name input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 9px 10px; color: var(--v2-text); font: 13px 'Noto Sans Thai', sans-serif; outline: none; }
/* Guest card (2026-10-09, owner: "ทำตัว login ให้น่าสนใจกว่านี้" — it was one muted 12px line): notched frame
   (top-right + bottom-left; the diagonals painted back on ::after), cyan/magenta glow, one light sweep a few times
   after load (.sf-decks-guest-fx clips it — a transformed band outside the box would widen the page), the dot says
   whether an unsaved draft is waiting (amber + pulse once the deck has cards), 3 real perks, log in / register. */
.sf-decks-guest { --sf-edge: #00f0ff4d; --cut: 14px; position: relative; isolation: isolate; flex: 1; min-width: 0; display: grid;
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic text" "perks perks" "acts acts"; align-items: center; gap: 10px 18px;
  padding: 14px 14px 12px; border: 1px solid var(--sf-edge);
  background: radial-gradient(120% 150% at 0% 0%, #00f0ff1c, transparent 55%), radial-gradient(90% 130% at 100% 100%, #ff2e8826, transparent 62%), #130a24;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.sf-decks-guest::after { content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none; color: var(--sf-edge);
  background: var(--sf-diag) right top / var(--cut) var(--cut) no-repeat, var(--sf-diag) left bottom / var(--cut) var(--cut) no-repeat; }
.sf-decks-guest-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sf-decks-guest-fx::before { content: ''; position: absolute; inset: -20% auto -20% 0; width: 38%; transform: translateX(-120%) skewX(-16deg);
  background: linear-gradient(90deg, transparent, #ffffff12 45%, #00f0ff1f 55%, transparent); }
.sf-decks-guest-ic { grid-area: ic; position: relative; width: 46px; height: 46px; display: grid; place-items: center; color: var(--sf-action);
  border: 1.5px solid transparent; background: linear-gradient(#1a0f30, #1a0f30) padding-box, linear-gradient(135deg, var(--sf-action), var(--sf-promo)) border-box;
  box-shadow: 0 0 18px #00f0ff26; transition: transform .25s var(--sf-ease-pop, ease-out); }
.sf-decks-guest-ic > .icon { width: 22px; height: 22px; transition: transform .25s var(--sf-ease-pop, ease-out); }
.sf-decks-guest-ic i { position: absolute; right: -7px; bottom: -7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--sf-promo); box-shadow: 0 0 0 2px #130a24, 0 0 10px #ff2e8888; transition: transform .25s var(--sf-ease-pop, ease-out); }
.sf-decks-guest-ic i .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.sf-decks-guest-text { grid-area: text; display: grid; gap: 3px; min-width: 0; }
.sf-decks-guest-text b { font: 800 15px/1.35 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-decks-guest-now { display: flex; align-items: baseline; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--sf-muted); }
.sf-decks-guest-now i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8d82a3; transform: translateY(-1px); }
.sf-decks-guest.has-cards .sf-decks-guest-now { color: #ffd59a; }
.sf-decks-guest.has-cards .sf-decks-guest-now i { background: #ffb02e; }
.sf-decks-guest-now i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #ffb02e; opacity: 0; }
.sf-decks-guest-perks { grid-area: perks; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-decks-guest-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; font-size: 12px; line-height: 1.4; color: var(--sf-text);
  background: #ffffff09; border: 1px solid #ffffff17; }
.sf-decks-guest-perks .icon { width: 14px; height: 14px; color: var(--sf-action); flex: none; }
/* log in + register = an equal pair of notched buttons (owner 2026-10-09: "ทำปุ่มสมัครสมาชิกให้ดีๆ" — it was a bare
   text link). Register = the outline twin of the cyan button: same 12px cut, cyan frame on a cyan tint, the
   diagonals painted back on its own background (its ::before/::after are buttons.css's wipe + streak); hover = the
   site's pink wipe, and the diagonals turn pink with the frame. */
.sf-decks-guest-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-decks-guest-acts .button { flex: 0 1 190px; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; }
.sf-decks-guest-acts .button .icon { width: 16px; height: 16px; flex: none; }
.sf-decks-guest .sf-decks-guest-join { --cut: 12px; --sf-edge: #00f0ff99; color: var(--sf-action); border: 1px solid var(--sf-edge);
  background: linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)) right top / var(--cut) var(--cut) no-repeat border-box,
              linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)) left bottom / var(--cut) var(--cut) no-repeat border-box,
              #00f0ff14;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.sf-decks-guest .sf-decks-guest-join:is(:hover, :focus-visible, :active) { --sf-edge: var(--sf-wipe); border-color: var(--sf-edge);
  background-image: linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)),
                    linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)); }
/* guest: นำเข้า sits at the right of the panel head (the card holds log in / register) — phones did that already
   for a signed-in deck (Phone app flow: the whole namebar goes up there) */
.sf-decks-namebar:has(.sf-decks-guest) > .sf-decks-import-btn { position: absolute; top: 8px; right: 16px; z-index: 2; }
.sf-decks-panel:has(.sf-decks-guest) .sf-decks-panel-head { padding-right: 132px; }
@media (hover: hover) and (pointer: fine) {
  .sf-decks-guest:hover .sf-decks-guest-ic { transform: translateY(-2px) rotate(-4deg); }
  .sf-decks-guest:hover .sf-decks-guest-ic > .icon { transform: rotate(-10deg) scale(1.08); }
  .sf-decks-guest:hover .sf-decks-guest-ic i { transform: scale(1.15) rotate(8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .sf-decks-guest-fx::before { animation: sf-decks-guest-sweep 6s ease-in-out .8s 3; }
  .sf-decks-guest.has-cards .sf-decks-guest-now i::after { animation: sf-decks-guest-ping 1.8s ease-out infinite; }
}
@keyframes sf-decks-guest-sweep { 0% { transform: translateX(-120%) skewX(-16deg); } 22%, 100% { transform: translateX(320%) skewX(-16deg); } }
@keyframes sf-decks-guest-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.effects-off .sf-decks-guest-fx::before, .effects-off .sf-decks-guest-now i::after { animation: none; }
/* a narrow card (phones, the 380px panel ≤ 1180px): perks = 3 even columns, icon over the words */
.sf-decks-namebar:has(.sf-decks-guest) { container-type: inline-size; }
@container (max-width: 420px) {
  .sf-decks-guest-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-decks-guest-perks li { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; font-size: 11.5px; line-height: 1.35; }
  .sf-decks-guest-perks .icon { width: 16px; height: 16px; }
  .sf-decks-guest-acts .button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
}
.sf-decks-import-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 38px; border: 1px solid #ff006e88; color: #ff5c9d; font-size: 12px; white-space: nowrap; }
.sf-decks-import-btn:hover { background: #ff006e1a; }
.sf-decks-import-btn .icon { width: 15px; height: 15px; }
.sf-decks-panel .sf-decks-stats { padding: 10px 16px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-slots-wrap { flex: 1; overflow: auto; padding: 14px 16px; min-height: 160px; transition: opacity .2s; }
.sf-decks-slots-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; font-size: 12px; color: var(--v2-muted); border: 1px dashed #ffffff24; }
.sf-decks-slots-empty .icon { width: 26px; height: 26px; color: var(--v2-accent); }
/* One tile per COPY (owner 2026-10-07: "แยกเป็นใบๆ ดีกว่า"): 4–6 across in the panel, like the deck view's
   spread. The − / + keys sit on each card's foot (always shown — phones have no hover), on a solid base so
   they read over any art; colours: buttons.css "Steppers". */
.sf-decks-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px 8px; }
.sf-decks-slot { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; }
.sf-decks-slot-pic { position: relative; }
.sf-decks-slot-art { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; background: #0d0719; overflow: hidden; border: 1px solid #ffffff1a; cursor: zoom-in; }
.sf-decks-slot.is-cover .sf-decks-slot-art { border-color: #ffcf00; box-shadow: 0 0 12px #ffcf0044; }
.sf-decks-slot-art img { width: 100%; height: 100%; object-fit: cover; }
.sf-decks-star { position: absolute; top: 3px; left: 3px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; background: #0a0014cc; color: #ffffff99; }
.sf-decks-star .icon { width: 14px; height: 14px; }
.sf-decks-star:hover, .sf-decks-star.is-on { color: #ffcf00; }
.sf-decks-star.is-on .icon { fill: #ffcf00; }
.sf-decks-slot .sf-decks-step { position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 2; display: flex; justify-content: space-between; height: 28px; background: none; pointer-events: none; }
.sf-decks-slot .sf-decks-step:focus-within { box-shadow: none; }
.sf-decks-slot .sf-decks-step button { width: 28px; height: 100%; display: grid; place-items: center; pointer-events: auto; background-color: #0a0014; }
.sf-decks-step .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.sf-decks-slot-code { font: 11px var(--v2-mono); color: #b9aecb; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .sf-decks-slot { animation: sf-decks-copy-in .22s var(--sf-ease-pop, ease-out) both; }   /* a copy just added pops in (kept tiles are morphed, not re-made) */
}
@keyframes sf-decks-copy-in { from { opacity: 0; transform: scale(.9); } }
.effects-off .sf-decks-slot { animation: none; }
.sf-decks-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--v2-line); }
.sf-decks-panel-foot .text-link { font-size: 12px; }
.sf-decks-spacer { flex: 1; }
.sf-decks-bar, .sf-decks-scrim { display: none; }

/* Series picker (owner 2026-09-29: "popup มันดูเล็กเกินไปจนไม่สวยเลย"): a wide, fixed-height panel —
   filtering never resizes it — whose search row + type chips stay while the list scrolls. */
.sf-decks-ov-series { width: min(1240px, 100%); min-width: 0; height: min(900px, calc(100vh - 32px)); }   /* min-width 0: the chip row widened it past a phone screen */
.sf-decks-ov-series .sf-decks-ov-head { align-items: flex-start; padding: 18px 18px 14px 24px; }
.sf-decks-ov-series .sf-decks-ov-head h2 { font-size: 20px; }
.sf-decks-ov-series .sf-decks-ov-head .sf-note { margin-top: 4px; font-size: 13px; }
.sf-decks-ov-tools { padding: 14px 24px; border-bottom: 1px solid var(--v2-line); background: #ffffff03; }
.sf-decks-ov-tools .sf-decks-find { min-height: 48px; }
.sf-decks-ov-tools .sf-decks-find input { font-size: 14px; }
.sf-decks-ov-series .sf-decks-ov-body { flex: 1; min-height: 0; align-content: start; padding: 20px 24px 24px; }
/* The list (2026-10-06, owner: "pop ดูซีรีย์ดูยากไปไหม และดูไม่ค่อยสวยเลย"): one row per series in a dense grid —
   cover thumb · code + date · name (2 lines) · card count —, a sticky header per release year, type chips whose
   colour (--sg) marks each row's thumb edge + code. */
.sf-sr-chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.sf-sr-chip { --sg: var(--sf-action); flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--sf-muted); background: #ffffff06; border: 1px solid var(--sf-border-strong); transition: color .15s, border-color .15s, background .15s; }
.sf-sr-chip i { width: 8px; height: 8px; background: var(--sg); box-shadow: 0 0 8px var(--sg); }
.sf-sr-chip b { font: 700 11px var(--v2-mono); color: var(--sf-muted); }
.sf-sr-chip:hover { color: #fff; border-color: var(--sg); }
.sf-sr-chip.is-on { color: #fff; border-color: var(--sg); background: color-mix(in srgb, var(--sg) 18%, transparent); }
.sf-sr-chip.is-on b { color: #fff; }
.sf-sr-chip:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-decks-ov-series .sf-sr-body { display: block; padding: 0 24px 24px; }
.sf-sr-all { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 10px 14px; text-align: left; background: #ffffff05; border: 1px solid var(--sf-border); transition: border-color .15s, background .15s; }
.sf-sr-all:hover, .sf-sr-all:focus-visible { border-color: var(--sf-border-hover); outline: none; }
.sf-sr-all-ico { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid #00f0ff44; background: #00f0ff0d; }
.sf-sr-all-ico .icon { width: 22px; height: 22px; color: var(--sf-action); }
.sf-sr-all b { display: block; font-size: 14px; color: var(--sf-text); }
.sf-sr-all small { font-size: 12px; color: var(--sf-muted); }
.sf-sr-year > h3 { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 0 8px; font: 800 18px/1.2 var(--v2-display); color: var(--sf-heading); background: var(--v2-surface); }
.sf-sr-year > h3::before { content: ''; align-self: center; width: 4px; height: 16px; background: var(--sf-heading-mark); }
.sf-sr-year > h3 span { font: 600 12px 'Noto Sans Thai', sans-serif; color: var(--sf-muted); }
.sf-sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 8px; }
.sf-sr-item { --sg: var(--sf-code); position: relative; display: flex; align-items: stretch; gap: 12px; min-width: 0; padding: 8px 10px 8px 8px; text-align: left; background: #ffffff05; border: 1px solid var(--sf-border); transition: border-color .15s, background .15s; }
.sf-sr-item:hover, .sf-sr-item:focus-visible { border-color: var(--sf-border-hover); background: #ffffff0a; outline: none; }
.sf-sr-item.is-current { border-color: var(--v2-pink); background: #ff006e14; box-shadow: inset 3px 0 0 var(--v2-pink); }
.sf-sr-thumb { position: relative; flex: 0 0 56px; height: 72px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #0d0719; box-shadow: inset 0 -2px 0 var(--sg); }
.sf-sr-thumb > img { position: relative; z-index: 1; max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 3px 6px #000b); }
.sf-sr-thumb > .sf-sr-blur { position: absolute; inset: -20%; z-index: 0; width: 140%; height: 140%; max-width: none; max-height: none; object-fit: cover; filter: blur(10px) saturate(1.3); opacity: .5; }
.sf-sr-thumb > b { display: none; max-width: 100%; padding: 0 4px; overflow: hidden; white-space: nowrap; font: 900 13px/1.1 var(--v2-display); color: #fff; text-shadow: 0 0 10px var(--sg); }
.sf-sr-thumb:not(:has(img)) { background: linear-gradient(160deg, color-mix(in srgb, var(--sg) 30%, #140a26), #0d0719 70%); }
.sf-sr-thumb:not(:has(img)) > b { display: block; }
.sf-sr-txt { flex: 1; min-width: 0; display: grid; align-content: center; gap: 2px; }
.sf-sr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.sf-sr-top b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; color: var(--sg); }
.sf-sr-top time { flex: none; font-size: 11.5px; color: var(--sf-muted); }
.sf-sr-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--sf-text); }
.sf-sr-meta { font-size: 11.5px; color: var(--sf-muted); }
.sf-sr-on { position: absolute; bottom: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font: normal 700 10.5px/1 'Noto Sans Thai', sans-serif; color: #fff; background: var(--v2-pink); }
.sf-sr-on .icon { width: 11px; height: 11px; stroke-width: 3; }
.sf-decks-import-text { font-family: var(--v2-mono); font-size: 12px; min-height: 200px; resize: vertical; }

/* ---------- /decks/view ---------- */
.sf-decks-hero { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px; margin-bottom: 22px; background: radial-gradient(ellipse at 20% 30%, #00f0ff14, transparent 60%), var(--v2-surface); border: 1px solid #00f0ff44; overflow: hidden; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
/* the game-logo watermark stays INSIDE the frame, right-aligned one padding from the edge (2026-10-09, owner: "logo game
   ชิดขอบฝั่งขวาเกินไปไหม" — it sat at right: -20px, centred, so a wide logo like Digimon's ran 19px past the edge) */
.sf-decks-hero-wm { position: absolute; right: 32px; top: 50%; width: 420px; max-width: 45%; height: 70%; transform: translateY(-50%); background: right center / contain no-repeat; opacity: .07; pointer-events: none; }
.sf-decks-hero-cover img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; box-shadow: 0 24px 40px #000c; transform: rotate(-3deg); }
.sf-decks-hero-meta { position: relative; display: grid; gap: 12px; min-width: 0; }
.sf-decks-hero-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sf-decks-hero-name h1 { font: 900 clamp(24px, 3.4vw, 40px)/1.15 'Noto Sans Thai', var(--v2-display); word-break: break-word; }
.sf-decks-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #00f0ff66; color: var(--v2-accent); font-size: 12px; }
.sf-decks-copy:hover, .sf-decks-copy.is-copied { background: var(--v2-accent); color: var(--v2-bg); }
.sf-decks-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* crumbs left, back button right (wraps under the crumbs on a phone) — same row as .sf-au-top / .sf-tn-top */
.sf-decks-viewtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.sf-decks-viewtop .sf-crumbs { margin-bottom: 0; min-width: 0; }
/* The deck in ONE notched frame (2026-10-09, owner: "ทำให้สวยกว่านี้หน่อย อาจใส่กรอบรอบนอก" → "ไม่ใช่ใส่กรอบตรงการ์ด
   ใส่รอบนอกเด็ค"): the hero's notch + diagonals, a part per deck tab split by a hairline, each headed by a magenta
   bar · tab name · n/size chip (green complete / gold short / red over, like the builder's tabs) · kinds. */
.sf-decks-board { --sf-edge: #00f0ff38; --sf-notch: 18px; position: relative; padding: 0 24px 26px;
  background: radial-gradient(ellipse 45% 60% at 0% 0%, #00f0ff0f, transparent 70%), radial-gradient(ellipse 40% 55% at 100% 100%, #ff2e880c, transparent 70%), var(--v2-surface);
  border: 1px solid var(--sf-edge); box-shadow: inset 0 0 40px #00f0ff06;
  clip-path: polygon(0 0, calc(100% - var(--sf-notch)) 0, 100% var(--sf-notch), 100% 100%, var(--sf-notch) 100%, 0 calc(100% - var(--sf-notch))); }
.sf-decks-board::after { content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none; color: var(--sf-edge);
  background: var(--sf-diag) right top / var(--sf-notch) var(--sf-notch) no-repeat, var(--sf-diag) left bottom / var(--sf-notch) var(--sf-notch) no-repeat; }
.sf-decks-board-part + .sf-decks-board-part { margin-top: 24px; border-top: 1px solid var(--v2-line); }
.sf-decks-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 20px 0 16px; }
.sf-decks-board-head::before { content: ''; flex: none; width: 4px; height: 20px; background: var(--sf-heading-mark); box-shadow: 0 0 8px var(--sf-heading-mark); }
.sf-decks-board .sf-decks-zone-h { margin: 0; font-size: 17px; }
.sf-decks-board-count { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 13px; font-weight: 800; line-height: 1.2;
  color: var(--sf-text); background: #ffffff0a; border: 1px solid var(--sf-border-strong); }
.sf-decks-board-count b { font-weight: 800; }
.sf-decks-board-count small { font-size: 11px; font-weight: 400; color: var(--sf-muted); }
.sf-decks-board-count .icon { width: 13px; height: 13px; stroke-width: 3; }
.sf-decks-board-count.is-ok { color: #2ee59d; background: #2ee59d12; border-color: #2ee59d55; }
.sf-decks-board-count.is-short { color: var(--sf-price); background: #ffd24a10; border-color: #ffd24a55; }
.sf-decks-board-count.is-over { color: var(--sf-danger); background: #ff47570f; border-color: #ff475766; }
.sf-decks-board-kinds { margin-left: auto; font-size: 12px; color: var(--sf-muted); }
/* the cards themselves wear no frame: no box behind them (a <button> took padding + a dark fill, so each card sat
   on a bigger square), rounded like a card, a soft shadow; hover lifts the card with a cyan glow */
.sf-decks-spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px 10px; }
.sf-decks-spread-card { position: relative; display: block; padding: 0; aspect-ratio: 5 / 7; background: none; border: 0; border-radius: 4.5% / 3.2%; cursor: zoom-in; transition: transform .2s; }
.sf-decks-spread-card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: 0 6px 14px #0009; transition: box-shadow .2s; }
@media (hover: hover) and (pointer: fine) {
  .sf-decks-spread-card:hover { transform: translateY(-4px); z-index: 1; }
  .sf-decks-spread-card:hover img { box-shadow: 0 14px 26px #000b, 0 0 20px #00f0ff59; }
}
.sf-decks-spread-card:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 3px; }
/* the text list under it: same head (magenta bar, Thai heading), + / − at the right */
.sf-decks-list { margin-top: 18px; }
.sf-decks-list > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; font: 800 15px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); list-style: none; }
.sf-decks-list > summary::before { content: ''; flex: none; width: 4px; height: 18px; background: var(--sf-heading-mark); box-shadow: 0 0 8px var(--sf-heading-mark); }
.sf-decks-list > summary::-webkit-details-marker { display: none; }
.sf-decks-list > summary::after { content: '+'; margin-left: auto; font: 700 20px/1 var(--v2-mono); color: var(--sf-action); }
.sf-decks-list[open] > summary::after { content: '−'; }
.sf-decks-list > summary:hover { color: #fff; }
.sf-decks-list .sf-rows { margin-top: 14px; }

/* ---------- /decks/estimate + summary ---------- */
.sf-decks-est-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 18px 28px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-est-deck { display: flex; gap: 18px; align-items: center; min-width: 0; flex: 1 1 380px; }
.sf-decks-est-deck img { width: 76px; aspect-ratio: 5 / 7; object-fit: cover; flex: 0 0 auto; box-shadow: 0 14px 28px #000b; }
.sf-decks-est-deck h1 { font: 900 clamp(22px, 3vw, 34px)/1.2 'Noto Sans Thai', var(--v2-display); margin: 6px 0; word-break: break-word; }
.sf-decks-total { display: grid; gap: 4px; align-content: center; padding: 16px 20px; min-width: min(300px, 100%); background: #00f0ff0a; border: 1px solid #00f0ff55; }
.sf-decks-total small { font-size: 11px; color: var(--v2-muted); }
.sf-decks-total b { font: 700 clamp(26px, 3.4vw, 36px)/1.1 var(--v2-mono); color: var(--v2-accent); }
.sf-decks-total span { font-size: 12px; color: #d9d0e6; }
.sf-decks-shops { display: grid; gap: 18px; }
.sf-decks-shop { padding: 18px 20px; }
.sf-decks-shop-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); }
.sf-decks-shop-name { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-decks-shop-name .sf-shop-logo { width: 40px; height: 40px; flex: 0 0 40px; font-size: 16px; }
.sf-decks-shop-name b { display: block; font-size: 15px; }
.sf-decks-shop-name small { display: block; font-size: 11px; color: var(--v2-muted); }
.sf-decks-shop-name:hover b { color: var(--v2-accent); }
.sf-decks-shop-sum { font: 700 17px var(--v2-mono); white-space: nowrap; }
.sf-decks-shop-sum small { font: 12px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
.sf-decks-line { display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px 118px 96px 36px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--v2-line); }
.sf-decks-line:last-child { border-bottom: 0; }
.sf-decks-line.is-picked { background: linear-gradient(90deg, #00f0ff0a, transparent 60%); }
.sf-decks-line-head { padding: 10px 0 8px; font: 400 10px var(--v2-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-muted); }
.sf-decks-line-head span:nth-child(n+3) { text-align: right; }
.sf-decks-line-head span:nth-child(4) { text-align: center; }
.sf-decks-check { width: 18px; height: 18px; accent-color: var(--v2-accent); cursor: pointer; }
.sf-decks-line-card { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sf-decks-line-card > div { display: grid; gap: 2px; min-width: 0; }
.sf-decks-line-card b { font: 700 12px var(--v2-mono); color: var(--v2-accent); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf-decks-line-card .sf-tag { padding: 3px 5px; font-size: 9px; }
.sf-decks-line-name { font-size: 13px; font-weight: 600; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-decks-line-card small { font-size: 11px; color: var(--v2-muted); }
.sf-decks-line-unit { text-align: right; font: 13px var(--v2-mono); }
.sf-decks-line-sum { text-align: right; font: 700 14px var(--v2-mono); }
.sf-decks-qty { display: inline-flex; align-items: center; justify-content: space-between; height: 34px; border: 1px solid #ffffff2e; }
.sf-decks-qty button { width: 34px; height: 100%; display: grid; place-items: center; }   /* colours: buttons.css "Steppers" */
.sf-decks-qty .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.sf-decks-qty span { min-width: 28px; text-align: center; font-size: 14px; }
.sf-decks-del { width: 34px; height: 34px; display: grid; place-items: center; color: var(--v2-muted); border: 1px solid transparent; }
.sf-decks-del:hover { color: var(--v2-pink); border-color: #ff006e55; }
.sf-decks-del .icon { width: 15px; height: 15px; }
.sf-decks-missing { margin-top: 18px; }
.sf-decks-missing .sf-decks-num { background: #ffcf00; }
.sf-decks-missing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.sf-decks-missing-card, .sf-decks-sum-card { display: flex; gap: 12px; align-items: center; padding: 8px; background: #ffffff05; border: 1px solid var(--v2-line); min-width: 0; }
.sf-decks-missing-card > div, .sf-decks-sum-card > div { display: grid; gap: 1px; min-width: 0; font-size: 12px; }
.sf-decks-missing-card b, .sf-decks-sum-card > div > b:first-child { font: 700 11px var(--v2-mono); color: var(--v2-accent); }
.sf-decks-missing-card span, .sf-decks-sum-card span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.sf-decks-missing-card small, .sf-decks-sum-card small { color: var(--v2-muted); font-size: 11px; }
.sf-decks-sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.sf-decks-sum-card .sf-decks-count { font-size: 10px; right: 2px; bottom: 2px; padding: 2px 4px; }
.sf-decks-couriers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #ffffff1f; }
.sf-decks-couriers-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-muted); margin-right: 4px; }
.sf-decks-courier { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #ffffff24; font-size: 12px; }
.sf-decks-courier img { width: 26px; height: 18px; object-fit: contain; background: #fff; padding: 1px; }
.sf-decks-courier b { font: 700 12px var(--v2-mono); color: var(--v2-accent); }
.sf-decks-courier:hover { border-color: #00f0ff66; }
.sf-decks-courier.is-on { border-color: var(--v2-accent); background: #00f0ff14; box-shadow: inset 0 0 0 1px var(--v2-accent); }
.sf-decks-foot { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 24px; padding: 14px 18px; background: #140c22f2; border: 1px solid #00f0ff55; backdrop-filter: blur(10px); box-shadow: 0 -12px 30px #0009; }
.sf-decks-foot-info { font-size: 13px; color: #d9d0e6; }
.sf-decks-foot-info b { font-family: var(--v2-mono); }
.sf-decks-foot-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-decks-foot-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sf-decks-foot-info { flex: 1 1 auto; }
.sf-decks-ok { color: #3ee8a0; font-size: 12px; }
.sf-decks-est-tabs { display: none; }

/* ---------- /sell (2026-10-09, owner: "รายละเอียดมันเยอะเกินไปไหม ทำให้ดูยากและรกไปหมด") ----------
   Two short choice cards (icon · title · one line · 3 steps on ONE row · the viewer's button), the
   buylist as one swipe row, condition / grading codes folded in a closed <details> at the foot. */
.sf-sell-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-sell-ways.is-one { grid-template-columns: minmax(0, 640px); }
.sf-sell-way { --tone: var(--v2-accent); --sf-edge: color-mix(in srgb, var(--tone) 38%, transparent); display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.sf-sell-way + .sf-sell-way { margin-top: 0; }
.sf-sell-way.is-shop { --tone: #3ee8a0; }
.sf-sell-way-top { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; }
.sf-sell-way-ic { width: 46px; height: 46px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); }
.sf-sell-way-ic .icon { width: 22px; height: 22px; }
.sf-panel.sf-sell-way h2 { margin: 0 0 4px; font: 800 18px/1.3 var(--v2-display); letter-spacing: 0; text-transform: none; }
.sf-sell-way-top p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v2-muted); }
.sf-sell-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: sf-sell; }
.sf-sell-steps li { counter-increment: sf-sell; display: flex; gap: 8px; align-items: center; min-width: 0; padding: 9px 10px; font-size: 12.5px; line-height: 1.35; color: #ddd5ea; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-sell-steps li::before { content: counter(sf-sell); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 var(--v2-mono); color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); }
.sf-sell-acts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: auto; }
.sf-sell-need { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 12.5px; color: var(--v2-muted); }
.sf-sell-need .icon { flex: 0 0 auto; width: 16px; height: 16px; color: #3ee8a0; }
.sf-sell-list { margin-top: 44px; }
.sf-sell-list .sf-toolbar { margin: -6px 0 14px; }
.sf-sell-list .sf-shelf { --shelf-w: 215px; grid-auto-columns: var(--shelf-w); gap: 16px; }
.sf-sell-list .sf-hrow.is-loading { opacity: .55; transition: opacity .15s; }
.sf-sell-ref { margin-top: 40px; border: 1px solid var(--v2-line); background: #ffffff04; }
.sf-sell-ref summary { display: flex; gap: 10px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.sf-sell-ref summary::-webkit-details-marker { display: none; }
.sf-sell-ref summary:hover { background: #ffffff06; }
.sf-sell-ref summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
.sf-sell-ref summary > .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v2-accent); }
.sf-sell-ref-codes { margin-left: auto; font: 400 12px var(--v2-mono); color: var(--v2-muted); white-space: nowrap; }
.sf-sell-ref-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--v2-muted); transform: rotate(90deg); transition: transform .2s; }
.sf-sell-ref[open] .sf-sell-ref-chev { transform: rotate(-90deg); }
.sf-sell-ref[open] .sf-sell-ref-codes { visibility: hidden; }
.sf-sell-ref-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 32px; padding: 6px 18px 18px; }
.sf-sell-ref h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--v2-text); }
.sf-sell-ref .sf-note { margin: 0 0 10px; }
.sf-sell-conds { display: grid; gap: 6px; margin: 0; }
.sf-sell-conds > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.sf-sell-conds dt .sf-tag { display: inline-flex; width: 46px; justify-content: center; box-sizing: border-box; }
.sf-sell-conds dd { margin: 0; font-size: 13px; }
.sf-sell-conds small { margin-left: 4px; font-size: 11px; color: var(--v2-muted); }
.sf-sell-ref-more { margin: 0; padding: 0 18px 16px; }
@media (max-width: 900px) {
  .sf-sell-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .sf-sell-way { padding: 18px 16px; gap: 14px; }
  .sf-panel.sf-sell-way h2 { font-size: 16px; }
  /* phones: the 3 steps as plain lines (3 boxes broke the words over 2 lines) */
  .sf-sell-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sf-sell-steps li { padding: 0; font-size: 13px; background: none; border: 0; }
  .sf-sell-list { margin-top: 34px; }
  .sf-sell-list .sf-shelf { --shelf-w: 170px; }
  .sf-sell-ref summary { padding: 13px 14px; }
  .sf-sell-ref-codes { display: none; }
  .sf-sell-ref-chev { margin-left: auto; }
  .sf-sell-ref-body { grid-template-columns: minmax(0, 1fr); padding: 4px 14px 16px; }
  .sf-sell-ref-more { padding: 0 14px 14px; }
}

/* ---------- /buy ---------- */
.sf-decks-rarities { margin: -8px 0 24px; }
.sf-decks-buy-search .sf-input { border-right: 0; }
.sf-decks-cam { padding: 0 12px; border: 1px solid #ffffff24; border-right: 0; color: var(--v2-pink); }
.sf-decks-cam:hover { background: #ff006e1a; }

/* ---------- zoom popup + image search (pkg-decks.js) ---------- */
.sf-decks-zoom { width: min(880px, calc(100% - 24px)); }
.sf-decks-zoom .sf-dialog-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.sf-decks-zoom-img img { width: 100%; aspect-ratio: 5 / 7; object-fit: contain; background: #0d0719; }
.sf-decks-zoom-meta { display: grid; gap: 14px; min-width: 0; }
.sf-decks-zoom-meta h3 { font-size: 20px; font-weight: 800; line-height: 1.35; word-break: break-word; }
.sf-decks-zoom-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.sf-decks-zoom-stats div { padding: 6px 10px; background: #ffffff06; border: 1px solid var(--v2-line); }
.sf-decks-zoom-stats small { display: block; font-size: 10px; color: var(--v2-muted); }
.sf-decks-zoom-stats b { font-size: 13px; word-break: break-word; }
.sf-decks-zoom-tabs { display: flex; gap: 4px; }
.sf-decks-zoom-tabs button { padding: 5px 10px; font: 700 11px var(--v2-mono); border: 1px solid #ffffff24; color: var(--v2-muted); }
.sf-decks-zoom-tabs button.is-on { background: var(--v2-accent); color: var(--v2-bg); border-color: var(--v2-accent); }
.sf-decks-zoom-nav { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 0 auto; font: 400 12px var(--v2-mono); color: var(--v2-muted); text-transform: none; }
.sf-decks-zoom-panel { display: grid; gap: 12px; }
.sf-decks-zoom-panel[hidden] { display: none; }
.sf-decks-zoom-sec h4 { font: 400 10px var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-accent); margin-bottom: 4px; }
.sf-decks-zoom-sec.is-trigger h4 { color: #ffcf00; }
.sf-decks-zoom-text { font-size: 13px; line-height: 1.8; color: #ddd5ea; white-space: pre-line; max-height: 240px; overflow: auto; }
.sf-decks-zoom-text p { margin: 0 0 6px; }
.sf-decks-zoom-text.is-html { white-space: normal; }
.sf-decks-zoom-text ul, .sf-decks-zoom-text ol { margin: 0 0 6px 18px; }
.sf-decks-glyph { display: inline-block; height: 1.3em; width: auto; margin: 0 1px; vertical-align: -.3em; }
.sf-decks-mana { display: inline-block; height: 1.1em; width: 1.1em; margin: 0 1px; vertical-align: -.15em; }
.sf-decks-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-decks-zoom-add { display: flex; gap: 8px; align-items: stretch; }
.sf-decks-zoom-add .sf-decks-qty { height: auto; min-height: 40px; }
.sf-decks-zoom-flavor { font-size: 12px; font-style: italic; color: var(--v2-muted); }
.sf-decks-zoom-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sf-decks-zoom .sf-price-list a, .sf-decks-zoom .sf-price-list div { font-size: 12px; }
.sf-decks-zoom .sf-price-list small { color: var(--v2-muted); margin-right: 8px; }
.sf-decks-isearch .sf-dialog-body { display: grid; gap: 14px; }
.sf-decks-isearch-head { display: flex; gap: 14px; align-items: center; }
.sf-decks-isearch-head img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #00f0ff55; }
.sf-decks-isearch-list { display: grid; gap: 8px; }
.sf-decks-isearch-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-decks-isearch-row:hover { border-color: var(--v2-accent); }
.sf-decks-isearch-row img { width: 44px; height: 62px; object-fit: cover; }
.sf-decks-isearch-row b { display: block; font-size: 13px; line-height: 1.35; }
.sf-decks-isearch-row small { font-size: 11px; color: var(--v2-muted); }
.sf-decks-conf { font: 700 10px var(--v2-mono); padding: 4px 6px; border: 1px solid; white-space: nowrap; }
.sf-decks-conf.is-high { color: #3ee8a0; }
.sf-decks-conf.is-medium { color: var(--v2-accent); }
.sf-decks-conf.is-low { color: var(--v2-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .sf-decks-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 900px) {
  /* minmax(0, …): the builder's panel sits in this grid on phones (app flow) — with plain 1fr a game with many
     tabs (Riftbound: 6, the strip scrolls) widened it past the screen and cut the 4th column of cards (2026-10-09) */
  .sf-decks-grid { grid-template-columns: minmax(0, 1fr); }
  /* the deck panel becomes a bottom sheet opened from the fixed bar */
  .sf-decks-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150; max-height: 86vh; transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; border-left: 0; border-right: 0; }
  .sf-decks-panel.is-open { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: 0 -20px 60px #000d; }
  .sf-decks-sheet-close { display: inline-grid; }
  .sf-decks-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .sf-decks-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 140; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; background: var(--v2-accent); color: var(--v2-bg); font-weight: 700; font-size: 13px; box-shadow: 0 12px 30px #000c; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
  .sf-decks-bar span { display: inline-flex; align-items: center; gap: 8px; }
  .sf-decks-bar .icon { color: var(--v2-bg); }
  .sf-decks-scrim { display: block; position: fixed; inset: 0; z-index: 145; background: #05000cb3; }
  .sf-decks-build { padding-bottom: 110px; }
  .sf-decks-line { grid-template-columns: 26px minmax(0, 1fr) 88px 80px; grid-template-areas: "c card card del" ". unit qty sum"; gap: 8px 8px; }
  .sf-decks-line > .sf-decks-check { grid-area: c; align-self: start; margin-top: 4px; }
  .sf-decks-line-card { grid-area: card; }
  .sf-decks-line-unit { grid-area: unit; text-align: left; font-size: 12px; color: var(--v2-muted); }
  .sf-decks-line-unit::before, .sf-decks-line-sum::before { content: attr(data-label) ' '; font: 11px 'Noto Sans Thai', sans-serif; color: var(--v2-muted); }
  .sf-decks-line-sum { grid-area: sum; }
  .sf-decks-qty { grid-area: qty; height: 32px; }
  .sf-decks-qty button { width: 30px; }
  .sf-decks-qty span { min-width: 22px; }
  .sf-decks-del { grid-area: del; align-self: start; justify-self: end; }
  .sf-decks-line-unit::before { display: block; }
  .sf-decks-line-head { grid-template-columns: 26px 1fr; }
  .sf-decks-line-head span:nth-child(n+3) { display: none; }
  .sf-decks-zoom .sf-dialog-body { grid-template-columns: 1fr; }
  .sf-decks-zoom-img { max-width: 260px; margin: 0 auto; width: 100%; }
}
@media (max-width: 680px) {
  .sf-decks-top-logo { width: 64px; height: 42px; }
  .sf-decks-series-btn { max-width: none; flex: 1 1 100%; }
  .sf-decks-filter-btn { flex: 0 0 auto; }
  .sf-decks-pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sf-decks-card-info { padding: 5px 6px 0; }
  .sf-decks-card-info span { display: none; }
  .sf-decks-add { margin: 5px 6px 6px; min-height: 32px; }
  .sf-decks-add span { display: none; }
  .sf-decks-hero { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; align-items: start; }
  .sf-decks-hero-cover { padding-top: 6px; }
  .sf-decks-hero-wm { width: 70%; max-width: none; right: 18px; }
  .sf-decks-hero-acts .button { flex: 1 1 auto; justify-content: center; }
  .sf-decks-spread { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
  .sf-decks-board { --sf-notch: 14px; padding: 0 12px 16px; }
  .sf-decks-board-head { gap: 6px 10px; padding: 14px 0 12px; }
  .sf-decks-board .sf-decks-zone-h { font-size: 15px; }
  .sf-decks-board-part + .sf-decks-board-part { margin-top: 16px; }
  .sf-decks-shop { padding: 14px; }
  .sf-decks-est-deck img { width: 60px; }
  .sf-decks-total { width: 100%; }
  /* the deck bar + sticky foot ride above the phone tab bar (pkg-chrome.css, 60px + safe area) */
  .sf-decks-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sf-decks-build { padding-bottom: 150px; }
  .sf-decks-foot { padding: 10px 12px 30px; gap: 8px; margin-inline: -8px; bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sf-decks-foot-info { font-size: 12px; line-height: 1.5; }
  .sf-decks-foot-acts { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .sf-decks-foot-acts .button { min-height: 40px; padding: 0 6px; font-size: 12px; gap: 4px; justify-content: center; white-space: nowrap; }
  .sf-decks-foot-acts .button .icon { display: none; }
  .sf-decks-ov { padding: 0; place-items: end stretch; }
  .sf-decks-ov-card, .sf-decks-ov-wide { width: 100%; max-height: 88vh; }
  .sf-decks-ov-series { height: 88vh; }
  .sf-decks-ov-series .sf-decks-ov-head { padding: 14px 12px 10px 16px; }
  .sf-decks-ov-series .sf-decks-ov-head h2 { font-size: 17px; }
  .sf-decks-ov-series .sf-decks-ov-head .sf-note { font-size: 12px; }
  .sf-decks-ov-tools { padding: 10px 14px; }
  .sf-decks-ov-tools .sf-decks-find { min-height: 44px; }
  .sf-decks-ov-series .sf-decks-ov-body { padding: 12px 14px 20px; }
  .sf-decks-ov-series .sf-sr-body { padding: 0 14px 20px; }
  .sf-sr-grid { grid-template-columns: 1fr; gap: 6px; }
  .sf-sr-year > h3 { font-size: 16px; padding: 12px 0 6px; }
  .sf-sr-chips { margin-top: 8px; }
  /* estimate: last13's phone segmented control — the two lists swap in place */
  .sf-decks-est-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: -6px 0 16px; border: 1px solid #00f0ff44; }
  .sf-decks-est-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--v2-muted); }
  .sf-decks-est-tabs button + button { border-left: 1px solid #00f0ff44; }
  .sf-decks-est-tabs button.is-on { background: #00f0ff1a; color: var(--v2-text); box-shadow: inset 0 -2px 0 var(--v2-accent); }
  .sf-decks-est-tabs button:last-child.is-on { background: #ffcf0014; box-shadow: inset 0 -2px 0 #ffcf00; }
  .sf-decks-est-tabs .icon { width: 15px; height: 15px; }
  .sf-decks-est-tabs b { font-size: 11px; padding: 1px 6px; background: #ffffff14; }
  .sf-decks-est.is-tab-have .sf-decks-pane-miss, .sf-decks-est.is-tab-miss .sf-decks-pane-have { display: none; }
  .sf-decks-est.is-tab-miss .sf-decks-missing { margin-top: 0; }
  .sf-decks-foot-back { display: none; }
  .sf-decks-zoom-nav { margin-right: 4px; }
  .sf-decks-zoom-add { width: 100%; }
  .sf-decks-zoom-add .button { flex: 1; justify-content: center; }
}
@media (max-width: 380px) {
  .sf-decks-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Livewire port (2026-09-27): /buy results and the /sell buylist dim while a
   filter / sort / search / page loads in place. */
.sf-decks-buy-results, .sf-decks .sf-grid { transition: opacity .15s; }
.sf-decks-buy-results.is-loading, .sf-decks .sf-grid.is-loading { opacity: .5; pointer-events: none; }

/* ---------- /decks: the games ARE the page (owner 2026-09-29: "ตัวเกมไม่ควรเป็น popup
   ควรเป็นหน้าข้อมูลเลย และทำรูปตัวเกมส์ให้สวยกว่านี้") ----------
   One tile per edition (App\Support\DeckGames): its logo as the picture, the
   edition's flag, language and catalogue size. Notched top-right + bottom-left like .sf-decks-hero; the
   diagonals are drawn back by ::after (pages.css "Notched corners") from --sf-edge. */
.sf-dg-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 20px; padding: 12px 16px; font-size: 13px; line-height: 1.6; color: var(--sf-muted); background: #ffffff05; border: 1px solid var(--sf-border); }
.sf-dg-guest .icon { flex: 0 0 auto; color: var(--sf-action); }
.sf-dg-guest span { flex: 1 1 260px; }
.sf-dg-section > .sf-decks-none { margin-bottom: 18px; }
.sf-dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 22px 18px; }

.sf-dg { --sf-cut: 18px; --sf-edge: var(--sf-border); position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--sf-text);
  background: linear-gradient(180deg, #150b26, var(--v2-surface) 60%); border: 1px solid var(--sf-edge);
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut)));
  transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sf-dg::after { content: ''; position: absolute; inset: -1px; z-index: 6; pointer-events: none; color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-dg:hover, .sf-dg:focus-within { --sf-edge: var(--sf-border-hover); transform: translateY(-4px); }
.sf-dg:has(.sf-dg-go:focus-visible) { outline: 2px solid var(--sf-action); outline-offset: -4px; }

/* the logo IS the picture (owner: "เป็นรูป logo game ไม่ต้องแสดงการ์ดก็ได้"): a light panel —
   black logos vanish on the dark theme — lit by the logo's own colour (--dg-tint, DeckGames::tint),
   a bar of it along the bottom, a sheen that sweeps across on hover */
.sf-dg { --dg-tint: #8a5cff; }
/* one fixed row/column (minmax(0, 1fr)) here AND in .sf-dg-logo: with auto rows the logo's height: 100% / the
   picture's max-height: 100% had nothing to resolve against, and a SQUARE logo (Talingchan, 200×200) grew past the
   tint bar (2026-10-06) */
.sf-dg-art { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 16 / 10; padding: 30px 20px 22px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 72% 62% at 50% 56%, color-mix(in srgb, var(--dg-tint) 20%, transparent), transparent 72%),
    repeating-linear-gradient(135deg, #1a0f2e07 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #ffffff 0%, #f2edf9 48%, #dcd2ec 100%);
  box-shadow: inset 0 -3px 0 var(--dg-tint); }
/* a logo on its own solid background (DeckGames::solidBackground): the panel wears that colour */
.sf-dg-art.has-bg { background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, #00000026), var(--dg-bg); }
.sf-dg-art.has-bg .sf-dg-logo img { filter: none; }
.sf-dg-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffffb3 50%, transparent 62%); transform: translateX(-110%); }
.sf-dg:hover .sf-dg-art::after, .sf-dg:focus-within .sf-dg-art::after { transform: translateX(110%); transition: transform .8s ease; }
.sf-dg-logo { position: relative; z-index: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; min-height: 0; }
.sf-dg-logo img { max-width: 84%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px #1a0f2e2e); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sf-dg-logo b { font: 800 16px/1.25 var(--v2-display); color: #1a0f2e; text-align: center; }
.sf-dg:hover .sf-dg-logo img, .sf-dg:focus-within .sf-dg-logo img { transform: scale(1.07); }
.sf-dg-ed { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  font: 700 10px/1 var(--v2-mono); letter-spacing: 1px; color: #fff; background: #140a24e6; }
.sf-dg-ed img { width: 16px; height: 11px; object-fit: cover; box-shadow: 0 0 0 1px #ffffff33; }
.sf-dg-mine { position: absolute; top: 10px; right: 16px; z-index: 3; padding: 4px 7px; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; background: var(--sf-promo); box-shadow: 0 0 12px #ff2e8866; }

.sf-dg-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 14px 16px; text-align: center; }
.sf-dg-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.sf-dg-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; font-size: 12px; color: var(--sf-muted); }
.sf-dg-meta > span + span::before { content: '·'; margin: 0 7px; }
.sf-dg-meta .sf-mono { color: #d9cfe9; }
/* the tile's action, a button (2026-10-06: it was a text link): cyan, the site's notch; the wipe is buttons.css */
.sf-dg-go { margin-top: auto; padding-top: 10px; width: 100%; display: flex; justify-content: center; outline: none; }
.sf-dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: min(100%, 210px); min-height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 800; color: var(--sf-action-ink); background-color: var(--sf-action);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
/* a one-edition tile: its link covers the whole tile */
.sf-dg-go::before { content: ''; position: absolute; inset: 0; z-index: 5; }
/* the language step (?pick=): back link over the heading, the editions a little wider */
.sf-dg-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--sf-action); }
.sf-dg-back .icon { width: 16px; height: 16px; }
.sf-dg-back:hover, .sf-dg-back:focus-visible { color: var(--sf-action-hover); }
.sf-dg-grid.is-editions { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
.sf-dg-btn .icon { width: 15px; height: 15px; transition: transform .25s; }
@media (hover: hover) and (pointer: fine) { .sf-dg:hover .sf-dg-btn .icon { transform: translateX(4px); } }

@media (max-width: 680px) {
  .sf-dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .sf-dg { --sf-cut: 14px; }
  .sf-dg-ed { top: 7px; left: 7px; padding: 3px 5px; font-size: 9px; gap: 4px; }
  .sf-dg-ed img { width: 14px; height: 10px; }
  .sf-dg-mine { top: auto; bottom: 9px; right: 7px; font-size: 9px; padding: 3px 5px; }
  .sf-dg-art { padding: 26px 12px 16px; }
  .sf-dg-body { padding: 10px 8px 12px; gap: 4px; }
  .sf-dg-name { font-size: 13px; }
  .sf-dg-meta { font-size: 11px; flex-direction: column; }
  .sf-dg-meta > span + span::before { content: none; }
  .sf-dg-go { padding-top: 8px; }
  .sf-dg-btn { width: 100%; min-height: 36px; padding: 0 8px; font-size: 12px; }
  .sf-dg-grid.is-editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-dg, .sf-dg-logo img, .sf-dg-go .icon, .sf-sr-item, .sf-sr-chip { transition: none; }
  .sf-dg-art::after { display: none; }
}

/* ---------- Deck tabs per game (2026-09-29, owner: "แยกประเภทของการ์ดด้วย เช่น main deck, sideboard",
   Riftbound's Legend | Champion | Main Deck | Battlefields | Sideboard | Runes as the model) ----------
   App\Support\DeckRules: one tab per zone; the count reads n/size, green when the tab is right, gold while
   short, red when over. The rules box lists what DeckRules::check reports (never blocks). */
.sf-decks-format { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); font-size: 12px; color: var(--sf-muted); }
.sf-decks-format select { flex: 1; min-width: 0; min-height: 34px; padding: 0 10px; color: var(--sf-text); background: #ffffff08; border: 1px solid var(--sf-border-strong); font: 600 13px 'Noto Sans Thai', sans-serif; }
.sf-decks-format select:focus { outline: none; border-color: var(--sf-action); }
/* The strip scrolls sideways only. overflow-x: auto turns overflow-y to auto too, and the tabs used to sit
   1px low (top: 1px, to cover the line) — that 1px made a vertical scrollbar with arrows (owner 2026-09-30:
   "ทำไมถึงมี scollber"). The line is now an inset shadow INSIDE the strip, so the lit tab's own background
   covers it without leaving the box. No scrollbar-width here: it makes Chrome drop the site's
   ::-webkit-scrollbar (palette.css) and draw the arrowed native one.
   flex-shrink: 0 (2026-10-09, owner: "เหมือนโดนทับ"): the panel is a column capped by max-height, and an item
   with overflow set may shrink below its content — the strip was squashed to 13–25px of its 51 and cut the
   tabs' labels + counts at every screen size. The slots list is the one that gives way (it scrolls). */
.sf-decks-zones { flex-shrink: 0; display: flex; gap: 4px; padding: 10px 12px 0; overflow: auto hidden; box-shadow: inset 0 -1px 0 var(--v2-line); }
.sf-decks-zones::-webkit-scrollbar { height: 6px; }
.sf-decks-zones::-webkit-scrollbar-thumb { border-width: 1px; }
.sf-decks-zone { flex: 0 0 auto; display: grid; justify-items: start; gap: 2px; min-width: 76px; padding: 7px 10px 8px; color: var(--sf-muted);
  border: 1px solid transparent; border-bottom: 0; background: transparent; font-size: 12px; font-weight: 700; line-height: 1.2; }
.sf-decks-zone b { font-size: 13px; color: var(--sf-text); }
.sf-decks-zone b small { font-size: 11px; color: var(--sf-muted); font-weight: 400; }
.sf-decks-zone.is-ok b { color: #2ee59d; }
.sf-decks-zone.is-short b { color: var(--sf-price); }
.sf-decks-zone.is-over b { color: var(--sf-danger); }
.sf-decks-zone:hover { color: var(--sf-text); }
.sf-decks-zone.is-on { color: var(--sf-text); background: var(--v2-surface); border-color: var(--v2-line); box-shadow: inset 0 2px 0 var(--sf-action); }
.sf-decks-zone:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }
.sf-decks-rules { margin: 10px 12px 0; border: 1px solid var(--sf-border); font-size: 12px; }
.sf-decks-rules-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; font-weight: 700; color: var(--sf-text); }
.sf-decks-rules-head .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.sf-decks-rules-head span { flex: 1; min-width: 0; }
.sf-decks-rules-caret { transition: transform .2s; }
.sf-decks-rules-head[aria-expanded="true"] .sf-decks-rules-caret { transform: rotate(180deg); }
.sf-decks-rules.is-ok { border-color: #2ee59d55; }
.sf-decks-rules.is-ok .icon { color: #2ee59d; }
.sf-decks-rules.is-todo { border-color: #ffd24a55; }
.sf-decks-rules.is-todo .icon { color: var(--sf-price); }
.sf-decks-rules.is-bad { border-color: #ff475766; background: #ff47570d; }
.sf-decks-rules.is-bad .sf-decks-rules-head .icon:first-child { color: var(--sf-danger); }
.sf-decks-rules ul { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; gap: 5px; max-height: 180px; overflow: auto; }
.sf-decks-rules li { position: relative; padding-left: 14px; line-height: 1.5; color: #d9cfe9; }
.sf-decks-rules li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-price); }
.sf-decks-rules li.is-error::before { background: var(--sf-danger); }
.sf-decks-rules-zone { margin-right: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: var(--sf-action); border: 1px solid #00f0ff44; }
.sf-decks-rules-zone:hover { color: var(--sf-action-hover); border-color: var(--sf-action); }
.sf-decks-zone-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--sf-muted); }
.sf-decks-move { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-decks-move button { flex: 1 1 auto; min-height: 26px; padding: 2px 6px; font-size: 11px; font-weight: 700; color: var(--sf-action); border: 1px dashed #00f0ff55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-decks-move button:hover, .sf-decks-move button:focus-visible { color: var(--sf-action-hover); border-style: solid; border-color: var(--sf-action); background: var(--sf-action-soft); }
@media (max-width: 680px) {
  .sf-decks-zone { min-width: 64px; padding: 6px 8px 7px; font-size: 11px; }
}
/* the deck view page: a heading per tab + the rules as a disclosure in the hero */
.sf-decks-zone-h { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; font: 800 16px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-decks-zone-h b { font-size: 14px; color: var(--sf-muted); }
.sf-decks-zone-h b small { font-size: 12px; }
.sf-decks-rules-view { margin: 10px 0 0; max-width: 560px; }
.sf-decks-rules-view summary { cursor: pointer; list-style: none; }
.sf-decks-rules-view summary::-webkit-details-marker { display: none; }
/* Whole cards, never trimmed (owner 2026-09-29: "เหมือนแหว่งซ้ายขวา ทำให้สมส่วนหน่อย"): the pool and deck
   pictures were cropped by object-fit: cover + a 1.04 hover zoom. Now the card's own 63:88 shape, the whole
   picture inside a thin margin, and the hover lifts it instead of zooming past the edges. */
.sf-decks-card-art, .sf-decks-slot-art { aspect-ratio: 63 / 88; padding: 4px; }
.sf-decks-card-art img, .sf-decks-slot-art img { object-fit: contain; border-radius: 3.5% / 2.5%; transition: transform .25s; }
.sf-decks-card:hover .sf-decks-card-art img { transform: translateY(-2px); }
.sf-decks-spread-card { aspect-ratio: 63 / 88; }
.sf-decks-spread-card img { object-fit: contain; }
/* a sideways tab (DeckRules 'land' — Riftbound battlefields, 2026-10-09): its cards are printed landscape, so the spread
   draws them landscape (they sat as small strips in a portrait box) */
.sf-decks-board-part.is-land .sf-decks-spread { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sf-decks-board-part.is-land .sf-decks-spread-card { aspect-ratio: 88 / 63; border-radius: 3.2% / 4.5%; }
/* a picture stored upright (pkg-decks.js "Sideways tabs" sets .is-rot): turned back clockwise to fill the slot */
.sf-decks-board-part.is-land .sf-decks-spread-card.is-rot img { position: absolute; left: 50%; top: 50%; width: 71.6%; height: 139.7%;
  border-radius: 4.5% / 3.2%; transform: translate(-50%, -50%) rotate(90deg); }
@media (max-width: 680px) { .sf-decks-board-part.is-land .sf-decks-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Filters as a column on the pool's right (owner 2026-09-29: "อาจต้องย้ายตัวกรองไปด้านขวามือ") ----------
   Desktop: pool list | filters (sticky, own scroll) beside the deck panel, one select box per dimension under
   the other. ≤ 1180px (the pool would drop to 2 columns): the ตัวกรอง button shows/hides them above the list,
   the boxes side by side. */
.sf-decks-pool-body { display: block; }
.sf-decks-pool-main { min-width: 0; }
.sf-decks-dims { display: block; padding: 0; margin: 0; background: var(--v2-surface); border: 1px solid var(--sf-border); }
.sf-decks-dims-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 12px; border-bottom: 1px solid var(--v2-line); font-size: 13px; }
.sf-decks-dims-head .text-link { font-size: 12px; padding: 0; }
.sf-decks-dims-list { display: grid; gap: 12px; padding: 12px; }
/* 2026-10-09 (owner: "ย้ายตัวกรองโดยมีปุ่มกดแล้วค่อยแสดง และขยายเด็คของคุณให้ใหญ่ขึ้น"): no column any more — the
   ตัวกรอง button opens them above the list at every width, boxes side by side; the deck panel took the room. */
.sf-decks-dims { margin-bottom: 12px; }
.sf-decks-dims-list { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px 12px; }
.sf-decks-dims-head .text-link { margin-left: auto; }
.sf-decks-dims-x { width: 30px; height: 30px; margin-right: -6px; }
.sf-decks-filter-btn .icon { width: 15px; height: 15px; }
.sf-decks-filter-caret { transition: transform .2s; }
/* A select box per dimension that drops a list with a tick in front of every value, several at once (owner
   2026-09-30: "อยากได้ selectbox ที่มีตัวติ๊กเลือกได้หลายตัว"). Box = what is ticked (colour dots for a colour
   list), cyan-tinted while it filters; name + count + ล้าง above it. The list floats (position: fixed from
   x-anchor, under the site header's z-index 30), scrolls on its own, a long one under its search box; short
   numeric lists (grade, cost …) pack into columns. */
.sf-decks-dim { display: block; min-width: 0; border: 0; }
.sf-decks-dim-head { display: flex; align-items: center; gap: 6px; height: 20px; margin-bottom: 5px; line-height: 20px; font-size: 12px; font-weight: 700; color: var(--sf-text); }
.sf-decks-dim-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-decks-dim-n { flex: 0 0 auto; font: 700 10px/1 var(--v2-mono); padding: 3px 6px; background: var(--sf-promo); color: #fff; }
.sf-decks-dim-clear { flex: 0 0 auto; min-height: 0; padding: 0 2px; line-height: 18px; font-size: 11px; font-weight: 400; color: var(--sf-muted); text-decoration: underline; text-underline-offset: 2px; }
.sf-decks-dim-clear:hover, .sf-decks-dim-clear:focus-visible { color: var(--sf-action); }
.sf-decks-dim-box { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 10px; text-align: left; font-size: 12px; color: var(--sf-muted); background: #ffffff08; border: 1px solid var(--sf-border-strong); transition: border-color .15s, background .15s, color .15s; }
.sf-decks-dim-box:hover, .sf-decks-dim-box[aria-expanded="true"] { border-color: var(--sf-action); background: #ffffff0d; color: var(--sf-text); }
.sf-decks-dim-box:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-decks-dim.is-picked .sf-decks-dim-box { color: #fff; border-color: color-mix(in srgb, var(--sf-action) 60%, transparent); background: var(--sf-action-soft); }
.sf-decks-dim-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.sf-decks-dim-now > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-decks-dim-now > span:not(:first-child) { margin-left: 3px; }
.sf-decks-dim-now .sf-decks-tick-dot { flex-basis: 10px; width: 10px; height: 10px; }
.sf-decks-dim-box > .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--sf-action); transition: transform .2s; }
.sf-decks-dim-box[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.sf-decks-dim-pop { z-index: 25; width: max(var(--box-w, 0px), 248px); max-width: calc(100vw - 16px); max-height: min(380px, 62vh); display: flex; flex-direction: column; padding-top: 6px; background: #160d27; border: 1px solid var(--sf-action); box-shadow: 0 16px 40px #000c; }
.sf-decks-dim-find { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 0 8px 6px; padding: 0 8px; min-height: 32px; border: 1px solid var(--sf-border-strong); background: #ffffff06; }
.sf-decks-dim-find:focus-within { border-color: var(--sf-action); }
.sf-decks-dim-find .icon { width: 14px; height: 14px; color: var(--sf-muted); }
.sf-decks-dim-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sf-text); font: 12px 'Noto Sans Thai', sans-serif; outline: none; padding: 6px 0; }
.sf-decks-ticks { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 1px; padding: 0 6px 6px; overflow: auto; overscroll-behavior: contain; }
.sf-decks-ticks.is-cols { grid-template-columns: repeat(auto-fill, minmax(calc(34px + var(--tick-w, 3) * 1ch), 1fr)); }
.sf-decks-ticks.is-cols .sf-decks-tick span { white-space: nowrap; overflow-wrap: normal; }
.sf-decks-dim-none { grid-column: 1 / -1; padding: 10px 6px; font-size: 12px; color: var(--sf-muted); }
.sf-decks-dim-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--v2-line); font-size: 11px; color: var(--sf-muted); }
.sf-decks-dim-done { min-height: 28px; padding: 0 14px; font-size: 12px; font-weight: 700; color: var(--sf-action-ink); background: var(--sf-action); transition: background .15s; }
.sf-decks-dim-done:hover, .sf-decks-dim-done:focus-visible { background: #fff; outline: none; }
.sf-decks-tick { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 6px; text-align: left; font-size: 12px; color: #d9cfe9; border-radius: 2px; }
.sf-decks-tick:hover, .sf-decks-tick:focus-visible { background: var(--sf-action-soft); color: #fff; outline: none; }
.sf-decks-tick span { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.sf-decks-tick-box { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid var(--sf-border-strong); background: #ffffff08; transition: background .15s, border-color .15s; }
.sf-decks-tick-box .icon { width: 12px; height: 12px; color: var(--sf-action-ink); opacity: 0; transition: opacity .15s; }
.sf-decks-tick.is-on { color: #fff; }
.sf-decks-tick.is-on .sf-decks-tick-box { background: var(--sf-action); border-color: var(--sf-action); }
.sf-decks-tick.is-on .sf-decks-tick-box .icon { opacity: 1; }
.sf-decks-tick-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid; }
/* The format control (no native select): segmented buttons for 2–3 formats, a themed list for more */
.sf-decks-format { position: relative; }
.sf-decks-format-label { flex: 0 0 auto; }
.sf-decks-format-seg { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--sf-border-strong); }
.sf-decks-format-seg button { min-height: 34px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
.sf-decks-format-seg button + button { border-left: 1px solid var(--sf-border-strong); }
.sf-decks-format-seg button:hover { color: #fff; background: var(--sf-action-soft); }
.sf-decks-format-seg button.is-on { background: var(--sf-action); color: var(--sf-action-ink); cursor: default; }
.sf-decks-format-seg button:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }
.sf-decks-format-pick { flex: 1; min-width: 0; position: relative; }
.sf-decks-format-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--sf-text); background: #ffffff08; border: 1px solid var(--sf-border-strong); }
.sf-decks-format-btn:hover, .sf-decks-format-btn[aria-expanded="true"] { border-color: var(--sf-action); }
.sf-decks-format-btn .icon { width: 16px; height: 16px; color: var(--sf-action); transition: transform .2s; }
.sf-decks-format-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sf-decks-format-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: #160d27; border: 1px solid var(--sf-action); box-shadow: 0 16px 40px #000c; }
.sf-decks-format-list button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; text-align: left; font-size: 13px; color: #d9cfe9; }
.sf-decks-format-list button:hover, .sf-decks-format-list button:focus-visible { background: var(--sf-action-soft); color: #fff; outline: none; }
.sf-decks-format-list button.is-on { color: #fff; }
.sf-decks-format-list button.is-on .sf-decks-tick-box { background: var(--sf-action); border-color: var(--sf-action); }
.sf-decks-format-list button.is-on .sf-decks-tick-box .icon { opacity: 1; }
/* The builder's game band (owner 2026-09-29: "ทำด้านบนให้สวยกว่านี้ และ bg ของเกมอาจทำเป็นสีขาว"): notched frame
   (diagonals drawn back by ::after from --sf-edge, as every notched frame), a glow + left bar in the logo's own
   colour (--dg-tint, DeckGames::tint), the logo on the white plate the /decks tiles use. */
.sf-decks-top { --dg-tint: #8a5cff; --sf-cut: 18px; --sf-edge: var(--sf-border); position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 18px 22px 18px 18px; margin-bottom: 20px;
  background: radial-gradient(ellipse 60% 140% at 0% 50%, color-mix(in srgb, var(--dg-tint) 26%, transparent), transparent 70%),
    linear-gradient(90deg, #1a0f30, var(--v2-surface) 55%);
  border: 1px solid var(--sf-edge); box-shadow: inset 4px 0 0 var(--dg-tint);
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut))); }
/* + the 4px tint bar turns along the bottom-left cut (it stopped dead where the cut begins; 2026-10-10, owner:
   "เหมือนมุมขอบเส้นจะหายไป") — under the hairline, ~the 1px border + the bar; its square reaches 2px past the cut
   (still on the cut's line) so the bar's inner edge meets the diagonal's in a clean mitre */
.sf-decks-top::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge);
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 4.5px), var(--dg-tint) calc(50% - 4.5px), var(--dg-tint) calc(50% + 4.5px), transparent calc(50% + 4.5px)) left -2px bottom 0 / calc(var(--sf-cut) + 2px) calc(var(--sf-cut) + 2px) no-repeat; }
.sf-decks-top-plate { width: 188px; height: 96px; display: grid; place-items: center; padding: 10px 16px;
  background: repeating-linear-gradient(135deg, #1a0f2e07 0 1px, transparent 1px 10px), linear-gradient(160deg, #ffffff, #f2edf9 55%, #ddd3ee);
  box-shadow: inset 0 -3px 0 var(--dg-tint), 0 10px 26px #0008;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); position: relative; }
/* the 3px tint bar turns up the bottom-right cut (square 2px past the cut, on its line: clean mitre) */
.sf-decks-top-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - 3px), var(--dg-tint) calc(50% - 3px), var(--dg-tint) calc(50% + 3px), transparent calc(50% + 3px)) right 0 bottom -2px / 12px 12px no-repeat; }
.sf-decks-top-plate.has-bg { background: var(--dg-bg); }
.sf-decks-top-plate img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px #1a0f2e33); }
.sf-decks-top-plate.has-bg img { filter: none; }
.sf-decks-top-plate b { font: 800 14px/1.2 var(--v2-display); color: #1a0f2e; text-align: center; }
.sf-decks-top-meta { min-width: 0; display: grid; gap: 4px; }
.sf-decks-top-meta .sf-kicker { font-size: 11px; }
.sf-decks-top h1 { font: 900 clamp(22px, 2.6vw, 34px)/1.15 var(--v2-display); text-transform: uppercase; letter-spacing: -.3px; overflow-wrap: anywhere; }
.sf-decks-top-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sf-decks-top-fact { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; color: #d9cfe9; background: #ffffff0a; border: 1px solid var(--sf-border); }
.sf-decks-top-fact img { width: 18px; height: 12px; object-fit: cover; box-shadow: 0 0 0 1px #ffffff33; }
.sf-decks-top-fact b { color: #fff; font-weight: 700; }
.sf-decks-top-fact.is-deck { color: #fff; border-color: #00f0ff55; }
.sf-decks-top-fact.is-deck .icon { width: 14px; height: 14px; color: var(--sf-action); }
.sf-decks-top-acts { justify-content: flex-end; }
@media (max-width: 900px) {
  .sf-decks-top { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .sf-decks-top-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 680px) {
  .sf-decks-top { gap: 12px 14px; }
  .sf-decks-top-plate { width: 118px; height: 64px; padding: 6px 10px; }
  .sf-decks-top-fact { font-size: 11px; padding: 3px 8px; }
}
.sf-decks-top-plate img { max-height: 76px; }
@media (max-width: 680px) {
  /* phone: logo beside kicker + name; facts, then actions, full width under them */
  .sf-decks-top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "p k" "p h" "f f" "a a"; align-items: center; }
  .sf-decks-top-plate { grid-area: p; }
  .sf-decks-top-meta { display: contents; }
  .sf-decks-top-meta .sf-kicker { grid-area: k; align-self: end; }
  .sf-decks-top h1 { grid-area: h; align-self: start; font-size: 20px; }
  .sf-decks-top-facts { grid-area: f; margin-top: 0; }
  .sf-decks-top-acts { grid-area: a; }
  .sf-decks-top-plate img { max-height: 52px; }
}

/* ---------- Phone app flow (2026-10-06, owner: "ตัวจัดเด็คอยากได้ระบบคล้ายๆ กับ kk card info") ----------
   ≤ 900px the DECK is the screen — tabs with n/size, rules, the cards, a fixed app bar "+ เพิ่ม <tab>" · "ต่อไป";
   "+" opens the pool full screen (html[data-sfd-view=pool], head = which tab takes the cards + เสร็จ), ต่อไป the
   save sheet (data-sfd-view=save: name, tab counts, rules, save). Replaces the deck-as-bottom-sheet + "ดูเด็ค" bar. Desktop: hidden. */
.sf-decks-app-head, .sf-decks-app-bar, .sf-decks-app-save, .sf-decks-app-scrim, .sf-decks-app-only { display: none; }
@media (max-width: 900px) {
  /* the deck panel is the page, not a sheet */
  .sf-decks-build .sf-decks-panel { position: static; max-height: none; transform: none; visibility: visible; transition: none; box-shadow: none; border-inline: 1px solid #00f0ff44; }
  .sf-decks-build .sf-decks-sheet-close, .sf-decks-build .sf-decks-bar, .sf-decks-build .sf-decks-scrim { display: none !important; }
  .sf-decks-build .sf-decks-slots-wrap { overflow: visible; min-height: 0; }
  .sf-decks-build .sf-decks-slots-empty { padding: 28px 16px; }
  .sf-decks-build .sf-decks-slots-empty b { font-size: 15px; color: var(--sf-text); }
  .sf-decks-build .sf-decks-app-only { display: inline-flex; }
  .sf-decks-build .sf-decks-slots-empty b.sf-decks-app-only { display: block; }
  .sf-decks-build .sf-decks-panel-foot .button-primary { display: none; }   /* save lives behind ต่อไป */
  .sf-decks-build .sf-decks-name { display: none; }                          /* the name too */
  .sf-decks-build .sf-decks-namebar { justify-content: flex-end; padding-block: 8px; }
  .sf-decks-build .sf-decks-namebar:not(:has(.sf-decks-guest)) { position: absolute; top: 10px; right: 12px; padding: 0; border: 0; }
  .sf-decks-build .sf-decks-panel { position: relative; z-index: auto; }   /* the sheet's 150 drew it over the app + tab bars */
  .sf-decks-build .sf-decks-panel-head { padding-right: 120px; }
  .sf-decks-build .sf-decks-zones { position: sticky; top: 0; z-index: 4; background: var(--v2-surface); }
  .sf-decks-build { padding-bottom: 96px; }

  /* the pool = the "เพิ่มการ์ด" screen */
  .sf-decks-build .sf-decks-pool { display: none; }
  html[data-sfd-view="pool"] .sf-decks-build .sf-decks-pool { display: block; position: fixed; inset: 0; z-index: 155; overflow: auto; overscroll-behavior: contain; padding: 0 12px calc(24px + env(safe-area-inset-bottom)); background: var(--v2-bg, #0a0014); }
  html[data-sfd-view="pool"] .sf-decks-build .sf-decks-app-head { display: flex; }
  .sf-decks-app-head { position: sticky; top: 0; z-index: 6; align-items: center; gap: 10px; margin: 0 -12px 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: #0d0619f2; border-bottom: 1px solid #00f0ff44; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .sf-decks-app-back { flex: 0 0 40px; height: 40px; display: grid; place-items: center; color: var(--sf-text); border: 1px solid var(--sf-border-strong); }
  .sf-decks-app-back .icon { width: 18px; height: 18px; }
  .sf-decks-app-title { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
  .sf-decks-app-title > b { font: 800 15px var(--v2-display); text-transform: uppercase; color: var(--sf-heading); }
  .sf-decks-app-title > span { font-size: 12px; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sf-decks-app-title > span b { color: var(--sf-text); }
  .sf-decks-app-title small { color: var(--sf-muted); font-weight: 400; }
  .sf-decks-app-done { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 800; color: var(--sf-action-ink); background: var(--sf-action);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .sf-decks-app-done b { padding: 1px 7px; background: #04121a26; }
  html[data-sfd-view="pool"] .sf-decks-build .sf-decks-filters { position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 5; margin: -12px -12px 10px; padding: 8px 12px; background: #0d0619f2; }
  html[data-sfd-view="pool"] .sf-decks-build .sf-decks-add { min-height: 36px; }

  /* the app bar on the deck screen */
  .sf-decks-build .sf-decks-app-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 140; gap: 8px; }
  .sf-decks-app-add, .sf-decks-app-next { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; box-shadow: 0 12px 30px #000c; }
  .sf-decks-app-add { flex: 1; min-width: 0; color: var(--sf-action-ink); background: var(--sf-action); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
  .sf-decks-app-add span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sf-decks-app-add .icon { flex: none; width: 18px; height: 18px; }
  .sf-decks-app-next { flex: 0 0 auto; padding: 0 18px; color: #fff; background: #1d1233; border: 1px solid var(--sf-border-strong); }
  .sf-decks-app-next:disabled { color: #ffffff4d; border-color: var(--sf-border); }   /* solid: opacity let the page show through */
  .sf-decks-app-next .icon { width: 16px; height: 16px; }

  /* ต่อไป: the save sheet */
  html[data-sfd-view="save"] .sf-decks-build .sf-decks-app-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: #05000cb3; }
  html[data-sfd-view="save"] .sf-decks-build .sf-decks-app-save { display: grid; }
  .sf-decks-app-save { position: fixed; left: 0; right: 0; bottom: 0; z-index: 151; gap: 14px; max-height: 88vh; overflow: auto; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--v2-surface); border-top: 1px solid #00f0ff66; box-shadow: 0 -20px 60px #000d; }
  .sf-decks-app-save-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .sf-decks-app-save-head h2 { margin: 0; font: 800 17px var(--v2-display); text-transform: uppercase; }
  .sf-decks-app-save-sum { display: grid; gap: 10px; padding: 12px; background: #ffffff06; border: 1px solid var(--sf-border); }
  .sf-decks-app-save-game { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sf-text); }
  .sf-decks-app-save-game img { width: 54px; height: 26px; object-fit: contain; padding: 2px 4px; background: #fff; }
  .sf-decks-app-save-zones { display: flex; flex-wrap: wrap; gap: 6px; }
  .sf-decks-app-save-zones span { padding: 3px 9px; font-size: 12px; color: var(--sf-muted); border: 1px solid var(--sf-border-strong); }
  .sf-decks-app-save-zones b { color: var(--sf-text); }
  .sf-decks-app-save-zones .is-ok { border-color: #3ee8a066; }
  .sf-decks-app-save-zones .is-short { border-color: #ffd24a66; }
  .sf-decks-app-save-zones .is-over { border-color: #ff475788; }
  .sf-decks-app-save-rules { margin: 0; font-size: 12.5px; }
  .sf-decks-app-save-rules.is-ok { color: #3ee8a0; }
  .sf-decks-app-save-rules.is-todo { color: var(--sf-price); }
  .sf-decks-app-save-rules.is-bad { color: #ff8fb8; }
  .sf-decks-app-save-name { display: grid; gap: 6px; margin: 0; }
  .sf-decks-app-save-name span { font-size: 12px; color: var(--sf-muted); }
  .sf-decks-app-save-name input { min-height: 48px; font-size: 16px; }   /* 16px: iOS does not zoom */
  .sf-decks-app-save-acts { display: flex; gap: 8px; }
  .sf-decks-app-save-acts .button { flex: 1; justify-content: center; min-height: 48px; }
}
@media (max-width: 680px) {
  /* above the phone tab bar (pkg-chrome, 60px + safe area) */
  .sf-decks-build .sf-decks-app-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sf-decks-build { padding-bottom: 150px; }
  /* a smaller game band: the deck is what the screen is for */
  .sf-decks-build .sf-decks-top { margin-bottom: 12px; padding: 10px 12px; grid-template-areas: "p h" "p a"; }
  .sf-decks-build .sf-decks-top-plate { width: 86px; height: 46px; }
  .sf-decks-build .sf-decks-top-plate img { max-height: 36px; }
  .sf-decks-build .sf-decks-top-meta .sf-kicker, .sf-decks-build .sf-decks-top-facts { display: none; }
  .sf-decks-build .sf-decks-top h1 { font-size: 16px; align-self: end; }
  .sf-decks-build .sf-decks-top-acts { align-self: start; gap: 12px; font-size: 12px; }
  .sf-decks-build .sf-decks-top-acts .button { min-height: 30px; padding: 0 10px; font-size: 11.5px; }
  .sf-decks-build .sf-decks-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }   /* one tile per copy: 4 across, as the deck view */
}


/* ---------- /decks/estimate: shop band + table head (2026-10-09, owner: "รูปร้านควรใหญ่กว่านี้ และควรมีดาวหรือคะแนนบอก",
   "ทำหัวตาราง และร้านค้าให้ดีๆ มีลูกศรเพื่อไปหน้าร้านได้ด้วย"). Own sf-est-* classes — the summary page shares
   .sf-decks-shop / -shop-head / -shop-name and keeps its look. Stars = real shop_reviews (ShopReview::statsForSellers). */
.sf-est-shop { --sf-edge: #00f0ff2e; padding: 0 20px 6px; }
/* the head band paints the top-right notch: the diagonals go back on a layer above it */
.sf-est-shop::after { content: ''; position: absolute; inset: -1px; z-index: 5; pointer-events: none; color: var(--sf-edge);
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-est-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "logo id sum go fold";
  align-items: center; gap: 12px 22px; margin: 0 -20px; padding: 20px 20px 18px; border-bottom: 1px solid #00f0ff26;
  background: radial-gradient(ellipse 55% 150% at 0% 0%, #00f0ff14, transparent 70%), linear-gradient(180deg, #ffffff06, transparent); }
.sf-est-logo { grid-area: logo; position: relative; display: block; width: 72px; height: 72px; filter: drop-shadow(0 10px 18px #000a) drop-shadow(0 0 1px #00f0ffaa); transition: transform .2s; }
.sf-est-logo-plate { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; overflow: hidden; background: #fff;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.sf-est-logo-plate img { width: 100%; height: 100%; object-fit: contain; }
.sf-est-logo-plate .sf-cards-chip-mono { width: calc(100% + 12px); height: calc(100% + 12px); margin: -6px; border-radius: 0; font-size: 28px; }
.sf-est-ok { position: absolute; right: -7px; bottom: -7px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--v2-accent); color: #04121a; box-shadow: 0 0 0 3px var(--v2-surface); }
.sf-est-ok .icon { width: 12px; height: 12px; stroke-width: 4; }
.sf-est-id { grid-area: id; display: grid; gap: 7px; min-width: 0; justify-items: start; }
.sf-est-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; max-width: 100%; color: #fff; }
.sf-est-name b { font: 800 20px/1.25 'Noto Sans Thai', var(--v2-display); overflow-wrap: anywhere; transition: color .2s; }
.sf-est-verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 700 11px/1.5 'Noto Sans Thai', sans-serif; color: #2ee59d; background: #2ee59d12; border: 1px solid #2ee59d44; }
.sf-est-verified .icon { width: 12px; height: 12px; }
.sf-est-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sf-est-rate b { font: 700 15px/1 var(--v2-mono); color: #ffcf00; }
.sf-est-rate small { font-size: 12px; color: var(--sf-muted); }
.sf-est-stars { position: relative; display: inline-block; line-height: 0; }
.sf-est-stars-row { display: inline-flex; white-space: nowrap; }
.sf-est-stars-row .icon { flex: none; width: 17px; height: 17px; color: #ffffff4d; fill: #ffffff14; stroke-width: 1.5; }
.sf-est-stars-row.is-on { position: absolute; left: 0; top: 0; overflow: hidden; }
.sf-est-stars-row.is-on .icon { color: #ffcf00; fill: #ffcf00; }
.sf-est-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-est-facts > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12px; line-height: 1.5; color: #d9d0e6; background: #ffffff08; border: 1px solid var(--sf-border); }
.sf-est-facts b { font: 700 12px var(--v2-mono); color: #fff; }
.sf-est-facts .icon { flex: none; width: 13px; height: 13px; color: var(--sf-muted); }
.sf-est-facts .is-on { color: var(--v2-accent); background: #00f0ff0d; border-color: #00f0ff44; }
.sf-est-facts .is-on .icon { color: inherit; stroke-width: 3; }
.sf-est-sum { grid-area: sum; display: grid; justify-items: end; gap: 3px; text-align: right; }
.sf-est-sum small { font-size: 11px; color: var(--sf-muted); white-space: nowrap; }
.sf-est-sum b { font: 700 24px/1.1 var(--v2-mono); color: var(--sf-price); }
.sf-est-sum span { font-size: 13px; color: var(--sf-muted); }
.sf-est-go { grid-area: go; white-space: nowrap; }
.sf-est-fold { grid-area: fold; width: 38px; height: 38px; display: grid; place-items: center; color: var(--sf-muted); border: 1px solid var(--sf-border); transition: color .2s, border-color .2s; }
.sf-est-fold .icon { width: 16px; height: 16px; transition: transform .2s; }
.sf-est-fold:hover, .sf-est-fold:focus-visible { color: var(--sf-action); border-color: #00f0ff66; }
@media (hover: hover) and (pointer: fine) {
  .sf-est-head:has(.sf-est-logo:hover, .sf-est-name:hover) .sf-est-logo { transform: translateY(-2px); }
  .sf-est-name:hover b, .sf-est-head:has(.sf-est-logo:hover) .sf-est-name b { color: var(--sf-action); }
}
/* table head: a band with the magenta heading bar, readable Thai labels over their own columns */
.sf-decks-est .sf-decks-line { padding-inline: 12px; }
.sf-decks-est .sf-est-thead { margin-top: 14px; padding-block: 11px; font: 700 12px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: .2px; text-transform: none; color: #d9d0e6;
  background: linear-gradient(90deg, #00f0ff14, #ffffff07 45%); border-block: 1px solid #00f0ff2e; box-shadow: inset 3px 0 0 var(--sf-heading-mark); }
.sf-est-thead small { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--sf-muted); }
.sf-decks-est .sf-decks-line:not(.sf-decks-line-head) { transition: background-color .15s; }
.sf-decks-est .sf-decks-line.is-picked { background: linear-gradient(90deg, #00f0ff0f, transparent 55%); box-shadow: inset 2px 0 0 #00f0ff8c; }
@media (hover: hover) and (pointer: fine) {
  .sf-decks-est .sf-decks-line:not(.sf-decks-line-head):hover { background-color: #ffffff06; }
}
@media (max-width: 680px) {
  .sf-est-shop { padding: 0 14px 4px; }
  .sf-est-head { grid-template-columns: 58px minmax(0, 1fr) auto auto; grid-template-areas: "logo id id id" "sum sum go fold"; gap: 14px 10px; margin: 0 -14px; padding: 16px 14px 14px; }
  .sf-est-logo { width: 58px; height: 58px; align-self: start; }
  .sf-est-logo-plate { padding: 4px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
  .sf-est-logo-plate .sf-cards-chip-mono { width: calc(100% + 8px); height: calc(100% + 8px); margin: -4px; font-size: 22px; }
  .sf-est-name b { font-size: 16px; }
  .sf-est-fold { width: 38px; height: 38px; }
  .sf-est-sum { justify-items: start; text-align: left; }
  .sf-est-sum b { font-size: 20px; }
  .sf-decks-est .sf-decks-line { padding-inline: 6px; }
}

/* ---------- /decks/view: a rule finding points at its cards (2026-10-09, owner: "กดคลิ๊กแล้วชี้ได้เลย") ----------
   The finding is a button (view.blade); pkg-decks.js rings the cards (.is-pointed, the first .is-point-lead gets the
   arrow) and dims the rest (.sf-decks-board.is-pointing), or lights a tab's n/size chip. */
.sf-decks-rule-go { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 0; text-align: left; font: inherit; line-height: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sf-decks-rule-go span { flex: 1; min-width: 0; text-decoration: underline dotted #ffffff59; text-underline-offset: 3px; }
.sf-decks-rule-go .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--sf-muted); transition: color .2s, transform .2s; }
.sf-decks-rules li.is-error .sf-decks-rule-go .icon { color: #ff8a95; }
.sf-decks-rule-go:hover span, .sf-decks-rule-go:focus-visible span { color: #fff; text-decoration: underline solid currentColor; }
.sf-decks-rule-go:hover .icon, .sf-decks-rule-go:focus-visible .icon { color: #fff; transform: scale(1.18); }
.sf-decks-rule-go:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-decks-board .sf-decks-spread-card { transition: transform .2s, opacity .3s, filter .3s; }
.sf-decks-board.is-pointing .sf-decks-spread-card:not(.is-pointed) { opacity: .32; filter: grayscale(.7); }
.sf-decks-spread-card.is-pointed { z-index: 3; transform: translateY(-4px); }
.sf-decks-spread-card.is-pointed img { box-shadow: 0 0 0 3px var(--sf-danger), 0 0 24px #ff4757b3, 0 14px 26px #000b; }
.sf-decks-spread-card.is-pointed::after { content: ''; position: absolute; inset: -7px; border: 2px solid var(--sf-danger); border-radius: 7% / 5%; pointer-events: none; animation: sfd-point-ring 1.1s ease-out infinite; }
.sf-decks-spread-card.is-point-lead::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 4; width: 26px; height: 30px; margin-left: -13px; pointer-events: none;
  background: var(--sf-danger); clip-path: polygon(32% 0, 68% 0, 68% 52%, 100% 52%, 50% 100%, 0 52%, 32% 52%); animation: sfd-point-bob .6s ease-in-out infinite alternate; }
.sf-decks-board-part.is-pointed .sf-decks-board-count { box-shadow: 0 0 0 2px currentColor, 0 0 18px currentColor; animation: sfd-point-chip .9s ease-in-out 4; }
@keyframes sfd-point-ring { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.14); } }
@keyframes sfd-point-bob { from { transform: translateY(-5px); } to { transform: translateY(3px); } }
@keyframes sfd-point-chip { 50% { transform: scale(1.12); } }
@media (max-width: 680px) {
  .sf-decks-spread-card.is-point-lead::before { width: 20px; height: 24px; margin-left: -10px; bottom: calc(100% + 5px); }
}

/* ---------- /decks/build: the same pointing in the builder (2026-10-09, owner: "กดที่ผิดกติกาแล้ว กดแล้วต้องชี้ว่าผิด
   ตรงไหนด้วย") — the finding is a .sf-decks-rule-go button; "อยู่ใน" chips name the tabs holding its cards (×copies).
   pkg-decks.js opens the tab, rings every copy (.sf-decks-slot.is-pointed; the first in each tab gets the arrow,
   drawn INSIDE the card's top — above it, the slots box clips it and it covers the row above), dims the rest
   (.sf-decks-slots-wrap.is-pointing) and lights each tab that holds a copy (.sf-decks-zone.is-pointed). */
.sf-decks-build .sf-decks-rules li { display: grid; gap: 4px; }
.sf-decks-build .sf-decks-rule-go { line-height: 1.5; }
.sf-decks-rule-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sf-decks-rule-where small { font-size: 11px; color: var(--sf-muted); }
.sf-decks-rule-where .sf-decks-rules-zone { margin: 0; display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer; }
.sf-decks-rule-where .sf-decks-rules-zone b { font-weight: 700; color: #ff8a95; }
.sf-decks-rules li.is-todo .sf-decks-rule-where .sf-decks-rules-zone b { color: var(--sf-price); }
.sf-decks-rule-where .sf-decks-rules-zone:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 1px; }
.sf-decks-zone-pane { position: relative; }   /* holds the stand-in box the group scrolls to */
.sf-decks-slots-wrap .sf-decks-slot { transition: opacity .3s, filter .3s; }
.sf-decks-slots-wrap.is-pointing .sf-decks-slot:not(.is-pointed) { opacity: .32; filter: grayscale(.7); }
.sf-decks-slot.is-pointed { z-index: 3; }
.sf-decks-slot.is-pointed .sf-decks-slot-art { border-color: var(--sf-danger); box-shadow: 0 0 0 2px var(--sf-danger), 0 0 22px #ff4757b3; }
.sf-decks-slot.is-pointed .sf-decks-slot-pic::after { content: ''; position: absolute; inset: -6px; z-index: 3; border: 2px solid var(--sf-danger); pointer-events: none; animation: sfd-point-ring 1.1s ease-out infinite; }
.sf-decks-slot.is-point-lead .sf-decks-slot-pic::before { content: ''; position: absolute; left: 50%; top: 6px; z-index: 4; width: 24px; height: 28px; margin-left: -12px; pointer-events: none;
  background: var(--sf-danger); clip-path: polygon(32% 0, 68% 0, 68% 52%, 100% 52%, 50% 100%, 0 52%, 32% 52%); animation: sfd-point-bob .6s ease-in-out infinite alternate; }
.sf-decks-zone.is-pointed { color: var(--sf-text); box-shadow: inset 0 0 0 2px var(--sf-danger), inset 0 -10px 18px -10px #ff475788; animation: sfd-point-tab .9s ease-in-out 4; }
@keyframes sfd-point-tab { 50% { background-color: #ff47572e; } }
@media (max-width: 680px) {
  .sf-decks-slot.is-point-lead .sf-decks-slot-pic::before { width: 20px; height: 24px; margin-left: -10px; top: 4px; }
}

/* ---------- /decks/build: save state in the panel foot (2026-10-09, owner: "ทำไมกดอัพเดทแล้วมาหน้าหลัก …
   ควรมี alert หรือ message แจ้งเตือนมากกว่า") — saving stays here; the foot says whether the screen is saved. */
.sf-decks-savestate { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.sf-decks-savestate .icon { width: 14px; height: 14px; stroke-width: 3; }
.sf-decks-savestate.is-saved { color: #2ee59d; }
.sf-decks-savestate.is-dirty { color: var(--sf-price); }
.sf-decks-savestate.is-dirty::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sf-decks-spin.is-sm { width: 14px; height: 14px; margin: 0; border-width: 2px; }

/* ---------- /decks hub: the player's own decks behind two tabs (2026-10-09, owner: "ดูยาก", then "ดูงงเกินไป …
   แยกสัดส่วน เด็คของเรา และเด็คของคนอื่นที่ขาย") — decks/index + decks/_zone-{mine,new}. The tabs are the site's
   underline tabs (.sf-tabs look, bigger, icon + count), no longer three big notched cards that read as content;
   decks shops sell left for the home row + /market?kind=deck (.sf-dh-shop = the one door in the head). ---------- */
/* the tab bar's own line divides the page — no second rule under the heading right above it */
.sf-dh .sf-head { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
.sf-dh .sf-head::after { display: none; }
.sf-dz { display: flex; gap: 4px; margin: 0 0 26px; border-bottom: 1px solid var(--v2-line); }
.sf-dz-tab { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: -1px; padding: 12px 20px 12px 12px;
  color: var(--sf-muted); border-bottom: 3px solid transparent; outline: none; transition: color .15s, background-color .15s, border-color .15s; }
.sf-dz-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--sf-action);
  border: 1.5px solid transparent; background: linear-gradient(#1a0f30, #1a0f30) padding-box, linear-gradient(135deg, #00f0ff88, #ff2e8888) border-box;
  transition: background .2s, color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.sf-dz .sf-dz-ic .icon { width: 17px; height: 17px; }
.sf-dz-text { font: 800 16px/1.3 'Noto Sans Thai', sans-serif; color: inherit; white-space: nowrap; }
.sf-dz-n { padding: 3px 7px; font: 700 11px/1 var(--v2-mono); color: #d9cfe9; white-space: nowrap; background: #ffffff0d; border: 1px solid #ffffff1f; }
.sf-dz-tab.is-on { color: var(--sf-heading); border-bottom-color: var(--sf-action); background: linear-gradient(180deg, transparent, #00f0ff14); }
.sf-dz-tab.is-on .sf-dz-ic { color: var(--sf-action-ink); background: var(--sf-action); border-color: var(--sf-action); box-shadow: 0 0 18px #00f0ff40; }
.sf-dz-tab.is-on .sf-dz-n { color: var(--sf-action-ink); background: var(--sf-action); border-color: var(--sf-action); }
.sf-dz-tab:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .sf-dz-tab:not(.is-on):hover { color: var(--sf-text); background: #ffffff08; border-bottom-color: var(--sf-border-hover); }
  .sf-dz-tab:not(.is-on):hover .sf-dz-ic { transform: scale(1.06); }
}

/* the head's one door to the decks shops sell (another page) — a quiet outline row, magenta = the shop side */
.sf-dh-shop { --sf-cut: 12px; --sf-edge: #ff2e8855; position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  align-self: end; padding: 9px 16px 9px 9px; color: var(--sf-text); border: 1px solid var(--sf-edge); background: radial-gradient(90% 140% at 0% 50%, #ff2e8814, transparent 70%), #130a24;
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut))); transition: border-color .2s; }
.sf-dh-shop::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-dh-shop-ic { width: 38px; height: 38px; display: grid; place-items: center; color: #ff7ab3; border: 1px solid #ff2e8866; background: #ff2e8812; }
.sf-dh .sf-dh-shop-ic .icon { width: 18px; height: 18px; }
.sf-dh-shop-text { display: grid; gap: 2px; min-width: 0; }
.sf-dh-shop-text small { font-size: 11.5px; line-height: 1.35; color: var(--sf-muted); }
.sf-dh-shop-text b { font: 700 14px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-dh-shop-text .sf-mono { font-size: 12px; color: #ff9ac6; }
.sf-dh .sf-dh-shop-go { width: 16px; height: 16px; color: #ff7ab3; transition: transform .2s; }
@media (hover: hover) and (pointer: fine) {
  .sf-dh-shop:hover { --sf-edge: #ff2e88; }
  .sf-dh-shop:hover .sf-dh-shop-go { transform: translateX(4px); }
}
.sf-dh-shop:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-dz-panel { transition: opacity .15s; }
.sf-dz-panel.is-busy { opacity: .5; pointer-events: none; }

/* a zone's own head: h2 with the magenta bar + one line, its tools on the right */
.sf-dz-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.sf-dz-head > div { flex: 1 1 320px; min-width: 0; }
.sf-dz-head h2 { position: relative; padding-left: 14px; font: 800 22px/1.35 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-dz-head h2::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; background: var(--sf-heading-mark); }
.sf-dz-head p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--sf-muted); }
.sf-dz-head .sf-dg-back { margin-bottom: 8px; }
.sf-dz-head .sf-decks-find-inline { flex: 0 1 300px; }
.sf-dz-head.is-tools { align-items: center; }
.sf-dz-head.is-tools > p { flex: 1 1 240px; margin: 0; }

/* สร้างเด็คใหม่ — "เริ่มเร็ว": the member's own games (and unsaved drafts) straight to the builder */
.sf-dq { display: grid; gap: 10px; margin: -2px 0 24px; }
.sf-dq-label { font-size: 12px; font-weight: 700; color: var(--sf-muted); }
.sf-dq-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-dq-go { --sf-cut: 10px; --sf-edge: var(--sf-border); --dg-tint: #8a5cff; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-width: 230px; padding: 8px 14px 8px 8px; color: var(--sf-text); border: 1px solid var(--sf-edge);
  background: radial-gradient(90% 120% at 0% 50%, color-mix(in srgb, var(--dg-tint) 22%, transparent), transparent 70%), #130a24;
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut))); transition: border-color .2s; }
.sf-dq-go::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-dq-go:hover, .sf-dq-go:focus-visible { --sf-edge: var(--sf-border-hover); }
.sf-dq-go > .icon { width: 18px; height: 18px; color: var(--sf-action); transition: transform .25s; }
.sf-dq-go:hover > .icon { transform: rotate(90deg); }
.sf-dq-logo { display: grid; place-items: center; width: 74px; height: 42px; padding: 5px 7px; background: #fff; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.sf-dq-logo.has-bg { background: var(--dg-bg); }
.sf-dq-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-dq-logo b { font: 800 9px/1.2 var(--v2-display); color: #1a0f2e; text-align: center; }
.sf-dq-text { display: grid; gap: 2px; min-width: 0; }
.sf-dq-text b { font-size: 13px; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-dq-text small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sf-muted); }
.sf-dq-text small img { width: 16px; height: 11px; object-fit: cover; box-shadow: 0 0 0 1px #ffffff33; }
.sf-dq-text em { font-style: normal; color: #ffd59a; }

/* เด็คของฉัน — the guest card (the builder's .sf-decks-guest, laid out wide) and the drafts the builder keeps in
   the session ("ยังไม่ได้บันทึก") */
.sf-dm-guest { margin-bottom: 24px; padding: 18px 20px; }
@media (min-width: 761px) {
  .sf-dm-guest { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic text acts" "ic perks acts"; gap: 8px 18px; }
  .sf-dm-guest .sf-decks-guest-acts { justify-content: flex-end; }
}
.sf-dd { display: grid; gap: 12px; margin-bottom: 26px; padding: 14px 16px 16px; background: #ffb02e0a; border: 1px dashed #ffb02e59; }
.sf-dd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sf-dd-head b { font-size: 14px; color: #ffd59a; }
.sf-dd-head small { font-size: 12px; color: var(--sf-muted); }
.sf-dd-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ffb02e; transform: translateY(-1px); }
.sf-dd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.sf-dd-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; color: var(--sf-text);
  background: #130a24; border: 1px solid #ffffff17; transition: border-color .2s, background-color .2s; }
.sf-dd-item:hover, .sf-dd-item:focus-visible { border-color: #ffb02e99; background: #1a0f2a; }
.sf-dd-pics { position: relative; isolation: isolate; width: 58px; height: 56px; }
.sf-dd-pics img { position: absolute; top: 2px; left: 4px; height: 52px; width: auto; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 10px #000a; }
.sf-dd-pics img:first-child { z-index: 1; transform: rotate(-4deg); }
.sf-dd-pics img + img { left: 20px; top: 4px; transform: rotate(8deg); }
.sf-dd-text { display: grid; gap: 2px; min-width: 0; }
.sf-dd-text b { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-dd-text small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sf-muted); white-space: nowrap; overflow: hidden; }
.sf-dd-text small img { width: 16px; height: 11px; object-fit: cover; }
.sf-dd-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #ffb02e; white-space: nowrap; }
.sf-dd-go .icon { width: 14px; height: 14px; transition: transform .25s; }
.sf-dd-item:hover .sf-dd-go .icon { transform: translateX(3px); }

/* เด็คของฉัน — saved decks: a fan of up to 3 cards on the game's tint, the logo on a white plate */
.sf-dm-chips { margin: -4px 0 20px; }
.sf-dm-chips .sf-chip b { margin-left: 2px; }
.sf-dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 22px 18px; }
.sf-dm, .sf-dm-new { --sf-cut: 18px; --sf-edge: var(--sf-border); position: relative; min-width: 0; color: var(--sf-text); border: 1px solid var(--sf-edge);
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut)));
  transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sf-dm::after, .sf-dm-new::after { content: ''; position: absolute; inset: -1px; z-index: 6; pointer-events: none; color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-dm { --dg-tint: #8a5cff; display: flex; flex-direction: column; background: linear-gradient(180deg, #150b26, var(--v2-surface) 60%); }
.sf-dm:hover, .sf-dm:focus-within { --sf-edge: var(--sf-border-hover); }
.sf-dm-art { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--v2-line);
  background: radial-gradient(ellipse 70% 75% at 50% 88%, color-mix(in srgb, var(--dg-tint) 38%, transparent), transparent 72%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 11px), #0d0719; }
.sf-dm-fan img { --x: -50%; --r: 0deg; --y: 0px; position: absolute; left: 50%; bottom: 7%; height: 76%; width: auto; aspect-ratio: 63 / 88; object-fit: cover;
  border-radius: 5px; box-shadow: 0 10px 22px #000c, 0 0 0 1px #ffffff1a; transform-origin: 50% 100%;
  transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--r)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sf-dm-fan img:first-child { z-index: 3; }
.sf-dm-fan.n-2 img:nth-child(1) { --x: -74%; --r: -6deg; }
.sf-dm-fan.n-2 img:nth-child(2) { --x: -26%; --r: 7deg; z-index: 2; }
.sf-dm-fan.n-3 img:nth-child(2) { --x: -92%; --r: -12deg; z-index: 2; }
.sf-dm-fan.n-3 img:nth-child(3) { --x: -8%; --r: 12deg; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .sf-dm:hover { transform: translateY(-4px); }
  .sf-dm:hover .sf-dm-fan img:first-child { --y: -6px; }
  .sf-dm:hover .sf-dm-fan.n-2 img:nth-child(1) { --r: -9deg; }
  .sf-dm:hover .sf-dm-fan.n-2 img:nth-child(2) { --x: -20%; --r: 11deg; }
  .sf-dm:hover .sf-dm-fan.n-3 img:nth-child(2) { --x: -100%; --r: -16deg; }
  .sf-dm:hover .sf-dm-fan.n-3 img:nth-child(3) { --x: 0%; --r: 16deg; }
}
.sf-dm-logo { position: absolute; top: 10px; left: 10px; z-index: 4; display: grid; place-items: center; height: 32px; max-width: 108px; padding: 4px 9px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.sf-dm-logo.has-bg { background: var(--dg-bg); }
.sf-dm-logo img { max-height: 24px; max-width: 90px; width: auto; object-fit: contain; }
.sf-dm-logo b { font: 800 9px/1.2 var(--v2-display); color: #1a0f2e; }
.sf-dm-n { position: absolute; right: 10px; bottom: 10px; z-index: 4; padding: 4px 8px; font-size: 11px; color: #d9cfe9; background: #0a0014e6; border: 1px solid #00f0ff55; }
.sf-dm-n b { font-size: 13px; color: var(--sf-action); }
.sf-dm-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.sf-dm-body h3 { font-size: 15px; font-weight: 700; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-dm-body h3 a:hover { color: var(--sf-action); }
.sf-dm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12px; color: var(--sf-muted); }
.sf-dm-meta img { width: 16px; height: 11px; margin-right: 6px; object-fit: cover; box-shadow: 0 0 0 1px #ffffff33; }
.sf-dm-meta span + span::before { content: '·'; margin: 0 7px; }
.sf-dm-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #ffffff1a; }
.sf-dm-acts .button { min-height: 36px; padding: 0 8px; font-size: 12px; justify-content: center; white-space: nowrap; }
.sf-dm-del { display: grid; place-items: center; height: 36px; color: #ff8aa1; border: 1px solid #ff5a7a55; transition: color .2s, border-color .2s, background-color .2s; }
.sf-dh .sf-dm-del .icon { width: 17px; height: 17px; }
.sf-dm-del:hover, .sf-dm-del:focus-visible { color: #fff; background: #ff3b5c; border-color: #ff3b5c; }
.sf-dm-new { --sf-edge: #00f0ff59; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 300px; padding: 20px;
  text-align: center; border-style: dashed; background: radial-gradient(circle at 50% 40%, #00f0ff12, transparent 65%), #0f0820; }
.sf-dm-new b { font-size: 16px; }
.sf-dm-new small { font-size: 12px; color: var(--sf-muted); }
.sf-dm-new-plus { width: 60px; height: 60px; display: grid; place-items: center; color: var(--sf-action); border: 1px solid var(--sf-action); box-shadow: 0 0 20px #00f0ff26;
  transition: background-color .2s, color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sf-dh .sf-dm-new-plus .icon { width: 26px; height: 26px; }
.sf-dm-new:hover, .sf-dm-new:focus-visible { --sf-edge: var(--sf-action); }
.sf-dm-new:hover .sf-dm-new-plus, .sf-dm-new:focus-visible .sf-dm-new-plus { color: var(--sf-action-ink); background: var(--sf-action); transform: rotate(90deg); }
.sf-dm-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; border: 1px dashed #ffffff24; background: #ffffff04; }
.sf-dm-empty-ic { width: 60px; height: 60px; display: grid; place-items: center; color: var(--sf-action); border: 1px solid #00f0ff55; box-shadow: 0 0 22px #00f0ff1f; }
.sf-dh .sf-dm-empty-ic .icon { width: 26px; height: 26px; }
.sf-dm-empty b { font-size: 17px; color: var(--sf-heading); }
.sf-dm-empty p { max-width: 480px; font-size: 13px; line-height: 1.7; color: var(--sf-muted); }
.sf-dm-empty .button { margin-top: 6px; }

@media (max-width: 900px) {
  .sf-dh-shop { align-self: start; }
}
@media (max-width: 680px) {
  .sf-dz { gap: 0; margin-bottom: 20px; }
  .sf-dz-tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: 8px; padding: 11px 6px; }
  .sf-dz-ic { width: 30px; height: 30px; }
  .sf-dz .sf-dz-ic .icon { width: 15px; height: 15px; }
  .sf-dz-text { font-size: 14px; }
  .sf-dz-n { padding: 3px 5px; font-size: 10px; }
  /* phones: the door is one slim line, so the tabs (the page's own business) stay near the top */
  .sf-dh-shop { display: grid; width: 100%; gap: 10px; padding: 6px 12px 6px 6px; }
  .sf-dh-shop-ic { width: 30px; height: 30px; }
  .sf-dh .sf-dh-shop-ic .icon { width: 15px; height: 15px; }
  .sf-dh-shop-text small { display: none; }
  .sf-dh-shop-text b { font-size: 13px; }
  .sf-dz-head h2 { font-size: 19px; }
  .sf-dz-head .sf-decks-find-inline { flex: 1 1 100%; max-width: none; }
  .sf-dq-list { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .sf-dq-go { flex: 0 0 auto; min-width: 210px; }
  .sf-dd-list { grid-template-columns: minmax(0, 1fr); }
  .sf-dm-guest { padding: 14px; }
  /* phones: one deck per row — the fan on the left, the words + buttons beside it */
  .sf-dm-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sf-dm { --sf-cut: 14px; display: grid; grid-template-columns: 128px minmax(0, 1fr); }
  .sf-dm-art { aspect-ratio: auto; min-height: 152px; border-bottom: 0; border-right: 1px solid var(--v2-line); }
  .sf-dm-fan img { height: 70%; bottom: 9%; }
  .sf-dm-fan.n-3 img:nth-child(2) { --x: -84%; --r: -10deg; }
  .sf-dm-fan.n-3 img:nth-child(3) { --x: -16%; --r: 10deg; }
  .sf-dm-logo { top: 7px; left: 7px; height: 26px; max-width: 92px; padding: 3px 7px; }
  .sf-dm-logo img { max-height: 19px; max-width: 76px; }
  .sf-dm-n { right: 6px; bottom: 6px; padding: 3px 6px; font-size: 10px; }
  .sf-dm-n b { font-size: 12px; }
  .sf-dm-body { padding: 10px 10px 10px 12px; gap: 4px; }
  .sf-dm-body h3 { font-size: 14px; }
  .sf-dm-acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 5px; padding-top: 8px; }
  .sf-dm-acts .button { min-height: 34px; padding: 0 4px; font-size: 11.5px; }
  .sf-dm-del { height: 34px; }
  .sf-dm-new { --sf-cut: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plus title" "plus note"; align-items: center;
    justify-items: start; gap: 2px 14px; min-height: 0; padding: 14px 16px; text-align: left; }
  .sf-dm-new b { grid-area: title; align-self: end; }
  .sf-dm-new small { grid-area: note; align-self: start; }
  .sf-dm-new-plus { grid-area: plus; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-dz-tab, .sf-dz-ic, .sf-dh-shop-go, .sf-dm, .sf-dm-fan img, .sf-dm-new-plus, .sf-dq-go > .icon { transition: none; }
}

/* ---------- /decks/shop — decks shops sell (2026-10-09, owner: /market?kind=deck "ดูยากมาก"): one row of tools
   (search · partials/game-pick · sort), a count line, the tiles. The head's door back to /decks = .sf-dh-shop's
   twin in cyan (.sf-dshop-own). decks/shop.blade.php. ---------- */
.sf-dshop .sf-head { margin-bottom: 18px; }
.sf-dshop-own { --sf-cut: 12px; --sf-edge: #00f0ff55; position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  align-self: end; padding: 9px 16px 9px 9px; color: var(--sf-text); border: 1px solid var(--sf-edge); background: radial-gradient(90% 140% at 0% 50%, #00f0ff12, transparent 70%), #130a24;
  clip-path: polygon(0 0, calc(100% - var(--sf-cut)) 0, 100% var(--sf-cut), 100% 100%, var(--sf-cut) 100%, 0 calc(100% - var(--sf-cut))); transition: border-color .2s; }
.sf-dshop-own::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge); transition: color .2s;
  background: var(--sf-diag) right top / var(--sf-cut) var(--sf-cut) no-repeat, var(--sf-diag) left bottom / var(--sf-cut) var(--sf-cut) no-repeat; }
.sf-dshop-own-ic { width: 38px; height: 38px; display: grid; place-items: center; color: var(--sf-action); border: 1px solid #00f0ff66; background: #00f0ff10; }
.sf-dshop .sf-dshop-own-ic .icon { width: 18px; height: 18px; }
.sf-dshop-own-text { display: grid; gap: 2px; min-width: 0; }
.sf-dshop-own-text small { font-size: 11.5px; line-height: 1.35; color: var(--sf-muted); }
.sf-dshop-own-text b { font: 700 14px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-dshop .sf-dshop-own-go { width: 16px; height: 16px; color: var(--sf-action); transition: transform .2s; }
@media (hover: hover) and (pointer: fine) {
  .sf-dshop-own:hover { --sf-edge: var(--sf-action); }
  .sf-dshop-own:hover .sf-dshop-own-go { transform: translateX(4px); }
}
.sf-dshop-own:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-dshop-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 12px; }
.sf-dshop-find { flex: 1 1 280px; max-width: 460px; }
.sf-dshop-bar .sf-gpick-btn { height: 100%; min-height: 42px; }
.sf-dshop-sort { flex: 0 0 auto; min-height: 42px; }
.sf-dshop-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 20px; font-size: 13px; color: var(--sf-muted); }
.sf-dshop-results { transition: opacity .15s; }
.sf-dshop-results.is-busy { opacity: .5; }
.sf-dshop-grid.product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 14px; }
.sf-dshop .sf-dm-empty-ic .icon { width: 26px; height: 26px; }
@media (max-width: 1279px) { .sf-dshop-grid.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .sf-dshop-grid.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sf-dshop-grid.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } }
@media (max-width: 680px) {
  .sf-dshop-own { display: grid; width: 100%; gap: 10px; padding: 6px 12px 6px 6px; }
  .sf-dshop-own-ic { width: 30px; height: 30px; }
  .sf-dshop .sf-dshop-own-ic .icon { width: 15px; height: 15px; }
  .sf-dshop-own-text small { display: none; }
  .sf-dshop-own-text b { font-size: 13px; }
  /* phones: search on its own line, the game box + sort share the next */
  .sf-dshop-find { flex: 1 1 100%; max-width: none; }
  .sf-dshop-bar .sf-gpick { flex: 1 1 0; min-width: 0; }
  .sf-dshop-bar .sf-gpick-btn { width: 100%; max-width: none; }
  .sf-dshop-bar .sf-gpick-btn .sf-gpick-name { flex: 1; text-align: left; }
  .sf-dshop-sort { flex: 0 1 44%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sf-dshop-own-go { transition: none; } }

/* Deck picture popup (/decks/view "รูปเด็ค", 2026-10-09) — pkg-decks.js [data-sfd-wall]; the picture is
   Customer\DeckImageController → DeckWallpaper (16:9). */
.sf-dialog.sf-decks-wall { width: min(1040px, calc(100% - 32px)); }
.sf-decks-wall .sf-dialog-body { display: grid; gap: 14px; }
.sf-decks-wall-shot { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #0a0014; border: 1px solid var(--v2-line); overflow: hidden; }
.sf-decks-wall-shot img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.sf-decks-wall-shot.is-loading img, .sf-decks-wall-shot.is-error img { opacity: 0; }
.sf-decks-wall-wait { position: absolute; inset: 0; display: none; place-content: center; grid-auto-flow: column; align-items: center; gap: 10px; color: var(--v2-muted); font-size: 13px; }
.sf-decks-wall-shot.is-loading .sf-decks-wall-wait, .sf-decks-wall-shot.is-error .sf-decks-wall-wait { display: grid; }
.sf-decks-wall-shot.is-error .sf-decks-spin { display: none; }
.sf-decks-wall .sf-note { margin: 0; }
.sf-decks-wall-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-decks-wall-dl .button { justify-content: flex-start; gap: 10px; min-height: 52px; }
.sf-decks-wall-dl .button > span { display: grid; gap: 2px; min-width: 0; text-align: left; line-height: 1.25; }
.sf-decks-wall-dl .button b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-decks-wall-dl .button small { font: 400 11px var(--v2-mono); opacity: .8; }
.sf-decks-wall-dl .button.is-busy { cursor: progress; }
.sf-decks-wall-dl .button.is-busy .icon { animation: sf-decks-spin 1s linear infinite; }
.sf-decks-wall-open { justify-self: start; }
@media (max-width: 680px) {
  .sf-decks-wall-dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-decks-wall-shot img { transition: none; }
  .sf-decks-wall-dl .button.is-busy .icon { animation: none; }
}

/* ---------- /decks/view: what the whole deck costs (2026-10-09, owner: "ต้องมีราคารวม จากพวก yuyutei หรืออื่นๆ ราคาน้อยสุด -
   ราคามากสุด และอีกบรรทัดราคาภายในเว็บไซต์", then "ให้ราคามาอยู่ด้านขวาดีกว่า") — App\Support\DeckValue. A third column on the
   hero's RIGHT: heading · two rows (icon tile · label · the figure right-aligned in the price colour, coverage + sites under).
   ≤1080px it moves under the deck facts (still right-aligned figures), phones = full width under them. ---------- */
.sf-decks-hero:has(> .sf-decks-value) { grid-template-columns: 170px minmax(0, 1fr) minmax(300px, 390px); }
.sf-decks-value { --sf-edge: #ffd24a3d; --sf-notch: 12px; position: relative; display: grid; align-self: center; min-width: 0; container: sfdv / inline-size;
  background: color-mix(in srgb, var(--v2-surface) 82%, #000); border: 1px solid var(--sf-edge);
  clip-path: polygon(0 0, calc(100% - var(--sf-notch)) 0, 100% var(--sf-notch), 100% 100%, var(--sf-notch) 100%, 0 calc(100% - var(--sf-notch))); }
.sf-decks-value::after { content: ''; position: absolute; inset: -1px; pointer-events: none; color: var(--sf-edge);
  background: var(--sf-diag) right top / var(--sf-notch) var(--sf-notch) no-repeat, var(--sf-diag) left bottom / var(--sf-notch) var(--sf-notch) no-repeat; }
.sf-decks-value-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px 10px; font: 800 13px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); border-bottom: 1px solid var(--v2-line); }
.sf-decks-value-h::before { content: ''; flex: none; width: 4px; height: 16px; background: var(--sf-heading-mark); box-shadow: 0 0 8px var(--sf-heading-mark); }
.sf-decks-value-h small { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--sf-muted); }
/* a narrow box puts the figure on its own line, right-aligned; a wide one beside the label */
.sf-decks-value-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "ic k" "v v" "note note"; gap: 6px 12px; align-items: center; padding: 12px 16px; }
@container sfdv (min-width: 470px) {
  .sf-decks-value-row { grid-template-columns: 32px auto minmax(0, 1fr); grid-template-areas: "ic k v" ". note note"; }
}
.sf-decks-value-row + .sf-decks-value-row { border-top: 1px solid var(--v2-line); }
.sf-decks-value-ic { grid-area: ic; display: grid; place-items: center; width: 32px; height: 32px; color: var(--sf-price); background: #ffd24a14; border: 1px solid #ffd24a40; }
.sf-decks-value-row.is-site .sf-decks-value-ic { color: var(--sf-action); background: var(--sf-action-soft); border-color: #00f0ff40; }
.sf-decks-value-ic .icon { width: 16px; height: 16px; }
.sf-decks-value-k { grid-area: k; display: grid; gap: 1px; min-width: 0; }
.sf-decks-value-k b { font-size: 14px; font-weight: 800; color: var(--sf-heading); }
.sf-decks-value-k small { font-size: 11px; color: var(--sf-muted); }
/* the figure sits RIGHT; a range too wide for the column breaks after the dash, still right-aligned */
.sf-decks-value-v { grid-area: v; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 6px; text-align: right;
  font-size: 22px; font-weight: 800; line-height: 1.25; }
.sf-decks-value-v > span { white-space: nowrap; }
.sf-decks-value-v i { font-style: normal; color: var(--sf-muted); font-weight: 400; }
.sf-decks-value-v .is-none { font: 600 13px 'Noto Sans Thai', sans-serif; color: var(--sf-muted); white-space: normal; }
.sf-decks-value-note { grid-area: note; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px 10px; font-size: 11px; line-height: 1.5; color: var(--sf-muted); text-align: right; min-width: 0; }
.sf-decks-value-note .is-ok { color: var(--sf-sell); }
.sf-decks-value-note .is-sold { color: var(--sf-price); }
.sf-decks-value-note .is-todo { color: #ffb36b; }
.sf-decks-value-src { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 9px; color: var(--sf-text); }
.sf-decks-value-src > span { display: inline-flex; align-items: center; white-space: nowrap; }
.sf-decks-value-src .sf-src-logo { width: 16px; height: 16px; margin-right: 5px; vertical-align: 0; }
@media (max-width: 1080px) {
  .sf-decks-hero:has(> .sf-decks-value) { grid-template-columns: 170px minmax(0, 1fr); }
  .sf-decks-value { grid-column: 2; align-self: start; }
}
@media (max-width: 680px) {
  .sf-decks-hero:has(> .sf-decks-value) { grid-template-columns: 84px minmax(0, 1fr); }
  .sf-decks-value { grid-column: 1 / -1; --sf-notch: 10px; }
  .sf-decks-value-h { padding: 10px 12px 9px; }
  .sf-decks-value-row { padding: 10px 12px; gap: 5px 10px; }
  .sf-decks-value-ic { width: 30px; height: 30px; }
  .sf-decks-value-v { font-size: 20px; }
}
/* the text list: each card's market range and this site's price, a copy each */
.sf-decks-list-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 3px; font-size: 11.5px; color: var(--sf-muted); }
.sf-decks-list-price b, .sf-decks-list-price a { font-weight: 700; }
.sf-decks-list-price a { text-decoration: underline; text-underline-offset: 2px; }
.sf-decks-list-price a:hover { color: var(--sf-action); }
.sf-decks-list-price i { font-style: normal; }
.sf-decks-list-price small { display: inline; font-size: 11px; }

/* ── Buddyfight: the game's full rule check + play buttons (storefront/decks/_bf-check, pkg-bf-check.js) ── */
.sf-bf-check-wrap { margin: 10px 12px 0; font-size: 12px; }
.sf-decks-hero-meta .sf-bf-check-wrap { margin: 10px 0 0; }
.sf-bf-check { border: 1px solid var(--sf-border); }
.sf-bf-check-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.sf-bf-check-head .icon { width: 16px; height: 16px; flex: none; color: var(--sf-muted); }
.sf-bf-check-title { flex: 1 1 160px; min-width: 0; font-weight: 700; color: var(--sf-heading); }
.sf-bf-check-state { margin-left: auto; color: var(--sf-muted); }
.sf-bf-check.is-busy .sf-bf-check-state::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-bf-spin .8s linear infinite; }
@keyframes sf-bf-spin { to { transform: rotate(360deg); } }
.sf-bf-check.is-ok { border-color: #2ee59d55; }
.sf-bf-check.is-ok .sf-bf-check-head .icon, .sf-bf-check.is-ok .sf-bf-check-state { color: #2ee59d; }
.sf-bf-check.is-todo { border-color: #ffd24a55; }
.sf-bf-check.is-todo .sf-bf-check-head .icon, .sf-bf-check.is-todo .sf-bf-check-state { color: var(--sf-price); }
.sf-bf-check.is-bad { border-color: #ff475766; background: #ff47570d; }
.sf-bf-check.is-bad .sf-bf-check-head .icon, .sf-bf-check.is-bad .sf-bf-check-state { color: var(--sf-danger); }
.sf-bf-check-list { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; gap: 5px; max-height: 200px; overflow: auto; }
.sf-bf-check-list li { position: relative; padding-left: 14px; line-height: 1.5; color: #d9cfe9; }
.sf-bf-check-list li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-price); }
.sf-bf-check-list li.is-error::before { background: var(--sf-danger); }
.sf-bf-check-list li.is-error .sf-decks-rule-go .icon { color: #ff8a95; }
.sf-bf-check-note { margin: 6px 0 0; color: var(--sf-muted); line-height: 1.5; }
.sf-bf-check-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sf-bf-check-acts .button { min-height: 38px; font-size: 13px; }
.sf-bf-check-acts .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
@media (max-width: 680px) { .sf-bf-check-acts .button { flex: 1 1 100%; justify-content: center; } }
/* the site's own short check (DeckRules) would give a second verdict beside the game's full one */
.sf-decks-rules:has(+ .sf-bf-check-wrap) { display: none; }

/* ---- /decks language step: sample decks from tournaments (decks/_samples, App\Support\SampleDecks; owner 2026-10-17:
   "เอาเด็คที่เราไปดึงมาจากเว็บอื่นมาแสดงเหมือนเป็นเด็คตัวอย่างให้เราดู") ---- */
.sf-sd { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--sf-border, #ffffff1a); }
.sf-sd-head h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; color: var(--sf-heading, #fff); }
.sf-sd-head h3 .icon { width: 24px; height: 24px; color: var(--sf-price); }
.sf-sd-head p { margin: 0 0 14px; color: var(--v2-muted, #aaa0ba); font-size: 14px; }
.sf-sd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sf-sd-chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--sf-border, #ffffff26); border-radius: 999px; background: #ffffff08; color: var(--v2-text); font: inherit; font-size: 13px; cursor: pointer; }
.sf-sd-chip small { margin-left: 4px; color: var(--v2-muted, #aaa0ba); }
.sf-sd-chip:hover { border-color: var(--sf-action, #21e6ff); }
.sf-sd-chip.is-on { border-color: var(--sf-action, #21e6ff); background: #21e6ff1f; color: #fff; }
.sf-sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; transition: opacity .15s; }
.sf-sd-grid.is-busy { opacity: .55; }
.sf-sd-tile { display: flex; gap: 14px; height: 100%; padding: 12px; border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px; background: var(--v2-surface, #ffffff0a); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.sf-sd-tile:hover, .sf-sd-tile:focus-visible { border-color: var(--sf-action, #21e6ff); transform: translateY(-2px); }
.sf-sd-fan { position: relative; flex: 0 0 96px; height: 100px; }
.sf-sd-fan img { position: absolute; left: 0; top: 0; width: 64px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 10px #0008;
  transform: translateX(calc(var(--i) * 6px)) rotate(calc(var(--i) * 6deg)); transform-origin: 50% 100%; z-index: calc(3 - var(--i)); }
.sf-sd-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-sd-place { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #ffffff14; color: var(--v2-muted, #aaa0ba); font-size: 12px; font-weight: 700; }
.sf-sd-place.is-gold { background: #ffd24a26; color: #ffd24a; }
.sf-sd-place.is-silver { background: #d8dde826; color: #e3e7ef; }
.sf-sd-place.is-bronze { background: #e0915526; color: #f0a46a; }
.sf-sd-place.is-official { background: #21e6ff1f; color: var(--sf-action, #21e6ff); }
.sf-sd-name { font-size: 15px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.sf-sd-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--v2-muted, #aaa0ba); font-size: 12.5px; }
.sf-sd-event { color: var(--v2-muted, #aaa0ba); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-sd-more { display: flex; justify-content: center; margin-top: 16px; }

.sf-sd-pop { width: min(1100px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #21e6ff55; border-radius: 12px; background: var(--v2-bg, #120a1d); color: var(--v2-text); }
.sf-sd-pop::backdrop { background: rgba(5, 0, 12, .76); backdrop-filter: blur(6px); }
.sf-sd-pop-box { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.sf-sd-pop-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--sf-border, #ffffff1a); }
.sf-sd-pop-head h3 { margin: 6px 0 4px; font-size: 20px; color: #fff; }
.sf-sd-pop-head .sf-sd-meta { margin: 0; }
.sf-sd-x { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sf-border, #ffffff26); border-radius: 8px; background: transparent; color: var(--v2-text); cursor: pointer; }
.sf-sd-x .icon { width: 18px; height: 18px; }
.sf-sd-x:hover { border-color: var(--sf-action, #21e6ff); }
.sf-sd-pop-body { overflow: auto; padding: 12px 18px 18px; }
.sf-sd-sum { margin: 0 0 8px; color: var(--v2-muted, #aaa0ba); font-size: 13px; }
.sf-sd-sum .is-ok { color: #4be3a0; }
.sf-sd-sum .is-bad { color: #ff6b81; }
.sf-sd-zone h4 { margin: 14px 0 8px; padding-left: 10px; border-left: 3px solid var(--sf-accent, #ff2e88); font-size: 15px; color: #fff; }
.sf-sd-zone h4 small { margin-left: 6px; color: var(--v2-muted, #aaa0ba); }
.sf-sd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-sd-cards li { position: relative; }
.sf-sd-pic { display: grid; place-items: center; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: #ffffff0d; }
.sf-sd-pic img { width: 100%; height: 100%; object-fit: contain; }
.sf-sd-pic em { font-style: normal; font-size: 11px; color: var(--v2-muted); padding: 4px; text-align: center; }
.sf-sd-qty { position: absolute; right: 4px; top: 4px; padding: 1px 7px; border-radius: 999px; background: #000c; color: #fff; font-size: 12px; font-weight: 700; }
.sf-sd-cards small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--v2-muted, #aaa0ba); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sd-pop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--sf-border, #ffffff1a); }
.sf-sd-src { color: var(--v2-muted, #aaa0ba); font-size: 13px; }
.sf-sd-go { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sf-sd-go .icon { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .sf-sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-sd-pop { width: 100%; max-height: 100dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .sf-sd-pop-box { max-height: 92dvh; }
  .sf-sd-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sf-sd-go, .sf-sd-go .button { flex: 1 1 100%; justify-content: center; }
}

/* sample decks as a TABLE (owner 2026-10-17: "ควรจัดเป็นแบบตารางเหมือนแบบนี้ไหม" — like onepiecetopdecks' lists); ≤760px each row a card */
.sf-sd-wrap { border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px; overflow: hidden; transition: opacity .15s; }
.sf-sd-wrap.is-busy { opacity: .55; }
.sf-sd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sf-sd-table thead th { padding: 10px 12px; background: #ffffff0d; border-bottom: 2px solid var(--sf-accent, #ff2e88); color: #fff; font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
.sf-sd-table td { padding: 6px 12px; border-top: 1px solid var(--sf-border, #ffffff12); color: var(--v2-text); vertical-align: middle; }
.sf-sd-table tbody tr { cursor: pointer; transition: background .12s; }
.sf-sd-table tbody tr:nth-child(even) { background: #ffffff05; }
.sf-sd-table tbody tr:hover { background: #21e6ff14; }
.sf-sd-deck { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.sf-sd-cols { display: flex; gap: 3px; align-self: stretch; padding-block: 4px; }
.sf-sd-cols i { width: 5px; border-radius: 2px; }
.sf-sd-thumb { flex: 0 0 auto; width: 40px; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: #ffffff0d; }
.sf-sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-sd-deck a { color: #fff; font-weight: 700; text-decoration: none; }
.sf-sd-deck a:hover, .sf-sd-deck a:focus-visible { color: var(--sf-action, #21e6ff); text-decoration: underline; }
.sf-sd-date { white-space: nowrap; color: var(--v2-muted, #aaa0ba); }
.sf-sd-rec { margin-left: 6px; color: var(--v2-muted, #aaa0ba); font-size: 13px; }
.sf-sd-ev { max-width: 320px; color: var(--v2-muted, #aaa0ba); }
@media (max-width: 760px) {
  .sf-sd-wrap { border: 0; overflow: visible; }
  .sf-sd-table, .sf-sd-table tbody { display: block; }
  .sf-sd-table thead { display: none; }
  .sf-sd-table tbody tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px; background: var(--v2-surface, #ffffff0a); }
  .sf-sd-table td { display: flex; gap: 8px; padding: 2px 0; border: 0; grid-column: 2; min-width: 0; font-size: 13px; }
  .sf-sd-table td::before { content: attr(data-label); flex: 0 0 72px; color: var(--v2-muted, #aaa0ba); }
  .sf-sd-table td.sf-sd-deck { grid-column: 1 / -1; min-width: 0; font-size: 15px; }
  .sf-sd-table td.sf-sd-deck::before { content: none; }
  .sf-sd-ev { max-width: none; }
}

/* the game page's menu: จัดเด็ค · เด็คจากงานแข่ง · ตลาดซื้อขาย (decks/_zone-new; owner 2026-10-17) */
.sf-gm { display: flex; gap: 4px; margin: 4px 0 20px; border-bottom: 1px solid var(--sf-border, #ffffff1a); overflow-x: auto; scrollbar-width: none; }
.sf-gm-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--v2-muted, #aaa0ba); text-decoration: none; white-space: nowrap; font-size: 15px; transition: color .15s, border-color .15s; }
.sf-gm-tab .icon { width: 20px; height: 20px; }
.sf-gm-tab small { padding: 1px 8px; border-radius: 999px; background: #ffffff12; font-size: 12px; }
.sf-gm-tab:hover { color: #fff; }
.sf-gm-tab.is-on { color: #fff; border-bottom-color: var(--sf-action, #21e6ff); }
.sf-gm-tab.is-on .icon { color: var(--sf-action, #21e6ff); }
.sf-gm-panel { transition: opacity .15s; }
.sf-gm-panel.is-busy { opacity: .55; }
.sf-gm-lead { margin: 0 0 16px; color: var(--v2-muted, #aaa0ba); }
.sf-gm-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding: 12px 14px; border: 1px dashed #ffd24a55; border-radius: 10px; color: var(--v2-text); font-size: 14px; }
.sf-gm-hint .icon { width: 18px; height: 18px; color: var(--sf-price); }
.sf-gm-panel > .sf-sd { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-gm-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 22px; }
.sf-gm-door { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px; background: var(--v2-surface, #ffffff0a); color: inherit; text-decoration: none; transition: border-color .15s; }
.sf-gm-door:hover, .sf-gm-door:focus-visible { border-color: var(--sf-action, #21e6ff); }
.sf-gm-door > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sf-gm-door b { color: #fff; }
.sf-gm-door small { color: var(--v2-muted, #aaa0ba); }
.sf-gm-door-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #21e6ff1a; color: var(--sf-action, #21e6ff); }
.sf-gm-door-ic .icon { width: 22px; height: 22px; }
.sf-gm-door-go { width: 18px; height: 18px; color: var(--v2-muted); }
.sf-gm-sub { margin: 0 0 12px; font-size: 17px; color: #fff; }
.sf-gm-empty { padding: 22px; border: 1px dashed var(--sf-border, #ffffff26); border-radius: 10px; color: var(--v2-muted, #aaa0ba); text-align: center; }
@media (max-width: 680px) { .sf-gm-tab { padding: 0 12px; font-size: 14px; } }

/* sample decks by series (box / tournament; owner 2026-10-17: "จัดเป็นซีรีย์ ซีรีย์งานแข่ง ซีรีย์ box") */
.sf-sd-series { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-sd-series > span { color: var(--v2-muted, #aaa0ba); font-size: 14px; white-space: nowrap; }
.sf-sd-series select { min-height: 42px; max-width: min(560px, 100%); }
.sf-sd-table tbody tr.sf-sd-group { cursor: default; background: #ff2e8814 !important; }
.sf-sd-group th { padding: 10px 12px; border-top: 1px solid #ff2e8840; color: #fff; font-size: 14px; text-align: left; }
.sf-sd-group th .icon { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--sf-accent, #ff2e88); }
.sf-sd-group th small { margin-left: 8px; color: var(--v2-muted, #aaa0ba); font-weight: 400; }
@media (max-width: 760px) {
  .sf-sd-table tbody tr.sf-sd-group { display: block; margin: 14px 0 8px; padding: 0; border: 0; background: none !important; }
  .sf-sd-group th { display: block; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--sf-accent, #ff2e88); }
  .sf-sd-series { flex-wrap: wrap; } .sf-sd-series select { width: 100%; }
}
@media (max-width: 680px) {
  .sf-gm-tab { flex: 1 0 auto; justify-content: center; gap: 6px; padding: 0 8px; }
  .sf-gm-tab small { display: none; }
}

/* เด็คของฉัน: the count line sits after the game box, left */
.sf-dz-head.is-tools > .sf-dm-count { text-align: left; }
/* games grid: doors to the tournament deck lists */
.sf-sdq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 22px; padding: 12px 14px; border: 1px solid #ffd24a40; border-radius: 10px; background: #ffd24a0a; }
.sf-sdq-label { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; }
.sf-sdq-label .icon { width: 18px; height: 18px; color: var(--sf-price); }
.sf-sdq-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-sdq-go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--sf-border, #ffffff26); border-radius: 8px; background: #ffffff08; color: var(--v2-text); text-decoration: none; font-size: 14px; }
.sf-sdq-go small { color: var(--v2-muted, #aaa0ba); }
.sf-sdq-go .icon { width: 14px; height: 14px; color: var(--v2-muted); }
.sf-sdq-go:hover, .sf-sdq-go:focus-visible { border-color: var(--sf-price); }
@media (max-width: 680px) { .sf-sdq-list { width: 100%; } .sf-sdq-go { flex: 1 1 calc(50% - 4px); justify-content: space-between; } }
.sf-dz-head.is-tools > .sf-gpick { flex: 0 0 auto; width: auto; }

/* the game's own page header (decks/_zone-new; owner 2026-10-17: "ควรแยกเป็น game … ควรจัดวางใหม่"): back link, a band tinted by
   the game (logo on a white plate · name · flags, cards, tournament decks), the menu tabs at its foot */
.sf-gh { margin-bottom: 22px; }
.sf-gh > .sf-dg-back { margin-bottom: 10px; }
.sf-gh-band { display: flex; align-items: center; gap: 18px; padding: 18px 20px 16px; border: 1px solid var(--sf-border, #ffffff1a); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--dg-tint, #21e6ff) 22%, transparent), transparent 60%), var(--v2-surface, #ffffff08); }
.sf-gh-logo { flex: 0 0 auto; display: grid; place-items: center; width: 180px; height: 84px; padding: 10px 14px; border-radius: 8px; background: #fff; box-shadow: 0 4px 18px #0006; }
.sf-gh-logo.has-bg { background: var(--dg-bg); }
.sf-gh-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-gh-logo b { color: #111; font-size: 14px; text-align: center; }
.sf-gh-text { min-width: 0; }
.sf-gh-text h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; color: #fff; }
.sf-gh-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: var(--v2-muted, #aaa0ba); font-size: 13.5px; }
.sf-gh-flags { display: inline-flex; gap: 5px; }
.sf-gh-flags img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff30; }
.sf-gh .sf-gm { margin: 0; padding: 0 12px; border: 1px solid var(--sf-border, #ffffff1a); border-top: 1px solid #ffffff12; border-radius: 0 0 12px 12px; background: #ffffff05; }
@media (max-width: 680px) {
  .sf-gh-band { gap: 12px; padding: 14px; }
  .sf-gh-logo { width: 110px; height: 56px; padding: 6px 8px; }
  .sf-gh-text h2 { font-size: 19px; }
  .sf-gh .sf-gm { padding: 0 4px; }
}
/* the deck cell: bigger picture, name + the player's own title under it */
.sf-sd-thumb { width: 50px; }
.sf-sd-deck a { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sf-sd-deck a b { font-weight: 700; overflow-wrap: anywhere; }
.sf-sd-deck a small { color: var(--v2-muted, #aaa0ba); font-weight: 400; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.sf-sd-pop-sub { margin: 0 0 4px; color: var(--v2-muted, #aaa0ba); font-size: 13px; }

/* game page → จัดเด็ค: one LANGUAGE card per edition (flag · language · cards · your decks · start), no logo (the band has it) */
.sf-ged { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sf-ged-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px;
  background: var(--v2-surface, #ffffff0a); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.sf-ged-card:hover, .sf-ged-card:focus-visible { border-color: var(--sf-action, #21e6ff); transform: translateY(-2px); }
.sf-ged-flag { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 40px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff30, 0 3px 10px #0006; background: #ffffff10; }
.sf-ged-flag img { width: 100%; height: 100%; object-fit: cover; }
.sf-ged-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sf-ged-text b { color: #fff; font-size: 16px; }
.sf-ged-text small { color: var(--v2-muted, #aaa0ba); font-size: 13px; }
.sf-ged-text em { color: var(--sf-action, #21e6ff); font-style: normal; font-size: 12.5px; }
.sf-ged-go { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border-radius: 6px; background: var(--sf-action, #21e6ff); color: #04121a; font-weight: 700; font-size: 13.5px; }
.sf-ged-go .icon { width: 14px; height: 14px; }
.sf-ged-card:hover .sf-ged-go { background: var(--sf-wipe, #ff2e88); color: #fff; }
@media (max-width: 680px) { .sf-ged { grid-template-columns: minmax(0, 1fr); } .sf-ged-card { gap: 10px; padding: 12px; } .sf-ged-flag { width: 46px; height: 33px; } }

/* sample decks: series + deck-type drop-downs (decks/_sd-pick, looks like partials/game-pick) and flags */
.sf-sd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sf-sd-found { margin-left: auto; color: var(--v2-muted, #aaa0ba); font-size: 13px; }
.sf-sdpick .sf-gpick-btn { min-width: 240px; max-width: min(440px, 100%); min-height: 48px; gap: 10px; }
.sf-sdpick-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; line-height: 1.25; text-align: left; }
.sf-sdpick-text small { color: var(--v2-muted, #aaa0ba); font-size: 11px; font-weight: 400; }
.sf-sdpick-text .sf-gpick-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sdpick-pop { min-width: max(100%, 320px); max-width: min(520px, calc(100vw - 32px)); padding: 6px; }
.sf-sdpick-pop ul { margin: 0; padding: 0; list-style: none; }
.sf-sdpick-find { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -6px 6px; padding: 8px 10px; background: var(--v2-bg, #120a1d); border-bottom: 1px solid var(--sf-border, #ffffff1a); }
.sf-sdpick-find .icon { width: 16px; height: 16px; color: var(--v2-muted); flex: 0 0 auto; }
.sf-sdpick-find input { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--sf-border, #ffffff26); border-radius: 6px; background: #ffffff08; color: var(--v2-text); font: inherit; font-size: 14px; }
.sf-sdpick-pop .sf-gpick-name { overflow-wrap: anywhere; }
.sf-sd-country { white-space: nowrap; }
.sf-sd-country img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff30; vertical-align: -4px; margin-right: 6px; }
@media (min-width: 761px) { .sf-sd-table td.sf-sd-country span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 680px) { .sf-sdpick, .sf-sdpick .sf-gpick-btn { width: 100%; max-width: none; } .sf-sd-found { margin-left: 0; } }
/* the deck cell stays a table cell (display: flex on a td broke the row's lines); the flex lives inside */
.sf-sd-deck { display: table-cell; min-width: 240px; }
.sf-sd-deckin { display: flex; align-items: center; gap: 10px; }
@media (max-width: 760px) { .sf-sd-table td.sf-sd-deck { display: block; } }

/* ===== /decks/champ — เด็คแชมป์ tab (2026-10-17): one card per game the deck bots pull lists for ===== */
.sf-dz-tab.is-champ .sf-dz-ic { color: #ffd24a; }
.sf-dc-lead { margin: 0 0 16px; color: var(--v2-muted, #aaa0ba); font-size: 14px; }
.sf-dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.sf-dc-card { --dg-tint: #7c5cff; --cut: 14px; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--dg-tint) 40%, transparent); border-top: 3px solid var(--dg-tint); border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dg-tint) 12%, transparent), transparent 140px), var(--v2-surface, #1a1028); }
.sf-dc-head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.sf-dc-logo { display: grid; place-items: center; height: 76px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 16px #0006; }
.sf-dc-logo.has-bg { background: var(--dg-bg); }
.sf-dc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-dc-logo b { color: #111; font-size: 13px; text-align: center; }
.sf-dc-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-dc-title > b { color: var(--sf-heading, #fff); font-size: 18px; line-height: 1.25; }
.sf-dc-title small { color: var(--v2-muted, #aaa0ba); font-size: 12px; }
.sf-dc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-dc-stats > span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #ffffff12; font-size: 12px; font-weight: 700; color: var(--v2-text, #eee); }
.sf-dc-stats .icon { width: 13px; height: 13px; }
.sf-dc-stats .is-gold { background: #ffd24a26; color: #ffd24a; }
.sf-dc-stats .is-off { background: #21e6ff1f; color: var(--sf-action, #21e6ff); }
.sf-dc-head:hover .sf-dc-title > b { color: var(--sf-action, #00ffff); }
.sf-dc-series { margin: 0; font-size: 13px; color: var(--v2-muted, #aaa0ba); }
.sf-dc-series b { color: var(--v2-text, #eee); }
.sf-dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sf-dc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--sf-border, #ffffff1f); border-radius: 10px; background: #0b061466; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.sf-dc-row:hover, .sf-dc-row:focus-visible { border-color: var(--sf-action, #00ffff); background: #00f0ff0d; outline: none; }
.sf-dc-fan { position: relative; display: block; height: 62px; }
.sf-dc-fan img { position: absolute; top: 0; left: calc(var(--i) * 22px); width: 44px; height: 62px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 8px #000a; transform: rotate(calc((var(--i) - 1) * 5deg)); z-index: calc(3 - var(--i)); }
.sf-dc-noart { display: block; width: 44px; height: 62px; border-radius: 4px; background: #ffffff10; }
.sf-dc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-dc-info .sf-sd-place { font-size: 11px; }
.sf-dc-info b { color: var(--v2-text, #eee); font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dc-info small { color: var(--v2-muted, #aaa0ba); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dc-go { align-self: stretch; justify-content: center; }
@media (max-width: 680px) {
  .sf-dc-head { grid-template-columns: 104px minmax(0, 1fr); }
  .sf-dc-logo { height: 62px; }
  .sf-dc-card { padding: 14px; }
}
/* เด็คแชมป์ cards the same height and their parts in line (owner 2026-10-17: "ทำไมไม่ทำให้เท่ากัน"): each card spans 4 rows of the
   grid as a subgrid — head · series · list · button — so a head that wraps its chips, or a short list, moves every card the same */
@supports (grid-template-rows: subgrid) {
  .sf-dc-grid { grid-auto-rows: auto; row-gap: 18px; }
  .sf-dc-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .sf-dc-list { flex: none; align-self: start; }
  .sf-dc-go { align-self: end; }
}
.sf-dc-series { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* /decks/game/{group}/deck/{id} — a pulled deck on its own page (decks/sample; owner 2026-10-17: popup → its own page, new tab) */
.sf-sdp-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; margin-bottom: 26px; padding: 22px;
  border: 1px solid var(--sf-border, #ffffff1a); border-top: 3px solid var(--dg-tint, var(--sf-action)); border-radius: 12px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--dg-tint, #21e6ff) 16%, transparent), transparent 55%), var(--v2-surface, #ffffff08); }
.sf-sdp-art img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 30px #000a; transform: rotate(-2deg); }
.sf-sdp-main h1 { margin: 6px 0 4px; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.sf-sdp-sub { margin: 0 0 8px; color: var(--v2-muted, #aaa0ba); }
.sf-sdp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.sf-sdp-chips .sf-sd-place { font-size: 13px; padding: 4px 12px; }
.sf-sdp-chip { padding: 4px 12px; border-radius: 999px; background: #ffffff12; font-size: 13px; font-weight: 700; }
.sf-sdp-chip.is-ok { background: #4be3a01f; color: #4be3a0; }
.sf-sdp-chip.is-bad { background: #ff6b811f; color: #ff6b81; }
.sf-sdp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; margin: 0 0 18px; }
.sf-sdp-facts dt { color: var(--v2-muted, #aaa0ba); font-size: 12px; }
.sf-sdp-facts dd { margin: 2px 0 0; color: var(--v2-text); font-size: 14px; overflow-wrap: anywhere; }
.sf-sdp-facts .icon { width: 13px; height: 13px; vertical-align: -1px; }
.sf-sdp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-sdp-acts .icon { width: 16px; height: 16px; }
.sf-sd-table tbody tr:not(.sf-sd-group) { cursor: pointer; }
@media (max-width: 760px) {
  .sf-sdp-hero { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .sf-sdp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-sdp-acts { grid-column: 1 / -1; } .sf-sdp-acts .button { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .sf-sdp-hero { grid-template-columns: minmax(0, 1fr); }
  .sf-sdp-art { width: 150px; margin: 0 auto; }
  .sf-sdp-main { text-align: left; }
}
/* a game's page: the way back at the end of the zone tab row (wider screens), above the band on phones */
.sf-dz-back { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--sf-border, #ffffff26);
  border-radius: 8px; color: var(--sf-action, #21e6ff); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-dz-back .icon { width: 15px; height: 15px; transition: transform .15s; }
.sf-dz-back:hover, .sf-dz-back:focus-visible { border-color: var(--sf-action, #21e6ff); background: #21e6ff12; }
.sf-dz-back:hover .icon { transform: translateX(-3px); }
.sf-gh-back { display: none; }
@media (max-width: 680px) { .sf-dz-back { display: none; } .sf-gh-back { display: inline-flex; } }
/* logo plates: a one-cell grid with fixed tracks, so a tall / square logo (Buddyfight) is held to the plate — with auto rows the
   picture's max-height never applied and it ran out of the plate (owner 2026-10-17: "logo เกมส์ ออกมา") */
.sf-gh-logo, .sf-dc-logo { box-sizing: border-box; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
.sf-gh-logo img, .sf-dc-logo img { width: 100%; height: 100%; object-fit: contain; }
/* the เด็คแชมป์ tab's gold trophy only while the tab is NOT lit — on the lit cyan tile it vanished (owner 2026-10-17: "มองไม่เห็นถ้วย") */
.sf-dz-tab.is-champ.is-on .sf-dz-ic { color: var(--sf-action-ink); }
/* sample decks: load on scroll */
.sf-sd-loading { display: none; align-items: center; gap: 10px; min-height: 44px; color: var(--v2-muted, #aaa0ba); font-size: 14px; }
.sf-sd-loading i { width: 18px; height: 18px; border: 2px solid #21e6ff40; border-top-color: var(--sf-action, #21e6ff); border-radius: 50%; animation: sf-sd-spin .8s linear infinite; }
@keyframes sf-sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-sd-loading i { animation: none; } }
/* skeleton rows under the table while the next rows load */
.sf-sd-table tbody tr.sf-sd-skel { display: none; cursor: default; }
.sf-sd-table tbody tr.sf-sd-skel.is-on { display: table-row; }
.sf-sd-skel-row { display: grid; grid-template-columns: 50px 2.2fr 1fr 1.3fr .8fr 2fr; gap: 18px; align-items: center; padding: 6px 0; }
.sf-sd-skel-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ffffff0d, #ffffff1f, #ffffff0d); background-size: 200% 100%; animation: sf-sd-shimmer 1.1s linear infinite; }
.sf-sd-skel-row i.is-pic { height: 70px; border-radius: 4px; }
.sf-sd-skel-row i.is-name { height: 16px; }
.sf-sd-skel-row i.is-sm { width: 60%; }
@keyframes sf-sd-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sf-sd-skel-row i { animation: none; } }
@media (max-width: 760px) {
  .sf-sd-table tbody tr.sf-sd-skel.is-on { display: block; margin-bottom: 10px; padding: 10px; border: 1px solid var(--sf-border, #ffffff1a); border-radius: 10px; }
  .sf-sd-table tbody tr.sf-sd-skel td { display: block; padding: 0; } .sf-sd-table tbody tr.sf-sd-skel td::before { content: none; }
  .sf-sd-skel-row { grid-template-columns: 50px 1fr; } .sf-sd-skel-row i:nth-child(n+3) { display: none; }
}