/* ==========================================================================
   Game cards — the layered tile used by /games and the homepage.

   A tile is four stacked layers inside one 3-D card. The card takes a small
   mouse-follow tilt; its children sit at different Z depths, so they travel
   toward the viewer at different rates and the tile reads as an object rather
   than a picture. Every layer except an uploaded image is drawn from
   --gc-accent, so a game with no artwork still looks finished and an
   administrator only has to pick a colour.
   ========================================================================== */

.gc-grid {
    display: grid;
    grid-template-columns: repeat(var(--gc-cols, 5), minmax(0, 1fr));
    gap: 18px;
}

.gc {
    /* Perspective lives on the wrapper, not in the card's own transform, so the
       tilt script only has to write rotateX/rotateY. The lift on hover lives here
       too, for the same reason: the script owns .gc-card's transform outright
       while the pointer is moving, so anything this wrapper needs to animate has
       to sit one level up or the script's next frame would erase it. */
    perspective: 900px;
    min-width: 0;
    transform: translateY(0);
    transition: transform .45s cubic-bezier(.03, .98, .52, .99);
}

.gc-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.3;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
    background: #080c11;
    text-decoration: none;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform .4s cubic-bezier(.03, .98, .52, .99), border-color .35s ease, box-shadow .4s ease;
}

.gc-art { position: absolute; inset: 0; }
.gc-art > * { position: absolute; inset: 0; }

/* ---------- ground ---------- */
.gc-bg {
    background:
        radial-gradient(118% 78% at 76% 6%, color-mix(in srgb, var(--gc-accent) 40%, transparent), transparent 62%),
        radial-gradient(96% 70% at 10% 98%, color-mix(in srgb, var(--gc-accent) 15%, transparent), transparent 60%),
        linear-gradient(168deg, #141c26 0%, #0a0f15 55%, #06090d 100%);
    transition: transform .6s cubic-bezier(.03, .98, .52, .99);
}
/* An administrator's upload replaces the drawn ground entirely. */
.gc-bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------- motif ---------- */
.gc-pattern { opacity: .5; mix-blend-mode: soft-light; }

.gc[data-pattern="rays"] .gc-pattern {
    background: repeating-linear-gradient(104deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 26px);
    -webkit-mask-image: radial-gradient(70% 58% at 74% 12%, #000, transparent 76%);
    mask-image: radial-gradient(70% 58% at 74% 12%, #000, transparent 76%);
}
.gc[data-pattern="slash"] .gc-pattern {
    background: linear-gradient(72deg, transparent 44%, rgba(255, 255, 255, .3) 46%, rgba(255, 255, 255, .3) 48%, transparent 50%),
                linear-gradient(72deg, transparent 58%, rgba(255, 255, 255, .16) 59%, rgba(255, 255, 255, .16) 60%, transparent 61%);
}
.gc[data-pattern="hex"] .gc-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 1 38 11.5v23L20 45 2 34.5v-23z' fill='none' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1.4'/%3E%3C/svg%3E");
    background-size: 40px 46px;
    -webkit-mask-image: radial-gradient(78% 62% at 70% 16%, #000, transparent 78%);
    mask-image: radial-gradient(78% 62% at 70% 16%, #000, transparent 78%);
}
.gc[data-pattern="arcs"] .gc-pattern {
    background: repeating-radial-gradient(circle at 78% 6%, rgba(255, 255, 255, .2) 0 2px, transparent 2px 30px);
}
.gc[data-pattern="blocks"] .gc-pattern {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 34px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 34px);
    -webkit-mask-image: linear-gradient(200deg, #000, transparent 72%);
    mask-image: linear-gradient(200deg, #000, transparent 72%);
}
.gc[data-pattern="shards"] .gc-pattern {
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .22) 41%, transparent 43%),
                linear-gradient(150deg, transparent 58%, rgba(255, 255, 255, .16) 59%, transparent 62%),
                linear-gradient(96deg, transparent 70%, rgba(255, 255, 255, .12) 71%, transparent 74%);
}
.gc[data-pattern="dots"] .gc-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, .28) 1.4px, transparent 1.5px);
    background-size: 13px 13px;
    -webkit-mask-image: radial-gradient(72% 58% at 72% 14%, #000, transparent 76%);
    mask-image: radial-gradient(72% 58% at 72% 14%, #000, transparent 76%);
}

/* ---------- foreground mark ----------
   The layer that carries the depth: a thin-stroked geometric emblem lit by the
   accent, sitting in its own bloom. Drawn as a mask rather than a coloured SVG so
   one shape can be tinted per game. Deliberately abstract — a tile never depends
   on a publisher's character art. Thin strokes on purpose: a large filled shape
   at this size reads as a placeholder blob, an engraved mark reads as design. */
.gc-mark {
    inset: 0;
    transform: translateZ(0);
    transition: transform .5s cubic-bezier(.03, .98, .52, .99);
    /* The bloom the emblem sits in. */
    background: radial-gradient(42% 30% at 50% 40%, color-mix(in srgb, var(--gc-accent) 30%, transparent), transparent 72%);
}
.gc-mark::before,
.gc-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    translate: -50% -50%;
    width: 62%;
    aspect-ratio: 1;
}
/* The emblem itself. */
.gc-mark::before {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--gc-accent) 96%, #fff) 0%,
        var(--gc-accent) 42%,
        color-mix(in srgb, var(--gc-accent) 46%, transparent) 100%);
    -webkit-mask-image: var(--gc-mark-shape);
    mask-image: var(--gc-mark-shape);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gc-accent) 55%, transparent));
    opacity: .92;
}
/* A second, larger and fainter copy behind it, which is what gives the mark
   thickness once the card tilts. */
