/* Oyun kartları ve ızgaraları (ana sayfa, listeler, benzer oyunlar, üye listeleri). */

:root {
    --gtile-radius: 24px;
    --gtile-anim: .22s ease;
    --gtile-border: rgba(255, 255, 255, .26);
    --gtile-bg: rgba(255, 255, 255, .08);
    --gtile-thumb-bg: #fbe8ff;
    --gtile-placeholder: linear-gradient(135deg, #f3e5f7, #ead6f0);
    --gtile-spinner-track: rgba(123, 31, 162, .16);
    --gtile-spinner-head: rgba(123, 31, 162, .62);
    --gtile-badge-bg: linear-gradient(180deg, rgba(16, 10, 26, .82) 0%, rgba(16, 10, 26, .68) 100%);
    --gtile-star: #ffd54f;
    --gtile-scrim: linear-gradient(180deg, rgba(18, 12, 28, .04) 0%, rgba(18, 12, 28, .1) 40%, rgba(18, 12, 28, .34) 62%, rgba(18, 12, 28, .62) 82%, rgba(18, 12, 28, .9) 100%);
}

.games-grid, .related-games-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 8px;
}

@media not ((hover: none) and (pointer: coarse)) {
    .home-games-grid > [data-big~="desktop"] { grid-column: span 2; grid-row: span 2; }
}

@media (hover: none) and (pointer: coarse) {
    .home-games-grid > [data-big~="mobile"] { grid-column: span 2; grid-row: span 2; }
}

.game-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border: 2px solid var(--gtile-border);
    border-radius: var(--gtile-radius);
    background: var(--gtile-bg);
    contain: layout paint;
    isolation: isolate;
    transition: border-color var(--gtile-anim);
}

.game-tile:hover,
.game-tile:active { border-color: var(--mustard-line-strong); }

.game-tile-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }

.game-tile-thumb {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: var(--gtile-thumb-bg);
}

.game-tile-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid var(--gtile-spinner-track);
    border-top-color: var(--gtile-spinner-head);
    border-right-color: var(--gtile-spinner-head);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.game-tile-thumb.is-media-loading::after { opacity: 1; animation: gsc-media-spinner .7s linear infinite; }

.game-tile-thumb > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    opacity: 0;
    transition: transform var(--gtile-anim), filter var(--gtile-anim);
}

.game-tile-thumb.is-media-loaded > img { opacity: 1; }

.game-tile:hover .game-tile-thumb > img { transform: scale(1.05); filter: brightness(.9); }

.game-tile-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--gtile-placeholder);
}

.game-tile-thumb-placeholder img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
}

@keyframes gsc-media-spinner { to { transform: rotate(360deg); } }

.game-tile-rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: var(--gtile-badge-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -4px, 0);
    transition: opacity var(--gtile-anim), transform var(--gtile-anim);
}

.game-tile:hover .game-tile-rating-badge { opacity: 1; transform: translate3d(0, 0, 0); }

.game-tile-rating-star { font-size: 13px; line-height: 1; color: var(--gtile-star); }

.game-tile-rating-value { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .01em; color: #fff; }

.game-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--gtile-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gtile-anim);
}

.game-tile:hover::after { opacity: 1; }

.game-tile-meta {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(100% - 16px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 8px, 0);
    transition: opacity var(--gtile-anim), transform var(--gtile-anim);
}

.game-tile:hover .game-tile-meta { opacity: 1; transform: translate3d(0, 0, 0); }

.game-tile-title {
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.24;
    text-align: center;
    color: #fff;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (hover: none) and (pointer: coarse) {
    [data-hide="mobile"] { display: none; }
}

@media not ((hover: none) and (pointer: coarse)) {
    [data-hide="desktop"] { display: none; }
}

@media (max-width: 1400px) {
    .games-grid, .related-games-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 1200px) {
    .games-grid, .related-games-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 992px) {
    .games-grid, .related-games-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
}

@media (max-width: 768px) {
    .games-grid, .related-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .home-games-grid > [data-big] { grid-column: span 1; grid-row: span 1; }
    .game-tile { --gtile-radius: 16px; }
    .game-tile-rating-badge { display: none; }
    .game-tile-title { font-size: 11px; }
}