/* mobile-controls.css — Controles táctiles móviles (ronda U3b)
   Paleta "refugio oxidado" (mismos valores que hud.css / theme-menu.css). Sin neón, sin verde, sin emojis.
   POSICIONES: las manda este CSS (rejilla de 2 columnas en arco, abajo a la derecha). Game._applyDefaultMobilePreset
   ya no escribe left/top inline; solo las posiciones guardadas desde el editor de HUD (jetset_hud_layout) los pisan.
   QUÉ BOTONES SE VEN: js/input.js → MOB_BTN_SET (clase .mob-off = display:none; el elemento sigue en el DOM). */

:root{
  --mc-bone:#e3d6bd;
  --mc-clay:#9a8b72;
  --mc-clay-hi:#cdbfa5;
  --mc-paint:#c9972b;
  --mc-paint-hi:#d6a634;
  --mc-blood:#a2473d;
  --mc-danger:#c2493a;
  --mc-type:'Special Elite','Courier New',monospace;
  /* Estilo por defecto (mobBtnStyle = default). glass / dark solo reasignan estas variables. */
  --mc-btn-bg:rgba(14,12,9,0.62);
  --mc-btn-edge:rgba(227,214,189,0.24);
  --mc-btn-ink:var(--mc-clay-hi);
  --mc-btn-on-bg:rgba(34,27,19,0.86);
  --mc-btn-on-edge:rgba(227,214,189,0.62);
  --mc-fire-bg:rgba(88,30,25,0.72);
  --mc-fire-edge:rgba(194,73,58,0.62);
  --mc-use-bg:rgba(86,62,16,0.86);
  --mc-use-edge:var(--mc-paint);
  --mc-use-ink:#ecd28e;
}

#mobileControls{
  display:none;position:absolute;top:auto;bottom:0;left:0;
  /* El contenedor se escala desde abajo-izquierda; se compensa el tamaño para que el borde derecho siga en pantalla con cualquier --ui-scale */
  width:calc(100% / var(--ui-scale, 1));height:calc(100% / var(--ui-scale, 1));
  pointer-events:none;z-index:90;transform:scale(var(--ui-scale, 1));transform-origin:bottom left;

  /* Medidas de la rejilla. --mc-u = botón base: manda --mob-btn-size, con mínimo 44 px y tope para que
     las 3 filas de la columna más alta (3,75 u) quepan bajo la franja de HUD superior (112 px). */
  --mc-m:min(var(--mob-margin, 20px), 12vh);
  --mc-top:calc(112px / var(--ui-scale, 1));
  --mc-u:max(44px, min(var(--mob-btn-size, 52px), calc((100vh / var(--ui-scale, 1) - var(--mc-top) - var(--mc-m)) / 3.75)));
  --mc-g:calc(var(--mc-u) * 0.12);
  --mc-fire:calc(var(--mc-u) * 1.5);
  --mc-use:calc(var(--mc-u) * 1.15);
  --mc-r:calc(var(--mc-m) + env(safe-area-inset-right, 0px));
  --mc-b:calc(var(--mc-m) + env(safe-area-inset-bottom, 0px));
  --mc-x2:calc(var(--mc-r) + var(--mc-fire) + var(--mc-g));   /* columna interior */
  --mc-x3:calc(var(--mc-x2) + var(--mc-use) + var(--mc-g));   /* columna de reserva (botones reactivados) */
  --mc-x4:calc(var(--mc-x3) + var(--mc-u) + var(--mc-g));
}

/* ── Joystick y D-pad ── */

.joystick-area{position:absolute;bottom:calc(var(--mob-margin) + env(safe-area-inset-bottom, 0px));left:calc(var(--mob-margin) + env(safe-area-inset-left, 0px));width:140px;height:140px;background:rgba(227,214,189,0.05);border:2px solid rgba(227,214,189,0.16);border-radius:50%;pointer-events:auto;touch-action:none;}

.joystick-handle{position:absolute;top:50%;left:50%;width:50px;height:50px;background:rgba(227,214,189,0.26);border:2px solid rgba(227,214,189,0.5);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;}

