/* Hub-only styles */
.hero { padding: 4px 0 8px; position: relative; }
.hero-art { width: 120px; margin: 0 auto; }
.hero-art .mascot { animation: bob 3s ease-in-out infinite; }
.hero h1 { font-size: 2.3rem; margin: 2px 0 0; letter-spacing: -.01em; color: var(--accent); text-shadow: 0 3px 0 color-mix(in srgb, var(--sun) 70%, transparent); }
.hero .pitch { font-size: 1.05rem; margin: 4px 0 12px; }
.stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stat { background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: 5px 14px; font-weight: 600; font-size: .95rem; box-shadow: 0 3px 0 var(--line); }
.stat.lit { background: var(--sun); border-color: var(--gold-edge); color: #2b2036; box-shadow: 0 3px 0 var(--gold-edge); }
.today { border-color: var(--sun); background: linear-gradient(180deg, color-mix(in srgb, var(--sun) 22%, var(--card)), var(--card) 70%); }
.today h2 { margin-top: 0; }
.chips { display: grid; gap: 10px; margin-top: 8px; }
.chip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; background: var(--card); border: 2px solid var(--edge); border-radius: 18px; text-decoration: none; box-shadow: 0 4px 0 var(--edge); transition: transform .1s, box-shadow .1s; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge); }
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.chip img { border-radius: 12px; flex: none; }
.chip span { flex: 1; min-width: 0; }
.chip b { display: block; font-size: 1.1rem; }
.chip small { color: var(--accent); font-weight: 600; }
.chip i { font-style: normal; font-size: 1.8rem; color: var(--accent); }
.alldone { display: flex; align-items: center; gap: 14px; }
.alldone .mascot { width: 96px; flex: none; animation: hop 1.2s ease-in-out infinite; }
.alldone p { margin: 0; }
.catlist .cat-sec { margin-top: 18px; }
.catlist h2 { margin: 0 0 8px 4px; font-size: 1.2rem; color: var(--ink); }
.catlist h2::after { content: ""; display: inline-block; width: 28px; height: 5px; border-radius: 3px; background: var(--sun); margin-left: 10px; vertical-align: middle; }
.cat-sec[data-cat="Words"] h2::after { background: var(--coral); } .cat-sec[data-cat="Numbers"] h2::after { background: var(--sun); }
.cat-sec[data-cat="World"] h2::after { background: var(--leaf); } .cat-sec[data-cat="Reflex"] h2::after { background: var(--berry); } .cat-sec[data-cat="Logic"] h2::after { background: var(--sky); }
.gcard .gi { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.gcard .tx b { font-size: 1.12rem; }
.gcard .tx small { display: block; line-height: 1.25; margin-top: 1px; }
.badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pill.daily { background: var(--sky-bg); color: var(--sky); }
.pill.any { background: color-mix(in srgb, var(--leaf) 20%, transparent); color: var(--leaf-ink); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }