/* ════════════════════════════════════════════════════════════════════
   RESPIRAȚIE — experiență imersivă „8D" (depth, lumină, fără frame, fără mov)
   ════════════════════════════════════════════════════════════════════ */
.brx-head h1 i { color: #5fe0c6;}

/* ── Carduri premium (imagine de fundal + temă de culoare per card) ── */
.ms-breath-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem,1fr)); gap: 1.25rem;}
.brx-card {
    position: relative; cursor: pointer; display: flex; flex-direction: column;
    border-radius: 16px; overflow: hidden; background: var(--mv-bg);
    border: 1px solid var(--mv-border-soft);
    transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.4s;}
.brx-card:hover {}

.brx-card-media {
    position: relative; height: 120px; background-size: cover; background-position: center;
    background-color: hsl(var(--ch),45%,16%);
    background-image: linear-gradient(135deg, hsl(var(--ch),52%,26%), hsl(calc(var(--ch) + 28),48%,14%));}
.brx-card-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,0) 32%, rgba(11,18,32,0.55) 74%, var(--mv-bg) 100%);}
.brx-card-num {
    position: absolute; top: 0.85rem; left: 1.15rem; z-index: 2; line-height: 1;
    font-size: 1.75rem; font-weight: 700;
    color: hsl(var(--ch),78%,72%);}
.brx-card-num::after {
    content: ''; display: block; width: 1.7rem; height: 3px; margin-top: 0.4rem; border-radius: 2px;
    background: hsl(var(--ch),82%,62%);}
.brx-card-body { position: relative; z-index: 2; padding: 1rem 1.2rem 0.85rem; flex: 1; display: flex; flex-direction: column;}
.brx-card-title { font-size: 1.12rem; font-weight: 700; color: var(--mv-text); margin: 0 0 0.4rem;}
.brx-card-desc { font-size: 0.82rem; line-height: 1.5; color: var(--mv-text-2); margin: 0 0 1.05rem;}
.brx-card-meta { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; margin-top: auto;}
.brx-meta-h { display: block; font-size: 0.58rem; text-transform: uppercase; color: var(--mv-text-2); margin-bottom: 0.4rem;}
.brx-meta-v { font-size: 0.95rem; font-weight: 700; color: var(--mv-text);}
.brx-benefits { list-style: none; margin: 0; padding: 0;}
.brx-benefits li { font-size: 0.74rem; color: var(--mv-text-soft); line-height: 1.6;}
.brx-card-cta {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.85rem 1.2rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: hsl(var(--ch),80%,70%); border-top: 1px solid hsla(var(--ch),60%,55%,0.32); background: hsla(var(--ch),60%,30%,0.12);
    transition: background 0.3s, color 0.3s;}
.brx-card:hover .brx-card-cta { color: var(--mv-text); background: hsla(var(--ch),65%,40%,0.3);}
.brx-card-cta i { transition: transform 0.3s;}
.brx-card:hover .brx-card-cta i {}

/* ── Carduri blocate (Elite) ── */
.brx-locked .brx-card-media { filter: grayscale(0.45) brightness(0.62);}
.brx-locked .brx-card-title, .brx-locked .brx-card-desc, .brx-locked .brx-card-meta { opacity: 0.62;}
.brx-locked:hover {}
.brx-lock {
    position: absolute; top: 0.85rem; right: 1.1rem; z-index: 3; width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
    color: var(--mv-warning); background: rgba(255,213,107,0.16); border: 1px solid rgba(255,213,107,0.42);}
.brx-locked .brx-card-cta {
    color: var(--mv-warning) !important; border-top-color: rgba(255,213,107,0.35) !important; background: rgba(255,213,107,0.12);}
.brx-locked:hover .brx-card-cta { color: var(--mv-text) !important;}
.brx-locked .brx-card-cta i { transform: none !important;}

/* ── Scena imersivă ── */
.brx-stage {
    position: fixed; inset: 0; z-index: 10050; display: none; overflow: hidden;
    flex-direction: column; align-items: center; justify-content: center;
    color: var(--mv-text); font-family: inherit;
    background: radial-gradient(125% 120% at 50% 32%, var(--mv-bg) 0%, var(--mv-bg) 52%, #04070e 100%);}
.brx-stage.open { display: flex; animation: brxFade 0.7s ease both;}
@keyframes brxFade { from { opacity: 0;} to { opacity: 1;} }

.brx-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none;}
.brx-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(72% 72% at 50% 46%, transparent 52%, rgba(0,0,0,0.6) 100%);}
.brx-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.brx-close, .brx-sound {
    position: absolute; top: 1.6rem; z-index: 6; width: 2.8rem; height: 2.8rem; border-radius: 50%;
    border: none; background: var(--mv-elev-2); color: var(--mv-text); font-size: 1rem; cursor: pointer; transition: background 0.2s, transform 0.2s;}