.dpad-container{position:absolute;bottom:calc(var(--mob-margin) + env(safe-area-inset-bottom, 0px));left:calc(var(--mob-margin) + env(safe-area-inset-left, 0px));width:160px;height:160px;pointer-events:auto;display:none;touch-action:none;}

.dpad-btn{position:absolute;width:50px;height:50px;background:var(--mc-btn-bg);border:1px solid var(--mc-btn-edge);display:flex;justify-content:center;align-items:center;font-size:22px;color:var(--mc-clay-hi);touch-action:none;user-select:none;-webkit-user-select:none;}

.dpad-btn:active{background:var(--mc-btn-on-bg);border-color:var(--mc-btn-on-edge);}

.dpad-up{top:0;left:55px;}

.dpad-down{bottom:0;left:55px;}

.dpad-left{top:55px;left:0;}

.dpad-right{top:55px;right:0;}

/* ── Botones de acción ── */

.mob-btn{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
  box-sizing:border-box;border-radius:50%;
  background:var(--mc-btn-bg);border:1px solid var(--mc-btn-edge);color:var(--mc-btn-ink);
  font:700 max(9px, min(11px, calc(var(--mc-u, 52px) * 0.2)))/1 var(--mc-type);
  letter-spacing:0.04em;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,0.85);
  box-shadow:0 1px 3px rgba(0,0,0,0.55);
  pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:opacity 0.12s, transform 0.12s, background-color 0.12s, border-color 0.12s;
}

#mobileControls .mob-btn{position:absolute;width:var(--mc-u);height:var(--mc-u);opacity:0.86;}

.mob-btn::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background-image:radial-gradient(ellipse at 30% 20%,rgba(0,0,0,0.28) 0%,transparent 45%),radial-gradient(ellipse at 70% 70%,rgba(0,0,0,0.18) 0%,transparent 50%);}

.mob-btn:active{transform:scale(0.94);background:var(--mc-btn-on-bg);border-color:var(--mc-btn-on-edge);}

#mobileControls .mob-btn:active{opacity:1;}

@media (hover:hover){
  #mobileControls .mob-btn:hover{opacity:1;border-color:var(--mc-btn-on-edge);}
}

.mob-lbl{display:block;position:relative;max-width:94%;text-align:center;white-space:nowrap;pointer-events:none;}

/* Botones ocultos por MOB_BTN_SET (siguen en el DOM; el JS los lee) */
.mob-off{display:none !important;}

/* ── Rejilla de los 6 botones siempre visibles (esquema ASCII en el informe) ── */

#mobileControls #fireBtn{
  width:var(--mc-fire);height:var(--mc-fire);right:var(--mc-r);bottom:var(--mc-b);opacity:0.94;
  background:var(--mc-fire-bg);border:2px solid var(--mc-fire-edge);color:var(--mc-bone);
}
#mobileControls #reloadBtn{right:calc(var(--mc-r) + (var(--mc-fire) - var(--mc-u)) / 2);bottom:calc(var(--mc-b) + var(--mc-fire) + var(--mc-g));}
#mobileControls #flashBtn{right:calc(var(--mc-r) + (var(--mc-fire) - var(--mc-u)) / 2);bottom:calc(var(--mc-b) + var(--mc-fire) + var(--mc-u) + var(--mc-g) * 2);}
#mobileControls #interactBtn{
  width:var(--mc-use);height:var(--mc-use);right:var(--mc-x2);bottom:var(--mc-b);
}
#mobileControls #aimBtn{right:calc(var(--mc-x2) + (var(--mc-use) - var(--mc-u)) / 2 - var(--mc-u) * 0.10);bottom:calc(var(--mc-b) + var(--mc-use) + var(--mc-g));}
#mobileControls #crouchBtn{right:calc(var(--mc-x2) + (var(--mc-use) - var(--mc-u)) / 2 - var(--mc-u) * 0.25);bottom:calc(var(--mc-b) + var(--mc-use) + var(--mc-u) + var(--mc-g) * 2);}

/* ── Botones de reserva (ocultos por defecto): columnas 3 y 4, por si se reactivan con MOB_BTN_SET ── */

