/* ═══════════════════════════════════════════════════════════════════════════
   BOTQUEST — RPG MATCH-3 À 5 HÉROS ROBOTS
   Styles CSS thématiques natifs ProxWide (Light, Dark, Neon, Sakura, Forest)
   ═══════════════════════════════════════════════════════════════════════════ */

.bq-container {
    /* Interface de jeu indépendante du thème clair/sombre de l'application */
    --bg-card: #1e293b;
    --bg-primary: #0f172a;
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.14);
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 15%, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 70%, #070b14 100%);
    color: #f8fafc;
    border-radius: 20px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    overflow: hidden;
    user-select: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.08);
    font-family: inherit;
    box-sizing: border-box;
}

.bq-container.is-shaking {
    animation: bqScreenShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes bqScreenShake {
    10%, 90% { transform: translate3d(-3px, 2px, 0); }
    20%, 80% { transform: translate3d(4px, -3px, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 3px, 0); }
    40%, 60% { transform: translate3d(4px, -2px, 0); }
}

/* ── HEADER SUPÉRIEUR ── */
.bq-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.84rem;
    color: #f8fafc;
    z-index: 10;
    flex-shrink: 0;
}

.bq-top-bar strong {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.bq-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 800;
    color: #f8fafc;
}

.bq-energy-timer {
    font-size: 0.68rem;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.2px;
}

.bq-btn-icon {
    background: transparent;
    border: none;
    color: #f8fafc;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bq-btn-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* ── CHAMP DE BATAILLE ALIGNÉ (ARÈNE + GRILLE + PROJECTILES) ── */
.bq-battlefield {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── CALQUE DES PROJECTILES ÉLÉMENTAIRES ASCENDANTS ── */
.bq-projectiles-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 55;
}

.bq-element-orb {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: bqFlyAscend 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes bqFlyAscend {
    0% {
        transform: translate(calc(var(--sx) - 13px), calc(var(--sy) - 13px)) scale(0.5);
        opacity: 0.3;
    }
    18% {
        opacity: 1;
        transform: translate(calc(var(--sx) + (var(--tx) - var(--sx)) * 0.18 - 13px), calc(var(--sy) + (var(--ty) - var(--sy)) * 0.18 - 13px)) scale(1.25);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx) - 13px), calc(var(--ty) - 13px)) scale(0.85);
        opacity: 0;
    }
}

.bq-element-orb .bq-orb-core {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 10px currentColor;
}

.bq-element-orb .bq-orb-trail {
    position: absolute;
    width: 8px;
    height: 20px;
    bottom: -12px;
    border-radius: 4px;
    filter: blur(2px);
    opacity: 0.75;
}