.brx-close { right: 1.6rem;} .brx-sound { right: 5.1rem;}
.brx-close:hover, .brx-sound:hover { background: var(--mv-elev-4);}
.brx-sound.off { color: var(--mv-text-2);}

.brx-timer { position: relative; z-index: 5; font-size: clamp(1.6rem,4.6vmin,2.5rem); font-weight: 200; color: var(--mv-text); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 0.3rem;}
.brx-timer.ending { color: #ffd9b0;}
.brx-exname { position: relative; z-index: 5; font-size: clamp(0.6rem,1.5vmin,0.74rem); font-weight: 500; text-transform: uppercase; color: var(--mv-text-2); margin-bottom: 1.4rem;}

.brx-stagewrap { position: relative; z-index: 5; width: min(58vmin,24rem); aspect-ratio: 1; display: grid; place-items: center;}
.brx-aura, .brx-ring, .brx-prog, .brx-core { grid-area: 1/1; place-self: center;}

.brx-aura {
    width: 118%; height: 118%; border-radius: 50%; pointer-events: none; filter: blur(36px); opacity: 0.85;
    background: conic-gradient(from 0deg,
        hsla(var(--bhue,190),78%,55%,0), hsla(var(--bhue,190),80%,60%,0.17),
        hsla(calc(var(--bhue,190) + 50),72%,55%,0), hsla(var(--bhue,190),80%,60%,0.13),
        hsla(var(--bhue,190),78%,55%,0));
    animation: brxSpin 30s linear infinite;}
@keyframes brxSpin {
    from { transform: rotate(0deg) scale(var(--bscale,0.62));}
    to   { transform: rotate(360deg) scale(var(--bscale,0.62));}
}

.brx-ring { border-radius: 50%; pointer-events: none;
    border: 1px solid hsla(var(--bhue,190),72%,64%, var(--ra,0.12));
    transform: scale(var(--bscale,0.62));}
.brx-ring1 { width: 60%; height: 60%; --ra: 0.24;}
.brx-ring2 { width: 74%; height: 74%; --ra: 0.16;}
.brx-ring3 { width: 88%; height: 88%; --ra: 0.10;}
.brx-ring4 { width: 100%; height: 100%; --ra: 0.055;}

.brx-prog { width: 107%; height: 107%; transform: rotate(-90deg); overflow: visible; pointer-events: none;}
.brx-prog-track { fill: none; stroke: hsla(var(--bhue,190),60%,62%,0.10); stroke-width: 0.55;}
.brx-prog-bar { fill: none; stroke: hsla(var(--bhue,190),88%,70%,0.92); stroke-width: 1.0; stroke-linecap: round;}

.brx-core {
    position: relative; width: 52%; height: 52%; border-radius: 50%; display: grid; place-items: center;
    transform: scale(var(--bscale,0.62));
    background: radial-gradient(circle at 38% 30%,
        hsla(var(--bhue,190),92%,82%,0.98),
        hsla(var(--bhue,190),74%,55%,0.95) 46%,
        hsla(calc(var(--bhue,190) - 16),66%,42%,0.98) 100%);
    box-shadow:
        0 0 calc(50px + var(--bglow,0.3)*135px) hsla(var(--bhue,190),86%,56%, calc(0.22 + var(--bglow,0.3)*0.5)),
        inset 0 0 52px hsla(var(--bhue,190),96%,84%,0.45);}
.brx-core::after { content: ''; position: absolute; inset: 16%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 42% 36%, var(--mv-elev-4), transparent 62%);}
.brx-count { position: relative; z-index: 2; font-size: clamp(1.8rem,6vw,2.6rem); font-weight: 200;
    color: var(--mv-text); font-variant-numeric: tabular-nums;}

.brx-phase { position: relative; z-index: 5; margin-top: 1.6rem; font-size: clamp(1rem,2.8vmin,1.5rem);
    font-weight: 300; text-transform: uppercase; color: var(--mv-text-soft);}
.brx-counter { position: relative; z-index: 5; margin-top: 0.45rem; font-size: clamp(0.66rem,1.6vmin,0.78rem);
    text-transform: uppercase; color: var(--mv-text-2);}
.brx-hint { position: absolute; bottom: 1.4rem; z-index: 5; font-size: clamp(0.64rem,1.5vmin,0.72rem); color: var(--mv-text-2);}

@media (max-height:640px) {
    .brx-exname { margin-bottom: 0.9rem;}
    .brx-phase { margin-top: 1rem;}
    .brx-hint { display: none;}
}
@media (prefers-reduced-motion: reduce) {
    .brx-aura { animation: none;}
    .ms-breath-orb-pulse { animation: none;}
}