/* ============================================================
   ANT mobile fun toolbar + Poki-style mosaic
   Mobile/coarse-pointer only. Desktop intentionally unchanged.
   ============================================================ */

.ant-mobile-shell,
.ant-mobile-card-title,
.ant-mobile-directory {
    display: none;
}

@media (max-width: 820px) and (pointer: coarse) {
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
        background: #edf2f4 !important;
        scroll-padding-top: 104px;
    }

    body {
        display: block !important;
        min-height: 100dvh !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        background: #edf2f4 !important;
    }

    .skip-link {
        z-index: 3000;
    }

    /* --------------------------------------------------------
       Sticky white toolbar
       -------------------------------------------------------- */
    .ant-mobile-shell {
        position: sticky !important;
        top: 0 !important;
        z-index: 1500 !important;
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: max(4px, env(safe-area-inset-top)) 0 0;
        background: rgba(255,255,255,.97);
        border: 0 !important;
        outline: 0 !important;
        box-shadow: 0 5px 18px rgba(24, 45, 54, .09);
        -webkit-backdrop-filter: blur(12px) saturate(1.08);
        backdrop-filter: blur(12px) saturate(1.08);
    }

    .ant-mobile-toolbar-core {
        width: min(calc(100% - 10px), 760px);
        margin: 0 auto;
        padding: 4px 5px 5px;
        border: 0;
        border-radius: 0;
        background: #fff;
    }

    .ant-mobile-toolbar-row {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        min-height: 39px;
        padding: 0 4px;
    }

    .ant-mobile-wordmark {
        display: inline-flex;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 0;
        min-width: 82px;
        height: 34px;
        color: #10252c !important;
        font-family: var(--font-display);
        font-weight: 800;
        line-height: .82;
        letter-spacing: -.09em;
        text-decoration: none !important;
        white-space: nowrap;
        transform-origin: left center;
        animation: ant-mobile-brand-breathe 7.2s ease-in-out infinite;
    }

    .ant-mobile-wordmark span {
        display: inline-block;
        color: #10252c !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        transform-origin: 50% 90%;
    }

    .ant-mobile-wordmark span:nth-child(1) {
        font-size: 1.68rem;
        transform: rotate(-6deg) translateY(1px);
    }

    .ant-mobile-wordmark span:nth-child(2) {
        margin-left: -1px;
        font-size: 1.34rem;
        transform: rotate(3deg) translateY(-2px);
    }

    .ant-mobile-wordmark span:nth-child(3) {
        margin-left: 1px;
        color: #078ca4 !important;
        font-size: 1.83rem;
        transform: rotate(-2deg) translateY(1px);
    }

    .ant-mobile-quicknav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        min-width: 0;
    }

    .ant-mobile-quicknav a {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #2c3f46;
        text-decoration: none !important;
    }

    .ant-mobile-quicknav a:active {
        transform: scale(.94);
        background: #eef3f5;
    }

    .ant-mobile-quicknav a[aria-current] {
        background: #10252c;
        color: #fff;
    }

    .ant-mobile-quicknav svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        stroke: none;
    }

    .ant-mobile-searchbar {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) 30px;
        align-items: center;
        gap: 4px;
        min-height: 41px;
        margin-top: 2px;
        padding: 0 6px 0 10px;
        border: 0;
        border-radius: 12px;
        background: #eef2f4;
        box-shadow: inset 0 0 0 1px rgba(28,55,64,.025);
    }

    .ant-mobile-searchbar > svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: #667980;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .ant-mobile-searchbar input {
        width: 100%;
        min-width: 0;
        height: 39px;
        padding: 0;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #13262d;
        font: 650 .92rem/1 var(--font-display);
        appearance: none;
        -webkit-appearance: none;
    }

    .ant-mobile-searchbar input::placeholder {
        color: #839198;
        opacity: 1;
    }

    .ant-mobile-searchbar input::-webkit-search-cancel-button {
        display: none;
    }

    .ant-mobile-searchbar button {
        display: none;
        place-items: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(16,37,44,.08);
        color: #31454c;
        font: 500 1.2rem/1 Arial, sans-serif;
    }

    .ant-mobile-searchbar.has-value button {
        display: grid;
    }

    /* --------------------------------------------------------
       Pull the cards directly against the toolbar.
       -------------------------------------------------------- */
    .top-games-page,
    .category-page {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: initial !important;
        background: #edf2f4 !important;
    }

    /* Homepage desktop experience stays in the DOM for desktop, but the phone uses
       the dedicated 50-game directory directly under the sticky toolbar. */
    .portal-page {
        display: none !important;
    }

    .top-games-page-head,
    .category-page-head,
    .top-games-archive-toolbar {
        display: none !important;
    }

    .top-games-section,
    .top-games-archive,
    .category-archive {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        content-visibility: visible !important;
        contain: none !important;
    }

    .top-games-section + .y8-story {
        margin-top: 8px !important;
    }

    /* --------------------------------------------------------
       Dense mixed-size mosaic.
       -------------------------------------------------------- */
    .ant-mobile-directory-grid,
    .top-games-section .top-games-grid,
    .top-games-archive-grid,
    .top-games-archive-grid.category-game-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        grid-auto-rows: clamp(102px, 30.5vw, 150px) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
        padding: 0 5px 10px !important;
        align-items: stretch !important;
    }

    .top-games-section .top-game-card,
    .top-games-section .top-game-card--mobile-extra,
    .archive-game-card,
    .category-game-card {
        position: relative !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #d7e0e3 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .top-games-section .top-game-media,
    .archive-game-media,
    .category-game-card .archive-game-media {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: #0b171c !important;
        touch-action: pan-y;
    }

    .top-games-section .top-game-media::after,
    .archive-game-media::after {
        content: "" !important;
        position: absolute !important;
        inset: auto 0 0 !important;
        z-index: 2 !important;
        height: 52% !important;
        pointer-events: none !important;
        background: linear-gradient(180deg, transparent, rgba(6,15,19,.58)) !important;
    }

    .top-games-section .top-game-media > img,
    .archive-game-media > img,
    .category-game-card .archive-game-media > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
        transform: none !important;
        filter: none !important;
    }

    .top-game-copy,
    .archive-game-body,
    .category-game-body {
        display: none !important;
    }

    .top-game-rank,
    .archive-game-rank,
    .archive-game-rating,
    .top-game-media [data-top-game-rank] {
        display: none !important;
    }

    .ant-mobile-card-title {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 7px;
        z-index: 4;
        display: block !important;
        overflow: hidden;
        color: #fff;
        font: 750 clamp(.66rem, 2.7vw, .86rem)/1.05 var(--font-display);
        letter-spacing: -.025em;
        text-shadow: 0 1px 5px rgba(0,0,0,.55);
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    /* Repeating, dense tile grammar. */
    .ant-mobile-directory-grid > .archive-game-card:nth-child(12n + 1),
    .top-games-grid > .top-game-card:nth-child(12n + 1),
    .top-games-archive-grid > .archive-game-card:nth-child(12n + 1) {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .ant-mobile-directory-grid > .archive-game-card:nth-child(12n + 4),
    .top-games-grid > .top-game-card:nth-child(12n + 4),
    .top-games-archive-grid > .archive-game-card:nth-child(12n + 4) {
        grid-column: span 1 !important;
        grid-row: span 2 !important;
    }

    .ant-mobile-directory-grid > .archive-game-card:nth-child(12n + 5),
    .ant-mobile-directory-grid > .archive-game-card:nth-child(12n + 8),
    .top-games-grid > .top-game-card:nth-child(12n + 5),
    .top-games-grid > .top-game-card:nth-child(12n + 8),
    .top-games-archive-grid > .archive-game-card:nth-child(12n + 5),
    .top-games-archive-grid > .archive-game-card:nth-child(12n + 8) {
        grid-column: span 2 !important;
        grid-row: span 1 !important;
    }

    .ant-mobile-directory-grid > .archive-game-card:nth-child(12n + 10),
    .top-games-grid > .top-game-card:nth-child(12n + 10),
    .top-games-archive-grid > .archive-game-card:nth-child(12n + 10) {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    /* --------------------------------------------------------
       One very light glint on randomly decorated cards.
       JS chooses which cards receive the class.
       -------------------------------------------------------- */
    .top-game-media.ant-mobile-glint::before,
    .archive-game-media.ant-mobile-glint::before {
        content: "";
        position: absolute;
        top: -20%;
        bottom: -20%;
        left: -45%;
        z-index: 5;
        width: 24%;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.04) 24%,
            rgba(255,255,255,.30) 50%,
            rgba(255,255,255,.05) 72%,
            transparent 100%
        );
        transform: translateX(-180%) skewX(-14deg);
        animation: ant-mobile-glint var(--ant-glint-duration, 12s) ease-in-out var(--ant-glint-delay, 0s) infinite;
    }

    .ant-mobile-preview {
        z-index: 1 !important;
    }

    .top-game-media.ant-preview-playing > img,
    .archive-game-media.ant-preview-playing > img {
        opacity: 0 !important;
    }

    .ant-mobile-filtered-out {
        display: none !important;
    }

    .ant-mobile-search-empty {
        display: none;
        width: min(calc(100% - 10px), 750px);
        margin: 20px auto 28px;
        padding: 17px 14px;
        border-radius: 14px;
        background: #fff;
        color: #687b82;
        text-align: center;
        font: 650 .86rem/1.35 var(--font-display);
    }

    .ant-mobile-search-empty.is-visible {
        display: block;
    }

    .site-footer {
        margin-top: 8px !important;
    }
}

