/* ════════════════════════════════════════════════════════════════════════
   Tilt Card — reusable interactive game card

   A shared, image-forward card that raises in 3D and tilts toward the cursor
   with a soft moving light (glare) and a subtle border highlight on hover.
   Used by the Thunder landing games section (Views/Home/Index.a.cshtml) and
   the games list page (Views/Games/Index.a.cshtml).

   The 3D tilt + glare position are driven by wwwroot/js/tilt-card.js, which
   attaches to any element with [data-tilt] and writes an inline transform +
   the --gx/--gy custom properties consumed by .tilt-glare.

   Uses the global design tokens from base.css :root, so it inherits the
   active theme (lights up fully under html[data-theme="a"] — "Thunder").
   ════════════════════════════════════════════════════════════════════════ */

.tilt-card {
    position: relative;
    display: block;
    border-radius: 1.1rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-card, #0f1626);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    transition: transform 0.2s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    will-change: transform;
}

.tilt-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

.tilt-card .tilt-card-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.6rem 0.9rem 0.7rem;
    background: linear-gradient(180deg, transparent, rgba(5, 7, 15, 0.92));
    z-index: 3;
}

.tilt-card .tilt-card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tilt-card .tilt-card-price {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tilt-card .tilt-card-price strong { color: var(--accent-yellow); }

/* Subtle border highlight + soft raise on hover. The 3D tilt itself comes from
   the inline transform set by tilt-card.js; this shadow/border is the resting
   hover state so non-pointer / reduced-motion users still get a clean affordance. */
.tilt-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
}

/* Moving light that follows the cursor (position from --gx/--gy). */
.tilt-card .tilt-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
        rgba(255, 255, 255, 0.28),
        rgba(255, 255, 255, 0.06) 28%,
        transparent 60%);
    mix-blend-mode: soft-light;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .tilt-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    .tilt-card .tilt-glare { display: none; }
}