/* ===== GAME SECTION — Play Store layout in the Your Choice Game Studio theme ===== */
/* Everything is prefixed with "ps-" so it won't clash with your existing CSS. */

.ps-games {
    /* Colors (neo-brutalist palette) */
    --ps-ink: #111111; /* borders + hard shadows */
    --ps-paper: #fffdf0; /* card background */
    --ps-text: #111111;
    --ps-muted: #4d4a3f;
    --ps-tag: #00c2ff; /* "PUZZLE" chip */
    --ps-chip: #fff1b8; /* rating / downloads chips */
    --ps-chip-text: #111111;
    --ps-red: #ff3b3b; /* Details button */
    --ps-green: #22c55e; /* Play button */
    --ps-focus: #1a73e8;
    /* Fonts — swap these two for the fonts your site already uses */
    --ps-font-display: "Bangers", "Bowlby One", Impact, "Arial Narrow Bold", sans-serif;
    --ps-font-body: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
    --ps-border: 3px;
    --ps-radius: 22px;
    /* Banner (1024x500) shown in full behind the content */
    --ps-banner-opacity: 1; /* 1 = solid, lower = more see-through */
    --ps-content-start: 0.6; /* where the icon/name row starts, as a share of the banner height (0.6 = 60% down) */

    padding: 6px 0 56px;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
}

/* Dark mode — keep whichever selector matches how your 🌙 toggle works */
[data-theme="dark"] .ps-games,
html.dark .ps-games,
body.dark .ps-games,
body.dark-mode .ps-games {
    --ps-ink: #fffdf0;
    --ps-paper: #232323;
    --ps-text: #fffdf0;
    --ps-muted: #c9c5b3;
}

.ps-games *,
.ps-games *::before,
.ps-games *::after {
    box-sizing: border-box;
}

.ps-games__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 40px 32px;
    max-width: 100%;
    margin: 0 auto;
}

/* ---------- Card ---------- */
.ps-card {
    position: relative;
    isolation: isolate; /* keeps the banner layer inside the card */
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: calc(48.828% * var(--ps-content-start)) 14px 14px; /* 48.828% = 500 / 1024, the banner's height */
    overflow: hidden;
    background: var(--ps-paper);
    border: var(--ps-border) solid var(--ps-ink);
    border-radius: var(--ps-radius);
    box-shadow: 8px 8px 0 var(--ps-ink);
}

    /* Everything except the banner sits in front of it */
    .ps-card > :not(.ps-card__banner) {
        position: relative;
        z-index: 1;
    }

/* ---------- Banner (background layer, shown in full) ---------- */
.ps-card__banner {
    position: absolute;
    top: -150px;
    left: 0;
    right: 0;
    z-index: 0;
    aspect-ratio: 1024 / 500;
    pointer-events: none;
}

    .ps-card__banner img {
        display: block;
        width: 100%;
        aspect-ratio: 1024 / 500; /* feature banner size: nothing gets cropped */
        object-fit: contain;
        opacity: var(--ps-banner-opacity); /* the transparency */
    }

    .ps-card__banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 20%, var(--ps-paper) 100%);
    }

/* ---------- Icon + name + studio ---------- */
.ps-card__info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ps-card__icon {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: var(--ps-border) solid var(--ps-ink);
    border-radius: 22%; /* Play Store icon rounding */
    background: #b3261e; /* shows if the image is missing */
    box-shadow: 3px 3px 0 var(--ps-ink);
}

.ps-card__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ps-card__title {
    margin: 0;
    font-family: var(--ps-font-display);
    font-size: 1.75rem;
  
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-shadow: 0 0 8px var(--ps-paper), 0 0 3px var(--ps-paper);
}

.ps-card__studio {
    margin: 4px 0 0;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--ps-muted);
    text-shadow: 0 0 8px var(--ps-paper), 0 0 3px var(--ps-paper);
}

/* ---------- Chips ---------- */
.ps-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ps-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 2px solid var(--ps-ink);
    border-radius: 8px;
    background: var(--ps-chip);
    box-shadow: 2px 2px 0 var(--ps-ink);
    color: var(--ps-chip-text);
    font-size: 1rem;
    line-height: 1.3;
}

.ps-card__chip--tag {
    border-radius: 6px;
    background: var(--ps-tag);
    font-family: var(--ps-font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Description ---------- */
.ps-card__desc {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ---------- Buttons ---------- */
.ps-card__actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.ps-card__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: var(--ps-border) solid var(--ps-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--ps-ink);
    color: #111111;
    text-shadow: none;
    font-family: var(--ps-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ps-card__btn--details {
    background: var(--ps-red);
}

.ps-card__btn--play {
    background: var(--ps-green);
}

.ps-card__btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ps-ink);
}

.ps-card__btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--ps-ink);
}

.ps-card__btn:focus-visible {
    outline: 3px solid var(--ps-focus);
    outline-offset: 3px;
}

/* Keep the supplied overlapping feature-art layout, with a badge above it. */
.ps-card > .ps-card__new {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border: 2px solid var(--ps-ink);
    border-radius: 7px;
    background: #ffd600;
    color: #111;
    box-shadow: 2px 2px 0 var(--ps-ink);
    font-weight: 700;
    font-size: 14px;
}

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
    .ps-card {
        padding: calc(48.828% * var(--ps-content-start)) 12px 12px;
    }

    .ps-card__icon {
        width: 60px;
        height: 60px;
    }

    .ps-card__title {
        font-size: 1.5rem;
    }

    .ps-card__btn {
        font-size: 1.1rem;
        padding: 9px 10px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ps-card__btn {
        transition: none;
    }
}

/* Restore your original website fonts */
.ps-games {
    --ps-font-display: "Bangers", cursive;
    --ps-font-body: "Comic Neue", cursive;
    font-family: var(--ps-font-body);
}

    .ps-games h2,
    .ps-games .filter-btn,
    .ps-games .head-aside,
    .ps-games .ps-card__title,
    .ps-games .ps-card__chip--tag,
    .ps-games .ps-card__btn {
        font-family: var(--ps-font-display);
    }

    .ps-games .search-input {
        font-family: var(--ps-font-body);
    }

    .ps-games .ps-card__title,
    .ps-games .ps-card__chip--tag,
    .ps-games .ps-card__btn {
        font-weight: 400;
    }