/* hud.css — HUD en partida (vida, stamina, munición, brujula, etc.)
   Extraido automaticamente de index.html (bloques <style> originales) */

/* ── TOKENS DEL HUD (paleta "refugio oxidado", los mismos valores que theme-menu.css / menu_maqueta.html) ── */

:root {
  --hud-bone: #e3d6bd;
  --hud-clay: #9a8b72;
  --hud-clay-hi: #cdbfa5;
  --hud-paint: #c9972b;
  --hud-paint-hi: #d6a634;
  --hud-rust: #b45f26;
  --hud-rust-hi: #d98a4a;
  --hud-blood: #a2473d;      /* vida, sangrado: rojo apagado */
  --hud-danger: #c2493a;     /* vida baja, linterna casi agotada */
  --hud-steel: #8c9aa1;      /* stamina */
  --hud-steel-lo: #6c8294;   /* dash */
  --hud-plate: rgba(14,12,9,0.62);
  --hud-disc: rgba(14,12,9,0.42);
  --hud-edge: rgba(227,214,189,0.14);
  --hud-type: 'Special Elite','Courier New',monospace;

  /* Medidas: PC por defecto; ver @media (max-width:900px) más abajo */
  --hud-pad: 10px;
  --hud-gap: 6px;
  --hud-ring: 40px;
  --hud-corner: 44px;          /* ancho reservado a la columna REC + engranaje */
  --hud-compass-h: 28px;
  --hud-ammo-h: 72px;          /* alto del panel de arma (lo mide el test de solapes) */
  --hud-side: 270px;           /* reserva lateral para la línea de objetivo */
  --hud-obj-max: 460px;
  --hud-weapon-fs: 11px;
  --hud-ammo-fs: 22px;
  --hud-key-fs: 13px;
  --hud-chip-fs: 10px;
  --hud-chip-ico: 12px;
  --hud-obj-fs: 11px;

  --hud-k: min(var(--ui-scale, 1), 1.25);
  --hud-l: calc(var(--hud-pad) + env(safe-area-inset-left, 0px));
  --hud-r: calc(var(--hud-pad) + env(safe-area-inset-right, 0px));
  --hud-t: calc(var(--hud-pad) + env(safe-area-inset-top, 0px));
  --hud-vx: var(--hud-l);      /* inicio de los vitales; en táctil deja libre el botón "+" */

  --hud-ico-temp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23e3d6bd' d='M5 1.2h2v5.3a2.7 2.7 0 1 1-2 0z'/%3E%3C/svg%3E");
  --hud-ico-rad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23c9972b'%3E%3Cpath d='M6 6L3.75 2.1A4.5 4.5 0 0 1 8.25 2.1Z'/%3E%3Cpath d='M6 6L10.5 6A4.5 4.5 0 0 1 8.25 9.9Z'/%3E%3Cpath d='M6 6L3.75 9.9A4.5 4.5 0 0 1 1.5 6Z'/%3E%3Ccircle cx='6' cy='6' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --hud-ico-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23c2493a' d='M6 1C6 1 2.2 5.4 2.2 7.6a3.8 3.8 0 0 0 7.6 0C9.8 5.4 6 1 6 1z'/%3E%3C/svg%3E");
  --hud-ico-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23d6a634' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='3.6' cy='6' r='2.3'/%3E%3Cpath d='M6 6h5M9.3 6v2M11 6v1.4'/%3E%3C/g%3E%3C/svg%3E");
  /* Grano neutro (gris claro, alfa muy baja). Se rasteriza una sola vez; no es un canvas ni mezcla colores. */
  --hud-rec-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .92 0 0 0 0 .92 0 0 0 .10 -.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Táctil: el botón "+" del cajón móvil ocupa la esquina; los vitales empiezan a su derecha.
   La clase la pone el script del HUD v2 (window.IS_MOBILE). */
body.hud-touch { --hud-vx: calc(var(--hud-l) + 52px); }

@media (max-width: 700px) {
  /* Pantallas muy pequeñas (640x360): con la escala de interfaz > 1 los vitales chocarían con la brújula */
  :root { --hud-k: min(var(--ui-scale, 1), 1); }
}

@media (max-width: 900px) {
  :root {
    --hud-pad: 8px;
    --hud-gap: 5px;
    --hud-ring: 36px;
    --hud-ammo-h: 50px;
    --hud-side: 228px;
    --hud-obj-max: 420px;
    --hud-weapon-fs: 9px;
    --hud-ammo-fs: 14px;
    --hud-key-fs: 10px;
    --hud-chip-fs: 9px;
    --hud-chip-ico: 10px;
    --hud-obj-fs: 10px;
  }
}

#hud{justify-content:flex-end;align-items:flex-end;padding:5px 8px;height:auto;bottom:8px;top:auto;right:8px;left:auto;flex-direction:column;background:linear-gradient(to top,rgba(5,3,0,0.18),transparent);transition:transform 0.3s,opacity 0.5s ease;transform:scale(0.60);transform-origin:bottom right;pointer-events:none;position:fixed;opacity:0;filter:blur(0.3px);}

#ammoHudPanel{position:fixed;right:0px;top:8px;left:auto!important;bottom:auto!important;transform:scale(0.68);transform-origin:top right;z-index:100;opacity:0;transition:opacity 0.5s ease;filter:blur(0.3px);}

#flashlightHudPanel{position:fixed;left:0px;top:8px;right:auto!important;bottom:auto!important;transform:scale(0.68);transform-origin:top left;z-index:100;opacity:0;transition:opacity 0.5s ease;filter:blur(0.3px);border-left:none;border-right:1px solid rgba(255,215,0,0.15);border-radius:2px 0 0 2px;text-align:left;}

.hud-panel{background:linear-gradient(135deg,rgba(20,15,5,0.22),rgba(10,8,2,0.28));border-left:1px solid rgba(255,215,0,0.15);padding:4px 10px;border-radius:0 2px 2px 0;color:rgba(255,248,220,0.75);pointer-events:auto;box-shadow:inset 0 0 10px rgba(0,0,0,0.15);position:relative;font-size:11px;}

.hud-panel::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(ellipse at 20% 30%,rgba(0,0,0,0.3) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(0,0,0,0.2) 0%,transparent 50%),radial-gradient(ellipse at 50% 90%,rgba(0,0,0,0.15) 0%,transparent 50%);pointer-events:none;opacity:0.6;}

