/**
 * games-symbols.css — paints the same liquid-glass hover effect as the
 * software page (sw-card) onto the .game-card tiles, plus a continuous
 * rainbow glistening loop through gaming-icon outlines.
 *
 * Two systems layered:
 *
 *  1. Liquid-glass card chrome   (mirrors css/software.css .sw-card)
 *     – 16 px radius, faint border, lift on hover, multi-layer glow
 *       built from a token model (--lg-lit, --lg-mid, --lg-counter,
 *       --lg-halo-*) so a single hover tweaks every layer in tune.
 *     – ::after is the inner rim catch-light + bottom-right counter
 *       reflection from the same model.
 *
 *  2. Continuous rainbow glistening   (mirrors map / milestone overrides)
 *     – ::before hosts a pastel rainbow gradient masked by the gaming
 *       icon SVG written into <style id="games-symbol-tiles"> by
 *       js/games-symbols.js.
 *     – On hover the gradient slides 0% ↔ 100% (alternate, never
 *       walks off-screen) and the entire layer hue-rotates 0° → 360°,
 *       so icons keep cycling through the full rainbow as long as
 *       the cursor is over the card. opacity stays pinned at 1; the
 *       icons never fade until mouseleave.
 */

/* ── 1a. Card chrome — sw-card baseline ─────────────────────────── */
body.polish .game-card {
    position: relative;
    border-radius: 16px;
    padding: 0;
    background: #fff;
    /* Transparent border line — keep the 1 px reserved space so the
       rounded corners + halo geometry stays the same as the sw-card
       reference, but the actual stroke is invisible. The card reads
       as a pure glow on the white surface. */
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    /* sw-card-style halo token defaults (indigo, matches "library") */
    --c-r:  99; --c-g: 102; --c-b: 241;
    --c-r2:129; --c-g2:140; --c-b2:248;
    --lg-lit:         0.42;
    --lg-mid:         0.16;
    --lg-edge-w-rim:  0.82;
    --lg-edge-w-soft: 0.30;
    --lg-counter:     0.10;
    --lg-counter-mid: 0.04;
    --lg-halo-out:    0.18;
    --lg-halo-back:   0.06;
    box-shadow:
        -3px -3px 16px -4px rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-halo-out)),
         3px  3px 14px -6px rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-halo-back)),
         0    1px  3px       rgba(15, 23, 42, 0.05);
    transition:
        transform   0.35s cubic-bezier(.34, 1.56, .64, 1),
        border-color 0.35s ease,
        box-shadow   0.4s  cubic-bezier(.22, 1, .36, 1);
}
body.polish .game-card:hover {
    transform: translateY(-5px);
    --lg-lit:         0.55;
    --lg-mid:         0.22;
    --lg-counter:     0.14;
    --lg-counter-mid: 0.06;
    --lg-halo-out:    0.28;
    --lg-halo-back:   0.10;
    /* CLEAR themed border on hover — 1.5 px solid line in the card's
       category colour (per-card token via --c-r/g/b). Makes the
       hovered card visibly stand out from the grid with a crisp
       outline rather than a colourless edge. */
    border: 1.5px solid rgba(var(--c-r), var(--c-g), var(--c-b), 0.85) !important;
    box-shadow:
        -4px -4px 22px -4px rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-halo-out)),
         4px  4px 18px -6px rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-halo-back)),
         0    2px  6px       rgba(15, 23, 42, 0.07);
}

/* ── 2. Rainbow glistening mask layer (::before) ────────────────── */
body.polish .game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    /* VIBRANT rainbow — fully saturated arcade neon, no pastel mute.
       Mixes hot/cool stops so the masked icons read as candy-colored
       8-bit pixels regardless of which symbol lands in which cell. */
    background: linear-gradient(110deg,
        #ff2d6e    0%,   /* hot pink   */
        #ff6a2c   12%,   /* orange     */
        #ffd23f   24%,   /* yellow     */
        #6bff5a   37%,   /* lime       */
        #1fd1a8   50%,   /* teal       */
        #29b6ff   63%,   /* sky        */
        #6a5cff   76%,   /* indigo     */
        #c25cff   88%,   /* violet     */
        #ff2d6e  100%);
    background-size: 320% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    /* Boost saturation so icons pop, and a faint drop-shadow gives
       each pixel chunk a halo against the white card. */
    filter: saturate(1.35) drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
    /* mask-image + mask-size come from js/games-symbols.js (written into
       <style id="games-symbol-tiles">). Until the JS attaches we
       intentionally leave them unset — the gradient is just an empty
       rectangle the user never sees because we start at opacity 0. */
    opacity: 0;
    transition: opacity 0.06s linear;
}

