/* CAELYTTE V2 — LAB COMBATE HUD flotante v1 — solo presentacion.
 * Escena tactica, tablero SVG, casillas, obstacles y SERVER permanecen sin cambios.
 * Fondo: primera ilustracion diurna del artista, sin retoques ni upscaling.
 * Esta hoja se importa DESPUES del CSS canonico de combate. */
#n16-pve:not([hidden]){
 display:block!important;position:fixed;inset:0;height:100dvh;min-height:0;
 padding:0!important;margin:0;gap:0!important;overflow:hidden!important;
 background:#061018 url('/assets/runtime/n47-combate-bosque-primero.jpg') center center/cover no-repeat!important;
 color:#fff1cb;isolation:isolate;
}
/* Mantener tablero real y sus coordenadas SVG; eliminar columnas que encajonan el campo. */
#n16-pve .n371-layout{
 position:absolute;inset:0 0 136px;display:block!important;width:100%;height:auto!important;
 max-height:none!important;overflow:visible!important;margin:0;padding:0;z-index:1;
}
#n16-pve .n371-sidebar{display:contents!important}
#n16-pve .n37-arena{
 position:absolute!important;inset:0;z-index:1;display:flex;justify-content:center;align-items:center;
 width:100%;height:100%;max-height:none;min-height:0;overflow:visible!important;
 padding:0!important;background:transparent!important;border:0!important;pointer-events:none;
}
#n16-pve .n37-board-zone{
 position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;
 width:100%;height:100%;max-height:100%;overflow:visible!important;pointer-events:none;
}
#n16-pve .n16-board{
 display:block;position:relative;width:min(100%,calc((100dvh - 145px)*1.3333))!important;
 height:auto!important;max-height:100%!important;max-width:100%!important;
 aspect-ratio:1448/1086;flex:0 1 auto;overflow:visible;
 background:transparent!important;border:0!important;filter:drop-shadow(0 8px 12px #0007);
 pointer-events:auto;
}
#n16-pve .n16-board svg{display:block;width:100%;height:auto;aspect-ratio:1448/1086;}
/* Ronda: arriba derecha, totalmente sin placa. */
#n16-pve .n37-heading{
 position:absolute!important;z-index:10;right:clamp(14px,2.7vw,44px);top:clamp(12px,2.4vh,25px);
 left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
 padding:0!important;margin:0;min-height:0!important;max-width:min(38vw,420px);
 background:transparent!important;border:0!important;box-shadow:none!important;text-align:right;
 pointer-events:none;
}
#n16-pve .n37-heading strong{
 color:#ffdd8b;font:800 clamp(25px,3vw,41px) Georgia,serif;
 letter-spacing:.02em;text-shadow:0 2px 4px #000,0 0 16px #000b,0 0 22px #0009;
}
#n16-pve .n37-heading span{
 color:#fff6df;font-size:clamp(11px,1.08vw,16px);font-weight:650;
 text-shadow:0 2px 3px #000,0 0 9px #000;max-width:100%;white-space:normal;
}
/* Participantes: sin cajas, retratos grandes, barras flotantes. */
#n16-pve .n37-roster{
 position:absolute!important;z-index:9;top:clamp(12px,2.2vh,25px);left:clamp(12px,1.8vw,28px);
 width:clamp(285px,26vw,425px)!important;max-width:42vw;max-height:calc(100% - 205px)!important;
 overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;
 flex:none!important;gap:8px;padding:0!important;margin:0;
 background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0;
 scrollbar-width:thin;scrollbar-color:#f2ce8455 transparent;
}
#n16-pve .n3748-roster-header{margin:0 0 4px;align-items:center;gap:8px}
#n16-pve .n37-roster h3{margin:0;font:800 clamp(17px,1.5vw,24px) Georgia,serif;
 color:#ffe0a0;letter-spacing:.02em;text-shadow:0 2px 3px #000,0 0 13px #000;}