.bar-container{width:140px;height:10px;background:rgba(10,8,0,0.8);border-radius:2px;overflow:hidden;margin-top:3px;border:1px solid rgba(80,60,20,0.6);position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);}

.hp-bar{height:100%;background:linear-gradient(90deg,rgba(200,50,50,0.9),rgba(255,80,80,0.85));width:100%;transition:width 0.2s ease-out;box-shadow:0 0 5px rgba(255,0,0,0.3);}

.stamina-bar{height:100%;background:linear-gradient(90deg,rgba(180,140,40,0.8),rgba(220,180,60,0.85));width:100%;transition:width 0.1s linear;box-shadow:0 0 5px rgba(220,180,60,0.3);}

.stamina-bar.exhausted{background:linear-gradient(90deg,rgba(80,70,50,0.8),rgba(100,90,70,0.8));}

.battery-bar{height:100%;background:linear-gradient(90deg,rgba(220,190,60,0.8),rgba(255,230,100,0.85));width:100%;transition:width 0.2s;box-shadow:0 0 5px rgba(255,230,100,0.3);}

.ammo-display{font-size:18px;font-weight:bold;color:rgba(255,215,0,0.9);text-shadow:0 0 5px rgba(0,0,0,0.8),0 0 10px rgba(255,215,0,0.2);}

.weapon-name{font-size:10px;color:rgba(220,180,100,0.7);text-transform:uppercase;text-shadow:0 0 3px rgba(0,0,0,0.8);}

#targetInfo{position:absolute;top:15%;left:50%;transform:translate(-50%,0);text-align:center;pointer-events:none;opacity:0;transition:opacity 0.2s;}

.target-name{font-size:14px;font-weight:bold;text-shadow:1px 1px 2px black;}

