/* ═══════════════════════════════════════════════════════════════
   EL LOBO — Desafío en vivo (Lite). Se apoya en css/lobo.css:
   reutiliza tokens (--blue, --white, --line…), .btn, .orb, .chip,
   .card, .entry, .composer, .eye. Aquí solo van los ajustes de la
   Lite: layout de feria, marcador y pantallas de veredicto.
   ═══════════════════════════════════════════════════════════════ */

.lite-wrap {
  max-width: 640px; margin: 0 auto; box-sizing: border-box; overflow-x: hidden;
  min-height: 100dvh; padding: 30px 20px calc(30px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center;
}
.lite-wrap.home, .lite-wrap.name, .lite-wrap.decision { justify-content: center; }

/* Héroe con el lobo */
.lite-hero { margin: 0 auto; }
.lite-hero .orb { width: 270px; height: 270px; }
.lite-hero.small .orb { width: 176px; height: 176px; }

/* Aullido del Lobo al aceptar el desafío (overlay a pantalla completa, solo Expo) */
.lobo-howl { position: fixed; inset: 0; z-index: 9999; background: #000;
  display: flex; align-items: center; justify-content: center; animation: howlIn .28s ease; }
.lobo-howl.out { animation: howlOut .32s ease forwards; }
.lobo-howl-vid { width: min(96vw, 96vh); height: min(96vw, 96vh); object-fit: contain; }
.lobo-howl-skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); right: 20px;
  background: rgba(255,255,255,.12); color: #EAF1FB; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 9px 18px; font: 600 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
@keyframes howlIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes howlOut { from { opacity: 1 } to { opacity: 0 } }

.lite-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue-bright); opacity: .85;
}
.lite-title {
  font-family: 'Archivo', sans-serif; font-weight: 900; line-height: .92;
  font-size: clamp(2.7rem, 12vw, 4.4rem); letter-spacing: -.02em; margin: 2px 0 4px;
  background: linear-gradient(180deg, #EAF1FB, #5DA0FF); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.lite-title2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 6vw, 2.1rem); margin: 4px 0; }
.lite-sub { color: var(--dim); font-size: 1rem; line-height: 1.55; max-width: 30rem; margin: 0 auto; }

.lite-cta { width: 100%; max-width: 22rem; font-size: 1.1rem; padding: 17px; margin-top: 6px; }

.lite-status { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; cursor: pointer; }
.chip-btn { cursor: pointer; border: 1px solid var(--line); background: none; color: var(--dim); }

/* Conectar cerebro y voz (prominente cuando falta algo) */
.lite-connect {
  width: 100%; max-width: 22rem; border: 1px solid var(--blue);
  background: rgba(61,130,246,.12); color: var(--blue-bright); font-weight: 700;
}
.lite-connect:hover { background: rgba(61,130,246,.2); }
.lite-connected {
  background: none; border: 1px solid rgba(74,222,128,.4); color: #4ade80;
  border-radius: 999px; padding: 8px 16px; font-size: .82rem; cursor: pointer;
}
.lite-hint { font-size: .74rem; color: var(--faint); line-height: 1.45; margin-top: 6px; }
.lite-hint b { color: var(--dim); }

/* Mini marcador en el home */
.lite-board-mini { width: 100%; max-width: 22rem; margin-top: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(61,130,246,.04); }
.lite-board-h { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.lite-mrow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: .95rem; }
.lite-mrow b { color: var(--blue-bright); font-family: 'JetBrains Mono', monospace; }

.lite-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; width: 100%; }
.lite-foot.col { flex-direction: column; align-items: stretch; max-width: 22rem; margin: 12px auto 0; }
.lite-foot.col .btn { width: 100%; }

.lite-back, .lite-x {
  align-self: flex-start; background: none; border: none; color: var(--dim);
  font-size: .95rem; cursor: pointer; padding: 6px 2px;
}
.lite-name-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 22rem; }
.lite-input { text-align: center; font-size: 1.15rem; padding: 15px; }

