/* Always-visible actions over the artwork; only the playable card opts in. */
.games-grid > .game-card.game-card--quick-actions {
    display: flex;
    flex-direction: column;
    min-height: 0;
    aspect-ratio: auto;
    background: #131b18;
    /* Static halo behind the card: no extra asset, animation or hit area. */
    box-shadow:
        0 14px 26px rgba(0, 0, 0, .18),
        0 0 30px rgba(82, 223, 67, .25),
        0 0 80px 18px rgba(54, 196, 84, .19);
}

.game-card--quick-actions .game-card-media {
    display: block;
    position: relative;
    flex: none;
    width: 100%;
    height: clamp(192px, 41vw, 248px);
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.game-card--quick-actions .game-card-media > img,
.game-card--quick-actions .game-card-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-card--quick-actions .game-card-media:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

.games-grid > .game-card--quick-actions:only-child .game-card-media {
    height: calc(clamp(192px, 41vw, 248px) * 1.3);
}

.game-card--quick-actions .game-card-actions {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 38px 12px 15px;
    background: linear-gradient(180deg, transparent, rgba(10, 20, 15, .62) 36%, rgba(10, 20, 15, .9));
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: none;
}

.game-card--quick-actions .game-card-action {
    position: relative;
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 11px 8px;
    border-radius: 10px;
    font-size: clamp(15px, 4.4vw, 22px);
    line-height: 1.15;
    letter-spacing: .015em;
    white-space: nowrap;
    text-shadow: 0 2px 0 #426d30;
    transition: transform 120ms ease, min-height 320ms ease,
        padding 320ms ease, font-size 320ms ease, border-radius 320ms ease;
}

.game-card--quick-actions .game-card-action::before {
    top: 5px;
    left: 8px;
    width: 13px;
    height: 4px;
}

.game-card--quick-actions .game-card-action--secondary {
    min-height: 44px;
    font-size: clamp(14px, 4vw, 19px);
    border-color: #33494e;
    background: linear-gradient(180deg, #647c80 0%, #4d6269 40%, #344a53 45%, #293c45 100%);
    box-shadow: inset 0 2px 0 #8a9f9e, inset 0 -3px 0 #1c3038, 0 2px 0 #080f14;
    text-shadow: 0 2px 0 #1c3038;
    backdrop-filter: none;
}

.game-card--quick-actions .game-card-action--secondary::before {
    background: #c5d9d5;
}

.game-card--quick-actions .game-card-action:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 2px #4a8028, 0 1px 0 #172c2f;
}

.game-card--quick-actions .game-card-action--secondary:active {
    box-shadow: inset 0 1px 2px #1c3038, 0 1px 0 #080f14;
}

@media (max-width: 767px) {
    .games-grid > .game-card--quick-actions:only-child .game-card-media {
        height: calc(clamp(192px, 41vw, 248px) * 1.69);
    }
}

@media (min-width: 992px) {
    .game-card--quick-actions .game-card-media,
    .games-grid > .game-card--quick-actions:only-child .game-card-media {
        height: auto;
        aspect-ratio: .92;
    }

    .game-card--quick-actions .game-card-media > img,
    .game-card--quick-actions .game-card-media > video {
        position: absolute;
        inset: 0;
    }
}

/* A taller, wider canvas keeps the face free above the shaded action area. */
.games-grid > .game-card--quick-actions:has(img[src*="subway-mega-pix-"]) {
    min-height: 0;
}

.games-grid > .game-card--quick-actions:only-child:has(img[src*="subway-mega-pix-"]) {
    width: calc((100% - var(--shell-card-gap)) * .73);
}

.games-grid > .game-card--quick-actions:has(img[src*="subway-mega-pix-"]) .game-card-media {
    height: auto;
    aspect-ratio: auto;
    padding-bottom: 112px;
    background: #040a07;
}

.game-card--quick-actions .game-card-media > img[src*="subway-mega-pix-"] {
    position: static;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.game-card--quick-actions:has(img[src*="subway-mega-pix-"]) .game-card-actions {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    justify-items: center;
    gap: 8px;
    padding: 36px 12px 12px;
    background: linear-gradient(180deg,
        rgba(4, 10, 7, 0) 0%,
        rgba(4, 10, 7, .84) 25%,
        rgba(4, 10, 7, .97) 50%,
        #040a07 100%);
}

.game-card--quick-actions:has(img[src*="subway-mega-pix-"]) .game-card-action--primary {
    min-height: 56px;
    padding: 13px 8px;
    font-size: clamp(18px, 5vw, 25px);
    border-color: #72ac3e;
    background: linear-gradient(180deg, #ace76a 0%, #8bd34b 40%, #68b231 45%, #539426 100%);
    box-shadow: inset 0 2px 0 #dcffa4, inset 0 -4px 0 #3b711d,
        0 3px 0 #203b15, 0 6px 14px rgba(0, 0, 0, .65),
        0 0 14px rgba(143, 222, 73, .25);
}

.game-card--quick-actions:has(img[src*="subway-mega-pix-"]) .game-card-action--secondary {
    width: 88%;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(13px, 3.6vw, 17px);
    background: linear-gradient(180deg, #4a6269 0%, #364d55 40%, #263b44 45%, #1c2e36 100%);
    box-shadow: inset 0 2px 0 #7a9293, inset 0 -3px 0 #14232b,
        0 3px 9px rgba(0, 0, 0, .65);
}

@media (max-width: 767px) {
    .games-grid > .game-card--quick-actions:only-child:has(img[src*="subway-mega-pix-"]) {
        width: calc((100% - var(--shell-card-gap)) * .945);
    }
}

@media (min-width: 992px) {
    .games-grid > .game-card--quick-actions:only-child:has(img[src*="subway-mega-pix-"]) {
        width: calc((100% - var(--shell-card-gap) * 3) * .365);
    }
}

/* Temporary image-tap state: only the artwork blurs, never the buttons. */
.game-card--quick-actions .game-card-media > img,
.game-card--quick-actions .game-card-media > video {
    transition: filter 240ms ease;
}

.game-card--quick-actions .game-card-actions {
    transform: translateY(0);
    transition: transform 320ms cubic-bezier(.22, .8, .25, 1),
        bottom 320ms cubic-bezier(.22, .8, .25, 1),
        gap 320ms ease, padding 320ms ease;
}

.game-card--quick-actions.is-actions-highlighted .game-card-media > img,
.game-card--quick-actions.is-actions-highlighted .game-card-media > video {
    filter: blur(4px) brightness(.6);
}

.games-grid > .game-card--quick-actions.is-actions-highlighted .game-card-actions {
    /* Lift above the card midpoint, with separate CTAs over the blurred art. */
    bottom: 58%;
    transform: translateY(50%);
    gap: clamp(28px, 5vw, 34px);
    padding: 12px;
    background: transparent;
}

.game-card--quick-actions.is-actions-highlighted .game-card-action--primary {
    filter: brightness(1.12) drop-shadow(0 0 12px rgba(155, 234, 87, .45));
}

/* Image-tap emphasis doubles the CTA height, without stretching the lettering
   or changing the resting layout, click destinations or three-second timer. */
.games-grid > .game-card--quick-actions.is-actions-highlighted .game-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.games-grid > .game-card--quick-actions.is-actions-highlighted .game-card-action--primary {
    /* Resting height is at least 56px, or its line + 26px padding + 4px border. */
    min-height: max(112px, calc(clamp(18px, 5vw, 25px) * 2.3 + 60px));
    padding-block: 20px;
    font-size: clamp(22px, 6vw, 30px);
}

.games-grid > .game-card--quick-actions.is-actions-highlighted .game-card-action--secondary {
    min-height: 88px;
    padding-block: 16px;
    font-size: clamp(17px, 4.6vw, 22px);
}

/* A light pulse and clipped reflection on Play only; no new click handlers. */
.game-card--quick-actions .game-card-action--primary {
    isolation: isolate;
    overflow: hidden;
    transform-origin: center;
    animation: game-play-pulse 1.6s ease-in-out infinite;
}

.game-card--quick-actions .game-card-action--primary::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40%;
    left: 0;
    width: 42%;
    height: 180%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent,
        rgba(255, 255, 255, .16) 25%, rgba(255, 255, 255, .48) 50%,
        rgba(255, 255, 255, .16) 75%, transparent);
    opacity: 0;
    transform: translateX(-150%) skewX(-20deg);
    animation: game-play-shine 2.4s ease-in-out infinite;
}

@keyframes game-play-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@keyframes game-play-shine {
    0%, 8% { transform: translateX(-150%) skewX(-20deg); opacity: 0; }
    18%, 40% { opacity: 1; }
    50%, 100% { transform: translateX(350%) skewX(-20deg); opacity: 0; }
}

body.modal-open .game-card--quick-actions .game-card-action--primary,
body.modal-open .game-card--quick-actions .game-card-action--primary::after {
    animation-play-state: paused;
}

.game-card--quick-actions .game-card-action--primary:is(:active, :focus-visible, :disabled, [aria-busy="true"]),
.game-card--quick-actions .game-card-action--primary:is(:active, :focus-visible, :disabled, [aria-busy="true"])::after {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .game-card--quick-actions .game-card-action--primary,
    .game-card--quick-actions .game-card-action--primary::after { animation: none; }

    .game-card--quick-actions .game-card-action,
    .game-card--quick-actions .game-card-actions,
    .game-card--quick-actions .game-card-media > img,
    .game-card--quick-actions .game-card-media > video { transition: none; }
}