.target-bar-bg{width:100px;height:6px;background:#000;border:1px solid #555;margin:2px auto;}

.target-bar-fill{height:100%;background:var(--primary);width:100%;}

#interactionBarContainer{position:absolute;top:30%;bottom:auto;left:50%;transform:translate(-50%,0);width:min(300px,34vw);height:14px;background:var(--hud-plate);border:2px solid var(--hud-clay);border-radius:3px;display:none;z-index:60;}

#interactionBar{width:0%;height:100%;background:var(--hud-paint);transition:width 0.1s linear;}

#interactionText{position:absolute;top:-24px;width:100%;text-align:center;color:var(--hud-bone);font:600 var(--hud-obj-fs)/1.2 var(--hud-type);text-shadow:0 1px 2px rgba(0,0,0,0.9);white-space:nowrap;}

#worldInteractBtn{position:absolute;width:60px;height:60px;background:rgba(46,125,50,0.8);border:2px solid #fff;border-radius:50%;display:none;justify-content:center;align-items:center;font-size:24px;color:white;z-index:80;cursor:pointer;box-shadow:0 0 15px rgba(0,255,0,0.5);animation:pulseBtn 1s infinite;pointer-events:auto;transform:translate(-50%,-50%);}

#worldInteractBtn:active{transform:translate(-50%,-50%) scale(0.9);background:#fff;color:#000;}

#stanceIndicator{position:absolute;bottom:120px;left:20px;font-size:24px;color:var(--primary);font-weight:bold;text-shadow:1px 1px 2px black;opacity:0.8;display:none!important;}

#liveScoreboard{position:fixed;top:100px;left:8px;z-index:10000;background:rgba(0,0,0,0.72);border:1px solid rgba(255,200,0,0.5);border-radius:8px;padding:8px 12px;min-width:170px;font-family:'Courier New',monospace;pointer-events:none;display:none;box-shadow:0 0 12px rgba(0,0,0,0.8);}

#liveScoreboard .sb-timer{font-size:14px;font-weight:bold;color:#FFD700;text-align:center;letter-spacing:1px;margin-bottom:4px;}

#liveScoreboard .sb-timer.warning{color:#FF5722;animation:timerPulse 0.5s infinite alternate;}

#liveScoreboard .sb-row{font-size:12px;color:#ddd;padding:2px 0;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;gap:8px;}

#liveScoreboard .sb-row.me{color:#4CAF50;font-weight:bold;}

#liveScoreboard .sb-row:last-child{border-bottom:none;}

#liveScoreboard .sb-label{font-size:10px;color:#888;text-align:center;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}

#ingameMissionBtn{position:absolute;top:20px;left:20px;z-index:95;display:none;}

#gearBtn{position:absolute;top:calc(var(--rec-bottom,30px) + 4px);right:var(--hud-r,14px);left:auto;width:34px;height:34px;line-height:34px;text-align:center;border-radius:50%;background:rgba(0,0,0,0.25);font-size:18px;opacity:0.5;cursor:pointer;z-index:200;color:rgba(255,255,255,0.6);transition:color 0.2s,transform 0.2s;display:none;}

#gearBtn:hover{color:var(--primary);transform:rotate(90deg);}

#commandBtn{position:absolute;top:15px;right:310px;font-size:30px;cursor:pointer;z-index:200;color:rgba(255,255,255,0.8);display:none;background:rgba(0,0,0,0.5);border-radius:50%;width:50px;height:50px;text-align:center;line-height:50px;border:2px solid var(--primary);pointer-events:auto;}

#commandBtn:active{transform:scale(0.9);background:var(--primary);}

#commandWheel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;background:rgba(0,20,0,0.9);border:4px solid var(--primary);z-index:3000;display:none;flex-wrap:wrap;overflow:hidden;pointer-events:auto;}

.wheel-sec{width:50%;height:50%;box-sizing:border-box;border:1px solid #333;display:flex;justify-content:center;align-items:center;font-size:24px;cursor:pointer;transition:background 0.2s;flex-direction:column;pointer-events:auto;}

.wheel-sec:hover{background:var(--primary);color:white;}

.wheel-sec:active{background:var(--primary-light);}

.wheel-sec span{font-size:12px;margin-top:5px;font-weight:bold;}

.bot-tag{position:absolute;background:rgba(0,0,0,0.6);color:#00FF00;padding:2px 5px;border-radius:4px;font-size:10px;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;z-index:80;border:1px solid #00FF00;}

#debugOverlay{position:absolute;top:5px;left:5px;color:#0f0;font-family:monospace;font-size:10px;background:rgba(0,0,0,0.7);padding:5px;pointer-events:none;z-index:9999;display:none;}

#crosshair{position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;z-index:50;transition:transform 0.05s;}

/* ── RARE DROP TOAST ─────────────────────────────── */

.rare-drop-toast {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) translateX(120%);
  z-index: 99999;
  width: 300px;
  background: rgba(8, 6, 16, 0.96);
  border: 2px solid var(--item-color, #ffd700);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(0,0,0,0.5);
  animation: rdtSlideIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}

.rdt-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--item-color, #ffd700), transparent 70%);
  opacity: 0.08;
  animation: rdtGlowPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

.rdt-content {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.rdt-emoji {
  font-size: 42px;
  animation: rdtEmojiBounce 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--item-color, #ffd700));
  flex-shrink: 0;
}

.rdt-text { display: flex; flex-direction: column; gap: 4px; }

.rdt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 215, 0, 0.9);
  text-transform: uppercase;
}

.rdt-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 12px currentColor;
}

.rdt-desc {
  font-size: 10px;
  color: rgba(200, 200, 200, 0.7);
  font-style: italic;
  line-height: 1.4;
}

/* PUNTO 21: Crosshair dinámico */

#crosshair {
    --ch-gap: 5px;
    --ch-len: 8px;
    --ch-thick: 2px;
    --ch-color: rgba(255,255,255,0.88);
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 0; height: 0;
    pointer-events: none;
    z-index: 50;
}

