.gnostis-category-strip { --strip-ink: #202522; --strip-muted: #5a635d; --strip-line: #e8e9e5; --strip-surface: #fff; --strip-plate: #f2f6f1; --strip-accent: #23653d; --strip-saving-bg: #edf5eb; --strip-saving-ink: #23532b; --strip-flames-bg: #ffeeee; --strip-flames-ink: #bd1c1c; margin: 2rem 0; }
.gnostis-category-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 16px; padding-top: 15px; }
.gnostis-category-strip .gnostis-category-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; min-height: 168px; padding: 22px 14px 18px; color: var(--strip-ink); background: var(--strip-surface); border: 1px solid var(--strip-line); border-radius: 18px; box-shadow: 0 1px 2px rgb(27 38 29 / 4%), 0 6px 18px rgb(27 38 29 / 5%); text-align: center; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gnostis-category-strip .gnostis-category-tile:hover { transform: translateY(-4px); border-color: #b9c9ba; box-shadow: 0 2px 4px rgb(27 38 29 / 5%), 0 14px 28px rgb(27 38 29 / 11%); }
.gnostis-category-strip .gnostis-category-tile:active { transform: translateY(-1px); box-shadow: 0 1px 2px rgb(27 38 29 / 6%), 0 6px 14px rgb(27 38 29 / 8%); }
.gnostis-category-strip .gnostis-category-tile:focus-visible { outline: 3px solid var(--strip-accent); outline-offset: 4px; }

/* A round plate keeps uploaded artwork, emoji and the placeholder on the same footprint. */
.gnostis-category-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--strip-plate); box-shadow: inset 0 0 0 1px rgb(35 101 61 / 7%); transition: transform .18s ease, background-color .18s ease; }
.gnostis-category-strip .gnostis-category-tile:hover .gnostis-category-icon { transform: scale(1.06); background: #eaf1e8; }
.gnostis-category-icon img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.gnostis-category-placeholder { font-size: 30px; line-height: 1; color: var(--strip-muted); }
.gnostis-category-emoji-icon { font-size: 34px; line-height: 1; filter: grayscale(1) sepia(1) saturate(1.7) brightness(1.16) hue-rotate(-3deg); }
.gnostis-category-tile .gnostis-category-name { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* Both badges share one geometry so the bottom row reads as a single band. */
.gnostis-category-saving,
.gnostis-category-flames { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.gnostis-category-saving { background: var(--strip-saving-bg); color: var(--strip-saving-ink); box-shadow: inset 0 0 0 1px rgb(35 83 43 / 12%); }
.gnostis-category-flames { background: var(--strip-flames-bg); color: var(--strip-flames-ink); box-shadow: inset 0 0 0 1px rgb(189 28 28 / 12%); }
.gnostis-category-flames img { width: 17px; height: 17px; object-fit: contain; }

@media (max-width: 1400px) { .gnostis-category-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .gnostis-category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .gnostis-category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gnostis-category-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .gnostis-category-strip .gnostis-category-tile { min-height: 176px; padding: 20px 12px 16px; } }
@media (prefers-reduced-motion: reduce) { .gnostis-category-strip .gnostis-category-tile, .gnostis-category-icon { transition: none; transform: none; } .gnostis-category-strip .gnostis-category-tile:hover, .gnostis-category-strip .gnostis-category-tile:hover .gnostis-category-icon { transform: none; } }