* { box-sizing: border-box; }
html, body { margin: 0; background: #0b0d10; color: #e8e6e1; overflow-x: hidden; height: 100%; }
body { font-family: system-ui, sans-serif; padding: 0 16px; -webkit-tap-highlight-color: transparent; }
#stage { position: relative; display: flex; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; padding-top: 16px; }
#juego { display: block; image-rendering: pixelated; background: #000; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* el joystick flotante: el lienzo no desplaza ni hace zoom; los cuadros encima desplazan en vertical */
#stage { touch-action: none; }
#nombre, #menu, #resumen, #clan-form, #cuenta { overflow: auto; touch-action: pan-y; }

#dpad { position: fixed; z-index: 3; left: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
#dpad[hidden] { display: none; }
#dpad-up { grid-column: 2; grid-row: 1; }
#dpad-left { grid-column: 1; grid-row: 2; }
#dpad-right { grid-column: 3; grid-row: 2; }
#dpad-down { grid-column: 2; grid-row: 3; }
#botones { position: fixed; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 8px; align-items: flex-end; }

.pad {
  width: 56px; height: 56px; padding: 0; border: 2px solid #3a424d; border-radius: 12px;
  background: rgba(26, 31, 38, .55); color: #e8e6e1; font: inherit; font-size: 13px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.pad.pressed, .pad:active { background: #5ed29c; color: #0b0d10; border-color: #5ed29c; transform: scale(0.94); }
.pad:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }

/* monitor (shared/hud.js claseDe): teclado y mando, sin botones en pantalla */
html[data-clase="monitor"] #dpad, html[data-clase="monitor"] #botones { display: none; }

@font-face { font-family: 'Silkscreen'; src: url('../fonts/silkscreen-400.woff2') format('woff2'); font-display: swap; }

/* hud: ver la seccion «HUD (espec. 4c)» al final */

/* pilot name and the placeholder menu, centered over the canvas */
#nombre, #menu {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: min(320px, 100%); padding: 14px; border: 2px solid #3a424d; border-radius: 10px; background: #1a1f26;
}
#nombre { display: flex; flex-direction: column; gap: 8px; }
#nombre h1 { margin: 0; font: 16px 'Silkscreen', monospace; color: #5ed29c; }
#nombre label { font-size: 14px; }
#nombre input, #nombre button { font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; border: 2px solid #3a424d; }
#nombre input { background: #0b0d10; color: #e8e6e1; }
#nombre button { background: #5ed29c; color: #0b0d10; border-color: #5ed29c; cursor: pointer; }
#nombre button:disabled { opacity: .6; }
#nombre input:focus-visible, #nombre button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.nombre-error { margin: 0; min-height: 1.2em; font-size: 13px; color: #ff8a7a; }
#menu { font-size: 14px; }
.base-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 10px; font: 10px 'Silkscreen', monospace; }
.base-tab { flex: 1; padding: 6px 4px; text-align: center; border-bottom: 2px solid #3a424d; color: #9aa0a8; }
.base-tab.activa { color: #5ed29c; border-bottom-color: #5ed29c; }
.base-info { margin: 4px 0; overflow-wrap: anywhere; }
.base-fila { min-height: 44px; box-sizing: border-box; cursor: pointer; margin-top: 8px; padding: 10px; border: 2px solid #3a424d; border-radius: 8px; background: #0b0d10; }
.base-fila.foco { outline: 3px solid #f2c14e; outline-offset: 2px; }
.base-fila[aria-disabled="true"] { opacity: .5; }

/* first minutes: arrow until the first dig, card for the first rare ore */
#guia { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; font: calc(10px * var(--hud-k, 1)) 'Silkscreen', monospace; color: #ffe9a8; text-shadow: 1px 1px 0 #000; }
/* a la escala del HUD (2 en el monitor): a 1920 se leia en unos 8 px */
#guia i { font-style: normal; font-size: calc(22px * var(--hud-k, 1)); animation: guia-baja 0.9s steps(2) infinite; }
@keyframes guia-baja { 50% { transform: translateY(calc(6px * var(--hud-k, 1))); } }
#tarjeta { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 1; max-width: 90%; padding: 10px 14px; border: 2px solid #f2c14e; border-radius: 8px; background: #1a1f26; color: #ffe9a8; font: 11px 'Silkscreen', monospace; text-align: center; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #guia i { animation: none; } }
/* 0.7.0, pista 1: la guia al agua, arriba del escenario y aparte de la flecha de cavar; la flecha gira hacia el bolson */
#guia-agua { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--hud-k, 1)); pointer-events: none; font: calc(10px * var(--hud-k, 1)) 'Silkscreen', monospace; color: #9ad7ff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
#guia-agua i { display: block; width: calc(22px * var(--hud-k, 1)); height: calc(22px * var(--hud-k, 1)); transform-origin: 50% 50%; }
#guia-agua svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; filter: drop-shadow(1px 1px 0 #000); }

/* news: the tab body */
.base-novedades { max-height: 50vh; overflow-y: auto; }
.novedad h3 { margin: 0 0 2px; font: 12px 'Silkscreen', monospace; color: #ffe9a8; }
.novedad-meta { margin: 0 0 6px; font-size: 12px; color: #9aa0a8; }
.novedad ul { margin: 0; padding-left: 18px; }
.novedad li { margin-bottom: 6px; }

/* pestana Base: el panel crece hasta el borde y desplaza por dentro */
#menu { max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box; }
/* a 390 el menu (320 px centrado) pisaba el recuadro de nivel: en pantallas angostas empieza debajo de el */
@media (max-width: 520px) {
  #menu { top: calc(max(12px, env(safe-area-inset-top)) + 72px); max-height: calc(100% - max(12px, env(safe-area-inset-top)) - 88px); }
}
.base-tab { padding: 6px 1px; font-size: 8px; flex: 1 0 auto; }
/* siete pestanas: a 390 px pasan a dos lineas en vez de cortarse */
.base-tabs { flex-wrap: wrap; row-gap: 4px; }
#resumen {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(320px, 100%); max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box;
  padding: 14px; border: 2px solid #f2c14e; border-radius: 10px; background: #1a1f26; font-size: 14px;
}
/* fundar clan: el mismo cuadro que el del nombre, por encima del menu */
#clan-form {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(320px, 100%); max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px solid #3a424d; border-radius: 10px; background: #1a1f26; font-size: 14px;
}
#clan-form h2 { margin: 0; font: 12px 'Silkscreen', monospace; color: #5ed29c; }
#clan-form input[type=text], #clan-form button { font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; border: 2px solid #3a424d; }
#clan-form input[type=text] { background: #0b0d10; color: #e8e6e1; }
#clan-form button { background: #5ed29c; color: #0b0d10; border-color: #5ed29c; cursor: pointer; }
#clan-form button.clan-cancelar { background: #0b0d10; color: #e8e6e1; border-color: #3a424d; }
#clan-form input:focus-visible, #clan-form button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.clan-colores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 6px; border: 2px solid #3a424d; border-radius: 8px; }
.clan-colores legend { padding: 0 4px; font-size: 13px; }
.clan-color { position: relative; }
.clan-color input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.clan-color span { display: block; width: 26px; height: 26px; border-radius: 6px; background: var(--c); border: 2px solid #0b0d10; }
.clan-color input:checked + span { border-color: #e8e6e1; }
.clan-color input:focus-visible + span { outline: 3px solid #f2c14e; outline-offset: 2px; }
.clan-costo { margin: 0; font-size: 13px; color: #9aa0a8; }
#resumen h2 { margin: 0 0 8px; font: 12px 'Silkscreen', monospace; color: #ffe9a8; }

/* «Guardar con mi correo»: formulario encima del menu (sobre el z-index 2 de #menu) */
#cuenta {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 4;
  width: min(320px, 100%); max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 2px solid #5ed29c; border-radius: 10px; background: #1a1f26; font-size: 14px;
}
.cuenta-titulo { margin: 0; font: 12px 'Silkscreen', monospace; color: #5ed29c; }
.cuenta-texto, .cuenta-nota { margin: 0; }
.cuenta-nota { color: #ffe9a8; }
#cuenta input, #cuenta button { font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; border: 2px solid #3a424d; }
#cuenta input { background: #0b0d10; color: #e8e6e1; }
#cuenta button { background: #0b0d10; color: #e8e6e1; cursor: pointer; }
#cuenta button.cuenta-ok { background: #5ed29c; color: #0b0d10; border-color: #5ed29c; }
#cuenta button:disabled { opacity: .6; }
#cuenta input:focus-visible, #cuenta button:focus-visible, #cuenta button:focus { outline: 3px solid #f2c14e; outline-offset: 2px; }
.cuenta-error { margin: 0; min-height: 1.2em; font-size: 13px; color: #ff8a7a; }
/* con la pestana Cuenta son siete: en un telefono la fila se parte en dos en vez de cortar la ultima */
.base-tabs { flex-wrap: wrap; row-gap: 4px; }
#tarjeta.con-boton { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#tarjeta button { font: 10px 'Silkscreen', monospace; color: #0b0d10; background: #f2c14e; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
#tarjeta button:disabled { opacity: .6; }


/* ================= HUD (espec. 4c) =================
   una estructura, dos disposiciones: data-hud="b" (telefono, semidiegetico) y "a" (monitor, esquinas).
   La capa cubre la ventana en px del HUD y se escala con --hud (1 a 2, hud.js); los margenes respetan las
   zonas seguras. Solo el engranaje, su menu y el pedido reciben toques; el resto deja pasar al lienzo */
#hud {
  --oro: #ffe9a8; --verde: #5ed29c; --tenue: #9aa0a8; --borde: #3a424d; --comb: #ffb347; --arm: #5aa9e6; --ped: #ffd27a;
  --mt: max(12px, calc(env(safe-area-inset-top) / var(--hud, 1)));
  --mr: max(12px, calc(env(safe-area-inset-right) / var(--hud, 1)));
  --mb: max(12px, calc(env(safe-area-inset-bottom) / var(--hud, 1)));
  --ml: max(12px, calc(env(safe-area-inset-left) / var(--hud, 1)));
  --cas: min(44px, calc((var(--w, 390px) - 22px) / 8)); /* bajo 390 px se comen primero los margenes, luego la casilla */
  position: fixed; left: 0; top: 0; z-index: 1; width: 100vw; height: 100vh;
  transform: scale(var(--hud, 1)); transform-origin: 0 0; pointer-events: none;
  color: #e8e6e1; font: 600 13px/1.15 system-ui, sans-serif;
}
#hud > * { position: absolute; }
#hud .hud-defs { width: 0; height: 0; overflow: hidden; }
#hud [hidden] { display: none !important; }
#hud .n { font: 16px/1 'Silkscreen', monospace; }
#hud .l { font: 600 13px/1.1 system-ui, sans-serif; }
#hud .chico { font: 600 12px/1 system-ui, sans-serif; color: var(--tenue); }
#hud .g { width: 16px; height: 16px; flex: none; display: block; shape-rendering: crispEdges; }
#hud .caja { background: rgba(11, 13, 16, .45); border-radius: 6px; text-shadow: 0 0 3px #000, 1px 1px 0 #000; }
#hud .barra { position: relative; display: block; height: 5px; background: rgba(0, 0, 0, .6); outline: 1px solid rgba(0, 0, 0, .6); }
#hud .barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); }
/* 0.6.3: el fantasma del blindaje, detras del tramo lleno: al bajar espera 400 ms y se vacia en 300 ms (al subir,
   hud.js le quita la transicion) */
#hud .barra .fantasma { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #cfe8ff; transition: width 300ms linear 400ms; }
/* a 30 % o menos el escudo sale roto: la forma dice el peligro, no solo el color */
#hud .hud-arm .g.roto, #hud .hud-arm.grieta .g.entero { display: none; }
#hud .hud-arm.grieta .g.roto { display: block; }
/* muescas cada 25 %: el nivel bajo se lee por la forma, no solo por el color */
#hud .barra::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, .7) calc(25% - 1px) 25%); }
#hud button { font: inherit; color: inherit; margin: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
#hud button:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
#hud .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px #0b0d10; flex: none; }

/* nivel y xp, arriba a la izquierda */
.hud-nv { left: var(--ml); top: var(--mt); width: 84px; height: 34px; padding: 5px 8px 0; display: flex; flex-direction: column; gap: 5px; border-radius: 6px 6px 0 0 !important; }
.hud-nivel .n { color: var(--verde); }
.hud-xp-fila { display: flex; align-items: center; gap: 6px; }
.hud-xp { position: relative; display: block; width: 66px; height: 4px; background: rgba(0, 0, 0, .6); outline: 1px solid rgba(0, 0, 0, .6); }
.hud-xp i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--verde); }
.hud-xp-pct { display: none; }
/* copia fija de combustible y blindaje: debajo del nivel en B */
.hud-vital { left: var(--ml); top: calc(var(--mt) + 34px); width: 84px; height: 34px; padding: 3px 8px 5px; display: flex; flex-direction: column; gap: 2px; border-radius: 0 0 6px 6px !important; }
.hud-v { display: flex; align-items: center; gap: 4px; height: 12px; }
#hud .hud-v .g { width: 12px; height: 12px; }
.hud-v .barra { width: 52px; }
.hud-comb { --c: var(--comb); } .hud-arm { --c: var(--arm); }
/* 0.7.0: el agua, entre el combustible y el blindaje. En B la caja no crece: la cobertura del HUD fijo ya estaba en
   11,9 % del tope de 12 % y una fila mas lo pasaba (12,3 %) y tocaba el menu del campamento a 390. Las tres filas van
   de 8 px con el glifo a 1:1 (sus 8x8 nitidos) en el mismo alto de 34 px */
.hud-agua { --agua: #3ec6e0; --c: var(--agua); }
#hud[data-agua="1"] .hud-vital { padding: 3px 8px; }
#hud[data-agua="1"] .hud-v { height: 8px; }
#hud[data-agua="1"] .hud-v .g { width: 8px; height: 8px; }
.hud-v .pct { display: none; }
.hud-v.bajo .barra { outline-color: #ff8a5c; }
.hud-v.bajo .pct { color: #ff8a5c; }

/* creditos, metros y engranaje, arriba a la derecha */
.hud-der { right: var(--mr); top: var(--mt); display: flex; gap: 6px; align-items: flex-start; }
.hud-cuenta { height: 44px; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; white-space: nowrap; }
.hud-dinero { color: var(--oro); }
.hud-eng-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; display: grid; place-items: center; }
#hud .hud-eng-btn .g { width: 20px; height: 20px; }
.hud-eng-btn .punto { position: absolute; right: 7px; top: 7px; }
.hud-eng-btn[aria-expanded="true"] { outline: 1px solid var(--verde); }
.hud-eng-menu { right: var(--mr); top: calc(var(--mt) + 52px); z-index: 2; width: min(300px, calc(var(--w, 390px) - 120px)); padding: 4px 0; pointer-events: auto; background: rgba(11, 13, 16, .92) !important; border: 1px solid var(--borde); }
.hud-eng-menu > * { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.eng-sonido { flex-wrap: wrap; padding-top: 6px !important; padding-bottom: 6px !important; }
.eng-fila { width: 100%; border: 0; border-top: 1px solid rgba(58, 66, 77, .6); background: none; text-align: left; font: 600 14px system-ui, sans-serif !important; }
.eng-fila .chico { margin-left: auto; }
#hud .chip { min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borde); background: none; color: var(--tenue); font: 600 12px system-ui, sans-serif; }
#hud .chip.si { border-color: #9ad7ff; color: #9ad7ff; }

/* pedido del mundo: icono y cifra; tocarlo despliega la linea entera */
.hud-pedido { left: 50%; transform: translateX(-50%); top: calc(var(--mt) + 76px); height: 32px; padding: 0 8px; border: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ped) !important; }
.hud-pedido::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } /* toque de 44 px */
.hud-pedido .ped-largo { display: none; font: 600 13px system-ui, sans-serif; }
.hud-pedido.abierto .ped-largo { display: inline; }
.hud-pedido.abierto .ped-corto { display: none; }
.hud-pedido .flecha { color: var(--tenue); }
.ped-corto .u { font: 600 12px system-ui, sans-serif; }
/* de que es el pedido, en letra chica y la caja mas baja: la cobertura del HUD fijo no pasa del 12 % */
.ped-corto .min { font: 600 11px system-ui, sans-serif; color: var(--tenue); }
#hud[data-hud="b"] .hud-pedido { height: 28px; padding: 0 5px; gap: 4px; }
#hud[data-hud="b"] .hud-pedido::before { top: -8px; bottom: -8px; }
/* telefono en horizontal: el centro de arriba es el pozo del jugador; el pedido baja a la columna izquierda, debajo
   del nivel y las barras (el joystick vive en el cuarto de abajo) */
@media (orientation: landscape) { #hud[data-hud="b"] .hud-pedido { left: var(--ml); transform: none; } }

/* un solo toast, por encima de la zona del joystick (el cuarto inferior izquierdo) */
.hud-estado { left: 50%; transform: translateX(-50%); bottom: calc(25% + 8px); max-width: calc(100% - 24px); width: max-content; padding: 6px 12px; border-radius: 6px; background: rgba(11, 13, 16, .88); color: var(--oro); text-align: center; font: 600 14px/1.3 system-ui, sans-serif; text-shadow: 1px 1px 0 #000; }
.hud-estado:empty { display: none; }
.hud-estado[data-nivel="2"] { border: 1px solid rgba(255, 233, 168, .45); }

/* mochila: 8 casillas abajo al centro, el cupo usado en la linea de arriba; se atenua sin cambios */
.hud-bodega { left: 50%; transform: translateX(-50%); bottom: var(--mb); transition: opacity .25s; }
.hud-bodega.reposo { opacity: var(--bag-dim, .4); }
/* el cupo usado: una linea de 3 px sobre el borde de arriba de las casillas (no suma alto a la fila) */
.hud-cap { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 3px; background: rgba(0, 0, 0, .6); border-radius: 4px 4px 0 0; overflow: hidden; }
.hud-cap i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--verde); }
.hud-bodega.lleno .hud-cap i { background: #ff8a5c; }
.hud-casillas { display: flex; gap: 2px; }
.casilla { position: relative; width: var(--cas); height: var(--cas); display: grid; place-items: center; background: rgba(11, 13, 16, .5); border: 1px solid rgba(58, 66, 77, .7); border-radius: 4px; }
.hud-bodega.lleno .casilla { border-color: rgba(255, 138, 92, .7); }
.casilla svg { width: 24px; height: 24px; shape-rendering: crispEdges; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
.casilla b { position: absolute; right: 3px; bottom: 1px; font: 700 12px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000; }
.casilla.pulso { border-color: #fff; box-shadow: 0 0 0 2px var(--verde); }

.hud-teclas { right: var(--mr); bottom: var(--mb); padding: 4px 8px; line-height: 1.6 !important; text-align: right; border-radius: 6px; background: rgba(11, 13, 16, .8); color: #e8e6e1 !important; white-space: nowrap; }
.hud-teclas kbd { font: 600 12px system-ui, sans-serif; border: 1px solid var(--borde); border-radius: 3px; padding: 0 4px; background: rgba(11, 13, 16, .6); }

/* 0.7.6: soporte de barriles, un cuadro por cupo que se llena desde abajo con el color del liquido. En B va a la
   derecha de la caja de las barras (su ancho no cambia); en A, debajo del nivel, lejos de la fila de abajo */
.hud-barriles { left: calc(var(--ml) + 90px); top: calc(var(--mt) + 34px); height: 34px; padding: 4px 6px; display: flex; gap: 3px; align-items: stretch; }
.barril { position: relative; width: 11px; background: rgba(0, 0, 0, .6); outline: 1px solid rgba(232, 230, 225, .55); border-radius: 2px; overflow: hidden; }
.barril i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--c, transparent); }
.barril.libre { outline: 1px dashed rgba(232, 230, 225, .25); background: transparent; }
#hud[data-hud="a"] .hud-barriles { top: calc(var(--mt) + 58px); height: 40px; padding: 6px 8px; gap: 4px; }
#hud[data-hud="a"] .barril { width: 14px; }

/* ---- A: monitor, esquinas con caja oscura, escala 2 ---- */
#hud[data-hud="a"] .caja { background: rgba(11, 13, 16, .76); border: 1px solid var(--borde); }
#hud[data-hud="a"] .hud-nv { width: auto; height: auto; padding: 6px 10px; gap: 6px; border-radius: 6px !important; }
#hud[data-hud="a"] .hud-xp { width: 96px; height: 6px; }
#hud[data-hud="a"] .hud-xp-pct { display: inline; }
#hud[data-hud="a"] .hud-vital { top: auto; bottom: var(--mb); width: auto; height: auto; padding: 8px 10px; gap: 8px; border-radius: 6px !important; }
#hud[data-hud="a"] .hud-v { gap: 6px; height: 16px; }
#hud[data-hud="a"] .hud-v .g { width: 16px; height: 16px; }
#hud[data-hud="a"] .hud-v .barra { width: 140px; height: 8px; }
#hud[data-hud="a"] .hud-v .pct { display: inline; min-width: 3.5em; }
#hud[data-hud="a"] .hud-pedido { top: var(--mt); height: 36px; max-width: calc(var(--w, 960px) - 480px); }
#hud[data-hud="a"] .hud-pedido .ped-largo { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#hud[data-hud="a"] .hud-estado { bottom: calc(var(--mb) + 47px + 12px); }
/* 0.7.0: con el agua la caja de las barras crece una fila; el toast (el consejo del agua ocupa todo el ancho) sube por
   encima de ella y de la pista de teclado (--pila, medido en hud.js) */
#hud[data-hud="a"][data-agua="1"] .hud-estado { bottom: calc(var(--mb) + var(--pila, 96px)); }
/* 0.5.3: ventana de monitor tan angosta que ni a escala 1 caben la mochila y los costados en una fila (hud.js fit):
   las barras fijas y la pista suben encima de la mochila, y el toast encima de ellas */
#hud[data-hud="a"][data-fila="apilada"] .hud-vital, #hud[data-hud="a"][data-fila="apilada"] .hud-teclas { bottom: calc(var(--mb) + var(--fila, 54px)); }
#hud[data-hud="a"][data-fila="apilada"] .hud-estado { bottom: calc(var(--mb) + var(--fila, 54px) + var(--pila, 66px)); }

/* ---- B: botones Menu y Accion abajo a la derecha, encima de la mochila; la cruceta (opcional) tambien sube ---- */
html[data-clase="telefono"] #botones { right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 59px); }
html[data-clase="telefono"] #btn-menu { width: 52px; height: 44px; font-size: 15px; font-weight: 600; background: rgba(26, 31, 38, .45); }
html[data-clase="telefono"] #btn-accion { width: 56px; height: 56px; font-size: 12px; font-weight: 600; border-color: #5ed29c; color: #5ed29c; background: rgba(26, 31, 38, .45); }
html[data-clase="telefono"] #btn-accion.pressed, html[data-clase="telefono"] #btn-accion:active { color: #0b0d10; }
html[data-clase="telefono"] #dpad { left: max(16px, env(safe-area-inset-left)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 59px); }

/* ---- «Te apagaste» (0.6.3): cubre y atenua el HUD, la cruceta y los botones; en el telefono, abajo al alcance del pulgar ---- */
#muerte {
  position: fixed; inset: 0; z-index: 6; display: flex; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(5, 6, 8, .74); touch-action: pan-y; animation: muerte-entra 220ms ease-out;
}
.muerte-caja { width: min(380px, 100%); margin: auto; padding: 16px; border: 2px solid #ff6a4d; border-radius: 10px; background: #1a1f26; color: #e8e6e1; font-size: 15px; line-height: 1.35; }
/* margin auto centra sin cortar arriba si no cabe; en el telefono la caja baja al borde del pulgar */
html[data-clase="telefono"] .muerte-caja { margin: auto auto 0; }
@media (max-width: 600px) { .muerte-caja { margin: auto auto 0; } }
#muerte h2 { margin: 0 0 8px; font: 16px 'Silkscreen', monospace; color: #ff8a5c; }
.muerte-causa { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #fff; }
.muerte-desglose, .muerte-donde { margin: 2px 0; font-size: 14px; color: #b9bec6; }
.muerte-chatarra { margin: 12px 0 10px; padding: 8px 10px; border-left: 3px solid #f2c14e; border-radius: 4px; background: #0b0d10; }
.muerte-chatarra.perdida { border-left-color: #6b7380; }
.muerte-chatarra p { margin: 0; }
.muerte-cuenta { margin-top: 4px !important; font: 12px 'Silkscreen', monospace; color: #f2c14e; }
.muerte-conserva { margin: 0; font-size: 14px; color: #5ed29c; }
.muerte-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.muerte-botones button { min-height: 48px; padding: 10px; font: 600 16px system-ui, sans-serif; border: 2px solid #3a424d; border-radius: 8px; background: #0b0d10; color: #e8e6e1; cursor: pointer; touch-action: manipulation; }
.muerte-botones .muerte-volver { background: #5ed29c; border-color: #5ed29c; color: #0b0d10; }
.muerte-botones .muerte-marcar { border-color: #f2c14e; color: #f2c14e; }
.muerte-botones button.foco, .muerte-botones button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
/* monitor grande: el HUD crece con la ventana y la caja tambien, para que la causa se lea de lejos */
@media (min-width: 1200px) and (min-height: 760px) {
  .muerte-caja { width: 520px; padding: 22px; font-size: 19px; }
  #muerte h2 { font-size: 20px; }
  .muerte-causa { font-size: 27px; }
  .muerte-desglose, .muerte-donde, .muerte-conserva { font-size: 18px; }
  .muerte-cuenta { font-size: 15px; }
  .muerte-botones button { min-height: 56px; font-size: 20px; }
}
@keyframes muerte-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes muerte-funde { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #muerte { animation: muerte-funde 200ms linear; } }