/*
 * Browser compatibility layer.
 * Keeps rendering stable across Chrome, Edge, Firefox, Safari and mobile WebViews
 * without changing page-specific layouts.
 */

:root {
    --pg-viewport-height: 100vh;
    --pg-small-viewport-height: 100vh;
    --pg-layout-height: 100vh;
    --pg-visual-height: 100vh;
    --pg-keyboard-height: 0px;
    --pg-keyboard-ratio: 0;
    --pg-keyboard-dock-bottom: 0px;
    --pg-cart-keyboard-bottom: 0px;
    --pg-visual-bottom-offset: 0px;
    --pg-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    min-width: 0;
    overflow-x: clip;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
    appearance: button;
    -webkit-appearance: button;
}

input,
textarea,
select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
}

input[type="search"] {
    -webkit-appearance: none;
    outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

button,
summary,
[role="button"],
a {
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pg-search-modal__backdrop,
    .pg-cart-panel__backdrop,
    .pg-modal__backdrop,
    .pg-auth-modal__backdrop,
    .pg-list-filter-backdrop,
    .pg-rating-modal__backdrop,
    .pg-review-modal__backdrop,
    .pg-review-success-modal__backdrop,
    .pg-detail-pc-download-modal__backdrop {
        background-color: rgba(9, 15, 26, 0.72) !important;
    }

    .pg-topbar,
    .pg-list-desktop-nav,
    .pg-bottom-nav,
    .pg-search-modal__dialog,
    .pg-cart-panel__sheet,
    .pg-list-filter-sheet,
    .pg-auth-modal__dialog {
        background-color: rgba(255, 255, 255, 0.96) !important;
    }
}

@supports (height: 100dvh) {
    :root {
        --pg-viewport-height: 100dvh;
    }
}

@supports (height: 100svh) {
    :root {
        --pg-small-viewport-height: 100svh;
    }
}

@media (max-width: 899px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    input,
    textarea,
    select {
        font-size: max(16px, 1em);
    }

    .pg-app-shell,
    .pg-topbar,
    .pg-bottom-nav,
    .pg-search-modal,
    .pg-password-modal,
    .pg-success-modal,
    .pg-cart-panel,
    .pg-list-filter-overlay,
    .pg-rating-modal,
    .pg-review-modal,
    .pg-review-success-modal,
    .pg-detail-pc-download-modal {
        max-width: 100vw;
    }

    .pg-search-modal,
    .pg-password-modal,
    .pg-success-modal,
    .pg-cart-panel,
    .pg-list-filter-overlay,
    .pg-rating-modal,
    .pg-review-modal,
    .pg-review-success-modal,
    .pg-detail-pc-download-modal {
        min-height: var(--pg-small-viewport-height, 100vh);
    }

    .pg-keyboard-open .pg-bottom-nav {
        transform: translateY(100%);
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        scroll-behavior: auto !important;
    }
}

/* WordPress admin-bar compatibility for the PC list/category/search layouts. */
@media (min-width: 900px) {
    :root {
        --pg-wp-admin-bar-height: 0px;
    }

    body.admin-bar {
        --pg-wp-admin-bar-height: 32px;
    }

    body.admin-bar.page-template-page-list .pg-list-desktop-nav,
    body.admin-bar.category .pg-list-desktop-nav,
    body.admin-bar.search .pg-list-desktop-nav {
        top: var(--pg-wp-admin-bar-height, 32px) !important;
    }

    body.admin-bar.page-template-page-list .pg-list-filter-modal,
    body.admin-bar.category .pg-list-filter-modal,
    body.admin-bar.search .pg-list-filter-modal {
        top: var(--pg-wp-admin-bar-height, 32px) !important;
        min-height: calc(100vh - var(--pg-wp-admin-bar-height, 32px)) !important;
    }

    body.admin-bar.page-template-page-list .pg-list-filter-overlay,
    body.admin-bar.category .pg-list-filter-overlay,
    body.admin-bar.search .pg-list-filter-overlay {
        top: var(--pg-wp-admin-bar-height, 32px) !important;
    }
}

/* 360/legacy Chromium fallback for PC list/category layouts. */
@media (min-width: 900px) {
    body.page-template-page-list .pg-list-desktop-nav__inner,
    body.category .pg-list-desktop-nav__inner,
    body.search .pg-list-desktop-nav__inner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 1472px !important;
        height: 76px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__brand,
    body.category .pg-list-desktop-nav__brand,
    body.search .pg-list-desktop-nav__brand {
        position: absolute !important;
        top: 50% !important;
        left: 40px !important;
        transform: translateY(-50%) !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__links,
    body.category .pg-list-desktop-nav__links,
    body.search .pg-list-desktop-nav__links {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: auto !important;
        min-width: 390px !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: translate(-50%, -50%) !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__links a,
    body.category .pg-list-desktop-nav__links a,
    body.search .pg-list-desktop-nav__links a {
        display: inline-block !important;
        margin: 0 18px !important;
        vertical-align: middle !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__actions,
    body.category .pg-list-desktop-nav__actions,
    body.search .pg-list-desktop-nav__actions {
        position: absolute !important;
        top: 50% !important;
        right: 40px !important;
        display: block !important;
        white-space: nowrap !important;
        transform: translateY(-50%) !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__actions button,
    body.category .pg-list-desktop-nav__actions button,
    body.search .pg-list-desktop-nav__actions button {
        display: inline-flex !important;
        margin-left: 12px !important;
        vertical-align: middle !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__actions > .pg-nav-account--avatar,
    body.category .pg-list-desktop-nav__actions > .pg-nav-account--avatar,
    body.search .pg-list-desktop-nav__actions > .pg-nav-account--avatar {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 0 0 12px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 0 !important;
        vertical-align: middle !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-desktop-nav__actions > .pg-nav-account--avatar img,
    body.category .pg-list-desktop-nav__actions > .pg-nav-account--avatar img,
    body.search .pg-list-desktop-nav__actions > .pg-nav-account--avatar img {
        display: block !important;
        width: 28px !important;
        height: 28px !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        vertical-align: top !important;
    }

    body.page-template-page-list .pg-list-search-hero {
        right: auto !important;
        left: 50% !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: -50vw !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-search-hero__card {
        position: relative !important;
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: 480px !important;
        min-height: 480px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-search-hero__desktop-bg,
    body.page-template-page-list .pg-list-search-hero__video,
    body.page-template-page-list .pg-list-search-hero__card > img {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-position: center center !important;
        background-size: cover !important;
        object-fit: cover !important;
    }

    body.page-template-page-list .pg-list-search-hero__overlay {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding-top: 150px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-search-hero__overlay h2 {
        display: block !important;
        max-width: 960px !important;
        margin: 0 auto 32px !important;
        text-align: center !important;
    }

    body.page-template-page-list .pg-list-search {
        position: relative !important;
        display: block !important;
        width: 768px !important;
        max-width: calc(100% - 80px) !important;
        height: 56px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-search input {
        display: block !important;
        width: 100% !important;
        height: 56px !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-search .material-symbols-outlined {
        position: absolute !important;
        top: 50% !important;
        left: 20px !important;
        transform: translateY(-50%) !important;
    }

    body.page-template-page-list .pg-list-hot-searches,
    body.category .pg-list-hot-searches {
        display: block !important;
        max-width: 960px !important;
        margin: 28px auto 0 !important;
        text-align: center !important;
    }

    body.page-template-page-list .pg-list-hot-searches span,
    body.category .pg-list-hot-searches span,
    body.page-template-page-list .pg-list-hot-searches button,
    body.category .pg-list-hot-searches button {
        display: inline-block !important;
        margin: 0 6px 10px !important;
        vertical-align: middle !important;
    }

    body.page-template-page-list .pg-list-section,
    body.category .pg-list-section,
    body.search .pg-list-section {
        width: 100% !important;
        max-width: 1472px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-list .pg-list-desktop-filterbar,
    body.category .pg-list-desktop-filterbar {
        display: block !important;
        position: relative !important;
        min-height: 96px !important;
        padding-top: 24px !important;
    }

    body.page-template-page-list .pg-list-rank-tabs,
    body.category .pg-list-rank-tabs {
        display: inline-flex !important;
        vertical-align: middle !important;
    }

    body.page-template-page-list .pg-list-desktop-filter-button,
    body.category .pg-list-desktop-filter-button {
        position: absolute !important;
        top: 26px !important;
        right: 0 !important;
    }

    body.page-template-page-list .pg-list-card[hidden] {
        display: none !important;
    }

    body.page-template-page-list .pg-list-card--empty {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.page-template-page-list .pg-list-card__media {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body.page-template-page-list .pg-list-card__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.page-template-page-list .pg-list-card__media::after {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
    }

    body.page-template-page-list .pg-list-card__body {
        padding-right: 4px !important;
        padding-left: 4px !important;
    }
}

@media (max-width: 899px) {
    :root {
        --pg-mobile-hero-height: min(270px, 62.5vw);
    }

    body.page-template-page-list .pg-app-shell,
    body.category .pg-app-shell,
    body.search .pg-app-shell {
        width: min(640px, 100%) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-right: 22px !important;
        padding-left: 22px !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-home-mobile {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-hero,
    body.page-template-page-list .pg-list-search-hero__card,
    body.category .pg-list-search-hero__card,
    body.search .pg-list-search-hero__card {
        height: var(--pg-mobile-hero-height) !important;
        aspect-ratio: auto !important;
    }

    body.page-template-page-list .pg-list-section__head,
    body.category .pg-list-section__head,
    body.search .pg-list-section__head,
    body.playground-home .pg-home-mobile .pg-section__heading {
        align-items: center !important;
        min-height: 30px !important;
        margin-bottom: 18px !important;
    }

    body.page-template-page-list .pg-list-section__head h3,
    body.category .pg-list-section__head h3,
    body.search .pg-list-section__head h3,
    body.playground-home .pg-home-mobile .pg-section__heading h2 {
        margin: 0 !important;
        color: #101827 !important;
        font-size: 24px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    body.page-template-page-list .pg-list-card__badge--genre,
    body.page-template-page-list .pg-list-card:nth-child(1) .pg-list-card__badge--genre,
    body.category .pg-list-card__badge--genre,
    body.category .pg-list-card:nth-child(1) .pg-list-card__badge--genre,
    body.search .pg-list-card__badge--genre,
    body.search .pg-list-card:nth-child(1) .pg-list-card__badge--genre,
    body.playground-home .pg-home-mobile .pg-list-card__badge--genre,
    body.playground-home .pg-home-mobile .pg-list-card:nth-child(1) .pg-list-card__badge--genre {
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: calc(100% - 58px) !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;
        outline: 0 !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.28) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__badge--size,
    body.playground-home .pg-home-mobile .pg-game-card__size,
    body.page-template-page-list .pg-list-card__badge--size,
    body.page-template-page-list .pg-game-card__size,
    body.category .pg-list-card__badge--size,
    body.category .pg-game-card__size,
    body.search .pg-list-card__badge--size,
    body.search .pg-game-card__size {
        bottom: 10px !important;
        left: 10px !important;
        display: inline-flex !important;
        width: auto !important;
        height: 28px !important;
        min-height: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        background: rgba(0, 0, 0, 0.28) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
    }

    body.playground-home .pg-home-mobile .pg-game-grid,
    body.page-template-page-list .pg-list-grid,
    body.category .pg-list-grid,
    body.search .pg-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        row-gap: 26px !important;
        width: 100% !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card,
    body.page-template-page-list .pg-list-card,
    body.category .pg-list-card,
    body.search .pg-list-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background: #faf9fe !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__media,
    body.page-template-page-list .pg-list-card__media,
    body.category .pg-list-card__media,
    body.search .pg-list-card__media {
        display: block !important;
        height: 135px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #f6f7f9 0%, #eef1f4 100%) !important;
        box-shadow: none !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__media .pg-game-card__cover {
        position: static !important;
        display: contents !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__media img,
    body.page-template-page-list .pg-list-card__media img,
    body.category .pg-list-card__media img,
    body.search .pg-list-card__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__body,
    body.page-template-page-list .pg-list-card__body,
    body.category .pg-list-card__body,
    body.search .pg-list-card__body {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-width: 0 !important;
        min-height: 88px !important;
        padding: 12px !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__body h3,
    body.playground-home .pg-home-mobile .pg-list-card__body h3 a,
    body.playground-home .pg-home-mobile .pg-list-card__body h4,
    body.playground-home .pg-home-mobile .pg-list-card__body h4 a,
    body.page-template-page-list .pg-list-card__body h3,
    body.page-template-page-list .pg-list-card__body h3 a,
    body.page-template-page-list .pg-list-card__body h4,
    body.page-template-page-list .pg-list-card__body h4 a,
    body.category .pg-list-card__body h3,
    body.category .pg-list-card__body h3 a,
    body.category .pg-list-card__body h4,
    body.category .pg-list-card__body h4 a,
    body.search .pg-list-card__body h3,
    body.search .pg-list-card__body h3 a,
    body.search .pg-list-card__body h4,
    body.search .pg-list-card__body h4 a {
        display: block !important;
        margin: 0 0 8px !important;
        overflow: hidden !important;
        color: #101827 !important;
        font-size: 16px !important;
        line-height: 1.24 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__foot,
    body.page-template-page-list .pg-list-card__foot,
    body.category .pg-list-card__foot,
    body.search .pg-list-card__foot {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        min-height: 32px !important;
        padding: 0 !important;
    }

    body.playground-home .pg-home-mobile .pg-list-views,
    body.playground-home .pg-home-mobile .pg-view-count,
    body.playground-home .pg-home-mobile .pg-views,
    body.page-template-page-list .pg-list-views,
    body.page-template-page-list .pg-view-count,
    body.category .pg-list-views,
    body.category .pg-view-count,
    body.search .pg-list-views,
    body.search .pg-view-count {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: #717786 !important;
        font-size: 11px !important;
        line-height: 13px !important;
        font-weight: 500 !important;
    }

    body.playground-home .pg-home-mobile .pg-list-views svg,
    body.playground-home .pg-home-mobile .pg-views svg {
        width: 14px !important;
        height: 13px !important;
        flex: 0 0 14px !important;
    }

    body.playground-home .pg-home-mobile .pg-list-views .material-symbols-outlined,
    body.playground-home .pg-home-mobile .pg-view-count .material-symbols-outlined,
    body.page-template-page-list .pg-list-views .material-symbols-outlined,
    body.page-template-page-list .pg-view-count .material-symbols-outlined,
    body.category .pg-list-views .material-symbols-outlined,
    body.category .pg-view-count .material-symbols-outlined,
    body.search .pg-list-views .material-symbols-outlined,
    body.search .pg-view-count .material-symbols-outlined {
        display: inline-flex !important;
        width: 14px !important;
        height: 13px !important;
        flex: 0 0 14px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        line-height: 13px !important;
    }

    body.playground-home .pg-home-mobile .pg-list-views.pg-view-count > span:not(.material-symbols-outlined),
    body.playground-home .pg-home-mobile .pg-view-count > span:not(.material-symbols-outlined),
    body.page-template-page-list .pg-list-views.pg-view-count > span:not(.material-symbols-outlined),
    body.page-template-page-list .pg-view-count > span:not(.material-symbols-outlined),
    body.category .pg-list-views.pg-view-count > span:not(.material-symbols-outlined),
    body.category .pg-view-count > span:not(.material-symbols-outlined),
    body.search .pg-list-views.pg-view-count > span:not(.material-symbols-outlined),
    body.search .pg-view-count > span:not(.material-symbols-outlined) {
        display: inline-flex !important;
        height: 13px !important;
        align-items: center !important;
        line-height: 13px !important;
    }

    body.playground-home .pg-home-mobile .pg-list-add-button,
    body.page-template-page-list .pg-list-add-button,
    body.category .pg-list-add-button,
    body.search .pg-list-add-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #fefcff !important;
        background: #1068ea !important;
        box-shadow: none !important;
    }

    body.playground-home .pg-home-mobile .pg-list-add-button svg,
    body.page-template-page-list .pg-list-add-button .material-symbols-outlined,
    body.category .pg-list-add-button .material-symbols-outlined,
    body.search .pg-list-add-button .material-symbols-outlined {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
        line-height: 18px !important;
    }
}

@media (max-width: 360px) {
    body.page-template-page-list .pg-app-shell,
    body.category .pg-app-shell,
    body.search .pg-app-shell {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.playground-home .pg-home-mobile .pg-game-grid,
    body.page-template-page-list .pg-list-grid,
    body.category .pg-list-grid,
    body.search .pg-list-grid {
        column-gap: 12px !important;
        row-gap: 24px !important;
    }
}

@media (max-width: 899px) {
    :root {
        --pg-mobile-page-gutter: 22px;
        --pg-mobile-grid-gap: 16px;
    }

    body.playground-home .pg-home-mobile {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-home-mobile .pg-section,
    body.page-template-page-list .pg-app-shell,
    body.category .pg-app-shell,
    body.search .pg-app-shell {
        width: min(640px, 100%) !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: var(--pg-mobile-page-gutter) !important;
        padding-left: var(--pg-mobile-page-gutter) !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-mobile-hero-slider {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: var(--pg-mobile-hero-height) !important;
        margin-top: 0 !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__track,
    body.playground-home .pg-mobile-hero-slider .pg-hero__link,
    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__slide {
        height: 100% !important;
        border-radius: 0 !important;
    }

    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__track {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__track::-webkit-scrollbar {
        display: none !important;
    }

    body.playground-home .pg-mobile-hero-slider .pg-hero__link,
    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__slide {
        position: relative !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        transition: none !important;
    }

    body.playground-home .pg-mobile-hero-slider .pg-mobile-hero-slider__slide {
        user-select: none !important;
        -webkit-user-drag: none !important;
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    body.playground-home .pg-home-mobile > .pg-hero:not(.pg-mobile-hero-slider) {
        display: none !important;
    }

    body.playground-home .pg-home-mobile .pg-game-grid,
    body.page-template-page-list .pg-list-grid,
    body.category .pg-list-grid,
    body.search .pg-list-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: var(--pg-mobile-grid-gap) !important;
        row-gap: 26px !important;
        width: 100% !important;
    }
}

@media (min-width: 560px) and (max-width: 899px) {
    body.playground-home .pg-home-mobile .pg-game-grid,
    body.page-template-page-list .pg-list-grid,
    body.category .pg-list-grid,
    body.search .pg-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 360px) {
    :root {
        --pg-mobile-page-gutter: 14px;
        --pg-mobile-grid-gap: 12px;
    }
}

@media (max-width: 899px) {
    :root {
        --pg-mobile-page-gutter: clamp(14px, 4.8vw, 22px);
        --pg-mobile-grid-gap: clamp(12px, 3.6vw, 18px);
        --pg-mobile-card-min: clamp(132px, 37vw, 160px);
    }

    body.playground-home .pg-app-shell,
    body.page-template-page-list .pg-app-shell,
    body.category .pg-app-shell,
    body.search .pg-app-shell,
    body.page-template-page-ranking .pg-app-shell {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: var(--pg-mobile-page-gutter) !important;
        padding-left: var(--pg-mobile-page-gutter) !important;
        box-sizing: border-box !important;
    }

    body.playground-home,
    body.playground-home .pg-app-shell,
    body.playground-home .pg-home-mobile,
    body.playground-home .pg-home-mobile .pg-section {
        background: #faf9fe !important;
    }

    body.playground-home .pg-home-mobile,
    body.playground-home .pg-home-mobile .pg-section {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-home-mobile .pg-game-grid,
    body.page-template-page-list .pg-list-grid,
    body.category .pg-list-grid,
    body.search .pg-list-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(var(--pg-mobile-card-min), 1fr)) !important;
        column-gap: var(--pg-mobile-grid-gap) !important;
        row-gap: 26px !important;
        width: 100% !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__media,
    body.page-template-page-list .pg-list-card__media,
    body.category .pg-list-card__media,
    body.search .pg-list-card__media {
        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;
        aspect-ratio: auto !important;
    }

    .pg-bottom-nav {
        right: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile list sync: make home cards use the same visual rhythm as list pages. */
@media (max-width: 899px) {
    body.playground-home .pg-home-mobile .pg-section {
        margin-top: 24px !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading,
    body.page-template-page-list .pg-list-section__head,
    body.category .pg-list-section__head,
    body.search .pg-list-section__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        min-height: 34px !important;
        margin: 0 0 24px !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading h2,
    body.page-template-page-list .pg-list-section__head h3,
    body.category .pg-list-section__head h3,
    body.search .pg-list-section__head h3 {
        margin: 0 !important;
        color: #1a1b1f !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 34px !important;
        color: #0058bc !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__body,
    body.page-template-page-list .pg-list-card__body,
    body.category .pg-list-card__body,
    body.search .pg-list-card__body {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 88px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__body h3,
    body.playground-home .pg-home-mobile .pg-list-card__body h3 a,
    body.page-template-page-list .pg-list-card__body h4,
    body.page-template-page-list .pg-list-card__body h4 a,
    body.category .pg-list-card__body h4,
    body.category .pg-list-card__body h4 a,
    body.search .pg-list-card__body h4,
    body.search .pg-list-card__body h4 a {
        margin: 0 0 8px !important;
        color: #0f172a !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.24 !important;
        letter-spacing: 0 !important;
    }

    body.playground-home .pg-home-mobile .pg-list-card__foot,
    body.page-template-page-list .pg-list-card__foot,
    body.category .pg-list-card__foot,
    body.search .pg-list-card__foot {
        min-height: 32px !important;
    }
}

@media (max-width: 560px) {
    body.playground-home .pg-home-mobile .pg-list-card__body h3,
    body.playground-home .pg-home-mobile .pg-list-card__body h3 a,
    body.page-template-page-list .pg-list-card__body h4,
    body.page-template-page-list .pg-list-card__body h4 a,
    body.category .pg-list-card__body h4,
    body.category .pg-list-card__body h4 a,
    body.search .pg-list-card__body h4,
    body.search .pg-list-card__body h4 a {
        font-size: 16px !important;
    }
}

/* Mobile heading rhythm only: do not affect hero/search full-bleed blocks. */
@media (max-width: 899px) {
    body.playground-home .pg-home-mobile .pg-section {
        margin-top: 22px !important;
    }

    body.page-template-page-list .pg-list-search-hero,
    body.category .pg-list-search-hero,
    body.search .pg-list-search-hero {
        margin-bottom: 22px !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading,
    body.page-template-page-list .pg-list-section__head,
    body.category .pg-list-section__head,
    body.search .pg-list-section__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin-bottom: 24px !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading h2,
    body.page-template-page-list .pg-list-section__head h3,
    body.category .pg-list-section__head h3,
    body.search .pg-list-section__head h3 {
        margin: 0 !important;
        color: #1a1b1f !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        letter-spacing: 0 !important;
    }

    body.playground-home .pg-home-mobile .pg-section__heading a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 34px !important;
        min-height: 34px !important;
        color: #0058bc !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
    }
}

/* Mobile cart/password compatibility patch for Safari, WeChat, QQ and Android WebViews. */
@media (max-width: 899px) {
    html,
    body {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        overscroll-behavior-x: none;
    }

    input,
    textarea,
    select,
    #pg-password-modal .pg-modal__input,
    #pg-cart-phone {
        font-size: 16px !important;
    }

    .pg-cart-panel,
    .pg-password-modal,
    #pg-password-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        touch-action: pan-y;
    }

    .pg-cart-panel__sheet {
        right: max(8px, env(safe-area-inset-right)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        transform: translate3d(0, 24px, 0) !important;
        will-change: transform, opacity;
    }

    .pg-cart-panel.is-open .pg-cart-panel__sheet {
        transform: translate3d(0, 0, 0) !important;
    }

    .pg-keyboard-open .pg-cart-panel__sheet {
        right: max(8px, env(safe-area-inset-right)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        bottom: max(var(--pg-keyboard-dock-bottom, var(--pg-keyboard-height, 0px)), env(safe-area-inset-bottom)) !important;
        height: min(calc(var(--pg-visual-height, 100vh) - 16px), 760px) !important;
        max-height: calc(var(--pg-visual-height, 100vh) - 16px) !important;
    }

    #pg-password-modal .pg-modal__dialog {
        width: min(430px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(var(--pg-visual-height, 100vh) - 32px - env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translate(-50%, -48%) scale(0.96) !important;
    }

    #pg-password-modal.is-open .pg-modal__dialog {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    #pg-password-modal .pg-modal__input {
        line-height: normal !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    .pg-keyboard-open .pg-bottom-nav {
        transform: translate3d(0, 100%, 0) !important;
        pointer-events: none !important;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 899px) {
        .pg-cart-panel__sheet {
            height: min(calc(84vh - 61px), 760px) !important;
        }

        .pg-keyboard-open .pg-cart-panel__sheet {
            height: min(calc(var(--pg-viewport-height, 100vh) - 16px), 760px) !important;
        }
    }
}

/* Dock the mobile cart sheet to the keyboard edge so the phone field does not leave a blank strip. */
@media (max-width: 899px) {
    .pg-keyboard-open .pg-cart-panel.is-open .pg-cart-panel__sheet {
        position: fixed !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        bottom: var(--pg-cart-keyboard-bottom, var(--pg-keyboard-dock-bottom, var(--pg-keyboard-height, 0px))) !important;
        width: auto !important;
        height: min(calc(var(--pg-visual-height, 100vh) - 6px), 760px) !important;
        max-height: calc(var(--pg-visual-height, 100vh) - 6px) !important;
        transform: translate3d(0, 0, 0) !important;
        transition: bottom 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms ease, opacity 180ms ease !important;
    }

    .pg-keyboard-open .pg-cart-panel__actions {
        padding-bottom: 8px !important;
    }

    .pg-keyboard-open.pg-cart-input-focused .pg-cart-panel.is-open .pg-cart-panel__sheet {
        bottom: 0 !important;
        max-height: calc(var(--pg-visual-height, 100vh) - 6px) !important;
    }
}

/* Keep the mobile device/password chooser usable when iOS or WebView keyboards shrink the viewport. */
@media (max-width: 899px) {
    .pg-keyboard-open #pg-password-modal,
    .pg-input-focused #pg-password-modal.is-password-focused {
        height: 100vh !important;
        min-height: 0 !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }

    .pg-keyboard-open #pg-password-modal .pg-modal__dialog,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__dialog {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: calc(var(--pg-password-dock-bottom, var(--pg-keyboard-dock-bottom, var(--pg-keyboard-height, 0px))) + var(--pg-password-dock-gap, 6px)) !important;
        left: 50% !important;
        width: min(430px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        max-height: none !important;
        transform: translate3d(-50%, 0, 0) scale(1) !important;
        transition: bottom 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms ease, opacity 180ms ease !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        scroll-padding-bottom: 18px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-modal__form,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__form {
        padding-bottom: 22px !important;
        padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 390px) {
    .pg-keyboard-open #pg-password-modal .pg-modal__title,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__title {
        height: 54px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 18px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-modal__form,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__form {
        padding: 14px 18px 18px !important;
        padding: 14px 18px max(18px, env(safe-area-inset-bottom)) !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-device-modal__device-grid,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-device-modal__device-grid {
        gap: 8px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-device-modal__device-card,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-device-modal__device-card {
        height: 104px !important;
        padding: 10px !important;
        border-radius: 11px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-device-modal__device-art,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-device-modal__device-art {
        margin-bottom: 8px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-device-modal__storage,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-device-modal__storage {
        margin-top: 14px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-device-modal__capacity-preview,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-device-modal__capacity-preview {
        margin-top: 8px !important;
        line-height: 15px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-modal__label,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__label {
        margin-top: 14px !important;
    }

    .pg-keyboard-open #pg-password-modal .pg-modal__input,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__input,
    .pg-keyboard-open #pg-password-modal .pg-modal__submit,
    .pg-input-focused #pg-password-modal.is-password-focused .pg-modal__submit {
        height: 50px !important;
        border-radius: 16px !important;
    }
}