/* Homepage game tiles only. No global card, header or page styles. */
.grid:has(> .home-image-card) { gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-card.home-image-card {
    position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 8px;
    background: transparent; box-shadow: none; overflow: hidden; isolation: isolate;
}
.game-card.home-image-card::before, .game-card.home-image-card::after,
.home-image-card .cover::before, .home-image-card .cover::after { content: none; display: none; }
.home-image-card .home-card-cover { aspect-ratio: 16 / 9; border: 0; border-radius: 8px; overflow: hidden; }
.home-card-link { position: absolute; inset: 0; display: block; z-index: 0; }
.home-card-link picture { display: block; width: 100%; height: 100%; }
.home-image-card .cover img.home-card-art {
    display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0;
    object-fit: cover; box-shadow: none; filter: none; transform: none; transition: transform 220ms ease;
}
.home-card-overlay {
    position: absolute; z-index: 1; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-content: end; column-gap: 12px; row-gap: 6px; padding: 20px;
    background: linear-gradient(180deg, rgba(3,7,12,.22), rgba(3,7,12,.66) 48%, rgba(3,7,12,.92));
    opacity: 0; pointer-events: none; transition: opacity 220ms ease; color: #fff;
}
.home-card-copy { display: contents; }
.home-card-provider { grid-column: 1 / -1; margin: 0; color: #dce7ed; font-size: .69rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.home-image-card h3 { grid-column: 1 / -1; margin: 0; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.18; font-weight: 750; letter-spacing: -.025em; overflow-wrap: anywhere; }
.home-card-info { grid-column: 1; grid-row: 3; font-size: .72rem; line-height: 1.4; color: #d2dce3; }
.home-card-info p { margin: 0; }
.home-card-info .home-card-offer { color: #b9f5d7; font-weight: 650; }
.home-card-info .home-card-price { display: flex; flex-wrap: wrap; gap: 0 6px; color: #b8c4ce; }
.home-card-price s { white-space: nowrap; text-decoration-thickness: 1px; }
.home-card-actions { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; align-items: stretch; gap: 8px; align-self: center; }
.home-image-card .home-card-trailer, .home-card-details {
    position: static; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px;
    background: rgba(255,255,255,.1); color: #fff; box-shadow: none; transform: none;
    font: inherit; font-size: .72rem; font-weight: 650; text-decoration: none; cursor: pointer;
    opacity: 1; visibility: visible; white-space: nowrap;
}
.home-card-actions [hidden] { display: none !important; }
.home-image-card.is-info-open .home-card-overlay, .home-image-card:focus-within .home-card-overlay { opacity: 1; }
.home-image-card.is-info-open .home-card-actions, .home-image-card:focus-within .home-card-actions { pointer-events: auto; }
.home-image-card:has(:focus-visible) { outline: 2px solid #a2f5d1; outline-offset: 4px; overflow: visible; }
.home-card-actions :focus-visible { outline: 2px solid #a2f5d1; outline-offset: 3px; }
.home-card-actions a:hover, .home-card-actions button:hover { background: rgba(255,255,255,.22); color: #fff; transform: none; }
@media (hover: hover) and (min-width: 701px) {
    .home-image-card:not([data-touch]) .home-card-details { display: none; }
    .home-image-card:hover .home-card-overlay { opacity: 1; }
    .home-image-card:hover .home-card-actions { pointer-events: auto; }
    .home-image-card:hover .cover img.home-card-art { transform: scale(1.02); }
}
@media (max-width: 1100px) and (min-width: 701px) {
    .grid:has(> .home-image-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 700px) {
    .grid:has(> .home-image-card) { grid-template-columns: 1fr; gap: 20px; }
    .home-card-overlay { padding: 16px; column-gap: 10px; }
    .home-image-card h3 { font-size: 1.12rem; }
    .home-card-info { font-size: .7rem; }
}
/* Landscape phones and larger touch tablets: keep enough room for readable overlays. */
@media (min-width: 700px) and (max-width: 1100px) { .home-card-overlay { padding: 16px; } }
@media (max-width: 359px) {
    .home-card-overlay { padding: 10px; column-gap: 8px; row-gap: 4px; }
    .home-image-card h3 { font-size: .95rem; }
    .home-card-provider, .home-card-info { font-size: .61rem; }
    .home-card-actions { gap: 6px; }
    .home-image-card .home-card-trailer, .home-card-details { padding: 0 8px; font-size: .66rem; min-height: 36px; }
}
.home-trailer-modal {
    width: min(1100px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 0;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #090f17; color: #f4f7fa;
    box-shadow: 0 30px 120px rgba(0,0,0,.6); overflow: auto;
}
.home-trailer-modal::backdrop { background: rgba(2,5,9,.86); backdrop-filter: blur(6px); }
.home-trailer-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 18px; }
.home-trailer-title { margin: 0; font: inherit; font-size: 1rem; font-weight: 650; }
.home-trailer-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 5px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 1.5rem; cursor: pointer; }
.home-trailer-close:focus-visible { outline: 2px solid #a2f5d1; outline-offset: 2px; }
.home-trailer-stage { width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 160px); background: #000; }
.home-trailer-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-trailer-status { margin: 0; padding: 14px 18px; color: #c2ccd4; font-size: .85rem; }
.home-trailer-status[hidden] { display: none; }
html:has(.home-trailer-modal[open]) { overflow: hidden; }
@media (max-width: 600px) {
    .home-trailer-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
    .home-trailer-header { padding: 10px 12px; }
    .home-trailer-title { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-image-card .home-card-overlay, .home-image-card .cover img.home-card-art { transition: none; transform: none !important; }
}