/* ============================================================
   KARAMBASE — "Neon HUD" skin  (option E)
   Override-only stylesheet, loaded LAST and gated by the
   option  kb_skin = neon-hud .
   ROLLBACK (instant, no code change):
       wp option update kb_skin classic
   Re-enable:
       wp option update kb_skin neon-hud
   ============================================================ */

:root{
    /* De-skew: the cut-corner tokens become plain rectangles,
       which removes the slashed corners everywhere they were used. */
    --clip-sm: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    --clip-lg: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* HUD palette (keeps Karambase red identity) */
    --hud-edge: #ff2d3a;
    --hud-glow: rgba(245, 34, 45, 0.55);
    --hud-glow-soft: rgba(245, 34, 45, 0.26);
    --hud-r: 3px;
}

/* ---- Primary CTA: drop the parallelogram, keep the fill, add glow ---- */
.btn-hero-main{
    clip-path: none !important;
    border-radius: var(--hud-r) !important;
    box-shadow: 0 0 18px var(--hud-glow), inset 0 0 14px rgba(255,45,58,.22) !important;
}
.btn-hero-main:hover{
    box-shadow: 0 0 30px var(--hud-glow), 0 0 64px rgba(255,107,0,.22), inset 0 0 16px rgba(255,45,58,.3) !important;
}

/* ---- Secondary / ghost buttons → neon outline ---- */
.btn-hero-sec, .btn-cs-ghost{
    border-radius: var(--hud-r) !important;
    border: 1.5px solid var(--hud-edge) !important;
    color: #ff8a93 !important;
    box-shadow: 0 0 12px var(--hud-glow-soft), inset 0 0 9px rgba(255,45,58,.10) !important;
    text-shadow: 0 0 8px rgba(255,45,58,.4);
}
.btn-hero-sec:hover, .btn-cs-ghost:hover{
    color: #fff !important;
    box-shadow: 0 0 20px var(--hud-glow), inset 0 0 12px rgba(255,45,58,.18) !important;
}

/* ---- View-all + small action buttons ---- */
.hp-btn-view-all{
    border-radius: var(--hud-r) !important;
    border: 1px solid var(--hud-edge) !important;
    box-shadow: 0 0 10px var(--hud-glow-soft) !important;
}
.btn-prod-buy, .btn-hd-buy, .cta-search-btn, .btn-cs{
    clip-path: none !important;
    border-radius: var(--hud-r) !important;
    box-shadow: 0 0 12px var(--hud-glow-soft) !important;
}

/* ---- Cards → neon HUD frame (border + glow follow CS2 rarity vars) ---- */
.prod-card, .hd-card, .cat-card, .blog-card{
    clip-path: none !important;
    border-radius: var(--hud-r) !important;
    border: 1px solid var(--pc-c, rgba(255,45,58,.5)) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 16px var(--pc-glow, var(--hud-glow-soft)) !important;
}
.prod-card:hover, .hd-card:hover, .cat-card:hover, .blog-card:hover{
    border-color: var(--pc-c, var(--hud-edge)) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 32px var(--pc-glow, var(--hud-glow)) !important;
}

/* ---- HUD corner brackets on cards (blog-card excluded: blog.css already uses ::after) ---- */
.prod-card::after, .hd-card::after, .cat-card::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: .85;
    background:
        linear-gradient(var(--hud-edge),var(--hud-edge)) left 0 top 0/13px 2px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) left 0 top 0/2px 13px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) right 0 top 0/13px 2px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) right 0 top 0/2px 13px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) left 0 bottom 0/13px 2px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) left 0 bottom 0/2px 13px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) right 0 bottom 0/13px 2px no-repeat,
        linear-gradient(var(--hud-edge),var(--hud-edge)) right 0 bottom 0/2px 13px no-repeat;
}

/* ---- Rajdhani for prices / data (HUD readout feel) ---- */
.prod-price, .hd-price, .prod-weapon-type, .hd-weapon-type{
    font-family: 'Rajdhani', sans-serif !important;
    letter-spacing: .02em;
}

/* ---- Accessibility: ease motion + keep glow off for reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
    .prod-card, .hd-card, .cat-card, .blog-card, .btn-hero-main, .btn-hero-sec{
        transition: none !important;
    }
}

/* ---- Low-power phones: trim the heaviest glows to protect FPS ---- */
@media (max-width: 600px){
    .prod-card, .hd-card, .cat-card, .blog-card{
        box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 10px var(--pc-glow, var(--hud-glow-soft)) !important;
    }
    .prod-card::after, .hd-card::after, .cat-card::after{ opacity:.7; }
}