.bq-element-orb.is-blue .bq-orb-core {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    box-shadow: 0 0 12px #38bdf8;
}
.bq-element-orb.is-blue .bq-orb-trail {
    background: linear-gradient(180deg, #38bdf8, transparent);
}

.bq-element-orb.is-yellow .bq-orb-core {
    background: linear-gradient(135deg, #fde047, #ca8a04);
    box-shadow: 0 0 12px #facc15;
}
.bq-element-orb.is-yellow .bq-orb-trail {
    background: linear-gradient(180deg, #facc15, transparent);
}

.bq-element-orb.is-purple .bq-orb-core {
    background: linear-gradient(135deg, #c084fc, #9333ea);
    box-shadow: 0 0 12px #a855f7;
}
.bq-element-orb.is-purple .bq-orb-trail {
    background: linear-gradient(180deg, #c084fc, transparent);
}

.bq-element-orb.is-red .bq-orb-core {
    background: linear-gradient(135deg, #f87171, #dc2626);
    box-shadow: 0 0 12px #ef4444;
}
.bq-element-orb.is-red .bq-orb-trail {
    background: linear-gradient(180deg, #f87171, transparent);
}

.bq-element-orb.is-green .bq-orb-core {
    background: linear-gradient(135deg, #86efac, #16a34a);
    box-shadow: 0 0 12px #4ade80;
}
.bq-element-orb.is-green .bq-orb-trail {
    background: linear-gradient(180deg, #4ade80, transparent);
}

.bq-element-orb.is-bomb .bq-orb-core {
    background: linear-gradient(135deg, #fbbf24, #ea580c);
    box-shadow: 0 0 16px #f97316;
}
.bq-element-orb.is-bomb .bq-orb-trail {
    background: linear-gradient(180deg, #f97316, transparent);
}

.bq-element-orb.is-firework .bq-orb-core {
    background: linear-gradient(135deg, #60a5fa, #ec4899);
    box-shadow: 0 0 16px #3b82f6;
}
.bq-element-orb.is-firework .bq-orb-trail {
    background: linear-gradient(180deg, #ec4899, transparent);
}

/* ── PROJECTILES D'ATTAQUE ENNEMIE DESCENDANTS (VERS LES ROBOTS) ── */
.bq-enemy-projectile {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 65;
    animation: bqEnemyBlastDown 0.28s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes bqEnemyBlastDown {
    0% {
        transform: translate(calc(var(--sx) - 13px), calc(var(--sy) - 13px)) scale(0.6);
        opacity: 0.3;
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--sx) + (var(--tx) - var(--sx)) * 0.2 - 13px), calc(var(--sy) + (var(--ty) - var(--sy)) * 0.2 - 13px)) scale(1.35);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx) - 13px), calc(var(--ty) - 13px)) scale(1.1);
        opacity: 0;
    }
}

.bq-enemy-projectile .bq-enemy-core {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #fca5a5 0%, #ef4444 50%, #991b1b 100%);
    box-shadow: 0 0 16px #ef4444, 0 0 28px rgba(239, 68, 68, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.bq-enemy-projectile .bq-enemy-trail {
    position: absolute;
    width: 6px;
    height: 32px;
    top: -26px;
    border-radius: 3px;
    background: linear-gradient(0deg, #ef4444, transparent);
    filter: blur(2px);
    opacity: 0.85;
}

/* ── ARÈNE DE COMBAT (HAUT) : 3 VOIES & 6 POSITIONS ── */
.bq-arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.bq-arena {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    gap: 4px 8px;
    padding: 6px 10px;
    height: 165px;
    min-height: 165px;
    max-height: 165px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 65%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.5) 100%);
    border-bottom: 2px solid rgba(56, 189, 248, 0.25);
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
}

/* 3 Colonnes de Voies Visuelles en Arrière-Plan */
.bq-arena-lanes-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    pointer-events: none;
    z-index: 0;
}
.bq-lane-col {
    border-right: 1px dashed rgba(56, 189, 248, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bq-lane-col:last-child {
    border-right: none;
}
.bq-empty-lane-label {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(148, 163, 184, 0.3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px dashed rgba(148, 163, 184, 0.15);
}

.bq-arena.is-boss-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 165px;
    min-height: 165px;
    max-height: 165px;
}

.bq-enemy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
    max-width: 130px;
    margin: 0 auto;
    background: rgba(15, 23, 42, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 5px 4px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.bq-enemy-card:hover {
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

.bq-enemy-card.lane-left {
    grid-column: 1;
}
.bq-enemy-card.lane-mid {
    grid-column: 2;
}
.bq-enemy-card.lane-right {
    grid-column: 3;
}

/* Positionnement vertical automatique : rangée unique centrée ou 2 rangées */
.bq-enemy-card.row-single {
    grid-row: 1 / span 2;
    align-self: center;
}
.bq-enemy-card.row-back {
    grid-row: 1;
    transform: scale(0.92);
    opacity: 0.92;
    align-self: center;
}
.bq-enemy-card.row-front {
    grid-row: 2;
    z-index: 2;
    align-self: center;
}

.bq-enemy-card.is-boss {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    max-width: 220px;
}

/* Ciblage High-Tech (Cyber Glow doré, propre sans cadre en pointillés agressif) */
.bq-enemy-card.is-targeted {
    border-color: #f59e0b;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.55), inset 0 0 10px rgba(245, 158, 11, 0.2);
    transform: translateY(-2px) scale(1.02);
}
.bq-enemy-card.is-targeted::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1.5px solid rgba(245, 158, 11, 0.7);
    border-radius: 14px;
    pointer-events: none;
    animation: bqPulseTarget 1.6s infinite alternate ease-in-out;
}

@keyframes bqPulseTarget {
    0% { opacity: 0.5; box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }
    100% { opacity: 1; box-shadow: 0 0 12px rgba(245, 158, 11, 0.7); }
}

.bq-enemy-name {
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.2px;
}

.bq-row-indicator {
    font-size: 0.56rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 3px;
}
.bq-row-indicator.is-front {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.bq-row-indicator.is-back {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}
.bq-row-indicator.is-boss-badge {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.bq-enemy-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #f87171;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.15);
    position: relative;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.bq-enemy-avatar.is-boss {
    width: 72px;
    height: 72px;
    border-color: #ef4444;
    font-size: 2.5rem;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5), inset 0 0 15px rgba(239, 68, 68, 0.3);
    animation: bqBossPulse 2s infinite alternate ease-in-out;
}

@keyframes bqBossPulse {
    from { box-shadow: 0 0 18px rgba(239, 68, 68, 0.4); }
    to { box-shadow: 0 0 32px rgba(239, 68, 68, 0.75), 0 0 10px #f59e0b; }
}

/* Animation d'attaque ennemie (ruée vers le bas) */
.bq-enemy-card.is-attacking .bq-enemy-avatar {
    animation: bqEnemyLunge 0.38s ease forwards;
}

@keyframes bqEnemyLunge {
    0% { transform: translateY(0) scale(1); filter: none; }
    30% { transform: translateY(-10px) scale(0.92); filter: brightness(1.6) drop-shadow(0 0 10px #f59e0b); }
    60% { transform: translateY(26px) scale(1.22); filter: brightness(2.2) drop-shadow(0 0 25px #ef4444); }
    100% { transform: translateY(0) scale(1); filter: none; }
}

.bq-enemy-card.is-hit .bq-enemy-avatar {
    animation: bqEnemyHit 0.32s ease;
}

.bq-enemy-timer {
    font-size: 0.65rem;
    font-weight: 800;
    margin-top: 3px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.bq-enemy-timer.is-imminent {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    animation: bqTimerPulse 0.8s infinite alternate ease-in-out;
}

@keyframes bqTimerPulse {
    from { opacity: 0.85; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
}

.bq-enemy-hp-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}
.bq-enemy-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    transition: width 0.25s ease;
}
.bq-enemy-hp-text {
    font-size: 0.64rem;
    font-weight: 800;
    color: #f8fafc;
    margin-top: 1px;
}

/* ── GUIDES TACTIQUES DE COLONNES (COUVERTURE 3 VOIES) ── */
.bq-tactical-guides {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    background: rgba(8, 14, 26, 0.75);
    border-bottom: 1px solid rgba(56, 189, 248, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    color: #cbd5e1;
    padding: 3px 0;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    box-sizing: border-box;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
}

.bq-guide-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0.92;
    color: #cbd5e1;
}
.bq-guide-zone i {
    color: #38bdf8;
    font-size: 0.82rem;
}
.bq-guide-zone.is-left {
    border-right: 1px dashed rgba(255, 255, 255, 0.1);
}
.bq-guide-zone.is-right {
    border-left: 1px dashed rgba(255, 255, 255, 0.1);
}

.bq-combat-banner {
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 12px;
    font-size: 0.76rem;
    text-align: center;
    color: #facc15;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    font-weight: 800;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* ── GRILLE MATCH-3 (CENTRE) ── */
.bq-board-wrap {
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.bq-board-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 7 / 6;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    touch-action: none;
    user-select: none;
    overflow: hidden;
    box-sizing: border-box;
}

.bq-tile {
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    font-size: 1.4rem;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.12s ease, filter 0.15s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}
.bq-tile * {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.bq-tile:hover {
    transform: scale(1.04);
}
.bq-tile:active {
    cursor: grabbing;
}
.bq-tile.is-selected {
    transform: scale(1.12);
    box-shadow: 0 0 14px #ffffff;
    z-index: 5;
}

/* Couleurs des tuiles élémentaires */
.bq-tile-blue   { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); color: #ffffff; }
.bq-tile-yellow { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); color: #78350f; }
.bq-tile-purple { background: linear-gradient(135deg, #7e22ce 0%, #c084fc 100%); color: #ffffff; }
.bq-tile-red    { background: linear-gradient(135deg, #b91c1c 0%, #f87171 100%); color: #ffffff; }
.bq-tile-green  { background: linear-gradient(135deg, #15803d 0%, #4ade80 100%); color: #ffffff; }

/* ── VRAIES CASES DÉDIÉES : BOMBE ET FEU D'ARTIFICE ── */

/* Case Bombe (Match de 4) — Boîtier d'explosif blindé mécanique avec danger rayé */
.bq-tile.bq-tile-special-bomb {
    background: 
        repeating-linear-gradient(45deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.12) 6px, transparent 6px, transparent 12px),
        radial-gradient(circle at 35% 35%, #334155 0%, #0f172a 65%, #020617 100%);
    border: 2px solid #f97316;
    color: #f97316;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.65), inset 0 0 10px rgba(234, 88, 12, 0.4);
    animation: bqBombPulse 1.6s infinite alternate ease-in-out;
}
.bq-tile.bq-tile-special-bomb .bq-bomb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}
.bq-tile.bq-tile-special-bomb .bq-bomb-icon,
.bq-tile.bq-tile-special-bomb .bq-bomb-svg {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.7));
    animation: bqWiggle 1.8s infinite ease-in-out;
}
.bq-spark-glow {
    animation: bqSparkPulse 0.4s infinite alternate ease-in-out;
}
.bq-spark-star {
    transform-origin: 36px 8px;
    animation: bqSparkSpin 1.2s infinite linear;
}
.bq-core-glow {
    animation: bqCorePulse 0.7s infinite alternate ease-in-out;
}

@keyframes bqSparkPulse {
    from { opacity: 0.6; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 0 4px #ef4444); }
}
@keyframes bqSparkSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes bqCorePulse {
    from { opacity: 0.65; r: 2.3; }
    to { opacity: 1; r: 3.8; filter: drop-shadow(0 0 6px #facc15); }
}

.bq-tile.bq-tile-special-bomb .bq-bomb-badge {
    position: absolute;
    bottom: 2px;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: rgba(249, 115, 22, 0.9);
    color: #0f172a;
    padding: 0 4px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Case Feu d'artifice (Match de 5) — Boîtier prismatique pyrotechnique multicolore */
.bq-tile.bq-tile-special-firework {
    background: 
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.3) 0%, transparent 70%),
        linear-gradient(135deg, #701a75 0%, #312e81 35%, #0f172a 70%, #0369a1 100%);
    border: 2px solid #facc15;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.8), inset 0 0 12px rgba(236, 72, 153, 0.5);
    animation: bqFireworkRainbow 3s linear infinite;
    position: relative;
    overflow: hidden;
}
.bq-tile.bq-tile-special-firework::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(to right, transparent 46%, rgba(250, 204, 21, 0.4) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(250, 204, 21, 0.4) 52%, transparent 54%),
        linear-gradient(to bottom, transparent 46%, rgba(250, 204, 21, 0.4) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(250, 204, 21, 0.4) 52%, transparent 54%);
    pointer-events: none;
    animation: bqCrosshairPulse 1.2s infinite alternate ease-in-out;
}
.bq-tile.bq-tile-special-firework .bq-firework-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.bq-tile.bq-tile-special-firework .bq-firework-icon,
.bq-tile.bq-tile-special-firework .bq-firework-svg {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 8px rgba(250, 204, 21, 0.85));
    animation: bqSparkSpin 4s infinite linear;
}

.bq-sparkle-a { animation: bqSparkFlicker 0.6s infinite alternate ease-in-out; }
.bq-sparkle-b { animation: bqSparkFlicker 0.7s 0.15s infinite alternate ease-in-out; }
.bq-sparkle-c { animation: bqSparkFlicker 0.65s 0.3s infinite alternate ease-in-out; }
.bq-sparkle-d { animation: bqSparkFlicker 0.75s 0.45s infinite alternate ease-in-out; }

@keyframes bqSparkFlicker {
    from { opacity: 0.4; transform: scale(0.75); }
    to { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 0 4px #ffffff); }
}

.bq-tile.bq-tile-special-firework .bq-firework-badge {
    position: absolute;
    bottom: 2px;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #facc15, #f59e0b);
    color: #0f172a;
    padding: 0 5px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ── ANIMATIONS DE JEU : EXPLOSION & CHUTE PHYSIQUE ── */

/* 1. Explosion progressive des tuiles détruites */
.bq-tile.is-exploding {
    animation: bqTileExplode 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    z-index: 10;
    pointer-events: none;
}

@keyframes bqTileExplode {
    0% {
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
    40% {
        transform: scale(1.28);
        filter: brightness(2.2);
        opacity: 0.95;
    }
    100% {
        transform: scale(0);
        filter: brightness(3);
        opacity: 0;
    }
}

/* 2. Chute physique progressive des tuiles supérieures */
.bq-tile.is-falling {
    animation: bqTileDrop calc(0.18s + var(--fall-dist, 1) * 0.04s) cubic-bezier(0.25, 1, 0.5, 1) forwards;
    z-index: 4;
}

@keyframes bqTileDrop {
    0% {
        transform: translateY(calc(-100% * var(--fall-dist, 1) - (6px * var(--fall-dist, 1))));
        opacity: 0.95;
    }
    85% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 3. Secouement Ennemi lors de dégâts */
.bq-enemy-card.is-hit .bq-enemy-avatar {
    animation: bqEnemyHit 0.32s ease;
}

@keyframes bqEnemyHit {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px) rotate(-3deg); filter: brightness(2) contrast(1.3); }
    40% { transform: translateX(9px) rotate(3deg); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(4px); }
}

/* 4. Textes Flottants (Dégâts & Soin) */
.bq-floating-number {
    position: absolute;
    font-weight: 900;
    pointer-events: none;
    z-index: 30;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
    animation: bqFloatUp 0.8s ease-out forwards;
}
.bq-floating-number.is-damage {
    color: #f87171;
    font-size: 1.15rem;
}
.bq-floating-number.is-crit {
    color: #fbbf24;
    font-size: 1.35rem;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.8), 0 2px 5px rgba(0, 0, 0, 0.95);
}
.bq-floating-number.is-heal {
    color: #34d399;
    font-size: 1.2rem;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.8), 0 2px 5px rgba(0, 0, 0, 0.95);
}

@keyframes bqFloatUp {
    0% {
        transform: translate(-50%, 0) scale(0.8);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -10px) scale(1.25);
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -46px) scale(1);
        opacity: 0;
    }
}

/* Keyframes des effets visuels */
@keyframes bqBombPulse {
    from { box-shadow: 0 0 10px rgba(249, 115, 22, 0.5), inset 0 0 6px rgba(234, 88, 12, 0.3); }
    to { box-shadow: 0 0 18px rgba(249, 115, 22, 0.9), inset 0 0 12px rgba(234, 88, 12, 0.6); }
}

@keyframes bqFireworkRainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes bqCrosshairPulse {
    from { opacity: 0.35; transform: scale(0.96); }
    to { opacity: 0.85; transform: scale(1.04); }
}

@keyframes bqRocketBob {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-2px) scale(1.08); }
}

@keyframes bqWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* ── ÉQUIPE DES 5 ROBOTS (BAS) ── */
.bq-team-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 5px 6px;
    background: rgba(8, 14, 26, 0.8);
    border-top: 1.5px solid rgba(56, 189, 248, 0.25);
    box-sizing: border-box;
    height: 122px;
    min-height: 122px;
    max-height: 122px;
    overflow: hidden;
    flex-shrink: 0;
}

.bq-robot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 4px 2px 4px;
    position: relative;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    height: 100%;
    box-sizing: border-box;
}

.bq-robot-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.bq-robot-card.is-ready {
    border-color: #f59e0b;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.6), inset 0 0 10px rgba(245, 158, 11, 0.25);
    animation: bqSkillReadyPulse 1.5s infinite alternate ease-in-out;
}

.bq-robot-card.is-low-hp {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
    animation: bqLowHpAlarm 1s infinite alternate ease-in-out;
}

@keyframes bqLowHpAlarm {
    from { border-color: rgba(239, 68, 68, 0.4); }
    to { border-color: #ef4444; box-shadow: 0 0 16px rgba(239, 68, 68, 0.8); }
}

.bq-robot-card.is-ko {
    opacity: 0.4;
    filter: grayscale(0.95);
    cursor: not-allowed;
    border-color: rgba(239, 68, 68, 0.4);
}

.bq-robot-card.is-hit {
    animation: bqHeroHit 0.35s ease;
}

@keyframes bqHeroHit {
    0%, 100% { transform: translateY(0); filter: none; }
    25% { transform: translateY(-7px) scale(1.08); filter: brightness(2.4) drop-shadow(0 0 12px #ef4444); }
    50% { transform: translateY(3px) rotate(-4deg); }
    75% { transform: translateY(-2px) rotate(4deg); }
}

@keyframes bqSkillReadyPulse {
    from { transform: scale(1); box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); }
    to { transform: scale(1.03); box-shadow: 0 0 18px rgba(245, 158, 11, 0.8), inset 0 0 10px rgba(245, 158, 11, 0.3); }
}

.bq-robot-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 2px 5px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.bq-hit-spark {
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    border: 2px solid #ef4444;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, transparent 80%);
    animation: bqHitFlash 0.3s ease-out forwards;
    pointer-events: none;
}

@keyframes bqHitFlash {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.bq-robot-name {
    font-size: 0.60rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: #ffffff;
    letter-spacing: 0.2px;
    line-height: 1.1;
}

/* Barre de PV Individuelle du Robot */
.bq-robot-hp-bar {
    width: 92%;
    height: 5px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.bq-robot-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 0 4px #10b981;
    transition: width 0.25s ease;
}
.bq-robot-hp-fill.is-low {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 6px #ef4444;
}
.bq-robot-hp-text {
    font-size: 0.52rem;
    font-weight: 800;
    color: #34d399;
    line-height: 1;
}

/* Barre de Mana du Robot */
.bq-mana-bar {
    width: 92%;
    height: 4px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.bq-mana-fill {
    height: 100%;
    transition: width 0.2s ease;
    box-shadow: 0 0 6px currentColor;
}

.bq-skill-badge {
    font-size: 0.50rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 4px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 16px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 96%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.bq-robot-card.is-ready .bq-skill-badge {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #0f172a;
    font-weight: 900;
    border: none;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.bq-robot-card.is-ko .bq-skill-badge {
    background: #ef4444;
    color: #ffffff;
    font-weight: 900;
    border: none;
}

/* ── STATS D'ÉQUIPE (BARRE INFÉRIEURE) ── */
.bq-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.78rem;
    font-weight: 700;
    color: #f8fafc;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bq-footer-bar span {
    color: #cbd5e1;
}
.bq-footer-bar strong {
    color: #ffffff;
    font-weight: 800;
}

.bq-team-hp-wrap {
    flex: 1;
    margin-left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bq-team-hp-bar {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.bq-team-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    transition: width 0.25s ease;
}

/* ── CARTE DES NIVEAUX (ÉCRAN CARTE) ── */
.bq-map-view {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    color: #f8fafc;
}
.bq-map-view h3 {
    color: #ffffff !important;
}

/* Onglets de sélection de Mode (Quête Principale vs Mode Défi) */
.bq-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
}
.bq-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #94a3b8;
    transition: all 0.18s ease;
}
.bq-mode-tab:hover:not(.is-active) {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
}
.bq-mode-tab.is-active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
}
.bq-mode-tab.is-challenge.is-active {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(185, 28, 28, 0.5);
}

.bq-stage-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    transition: all 0.15s ease;
    color: #f8fafc;
}
.bq-stage-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateX(3px);
}
.bq-stage-card.is-boss {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

/* Badge de Viabilité Tactique (MD §5.3) */
.bq-viability-badge {
    font-size: 0.60rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.bq-viability-badge.is-safe {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.bq-viability-badge.is-passable {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.bq-viability-badge.is-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Badge de Zone Déjà Terminée / Validée */
.bq-completed-badge {
    font-size: 0.60rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.bq-stage-card.is-completed {
    border-color: rgba(16, 185, 129, 0.28);
}

/* Bouton de Balayage Rapide (MD §4) */
.bq-btn-sweep {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.35) 100%);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.45);
    font-weight: 800;
    font-size: 0.74rem;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.bq-btn-sweep:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.45);
    border-color: #f59e0b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.bq-btn-sweep:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bq-btn-primary {
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s ease;
}
.bq-btn-primary:hover {
    filter: brightness(1.1);
}

/* ── MODALE ATELIER / RENFORCEMENT ── */
.bq-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}
.bq-modal-content {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(180deg, #1b2740 0%, #111a2e 100%);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* ── MODALE DE BALAYAGE RAPIDE (SWEEP MODAL) ── */
.bq-sweep-modal-card {
    width: 100%;
    max-width: 420px;
    background: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75), 0 0 20px rgba(245, 158, 11, 0.15);
    animation: bqModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #f8fafc;
}
@keyframes bqModalPop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.bq-sweep-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bq-sweep-icon-glow {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.bq-sweep-modal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bq-sweep-energy-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.bq-sweep-stepper-wrap {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bq-sweep-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
}
.bq-stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bq-stepper-btn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
    transform: scale(1.05);
}
.bq-stepper-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.bq-stepper-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.bq-stepper-num {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: #38bdf8;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}
.bq-stepper-sub {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.bq-sweep-quick-btns {
    display: flex;
    gap: 8px;
    width: 100%;
}
.bq-quick-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bq-quick-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.bq-quick-btn.is-active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
}
.bq-quick-btn.is-max.is-active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #fbbf24;
}
.bq-quick-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.bq-sweep-summary-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bq-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}
.bq-summary-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 2px 0;
}

.bq-sweep-alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bq-btn-sweep-confirm {
    width: 100%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
    transition: all 0.18s ease;
}
.bq-btn-sweep-confirm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
    filter: brightness(1.08);
}
.bq-btn-sweep-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bq-sweep-success-body {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bq-sweep-success-icon {
    font-size: 3.2rem;
    color: #10b981;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.45));
}
.bq-sweep-reward-card {
    width: 100%;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bq-sweep-reward-val {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
}
.bq-btn-sweep-again {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.bq-btn-sweep-again:hover {
    background: rgba(255, 255, 255, 0.14);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PORTRAITS DES ROBOTS (BotQuestRobot.js) — animations 100 % CSS
   ═══════════════════════════════════════════════════════════════════════════ */
.bqr {
    display: block;
    overflow: visible;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}
.bqr-aura, .bqr-eye, .bqr-body, .bqr-hoverring, .bqr-top-bob, .bqr-bolt-l, .bqr-bolt-r, .bqr-spark,
.bqr-flame, .bqr-jet, .bqr-leaf-l, .bqr-leaf-r, .bqr-arm-l, .bqr-arm-r { transform-box: fill-box; }

.bqr-aura { opacity: 0; transform-origin: 50% 50%; }
.bqr.is-ready .bqr-aura { opacity: 0.8; animation: bqrAura 1.1s ease-in-out infinite alternate; }
.bqr.is-cast .bqr-aura { opacity: 1; animation: bqrAura 0.35s ease-in-out infinite alternate; }
@keyframes bqrAura {
    from { transform: scale(0.85); opacity: 0.45; }
    to   { transform: scale(1.08); opacity: 0.95; }
}

/* Idle : respiration + flottement */
.bqr-float { animation: bqrFloat 3.2s ease-in-out infinite alternate; }
.bqr-robee .bqr-float { animation-duration: 2.4s; }
.bqr-robee .bqr-float { animation-name: bqrHover; }
@keyframes bqrFloat { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes bqrHover { from { transform: translateY(0); } to { transform: translateY(-7px); } }

.bqr-body { transform-origin: 50% 100%; animation: bqrBreathe 3.2s ease-in-out infinite alternate; }
@keyframes bqrBreathe { from { transform: scale(1, 1); } to { transform: scale(1.015, 0.985); } }

.bqr-hoverring { animation: bqrRing 2.4s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes bqrRing { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } }

/* Clignement des yeux */
.bqr-eye { transform-origin: 50% 50%; animation: bqrBlink 5s infinite; }
.bqr-eye:nth-child(2) { animation-delay: 0.02s; }
@keyframes bqrBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
.bqr-eyes { filter: drop-shadow(0 0 3px currentColor); }
.bqr-ear { animation: bqrEar 1.8s ease-in-out infinite alternate; }
@keyframes bqrEar { from { opacity: 0.55; } to { opacity: 1; } }

/* Parties propres à chaque robot */
.bqr-top-bob { animation: bqrTopBob 2.6s ease-in-out infinite alternate; }
@keyframes bqrTopBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }

.bqr-bolt-l, .bqr-bolt-r { transform-origin: 50% 100%; animation: bqrBolt 1.4s steps(1) infinite; }
.bqr-bolt-r { animation-delay: 0.45s; }
@keyframes bqrBolt { 0% { filter: brightness(1); } 8% { filter: brightness(2.2); } 14% { filter: brightness(1); } 60% { filter: brightness(1.4); } 66% { filter: brightness(1); } }
.bqr-spark { animation: bqrSpark 0.7s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes bqrSpark { from { opacity: 0.45; transform: scale(0.8); } to { opacity: 1; transform: scale(1.25); } }

.bqr-flame { transform-origin: 50% 100%; animation: bqrFlame 0.5s ease-in-out infinite alternate; opacity: 0.85; }
.bqr-flame-r { animation-delay: 0.2s; }
@keyframes bqrFlame { from { transform: scaleY(0.88) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
.bqr-jet { transform-origin: 50% 0%; animation: bqrJet 0.35s ease-in-out infinite alternate; }
@keyframes bqrJet { from { transform: scaleY(0.7); opacity: 0.7; } to { transform: scaleY(1.2); opacity: 1; } }
.bqr-vent { animation: bqrVent 1.2s ease-in-out infinite alternate; }
@keyframes bqrVent { from { opacity: 0.45; } to { opacity: 1; } }

.bqr-leaf-l { transform-origin: 100% 100%; animation: bqrLeafL 3s ease-in-out infinite alternate; }
.bqr-leaf-r { transform-origin: 100% 100%; animation: bqrLeafL 3s ease-in-out infinite alternate-reverse; }
@keyframes bqrLeafL { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

.bqr-arm-l { transform-origin: 80% 10%; animation: bqrArm 3.2s ease-in-out infinite alternate; }
.bqr-arm-r { transform-origin: 20% 10%; animation: bqrArm 3.2s ease-in-out infinite alternate-reverse; }
@keyframes bqrArm { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Touché */
.bqr.is-hit .bqr-body { animation: bqrHit 0.38s ease; }
.bqr.is-hit { filter: drop-shadow(0 0 8px #ef4444) brightness(1.35); }
@keyframes bqrHit {
    0% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-6px) rotate(-6deg); }
    45% { transform: translateX(5px) rotate(5deg); }
    70% { transform: translateX(-3px) rotate(-2deg); }
    100% { transform: translateX(0) rotate(0); }
}

/* Lancement de compétence */
.bqr.is-cast .bqr-float { animation: bqrCast 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate; }
@keyframes bqrCast { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.06); } }

/* Heureux (victoire) */
.bqr.is-happy .bqr-float { animation: bqrJoy 0.55s ease-in-out infinite alternate; }
@keyframes bqrJoy { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* K.O. : affaissé, grisé, plus de lueur */
.bqr.is-ko { filter: grayscale(0.9) brightness(0.6); }
.bqr.is-ko .bqr-float, .bqr.is-ko .bqr-body, .bqr.is-ko .bqr-eye, .bqr.is-ko .bqr-flame,
.bqr.is-ko .bqr-arm-l, .bqr.is-ko .bqr-arm-r, .bqr.is-ko .bqr-leaf-l, .bqr.is-ko .bqr-leaf-r,
.bqr.is-ko .bqr-top-bob, .bqr.is-ko .bqr-jet, .bqr.is-ko .bqr-spark, .bqr.is-ko .bqr-hoverring { animation: none; }
.bqr.is-ko .bqr-body { transform: rotate(7deg) translateY(5px); }
.bqr.is-ko .bqr-jets, .bqr.is-ko .bqr-flame { display: none; }

.bqr.is-still *, .bqr.is-still { animation: none !important; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   SILHOUETTES ENNEMIES (BotQuestEnemy.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.bqe { display: block; overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.bqe-float, .bqe-rotor, .bqe-eye, .bqe-halo { transform-box: fill-box; transform-origin: 50% 50%; }
.bqe-float { animation: bqeFloat 2.6s ease-in-out infinite alternate; }
.bqe-drone .bqe-float { animation-duration: 1.6s; }
.bqe-boss .bqe-float { animation-duration: 3.6s; }
@keyframes bqeFloat { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.bqe-eye { animation: bqeEye 1.4s ease-in-out infinite alternate; }
@keyframes bqeEye { from { opacity: 0.7; } to { opacity: 1; } }
.bqe-halo { animation: bqeHalo 1.8s ease-in-out infinite alternate; }
@keyframes bqeHalo { from { opacity: 0.35; transform: scale(0.92); } to { opacity: 0.8; transform: scale(1.06); } }
.bqe-rotor { animation: bqeRotor 0.14s linear infinite alternate; }
@keyframes bqeRotor { from { transform: scaleX(1); opacity: 0.5; } to { transform: scaleX(0.7); opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .bqe *, .bqe { animation: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ÉQUIPE : cartes robots, répliques, cinématique de compétence
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-team-row {
    height: 138px;
    min-height: 138px;
    max-height: 138px;
    overflow: visible;
    position: relative;
    z-index: 6;
}
.bq-robot-card { justify-content: flex-start; gap: 2px; padding-top: 2px; }
.bq-robot-card.is-ready { border-color: var(--hero-color, #f59e0b); box-shadow: 0 0 16px var(--hero-color, #f59e0b), inset 0 0 10px rgba(255, 255, 255, 0.12); }
.bq-robot-portrait { height: 60px; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; margin-bottom: 1px; }
.bq-robot-portrait .bqr { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.bq-robot-card.is-hit { animation: none; }
.bq-robot-name { font-size: 0.64rem; }

.bq-speech {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 138px;
    padding: 4px 8px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    background: #f8fafc;
    border: 2px solid var(--hero-color, #38bdf8);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 30;
    pointer-events: none;
    text-align: center;
    animation: bqSpeechPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bq-speech::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--hero-color, #38bdf8);
}
.bq-robot-card.hero-nodin .bq-speech { left: 0; transform: none; }
.bq-robot-card.hero-nodin .bq-speech::after { left: 22px; }
.bq-robot-card.hero-lumage .bq-speech { left: auto; right: 0; transform: none; }
.bq-robot-card.hero-lumage .bq-speech::after { left: auto; right: 22px; margin-left: 0; }
@keyframes bqSpeechPop { from { opacity: 0; margin-bottom: -6px; } to { opacity: 1; margin-bottom: 0; } }

/* Ennemis : la silhouette remplace le cadre-icône */
.bq-enemy-avatar {
    width: auto;
    height: auto;
    min-height: 54px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.12) 0%, transparent 70%);
    border: none;
    box-shadow: none;
    border-radius: 12px;
}
.bq-enemy-avatar.is-boss { width: auto; height: auto; min-height: 84px; border: none; animation: none; box-shadow: none; }

/* Cinématique de compétence */
.bq-cast-overlay {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--hero-color) 45%, transparent) 0%, rgba(2, 6, 23, 0.82) 70%);
    animation: bqCastIn 0.25s ease-out;
}
@keyframes bqCastIn { from { opacity: 0; } to { opacity: 1; } }
.bq-cast-flash { position: absolute; inset: 0; background: var(--hero-color); opacity: 0; animation: bqCastFlash 0.9s ease-out; }
@keyframes bqCastFlash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.bq-cast-robot { animation: bqCastRobot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 0 22px var(--hero-color)); }
@keyframes bqCastRobot { from { transform: translateY(80px) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
.bq-cast-banner {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 22px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.78) 20%, rgba(0, 0, 0, 0.78) 80%, transparent);
    animation: bqCastBanner 0.45s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes bqCastBanner { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.bq-cast-hero { font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hero-color); }
.bq-cast-skill { font-size: 1.35rem; font-weight: 900; color: #fff; text-shadow: 0 0 14px var(--hero-color); }
.bq-cast-particles { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.bq-cast-particles i {
    position: absolute;
    font-size: 1.3rem;
    color: var(--hero-color);
    filter: drop-shadow(0 0 6px var(--hero-color));
    animation: bqCastParticle 0.9s var(--t, 0s) ease-out both;
}
@keyframes bqCastParticle {
    from { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scale(1.2); opacity: 0; }
}

/* Victoire : l'escouade */
.bq-victory-squad { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: -4px 0 14px; min-height: 58px; }

/* Atelier : les 5 robots, leur identité et leur rang */
.bq-roster { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bq-roster-title { font-size: 0.8rem; font-weight: 800; color: #e2e8f0; display: flex; justify-content: space-between; align-items: baseline; }
.bq-roster-title span { font-size: 0.64rem; font-weight: 600; color: #94a3b8; }
.bq-roster-card {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-color) 16%, transparent), rgba(15, 23, 42, 0.8) 55%);
    border: 1px solid color-mix(in srgb, var(--hero-color) 45%, transparent);
    border-radius: 12px;
}
.bq-roster-portrait { display: flex; align-items: flex-end; justify-content: center; }
.bq-roster-name { font-size: 0.9rem; font-weight: 900; color: #fff; }
.bq-roster-name small { font-size: 0.64rem; font-weight: 600; color: var(--hero-color); margin-left: 4px; }
.bq-roster-role { font-size: 0.66rem; font-weight: 700; color: var(--hero-color); display: flex; align-items: center; gap: 4px; }
.bq-roster-skill { font-size: 0.64rem; color: #cbd5e1; line-height: 1.3; margin-top: 2px; }
.bq-roster-skill strong { color: #fff; }
.bq-roster-quote { font-size: 0.62rem; font-style: italic; color: #94a3b8; margin-top: 2px; }
.bq-roster-rank { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bq-rank-pips { display: flex; gap: 3px; }
.bq-rank-pips i { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.bq-rank-pips i.is-on { background: var(--hero-color); box-shadow: 0 0 6px var(--hero-color); border-color: transparent; }
.bq-btn-rank {
    font-size: 0.64rem; font-weight: 800; padding: 4px 8px; border-radius: 8px; cursor: pointer;
    color: #0f172a; background: linear-gradient(90deg, #fbbf24, #f59e0b); border: none; white-space: nowrap;
}
.bq-btn-rank:disabled { opacity: 0.4; cursor: not-allowed; }
.bq-rank-max { font-size: 0.62rem; font-weight: 900; color: #fbbf24; letter-spacing: 0.5px; }

/* Introduction */
.bq-intro { max-width: 400px; width: 92%; max-height: 92%; overflow-y: auto; }
.bq-intro-list { display: flex; flex-direction: column; gap: 6px; }
.bq-intro-hero {
    display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--hero-color) 45%, transparent); border-radius: 12px;
    background: color-mix(in srgb, var(--hero-color) 10%, rgba(15, 23, 42, 0.9));
}
.bq-intro-hero strong { color: #fff; font-size: 0.95rem; }
.bq-intro-hero small { color: var(--hero-color); font-weight: 700; margin-left: 4px; }
.bq-intro-line { font-size: 0.7rem; color: #cbd5e1; }
.bq-intro-quote { font-size: 0.66rem; font-style: italic; color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARÈNE : hauteur fixe pour toutes les vagues (sinon la 1re ligne des vagues à 4 ennemis était rognée)
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-arena,
.bq-arena.is-boss-arena {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}
.bq-arena.has-back-row { gap: 2px 8px; padding: 4px 8px; }
.bq-arena.has-back-row .bq-enemy-card { padding: 3px 4px; max-width: 124px; }
.bq-arena.has-back-row .bq-enemy-card.row-back { transform: none; opacity: 1; }
.bq-arena.has-back-row .bq-row-indicator { font-size: 0.48rem; margin-bottom: 1px; padding: 0 5px; }
.bq-arena.has-back-row .bq-enemy-avatar { min-height: 40px; }
.bq-arena.has-back-row .bq-enemy-name { font-size: 0.64rem; margin-top: 1px; }
.bq-arena.has-back-row .bq-enemy-hp-bar { height: 7px; margin-top: 2px; }
.bq-arena.has-back-row .bq-enemy-hp-text { display: none; }
.bq-arena.has-back-row .bq-enemy-timer { margin-top: 2px; font-size: 0.6rem; padding: 0 5px; }

/* Grille : s'adapte à la hauteur ET à la largeur disponibles (plus de ligne rognée sur petit écran) */
.bq-board-wrap { container-type: size; }
.bq-board-grid {
    width: min(100cqw, calc(100cqh * 7 / 6), 440px);
    max-width: none;
}
.bq-arena.has-back-row .bq-row-indicator { display: none; }
.bq-arena.has-back-row .bq-enemy-card.row-front { border-color: rgba(16, 185, 129, 0.5); }
.bq-arena.has-back-row .bq-enemy-card.row-back { border-color: rgba(99, 102, 241, 0.6); }

/* Escouade sur la carte */
.bq-squad-strip { display: flex; justify-content: space-around; align-items: flex-end; padding: 8px 6px 6px; margin-bottom: 2px; cursor: pointer; border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.14), rgba(15, 23, 42, 0.5) 70%); border: 1px solid rgba(255, 255, 255, 0.08); }
.bq-squad-member { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bq-squad-member span { font-size: 0.6rem; font-weight: 800; color: var(--hero-color); letter-spacing: 0.3px; }
.bq-squad-strip:hover .bqr { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   EFFETS ÉLÉMENTAIRES : foudre, cristal, feu, arcane, nature
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Foudre : zébrure blanche à halo jaune, qui papillote */
.bq-bolt polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.bq-bolt { animation: bqBolt 0.34s linear forwards; filter: drop-shadow(0 0 5px #facc15); }
.bq-bolt-glow { stroke: #facc15; stroke-width: 7; opacity: 0.55; }
.bq-bolt-core { stroke: #ffffff; stroke-width: 2.4; }
.bq-bolt.is-big { animation-duration: 0.5s; filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 22px #facc15); }
.bq-bolt.is-big .bq-bolt-glow { stroke-width: 15; }
.bq-bolt.is-big .bq-bolt-core { stroke-width: 5; }
@keyframes bqBolt {
    0% { opacity: 0; }
    8% { opacity: 1; }
    22% { opacity: 0.35; }
    34% { opacity: 1; }
    55% { opacity: 0.5; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Nature : la liane pousse puis se retire, épines en retard */
.bq-vine-stem { fill: none; stroke: #22c55e; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bqVineGrow 1s ease-out forwards; filter: drop-shadow(0 0 6px #4ade80); }
.bq-vine-thorns { fill: none; stroke: #bbf7d0; stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: bqVineThorns 1s ease-out forwards; }
@keyframes bqVineGrow {
    0% { stroke-dashoffset: 1; opacity: 1; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    80% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bqVineThorns { 0%, 30% { opacity: 0; } 42% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Impact : éclair de lumière, onde, éclats propres à l'élément */
.bq-impact { position: absolute; width: 0; height: 0; z-index: 60; pointer-events: none; --ic: #fde047; }
.bq-impact.is-yellow { --ic: #fde047; }
.bq-impact.is-blue { --ic: #7dd3fc; }
.bq-impact.is-red { --ic: #fb923c; }
.bq-impact.is-purple { --ic: #d8b4fe; }
.bq-impact.is-green { --ic: #86efac; }
.bq-impact-flash {
    position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--ic) 35%, transparent 72%);
    animation: bqImpactFlash 0.42s ease-out forwards;
}
.bq-impact-ring {
    position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid var(--ic); box-shadow: 0 0 10px var(--ic);
    animation: bqImpactRing 0.5s ease-out forwards;
}
.bq-impact > i {
    position: absolute; left: -8px; top: -8px; font-size: 1rem; color: var(--ic);
    filter: drop-shadow(0 0 5px var(--ic));
    animation: bqImpactSpark 0.55s ease-out forwards;
}
.bq-impact.is-big .bq-impact-flash { left: -52px; top: -52px; width: 104px; height: 104px; }
.bq-impact.is-big .bq-impact-ring { left: -36px; top: -36px; width: 72px; height: 72px; }
.bq-impact.is-big > i { font-size: 1.3rem; animation-duration: 0.75s; }
.bq-impact.is-blue > i { animation-name: bqImpactShard; }
.bq-impact.is-green > i { animation-name: bqImpactLeaf; }
.bq-impact.is-red > i { animation-name: bqImpactEmber; }
@keyframes bqImpactFlash { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bqImpactRing { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes bqImpactSpark {
    from { transform: rotate(var(--a)) translateY(0) scale(0.5); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.1); opacity: 0; }
}
@keyframes bqImpactShard {
    from { transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(0.5); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(360deg) scale(1.15); opacity: 0; }
}
@keyframes bqImpactLeaf {
    from { transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(0.5); opacity: 1; }
    to { transform: rotate(calc(var(--a) + 60deg)) translateY(calc(var(--d) * -1)) rotate(-220deg) scale(1.1); opacity: 0; }
}
@keyframes bqImpactEmber {
    from { transform: rotate(var(--a)) translateY(0) scale(0.6); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(calc(var(--d) * -0.7 - 22px)) scale(0.2); opacity: 0; }
}

/* Feu : une vague de flammes balaie l'arène */
.bq-fx-wave {
    position: absolute; left: -45%; width: 45%; z-index: 58; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.35) 25%, rgba(251, 146, 60, 0.8) 62%, rgba(253, 224, 71, 0.95) 85%, rgba(255, 255, 255, 0.95) 96%, transparent 100%);
    filter: blur(3px) drop-shadow(0 0 18px #f97316);
    border-radius: 0 60% 60% 0 / 0 50% 50% 0;
    animation: bqWave 1.05s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
@keyframes bqWave { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(340%); opacity: 0; } }

/* Arcane : anneaux qui s'étendent, étincelles qui montent */
.bq-fx-ring { position: absolute; width: 0; height: 0; z-index: 60; pointer-events: none; }
.bq-fx-ring::before {
    content: ''; position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%;
    border: 3px solid #d8b4fe; box-shadow: 0 0 14px #c084fc, inset 0 0 12px rgba(192, 132, 252, 0.5);
    animation: bqRing 0.9s ease-out forwards;
}
.bq-fx-ring > i {
    position: absolute; left: calc(var(--x) - 7px); top: -6px; font-size: 0.9rem; color: #f5d0fe;
    filter: drop-shadow(0 0 5px #c084fc);
    animation: bqRingSpark 0.9s var(--t, 0s) ease-out both;
}
@keyframes bqRing { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes bqRingSpark { from { transform: translateY(8px) scale(0.5); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(-46px) scale(1.1); opacity: 0; } }

.bq-screen-flash { position: absolute; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: screen; animation: bqScreenFlash 0.45s ease-out forwards; }
@keyframes bqScreenFlash { from { opacity: 1; } to { opacity: 0; } }

/* Projectiles de tuiles : une silhouette propre à chaque élément (la foudre est une zébrure, voir plus haut) */
.bq-element-orb.is-blue .bq-orb-core,
.bq-element-orb.is-green .bq-orb-core { background: none; box-shadow: none; font-size: 1.35rem; filter: drop-shadow(0 0 6px currentColor); }
.bq-element-orb.is-blue .bq-orb-core { color: #7dd3fc; }
.bq-element-orb.is-green .bq-orb-core { color: #4ade80; }
.bq-element-orb.is-blue .bq-orb-core i,
.bq-element-orb.is-green .bq-orb-core i { animation: bqOrbSpin 0.35s linear infinite; }
@keyframes bqOrbSpin { to { transform: rotate(360deg); } }
.bq-element-orb.is-red .bq-orb-core { animation: bqFireball 0.12s ease-in-out infinite alternate; box-shadow: 0 0 14px #fb923c, 0 0 26px rgba(239, 68, 68, 0.7); }
.bq-element-orb.is-red .bq-orb-trail { width: 12px; height: 30px; bottom: -22px; }
@keyframes bqFireball { from { transform: scale(0.9); } to { transform: scale(1.18); } }
.bq-element-orb.is-purple .bq-orb-core::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #d8b4fe;
    animation: bqOrbRing 0.3s ease-out infinite;
}
@keyframes bqOrbRing { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* Puce d'élément / faiblesse sur les cartes ennemies */
.bq-elem-chip {
    position: absolute; top: 3px; right: 3px; display: flex; align-items: center; gap: 1px; z-index: 3;
    padding: 1px 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.7); border: 1px solid var(--c);
    color: var(--c); font-size: 0.62rem; line-height: 1; cursor: help;
}
.bq-elem-chip b { opacity: 0.6; font-size: 0.7rem; margin: 0 1px; }
.bq-elem-chip .bq-elem-weak { filter: drop-shadow(0 0 3px currentColor); }
.bq-arena.has-back-row .bq-elem-chip { top: 2px; right: 2px; padding: 1px 3px; font-size: 0.56rem; }

@media (prefers-reduced-motion: reduce) {
    .bq-bolt, .bq-vine-stem, .bq-vine-thorns, .bq-impact *, .bq-fx-wave, .bq-fx-ring *, .bq-fx-ring::before { animation-duration: 0.01s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE DU MONDE
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-world { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; background: #05080f; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.bq-world-inner { position: relative; width: 100%; }
.bq-world-svg { display: block; width: 100%; height: 100%; }
.bq-world-nodes { position: absolute; inset: 0; }

.bq-trail-bed { fill: none; stroke: rgba(0, 0, 0, 0.5); stroke-width: 13; stroke-linecap: round; }
.bq-trail-line { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 4.5; stroke-dasharray: 1 9; stroke-linecap: round; }
.bq-trail-line.is-open { stroke: rgba(255, 255, 255, 0.55); }
.bq-trail-line.is-done { stroke: #fde68a; stroke-dasharray: none; stroke-width: 5; filter: drop-shadow(0 0 4px rgba(253, 230, 138, 0.7)); }

.bq-banner-title { font-size: 16px; font-weight: 900; letter-spacing: 0.3px; }
.bq-banner-sub { font-size: 9.5px; font-weight: 700; fill: #cbd5e1; }

.bq-node {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; padding: 0; cursor: pointer; z-index: 3; color: #f8fafc;
}
.bq-node-disc {
    position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(8, 12, 24, 0.92) 70%);
    border: 3px solid var(--c); font-size: 1.3rem; color: var(--c);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
    transition: transform 0.15s ease;
}
.bq-node:hover .bq-node-disc { transform: scale(1.12); }
.bq-node.type-boss .bq-node-disc { width: 68px; height: 68px; border-width: 4px; }
.bq-node.type-elite .bq-node-disc { border-style: double; border-width: 5px; }
.bq-node.type-treasure .bq-node-disc { color: #fbbf24; border-color: #fbbf24; }
.bq-node.is-locked { opacity: 0.55; filter: grayscale(0.7); }
.bq-node.is-locked .bq-node-disc { color: #94a3b8; border-color: #475569; box-shadow: none; }
.bq-node.is-open .bq-node-disc::after {
    content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--c);
    animation: bqNodePulse 1.5s ease-out infinite;
}
@keyframes bqNodePulse { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.bq-node.is-done .bq-node-disc { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), color-mix(in srgb, var(--c) 40%, #0b1220) 75%); color: #fff; }
.bq-node-check { position: absolute; right: -6px; bottom: -6px; font-size: 1.05rem; color: #34d399; background: #052e1a; border-radius: 50%; }
.bq-node-tag { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.75); color: var(--c); border: 1px solid var(--c); }
.bq-node-stars { display: flex; gap: 1px; font-size: 0.7rem; color: #64748b; }
.bq-node-stars .is-on { color: #fbbf24; filter: drop-shadow(0 0 3px #f59e0b); }

/* L'escouade en voyage */
.bq-squad-token { position: absolute; transform: translate(-50%, -100%); z-index: 6; transition: left 0.9s cubic-bezier(0.45, 0.05, 0.3, 1), top 0.9s cubic-bezier(0.45, 0.05, 0.3, 1); pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.bq-token-robots { display: flex; align-items: flex-end; margin-top: 2px; padding-left: 4px; }
.bq-token-robots .bqr { margin-left: -9px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.bq-squad-token.is-walking .bq-token-robots { animation: bqWalk 0.28s ease-in-out infinite alternate; }
@keyframes bqWalk { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.bq-token-say {
    position: absolute; bottom: calc(100% + 2px); width: max-content; max-width: 170px; padding: 4px 8px; border-radius: 10px;
    background: #f8fafc; color: #0f172a; border: 2px solid var(--c, #38bdf8); font-size: 0.64rem; font-weight: 700; line-height: 1.25; text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); animation: bqSpeechPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bq-token-say b { color: var(--c, #38bdf8); }
.bq-token-say::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--c, #38bdf8); }

/* Barre de mode (Aventure / Arène) */
.bq-world-tabs { display: flex; gap: 6px; padding: 8px 12px; background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; align-items: center; }
.bq-world-tabs .bq-mode-tab { flex: 1; }
.bq-atelier-btn { flex-shrink: 0; }

/* Fiche d'un nœud */
.bq-sheet-overlay { position: absolute; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(2, 6, 23, 0.55); animation: bqCastIn 0.2s ease-out; }
.bq-sheet {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(8, 12, 24, 0.99)); border-top: 3px solid var(--c, #38bdf8);
    border-radius: 18px 18px 0 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; animation: bqSheetUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6); max-height: 78%; overflow-y: auto;
}
@keyframes bqSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bq-sheet-head { display: flex; align-items: center; gap: 10px; }
.bq-sheet-title { font-size: 1.05rem; font-weight: 900; color: #fff; line-height: 1.15; }
.bq-sheet-sub { font-size: 0.7rem; color: var(--c); font-weight: 700; }
.bq-sheet-close { margin-left: auto; }
.bq-sheet-enemies { display: flex; align-items: flex-end; gap: 4px; padding: 6px 4px; background: rgba(255,255,255,0.04); border-radius: 12px; justify-content: center; flex-wrap: wrap; }
.bq-sheet-enemy { display: flex; flex-direction: column; align-items: center; font-size: 0.56rem; color: #cbd5e1; gap: 1px; width: 66px; text-align: center; line-height: 1.1; }
.bq-sheet-enemy .bq-elem-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.bq-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-chip { font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #e2e8f0; display: inline-flex; align-items: center; gap: 4px; }
.bq-chip i { color: var(--c, #fbbf24); }
.bq-sheet-actions { display: flex; gap: 8px; }
.bq-sheet-actions .bq-btn-primary { flex: 1; justify-content: center; padding: 11px; font-size: 0.95rem; }
.bq-sheet-weak { font-size: 0.68rem; color: #94a3b8; }
.bq-sheet-weak b { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   DIALOGUES (façon Fire Emblem)
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-dialogue { position: absolute; inset: 0; z-index: 160; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; overflow: hidden; border-radius: inherit; animation: bqCastIn 0.25s ease-out; }
.bq-dlg-bg { position: absolute; inset: 0; }
.bq-dlg-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px); }
.bq-dlg-skip { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); color: #e2e8f0; font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 10px; cursor: pointer; display: flex; gap: 4px; align-items: center; }
.bq-dlg-skip:hover { background: rgba(255,255,255,0.15); }
.bq-dlg-stage { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; margin-bottom: -14px; flex: 1; }
.bq-dlg-side { transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease; display: flex; align-items: flex-end; }
.bq-dlg-side.is-left { align-self: flex-end; }
.bq-dlg-side.is-right { margin-left: auto; }
.bq-dlg-side.is-active { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 20px rgba(255,255,255,0.35)); }
.bq-dlg-side.is-dim { opacity: 0.5; filter: brightness(0.6) saturate(0.8); transform: scale(0.94); }
.bq-dlg-box {
    position: relative; z-index: 4; margin: 0 12px 14px; padding: 18px 16px 14px; min-height: 118px; border-radius: 14px;
    background: rgba(5, 8, 18, 0.94); border: 2px solid var(--c, #38bdf8); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 40%, transparent), 0 8px 24px rgba(0,0,0,0.6);
}
.bq-dlg-name { position: absolute; top: -13px; left: 14px; padding: 2px 12px; border-radius: 8px; background: var(--c, #38bdf8); color: #0b1020; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.4px; }
.bq-dlg-text { font-size: 0.95rem; line-height: 1.55; color: #f1f5f9; min-height: 3.1em; }
.bq-dlg-box.is-narrator .bq-dlg-text { font-style: italic; color: #cbd5e1; text-align: center; }
.bq-dlg-caret { margin-left: 6px; color: var(--c); animation: bqCaret 0.8s ease-in-out infinite alternate; }
@keyframes bqCaret { from { opacity: 0.2; transform: translateY(0); } to { opacity: 1; transform: translateY(3px); } }
.bq-dlg-count { position: absolute; right: 12px; bottom: 6px; font-size: 0.58rem; color: #64748b; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMBAT : boss, bouclier, brûlure, répliques
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-enemy-shield { width: 100%; height: 6px; margin-top: 2px; border-radius: 3px; background: rgba(0,0,0,0.6); border: 1px solid rgba(125, 211, 252, 0.6); overflow: hidden; }
.bq-enemy-shield > div { height: 100%; background: linear-gradient(90deg, #7dd3fc, #e0f2fe); box-shadow: 0 0 6px #38bdf8; transition: width 0.25s ease; }
.bq-enemy-card.has-shield { box-shadow: 0 0 14px rgba(125, 211, 252, 0.55); }
.bq-enemy-warn {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 8; white-space: nowrap; font-size: 0.6rem; font-weight: 900;
    color: #fff; background: #dc2626; padding: 1px 8px; border-radius: 8px; box-shadow: 0 0 12px #ef4444; animation: bqWarnPulse 0.5s ease-in-out infinite alternate;
}
@keyframes bqWarnPulse { from { transform: translateX(-50%) scale(0.95); } to { transform: translateX(-50%) scale(1.08); } }
.bq-enemy-say {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9; width: max-content; max-width: 150px; padding: 4px 8px; border-radius: 9px;
    font-size: 0.62rem; font-weight: 800; line-height: 1.25; text-align: center; color: #fecaca; background: rgba(40, 6, 12, 0.95); border: 1.5px solid #ef4444;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6); pointer-events: none; animation: bqSpeechPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bq-enemy-card.is-elite { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
.bq-elite-badge { font-size: 0.5rem; font-weight: 900; color: #0f172a; background: #fbbf24; padding: 0 5px; border-radius: 5px; letter-spacing: 0.4px; }
.bq-arena.has-back-row .bq-enemy-card.is-boss { grid-column: 2; grid-row: 1; max-width: 150px; }
.bq-enemy-card.is-boss.is-escorted .bq-enemy-avatar { min-height: 56px; }
.bq-burn-badge { position: absolute; top: 0; right: 2px; z-index: 5; font-size: 0.7rem; color: #fb923c; filter: drop-shadow(0 0 4px #ef4444); animation: bqSparkPulse 0.5s infinite alternate; }
.bq-robot-card.is-burning { border-color: #fb923c; }
.bq-moves { font-size: 0.7rem; font-weight: 800; color: #cbd5e1; background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius: 10px; display: inline-flex; gap: 4px; align-items: center; }
.bq-moves.is-over { color: #94a3b8; }
.bq-moves i { color: #fbbf24; }
.bq-biome-chip { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.4px; color: var(--c); }

/* Victoire : étoiles et noyau récupéré */
.bq-victory-stars { display: flex; justify-content: center; gap: 6px; font-size: 1.9rem; margin: 2px 0 8px; }
.bq-victory-stars i { color: #334155; transition: color 0.2s ease; }
.bq-victory-stars i.is-on { color: #fbbf24; filter: drop-shadow(0 0 8px #f59e0b); animation: bqStarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bq-victory-stars i:nth-child(2).is-on { animation-delay: 0.18s; }
.bq-victory-stars i:nth-child(3).is-on { animation-delay: 0.36s; }
@keyframes bqStarPop { from { transform: scale(0) rotate(-60deg); } to { transform: scale(1) rotate(0); } }
.bq-star-goals { font-size: 0.68rem; color: #94a3b8; text-align: left; display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bq-star-goals .is-ok { color: #34d399; }
.bq-core-reward { background: linear-gradient(90deg, rgba(251,191,36,0.2), rgba(255,255,255,0.05)); border: 1px solid #fbbf24; border-radius: 10px; padding: 8px; margin-bottom: 12px; font-size: 0.8rem; }
.bq-core-reward b { color: #fbbf24; }

/* Cœurs élémentaires (atelier) */
.bq-cores { display: flex; flex-direction: column; gap: 4px; }
.bq-core { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); font-size: 0.7rem; color: #94a3b8; }
.bq-core.is-on { color: #e2e8f0; border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, rgba(15,23,42,0.8)); }
.bq-core i { color: var(--c); font-size: 1rem; }
.bq-core b { color: #fff; }

/* Fin de l'aventure */
.bq-ending { text-align: center; }
.bq-ending h2 { margin: 6px 0 2px; font-size: 1.6rem; color: #fbbf24; text-shadow: 0 0 20px #f59e0b; }
.bq-ending-squad { display: flex; justify-content: center; align-items: flex-end; margin: 6px 0 10px; }

/* Carte v2 : le conteneur laisse la carte occuper toute la hauteur */
.bq-map-v2 { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bq-arena-header { gap: 8px; }
.bq-arena-header .bq-moves { margin-left: auto; margin-right: auto; }

.bq-dlg-squad { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; margin-bottom: -6px; padding-bottom: 8px; }
.bq-dlg-squad .bqr { margin: 0 -6px; }
.bq-dlg-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 80px; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.12), transparent 70%); pointer-events: none; }

/* La puce d element passe sous le badge de rangee quand la carte est en pleine taille */
.bq-arena:not(.has-back-row) .bq-elem-chip { top: 22px; right: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   VITESSE DES ANIMATIONS : toutes les durées de combat suivent --bq-speed (Lent 2 · Normal 1,5 · Rapide 1)
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-container.is-shaking { animation-duration: calc(0.3s * var(--bq-speed, 1)); }
.bq-element-orb { animation-duration: calc(0.38s * var(--bq-speed, 1)); }
.bq-enemy-projectile { animation-duration: calc(0.28s * var(--bq-speed, 1)); }
.bq-enemy-card.is-attacking .bq-enemy-avatar { animation-duration: calc(0.38s * var(--bq-speed, 1)); }
.bq-enemy-card.is-hit .bq-enemy-avatar { animation-duration: calc(0.32s * var(--bq-speed, 1)); }
.bq-tile.is-exploding { animation-duration: calc(0.22s * var(--bq-speed, 1)) !important; }
.bq-tile.is-falling { animation-duration: calc((0.18s + var(--fall-dist, 1) * 0.04s) * var(--bq-speed, 1)); }
.bq-floating-number { animation-duration: calc(0.8s * var(--bq-speed, 1)); }
.bq-robot-card.is-hit { animation-duration: calc(0.35s * var(--bq-speed, 1)); }
.bq-bolt { animation-duration: calc(0.34s * var(--bq-speed, 1)); }
.bq-bolt.is-big { animation-duration: calc(0.5s * var(--bq-speed, 1)); }
.bq-vine-stem, .bq-vine-thorns { animation-duration: calc(1s * var(--bq-speed, 1)); }
.bq-impact-flash { animation-duration: calc(0.42s * var(--bq-speed, 1)); }
.bq-impact-ring { animation-duration: calc(0.5s * var(--bq-speed, 1)); }
.bq-impact > i { animation-duration: calc(0.55s * var(--bq-speed, 1)); }
.bq-impact.is-big > i { animation-duration: calc(0.75s * var(--bq-speed, 1)); }
.bq-fx-wave { animation-duration: calc(1.05s * var(--bq-speed, 1)); }
.bq-fx-ring::before, .bq-fx-ring > i { animation-duration: calc(0.9s * var(--bq-speed, 1)); }
.bq-screen-flash { animation-duration: calc(0.45s * var(--bq-speed, 1)); }
.bq-cast-flash, .bq-cast-particles i { animation-duration: calc(0.9s * var(--bq-speed, 1)); }
.bq-cast-robot { animation-duration: calc(0.5s * var(--bq-speed, 1)); }
.bq-cast-banner { animation-duration: calc(0.45s * var(--bq-speed, 1)); }
.bqr.is-hit .bqr-body { animation-duration: calc(0.38s * var(--bq-speed, 1)); }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DU HAUT : énergie cliquable, vitesse
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-stat-badge.is-clickable { cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.bq-stat-badge.is-clickable:hover { background: rgba(16, 185, 129, 0.22); transform: translateY(-1px); }
.bq-badge-plus { color: #34d399; font-size: 0.95rem; }
.bq-speed-btn { gap: 3px; font-size: 0.62rem; font-weight: 800; padding: 3px 6px; }
.bq-speed-btn i { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   BONUS ET MALUS : barre de statuts, flèches sur les cartes, chiffres flottants
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-status-bar {
    display: flex; align-items: center; gap: 4px; padding: 2px 8px; height: 26px; min-height: 26px; flex-shrink: 0; overflow: hidden; box-sizing: border-box;
    background: rgba(8, 14, 26, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bq-status-empty { font-size: 0.62rem; color: #64748b; font-style: italic; }
.bq-status-chip {
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 0.62rem; font-weight: 800; line-height: 1;
    padding: 3px 7px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); color: #e2e8f0; cursor: help;
}
.bq-status-chip b { font-weight: 800; opacity: 0.9; }
.bq-status-chip.is-buff { color: #4ade80; background: rgba(34, 197, 94, 0.16); border-color: rgba(74, 222, 128, 0.55); }
.bq-status-chip.is-debuff { color: #f87171; background: rgba(239, 68, 68, 0.16); border-color: rgba(248, 113, 113, 0.55); }
.bq-status-chip.is-burn { color: #fb923c; background: rgba(249, 115, 22, 0.16); border-color: rgba(251, 146, 60, 0.55); }
.bq-status-chip.is-shield { color: #7dd3fc; background: rgba(56, 189, 248, 0.16); border-color: rgba(125, 211, 252, 0.55); }
.bq-status-chip.is-core { color: var(--c, #fbbf24); background: color-mix(in srgb, var(--c, #fbbf24) 14%, rgba(15, 23, 42, 0.8)); border-color: color-mix(in srgb, var(--c, #fbbf24) 50%, transparent); }
.bq-status-chip.is-buff i, .bq-status-chip.is-debuff i { animation: bqChipPulse 1.1s ease-in-out infinite alternate; }
@keyframes bqChipPulse { from { transform: translateY(1px); } to { transform: translateY(-1px); } }

.bq-buff-badge, .bq-debuff-badge { position: absolute; top: -4px; left: -3px; z-index: 6; font-size: 0.95rem; background: #0b1220; border-radius: 50%; line-height: 1; }
.bq-buff-badge { color: #4ade80; filter: drop-shadow(0 0 5px #22c55e); animation: bqChipPulse 0.9s ease-in-out infinite alternate; }
.bq-debuff-badge { color: #f87171; filter: drop-shadow(0 0 5px #ef4444); animation: bqChipPulse 0.9s ease-in-out infinite alternate; }
.bq-floating-number.is-buff { color: #4ade80; text-shadow: 0 0 8px #22c55e, 0 2px 4px rgba(0,0,0,0.9); font-size: 0.8rem; }
.bq-floating-number.is-debuff { color: #f87171; text-shadow: 0 0 8px #ef4444, 0 2px 4px rgba(0,0,0,0.9); font-size: 0.8rem; }

/* Indice du tutoriel */
.bq-tile.is-hint { animation: bqHintPulse 0.8s ease-in-out infinite alternate; z-index: 4; }
@keyframes bqHintPulse { from { box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(255,255,255,0.4); transform: scale(1); } to { box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(255,255,255,0.95); transform: scale(1.1); } }

/* ═══════════════════════════════════════════════════════════════════════════
   RECHARGE PAR OCTETS
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-recharge { max-width: 380px; width: 92%; display: flex; flex-direction: column; gap: 10px; }
.bq-recharge-head, .bq-guide-head { display: flex; align-items: center; justify-content: space-between; }
.bq-recharge-head h3, .bq-guide-head h3 { margin: 0; color: #fff; font-size: 1.05rem; display: flex; gap: 6px; align-items: center; }
.bq-recharge-head h3 i { color: #10b981; }
.bq-recharge-text { margin: 0; font-size: 0.78rem; color: #cbd5e1; line-height: 1.45; }
.bq-recharge-offer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(16, 185, 129, 0.14)); border: 1px solid rgba(255,255,255,0.12); font-weight: 900; }
.bq-recharge-cost { color: #22d3ee; font-size: 1.1rem; display: flex; gap: 5px; align-items: center; }
.bq-recharge-gain { color: #34d399; font-size: 1.1rem; display: flex; gap: 5px; align-items: center; }
.bq-recharge-offer > i { color: #94a3b8; }
.bq-recharge-lines { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: #cbd5e1; }
.bq-recharge-lines > div { display: flex; justify-content: space-between; }
.bq-recharge-lines b { color: #fff; }
.bq-recharge-lines .is-note { font-size: 0.66rem; color: #94a3b8; display: block; line-height: 1.35; }
.bq-recharge-warn { font-size: 0.74rem; color: #fca5a5; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 10px; padding: 7px 10px; }
.bq-recharge-actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GUIDE DU JEU
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-guide { max-width: 430px; width: 94%; max-height: 90%; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.bq-guide-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; flex-shrink: 0; scrollbar-width: none; }
.bq-guide-tab { white-space: nowrap; font-size: 0.68rem; font-weight: 800; padding: 5px 9px; border-radius: 9px; cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; display: flex; gap: 4px; align-items: center; }
.bq-guide-tab.is-active { background: #2563eb; border-color: #60a5fa; color: #fff; }
.bq-guide-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.bq-guide-intro { margin: 0; font-size: 0.76rem; color: #cbd5e1; line-height: 1.45; }
.bq-guide-intro b { color: #fbbf24; }
.bq-guide-item { display: grid; grid-template-columns: 26px 1fr; gap: 9px; font-size: 0.74rem; color: #cbd5e1; line-height: 1.4; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); }
.bq-guide-item > i { font-size: 1.25rem; color: #38bdf8; }
.bq-guide-item b { display: block; color: #fff; font-size: 0.8rem; margin-bottom: 1px; }
.bq-wheel-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 6px 10px; border-radius: 11px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); font-size: 0.76rem; color: #cbd5e1; }
.bq-wheel-tile { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: inset 0 2px 3px rgba(255,255,255,0.35); }
.bq-wheel-mult { font-weight: 900; color: #fbbf24; }
.bq-legend { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); font-size: 0.72rem; color: #cbd5e1; line-height: 1.35; }
.bq-legend b { display: block; color: #fff; }
.bq-legend .bq-status-chip { cursor: default; }
.bq-float-sample { font-weight: 900; font-size: 0.8rem; color: #fbbf24; text-shadow: 0 0 6px #f59e0b; padding: 0 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TUTORIEL : projecteur + carte d'explication
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-coach { position: absolute; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bq-coach-dim { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.6); }
.bq-coach-spot {
    position: absolute; border-radius: 14px; border: 2px solid #fbbf24; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.62), 0 0 22px rgba(251, 191, 36, 0.8);
    transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
    animation: bqSpotPulse 1.2s ease-in-out infinite alternate;
}
@keyframes bqSpotPulse { from { border-color: rgba(251, 191, 36, 0.55); } to { border-color: #fde68a; } }
.bq-coach-card {
    position: absolute; left: 10px; right: 10px; pointer-events: auto; padding: 10px 12px 12px; border-radius: 14px;
    background: rgba(8, 12, 24, 0.97); border: 2px solid #fbbf24; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); animation: bqSheetUp 0.25s ease-out;
}
.bq-coach-card.is-bottom { bottom: 10px; }
.bq-coach-card.is-top { top: 10px; }
.bq-coach-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.bq-coach-step { font-size: 0.6rem; font-weight: 800; color: #fbbf24; letter-spacing: 0.5px; text-transform: uppercase; }
.bq-coach-skip { background: none; border: none; color: #94a3b8; font-size: 0.66rem; cursor: pointer; text-decoration: underline; }
.bq-coach-title { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: 3px; }
.bq-coach-text { font-size: 0.8rem; color: #e2e8f0; line-height: 1.45; }
.bq-coach-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.bq-coach-wait { font-size: 0.72rem; font-weight: 800; color: #fbbf24; display: flex; gap: 5px; align-items: center; animation: bqChipPulse 0.8s ease-in-out infinite alternate; }

/* ═══════════════════════════════════════════════════════════════════════════
   ATELIER : explications et aperçus
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-howto { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 12px; padding: 10px 12px; }
.bq-howto-title { font-size: 0.8rem; font-weight: 900; color: #fbbf24; display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.bq-howto ul { margin: 0; padding-left: 16px; font-size: 0.72rem; color: #cbd5e1; line-height: 1.5; }
.bq-howto b { color: #fff; }
.bq-upgrade-preview { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 0.74rem; color: #94a3b8; }
.bq-upgrade-preview b { color: #fff; }
.bq-upgrade-preview b.is-up { color: #4ade80; }
.bq-roster-power { font-size: 0.62rem; color: #94a3b8; margin-top: 3px; line-height: 1.4; }
.bq-roster-power b { color: #e2e8f0; }
.bq-roster-power .is-next { display: block; color: #4ade80; }
.bq-roster-power .is-next b { color: #86efac; }
.bq-intro-squad { display: flex; justify-content: center; align-items: flex-end; }
.bq-intro-squad .bqr { margin: 0 -3px; }

/* Prologue : la carte de coaching devient une bulle de dialogue du robot qui parle */
.bq-coach-card { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: start; border-color: var(--c, #fbbf24); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 18px color-mix(in srgb, var(--c, #fbbf24) 35%, transparent); cursor: pointer; }
.bq-coach-portrait { display: flex; align-items: flex-end; justify-content: center; padding-top: 2px; }
.bq-coach-main { min-width: 0; }
.bq-coach-name { font-size: 0.82rem; font-weight: 900; color: var(--c, #fbbf24); letter-spacing: 0.3px; }
.bq-coach-top { gap: 8px; }
.bq-coach-top .bq-coach-step { margin-left: auto; color: #64748b; }
.bq-coach-text { min-height: 3.9em; }
.bq-coach-spot { border-color: var(--c, #fbbf24); }

/* ═══ Fiche d'un robot : bouton « i » en haut à droite de sa carte ═══ */
.bq-hero-info { position: absolute; top: 2px; right: 2px; z-index: 12; }
.bq-hero-info-btn {
    width: 17px; height: 17px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: help;
    font-size: 0.78rem; line-height: 1; color: #e2e8f0; background: rgba(8, 12, 24, 0.85); border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bq-hero-info-btn:hover, .bq-hero-info-btn.is-open { transform: scale(1.18); background: var(--hero-color, #38bdf8); color: #0b1020; border-color: transparent; }
.bq-hero-pop {
    position: absolute; bottom: calc(100% + 8px); right: -4px; width: 226px; padding: 9px 11px; z-index: 40; text-align: left;
    background: rgba(7, 11, 22, 0.98); border: 2px solid var(--hero-color, #38bdf8); border-radius: 12px; color: #e2e8f0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 16px color-mix(in srgb, var(--hero-color) 30%, transparent);
    animation: bqSpeechPop 0.16s ease-out; cursor: default; font-size: 0.66rem; line-height: 1.4;
}
.bq-hero-pop::after { content: ''; position: absolute; top: 100%; right: 10px; border: 6px solid transparent; border-top-color: var(--hero-color, #38bdf8); }
/* Les cartes du centre : la fiche se centre sur le bouton, la 1re s'aligne à gauche */
.bq-hero-pop.is-left { right: auto; left: calc(-100% - 6px); }
.bq-robot-card.hero-nodin .bq-hero-pop { right: auto; left: -8px; }
.bq-robot-card.hero-nodin .bq-hero-pop::after { right: auto; left: 14px; }
.bq-robot-card.hero-octhor .bq-hero-pop { right: auto; left: -42px; }
.bq-robot-card.hero-octhor .bq-hero-pop::after { right: auto; left: 52px; }
.bq-robot-card.hero-furam .bq-hero-pop { right: -70px; }
.bq-robot-card.hero-furam .bq-hero-pop::after { right: 78px; }
.bq-robot-card.hero-robee .bq-hero-pop { right: -4px; }
.bq-robot-card.hero-lumage .bq-hero-pop { right: -4px; }
.bq-pop-head { font-size: 0.82rem; color: #fff; }
.bq-pop-head small { color: var(--hero-color); font-weight: 700; margin-left: 3px; }
.bq-pop-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.bq-pop-tags span { padding: 1px 6px; border-radius: 7px; background: color-mix(in srgb, var(--hero-color) 18%, rgba(255,255,255,0.05)); border: 1px solid color-mix(in srgb, var(--hero-color) 45%, transparent); font-weight: 800; color: var(--hero-color); display: inline-flex; gap: 3px; align-items: center; }
.bq-pop-skill strong { color: #fff; font-size: 0.72rem; }
.bq-pop-skill p { margin: 1px 0 5px; color: #cbd5e1; }
.bq-pop-nums { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); color: #94a3b8; }
.bq-pop-nums b { color: #fff; }
.bq-pop-nums small { color: #64748b; }
.bq-pop-weak { margin-top: 5px; color: #94a3b8; }
.bq-burn-badge { top: 20px; right: 3px; }

/* ── Duel (multijoueur) ── */
.bq-mode-tab.is-duel { position: relative; }
.bq-duel-badge { margin-left: 6px; background: #ef4444; color: #fff; border-radius: 999px; font-size: .68rem; padding: 1px 6px; font-weight: 800; }
.bq-duel-screen { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.bq-duel { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.bq-duel-card { background: rgba(15, 23, 42, .92); border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; padding: 12px; color: #e2e8f0; }
.bq-duel-card.is-invite { border-color: #fbbf24; }
.bq-duel-title { font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bq-duel-title small { opacity: .7; font-weight: 600; }
.bq-duel-help { font-size: .8rem; color: #94a3b8; margin: 4px 0 8px; }
.bq-duel-error { background: rgba(239, 68, 68, .15); border: 1px solid #ef4444; border-radius: 10px; padding: 8px 10px; color: #fecaca; font-size: .82rem; cursor: pointer; }
.bq-duel-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.bq-duel-tier { flex: 1 1 140px; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .25); border-radius: 10px; color: #e2e8f0; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; }
.bq-duel-tier small { opacity: .65; }
.bq-duel-tier.is-on { border-color: #38bdf8; background: rgba(56, 189, 248, .12); }
.bq-duel-search { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .06); border: 1px solid rgba(148, 163, 184, .25); color: #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.bq-duel-players { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.bq-duel-player, .bq-duel-invite, .bq-duel-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, .04); border-radius: 8px; }
.bq-duel-invite { flex-wrap: wrap; justify-content: space-between; }
.bq-duel-invite-btns { display: flex; gap: 6px; }
.bq-duel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-duel-name small, .bq-duel-invite-text small { opacity: .6; }
.bq-duel-dot { width: 9px; height: 9px; border-radius: 50%; background: #475569; flex: none; }
.bq-duel-dot.is-online { background: #10b981; box-shadow: 0 0 6px #10b981; }
.bq-duel-invite-btn { font-size: .75rem; padding: 4px 10px; }
.bq-duel-empty { text-align: center; opacity: .6; padding: 12px; font-size: .85rem; }
.bq-duel-refresh { margin-left: auto; background: none; border: 0; color: #94a3b8; cursor: pointer; }
.bq-duel-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bq-duel-slots { display: flex; flex-direction: column; gap: 6px; }
.bq-duel-slot { justify-content: space-between; }
.bq-duel-slot.is-empty { opacity: .55; justify-content: center; }
.bq-duel-chip { font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: rgba(148, 163, 184, .25); }
.bq-duel-chip.is-accepted { background: rgba(16, 185, 129, .3); color: #6ee7b7; }
.bq-duel-chip.is-invited { background: rgba(251, 191, 36, .25); color: #fde68a; }
.bq-duel-chip.is-declined, .bq-duel-chip.is-left { background: rgba(239, 68, 68, .25); color: #fecaca; }
.bq-duel-countdown { text-align: center; padding: 8px 0; }
.bq-duel-count { font-size: 4rem; font-weight: 900; color: #38bdf8; text-shadow: 0 0 24px rgba(56, 189, 248, .6); }
.bq-duel-hud { padding: 4px 10px; display: flex; flex-direction: column; gap: 3px; background: rgba(2, 6, 23, .6); }
.bq-duel-hud-row { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: #cbd5e1; }
.bq-duel-hud-row b { width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-duel-hud-row span { width: 52px; text-align: right; }
.bq-duel-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, .1); border-radius: 6px; overflow: hidden; }
.bq-duel-bar i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #10b981); transition: width .6s ease; }
.bq-duel-hud-row.is-opp .bq-duel-bar i { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.bq-duel-hud { flex-direction: row; gap: 12px; padding: 3px 10px; }
.bq-duel-hud-cell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: .68rem; color: #cbd5e1; }
.bq-duel-hud-cell b { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-duel-hud-cell span { min-width: 30px; text-align: right; }
.bq-duel-hud-cell.is-opp .bq-duel-bar i { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.bq-duel-bar { height: 6px; }
.bq-combat-banner:empty { visibility: hidden; }

/* ── Notifications d'invitation multijoueur (composant global MpInviteCenter) ── */
.mp-invite-stack { position: fixed; top: 70px; right: 16px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.mp-invite-card { display: flex; gap: 10px; align-items: flex-start; background: #0f172a; color: #e2e8f0; border: 1px solid #fbbf24; border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: mp-invite-in .35s ease-out; }
@keyframes mp-invite-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-invite-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(251, 191, 36, .18); color: #fbbf24; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.mp-invite-body { flex: 1; min-width: 0; }
.mp-invite-title { font-size: .86rem; }
.mp-invite-sub { font-size: .72rem; opacity: .6; margin: 2px 0 8px; }
.mp-invite-actions { display: flex; gap: 6px; }
.mp-invite-btn { border: 1px solid rgba(148, 163, 184, .35); background: transparent; color: #e2e8f0; border-radius: 8px; padding: 5px 12px; font-size: .78rem; cursor: pointer; }
.mp-invite-btn.is-accept { background: #10b981; border-color: #10b981; color: #052e1b; font-weight: 700; }
.mp-invite-btn:disabled { opacity: .5; cursor: default; }
.mp-invite-close { background: none; border: 0; color: #94a3b8; cursor: pointer; font-size: 1.1rem; }
.bq-duel-hud-cell .bq-duel-score { margin-left: auto; font-weight: 700; white-space: nowrap; min-width: 0; }

/* ── Sac, consommables, butin ── */
.bq-bag { max-width: 460px; width: 100%; max-height: 86vh; overflow-y: auto; text-align: left; }
.bq-bag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bq-bag-head h3 { margin: 0; flex: 1; }
.bq-bag-shards { font-size: .8rem; color: #38bdf8; background: rgba(56, 189, 248, .12); padding: 3px 8px; border-radius: 999px; }
.bq-bag-section { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin: 12px 0 6px; }
.bq-bag-section small { text-transform: none; letter-spacing: 0; opacity: .7; }
.bq-bag-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: rgba(255, 255, 255, .04); border-radius: 9px; margin-bottom: 6px; }
.bq-bag-row > i { font-size: 1.4rem; flex: none; }
.bq-bag-row.is-empty { opacity: .45; }
.bq-bag-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.bq-bag-row-text small { color: #94a3b8; font-size: .72rem; }
.bq-bag-help { font-size: .72rem; color: #94a3b8; margin: 10px 0 0; }
.bq-bag-result { background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .45); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
.bq-bag-result-title { font-weight: 800; margin-bottom: 4px; }
.bq-bag-result-lines { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; }
.bq-bag-btn { position: relative; }
.bq-items-bar { display: flex; align-items: center; gap: 6px; padding: 4px 10px; flex-wrap: wrap; }
.bq-item-btn { --c: #94a3b8; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--c); color: var(--c); border-radius: 9px; padding: 3px 8px; cursor: pointer; font-size: .9rem; }
.bq-item-btn b { color: #e2e8f0; font-size: .75rem; }
.bq-item-btn:disabled { opacity: .35; cursor: default; border-color: rgba(148, 163, 184, .3); }
.bq-items-left { font-size: .7rem; color: #94a3b8; margin-left: auto; }
.bq-drops { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .35); border-radius: 8px; padding: 8px; margin-bottom: 10px; font-size: .85rem; }
.bq-drop-open { padding: 3px 10px; font-size: .75rem; }
.bq-chip.is-mult { color: #fbbf24; }

/* ── Missions du jour ── */
.bq-mission-card { --tc: #38bdf8; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tier body reward" "tier body btn"; gap: 4px 12px; align-items: center; background: rgba(15, 23, 42, .92); border: 1px solid var(--tc); border-radius: 12px; padding: 10px 12px; color: #e2e8f0; }
.bq-mission-card.is-easy { --tc: #34d399; }
.bq-mission-card.is-medium { --tc: #fbbf24; }
.bq-mission-card.is-hard { --tc: #f87171; }
.bq-mission-card.is-done { opacity: .6; }
.bq-mission-tier { grid-area: tier; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.bq-mission-body { grid-area: body; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bq-mission-body small { color: #94a3b8; font-size: .76rem; }
.bq-mission-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bq-mission-reward { grid-area: reward; display: flex; flex-direction: column; align-items: flex-end; font-size: .78rem; gap: 2px; }
.bq-mission-card .bq-btn-primary { grid-area: btn; justify-self: end; padding: 5px 14px; font-size: .8rem; }
.bq-mission-bonus { text-align: center; font-size: .8rem; color: #cbd5e1; background: rgba(251, 191, 36, .08); border: 1px dashed rgba(251, 191, 36, .5); border-radius: 10px; padding: 8px; }
.bq-mission-bonus.is-done { opacity: .6; }
.bq-mission-banner { padding: 3px 12px; font-size: .74rem; color: #fbbf24; background: rgba(251, 191, 36, .08); }
@media (max-width: 480px) { .bq-mission-card { grid-template-columns: auto 1fr; grid-template-areas: "tier body" "tier reward" "tier btn"; } .bq-mission-reward { align-items: flex-start; flex-direction: row; gap: 10px; } .bq-mission-card .bq-btn-primary { justify-self: stretch; } }

/* ── Info-bulles stylées (remplacent les title natifs) ── */
.bq-tip { position: fixed; z-index: 2147483000; max-width: 270px; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
    background: rgba(8, 13, 28, .96); color: #e2e8f0; border: 1px solid rgba(56, 189, 248, .55); border-radius: 10px; padding: 7px 11px;
    font-size: .78rem; line-height: 1.35; white-space: pre-line; box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset; animation: bq-tip-in .14s ease-out; }
.bq-tip.is-below { transform: translate(-50%, 10px); }
.bq-tip::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.bq-tip.is-below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); }
@keyframes bq-tip-in { from { opacity: 0; margin-top: 4px; } to { opacity: 1; margin-top: 0; } }

/* ── Journal de combat en pop-up ── */
.bq-battlefield { position: relative; }
.bq-log-slot { position: relative; height: 0; z-index: 40; }
.bq-log-pop { position: absolute; z-index: 40; left: 50%; top: -40px; transform: translateX(-50%); max-width: 92%; text-align: center; pointer-events: none;
    background: rgba(8, 13, 28, .9); color: #fde68a; border: 1px solid rgba(251, 191, 36, .5); border-radius: 999px; padding: 5px 14px;
    font-size: .8rem; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.bq-pop-enter-active { animation: bq-pop-in .22s ease-out; }
.bq-pop-leave-active { transition: opacity .3s ease, transform .3s ease; }
.bq-pop-leave-to { opacity: 0; transform: translateX(-50%) translateY(-6px); }
@keyframes bq-pop-in { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }

/* ── Duel : course en direct dans l'en-tête ── */
.bq-race { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.bq-race-side { display: flex; align-items: center; gap: 4px; white-space: nowrap; color: #cbd5e1; max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
.bq-race-side b { color: #fff; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
.bq-race-side.is-opp { margin-left: auto; }
.bq-race-bar { flex: 1; min-width: 60px; height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.bq-race-bar i { display: block; height: 100%; transition: width .7s cubic-bezier(.3, .8, .3, 1); }
.bq-race-bar i.is-me { background: linear-gradient(90deg, #38bdf8, #10b981); }
.bq-race-bar i.is-opp { background: linear-gradient(90deg, #ef4444, #f59e0b); }

/* ── Puce « Bonus » de la barre du bas ── */
.bq-bonus-chip { margin-left: 6px; font-size: .72rem; color: #94a3b8; background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .25); border-radius: 999px; padding: 1px 8px; cursor: help; display: inline-flex; align-items: center; gap: 4px; }
.bq-bonus-chip.is-on { color: #fbbf24; border-color: rgba(251, 191, 36, .55); background: rgba(251, 191, 36, .1); }
.bq-bonus-chip b { color: #fff; }

/* ── Atelier compact (tient sur un écran) ── */
.bq-atelier { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-width: 520px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.bq-atelier-head { display: flex; align-items: center; gap: 8px; }
.bq-atelier-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.bq-atelier-wallet { font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 3px 9px; cursor: help; white-space: nowrap; }
.bq-atelier-team { display: grid; grid-template-columns: auto 1fr 1fr; grid-template-areas: "lvl atk hp" "btn btn btn"; gap: 8px 10px; align-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--border-color, rgba(148, 163, 184, .2)); border-radius: 12px; padding: 10px 12px; }
.bq-atelier-level { grid-area: lvl; display: flex; flex-direction: column; line-height: 1.1; }
.bq-atelier-level small { font-size: .68rem; color: #94a3b8; }
.bq-atelier-level b { font-size: 1.5rem; font-weight: 900; color: #f59e0b; }
.bq-atelier-stat { display: flex; align-items: baseline; gap: 5px; font-size: .84rem; cursor: help; flex-wrap: wrap; }
.bq-atelier-stat:nth-of-type(2) { grid-area: atk; }
.bq-atelier-stat:nth-of-type(3) { grid-area: hp; }
.bq-atelier-stat small { color: #94a3b8; font-size: .68rem; }
.bq-atelier-stat b { font-weight: 800; }
.bq-atelier-stat b.is-up { color: #10b981; }
.bq-atelier-stat i { color: #64748b; font-size: .8rem; }
.bq-atelier-up { grid-area: btn; width: 100%; justify-content: center; padding: 8px; font-size: .88rem; }
.bq-atelier-cores { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.bq-atelier-label { font-size: .75rem; color: #94a3b8; margin-right: auto; }
.bq-atelier-label small { opacity: .7; }
.bq-core-mini { --c: #64748b; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: #64748b; border: 1px solid rgba(148, 163, 184, .25); cursor: help; }
.bq-core-mini.is-on { color: var(--c); border-color: var(--c); background: rgba(255, 255, 255, .08); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.bq-atelier-heroes { display: flex; flex-direction: column; gap: 6px; }
.bq-atelier-hero { --hero-color: #38bdf8; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .18); border-left: 3px solid var(--hero-color); border-radius: 10px; padding: 6px 10px; }
.bq-atelier-portrait { display: grid; place-items: center; cursor: help; }
.bq-atelier-hero-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; cursor: help; }
.bq-atelier-hero-info > b { font-size: .9rem; }
.bq-atelier-hero-info small { font-size: .7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-atelier-skill { font-size: .72rem; color: #cbd5e1; }
.bq-atelier-skill b { color: #fff; }
.bq-atelier-rank { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bq-atelier-rank .bq-btn-rank { padding: 3px 9px; font-size: .74rem; white-space: nowrap; }
.bq-howto-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: .84rem; color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ : curseur clavier du plateau, focus visible, mouvement réduit
   ═══════════════════════════════════════════════════════════════════════════ */
.bq-tile.is-cursor { outline: 3px solid #fff; outline-offset: -3px; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); z-index: 6; }
.bq-board-grid:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.7); outline-offset: 4px; }
.bq-container button:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .bq-container *, .bq-container *::before, .bq-container *::after {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01s !important;
    }
}

/* ── En-tête : Atelier à droite, vitesse en chevrons, sac vectoriel ── */
.bq-atelier-top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: none; border-radius: 10px; cursor: pointer; font-size: 0.8rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 0 10px rgba(59, 130, 246, 0.35); white-space: nowrap; }
.bq-atelier-top:hover { filter: brightness(1.12); }
.bq-atelier-top i { font-size: 1rem; }
.bq-speed-btn { padding: 4px 6px; }
.bq-speed-chevrons { display: block; color: #e2e8f0; }
.bq-bag-btn { position: relative; }
.bq-bag-svg { display: block; color: #e2e8f0; }
.bq-bag-btn:hover .bq-bag-svg { color: #fff; }
.bq-bag-btn .bq-duel-badge { position: absolute; top: -4px; right: -4px; margin: 0; min-width: 16px; text-align: center; line-height: 1.3; }

/* En-tête adaptatif : les outils passent à la ligne plutôt que d'écraser les icônes */
.bq-top-bar { flex-wrap: wrap; gap: 6px 10px; }
.bq-top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.bq-top-bar .bq-btn-icon, .bq-top-bar .bq-stat-badge, .bq-atelier-top { flex-shrink: 0; }
.bq-top-bar svg { flex-shrink: 0; }
@media (max-width: 520px) { .bq-top-bar { padding: 6px 10px; } .bq-top-bar strong { display: none; } }

/* En-tête sur une seule ligne, sans titre */
.bq-top-bar { flex-wrap: nowrap; gap: 8px; }
.bq-top-right { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 560px) { .bq-energy-timer { display: none; } }

/* Sac compact : grille de cases (description dans l'info-bulle) */
.bq-bag { max-width: 420px; }
.bq-bag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bq-bag-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; color: #e2e8f0; font: inherit; text-align: center; min-width: 0; }
.bq-bag-cell > i { font-size: 1.5rem; line-height: 1; }
.bq-bag-cell b { font-size: .7rem; font-weight: 700; line-height: 1.15; }
.bq-bag-cell .bq-bag-count { position: absolute; top: 3px; right: 6px; font-size: .72rem; font-weight: 800; color: #f8fafc; }
.bq-bag-cell.is-empty { opacity: .4; }
.bq-bag-cell.is-box { cursor: pointer; border-color: rgba(251, 191, 36, .4); }
.bq-bag-cell.is-box:hover:not(:disabled) { background: rgba(251, 191, 36, .12); }
.bq-bag-cell em { font-style: normal; font-size: .66rem; font-weight: 800; color: #fff; background: #2563eb; border-radius: 6px; padding: 1px 8px; margin-top: 2px; }
.bq-bag-section { margin: 10px 0 5px; }
.bq-bag-help { font-size: .68rem; }
.bq-lack { color: #f87171 !important; }