/* ============================================================================
   estilo.css (cliente de SK Arcade 2) · Solo lo nuevo. Todo lo demás es el estilo de sk_arcade, sin cambios,
   y aquí se usan sus mismas variables (--line, --gold, --accent, --bad…) y su mismo bisel de pixeles.
   ============================================================================ */

/* ---------- mapa */
.mapbar2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; line-height: 0; }
.mapbar2 .sp, .bar .sp { flex: 1; }
/* el mapa de conceptos (mapa.js): el tablero del mapa de habilidades de sk_arcade (nucleo/estilo.css: .radial,
   .lienzo, .lvl), con el núcleo al centro y cada concepto en su color */
/* el mapa ocupa toda la ventana: el panel arriba (a lo más 760 px, centrado), el tablero con todo el espacio que
   queda, y la nota y el pie abajo. Cuando Chispa habla, el tablero se achica para dejarle su lugar (--alto-chispa) */
#mapa { max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box;
        padding: 10px 12px calc(var(--alto-chispa, 0px) + 6px); }
#mapa .mapcab { flex: none; width: 100%; max-width: 760px; margin: 0 auto 6px; }
.tablero { position: relative; flex: 1; min-height: 300px; }
#mapa .radial { position: absolute; inset: 0; height: auto; min-height: 0; transition: filter .3s steps(3); }
.notatablero { flex: none; text-align: center; margin: 6px 0 0; }
#mapa .pie { flex: none; margin-top: 4px; }
/* la red proyectada por el núcleo: un holograma sobre el mapa, que se oscurece detrás (juego.js: proyectar/recoger) */
.tablero.proyectando .radial { filter: brightness(.4) saturate(.5); }
.tablero.proyectando .lvl.nucleo .tile { box-shadow: 0 -5px 0 0 #2fd3d3, 0 5px 0 0 #2fd3d3, -5px 0 0 0 #2fd3d3, 5px 0 0 0 #2fd3d3, 0 0 0 9px #0b0c16; }
.holograma { position: absolute; inset: 4px; z-index: 6; display: flex; flex-direction: column; padding: 8px 10px 10px;
             transform-origin: 0 0; background: rgba(9, 18, 38, .9);
             box-shadow: 0 -4px 0 0 #2fd3d3, 0 4px 0 0 #2fd3d3, -4px 0 0 0 #2fd3d3, 4px 0 0 0 #2fd3d3; }
.holograma::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* las líneas de barrido */
                    background: repeating-linear-gradient(0deg, rgba(47, 211, 211, .07) 0 2px, transparent 2px 6px);
                    animation: barrido 3s steps(12) infinite; }
.holograma.encendida { animation: encendido .36s steps(1); }
@keyframes barrido { to { background-position: 0 60px; } }
@keyframes encendido { 0% { opacity: .55; } 33% { opacity: 1; } 66% { opacity: .75; } 100% { opacity: 1; } }
.holograma .copawrap { flex: 1; min-height: 0; }
.holograma .copa { height: 100%; min-height: 0; margin-top: 0; }
.holograma .note { color: #b8c6dc; }
/* la red en miniatura dentro del núcleo; al recogerse la red, el núcleo destella */
.lienzo .lvl.nucleo .minired { image-rendering: pixelated; width: 160px; height: 120px; }
.lienzo.lejos .lvl.nucleo .minired { transform: scale(1.25); }
.lienzo .lvl.nucleo.recibe .tile { animation: recibe .6s steps(3); }
@keyframes recibe { 0% { filter: brightness(2.2); transform: scale(1.12); } 100% { filter: none; transform: none; } }
.lienzo .lvl.nucleo { transform: translate(-50%, -104px); width: 230px; }   /* el centro del cuadro (208 px) en su punto */
.lienzo .lvl.nucleo .tile { --c: #1f2c45; color: #ffd23f; width: 208px; height: 208px;
                            box-shadow: 0 -5px 0 0 #ffd23f, 0 5px 0 0 #ffd23f, -5px 0 0 0 #ffd23f, 5px 0 0 0 #ffd23f, 0 0 0 9px #0b0c16; }
.lienzo .lvl.nucleo.herido .tile { animation: nucleoHerido 1.4s steps(2) infinite; }
@keyframes nucleoHerido { 50% { box-shadow: 0 -5px 0 0 #ef4a5f, 0 5px 0 0 #ef4a5f, -5px 0 0 0 #ef4a5f, 5px 0 0 0 #ef4a5f, 0 0 0 9px #0b0c16; } }
.lienzo.lejos .lvl.nucleo .tile > svg { transform: scale(1.8); }
.lienzo .lvl.concepto .tile { color: #fff; text-shadow: none; }
.lienzo .lvl.concepto.herido .tile > svg { animation: latido .9s steps(2) infinite; }
/* la vista de la red: «◀ CONCEPTOS» y la nota de la ficha de colección, sobre la copa */
.redbar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.redbar .note { margin: 0; }
.redbar .sbtn { line-height: 0; }
/* el panel del mapa: arriba la insignia; luego tres barras alineadas, como vida y maná: Exp, Lv y Hp */
.panelmapa { flex: 1; min-width: 0; margin: 4px; padding: 8px 12px 10px; }
/* el panel del mapa en pixel art (hud.js), como el HUD de un juego: arriba la insignia; luego Exp, Lv y Hp en una
   cuadrícula de 4 columnas (placa, medidor, valor y mensaje), para que todo quede alineado */
.panelmapa { display: grid; grid-template-columns: auto auto auto 1fr; column-gap: 10px; row-gap: 7px; align-items: center; }
.panelmapa #nivelMapa, .panelmapa #nivelRed, .panelmapa .hfila { display: contents; }
.panelmapa .hcab { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.panelmapa .hquien { display: flex; align-items: center; gap: 8px; line-height: 0; min-width: 0; }
.panelmapa .hiconos { display: flex; gap: 2px; flex: none; }
.panelmapa .hiconos .ibtn { padding: 3px; }
.panelmapa .hquien .insignia { width: 34px; height: 34px; }
.panelmapa .hfila > * { line-height: 0; }
.panelmapa .hmsg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.panelmapa svg.hud { flex: none; image-rendering: pixelated; }
/* ya casi: el mensaje da saltitos y a la barra le corre un brillo; el último bloque: parpadea */
.panelmapa .casi .hmsg .htexto, .panelmapa .ultimo .hmsg .htexto { animation: saltito .6s steps(2) infinite; }
.panelmapa .hbarra .destello { opacity: 0; }
.panelmapa .casi .hbarra .destello { opacity: .55; animation: corre 1.4s steps(10) infinite; }
.panelmapa .ultimo .hmsg { animation: blink .7s steps(1) infinite; }
.panelmapa .ultimo .hplaca { animation: xpsube 1.2s steps(3) infinite; }
/* con escombro: el corazón a medias late; tocar el renglón elige qué reparar */
.panelmapa .hhp.herida { cursor: pointer; }
.panelmapa .hhp.herida:hover .hplaca { filter: brightness(1.2); }
.panelmapa .late { transform-box: view-box; animation: latido .9s steps(2) infinite; }
.panelmapa .hhp.herida .hmsg svg.spr { animation: latido .9s steps(2) infinite; }
@media (max-width: 700px) {   /* en pantalla angosta, cada mensaje pasa debajo de su medidor */
  .panelmapa { grid-template-columns: auto auto 1fr; }
  .panelmapa .hmsg { grid-column: 2 / -1; justify-content: flex-start; margin-top: -3px; }
}
@keyframes saltito { 50% { transform: translateY(-2px); } }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(var(--hasta)); } }
@keyframes latido { 50% { transform: scale(1.25); } }
.copa { display: block; width: 100%; height: 58vh; min-height: 320px; image-rendering: pixelated; margin-top: 8px; }
/* la cámara del mapa: botones +, − y centrar en la esquina de arriba a la derecha (solo cuando sirven) */
.copawrap { position: relative; }
.copamandos { position: absolute; top: 14px; right: 8px; display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.copamandos.activos { opacity: 1; pointer-events: auto; }
.copamandos .sbtn { line-height: 0; padding: 6px; height: 30px; min-width: 30px; }
.pie { text-align: center; margin-top: 18px; color: var(--faint); font-size: 12px; }

/* ---------- ejercicio */
.ficha.sel { background: var(--accent-bg); box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.fichas { justify-content: center; }
.chip { border-left: 6px solid var(--k, var(--accent)); }
.bag .chip[data-k] { cursor: pointer; }
/* la leyenda de lo pintado en la figura (publico.leyenda): P₁₁, P₂₁… con su color */
.row.leyenda { justify-content: center; margin-top: 6px; }
.row.leyenda .chip { animation: none; }
.sbtn.ficha { text-transform: none; letter-spacing: 0; }
/* tachar: la raya roja va encima del término (text-decoration no atraviesa las fórmulas de KaTeX) */
.term { position: relative; }
/* emparejar: la muestra del color con que está pintado en la figura */
.pares .muestra { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 2px var(--line); }
.term.x { --k: var(--bad); }
.term.x::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px;
  background: var(--bad); transform: rotate(-6deg); }   /* las fichas llevan matemáticas: sin mayúsculas forzadas */
.bag .chip.pareja { cursor: pointer; display: inline-flex; gap: 6px; border-left: 0; }
.bag .chip.pareja i { font-style: normal; border-left: 6px solid var(--k); padding-left: 4px; }

/* ---------- ventana de resultado */
.sheet.resultado .smsg { max-height: 52vh; }
.sheet .solucion { font-weight: 700; }
.aviso-c { color: var(--gold); line-height: 0; margin: 8px 0; }
.cuadros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; text-align: center; }
.cuadros .box, .pilas .box { --e: 3px; padding: 8px 6px; }
.cuadros small, .pilas small { display: block; font: 700 11px/1 Consolas, monospace; color: var(--muted); margin-bottom: 6px; }
.cuadros b { font: 700 20px/1 Consolas, monospace; }
.segs5 { display: flex; gap: 3px; justify-content: center; margin-top: 6px; }
.segs5 i { width: 12px; height: 7px; background: var(--panel); }
.segs5 i.on { background: var(--gold); }
.escudos { display: flex; gap: 6px; justify-content: center; }
.escudos i { width: 16px; height: 18px; background: var(--panel); clip-path: polygon(50% 0, 95% 18%, 90% 60%, 50% 100%, 10% 60%, 5% 18%); }
.escudos i.on { background: var(--gold); }
.pilas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.pila { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 22px; }
.hx { width: 18px; height: 20px; background: #1d9e75; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: hop .3s steps(3); }
.hx.escombro { background: repeating-linear-gradient(135deg, #1a140e 0 3px, #6b4a3a 3px 5px); }
.hx.salvado { background: var(--gold); clip-path: polygon(50% 0, 95% 18%, 90% 60%, 50% 100%, 10% 60%, 5% 18%); }

/* Salir: izquierda, rojo, angosto · Continuar: derecha, azul, ancho y late */
.sbotones { display: flex; gap: 12px; align-items: stretch; margin-top: 10px; }
.sbotones .btn { flex-direction: column; gap: 4px; }
.sbotones .btn small { font: 700 11px/1 Consolas, monospace; opacity: .85; }
.sbotones .salir { flex: 0 0 30%; --c: var(--bad); --on: #fff; padding: 10px 6px; }
.sbotones .continuar { flex: 1; animation: late 1.2s steps(2) infinite; }
@keyframes late { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
html.quieto .sbotones .continuar { animation: none; }

/* ---------- la mesa sin cuaderno: el juego al centro y el libro a la derecha */
.mesa.sinizq { grid-template-columns: minmax(0, 1fr) auto; }
.mesa.sinizq .centro { grid-column: 1; }
.mesa.sinizq .panel.der { grid-column: 2; }

/* ---------- mapa: nivel, desempeño y la barra que late al cambiar */
.ddesempeno { display: inline-flex; align-items: center; gap: 6px; line-height: 0; }
#nivelRed.baja .hhp { animation: shk .3s steps(3); }
#nivelRed.sube .hhex { animation: xpsube .4s steps(3); }
#nivelRed.subio .hlv .hplaca { animation: xpsube .5s steps(3) 2; }
#adorno:empty { display: none; }

/* ---------- mi desempeño */
.dnivel { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px 0 14px; line-height: 0; }
.dcajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.dcaja { --e: 3px; padding: 8px 4px; text-align: center; line-height: 0; }
.dcaja small { display: block; font: 700 10px/1 Consolas, monospace; color: var(--muted); margin-bottom: 8px; }
.dconcepto { --e: 3px; padding: 8px 10px; margin-bottom: 10px; border-left: 8px solid var(--k); text-align: left; }
.dtit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 0; margin-bottom: 8px; }
.dverbo { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.dbarra { display: inline-block; height: 10px; background: var(--panel); box-shadow: 0 0 0 2px var(--line); min-width: 90px; flex: 1; }
.dbarra i { display: block; height: 100%; background: var(--ok); }
.dverbo small, .dtit small { font: 700 11px/1 Consolas, monospace; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .dcajas { grid-template-columns: repeat(2, 1fr); } }

/* ---------- libro como ícono arriba */
.blibro { position: relative; }
.blibro .aviso { position: absolute; top: -4px; right: -4px; background: var(--gold); color: #2b2118; font-weight: 700; font-size: 11px; line-height: 1; padding: 2px 4px; box-shadow: 0 0 0 2px var(--line); animation: blink .8s steps(1) infinite; }
.libroventana { text-align: left; }
.libroventana #liIdx { width: 100%; margin: 0 0 8px; }
.libroventana #liHoja { margin: 0; max-height: 58vh; overflow-y: auto; }
.libroventana .ppie { border-top: 0; padding: 8px 0 0; }

/* ---------- el diálogo de Chispa lleva el reto */
#play .dlg .txt { font-size: 16px; font-weight: 700; line-height: 1.45; }

/* ---------- experiencia: el +XP grande */
.fly.grande { flex-direction: column; align-items: flex-start; gap: 6px; line-height: 0; }
.xpg { color: #29adff; }   /* la experiencia es azul, como su barra */

/* la insignia actual, chica, a la derecha del número de nivel */
.insignia.mini { width: 26px; height: 26px; }
.pxp .insignia.sin-dibujo { display: none; }   /* sin dibujo, el número ya está a la izquierda */

/* ---------- mapa compacto (sustituye a .mapbar2 y al nivel en caja aparte) */
.mapcab { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.mapcab .ddesempeno { padding: 4px; line-height: 0; background: none; box-shadow: none; }

/* ---------- ficha de colección */
.colcarta { text-align: left; border-top: 6px solid var(--k); padding-top: 10px; }
.colcabeza { display: flex; gap: 14px; align-items: center; }
.colretrato { line-height: 0; flex: none; }
.colretrato canvas { image-rendering: pixelated; }
.coldatos { display: flex; flex-direction: column; gap: 8px; }
.coldatos small { font: 700 11px/1.2 Consolas, monospace; color: var(--muted); }
.colestado { color: var(--ok); line-height: 0; }
.colcarta.destruido .colestado { color: var(--bad); }
.colhistoria { margin: 12px 0; padding-left: 20px; line-height: 1.6; font-size: 14px; }
.colejercicio { border-top: 2px dashed var(--hair); padding-top: 10px; }
.colreto { font-weight: 700; margin: 0 0 8px; }
.colfigura svg.fg { min-width: 0; }
.colsemilla { display: block; text-align: right; color: var(--faint); font: 11px Consolas, monospace; margin-top: 4px; }
.colaviso { color: var(--bad); font-weight: 700; margin: 12px 0 4px; }
.colcarta.tronco p { margin-top: 12px; }
/* la ficha flotante, junto al cursor: no recibe el ratón, así no le quita el paso al mapa */
.fichaflotante { position: fixed; z-index: 70; width: 340px; max-width: calc(100vw - 16px); padding: 12px 14px;
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.fichaflotante.visible { opacity: 1; transform: none; }
.fichaflotante .mt { color: var(--accent); margin-bottom: 8px; line-height: 0; }
.fichaflotante .colhistoria { font-size: 13px; margin: 8px 0; }
.fichaflotante .colreto { font-size: 13px; }
.fichaflotante .fgw { overflow: hidden; }
.fichaflotante .fgw svg.fg { min-width: 0 !important; width: 100%; height: auto; }   /* la figura completa: aquí no se puede desplazar */

/* ---------- ventana de resultado compacta (sustituye a .cuadros y .pilas en cajas separadas) */
.sheet.resultado { padding: 10px 16px; }
.sheet.resultado .smsg { margin: 4px 0 6px; }
.sheet.resultado .smsg p { margin: 4px 0; }
.rfila { --e: 3px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 6px 10px; margin: 8px 4px 2px; line-height: 0; }
.rdato { display: inline-flex; align-items: center; gap: 6px; }
.rdato small { font: 700 10px/1 Consolas, monospace; color: var(--muted); }
.rdato .segs5 { margin: 0; }
.escudos { display: inline-flex; gap: 3px; }
.rpila .pila { display: inline-flex; gap: 2px; min-height: 0; flex-wrap: wrap; align-items: center; }
.sbotones { margin-top: 6px; gap: 10px; }
.sbotones .btn { padding: 8px 6px; gap: 3px; }
.sbotones .salir { padding: 8px 6px; }

/* ---------- el diálogo de Chispa, fijo abajo como en un RPG */
.chispa-rpg { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 0 16px 6px; pointer-events: none; }
.chispa-rpg .dlg { max-width: 760px; margin: 14px auto 6px; pointer-events: auto; box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line), 0 10px 0 4px rgba(0,0,0,.12); }
.chispa-rpg .dlg .txt { font-size: 16px; font-weight: 700; line-height: 1.45; }
.chispa-rpg .paso { display: none; position: absolute; right: 12px; bottom: 6px; font: 700 11px/1 Consolas, monospace; color: var(--gold); animation: blink 1s steps(1) infinite; }
.chispa-rpg.secuencia .paso { display: block; }
.chispa-rpg.secuencia .dlg { cursor: pointer; padding-bottom: 22px; }
.screen { padding-bottom: calc(var(--alto-chispa, 0px) + 40px); }

/* ---------- INSTRUCCIÓN y RETO, distintos a simple vista */
.velo { position: fixed; inset: 0; z-index: 24; background: rgba(20, 14, 8, .45); }
.chispa-rpg .dlg { flex-wrap: wrap; }
.chispa-rpg .dlg .who { background: var(--bad); color: #fff; }                    /* RETO: rojo */
.chispa-rpg.secuencia .dlg .who { background: var(--gold); color: #2b2118; }       /* INSTRUCCIÓN: dorado */
.chispa-rpg.secuencia .dlg { background: color-mix(in srgb, var(--gold) 20%, var(--card)); padding-bottom: 12px; }   /* funciona en los dos temas */
.chispa-pie { display: none; width: 100%; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.chispa-rpg.secuencia .chispa-pie { display: flex; }
.chispa-pie .puntos { display: inline-flex; gap: 4px; }
.chispa-pie .puntos i { width: 10px; height: 10px; background: var(--panel); box-shadow: 0 0 0 2px var(--line); }
.chispa-pie .puntos i.on { background: var(--gold); }
.chispa-pie .siguiente { width: auto; margin: 4px; padding: 8px 16px; animation: late 1s steps(2) infinite; }
html.quieto .chispa-pie .siguiente { animation: none; }
.chispa-rpg .paso { display: none !important; }