/* ============================================
   BORNES D'ARCADE — présentation produit boutique
   Remplace .produit-card pour les 4 grilles de boutique.php.
   Deux variantes : .bcab--hero (borne complète, un seul
   exemplaire, effets CRT) et .bcab--compact (le reste de
   la grille, sans animation lourde).
   ============================================ */

.bcab {
    --bcab-yellow-deep: #c99a2e;
    --bcab-purple-deep: #4c2fa8;
    --bcab-ink: #050710;
    --bcab-text-dim: rgba(243, 247, 250, .62);

    position: relative;
    max-width: 380px;
    margin: 0 auto;
    background: linear-gradient(100deg, #0a1120 0%, var(--color-bg-dark) 16%, #16233f 34%, var(--color-bg-dark) 58%, #0a1120 100%);
    border-radius: 26px 26px 8px 8px;
    padding: 12px 12px 0;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, .8),
        inset 0 2px 0 rgba(255, 255, 255, .08),
        inset -10px 0 20px rgba(0, 0, 0, .5);
    border: 1px solid rgba(139, 92, 246, .18);
}

.bcab-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    z-index: 4;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: .78em;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 20px;
    color: var(--bcab-ink);
    background: linear-gradient(145deg, #ffe9ad, var(--color-yellow-vif) 55%, var(--bcab-yellow-deep));
    box-shadow: 0 4px 0 0 #7a5a12, 0 6px 10px rgba(0, 0, 0, .45);
}

.bcab-badge--soon {
    background: linear-gradient(145deg, #cfd3dc, #9aa0ad 55%, #5c6270);
    color: #1a1d24;
    box-shadow: 0 4px 0 0 #464a54, 0 6px 10px rgba(0, 0, 0, .45);
}

.bcab-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ---------- fronton lumineux ---------- */
.bcab-marquee {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 460 / 108;
    border-radius: 16px 16px 3px 3px;
    background: linear-gradient(180deg, #12182c, #0b0f1c);
    border: 2px solid var(--bcab-ink);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: inset 0 -12px 22px rgba(0, 0, 0, .4), 0 5px 0 rgba(0, 0, 0, .35);
}

.bcab-marquee::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 201, 71, .32), transparent 70%);
    opacity: .5;
    animation: bcabTubeWarm 6s ease-in-out infinite;
}

@keyframes bcabTubeWarm {

    0%,
    100% {
        opacity: .32;
    }

    50% {
        opacity: .55;
    }
}

.bcab-mq-in {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    padding: 0 7%;
    width: 100%;
    line-height: .9;
}

.bcab-mq-logo {
    width: clamp(26px, 13%, 42px);
    flex: none;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
}

.bcab-mq-logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.bcab-mq-text {
    min-width: 0;
    line-height: 1.05;
}

.bcab-mq-l1,
.bcab-mq-l2 {
    display: block;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    color: var(--color-yellow-vif);
    text-shadow: 0 2px 0 var(--bcab-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bcab-mq-l1 {
    font-size: clamp(9px, 2.6cqw, 12px);
    letter-spacing: .04em;
}

.bcab-mq-l2 {
    font-size: clamp(14px, 4.4cqw, 20px);
    margin-top: .08em;
}

/* ---------- écran CRT ---------- */
.bcab-bezel {
    position: relative;
    width: 100%;
    background: radial-gradient(ellipse at 50% 40%, #0d1226 0%, #070a16 60%, #03040a 100%);
    border: 2px solid var(--bcab-ink);
    border-radius: 5px;
    padding: 5% 6%;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .9);
}

.bcab-screen {
    position: relative;
    background: #04060c;
    border: 2px solid #171d34;
    border-radius: 12px / 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 5% 6%;
    box-shadow: 0 0 22px rgba(139, 92, 246, .28), inset 0 0 50px rgba(0, 0, 0, .9);
}

.bcab-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px);
}

.bcab-screen>* {
    position: relative;
    z-index: 2;
}

.bcab-hud {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .05em;
    color: var(--bcab-text-dim);
    white-space: nowrap;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bcab-hud b {
    color: var(--color-yellow-vif);
    font-weight: 600;
}

.bcab-title {
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: clamp(13px, 3.6vw, 17px);
    color: var(--color-yellow-vif);
    letter-spacing: .02em;
    text-align: center;
    margin-bottom: 6px;
    text-shadow: 0 2px 0 var(--bcab-purple-deep);
}

.bcab-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 2px solid var(--color-yellow-vif);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(255, 201, 71, .35), inset 0 0 18px rgba(0, 0, 0, .7);
    margin-bottom: 9px;
    background: var(--bg, #050710);
}

.bcab-art a {
    display: block;
    width: 100%;
    height: 100%;
}

.bcab-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.15) contrast(1.08) brightness(.92);
}