/* Two layered loops:
     • background-position slides 0 % ↔ 100 % → pastel gradient sweeps.
     • hue-rotate 0° → 360° → each icon cycles through every rainbow
       colour continuously.
   The end-position is capped at 100 % and the animation is `alternate`,
   so the gradient never walks off-screen (which would leave a bare
   white phase the way it would with a 0 → 200 % slide). */
@keyframes games-glisten-loop {
    0% {
        background-position: 0% 50%;
        filter: saturate(1.35) hue-rotate(0deg)   drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
        opacity: 1;
    }
    100% {
        background-position: 100% 50%;
        filter: saturate(1.5)  hue-rotate(360deg) drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.22));
        opacity: 1;
    }
}
body.polish .game-card:hover::before {
    opacity: 1;
    animation: games-glisten-loop 3.2s linear infinite alternate;
}

/* ── 1b. Card chrome — sw-card inner rim + counter reflection ──── */
body.polish .game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
    background: radial-gradient(ellipse 42% 42% at 100% 100%,
        rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-counter))     0%,
        rgba(var(--c-r2),var(--c-g2),var(--c-b2),var(--lg-counter-mid)) 40%,
        transparent 78%);
    box-shadow:
        inset  0   1px  0     rgba(255, 255, 255, var(--lg-edge-w-rim)),
        inset  1px 0    0     rgba(255, 255, 255, calc(var(--lg-edge-w-rim) - 0.15)),
        inset  0  -1px  0     rgba(255, 255, 255, var(--lg-edge-w-soft)),
        inset -1px 0    0     rgba(255, 255, 255, var(--lg-edge-w-soft)),
        inset  0   0    0 1px rgba(var(--c-r), var(--c-g), var(--c-b), 0.06),
        inset  0   2px  6px   rgba(255, 255, 255, 0.22),
        inset  0  -6px 14px   rgba(var(--c-r), var(--c-g), var(--c-b), calc(var(--lg-counter) * 0.55));
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
body.polish .game-card:hover::after {
    background: radial-gradient(ellipse 52% 52% at 100% 100%,
        rgba(var(--c-r), var(--c-g), var(--c-b), var(--lg-counter))     0%,
        rgba(var(--c-r2),var(--c-g2),var(--c-b2),var(--lg-counter-mid)) 42%,
        transparent 82%);
}

/* Child content (canvas thumb, info row) must sit above both effect
   layers so the rainbow + counter glow never veil the thumbnail. */
body.polish .game-card > * {
    position: relative;
    z-index: 3;
}

/* ── PLAY / COMING SOON pill — matches .sw-card-cat-badge from
   software.css. Inline-flex pill on a light tinted background with
   bold colored text, scaled up on parent hover. PLAY uses the same
   indigo as the card chrome's halo (library colour); COMING SOON
   uses the muted slate from sw-tag's neutral palette. */
body.polish .game-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    background: #eff6ff;
    color: #3b82f6;
    transition:
        background 0.3s ease,
        color      0.3s ease,
        transform  0.3s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.3s ease;
}
body.polish .game-card-tag.coming {
    background: #f1f5f9;
    color: #64748b;
}
body.polish .game-card:hover .game-card-tag {
    transform: scale(1.08);
    background: #dbeafe;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .15);
}
body.polish .game-card:hover .game-card-tag.coming {
    background: #e2e8f0;
    color: #475569;
    box-shadow: 0 2px 8px rgba(100, 116, 139, .15);
}