/* GAME CARD
   Figma spec (node 1:1182): 185 x 324 px, uniform across the grid.
   The card is width-responsive — half of the row on mobile, ~185px
   on desktop Telegram. Titles reserve two lines so buy buttons stay
   aligned across a row even when one game title is short and the next
   wraps to a second line. */
.game-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    align-items: stretch;
    scroll-snap-align: start;
    flex-shrink: 0;
    min-width: 0;
    cursor: pointer;
    /* Keep each card content-sized; title line reservation below keeps
       buy buttons aligned without creating a large empty area. */
    align-self: flex-start;
    /* Render off-screen cards lazily: the browser skips layout/paint
       for cards that aren't near the viewport, then catches up as the
       user scrolls. With ~100 cards on the collection page this drops
       per-frame work from ~30ms to <5ms on mid-range phones. The
       `contain-intrinsic-size` reserves space so scrollbar height
       stays accurate (otherwise the page would resize as cards paint). */
    content-visibility: auto;
    contain-intrinsic-size: auto 292px;
}

.game-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.game-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #E8E8E8;
}

.game-card__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 48.56%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.game-card__badges {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    z-index: 2;
}

.game-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
}

.game-card__badge--sale {
    background: linear-gradient(180deg, #FFB200 0%, #F7D917 100%);
    color: #000;
}

.game-card__badge--ps {
    background: #FFFFFF;
    border: 1px solid #FFB200;
    color: #000;
}

/* EA Play badge kept for card image (same style as PS Plus) when
   a game is in EA Play but NOT in PS Plus. Rare edge case; label
   identical to the sub-tier to stay consistent. */
.game-card__badge--ea {
    background: #FFFFFF;
    border: 1px solid #E62117;
    color: #000;
}

.game-card__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    flex: 0 0 auto;
}

.game-card__price-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.game-card__price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.game-card__price-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #000000;
    white-space: nowrap;
}

.game-card__old-price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #808080;
    text-decoration: line-through;
    line-height: normal;
}

.game-card__title {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    min-height: 36px;
    max-height: 36px;
}

.game-card__sub {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #808080;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    min-height: 0;
}

/* Subscription tier name (Essential / Extra / Deluxe / EA Play) shown
   right under the game title. Designer's mockup uses a warm yellow
   — same family as the "Купить" button and sale badge so the card
   reads as one visual system. */
.game-card__sub--tier {
    color: #E0A800;
    font-weight: 500;
}

.game-card__button {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    line-height: normal;
    background: linear-gradient(180deg, #FFB200 0%, #F7D917 100%);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}