/* Doki.se — Poki-style design ported from templates/base.twig (Slim). */

[x-cloak] { display: none !important; }
/* Doki Global Background */
#doki-global-bg {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, #4a148c 0%, #311b92 40%, #1a1a2e 100%);
    z-index: -100;
    overflow: hidden;
    animation: softHue 20s infinite alternate;
}

#doki-global-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    animation: panBg 60s linear infinite;
}

#doki-global-bg::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(108, 92, 231, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.15) 0%, transparent 20%);
    animation: rotateBg 30s linear infinite;
}

@keyframes panBg {
    0% { transform: translateY(0); }
    100% { transform: translateY(40px); }
}

@keyframes rotateBg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes softHue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(15deg); }
}



:root {
    --fontBody: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fontTorus: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bezier: cubic-bezier(.25,.1,.25,1);
    --cellSize: 94px;
    --cellSpacing: 16px;

    /* New Theme Colors */
    --primary: #6C5DD3;
    --primary-hover: #5b4cc4;
    --accent: #FF754C;
    --dark-bg: #111422;
    --card-bg: rgba(255, 255, 255, 0.95);
    --text-main: #11142b;
    --text-secondary: #6B7280;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(12px);

    /* Poki Colors (Legacy/Fallback) */
    --poki-blue: #009cff;
    --blue-1: #002b50;
    --blue-3: #054a91;
    --blue-5: #0074e0;
    --green-5: #3cf7dc;
    --green-7: #83ffe7;
    --grey-3: #5d6b84;
    --grey-5: #bac9de;
    --grey-7: #f0f5fc;
    --pure-white: #fff;

    /* Shadows */
    --shadow-mid: 0px 7px 10px 4px #5d6b8433;
    --shadow-hover: 0px 12px 16px 8px #5d6b844d;
}

body { 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
    background: transparent;
    min-height: 100vh;
}

/* Glassmorphism Classes */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Game Tile Styles (Glassmorphism) */
.game-tile {
    position: relative;
    background: var(--card-bg) !important;
    border-radius: 20px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    aspect-ratio: 1/1;
}

.cat-tile {
    background: var(--card-bg) !important;
    border-radius: 20px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px;
}

.game-tile:hover, .cat-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--primary);
    z-index: 10;
}

.cat-icon {
    font-size: 2.5rem;
    margin-bottom: 8px; /* Maintain spacing */
}

.cat-tile:hover .cat-icon {
    transform: scale(1.1);
}

.cat-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1rem;
}

/* ===== GRID SYSTEM ===== */
.poki-grid {
    display: grid;
    grid-auto-flow: row dense;
    justify-content: center;
    margin: var(--cellSpacing) auto 0;
    padding: 0;
    gap: var(--cellSpacing);
    grid-template-columns: repeat(var(--gridCols, 7), var(--cellSize));
    grid-template-rows: repeat(auto-fill, var(--cellSize));
    list-style: none;
}

/* Responsive columns: n columns need n*110-16 px plus 32 px of margin, so the grid always fits */
@media (max-width: 565px) { :is(.poki-grid, .category-frame) { --gridCols: 3; } }
@media (min-width: 566px) and (max-width: 785px) { :is(.poki-grid, .category-frame) { --gridCols: 5; } }
@media (min-width: 786px) and (max-width: 1005px) { :is(.poki-grid, .category-frame) { --gridCols: 7; } }
@media (min-width: 1006px) and (max-width: 1335px) { :is(.poki-grid, .category-frame) { --gridCols: 9; } }
@media (min-width: 1336px) and (max-width: 1555px) { :is(.poki-grid, .category-frame) { --gridCols: 12; } }
@media (min-width: 1556px) and (max-width: 1885px) { :is(.poki-grid, .category-frame) { --gridCols: 14; } }
@media (min-width: 1886px) { :is(.poki-grid, .category-frame) { --gridCols: 17; } }
/* Phones under 346px: shrink the cells instead of overflowing */
@media (max-width: 345px) { :root { --cellSize: calc((100vw - 64px) / 3); } }

/* ===== LOGO CELL ===== */
.logo-cell {
    grid-column: span 2;
    grid-row: span 1;
    height: var(--cellSize);
    background: var(--pure-white);
    border-radius: 16px;
    box-shadow: var(--shadow-mid);
    padding: 0;
    display: flex;
    overflow: hidden;
}

