/* Top-up price comparison (staging). Theme tokens only, from theme.css. Spacing: 4/8/12/16/24/32. */
.bb-tu { font-variant-numeric: tabular-nums; }
.bb-tu-hero { padding: 32px 0 24px; background: var(--bg1); border-bottom: 1px solid var(--line); }
.bb-tu-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; margin: 0; }
.bb-tu-hero .lede { max-width: 65ch; margin: 12px 0 0; font-size: 1.0625rem; }
.bb-tu-title { display: flex; align-items: center; gap: 16px; }

.bb-tu-staging {
  margin: 0 0 16px; padding: 8px 12px; border: 1px dashed var(--warn); border-radius: 8px;
  background: var(--panel-solid); color: var(--body); font-size: 0.8125rem; line-height: 1.5;
}
.bb-tu-staging b { color: var(--warn); }
.bb-tu-staging a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.bb-tu-ico { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--fill-2); }
.bb-tu-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-tu-ico-lg { width: 56px; height: 56px; border-radius: 12px; }
.bb-tu-ini { margin: auto; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--body-2); }
.bb-tu-ico-lg .bb-tu-ini { font-size: 1.125rem; }

.bb-tu-fresh { max-width: 75ch; margin: 16px 0 0; padding-left: 12px; border-left: 3px solid var(--ok); color: var(--body); font-size: 0.9375rem; }
.bb-tu-fresh.is-wait { border-left-color: var(--warn); }

.bb-tu-body { padding: 32px 0 56px; }
/* theme.css gives every section content-visibility:auto + a 700px placeholder; these are nested. */
.bb-tu .bb-tu-sec, .bb-tu .bb-tu-rules { padding: 0; background: none; content-visibility: visible; contain-intrinsic-size: none; }
.bb-tu-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.2; margin: 32px 0 12px; color: var(--fg); }
.bb-tu-note { color: var(--body-2); margin: 0 0 12px; max-width: 75ch; font-size: 0.875rem; }
.bb-tu-empty { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); color: var(--body-2); max-width: 75ch; }
.bb-tu-sub { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.bb-tu-unk { color: var(--muted); font-style: italic; }
.bb-tu-src { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }

/* ---- the comparison table */
.bb-tu-lead { margin: 16px 0 0; font-size: 1.0625rem; color: var(--body); }
.bb-tu-lead b { color: var(--ok); }
.bb-tu-h2-first { margin-top: 0; }
.bb-tu-legend { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--body-2); }
.bb-tu-legend li { display: inline-flex; align-items: center; gap: 8px; }
.bb-tu-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); }
.bb-tu-key.is-top { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: var(--ok); }
.bb-tu-key.is-old { background: var(--fill-2); }
.bb-tu-key.is-x { border-style: dashed; }

.bb-tu-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); -webkit-overflow-scrolling: touch; }
.bb-tu-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bb-tu-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; line-height: 1.3; }
.bb-tu-tbl th, .bb-tu-tbl td { padding: 10px 12px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bb-tu-tbl tbody tr:last-child > * { border-bottom: 0; }
.bb-tu-tbl thead th { font-weight: 700; color: var(--fg); background: var(--fill-1); }
.bb-tu-tbl thead tr:first-child th { padding-top: 12px; }
.bb-tu-tbl .bb-tu-rh {
  position: sticky; left: 0; z-index: 1; text-align: left; white-space: normal; min-width: 132px; max-width: 200px;
  background: var(--panel-solid); border-right: 1px solid var(--line);
}
.bb-tu-tbl thead .bb-tu-rh { background: var(--panel-solid); color: var(--muted); font-weight: 700; }
.bb-tu-scroll.is-scrolled .bb-tu-rh { box-shadow: 6px 0 8px -6px var(--shadow-ink-strong); }
.bb-tu-tbl tbody .bb-tu-rh b { display: block; color: var(--fg); font-size: 1rem; }
.bb-tu-tbl tbody .bb-tu-rh span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
.bb-tu-sum th, .bb-tu-sum td { background: var(--fill-1); border-bottom: 2px solid var(--line-2) !important; }
.bb-tu-sum .bb-tu-c-d { font-size: 1rem; }

.bb-tu-tbl td > span { display: block; }
.bb-tu-c-p { color: var(--fg); font-weight: 700; font-size: 0.9375rem; }
.bb-tu-c-d { color: var(--ok); font-weight: 700; font-size: 0.8125rem; }
.bb-tu-c-d.is-up { color: var(--warn); }
.bb-tu-c-x { color: var(--muted); font-size: 0.75rem; margin-top: 2px; }
.bb-tu-tbl td.is-top { background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: inset 3px 0 0 var(--ok); }
.bb-tu-tbl td.is-out { background: var(--fill-1); }
.bb-tu-tbl td.is-out .bb-tu-c-p { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--muted); }
.bb-tu-tbl td.is-out .bb-tu-c-d { color: var(--muted); font-weight: 400; }
.bb-tu-tbl td.is-dealonly .bb-tu-c-x, .bb-tu-tbl td .bb-tu-c-x { white-space: nowrap; }
.bb-tu-tbl td.is-none { color: var(--muted); text-align: center; }

.bb-tu-swipe { display: none; margin: 0 0 8px; font-size: 0.8125rem; color: var(--muted); }
.bb-tu-notes { margin: 12px 0 0; padding-left: 1.2em; max-width: 80ch; color: var(--body-2); font-size: 0.8125rem; }
.bb-tu-notes li { margin: 0 0 4px; }

.bb-tu-shops { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bb-tu-shops li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); min-width: 0; }
.bb-tu-shops b { display: block; color: var(--fg); }
.bb-tu-shops dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 0.8125rem; }
.bb-tu-shops dt { color: var(--muted); font-weight: 700; }
.bb-tu-shops dd { margin: 0; color: var(--body); overflow-wrap: anywhere; }

/* ---- secondary folds */
.bb-tu-fold { margin: 0 0 8px; }
.bb-tu-plain { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; font-size: 0.875rem; }
.bb-tu-plain li { display: flex; flex-direction: column; min-width: 0; padding: 4px 0; }
.bb-tu-plain li > span { color: var(--body-2); }
.bb-tu-plain a { color: var(--gold); font-weight: 700; }

/* ---- sponsor: own box, own label, outside every list */
.bb-tu-sponsor { margin: 32px 0 0; padding: 8px 12px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); }
.bb-tu-sponsor-tag { margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.bb-tu-sponsor-ph {
  display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 8px 16px;
  border: 1px dashed var(--line-2); border-radius: 8px; color: var(--muted); font-size: 0.875rem; text-align: center;
}
.bb-tu-sponsor .bb-aa-slot { min-height: 90px; display: flex; justify-content: center; }
.bb-tu-sponsor .bb-aa-slot img { max-width: 100%; height: auto; }
.bb-tu-sponsor-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); }

/* ---- index */
.bb-tu-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bb-tu-game {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-solid); color: inherit; text-decoration: none; transition: border-color .15s ease;
}
.bb-tu-game:hover { border-color: var(--gold); }
.bb-tu-game-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.875rem; color: var(--body-2); }
.bb-tu-game-text b { font-size: 1.0625rem; color: var(--fg); }

.bb-tu-rules { margin: 32px 0 0; max-width: 75ch; }
.bb-tu-rules h2 { margin: 0 0 8px; font-size: 1rem; font-family: var(--sans); font-weight: 700; color: var(--fg); }
.bb-tu-rules ul { margin: 0; padding-left: 1.2em; color: var(--body-2); font-size: 0.875rem; }
.bb-tu-rules li { margin: 0 0 4px; }