.bcab-art.is-locked img,
.bcab-art.is-locked .bcab-art-v {
    filter: grayscale(.55) brightness(.5);
}

.bcab-art .bcab-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .4) 0 1px, transparent 1px 3px);
}

/* Écran sans jaquette (borne en préparation, pas encore d'image) */
.bcab-art--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 35%, #16233f, #050710 75%);
}

.bcab-empty-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(243, 247, 250, .4);
    text-align: center;
    padding: 0 12%;
}

.bcab-art-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--color-purple-vif);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    letter-spacing: .1em;
    padding: 2px 6px;
    border-radius: 0 3px 0 0;
}

.bcab-art-tag.is-locked {
    background: rgba(5, 7, 15, .85);
    color: var(--bcab-text-dim);
}

.bcab-stats {
    width: 100%;
    display: grid;
    gap: 5px;
    margin-bottom: 9px;
}

.bcab-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: .02em;
}

.bcab-stat .bcab-stat-k {
    color: var(--bcab-text-dim);
    flex: 0 0 74px;
}

.bcab-stat .bcab-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, .1);
    border-radius: 2px;
    overflow: hidden;
}

.bcab-stat .bcab-bar i {
    display: block;
    height: 100%;
    background: var(--color-yellow-vif);
    box-shadow: 0 0 6px rgba(255, 201, 71, .7);
}

.bcab-stat .bcab-stat-val {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-yellow-vif);
}

.bcab-brief {
    margin: 0 0 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bcab-text-dim);
}

.bcab-extra {
    margin: 0 0 10px;
    padding: 8px;
    background: rgba(139, 92, 246, .16);
    border-radius: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--color-purple-vif);
    font-weight: bold;
}

.bcab-extra ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    text-align: left;
    font-weight: normal;
    color: var(--color-text-light);
}

.bcab-extra li {
    margin: 4px 0;
}

.bcab-extra li.is-soon {
    color: var(--bcab-text-dim);
}

/* ---------- prompt "press start" (borne hero uniquement) ---------- */
.bcab-ready {
    display: block;
    text-align: center;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: clamp(11px, 3vw, 13px);
    color: var(--color-yellow-vif);
    letter-spacing: .08em;
    text-shadow: 0 0 12px rgba(255, 201, 71, .8);
    margin: 2px 0 10px;
    animation: bcabBlink 1.1s steps(2, end) infinite;
}

@keyframes bcabBlink {
    50% {
        opacity: .2;
    }
}

/* ---------- prix + actions ---------- */
.bcab-deck {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.bcab-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    margin-bottom: 2px;
}

.bcab-price .bcab-price-label {
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--color-purple-vif);
    text-transform: uppercase;
}

.bcab-price .bcab-price-now {
    font-size: clamp(15px, 4vw, 19px);
    font-weight: 600;
    color: var(--color-text-light);
    text-shadow: 0 0 14px rgba(139, 92, 246, .7);
}

.bcab-price .bcab-price-was {
    font-size: 11px;
    color: var(--bcab-text-dim);
    text-decoration: line-through;
}

.bcab-price .bcab-price-promo {
    font-size: 10px;
    color: var(--color-yellow-vif);
    font-weight: bold;
}

.bcab-price-detail {
    text-align: center;
    font-size: 9px;
    color: var(--bcab-text-dim);
    margin: -2px 0 2px;
}

.bcab-deck .btn-ghost,
.bcab-deck .btn-arcade {
    width: 100%;
}

.bcab-owned-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 50px;
    background: rgba(139, 92, 246, .18);
    border: 1.5px solid var(--color-purple-vif);
    color: var(--color-text-light);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.bcab-progress {
    margin: -4px 0 0;
    text-align: center;
    font-size: 10.5px;
    color: var(--bcab-text-dim);
}

.bcab-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .1em;
    padding: 11px 20px;
    border-radius: 50px;
    border: 1.5px dashed rgba(255, 255, 255, .25);
    color: var(--bcab-text-dim);
    width: 100%;
    box-sizing: border-box;
}

.bcab-foot {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .4);
    margin-top: 8px;
}

