/*
  File: /home/teachla2/public_html/games/category.css
  Purpose: The round icon beside the title on the three category pages
           (action-reflex, puzzle-brain, art-creativity). Colors come from the class on the title.
  Last updated: November 8, 2026 5:20 PM (one shared copy, replaces the same block that was inside each category page)
*/

.title-with-icon { display: flex; align-items: center; gap: 16px; }
.title-with-icon .cat-icon {
   width: 68px; height: 68px; border-radius: 50%;
   background: var(--tint); color: var(--deep);
   display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.title-with-icon .cat-icon svg { width: 44px; height: 44px; display: block; }

.title-with-icon.cat-action { --deep: #d93a2b; --tint: #fee2e2; }
.title-with-icon.cat-puzzle { --deep: #5b34b8; --tint: #ece4ff; }
.title-with-icon.cat-art    { --deep: #c2560a; --tint: #ffe4c7; }