.bb-tu-split {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 24px 0 0; padding: 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg1); font-size: 0.9375rem;
}
.bb-tu-split span { color: var(--body-2); flex: 1 1 320px; }
.bb-tu-split a { white-space: nowrap; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { .bb-tu-game { transition: none; } }

@media (max-width: 960px) {
  .bb-tu-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bb-tu-hero { padding: 24px 0 16px; }
  .bb-tu-ico-lg { width: 44px; height: 44px; }
  .bb-tu-games { grid-template-columns: minmax(0, 1fr); }
  .bb-tu-tbl th, .bb-tu-tbl td { padding: 8px 10px; }
  .bb-tu-tbl .bb-tu-rh { min-width: 104px; max-width: 132px; }
  .bb-tu-swipe { display: block; }
}

/* 0.3.1: search questions, answered from the table. */
.bb-tu-faq { margin: 32px 0 0; max-width: 75ch; }
.bb-tu-faq h3 { margin: 20px 0 6px; font-size: 1rem; font-weight: 700; color: var(--fg); font-family: var(--sans); }
.bb-tu-faq p { margin: 0; color: var(--body); font-size: 0.9375rem; line-height: 1.55; }

/* 0.3.2: related pages and other games (internal links). */
.bb-tu-related { margin: 32px 0 0; }
.bb-tu-rel { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bb-tu-rel li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); }
.bb-tu-rel a { color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bb-tu-rel span { color: var(--body-2); font-size: 0.875rem; }
.bb-tu-others { margin: 16px 0 0; max-width: 80ch; color: var(--body-2); font-size: 0.9375rem; line-height: 1.7; }
.bb-tu-others b { color: var(--fg); margin-right: 4px; }
.bb-tu-others a { color: var(--fg); }

/* 0.4.0: reasons to come back (drops since the last check, next run, Discord). */
.bb-tu-drops { max-width: 75ch; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); color: var(--body); font-size: 0.9375rem; }
.bb-tu-drops-h { margin: 0 0 6px; font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--fg); }
.bb-tu-drops ul { margin: 0 0 6px; padding-left: 20px; }
.bb-tu-drops li { margin: 2px 0; }
.bb-tu-drops p { margin: 0; }
.bb-tu-drops p + p { margin-top: 4px; }
.bb-tu-drops .bb-tu-next { color: var(--muted); font-size: 0.875rem; }
.bb-tu-c-was { color: var(--ok); font-size: 0.75rem; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.bb-tu .bb-tu-discord { margin: 32px 0 0; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); }
.bb-tu-discord > div { flex: 1 1 320px; }
.bb-tu-discord .bb-tu-h2 { margin: 0 0 4px; }
.bb-tu-discord p { margin: 0; color: var(--body-2); font-size: 0.9375rem; max-width: 65ch; }
.bb-tu-dc-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--gold); color: var(--gold-ink, #111); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bb-tu-dc-btn:hover, .bb-tu-dc-btn:focus-visible { filter: brightness(1.08); }

/* 0.7.0: pack-first layout. Pick a pack, see every shop ranked by price. The full table folds below. */
.bb-tu-hero { padding: 16px 0 24px; }
.bb-tu-hero h1 { font-size: clamp(1.375rem, 3vw, 2rem); text-shadow: none; }
.bb-tu-hero .crumb { margin: 0 0 8px; }
.bb-tu-title { gap: 12px; }
.bb-tu-ico-lg { width: 44px; height: 44px; border-radius: 10px; }
.bb-tu-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 8px 0 0; padding: 0; border: 0; color: var(--muted); font-size: 0.875rem; }
.bb-tu-fresh.is-wait { padding-left: 12px; border-left: 3px solid var(--warn); color: var(--body); }
.bb-tu-dot { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.bb-tu-sep { margin: 0 8px; color: var(--line-2); }

.bb-tu-finder { margin: 16px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-solid); }
.bb-tu-find-h { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--fg); }
.bb-tu-find-q { margin: 4px 0 12px; font-size: 0.875rem; color: var(--muted); }
.bb-tu-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-tu-chips { display: contents; }
.bb-tu-chip[hidden] { display: none; }
.bb-tu-chip-more { border-style: dashed; color: var(--gold); }
.bb-tu-chip-more span { color: var(--gold); }
.bb-tu-chip {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--panel-solid); color: var(--fg); font: inherit; line-height: 1.25; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.bb-tu-chip b { font-size: 0.9375rem; font-weight: 700; }
.bb-tu-chip span { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.bb-tu-chip:hover { border-color: var(--gold); }
.bb-tu-chip[aria-selected="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel-solid)); box-shadow: inset 0 0 0 1px var(--gold); }
.bb-tu-chip:focus-visible, .bb-tu-more:focus-visible, .bb-tu-gridbox summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.bb-tu-panel[hidden] { display: none; }
.bb-tu-rank-h { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 4px; padding: 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--body-2); }
.bb-tu-rank-h span { font-weight: 400; color: var(--muted); white-space: nowrap; }
.bb-tu-rank-m { margin: 0 0 8px; padding: 0 8px; font-size: 0.8125rem; color: var(--body-2); }

.bb-tu-rank, .bb-tu-board { margin: 0; padding: 0; list-style: none; }
.bb-tu-r { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.bb-tu-r[hidden] { display: none; }
/* The lowest shop is row 1 of the list, marked. */
.bb-tu-r.is-best { margin-bottom: 4px; padding: 14px 12px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ok) 8%, var(--panel-solid)); }
.bb-tu-r.is-best .bb-tu-r-n { color: var(--ok); font-size: 1rem; font-weight: 700; }
.bb-tu-r.is-best .bb-tu-r-a, .bb-tu-r.is-best .bb-tu-r-p b { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.15; }
.bb-tu-r.is-best small { color: var(--body-2); font-size: 0.8125rem; }
.bb-tu-r.is-best .bb-tu-r-p span { font-size: 0.8125rem; }
/* The shop name is the link; its hit area is the whole row. */
.bb-tu-r { position: relative; }
.bb-tu-r-a { color: inherit; text-decoration: none; }
.bb-tu-r-a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.bb-tu-r-a:focus-visible { outline: none; }
.bb-tu-r-a:focus-visible::after { outline: 2px solid var(--gold); outline-offset: -2px; }
.bb-tu-r-go { margin-left: 6px; color: var(--muted); }
@media (hover: hover) {
  .bb-tu-r:not(.is-best):not(.is-top):hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
  .bb-tu-r:hover .bb-tu-r-a { text-decoration: underline; text-underline-offset: 3px; }
  .bb-tu-r:hover .bb-tu-r-go { color: var(--gold); }
}
.bb-tu-r:last-child { border-bottom: 0; }
.bb-tu-r-n { color: var(--muted); font-size: 0.8125rem; text-align: right; }
.bb-tu-r-s { min-width: 0; color: var(--fg); font-weight: 700; overflow-wrap: anywhere; }
.bb-tu-r-s small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.75rem; font-weight: 400; line-height: 1.35; }
.bb-tu-r-p { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.bb-tu-r-p b { color: var(--fg); font-size: 1rem; }
.bb-tu-r-p span { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.bb-tu-r-p .is-low, .bb-tu-r-p .is-drop { color: var(--ok); font-weight: 700; }
.bb-tu-r-p .is-up, .bb-tu-board .is-up { color: var(--warn); }
.bb-tu-r-p .is-more-cost { color: var(--muted); font-weight: 400; }
.bb-tu-r.is-top { background: color-mix(in srgb, var(--ok) 7%, transparent); border-radius: 8px; }
.bb-tu-r.is-out .bb-tu-r-s, .bb-tu-r.is-out .bb-tu-r-p b { color: var(--muted); font-weight: 400; }
.bb-tu-r.is-out .bb-tu-r-p b { text-decoration: line-through; }
.bb-tu-more {
  display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--panel-solid); color: var(--gold); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease;
}
.bb-tu-more:hover { border-color: var(--gold); }
.bb-tu-find-f { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); }