#crosshair .ch-top,#crosshair .ch-bottom,
#crosshair .ch-left,#crosshair .ch-right {
    position: absolute;
    background: var(--ch-color);
    transition: transform 0.06s ease-out, opacity 0.1s;
    border-radius: 1px;
}

#crosshair .ch-top    { width:var(--ch-thick); height:var(--ch-len); left:calc(-1 * var(--ch-thick)/2); bottom: var(--ch-gap); }

#crosshair .ch-bottom { width:var(--ch-thick); height:var(--ch-len); left:calc(-1 * var(--ch-thick)/2); top:    var(--ch-gap); }

#crosshair .ch-left   { height:var(--ch-thick);width:var(--ch-len);  top: calc(-1 * var(--ch-thick)/2); right:  var(--ch-gap); }

#crosshair .ch-right  { height:var(--ch-thick);width:var(--ch-len);  top: calc(-1 * var(--ch-thick)/2); left:   var(--ch-gap); }

#crosshair .ch-dot    { width:2px;height:2px;background:var(--ch-color);border-radius:50%;position:absolute;top:-1px;left:-1px; }

#gameCanvas { cursor: none !important; }

body.playing-2d { cursor: none !important; }

#dotCursor {
    position: fixed;
    width: 5px; height: 5px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(255,255,255,0.7);
    display: none;
}

/* ── BRÚJULA HUD ───────────────────────────────────────────── */

#compassHUD {
    position: fixed;
    top: var(--hud-t);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 28px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 4px;
    overflow: hidden;
    z-index: 9998;
    display: none;
    pointer-events: none;
    backdrop-filter: blur(3px);
}

#compassTrack {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255,220,80,0.85);
    line-height: 28px;
    letter-spacing: 3px;
    text-shadow: 0 0 6px rgba(255,200,0,0.6);
    will-change: transform;
}

#compassCenter {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 100%;
    background: rgba(255,100,100,0.8);
    box-shadow: 0 0 4px rgba(255,80,80,0.8);
    pointer-events: none;
}

/* ── INDICADOR MELEE CARGADO ───────────────────────────────── */

#chargedMeleeIndicator {
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,100,0,0.6);
    border-radius: 3px;
    display: none;
    z-index: 95;
    overflow: hidden;
}

#chargedMeleeBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF6600, #FF0000);
    box-shadow: 0 0 6px rgba(255,80,0,0.7);
    transition: background 0.1s;
}

/* ── HUD SKILL TREE BUTTON ─────────────────────────────────── */

#skillTreeHudBtn {
    font-size: 10px;
    color: rgba(255,220,100,0.7);
    cursor: pointer;
    padding: 2px 6px;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 3px;
    pointer-events: auto;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#skillTreeHudBtn:hover { background: rgba(255,215,0,0.1); }

/* FIX #5: Barra de progreso de vendaje */

#bandageProgressWrap {
    display: none;
    animation: fadeInHUD 0.2s ease;
}

@keyframes fadeInHUD {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* FIX #4: Hint de tecla en panel loot */

#lootPanel kbd {
    font-family: 'Courier New', monospace;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.5);
    font-size: 11px;
}

/* ── ZONAS DEL HUD (ronda U3a) ──────────────────────────────────────────────
   Arriba-izquierda : vitales (vida, stamina, linterna; dash solo al recargar) + chips contextuales
                      (sangrado, temperatura, radiación) en una columna bajo los anillos.
   Arriba-centro    : brújula (ya existente) y, justo debajo, UNA línea de objetivo.
   Arriba-derecha   : panel dorado de arma/munición/llaves, a la izquierda de la columna REC + engranaje;
                      debajo, monedas/XP unos segundos al cambiar.
   Abajo            : nada del HUD (joystick y botones táctiles).
   Los anillos no tienen sombra ni brillo: el estilo "refugio oxidado" no usa neón. */

