/* ==========================================================================
   9wickets — "লাইভ ক্যাসিনো" (Live Casino) landing page (2026-08)
   --------------------------------------------------------------------------
   Sibling to sports-betting-page.css — same recipe, same reasoning (no new
   photos needed; games/features/tables are icon-and-copy sections reusing
   already-sitewide components): .w9ip-hero, .vk-section/.vk-eyebrow/.vk-h2/
   .vk-lead, .b9g-sec/.b9g-wrap/.b9g-glass--dark/.b9g-mesh--navy, .vk-how--v3/
   .hw3-* (reworded for a "sit down at a live table" flow instead of a
   betting flow).

   2026-08 v2: the games/features cards were upgraded from the generic
   sitewide .b9g-card (flat white box, small icon chip — reads as a
   placeholder next to the rest of this page's premium sections) to a
   dedicated .w9lc-card component with two context-aware skins:
     - inside .w9lc-games (cream section): a warm white card, gold-gradient
       icon disc, gold-glow lift on hover.
     - inside .w9lc-why (navy section): the exact "Spotlight Ring" language
       from the home page's redesigned Agent Category cards
       (agents-cards-v5.css, .a5-card) — dark card, gold-ring icon, a
       radial spotlight glow behind it — so the two premium dark-card
       moments on the site read as one consistent design system rather
       than two different treatments.
   ========================================================================== */

.w9lc-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: clamp(20px, 3vw, 32px);
}

.w9lc-card {
    position: relative;
    isolation: isolate;
    flex: 1 1 210px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px 24px;
    border-radius: 20px;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
.w9lc-card:hover { transform: translateY(-6px); }

.w9lc-card__icon {
    position: relative;
    z-index: 1;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, border-color .4s ease;
}
.w9lc-card__icon svg { width: 24px; height: 24px; display: block; }
.w9lc-card:hover .w9lc-card__icon { transform: scale(1.08) rotate(-4deg); }

.w9lc-card__title { position: relative; z-index: 1; font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; }
.w9lc-card__body { position: relative; z-index: 1; font-size: 12.5px; line-height: 1.58; margin: 0; }

/* ---- light skin (games grid, cream section) ---- */
.w9lc-games .w9lc-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF6 100%);
    border: 1px solid rgba(8, 65, 92, .08);
    box-shadow: 0 10px 28px -14px rgba(8, 65, 92, .16);
}
.w9lc-games .w9lc-card:hover {
    border-color: rgba(232, 162, 0, .5);
    box-shadow: 0 22px 42px -16px rgba(8, 65, 92, .24), 0 0 0 1px rgba(232, 162, 0, .16);
}
.w9lc-games .w9lc-card__icon {
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    color: #1A0F02;
    box-shadow: 0 10px 22px -6px rgba(232, 162, 0, .5);
}
/* !important + body.vk prefix: wickets-home.css's "PREMIUM REBALANCE" retrofit
   layer forces `body.vk h1..h5 { color:#1A1813 !important }` globally, which
   otherwise beats these rules even though .w9lc-card__title is more specific
   by class count — same fix already applied to .vk-story/.vk-cta/.w9ip-hero
   titles elsewhere in this codebase. Without it the dark-skin title below is
   near-invisible (dark ink on a near-black card). */
body.vk .w9lc-games .w9lc-card__title { color: #08415C !important; }
.w9lc-games .w9lc-card__body { color: #4A5A66; }

/* ---- dark "Spotlight Ring" skin (why-us grid, navy section) — matches
   .a5-card in agents-cards-v5.css exactly, same component language ---- */
.w9lc-why.b9g-glass { border-radius: 0; box-shadow: none; }
.w9lc-why .b9g-wrap { max-width: 1080px; }
.w9lc-why .w9lc-card {
    background: linear-gradient(180deg, #17150F 0%, #0E0C09 100%);
    border: 1px solid rgba(247, 185, 0, .16);
    box-shadow: 0 4px 20px rgba(23, 21, 15, .18);
}
.w9lc-why .w9lc-card:hover {
    border-color: rgba(247, 185, 0, .55);
    box-shadow: 0 24px 46px rgba(23, 21, 15, .34), 0 0 0 1px rgba(247, 185, 0, .1);
}
.w9lc-why .w9lc-card__spot {
    position: absolute;
    z-index: 0;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(247, 185, 0, .28), transparent 72%);
    filter: blur(6px);
    opacity: .7;
    pointer-events: none;
    transition: opacity .4s ease;
}
.w9lc-why .w9lc-card:hover .w9lc-card__spot { opacity: 1; }
.w9lc-why .w9lc-card__icon {
    background: rgba(23, 21, 15, .6);
    border: 1.5px solid rgba(247, 185, 0, .4);
    color: #F7B900;
}
.w9lc-why .w9lc-card:hover .w9lc-card__icon {
    background: rgba(247, 185, 0, .16);
    border-color: rgba(247, 185, 0, .8);
}
body.vk .w9lc-why .w9lc-card__title { color: #FFFFFF !important; }
.w9lc-why .w9lc-card__body { color: rgba(255, 255, 255, .72); }

.w9lc-chiprow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(18px, 2.5vw, 26px);
}
.w9lc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(8, 65, 92, .12);
    box-shadow: 0 4px 14px rgba(8, 65, 92, .06);
    font-family: var(--vk-font-bn);
    font-weight: 700;
    font-size: 13px;
    color: #08415C;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.w9lc-chip svg { flex: none; width: 14px; height: 14px; color: #E6A800; }
.w9lc-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 233, 0, .55);
    box-shadow: 0 10px 22px rgba(8, 65, 92, .12);
}

@media (max-width: 767px) {
    .w9lc-card { flex: 1 1 140px; max-width: 160px; padding: 22px 14px 18px; }
    .w9lc-chip { padding: 8px 16px; font-size: 12.5px; }
}