/* Styles that were written inline on these pages (Oct 16-17, 2026). The site's security policy
   (style-src 'self') ignores inline styles, so they live here. !important keeps them winning
   the way the inline styles did. Used by /shop/, /merch/, /advertise/, /watch/ and the home page. */
.mall-tv-product-link { display:grid !important;grid-template-columns:1fr 1fr !important;align-items:center !important;gap:8px !important;width:100% !important;height:100% !important; }
.mall-tv-product-img { width:100% !important;height:170px !important;object-fit:contain !important;grid-row:span 2 !important; }
.merch-board-img { width:100% !important;height:auto !important;object-fit:contain !important;border-radius:12px !important; }
.ad-board-img { object-fit:contain !important; }
.keycap-icon-round { width:160px !important;height:160px !important;border-radius:50% !important; }
.highlight-grid { display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;gap:24px !important; }
.highlight-video { width:100% !important;max-height:600px !important;aspect-ratio:9/16 !important;background:#090b0a !important; }

/* Home page, THE FIFTEEN ROYAL TABLES (Oct 18, 2026): the app's own table pictures (img/app/thumbs, made from
   img/app/table-*.webp) in place of the color swatches, which showed the website globe instead of the felt's crowned DD. */
.table-strip .table-thumb { display: grid; gap: 6px; justify-items: center; margin: 0; }
.table-strip .table-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 29 / 20; }
.table-strip .table-thumb span { font: 700 11px/1.2 "Avenir Next", sans-serif; color: #F4EEE2; text-align: center; }

/* Home page, QUICK ACCESS (Oct 18, 2026): the round Boneyard Brawl logo sits centered under "Your shortcut to
   Boneyard Brawl." at every width. The heading and the logo share a column as wide as the heading's text; the eyebrow
   and the paragraph keep the full width. Grid margins don't collapse, so the logo drops its top margin to keep the
   same 12px gap. Only the home page has the round icon, so /launch/ keeps its layout. */
.wrap:has(> .keycap-mark .keycap-icon-round) { display: grid; grid-template-columns: fit-content(100%) minmax(0, 1fr); }
.wrap:has(> .keycap-mark .keycap-icon-round) > * { grid-column: 1 / -1; }
.wrap:has(> .keycap-mark .keycap-icon-round) > h2 { grid-column: 1; }
.wrap:has(> .keycap-mark .keycap-icon-round) > .keycap-mark { grid-column: 1; justify-content: center; margin-top: 0; }