.logo-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    font: 700 28px var(--fontTorus);
    color: var(--blue-1);
    text-decoration: none;
    letter-spacing: -1px;
}

.logo-text span { color: var(--poki-blue); }

.logo-right {
    width: 64px;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--grey-7);
}

.tool-btn {
    flex: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--poki-blue);
    transition: background 0.2s;
    text-decoration: none;
}

.tool-btn:hover { background: var(--grey-7); }

.tool-btn.search-btn svg { width: 20px; height: 20px; stroke-width: 3px; }
.tool-btn.profile-btn svg { width: 22px; height: 22px; stroke-width: 2.5px; }

/* ===== GAME TILES ===== */
.game-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-mid);
    transition: transform 0.15s var(--bezier), box-shadow 0.15s var(--bezier);
    cursor: pointer;
    background: var(--pure-white);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
}

.game-tile:hover {
    transform: scale(1.06);
    z-index: 10;
    box-shadow: var(--shadow-hover);
}

.game-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 43, 80, 0.8);
    color: white;
    font: 700 14px var(--fontTorus);
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.2s var(--bezier);
    z-index: 20;
    pointer-events: none;
}

.game-tile:hover .tile-title { transform: translateY(0); }

/* Tile Sizes */
.tile-1x1 { grid-column: span 1; grid-row: span 1; }
.tile-2x1 { grid-column: span 2; grid-row: span 1; }
.tile-2x2 { grid-column: span 2; grid-row: span 2; }
.tile-3x3 { grid-column: span 3; grid-row: span 3; }
/* Extra Sizes for Category Header */
.tile-3x1 { grid-column: span 3; grid-row: span 1; }
.tile-4x1 { grid-column: span 4; grid-row: span 1; }
.tile-5x1 { grid-column: span 5; grid-row: span 1; }

/* ===== CATEGORY ZONE ===== */
.category-section {
    margin: 60px auto 40px;
}

/* Category cards must fit their grid cells, including padding and borders. */
.category-section .poki-grid {
    grid-template-rows: none;
    grid-auto-rows: var(--cellSize);
}
.category-section .cat-tile {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}
.category-section .cat-icon {
    flex-shrink: 0;
    margin: 0;
}
.category-section .cat-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cat-tile {
    background: var(--pure-white);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow-mid);
    transition: transform 0.2s var(--bezier), box-shadow 0.2s var(--bezier);
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.cat-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    z-index: 5;
}