#mobileControls #sprintBtn{right:var(--mc-x3);bottom:var(--mc-b);}
#mobileControls #swapBtn{right:var(--mc-x3);bottom:calc(var(--mc-b) + var(--mc-u) + var(--mc-g));}
#mobileControls #dashBtn{right:var(--mc-x3);bottom:calc(var(--mc-b) + (var(--mc-u) + var(--mc-g)) * 2);}
#mobileControls #inspectBtn{right:var(--mc-x3);bottom:calc(var(--mc-b) + (var(--mc-u) + var(--mc-g)) * 3);}
#mobileControls #lootPickupBtn{right:var(--mc-x4);bottom:var(--mc-b);}
#mobileControls #mobObjBtn{right:var(--mc-x4);bottom:calc(var(--mc-b) + var(--mc-u) + var(--mc-g));}
#mobileControls #mobInventoryBtn{right:var(--mc-x4);bottom:calc(var(--mc-b) + (var(--mc-u) + var(--mc-g)) * 2);}

/* ── Estados ── */

/* Interruptores (apuntar, linterna, sprint manual): borde hueso, nunca ocre (el ocre es solo de USE) */
#mobileControls #aimBtn.active,
#mobileControls #flashBtn.active,
#mobileControls #sprintBtn.active{background:var(--mc-btn-on-bg);border-color:var(--mc-btn-on-edge);color:var(--mc-bone);opacity:1;}

/* USE: gris/tierra en reposo; ocre solo cuando hay acción (.pulse lo pone game-core cerca de puerta/panel/generador; data-ctx = loot/inspect) */
#mobileControls #interactBtn{color:var(--mc-clay);}
#mobileControls #interactBtn.pulse,
#mobileControls #interactBtn[data-ctx]{background:var(--mc-use-bg);border:2px solid var(--mc-use-edge);color:var(--mc-use-ink);opacity:1;}

#interactLabel{display:none;max-width:92%;text-align:center;white-space:normal;line-height:1.05;pointer-events:none;}
#interactLabel:not(:empty){display:block;}
#interactLabel:not(:empty) ~ .mob-lbl{display:none;}
.mob-lbl-loot,.mob-lbl-inspect{display:none;}
#interactBtn[data-ctx="loot"] #interactLabel,
#interactBtn[data-ctx="inspect"] #interactLabel{display:none;}
#interactBtn[data-ctx="loot"] .mob-lbl-base,
#interactBtn[data-ctx="inspect"] .mob-lbl-base,
#interactBtn[data-ctx="loot"] .mob-lbl-inspect,
#interactBtn[data-ctx="inspect"] .mob-lbl-loot{display:none;}
#interactBtn[data-ctx="loot"] .mob-lbl-loot,
#interactBtn[data-ctx="inspect"] .mob-lbl-inspect{display:block;}

/* DASH (reactivable): barra de recarga dentro del botón; su ancho lo escribe el JS existente */
.mob-dash-track{width:70%;height:3px;background:rgba(227,214,189,0.16);border-radius:2px;overflow:hidden;pointer-events:none;}
#dashCooldownBar{height:100%;width:100%;background:var(--mc-bone);}
#dashBtn[disabled]{opacity:0.35 !important;}

/* ── Semipermanentes y contextuales ── */

.mob-semi-perm{opacity:0.66 !important;}
.mob-semi-perm:active,.mob-semi-perm.active{opacity:1 !important;}

.mob-contextual{opacity:0 !important;pointer-events:none !important;transition:opacity 0.22s ease !important;}
.mob-contextual.v2-ctx-show{opacity:1 !important;pointer-events:auto !important;}

/* ── Estilos elegidos en Ajustes (mobBtnStyle): solo reasignan las variables ── */