.gc-mark::after {
    width: 88%;
    background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
    -webkit-mask-image: var(--gc-mark-shape);
    mask-image: var(--gc-mark-shape);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    opacity: .5;
    transform: translateZ(-26px);
}

.gc {
    /* Concentric hex rings, a centre diamond and bracket ticks — a rank-sigil
       silhouette without borrowing anyone's sigil. */
    --gc-mark-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M100 12 176 56v88l-76 44-76-44V56z'/%3E%3Cpath d='M100 40 152 70v60l-52 30-52-30V70z' stroke-width='1.5' opacity='.8'/%3E%3C/g%3E%3Cpath d='M100 72 124 100l-24 28-24-28z' fill='%23000'/%3E%3Cg stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M100 4v16M100 180v16M24 52v14M176 52v14M24 134v14M176 134v14'/%3E%3C/g%3E%3C/svg%3E");
}

/* An uploaded character image takes the mark's place and its depth. */
.gc-figure {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: translateZ(0);
    transition: transform .5s cubic-bezier(.03, .98, .52, .99);
    -webkit-mask-image: linear-gradient(#000 82%, transparent);
    mask-image: linear-gradient(#000 82%, transparent);
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6));
}

/* ---------- readability ---------- */
.gc-scrim {
    background: linear-gradient(180deg, rgba(4, 8, 12, .3) 0%, rgba(4, 8, 12, .04) 32%, rgba(4, 8, 12, .72) 62%, #06090d 92%);
    transition: opacity .4s ease;
}

/* ---------- plate ---------- */
.gc-plate {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 14px 18px;
    text-align: center;
    transform: translateZ(0);
    transition: transform .5s cubic-bezier(.03, .98, .52, .99);
}
.gc-logo {
    display: block;
    width: auto; height: auto;
    max-width: 88%; max-height: 74px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85));
}
.gc-wordmark {
    font-family: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
    font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
    color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
}
.gc-services {
    /* One line, always: a game whose service names are long (CS2's are all prefixed
       "CS2 …") otherwise wrapped and shoved the wordmark up out of line with its
       neighbours. Hidden until hover — the reference layout keeps the plate to just
       the wordmark, but the service list is real information, not decoration, so it
       surfaces on the same interaction that already invites a closer look rather
       than disappearing outright. */
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .6rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .35s ease;
}
.gc:not(.is-soon):hover .gc-services { opacity: 1; transform: translateY(0); }

/* ---------- coming soon ribbon ---------- */
.gc-ribbon {
    position: absolute;
    top: 0; left: 0;
    width: 132px; height: 132px;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}
.gc-ribbon span {
    position: absolute;
    top: 24px; left: -34px;
    width: 170px;
    transform: rotate(-45deg);
    text-align: center;
    font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #0b0f14;
    padding: 5px 0;
    background: linear-gradient(135deg, #dfe6ec, #a8b4c0);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .7);
}

/* ---------- hover ---------- */
@media (hover: hover) {
    /* The wrapper lift: the one hover transform not fighting the tilt script,
       which owns .gc-card's transform outright while the pointer is over it. */
    .gc:not(.is-soon):hover { transform: translateY(-6px); }
    .gc:not(.is-soon):hover .gc-card {
        border-color: color-mix(in srgb, var(--gc-accent) 62%, transparent);
        box-shadow: 0 34px 64px -26px rgba(0, 0, 0, .88),
                    0 0 0 1px color-mix(in srgb, var(--gc-accent) 38%, transparent);
    }
    /* Depths chosen so the three layers separate visibly without the artifact
       leaving the tile: the card keeps overflow hidden, which is what stops the
       shards clipping over neighbouring cards mid-tilt. The figure additionally
       scales and rises within the tile — the character steps toward the viewer
       rather than just sitting closer. */
    .gc:not(.is-soon):hover .gc-mark { transform: translateZ(62px); }
    .gc:not(.is-soon):hover .gc-figure { transform: translateZ(68px) translateY(-10px) scale(1.045); }
    .gc:not(.is-soon):hover .gc-plate { transform: translateZ(104px); }
    .gc:not(.is-soon):hover .gc-bg { transform: scale(1.045); }
    .gc:not(.is-soon):hover .gc-scrim { opacity: .8; }
}

/* ---------- coming soon ---------- */
.gc.is-soon .gc-card { cursor: default; }
.gc.is-soon .gc-art { filter: grayscale(82%) brightness(.82); }
.gc.is-soon .gc-logo { opacity: .68; filter: grayscale(100%) drop-shadow(0 2px 6px rgba(0, 0, 0, .85)); }
.gc.is-soon .gc-wordmark { color: rgba(255, 255, 255, .74); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .gc-grid { --gc-cols: 4; } }
@media (max-width: 900px)  { .gc-grid { --gc-cols: 3; gap: 14px; } }
@media (max-width: 660px)  { .gc-grid { --gc-cols: 2; gap: 12px; } .gc-logo { max-height: 52px; } .gc-ribbon { width: 108px; height: 108px; } .gc-ribbon span { top: 20px; left: -36px; width: 144px; font-size: .52rem; } }
@media (max-width: 360px)  { .gc-grid { --gc-cols: 1; } }

@media (prefers-reduced-motion: reduce) {
    .gc, .gc-card, .gc-mark, .gc-figure, .gc-plate, .gc-bg, .gc-services { transition: none; }
    .gc, .gc-card { transform: none !important; }
    .gc:not(.is-soon):hover .gc-services { opacity: 1; transform: none; }
}