.cat-tile.tile-1x1 { flex-direction: column; padding: 8px; gap: 8px; text-align: center; }
.cat-tile.tile-1x1 .cat-icon { width: 36px; height: 36px; font-size: 20px; background: var(--grey-7); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cat-tile.tile-1x1 .cat-name { font: 700 11px/1.2 var(--fontTorus); color: var(--blue-1); }

.cat-tile.tile-2x1 { flex-direction: row; padding: 0 24px; gap: 16px; text-align: left; }
.cat-tile.tile-2x1 .cat-icon { width: 48px; height: 48px; font-size: 28px; background: var(--grey-7); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cat-tile.tile-2x1 .cat-name { font: 700 16px/1.2 var(--fontTorus); color: var(--blue-1); text-transform: uppercase; }

.cat-tile.tile-2x2 { flex-direction: column; padding: 16px; gap: 16px; text-align: center; background: #ffdb00; color: #3b0e5c; }
.cat-tile.tile-2x2 .cat-icon { width: 80px; height: 80px; font-size: 48px; background: rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cat-tile.tile-2x2 .cat-name { font: 700 22px/1.2 var(--fontTorus); color: #3b0e5c; text-transform: uppercase; }
.cat-tile.tile-2x2:hover { background: #ffe333; color: #3b0e5c; transform: scale(1.02); }

.category-section .cat-tile.tile-1x1 .cat-name { font-size: 12px; }
.category-section .cat-tile.tile-2x1 { padding: 0 16px; gap: 12px; }
.category-section .cat-tile.tile-2x1 .cat-icon { width: 40px; height: 40px; font-size: 24px; }

/* Transparent category illustrations share the same tile grid as the games. */
.category-section .cat-tile.tile-1x1:has(.cat-icon-art) { padding: 4px; gap: 4px; }
.category-section .cat-tile.tile-1x1 .cat-icon-art { width: 48px; height: 48px; }
.category-section .cat-tile.tile-2x1:has(.cat-icon-art) { padding: 0 12px; gap: 10px; }
.category-section .cat-tile.tile-2x1 .cat-icon-art { width: 64px; height: 64px; }
.category-section .cat-tile.tile-2x2 .cat-icon-art { width: 112px; height: 112px; }
.category-section .cat-tile .cat-icon-art { background: transparent; border-radius: 0; }
.category-art { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ===== SKELETON ===== */
@keyframes shimmer {
    0% { background-color: rgba(255,255,255,0.5); }
    40% { background-color: rgba(255,255,255,0); }
    100% { background-color: rgba(255,255,255,0.5); }
}
.skeleton {
    animation: shimmer 0.7s infinite forwards;
    background-color: rgba(255,255,255,0.5);
    border-radius: 16px;
    box-shadow: var(--shadow-mid);
}
/* ===== POKI CONTENT CARD (Shared with Game & Category) ===== */
.poki-content-card {
    background: var(--poki-blue);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-mid);
    margin-bottom: 40px;
}

/* Blue Top Bar (Breadcrumbs) */
.poki-content-card nav {
    padding: 12px 24px;
    font: 700 12px/1 var(--fontTorus);
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.poki-content-card nav a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.poki-content-card nav a:hover {
    color: white;
    text-decoration: underline;
}

.poki-content-card nav span { opacity: 0.6; }

/* White Inner Content */
.poki-content-card .content-inner {
    background: var(--pure-white);
    padding: 40px;
}

.poki-content-card header h2 {
    font: 700 32px/1.2 var(--fontTorus);
    margin: 0 0 24px 0;
    color: var(--blue-1);
}

.poki-content-card .seo-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--grey-3);
    margin-bottom: 48px;
}

.poki-content-card h3, .poki-content-card h4 {
    font: 700 22px var(--fontTorus);
    margin: 0 0 20px 0;
    color: var(--blue-1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.poki-content-card h3::before, .poki-content-card h4::before {
    content: '';
    display: block;
    width: 6px;
    height: 24px;
    background: var(--poki-blue);
    border-radius: 3px;
}

/* List Styles */
.poki-content-card ul, .poki-content-card ol {
    margin: 0 0 48px 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.poki-content-card ol:last-child { margin-bottom: 0; }

.poki-content-card li a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--grey-7);
    border-radius: 12px;
    color: var(--blue-3);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s var(--bezier);
}

.poki-content-card li a::before {
    content: '🎮';
    margin-right: 10px;
    font-size: 16px;
    filter: grayscale(1);
    transition: filter 0.2s;
}

.poki-content-card li a:hover {
    background: var(--poki-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 156, 255, 0.3);
    transform: translateY(-2px);
}

.poki-content-card li a:hover::before { filter: grayscale(0); }

/* ===== Components that used inline styles in the Slim templates ===== */
.poki-container { padding: 0 16px; }
.page-heading { max-width: 1200px; margin: 24px auto 0; text-align: center; }
.page-heading h1 { font: 700 32px/1.2 var(--fontTorus); color: #fff; margin: 0; }
.page-heading p { color: rgba(255,255,255,0.75); font-size: 15px; margin: 8px 0 0; }

/* Logo cell (2x1) with random + recently played */
.logo-tile { position: relative; overflow: visible; display: flex; align-items: stretch; padding: 0; z-index: 40; aspect-ratio: auto; }
.logo-tile:hover { transform: none; }
.logo-tile .logo-link { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.logo-tile .logo-link img { max-width: 100%; max-height: 80%; width: auto; height: auto; object-fit: contain; }
.logo-actions { width: 60px; display: flex; flex-direction: column; border-left: 2px solid #f3f4f6; }
.logo-actions a, .logo-actions button {
    position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; text-decoration: none; transition: background 0.2s;
}
.logo-actions a { border-bottom: 2px solid #f3f4f6; }
.logo-actions a:hover, .logo-actions button:hover { background: #f9fafb; }
.recent-count {
    position: absolute; top: 4px; right: 12px; min-width: 16px; padding: 1px 4px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; text-align: center;
    border: 2px solid #fff; border-radius: 99px;
}
.recent-panel {
    position: absolute; top: 100%; left: 0; width: 100%; z-index: 50; margin-top: 8px;
    padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.95);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); backdrop-filter: blur(10px);
}
.recent-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--blue-1); font-size: 0.9rem; font-weight: 800; }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; }
.recent-grid a { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.recent-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-grid span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 2px 2px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff;
    font-size: 0.6rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-empty { padding: 10px; text-align: center; color: var(--grey-3); font-size: 0.8rem; margin: 0; }

/* Category page */
.empty-category {
    grid-column: 1 / -1; grid-row: span 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 40px; border-radius: 16px; background: rgba(255,255,255,0.5); color: var(--blue-1); text-align: center;
}
.empty-category h2 { font: 700 24px var(--fontTorus); margin: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 24px 0; color: #fff; font-weight: 700; }
.pagination a { padding: 10px 18px; border-radius: 12px; background: var(--pure-white); color: var(--blue-1); text-decoration: none; box-shadow: var(--shadow-mid); }
.pagination a:hover { background: var(--poki-blue); color: #fff; }
.content-wrap { max-width: 900px; margin: 60px auto 0; padding-bottom: 40px; }
.poki-content-card .faq-item { margin-bottom: 20px; }
.poki-content-card .faq-item h4 { font-size: 16px; margin-bottom: 8px; }
.poki-content-card .faq-item h4::before { display: none; }
.poki-content-card .faq-item p { font-size: 14px; line-height: 1.6; color: var(--grey-3); margin: 0; }
.poki-content-card .content-faq { margin-top: 40px; border-top: 1px solid var(--grey-7); padding-top: 24px; }

/* Category pages: navigation and content stay outside the game mosaic. */
.category-page { font-family: var(--fontBody); }
.category-frame {
    width: calc(var(--gridCols, 7) * var(--cellSize) + (var(--gridCols, 7) - 1) * var(--cellSpacing));
    max-width: 100%; margin: 20px auto 0;
}
.category-page *, .category-page *::before, .category-page *::after { box-sizing: border-box; }
.category-topbar { display: flex; align-items: center; gap: 28px; margin-bottom: 20px; }
.category-topbar .logo-tile { flex: 0 0 auto; width: calc(2 * var(--cellSize) + var(--cellSpacing)); height: var(--cellSize); }
.category-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; color: var(--grey-5); font-size: 13px; }
.category-breadcrumb a { color: #fff; text-decoration: none; }
.category-breadcrumb a:hover { text-decoration: underline; }
.category-breadcrumb [aria-current] { overflow-wrap: anywhere; }
.category-hero {
    display: flex; align-items: center; gap: 28px; padding: 24px 32px; margin-bottom: 18px;
    background: var(--card-bg); border-radius: 24px; color: var(--blue-1); box-shadow: var(--shadow-mid);
}
.category-hero .cat-icon { flex: 0 0 128px; width: 128px; height: 128px; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.category-hero-copy { min-width: 0; }
.category-eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #5b4cc4; }
.category-eyebrow span { padding: 5px 10px; background: #ece9ff; border-radius: 8px; }
.category-eyebrow span + span { background: #e4f8f3; color: #176554; }
.category-hero h1 { font: 800 clamp(24px, 2.5vw, 36px)/1.15 var(--fontTorus); margin: 0; overflow-wrap: anywhere; letter-spacing: -0.5px; }
.category-hero p { max-width: 760px; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--grey-3); }
.category-related { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.category-related a {
    display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px 6px 10px;
    border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1);
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
}
.category-related .cat-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; font-size: 22px; flex-shrink: 0; }
.category-related a:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.category-related .category-all-link { padding: 6px 14px; }
.category-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.category-section-heading h2 { font: 750 22px/1.2 var(--fontTorus); color: #fff; margin: 0; }
.category-section-heading p { font-size: 13px; color: var(--grey-5); margin: 0; }
.category-game-grid { grid-template-rows: none; grid-auto-rows: var(--cellSize); margin-top: 0; }
.category-game-grid .game-tile { min-width: 0; min-height: 0; }
.category-game-grid .game-tile:focus-visible .tile-title { transform: translateY(0); }
.category-page :is(a, button, input, summary):focus-visible { outline: 3px solid var(--green-5); outline-offset: 4px; }
.category-pagination { gap: 10px; margin: 32px 0; font-size: 14px; }
.category-pagination > span { padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.1); }
.category-pagination a { min-height: 44px; display: flex; align-items: center; }
.category-info { max-width: 1000px; margin-top: 48px; }
.category-info .poki-content-card { background: var(--pure-white); border-radius: 24px; }
.category-info .content-inner { padding: 32px; }
.category-info .seo-text { margin-bottom: 28px; }
.category-info .seo-text h3 { margin-top: 28px; }
.category-info header h2 { font-size: 28px; }
.category-info h3 { font-size: 20px; line-height: 1.3; }
.category-info h3::before { flex-shrink: 0; }
.category-game-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 32px; }
.category-game-lists section { min-width: 0; }
.category-game-lists h3 { min-height: 52px; }
.category-info .category-game-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.category-info .category-game-list a { gap: 10px; min-height: 64px; padding: 8px 10px; font-size: 13px; line-height: 1.35; }
.category-info .category-game-list a::before { display: none; }
.category-game-list img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.category-game-list .category-game-rank { width: 14px; font-size: 12px; opacity: .65; flex-shrink: 0; }
.category-game-list .category-game-arrow { margin-left: auto; flex-shrink: 0; }
.category-faq details { border-top: 1px solid #e7edf5; }
.category-faq details:last-child { border-bottom: 1px solid #e7edf5; }
.category-faq summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; font-weight: 700; color: var(--blue-1); line-height: 1.45; }
.category-faq summary::-webkit-details-marker { display: none; }
.category-faq summary::after { content: '+'; display: grid; place-items: center; width: 28px; height: 28px; background: var(--grey-7); border-radius: 50%; font-size: 20px; flex-shrink: 0; }
.category-faq details[open] summary::after { content: '−'; }
.category-faq details p { margin: 0; padding: 0 36px 20px 0; color: var(--grey-3); font-size: 15px; line-height: 1.7; }

/* Category directory: illustrated highlights, then a searchable full list. */
.category-featured { margin: 30px 0 40px; }
.category-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 16px; }
.category-featured .cat-tile { width: auto; height: auto; min-height: 168px; padding: 16px 10px; gap: 5px; }
.category-featured .cat-icon { width: 88px; height: 88px; margin: 0 0 6px; flex-shrink: 0; display: grid; place-items: center; font-size: 50px; }
.category-featured .cat-name { font: 750 15px/1.3 var(--fontTorus); text-align: center; color: var(--blue-1); overflow-wrap: anywhere; }
.category-featured .cat-count { font-size: 12px; color: var(--grey-3); }
.category-directory-section { margin-bottom: 60px; }
.category-directory-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.category-directory-toolbar .category-section-heading { display: block; margin: 0; }
.category-directory-toolbar .category-section-heading p { margin-top: 8px; }
.category-search { width: 320px; max-width: 100%; }
.category-directory-search { width: 100%; margin: 24px 0; }
.category-search label { display: block; font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.category-search input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: #fff; color: var(--blue-1); font: inherit; font-size: 14px; }
.category-directory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.category-directory-link { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 62px; padding: 14px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; color: #fff; text-decoration: none; }
.category-directory-link > span:first-child { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.category-directory-link .cat-count { margin-left: auto; font-size: 12px; color: var(--grey-5); white-space: nowrap; }
.category-directory-arrow { color: var(--grey-5); }
.category-directory-link:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.4); }
.category-search-empty { padding: 28px; text-align: center; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; line-height: 1.6; }
.category-page [hidden] { display: none !important; }

@media (max-width: 565px) {
    .category-frame { margin-top: 16px; }
    .category-topbar { gap: 16px; margin-bottom: 16px; }
    .category-topbar .logo-tile { width: 148px; height: 64px; }
    .category-topbar .logo-actions { width: 42px; }
    .category-breadcrumb { font-size: 12px; gap: 6px; }
    .category-breadcrumb a:first-child, .category-breadcrumb > span:first-of-type { display: none; }
    .category-hero { display: flow-root; padding: 18px; border-radius: 20px; }
    .category-hero .cat-icon { float: right; width: 64px; height: 64px; font-size: 40px; margin: 0 0 8px 12px; }
    .category-eyebrow { gap: 5px; font-size: 10px; }
    .category-eyebrow span { padding: 4px 6px; }
    .category-hero h1 { font-size: 24px; }
    .category-hero p { clear: both; font-size: 13px; line-height: 1.55; padding-top: 10px; margin-top: 0; }
    .category-related { gap: 6px; margin-bottom: 22px; }
    .category-related a { font-size: 12px; min-height: 42px; padding: 5px 10px; gap: 6px; }
    .category-related .cat-icon { width: 24px; height: 24px; font-size: 18px; }
    .category-section-heading { gap: 6px; }
    .category-section-heading h2 { font-size: 20px; }
    .category-section-heading p { font-size: 11px; }
    .category-pagination { font-size: 12px; gap: 8px; }
    .category-pagination a, .category-pagination > span { padding: 10px 12px; }
    .category-info .content-inner { padding: 22px 18px; }
    .category-info header h2 { font-size: 24px; }
    .category-info h3 { font-size: 18px; }
    .category-info .seo-text { font-size: 14px; line-height: 1.7; }
    .category-info .seo-text :is(ul, ol) { grid-template-columns: minmax(0, 1fr); }
    .category-game-lists h3 { min-height: 0; }
    .category-faq summary { font-size: 14px; padding: 16px 0; gap: 12px; }
    .category-faq details p { font-size: 13px; padding-right: 0; }
    .category-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .category-featured .cat-tile { min-height: 160px; padding: 12px 8px; }
    .category-featured .cat-icon { width: 80px; height: 80px; }
    .category-featured .cat-name { font-size: 14px; }
    .category-search { width: 100%; }
}

@media (hover: none) {
    .category-game-grid .tile-title { transform: translateY(0); padding: 18px 5px 6px; font-size: 11px; line-height: 1.2; background: linear-gradient(transparent, rgba(0, 25, 55, .85)); }
}

/* Home SEO text and static pages */
.seo-block, .static-page { max-width: 900px; margin: 80px auto 40px; padding: 0 20px; font-family: var(--fontBody); color: var(--grey-5); line-height: 1.8; }
.static-page { max-width: 800px; margin-top: 40px; }
.seo-block h2, .static-page h1, .static-page h2 { font-family: var(--fontTorus); color: var(--pure-white); }
.seo-block h2 { font-size: 24px; margin: 0 0 16px; }
.seo-block h3 { font: 700 18px var(--fontTorus); color: var(--pure-white); margin: 0 0 12px; }
.static-page h1 { font-size: 32px; margin: 0 0 24px; }
.static-page h2 { font-size: 24px; margin: 32px 0 16px; }
.static-page strong, .static-page a { color: var(--pure-white); }
.seo-block a { color: var(--pure-white); font-weight: 600; }
.seo-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 40px; }
.seo-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.seo-links a { color: var(--green-5); text-decoration: none; }
.seo-about { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }

/* 404 */
.not-found { max-width: 700px; margin: 80px auto; padding: 40px 20px; text-align: center; }
.not-found .code { font: 700 96px/1 var(--fontTorus); color: var(--primary); margin: 0; }
.not-found h1 { font: 700 32px var(--fontTorus); color: #fff; margin: 16px 0 12px; }
.not-found p { color: rgba(255,255,255,0.8); font-size: 16px; margin: 0 0 32px; }
.not-found .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.button { background: var(--primary); color: #fff; padding: 14px 28px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.button.secondary { background: rgba(255,255,255,0.15); }

/* Footer */
.site-footer { margin-top: 80px; background: var(--pure-white); border-top: 1px solid var(--grey-7); padding: 60px 20px 40px; font-family: var(--fontBody); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-bottom: 60px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-columns p { color: var(--grey-3); font-size: 14px; line-height: 1.6; max-width: 300px; }
.footer-columns nav { display: flex; flex-direction: column; gap: 12px; }
.footer-columns h4 { font: 700 16px var(--fontTorus); text-transform: uppercase; color: var(--blue-1); margin: 0 0 8px; }
.footer-columns nav a { color: var(--grey-3); text-decoration: none; font-weight: 500; }
.footer-columns nav a:hover { color: var(--poki-blue); }
.app-badge { height: 50px; background: #000; border-radius: 8px; opacity: 0.5; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.app-badge strong { font-size: 14px; }
.app-badge small { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #ccc; }
.footer-bottom { border-top: 1px solid var(--grey-7); padding-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--grey-3); }
.footer-bottom .heart { color: #e74c3c; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #doki-global-bg, #doki-global-bg::before, #doki-global-bg::after { animation: none; }
    .game-tile, .cat-tile, .tile-title { transition: none; }
    .game-tile:hover, .cat-tile:hover { transform: none; }
}