/* Tournaments — /tournaments (schedule rows, pages.css .sf-event*) and
 * /tournaments/{uuid}. last13's cover + shop, facts, registration panel,
 * prizes, confirmed players (podium) and bracket (live round, rounds,
 * standings) in the theme-v2 tokens. Every class is sf-tn-*. Markup:
 * storefront/tournaments/*. Behaviour: js/pkg-tournaments.js. */

/* The heading (trophy + "ตารางแข่ง" charging with comic lightning) is the shared kit:
   storefront/partials/charge-head + pkg-fx-heads.css. */

/* ---------- Schedule row: stretched title link + the organiser pill ---------- */
.sf-tn-link { color: inherit; }
.sf-tn-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sf-tn-link:focus-visible { outline: none; color: var(--v2-accent); }
.sf-tn-row:focus-within { border-color: #00f0ff66; }
/* above the stretched link, only as wide as the pill (the rest of its line still opens the event) */
.sf-tn-shop { position: relative; z-index: 2; align-self: flex-start; max-width: 100%; min-width: 0; }
.sf-tn-row .sf-tn-shop { margin: 2px 0 4px; }

/* ---------- Detail /tournaments/{uuid} (redesigned 2026-10-06, owner: "ดูไม่ค่อยสวยเท่าไร") ----------
   storefront/tournaments/show. One hero band (copy left, cover / logo plate right, the four
   deciding facts in a strip under it), then the main column beside the aside (register + venue).
   Pre-redesign CSS: ai_test/out/backup-20261006-tn-detail/. */
.sf-tn-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.sf-tn-top .sf-crumbs { margin-bottom: 0; }
.sf-tnd [hidden] { display: none !important; }

/* hero band: blurred cover behind (or the game's colour + stripes), notched like the slide */
.sf-tnd-hero { --game: var(--v2-accent); --tn-cut: 26px; --tn-edge: #ffffff1f; position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 80% 35%, color-mix(in srgb, var(--game) 30%, transparent), transparent 62%), linear-gradient(135deg, #1c1230, #0a0014);
  border: 1px solid var(--tn-edge); border-bottom: 3px solid var(--game);
  clip-path: polygon(0 0, calc(100% - var(--tn-cut)) 0, 100% var(--tn-cut), 100% 100%, var(--tn-cut) 100%, 0 calc(100% - var(--tn-cut))); }
.sf-tnd-hero:not(.has-cover) { background:
    repeating-linear-gradient(115deg, #ffffff0a 0 1px, transparent 1px 16px),
    radial-gradient(110% 140% at 85% 25%, color-mix(in srgb, var(--game) 55%, transparent), transparent 62%),
    linear-gradient(120deg, #140a26 35%, color-mix(in srgb, var(--game) 32%, #140a26)); }
/* The cut corners keep their edge (detail hero + slide): clip-path cuts the border
   off along each diagonal, so ::before paints it back ABOVE the pictures —
   the hairline top-right, the game bar turning up bottom-left at the bottom
   border's 3px. inset = the border box (1px sides, 3px bottom). */
.sf-tnd-hero::before, .sf-tn-slide::before { content: ''; position: absolute; inset: -1px -1px -3px; z-index: 3; pointer-events: none; color: var(--tn-edge);
  background: var(--sf-diag) right top / var(--tn-cut) var(--tn-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 3px), var(--game) calc(50% - 3px), var(--game) calc(50% + 3px), transparent calc(50% + 3px)) left bottom / var(--tn-cut) var(--tn-cut) no-repeat; }
.sf-tnd-hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sf-tnd-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(30px) saturate(1.35); opacity: .5; }
.sf-tnd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0a0014f2 0%, #0a0014c4 46%, #0a001433 100%); }
.sf-tnd-hero:not(.has-cover)::after { background: linear-gradient(90deg, #0a0014d9 0%, #0a001466 55%, transparent 100%); }
.sf-tnd-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; gap: 32px; padding: 34px 44px 30px; }
.sf-tnd-copy { min-width: 0; display: grid; gap: 14px; justify-items: start; }
.sf-tnd-tags span { padding: 3px 10px; font-size: 12px; }
.sf-tnd-tags .is-live, .sf-tnd-fv b.is-live { display: inline-flex; align-items: center; gap: 7px; color: #3ee8a0; }
.sf-tnd-tags .is-live { border-color: #3ee8a088; background: #3ee8a014; }
.sf-tnd-tags .is-live i, .sf-tnd-fv b.is-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: sf-tn-blink 1.4s ease-in-out infinite; }
.sf-tnd-title { margin: 0; font: 800 clamp(26px, 3vw, 42px)/1.22 'Noto Sans Thai', var(--v2-display); color: var(--sf-heading); overflow-wrap: anywhere; }
.sf-tnd .sf-tn-host { margin: 0; max-width: 100%; }
.sf-tnd-where { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #d9d0e8; }
.sf-tnd-where .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--sf-action); }
.sf-tnd-cta { margin-top: 4px; }
.sf-tnd-cta .icon { width: 16px; height: 16px; }
.sf-tnd-cta-mine { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--sf-price); background: #ffd24a14; border: 1px solid #ffd24a55; }
.sf-tnd-cta-mine.is-ok { color: #3ee8a0; background: #3ee8a014; border-color: #3ee8a066; }
.sf-tnd-cta-mine .icon { width: 15px; height: 15px; }
.sf-tnd-cta-mine:hover { color: var(--sf-text); }

/* the cover (click = lightbox) or the game logo on a white plate */
.sf-tnd-art { display: grid; place-items: center; min-width: 0; }
.sf-tnd-cover { position: relative; display: block; max-width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.sf-tnd-cover img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; border: 1px solid #ffffff2e; box-shadow: 0 22px 44px #000b; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sf-tnd-zoom { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: #0a0014cc; border: 1px solid #ffffff40; opacity: 0; transition: opacity .2s; }
.sf-tnd-zoom .icon { width: 18px; height: 18px; }
.sf-tnd-cover:focus-visible { outline: 2px solid var(--sf-action); outline-offset: 4px; }
.sf-tnd-cover:focus-visible .sf-tnd-zoom { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sf-tnd-cover:hover img { transform: scale(1.02); }
  .sf-tnd-cover:hover .sf-tnd-zoom { opacity: 1; }
}
.sf-tnd-plate { display: grid; place-items: center; width: min(100%, 380px); min-height: 170px; padding: 28px 36px; background: linear-gradient(160deg, #ffffff, #ece6f7);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.sf-tnd-plate img { max-width: 100%; max-height: 120px; object-fit: contain; }
.sf-tnd-plate .sf-logo-text { font: 900 26px var(--v2-display); color: #1c1230; text-align: center; }

/* the four facts: lines between the cells are the 1px gaps over the strip's own colour */
.sf-tnd-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #ffffff17; border-top: 1px solid #ffffff17; }
.sf-tnd-fact { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 24px; background: #0a0014d9; }
.sf-tnd-fact > .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--sf-action); filter: drop-shadow(0 0 6px #00f0ff66); }
.sf-tnd-fv { display: grid; gap: 3px; min-width: 0; }
.sf-tnd-fv small { font-size: 11.5px; color: var(--sf-muted); }
.sf-tnd-fv b { font: 700 16px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-text); }
.sf-tnd-fv b .sf-mono { font: 700 20px/1.1 var(--v2-mono); }
.sf-tnd-of { font: 600 15px var(--v2-mono); color: var(--sf-muted); }
.sf-tnd-fv b.is-fee { font: 700 20px/1.2 var(--v2-mono); color: var(--sf-price); }
.sf-tnd-fv b.is-cd { font: 700 19px/1.2 var(--v2-mono); letter-spacing: .5px; color: var(--sf-action); }
.sf-tnd-fv b.is-cd.is-soon { color: var(--sf-promo); }
.sf-tnd-fv em { font-style: normal; font-size: 12.5px; color: #cfc4df; }
.sf-tnd-fv em.is-hot { color: #ff5c9d; font-weight: 700; }
.sf-tnd-fv .seat-bar { width: 150px; max-width: 100%; margin: 3px 0 1px; }
.sf-tnd-stub { flex: 0 0 54px; display: grid; justify-items: center; padding: 8px 0 7px; color: #140a26; background: linear-gradient(var(--game) 0 4px, #fff 4px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.sf-tnd-stub b { font: 900 25px/1 var(--v2-display); }
.sf-tnd-stub small { margin-top: 3px; font-size: 11px; font-weight: 700; color: #6d5a8a; }

/* body: main column + the aside (register, venue) */
.sf-tnd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "main aside"; align-items: start; gap: 22px; margin-top: 22px; }
.sf-tnd-main { grid-area: main; display: grid; gap: 18px; min-width: 0; }
.sf-tnd-aside { grid-area: aside; display: grid; gap: 18px; min-width: 0; }
.sf-tnd-main > .sf-panel, .sf-tnd-aside > .sf-panel { margin: 0; }

.sf-tn-reg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sf-tn-reg-head h2 { margin-bottom: 0; }
.sf-tnd-closein { margin: 0; font-size: 11.5px; color: var(--sf-muted); text-align: right; }
.sf-tnd-closein b { display: block; font: 700 15px/1.3 var(--v2-mono); color: var(--sf-action); }
.sf-tnd-closein b.is-soon { color: var(--sf-promo); }
.sf-tn-reg > .button { width: 100%; justify-content: center; }
.sf-tn-reg .sf-alert { margin-top: 0; }
.sf-tn-credit { padding: 12px 14px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-tn-credit .is-short dt, .sf-tn-credit .is-short dd { color: #ff5c9d; }
.sf-tn-reg .sf-hint { margin: -4px 0 0; font-size: 12px; color: var(--v2-muted); text-align: center; }
.sf-tnd-notes { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sf-border); font-size: 12.5px; line-height: 1.5; color: #cfc4df; }
.sf-tnd-notes li { display: flex; align-items: flex-start; gap: 9px; }
.sf-tnd-notes .icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--sf-action); }

.sf-tnd-venue-name { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--sf-text); }
.sf-tnd-venue .sf-note { margin-top: 2px; }
.sf-tnd-map { width: 100%; justify-content: center; margin-top: 16px; }
.sf-tnd-map .icon { width: 16px; height: 16px; }

/* prizes: one card per line; the seller's own 1 / 2 / 3 get gold / silver / bronze, 1 takes the row */
.sf-tnd-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sf-tnd-prizes li { --pz: var(--sf-code); display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pz) 10%, transparent), transparent 80%);
  border: 1px solid color-mix(in srgb, var(--pz) 28%, transparent); border-left: 3px solid var(--pz); }
.sf-tnd-prizes .is-tier-1 { --pz: #ffcf00; grid-column: 1 / -1; padding: 16px 18px; }
.sf-tnd-prizes .is-tier-2 { --pz: #d7dde8; }
.sf-tnd-prizes .is-tier-3 { --pz: #e0915a; }
.sf-tnd-medal { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--pz); background: color-mix(in srgb, var(--pz) 15%, transparent); border: 1px solid color-mix(in srgb, var(--pz) 45%, transparent); border-radius: 50%; }
.sf-tnd-medal .icon { width: 19px; height: 19px; }
.sf-tnd-prizes .is-tier-1 .sf-tnd-medal { flex-basis: 48px; width: 48px; height: 48px; box-shadow: 0 0 18px #ffcf0040; }
.sf-tnd-prizes .is-tier-1 .sf-tnd-medal .icon { width: 24px; height: 24px; }
.sf-tnd-prize-text { display: grid; gap: 2px; min-width: 0; }
.sf-tnd-prize-text b { font-size: 12px; font-weight: 800; color: var(--pz); }
.sf-tnd-prize-text span { font-size: 14px; line-height: 1.5; color: var(--sf-text); overflow-wrap: anywhere; }
.sf-tnd-prizes .is-tier-1 .sf-tnd-prize-text b { font-size: 13px; }
.sf-tnd-prizes .is-tier-1 .sf-tnd-prize-text span { font-size: 16px; font-weight: 700; }

/* format (what the bracket does) above the seller's rules */
.sf-tnd-format { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: #ffcf000a; border: 1px solid #ffcf0033; }
.sf-tnd-format:last-child { margin-bottom: 0; }
.sf-tnd-format > .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #ffcf00; }
.sf-tnd-format span { display: grid; gap: 2px; min-width: 0; }
.sf-tnd-format small { font-size: 11.5px; color: var(--sf-muted); }
.sf-tnd-format b { font-size: 14px; color: var(--sf-text); }
.sf-tnd-format em { font-style: normal; font-size: 12.5px; color: #cfc4df; }
.sf-tn-desc { white-space: pre-line; font-size: 14px; }

@media (max-width: 1180px) {
  .sf-tnd-fact { padding: 16px 16px; gap: 12px; }
}
@media (max-width: 1080px) {
  .sf-tnd-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main"; }
  .sf-tnd-cta, .sf-tnd-cta-mine { display: none; }
}
@media (max-width: 900px) {
  .sf-tnd-hero-main { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 22px 24px; }
  .sf-tnd-art { order: -1; }
  .sf-tnd-cover img { max-height: 240px; }
  .sf-tnd-plate { min-height: 0; padding: 20px 28px; }
  .sf-tnd-plate img { max-height: 84px; }
  .sf-tnd-hero::after { background: linear-gradient(180deg, #0a001455 0%, #0a0014d9 45%, #0a0014f2 100%); }
  .sf-tnd-hero:not(.has-cover)::after { background: linear-gradient(180deg, transparent 0%, #0a0014b3 50%, #0a0014d9 100%); }
  .sf-tnd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .sf-tnd-hero { --tn-cut: 18px; }
  .sf-tnd-hero-main { gap: 16px; padding: 14px 14px 18px; }
  .sf-tnd-copy { gap: 11px; }
  .sf-tnd-title { font-size: 24px; }
  .sf-tnd-cover img { max-height: 180px; }
  .sf-tnd-plate { width: auto; max-width: 100%; padding: 14px 24px; }
  .sf-tnd-plate img { max-height: 54px; }
  .sf-tnd-tags span { padding: 2px 8px; font-size: 11px; }
  .sf-tnd-fact { gap: 10px; padding: 13px 12px; align-items: flex-start; }
  .sf-tnd-fact > .icon { flex-basis: 18px; width: 18px; height: 18px; margin-top: 1px; }
  .sf-tnd-fv b { font-size: 14px; }
  .sf-tnd-fv b .sf-mono, .sf-tnd-fv b.is-fee { font-size: 17px; }
  .sf-tnd-fv b.is-cd { font-size: 15px; }
  .sf-tnd-fv em { font-size: 11.5px; }
  .sf-tnd-stub { flex-basis: 44px; padding: 6px 0 5px; }
  .sf-tnd-stub b { font-size: 20px; }
  .sf-tnd-prizes { grid-template-columns: minmax(0, 1fr); }
}
.effects-off .sf-tnd-tags .is-live i, .effects-off .sf-tnd-fv b.is-live i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-tnd-tags .is-live i, .sf-tnd-fv b.is-live i { animation: none; }
  .sf-tnd-cover img { transition: none; }
}

/* ---------- Players + bracket ---------- */
.sf-tn-section { margin-top: 22px; }
.sf-tn-section h2 { flex-wrap: wrap; }
.sf-tn-count, .sf-tn-state { padding: 3px 9px; font: 700 11px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: 0; text-transform: none; color: var(--v2-muted); border: 1px solid #ffffff2e; }
.sf-tn-state.is-live { color: #3ee8a0; border-color: #3ee8a088; }
.sf-tn-empty { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 13px; color: var(--v2-muted); border: 1px dashed #ffffff24; }
.sf-tn-empty .icon { width: 18px; height: 18px; }
.sf-tn-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sf-tn-players li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; background: #ffffff05; border: 1px solid var(--v2-line); }
.sf-tn-players li.is-me { border-color: #00f0ff66; }
.sf-tn-players b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.sf-tn-ava { --hue: 190; flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; font: 800 13px var(--v2-display); line-height: 1;
  color: hsl(var(--hue) 90% 80%); background: hsl(var(--hue) 45% 22%); border: 1px solid hsl(var(--hue) 65% 50% / .5); }
/* a player's own avatar (tournaments/_face); no picture = their initial on a colour from the name; the Bot = a dice */
.sf-tn-ava.has-img { background: var(--v2-surface-2); border-color: #ffffff33; }
.sf-tn-ava img { width: 100%; height: 100%; object-fit: cover; }
.sf-tn-ava.is-bot { color: var(--sf-muted); background: #ffffff0a; border: 1px dashed #ffffff3d; }
.sf-tn-ava .icon, .sf-tn-p .sf-tn-ava .icon { width: 58%; height: 58%; color: currentColor; }
.sf-tn-no { font: 700 12px var(--v2-mono); color: var(--v2-muted); }
.sf-tn-crown { display: inline-flex; align-items: center; gap: 3px; font: 800 12px var(--v2-mono); }
.sf-tn-crown .icon { width: 16px; height: 16px; }
.sf-tn-players .is-podium-1 { --pod: #ffcf00; }
.sf-tn-players .is-podium-2 { --pod: #d7dde8; }
.sf-tn-players .is-podium-3 { --pod: #e0915a; }
.sf-tn-players li[class*="is-podium-"] { border-color: color-mix(in srgb, var(--pod) 55%, transparent); background: color-mix(in srgb, var(--pod) 7%, transparent); }
.sf-tn-players li[class*="is-podium-"] .sf-tn-crown { color: var(--pod); }

.sf-tn-now { margin-bottom: 18px; padding: 14px; border: 1px solid #3ee8a066; background: #3ee8a00a; }
.sf-tn-now-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 800 12px var(--v2-mono); letter-spacing: 1px; color: #3ee8a0; }
.sf-tn-now-head i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: sf-tn-blink 1.4s ease-in-out infinite; }
@keyframes sf-tn-blink { 50% { opacity: .3; } }
.sf-tn-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sf-tn-round { padding: 12px; border: 1px solid var(--v2-line); }
.sf-tn-round.is-done { opacity: .85; }
.sf-tn-round-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--v2-muted); }
.sf-tn-round-head .icon { width: 14px; height: 14px; color: #3ee8a0; }
.sf-tn-matches { display: grid; gap: 6px; }
.sf-tn-matches.is-live { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* The table number is its own labelled cell ("โต๊ะ" over the number) with a divider after it (owner 2026-10-06:
   "น่าจะมีเส้นแบ่งหน่อยจะได้รู้ว่าคืออะไร" — a bare 1–4 in front of the pairing read as nothing). The row has no
   left / vertical padding so that cell (stretch) runs the full height of the card. */
.sf-tn-match { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 0; font-size: 13px; background: #ffffff05; border: 1px solid #ffffff12; }
.sf-tn-matches.is-live .sf-tn-match { min-height: 50px; padding-right: 10px; background: var(--v2-surface); }
.sf-tn-table-no { align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 1px; padding: 5px 0; background: #ffffff08; border-right: 1px solid #ffffff21; }
.sf-tn-table-no small { font: 600 9.5px/1.2 'Noto Sans Thai', sans-serif; color: var(--sf-muted); }
.sf-tn-table-no b { font: 700 14px/1.1 var(--v2-mono); color: var(--sf-text); }
.sf-tn-matches.is-live .sf-tn-table-no { background: #3ee8a00d; border-right-color: #3ee8a040; }
.sf-tn-matches.is-live .sf-tn-table-no b { color: #3ee8a0; }
.sf-tn-p { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; color: var(--v2-muted); }
.sf-tn-p .sf-tn-ava { flex-basis: 26px; width: 26px; height: 26px; font-size: 11px; }
.sf-tn-matches.is-live .sf-tn-p .sf-tn-ava { flex-basis: 30px; width: 30px; height: 30px; font-size: 12px; }
.sf-tn-p.is-win .sf-tn-ava { border: 1px solid #ffcf00; box-shadow: 0 0 0 2px #ffcf0033, 0 0 10px #ffcf0040; }
.sf-tn-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.sf-tn-who .sf-tn-ava { flex-basis: 30px; width: 30px; height: 30px; font-size: 12px; }
.sf-tn-who-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-tn-p > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-tn-p.is-end { justify-content: flex-start; }
.sf-tn-p.is-win { color: var(--v2-text); font-weight: 800; }
.sf-tn-p .icon { flex: none; width: 12px; height: 12px; color: #ffcf00; }
.sf-tn-score { padding: 3px 8px; font: 700 12px var(--v2-mono); color: var(--v2-text); background: #ffffff10; white-space: nowrap; }
.sf-tn-score.is-vs { color: #3ee8a0; background: #3ee8a01a; }
.sf-tn-score.is-bye { color: var(--v2-muted); font-family: 'Noto Sans Thai', sans-serif; }
.sf-tn-sub { margin: 22px 0 10px; font: 800 13px var(--v2-display); letter-spacing: .5px; text-transform: uppercase; }
.sf-tn-table { overflow-x: auto; }
.sf-tn-table tr.is-dropped td { opacity: .55; }

/* Standings (owner 2026-10-06: "ทำหัวตารางให้สวยกว่านี้ ช่วยทำให้รู้ว่าอันไหนหัวตาราง"). The shared .sf-table
   head is 10px grey mono — it read as one more row — and its numeric heads sat left while the numbers sit
   right. Here: a raised header band with a magenta rule under it, white labels in the Thai face, every
   numeric head right-aligned over its column, W·D·L keyed by colour dots, the points column tinted. */
.sf-tn-sub-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; margin: 26px 0 12px; }
.sf-tn-sub-row .sf-tn-sub { display: flex; align-items: center; gap: 10px; margin: 0; }
.sf-tn-sub-row .sf-tn-sub::before { content: ''; flex: none; width: 4px; height: 16px; background: var(--sf-heading-mark); }
.sf-tn-sub-note { font-size: 11.5px; color: var(--sf-muted); }
.sf-tn-table:has(.sf-tn-standings) { border: 1px solid var(--sf-border); }
.sf-tn-standings { font-size: 14px; }
.sf-tn-standings thead th { padding: 12px 14px; font: 700 13px/1.3 'Noto Sans Thai', sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--sf-heading); background: linear-gradient(180deg, #2a1d45, #211636); border-bottom: 2px solid var(--sf-heading-mark); }
.sf-tn-standings th.num { text-align: right; }
.sf-tn-standings .is-rank { width: 64px; text-align: center; }
.sf-tn-standings .num { width: 92px; }
.sf-tn-standings th i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; background: var(--dot); }
.sf-tn-standings .is-w { --dot: #3ee8a0; }
.sf-tn-standings .is-d { --dot: #ffcf00; }
.sf-tn-standings .is-l { --dot: #ff5c9d; }
.sf-tn-standings .is-pts { background: #00f0ff0d; }
.sf-tn-standings thead th.is-pts { background: linear-gradient(180deg, #213152, #1a2440); color: var(--sf-action); }
.sf-tn-standings tbody td { padding: 12px 14px; }
.sf-tn-standings tbody tr:first-child td { color: var(--sf-text); } /* the shared table paints its first row cyan;
   the cell colours below repeat its weight (tbody tr > td) and come later, so they win on that row too */
.sf-tn-standings tbody tr:nth-child(even) td:not(.is-pts) { background: #ffffff04; }
.sf-tn-standings tbody tr:hover td { background-color: #ffffff0a; }
.sf-tn-standings tbody tr:last-child td { border-bottom: 0; }
.sf-tn-standings tbody tr > td.is-name { font-weight: 600; color: var(--sf-text); }
.sf-tn-standings .sf-tn-who-name .icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: #ffcf00; }
.sf-tn-standings td.is-pts b { font: 700 16px var(--v2-mono); color: var(--sf-text); }
.sf-tn-standings tbody tr > td.is-w { color: #3ee8a0; }
.sf-tn-standings tbody tr > td.is-d { color: #ffcf00; }
.sf-tn-standings tbody tr > td.is-l { color: #ff8fb8; }
.sf-tn-standings tbody tr > td.is-zero { color: var(--sf-muted); opacity: .6; }
.sf-tn-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; font: 700 13px var(--v2-mono); color: var(--sf-muted); border: 1px solid #ffffff24; }
.sf-tn-standings .is-top-1 { --pod: #ffcf00; }
.sf-tn-standings .is-top-2 { --pod: #d7dde8; }
.sf-tn-standings .is-top-3 { --pod: #e0915a; }
.sf-tn-standings tr[class*="is-top-"] .sf-tn-rank { color: #140a26; background: var(--pod); border-color: var(--pod); box-shadow: 0 0 12px color-mix(in srgb, var(--pod) 35%, transparent); }
@media (max-width: 680px) {
  .sf-tn-sub-row { margin-top: 20px; }
  .sf-tn-standings { font-size: 13px; }
  .sf-tn-standings thead th { padding: 10px 8px; font-size: 12px; }
  .sf-tn-standings tbody td { padding: 10px 8px; }
  .sf-tn-standings .is-rank { width: 42px; }
  .sf-tn-standings .num { width: 50px; }
  .sf-tn-standings th i { display: none; }
  .sf-tn-standings td.is-pts b { font-size: 15px; }
  .sf-tn-rank { min-width: 26px; height: 26px; font-size: 12px; }
}

.effects-off .sf-tn-now-head i { animation: none; }
@media (prefers-reduced-motion: reduce) { .sf-tn-now-head i { animation: none; } }
@media (max-width: 680px) {
  .sf-tn-players { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sf-tn-players li { padding: 6px 8px 6px 6px; gap: 8px; }
  .sf-tn-ava { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; }
  .sf-tn-p { gap: 5px; }
  .sf-tn-p .sf-tn-ava, .sf-tn-matches.is-live .sf-tn-p .sf-tn-ava { flex-basis: 24px; width: 24px; height: 24px; font-size: 10px; }
  .sf-tn-who { gap: 8px; }
  .sf-tn-who .sf-tn-ava { flex-basis: 26px; width: 26px; height: 26px; font-size: 11px; }
  .sf-tn-rounds, .sf-tn-matches.is-live { grid-template-columns: minmax(0, 1fr); }
  .sf-tn-match { grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; padding: 0 6px 0 0; font-size: 12px; }
  .sf-tn-matches.is-live .sf-tn-match { min-height: 46px; padding-right: 6px; }
  .sf-tn-table-no b { font-size: 13px; }
}

/* ---------- Featured slide (top of /tournaments) ----------
   storefront/tournaments/_slides + js/pkg-tournaments.js. One slide per view,
   scroll-snap track (a finger swipes it), copy on the left over a blurred copy
   of the cover, the cover itself framed on the right (any aspect ratio fits).
   No cover → the game's logo on the light plate the schedule rows use. The
   autoplay clock IS the timer bar's CSS animation (compositor-driven, paused
   by .is-paused); no animation → no autoplay (reduced motion, effects off). */
.sf-tn-slides { position: relative; margin: 4px 0 26px; }
.sf-tn-slides-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-tn-slides-track::-webkit-scrollbar { display: none; }
.sf-tn-slide { --game: var(--v2-accent); --tn-cut: 26px; --tn-edge: #ffffff1f; position: relative; isolation: isolate; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; gap: 30px; min-height: 340px; padding: 34px 76px 34px 44px; overflow: hidden; background: radial-gradient(circle at 78% 45%, color-mix(in srgb, var(--game) 30%, transparent), transparent 64%), linear-gradient(135deg, #1c1230, #0a0014); border: 1px solid var(--tn-edge); border-bottom: 3px solid var(--game); clip-path: polygon(0 0, calc(100% - var(--tn-cut)) 0, 100% var(--tn-cut), 100% 100%, var(--tn-cut) 100%, 0 calc(100% - var(--tn-cut))); }
.sf-tn-slide-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sf-tn-slide-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(28px) saturate(1.35); opacity: .42; }
.sf-tn-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0a0014f2 0%, #0a0014cc 42%, #0a001433 100%); }
.sf-tn-slide-copy { min-width: 0; display: grid; gap: 14px; justify-items: start; }
.sf-tn-slide-title { margin: 0; font: 800 clamp(22px, 2.5vw, 34px)/1.25 'Noto Sans Thai', var(--v2-display); color: var(--v2-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-tn-slide-link { color: inherit; }
.sf-tn-slide-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sf-tn-slide-link:focus-visible { outline: none; color: var(--v2-accent); }
.sf-tn-slide:hover .sf-tn-slide-title { color: var(--v2-accent); }
.sf-tn-slide-meta { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #d9d0e8; }
.sf-tn-slide-meta li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-tn-slide-meta .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--v2-accent); }
.sf-tn-slide-meta .is-prize { color: #ffe27a; }
.sf-tn-slide-meta .is-prize .icon { color: currentColor; }
.sf-tn-slide-stats { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 2px 0 0; }
.sf-tn-slide-stats div { display: grid; gap: 3px; min-width: 96px; }
.sf-tn-slide-stats dt { font-size: 11px; color: var(--v2-muted); }
.sf-tn-slide-stats dd { margin: 0; font: 700 20px/1.2 var(--v2-mono); color: var(--v2-text); white-space: nowrap; }
.sf-tn-slide-stats dd.is-fee { color: var(--sf-price, #ffd24a); }
.sf-tn-slide-stats dd[data-countdown] { color: var(--v2-accent); }
.sf-tn-slide-stats .seat-bar { width: 120px; margin-top: 3px; }
.sf-tn-slide-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.sf-tn-slide-actions .button .icon { width: 16px; height: 16px; transition: transform .2s; }
.sf-tn-slide-actions .button:hover .icon { transform: translateX(4px); }
.sf-tn-slide-art { position: relative; display: grid; place-items: center; min-width: 0; min-height: 240px; }
.sf-tn-slide-art img { max-width: 100%; max-height: 272px; object-fit: contain; border: 1px solid #ffffff2e; box-shadow: 0 22px 44px #000b; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.sf-tn-slide:not(.has-cover) .sf-tn-slide-art { align-self: center; padding: 30px; background: linear-gradient(160deg, #ffffff, #ece6f7); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.sf-tn-slide-art img.is-logo { max-height: 150px; border: 0; box-shadow: none; }
.sf-tn-slide-art .sf-logo-text { font: 900 26px var(--v2-display); color: #1c1230; text-align: center; }
.sf-tn-slide:not(.is-active) .sf-tn-slide-art img { transform: scale(.94) rotate(-1.5deg); opacity: .75; }
.sf-tn-slides-arrow { position: absolute; top: calc(50% - 40px); z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--v2-text); background: #0a0014cc; border: 1px solid #ffffff33; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sf-tn-slides-arrow .icon { width: 18px; height: 18px; }
.sf-tn-slides-arrow:hover, .sf-tn-slides-arrow:focus-visible { color: var(--v2-accent); border-color: #00f0ff88; background: #0a0014f2; }
.sf-tn-slides-arrow.is-prev { left: 10px; }
.sf-tn-slides-arrow.is-next { right: 10px; }
.sf-tn-slides-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.sf-tn-slides-dots { display: flex; gap: 6px; }
.sf-tn-slides-dots button { width: 22px; height: 6px; padding: 0; background: #ffffff2e; border: 0; cursor: pointer; transition: width .25s, background .25s; }
.sf-tn-slides-dots button:hover { background: #ffffff66; }
.sf-tn-slides-dots button[aria-current="true"] { width: 40px; background: var(--v2-accent); box-shadow: 0 0 10px #00f0ff88; }
.sf-tn-slides-timer { width: 90px; height: 2px; background: #ffffff1f; overflow: hidden; }
.sf-tn-slides-timer i { display: block; height: 100%; background: var(--v2-accent); transform: scaleX(0); transform-origin: left; }
.sf-tn-slides-timer i.is-run { animation: sf-tn-timer 6s linear forwards; }
.sf-tn-slides.is-paused .sf-tn-slides-timer i { animation-play-state: paused; opacity: .45; }
@keyframes sf-tn-timer { to { transform: scaleX(1); } }
.effects-off .sf-tn-slides-timer, .effects-off .sf-tn-slide-art img { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-tn-slides-timer { display: none; }
  .sf-tn-slide-art img { transition: none; }
}
@media (max-width: 900px) {
  .sf-tn-slide { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding: 22px 22px 24px; align-items: start; }
  .sf-tn-slide-art { order: -1; min-height: 0; }
  .sf-tn-slide-art img { max-height: 190px; }
  .sf-tn-slide:not(.has-cover) .sf-tn-slide-art { padding: 18px; }
  .sf-tn-slide-art img.is-logo { max-height: 90px; }
  .sf-tn-slide::after { background: linear-gradient(180deg, #0a001466 0%, #0a0014d9 40%, #0a0014f2 100%); }
  .sf-tn-slides-arrow { top: 120px; }
}
/* Phone: the whole slide (button included) must fit one screen under the
   header — format and prize wait for the detail page. */
@media (max-width: 680px) {
  .sf-tn-slides-arrow { display: none; }
  .sf-tn-slide { gap: 12px; padding: 14px 14px 16px; }
  .sf-tn-slide-copy { gap: 10px; }
  .sf-tn-slide-art img { max-height: 132px; }
  .sf-tn-slide-title { font-size: 19px; }
  .sf-tn-slide-meta { gap: 4px; font-size: 13px; }
  .sf-tn-slide-meta li:nth-child(n + 3) { display: none; }
  .sf-tn-slide-stats { gap: 8px 18px; }
  .sf-tn-slide-stats div { min-width: 0; }
  .sf-tn-slide-stats dd { font-size: 15px; }
  .sf-tn-slide-stats .seat-bar { width: 80px; }
  .sf-tn-slide-actions { gap: 10px; }
  .sf-tn-slide-actions .button { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Organiser logo, big enough to tell the shop at a glance ----------
   The "จัดโดย" pill (partials/shop-chip $byline, base look in pkg-cards.css
   .sf-cards-by*) is sized for tiles (36px). On the tournament pages the shop is
   the point (owner 2026-09-29: "โลโก้ควรใหญ่กว่านี้", "ตัวสไลด์ โลโก้ควรเห็นชัดเจน
   ว่าร้านไหน"): slide + detail 64px, schedule rows 48px, and the whole logo
   shows on its white disc (contain, not a cover crop that cut off its edges). */
.sf-tn-shop .sf-cards-by-logo img, .sf-tn-host .sf-cards-by-logo img { object-fit: contain; padding: 2px; }
.sf-tn-row .sf-tn-shop .sf-cards-by { gap: 12px; padding: 5px 16px 5px 5px; }
.sf-tn-row .sf-tn-shop .sf-cards-by-logo { flex-basis: 48px; width: 48px; height: 48px; }
.sf-tn-row .sf-tn-shop .sf-cards-by-text b { font-size: 15px; }
.sf-tn-slide .sf-tn-shop .sf-cards-by, .sf-tn-host .sf-cards-by { gap: 14px; padding: 7px 20px 7px 7px; }
.sf-tn-slide .sf-tn-shop .sf-cards-by-logo, .sf-tn-host .sf-cards-by-logo { flex-basis: 64px; width: 64px; height: 64px; box-shadow: 0 0 0 2px #ffffff4d, 0 6px 16px #0008; }
.sf-tn-slide .sf-tn-shop .sf-cards-chip-mono, .sf-tn-host .sf-cards-chip-mono { font-size: 26px; }
.sf-tn-slide .sf-tn-shop .sf-cards-by-text small, .sf-tn-host .sf-cards-by-text small { font-size: 12px; }
.sf-tn-slide .sf-tn-shop .sf-cards-by-text b, .sf-tn-host .sf-cards-by-text b { font-size: 18px; }
.sf-tn-slide .sf-tn-shop .sf-cards-by-ok, .sf-tn-host .sf-cards-by-ok { flex-basis: 18px; width: 18px; height: 18px; }
@media (max-width: 680px) {
  .sf-tn-row .sf-tn-shop .sf-cards-by-logo { flex-basis: 42px; width: 42px; height: 42px; }
  .sf-tn-slide .sf-tn-shop .sf-cards-by, .sf-tn-host .sf-cards-by { gap: 12px; padding: 6px 16px 6px 6px; }
  .sf-tn-slide .sf-tn-shop .sf-cards-by-logo, .sf-tn-host .sf-cards-by-logo { flex-basis: 52px; width: 52px; height: 52px; }
  .sf-tn-slide .sf-tn-shop .sf-cards-by-text b, .sf-tn-host .sf-cards-by-text b { font-size: 16px; }
}

/* ---------- Home "ตารางแข่ง" ticket: the event's own cover on top (2026-09-30, owner: "รูปงานแข่งดูไม่สวยเลย") ----------
   tournaments/_ticket. theme-v2.css drew a 128px WHITE panel with the game logo and never showed the
   cover. Now: the cover whole at the banner ratio sellers upload (5:2), a blurred copy behind for any
   other ratio (a square cover sits in the middle), a slow zoom + one light sweep on hover. No cover →
   the game's colour with the covers' diagonal stripes and the logo on a white chamfered plate. The
   date is a white calendar stub over the tear line, bottom-right (covers put the logo top-right). */
.ticket-top, .ticket-top.has-cover { display: block; height: auto; aspect-ratio: 5 / 2; padding: 0; background: #0c0717; }
.ticket-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.ticket-top .ticket-cover-bg { position: absolute; inset: -12%; width: 124%; max-width: none; height: 124%; max-height: none; object-fit: cover; filter: blur(18px) saturate(1.3) brightness(.55); }
.ticket-top .ticket-cover { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; object-fit: contain; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ticket-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #ffffff3d 50%, transparent 65%);
  transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
  .ticket:hover .ticket-cover { transform: scale(1.05); }
  .ticket:hover .ticket-media::after { transform: translateX(130%); transition: transform .9s ease-out; }
}
/* no cover: the game's colour, stripes, logo plate */
.ticket-top:not(.has-cover) .ticket-media {
  display: flex; align-items: center; padding: 0 22px;
  background:
    repeating-linear-gradient(115deg, #ffffff0b 0 1px, transparent 1px 16px),
    radial-gradient(120% 150% at 88% 20%, color-mix(in srgb, var(--game) 60%, transparent), transparent 62%),
    linear-gradient(120deg, #140a26 30%, color-mix(in srgb, var(--game) 38%, #140a26));
}
.ticket-plate {
  display: inline-grid; place-items: center; max-width: 64%; padding: 10px 16px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ticket-top .ticket-plate img { width: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
.ticket-plate .sf-logo-text { color: #140a26; font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .ticket:hover .ticket-plate { transform: scale(1.05); } }
/* the date: a white calendar stub pinned over the tear line (no border — a notched border loses its diagonal) */
.ticket-top .ticket-date {
  top: auto; bottom: -28px; right: 16px; transform: none; z-index: 3; width: 62px; padding: 9px 0 6px;
  background: linear-gradient(var(--game) 0 4px, #fff 4px); color: #140a26;
}
.ticket-top .ticket-date b { font-size: 28px; color: #140a26; }
.ticket-top .ticket-date span { margin-top: 3px; font-size: 11px; font-weight: 700; color: #6d5a8a; }
/* สัปดาห์นี้ / เกือบเต็ม: bottom-left, level with the stub — top-left covered the cover's own text */
.ticket-top .ticket-badge { z-index: 2; top: auto; bottom: 10px; left: 16px; box-shadow: 0 4px 12px #0009; }
@media (max-width: 680px) {
  .ticket-top .ticket-date { bottom: -24px; right: 12px; width: 54px; padding-top: 8px; }
  .ticket-top .ticket-date b { font-size: 24px; }
  .ticket-top .ticket-plate img { max-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .ticket-media::after { display: none; } .ticket:hover .ticket-cover, .ticket:hover .ticket-plate { transform: none; } }
.effects-off .ticket-media::after { display: none; }
.effects-off .ticket:hover .ticket-cover, .effects-off .ticket:hover .ticket-plate { transform: none; }

/* ---------- Deck list on the entry (storefront/tournaments/_deck, App\Support\TournamentDeck) ----------
   pick = radio tiles inside the registration form; sent = what the shop sees + change / take back. */
.sf-tn-dk label#tn-deck-label { display: flex; align-items: center; gap: 8px; }
.sf-tn-dk-req, .sf-tn-dk-opt { padding: 1px 7px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.sf-tn-dk-req { color: var(--sf-promo); border-color: #ff2e8866; }
.sf-tn-dk-opt { color: var(--sf-muted); border-color: var(--sf-border-strong); }
.sf-tn-dk-why { margin: -2px 0 10px; font-size: 12px; color: var(--sf-muted); }
.sf-tn-dk-list { display: grid; gap: 8px; max-height: 336px; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
/* .sf-tn-dk scope: the sign-up form's `.sf-field label { display: block; … }` out-ranked a lone class */
.sf-tn-dk .sf-tn-dk-item { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 8px 12px 8px 8px; font-size: 14px; color: var(--sf-text); background: #ffffff05; border: 1px solid var(--sf-border); cursor: pointer; transition: border-color .15s, background-color .15s; }
.sf-tn-dk-item input { position: absolute; opacity: 0; pointer-events: none; }
.sf-tn-dk-item:hover { border-color: var(--sf-border-hover); }
.sf-tn-dk-item:has(input:checked) { border-color: var(--sf-action); background: var(--sf-action-soft); box-shadow: inset 3px 0 0 var(--sf-action); }
.sf-tn-dk-item:has(input:focus-visible) { outline: 2px solid var(--sf-action); outline-offset: 2px; }
.sf-tn-dk-art { flex: 0 0 40px; width: 40px; aspect-ratio: 63 / 88; display: grid; place-items: center; overflow: hidden; background: #0d0719; border: 1px solid var(--sf-border); }
.sf-tn-dk-art img { width: 100%; height: 100%; object-fit: cover; }
.sf-tn-dk-art .icon { width: 18px; height: 18px; color: var(--sf-muted); }
.sf-tn-dk-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sf-tn-dk-body b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--sf-text); }
.sf-tn-dk-body small { font-size: 11.5px; color: var(--sf-muted); }
.sf-tn-dk-state { flex: none; padding: 2px 8px; font-size: 11px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.sf-tn-dk-state.is-ok { color: #3ee8a0; border-color: #3ee8a066; }
.sf-tn-dk-state.is-todo { color: var(--sf-price); border-color: #ffd24a66; }
.sf-tn-dk-state.is-bad { color: #ff6b8e; border-color: #ff4d7a77; }
.sf-tn-dk-new { display: inline-flex; margin-top: 10px; font-size: 12.5px; }
/* icon + words on one line, the build-a-deck button on its own line under them: `.sf-form .button`
   (pages.css) makes a form button 100% wide, which squeezed the words to one per line in the 400px aside */
.sf-tn-dk-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px; border: 1px dashed var(--sf-border-strong); font-size: 13px; }
.sf-tn-dk-empty > .icon { flex: none; width: 22px; height: 22px; color: var(--sf-muted); }
.sf-tn-dk-empty > span { flex: 1 1 0; min-width: 0; }
.sf-tn-dk-empty > .button { flex: 1 1 100%; width: auto; min-height: 42px; }
.sf-tn-dk-empty small { display: block; font-size: 11.5px; color: var(--sf-muted); }

.sf-tn-dk-sent { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sf-border); }
.sf-tn-dk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sf-tn-dk-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--sf-heading); }
.sf-tn-dk-head h3 .icon { width: 16px; height: 16px; color: var(--sf-heading-mark); }
.sf-tn-dk-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sf-muted); }
.sf-tn-dk-lock .icon { width: 13px; height: 13px; }
.sf-tn-dk-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #ffffff05; border: 1px solid var(--sf-border); }
.sf-tn-dk-sum { min-width: 0; display: grid; gap: 3px; }
.sf-tn-dk-sum > b { font-size: 15px; color: var(--sf-text); overflow-wrap: anywhere; }
.sf-tn-dk-sum > small { font-size: 11.5px; color: var(--sf-muted); }
.sf-tn-dk-zones { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--sf-muted); }
.sf-tn-dk-zones b { color: var(--sf-text); font-family: var(--v2-mono); }
.sf-tn-dk-issues { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.sf-tn-dk-issues li { padding-left: 14px; position: relative; color: var(--sf-price); }
.sf-tn-dk-issues li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: currentColor; }
.sf-tn-dk-issues li.is-error { color: #ff8fb8; }
.sf-tn-dk-list-text { margin-top: 10px; font-size: 13px; }
.sf-tn-dk-list-text summary { cursor: pointer; color: var(--sf-action); font-size: 12.5px; }
.sf-tn-dk-list-text summary:hover { color: var(--sf-action-hover); }
.sf-tn-dk-zone { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--sf-eyebrow); }
.sf-tn-dk-zone b { font-family: var(--v2-mono); color: var(--sf-text); }
.sf-tn-dk-list-text ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sf-tn-dk-list-text li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sf-tn-dk-list-text li b { flex: 0 0 22px; text-align: right; font-family: var(--v2-mono); }
.sf-tn-dk-list-text li code { flex: none; font-size: 11.5px; color: var(--sf-code); }
.sf-tn-dk-list-text li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sf-muted); }
.sf-tn-dk-stale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sf-alert.is-warn { border-color: #ff2e8866; background: #ff2e880f; color: #ff9cc6; }
.sf-tn-dk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.sf-tn-dk-actions form { margin: 0; }
.sf-tn-dk-change { margin-top: 12px; }
@media (max-width: 680px) {
  .sf-tn-dk .sf-tn-dk-item { gap: 10px; }
  .sf-tn-dk-state { font-size: 10.5px; padding: 2px 6px; }
}

/* ---------- Bracket picture views (2026-10-07, owner: a Swiss board like the CS Major one — "สามารถดูได้ทั้ง
   แบบของเดิม และแบบนี้", "รูปแบบการแข่งอื่นๆ ด้วย") ----------
   storefront/tournaments/_tree-{swiss,elim,rr} (+ _tree-row, _tree-match), data App\Support\TournamentTree.
   The section is page wide (out of the main column). A canvas = a grid of columns (head row + body row);
   pkg-tournaments.js draws the connector lines into an <svg class="sf-tt-lines"> behind the boxes from
   [data-tt-node] / [data-tt-to] and redraws on resize / view switch / morph. */
.sf-tnd-bracket { margin-top: 22px; }
.sf-tnd-bracket-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.sf-tnd-bracket-head h2 { margin-bottom: 0; }
/* the Tree / ตาราง tabs: the site's .sf-tabs (pages.css) made bigger, icon + a small second line */
.sf-tnd-tabs { gap: 6px; margin: 0 0 18px; }
.sf-tnd-tabs button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 11px; font: 700 14px/1.2 'Noto Sans Thai', sans-serif; background: transparent; border-top: 0; border-left: 0; border-right: 0; border-bottom-width: 3px; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.sf-tnd-tabs button .icon { width: 17px; height: 17px; }
.sf-tnd-tabs button small { font-size: 11.5px; font-weight: 600; color: var(--sf-muted); }
.sf-tnd-tabs button:hover { background: #ffffff08; }
.sf-tnd-tabs button.is-on { background: linear-gradient(180deg, transparent, #00f0ff14); }
.sf-tnd-tabs button.is-on small { color: #7fe9f2; }
.sf-tnd-tabs button:focus-visible { outline: 2px solid var(--sf-action); outline-offset: -2px; }

.sf-tt-hint { display: none; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: var(--sf-muted); }
.sf-tt-hint .icon { width: 13px; height: 13px; color: var(--sf-action); }
@media (max-width: 900px) { .sf-tt-hint { display: flex; } }
.sf-tt-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; }
/* columns share the width (--n = how many, set by the view); below --col each they stop shrinking and the
   canvas overflows into the scroller instead */
.sf-tt-canvas { --col: 206px; --gap: 48px; --n: 4; position: relative; display: grid; grid-auto-flow: column; grid-template-rows: auto 1fr;
  grid-auto-columns: max(var(--col), calc((100% - (var(--n) - 1) * var(--gap)) / var(--n))); column-gap: var(--gap); row-gap: 12px; padding: 2px 2px 6px; }
.sf-tt-lines { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.sf-tt-lines path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke: #ffffff38; }
.sf-tt-lines path.is-w { stroke: #a78bfacc; }
.sf-tt-lines path.is-l { stroke: #ff6b9db3; }
.sf-tt-lines path.is-d { stroke: #ffcf00a6; stroke-dasharray: 5 4; }
.sf-tt-lines path.is-c { stroke: #ffcf00cc; }
.sf-tt-lines path.is-n { stroke: #b9a8ff8c; }
.sf-tt-colhead { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 8px; border-bottom: 1px solid var(--sf-border); }
.sf-tt-colhead b { font: 800 13px/1.3 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-tt-colhead small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sf-muted); white-space: nowrap; }
.sf-tt-colhead.is-live { border-bottom-color: #3ee8a088; }
.sf-tt-colhead.is-live small { color: #3ee8a0; font-weight: 700; }
.sf-tt-colhead.is-live small i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: sf-tn-blink 1.4s ease-in-out infinite; }
.sf-tt-colhead.is-final { border-bottom-color: #ffcf0066; }
.sf-tt-colbody { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; }
.sf-tt-canvas.is-elim .sf-tt-colbody { justify-content: space-around; gap: 12px; }
.sf-tt-dot { display: inline-block; flex: none; width: 18px; height: 18px; border: 2px solid #ffffff38; border-radius: 50%; }

/* Swiss boxes: header band in the record's tone (0-0 white, more wins violet, even slate, more losses pink,
   the best final record gold), a row per pairing, dashed while projected */
.sf-tt-group { --tone: #9aa4c4; background: #0d0719f2; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: 0 10px 24px #0007; }
.sf-tt-group.is-start { --tone: #f4f0ff; }
.sf-tt-group.is-up { --tone: #a78bfa; }
.sf-tt-group.is-even { --tone: #8fb3d9; }
.sf-tt-group.is-down { --tone: #ff6b9d; }
.sf-tt-group.is-top { --tone: #ffcf00; box-shadow: 0 0 22px #ffcf0026, 0 10px 24px #0007; }
.sf-tt-group.is-projected { border-style: dashed; background: #0d0719b3; box-shadow: none; }
.sf-tt-ghead { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; padding: 6px 10px; color: var(--tone);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 26%, transparent), color-mix(in srgb, var(--tone) 12%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
.sf-tt-group.is-start .sf-tt-ghead { color: #140a26; background: #f4f0ff; }
.sf-tt-group.is-top .sf-tt-ghead { color: #140a26; background: linear-gradient(90deg, #ffcf00, #ffe680); }
.sf-tt-ghead b { font: 800 15px/1.2 var(--v2-mono); letter-spacing: 1px; }
.sf-tt-ghead small { font-size: 11px; font-weight: 600; opacity: .85; }
.sf-tt-group.is-projected .sf-tt-ghead { opacity: .75; }
.sf-tt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px; border-top: 1px solid #ffffff0f; }
.sf-tt-ghead + .sf-tt-row { border-top: 0; }
.sf-tt-row.is-cross { background: repeating-linear-gradient(135deg, #ffffff05 0 6px, transparent 6px 12px); }
.sf-tt-side { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--sf-muted); font-size: 12.5px; }
.sf-tt-side.is-end { justify-content: flex-end; }
.sf-tt-side b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.sf-tt-side .sf-tn-ava { flex-basis: 22px; width: 22px; height: 22px; font-size: 10px; }
.sf-tt-side.is-win { color: var(--sf-text); }
.sf-tt-side.is-win b { font-weight: 800; }
.sf-tt-side.is-win .sf-tn-ava { border-color: #ffcf00; box-shadow: 0 0 0 1px #ffcf0055; }
.sf-tt-side.is-lose { opacity: .55; }
.sf-tt-score { min-width: 34px; padding: 3px 6px; text-align: center; font: 700 11.5px/1.2 var(--v2-mono); color: var(--sf-text); background: #ffffff12; white-space: nowrap; }
.sf-tt-score.is-vs { color: #3ee8a0; background: #3ee8a01a; }
.sf-tt-score.is-bye { color: var(--sf-muted); font-family: 'Noto Sans Thai', sans-serif; }
.sf-tt-score.is-draw { color: #ffcf00; background: #ffcf0014; }
.sf-tt-none { color: var(--sf-muted); }
.sf-tt-row.is-empty .sf-tt-score { color: #ffffff4d; background: transparent; font-family: 'Noto Sans Thai', sans-serif; }
.sf-tt-people { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 4px; }
.sf-tt-people li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; font-size: 13px; font-weight: 600; color: var(--sf-text); }
.sf-tt-people li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-tt-people li small { margin-left: auto; font-size: 10.5px; color: var(--sf-muted); }
.sf-tt-people li.is-dropped { opacity: .55; }
.sf-tt-people .sf-tn-ava { flex-basis: 24px; width: 24px; height: 24px; font-size: 10px; }
.sf-tt-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 10px 8px; }

/* Knockout match boxes */
.sf-tt-canvas.is-elim { --col: 196px; --gap: 44px; }
.sf-tt-match { background: #0d0719f2; border: 1px solid var(--sf-border); box-shadow: 0 8px 20px #0007; }
.sf-tt-match.is-live { border-color: #3ee8a077; }
.sf-tt-mhead { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 9px; font-size: 10.5px; color: var(--sf-muted); background: #ffffff08; border-bottom: 1px solid #ffffff0f; }
.sf-tt-mhead em { font-style: normal; font-weight: 700; color: #ffcf00; }
.sf-tt-mhead i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #3ee8a0; box-shadow: 0 0 8px #3ee8a0; animation: sf-tn-blink 1.4s ease-in-out infinite; }
.sf-tt-slot { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; padding: 5px 9px; font-size: 13px; color: var(--sf-muted); }
.sf-tt-slot + .sf-tt-slot { border-top: 1px solid #ffffff0f; }
.sf-tt-slot b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.sf-tt-slot .sf-tn-ava { flex-basis: 22px; width: 22px; height: 22px; font-size: 10px; }
.sf-tt-slot > .icon { flex: none; width: 13px; height: 13px; color: #ffcf00; }
.sf-tt-slot em { font-style: normal; font-size: 12px; color: #ffffff59; }
.sf-tt-slot .sf-tt-dot { width: 16px; height: 16px; }
.sf-tt-games { margin-left: auto; min-width: 18px; text-align: right; font: 700 13px var(--v2-mono); color: var(--sf-muted); }
.sf-tt-slot.is-win { color: var(--sf-text); background: linear-gradient(90deg, #ffcf000f, transparent); box-shadow: inset 3px 0 0 #ffcf00; }
.sf-tt-slot.is-win b { font-weight: 800; }
.sf-tt-slot.is-win .sf-tt-games { color: #ffcf00; }
.sf-tt-slot.is-lose { opacity: .5; }
.sf-tt-champ { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; background: linear-gradient(160deg, #ffcf0022, #0d0719 70%); border: 1px solid #ffcf0088; box-shadow: 0 0 26px #ffcf0026; }
.sf-tt-champ > .icon { width: 28px; height: 28px; color: #ffcf00; filter: drop-shadow(0 0 8px #ffcf0088); }
.sf-tt-champ b { font-size: 15px; color: var(--sf-text); }
.sf-tt-champ .sf-tn-ava { flex-basis: 44px; width: 44px; height: 44px; font-size: 16px; border-color: #ffcf00; }
.sf-tt-champ.is-empty { background: #0d0719b3; border-style: dashed; border-color: #ffcf0055; box-shadow: none; }
.sf-tt-champ.is-empty > .icon { opacity: .5; filter: none; }
.sf-tt-champ em { font-style: normal; font-size: 12px; color: var(--sf-muted); }
.sf-tt-sec + .sf-tt-sec { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--sf-border); }
.sf-tt-sectitle { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 13px 'Noto Sans Thai', sans-serif; color: var(--sf-heading); }
.sf-tt-sectitle::before { content: ''; width: 4px; height: 15px; background: var(--sf-heading-mark); }
.sf-tt-sec.is-losers .sf-tt-sectitle::before { background: #ff6b9d; }
.sf-tt-sec.is-final .sf-tt-sectitle::before { background: #ffcf00; }

/* Round-robin grid */
.sf-tt-rr { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.sf-tt-rr th, .sf-tt-rr td { padding: 0; }
.sf-tt-rr thead th { vertical-align: bottom; }
.sf-tt-rr .is-corner { min-width: 170px; text-align: left; }
.sf-tt-rr .is-corner span { font-size: 11px; font-weight: 600; color: var(--sf-muted); }
.sf-tt-rr .is-col { width: 64px; text-align: center; }
.sf-tt-rr .is-col .sf-tn-ava { margin: 0 auto 4px; flex-basis: 30px; width: 30px; height: 30px; font-size: 12px; }
.sf-tt-rr .is-col small { display: block; max-width: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 700; color: var(--sf-text); }
.sf-tt-rr .is-who { display: flex; align-items: center; gap: 8px; min-width: 170px; height: 52px; padding: 0 10px 0 6px; text-align: left; background: #ffffff06; border: 1px solid #ffffff12; }
.sf-tt-rr .is-who b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--sf-text); }
.sf-tt-rr .is-who small { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--sf-muted); }
.sf-tt-rr .is-who .sf-tn-ava { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; }
.sf-tt-rrank { flex: none; width: 20px; text-align: center; font: 700 12px var(--v2-mono); color: var(--sf-muted); }
.sf-tt-rr tbody td { width: 64px; height: 52px; text-align: center; vertical-align: middle; border: 1px solid #ffffff12; background: #ffffff04; }
.sf-tt-rr td b { display: block; font: 700 14px/1.15 var(--v2-mono); }
.sf-tt-rr td small { display: block; font-size: 10px; font-weight: 600; }
.sf-tt-rr td.is-w { color: #3ee8a0; background: #3ee8a014; border-color: #3ee8a040; }
.sf-tt-rr td.is-l { color: #ff8fb8; background: #ff6b9d12; border-color: #ff6b9d38; }
.sf-tt-rr td.is-d { color: #ffcf00; background: #ffcf0012; border-color: #ffcf0038; }
.sf-tt-rr td.is-p { color: var(--sf-muted); border-style: dashed; }
.sf-tt-rr td.is-self { background: repeating-linear-gradient(135deg, #ffffff10 0 4px, transparent 4px 9px); border-color: transparent; }
.sf-tt-rr td.is-none { color: #ffffff40; }
.sf-tt-rr .is-sum { min-width: 72px; white-space: nowrap; padding: 0 8px; text-align: center; font: 700 12.5px var(--v2-mono); color: var(--sf-text); background: transparent; border: 0; }
.sf-tt-rr thead .is-sum { font: 700 11px 'Noto Sans Thai', sans-serif; color: var(--sf-muted); }
.sf-tt-rr td.is-pts b { font-size: 16px; color: var(--sf-action); }
.sf-tt-rr tr.is-dropped .is-who, .sf-tt-rr tr.is-dropped td { opacity: .55; }

.sf-tt-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid #ffffff0f; font-size: 11.5px; color: var(--sf-muted); }
.sf-tt-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sf-tt-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.sf-tt-legend i.is-w { border-color: #a78bfa; }
.sf-tt-legend i.is-l { border-color: #ff6b9d; }
.sf-tt-legend i.is-d { border-top-style: dashed; border-color: #ffcf00; }
.sf-tt-legend i.is-n { border-color: #b9a8ff; }
.sf-tt-legend i.is-p { width: 16px; height: 10px; border: 1px dashed #ffffff66; }
.sf-tt-legend i.is-cw, .sf-tt-legend i.is-cl, .sf-tt-legend i.is-cd { width: 12px; height: 12px; border: 1px solid; }
.sf-tt-legend i.is-cw { color: #3ee8a0; background: #3ee8a024; }
.sf-tt-legend i.is-cl { color: #ff6b9d; background: #ff6b9d24; }
.sf-tt-legend i.is-cd { color: #ffcf00; background: #ffcf0024; }
.sf-tt-legend .sf-tt-dot { width: 12px; height: 12px; }
@media (max-width: 680px) {
  .sf-tnd-tabs button { flex: 1 1 0; justify-content: center; flex-wrap: wrap; gap: 2px 7px; padding: 10px 6px 9px; font-size: 13.5px; }
  .sf-tnd-tabs button small { flex-basis: 100%; text-align: center; font-size: 10.5px; }
  .sf-tt-canvas { --col: 200px; --gap: 32px; }
  .sf-tt-canvas.is-elim { --col: 190px; --gap: 28px; }
  .sf-tt-rr .is-corner, .sf-tt-rr .is-who { min-width: 132px; }
}
.effects-off .sf-tt-colhead.is-live small i, .effects-off .sf-tt-mhead i { animation: none; }
@media (prefers-reduced-motion: reduce) { .sf-tt-colhead.is-live small i, .sf-tt-mhead i { animation: none; } }