/* Escala de interfaz: --ui-scale (#uiScale) ya la fija el juego; se limita a 1.25 para que ningún grupo
   invada al vecino en 640x360. Cada grupo escala desde su propia esquina. */

/* ── Vitales (arriba-izquierda) ── */

#hudVitalsCluster {
  position: fixed;
  top: var(--hud-t);
  left: var(--hud-vx);
  display: none;
  flex-direction: row;
  align-items: center;
  gap: var(--hud-gap);
  z-index: 110;
  pointer-events: none;
  transform: scale(var(--hud-k));
  transform-origin: top left;
}

.hud-ring-wrap {
  position: relative;
  width: var(--hud-ring);
  height: var(--hud-ring);
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}

/* Disco oscuro bajo cada anillo: legibilidad sobre paredes iluminadas sin sombras ni blend */
.hud-ring-wrap::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--hud-disc);
}

.hud-ring-wrap.dim { opacity: 0.42; }

.hud-ring-wrap svg.hud-ring-svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.hud-ring-track {
  fill: none;
  stroke: var(--hud-edge);
  stroke-width: 3.6;
}

.hud-ring-fill {
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.22s ease-out, stroke 0.3s ease;
}

.hud-ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  transform: translate(-50%, -50%);
  color: var(--hud-bone);
  opacity: 0.72;
  pointer-events: none;
  line-height: 0;
  user-select: none;
}

.hud-ring-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Paleta limitada: rojo apagado = vida/peligro · ocre = linterna · gris azulado = stamina/dash */
#ringHp      .hud-ring-fill { stroke: var(--hud-blood); }
#ringHp.hp-mid .hud-ring-fill { stroke: var(--hud-rust); }
#ringHp.hp-low .hud-ring-fill { stroke: var(--hud-danger); }
#ringStamina .hud-ring-fill { stroke: var(--hud-steel); }
#ringDash    .hud-ring-fill { stroke: var(--hud-steel-lo); }
#ringBattery .hud-ring-fill { stroke: var(--hud-paint); }
#ringBattery.is-low .hud-ring-fill { stroke: var(--hud-danger); }

/* Orden fijo: el dash va al final y aparece solo mientras recarga, así no desplaza al resto */
#ringHp { order: 1; }
#ringStamina { order: 2; }
#ringBattery { order: 3; }
#ringDash { order: 4; display: none; }
#ringDash.is-recharging { display: block; }

/* ── Chips contextuales (bajo los vitales) ── */

#hudMicroIcons {
  position: fixed;
  top: calc(var(--hud-t) + var(--hud-ring) * var(--hud-k) + 4px);
  left: var(--hud-vx);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  z-index: 110;
  pointer-events: none;
  transform: scale(var(--hud-k));
  transform-origin: top left;
}

/* Un chip = placa oscura con filo de color a la izquierda. Ocultos hasta que algo es anormal. */
#hudMicroIcons .hud-micro,
#bleedIndicator,
#geigerDisplay {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  font: 600 var(--hud-chip-fs) / 1.25 var(--hud-type);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hud-bone);
  background: var(--hud-plate);
  border: 0;
  border-left: 2px solid var(--hud-clay);
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  position: static;
  transform: none;
  opacity: 1;
  z-index: auto;
  text-shadow: none;
}

#hudMicroIcons .hud-micro.danger { display: flex; border-left-color: var(--hud-rust); }

/* El JS del juego escribe un color inline en #bodyTempDisplay: el chip lo ignora y usa su paleta */
#hudMicroIcons #bodyTempDisplay { color: var(--hud-bone) !important; }
#microTemp.is-cold { border-left-color: var(--hud-steel); }
#microTemp.is-cold #bodyTempDisplay { color: var(--hud-steel) !important; }
#microTemp.is-hot  { border-left-color: var(--hud-danger); }
#microTemp.is-hot  #bodyTempDisplay { color: var(--hud-rust-hi) !important; }

/* El JS enciende estos dos con style.display = 'block' */
#bleedIndicator { border-left-color: var(--hud-danger); color: var(--hud-bone); }
#geigerDisplay  { border-left-color: var(--hud-paint); text-transform: none; }
#bleedIndicator[style*="block"], #geigerDisplay[style*="block"] { display: flex !important; }