#n16-pve .n3748-roster-header button{
 background:transparent!important;border:0!important;box-shadow:none!important;
 color:#ffe2a0;font-size:11px;padding:2px 4px;text-shadow:0 2px 3px #000;
}
#n16-pve .n37-roster .n37-fighter.n37-order-item,
#n16-pve .n37-fighter{
 position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:100px;
 padding:1px 2px 1px 17px!important;margin:0;flex:0 0 auto;outline:0;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;color:#fffaf0;text-align:left;
}
#n16-pve .n37-fighter.is-selected,#n16-pve .n37-fighter.is-active{
 background:transparent!important;border:0!important;box-shadow:none!important;
}
#n16-pve .n37-fighter.is-active .n37-fighter-text strong{color:#ffe193;text-shadow:0 0 8px #eec15b}
#n16-pve .n371-roster-number{left:0;top:6px;color:#ffe09e;font-size:13px;text-shadow:0 1px 3px #000}
#n16-pve .n37-portrait{
 display:flex;align-items:flex-end;justify-content:center;
 flex:0 0 clamp(63px,5.6vw,86px);width:clamp(63px,5.6vw,86px);
 height:clamp(75px,7vw,110px);background:transparent!important;
 border:0!important;border-radius:0!important;overflow:visible!important;
 box-shadow:none!important;filter:drop-shadow(0 3px 4px #000a);
}
#n16-pve .n37-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;}
#n16-pve .n37-fighter-text{gap:5px;font-size:12px;min-width:0;flex:1;text-shadow:0 1px 3px #000}
#n16-pve .n37-fighter-text strong{
 font-size:clamp(12px,1.08vw,16px)!important;color:#fff9e9;
 text-shadow:0 1px 4px #000,0 0 9px #000;
}
/* Barras saturadas y sin panel. La pista tenue solo indica la fraccion vacia. */
#n16-pve .n371-resource{height:18px;gap:5px;font-weight:700;text-shadow:0 1px 3px #000}
#n16-pve .n371-resource-symbol{width:24px;flex-basis:24px;font-size:11px}
#n16-pve .n371-resource-track{
 height:15px;border:0!important;background:#050a1099;border-radius:20px;
 box-shadow:0 2px 4px #0009,0 0 0 1px #ffffff1a;overflow:hidden;
}
#n16-pve .n371-resource-fill{background:linear-gradient(90deg,#ea1d3f,#ff4568)!important;box-shadow:0 0 10px #fc2549a3}
#n16-pve .n371-resource-en .n371-resource-fill{background:linear-gradient(90deg,#0074f6,#39c6ff)!important;box-shadow:0 0 10px #008bffad}
#n16-pve .n371-resource-mv .n371-resource-fill{background:linear-gradient(90deg,#f2a900,#ffdf3f)!important;box-shadow:0 0 10px #ffc400aa}
#n16-pve .n371-resource-shield .n371-resource-fill{background:linear-gradient(90deg,#a73aff,#e49dff)!important;box-shadow:0 0 10px #be68ffbb}
#n16-pve .n371-resource-value{font-size:11px;color:#fff8ed;text-shadow:0 1px 3px #000}
/* Historial y chat: texto flotante, controles discretos sin cubrir el bosque. */
#n16-pve .n37-history{
 position:absolute!important;z-index:10;left:clamp(12px,1.8vw,28px);bottom:0;
 width:clamp(255px,23vw,350px);height:clamp(120px,22vh,230px);
 flex:none!important;margin:0;padding:0;min-height:0!important;max-height:min(38vh,340px)!important;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;resize:none;overflow:hidden;
}
#n16-pve .n37-history.is-large{height:min(43vh,350px);max-height:43vh!important}
#n16-pve .n37-history.is-collapsed{height:37px;max-height:37px!important}
#n16-pve .n37-history-top{padding:3px 0;font-size:11px;font-weight:850;color:#ffe0a4;
 text-shadow:0 1px 3px #000,0 0 7px #000}
#n16-pve .n37-history-top button{
 background:transparent!important;border:0!important;color:#ffdf99;
 box-shadow:none!important;padding:3px 5px;font-size:10px;text-shadow:0 1px 2px #000;
}
#n16-pve .n37-history-messages{padding:4px 0;font-size:11px;color:#fff3dc;
 text-shadow:0 1px 3px #000,0 0 6px #000;scrollbar-width:thin}
#n16-pve .n37-history-messages>div{border-top:0!important;padding:3px 1px}
#n16-pve .n3747-battle-chat{margin-top:3px}
#n16-pve .n3747-battle-chat input{
 background:transparent!important;border:0!important;border-bottom:1px solid #e4c99073!important;
 border-radius:0!important;color:#fff!important;text-shadow:0 1px 3px #000;
}
/* Barra inferior: los tres conjuntos flotan, sin rectangulo envolvente. */
#n16-pve .n371-footer{
 position:absolute!important;z-index:12;bottom:0;left:0;right:0;
 display:grid;grid-template-columns:clamp(210px,21vw,340px) minmax(0,1fr) clamp(145px,15vw,230px);
 align-items:center;gap:clamp(7px,1vw,15px);height:136px;min-height:0!important;
 width:100%;padding:4px clamp(12px,1.7vw,28px) 9px;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;pointer-events:none;
}
#n16-pve .n371-footer>*{pointer-events:auto}
#n16-pve .n371-self{gap:12px;min-width:0;align-items:center}
#n16-pve .n371-self .n371-self-portrait{
 display:flex;align-items:flex-end;justify-content:center;
 flex:0 0 clamp(65px,6vw,91px);width:clamp(65px,6vw,91px);
 height:clamp(90px,9vw,124px);border:0!important;box-shadow:none!important;
 background:transparent!important;filter:drop-shadow(0 4px 5px #000);
}
#n16-pve .n371-self-resources{display:flex;flex-direction:column;gap:5px;min-width:0}
#n16-pve .n371-self-resources>strong{font-size:clamp(13px,1.25vw,18px)!important;
 color:#fff3d9;text-shadow:0 2px 4px #000}
