/* ================= HUD REAL (assets de Aldo) =================
     Diseño original en lienzo 1920x1080. Cada bloque se ancla a su esquina y
     todo escala con --s (se recalcula por JS según la pantalla). Las piezas van
     posicionadas dentro de su bloque con las coords exactas del PDF. */
  :root{ --s:1; }
  .hudBlock{ position:absolute; z-index:28; }
  .hudBlock img{ position:absolute; display:block; pointer-events:none;
                 image-rendering:auto; user-select:none; -webkit-user-drag:none; }
  /* slots: contenedor con marco + contenido; crecen 10% al hover/press */
  .slot{ position:absolute; cursor:pointer; transform-origin:center center;
         transition:transform .12s ease-out; }
  .slot img.frame{ position:absolute; inset:0; width:100%; height:100%; }
  .slot .ico{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
              font-size:calc(17px * var(--s)); color:#F2E8D6; pointer-events:none;
              text-shadow:0 1px 3px #000; line-height:1; }
  .slot:hover, .slot.press{ transform:scale(1.10); z-index:5; }
  .slot.on .ico{ color:#ffd08a; text-shadow:0 0 8px #e0a040,0 1px 3px #000; }
  .slot.disabled{ opacity:.4; pointer-events:none; }
  /* contador de munición: número pequeño flotando sobre el slot */
  .slot .ammo{ position:absolute; right:calc(-2px * var(--s)); bottom:calc(-2px * var(--s));
    min-width:calc(13px * var(--s)); height:calc(13px * var(--s)); padding:0 calc(2px * var(--s));
    border-radius:calc(7px * var(--s)); background:rgba(83,53,31,.88); border:1px solid #B8AEA3;
    color:#F2E8D6; font-family:system-ui; font-size:calc(9px * var(--s)); line-height:calc(13px * var(--s));
    text-align:center; pointer-events:none; z-index:4; font-weight:600; }
  .slot .ammo.empty{ color:#c04a3a; border-color:#7a3428; }

  /* --- BARRA DE PERSONAJES (arriba izquierda) --- */
  #blockChars{ left:calc(15px * var(--s)); top:calc(18px * var(--s));
               width:calc(340px * var(--s)); height:calc(149px * var(--s)); }
  .charSlot{ position:absolute; }
  .charSlot .cface{ position:absolute; }
  .charSlot .cbar{ position:absolute; }
  /* relleno de la mini barra de vida (debajo del marco de la barra) */
  .charSlot .cbarFill{ position:absolute; z-index:0;
    background:linear-gradient(0deg,#8a0f0f,#e02020);
    transform-origin:bottom center; transition:transform .2s, background .2s; }
  /* dos zonas clicables independientes, encima de todo */
  .charSlot .zFace, .charSlot .zBar{ position:absolute; z-index:6; cursor:pointer;
    transform-origin:center center; transition:transform .12s ease-out; }
  .charSlot .zFace:hover, .charSlot .zBar:hover{ transform:scale(1.06); }
  /* estado seleccionado: se resalta la barra */
  .charSlot.sel .cbar{ filter:brightness(1.5) saturate(1.3); }
  .charSlot .cbar{ transition:filter .15s; }

  /* --- MINI MAPA (arriba derecha) --- */
  #blockMap{ right:calc(20px * var(--s)); top:calc(16px * var(--s));
             width:calc(175px * var(--s)); height:calc(163px * var(--s)); }
  #minimapCanvas{ position:absolute; border-radius:50%; cursor:pointer; background:#150f0c; }

  /* --- HUD PERSONAJE ACTIVO (abajo derecha) --- */
  /* La TELA (plegada/desplegada) se intercambia; el RETRATO+VIDA es un bloque
     independiente que queda fijo encima de cualquiera de los dos estados. */
  #blockHud{ right:calc(20px * var(--s)); bottom:calc(63px * var(--s));
             width:calc(272px * var(--s)); height:calc(283px * var(--s)); }
  #blockHudOpen{ right:calc(102px * var(--s)); bottom:calc(12px * var(--s));
                 width:calc(417px * var(--s)); height:calc(303px * var(--s)); display:none; }
  /* retrato activo + barra de vida: SIEMPRE visibles, posición fija (coords del PDF) */
  #blockPortrait{ right:calc(20px * var(--s)); bottom:calc(63px * var(--s));
                  width:calc(189px * var(--s)); height:calc(283px * var(--s)); z-index:29; }
  /* el marco de la barra es opaco (hace de fondo), así que el relleno va ENCIMA */
  #livebarLevel{ position:absolute; background:linear-gradient(0deg,#8a0f0f,#e02020);
                 transform-origin:bottom center; transition:transform .2s, background .2s; z-index:3; }