.bb-tu-intro { max-width: 75ch; margin: 0; color: var(--body-2); font-size: 0.9375rem; }
.bb-tu-body .bb-tu-drops { margin-top: 16px; }
.bb-tu-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.bb-tu-board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.bb-tu-board li[hidden] { display: none; }
.bb-tu-overall .bb-tu-lead { margin: 0 0 4px; }
.bb-tu-gridbox { margin: 32px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); }
.bb-tu-gridbox > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; color: var(--gold); font-weight: 700; cursor: pointer; list-style: none; }
.bb-tu-gridbox > summary::-webkit-details-marker { display: none; }
.bb-tu-gridbox > summary::before { content: ""; flex: 0 0 auto; box-sizing: content-box; width: 8px; height: 8px; transform-origin: 50% 50%; margin: 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.bb-tu-gridbox[open] > summary::before { transform: rotate(45deg); }
.bb-tu-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.bb-tu-gridbox[open] > summary { border-bottom: 1px solid var(--line); }
.bb-tu .bb-tu-gridbox > .bb-tu-sec { padding: 16px; }
.bb-tu-gridbox .bb-tu-tbl-h { font-size: 1.125rem; }

/* Desktop: the list runs down two columns (1-4, then 5-8), so a shop name and its price sit close together. */
@media (min-width: 1024px) {
  .bb-tu-rank { columns: 2; column-gap: 32px; }
  .bb-tu-r { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .bb-tu-chip, .bb-tu-more, .bb-tu-gridbox > summary::before { transition: none; } }
@media (max-width: 640px) {
  .bb-tu-hero { padding: 12px 0 16px; }
  .bb-tu-finder { padding: 12px; }
  .bb-tu-chip { justify-content: center; padding: 6px 10px; }
  .bb-tu-chip span { display: none; }
  .bb-tu-chip-more span { display: none; }
  .bb-tu-chiprow:not(.is-open) .bb-tu-chip.is-extra-sm:not([aria-selected="true"]) { display: none; }
  .bb-tu-rank-h { padding: 0 4px; }
  .bb-tu-r { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 10px 4px; }
  .bb-tu-board { grid-template-columns: minmax(0, 1fr); }
  .bb-tu-r.is-best { padding: 12px 8px; }
}