/* Iconos de chip: SVG de un solo color como fondo (sin emoji, sin capas extra) */
#microTemp::before, #microRad::before, #bleedIndicator::before, #geigerDisplay::before, #keyDisplay::before,
#hudEconRow .hud-econ-xp::before {
  content: '';
  flex: 0 0 auto;
  width: var(--hud-chip-ico);
  height: var(--hud-chip-ico);
  background: center / contain no-repeat;
}
#microTemp::before { background-image: var(--hud-ico-temp); }
#microRad::before, #geigerDisplay::before { background-image: var(--hud-ico-rad); }
#bleedIndicator::before { background-image: var(--hud-ico-drop); }

/* ── Panel dorado de arma (arriba-derecha, a la izquierda de REC/engranaje) ── */

#hudAmmoCluster {
  position: fixed;
  top: var(--hud-t);
  right: calc(var(--hud-r) + var(--hud-corner));
  left: auto;
  bottom: auto;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 5px 11px 5px 9px;
  background: var(--hud-plate);
  border-left: 3px solid var(--hud-paint);
  border-radius: 3px;
  z-index: 110;
  pointer-events: none;
  font-family: var(--hud-type);
  transform: scale(var(--hud-k));
  transform-origin: top right;
}

#hudAmmoCluster #weaponName {
  display: block !important;
  font-size: var(--hud-weapon-fs) !important;
  color: var(--hud-clay-hi) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  font-family: var(--hud-type);
  white-space: nowrap;
}

#hudAmmoCluster #ammoDisplay {
  display: block !important;
  font-size: var(--hud-ammo-fs) !important;
  font-weight: 900;
  color: var(--hud-paint-hi) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  letter-spacing: 1.5px;
  font-family: var(--hud-type);
  line-height: 1.1;
  white-space: pre;
}

#hudAmmoCluster #keyDisplay {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--hud-key-fs);
  color: var(--hud-bone);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  margin-top: 1px;
}

#keyDisplay::before { width: 1.1em; height: 1.1em; background-image: var(--hud-ico-key); }

/* ── Monedas / XP: solo unos segundos al cambiar (arriba-derecha, bajo el panel de arma) ── */

#hudEconRow {
  position: fixed;
  top: calc(var(--hud-t) + var(--hud-ammo-h) * var(--hud-k) + 4px);
  right: calc(var(--hud-r) + var(--hud-corner));
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 110;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  font: 600 var(--hud-chip-fs) / 1.2 var(--hud-type);
  color: var(--hud-paint-hi);
  padding: 2px 8px;
  background: var(--hud-plate);
  border-radius: 2px;
  transform: scale(var(--hud-k));
  transform-origin: top right;
}

#hudEconRow .peseta-container { background: none; border: 0; padding: 0; margin: 0; gap: 4px; }
#hudEconRow .peseta-icon { width: 15px; height: 15px; font-size: 9px; margin-right: 3px; background: var(--hud-paint); }
#hudEconRow .peseta-icon .crown { display: none; }
#hudEconRow .hud-econ-xp { color: var(--hud-clay-hi); letter-spacing: 1px; }
#hudEconRow .hud-econ-xp::before { display: none; }
/* HABILIDADES ya no vive en el HUD: se abre desde el menú de pausa y desde el cajón móvil */
#hudEconRow #skillTreeHudBtn { display: none; }

/* ── Objetivo: UNA línea (la fase activa) bajo la brújula ── */

#objectivesPanel {
  position: fixed;
  top: calc(var(--hud-t) + var(--hud-compass-h) + 4px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: none;
  max-width: min(var(--hud-obj-max), calc(100vw - var(--hud-side) * 2));
  margin: 0;
  padding: 3px 12px;
  background: var(--hud-plate);
  border: 0;
  border-left: 2px solid var(--hud-rust);
  border-radius: 2px;
  color: var(--hud-bone);
  font: 600 var(--hud-obj-fs) / 1.3 var(--hud-type);
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 96;
}

#objectivesPanel.hud-live { display: block; }
#objectivesPanel:not(:has(.obj-item.active)) { display: none !important; }
#objectivesPanel .obj-hint { display: none; }

.obj-item { display: none; margin: 0; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-item.active { display: block; font-weight: 600; color: var(--hud-bone); }
.obj-item.done { display: none; text-decoration: none; }

#compassHUD { width: clamp(140px, 28vw, 260px); }

/* ── Cajón móvil: botón de HABILIDADES (mismo tamaño que INV y GOALS) ── */

#mobMenuDrawer .mob-drawer-ico { width: 15px; height: 15px; fill: currentColor; }
#mobMenuDrawer .mob-drawer-lbl { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

/* El panel de habilidades debe quedar por encima del menú de pausa si se abre desde él */
#skillTreePanel { z-index: 9600; }

/* ── Filtro REC (cámara): viñeta neutra + rayas y grano muy suaves, todo en UNA capa ── */

#recOverlay #recVignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 81;
  background:
    var(--hud-rec-grain),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(0,0,0,0.30) 100%);
  background-size: 160px 160px, auto, auto;
}

