* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #11160f; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
#game { display: block; width: 100vw; height: 100vh; }

/* Menú / Game over */
#overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: rgba(12,16,24,0.9); color: #e9e4d6; z-index: 30; padding: 22px; overflow-y: auto; }
#overlay h1 { font-size: clamp(26px, 6vw, 50px); font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
#overlay .sub { color: #aab2c0; font-size: clamp(13px,2.3vw,16px); margin-bottom: 18px; max-width: 580px; line-height: 1.55; }
/* SAVE-2B: bloque "Continuar"/"Cargar partida" — visibilidad (saveInfoEmpty vs. saveInfoBox)
   resuelta desde JS (ui/overlay.js → refreshSaveInfo()), mismo criterio que nameRow/keys ya
   usan (display inline por JS según la pantalla). #continueBtn en verde para distinguirlo del
   azul de "Nueva partida" (#startBtn) — es la acción "recomendada" cuando existe un guardado. */
#saveInfo { margin-bottom: 16px; }
#saveInfoEmpty { color: #8a93a3; font-size: 13px; }
#saveInfoBox { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#continueBtn { background: #3f8f52; color: #fff; border: none; padding: 12px 30px; font-size: 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
#continueBtn:hover { background: #4aa860; }
.saveInfoCard { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 10px 18px; font-size: 12.5px; color: #cfd6e0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.saveInfoCard h3 { font-size: 12px; color: #ffd98a; font-weight: 600; margin-bottom: 2px; }
#loadBtn { margin-top: 6px; background: rgba(47,109,176,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
#loadBtn:hover { background: rgba(58,126,198,0.75); }

#nameRow { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#nameRow label { font-size: 13px; color: #aab2c0; }
#nameInput { background: #10141d; border: 1px solid #3a4358; color: #e9e4d6; padding: 10px 14px; border-radius: 8px; font-size: 16px; text-align: center; width: 220px; outline: none; }
#nameInput:focus { border-color: #2f6db0; }
#overlay .keys { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 24px; max-width: 560px; margin-bottom: 18px; font-size: 13.5px; color: #cfd6e0; }
#overlay .keys b { color: #ffd98a; font-weight: 600; display: inline-block; min-width: 96px; }
#scoresWrap { width: 100%; max-width: 380px; margin-bottom: 20px; }
#scoresWrap h3 { font-size: 14px; color: #ffd98a; margin-bottom: 8px; font-weight: 600; }
#scoresTable { width: 100%; border-collapse: collapse; font-size: 14px; }
#scoresTable td, #scoresTable th { padding: 5px 8px; text-align: left; }
#scoresTable th { color: #8a93a3; font-weight: 500; font-size: 12px; border-bottom: 1px solid #2a3140; }
#scoresTable td:last-child, #scoresTable th:last-child { text-align: right; }
#scoresTable td:nth-child(3), #scoresTable th:nth-child(3) { text-align: center; }
#scoresTable tr.me td { color: #ffd98a; font-weight: 600; }
#startBtn { background: #2f6db0; color: #fff; border: none; padding: 13px 32px; font-size: 17px; border-radius: 10px; cursor: pointer; font-weight: 600; }
#startBtn:hover { background: #3a7ec6; }
#overlay.hidden { display: none; }
.hint { color: #8a93a3; font-size: 12.5px; margin-top: 14px; max-width: 520px; line-height: 1.5; }

/* Barra superior: salir + modo prueba. Centrada en "left: 50% + 58px" (no 50% a secas): ese
   corrimiento es el centro exacto de la franja libre entre el panel de dinero (termina en
   x=282, ver ui/hud.js) y el minimapa (arranca en W-166) — una franja que se desplaza con el
   ancho de pantalla pero cuyo centro real es SIEMPRE W/2+58, así que con 50% a secas esta
   barra terminaba pisando el panel de dinero en cualquier celular más angosto de ~810px. */
#topBar { display: none; position: fixed; top: 10px; left: calc(50% + 58px); transform: translateX(-50%); z-index: 9; gap: 6px; }
body.playing #topBar { display: flex; }
/* Mochila/tienda son overlays de pantalla completa con su propio título arriba de todo — se
   oculta la barra superior mientras cualquiera de los dos está abierto para no pisarlo. */
body.playing.panelOpen #topBar { display: none; }
#exitBtn, #testModeBtn, #saveBtn, #loadBtnTop { background: rgba(20,26,38,0.72); color: #e9e4d6; border: 1px solid rgba(255,255,255,0.2); padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
#testModeBtn.active { background: rgba(111,192,106,0.3); border-color: rgba(111,192,106,0.65); color: #9be89a; }
/* En celulares angostos ni con el corrimiento de arriba sobra tanto espacio — se esconde el
   texto y queda solo el ícono, mismo criterio que el resto de la adaptación táctil. SAVE-2B:
   umbral subido de 620 a 700 — la barra pasó de 2 a 4 botones (Guardar/Cargar nuevos), así que
   con etiquetas visibles necesita más ancho libre para no invadir el panel de dinero/minimapa
   (ver el comentario de #topBar arriba) en pantallas medianas. */
@media (max-width: 700px) { #topBar .lbl { display: none; } }

/* Controles táctiles. Los números 166/210 de abajo (TOUCH_LEFT_RESERVED/TOUCH_RIGHT_RESERVED
   en ui/hud.js) están calculados a mano a partir del ancho máximo real de #dpad/#actions acá
   abajo (144+10 margen y 186+10 margen respectivamente, con colchón extra) — si se cambia
   el tamaño/posición de cualquiera de los dos acá, hay que revisar esas constantes también,
   si no el arma equipada/hotbar centrados (ver drawWeaponTag/drawHotbar) vuelven a chocar. */
#touchUI { display: none; position: fixed; inset: 0; z-index: 8; pointer-events: none; }
body.touch.playing #touchUI { display: block; }
#dpad { position: absolute; left: 10px; bottom: 10px; width: clamp(110px,20vw,144px); height: clamp(110px,20vw,144px); display: grid;
  grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  grid-template-areas: ". up ." "lf . rt" ". dn ."; gap: 6px; pointer-events: auto; }
/* Grilla fija de 4 columnas, TODAS las 13 acciones visibles a la vez (nada de scroll): una
   tira deslizable se probó antes, pero `touch-action: none` en <body> (más abajo, hace falta
   para que gestos táctiles no interfieran con el juego) bloquea el scroll táctil nativo de
   cualquier hijo salvo que ese hijo reactive `touch-action` explícitamente — en un celular
   real los botones fuera del primer vistazo quedaban simplemente inalcanzables/escondidos.
   Con 4 columnas de 42px la grilla entera mide ~186x186 (mucho menos que los ~454px de alto
   que necesitaba la vieja grilla de 2 columnas) y cabe cómoda en el ancho reservado por
   TOUCH_RIGHT_RESERVED en ui/hud.js. */
#actions { position: absolute; right: 10px; bottom: 10px; width: 186px; display: grid; grid-template-columns: repeat(4,42px); grid-auto-rows: 42px; gap: 6px; pointer-events: auto; }
.tb, .ab { border: 1px solid rgba(255,255,255,0.22); background: rgba(20,26,38,0.3); color: rgba(255,255,255,0.85); border-radius: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; user-select: none; }
.tb { width: 100%; height: 100%; font-size: 20px; }
.tb:active, .ab:active { background: rgba(90,130,180,0.5); }
.tb[data-key=ArrowUp] { grid-area: up; } .tb[data-key=ArrowLeft] { grid-area: lf; }
.tb[data-key=ArrowRight] { grid-area: rt; } .tb[data-key=ArrowDown] { grid-area: dn; }
.ab { width: 42px; height: 42px; font-size: 9px; flex-direction: column; line-height: 1.05; }
.ab .k { font-size: 15px; } .ab .l { font-size: 7px; color: rgba(255,255,255,0.6); }
.ab[data-tap="KeyE"] { background: rgba(47,109,176,0.42); }
.ab.atk { background: rgba(176,60,47,0.42); }

/* Rotar dispositivo */
#rotate { display: none; position: fixed; inset: 0; z-index: 40; background: #0d1018; color: #e9e4d6; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 30px; gap: 12px; }
#rotate .ic { font-size: 52px; animation: tilt 1.6s ease-in-out infinite; }
#rotate p { font-size: 17px; color: #cfd6e0; } #rotate small { color: #8a93a3; }
@keyframes tilt { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }
@media (orientation: portrait) { body.touch.playing #rotate { display: flex; } }