#n16-pve .n371-self-resources .n371-resource{height:19px}
#n16-pve .n371-self-resources .n371-resource-track{height:15px}
#n16-pve .n371-footer-center{min-width:0;gap:3px}
#n16-pve .n37-art-bar{
 display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
 gap:clamp(3px,.36vw,7px)!important;width:min(100%,820px)!important;
 max-width:820px!important;margin:0 auto;
}
#n16-pve .n37-art-slot{
 position:relative;min-width:0;height:clamp(92px,13vh,122px)!important;
 display:flex;align-items:center;justify-content:center;gap:2px;
 padding:3px 2px!important;background:transparent!important;border:0!important;
 border-radius:5px!important;box-shadow:none!important;overflow:visible!important;
}
#n16-pve .n37-art-slot img{
 width:100%;height:clamp(64px,9vh,86px)!important;
 max-width:90px!important;object-fit:contain;filter:drop-shadow(0 3px 3px #0009);
}
#n16-pve .n37-art-slot.is-selected{
 border:0!important;outline:2px solid #ffdf74!important;outline-offset:-1px;
 background:transparent!important;box-shadow:0 0 15px #ffcd5088!important;
}
#n16-pve .n37-art-slot.is-cooling{background:transparent!important;border:0!important;opacity:.75}
#n16-pve .n37-art-cost{font-size:clamp(10px,.85vw,13px);font-weight:800;
 color:#ffe2a1;text-shadow:0 2px 4px #000}
#n16-pve .n37-art-number{font-size:12px;left:4px;top:1px;text-shadow:0 1px 4px #000}
#n16-pve .n37-empty-art{opacity:.35}
#n16-pve .n371-footer-actions{gap:6px;min-width:0;display:flex;align-items:stretch}
#n16-pve .n371-footer-actions button:first-child,
#n16-pve .n371-footer-actions button:last-child{
 min-height:28px;border:0!important;background:transparent!important;
 box-shadow:none!important;font-size:clamp(11px,1vw,15px);font-weight:900;
 color:#ffe4a6;text-shadow:0 2px 3px #000,0 0 11px #000;
}
#n16-pve .n371-footer-actions button:first-child{min-height:46px}
#n16-pve .n371-footer-actions button:last-child{font-size:11px;color:#f3e5d6}
#n16-pve button:focus-visible{outline:2px solid #ffe7a4!important;outline-offset:2px}
#n16-pve .n371-prepare-help{color:#fff2d6;font-size:13px;text-shadow:0 1px 4px #000,0 0 8px #000}
/* La UI de resultados y la ficha de detalles siguen con fondos por legibilidad.
 * Se aplica flotante solo a la pantalla tactica, no a modales ni resultados. */