@keyframes ant-mobile-brand-breathe {
    0%, 86%, 100% { transform: scale(1); }
    90% { transform: scale(1.035) rotate(-.4deg); }
    94% { transform: scale(.99) rotate(.25deg); }
}

@keyframes ant-mobile-glint {
    0%, 82%, 100% {
        opacity: 0;
        transform: translateX(-180%) skewX(-14deg);
    }
    86% {
        opacity: .25;
    }
    92% {
        opacity: .12;
        transform: translateX(640%) skewX(-14deg);
    }
    94% {
        opacity: 0;
        transform: translateX(680%) skewX(-14deg);
    }
}

@media (max-width: 380px) and (pointer: coarse) {
    .ant-mobile-toolbar-core {
        width: calc(100% - 6px);
    }

    .ant-mobile-wordmark {
        min-width: 73px;
        transform: scale(.95);
        transform-origin: left center;
    }

    .ant-mobile-quicknav {
        gap: 1px;
    }

    .ant-mobile-quicknav a {
        width: 34px;
        height: 34px;
    }

    .ant-mobile-directory-grid,
    .top-games-section .top-games-grid,
    .top-games-archive-grid,
    .top-games-archive-grid.category-game-grid {
        gap: 4px !important;
        padding-inline: 4px !important;
        grid-auto-rows: clamp(94px, 30.5vw, 120px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ant-mobile-wordmark,
    .ant-mobile-glint::before {
        animation: none !important;
    }
}


/* Dedicated homepage mobile directory + real server-side pagination. */
@media (max-width: 820px) and (pointer: coarse) {
    .ant-mobile-directory {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #edf2f4 !important;
    }

    .ant-mobile-directory .ant-mobile-directory-grid {
        padding-top: 0 !important;
        padding-bottom: 7px !important;
    }

    .ant-mobile-pagination,
    .category-pagination {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: min(calc(100% - 10px), 760px) !important;
        margin: 2px auto 7px !important;
        padding: 5px 4px !important;
        border: 0 !important;
        background: transparent !important;
    }


    .ant-mobile-pagination {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .ant-mobile-pagination a,
    .ant-mobile-pagination span,
    .category-pagination-links a {
        display: grid !important;
        place-items: center !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 7px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: #263b43 !important;
        box-shadow: 0 2px 7px rgba(26,48,56,.06) !important;
        text-decoration: none !important;
        font: 750 .72rem/1 var(--font-display) !important;
    }

    .ant-mobile-pagination a[aria-current="page"],
    .category-pagination-links a[aria-current="page"] {
        background: #10252c !important;
        color: #fff !important;
    }

    .ant-mobile-pagination .is-disabled {
        opacity: .32 !important;
        box-shadow: none !important;
    }

    .ant-mobile-pagination .ant-mobile-page-ellipsis {
        min-width: 20px !important;
        padding: 0 2px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #73858b !important;
    }

    .category-pagination-label,
    .category-pagination-meta {
        display: none !important;
    }

    .category-pagination-links {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

/* ============================================================
   ANT mobile cleanup v1.0.1
   Thumb-only listings + ultra-minimal footer.
   ============================================================ */
@media (max-width: 820px) and (pointer: coarse) {
    /* Keep the mobile experience focused on the game artwork. */
    .webgl-card-body,
    .top-game-copy,
    .archive-game-body,
    .category-game-body,
    .top-games-end-cta,
    .category-end-cta,
    .ant-archive-story,
    .y8-story {
        display: none !important;
    }

    /* Two-line maximum footer on mobile. */
    .site-footer {
        margin: 4px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .site-footer .footer-main {
        display: none !important;
    }

    .site-footer .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 2px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        background: #fff !important;
        color: #65767d !important;
        text-align: center !important;
        font-size: .58rem !important;
        line-height: 1.2 !important;
        letter-spacing: .035em !important;
    }

    .site-footer .footer-bottom span {
        display: block !important;
        justify-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .site-footer .footer-bottom span:nth-child(3) {
        display: none !important;
    }
}

/* Mobile categories directory: same dense tile language as the game wall. */
@media (max-width: 820px) and (pointer: coarse) {
    .ant-categories-directory {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #edf2f4 !important;
    }

    .ant-categories-directory .top-games-archive-grid {
        padding-top: 0 !important;
        padding-bottom: 7px !important;
    }

    .ant-category-card .ant-mobile-card-title {
        right: 7px;
        white-space: normal;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.02;
    }
}