#mobileControls.mob-style-glass{
  --mc-btn-bg:rgba(227,214,189,0.10);--mc-btn-edge:rgba(227,214,189,0.38);--mc-btn-ink:#f1e8d6;
  --mc-btn-on-bg:rgba(227,214,189,0.22);--mc-btn-on-edge:rgba(241,232,214,0.7);
  --mc-fire-bg:rgba(162,71,61,0.34);--mc-fire-edge:rgba(226,120,104,0.62);
  --mc-use-bg:rgba(201,151,43,0.30);--mc-use-edge:rgba(214,166,52,0.8);--mc-use-ink:#f6e3ab;
}
#mobileControls.mob-style-glass .mob-btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* "Verde Oscuro" en el menú: sin verde (rojo-tierra oscuro, regla de la ronda) */
#mobileControls.mob-style-dark{
  --mc-btn-bg:rgba(8,6,4,0.9);--mc-btn-edge:rgba(154,139,114,0.5);--mc-btn-ink:var(--mc-bone);
  --mc-btn-on-bg:rgba(40,31,21,0.95);--mc-btn-on-edge:rgba(227,214,189,0.7);
  --mc-fire-bg:rgba(66,22,18,0.92);--mc-fire-edge:rgba(194,73,58,0.7);
  --mc-use-bg:rgba(70,50,12,0.94);
}

/* Calidad baja y movimiento reducido: sin transiciones, sombras ni desenfoque */
body[data-quality="performance"] .mob-btn,
body[data-quality="performance"] #mobileControls .mob-btn{transition:none;box-shadow:none;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
body[data-quality="performance"] .mob-btn::before{display:none;}
body[data-quality="performance"] .mob-contextual{transition:none !important;}
@media (prefers-reduced-motion: reduce){
  .mob-btn,#mobileControls .mob-btn,.mob-contextual{transition:none !important;}
  .mob-btn:active{transform:none;}
}

/* ── Táctil: tocar el panel de arma (#hudAmmoCluster) cambia de arma (lógica en js/input.js) ── */

body.hud-touch.mob-swap-ammo #hudAmmoCluster{pointer-events:auto;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;min-width:44px;min-height:44px;box-sizing:border-box;}
body.hud-touch.mob-swap-ammo #hudAmmoCluster:active{background:rgba(52,40,24,0.86);border-left-color:var(--mc-bone);}

/* Indicadores sueltos que caían en la zona del pulgar (estilos inline de index.html; se reubican con !important) */
body.hud-touch #weaponConditionBar{bottom:12px !important;right:auto !important;left:50% !important;transform:translateX(-50%);}
body.hud-touch #weaponConditionDisplay{bottom:20px !important;right:auto !important;left:50% !important;transform:translateX(-50%);}
body.hud-touch #weightDisplay{bottom:34px !important;right:auto !important;left:50% !important;transform:translateX(-50%);}

/* ── Botón "+" y cajón (inventario, objetivos, habilidades, spray) ── */

#mobMenuToggleBtn{
  position:fixed;top:calc(14px + env(safe-area-inset-top, 0px));left:calc(14px + env(safe-area-inset-left, 0px));
  width:40px;height:40px;box-sizing:border-box;border-radius:50%;
  background:var(--mc-btn-bg);border:1px solid var(--mc-btn-edge);color:var(--mc-clay-hi);
  font-size:22px;font-weight:200;line-height:1;display:none;justify-content:center;align-items:center;
  z-index:92;pointer-events:auto;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:background-color 0.15s, transform 0.15s;
}
#mobMenuToggleBtn:active{background:var(--mc-btn-on-bg);transform:scale(0.92);}

#mobMenuDrawer{
  position:fixed;top:calc(58px + env(safe-area-inset-top, 0px));left:calc(14px + env(safe-area-inset-left, 0px));
  display:none;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:4px;
  /* si no caben (320 px de alto útil o margen grande) pasan a una segunda columna en vez de pisar el joystick */
  max-height:calc(100vh - 58px - (var(--mob-margin, 20px) + 110px) * var(--ui-scale, 1) + 6px);
  z-index:92;pointer-events:auto;
}

#mobMenuDrawer .mob-btn,
#mobMenuDrawer #mobSprayBtn{
  position:relative;width:40px;height:40px;opacity:0.9;gap:1px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  box-sizing:border-box;border-radius:50%;
  background:var(--mc-btn-bg);border:1px solid var(--mc-btn-edge);color:var(--mc-clay-hi);
  font:700 8px/1 var(--mc-type);letter-spacing:0.03em;text-transform:uppercase;
  pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
#mobMenuDrawer #mobSprayBtn:active{background:var(--mc-btn-on-bg);border-color:var(--mc-btn-on-edge);}
#mobMenuDrawer .mob-drawer-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;pointer-events:none;}

