/* css/hud.css — HUD en partida: barras, aliados, avisos y controles táctiles (joystick y botones). */
/* ---------- HUD ---------- */
#hud{position:fixed; inset:0; z-index:10; pointer-events:none;}
/* Todo el HUD superior (pausa, Arena/Nivel/Bajas, vida, energía, aliados) queda ahora
   anclado arriba a la izquierda, apilado en una sola columna angosta. Antes el botón de
   pausa y el contador de Arena/Nivel/Bajas estaban centrados horizontalmente, justo en la
   misma columna donde la cámara mantiene siempre al héroe -> quedaban tapándolo. Al moverlos
   a la izquierda, el centro y la derecha de la pantalla quedan totalmente libres. */
#hud .top{
  position:absolute; top:calc(106px + env(safe-area-inset-top,0px)); left:calc(10px + env(safe-area-inset-left,0px));
  right:auto; width:150px;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; pointer-events:none;
}
.top-pill{
  background:rgba(10,6,4,0.72); border:1px solid var(--panel-b); border-radius:12px;
  padding:6px 10px; font-size:0.68rem; letter-spacing:0.02em; color:var(--ember3);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; box-sizing:border-box;
}
.top-pill span b{color:var(--text);}
#wave-timer-wrap{width:130px; height:6px; background:var(--panel-b); border-radius:4px; overflow:hidden; margin-top:2px;}
#wave-timer-bar{height:100%; width:0%; background:linear-gradient(90deg, var(--ember1), var(--ember3));}
/* Regla creciente de la arena (ver js/arenas/arena-rules.js): chip chico bajo el nivel. */
#arena-rule-chip{font-size:0.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
#arena-rule-chip b{color:#ff9a5a;}

