/* ==========================================================================
   Nivel BRAMU: pantalla viva (cuestionario V1.3 → medidor CALIBRANDO → ajuste por partido).
   Escena dibujada a 390 × 600 y escalada con --k. Recrea, a partir de bramulab/styles.css: .nivel-intro-card, .nivel-slider*,
   .nivel-gauge*, .player-card__level-delta y .player-card__calibration. Las cifras son un EJEMPLO ILUSTRATIVO generado con el
   motor vigente (nivel_bramu_v1_0): jugador 5,3 CALIBRANDO (confiabilidad 0,15), compañero 5,5 (0,40), rivales con confiabilidad 0,63,
   resultado 6-4 6-3. Ganar contra 6,4 / 6,6 → +0,2 (5,3 → 5,5); contra 4,3 / 4,5 → +0,1 (5,3 → 5,4). No corresponde a ningún usuario real.
   ========================================================================== */
.lv { position: relative; padding: 80px 0 72px; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--ink-1), #07111D 50%, var(--ink-1)); }
.lv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at 22% 55%, rgba(25, 159, 255, .2), transparent 70%), radial-gradient(420px 320px at 80% 20%, rgba(255, 201, 61, .06), transparent 70%); }
.lv__grid { display: grid; gap: 18px; }
.lv__head { max-width: 40em; }
.lv__foot { margin-top: 16px; max-width: 34em; font-size: 14.5px; line-height: 1.5; color: var(--text-2); padding-left: 14px; border-left: 2px solid var(--line-strong); }
.lv__foot strong { color: var(--white); font-weight: 700; }

.lv__stage { position: relative; width: 100%; max-width: 390px; aspect-ratio: 390 / 600; margin-inline: auto; }
.lv__fit { position: absolute; left: 50%; top: 50%; width: 390px; height: 600px; margin: -300px 0 0 -195px; transform: scale(var(--k, .85)); }
.lv-a.a { box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(25, 159, 255, .35); }
.lv-s { position: absolute; inset: 0; padding: 18px 16px 0; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.lv__stage[data-scene="1"] .lv-s--1, .lv__stage[data-scene="2"] .lv-s--2, .lv__stage[data-scene="3"] .lv-s--3 { opacity: 1; visibility: visible; transition-delay: .1s, 0s; }
.lv-tag { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--app-faint); z-index: 6; pointer-events: none; }

/* ---------- escena 1: cuestionario ---------- */
.lv-intro { position: absolute; left: 16px; right: 16px; top: 70px; z-index: 3; padding: 24px 20px 20px; border-radius: 22px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #0D1A2A, #09131F); box-shadow: 0 0 24px rgba(25, 159, 255, .12); transition: opacity .5s, transform .6s var(--ease); }
.lv-s--1.is-quiz .lv-intro { opacity: 0; transform: translateY(-24px) scale(.97); pointer-events: none; }
.lv-intro__k { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--blue); }
.lv-intro__t { margin: 10px 0 14px; font-size: 24px; font-weight: 800; line-height: 1.12; }
.lv-intro p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--white); }
.lv-intro p.d { font-size: 14px; color: var(--app-dim); }
.lv-intro__m { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--app-dim); }
.lv-btn { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 16px; border-radius: 14px; background: var(--lime); color: #050A12; font: 800 15px/1 "Inter", sans-serif; letter-spacing: .08em; transition: transform .15s, opacity .35s, filter .35s, box-shadow .35s; }
.lv-btn.is-off { opacity: .42; filter: saturate(.6); }
.lv-btn.is-on { box-shadow: 0 8px 26px -6px rgba(149, 255, 25, .6); }
.lv-btn.is-press { transform: scale(.97); }
.lv-quiz { position: absolute; inset: 0; padding: 18px 16px 0; opacity: 0; transition: opacity .5s .15s; }
.lv-s--1.is-quiz .lv-quiz { opacity: 1; }
.lv-prog { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.lv-prog i { display: block; width: 20%; height: 100%; background: var(--lime); border-radius: 2px; }
.lv-plab { margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--app-faint); }
.lv-q { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.lv-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: var(--app-faint); }
.lv-slider { position: relative; display: flex; gap: 8px; margin-bottom: 14px; }
.lv-rail { position: relative; flex: 0 0 44px; width: 44px; }
.lv-rail__line { position: absolute; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--line-strong); }
.lv-rail__dot { position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(183, 211, 235, .42); transition: background-color .3s; }
.lv-rail__dot.is-active { background: var(--blue); }
.lv-thumb { position: absolute; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: 0 0 0 4px rgba(25, 159, 255, .25);
  opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease), top .25s ease; }