.bcab-foot span {
    color: var(--color-purple-vif);
}

/* ---------- effets CRT (borne hero uniquement) ---------- */
.bcab--hero .bcab-screen::before {
    content: "";
    position: absolute;
    left: -30%;
    top: -60%;
    width: 80%;
    height: 220%;
    z-index: 6;
    pointer-events: none;
    rotate: 16deg;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 45%, rgba(255, 201, 71, .1) 50%, transparent);
    animation: bcabSweep 7s linear infinite;
}

@keyframes bcabSweep {
    0% {
        translate: 0 0;
    }

    55% {
        translate: 210% 0;
    }

    100% {
        translate: 210% 0;
    }
}

.bcab-flicker {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: #c9d8ff;
    mix-blend-mode: overlay;
    opacity: 0;
    animation: bcabFlick 5.5s steps(1, end) infinite;
}

@keyframes bcabFlick {

    0%,
    96% {
        opacity: 0;
    }

    96.6% {
        opacity: .15;
    }

    97.2% {
        opacity: 0;
    }

    97.8% {
        opacity: .09;
    }

    98.4% {
        opacity: 0;
    }
}

.bcab--hero .bcab-art {
    animation: bcabFramePulse 2.8s ease-in-out infinite;
}

@keyframes bcabFramePulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 201, 71, .3), inset 0 0 18px rgba(0, 0, 0, .7);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 201, 71, .6), inset 0 0 18px rgba(0, 0, 0, .7);
    }
}

/* ---------- platine boutons (borne hero uniquement) ---------- */
.bcab-panel {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 16px 16px 18px;
    background: linear-gradient(#131a30, #0a0e1c 60%, #050810);
    border-top: 3px solid var(--color-purple-vif);
    border-radius: 5px 5px 0 0;
}

.bcab-panel::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255, 201, 71, .35);
    border-radius: 4px;
    pointer-events: none;
}

.bcab-panel-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.bcab-btn-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    justify-items: center;
}

.bcab-pb {
    width: 100%;
    max-width: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #fff, #efefe8 40%, #b9b9ae 78%, #8d8d82);
    box-shadow: 0 4px 0 #4e4e46, 0 6px 10px rgba(0, 0, 0, .55);
}

.bcab-pb.is-yellow {
    background: radial-gradient(circle at 34% 26%, #fff6c9, var(--color-yellow-vif) 48%, #a8790a 85%);
    box-shadow: 0 4px 0 #6b5300, 0 6px 10px rgba(0, 0, 0, .55);
}

.bcab-stick {
    display: grid;
    justify-items: center;
}

.bcab-knob {
    width: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 24%, #fff 2%, #c9aaff 26%, var(--color-purple-vif) 58%, #3c1f8a 95%);
    box-shadow: 0 8px 14px rgba(0, 0, 0, .6), 0 0 20px rgba(139, 92, 246, .4), inset -3px -5px 10px rgba(0, 0, 0, .4);
}

.bcab-shaft {
    width: 8px;
    height: 11px;
    background: linear-gradient(90deg, #5a5a66, #d5d5dc 45%, #4a4a56);
    margin-top: -5px;
}

.bcab-base {
    width: 26px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 30%, #33333e, #0e0e14);
}

.bcab-mini-hud {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7.5px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.bcab-lamp {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bcab-lamp i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff6c9;
    box-shadow: 0 0 8px rgba(255, 201, 71, .9);
    animation: bcabLampBlink 2.6s steps(2, end) infinite;
}

@keyframes bcabLampBlink {
    50% {
        background: #8a8a80;
        box-shadow: none;
    }
}

/* ---------- variante compacte : reste de la grille ---------- */
.bcab--compact .bcab-stack {
    gap: 10px;
}

.bcab--compact .bcab-bezel,
.bcab--compact .bcab-screen {
    padding: 6% 7%;
}

.bcab--compact .bcab-screen {
    min-height: 260px;
}

.bcab--hero .bcab-screen {
    min-height: 396px;
}

@media (prefers-reduced-motion: reduce) {
    .bcab * {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .bcab {
        max-width: 100%;
    }
}

/* Emplacement de grille borne + avis (escape games) */
.bcab-slot {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bcab-slot .avis-widget {
    max-width: 380px;
    margin: 0 auto;
    padding: 0 6px;
}

/* Rangée de bornes complètes, une par escape game (Liste_defis.php) */
.bcab-showroom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1120px;
    margin: 0 auto;
}