/* ============================================================
   Cubecraft — interfaz
   ============================================================ */

:root {
  --panel: rgba(14, 16, 20, 0.92);
  --panel-border: #2f3540;
  --slot: rgba(0, 0, 0, 0.45);
  --slot-border: #555b66;
  --accent: #6fbf4a;
  --text: #e8ecf1;
  --muted: #9aa4b2;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --ui-scale: 1;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffe36e;
  outline-offset: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0a0c10;
  color: var(--text);
  font-family: var(--mono);
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

/* ---------- superposiciones de pantalla ---------- */

/* Filtro azul al sumergirse: tinte + viñeta más cerrada + un leve
   desenfoque, que es lo que vende la sensación de estar bajo el agua. */
#water-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(24, 108, 178, 0.34) 0%, rgba(10, 58, 112, 0.58) 55%, rgba(3, 26, 62, 0.80) 100%);
  backdrop-filter: blur(1.2px) saturate(1.35) hue-rotate(-8deg);
  -webkit-backdrop-filter: blur(1.2px) saturate(1.35) hue-rotate(-8deg);
  opacity: 0;
  transition: opacity 0.28s ease;
}
#water-overlay.on { opacity: 1; animation: waterSway 7s ease-in-out infinite; }

@keyframes waterSway {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

#damage-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(150, 20, 20, 0.45));
  opacity: 0;
  transition: opacity 0.2s ease;
}
#damage-overlay.on { opacity: 1; }

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38));
}

/* ---------- punto de mira ---------- */

#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  mix-blend-mode: difference;
}
#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: #fff;
}
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
#crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }

/* ---------- recarga del arma ----------
   Va justo debajo de la mira, que es donde ya estás mirando. No usa
   mix-blend-mode como la mira: sobre un mundo claro la barra invertida
   se volvía ilegible justo cuando importa. */
#attack-charge {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 5px;
  margin: 16px 0 0 -39px;
  pointer-events: none;
  background: rgba(8, 10, 14, .55);
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 1px;
  transition: opacity .16s ease;
}
#attack-charge.hidden { opacity: 0; }
#attack-charge i {
  display: block;
  height: 100%;
  width: 0;
  background: #d8dee6;
}
/* Lleno: el destello blanco es la señal de que ya pega a plena
   potencia, igual que el original. */
#attack-charge.lleno i { background: #fff; }

/* ---------- depuración ---------- */

#debug {
  position: fixed;
  left: 10px;
  top: 10px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #d8f0ff;
  background: rgba(0, 0, 0, 0.52);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  pointer-events: none;
  white-space: pre;
  text-shadow: 0 1px 2px #000;
}

#loading {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  padding: 8px 16px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  pointer-events: none;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 18px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- barra rápida ---------- */

/* Botones flotantes: menú (las tres rayas) e inventario. Duplican las
   teclas Esc y E para que el juego también se pueda manejar con ratón. */
#hud-buttons {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 12;
}
#hud-buttons button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(24, 28, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
#hud-buttons button:hover {
  background: rgba(48, 56, 66, 0.9);
  border-color: var(--accent);
}
#hud-buttons svg { width: 20px; height: 20px; fill: #dfe6ee; }

/* Con el inventario o el menú abiertos se esconde el HUD del juego: la
   barra rápida ya sale dentro del inventario y verla dos veces confunde. */
body.overlay-open #hud-bottom,
body.overlay-open #crosshair,
body.overlay-open #hit-marker,
body.overlay-open #menu-survival-status,
body.overlay-open #objective-tracker { display: none; }