#player-status{
  position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); left:calc(10px + env(safe-area-inset-left,0px));
  background:rgba(10,6,4,0.72); border:1px solid var(--panel-b); border-radius:12px;
  padding:8px 10px; width:150px; pointer-events:none;
}
.bar-row{display:flex; align-items:center; gap:6px; margin-bottom:5px;}
.status-badge{
  width:15px; height:15px; border-radius:4px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:0.62rem; line-height:1;
}
.status-badge.atk{background:rgba(255,74,61,0.25); border:1px solid #ff8a70; box-shadow:0 0 5px rgba(255,74,61,0.6);}
.status-badge.shield{background:rgba(95,176,255,0.25); border:1px solid #8fd0ff; box-shadow:0 0 5px rgba(95,176,255,0.6);}
.revive-btn{
  display:none; pointer-events:auto; flex:none; margin-left:2px;
  position:relative; overflow:hidden;
  font-family:inherit; font-size:0.58rem; font-weight:700; color:#eafff0; letter-spacing:0.01em;
  background:linear-gradient(180deg,#2f7a48,#173d24); border:1px solid #6fdc8c; border-radius:6px;
  padding:4px 6px; cursor:pointer; white-space:nowrap;
}
.revive-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:rgba(255,255,255,0.35); pointer-events:none; transition:width 0.05s linear;
}
.revive-label{ position:relative; z-index:1; }
.revive-btn.holding{ box-shadow:0 0 10px rgba(255,255,255,0.7); }
.ally-row.down .revive-btn{display:block;}
.ally-row.down .ally-hp-track, .ally-row.down .ally-name{opacity:0.7;}
.revive-btn:disabled{opacity:0.45; filter:grayscale(0.7); cursor:default;}
.revive-btn.ready{box-shadow:0 0 9px rgba(111,220,140,0.9); animation:reviveGlow 1.1s ease-in-out infinite;}
@keyframes reviveGlow{0%,100%{transform:scale(1);} 50%{transform:scale(1.07);}}
.bar-label{font-size:0.62rem; width:16px; color:var(--text-dim);}
.bar-track{flex:1; height:9px; border-radius:5px; overflow:hidden; background:var(--hp-dim); position:relative;}
.bar-track.energy{background:var(--energy-dim);}
.bar-fill{position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg,#8c1c1c,var(--hp));}
.bar-fill.shield-seg{left:0; background:linear-gradient(90deg,#2f6fa8,#8fd0ff);}
.bar-fill.energy{background:linear-gradient(90deg,#0f5a8c,var(--energy));}
#plevel{font-size:0.68rem; color:var(--text-dim); text-align:right;}
#musashi-hud{ text-align:right; font-size:0.6rem; margin-top:2px; line-height:1.35; }
#musashi-conc-row{ color:#bfe4ff; }
#musashi-conc-row.perfect{ color:#ff5c4a; font-weight:700; text-shadow:0 0 6px rgba(255,92,74,0.7); }
#musashi-victories-row{ color:#ffce6b; }
#sylva-hud{ text-align:right; font-size:0.6rem; margin-top:2px; line-height:1.35; }
#sylva-track-row{ color:#c8f0a8; }
#sylva-track-row.cornered{ color:#ffb84a; font-weight:700; text-shadow:0 0 6px rgba(255,184,74,0.7); }
#sylva-momentum-row{ color:#8fd45a; }
#sylva-momentum-row.locked{ color:#5ad0c8; font-weight:700; text-shadow:0 0 6px rgba(90,208,200,0.7); }
#nigromante-hud{ text-align:right; font-size:0.6rem; margin-top:2px; line-height:1.35; }
#nigro-skeleton-row{ color:#8ef0c8; }
#nigro-golem-row{ color:#a8c98a; }
#nigro-golem-row.active{ color:#ffd76b; font-weight:700; }
#nigro-demon-row{ color:#50e68c; font-weight:700; text-shadow:0 0 6px rgba(80,230,140,0.7); }

#ult-meter{
  position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); right:calc(10px + env(safe-area-inset-right,0px));
  background:rgba(10,6,4,0.72); border:1px solid var(--panel-b); border-radius:12px;
  padding:7px 10px; width:88px; text-align:center; pointer-events:none;
}
#ult-ring{width:40px; height:40px; margin:0 auto 3px; border-radius:50%; background:conic-gradient(var(--ult) 0deg, #2a1c10 0deg); display:flex; align-items:center; justify-content:center;}
#ult-ring-inner{width:32px;height:32px;border-radius:50%;background:#150c08;display:flex;align-items:center;justify-content:center;font-size:0.9rem;}
#ult-label{font-size:0.6rem; color:var(--text-dim);}

/* ---------- Party panel (aliados) ---------- */
/* La franja de botones de habilidad ocupa el 56% inferior de la pantalla a la derecha
   (#skillzone). Con 3-4 aliados, el panel de arriba podía llegar a invadir esa zona en
   pantallas de celular en horizontal -normales, no solo las bajitas- así que además de
   angostar cada fila, le pongo un tope de altura real calculado contra esa franja, con
   scroll propio como red de seguridad si aun así no entra completo. */
#party{
  position:absolute; top:calc(210px + env(safe-area-inset-top,0px)); left:calc(10px + env(safe-area-inset-left,0px)); right:auto;
  width:150px; display:flex; flex-direction:column; gap:3px; pointer-events:none;
  max-height:140px; overflow:hidden;
}
.ally-row{
  background:rgba(10,6,4,0.70); border:1px solid var(--panel-b); border-radius:9px;
  padding:3px 5px; display:flex; align-items:center; gap:5px;
}
.ally-row.down{background:rgba(30,10,8,0.72); border-color:#5a2a24;}
.ally-badge{
  width:16px; height:16px; border-radius:4px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:0.6rem;
  border:1.5px solid currentColor;
}
.ally-meta{flex:1; min-width:0;}
.ally-name{font-size:0.52rem; color:var(--text-dim); line-height:1; margin-bottom:1px;}
.ally-hp-track{height:5px; border-radius:3px; background:var(--hp-dim); overflow:hidden; position:relative;}
.ally-hp-fill{position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg,#8c1c1c,var(--hp));}
.ally-hp-fill.shield-seg{background:linear-gradient(90deg,#2f6fa8,#8fd0ff);}

#player-status{padding:9px 10px 8px;}
.bar-track{height:12px;}
.bar-label{font-size:0.7rem; width:14px;}

/* buff / dot notices */
#floaters{position:absolute; inset:0; pointer-events:none;}
.float-text{position:absolute; font-size:0.85rem; font-weight:700; color:var(--ember3); text-shadow:0 0 4px #000; animation:floatUp 0.9s ease-out forwards;}
.float-text.heal{color:#6fdc8c;}
.float-text.crit{color:#fff; font-size:1.05rem;}
@keyframes floatUp{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-46px);} }

/* arriba de la cabeza del guardián, no encima (--cam-hero-y: dónde quedan sus pies, canvas.js) */
#center-banner{
  position:absolute; top:calc(var(--cam-hero-y, 58vh) - 60px - 9vh); left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-retro); font-size:2rem; line-height:1; color:var(--ember3); max-width:min(640px, 80vw);
  text-shadow:2px 2px 0 #1a0a04, -1px -1px 0 #1a0a04, 1px -1px 0 #1a0a04, -1px 1px 0 #1a0a04, 0 0 16px rgba(255,122,46,0.7);
  opacity:0; pointer-events:none; text-align:center; letter-spacing:0.05em;
}
#center-banner.show{animation:bannerPop 2.1s ease-out forwards;}
#center-banner.low{top:calc(var(--cam-hero-y, 58vh) + 30px + 3vh);} /* con otro cartel arriba: debajo de los pies */
#center-banner.downed{top:66%;} /* con el cartel de "CAÍSTE" (cooperativo) en pantalla, va debajo */
@keyframes bannerPop{ 0%{opacity:0; transform:translate(-50%,-50%) scale(0.85);} 12%{opacity:1; transform:translate(-50%,-50%) scale(1);} 78%{opacity:1;} 100%{opacity:0;} }

/* ---------- Jefes (js/ui/boss-hud.js) ---------- */
#boss-hud{
  position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); left:calc(50% + 46px); transform:translateX(-50%);
  width:min(44vw, 380px); pointer-events:none; text-align:center;
}
#boss-name-row{display:flex; justify-content:center; align-items:baseline; gap:8px; margin-bottom:3px;}
#boss-name{font-size:0.95rem; font-weight:700; color:#ffcf5c; letter-spacing:0.06em; text-shadow:0 0 8px rgba(255,120,40,0.8), 0 2px 2px #000;}
#boss-epithet{font-size:0.62rem; color:#d8b89a; font-style:italic; text-shadow:0 1px 2px #000;}
#boss-bar{position:relative; height:14px; border-radius:4px; overflow:hidden;
  background:#1a0806; border:2px solid #b8742a; box-shadow:0 0 12px rgba(255,120,40,0.45), inset 0 0 6px #000;}
#boss-chip{position:absolute; left:0; top:0; bottom:0; width:100%; background:#fff3d0; opacity:0.85;}
#boss-fill{position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(180deg,#ff7a4a,#c62828 60%,#8a1010);}
#boss-ticks i{position:absolute; top:-1px; bottom:-1px; width:2px; margin-left:-1px; background:rgba(255,230,160,0.95); box-shadow:0 0 4px #000;}
#boss-hud.armored #boss-bar{border-color:#8fd0ff; box-shadow:0 0 14px rgba(143,208,255,0.8), inset 0 0 6px #000;}
#boss-hud.armored #boss-fill{background:linear-gradient(180deg,#bfe8ff,#5fa8e0 60%,#2e6aa0);}
#boss-hud.vuln #boss-bar{border-color:#ffe36a; animation:bossVuln 0.35s ease-in-out infinite alternate;}
@keyframes bossVuln{ from{box-shadow:0 0 8px rgba(255,227,106,0.6);} to{box-shadow:0 0 22px rgba(255,227,106,1);} }
#boss-status{font-size:0.58rem; color:#e8d0b0; margin-top:2px; min-height:0.7rem; text-shadow:0 1px 2px #000;}
#boss-status .bs-armor{color:#8fd0ff; font-weight:700;} #boss-status .bs-vuln{color:#ffe36a; font-weight:700;}
#boss-status .bs-regen{color:#6fdc8c; font-weight:700;} #boss-status .bs-rage{color:#ff6a4a; font-weight:700;}
#boss-hint{margin-top:3px; font-size:0.7rem; color:#fff; opacity:0; text-shadow:0 0 6px #000, 0 1px 2px #000;
  background:rgba(60,10,4,0.55); border-radius:8px; padding:2px 8px; display:inline-block;}
#boss-hint b{color:#ffcf5c;}
#boss-hint.show{animation:bossHint 2.8s ease-out forwards;}
@keyframes bossHint{ 0%{opacity:0; transform:scale(1.15);} 8%{opacity:1; transform:scale(1);} 80%{opacity:1;} 100%{opacity:0;} }
#boss-hud.sub{width:min(34vw, 290px);}
#boss-hud.sub #boss-name{font-size:0.8rem; color:#ffb070;}
#boss-hud.sub #boss-bar{height:10px; border-color:#a0582a;}
#boss-hud.sub #boss-fill{background:linear-gradient(180deg,#ffb070,#e06a2a 60%,#a0401a);}
/* Guía de aparición del jefe: 3 consejos compactos bajo la barra, translúcida y sin bloquear toques.
   Aparece después del cartel de entrada (no se pisan) y se desvanece sola. */
#boss-intro{
  position:absolute; top:calc(84px + env(safe-area-inset-top,0px)); left:calc(50% + 46px); transform:translateX(-50%);
  width:min(46vw, 380px); pointer-events:none; text-align:left;
  background:rgba(24,8,4,0.58); border:1px solid rgba(184,116,42,0.7); border-radius:10px;
  padding:5px 10px 6px; animation:bossIntroIn 0.45s ease-out;
}
#boss-intro.fade{opacity:0; transition:opacity 0.6s;}
@keyframes bossIntroIn{ from{opacity:0; transform:translate(-50%,-10px);} to{opacity:1; transform:translate(-50%,0);} }
#boss-intro .bi-name{font-size:0.58rem; font-weight:700; letter-spacing:1px; color:#ffcf5c; text-align:center; margin-bottom:2px;}
#boss-intro .bi-epithet{display:none;}
#boss-intro .bi-tips{margin:0; padding-left:14px; font-size:0.6rem; line-height:1.3; color:#f2e3d3; text-shadow:0 1px 2px #000;}
#boss-intro .bi-tips li::marker{color:#ff9a5a;}

/* ---------- Controls ---------- */
#controls{position:fixed; inset:0; z-index:15; pointer-events:none;}
.zone{position:absolute; pointer-events:auto;}
#joyzone{left:0; bottom:0; width:46%; height:46%;}
#joy-base{
  position:absolute; width:92px; height:92px; border-radius:50%;
  background:rgba(40,20,10,0.35); border:2px solid rgba(255,122,46,0.35);
  left:calc(24px + env(safe-area-inset-left,0px)); bottom:calc(10px + env(safe-area-inset-bottom,0px));
}
#joy-knob{
  position:absolute; width:42px; height:42px; border-radius:50%;
  background:rgba(255,122,46,0.55); border:2px solid rgba(255,207,92,0.8);
  /* anclado al borde de ARRIBA de la base (10px + 92 - 42 = 60px): el translate(25px,25px) de input.js
     lo baja al centro. Anclado abajo, el +25 lo corría hacia afuera y quedaba medio cortado por el borde. */
  left:calc(24px + env(safe-area-inset-left,0px)); bottom:calc(60px + env(safe-area-inset-bottom,0px));
  transform:translate(25px,25px);
}

#skillzone{right:0; bottom:0; width:54%; height:56%;}
.ability-btn{
  position:absolute; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; color:var(--text); font-size:0.62rem; font-weight:700;
  background:radial-gradient(circle at 35% 30%, #3a1c10, #170b06 75%);
  border:2px solid var(--ember1); box-shadow:0 0 10px rgba(255,122,46,0.25);
  user-select:none;
}
.ability-btn .ico{font-size:1.25rem; line-height:1;}
.ability-btn .ico .ico-img{ display:block; width:1.55em; height:1.55em; margin:0 auto; image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:none; }
.ability-btn.basic{width:72px; height:72px; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); border-color:#e0824a;}
.ability-btn.s1{width:54px; height:54px; right:calc(96px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px));}
.ability-btn.s2{width:54px; height:54px; right:calc(138px + env(safe-area-inset-right,0px)); bottom:calc(70px + env(safe-area-inset-bottom,0px));}
.ability-btn.s3{width:54px; height:54px; right:calc(96px + env(safe-area-inset-right,0px)); bottom:calc(124px + env(safe-area-inset-bottom,0px));}
.ability-btn.ult{
  width:60px; height:60px; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(132px + env(safe-area-inset-bottom,0px));
  border-color:#5a3a10; background:radial-gradient(circle at 35% 30%, #2a1c0a, #120c05 75%); opacity:0.55;
}
.ability-btn.ult.ready{opacity:1; border-color:var(--ult); box-shadow:0 0 18px rgba(255,179,0,0.6); animation:ultPulse 1.4s ease-in-out infinite;}
.ability-btn.ult.locked{opacity:0.3;}
@keyframes ultPulse{ 0%,100%{box-shadow:0 0 10px rgba(255,179,0,0.4);} 50%{box-shadow:0 0 22px rgba(255,179,0,0.85);} }
/* Botón dedicado de revivir: antes estaba metido en el amontonamiento de botones de
   habilidad (5 círculos peleando espacio) y quedaba en un lugar raro/difícil de acertar.
   Ahora va arriba al centro, solo, bien visible, y aparece únicamente cuando hay un
   aliado caído al alcance -- nadie más ocupa esa zona de la pantalla. */
.ability-btn.revive{
  position:fixed; left:50%; transform:translateX(-50%);
  top:calc(84px + env(safe-area-inset-top,0px)); right:auto; bottom:auto;
  width:64px; height:64px; z-index:17;
  border-color:#2f6b40; background:radial-gradient(circle at 35% 30%, #142a1c, #0a140d 75%); opacity:0; pointer-events:none;
}
.ability-btn.revive.ready{
  opacity:1; pointer-events:auto; border-color:#6fdc8c; box-shadow:0 0 16px rgba(111,220,140,0.6);
  animation:reviveBtnPulse 1.3s ease-in-out infinite;
}
.ability-btn.revive.holding{ animation:none; box-shadow:0 0 20px rgba(111,220,140,0.9); }
/* El mismo botón como ACCIÓN CONTEXTUAL (cerrar fisura, encender brasero...): color del tipo. */
.ability-btn.revive.ctx.ready{ border-color:var(--ctx-col,#ffcf5c); background:radial-gradient(circle at 35% 30%, #2a2214, #120d08 75%);
  box-shadow:0 0 16px var(--ctx-col,#ffcf5c); animation:none; }
.ability-btn.revive.ctx.holding{ box-shadow:0 0 24px var(--ctx-col,#ffcf5c); }
@keyframes reviveBtnPulse{ 0%,100%{box-shadow:0 0 10px rgba(111,220,140,0.4);} 50%{box-shadow:0 0 20px rgba(111,220,140,0.8);} }
/* Apuntado de habilidades (js/core/aim.js): aro + perilla sobre el botón mientras se arrastra. */
#aim-pad{position:fixed; width:120px; height:120px; border-radius:50%; pointer-events:none; z-index:16;
  border:2px dashed rgba(255,207,92,0.55); background:radial-gradient(circle, rgba(255,207,92,0.10), rgba(0,0,0,0) 70%);}
#aim-knob{position:absolute; left:44px; top:44px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,207,92,0.55); border:2px solid rgba(255,240,200,0.9);}
.ability-btn.aiming{transform:scale(1.08); box-shadow:0 0 18px rgba(255,207,92,0.7);}
.ability-btn.aim-cancel{border-color:#ff5a4a !important; box-shadow:0 0 16px rgba(255,90,70,0.8) !important;}
.ability-btn.deny{animation:denyShake 0.28s linear;}
@keyframes denyShake{ 0%,100%{margin-left:0;} 25%{margin-left:-4px;} 75%{margin-left:4px;} }
/* Estados de habilidad: LISTA (borde dorado encendido) / ENFRIAMIENTO (barrido radial que
   se vacía + segundos) / SIN RECURSO (azul apagado) / ACTIVA (verde, el efecto sigue en curso).
   Al volver a estar lista, un "pop" corto (ver updateSkillButtonStates). */
.cd-overlay{
  position:absolute; inset:0; border-radius:50%; display:none; pointer-events:none;
  background:conic-gradient(rgba(0,0,0,0.74) calc(var(--cdp,0)*360deg), rgba(0,0,0,0.12) 0);
  align-items:center; justify-content:center; font-size:0.95rem; font-weight:700; color:#fff;
  text-shadow:0 0 4px #000, 0 0 2px #000;
}
.ability-btn.cd .cd-overlay, .ability-btn.active .cd-overlay{display:flex;}
.ability-btn.active .cd-overlay{background:conic-gradient(rgba(0,40,20,0.55) calc(var(--cdp,0)*360deg), rgba(0,0,0,0.05) 0); color:#c8ffd8;}
.ability-btn.cd{border-color:#5a3a24; box-shadow:none;}
.ability-btn.cd .ico{opacity:0.5; filter:grayscale(0.6);}
.ability-btn.noen{border-color:#3a6aa8; box-shadow:0 0 6px rgba(60,120,220,0.35);}
.ability-btn.noen .ico{opacity:0.45; filter:grayscale(1);}
.ability-btn.noen::after{content:"✦"; position:absolute; top:3px; right:7px; color:#6fb8ff; font-size:0.62rem;}
.ability-btn.ready:not(.basic):not(.ult):not(.revive){border-color:#ffcf5c; box-shadow:0 0 12px rgba(255,190,80,0.5);}
.ability-btn.active{border-color:#7dffa0; box-shadow:0 0 14px rgba(125,255,160,0.7);}
.ability-btn.ready-pop{animation:readyPop 0.45s ease-out;}
@keyframes readyPop{ 0%{transform:scale(1.2); box-shadow:inset 0 0 0 40px rgba(255,250,225,0.75), 0 0 26px rgba(255,220,120,1);} 35%{box-shadow:inset 0 0 0 40px rgba(255,250,225,0), 0 0 20px rgba(255,220,120,0.8);} 100%{transform:scale(1);} }
/* ulti lista: destello blanco + pop más grande, después sigue el pulso de siempre */
.ability-btn.ult.ready.ready-pop{animation:ultReadyPop 0.6s ease-out, ultPulse 1.4s ease-in-out 0.6s infinite;}
@keyframes ultReadyPop{ 0%{transform:scale(1.35); box-shadow:inset 0 0 0 40px rgba(255,255,235,0.9), 0 0 34px rgba(255,200,60,1);} 40%{transform:scale(0.96); box-shadow:inset 0 0 0 40px rgba(255,255,235,0), 0 0 26px rgba(255,190,50,0.9);} 100%{transform:scale(1);} }
/* "Reducir movimiento" (pausa): sin pops ni pulsos de escala en los botones */
body.reduce-motion .ability-btn.ready-pop, body.reduce-motion .ability-btn.ult.ready.ready-pop{animation:none;}
body.reduce-motion .ability-btn.ult.ready{animation:none;}

#pause-btn{
  position:fixed; top:calc(10px + env(safe-area-inset-top,0px)); left:calc(170px + env(safe-area-inset-left,0px));
  z-index:16; pointer-events:auto; background:rgba(10,6,4,0.6); border:1px solid var(--panel-b);
  color:var(--text-dim); font-size:0.9rem; border-radius:8px; padding:4px 10px;
}
#mute-btn{
  position:fixed; top:calc(10px + env(safe-area-inset-top,0px)); left:calc(224px + env(safe-area-inset-left,0px));
  z-index:16; pointer-events:auto; background:rgba(10,6,4,0.6); border:1px solid var(--panel-b);
  color:var(--text-dim); font-size:0.9rem; border-radius:8px; padding:4px 10px;
}
/* Subir habilidades en partida (js/ui/hud.js): "+" delante de cada botón con puntos disponibles. */
.skill-plus{position:fixed; z-index:18; width:26px; height:26px; border-radius:50%; padding:0;
  font:700 1rem/1 inherit; color:#1a1004; background:#d9b25a; border:2px solid #fff3c4;
  box-shadow:0 0 6px rgba(0,0,0,0.6); pointer-events:auto; touch-action:none;}
.skill-plus.suggested{background:#ffcf2e; animation:skillPlusPulse 0.9s ease-in-out infinite;}
.skill-plus.hidden{display:none;}
@keyframes skillPlusPulse{ 0%,100%{box-shadow:0 0 4px rgba(255,207,46,0.5); transform:scale(1);} 50%{box-shadow:0 0 16px rgba(255,207,46,1); transform:scale(1.15);} }
.skill-lvl-pip{position:absolute; bottom:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  background:#1a1004; border:1px solid #d9b25a; color:#ffcf5c; font-size:0.58rem; line-height:14px; text-align:center; pointer-events:none;}
.skill-lvl-pip:empty{display:none;}
/* B1 cooperativo: cartel de "caíste" con el progreso real del revivir */
#downed-overlay{ position:absolute; left:50%; top:30%; transform:translateX(-50%); z-index:6; pointer-events:none;
  background:rgba(20,6,4,0.78); border:1px solid #c62828; border-radius:10px; padding:10px 18px; text-align:center; min-width:230px; }
#downed-overlay .dw-title{ font:bold 22px monospace; color:#ff6a4a; letter-spacing:3px; }
#downed-overlay .dw-sub{ font:13px monospace; color:#ffd9c8; margin:4px 0 8px; }
#downed-overlay .dw-bar{ height:7px; background:rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; }
#downed-overlay .dw-bar i{ display:block; height:100%; width:0; background:#8effb4; transition:width .1s linear; }
/* El Libertador / Ilkan (Tormenta, Coloso, Tres Pasos): indicadores propios (discretos, mismo estilo que Musashi/Sylva) */
#se-hud{ text-align:right; font-size:0.6rem; margin-top:2px; line-height:1.4; }
#se-hud .se-ready{ color:#ffd66b; text-shadow:0 0 4px #b8860b; }
#se-hud .se-on{ color:#9fe3c2; } #se-hud .se-off{ color:#9a8a80; } #se-hud .se-warn{ color:#ff6a5a; }
#se-hud .se-finale{ color:#4fe3cf; font-weight:bold; animation: sePulse .6s infinite alternate; }
#se-hud .se-bar{ display:inline-block; width:54px; height:5px; background:rgba(0,0,0,0.5); border:1px solid #000; vertical-align:middle; margin:0 3px; }
#se-hud .se-bar i{ display:block; height:100%; background:#9fc4ff; }
#se-hud .se-bar.fury i{ background:linear-gradient(90deg,#a8742a,#4fe3cf); }
#se-hud .se-bar.colossus i{ background:#c8a25a; }
#se-hud .se-fury{ color:#9ff3e6; }
#btn-ult.finale{ box-shadow:0 0 14px 4px rgba(79,227,207,0.85); animation: sePulse .5s infinite alternate; }
@keyframes sePulse{ from{ filter:brightness(1); } to{ filter:brightness(1.45); } }

/* ---------- Cartel grande de arena / subjefe / jefe (arenaTitleCard) ---------- */
#arena-title-card{
  position:absolute; top:13%; left:50%; transform:translateX(-50%); pointer-events:none; text-align:center;
  width:min(92vw, 720px); z-index:6; opacity:0; text-shadow:0 2px 0 #000, 0 0 18px rgba(0,0,0,0.9);
}
#arena-title-card.show{animation:atcIn 4.2s ease-out forwards;}
#arena-title-card .atc-kicker{font-family:'Press Start 2P',monospace; font-size:0.62rem; letter-spacing:4px; color:#e0b060;}
#arena-title-card .atc-title{font-family:'Press Start 2P',monospace; font-size:clamp(1rem, 4.4vw, 1.9rem); color:#ffdcb0; margin:8px 0 6px;
  letter-spacing:2px; -webkit-text-stroke:1px #3a0a04;}
#arena-title-card .atc-sub{font-family:'VT323',monospace; font-size:clamp(1rem, 3.4vw, 1.4rem); color:#e8c8a8; font-style:italic;}
#arena-title-card::before, #arena-title-card::after{content:""; display:block; height:2px; margin:6px auto;
  width:70%; background:linear-gradient(90deg, rgba(176,128,64,0), rgba(224,176,96,0.9), rgba(176,128,64,0));}
/* celular acostado: el cartel mide lo que su texto (no el 92 % de la pantalla) y no llega a la pila de avisos
   de arriba a la derecha (#toast-stack, js/ui/hud-text.js) */
@media (max-height:500px){
  #arena-title-card{ width:max-content; max-width:calc(100vw - 2*(min(220px, 30vw) + 22px)); top:12%; }
  #arena-title-card .atc-title{ font-size:clamp(0.9rem, 2.6vw, 1.3rem); line-height:1.35; }
  #arena-title-card .atc-kicker{ font-size:0.6875rem; letter-spacing:2px; }
  #arena-title-card .atc-sub{ font-size:1.1rem; }
}
@keyframes atcIn{ 0%{opacity:0; transform:translate(-50%,-12px) scale(1.06);} 10%{opacity:1; transform:translate(-50%,0) scale(1);}
  82%{opacity:1;} 100%{opacity:0;} }

/* Tutorial jugable: la voz del Hechicero (js/systems/tutorial.js). No bloquea nada y va abajo al
   centro (entre el joystick y los botones) para no tapar al campeón. El retrato es
   PROVISORIO (capucha dibujada con CSS) hasta que exista el arte del Hechicero. */
/* ABAJO A LA IZQUIERDA, pegado al joystick (jerarquía de textos: js/ui/hud-text.js): el centro queda para
   el guardián y los carteles de arena/fase. */
#tut-panel{position:fixed; left:calc(126px + env(safe-area-inset-left,0px)); bottom:calc(8px + env(safe-area-inset-bottom,0px));
  width:max(250px, min(400px, calc(100vw - 440px))); display:flex; gap:10px; align-items:flex-start; z-index:16; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,12,28,0.92), rgba(10,6,14,0.92)); border:2px solid #6a4a8a; border-radius:6px;
  padding:8px 10px; box-shadow:0 0 14px rgba(120,70,170,0.45); opacity:0; transition:opacity .35s;}
#tut-panel.show{opacity:1;}
#tut-panel.hidden{display:none;}
/* agachado (tutorial.js, tutDuck): mientras te pegan o si el guardián le queda debajo; el texto sigue ahí */
#tut-panel.show.duck{opacity:0; transition:opacity .12s;}
/* retrato real del Hechicero Supremo (el guía) */
#tut-panel .tut-face{flex:0 0 38px; height:38px; border-radius:4px; image-rendering:pixelated;
  background:url(../assets/sprites/bosses/infernal/hechicero/portrait.png) center 14%/165% no-repeat, radial-gradient(circle at 50% 35%, #6a4a1e, #1a1008);
  border:1px solid #c9a25a; box-shadow:0 0 8px rgba(255,210,120,0.45);}
#tut-panel .tut-who{font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:3px; color:#c9a8ff; margin-bottom:3px;}
#tut-panel .tut-text{font-family:'VT323',monospace; font-size:1.02rem; line-height:1.05; color:#efe4ff; font-style:italic;}
#tut-panel .tut-goal{font-family:'VT323',monospace; font-size:1.1rem; color:#ffcf5c; margin-top:4px;}
#tut-panel .tut-goal.done{color:#8effb4;}
#tut-panel .tut-goal:empty{display:none;}
/* celulares apaisados (poca altura): el cuadro del Hechicero más compacto para no tapar la horda */
@media (max-height: 500px){
  /* más bajo y angosto, pegado al borde (reseña #10): entre el joystick y los botones, debajo de los pies
     del guardián (la cámara lo ancla arriba de este cuadro, ver camFitAnchor en canvas.js) */
  #tut-panel{ width:max(200px, min(280px, calc(50vw - 136px))); padding:3px 7px 4px; gap:6px;
    bottom:calc(3px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg, rgba(20,12,28,0.84), rgba(10,6,14,0.84)); border-width:1px; }
  #tut-panel .tut-face{ flex-basis:22px; height:22px; margin-top:1px; }
  #tut-panel .tut-who{ font-size:0.38rem; letter-spacing:2px; margin-bottom:1px; }
  #tut-panel .tut-text{ font-size:0.84rem; line-height:0.95; }
  #tut-panel .tut-goal{ font-size:0.86rem; margin-top:1px; }
  /* Guía del jefe: arriba tapaba al jefe (que casi siempre entra por arriba) y a la barra de estado de la
     arena (civiles, luces, runas). En el teléfono va abajo al centro, en el lugar del Hechicero, que se
     esconde mientras se ve la guía (sin :has, en navegadores viejos, quedan los dos como antes). */
  #boss-intro{ top:auto; bottom:calc(8px + env(safe-area-inset-bottom,0px)); left:50%;
    width:max(250px, min(380px, calc(100vw - 440px))); background:rgba(24,8,4,0.86); padding:5px 10px 6px; }
  #tut-panel:has(~ #boss-intro:not(.hidden)){ visibility:hidden; }
}

/* Botones secundarios (Pacto del Nigromante, curación de emergencia): chicos y separados de las habilidades */
.ability-btn.sec{ width:44px; height:44px; /* mínimo táctil (UX Bible): antes 42 */ font-size:0.5rem; border-color:#4a6a4a; opacity:0.75; }
.ability-btn.sec .ico{ font-size:1rem; }
/* curación de emergencia: abajo a la izquierda de las habilidades, lejos del ataque básico */
.ability-btn.emerg{ right:calc(158px + env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); border-color:#2f6b40; opacity:0.35; }
.ability-btn.emerg.ready{ opacity:1; border-color:#6fdc8c; box-shadow:0 0 10px rgba(111,220,140,0.5); }
.ability-btn.emerg.urgent{ animation:reviveBtnPulse 0.9s ease-in-out infinite; }
.ability-btn.emerg.spent .ico{ filter:grayscale(1); }
.ability-btn.pact{ right:calc(158px + env(safe-area-inset-right,0px)); bottom:calc(130px + env(safe-area-inset-bottom,0px)); }
.ability-btn.pact.ready{ opacity:1; border-color:#5ae68c; box-shadow:0 0 12px rgba(90,230,140,0.55); }
.ability-btn.pact.armed{ opacity:1; border-color:#b8ffcf; background:radial-gradient(circle at 35% 30%, #1e5a34, #0a1a10 75%); box-shadow:0 0 20px rgba(90,230,140,0.95); animation:ultPulse 0.9s ease-in-out infinite; }
#nigro-souls-pips{ letter-spacing:1px; font-size:0.62rem; }
#nigro-souls-pips i{ display:inline-block; width:6px; height:9px; margin-right:1px; background:#1e3a28; border:1px solid #2e5a3c; }
#nigro-souls-pips i.on{ background:#5ae68c; border-color:#b8ffcf; box-shadow:0 0 4px #5ae68c; }
#nigro-souls-pips i.pact{ border-color:#ffe36a; }

/* ---------- Tipografía del HUD: una sola familia pixel ----------
   Antes el HUD mezclaba Georgia con serifas (vida, arena, aliados, botones, jefe) con las dos fuentes pixel
   de los carteles y del Hechicero: tres familias en la misma pantalla. Todo lo chico pasa a VT323 (con el
   tamaño corregido: a igual px, VT323 es más chica que Georgia) y el nombre del jefe a la fuente de títulos. */
#hud, #controls, #floaters{ font-family:var(--font-retro); }
.top-pill{ font-size:0.95rem; line-height:1; letter-spacing:0.01em; gap:1px; }
#hud .top{ width:auto; min-width:150px; max-width:210px; }
.top-pill > span{ white-space:nowrap; } /* "Nivel 6/10 · Bajas 120" en un renglón (antes el número caía abajo) */
#arena-rule-chip{ font-size:0.92rem; }
#plevel{ font-size:0.95rem; line-height:1; }
.ally-name{ font-size:0.86rem; }
.bar-label{ font-size:0.9rem; }
#se-hud, #musashi-hud, #sylva-hud, #nigromante-hud{ font-size:0.9rem; line-height:1.05; }
#ult-label{ font-size:0.9rem; line-height:1; }
.ability-btn{ font-size:0.84rem; font-weight:normal; letter-spacing:0; }
.ability-btn.sec{ font-size:0.78rem; }
.revive-btn{ font-size:0.86rem; font-weight:normal; }
.float-text{ font-size:1.15rem; font-weight:normal; }
.float-text.crit{ font-size:1.4rem; }
#boss-name{ font-family:var(--font-pixel); font-size:0.78rem; font-weight:normal; letter-spacing:0.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* en un renglón: partido en dos pisaba la barra y la pausa */
#boss-hud.sub #boss-name{ font-size:0.66rem; }
#boss-epithet{ font-size:0.98rem; }
#boss-status{ font-size:0.92rem; line-height:1; }
#boss-hint{ font-size:1.05rem; }
#boss-intro .bi-name{ font-family:var(--font-pixel); font-size:0.5rem; font-weight:normal; letter-spacing:2px; margin-bottom:4px; }
#boss-intro .bi-tips{ font-size:1rem; line-height:1.05; }
/* nombres largos (Segador Olvidado, "Mariano · Mago") en un renglón, con puntos suspensivos si no entran */
#plevel{ white-space:normal; }
.ally-name, .top-pill > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* celular acostado: el cartel central en un renglón casi siempre (a 2rem "4 civiles escondidos en la ciudad" se partía) */
@media (max-height:500px){ #center-banner{ font-size:1.55rem; max-width:min(560px, 70vw); }
  /* en el teléfono la guía del jefe va abajo: el cartel no tiene que bajar (antes caía encima de la guía) */
  #center-banner.low{ top:36%; } }
/* Marca de refuerzo de habilidad en el botón (color de la rareza; dorado = dúo; número = cuántos) */
.boon-pip{position:absolute; top:5px; left:7px; min-width:9px; height:9px; padding:0 1px; box-shadow:0 0 0 1px #000;
  font:8px/9px monospace; color:#000; text-align:center; pointer-events:none; z-index:2;}

/* ===== Inspector de habilidades (long press) y fichas reutilizables (panel táctico, Códice) =====
   UX Bible: docs/bible/UX_BIBLE.md. Texto siempre dentro del marco: overflow-wrap + max-height. */
#ability-inspector{position:fixed; z-index:60; pointer-events:none; max-width:calc(100vw - 24px);
  max-height:calc(100vh - 16px - env(safe-area-inset-bottom)); overflow:hidden;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation:abInspIn .14s ease-out;}
#ability-inspector.hidden{display:none;}
@keyframes abInspIn{from{opacity:0; transform:translateY(6px) scale(.97);} to{opacity:1; transform:none;}}
.ab-card{background:linear-gradient(#22140c,#140b07); border:2px solid #6a3c1e; border-radius:10px; padding:9px 11px;
  font-family:var(--font-body); color:var(--text); font-size:15px; line-height:1.15; overflow-wrap:anywhere; box-sizing:border-box;}
.ab-card.ult{border-color:#c98a1a; box-shadow:inset 0 0 0 1px rgba(255,207,92,.25);}
.ab-head{display:flex; align-items:center; gap:8px;}
.ab-ico{width:32px; height:32px; flex:0 0 32px; border-radius:7px; background:#0c0705; border:1px solid #5a3420; image-rendering:pixelated; object-fit:contain;}
.ab-ico.glyph{display:flex; align-items:center; justify-content:center; font-size:20px;}
.ab-title{flex:1 1 auto; min-width:0;}
.ab-kicker{font-family:'VT323 Texto',var(--font-pixel),monospace; font-size:14px; line-height:1; letter-spacing:1px; color:#d9a66a; text-transform:uppercase;}
.ab-name{font-family:var(--font-retro); font-size:20px; color:#ffe3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ab-shape{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; font-size:12px; line-height:1; color:#e8cfb2; max-width:74px; text-align:center;}
.ab-shape b{font-size:20px; line-height:1; color:#fff;}
.ab-state{margin:6px 0 2px; font-size:14px;}
.ab-state.ready{color:#7fe39a;} .ab-state.wait{color:#ffb070;}
.ab-desc{margin:5px 0; color:#f2e3d3;}
.ab-facts{display:flex; flex-wrap:wrap; gap:3px 10px; font-size:13px; color:#d8c0a6;}
.ab-facts b{color:#fff; margin-right:3px;}
.ab-chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;}
.ab-chip{display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:9px; font-size:12px;
  border:1px solid var(--chip); color:var(--chip); background:rgba(0,0,0,.35);}
.ab-chip b{font-size:12px;}
.ab-hint{margin-top:4px; text-align:center; font-family:var(--font-body); font-size:12px; color:#bfa08a; background:rgba(0,0,0,.55); border-radius:6px; padding:2px 6px;}
@media (max-height:420px){ .ab-card{font-size:13px; padding:7px 9px;} .ab-name{font-size:17px;} .ab-facts{font-size:12px;} }

/* Shields have a separate track; losing them never shortens the HP bar. */
.ally-shield-track{margin-top:2px;}
#hp-shield-row .bar-track{height:4px;}