.lv-thumb::after { content: ""; position: absolute; left: 100%; top: 50%; margin: -6px 0 0 3px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--blue); }
.lv-thumb.is-show { opacity: 1; transform: none; }
.lv-cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lv-card { display: block; padding: 11px 13px; font-size: 13px; line-height: 1.38; color: var(--white); background: #09131F; border: 1px solid var(--line); border-radius: 16px;
  transition: background-color .35s, box-shadow .35s, transform .15s; }
.lv-card.is-on { background: linear-gradient(rgba(25, 159, 255, .16), rgba(25, 159, 255, .16)), #09131F; box-shadow: inset 0 0 0 1px rgba(25, 159, 255, .95), 0 0 18px rgba(25, 159, 255, .3); }
.lv-card.is-press { transform: scale(.985); }

/* ---------- escena 2: medidor ---------- */
.lv-gcard { margin-top: 52px; padding: 22px 16px 18px; text-align: center; background: #09131F; border: 1px solid var(--line); border-radius: 20px; }
.lv-glab { margin-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--app-faint); }
.lv-gauge { position: relative; max-width: 260px; margin: 0 auto; }
.lv-gauge svg { display: block; width: 100%; height: auto; }
.lv-gauge .tr { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.lv-gauge .fl { fill: none; stroke: var(--blue); stroke-width: 14; stroke-linecap: round; }
.lv-gval { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); font-size: 62px; font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.lv-gcat { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s var(--ease); }
.lv-gcat.is-show { opacity: 1; transform: none; }
.lv-gnote { margin: 16px 4px 0; font-size: 13px; line-height: 1.5; color: var(--app-dim); text-align: center; opacity: 0; transition: opacity .6s; }
.lv-gnote.is-show { opacity: 1; }
.lv-gbtns { opacity: 0; transition: opacity .6s; }
.lv-gbtns.is-show { opacity: 1; }
.lv-link { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--app-dim); text-decoration: underline; }

/* ---------- escena 3: un partido ajusta el Nivel ---------- */
.lv-cases { display: flex; gap: 8px; margin-bottom: 12px; }
.lv-case { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--app-faint); transition: color .35s, border-color .35s, background-color .35s; cursor: pointer; }
.lv-case.is-on { color: var(--white); border-color: rgba(25, 159, 255, .8); background: rgba(25, 159, 255, .12); }
.lv-m { padding: 12px 14px; background: #09131F; border: 1px solid var(--line-strong); border-radius: 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.lv-s--3.is-m .lv-m { opacity: 1; transform: none; }
.lv-m__t { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--app-faint); margin-bottom: 6px; }
.lv-m__t b { color: var(--lime); opacity: 0; transition: opacity .4s; }
.lv-s--3.is-score .lv-m__t b { opacity: 1; }
.lv-mrow { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.lv-mrow + .lv-mrow { border-top: 1px solid var(--line); }
.lv-mrow span { font-size: 14px; font-weight: 800; line-height: 1.25; }
.lv-mrow span small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--app-dim); }
.lv-mrow--a span { color: var(--team-a); } .lv-mrow--b span { color: var(--team-b); }
.lv-mrow .a-sets i { opacity: .25; transition: opacity .4s; }
.lv-s--3.is-score .lv-mrow .a-sets i { opacity: 1; }
.lv-n { position: relative; margin-top: 12px; padding: 14px 16px 14px; background: #09131F; border: 1px solid var(--line-strong); border-radius: 20px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease), border-color .5s, box-shadow .5s; }
.lv-s--3.is-n .lv-n { opacity: 1; transform: none; }
.lv-n.is-up { border-color: rgba(149, 255, 25, .45); box-shadow: 0 0 28px -10px rgba(149, 255, 25, .4); }
.lv-n__top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.lv-n .a-av { width: 46px; height: 46px; font-size: 13px; color: var(--lime); }
.lv-n__w b { display: block; font-size: 17px; font-weight: 600; } .lv-n__w small { display: block; margin-top: 1px; font-size: 12px; color: var(--app-dim); }
.lv-n__v { position: relative; text-align: right; }
.lv-n__v small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--app-faint); }
.lv-n__v b { display: block; font-size: 40px; font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.lv-chip { position: absolute; right: 72px; top: 20px; padding: 2px 9px; border-radius: 999px; background: var(--lime); color: #0C1400; font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(8px) scale(.85); transition: opacity .4s, transform .5s var(--ease); }
.lv-chip.is-show { opacity: 1; transform: none; }
.lv-n__c { margin-top: 12px; }
.lv-n__c small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--gold); }
.lv-n__bar { height: 4px; border-radius: 999px; background: rgba(244, 247, 242, .08); overflow: hidden; }
.lv-n__bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width .8s var(--ease); }
.lv-b { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #0D1A2A; border: 1px solid var(--blue); box-shadow: 0 0 6px rgba(25, 159, 255, .5); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.lv-s--3.is-b .lv-b { opacity: 1; transform: none; }
.lv-b__k { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--lime); margin-bottom: 6px; }
.lv-b__k svg { width: 14px; height: 14px; }
.lv-b b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.lv-b p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #C9D3DE; }
.lv-b.is-swap .lv-b__x { opacity: 0; }
.lv-b__x { transition: opacity .25s; }
.lv-rule { margin-top: 12px; text-align: center; font-size: 12px; font-weight: 700; color: var(--app-dim); }
.lv-rule em { font-style: normal; color: var(--white); }