/* ---------- barras de estado (supervivencia) ---------- */
#vitals {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 512px;
  max-width: calc(100vw - 16px);
  gap: 3px;
  margin-bottom: 2px;
  font-family: var(--mono);
}
.vbar {
  position: relative;
  width: 260px;
  height: 16px;
  background: rgba(12, 14, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.vbar i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width 0.18s ease, background 0.3s ease;
}
.hud-armor-line,
.hud-life-line {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}
.hud-armor-line {
  box-sizing: border-box;
  width: 260px;
  align-self: flex-start;
  height: 29px;
  padding: 0;
  align-items: stretch;
  border: 2px solid #0a1822;
  border-radius: 4px;
  background: #102a3b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22),0 2px 5px rgba(0,0,0,.72);
  overflow: hidden;
}
.hud-life-line {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  justify-content: stretch;
  align-items: stretch;
}
.hud-health-cluster {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  flex: none;
  min-width: 0;
  border: 2px solid #160506;
  border-radius: 4px;
  background: #481010;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20),0 2px 5px rgba(0,0,0,.72);
  overflow: hidden;
}
.hud-status-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 20px;
  color: #fff;
  font: 900 16px/1 Arial,sans-serif;
  text-shadow: 0 2px 1px #000;
}
.hud-shield {
  width: 38px;
  height: auto;
  min-height: 25px;
  border: 0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),transparent 45%),
    linear-gradient(180deg,#172532,#081019);
  border-right: 1px solid rgba(255,255,255,.18);
}
.hud-shield svg { width: 31px; height: 32px; overflow: visible; filter: drop-shadow(0 2px 1px #000); }
.hud-shield .shield-rim { fill: url(#shield-steel); stroke: #07131d; stroke-width: 2; }
.hud-shield .shield-face { fill: url(#shield-blue); }
.hud-shield .shield-facet { fill: rgba(224,242,252,.34); }
.hud-shield .shield-spine { fill: none; stroke: rgba(240,249,255,.78); stroke-width: 1.2; }
.hud-shield circle { fill: #dce8ef; stroke: #30495c; stroke-width: 1; }
.hud-heart {
  width: 38px;
  color: #ff5b59;
  font-size: 24px;
  background: linear-gradient(180deg,#3b0d0d,#210707);
}
.vbar.health {
  flex: 1 1 auto;
  width: auto;
  height: 27px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  box-shadow: none;
}
.vbar.health i { background: linear-gradient(180deg, #F04B48 0%,#C92328 48%,#97161B 100%); }
/* al bajar mucho, la barra avisa por color y por parpadeo */
.vbar.health.low i { background: linear-gradient(90deg, #8E1410, #C4342E); }
.vbar.health.low { animation: hurtPulse 0.9s ease-in-out infinite; }
@keyframes hurtPulse { 50% { border-color: #E8564A; } }
.vbar.health span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
/* ---------- barra de hambre: diez muslitos ----------
   Se dibujan con SVG en línea, como los botones del HUD, para que no
   dependan del atlas ni de ninguna imagen externa. Cada muslito tiene
   tres estados: lleno, medio y vacío, porque el hambre baja de medio en
   medio. */
.hunger {
  display: flex;
  flex-direction: row-reverse;   /* se vacían de derecha a izquierda */
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  justify-content: space-around;
  height: 31px;
  padding: 2px 5px;
  border: 2px solid #090b0d;
  border-radius: 4px;
  background: linear-gradient(180deg,rgba(43,48,52,.94),rgba(13,16,19,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.72);
}
.hunger .leg {
  position: relative;
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}
.hunger .leg svg { width: 100%; height: 100%; display: block; }
/* el fondo apagado siempre está; encima se recorta la parte llena */
.hunger .leg .bg { fill: #2A2420; opacity: 0.72; }
.hunger .leg .fg { fill: #C6712A; }
.hunger .leg .fg-bone { fill: #E8DCC6; }
.hunger .leg.empty .fg, .hunger .leg.empty .fg-bone { display: none; }
.hunger .leg.half .fill-clip { clip-path: inset(0 50% 0 0); }
/* con la barra a cero el jugador está perdiendo vida: que se note */
.hunger.starving .leg { animation: hungerPulse 0.8s ease-in-out infinite; }
@keyframes hungerPulse { 50% { transform: translateY(-2px); } }

/* ---------- barra de protección ----------
   Una sola barra horizontal sobre 80 en vez de la fila de iconos del
   original: se lee de un vistazo cuánto te queda de armadura y encaja
   con la barra de vida, que ya es una barra con su cifra dentro. El
   color va con el material que domina: cuero pardo, oro, hierro claro
   y diamante turquesa, que es lo que la hace informativa sin leer el
   número. */
.vbar.armor {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: auto;
  height: 25px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: #0a1a25;
  box-shadow: none;
}
.vbar.armor i { background: linear-gradient(180deg, #8ba0b0 0%,#4b6275 50%,#263b4c 100%); }
.vbar.armor.leather i { background: linear-gradient(180deg, #B47A42,#7B4D26 52%,#4D2D17); }
.vbar.armor.gold i { background: linear-gradient(180deg, #FFE37A,#D3A51D 52%,#8C6508); }
.vbar.armor.iron i { background: linear-gradient(180deg, #F2F5F7,#AAB6C0 52%,#697887); }
.vbar.armor.diamond i { background: linear-gradient(180deg, #88FFF4,#27BEB8 52%,#176A70); }
.vbar.armor .armor-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: 1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}
.vbar.armor .armor-copy b { font: inherit; }
.vbar.armor .armor-copy strong { color: #fff; font-size: 10px; }
/* con el juego completo la barra remata con un borde propio: es el
   tope del juego y merece notarse */
.vbar.armor.full { border-color: rgba(120, 240, 232, 0.85); }
.vbar.armor .armor-segments { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 2px),rgba(4,7,9,.68) calc(12.5% - 2px) 12.5%); pointer-events: none; }
/* sin nada puesto la barra estorba: se queda tenue pero visible, que
   es lo que dice "aquí iría tu protección" */
.vbar.armor.empty { opacity: 0.45; }

/* La experiencia pertenece al mundo activo, no al perfil global. La
   cifra central es el nivel y la lectura pequeña conserva el avance
   exacto para quien quiera comprobarlo. */
.vbar.experience {
  box-sizing: border-box;
  width: 100%;
  height: 14px;
  border: 2px solid rgba(12,18,10,.9);
  border-radius: 3px;
  background: rgba(9,17,10,.90);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15),0 2px 5px rgba(0,0,0,.58);
}
.vbar.experience > i { width: 0; background: linear-gradient(180deg,#8DDE30,#3C9E18 55%,#22740E); }
.vbar.experience > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8ff8b;
  font: 900 11px/1 var(--mono);
  text-shadow: 1px 1px #061000,-1px 1px #061000,1px -1px #061000,-1px -1px #061000;
}
.vbar.experience em {
  position: absolute;
  right: 6px;
  top: 2px;
  color: rgba(228,255,194,.76);
  font: 700 7px/1 var(--mono);
  letter-spacing: .03em;
}

/* ---------- huecos de armadura en el inventario ---------- */
.armor-row { display: flex; gap: 6px; }
.armor-piece { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.armor-piece .slot { width: 42px; height: 42px; }
/* el hueco vacío lleva la silueta de lo que admite, apagada */
.armor-piece .slot.empty-slot { border-style: dashed; border-color: #4a5462; }
.armor-piece .armor-label {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.armor-piece .slot.armor-ok { border-color: var(--accent); }
#armor-total { color: var(--text); font-weight: 700; }

/* Vista equipada del inventario. Se mantiene fuera del flujo en
   escritorio para reservar la misma zona derecha del ejemplo; en móvil
   vuelve al flujo y no tapa las casillas. */
.pane[data-pane="bag"] { position: relative; min-height: 560px; }
.pane[data-pane="bag"] > .craft-box { margin-right: 210px; }
.inventory-character-preview {
  position: absolute;
  right: 4px;
  top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 196px;
  padding: 9px 8px 10px;
  border: 1px solid #374655;
  border-radius: 5px;
  color: #dfe9f2;
  background: radial-gradient(circle at 50% 28%,rgba(72,126,159,.20),transparent 55%),rgba(10,14,19,.76);
  box-shadow: inset 0 0 22px rgba(44,126,178,.09);
}
.inventory-character-preview .inventory-avatar {
  width: 176px;
  height: 218px;
  margin: 0;
  cursor: default;
}
.inventory-character-preview .voxel-character,
.inventory-character-preview .voxel-avatar:hover .voxel-character {
  transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(1.30);
}
.inventory-character-preview > strong { margin-top: 7px; font: 800 10px/1 var(--mono); letter-spacing: .08em; }
.inventory-character-preview > span:last-child { margin-top: 5px; color: #8fa3b5; font-size: 8px; text-align: center; line-height: 1.35; }

/* Estado de supervivencia: oxígeno y efectos ambientales.

   Cuelga del HUD, bajo los botones de la esquina superior derecha, y
   ya no del menú. Estaba dentro del overlay, así que para enterarte de
   que te quedabas sin aire había que abrir las tres rayitas — justo lo
   que no vas a hacer mientras te ahogas.

   Sigue apareciendo solo cuando hay algo que contar: `updateVitals` lo
   oculta con el aire lleno y sin efectos, así que no estorba. */
.menu-survival-status {
  position: fixed;
  /* Por debajo de #hud-buttons (12) para no taparlo, por encima del
     mundo. El panel nunca solapa a los botones: arranca más abajo. */
  z-index: 11;
  /* 12 del borde + 38 de botón + 8 de aire */
  top: 58px;
  right: 12px;
  width: 210px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(99,187,240,.34);
  border-radius: 4px;
  color: #dcebf5;
  background: linear-gradient(180deg,rgba(7,25,42,.94),rgba(2,11,21,.96));
  box-shadow: inset 0 0 18px rgba(35,139,211,.08),0 8px 26px rgba(0,0,0,.34);
  text-align: left;
}
.menu-survival-status-head,
.menu-air-label { display: flex; align-items: center; justify-content: space-between; }
.menu-survival-status-head { margin-bottom: 7px; font: 700 8px/1 var(--mono); letter-spacing: .08em; }
.menu-survival-status-head strong { color: #edf9ff; }
.menu-survival-status-head span { color: #65869e; font-size: 7px; }
.menu-air-status { display: grid; gap: 5px; }
.menu-air-label { color: #8ebbd7; font: 700 8px/1 var(--mono); }
.menu-air-label em { color: #d8f3ff; font-style: normal; }
.vbar.air { width: 100%; height: 9px; }
.vbar.air i { background: linear-gradient(90deg, #2E7ED8, #6EC0F0); }
/* aguas profundas: la barra se vuelve fría y late, para que se note
   que el aire se está yendo más rápido de lo normal */
.menu-air-status.deep .vbar.air i { background: linear-gradient(90deg, #123E86, #2E7ED8); }
.menu-air-status.deep .vbar.air { animation: pressure 1.1s ease-in-out infinite; }
@keyframes pressure { 50% { box-shadow: 0 0 0 2px rgba(46, 126, 216, 0.45); } }

.temperature-status { --thermal-color: #90dcff; margin-top: 9px; padding-top: 8px; border-top: 1px solid #ffffff20; }
.temperature-status.hot { --thermal-color: #ffb06b; }
.temperature-heading, .temperature-caption { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.temperature-heading { color: var(--thermal-color); font: 700 9px/1.2 var(--mono); }
.temperature-heading strong { font-size: 15px; white-space: nowrap; }
.temperature-meter { position: relative; height: 10px; margin: 7px 0 6px; background: #ffffff12; border: 1px solid #ffffff20; border-radius: 3px; overflow: hidden; }
.temperature-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#277eb1,#90dcff); transition: width .2s linear; }
.hot .temperature-meter i { background: linear-gradient(90deg,#d28b35,#e65639); }
.temperature-meter span { position: absolute; inset: 0; background: linear-gradient(90deg,transparent 34.5%,#ffffff40 35%,transparent 35.5%,transparent 79.5%,#ffffff70 80%,transparent 80.5%); }
.temperature-caption { color: #e8eef4; font: 700 8px/1.4 var(--mono); }
.temperature-status small { display: block; margin-top: 5px; font: 500 9px/1.4 var(--mono); color: #aebfca; }
.temperature-status.danger .temperature-caption { color: #ff9683; }
.temperature-status.danger .temperature-meter { border-color: #e56654; }
.environment-status { margin-top: 7px; padding-top: 6px; }
.environment-status .temperature-heading { font-size: 8px; }
.environment-status .temperature-heading strong { font-size: 11px; }
.environment-status .temperature-meter { height: 5px; margin: 5px 0; }
.environment-status.altitude { --thermal-color: #efd296; }
.environment-status.altitude .temperature-meter i { background: linear-gradient(90deg,#a5874e,#efd296); }
.environment-status.pressure { --thermal-color: #ccafff; }
.environment-status.pressure .temperature-meter i { background: linear-gradient(90deg,#7352aa,#ccafff); }
/* En horizontal, el espacio libre está arriba y entre las dos manos. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  body .menu-survival-status, body .menu-survival-status.multiple-alerts {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(210px, calc(100vw - 320px)); padding: 6px 8px;
  }
  body .menu-survival-status.multiple-alerts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; width: min(430px, calc(100vw - 320px));
  }
  .menu-survival-status .menu-survival-status-head { display: none; }
  .menu-survival-status .temperature-status { margin: 0; padding: 0; border-top: 0; }
  .menu-survival-status .survival-effects { grid-column: 1 / -1; }
}

.survival-effects { display: flex; gap: 5px; justify-content: flex-start; flex-wrap: wrap; margin-top: 7px; }
.survival-effects span {
  display: none; padding: 3px 7px; border: 1px solid rgba(255,255,255,.24);
  border-radius: 3px; background: rgba(10,14,20,.82); color: #d9e5ef;
  font: 700 7px/1 var(--mono); letter-spacing: .06em;
}
.survival-effects span.on { display: inline-block; }
#effect-cold.on { border-color: #67bfea; color: #9ddfff; }
#effect-sick.on { border-color: #83ad55; color: #a9d978; }

/* progreso de picado, justo bajo la mira */
#mine-progress {
  position: fixed;
  left: 50%;
  top: calc(50% + 16px);
  transform: translateX(-50%);
  width: 78px;
  height: 7px;
  background: rgba(10, 12, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  z-index: 6;
}
#mine-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C8CDD4, #FFFFFF);
}
/* sin el nivel necesario el bloque se rompe pero no suelta nada */
#mine-progress.nodrop i { background: linear-gradient(90deg, #8A5A2A, #C4883E); }

/* elegir modo de juego */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  text-align: left;
  background: var(--slot);
  border: 1px solid #3a424e;
  border-radius: 8px;
  cursor: pointer;
}
.mode:hover { border-color: var(--accent); background: #2b313a; }
.mode.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mode strong { font-size: 13px; color: #eaf1f8; }
.mode span { font-size: 11px; line-height: 1.45; color: var(--muted); }

#hud-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#block-name {
  font-size: 13px;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  min-height: 18px;
  opacity: 0;
}
#block-name.fade { animation: fadeName 2.4s ease forwards; }
@keyframes fadeName {
  0% { opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

#hotbar {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  width: 512px;
  max-width: calc(100vw - 16px);
  gap: 4px;
  padding: 4px;
  background: linear-gradient(180deg,rgba(42,47,52,.90),rgba(10,12,15,.94));
  border: 2px solid #080a0d;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),0 3px 7px rgba(0,0,0,.65);
  pointer-events: auto;
}

.slot {
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--slot);
  border: 2px solid #3a4049;
  border-radius: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.1s ease, transform 0.1s ease;
}
.slot:hover { border-color: #6a7280; }
.slot.active {
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.slot .icon {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  border-radius: 2px;
}
.slot .num {
  position: absolute;
  left: 3px;
  bottom: 1px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px #000;
}
.slot .freshness-tag {
  position: absolute;
  z-index: 5;
  left: 2px;
  top: 2px;
  min-width: 16px;
  padding: 1px 2px;
  border: 1px solid rgba(103,170,92,.68);
  border-radius: 2px;
  color: #c9f4b8;
  background: rgba(14,44,16,.88);
  font: 800 7px/1 var(--mono);
  text-align: center;
  text-shadow: 0 1px #000;
  pointer-events: none;
}
.slot .freshness-tag.freshness-low {
  border-color: rgba(222,102,73,.82);
  color: #ffd0bc;
  background: rgba(75,20,13,.92);
}

/* ---------- paneles ---------- */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: auto;
  z-index: 10;
}
.overlay.hidden, .hidden { display: none !important; }

.panel {
  width: min(560px, 100%);
  padding: 26px 30px 22px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.panel.wide { width: min(880px, 100%); }

.panel h1 {
  margin: 0 0 4px;
  font-size: 34px;
  letter-spacing: 0.06em;
  color: #fff;
}
.panel h2 { margin: 0 0 6px; font-size: 20px; }
.panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.panel .sub, .panel .hint, .panel .foot {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.panel .foot { margin: 18px 0 0; }

.row.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

button {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #232830;
  border: 1px solid #3a414d;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
button:hover { background: #2c323c; border-color: #4c5563; }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--accent);
  border-color: #7fd158;
  color: #0b1207;
  font-weight: 700;
  flex: 1 1 160px;
}
button.primary:hover { background: #7fd158; }
button.danger { color: #ffb4b4; border-color: #58353a; }
button.danger:hover { background: #3a2428; }

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
}
label span {
  float: right;
  color: var(--text);
}
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
}
input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 7px;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

ul.keys {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 2.05;
  color: var(--muted);
}
ul.keys li { display: flex; align-items: baseline; gap: 5px; }
ul.keys span { margin-left: auto; color: var(--text); text-align: right; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  color: #dfe6ee;
  background: #1c2027;
  border: 1px solid #3d444f;
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ---------- inventario ---------- */

/* Disposición de dos paneles, al estilo del inventario de Bedrock:
   a la izquierda lo tuyo, a la derecha el catálogo completo. */
.inv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(1040px, 100%);
  max-height: calc(100vh - 24px);
}
.inv-panels {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 0;
}
/* En supervivencia no hay paleta creativa: se oculta el panel derecho
   y el izquierdo se queda con todo el ancho. */
.inv-panels.no-palette {
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
}
.inv-panels.no-palette > .bpanel:last-child { display: none; }
/* el catálogo necesita ancho aunque el panel se encoja */
.inv-panels.no-palette .slot-grid.recipes { min-width: 430px; }

.bpanel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* pestañas que sobresalen por encima del panel */
.tabs { display: flex; gap: 3px; padding-left: 6px; }
#cat-tabs { flex-wrap: wrap; }
.tabs .tab {
  padding: 7px 13px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #262c35;
  border: 1px solid #39414d;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  cursor: pointer;
  line-height: 1;
}
.tabs .tab:hover { color: #d7dee8; background: #2e353f; }
.tabs .tab.active {
  color: #eaf1f8;
  background: #333b46;
  border-color: #4a5462;
  box-shadow: inset 0 2px 0 var(--accent);
}
/* pestañas de categoría: sólo icono de bloque */
.tabs .tab.icon-tab { padding: 5px 9px; }
.tabs .tab.icon-tab .icon {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  border-radius: 2px;
  display: block;
}

.bbody {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #333b46;
  border: 1px solid #4a5462;
  border-radius: 0 9px 9px 9px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.bbody .close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bbody .close:hover { color: #fff; }

.pane { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pane.hidden { display: none; }

.craft-box {
  padding: 8px 10px 10px;
  background: rgba(20, 24, 30, 0.45);
  border: 1px solid #454e5b;
  border-radius: 6px;
  width: max-content;
}
.craft-row { display: flex; align-items: center; gap: 12px; }
.craft-arrow { font-size: 20px; color: var(--muted); }

/* --- horno --- */
.furnace-row { align-items: center; }
.furnace-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* llama: se vacía de arriba abajo según el combustible que queda */
.flame {
  width: 20px; height: 20px;
  background: #22272e;
  border: 1px solid #454e5b;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.flame-fill {
  width: 100%; height: 0%;
  background: linear-gradient(to top, #F7C33F, #E2731A);
  transition: height 0.12s linear;
}

/* barra de cocción */
.cook {
  width: 62px; height: 12px;
  background: #22272e;
  border: 1px solid #454e5b;
  border-radius: 3px;
  overflow: hidden;
}
.cook-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, #6E9E45, #A8D66A);
  transition: width 0.12s linear;
}

#smelt-list {
  margin: 0; padding: 0; list-style: none;
  max-height: 250px; overflow-y: auto;
  font-size: 11.5px; line-height: 1.72; color: var(--muted);
}
#smelt-list li { border-bottom: 1px solid #2b323b; padding-right: 6px; }
#smelt-list li:last-child { border-bottom: 0; }

/* etiqueta del contenido de un recipiente, dentro del hueco */
.slot .fluid {
  position: absolute;
  left: 2px; right: 2px; bottom: 1px;
  height: 4px;
  border-radius: 2px;
  background: #2E62C8;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.slot .fluid.lava { background: #E2731A; }
.slot .fluid > i { display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,0.55); }

/* desgaste de una herramienta: sólo se pinta cuando ya se ha usado */
.slot .wear {
  position: absolute;
  left: 3px; right: 3px; bottom: 2px;
  height: 3px;
  background: #1a1a1a;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.slot .wear > i { display: block; height: 100%; }

/* rótulos pequeños encima de cada rejilla */
.cap {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.cap.centered { text-align: center; margin-bottom: 0; }

.bfoot { display: flex; align-items: center; gap: 10px; }
#btn-craft-clear, #btn-inv-sort { padding: 6px 12px; font-size: 11.5px; }
.extra-slots { display: flex; align-items: end; gap: 9px; }
.extra-slots .cap { margin-bottom: 3px; }
.slot.trash {
  width: 34px;
  height: 34px;
  border-color: #6a4444;
  background: rgba(90, 40, 40, 0.35);
  cursor: pointer;
}
.slot.trash:hover { border-color: #c86a6a; background: rgba(130, 50, 50, 0.5); }
.slot.trash svg { width: 17px; height: 17px; fill: #d59a9a; }

/* barra de categoría del panel derecho */
.cat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #232931;
  border: 1px solid #454e5b;
  border-radius: 6px;
}
#cat-name { flex: 1; font-size: 12.5px; font-weight: 700; color: #e6edf5; }
#inv-search {
  width: 150px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11.5px;
  color: #e6edf5;
  background: #171b21;
  border: 1px solid #454e5b;
  border-radius: 4px;
}
#inv-search:focus { outline: 0; border-color: var(--accent); }

/* --- catálogo de recetas --- */
.recipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.only-doable { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }

.slot-grid.recipes {
  grid-template-columns: repeat(auto-fill, 42px);
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}
/* Lo que no puedes fabricar se marca en rojo y apagado, en vez de
   esconderlo: así ves qué te falta por conseguir. */
.slot-grid.recipes .slot.locked {
  border-color: #7A3A3A;
  background: rgba(90, 34, 34, 0.28);
}
.slot-grid.recipes .slot.locked .icon { filter: grayscale(0.7) brightness(0.62); }
.slot-grid.recipes .slot.locked .count { color: #F09090; }
.slot-grid.recipes .slot.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.slot-grid.recipes:empty::after {
  content: 'Todavía no puedes fabricar nada';
  color: var(--muted);
  font-size: 11.5px;
}

/* ---------- herramientas agrupadas ----------
   Un hueco por tipo con un «+» en la esquina. El signo se ve encima
   del icono, así que lleva su propia sombra para leerse igual sobre un
   pico claro que sobre uno oscuro. */
.slot.tool-group { border-color: #5d6b52; background: rgba(60, 90, 45, 0.22); }
.slot.armor-group { border-color: #59667d; background: rgba(65, 78, 110, 0.25); }
.slot.tool-group:hover, .slot.armor-group:hover { border-color: var(--accent); }
.slot.tool-group.open, .slot.armor-group.open {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.slot.tool-group .plus, .slot.armor-group .plus {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #eaf1f8;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}
/* las variantes desplegadas van marcadas para que se vea que son las
   de ese «+» y no huecos sueltos del catálogo */
.slot-grid .slot[data-tool-kind] { border-color: #4f5a46; }
.slot-grid .slot[data-armor-slot] { border-color: #515e78; }

/* ficha de la receta montada */
.craft-info { display: flex; flex-direction: column; gap: 3px; max-width: 190px; }
.craft-info strong { font-size: 12px; color: #eaf1f8; text-transform: uppercase; letter-spacing: 0.04em; }
.craft-info span { font-size: 11px; line-height: 1.45; color: var(--muted); }

.craft-needs { margin-top: 10px; }
.craft-needs > div { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.need {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.need .icon { width: 22px; height: 22px; image-rendering: pixelated; border-radius: 2px; }
.need b { color: #dfe6ee; font-weight: 600; }
/* en rojo lo que no tienes suficiente */
.need.short b, .need.short { color: #F09090; }

.hotbar-row { justify-content: center; }
.inv-help { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }
.bbody .hint.tight { margin: 0; font-size: 11px; }

/* rejillas de huecos */
.slot-grid { display: grid; gap: 3px; width: max-content; }
.slot-grid.c1 { grid-template-columns: repeat(1, 42px); }
.slot-grid.c2 { grid-template-columns: repeat(2, 42px); }
.slot-grid.c3 { grid-template-columns: repeat(3, 42px); }
.slot-grid.c9 { grid-template-columns: repeat(9, 42px); }
.slot-grid.palette {
  grid-template-columns: repeat(auto-fill, 42px);
  width: 100%;
  flex: 1;
  min-height: 132px;
  align-content: start;
  overflow-y: auto;
  padding-right: 4px;
}
.slot-grid.palette:empty::after {
  content: 'Sin resultados';
  color: var(--muted);
  font-size: 11.5px;
}

.slot-grid .slot { width: 42px; height: 42px; }
.slot-grid .slot .icon { width: 31px; height: 31px; }
.slot-grid .slot.result {
  border-color: #5d6b52;
  background: rgba(60, 90, 45, 0.28);
}
.slot-grid .slot.result:hover { border-color: var(--accent); }

/* contador de la pila */
.slot .count {
  position: absolute;
  right: 3px;
  top: 1px;
  min-width: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}

/* pila enganchada al puntero */
#cursor-stack {
  position: fixed;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  z-index: 40;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
#cursor-stack .icon {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 3px;
}
#cursor-stack .count {
  position: absolute;
  right: -2px;
  bottom: -4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* ---------- error fatal ---------- */

#fatal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
  font-size: 15px;
  color: #ffb4b4;
  background: #0a0c10;
  z-index: 100;
}

/* ============================================================
   Menú principal estilo voxel
   ============================================================ */
.main-menu-overlay {
  z-index: 30;
  padding: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
  justify-items: center;
}

.menu-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(30,66,108,.58), rgba(79,129,153,.22) 44%, rgba(11,17,23,.55) 100%);
}
.menu-sky::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,245,194,.92) 0 3%, rgba(255,226,143,.28) 7%, transparent 17%),
    linear-gradient(180deg, rgba(118,181,219,.28), rgba(35,69,92,.08) 55%, rgba(8,11,14,.58));
  animation: menuSkyDrift 18s ease-in-out infinite alternate;
}
.menu-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 18%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.74) 100%);
}
.menu-glow {
  position: absolute;
  width: 34vmax;
  height: 34vmax;
  right: 10vw;
  top: 8vh;
  border-radius: 50%;
  background: rgba(255, 221, 131, .10);
  filter: blur(24px);
  animation: menuGlow 6s ease-in-out infinite alternate;
}
.menu-clouds {
  position: absolute;
  width: 54vw;
  height: 11vh;
  min-height: 60px;
  left: -8vw;
  opacity: .16;
  filter: blur(7px);
  background:
    radial-gradient(ellipse at 15% 45%, rgba(255,255,255,.95) 0 8%, transparent 9%),
    radial-gradient(ellipse at 33% 55%, rgba(255,255,255,.9) 0 11%, transparent 12%),
    radial-gradient(ellipse at 54% 35%, rgba(255,255,255,.85) 0 9%, transparent 10%),
    radial-gradient(ellipse at 75% 54%, rgba(255,255,255,.9) 0 12%, transparent 13%);
  animation: menuCloudMove 32s linear infinite;
}
.cloud-a { top: 15%; }
.cloud-b { top: 28%; left: 42vw; opacity: .11; animation-duration: 46s; animation-direction: reverse; }

.mc-menu {
  position: relative;
  z-index: 2;
  width: min(560px, 92vw);
  margin-top: -4vh;
  text-align: center;
}
.menu-title-wrap { margin-bottom: 28px; }
.menu-logo-shadow,
.menu-logo {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 8vw, 86px);
  line-height: .84;
  letter-spacing: .055em;
  transform: skewX(-2deg);
}
.menu-logo-shadow {
  position: absolute;
  width: 100%;
  color: rgba(0,0,0,.76);
  transform: translate(7px, 9px) skewX(-2deg);
}
.menu-logo {
  position: relative;
  color: #f5f5f5;
  text-shadow:
    0 2px 0 #7f8790,
    0 4px 0 #464c51,
    0 7px 12px rgba(0,0,0,.8);
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
}
.menu-subtitle {
  margin-top: 11px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .24em;
  color: rgba(255,255,255,.84);
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
}

.menu-main-buttons {
  display: grid;
  gap: 10px;
  width: min(420px, 82vw);
  margin: 0 auto;
}
.mc-button {
  position: relative;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid rgba(255,255,255,.24);
  border-top-color: rgba(255,255,255,.38);
  border-left-color: rgba(255,255,255,.32);
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(#5b6167, #444a4f 48%, #363b40);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 9px 20px rgba(0,0,0,.24);
  font: 800 17px/1 var(--mono);
  letter-spacing: .04em;
  text-shadow: 0 2px 2px rgba(0,0,0,.8);
}
.mc-button:hover {
  background: linear-gradient(#777d82, #595f64 48%, #484e53);
  border-color: rgba(255,255,255,.52);
  transform: scale(1.015);
}
.mc-button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.mc-button-primary {
  background: linear-gradient(#83c94f, #67ad3d 48%, #4e8e31);
  border-color: #b6ed88;
  color: #fff;
  text-shadow: 0 2px 2px rgba(23,50,12,.75);
}
.mc-button-primary:hover { background: linear-gradient(#98d85f, #72be47 48%, #5ca63a); }

.menu-status {
  margin: 15px 0 8px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  text-shadow: 0 2px 4px #000;
}
.menu-separator { margin: 0 7px; opacity: .55; }
.menu-extra-buttons {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mc-small-button {
  padding: 7px 10px;
  background: rgba(16,19,22,.60);
  border: 1px solid rgba(255,255,255,.23);
  color: rgba(255,255,255,.86);
  border-radius: 2px;
  font: 700 10px/1 var(--mono);
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 2px 7px rgba(0,0,0,.28);
}
.mc-small-button:hover { background: rgba(51,56,60,.82); border-color: rgba(255,255,255,.42); }

.menu-details {
  width: min(560px, 92vw);
  margin: 12px auto 0;
  padding: 14px 16px 16px;
  background: rgba(8,11,14,.87);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
  text-align: left;
}
.menu-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #fff;
}
.menu-details-head strong { font-size: 13px; letter-spacing: .10em; text-transform: uppercase; }
.mc-close { padding: 2px 8px; font-size: 18px; background: transparent; border: 0; color: #fff; }
.menu-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.settings-action { grid-column: 1 / -1; margin-top: 4px; }

.menu-options-grid label { margin-bottom: 8px; }
.menu-options-grid label.check { margin: 3px 0; }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.controls-grid > div { display: flex; align-items: center; gap: 6px; min-height: 26px; color: var(--muted); font-size: 11px; }
.controls-grid span { margin-left: auto; color: var(--text); text-align: right; }
.menu-footer {
  margin-top: 15px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  text-shadow: 0 2px 4px #000;
}

@keyframes menuSkyDrift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1.03); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.06); }
}
@keyframes menuGlow {
  from { opacity: .55; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.05); }
}
@keyframes menuCloudMove {
  from { transform: translateX(-12vw); }
  to { transform: translateX(118vw); }
}

@media (max-width: 620px) {
  .mc-menu { margin-top: -1vh; }
  .menu-title-wrap { margin-bottom: 19px; }
  .menu-logo { font-size: 48px; }
  .menu-main-buttons { gap: 8px; }
  .mc-button { min-height: 47px; font-size: 15px; }
  .menu-options-grid, .controls-grid { grid-template-columns: 1fr; }
}

.world-list { display:grid; gap:7px; max-height:35vh; overflow:auto; margin-bottom:12px; }
.world-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; background:rgba(26,30,34,.88); border:1px solid rgba(255,255,255,.12); border-radius:3px; }
.world-row.active { border-color:rgba(142,214,91,.7); box-shadow:inset 3px 0 #80c84d; }
.world-row-main { min-width:0; display:grid; gap:4px; }
.world-row-main strong { color:#fff; font-size:12px; }
.world-row-main span { color:var(--muted); font-size:10px; }
.world-row-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.world-delete { color:#ffb0b0; }
.world-new-btn { width:100%; margin-top:2px; }
.world-empty { padding:20px; text-align:center; color:var(--muted); font-size:11px; }
.world-create-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.world-create-grid label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
.world-create-grid input { width:100%; box-sizing:border-box; padding:9px; background:#14181c; color:#fff; border:1px solid #4b5259; border-radius:2px; font:700 11px var(--mono); }
.mode-choice-title { margin:14px 0 7px; color:#fff; font:800 11px var(--mono); text-transform:uppercase; }
.world-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mode-choice { min-height:74px; display:grid; gap:5px; text-align:left; }
.mode-choice strong { font-size:12px; }
.mode-choice span { color:rgba(255,255,255,.65); font:600 10px var(--mono); line-height:1.35; }
.mode-choice.active { outline:2px solid #9add69; background:linear-gradient(#668b4f,#465e38); }
.world-check { display:flex; align-items:center; gap:6px; margin:10px 0 !important; color:rgba(255,255,255,.8) !important; font:700 10px var(--mono) !important; }
.achievement-list { display:grid; gap:7px; max-height:38vh; overflow:auto; }
.achievement-row { display:flex; gap:10px; align-items:center; padding:9px; background:rgba(24,28,32,.8); border:1px solid rgba(255,255,255,.1); border-radius:3px; opacity:.55; }
.achievement-row.unlocked { opacity:1; border-color:rgba(255,215,106,.55); background:rgba(74,61,28,.34); }
.achievement-badge { width:30px; height:30px; display:grid; place-items:center; flex:0 0 30px; border-radius:3px; background:#343a40; color:#777; font-size:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.achievement-row.unlocked .achievement-badge { background:#a58130; color:#ffe57c; }
.achievement-row strong { display:block; color:#fff; font-size:11px; }
.achievement-row span { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
@media (max-width:620px){ .world-create-grid,.world-mode-grid{grid-template-columns:1fr;} .world-row{align-items:flex-start; flex-direction:column;} .world-row-actions{width:100%; justify-content:flex-start;} }

.world-note{margin:10px 0 12px;padding:8px;background:rgba(255,255,255,.05);border-left:2px solid rgba(255,255,255,.2);color:var(--muted);font:600 9px/1.4 var(--mono);}

/* Biblioteca de mundos: ocupa el centro al pulsar JUGAR y contiene todas
   las acciones relacionadas con partidas; la portada queda limpia. */
#menu .worlds-library { width:min(900px,calc(100vw - 36px)); padding:15px; }
.world-library-tools { display:grid; grid-template-columns:auto minmax(180px,1fr); gap:12px; align-items:center; margin-bottom:11px; }
.world-filter-tabs { display:flex; gap:4px; }
.world-filter-tabs button { padding:7px 10px; border:1px solid rgba(91,182,235,.24); color:#7899ad; background:#071725; font:800 8px/1 var(--mono); }
.world-filter-tabs button.active { color:#effbff; border-color:#59c4f5; background:linear-gradient(#1685c9,#0c5b99); box-shadow:inset 0 -2px rgba(155,229,255,.36); }
.world-search { display:flex; align-items:center; gap:7px; padding:0 9px; border:1px solid rgba(101,170,213,.25); background:rgba(2,12,21,.82); }
.world-search span { color:#62c8f4; font-size:18px; }
#menu .world-search input { width:100%; min-width:0; padding:9px 0; border:0; outline:0; color:#eaf7ff; background:transparent; font:600 10px/1 var(--mono); user-select:text; }
#menu .worlds-library .world-list { max-height:min(53vh,470px); gap:5px; margin-bottom:10px; }
#menu .worlds-library .world-row { display:grid; grid-template-columns:142px minmax(0,1fr) auto; min-height:82px; padding:0; overflow:hidden; border-color:rgba(95,160,203,.18); border-radius:2px; background:linear-gradient(90deg,rgba(8,29,45,.94),rgba(4,14,25,.94)); }
#menu .worlds-library .world-row.active { border-color:rgba(75,198,249,.62); box-shadow:inset 3px 0 #45c5ff,0 0 14px rgba(36,152,211,.12); }
.world-thumbnail { position:relative; align-self:stretch; min-height:82px; overflow:hidden; border-right:1px solid rgba(104,188,235,.18); background:#23475c; }
.world-thumbnail::before,.world-thumbnail::after,.world-thumbnail i { content:''; position:absolute; left:0; right:0; }
.world-thumbnail::before { top:0; height:52%; background:linear-gradient(#4c9ed0,#c2e9f0); }
.world-thumbnail::after { bottom:0; height:52%; clip-path:polygon(0 48%,18% 22%,31% 38%,48% 7%,62% 38%,76% 17%,100% 46%,100% 100%,0 100%); background:linear-gradient(#3d7a3f,#153a27); }
.world-thumbnail i { bottom:0; height:28%; background:linear-gradient(165deg,transparent 0 43%,rgba(68,178,219,.74) 44% 68%,transparent 69%); }
.world-thumbnail-coast::after { background:linear-gradient(#c9b87b,#406c35); clip-path:polygon(0 34%,28% 45%,52% 28%,75% 42%,100% 20%,100% 100%,0 100%); }
.world-thumbnail-coast i { height:55%; background:linear-gradient(rgba(52,151,193,.80),#133f68); clip-path:polygon(0 34%,25% 44%,51% 28%,75% 42%,100% 20%,100% 100%,0 100%); }
.world-thumbnail-snow::after { height:66%; background:linear-gradient(#f0f6f8 0 20%,#6a8293 21% 58%,#2a4b3b 59%); clip-path:polygon(0 70%,20% 20%,33% 47%,51% 5%,65% 48%,83% 18%,100% 67%,100% 100%,0 100%); }
.world-thumbnail-volcanic::before { background:linear-gradient(#381b20,#d05b31); }
.world-thumbnail-volcanic::after { background:linear-gradient(#643026,#17191b); }
.world-thumbnail-volcanic i { background:linear-gradient(160deg,transparent 0 47%,#ff7a19 48% 58%,transparent 59%); }
#menu .worlds-library .world-row-main { align-self:center; padding:10px 12px; gap:7px; }
.world-row-main > div { display:flex; align-items:center; gap:8px; }
.world-row-main em { color:#62d2ff; font:800 7px/1 var(--mono); }
#menu .worlds-library .world-row-main strong { font-size:12px; }
.world-row-mode { width:max-content; padding:3px 5px; color:#62cffa !important; border:1px solid rgba(82,196,244,.27); background:rgba(14,90,131,.31); font:800 7px/1 var(--mono) !important; }
.world-row-meta { color:#728ca0 !important; font-size:8px !important; }
#menu .worlds-library .world-row-actions { align-content:center; padding:9px 10px; max-width:190px; }
#menu .worlds-library .world-play { min-width:82px; color:#f1fbff; border-color:#4bbdf0; background:linear-gradient(#1688ce,#0c5b99); }
.world-library-footer { display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; border-top:1px solid rgba(91,175,225,.17); }
.world-library-footer .world-new-btn { width:auto; margin:0; color:#effbff; border-color:#4abdf1; background:linear-gradient(#1687cb,#0d5b97); }
.world-locked-value,#menu .world-edit-grid select { display:block; width:100%; box-sizing:border-box; min-height:35px; padding:9px; border:1px solid #4b5e6d; color:#d8e9f3; background:#101d27; font:800 10px/1 var(--mono); }
.world-edit-grid small { color:#6d8899; font-size:7px; text-transform:none; line-height:1.35; }
.world-edit-switches { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0; }
.world-edit-switches label { padding:9px; border:1px solid rgba(94,169,215,.18); color:#9fb4c2; background:rgba(7,24,37,.65); font:700 8px/1.35 var(--mono); }
@media (max-width:700px){
  .world-library-tools{grid-template-columns:1fr}.world-filter-tabs{overflow:auto}.world-filter-tabs button{flex:1}
  #menu .worlds-library .world-row{grid-template-columns:92px minmax(0,1fr)}
  #menu .worlds-library .world-row-actions{grid-column:1/-1;max-width:none;width:auto;padding:7px;border-top:1px solid rgba(95,160,203,.14)}
  .world-thumbnail{min-height:72px}.world-edit-switches{grid-template-columns:1fr}
}

/* ============================================================
   Guía, objetivos, combate y accesibilidad
   ============================================================ */
#hit-marker {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
}
#hit-marker::before,
#hit-marker::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 13px;
  width: 22px;
  height: 2px;
  background: #fff;
  box-shadow: 0 1px 2px #000;
}
#hit-marker::before { transform: rotate(45deg); }
#hit-marker::after { transform: rotate(-45deg); }
#hit-marker.show { animation: hitMarker .24s ease-out; }
#hit-marker.kill::before,
#hit-marker.kill::after { background: #ffcf48; height: 3px; }

#objective-tracker {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 11;
  max-width: min(660px, 80vw);
  padding: calc(7px * var(--ui-scale)) calc(11px * var(--ui-scale));
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 3px;
  background: rgba(8,11,14,.68);
  color: #f4f7fa;
  font: 700 calc(10px * var(--ui-scale))/1.35 var(--mono);
  text-align: center;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
#objective-tracker strong { color: #ffe277; }

.tutorial-summary {
  margin: 0 0 10px;
  color: var(--muted);
  font: 600 calc(10px * var(--ui-scale))/1.45 var(--mono);
}
.tutorial-list { display: grid; gap: 7px; max-height: 40vh; overflow: auto; }
.tutorial-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: rgba(24,28,32,.78);
  opacity: .62;
}
.tutorial-step.current { opacity: 1; border-color: #8ac95d; box-shadow: inset 3px 0 #75b94a; }
.tutorial-step.done { opacity: .82; border-color: rgba(135,211,91,.42); }
.tutorial-step-mark {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: #343a40; color: #cbd2d9;
  font: 800 11px var(--mono);
}
.tutorial-step.done .tutorial-step-mark { background: #568b38; color: #fff; }
.tutorial-step strong { display:block; color:#fff; font-size:11px; }
.tutorial-step span { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.tutorial-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.tutorial-actions .mc-button { min-height: 38px; font-size: 12px; }

.menu-options-grid select {
  width: 100%;
  margin-top: 5px;
  padding: 7px;
  border: 1px solid #555d66;
  border-radius: 2px;
  background: #14181c;
  color: #fff;
  font: 700 11px var(--mono);
}
.setting-hint {
  float: right;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}
.graphics-presets {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  color: var(--muted);
  font: 700 10px var(--mono);
}
.graphics-presets span { margin-right: auto; }
.graphics-presets .active { border-color:#a8df78; color:#dfffbd; background:#365428; }

/* La escala se concentra en texto y controles; el lienzo 3D conserva
   sus coordenadas exactas y el ratón no se desajusta. */
.mc-button {
  min-height: calc(50px * var(--ui-scale));
  font-size: calc(16px * var(--ui-scale));
}
.mc-small-button { font-size: calc(10px * var(--ui-scale)); }
.menu-details,
.menu-status,
.menu-footer,
#toast { font-size: calc(11px * var(--ui-scale)); }

@keyframes hitMarker {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   BOSERHAFT — interfaz de acceso. Todo queda aislado dentro de
   #menu para no recolorear el HUD ni el inventario del juego.
   ============================================================ */
#menu {
  --access-cyan: #48baff;
  --access-blue: #1169c7;
  --access-ice: #b9e8ff;
  --access-panel: rgba(5, 15, 29, .90);
  --access-line: rgba(119, 190, 239, .28);
  font-family: "Segoe UI", "Arial Narrow", var(--mono);
}
#menu.main-menu-overlay {
  padding: 18px 24px 22px;
  overflow: hidden;
  background: rgba(1, 7, 15, .28);
}
#menu .menu-sky {
  background:
    linear-gradient(180deg, rgba(3, 16, 33, .40), rgba(4, 22, 43, .32) 45%, rgba(1, 8, 17, .88)),
    radial-gradient(circle at 76% 22%, rgba(129, 205, 255, .18), transparent 28%);
  filter: saturate(.88) contrast(1.08);
}
#menu .menu-sky::before {
  background:
    radial-gradient(circle at 78% 19%, rgba(222, 245, 255, .85) 0 1.8%, rgba(69, 174, 255, .18) 6%, transparent 17%),
    linear-gradient(180deg, rgba(3, 24, 48, .18), rgba(1, 8, 17, .74));
}
#menu .menu-glow { right: 14vw; top: 5vh; background: rgba(52, 166, 255, .13); }
#menu .menu-vignette {
  background:
    linear-gradient(90deg, rgba(0, 5, 12, .74), transparent 23%, transparent 72%, rgba(0, 5, 12, .62)),
    radial-gradient(ellipse at center, transparent 20%, rgba(0, 4, 11, .30) 62%, rgba(0, 3, 8, .86) 100%);
}
.menu-horizon {
  position: absolute;
  left: -3%; right: -3%; bottom: -3%;
  height: 34%;
  opacity: .38;
  background:
    linear-gradient(90deg, rgba(3, 18, 32, .92), rgba(8, 38, 65, .82) 50%, rgba(2, 15, 28, .94)),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(65, 163, 218, .20) 43px 44px);
  clip-path: polygon(0 58%,5% 58%,5% 42%,9% 42%,9% 63%,14% 63%,14% 34%,17% 34%,17% 55%,23% 55%,23% 72%,29% 72%,29% 49%,33% 49%,33% 60%,39% 60%,39% 27%,42% 27%,42% 51%,47% 51%,47% 67%,52% 67%,52% 38%,56% 38%,56% 59%,62% 59%,62% 46%,67% 46%,67% 71%,72% 71%,72% 30%,77% 30%,77% 53%,82% 53%,82% 39%,87% 39%,87% 65%,93% 65%,93% 48%,100% 48%,100% 100%,0 100%);
  filter: drop-shadow(0 -12px 30px rgba(41, 160, 231, .18));
}
#menu .mc-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 36px);
  margin: 0;
  text-align: center;
}
#menu .menu-title-wrap { width: 100%; margin: 0 0 clamp(18px, 3vh, 32px); }
#menu .menu-logo-shadow,
#menu .menu-logo {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(58px, 8.5vw, 112px);
  letter-spacing: .045em;
  line-height: .82;
}
#menu .menu-logo-shadow {
  color: rgba(0, 0, 0, .78);
  transform: translate(8px, 10px) skewX(-2deg);
}
#menu .menu-logo {
  color: #cdd8e2;
  background: linear-gradient(180deg,#f7fbff 0%,#aab9c7 24%,#e4edf3 45%,#718497 47%,#c7d2da 72%,#657789 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(230, 247, 255, .48);
  filter: drop-shadow(0 3px 0 #34485a) drop-shadow(0 8px 12px rgba(0, 0, 0, .82));
  text-shadow: none;
}
#menu .menu-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
  color: #eef9ff;
  font: 800 clamp(10px, 1.15vw, 14px)/1 var(--mono);
  letter-spacing: .30em;
}
#menu .menu-subtitle i {
  width: 5px; height: 5px;
  background: var(--access-cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--access-cyan);
}
.access-stage {
  display: grid;
  grid-template-columns: minmax(430px, 610px) 288px;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  width: 100%;
}
#menu .menu-main-buttons { display: grid; align-content: center; gap: 10px; width: 100%; margin: 0; }
#menu .mc-button {
  position: relative;
  min-height: 61px;
  padding: 0 58px 0 76px;
  overflow: hidden;
  border: 1px solid rgba(150, 192, 221, .30);
  border-radius: 4px;
  color: #e9f5ff;
  background: linear-gradient(90deg,rgba(25,43,61,.96),rgba(6,17,31,.94) 68%,rgba(12,29,49,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.78),0 5px 0 rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.28);
  font: 750 clamp(16px, 1.75vw, 22px)/1 "Arial Narrow", "Segoe UI", sans-serif;
  letter-spacing: .09em;
  text-align: left;
  text-shadow: 0 2px 3px #000;
  transform: none;
}
#menu .mc-button::before {
  content: attr(data-icon);
  position: absolute;
  left: 13px; top: 9px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(151, 208, 247, .30);
  color: #c9eaff;
  background: rgba(4, 16, 29, .68);
  box-shadow: inset 0 0 15px rgba(66, 175, 255, .08);
  font: 700 18px/1 var(--mono);
}
#menu .mc-button::after {
  content: '›';
  position: absolute;
  right: 19px; top: 50%;
  color: #cfeeff;
  font: 300 38px/1 sans-serif;
  transform: translateY(-54%);
}
#menu .mc-button:hover {
  border-color: rgba(105, 197, 255, .72);
  background: linear-gradient(90deg,rgba(24,73,116,.98),rgba(7,30,55,.97) 72%,rgba(12,50,83,.96));
  box-shadow: inset 3px 0 var(--access-cyan),0 0 24px rgba(40,154,240,.18),0 5px 0 rgba(0,0,0,.35);
  transform: translateX(3px);
}
#menu .mc-button:active { transform: translate(3px, 2px); }
#menu .mc-button-primary {
  border-color: rgba(109, 203, 255, .88);
  color: #fff;
  background: linear-gradient(90deg,rgba(20,105,188,.98),rgba(11,69,137,.98) 58%,rgba(8,45,92,.98));
  box-shadow: inset 0 1px rgba(229,249,255,.40),inset 4px 0 #67ceff,0 0 0 2px rgba(17,98,179,.38),0 0 28px rgba(31,151,255,.30),0 5px 0 rgba(0,0,0,.38);
}
#menu .mc-button-primary:hover { background: linear-gradient(90deg,#1983df,#0f5db3 62%,#0a458d); }

.access-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 344px;
  padding: 15px 17px 16px;
  border: 1px solid var(--access-line);
  border-radius: 5px;
  background: linear-gradient(180deg,rgba(15,31,48,.94),rgba(3,12,23,.94));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.025),0 16px 42px rgba(0,0,0,.38);
}
.profile-heading { display: flex; align-items: center; gap: 9px; width: 100%; color: #ddecf8; font: 800 13px/1 var(--mono); letter-spacing: .12em; }
.profile-heading span { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--access-line)); }
.profile-heading span:last-child { background: linear-gradient(90deg,var(--access-line),transparent); }
.voxel-avatar {
  position: relative;
  width: 126px; height: 142px;
  margin: 11px 0 8px;
  overflow: hidden;
  border: 1px solid #4e7794;
  border-radius: 7px;
  background:
    linear-gradient(180deg,rgba(55,145,207,.20),transparent 42%),
    repeating-linear-gradient(90deg,transparent 0 20px,rgba(91,177,231,.035) 20px 21px),
    linear-gradient(#102b42,#06121f 72%);
  box-shadow: inset 0 0 30px rgba(58,177,246,.13),0 0 0 2px rgba(7,25,41,.85),0 0 24px rgba(55,171,246,.20);
  cursor: pointer;
  perspective: 420px;
}
.voxel-avatar::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(122,202,249,.14); pointer-events: none; }
.voxel-avatar::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 10px; height: 1px; background: linear-gradient(90deg,transparent,#65cafb,transparent); box-shadow: 0 0 12px #3faeef; pointer-events: none; }
.voxel-avatar:hover .voxel-character,
.voxel-avatar:focus-visible .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(19deg) scale(1.04); }
.voxel-scene { position: absolute; inset: 0; display: block; transform-style: preserve-3d; image-rendering: pixelated; }
.voxel-shadow { position: absolute; left: 50%; bottom: 11px; width: 72px; height: 15px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(3px); transform: translateX(-50%); }
.voxel-character {
  position: absolute;
  left: 50%; top: 50%;
  width: 104px; height: 132px;
  transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg);
  transform-style: preserve-3d;
  transition: transform .34s ease;
  animation: profile-idle 3.6s ease-in-out infinite;
}
.voxel-part { position: absolute; display: block; transform-style: preserve-3d; background: var(--voxel-front); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.voxel-part::before,
.voxel-part::after { content: ''; position: absolute; display: block; }
.voxel-part::before { left: 100%; top: 0; width: var(--voxel-depth); height: 100%; background: var(--voxel-side); transform: rotateY(90deg); transform-origin: left center; }
.voxel-part::after { left: 0; bottom: 100%; width: 100%; height: var(--voxel-depth); background: var(--voxel-top); transform: rotateX(90deg); transform-origin: center bottom; }
.voxel-head {
  --voxel-depth: 18px; --voxel-front: #c98958; --voxel-side: #9b5f3d; --voxel-top: #6b3b21;
  z-index: 5; left: 31px; top: 7px; width: 42px; height: 42px;
  background:
    linear-gradient(#5a321c 0 0) 0 0 / 100% 9px no-repeat,
    linear-gradient(#5a321c 0 0) 0 8px / 8px 6px no-repeat,
    linear-gradient(#5a321c 0 0) 17px 8px / 8px 3px no-repeat,
    linear-gradient(#5a321c 0 0) 34px 8px / 8px 7px no-repeat,
    linear-gradient(#b97449 0 0) 0 14px / 4px 19px no-repeat,
    linear-gradient(#a76943 0 0) 38px 14px / 4px 19px no-repeat,
    #c98958;
}
.voxel-head > span { position: absolute; display: block; pointer-events: none; }
.voxel-ear {
  z-index: 1;
  top: 20px;
  width: 6px;
  height: 11px;
  border: 1px solid #8d5538;
  background: linear-gradient(90deg,#ad6c47,#d79768 55%,#9e603e);
  box-shadow: inset 0 3px 0 rgba(255,206,157,.18),inset 0 -3px 0 rgba(108,54,36,.22);
}
.voxel-ear-left { left: -5px; }
.voxel-ear-right { right: -5px; }
.voxel-eye {
  z-index: 3;
  top: 16px;
  width: 8px;
  height: 6px;
  background: #eefaff;
  box-shadow: inset 0 -1px 0 #b7d8e3,0 0 0 1px rgba(78,45,31,.22);
}
.voxel-eye::after {
  content: '';
  position: absolute;
  top: 1px;
  width: 3px;
  height: 5px;
  background: linear-gradient(#6ed4f5 0 40%,#174965 40% 100%);
  box-shadow: inset 0 -1px 0 #071d2b;
}
.voxel-eye-left { left: 8px; }
.voxel-eye-left::after { right: 1px; }
.voxel-eye-right { right: 8px; }
.voxel-eye-right::after { left: 1px; }
.voxel-nose {
  z-index: 3;
  left: 20px;
  top: 24px;
  width: 3px;
  height: 5px;
  background: linear-gradient(90deg,#a86443,#d99568 67%,#8b4f35 68%);
  box-shadow: 1px 1px 0 rgba(102,51,35,.24);
}
.voxel-mouth {
  z-index: 3;
  left: 16px;
  top: 33px;
  width: 10px;
  height: 2px;
  background: #69352f;
  box-shadow: 2px 2px 0 #b87253,-2px 0 0 rgba(235,162,117,.18);
}
.voxel-torso { --voxel-depth: 15px; --voxel-front: #1375a9; --voxel-side: #07466e; --voxel-top: #38a1ce; z-index: 3; left: 29px; top: 52px; width: 46px; height: 44px; background: linear-gradient(90deg,#0e5a89 0 16%,#1580b5 16% 84%,#0b527f 84%); }
.voxel-arm { --voxel-depth: 13px; --voxel-front: #c98958; --voxel-side: #955b3a; --voxel-top: #1c8db8; z-index: 2; top: 54px; width: 14px; height: 45px; background: linear-gradient(#1680ad 0 35%,#c98958 35%); }
.voxel-arm-left { left: 12px; transform: rotateZ(4deg); }
.voxel-arm-right { right: 12px; transform: rotateZ(-5deg); }
.voxel-leg { --voxel-depth: 14px; --voxel-front: #253e72; --voxel-side: #18294e; --voxel-top: #315182; z-index: 1; top: 98px; width: 19px; height: 30px; background: linear-gradient(#29487d 0 78%,#1b273d 78%); }
.voxel-leg-left { left: 31px; }
.voxel-leg-right { right: 31px; }

/* Capas 3D de equipo. Cada hueco usa el material real que está en
   Player.armor; quitar o romper una pieza elimina su capa al instante. */
.voxel-armor {
  --armor-front: #89939d;
  --armor-side: #515a64;
  --armor-top: #c8d0d7;
  --armor-highlight: #d7dde2;
  --armor-shadow: #3e4750;
  --armor-seam: rgba(25,31,37,.54);
  --armor-depth: 8px;
  --armor-texture:
    linear-gradient(135deg,rgba(255,255,255,.34) 0 9%,transparent 10% 58%,rgba(0,0,0,.18) 59% 100%),
    var(--armor-front);
  position: absolute;
  z-index: 8;
  display: none;
  background: var(--armor-texture);
  box-shadow:
    inset 2px 2px 0 var(--armor-highlight),
    inset -3px -3px 0 var(--armor-shadow),
    inset 0 0 0 1px rgba(0,0,0,.36),
    0 2px 3px rgba(0,0,0,.38);
  transform-style: preserve-3d;
  pointer-events: none;
}
.voxel-armor[data-material] { display: block; }
.voxel-armor::before,
.voxel-armor::after,
.armor-plate::before,
.armor-plate::after { content: ''; position: absolute; display: block; pointer-events: none; }
.voxel-armor::before,
.armor-plate::before {
  left: 100%; top: 0; width: var(--plate-depth,var(--armor-depth)); height: 100%;
  background: var(--armor-side);
  transform: rotateY(90deg); transform-origin: left center;
}
.voxel-armor::after,
.armor-plate::after {
  left: 0; bottom: 100%; width: 100%; height: var(--plate-depth,var(--armor-depth));
  background: var(--armor-top);
  transform: rotateX(90deg); transform-origin: center bottom;
}
.armor-plate {
  --plate-depth: 4px;
  position: absolute;
  display: block;
  background: var(--armor-texture);
  box-shadow:
    inset 2px 2px 0 var(--armor-highlight),
    inset -2px -2px 0 var(--armor-shadow),
    inset 0 0 0 1px var(--armor-seam),
    0 2px 2px rgba(0,0,0,.34);
  transform-style: preserve-3d;
}
.voxel-armor[data-material="leather"] {
  --armor-front:#8a5932; --armor-side:#4f321d; --armor-top:#bb8050;
  --armor-highlight:#c58a57; --armor-shadow:#4c2d19; --armor-seam:rgba(55,29,14,.72);
  --armor-texture:
    linear-gradient(90deg,transparent 0 45%,rgba(65,34,16,.60) 46% 53%,transparent 54%),
    repeating-linear-gradient(0deg,rgba(255,210,145,.10) 0 3px,rgba(58,30,15,.11) 3px 5px),
    #8a5932;
}
.voxel-armor[data-material="gold"] {
  --armor-front:#efc33e; --armor-side:#98700a; --armor-top:#fff0a3;
  --armor-highlight:#fff1a1; --armor-shadow:#9d710d; --armor-seam:rgba(108,69,0,.56);
  --armor-texture:
    linear-gradient(135deg,rgba(255,255,218,.82) 0 8%,transparent 9% 43%,rgba(151,95,0,.27) 44% 54%,transparent 55%),
    linear-gradient(90deg,#dba51c 0 9%,#f3ce4f 10% 90%,#bd8610 91%),
    #efc33e;
}
.voxel-armor[data-material="iron"] {
  --armor-front:#c9cdd0; --armor-side:#737b82; --armor-top:#f4f5f6;
  --armor-highlight:#f6f7f8; --armor-shadow:#717980; --armor-seam:rgba(55,61,66,.62);
  --armor-texture:
    radial-gradient(circle at 12% 17%,#fff 0 1px,#6d747a 2px,transparent 3px),
    radial-gradient(circle at 88% 80%,#e7ebed 0 1px,#676e74 2px,transparent 3px),
    linear-gradient(135deg,#edf0f1 0 10%,#c8cdd0 11% 57%,#a8afb4 58% 70%,#d7dbde 71%),
    #c9cdd0;
}
.voxel-armor[data-material="diamond"] {
  --armor-front:#54ddd7; --armor-side:#207f7c; --armor-top:#b8fbf7;
  --armor-highlight:#c8fffc; --armor-shadow:#1d817e; --armor-seam:rgba(10,95,94,.64);
  --armor-texture:
    linear-gradient(135deg,rgba(226,255,255,.92) 0 8%,transparent 9% 43%,rgba(9,120,119,.31) 44% 52%,transparent 53%),
    linear-gradient(45deg,transparent 0 43%,rgba(192,255,252,.42) 44% 48%,transparent 49%),
    linear-gradient(135deg,#6cebe4,#35bdb9 58%,#70eee6),
    #54ddd7;
}
.voxel-armor-head {
  --armor-depth: 18px;
  left: 27px; top: 1px; width: 50px; height: 36px;
  clip-path: polygon(6% 0,94% 0,100% 15%,96% 100%,80% 100%,79% 40%,21% 40%,20% 100%,4% 100%,0 15%);
  filter: drop-shadow(4px 3px 0 var(--armor-side));
}
.armor-helmet-band { --plate-depth: 3px; z-index: 2; left: 6px; top: 9px; width: 38px; height: 6px; clip-path: polygon(4% 0,96% 0,100% 65%,92% 100%,8% 100%,0 65%); }
.voxel-armor-chest {
  --armor-depth: 17px;
  left: 10px; top: 46px; width: 84px; height: 55px;
  background: none;
  box-shadow: none;
  filter: drop-shadow(5px 4px 0 var(--armor-side));
}
.voxel-armor-chest::before,
.voxel-armor-chest::after { display: none; }
.armor-breastplate { --plate-depth: 9px; z-index: 2; left: 15px; top: 5px; width: 54px; height: 40px; clip-path: polygon(12% 0,88% 0,100% 14%,94% 78%,82% 100%,18% 100%,6% 78%,0 14%); }
.armor-collar { --plate-depth: 7px; z-index: 6; left: 27px; top: 1px; width: 30px; height: 13px; clip-path: polygon(0 0,100% 0,88% 100%,65% 66%,35% 66%,12% 100%); }
.armor-ab-plate { --plate-depth: 8px; z-index: 5; left: 22px; top: 39px; width: 40px; height: 14px; clip-path: polygon(4% 0,96% 0,88% 100%,12% 100%); }
.armor-pauldron { --plate-depth: 10px; z-index: 7; top: 4px; width: 27px; height: 23px; filter: drop-shadow(3px 3px 0 var(--armor-side)); }
.armor-pauldron-left { left: 0; clip-path: polygon(22% 0,100% 12%,86% 88%,70% 100%,0 82%,0 18%); }
.armor-pauldron-right { right: 0; clip-path: polygon(0 12%,78% 0,100% 18%,100% 82%,30% 100%,14% 88%); }
.voxel-armor-legs {
  --armor-depth: 14px;
  top: 94px;
  width: 23px;
  height: 30px;
  clip-path: polygon(5% 0,95% 0,88% 100%,12% 100%);
  filter: drop-shadow(3px 2px 0 var(--armor-side));
}
.voxel-armor-legs-left { left: 29px; }
.voxel-armor-legs-right { right: 29px; }
.armor-knee { --plate-depth: 5px; z-index: 3; left: 1px; top: 19px; width: 21px; height: 10px; clip-path: polygon(8% 0,92% 0,100% 35%,83% 100%,17% 100%,0 35%); }
.voxel-armor-feet {
  --armor-depth: 14px;
  top: 114px;
  width: 24px;
  height: 17px;
  filter: drop-shadow(3px 2px 0 var(--armor-side));
}
.voxel-armor-feet-left { left: 28px; }
.voxel-armor-feet-right { right: 28px; }
.armor-boot-toe { --plate-depth: 6px; z-index: 3; left: -2px; top: 8px; width: 27px; height: 11px; clip-path: polygon(8% 0,92% 0,100% 36%,92% 100%,8% 100%,0 36%); }
@keyframes profile-idle {
  0%,100% { margin-top: 1px; }
  50% { margin-top: -2px; }
}
.profile-name { color: #fff; font: 800 19px/1 "Arial Narrow",sans-serif; letter-spacing: .08em; }
.profile-online { margin-top: 6px; color: #9eb2c3; font-size: 11px; }
.profile-online i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--access-cyan); box-shadow: 0 0 8px var(--access-cyan); }
.profile-stats { width: 100%; margin: 13px 0 9px; border-top: 1px solid var(--access-line); border-bottom: 1px solid var(--access-line); }
.profile-stats div { display: flex; justify-content: space-between; padding: 6px 3px; color: #9db0c1; font-size: 10px; }
.profile-stats div + div { border-top: 1px solid rgba(119,190,239,.12); }
.profile-stats strong { color: #fff; }
.access-profile p { margin: 0 0 11px; color: #8195a7; font-size: 9px; line-height: 1.45; }
.profile-login { width: 100%; padding: 10px; border: 1px solid #43a9ed; color: #eefaff; background: linear-gradient(#1679c8,#0d5198); font: 800 10px/1 var(--mono); letter-spacing: .05em; }

#menu .menu-status {
  margin: 12px 0 8px;
  padding: 6px 13px;
  border: 1px solid rgba(114,180,224,.18);
  border-radius: 999px;
  color: rgba(214,237,251,.76);
  background: rgba(2,10,19,.58);
  font: 600 10px/1 var(--mono);
}
#menu .menu-extra-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 940px;
  padding: 7px;
  border: 1px solid rgba(119,190,239,.14);
  border-radius: 4px;
  background: rgba(3,12,23,.58);
  backdrop-filter: blur(5px);
}
#menu .mc-small-button { padding: 8px 10px; border: 1px solid rgba(117,176,215,.28); border-radius: 3px; color: #b9cada; background: rgba(7,22,38,.88); font: 700 9px/1 var(--mono); }
#menu .mc-small-button:hover,
#menu .mc-small-button.active { border-color: rgba(74,186,255,.70); color: #fff; background: rgba(13,74,124,.92); }
#menu .mode-button.active { outline: 1px solid var(--access-cyan); }
.access-version {
  position: fixed;
  left: 22px; bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(118,187,233,.30);
  color: #9eb5c7;
  background: rgba(2,10,19,.78);
  box-shadow: inset 0 0 18px rgba(33,135,213,.08);
  font: 650 9px/1 var(--mono);
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.access-version > span:last-child { display: grid; gap: 4px; }
.access-version strong { color: #e7f7ff; }
.access-version small { color: #64859d; font: 700 6px/1 var(--mono); letter-spacing: .12em; }
.access-version:hover { border-color: rgba(95,205,255,.70); color: #dff6ff; background: rgba(8,38,62,.94); box-shadow: inset 0 0 20px rgba(33,135,213,.14),0 0 18px rgba(50,170,239,.14); transform: translateY(-2px); }
.access-version:hover small { color: #72cef8; }
.version-cube { color: var(--access-cyan); font-size: 18px; text-shadow: 0 0 10px var(--access-cyan); }
#menu .menu-footer { position: fixed; right: 22px; bottom: 21px; margin: 0; color: rgba(175,204,223,.62); font: 600 9px/1 var(--mono); letter-spacing: .05em; }

#menu .menu-details {
  position: fixed;
  z-index: 10;
  left: 50%; top: 50%;
  width: min(900px, calc(100vw - 44px));
  max-height: min(700px, calc(100vh - 44px));
  margin: 0;
  padding: 18px 20px 20px;
  overflow: auto;
  border: 1px solid rgba(112,190,241,.34);
  border-radius: 5px;
  background: linear-gradient(180deg,rgba(10,28,48,.97),rgba(2,10,20,.98));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.025),0 24px 80px rgba(0,0,0,.72);
  transform: translate(-50%,-50%);
  text-align: left;
}
#menu .menu-details-head { padding-bottom: 12px; border-bottom: 1px solid var(--access-line); }
#menu .menu-details-head strong { color: #eef9ff; font-size: 15px; }
#menu .mc-close { color: #a9c8dc; cursor: pointer; }
#menu .mc-close:hover { color: #fff; background: rgba(42,143,208,.22); }
#menu .world-row { padding: 11px 12px; border-color: rgba(115,179,221,.18); background: linear-gradient(90deg,rgba(14,37,61,.88),rgba(5,17,31,.90)); }
#menu .world-row.active { border-color: rgba(71,185,255,.70); box-shadow: inset 3px 0 var(--access-cyan); }
#menu .world-row-main strong { color: #eff9ff; }
#menu .world-create-grid input,
#menu .access-code-input,
#menu select { border-color: rgba(104,173,219,.35); color: #eef9ff; background: #061321; }
#menu .mode-choice.active { outline-color: var(--access-cyan); background: linear-gradient(#185c91,#103d66); }

.access-panel-intro { margin: -2px 0 15px; color: #8ca5b8; font-size: 11px; line-height: 1.5; }

/* ---------- vestimenta del personaje ----------
   Cada boton lleva sus tres colores de verdad como muestra: se elige
   mirando la ropa, no leyendo el nombre. */
.profile-outfit {
  margin: 0 0 14px; padding: 11px 12px;
  border: 1px solid rgba(99,187,240,.22); border-radius: 4px;
  background: linear-gradient(180deg, rgba(7,25,42,.6), rgba(2,11,21,.6));
}
.profile-outfit-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 9px; font: 700 8px/1.3 var(--mono); letter-spacing: .08em;
}
.profile-outfit-head strong { color: #edf9ff; }
.profile-outfit-head span { color: #65869e; font-size: 7px; text-align: right; }
.profile-outfit-figure {
  display: block; width: 108px; height: auto; margin: 0 auto 10px;
  image-rendering: pixelated;   /* es voxel: nada de suavizarlo */
}
.profile-outfit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.profile-outfit-item {
  display: grid; gap: 5px; justify-items: center;
  padding: 7px 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  background: rgba(10,14,20,.7); color: #d9e5ef;
  font: 700 8px/1 var(--mono);
}
.profile-outfit-item:hover { border-color: rgba(111,191,74,.6); }
.profile-outfit-item.active { border-color: var(--accent); background: rgba(24,44,26,.75); }
.profile-outfit-item em { font-style: normal; letter-spacing: .04em; }
.profile-outfit-swatch { display: flex; border-radius: 2px; overflow: hidden; }
.profile-outfit-swatch i { width: 11px; height: 15px; }
.profile-parts { display: grid; gap: 7px; margin-top: 11px; }
.profile-part-row { display: flex; align-items: center; gap: 9px; }
.profile-part-label {
  flex: 0 0 62px; color: #8ebbd7;
  font: 700 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.profile-part-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.profile-part-dot {
  width: 20px; height: 20px; padding: 0; cursor: pointer; border-radius: 3px;
  border: 2px solid rgba(255,255,255,.18);
}
.profile-part-dot:hover { border-color: rgba(255,255,255,.55); }
.profile-part-dot.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.profile-part-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.profile-outfit-note {
  margin: 9px 0 0; color: var(--muted); font: 400 10px/1.45 var(--mono);
}
.profile-outfit-note code {
  padding: 1px 4px; border-radius: 3px;
  background: rgba(0,0,0,.34); font-size: 9px;
}

@media (max-width: 640px) {
  .profile-outfit-list { grid-template-columns: repeat(2, 1fr); }
  .profile-outfit-head { flex-direction: column; align-items: flex-start; }
  .profile-outfit-head span { text-align: left; }
}

/* ---------- multijugador por internet ----------
   El panel dejo de ser una demostracion, asi que necesita decir cosas
   que antes no tenia que decir: si hay servidor, si estas dentro, y
   quien mas hay. El punto de color es lo primero que se mira, por eso
   va antes que el texto. */
.mp-status {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 11px;
  border: 1px solid rgba(99,187,240,.28); border-radius: 4px;
  background: rgba(7,25,42,.55);
  font: 700 9px/1.4 var(--mono); letter-spacing: .06em;
}
.mp-dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: #5b6472; box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.mp-dot.on { background: #6fbf4a; }
.mp-dot.wait { background: #d7b77a; animation: mpLatido 1s ease-in-out infinite; }
.mp-dot.err { background: #d96a5a; }
@keyframes mpLatido { 50% { opacity: .35; } }
.mp-count { margin-left: auto; color: #8ebbd7; }

.mp-server-card { margin-top: 14px; }
.mp-server-input {
  /* Una URL no es un codigo: ni centrada, ni espaciada, ni enorme. */
  text-align: left; letter-spacing: 0; font-size: 12px; font-weight: 600;
}
.mp-server-card code {
  padding: 1px 4px; border-radius: 3px;
  background: rgba(0,0,0,.32); font-family: var(--mono); font-size: 11px;
}

.mp-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mp-hint { color: var(--muted); font: 400 11px/1.4 var(--mono); flex: 1 1 220px; }
#btn-multiplayer-leave[disabled] { opacity: .45; cursor: default; }

.mp-players-box {
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid rgba(99,187,240,.22); border-radius: 4px;
  background: rgba(4,16,28,.5);
}
.mp-players-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font: 700 8px/1 var(--mono); letter-spacing: .08em; color: #8ebbd7;
}
.mp-players { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-players li {
  padding: 4px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  background: rgba(10,14,20,.7); color: #d9e5ef;
  font: 700 10px/1 var(--mono);
  /* Los nombres los eligen desconocidos: uno larguisimo no puede
     descuadrar el panel de todos los demas. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-players li.mp-me { border-color: var(--accent); color: #cdeeb8; }
.mp-players li.mp-empty,
.mp-popular-list li.mp-empty {
  border: 0; background: none; color: var(--muted);
  font-weight: 400; font-size: 11px; padding-left: 0;
}

/* ---------- mundos con mas jugadores ----------
   Hoy esta vacia a proposito: no hay directorio de salas publicas
   todavia. Se deja montada para que el dia que lo haya solo haya que
   rellenar la lista. */
.mp-popular {
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid rgba(99,187,240,.22); border-radius: 4px;
  background: linear-gradient(180deg, rgba(7,25,42,.6), rgba(2,11,21,.6));
}
.mp-popular-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font: 700 8px/1 var(--mono); letter-spacing: .08em;
}
.mp-popular-head strong { color: #edf9ff; }
.mp-popular-head span { color: #65869e; font-size: 7px; }
.mp-popular-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

@media (max-width: 640px) {
  .mp-status { flex-wrap: wrap; }
  .mp-count { margin-left: 0; width: 100%; }
}

.multiplayer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.access-card { display: flex; flex-direction: column; gap: 10px; min-height: 255px; padding: 17px; border: 1px solid rgba(105,179,226,.24); background: rgba(4,17,30,.72); }
.access-card p { min-height: 34px; margin: 0; color: #8ca3b5; font-size: 10px; line-height: 1.55; }
.access-card .mc-button { width: 100%; min-height: 48px; margin-top: auto; padding-left: 16px; text-align: center; font-size: 13px; }
#menu .access-card .mc-button::before,
#menu .access-card .mc-button::after { display: none; }
.access-code-input { width: 100%; padding: 13px; border: 1px solid; font: 800 17px/1 var(--mono); letter-spacing: .12em; text-align: center; }
.code-status { color: #8498a9; font-size: 10px; }
.code-status.success { color: #66dcba; }
.code-status.error { color: #ff8b91; }
.generated-code { display: grid; place-items: center; flex: 1; min-height: 70px; border: 1px dashed rgba(76,185,255,.42); color: var(--access-ice); background: rgba(9,47,79,.34); font: 800 20px/1 var(--mono); letter-spacing: .10em; }
#menu .profile-panel { width: min(960px,calc(100vw - 44px)); padding-bottom: 18px; overflow-x: hidden; }
.profile-layout { display: grid; grid-template-columns: 218px minmax(0,1fr); min-height: 480px; margin-top: 14px; border: 1px solid rgba(104,179,227,.20); background: rgba(2,11,20,.52); }
.profile-identity { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; border-right: 1px solid rgba(104,179,227,.20); background: radial-gradient(circle at 50% 18%,rgba(26,103,157,.25),transparent 45%),rgba(4,18,31,.78); text-align: center; }
.profile-avatar-large { flex: 0 0 auto; width: 154px; height: 186px; margin: 0 0 15px; cursor: default; }
.profile-avatar-large .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(1.26); }
.profile-avatar-large:hover .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(1.26); }
.profile-panel-name { max-width: 100%; overflow: hidden; color: #f2fbff; font: 900 19px/1.1 "Arial Narrow",sans-serif; letter-spacing: .08em; text-overflow: ellipsis; }
.profile-rank { margin-top: 7px; color: #7eb9dd; font: 700 8px/1 var(--mono); letter-spacing: .08em; }
.profile-rank i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #54d3ff; box-shadow: 0 0 8px #54d3ff; }
.profile-level-ring { display: grid; place-items: center; width: 76px; height: 76px; margin-top: 19px; border: 2px solid rgba(82,194,255,.72); border-radius: 50%; background: radial-gradient(circle,rgba(26,102,160,.48),rgba(3,17,30,.92) 66%); box-shadow: inset 0 0 18px rgba(50,161,230,.26),0 0 18px rgba(43,160,229,.14); }
.profile-level-ring span { color: #8fb8d0; font-size: 7px; letter-spacing: .12em; transform: translateY(5px); }
.profile-level-ring strong { color: #fff; font: 900 24px/1 var(--mono); transform: translateY(-5px); }
.profile-storage-state { margin-top: auto; padding-top: 17px; color: #829caf; font-size: 8px; line-height: 1.45; }
.profile-content { min-width: 0; padding: 0 18px 18px; }
.profile-tabs { display: flex; gap: 3px; margin-bottom: 17px; border-bottom: 1px solid rgba(108,182,230,.20); }
#menu .profile-tab { position: relative; padding: 15px 18px 12px; border: 0; color: #7692a6; background: transparent; font: 800 9px/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
#menu .profile-tab::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: transparent; }
#menu .profile-tab:hover { color: #dff5ff; background: rgba(31,119,176,.10); }
#menu .profile-tab.active { color: #f3fbff; }
#menu .profile-tab.active::after { background: #50c6ff; box-shadow: 0 0 9px #2caefa; }
.profile-pane { min-height: 375px; }
.profile-progress-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.profile-progress-head div { display: grid; gap: 5px; }
.profile-progress-head span { color: #7891a4; font-size: 8px; text-transform: uppercase; }
.profile-progress-head strong { color: #e9f8ff; font-size: 11px; }
.profile-progress { height: 9px; margin: 9px 0 15px; overflow: hidden; border: 1px solid rgba(103,183,234,.25); background: #020a12; box-shadow: inset 0 1px 4px #000; }
.profile-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#147bc2,#55d0ff); box-shadow: 0 0 11px #38baf8; transition: width .35s ease; }
.profile-overview-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.profile-overview-grid > div { display: grid; gap: 4px; padding: 13px 10px; border: 1px solid rgba(105,179,226,.17); background: linear-gradient(145deg,rgba(13,46,72,.62),rgba(3,15,27,.72)); }
.profile-overview-grid span { color: #82a1b7; font-size: 8px; text-transform: uppercase; }
.profile-overview-grid strong { color: #f1faff; font: 900 19px/1 var(--mono); }
.profile-overview-grid small { color: #607b8e; font-size: 8px; }
.profile-activity { display: grid; gap: 8px; margin-top: 14px; }
.profile-activity > div { display: flex; align-items: center; gap: 12px; min-height: 61px; padding: 11px 13px; border: 1px solid rgba(104,178,225,.15); background: rgba(4,17,29,.64); }
.profile-activity-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(82,190,249,.40); color: #7bd8ff; background: rgba(24,100,150,.20); font-size: 17px; }
.profile-activity > div > div { display: grid; gap: 5px; }
.profile-activity strong { color: #dff4ff; font-size: 10px; }
.profile-activity div span:last-child { color: #7893a6; font-size: 9px; line-height: 1.45; }
.profile-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.profile-section-title > div { display: grid; gap: 5px; }
.profile-section-title strong { color: #eefaff; font-size: 12px; }
.profile-section-title span { color: #7d98aa; font-size: 8px; line-height: 1.45; }
.profile-section-title > span { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid rgba(80,190,248,.40); border-radius: 50%; color: #67d0ff; background: rgba(20,87,134,.24); font: 900 11px/1 var(--mono); }
.profile-achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; max-height: 317px; overflow-y: auto; padding-right: 3px; }
.profile-achievement { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; min-height: 58px; padding: 9px; border: 1px solid rgba(91,145,181,.14); color: #61788a; background: rgba(4,15,26,.55); filter: saturate(.35); }
.profile-achievement.unlocked { border-color: rgba(80,191,246,.34); color: #e8f8ff; background: linear-gradient(90deg,rgba(17,79,120,.46),rgba(3,16,28,.66)); filter: none; }
.profile-achievement-badge { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; color: inherit; background: rgba(58,132,180,.10); font-size: 15px; }
.profile-achievement > div:last-child { display: grid; min-width: 0; gap: 4px; }
.profile-achievement strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-achievement span { color: #718a9b; font-size: 8px; line-height: 1.35; }
.profile-achievement.unlocked span { color: #8eb0c5; }
.cloud-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 12px; }
.cloud-benefits > div { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 3px 8px; align-items: center; padding: 10px; border: 1px solid rgba(97,173,220,.17); background: rgba(6,24,40,.64); }
.cloud-benefits > div > span { grid-row: 1 / 3; color: #65cdff; font-size: 20px; text-align: center; }
.cloud-benefits strong { color: #dff5ff; font-size: 9px; }
.cloud-benefits small { color: #6e8b9e; font-size: 7px; }
.profile-local-name-form { padding: 11px; border: 1px solid rgba(100,178,226,.18); background: rgba(4,16,28,.60); }
.profile-local-name-form > label { display: block; margin-bottom: 7px; color: #91aabd; font-size: 8px; text-transform: uppercase; }
.profile-local-name-form > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
#menu .profile-local-name-form input,
#menu .profile-auth-form input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid rgba(104,173,219,.35); border-radius: 2px; color: #eef9ff; background: #061321; font: 500 11px/1 var(--mono); user-select: text; }
.account-divider { display: flex; align-items: center; gap: 10px; margin: 13px 0 10px; color: #69869a; font-size: 7px; letter-spacing: .12em; }
.account-divider::before,
.account-divider::after { content: ''; flex: 1; height: 1px; background: rgba(104,178,225,.16); }
#menu .google-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid rgba(185,211,227,.50); border-radius: 2px; color: #102536; background: #f4f8fb; font: 800 9px/1 var(--mono); cursor: pointer; }
#menu .google-login:hover { background: #fff; box-shadow: 0 0 15px rgba(190,226,248,.14); }
.google-login > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); font: 900 11px/1 Arial,sans-serif; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border: 1px solid rgba(105,178,225,.19); }
#menu .auth-switch button { padding: 8px; border: 0; color: #7794a8; background: rgba(3,14,25,.72); font: 800 8px/1 var(--mono); cursor: pointer; }
#menu .auth-switch button.active { color: #f0fbff; background: rgba(18,92,141,.64); box-shadow: inset 0 -2px #53c7ff; }
.profile-auth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.profile-auth-form label { display: grid; gap: 5px; color: #87a3b6; font-size: 8px; }
.profile-auth-form > .mc-button,
.profile-auth-form > .auth-status { grid-column: 1 / -1; }
#menu .profile-auth-form > .mc-button { min-height: 39px; padding: 9px; font-size: 10px; }
#menu .profile-auth-form > .mc-button::before,
#menu .profile-auth-form > .mc-button::after { display: none; }
.auth-status { display: block; min-height: 11px; margin-top: 6px; color: #728da0; font-size: 8px; line-height: 1.4; }
.auth-status.success { color: #68dfbc; }
.auth-status.error { color: #ff9399; }
.account-security-note { margin: 9px 0 0; color: #6d879a; font-size: 7px; line-height: 1.45; }
.account-security-note strong { color: #9fb9ca; }

#menu .version-history-panel { width: min(760px,calc(100vw - 44px)); }
.version-history-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0; padding: 13px 14px; border: 1px solid rgba(95,181,235,.20); background: linear-gradient(90deg,rgba(14,60,93,.54),rgba(3,16,29,.68)); }
.version-history-intro > div { display: flex; align-items: center; gap: 11px; }
.version-history-intro > div > div { display: grid; gap: 5px; }
.version-history-intro strong { color: #eefaff; font-size: 12px; }
.version-history-intro span { color: #7f9eb3; font-size: 8px; line-height: 1.4; }
.version-history-mark { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border: 1px solid rgba(87,198,255,.48); color: #67d2ff !important; background: rgba(18,91,139,.30); box-shadow: inset 0 0 15px rgba(53,181,245,.14); font-size: 20px !important; }
.version-current-label { flex: 0 0 auto; display: grid; gap: 5px; padding-left: 15px; border-left: 1px solid rgba(98,179,229,.20); text-align: right; }
.version-current-label strong { color: #65d0ff; font: 900 16px/1 var(--mono); }
.version-timeline { position: relative; display: grid; gap: 9px; padding-left: 20px; }
.version-timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(#5bcaff,rgba(64,153,208,.20)); }
.version-release { position: relative; padding: 13px 15px; border: 1px solid rgba(99,165,207,.16); background: rgba(3,15,27,.68); }
.version-release::before { content: ''; position: absolute; left: -20px; top: 20px; width: 9px; height: 9px; border: 2px solid #1d6c9d; border-radius: 50%; background: #071725; }
.version-release.current { border-color: rgba(79,194,250,.45); background: linear-gradient(90deg,rgba(16,78,121,.46),rgba(3,16,28,.75)); box-shadow: inset 3px 0 #54caff; }
.version-release.current::before { border-color: #69d5ff; background: #56c9f9; box-shadow: 0 0 11px #42bff7; }
.version-release-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.version-release-head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.version-release-head strong { color: #f0fbff; font-size: 12px; }
.version-release-head span { color: #63bfe9; font-size: 7px; letter-spacing: .10em; }
.version-release-head time { flex: 0 0 auto; color: #5f7d91; font-size: 7px; }
.version-release-description { margin: 8px 0 0; color: #b0c8d7; font-size: 8px; line-height: 1.55; }
.version-release-art { display: block; width: 100%; max-height: 260px; margin: 11px 0 0; border: 1px solid rgba(116,202,248,.30); object-fit: cover; object-position: center 54%; background: #020812; box-shadow: inset 0 0 20px rgba(73,185,243,.10),0 10px 28px rgba(0,0,0,.24); }
.version-release-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.version-release-gallery .version-release-art { height: 190px; }
@media (max-width: 680px) { .version-release-gallery { grid-template-columns: 1fr; } }
.version-release ul { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.version-release li { position: relative; padding-left: 13px; color: #8ba5b6; font-size: 8px; line-height: 1.45; }
.version-release li::before { content: '›'; position: absolute; left: 0; color: #55c8fb; }

@media (max-height: 760px) and (min-width: 641px) {
  #menu .menu-title-wrap { margin-bottom: 14px; }
  #menu .menu-logo-shadow,
  #menu .menu-logo { font-size: clamp(48px,7.5vw,82px); }
  #menu .menu-subtitle { margin-top: 10px; }
  #menu .mc-button { min-height: 51px; }
  #menu .mc-button::before { top: 7px; width: 36px; height: 36px; }
  .access-profile { min-height: 300px; padding-top: 11px; }
  .access-profile > .voxel-avatar { width: 94px; height: 112px; margin: -5px 0 -8px; transform: scale(.78); }
  #menu .menu-status { margin: 8px 0 6px; }
  #menu .menu-extra-buttons { padding: 5px; }
}
@media (max-width: 820px) {
  #menu.main-menu-overlay { padding: 14px; overflow: auto; }
  #menu .mc-menu { width: min(720px,calc(100vw - 28px)); max-height: none; }
  .access-stage { grid-template-columns: minmax(340px,1fr) 220px; gap: 16px; }
  .access-profile { min-height: 320px; padding: 12px; }
  .access-profile > .voxel-avatar { width: 92px; height: 108px; margin: -3px 0 -7px; transform: scale(.78); }
  #menu .menu-extra-buttons { max-width: 100%; }
}
@media (max-width: 640px) {
  #menu.main-menu-overlay { align-items: start; overflow: auto; }
  #menu .mc-menu { padding-bottom: 18px; }
  #menu .menu-title-wrap { margin: 16px 0 20px; }
  #menu .menu-logo-shadow,
  #menu .menu-logo { font-size: clamp(43px,14vw,68px); }
  #menu .menu-subtitle { gap: 8px; font-size: 8px; letter-spacing: .12em; }
  .access-stage { grid-template-columns: 1fr; gap: 12px; }
  #menu .menu-main-buttons { gap: 7px; }
  #menu .mc-button { min-height: 51px; padding-left: 64px; font-size: 15px; }
  #menu .mc-button::before { left: 9px; top: 7px; width: 35px; height: 35px; }
  .access-profile { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; min-height: 0; gap: 3px 12px; padding: 11px 13px; text-align: left; }
  .profile-heading,
  .profile-stats,
  .access-profile p { display: none; }
  .access-profile > .voxel-avatar { grid-row: 1 / 4; width: 62px; height: 66px; margin: 0; transform: none; }
  .access-profile > .voxel-avatar .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(.52); }
  .access-profile > .voxel-avatar:hover .voxel-character,
  .access-profile > .voxel-avatar:focus-visible .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(19deg) scale(.54); }
  .profile-name { align-self: end; font-size: 15px; }
  .profile-online { align-self: start; margin: 0; }
  .profile-login { grid-column: 2; width: max-content; padding: 7px 10px; }
  #menu .menu-status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #menu .menu-extra-buttons { overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; width: 100%; }
  #menu .menu-extra-buttons { scrollbar-width: none; }
  #menu .menu-extra-buttons::-webkit-scrollbar { display: none; }
  #menu .mc-small-button { flex: 0 0 auto; }
  .access-version,
  #menu .menu-footer { position: static; margin-top: 10px; }
  #menu .menu-footer { display: none; }
  #menu .menu-details { inset: 10px; width: auto; max-height: calc(100vh - 20px); padding: 14px; transform: none; }
  .multiplayer-grid,
  #menu .menu-options-grid,
  #menu .controls-grid,
  .world-create-grid,
  .world-mode-grid { grid-template-columns: 1fr; }
  #menu .profile-panel { width: auto; }
  #menu .version-history-panel { width: auto; }
  .version-history-intro { align-items: flex-start; }
  .version-current-label { padding-left: 10px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-identity { display: grid; grid-template-columns: 84px 1fr 62px; grid-template-rows: auto auto auto; gap: 3px 10px; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(104,179,227,.20); text-align: left; }
  .profile-avatar-large { grid-row: 1 / 4; width: 82px; height: 91px; margin: 0; }
  .profile-avatar-large .voxel-character,
  .profile-avatar-large:hover .voxel-character { transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(.72); }
  .profile-panel-name { align-self: end; font-size: 15px; }
  .profile-rank { align-self: start; margin: 2px 0 0; }
  .profile-level-ring { grid-column: 3; grid-row: 1 / 4; width: 56px; height: 56px; margin: auto 0; }
  .profile-level-ring strong { font-size: 18px; }
  .profile-storage-state { align-self: start; margin: 0; padding: 0; font-size: 7px; }
  .profile-content { padding: 0 10px 12px; }
  #menu .profile-tab { flex: 1; padding: 13px 5px 10px; }
  .profile-pane { min-height: 0; }
  .profile-overview-grid { grid-template-columns: 1fr 1fr; }
  .profile-achievement-grid { grid-template-columns: 1fr; max-height: none; }
  .cloud-benefits { grid-template-columns: 1fr; }
  .cloud-benefits > div { grid-template-columns: 24px 1fr; padding: 7px 9px; }
  .profile-auth-form { grid-template-columns: 1fr; }
  .profile-auth-form > * { grid-column: 1 !important; }
}
@media (max-width: 430px) {
  .version-history-intro { flex-direction: column; gap: 10px; }
  .version-current-label { width: 100%; padding: 9px 0 0; border-top: 1px solid rgba(98,179,229,.20); border-left: 0; text-align: left; }
  .version-release-head { align-items: flex-start; }
  .version-release-head > div { display: grid; }
}

/* ============================================================
   Controles configurables
   ============================================================ */

#menu .controls-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  gap: 12px;
  align-items: start;
}

#menu .controls-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(105, 179, 226, .22);
  border-radius: 4px;
  background: rgba(3, 15, 27, .62);
  box-shadow: inset 0 0 22px rgba(33, 135, 213, .055);
}

#menu .controls-keyboard-card { grid-row: span 2; }

#menu .controls-card-head {
  display: grid;
  gap: 4px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(105, 179, 226, .16);
}

#menu .controls-card-head strong {
  color: #edf9ff;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#menu .controls-card-head span {
  margin: 0;
  color: #839bad;
  font-size: 9px;
  line-height: 1.45;
  text-align: left;
}

.keybindings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.keybinding-row,
.control-binding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 35px;
  padding: 5px 6px 5px 9px;
  border: 1px solid rgba(118, 187, 233, .13);
  border-radius: 3px;
  color: #a9becd;
  background: rgba(8, 28, 44, .64);
  font-size: 9.5px;
}

.keybinding-row > span,
.control-binding-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menu .keybind-button,
#menu [data-bind-action] {
  flex: 0 0 auto;
  min-width: 74px;
  min-height: 27px;
  padding: 5px 8px;
  border-color: rgba(86, 180, 240, .38);
  color: #eefaff;
  background: linear-gradient(#123d61, #09243d);
  font: 750 9px/1 var(--mono);
  cursor: pointer;
}

#menu .keybind-button:hover,
#menu [data-bind-action]:hover {
  border-color: var(--access-cyan);
  background: linear-gradient(#185a8b, #0b3457);
}

#menu .keybind-button.listening,
#menu .keybind-button.is-listening,
#menu [data-bind-action].listening,
#menu [data-bind-action].is-listening {
  border-color: #ffe36e;
  color: #161b20;
  background: #ffe36e;
  box-shadow: 0 0 0 2px rgba(255, 227, 110, .18), 0 0 16px rgba(255, 227, 110, .22);
}

.keybind-status {
  min-height: 27px;
  margin: 9px 0 7px;
  padding: 7px 9px;
  border-left: 2px solid rgba(75, 183, 249, .55);
  color: #91a9bb;
  background: rgba(13, 49, 76, .33);
  font-size: 9px;
  line-height: 1.45;
}

.keybind-status.error { border-color: #ff7d85; color: #ffb5ba; }
.keybind-status.success { border-color: #67dfb9; color: #98efd4; }

#menu .controls-reset-button { width: 100%; }

#menu .controls-fixed-grid {
  grid-template-columns: 1fr;
  gap: 5px;
}

#menu .controls-grid > .control-fixed-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  color: #91a7b8;
  font-size: 9px;
}

#menu .control-fixed-row kbd { flex: 0 0 auto; }
#menu .control-fixed-row span { margin-left: auto; color: #d8e9f4; text-align: right; }

#menu .touch-sensitivity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 11px;
}

#menu .touch-sensitivity > span {
  float: none;
  color: #c7dce9;
  font-size: 9.5px;
}

#menu .touch-sensitivity output {
  color: var(--access-cyan);
  font-size: 9.5px;
}

#menu .touch-sensitivity input { grid-column: 1 / -1; margin-top: 2px; }

#menu .mobile-layout-actions { display: grid; gap: 7px; }
#menu .mobile-layout-actions .mc-button {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  text-align: center;
  font-size: 10px;
}
#menu .mobile-layout-actions .mc-button::before,
#menu .mobile-layout-actions .mc-button::after { display: none; }
#menu .mobile-layout-actions .mc-small-button { width: 100%; min-height: 31px; }

.mobile-controls-note {
  margin: 10px 0 0;
  color: #7f97a9;
  font-size: 8.5px;
  line-height: 1.55;
}

/* ============================================================
   Capa táctil del juego
   ============================================================ */

#mobile-controls {
  --mobile-joystick-size: clamp(88px, 24vw, 124px);
  --mobile-action-size: clamp(42px, 10.8vw, 54px);
  --mobile-action-gap: clamp(4px, 1.2vw, 7px);
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.mobile-capable #mobile-controls,
#mobile-controls.active,
body.mobile-layout-edit #mobile-controls { display: block; }
body.mobile-layout-edit #mobile-controls { z-index: 45; }
.mobile-context-hidden { display: none !important; }

.mobile-joystick {
  position: absolute;
  width: var(--mobile-joystick-size);
  height: var(--mobile-joystick-size);
  transform: translate(-50%, -50%);
  border: 2px solid rgba(183, 225, 250, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(92, 183, 238, .22), rgba(8, 27, 43, .52) 54%, rgba(1, 9, 17, .68));
  box-shadow: inset 0 0 0 5px rgba(3, 17, 29, .32), 0 3px 15px rgba(0, 0, 0, .36);
  opacity: .76;
  pointer-events: auto;
  touch-action: none;
}

#mobile-move-joystick {
  left: var(--mobile-move-x, 18%);
  top: var(--mobile-move-y, 79%);
}

.mobile-joystick-ring {
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(189, 229, 252, .30);
  border-radius: 50%;
  pointer-events: none;
}

.mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43%;
  height: 43%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(226, 247, 255, .70);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(145, 218, 255, .78), rgba(26, 107, 166, .78) 60%, rgba(7, 46, 80, .92));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 8px rgba(219, 246, 255, .30);
  pointer-events: none;
  will-change: transform;
}

.mobile-joystick-label {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  color: rgba(229, 247, 255, .74);
  font: 750 7px/1 var(--mono);
  letter-spacing: .10em;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.mobile-action-group {
  position: absolute;
  display: grid;
  gap: var(--mobile-action-gap);
  pointer-events: none;
}

.mobile-action {
  width: var(--mobile-action-size);
  height: var(--mobile-action-size);
  min-width: 0;
  min-height: 0;
  padding: 3px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid rgba(196, 230, 250, .42);
  border-radius: 10px;
  color: #effaff;
  background: linear-gradient(155deg, rgba(31, 92, 137, .82), rgba(3, 24, 42, .88));
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 3px 9px rgba(0, 0, 0, .36);
  opacity: .84;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-action b { font: 800 clamp(15px, 4.6vw, 22px)/.9 var(--mono); }
.mobile-action span { font: 750 clamp(5px, 1.6vw, 7px)/1 var(--mono); letter-spacing: .03em; }
.mobile-action-primary { border-color: rgba(98, 197, 255, .68); background: linear-gradient(155deg, rgba(24, 121, 190, .90), rgba(5, 46, 80, .94)); }
.mobile-action-small { width: auto; min-width: var(--mobile-action-size); }
.mobile-action-round { border-radius: 50%; }
.mobile-action-round b { font-size: clamp(26px, 8vw, 36px); line-height: .6; }

.mobile-action:active,
.mobile-action.is-held,
.mobile-action.active {
  opacity: 1;
  transform: translateY(2px) scale(.96);
  border-color: #fff;
  background: linear-gradient(155deg, rgba(48, 160, 228, .98), rgba(8, 69, 114, .98));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .22), 0 0 12px rgba(64, 183, 255, .28);
}

#inventory #btn-inv-quick.active {
  border-color: #7dd5ff;
  color: #e8f9ff;
  background: #14547e;
}

.mobile-top-actions {
  top: max(9px, env(safe-area-inset-top));
  right: max(9px, env(safe-area-inset-right));
  /* 1.20: four buttons (backpack, save, photo, menu) in one row. */
  grid-template-columns: repeat(4, auto);
}
/* On an upright phone that row reaches the middle of the screen, so the
   objective banner goes below it and below the oxygen panel instead of
   covering the backpack and save buttons. */
@media (orientation: portrait) and (max-width: 560px) {
  #objective-tracker { top: calc(max(9px, env(safe-area-inset-top)) + 118px); }
}

.mobile-top-actions .mobile-action {
  width: clamp(48px, 13vw, 65px);
  height: clamp(38px, 9.8vw, 46px);
}

.mobile-move-actions {
  left: max(8px, env(safe-area-inset-left));
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 21vh + 54px);
  grid-template-columns: repeat(2, var(--mobile-action-size));
}

.mobile-build-actions {
  right: max(8px, env(safe-area-inset-right));
  top: clamp(150px, 27vh, 245px);
  bottom: auto;
  grid-template-columns: repeat(3, var(--mobile-action-size));
}

.mobile-placement-pad {
  --mobile-placement-size: clamp(38px, 9.8vw, 48px);
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 106px);
  display: none;
  grid-template-columns: repeat(3, var(--mobile-placement-size));
  grid-template-rows: repeat(3, var(--mobile-placement-size));
  padding: 7px;
  border: 1px solid rgba(103, 202, 255, .58);
  border-radius: 14px;
  background: rgba(2, 16, 29, .72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .42), inset 0 0 14px rgba(53, 166, 229, .10);
  pointer-events: auto;
}

#mobile-controls.placement-editing .mobile-placement-pad { display: grid; }
#mobile-controls.placement-editing .mobile-build-actions {
  visibility: hidden;
  pointer-events: none;
}

.mobile-placement-pad .mobile-action {
  width: var(--mobile-placement-size);
  height: var(--mobile-placement-size);
  border-radius: 9px;
}
.mobile-placement-pad .mobile-action b { font-size: clamp(18px, 5vw, 24px); }
.mobile-placement-pad .mobile-action span { font-size: clamp(4.5px, 1.35vw, 6px); }
.mobile-placement-up { grid-column: 2; grid-row: 1; }
.mobile-placement-cancel { grid-column: 3; grid-row: 1; border-color: rgba(255, 121, 121, .60); }
.mobile-placement-left { grid-column: 1; grid-row: 2; }
.mobile-placement-confirm {
  grid-column: 2; grid-row: 2;
  border-color: rgba(113, 238, 158, .82);
  background: linear-gradient(155deg, rgba(35, 143, 91, .94), rgba(5, 55, 39, .96));
}
.mobile-placement-right { grid-column: 3; grid-row: 2; }
.mobile-placement-down { grid-column: 2; grid-row: 3; }

.mobile-hotbar-nav {
  left: 50%;
  bottom: calc(max(7px, env(safe-area-inset-bottom)) + 41px);
  grid-template-columns: repeat(2, var(--mobile-action-size));
  gap: clamp(42px, 17vw, 105px);
  transform: translateX(-50%);
}

#mobile-layout-toolbar {
  position: absolute;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  width: min(620px, calc(100vw - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right))));
  min-height: 48px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(110, 200, 255, .62);
  border-radius: 7px;
  color: #e9f8ff;
  background: rgba(2, 16, 29, .94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .52);
  pointer-events: auto;
  touch-action: manipulation;
}

#mobile-layout-toolbar span { margin-right: auto; font-size: 9px; }
#mobile-layout-toolbar button {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(105, 190, 245, .42);
  border-radius: 3px;
  color: #dff5ff;
  background: #0b3555;
  font: 750 8px/1 var(--mono);
}
#mobile-layout-toolbar #btn-mobile-layout-done { border-color: #64c7ff; background: #116cae; }

body.overlay-open:not(.mobile-layout-edit) #mobile-controls {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.mobile-layout-edit .mobile-action-group { opacity: .22; pointer-events: none; }
body.mobile-layout-edit .mobile-action { pointer-events: none; }
body.mobile-layout-edit .mobile-joystick {
  opacity: 1;
  border-color: #ffe36e;
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(255, 227, 110, .18), 0 0 24px rgba(255, 227, 110, .24);
  animation: mobileEditPulse 1.15s ease-in-out infinite alternate;
}
body.mobile-layout-edit .mobile-joystick:active { cursor: grabbing; }

@keyframes mobileEditPulse {
  from { filter: brightness(.96); }
  to { filter: brightness(1.18); }
}

@media (pointer: coarse), (max-width: 760px), (max-width: 950px) and (max-height: 560px) {
  #mobile-controls { display: block; }
  #hud-buttons { display: none; }

  /* Aquí los botones del HUD no existen: el ☰ vive en
     .mobile-top-actions, que es más alta y respeta el notch. El panel
     baja exactamente lo mismo para seguir quedando justo debajo. */
  .menu-survival-status {
    top: calc(max(9px, env(safe-area-inset-top)) + clamp(38px, 9.8vw, 46px) + 8px);
    right: max(9px, env(safe-area-inset-right));
    width: min(210px, 52vw);
  }
  .menu-survival-status.multiple-alerts {
    left: max(9px, env(safe-area-inset-left));
    right: auto;
  }

  button,
  .slot,
  .tab {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  #hud-bottom {
    z-index: 8;
    bottom: max(3px, env(safe-area-inset-bottom));
    gap: 3px;
  }

  #block-name { min-height: 14px; font-size: 10px; }

  #hotbar {
    width: min(512px, calc(100vw - 12px));
    gap: 2px;
    max-width: calc(100vw - 12px);
    padding: 2px;
    border-width: 1px;
  }

  #hotbar > .slot {
    width: clamp(29px, calc((100vw - 52px) / 9), 44px);
    height: clamp(29px, calc((100vw - 52px) / 9), 44px);
    border-width: 1px;
  }

  #hotbar > .slot .icon {
    width: 72%;
    height: 72%;
  }

  #hotbar > .slot .num { left: 2px; bottom: 0; font-size: 7px; }
  #hotbar > .slot .count { right: 1px; bottom: -1px; font-size: 9px; }

  #vitals {
    width: min(508px, calc(100vw - 12px));
    max-width: calc(100vw - 12px);
    gap: 2px;
    margin-bottom: 1px;
    transform: none;
  }
  .hud-life-line { grid-template-columns: minmax(0, 56%) minmax(0, 1fr); }
  .hud-armor-line { width: 56%; height: 25px; padding: 0; border-width: 1px; gap: 0; }
  .hud-shield { width: 29px; min-height: 23px; }
  .hud-shield svg { width: 23px; height: 25px; }
  .vbar.armor { height: 23px; }
  .vbar.armor .armor-copy { padding-inline: 5px; font-size: 7px; }
  .vbar.armor .armor-copy strong { font-size: 8px; }
  .hud-health-cluster { flex-basis: 56%; border-width: 1px; }
  .hud-heart { width: 28px; min-height: 22px; font-size: 19px; }
  .vbar.health { height: 24px; }
  .vbar.health span { font-size: 9px; }
  .hunger { gap: 0; height: 26px; padding: 2px 3px; border-width: 1px; }
  .hunger .leg { width: clamp(12px, 3.8vw, 17px); height: 17px; }
  .vbar.experience { height: 11px; border-width: 1px; }
  .vbar.experience > span { font-size: 8px; }
  .vbar.experience em { top: 1px; font-size: 5.5px; }
  #toast { bottom: max(118px, calc(env(safe-area-inset-bottom) + 108px)); max-width: calc(100vw - 24px); text-align: center; }
}

/* El inventario pasa a una sola columna en teléfonos estrechos. Las
   rejillas mantienen las nueve casillas, pero se reducen sin recortar. */
@media (max-width: 760px), (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  #menu .controls-layout { grid-template-columns: 1fr; }
  #menu .controls-keyboard-card { grid-row: auto; }
  .keybindings-list { grid-template-columns: 1fr; }

  #inventory.overlay {
    place-items: start center;
    padding:
      calc(max(6px, env(safe-area-inset-top)))
      calc(max(6px, env(safe-area-inset-right)))
      calc(max(6px, env(safe-area-inset-bottom)))
      calc(max(6px, env(safe-area-inset-left)));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #inventory .inv-wrap {
    width: 100%;
    max-height: none;
    align-items: stretch;
    gap: 8px;
  }

  #inventory .inv-panels,
  #inventory .inv-panels.no-palette {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 8px;
  }

  #inventory .bpanel { width: 100%; }
  #inventory .bbody {
    width: 100%;
    padding: 9px;
    overflow-x: auto;
    border-radius: 0 7px 7px 7px;
  }

  #inventory .bpanel:last-child .bbody { min-height: 245px; max-height: 58vh; }
  #inventory .inv-panels.no-palette .slot-grid.recipes { min-width: 0; }
  #inventory .tabs {
    max-width: 100%;
    padding-left: 3px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #inventory .tabs::-webkit-scrollbar { display: none; }
  #inventory .tabs .tab { flex: 0 0 auto; min-height: 34px; padding: 7px 10px 8px; }

  #inventory .slot-grid {
    --inv-slot-size: clamp(29px, calc((100vw - 58px) / 9), 42px);
  }
  #inventory .slot-grid.c1 { grid-template-columns: repeat(1, var(--inv-slot-size)); }
  #inventory .slot-grid.c2 { grid-template-columns: repeat(2, var(--inv-slot-size)); }
  #inventory .slot-grid.c3 { grid-template-columns: repeat(3, var(--inv-slot-size)); }
  #inventory .slot-grid.c9 { grid-template-columns: repeat(9, var(--inv-slot-size)); margin-inline: auto; }
  #inventory .slot-grid.palette,
  #inventory .slot-grid.recipes { grid-template-columns: repeat(auto-fill, var(--inv-slot-size)); }
  #inventory .slot-grid .slot { width: var(--inv-slot-size); height: var(--inv-slot-size); }
  #inventory .slot-grid .slot .icon { width: 73%; height: 73%; }
  #inventory .slot-grid .slot .count { font-size: 9px; }
  #inventory .slot-grid .slot .plus { font-size: 10px; }

  #inventory .craft-box { max-width: 100%; padding: 7px; }
  #inventory .craft-row { gap: 7px; }
  #inventory .craft-arrow { font-size: 15px; }
  #inventory .craft-info { max-width: min(150px, 32vw); }
  #inventory .armor-row { flex-wrap: wrap; }
  #inventory .pane[data-pane="bag"] { min-height: 0; }
  #inventory .pane[data-pane="bag"] > .craft-box { margin-right: 0; }
  #inventory .inventory-character-preview {
    position: relative;
    right: auto;
    top: auto;
    width: min(210px, 74vw);
    margin: 9px auto 11px;
  }
  #inventory .inventory-character-preview .inventory-avatar { width: 132px; height: 150px; }
  #inventory .inventory-character-preview .voxel-character,
  #inventory .inventory-character-preview .voxel-avatar:hover .voxel-character {
    transform: translate(-50%,-50%) rotateX(-7deg) rotateY(-17deg) scale(.92);
  }
  #inventory .bfoot { flex-wrap: wrap; }
  #inventory .bfoot button { min-height: 34px; }
  #inventory .inv-help { padding: 0 4px 6px; font-size: 8px; line-height: 1.45; }
  #inventory #cursor-stack { pointer-events: none; }
}

@media (max-width: 430px) {
  #menu .controls-card { padding: 10px; }
  #menu .keybind-button,
  #menu [data-bind-action] { min-width: 68px; }

  .mobile-top-actions .mobile-action span { display: none; }
  .mobile-top-actions .mobile-action { width: var(--mobile-action-size); }
  .mobile-controls-note { font-size: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  #mobile-controls {
    --mobile-joystick-size: clamp(78px, 22vh, 104px);
    --mobile-action-size: clamp(36px, 10.5vh, 46px);
    --mobile-action-gap: 4px;
  }

  #mobile-move-joystick { left: var(--mobile-move-x, 12%); top: var(--mobile-move-y, 70%); }
  .mobile-move-actions { bottom: calc(max(5px, env(safe-area-inset-bottom)) + 30vh + 53px); }
  .mobile-build-actions { top: clamp(92px, 23vh, 142px); bottom: auto; }
  .mobile-placement-pad {
    --mobile-placement-size: clamp(34px, 9.4vh, 42px);
    bottom: calc(max(5px, env(safe-area-inset-bottom)) + 88px);
  }
  .mobile-hotbar-nav { bottom: calc(max(5px, env(safe-area-inset-bottom)) + 48px); gap: 10px; }
  .mobile-action span { display: none; }
  .mobile-top-actions .mobile-action { width: var(--mobile-action-size); height: var(--mobile-action-size); }
  .mobile-joystick-label { display: none; }
  #vitals { width: min(430px, calc(100vw - 10px)); margin-bottom: -3px; transform: none; }
  .hud-life-line { grid-template-columns: minmax(0, 56%) minmax(0, 1fr); }
  .hud-armor-line { width: 56%; }
  .hud-armor-line { height: 22px; }
  .vbar.armor { height: 20px; }
  .vbar.health { height: 20px; }
  .hud-heart { min-height: 18px; font-size: 16px; }
  .hunger { height: 22px; padding-block: 1px; }
  .hunger .leg { width: 14px; height: 15px; }
  #toast { bottom: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-layout-edit .mobile-joystick { animation: none; }
}
.bestiary-panel {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 40px));
  overflow: hidden;
}

.bestiary-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, .6fr);
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid rgba(255, 255, 255, .12);
}

.bestiary-toolbar label {
  display: grid;
  gap: 5px;
  color: #b9c2c9;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bestiary-toolbar input,
.bestiary-toolbar select {
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid #5d676d;
  background: #13191d;
  color: #f2f5f6;
  font: inherit;
}

.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
  max-height: min(650px, calc(100vh - 190px));
  padding: 16px 18px 22px;
  overflow: auto;
}

.bestiary-card {
  overflow: hidden;
  border: 2px solid #4e565b;
  background: linear-gradient(160deg, #20282d, #111619);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 5px 13px rgba(0, 0, 0, .35);
}

.bestiary-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: radial-gradient(circle, rgba(116, 91, 167, .2), rgba(4, 8, 11, .85) 68%);
  image-rendering: auto;
}

.bestiary-card div {
  display: grid;
  gap: 4px;
  padding: 10px 11px 12px;
}

.bestiary-card strong { color: #fff; font-size: 13px; }
.bestiary-card span { color: #acb5ba; font-size: 10px; line-height: 1.35; }
.bestiary-card small { color: #d6b969; font-size: 10px; text-transform: uppercase; }
.bestiary-empty { grid-column: 1 / -1; padding: 36px; color: #bac2c6; text-align: center; }

@media (max-width: 650px) {
  .bestiary-panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .bestiary-toolbar { grid-template-columns: 1fr; padding: 10px 12px; }
  .bestiary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 18px; }
  .bestiary-card strong { font-size: 11px; }
}

/* Mining information stays away from survival alerts and mobile controls. */
#mining-readout{position:fixed;left:16px;top:80px;z-index:12;max-width:290px;padding:9px 12px;border-left:3px solid #dcbf6e;background:#111b24c9;color:#fff;font:12px/1.6 system-ui;white-space:pre-line;pointer-events:none;border-radius:4px}
#mining-readout[hidden]{display:none}.mining-profile-controls{padding:10px;border:1px solid #526268;border-radius:5px;margin:10px 0;font-size:12px}.mining-profile-controls button{margin:4px 8px 4px 0}
@media(max-width:700px){#mining-readout{left:8px;top:50px;font-size:10px;max-width:180px;padding:4px 6px}}
@media(max-height:450px){#mining-readout{top:42px;max-width:180px;font-size:9px}}

/* Taller 1.19 */
#inventory.workshop-open .inventory-character-preview { display:none; }
.slot-grid.c4 { grid-template-columns: repeat(4, 42px); }
.workshop-panel { margin-bottom:16px; padding:12px; border:2px solid #5b4c3b; background:#211d18; color:#eadfc9; border-radius:4px; }
.workshop-panel h3 { margin:0 0 8px; font-size:16px; }
.workshop-panel p { margin:0 0 12px; font-size:12px; line-height:1.5; color:#c7b79a; }
.anvil-slots { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
#storage-box .slot-grid { grid-template-columns:repeat(9,minmax(0,1fr)); }
#storage-box .slot { width:100%; min-width:0; }
@media(max-width:760px) { #inventory .slot-grid.c4 { grid-template-columns:repeat(4,var(--inv-slot-size)); } .workshop-panel { padding:6px; } .anvil-slots { gap:6px; } }

/* ============================================================
   1.20 design system

   One set of tokens and components for every screen: menu, worlds,
   settings, inventory, containers and HUD. Before 1.20 each screen had
   its own look (blue glass menu, grey inventory, green sliders, chrome
   logo). Loaded last: it restyles colours, type and shapes only, never
   layout or behaviour.

   Palette: slate panels over the world, a warm sunset gold for what is
   active, glacier blue as the quiet second colour.
   ============================================================ */
:root {
  --ui-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-bg: rgba(15, 18, 21, .86);
  --ui-bg-solid: #13171a;
  --ui-raise: rgba(255, 255, 255, .05);
  --ui-raise-hi: rgba(255, 255, 255, .09);
  --ui-sunk: rgba(0, 0, 0, .32);
  --ui-line: rgba(255, 255, 255, .12);
  --ui-line-hi: rgba(232, 186, 106, .62);
  --ui-text: #eef0ec;
  --ui-muted: #a6aaa2;
  --ui-accent: #e8ba6a;
  --ui-accent-deep: #c98f3e;
  --ui-accent-ink: #1e1507;
  --ui-accent-2: #8cbccb;
  --ui-good: #8cc56a;
  --ui-bad: #e07a62;
  --ui-radius: 12px;
  --ui-radius-sm: 8px;
  --ui-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --ui-blur: blur(8px);
  /* the older names every screen already uses */
  --mono: var(--ui-font);
  --panel: var(--ui-bg);
  --panel-border: var(--ui-line);
  --accent: var(--ui-accent);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --slot: var(--ui-sunk);
  --slot-border: rgba(255, 255, 255, .14);
}
html, body { font-family: var(--ui-font); font-variant-numeric: tabular-nums; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}

/* ---------- controls ---------- */
button {
  color: var(--ui-text);
  background: var(--ui-raise);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  font-family: var(--ui-font);
  font-weight: 600;
}
button:hover { background: var(--ui-raise-hi); border-color: var(--ui-line-hi); }
button.primary {
  color: var(--ui-accent-ink);
  background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-deep));
  border-color: rgba(255, 225, 170, .55);
}
button.primary:hover { background: linear-gradient(180deg, #f2c983, var(--ui-accent)); }
button.danger { color: #ffc2b4; border-color: rgba(224, 122, 98, .45); }
button.danger:hover { background: rgba(224, 122, 98, .16); }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); }
select, input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea {
  color: var(--ui-text);
  background: var(--ui-sunk);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  font-family: var(--ui-font);
}

/* ---------- panels and overlays ---------- */
.overlay { background: rgba(8, 10, 12, .58); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); }
.panel {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.panel h1 { letter-spacing: .04em; }
.panel h3 { color: var(--ui-accent); }
#toast {
  color: var(--ui-text);
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  backdrop-filter: var(--ui-blur);
}

/* ---------- inventory and containers ---------- */
.tabs .tab {
  color: var(--ui-muted);
  background: rgba(15, 18, 21, .72);
  border: 1px solid var(--ui-line);
  border-bottom: 0;
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
  font-family: var(--ui-font);
  letter-spacing: .03em;
}
.tabs .tab:hover { color: var(--ui-text); background: rgba(30, 35, 39, .9); }
.tabs .tab.active {
  color: var(--ui-text);
  background: var(--ui-bg-solid);
  border-color: var(--ui-line);
  box-shadow: inset 0 2px 0 var(--ui-accent);
}
.bbody {
  background: linear-gradient(180deg, rgba(24, 28, 31, .96), rgba(15, 18, 21, .96));
  border: 1px solid var(--ui-line);
  border-radius: 0 var(--ui-radius) var(--ui-radius) var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.slot {
  background: var(--ui-sunk);
  border: 1px solid var(--slot-border);
  border-radius: var(--ui-radius-sm);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
.slot:hover { border-color: var(--ui-line-hi); }
.slot.active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent), 0 0 14px rgba(232, 186, 106, .35), inset 0 2px 6px rgba(0, 0, 0, .35);
}
.slot .icon { image-rendering: auto; }
.inventory-character-preview { border-color: var(--ui-line); border-radius: var(--ui-radius-sm); }

/* ---------- HUD ---------- */
#hotbar {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  backdrop-filter: var(--ui-blur);
}
#hud-buttons button {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
}
#hud-buttons button:hover { background: rgba(30, 35, 39, .92); border-color: var(--ui-line-hi); }
#hud-buttons svg { fill: var(--ui-text); }

/* ---------- menu ---------- */
#menu {
  --access-cyan: var(--ui-accent);
  --access-blue: var(--ui-accent-deep);
  --access-ice: #f6e3bf;
  --access-panel: var(--ui-bg);
  --access-line: var(--ui-line);
  font-family: var(--ui-font);
}
#menu.main-menu-overlay { background: rgba(6, 8, 10, .22); }
#menu .menu-sky {
  background:
    linear-gradient(180deg, rgba(10, 14, 18, .30), rgba(10, 12, 14, .22) 45%, rgba(6, 7, 8, .86)),
    radial-gradient(circle at 76% 22%, rgba(255, 196, 120, .14), transparent 30%);
  filter: saturate(.95) contrast(1.05);
}
#menu .menu-sky::before {
  background:
    radial-gradient(circle at 78% 19%, rgba(255, 238, 205, .75) 0 1.6%, rgba(255, 176, 90, .16) 6%, transparent 17%),
    linear-gradient(180deg, rgba(12, 14, 16, .12), rgba(5, 6, 7, .70));
}
#menu .menu-glow { background: rgba(255, 176, 90, .10); }
#menu .menu-vignette {
  background:
    linear-gradient(90deg, rgba(4, 5, 6, .70), transparent 24%, transparent 72%, rgba(4, 5, 6, .60)),
    radial-gradient(ellipse at center, transparent 22%, rgba(3, 4, 5, .28) 62%, rgba(2, 3, 3, .84) 100%);
}
.menu-horizon {
  background: linear-gradient(90deg, rgba(14, 16, 18, .92), rgba(28, 30, 31, .82) 50%, rgba(12, 13, 14, .94));
  filter: drop-shadow(0 -10px 26px rgba(255, 170, 90, .10));
}
/* Logo: SVG letters cut like blocks of stone, lit by a low sun, with
   snow on top. No font: it looks the same on every device. */
#menu .menu-logo-shadow { display: none; }
#menu .menu-logo {
  margin: 0;
  font-size: 0;
  line-height: 0;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  filter: none;
}
#menu .boserhaft-logo { display: block; width: min(660px, 84vw); height: auto; margin: 0 auto; overflow: visible; }
#menu .menu-subtitle { color: var(--ui-accent); font-family: var(--ui-font); letter-spacing: .38em; }
#menu .menu-subtitle i { background: var(--ui-accent); box-shadow: 0 0 10px rgba(232, 186, 106, .6); }
#menu .mc-button {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: linear-gradient(90deg, rgba(30, 34, 37, .92), rgba(16, 19, 22, .90) 70%, rgba(22, 25, 28, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .30);
  font-family: var(--ui-font);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  backdrop-filter: var(--ui-blur);
}
#menu .mc-button::before {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-accent);
  background: var(--ui-sunk);
  box-shadow: none;
  font-family: var(--ui-font);
}
#menu .mc-button::after { color: var(--ui-muted); }
#menu .mc-button:hover {
  border-color: var(--ui-line-hi);
  background: linear-gradient(90deg, rgba(46, 42, 34, .95), rgba(20, 22, 24, .92) 72%, rgba(28, 28, 26, .94));
  box-shadow: inset 3px 0 var(--ui-accent), 0 10px 24px rgba(0, 0, 0, .30);
}
#menu .mc-button-primary {
  color: var(--ui-accent-ink);
  border-color: rgba(255, 225, 170, .6);
  background: linear-gradient(90deg, #efc47a, var(--ui-accent) 55%, var(--ui-accent-deep));
  box-shadow: inset 0 1px rgba(255, 245, 225, .5), 0 0 26px rgba(232, 186, 106, .22), 0 10px 24px rgba(0, 0, 0, .32);
  text-shadow: none;
}
#menu .mc-button-primary::before { color: var(--ui-accent-ink); border-color: rgba(30, 21, 7, .25); background: rgba(30, 21, 7, .12); }
#menu .mc-button-primary::after { color: var(--ui-accent-ink); }
#menu .mc-button-primary:hover { background: linear-gradient(90deg, #f5d08f, #ecc076 55%, var(--ui-accent)); }
#menu .mc-small-button {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: var(--ui-raise);
}
#menu .mc-small-button:hover, #menu .mc-small-button.active {
  border-color: var(--ui-line-hi);
  color: #fff;
  background: rgba(232, 186, 106, .16);
}
#menu .menu-details, .access-profile, .access-version {
  background: var(--ui-bg);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  backdrop-filter: var(--ui-blur);
}
#menu .menu-details-head strong { color: var(--ui-text); }
#menu .mc-close { color: var(--ui-muted); }
#menu .mc-close:hover { color: #fff; background: rgba(232, 186, 106, .16); }
#menu .world-row, #menu .worlds-library .world-row {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(90deg, rgba(30, 34, 37, .88), rgba(16, 19, 22, .86));
}
#menu .world-row.active, #menu .worlds-library .world-row.active {
  border-color: var(--ui-line-hi);
  box-shadow: inset 3px 0 var(--ui-accent), 0 0 14px rgba(232, 186, 106, .12);
}
#menu .world-row-main strong { color: var(--ui-text); }
#menu .worlds-library .world-play {
  color: var(--ui-accent-ink);
  border-color: rgba(255, 225, 170, .6);
  background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-deep));
}
#menu .world-create-grid input, #menu .access-code-input, #menu select, #menu .world-search input {
  color: var(--ui-text);
  border-color: var(--ui-line);
  background: var(--ui-sunk);
}
#menu .mode-choice.active { outline-color: var(--ui-accent); background: linear-gradient(180deg, rgba(232, 186, 106, .22), rgba(232, 186, 106, .08)); }
#menu .menu-footer { color: rgba(238, 240, 236, .5); font-family: var(--ui-font); }

/* Profile button and avatar frames follow the same palette. */
.profile-login {
  color: var(--ui-accent-ink);
  border: 1px solid rgba(255, 225, 170, .6);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-deep));
  font-family: var(--ui-font);
}
.profile-login:hover { background: linear-gradient(180deg, #f2c983, var(--ui-accent)); }
.voxel-avatar {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius-sm);
  background: radial-gradient(circle at 50% 30%, rgba(232, 186, 106, .16), transparent 60%), var(--ui-sunk) !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .3) !important;
}
.voxel-avatar::before { border-color: rgba(255, 255, 255, .08); }
.voxel-avatar::after { background: linear-gradient(90deg, transparent, var(--ui-accent), transparent); box-shadow: 0 0 12px rgba(232, 186, 106, .6); }
.inventory-character-preview {
  border-color: var(--ui-line);
  background: radial-gradient(circle at 50% 28%, rgba(232, 186, 106, .12), transparent 55%), rgba(10, 12, 14, .7);
  box-shadow: none;
}

/* Touch controls in the same palette. */
.mobile-joystick { border-color: rgba(255, 255, 255, .28); background: radial-gradient(circle, rgba(20, 24, 27, .35), rgba(12, 14, 16, .6)); }
.mobile-joystick-ring { border-color: rgba(255, 255, 255, .22); }
.mobile-joystick-knob {
  border-color: rgba(255, 238, 205, .8);
  background: radial-gradient(circle at 38% 32%, #f4d596, var(--ui-accent) 58%, var(--ui-accent-deep));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 8px rgba(255, 245, 225, .35);
}
.mobile-joystick-label { color: rgba(238, 240, 236, .72); }
.mobile-action {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: linear-gradient(155deg, rgba(34, 38, 41, .86), rgba(14, 16, 18, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 3px 9px rgba(0, 0, 0, .36);
}
.mobile-action b, .mobile-action span { font-family: var(--ui-font); }
.mobile-action-primary {
  color: var(--ui-accent-ink);
  border-color: rgba(255, 225, 170, .6);
  background: linear-gradient(155deg, #efc47a, var(--ui-accent-deep));
}

/* Aldeas 1.20 */
.village-panel { flex-shrink:0; max-height:min(52vh,420px); overflow-y:auto; }
.village-panel .village-row { display:grid; grid-template-columns:42px 1fr auto auto auto; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid rgba(234,223,201,.08); }
.village-panel .village-row.spent { opacity:.45; }
.village-panel .village-row .slot { width:42px; height:42px; position:relative; }
.village-panel .village-row .slot .count { position:absolute; right:3px; bottom:1px; font-size:11px; color:#fff; text-shadow:0 1px 1px #000; }
.village-panel .village-text { font-size:12px; line-height:1.3; }
.village-panel .village-price { font-size:13px; font-weight:700; color:#e6c76a; min-width:40px; text-align:right; }
.village-panel .village-stock { font-size:11px; color:#9d8f76; }
.village-panel .village-warn { color:#e78a7a; }
.village-panel .village-note { color:#a9d88f; margin-top:8px; }
.village-panel .village-sub { margin:10px 0 6px; }
.village-panel .village-bar { height:8px; background:rgba(0,0,0,.4); border:1px solid #5b4c3b; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.village-panel .village-bar > i { display:block; height:100%; background:linear-gradient(90deg,#8a6a2e,#e6c76a); }
.village-panel .village-levelup { margin:10px 0; width:100%; }
.village-panel button[disabled] { opacity:.45; cursor:not-allowed; }
#storage-box .safe-copy { margin-top:10px; }
@media(max-width:760px) { .village-panel .village-row { grid-template-columns:36px 1fr auto auto; } .village-panel .village-stock { display:none; } .village-panel .village-row .slot { width:36px; height:36px; } }

/* ============================================================
   Portada 1.20
   La pantalla de título según la referencia del propietario: un
   atardecer renderizado con el motor, el logotipo con su montaña,
   la botonera central con esquinas cortadas, la tarjeta del jugador
   a la derecha y los enlaces en las esquinas de abajo. En la pausa
   no hay fondo pintado: detrás sigue el mundo que estás jugando.
   ============================================================ */
#menu {
  --home-edge: rgba(160, 192, 228, .42);
  --home-edge-hi: rgba(190, 222, 255, .85);
  --home-fill: linear-gradient(180deg, rgba(24, 32, 46, .86), rgba(9, 13, 21, .92));
  --home-fill-hi: linear-gradient(180deg, rgba(32, 46, 68, .92), rgba(13, 20, 32, .94));
  --home-text: #f4f7fb;
  --home-soft: #c9d6e6;
  --home-cut: 9px;
}
#menu.main-menu-overlay {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: start;
  justify-items: stretch;
}
.menu-keyart,
.menu-keyart-shade { display: none; }
#menu.title-screen.main-menu-overlay {
  background: #0b1220;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#menu.title-screen .menu-sky { display: none; }
#menu.title-screen .menu-keyart {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(1.14) contrast(1.05);
  pointer-events: none;
  user-select: none;
  transform-origin: 62% 46%;
  animation: homeKeyart 48s ease-in-out infinite alternate;
}
@keyframes homeKeyart {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}
#menu.title-screen .menu-keyart-shade {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 12, 26, .56) 0%, rgba(6, 12, 26, .22) 26%, rgba(6, 12, 26, 0) 38%, rgba(4, 8, 16, 0) 60%, rgba(3, 6, 12, .74) 100%),
    radial-gradient(ellipse at 50% 58%, rgba(0, 0, 0, 0) 46%, rgba(2, 4, 10, .5) 100%);
}
@media (prefers-reduced-motion: reduce) {
  #menu.title-screen .menu-keyart { animation: none; }
}

/* ---------- column ---------- */
#menu .mc-menu.home-menu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(18px, 4.6vh, 60px) clamp(16px, 3vw, 48px) 118px;
  box-sizing: border-box;
  text-align: center;
}
#menu .home-menu .menu-title-wrap { width: auto; margin: 0 0 clamp(16px, 3.8vh, 44px); }
#menu .home-menu .boserhaft-logo {
  width: min(700px, 56vw, 62vh);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55));
}
#menu .home-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  color: #f2f5f8;
  font: 600 clamp(11px, 1.05vw, 15px)/1 var(--ui-font);
  letter-spacing: .32em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .7);
}
#menu .home-tagline i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f2f5f8;
  transform: none;
  box-shadow: 0 0 8px rgba(255, 255, 255, .55);
}

/* ---------- stage: buttons in the middle, card on the right ---------- */
#menu .home-stage {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr);
  column-gap: 36px;
  row-gap: 18px;
  align-items: start;
}
#menu .home-nav {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- buttons with cut corners ---------- */
#menu .home-btn {
  --cut: var(--home-cut);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 0 60px;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--home-text);
  background: var(--home-edge);
  font: 500 20px/1.15 var(--ui-font);
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  box-shadow: none;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: transform .12s ease, background-color .15s ease;
}
#menu .home-btn::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  background: var(--home-fill);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px), 0 calc(var(--cut) - 1px));
}
#menu .home-btn::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  height: 42%;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#menu .home-btn > span { position: relative; z-index: 1; }
#menu .home-btn .home-btn-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
}
#menu .home-btn-icon svg,
#menu .home-edit svg,
#menu .home-chevron svg,
#menu .home-link svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#menu .home-btn-icon svg { width: 27px; height: 27px; }
#menu .home-btn:hover,
#menu .home-btn:focus-visible { background: var(--home-edge-hi); outline: none; }
#menu .home-btn:hover::before,
#menu .home-btn:focus-visible::before { background: var(--home-fill-hi); }
#menu .home-btn:active { transform: translateY(1px); }

/* Jugar: taller, blue, glowing, with a sparkle on each side. */
#menu .home-play-wrap {
  position: relative;
  display: block;
  filter: drop-shadow(0 0 12px rgba(58, 162, 255, .55));
}
#menu .home-btn-primary {
  min-height: 70px;
  font-size: 24px;
  background: linear-gradient(90deg, #5fb8ff, #d6efff 50%, #5fb8ff);
}
#menu .home-btn-primary::before {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(110, 185, 255, .45), rgba(110, 185, 255, 0) 70%),
    linear-gradient(180deg, rgba(30, 76, 140, .96), rgba(10, 32, 74, .96));
}
#menu .home-btn-primary:hover,
#menu .home-btn-primary:focus-visible { background: linear-gradient(90deg, #9ad6ff, #ffffff 50%, #9ad6ff); }
#menu .home-btn-primary:hover::before,
#menu .home-btn-primary:focus-visible::before {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(140, 205, 255, .55), rgba(140, 205, 255, 0) 70%),
    linear-gradient(180deg, rgba(38, 92, 164, .97), rgba(14, 42, 92, .97));
}
#menu .home-btn-primary .home-btn-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(170, 220, 255, .9)); }
#menu .home-play-wrap::before,
#menu .home-play-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: #dff3ff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: homeSpark 2.6s ease-in-out infinite;
}
#menu .home-play-wrap::before { left: -12px; }
#menu .home-play-wrap::after { right: -12px; animation-delay: 1.3s; }
@keyframes homeSpark {
  0%, 100% { opacity: .5; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---------- player card ---------- */
#menu .home-profile {
  --cut: 10px;
  grid-column: 3;
  justify-self: end;
  position: relative;
  width: min(372px, 100%);
  margin: 12px clamp(0px, 1.6vw, 28px) 0 0;
  padding: 16px;
  box-sizing: border-box;
  color: var(--home-text);
  text-align: left;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}
#menu .home-profile::before,
#menu .home-profile::after {
  content: '';
  position: absolute;
  z-index: 0;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
#menu .home-profile::before { inset: 0; background: rgba(128, 180, 236, .55); }
#menu .home-profile::after { inset: 1.5px; background: linear-gradient(180deg, rgba(14, 22, 38, .9), rgba(8, 13, 24, .92)); }
#menu .home-profile > * { position: relative; z-index: 1; }
#menu .home-player {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 2px 2px 16px;
  border-bottom: 1px solid rgba(150, 190, 235, .22);
}
#menu .home-face {
  width: 84px;
  height: 84px;
  padding: 3px;
  border: 2px solid #3d9cff;
  border-radius: 4px;
  box-sizing: border-box;
  background: #0b1424;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 14px rgba(61, 156, 255, .45);
  cursor: pointer;
}
#menu .home-face:hover,
#menu .home-face:focus-visible { border-color: #8fd0ff; outline: none; }
#menu .home-face canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#menu .home-player-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#menu .home-player-info strong {
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu .home-level,
#menu .home-level b { color: var(--home-soft); font-size: 14px; font-weight: 500; }
#menu .home-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
#menu .home-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1778e6, #49b6ff);
  box-shadow: 0 0 8px rgba(73, 182, 255, .7);
  transition: width .5s ease;
}
#menu .home-player-info small { align-self: flex-end; color: var(--home-soft); font-size: 13px; }
#menu .home-edit {
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(160, 195, 235, .4);
  border-radius: 4px;
  background: rgba(20, 30, 46, .8);
  color: #e8eef6;
  cursor: pointer;
}
#menu .home-edit svg { width: 20px; height: 20px; }
#menu .home-edit:hover,
#menu .home-edit:focus-visible { border-color: #8fd0ff; color: #fff; outline: none; }
#menu .home-achievements {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(150, 190, 235, .28);
  border-radius: 4px;
  box-sizing: border-box;
  background: rgba(12, 20, 34, .7);
  color: #fff;
  font-family: var(--ui-font);
  text-align: left;
  cursor: pointer;
}
#menu .home-achievements:hover,
#menu .home-achievements:focus-visible { border-color: #8fd0ff; background: rgba(20, 34, 56, .82); outline: none; }
#menu .home-trophy { display: grid; place-items: center; color: #f3b637; }
#menu .home-trophy svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(243, 182, 55, .35)); }
#menu .home-ach-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#menu .home-ach-info strong { font-size: 19px; font-weight: 600; line-height: 1.1; }
#menu .home-ach-info small { color: var(--home-soft); font-size: 13px; }
#menu .home-chevron { display: grid; place-items: center; color: #dfe8f3; }
#menu .home-chevron svg { width: 20px; height: 20px; stroke-width: 2; }

/* ---------- corners ---------- */
#menu .home-footer {
  position: absolute;
  left: clamp(16px, 2.4vw, 36px);
  right: clamp(16px, 2.4vw, 36px);
  bottom: clamp(12px, 2.6vh, 28px);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
#menu .home-footer > * { pointer-events: auto; }
#menu .home-version {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
#menu .home-version strong { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
#menu .home-version span { color: var(--home-soft); font-size: 14px; }
#menu .home-links { display: flex; align-items: stretch; }
#menu .home-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 100px;
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font: 500 15px/1.1 var(--ui-font);
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  cursor: pointer;
}
#menu .home-link + .home-link { border-left: 1px solid rgba(255, 255, 255, .35); }
#menu .home-link svg { width: 34px; height: 34px; stroke-width: 1.6; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7)); }
#menu .home-link:hover,
#menu .home-link:focus-visible { color: #8fd0ff; outline: none; }

/* ---------- configuration tabs ---------- */
#menu .menu-details-tabs { display: flex; gap: 6px; margin: 0 10px 0 auto; }

/* ---------- gallery ---------- */
#menu .gallery-panel { width: min(980px, calc(100vw - 44px)); }
#menu .gallery-count { margin: 0 10px 0 auto; color: var(--ui-muted); font-size: 13px; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.gallery-toolbar p { margin: 0; color: var(--ui-muted); font-size: 13px; line-height: 1.45; }
.gallery-toolbar kbd,
.gallery-empty kbd {
  padding: 1px 6px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  color: var(--ui-text);
  font: 600 12px var(--ui-font);
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #0b0f14;
  cursor: pointer;
}
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 8px 6px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
  color: #fff;
  font-size: 11px;
  text-align: left;
}
.gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 42px 16px;
  color: var(--ui-muted);
  text-align: center;
}
.gallery-empty b { color: var(--ui-accent); font-size: 34px; }
.gallery-empty strong { color: var(--ui-text); font-size: 16px; }
.gallery-viewer img {
  display: block;
  width: 100%;
  max-height: min(62vh, 560px);
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}
.gallery-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.gallery-viewer-bar > span { color: var(--ui-muted); font-size: 12px; }
.gallery-viewer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#menu .gallery-delete[data-confirm="armed"] { border-color: var(--ui-bad); background: rgba(224, 122, 98, .3); color: #fff; }

/* ---------- support ---------- */
#menu .support-panel { width: min(760px, calc(100vw - 44px)); }
.support-intro,
.support-note { margin: 12px 0; color: var(--ui-muted); font-size: 13px; line-height: 1.45; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.support-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--ui-text);
  font-family: var(--ui-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.support-card:hover,
.support-card:focus-visible { border-color: var(--ui-line-hi); background: rgba(232, 186, 106, .08); }
.support-card b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(232, 186, 106, .14);
  color: var(--ui-accent);
  font-size: 18px;
}
.support-card strong { font-size: 14px; }
.support-card span { color: var(--ui-muted); font-size: 12px; line-height: 1.35; }

/* ---------- exit ---------- */
#menu .home-exit {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 8, 14, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-exit-card {
  width: min(420px, 100%);
  padding: 28px 24px;
  border: 1px solid rgba(150, 190, 235, .4);
  border-radius: 12px;
  background: rgba(10, 16, 28, .94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  text-align: center;
}
.home-exit-card strong { display: block; color: #fff; font-size: 24px; font-weight: 600; }
.home-exit-card p { margin: 10px 0 20px; color: #c8d3e0; font-size: 15px; line-height: 1.45; }
#menu .home-exit-card .home-btn { min-height: 54px; padding: 0 24px; }

/* ---------- photo flash ---------- */
.photo-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  pointer-events: none;
  animation: photoFlash .42s ease-out forwards;
}
@keyframes photoFlash {
  from { opacity: .75; }
  to { opacity: 0; }
}

/* ---------- smaller screens ---------- */
@media (max-height: 820px) and (min-width: 761px) {
  #menu .home-nav { gap: 10px; }
  #menu .home-btn { min-height: 50px; font-size: 18px; }
  #menu .home-btn-primary { min-height: 60px; font-size: 22px; }
}
@media (max-width: 1099px) and (min-width: 761px) {
  #menu .home-stage { grid-template-columns: minmax(0, 400px) minmax(0, 330px); justify-content: center; column-gap: 28px; }
  #menu .home-nav { grid-column: 1; }
  #menu .home-profile { grid-column: 2; justify-self: stretch; width: auto; margin: 0; }
  #menu .home-menu .boserhaft-logo { width: min(640px, 76vw, 58vh); }
}
/* Phone upright: one column, the card under the buttons, the corners last. */
@media (max-width: 760px) {
  #menu .mc-menu.home-menu { padding: 18px 16px 14px; }
  #menu .home-menu .menu-title-wrap { margin-bottom: 16px; }
  #menu .home-menu .boserhaft-logo { width: min(440px, 92vw); }
  #menu .home-tagline { gap: 8px; margin-top: 6px; font-size: 10px; letter-spacing: .18em; }
  #menu .home-tagline i { width: 3px; height: 3px; }
  #menu .home-stage { grid-template-columns: minmax(0, 1fr); max-width: 420px; row-gap: 14px; }
  #menu .home-nav,
  #menu .home-profile { grid-column: 1; }
  #menu .home-nav { gap: 8px; }
  #menu .home-btn { min-height: 48px; font-size: 17px; }
  #menu .home-btn-primary { min-height: 56px; font-size: 20px; }
  #menu .home-btn .home-btn-icon { left: 20px; }
  #menu .home-btn-icon svg { width: 24px; height: 24px; }
  #menu .home-profile { justify-self: stretch; width: auto; margin: 0; padding: 12px; }
  #menu .home-player { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding-bottom: 10px; }
  #menu .home-face { width: 56px; height: 56px; padding: 2px; }
  #menu .home-player-info { gap: 4px; }
  #menu .home-player-info strong { font-size: 17px; }
  #menu .home-edit { width: 34px; height: 34px; }
  #menu .home-achievements { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; margin-top: 10px; padding: 8px 12px; }
  #menu .home-trophy svg { width: 32px; height: 32px; }
  #menu .home-ach-info strong { font-size: 16px; }
  #menu .home-footer {
    position: static;
    width: 100%;
    max-width: 420px;
    margin-top: 16px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
  }
  #menu .home-version { align-items: center; text-align: center; }
  #menu .home-version strong { font-size: 13px; }
  #menu .home-version span { font-size: 12px; }
  #menu .home-link { min-width: 0; padding: 4px 16px; font-size: 13px; }
  #menu .home-link svg { width: 28px; height: 28px; }
}
/* Phone on its side: short screen, buttons in two columns beside the card. */
@media (max-height: 560px) and (orientation: landscape) {
  #menu .mc-menu.home-menu { padding: 10px 16px 58px; }
  #menu .home-menu .menu-title-wrap { margin-bottom: 10px; }
  #menu .home-menu .boserhaft-logo { width: min(320px, 42vw); }
  #menu .home-tagline { gap: 8px; margin-top: 3px; font-size: 9px; letter-spacing: .2em; }
  #menu .home-tagline i { width: 3px; height: 3px; }
  #menu .home-stage {
    grid-template-columns: minmax(0, 430px) minmax(0, 290px);
    justify-content: center;
    max-width: none;
    column-gap: 16px;
  }
  #menu .home-nav { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #menu .home-play-wrap { grid-column: 1 / -1; }
  #menu .home-btn { min-height: 40px; padding: 0 10px 0 42px; font-size: 15px; }
  #menu .home-btn-primary { min-height: 46px; font-size: 18px; }
  #menu .home-btn .home-btn-icon { left: 14px; width: 20px; height: 20px; }
  #menu .home-btn-icon svg,
  #menu .home-btn-primary .home-btn-icon svg { width: 20px; height: 20px; }
  #menu .home-play-wrap::before { left: -9px; }
  #menu .home-play-wrap::after { right: -9px; }
  #menu .home-profile { grid-column: 2; justify-self: stretch; width: auto; margin: 0; padding: 10px; }
  #menu .home-player { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 8px; }
  #menu .home-face { width: 50px; height: 50px; padding: 2px; }
  #menu .home-player-info { gap: 4px; }
  #menu .home-player-info strong { font-size: 16px; }
  #menu .home-level, #menu .home-level b, #menu .home-player-info small { font-size: 11px; }
  #menu .home-edit { width: 30px; height: 30px; }
  #menu .home-edit svg { width: 16px; height: 16px; }
  #menu .home-achievements { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 10px; margin-top: 8px; padding: 7px 10px; }
  #menu .home-trophy svg { width: 28px; height: 28px; }
  #menu .home-ach-info strong { font-size: 15px; }
  #menu .home-ach-info small { font-size: 11px; }
  #menu .home-footer {
    position: absolute;
    left: 14px; right: 14px; bottom: 8px;
    width: auto;
    max-width: none;
    margin: 0;
    flex-direction: row;
    align-items: flex-end;
  }
  #menu .home-version { align-items: flex-start; text-align: left; }
  #menu .home-version strong { font-size: 12px; }
  #menu .home-version span { font-size: 11px; }
  #menu .home-link { flex-direction: row; gap: 6px; min-width: 0; padding: 2px 10px; font-size: 12px; }
  #menu .home-link svg { width: 20px; height: 20px; }
}

/* ---------- Cómo jugar ---------- */
#menu .howto-panel { width: min(900px, calc(100vw - 44px)); }
.howto-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto;
}
.howto-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 12px 52px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  counter-increment: howto;
}
.howto-steps li::before {
  content: counter(howto);
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3d9cff, #1768c8);
  color: #fff;
  font: 700 14px/1 var(--ui-font);
  box-shadow: 0 0 10px rgba(61, 156, 255, .45);
}
.howto-steps strong,
.howto-discover strong { color: var(--ui-text); font-size: 14px; }
.howto-steps span,
.howto-discover span { color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; }
#menu .howto-subtitle {
  margin: 18px 0 10px;
  color: var(--ui-text);
  font: 700 13px/1 var(--ui-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.howto-discover { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; }
.howto-discover > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid rgba(232, 186, 106, .55);
}

/* ---------- Apoyo: voluntary donation ---------- */
#menu .home-link-heart svg { color: #ff6b8a; fill: rgba(255, 107, 138, .22); }
#menu .home-link-heart:hover svg,
#menu .home-link-heart:focus-visible svg { fill: rgba(255, 107, 138, .5); }
#menu .donate-panel { width: min(560px, calc(100vw - 44px)); }
.donate-hero { display: flex; align-items: flex-start; gap: 14px; margin: 14px 0 16px; }
.donate-hero p { margin: 0; color: var(--ui-text); font-size: 14px; line-height: 1.5; }
.donate-heart {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 107, 138, .14);
  color: #ff6b8a;
}
.donate-heart svg { width: 26px; height: 26px; fill: rgba(255, 107, 138, .35); stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.donate-form { display: flex; flex-direction: column; gap: 12px; }
.donate-custom { display: flex; flex-direction: column; gap: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.donate-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(150, 190, 235, .45);
  border-radius: 10px;
  background: rgba(6, 12, 22, .75);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.donate-input:focus-within { border-color: #8fd0ff; box-shadow: 0 0 0 3px rgba(61, 156, 255, .25); }
.donate-input b { color: #8fd0ff; font-size: 26px; font-weight: 600; }
.donate-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: 600 28px/1 var(--ui-font);
  letter-spacing: .02em;
  text-transform: none;
}
.donate-input em { color: var(--ui-muted); font-size: 15px; font-style: normal; font-weight: 600; letter-spacing: .06em; }
.donate-input:has(input[aria-invalid="true"]) { border-color: var(--ui-bad); }
.donate-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.donate-presets button {
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid rgba(150, 190, 235, .35);
  border-radius: 8px;
  background: rgba(20, 30, 46, .8);
  color: #e8eef6;
  font: 600 14px/1 var(--ui-font);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.donate-presets button:hover,
.donate-presets button:focus-visible { border-color: #8fd0ff; color: #fff; outline: none; }
.donate-presets button.active {
  border-color: #8fd0ff;
  background: linear-gradient(180deg, rgba(38, 92, 164, .95), rgba(14, 42, 92, .95));
  color: #fff;
  box-shadow: 0 0 12px rgba(61, 156, 255, .35);
}
.donate-status { min-height: 1.4em; margin: 0; color: var(--ui-text); font-size: 14px; line-height: 1.45; }
.donate-status.error { color: var(--ui-bad); }
#menu .donate-submit { min-height: 58px; font-size: 20px; }
#menu .donate-submit:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.8); }
.donate-notes { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding: 0 0 0 18px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; }

@media (max-width: 760px) {
  .donate-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .donate-hero { gap: 10px; }
  .donate-hero p { font-size: 13px; }
  .howto-steps li { padding: 10px 12px 10px 46px; }
  .howto-steps li::before { left: 10px; top: 10px; width: 26px; height: 26px; font-size: 13px; }
  #menu .home-links { width: 100%; justify-content: center; }
  #menu .home-link { padding: 4px 9px; font-size: 12px; }
  #menu .home-link svg { width: 26px; height: 26px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #menu .home-link { padding: 2px 8px; font-size: 12px; }
}
#menu .donate-submit { padding: 0 20px; }
@media (max-width: 760px) { #menu .donate-submit { min-height: 54px; font-size: 18px; } }

/* ---------- corner links always on screen ----------
   With a normal (not fullscreen) browser window the page is 100-250 px
   shorter, and the corner links ended up below the bottom edge. Now they
   are fixed to the bottom of the screen and the column shrinks with the
   window height, so nothing sits under them. */
@media (min-width: 761px) {
  #menu .home-footer { position: fixed; }
}
@media (min-width: 761px) and (max-height: 820px) {
  #menu .mc-menu.home-menu { padding-top: clamp(10px, 2.6vh, 40px); padding-bottom: 100px; }
  #menu .home-menu .menu-title-wrap { margin-bottom: clamp(8px, 2.2vh, 30px); }
  #menu .home-menu .boserhaft-logo { width: min(700px, 56vw, 48vh); }
  #menu .home-tagline { margin-top: 6px; font-size: clamp(10px, 1.6vh, 13px); }
  #menu .home-nav { gap: clamp(6px, 1.3vh, 10px); }
  #menu .home-btn { min-height: clamp(38px, 6.6vh, 50px); font-size: clamp(15px, 2.4vh, 18px); }
  #menu .home-btn-primary { min-height: clamp(44px, 8vh, 60px); font-size: clamp(18px, 2.9vh, 22px); }
  #menu .home-profile { margin-top: 0; padding: clamp(10px, 1.8vh, 16px); }
  #menu .home-player { padding-bottom: clamp(8px, 1.8vh, 16px); }
  #menu .home-face { width: clamp(58px, 11vh, 84px); height: clamp(58px, 11vh, 84px); }
  #menu .home-player { grid-template-columns: clamp(58px, 11vh, 84px) minmax(0, 1fr) auto; }
  #menu .home-achievements { margin-top: clamp(8px, 1.6vh, 14px); padding: clamp(7px, 1.4vh, 12px) 14px; }
  #menu .home-link { padding: 4px 12px; font-size: 14px; }
  #menu .home-link svg { width: clamp(24px, 4.4vh, 34px); height: clamp(24px, 4.4vh, 34px); }
}
/* Phone upright: the corner links become a bar fixed to the bottom and
   the buttons scroll above it. */
@media (max-width: 760px) and (orientation: portrait) {
  #menu .mc-menu.home-menu { padding-bottom: 100px; }
  #menu .home-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 18px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    background: linear-gradient(180deg, rgba(4, 8, 16, 0), rgba(4, 8, 16, .84) 34%, rgba(4, 8, 16, .95));
  }
  #menu .home-version { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #menu .home-version span::before { content: '· '; }
}
/* Phone on its side: fixed as well, and a little tighter. */
@media (max-height: 560px) and (orientation: landscape) {
  #menu .home-footer { position: fixed; }
  #menu .mc-menu.home-menu { padding-bottom: 44px; }
  #menu .home-menu .boserhaft-logo { width: min(320px, 42vw, 44vh); }
  #menu .home-nav { gap: 6px; }
  #menu .home-btn { min-height: clamp(32px, 10.2vh, 40px); }
  #menu .home-btn-primary { min-height: clamp(36px, 11.6vh, 46px); }
}