/* Rayas y grano ya van dentro de #recVignette; los ids se conservan en el DOM pero sin capa propia */
#recOverlay #recScanlines,
#recOverlay #recGrainCanvas,
#recOverlay #recBatDisplay { display: none; }

#recOverlay #recInfoBlock {
  position: fixed;
  top: var(--hud-t);
  right: var(--hud-r);
  z-index: 84;
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 9px / 1 var(--hud-type);
  letter-spacing: 1.5px;
  color: var(--hud-blood);
  text-shadow: none;
  pointer-events: none;
}

#recOverlay #recDot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-blood);
  box-shadow: none;
  animation: hudRecPulse 2.6s ease-in-out infinite;
}

@keyframes hudRecPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.35; } }

/* ── Bajo rendimiento: sin animaciones, sin brillos, sin capas decorativas ── */

body[data-quality="performance"] #recOverlay #recVignette {
  background: radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(0,0,0,0.30) 100%);
}
body[data-quality="performance"] #recOverlay #recDot { animation: none; opacity: 0.8; }
body[data-quality="performance"] .hud-ring-wrap,
body[data-quality="performance"] .hud-ring-fill,
body[data-quality="performance"] #hudEconRow { transition: none; }
body[data-quality="performance"] .hud-ring-wrap::before { display: none; }
body[data-quality="performance"] #hudAmmoCluster #weaponName,
body[data-quality="performance"] #hudAmmoCluster #ammoDisplay,
body[data-quality="performance"] #hudAmmoCluster #keyDisplay { text-shadow: none; }

/* ── Movimiento reducido ── */

@media (prefers-reduced-motion: reduce) {
  #recOverlay #recDot { animation: none; opacity: 0.8; }
  .hud-ring-wrap, .hud-ring-fill, #hudEconRow { transition: none; }
}

/* ── "Ocultar HUD completo" (Game.settings.hideHudCompletely → HUDFreeMode, body.hud-hidden) ──
   Antes solo ocultaba #hud; los grupos de abajo cuelgan de #uiLayer y seguían visibles. El engranaje de
   pausa se queda siempre. */

body.hud-hidden #hudVitalsCluster,
body.hud-hidden #hudAmmoCluster,
body.hud-hidden #hudMicroIcons,
body.hud-hidden #hudEconRow,
body.hud-hidden #objectivesPanel,
body.hud-hidden #recOverlay #recInfoBlock,
body.hud-hidden #controlsGuidePanel { display: none !important; }

/* ── STANCE INDICATOR refactored ── */

#stanceIndicator {
  position: fixed !important;
  bottom: 84px !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  color: rgba(180,225,180,0.88);
  background: rgba(0,0,0,0.38);
  padding: 3px 12px;
  border-radius: 10px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0 !important;
  transition: opacity 0.32s ease;
  display: block !important;
  pointer-events: none;
  z-index: 115;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(76,175,80,0.18);
}

#stanceIndicator.v2-visible { opacity: 0.78 !important; }

/* ── CONTROLS GUIDE — auto-oculto 90s, toggle [P] ── */

#controlsGuidePanel {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  color: rgba(200,200,200,0.32) !important;
  text-align: center;
  pointer-events: none;
  z-index: 105;
  transition: opacity 0.5s ease;
  background: none !important;
  display: block !important;
  white-space: nowrap;
}

#controlsGuidePanel > div {
  font-size: 10px !important;
  color: rgba(200,200,200,0.32) !important;
  margin: 1px 0 !important;
}

#controlsGuidePanel.v2-guide-hidden { opacity: 0 !important; }

/* ── HIDDEN COMPAT BARS (para no romper JS existente) ── */

#v2-compat-bars { display: none !important; position: fixed; top: -9999px; }

/* ── OLD HUD panels — ocultamos los paneles viejos ── */

#ammoHudPanel { display: none !important; }

#flashlightHudPanel { display: none !important; }

#hud .hud-panel { display: none !important; }

/* ============ CSS v29 IMPROVEMENTS ============ */

/* Gearbutton always clickable with high z-index */

#gearBtn {
        pointer-events: auto !important;
        z-index: 9001 !important;
    }