@media (max-width:980px){
 #n16-pve .n371-layout{bottom:118px}
 #n16-pve .n37-roster{width:min(35vw,350px)!important;max-width:39vw}
 #n16-pve .n37-roster .n37-fighter.n37-order-item{min-height:78px;padding-left:13px!important}
 #n16-pve .n37-portrait{flex-basis:52px;width:52px;height:64px}
 #n16-pve .n37-history{width:clamp(195px,25vw,250px)}
 #n16-pve .n371-footer{height:118px;grid-template-columns:minmax(155px,23vw) minmax(0,1fr) minmax(120px,15vw)}
 #n16-pve .n371-self .n371-self-portrait{flex-basis:54px;width:54px;height:70px}
 #n16-pve .n37-art-slot{height:94px!important}
 #n16-pve .n37-art-slot img{height:60px!important}
}
@media (max-width:700px){
 #n16-pve:not([hidden]){overflow:auto!important}
 #n16-pve .n371-layout{bottom:132px}
 #n16-pve .n37-heading{right:8px;top:7px;max-width:45vw}
 #n16-pve .n37-heading strong{font-size:18px}
 #n16-pve .n37-roster{left:6px;top:6px;width:45vw!important;max-width:45vw;max-height:35vh!important}
 #n16-pve .n37-roster .n37-fighter.n37-order-item{min-height:48px;gap:3px}
 #n16-pve .n37-portrait{flex-basis:33px;width:33px;height:44px}
 #n16-pve .n37-fighter-text strong{font-size:9px!important}
 #n16-pve .n37-history{left:7px;bottom:0;width:45vw;height:100px}
 #n16-pve .n371-footer{grid-template-columns:1fr auto;height:132px}
 #n16-pve .n371-self{grid-column:1/-1;max-height:45px}
 #n16-pve .n371-self .n371-self-portrait{width:38px;height:40px;flex-basis:38px}
 #n16-pve .n371-self-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #n16-pve .n371-self-resources>strong{grid-column:1/-1}
 #n16-pve .n37-art-slot{height:68px!important}
 #n16-pve .n37-art-slot img{height:40px!important}
}
@media(prefers-reduced-motion:reduce){#n16-pve .n371-resource-fill{transition:none}}


/* V2 nitidez: soporte carbon translúcido solo donde la lectura lo necesita. */
#n16-pve .n37-heading{
 background:linear-gradient(180deg,rgba(5,8,12,.72),rgba(5,8,12,.46))!important;
 border:1px solid rgba(242,205,124,.34)!important;
 border-radius:16px!important;padding:10px 14px!important;
 box-shadow:0 8px 22px #00000045,inset 0 0 0 1px #ffffff08!important;
 -webkit-backdrop-filter:blur(4px) saturate(112%);backdrop-filter:blur(4px) saturate(112%);
}
#n16-pve .n37-roster{
 background:linear-gradient(180deg,rgba(5,8,12,.52),rgba(5,8,12,.36))!important;
 border:1px solid rgba(242,205,124,.28)!important;border-radius:18px!important;
 padding:10px 10px 12px!important;
 box-shadow:0 10px 26px #00000040,inset 0 0 0 1px #ffffff06!important;
 -webkit-backdrop-filter:blur(4px) saturate(110%);backdrop-filter:blur(4px) saturate(110%);
}
#n16-pve .n37-roster .n37-fighter.n37-order-item,
#n16-pve .n37-fighter{
 min-height:102px;
 padding:8px 10px 8px 22px!important;
 background:linear-gradient(180deg,rgba(2,4,7,.58),rgba(2,4,7,.38))!important;
 border:1px solid rgba(244,210,133,.18)!important;border-radius:14px!important;
 box-shadow:0 5px 16px #0000002f,inset 0 0 0 1px #ffffff05!important;
}
#n16-pve .n37-fighter.is-selected,#n16-pve .n37-fighter.is-active{
 background:linear-gradient(180deg,rgba(12,17,25,.72),rgba(8,12,18,.54))!important;
 border-color:rgba(255,221,143,.34)!important;box-shadow:0 0 0 1px #ffd97824,0 7px 18px #00000038!important;
}
#n16-pve .n37-history{
 background:linear-gradient(180deg,rgba(5,8,12,.72),rgba(5,8,12,.48))!important;
 border:1px solid rgba(242,205,124,.28)!important;border-radius:16px!important;
 padding:8px 10px 10px!important;box-shadow:0 10px 26px #00000042,inset 0 0 0 1px #ffffff06!important;
 -webkit-backdrop-filter:blur(4px) saturate(110%);backdrop-filter:blur(4px) saturate(110%);
}
#n16-pve .n37-history-top{padding:0 0 6px}
#n16-pve .n37-history-messages{padding:4px 3px 6px}
#n16-pve .n37-history-messages>div{border-top:1px solid #ffffff10!important;padding:4px 0}
#n16-pve .n3747-battle-chat{margin-top:6px;padding-top:6px;border-top:1px solid #ffffff14}
#n16-pve .n3747-battle-chat input{
 background:rgba(1,4,8,.58)!important;border:1px solid rgba(228,201,144,.34)!important;
 border-radius:9px!important;padding:7px 9px!important;box-shadow:inset 0 1px 0 #ffffff08;
}
#n16-pve .n3747-battle-chat input::placeholder{color:#f0dfbecc}
#n16-pve .n371-self{
 padding:8px 10px!important;background:linear-gradient(180deg,rgba(5,8,12,.62),rgba(5,8,12,.40))!important;
 border:1px solid rgba(242,205,124,.24)!important;border-radius:16px!important;
 box-shadow:0 10px 24px #00000035,inset 0 0 0 1px #ffffff06!important;
 -webkit-backdrop-filter:blur(4px) saturate(110%);backdrop-filter:blur(4px) saturate(110%);
}
#n16-pve .n371-footer-actions{
 padding:8px 12px!important;background:linear-gradient(180deg,rgba(5,8,12,.64),rgba(5,8,12,.42))!important;
 border:1px solid rgba(242,205,124,.25)!important;border-radius:16px!important;
 box-shadow:0 10px 22px #00000035,inset 0 0 0 1px #ffffff06!important;
 -webkit-backdrop-filter:blur(4px) saturate(110%);backdrop-filter:blur(4px) saturate(110%);
}
#n16-pve .n37-art-bar{filter:drop-shadow(0 5px 9px #00000066)}
@media (max-width:980px){
 #n16-pve .n37-roster .n37-fighter.n37-order-item,
 #n16-pve .n37-fighter{min-height:84px;padding-left:16px!important}
}
@media (max-width:700px){
 #n16-pve .n37-heading{padding:8px 10px!important;border-radius:12px!important}
 #n16-pve .n37-roster{padding:7px!important;border-radius:14px!important}
 #n16-pve .n37-history{padding:6px 7px 7px!important;border-radius:14px!important}
 #n16-pve .n371-self,#n16-pve .n371-footer-actions{padding:6px 8px!important;border-radius:13px!important}
}

