/* Topic band — a one-row strip on each topic's pages (game, guide, store)
   linking the topic's guide / drill / printables / teaching materials directly.
   Var fallbacks bridge the two token systems: game pages define --border/--text/
   --text-light/--primary (shared.css), shop pages define --line/--ink/--muted/
   --accent (shop.css). Dark mode works on both since each system swaps its own vars. */

.topic-band { padding: 0 24px; margin-top: 32px; }
.topic-band .tb-in { max-width: 900px; margin: 0 auto; }

.tb-title { max-width: 900px; margin: 0 0 10px; font-size: 12.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-light, var(--muted, #6b6560)); }

.tb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.tb-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
    background: var(--card, #fff);
    border: 1px solid var(--border, var(--line, #e7e5e4));
    border-radius: 12px; padding: 13px 14px 12px; transition: border-color .15s, transform .15s; }
.tb-card:hover { border-color: var(--primary, var(--accent, #0d9488)); transform: translateY(-2px); }
.tb-card strong { color: var(--text, var(--ink, #1c1917)); font-size: 14px; font-weight: 700; line-height: 1.3; }
.tb-card .tb-desc { color: var(--text-light, var(--muted, #6b6560)); font-size: 12.5px; }

.tb-kicker { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tb-k-learn { color: #d97706; }
.tb-k-practice { color: #0d9488; }
.tb-k-print { color: #7c3aed; }
.tb-k-teach { color: #dc2626; }

.tb-card.tb-current { border-color: var(--primary, var(--accent, #0d9488));
    box-shadow: 0 0 0 1px var(--primary, var(--accent, #0d9488)) inset; }
.tb-card.tb-current:hover { transform: none; }

body.dark-mode .tb-k-learn { color: #fbbf24; }
body.dark-mode .tb-k-practice { color: #5eead4; }
body.dark-mode .tb-k-print { color: #c4b5fd; }
body.dark-mode .tb-k-teach { color: #fca5a5; }

@media (max-width: 760px) { .tb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .tb-grid { grid-template-columns: 1fr; } }