/* ============================================================
   HUD CUERPO SEGMENTADO (#bodyHUD)
   Pequeño, translúcido, oculto por defecto.
   .flash  -> fade-in, pausa y fade-out (una sola animación CSS)
   .broken -> pulso lento de opacidad mientras haya una parte rota
   ============================================================ */

#bodyHUD {
    /* ronda U3a: cuelga de #hudMicroIcons (arriba-izquierda, bajo los chips), fuera de la franja del joystick */
    position: relative;
    z-index: auto;
    pointer-events: none;
    padding: 4px;
    border-radius: 3px;
    background: var(--hud-plate);
    border: 1px solid var(--hud-edge);
    opacity: 0;
}

#bodyHUD .bp-col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#bodyHUD .bp-row { display: flex; gap: 2px; }

#bodyHUD .bp {
    background: var(--hud-clay);
    border: 1px solid rgba(227, 214, 189, 0.45);
    opacity: 0.8;
    transition: background 0.25s ease;
}
#bodyHUD .bp[data-state="ok"]   { background: var(--hud-clay-hi); }
#bodyHUD .bp[data-state="warn"] { background: var(--hud-rust); }
#bodyHUD .bp[data-state="bad"]  { background: var(--hud-danger); }
#bodyHUD .bp[data-state="gone"] { background: #111; }
body[data-quality="performance"] #bodyHUD .bp { transition: none; }
#bodyHUD .bp-head  { width: 8px;  height: 8px;  border-radius: 50%; }
#bodyHUD .bp-torso { width: 12px; height: 10px; border-radius: 2px; }
#bodyHUD .bp-arm   { width: 5px;  height: 9px;  border-radius: 1px; }
#bodyHUD .bp-leg   { width: 5px;  height: 10px; border-radius: 1px; }

/* Aparición temporal: fade-in suave, se mantiene, fade-out */
#bodyHUD.flash {
    animation: bodyHudFlash 4.5s ease-in-out forwards;
}
@keyframes bodyHudFlash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Parte rota: nunca desaparece del todo; pulso suave y lento */
#bodyHUD.broken {
    animation: bodyHudPulse 3.2s ease-in-out infinite;
}
@keyframes bodyHudPulse {
    0%, 100% { opacity: 0.22; }
    50%      { opacity: 0.6; }
}

/* Parte rota + daño nuevo: flash primero y luego vuelve al pulso */
#bodyHUD.broken.flash {
    animation: bodyHudFlash 4.5s ease-in-out forwards,
               bodyHudPulse 3.2s ease-in-out 4.5s infinite;
}


/* ── PESO (#weightDisplay): oculto; aparece solo al cambiar el valor ──
   Game._weightHudUpdate añade/quita .weight-visible. Fade-out lento, fade-in rápido. */

#weightDisplay {
    opacity: 0;
    transition: opacity 0.6s ease;
}

#weightDisplay.weight-visible {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Cuerpo segmentado en Bajo / movimiento reducido: sin pulso ni fundidos suaves.
   .flash sigue necesitando una animación para "caducar" sola, así que se deja a saltos (steps). */
body[data-quality="performance"] #bodyHUD.flash { animation: bodyHudFlash 4.5s steps(1, end) forwards; }
body[data-quality="performance"] #bodyHUD.broken { animation: none; opacity: 0.45; }
body[data-quality="performance"] #bodyHUD.broken.flash { animation: bodyHudFlash 4.5s steps(1, end) forwards; }
@media (prefers-reduced-motion: reduce) {
  #bodyHUD.broken { animation: none; opacity: 0.45; }
  #bodyHUD.flash { animation: bodyHudFlash 4.5s steps(1, end) forwards; }
  #bodyHUD.broken.flash { animation: bodyHudFlash 4.5s steps(1, end) forwards; }
}

/* Botón de HABILIDADES del cajón móvil: icono arriba, etiqueta debajo (los otros dos botones no se tocan) */
#mobMenuDrawer .mob-btn.mob-drawer-skills { flex-direction: column; gap: 2px; }

/* Guía de controles (solo PC): dos líneas con matiz, en la paleta del tema */
#controlsGuidePanel > div.guide-key { color: rgba(201,151,43,0.5) !important; }
#controlsGuidePanel > div.guide-danger { color: rgba(162,71,61,0.6) !important; }

body[data-quality="performance"] #interactionBar { transition: none; }
@media (prefers-reduced-motion: reduce) { #interactionBar { transition: none; } }