#n16-pve [data-actor]:focus,#n16-pve [data-actor]:focus-visible{outline:none!important}


/* LAB V6 — Retratos PARTICIPANTES grandes y centrados.
   Fix real de especificidad: el CSS base .n37-order-item .n37-portrait (34px)
   tenía prioridad sobre nuestro .n37-portrait y dejaba todos los rostros enanos. */
#n16-pve .n37-roster .n37-fighter.n37-order-item{
 min-height:124px!important;
 gap:10px!important;
 padding:7px 9px 7px 21px!important;
}
#n16-pve .n37-roster .n37-fighter.n37-order-item .n37-portrait{
 display:flex!important;align-items:flex-end!important;justify-content:center!important;
 flex:0 0 clamp(74px,6vw,96px)!important;
 width:clamp(74px,6vw,96px)!important;
 height:clamp(94px,7.4vw,114px)!important;
 min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
 background:transparent!important;border:0!important;border-radius:0!important;
 overflow:visible!important;
}
#n16-pve .n37-roster .n37-fighter.n37-order-item .n37-portrait img{
 display:block!important;width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center bottom!important;
}
/* No cambiar los retratos de la ficha inferior, ni los sprites del tablero. */
/* El único contorno sobre los combatientes es EXACTAMENTE su hitbox interactiva. */
#n16-pve .n37-actor-hitbox{
 cursor:pointer;vector-effect:non-scaling-stroke;
 transition:stroke 90ms ease,stroke-opacity 90ms ease;
}
#n16-pve .n37-actor-hitbox:hover,
#n16-pve [data-actor]:focus-visible .n37-actor-hitbox{
 stroke:#fff8c8!important;stroke-opacity:1!important;stroke-width:2.4!important;
}
@media(max-width:980px){
 #n16-pve .n37-roster .n37-fighter.n37-order-item{min-height:104px!important;gap:6px!important}
 #n16-pve .n37-roster .n37-fighter.n37-order-item .n37-portrait{
  flex-basis:clamp(55px,7vw,76px)!important;
  width:clamp(55px,7vw,76px)!important;height:clamp(72px,9vw,95px)!important;
 }
}
@media(max-width:700px){
 #n16-pve .n37-roster .n37-fighter.n37-order-item{min-height:75px!important;padding-left:13px!important}
 #n16-pve .n37-roster .n37-fighter.n37-order-item .n37-portrait{
  flex-basis:40px!important;width:40px!important;height:58px!important;
 }
}

/* LAB V7 — El tamaño del hitbox V6 está APROBADO.
 * Ocultar exclusivamente el contorno y su tintura, también en hover/focus.
 * Stroke conserva 1.5 unidades del V6; pointer-events=all mantiene clics
 * incluso con color totalmente transparente. El rombo y SVG JS NO cambian.
 */
#n16-pve .n37-actor-hitbox,
#n16-pve .n37-actor-hitbox:hover,
#n16-pve [data-actor]:focus-visible .n37-actor-hitbox {
 fill:transparent!important;
 fill-opacity:0!important;
 stroke:transparent!important;
 stroke-opacity:0!important;
 stroke-width:1.5!important;
 pointer-events:all!important;
}