/* ==========================================================================
   9wickets — "যেকোনো ডিভাইস · যেকোনো সময়" REDESIGN v3 "Any Game, Live"
   (loads LAST)
   --------------------------------------------------------------------------
   Supersedes verify-devices.css (v2 "Live, Anywhere" — light theme, casino-
   only copy, live-casino-device.jpg). Same dark-aurora premium language as
   hero-v5 "Live Table" and why-v5 "Proof Grid": full-bleed dark shell,
   glass chips/pills, glowing yellow accents.
   Content pivot: was casino-device-specific copy; now broadened to live
   sports + casino betting across devices, to match the new sports-action
   photo (was a poker/casino table photo).
   Structure/BEM classes unchanged (.vk-verify__grid/__media/__glow/__frame/
   __chip/__copy/__list, .vk-vd-row/__chip) — only the section modifier
   bumps (.vk-verify--v2 -> --v3), matching this codebase's own convention
   (unversioned BEM names, versioned modifier only). Reuses [data-reveal]
   only — no new JS.
   Scoped entirely under .vk-verify--v3.
   ========================================================================== */

/* Full-bleed background — `.vk-section` base rule caps max-width/centers
   the section element itself, same fix as why-v5.css. */
body.vk .vk-verify--v3.vk-section {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(28px, 3.2vw, 44px) !important;
    padding-bottom: clamp(28px, 3.2vw, 44px) !important;
    background: linear-gradient(180deg, #0B0906 0%, #14110A 55%, #17150F 100%) !important;
    border-top: 1px solid rgba(255, 199, 44, .14);
    border-bottom: 1px solid rgba(255, 199, 44, .14);
    isolation: isolate;
}
body.vk .vk-verify--v3.vk-section::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34% 48% at 10% 15%, rgba(255, 199, 44, .16), transparent 68%),
        radial-gradient(32% 44% at 92% 85%, rgba(232, 162, 0, .12), transparent 65%);
    filter: blur(10px);
    animation: vd3-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes vd3-aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
body.vk .vk-verify--v3 .vk-verify__grid { position: relative; z-index: 1; }

/* ---------------------------- MEDIA SIDE ------------------------------- */
body.vk .vk-verify--v3 .vk-verify__glow {
    background: radial-gradient(60% 55% at 50% 40%, rgba(255, 199, 44, .3), transparent 70%);
}
body.vk .vk-verify--v3 .vk-verify__frame {
    border: 1px solid rgba(255, 199, 44, .28) !important;
    box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4) !important;
}
body.vk .vk-verify--v3 .vk-verify__frame img { aspect-ratio: 4 / 5; }
body.vk .vk-verify--v3 .vk-verify__chip {
    color: #F5EFE0 !important;
    background: rgba(11, 9, 6, .72) !important;
    border: 1px solid rgba(255, 199, 44, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
body.vk .vk-verify--v3 .vk-verify__chip--top { color: #F5EFE0 !important; }
body.vk .vk-verify--v3 .vk-verify__chip--bottom { color: #F5EFE0 !important; }
body.vk .vk-verify--v3 .vk-verify__chip svg { color: #FFC72C; }
body.vk .vk-verify--v3 .vk-vd-dot {
    background: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
}
body.vk .vk-verify--v3 .vk-verify__chip-dot {
    background: #FFC72C;
    box-shadow: 0 0 0 4px rgba(255, 199, 44, .22);
}

/* ---------------------------- COPY SIDE -------------------------------- */
body.vk .vk-verify--v3 .vk-eyebrow {
    color: #E9C266 !important;
    background: rgba(255, 199, 44, .08);
    border-color: rgba(255, 199, 44, .22);
}
body.vk .vk-verify--v3 .vk-h2 {
    color: #FBF6EC !important;
}
body.vk .vk-verify--v3 .vk-h2 em {
    font-style: normal;
    color: #FFC72C !important;
    text-shadow: 0 0 26px rgba(255, 199, 44, .3);
}
/* The shared `.vk-section .vk-lead{ max-width:62ch; margin-left:auto;
   margin-right:auto }` rule centers the width-capped paragraph block —
   correct for centered layouts, but it pulls the lead's left edge away
   from the eyebrow/heading above it in this left-aligned two-column
   split, breaking the vertical alignment. */
body.vk .vk-verify--v3 .vk-lead {
    color: #BFB6A0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.vk .vk-verify--v3 .vk-verify__list li {
    color: #DCD3BE !important;
}
body.vk .vk-verify--v3 .vk-verify__list li svg {
    color: #FFC72C !important;
    background: rgba(255, 199, 44, .12) !important;
}

/* Structural rules for .vk-vd-row/.vk-vd-chip/.vk-vd-ic (sizing, layout,
   the live-pulse dot keyframe) used to live in verify-devices.css (v2) —
   that file is no longer enqueued, so they're absorbed here rather than
   left as a silent dependency on an unenqueued stylesheet. */
body.vk .vk-vd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}
body.vk .vk-verify--v3 .vk-vd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 199, 44, .22) !important;
    color: #DCD3BE !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.vk .vk-verify--v3 .vk-vd-chip:hover {
    background: rgba(255, 199, 44, .1) !important;
    border-color: rgba(255, 199, 44, .4) !important;
    transform: translateY(-2px);
}
body.vk .vk-verify--v3 .vk-vd-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #FFC72C !important;
    background: rgba(255, 199, 44, .12) !important;
}
body.vk .vk-verify--v3 .vk-vd-ic svg { width: 12px; height: 12px; }

body.vk .vk-verify--v3 .vk-verify__chip--top .vk-vd-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: vd3-livepulse 1.8s ease-out infinite;
}
@keyframes vd3-livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (max-width: 767px) {
    body.vk .vk-vd-row { justify-content: center; }
}

/* At <=860px wickets-home.css switches .vk-verify__copy to text-align:
   center — restore the auto margins there so the lead block re-centers
   along with everything else instead of staying flush left. */
@media (max-width: 860px) {
    body.vk .vk-verify--v3 .vk-lead {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-verify--v3.vk-section::before { animation: none !important; }
    body.vk .vk-verify--v3 .vk-vd-dot { animation: none !important; }
    body.vk .vk-verify--v3 .vk-vd-chip { transition: none !important; }
}