/* Decorative characters share the CS2 card treatment; the whole card is a link. */
.portal-home { container-type: inline-size; container-name: portal-home; }
.portal-home .portal-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.portal-home .portal-game-card { grid-column: span 2; min-height: 250px; }
.portal-home .portal-game-card:nth-last-child(-n+2) { grid-column: span 3; }
.portal-home .portal-game-card-characters {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--character-image);
    background-position: var(--character-position, right -18px bottom);
    background-size: var(--character-size, auto 98%);
    background-repeat: no-repeat;
    filter: var(--character-filter, none);
    transform-origin: right bottom;
    transition: transform .45s ease;
    pointer-events: none;
}
.portal-home .portal-game-card:hover .portal-game-card-characters,
.portal-home .portal-game-card:focus-visible .portal-game-card-characters { transform: scale(1.025); }
.portal-home .portal-game-card:focus-visible { outline: 2px solid var(--game-color); outline-offset: 4px; }
.portal-home .portal-game-card::before {
    z-index: 0;
    background: linear-gradient(90deg, #23262bf7 0%, #23262be8 28%, #23262b88 49%, #23262b15 78%, transparent 100%);
    mask-image: none;
    pointer-events: none;
}
.portal-home .portal-game-card-number,
.portal-home .portal-game-card-copy,
.portal-home .portal-game-card-link { position: relative; z-index: 1; }
.portal-home .portal-game-card-copy { max-width: 64%; }
.portal-home .portal-game-card p { color: #c4c5c8; text-shadow: 0 1px 5px #15171c; }
.portal-home .portal-game-card h3 {
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #f4ead9;
    background: linear-gradient(110deg, #f4ead9 0%, #f4ead9 38%, #ffc46a 48%, #fff8e8 52%, #f4ead9 62%, #f4ead9 100%);
    background-size: 230% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px #ffa13121;
    animation: game-title-shimmer 8s ease-in-out infinite;
}
.portal-home .portal-game-card:nth-child(2) h3 { animation-delay: -.8s; }
.portal-home .portal-game-card:nth-child(3) h3 { animation-delay: -1.6s; }
.portal-home .portal-game-card:nth-child(4) h3 { animation-delay: -2.4s; }
.portal-home .portal-game-card:nth-child(5) h3 { animation-delay: -3.2s; }
.portal-home .portal-game-card-link { color: #d8d7d5; text-shadow: 0 1px 5px #15171c; }
.portal-home .portal-game-card--cs2 {
    --character-image: url("cs2-characters-3100a8cc732e.png");
    --character-position: right -24px bottom;
    --character-size: auto 88%;
    --character-filter: brightness(1.75) contrast(1.05) saturate(1.08);
    background: linear-gradient(120deg, #23262b 12%, #312b23 100%);
}
.portal-home .portal-game-card--csgo { --character-image: url("csgo-characters-c3dab4993c7b.png"); }
.portal-home .portal-game-card--cs16 {
    --character-image: url("cs16-characters-0cbb29a8cdf7.png");
    --character-size: auto 150%;
    --character-position: right -20px bottom;
}
.portal-home .portal-game-card--css { --character-image: url("css-characters-d048f3ea0fac.png"); }
.portal-home .portal-game-card--standoff2-pc {
    --character-image: url("standoff2-pc-characters-d62be8489f67.png");
    --character-position: right -95px bottom;
    --character-size: auto 105%;
}
@keyframes game-title-shimmer {
    0%, 20% { background-position: 100% 50%; }
    65%, 100% { background-position: 0% 50%; }
}
@container portal-home (max-width: 920px) {
    .portal-home .portal-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-home .portal-game-card,
    .portal-home .portal-game-card:nth-last-child(-n+2) { grid-column: auto; }
    .portal-home .portal-game-card:last-child { grid-column: 1 / -1; }
}
@container portal-home (max-width: 560px) {
    .portal-home .portal-game-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-home .portal-game-card { min-height: 235px; padding: 22px; }
    .portal-home .portal-game-card-copy { max-width: 62%; }
    .portal-home .portal-game-card h3 { font-size: 27px; }
    .portal-home .portal-game-card p { font-size: 12px; }
    .portal-home .portal-game-card-copy .portal-kicker { font-size: 8px; }
    .portal-home .portal-game-card-link { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-home .portal-game-card h3 { animation: none; background-position: 0% 50%; }
    .portal-home .portal-game-card,
    .portal-home .portal-game-card-characters { transition: none; }
    .portal-home .portal-game-card:hover,
    .portal-home .portal-game-card:focus-visible,
    .portal-home .portal-game-card:hover .portal-game-card-characters,
    .portal-home .portal-game-card:focus-visible .portal-game-card-characters { transform: none; }
}