/* ---------- pasos ---------- */
.lv__steps { display: grid; gap: 6px; max-width: 30em; }
.lv__steps li { grid-area: 1 / 1; pointer-events: none; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; opacity: 0; cursor: pointer; transition: opacity .35s, background-color .35s, border-color .35s; -webkit-tap-highlight-color: transparent; }
.lv__steps li.is-active { opacity: 1; pointer-events: auto; background: rgba(25, 159, 255, .08); border-color: rgba(25, 159, 255, .35); }
.lv__steps b { flex: none; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--blue); padding-top: 3px; }
.lv__steps .h3 { font-size: 18px; } .lv__steps p { margin-top: 2px; font-size: 15px; color: #C9D3DE; line-height: 1.45; }
html:not(.js) .lv__steps li { opacity: 1; grid-area: auto; pointer-events: auto; }
html:not(.js) .lv__stage { display: none; }
@media (min-width: 900px) {
  .lv { padding: 104px 0 88px; }
  .lv__grid { grid-template-columns: minmax(0, 1fr) 390px; column-gap: 96px; align-items: center; }
  .lv__head { grid-column: 1; grid-row: 1; align-self: end; }
  .lv__steps { grid-column: 1; grid-row: 2; align-self: start; margin-top: 8px; }
  .lv__steps li { grid-area: auto; opacity: .55; pointer-events: auto; }
  .lv__steps li.is-active { opacity: 1; }
  .lv__foot { grid-column: 1; grid-row: 3; align-self: start; }
  .lv__stage { grid-column: 2; grid-row: 1 / span 3; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .lv-chip, .lv-m, .lv-n, .lv-b, .lv-intro { transition-duration: .01s; } }
@media (prefers-contrast: more) and (min-width: 900px) { .lv__steps li { opacity: 1; } }