/* New categories only. Existing theme/rules are retained. */
html { scroll-padding-top: 124px; }
.catbar { position: sticky; top: 60px; z-index: 19; display: flex; gap: 8px; padding: 8px 12px; background: rgba(255, 245, 250, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.cat { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 42px; border-radius: 14px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 2px var(--line); transition: transform 0.15s, background 0.2s; }
.cat:active { transform: scale(0.97); }
.cat-ico { font-size: 20px; line-height: 1; }
.cat.on { background: linear-gradient(135deg, #ff8fbe, #b48cff); color: #fff; box-shadow: 0 6px 14px rgba(180, 90, 160, 0.3); }
.cat-fish.on { background: linear-gradient(135deg, #2fb7ff, #2a6cff); box-shadow: 0 6px 14px rgba(40, 110, 220, 0.35); }
.cat em { position: absolute; top: -6px; right: 8px; padding: 1px 6px; border-radius: 99px; background: #ff4f6d; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; animation: cat-new 1.6s ease-in-out infinite; }
@keyframes cat-new { 50% { transform: translateY(-2px) scale(1.06); } }

/* fish shooting section */
.fish-hero { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 20px; background: #0b3a7a; box-shadow: 0 10px 24px rgba(30, 80, 170, 0.28); text-decoration: none; }
.fish-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; animation: fish-pan 14s ease-in-out infinite alternate; }
@keyframes fish-pan { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.06) translateX(1.5%); } }
.fish-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 30, 80, 0.78), rgba(4, 30, 80, 0.15) 62%, transparent); }
.fish-hero-txt { position: absolute; z-index: 1; left: 4%; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.fish-logo { width: 100%; max-width: 200px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.fish-sub { color: #e6f6ff; font-size: 12.5px; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.fish-play { margin-top: 2px; padding: 6px 16px; border-radius: 99px; background: linear-gradient(180deg, #ffe27a, #ffad1f); color: #4a2600; font-weight: 700; font-size: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.fish-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fish-map { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: #0b3a7a; text-decoration: none; box-shadow: 0 6px 14px rgba(30, 80, 170, 0.2); }
.fish-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: transform 0.3s; }
.fish-map:hover img { transform: scale(1.06); }
.fish-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(2, 20, 60, 0.85)); }
.fish-map b, .fish-map small { position: absolute; z-index: 1; left: 8px; right: 6px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.fish-map b { bottom: 20px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fish-map small { bottom: 6px; font-size: 11px; color: #ffe27a; }
.fish-note { margin: 8px 4px 0; color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .fish-hero-bg, .cat em { animation: none; } }

.cat-space.on { background: linear-gradient(135deg, #8a5bff, #2b1a7a); box-shadow: 0 6px 14px rgba(70, 40, 170, 0.35); }
.space-hero { background: #07041c; box-shadow: 0 10px 24px rgba(60, 30, 150, 0.32); }
.space-hero::after { background: linear-gradient(90deg, rgba(6, 4, 28, 0.85), rgba(6, 4, 28, 0.2) 60%, transparent); }
.space-map { background: #07041c; }
.space-map::after { background: linear-gradient(transparent 40%, rgba(10, 4, 40, 0.88)); }
.space-map small { color: #c9b3ff; }
@media (max-width: 360px) { .cat { font-size: 13.5px; gap: 3px; } .cat-ico { font-size: 17px; } }

/* four categories: icon above the label */
.catbar { gap: 6px; padding: 7px 10px; }
.cat { flex-direction: column; gap: 1px; height: 52px; font-size: 13px; border-radius: 13px; }
.cat-ico { font-size: 20px; }
.cat em { top: -5px; right: 4px; font-size: 9px; padding: 0 5px; }
.cat-cards.on { background: linear-gradient(135deg, #1fa36a, #0b5a3c); box-shadow: 0 6px 14px rgba(20, 110, 70, 0.35); }
html { scroll-padding-top: 134px; }
@media (max-width: 360px) { .cat { font-size: 12px; } .cat-ico { font-size: 18px; } }
.cards-hero { aspect-ratio: 8 / 3; background: #2a0d0a; box-shadow: 0 10px 24px rgba(120, 50, 20, 0.3); }
.cards-hero::after { display: none; }
.cards-hero .fish-hero-bg { object-position: 50% 50%; animation-duration: 18s; }
.cards-hero-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(20, 6, 2, 0.88)); }
.cards-hero-bar .fish-sub { font-size: 11.5px; }
.cards-hero-bar .fish-play { flex: none; }
.cards-map { aspect-ratio: 1 / 1; background: #123; }
.cards-map::after { display: none; }
.cards-map img { object-position: 50% 50%; }

/* PixelLab category icons */
img.cat-ico { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(60, 20, 60, 0.25)); transition: transform 0.2s; }
.cat.on img.cat-ico { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.sec-ico { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 360px) { img.cat-ico { width: 23px; height: 23px; } }

/* side menu: PixelLab icons beside the game categories */
.dr-links a:has(.dr-ico) { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.dr-ico { flex: none; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(60, 20, 60, 0.25)); }
/* the floating wheel button stays under the open side menu */
body:has(.drawer.open) #dw-fab { visibility: hidden; }