/* El spray solo ocupa sitio en el cajón cuando _tickMobileCtx lo muestra */
#mobMenuDrawer #mobSprayBtn.mob-contextual{display:none !important;}
#mobMenuDrawer #mobSprayBtn.v2-ctx-show{display:flex;opacity:1 !important;pointer-events:auto !important;}

/* Iconos del cajón: formas CSS (sin emojis). El de habilidades sigue siendo el SVG de la ronda U3a. */
#mobMenuDrawer .mob-drawer-ico{position:relative;display:block;flex:none;color:inherit;pointer-events:none;box-sizing:border-box;}
#mobMenuDrawer svg.mob-drawer-ico{width:13px;height:13px;fill:currentColor;}
#mobMenuDrawer .mob-ico-inv{width:12px;height:13px;border:2px solid currentColor;border-radius:5px 5px 2px 2px;}
#mobMenuDrawer .mob-ico-inv::before{content:'';position:absolute;left:50%;top:-5px;width:6px;height:4px;margin-left:-3px;border:2px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0;box-sizing:border-box;}
#mobMenuDrawer .mob-ico-inv::after{content:'';position:absolute;left:1px;right:1px;bottom:2px;height:0;border-top:2px solid currentColor;}
#mobMenuDrawer .mob-ico-goals{width:11px;height:13px;border:2px solid currentColor;border-radius:2px;}
#mobMenuDrawer .mob-ico-goals::before{content:'';position:absolute;left:50%;top:-4px;width:5px;height:4px;margin-left:-2.5px;background:currentColor;border-radius:1px;}
#mobMenuDrawer .mob-ico-goals::after{content:'';position:absolute;left:1px;right:1px;top:2px;height:5px;background:repeating-linear-gradient(currentColor 0 1px,transparent 1px 3px);}
#mobMenuDrawer .mob-ico-spray{width:12px;height:12px;border:2px solid currentColor;border-radius:50%;}
#mobMenuDrawer .mob-ico-spray::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--mc-danger);}

@media (hover:hover){
  #mobMenuToggleBtn:hover,#mobMenuDrawer .mob-btn:hover,#mobMenuDrawer #mobSprayBtn:hover{border-color:var(--mc-btn-on-edge);}
}
body[data-quality="performance"] #mobMenuToggleBtn,
body[data-quality="performance"] #mobMenuDrawer .mob-btn{transition:none;}
@media (prefers-reduced-motion: reduce){#mobMenuToggleBtn{transition:none;}#mobMenuToggleBtn:active{transform:none;}}

/* ── MÓVIL: slider de desencasquillado (arriba, centro) ── */

.jam-slider-ui {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.jam-slider-ui.show { opacity: 1; transform: none; }

/* Cierre: fade-out + shrink */
.jam-slider-ui.closing {
  opacity: 0;
  transform: scale(0.55);
  transform-origin: 50% 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.jam-slider-track {
  position: relative;
  width: 172px;
  height: 40px;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(#1b1d20, #2a2d31);
  border: 1px solid rgba(190, 70, 60, 0.55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 12px rgba(200, 40, 30, 0.35);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jam-slider-track.locked {
  border-color: rgba(120, 200, 120, 0.8);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 14px rgba(90, 200, 100, 0.45);
}

.jam-slider-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 6px;
  font: 600 10px/1 'Courier New', monospace;
  letter-spacing: 0.2px;
  color: rgba(230, 200, 190, 0.6);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.jam-slider-track.locked .jam-slider-label { opacity: 0; }

/* Tirador tipo cerrojo, con estrías */
.jam-slider-handle {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 2px, transparent 2px 6px) center / 24px 14px no-repeat,
    linear-gradient(#8a8f96, #565b62);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  touch-action: none;
  will-change: transform;
}

.jam-slider-handle.grab { filter: brightness(1.15); }

.jam-slider-handle.locked {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.3) 0 2px, transparent 2px 6px) center / 24px 14px no-repeat,
    linear-gradient(#7fbf86, #4a8a52);
  animation: jamSliderClack 0.16s ease-out;
}

@keyframes jamSliderClack {
  0%   { filter: brightness(1.6); }
  40%  { filter: brightness(1.2); }
  100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jam-slider-handle.locked { animation: none; }
}