/* Registro Expo */
.lite-reg-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 24rem; text-align: left; }
.lite-reg-form .input { font-size: 1rem; padding: 13px 14px; }
.lite-reg-err { color: #E06E5D; font-size: .82rem; padding: 2px; }
.cop-note { font-size: .76rem; color: var(--faint); max-width: 30rem; margin: 6px auto 0; line-height: 1.5; text-align: center; }

/* Decisión */
.lite-decisions { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 24rem; }
.lite-dec { width: 100%; justify-content: center; }

/* ── Chat de feria ──────────────────────────────────────────── */
.lite-wrap.chat {
  max-width: 720px; height: 100dvh; min-height: 0; padding: 0; gap: 0;
  justify-content: flex-start; align-items: stretch; text-align: left;
}
.lite-chat-head {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line);
  background: rgba(6,8,14,.85); backdrop-filter: blur(8px);
}
.lite-x { align-self: auto; font-size: 1.1rem; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; }
.lite-mission { flex: 1; min-width: 0; }
.lite-prop { font-size: .9rem; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lite-mission-sub { font-size: .72rem; color: var(--faint); margin-top: 2px; }
.lite-mission-sub b { color: var(--dim); }
.lite-endbtn { flex: 0 0 auto; }
.lite-log { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px; -webkit-overflow-scrolling: touch; }
.lite-body { display: flex; flex-direction: column; gap: 4px; }
.lite-wrap.chat .composer { flex: 0 0 auto; }
.lite-send { flex: 0 0 auto; }

/* ── Veredicto ──────────────────────────────────────────────── */
.lite-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lite-score {
  width: 168px; height: 168px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; margin: 4px auto;
  border: 3px solid var(--blue); background: radial-gradient(circle, rgba(61,130,246,.16), transparent 70%);
  box-shadow: 0 0 40px rgba(56,189,248,.18);
}
.lite-score.gold { border-color: #F5C451; box-shadow: 0 0 46px rgba(245,196,81,.28); }
.lite-score.ok { border-color: #4ade80; box-shadow: 0 0 40px rgba(74,222,128,.22); }
.lite-score.danger { border-color: #E06E5D; box-shadow: 0 0 36px rgba(224,110,93,.2); }
.lite-score-n { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 3.6rem; line-height: 1; color: var(--white); }
.lite-score-k { font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .18em; color: var(--faint); margin-top: 4px; }
.lite-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lite-vcard { width: 100%; max-width: 34rem; border-color: rgba(61,130,246,.3); }
.lite-vtx { font-size: 1.05rem; line-height: 1.5; color: var(--white); font-style: italic; text-align: center; margin: 0; }

.lite-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 40rem; text-align: left; }
.lite-col { border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; background: rgba(255,255,255,.015); }
.lite-col-h { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.lite-col-h.ok { color: #4ade80; } .lite-col-h.danger { color: #E06E5D; }
.lite-col ul { margin: 0; padding-left: 16px; } .lite-col li { font-size: .86rem; color: var(--dim); line-height: 1.45; margin-bottom: 6px; }
.lite-deccard { width: 100%; max-width: 40rem; text-align: left; }
.lite-deccard p { font-size: .9rem; color: var(--dim); line-height: 1.5; margin: 6px 0 0; }

/* ── Ranking ────────────────────────────────────────────────── */
.lite-board { width: 100%; max-width: 34rem; display: flex; flex-direction: column; gap: 7px; }
.lite-brow { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.lite-brow.me { border-color: var(--blue); background: rgba(61,130,246,.09); }
.lite-medal { width: 34px; text-align: center; font-size: 1.25rem; flex: 0 0 auto; }
.lite-rk { font-family: 'JetBrains Mono', monospace; color: var(--faint); font-size: .95rem; }
.lite-bname { flex: 1; min-width: 0; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lite-cap { color: #4ade80; }
.lite-bscore { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--blue-bright); flex: 0 0 auto; }
.lite-empty { color: var(--faint); padding: 26px; text-align: center; }

/* Modal sólido en la Lite (evita que el lobo/botones del fondo se cuelen) */
#modal-root .modal-backdrop { background: rgba(4, 6, 12, .93); }
#modal-root .modal { background: #0b111b; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }

/* Modal de configuración */
.lite-modal { text-align: left; }
.lite-modal-h { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; margin: 0 0 6px; }
.lite-modal-p { color: var(--dim); font-size: .85rem; line-height: 1.5; margin: 0 0 14px; }
.lite-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.lite-sec { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-bright); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.lite-voice-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lite-voice-row .select { flex: 1; min-width: 0; }
.lite-voice-row .btn { flex: 0 0 auto; }
.lite-set-status { font-size: .78rem; color: var(--dim); min-height: 1.1em; }

@media (max-width: 460px) {
  .lite-cols { grid-template-columns: 1fr; }
}