/* theme-menu.css — Sistema de diseño "refugio oxidado" para los menús.
   Fuente de verdad visual: menu_maqueta.html (mismos valores, convertidos de rem a em).

   CONVENCIONES
   - Todo vive bajo tokens --mn-* y clases mn-*. No se usan ni modifican --primary ni
     los demás tokens del juego: el HUD de partida no cambia de aspecto.
   - La escala la fija .mn-root (NO se toca el font-size de <html>). Los componentes usan em.
   - Los contenedores no fijan font-size (no hay em compuesto). Solo los componentes "hoja"
     (botón, pestaña, píldora, título...) fijan el suyo, y sus medidas internas ya están
     divididas por ese tamaño para equivaler a los rem de la maqueta.
   - Texturas, grano y efectos solo en capas de menú (.mn-panel). Nunca en canvas ni HUD.
   - Los puentes "#id.mn-shell" neutralizan las reglas heredadas por id de cada panel
     antiguo (menus.css / responsive.css) SIN editarlas: mayor especificidad, cargado al final. */

/* ───────────── Tokens ───────────── */
:root{
  --mn-bg:#0e0c09;
  --mn-plate-hi:#5a4230;
  --mn-plate-lo:#3a2a1e;
  --mn-rust:#b45f26;
  --mn-paint:#c9972b;
  --mn-ink:#1b140c;
  --mn-bone:#e3d6bd;
  --mn-clay:#9a8b72;
  --mn-clay-hi:#cdbfa5;  /* fase 5C: subtítulo de tarjeta; clay sobre la chapa no llegaba a 1.5:1 */
  --mn-line:#1a120c;
  /* Velo oscuro COMPARTIDO por .mn-card (menú), .mn-item (Armería) y .mn-skin: así las tres familias de tarjeta
     tienen la misma oscuridad. Cada una redefine --mn-card-veil con su degradado; el color base es este. */
  --mn-veil-rgb:15,10,5;
  --mn-card-veil:linear-gradient(0deg,rgba(var(--mn-veil-rgb),.64) 0,rgba(var(--mn-veil-rgb),.52) 34%,rgba(var(--mn-veil-rgb),0) 68%);
  --mn-stamp:#0f0a05;  /* fase 5C: tinta de los íconos estampados de las tarjetas (más oscura que la chapa) */

  --mn-paint-hi:#d6a634;
  --mn-paint-lo:#b98320;
  --mn-paint-edge:#6e4a12;
  --mn-danger:#e0846f;
  --mn-danger-edge:#5a1f12;
  --mn-field:#1d1610;
  --mn-scrim:rgba(14,12,9,.8);  /* fase 4: velo de las pantallas que aparecen sobre el juego */
  --mn-infect:#00cc44;  /* fase 4: verde de la secuencia de infección (efecto narrativo de la pantalla de muerte) */
  --mn-sep:rgba(227,214,189,.16);

  /* Equivalentes planos para body[data-quality="performance"] */
  --mn-plate-flat:#4a3626;
  --mn-panel-flat:#251c14;

  --mn-display:'Rubik Dirt',Impact,'Arial Black',sans-serif;
  --mn-type:'Special Elite','Courier New',monospace;
  --mn-stencil:var(--mn-type);

  /* Texturas SVG: óxido, pintura desconchada y grano */
  --mn-blotch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .018' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .3 0 0 0 0 .11 1.9 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --mn-chips:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .09 0 0 0 0 .05 7 0 0 0 -4.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --mn-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── Escala (.mn-root) ───────────── */
.mn-root{
  position:absolute;
  inset:0;
  font-size:max(9px,calc(min(1vh,.46vw)*4));
  font-family:var(--mn-type);
  font-weight:400;
  line-height:normal;
  color:var(--mn-bone);
  -webkit-text-size-adjust:100%;
}
.mn-root,.mn-root *,.mn-root *::before,.mn-root *::after{box-sizing:border-box}

/* Reset de botones solo dentro de .mn-root, con especificidad 0 para no pisar los componentes */
:where(.mn-root) button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit;letter-spacing:inherit;text-transform:inherit}
:where(.mn-root) :focus-visible{outline:2px solid var(--mn-paint);outline-offset:2px}

/* ───────────── Chapa y pintura ───────────── */
.mn-plate{
  position:relative;
  background:
    repeating-linear-gradient(88deg,rgba(255,235,210,.035) 0 1px,transparent 1px 9px),
    var(--mn-blotch),
    linear-gradient(180deg,var(--mn-plate-hi),var(--mn-plate-lo));
  background-size:auto,260px 180px,auto;
  background-position:0 0,var(--mn-bx,0) var(--mn-by,0),0 0;
  border:1px solid var(--mn-line);
  box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35);
  color:var(--mn-bone);
}
.mn-paint,
.mn-skin.selected,
.mn-seg-input:checked + .mn-seg-opt{
  background:
    var(--mn-chips),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,var(--mn-paint-hi),var(--mn-paint-lo));
  background-size:200px 120px,auto,auto;
  background-position:0 0;
  color:var(--mn-ink);
  border-color:var(--mn-paint-edge);
  box-shadow:inset 0 .08em 0 rgba(255,240,190,.45);
}

/* Bordes irregulares de chapa (variantes de la maqueta) */
.mn-cut-1{clip-path:polygon(0 0,95% 0,100% 6%,100% 100%,4% 100%,0 93%);--mn-bx:0;--mn-by:0}
.mn-cut-2{clip-path:polygon(3% 0,100% 0,100% 94%,97% 100%,0 100%,0 6%);--mn-bx:-90px;--mn-by:-40px}
.mn-cut-3{clip-path:polygon(0 0,100% 0,100% 92%,94% 100%,0 100%,0 0);--mn-bx:-30px;--mn-by:-100px}
.mn-cut-4{clip-path:polygon(0 5%,5% 0,100% 0,100% 100%,0 100%,0 5%);--mn-bx:-150px;--mn-by:-20px}
.mn-cut-5{clip-path:polygon(0 0,97% 0,100% 4%,100% 96%,95% 100%,0 100%);--mn-bx:-60px;--mn-by:-130px}
.mn-cut-6{clip-path:polygon(0 0,100% 0,100% 100%,6% 100%,0 94%,0 0);--mn-bx:-200px;--mn-by:-70px}

/* ───────────── Tarjeta ───────────── */
.mn-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:.7em .85em;
  text-align:left;
}
.mn-card-title{font-family:var(--mn-stencil);font-weight:400;font-size:.98em;letter-spacing:.05em;text-transform:uppercase}
.mn-card-sub{font-size:.78em;color:var(--mn-clay);margin-top:.256em}
.mn-card-tag{
  position:absolute;
  top:.833em;
  right:.833em;
  padding:.208em .694em;
  font-family:var(--mn-stencil);
  font-size:.72em;
  letter-spacing:.04em;
  text-transform:uppercase;
  transform:rotate(4deg);
  border:1px solid var(--mn-paint-edge);
}

/* ───────────── Píldora ───────────── */
.mn-pill{
  display:inline-block;
  padding:.375em 1.0625em;
  font-family:var(--mn-stencil);
  font-size:.8em;
  letter-spacing:.05em;
  text-transform:uppercase;
}
button.mn-pill,a.mn-pill{display:inline-flex;align-items:center;min-height:32px}
.mn-pill-danger{color:var(--mn-danger);border-color:var(--mn-danger-edge)}

/* ───────────── Botón pequeño y pestaña ───────────── */
.mn-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  min-width:32px;
  padding:.452em 1.131em;
  font-family:var(--mn-stencil);
  font-size:.84em;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
.mn-tab{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.39em 1.098em;
  font-family:var(--mn-stencil);
  font-size:.82em;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.mn-sm:active,.mn-tab:active{transform:translateY(.12em);filter:brightness(.88)}
@media (hover:hover){
  .mn-sm:hover,.mn-tab:hover{filter:brightness(1.12)}
}

/* ───────────── Botón grande de pie (CTA) ───────────── */
.mn-cta{
  height:2.143em;
  min-height:32px;
  padding:0 1.714em;
  font-family:var(--mn-display);
  font-size:1.4em;
  letter-spacing:.07em;
  text-transform:uppercase;
  border-bottom:.214em solid var(--mn-paint-edge);
  text-shadow:0 1px 0 rgba(255,235,170,.5);
}
.mn-cta:active{transform:translateY(.12em);filter:brightness(.9)}

/* ───────────── Interruptor (checkbox real) ───────────── */
.mn-switch{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  display:inline-block;
  flex:none;
  width:2.7em;
  height:1.3em;
  margin:0;
  border:1px solid var(--mn-line);
  border-radius:0;
  background:var(--mn-field);
  cursor:pointer;
  vertical-align:middle;
}
.mn-switch::before{content:"";position:absolute;top:.14em;left:.14em;width:.9em;height:.9em;background:var(--mn-clay);transition:transform .15s}
.mn-switch::after{content:"";position:absolute;inset:-.9em -.4em} /* área táctil ≥32px */
.mn-switch:checked{background:var(--mn-rust)}
.mn-switch:checked::before{transform:translateX(1.36em);background:var(--mn-bone)}

/* ───────────── Slider (input range real) ─────────────
   El relleno usa --mn-fill (p. ej. "70%"), que el JS de presentación puede fijar como valor dinámico. */
.mn-slider{
  -webkit-appearance:none;
  appearance:none;
  display:inline-block;
  flex:none;
  width:8em;
  height:max(1.4em,32px);
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  vertical-align:middle;
}
.mn-slider::-webkit-slider-runnable-track{height:.3em;border:0;background:linear-gradient(90deg,var(--mn-rust) var(--mn-fill,0%),var(--mn-field) var(--mn-fill,0%))}
.mn-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.6em;height:1em;margin-top:-.35em;border:0;border-radius:0;background:var(--mn-bone)}
.mn-slider::-moz-range-track{height:.3em;border:0;background:var(--mn-field)}
.mn-slider::-moz-range-progress{height:.3em;background:var(--mn-rust)}
.mn-slider::-moz-range-thumb{width:.6em;height:1em;border:0;border-radius:0;background:var(--mn-bone)}

/* responsive.css fija input[type=range]{height:28px} en ≤900px: se recupera el área táctil de 32px */
input[type="range"].mn-slider{height:max(1.4em,32px)}

/* ───────────── Segmentado (radios reales) ─────────────
   <div class="mn-seg"><input class="mn-seg-input" type="radio" id="x" name="g"><label class="mn-plate mn-seg-opt" for="x">Alta</label>...</div> */
.mn-seg{display:flex;gap:.2em}
.mn-seg-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;-webkit-appearance:none;appearance:none;pointer-events:none}
.mn-seg-opt{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.347em .764em;
  font-family:var(--mn-stencil);
  font-size:.72em;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.mn-seg-input:focus-visible + .mn-seg-opt{outline:2px solid var(--mn-paint);outline-offset:2px}

/* ───────────── Marco de panel ───────────── */
.mn-panel{
  position:absolute;
  inset:calc(.8em + env(safe-area-inset-top,0px)) calc(.9em + env(safe-area-inset-right,0px)) calc(.7em + env(safe-area-inset-bottom,0px)) calc(.9em + env(safe-area-inset-left,0px));
  display:flex;
  flex-direction:column;
  isolation:isolate;
  background:
    linear-gradient(rgba(14,12,9,.62),rgba(14,12,9,.62)),
    repeating-linear-gradient(88deg,rgba(255,235,210,.035) 0 1px,transparent 1px 9px),
    var(--mn-blotch),
    linear-gradient(180deg,var(--mn-plate-hi),var(--mn-plate-lo));
  background-size:auto,auto,260px 180px,auto;
  background-position:0 0,0 0,-40px -20px,0 0;
  clip-path:polygon(0 0,99% 0,100% 3%,100% 100%,1% 100%,0 97%);
  color:var(--mn-bone);
}
/* Grano: solo sobre esta capa de menú */
.mn-panel::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--mn-grain);opacity:.5;mix-blend-mode:soft-light}

.mn-head{flex:none;display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.7em 1em .5em}
.mn-title{margin:0!important;font-family:var(--mn-display);font-weight:400;font-size:1.5em!important;letter-spacing:.05em;line-height:normal;text-transform:uppercase;color:var(--mn-bone);text-shadow:none}
.mn-tabs{flex:none;display:flex;gap:.45em;padding:0 1em .55em}
.mn-body{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:.1em 1em .6em;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:2.2em;
  align-content:start;
}
.mn-foot{flex:none;display:flex;justify-content:flex-end;padding:.4em 1em .8em}
.mn-col{min-width:0}

/* ───────────── Filas y texto dentro del cuerpo ───────────── */
.mn-row{display:flex;justify-content:space-between;align-items:center;min-height:32px;padding:.6em 0;border-bottom:1px dashed var(--mn-sep)}
.mn-row-label{font-size:.92em}
.mn-row-note{grid-column:1/-1;color:var(--mn-clay);border-bottom:0}
.mn-h3{margin:.9em 0 .3em;padding:0 0 .35em;font-family:var(--mn-stencil);font-weight:400;font-size:.95em;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--mn-paint);border-bottom:1px solid var(--mn-sep)}
.mn-col > .mn-h3:first-child{margin-top:.2em}
.mn-note{margin:.5em 0 0;font-size:.78em;line-height:1.5;color:var(--mn-clay)}
.mn-list{margin:0;padding:0;list-style:none}
.mn-credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .8em;min-height:32px;padding:.25em 0;border-bottom:1px dashed var(--mn-sep)}
.mn-credit-name{flex:1 1 9em;min-width:0;font-size:.86em;line-height:1.4;overflow-wrap:anywhere}
.mn-credit-name strong{font-weight:400;color:var(--mn-bone)}
.mn-credit-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 .6em}
.mn-link{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 .125em;
  font-size:.8em;
  color:var(--mn-paint);
  text-decoration:underline;
  text-decoration-color:rgba(154,139,114,.4);
  text-underline-offset:.275em;
  overflow-wrap:anywhere;
}
.mn-link:active{filter:brightness(.88)}
@media (hover:hover){
  .mn-link:hover{filter:brightness(1.15)}
}

/* ───────────── Paneles de texto (fase 2A) ─────────────
   Legal, novedades, sobre el juego, guía y tutorial. Cuerpo en una sola columna con scroll interno. */
.mn-body-text{display:block}
.mn-prose{max-width:56em;margin:0 auto;padding-bottom:.4em}
/* Título de sección: fuente de display pequeña */
.mn-sec{margin:1em 0 .4em;padding:0 0 .3em;font-family:var(--mn-display);font-weight:400;font-size:1.05em;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;color:var(--mn-paint);border-bottom:1px solid var(--mn-sep)}
.mn-sec-main{margin-top:.2em;font-size:1.25em;color:var(--mn-bone)}
.mn-prose > .mn-sec:first-child{margin-top:.2em}
/* Párrafo: fuente de texto */
.mn-p{margin:.55em 0;font-size:.92em;line-height:1.6;color:var(--mn-bone);overflow-wrap:anywhere}
.mn-prose strong{font-weight:400;color:var(--mn-paint)}
/* Lista con marcador óxido */
.mn-bullets{margin:.4em 0 .8em;padding:0 0 0 1.4em;list-style:square}
.mn-bullets li{margin:.35em 0;padding-left:.2em;font-size:.92em;line-height:1.55;color:var(--mn-bone);overflow-wrap:anywhere}
.mn-bullets li::marker{color:var(--mn-rust)}
/* Paso del tutorial */
.mn-step{margin:.7em 0;padding:.2em .9em .5em;background:rgba(0,0,0,.3);border-left:.25em solid var(--mn-rust)}
.mn-step .mn-sec{margin-top:.5em}
/* Barra de progreso del tutorial. El ancho de #tutorialProgressBar lo fija game-core.js (valor dinámico). */
.mn-progress{margin:.2em 0 .8em}
.mn-progress-label{margin-bottom:.4em;font-family:var(--mn-stencil);font-size:.8em;letter-spacing:.05em;text-transform:uppercase;color:var(--mn-clay)}
.mn-progress-pct{color:var(--mn-paint)}
.mn-progress-track{height:.7em;overflow:hidden;border:1px solid var(--mn-line);background:var(--mn-field)}
.mn-progress-bar{width:0;height:100%;background:var(--mn-rust);transition:width .5s ease}

/* ───────────── Puentes con paneles antiguos ─────────────
   Cada panel migrado se registra aquí. #id.mn-shell (1,1,0) supera a las reglas heredadas por id
   (1,0,0), incluidas las !important de responsive.css, sin tocarlas.
   El shell queda como una capa transparente a pantalla completa; el marco real es .mn-panel dentro. */
/* responsive.css añade margin-bottom:40px!important a .ui-layer>div:last-child (0,2,1) */
.ui-layer.mn-shell>.mn-root:last-child{margin:0!important}
/* responsive.css añade además margin-bottom:40px!important a #shopPanel>div:last-child (1,1,1) */
#shopPanel.mn-shell>.mn-root:last-child{margin:0!important}
/* ...y #settingsMenu>div:last-child (1,1,1) */
#settingsMenu.mn-shell>.mn-root:last-child{margin:0!important}
/* menus.css centra el texto de #playConfigPanel */
#playConfigPanel.mn-shell{text-align:left}
#creditsPanel.mn-shell,
#legalPanel.mn-shell,
#updatesPanel.mn-shell,
#descriptionPanel.mn-shell,
#tipsPanel.mn-shell,
#tutorialPanel.mn-shell,
#missionPanel.mn-shell,
#worldListPanel.mn-shell,
#skinMenu.mn-shell,
#shopPanel.mn-shell,
#rankingPanel.mn-shell,
#communityMapsPanel.mn-shell,
#localLeaderboardPanel.mn-shell,
#friendsPanel.mn-shell,
#createRoomPanel.mn-shell,
#browseRoomsPanel.mn-shell,
#lobbyPanel.mn-shell,
#settingsMenu.mn-shell,
#authPanel.mn-shell,
#playConfigPanel.mn-shell{
  position:fixed!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0;
  padding:0!important;
  border:0;
  border-radius:0!important;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform:none!important;
  overflow:hidden;
  font-size:inherit;
  justify-content:flex-start!important;
}

/* ───────────── Táctil ─────────────
   base.css pone touch-action:none en "*". Dentro de los menús: tap normal, y scroll vertical en el cuerpo. */
.mn-root *{touch-action:manipulation}
.mn-body,.mn-body *{touch-action:pan-y}
.mn-root input[type="range"]{touch-action:pan-x}

/* ───────────── Ayudas y campos sueltos (también dentro de paneles antiguos) ───────────── */
.mn-help{margin:.4em 0 0;font-size:.8em;line-height:1.4;color:var(--mn-clay);text-align:left}
.mn-noshow{display:none}
.mn-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em;margin:0 0 1em}
/* Select nativo con aspecto de chapa */
/* ───────────── Menú principal (#mainMenu) ─────────────
   Valores de menu_maqueta.html, rem → em (la escala la fija .mn-root). */
#mainMenu.mn-shell{background:var(--mn-bg);padding:0;overflow:hidden;font-size:inherit}
/* Fondo animado: atenuado y por debajo de todo (el canvas pinta su propio degradado verde) */
#mainMenu.mn-shell #menuBgCanvas{opacity:.35;background:var(--mn-bg);pointer-events:none}

.mn-screen{
  display:flex;
  flex-direction:column;
  gap:.7em;
  padding:calc(.8em + env(safe-area-inset-top,0px)) calc(.9em + env(safe-area-inset-right,0px)) calc(.7em + env(safe-area-inset-bottom,0px)) calc(.9em + env(safe-area-inset-left,0px));
  overflow:hidden;
  background:
    radial-gradient(ellipse at 28% 18%,rgba(180,95,38,.16),transparent 62%),
    radial-gradient(ellipse at 85% 95%,rgba(0,0,0,.65),transparent 70%);
}
.mn-screen::before{content:"";position:absolute;inset:0;background:var(--mn-blotch);background-size:620px 430px;opacity:.26;pointer-events:none}
.mn-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--mn-grain);opacity:.5;mix-blend-mode:soft-light}

/* Efectos ambientales (fase 1b, js/menu-fx.js): polvo y viento.
   #fx es el primer hijo de .mn-screen: queda por debajo de tarjetas, botones y cartel (que van después en el DOM
   o con z-index) y por encima del fondo. Solo animan transform y opacity. */
.mn-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mn-dust{position:absolute;left:-3em;border-radius:50%;background:radial-gradient(circle,rgba(var(--mn-dc),var(--mn-da)),rgba(var(--mn-dc),0) 72%);animation:mn-drift var(--mn-dd) linear infinite}
@keyframes mn-drift{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}50%{transform:translate3d(55vw,var(--mn-dy),0)}92%{opacity:1}100%{transform:translate3d(118vw,calc(var(--mn-dy) * -.6),0);opacity:0}}
.mn-wind{position:absolute;left:-24em;top:calc(env(safe-area-inset-top,0px) + var(--mn-wy));height:.1em;border-radius:1em;background:linear-gradient(90deg,rgba(227,214,189,0),rgba(227,214,189,.55) 65%,rgba(227,214,189,0));opacity:0;animation:mn-fly 2s cubic-bezier(.12,.6,.3,1) both,mn-fade 2s linear both}
@keyframes mn-fly{0%{transform:translateX(0)}100%{transform:translateX(165vw)}}
@keyframes mn-fade{0%{opacity:0}8%{opacity:.9}55%{opacity:.7}100%{opacity:0}}
/* Menú no visible (partida, panel abierto, pestaña oculta): js/menu-fx.js añade .mn-paused y se congela todo */
.mn-screen.mn-paused,
.mn-screen.mn-paused *,
.mn-screen.mn-paused *::before,
.mn-screen.mn-paused *::after{animation-play-state:paused!important}

/* Contenido SEO: sigue en el DOM pero no se ve ni ocupa sitio */
#game-overview.mn-seo{position:absolute!important;width:1px!important;height:1px!important;max-height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;pointer-events:none}

/* Cartel colgante */
.mn-gustwrap{position:absolute;top:env(safe-area-inset-top,0px);left:calc(.9em + env(safe-area-inset-left,0px));width:17em;height:0;z-index:2;pointer-events:none;transform-origin:1em 0}
.mn-gustwrap.mn-blow{animation:mn-blow 2.6s ease-out}
.mn-swing{position:absolute;top:0;left:0;width:17em;height:16em;transform-origin:1em 0;animation:mn-sway 7s ease-in-out infinite}
@keyframes mn-sway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(1.1deg)}}
@keyframes mn-blow{0%{transform:rotate(0)}18%{transform:rotate(2.8deg)}45%{transform:rotate(-1.5deg)}72%{transform:rotate(.7deg)}100%{transform:rotate(0)}}
.mn-dangwrap{position:absolute;top:env(safe-area-inset-top,0px);left:calc(.9em + env(safe-area-inset-left,0px) + 15.3em);width:.38em;height:6.3em;z-index:2;pointer-events:none;transform-origin:50% 0}
.mn-dangwrap.mn-blow{animation:mn-blow2 2.8s ease-out}
@keyframes mn-blow2{0%{transform:rotate(0)}15%{transform:rotate(6deg)}40%{transform:rotate(-4deg)}65%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.mn-dang{width:100%;height:100%;transform-origin:50% 0;animation:mn-sway2 5.3s ease-in-out infinite;background:repeating-linear-gradient(62deg,#9b7a47 0 .2em,#5a4326 .2em .4em);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);clip-path:polygon(0 0,100% 0,100% 100%,78% 86%,58% 100%,38% 84%,18% 100%,0 88%)}
@keyframes mn-sway2{0%,100%{transform:rotate(1.2deg)}50%{transform:rotate(-1.6deg)}}
.mn-nail{position:absolute;left:.62em;top:-.35em;width:.76em;height:.76em;border-radius:50%;background:#2a2118;box-shadow:0 0 0 .1em #6b4b30}
.mn-rope{position:absolute;width:.38em;background:repeating-linear-gradient(62deg,#9b7a47 0 .2em,#5a4326 .2em .4em);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.mn-rope-main{left:.81em;top:0;height:7.3em}
.mn-rope-stub{left:15.3em;top:7.38em;height:1.6em;clip-path:polygon(0 12%,20% 0,40% 14%,60% 0,82% 14%,100% 0,100% 100%,0 100%);transform:rotate(-6deg);transform-origin:50% 100%}
.mn-sign,.mn-shade{position:absolute;left:.2em;top:6.45em;width:16.2em;height:6.6em;transform-origin:.8em .75em;clip-path:polygon(0 4%,3% 0,97% 0,100% 5%,100% 96%,96% 100%,2% 100%,0 94%)}
.mn-shade{background:rgba(0,0,0,.5);transform:translate(.3em,.45em) rotate(7deg)}
.mn-sign{transform:rotate(7deg)}
.mn-sign::before{content:"";position:absolute;inset:1.3em .7em .55em;border:.14em solid rgba(227,214,189,.38);pointer-events:none}
.mn-hole{position:absolute;top:.45em;width:.6em;height:.6em;border-radius:50%;background:#0b0907;box-shadow:0 0 0 .13em #7a5a3a,inset 0 .1em .1em rgba(0,0,0,.8)}
.mn-hole-l{left:.5em}
.mn-hole-r{left:15.1em}
.mn-knot{position:absolute;left:.6em;top:6.8em;width:.8em;height:.8em;border-radius:50%;background:#6a5030;box-shadow:inset 0 0 0 .12em #3d2c17}
.mn-ttl{position:absolute;inset:1.3em .7em .55em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em}
/* responsive.css fija h1 con !important en ≤900px: font-size y margin llevan !important */
.mn-ttl h1{
  margin:0!important;
  font-family:var(--mn-display);
  font-weight:400;
  font-size:2.9em!important;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  background:var(--mn-chips),linear-gradient(180deg,#f0e6cf,#cbbd9c);
  background-size:200px 120px,auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 .0414em 0 rgba(0,0,0,.55));
}
.mn-sub{margin:0;font-family:var(--mn-type);font-size:.8em;letter-spacing:.22em;text-transform:uppercase;color:#d8cdb2}

/* Rejilla de tarjetas (derecha) */
.mn-home{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:17em minmax(0,1fr);gap:1.4em}
.mn-left{min-height:0}
.mn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:8.6em;align-content:center;gap:.6em}
.mn-cell{position:relative;display:grid;min-width:0}
.mn-card:active{transform:translateY(.12em);filter:brightness(.88)}
/* Etiqueta "Pack gratis": botón propio sobre la tarjeta; el ::after amplía el área táctil a ≥32px */
button.mn-card-tag{cursor:pointer}
.mn-card-tag::after{content:"";position:absolute;inset:-10px -8px}
.mn-card-tag:active{filter:brightness(.88)}

/* Íconos de las tarjetas (fase 5C): silueta estampada, un solo color (currentColor), trazo grueso.
   Caja 8.4em (≈98 % del alto de tarjeta, 8.6em), anclada a la derecha y abajo; right/bottom negativos dejan ≈19 % / ≈18 % fuera.
   El recorte lo hace la propia tarjeta (overflow + clip-path .mn-cut-*), nunca el fondo ni las vecinas.
   Estático (sin animación): se ve igual en calidad "performance". */
.mn-card{overflow:hidden}
.mn-card-ico{
  position:absolute;
  z-index:0;
  right:-1.6em;
  bottom:-1.5em;
  width:8.4em;
  height:8.4em;
  color:var(--mn-stamp);
  opacity:.4;
  fill:none;
  stroke:currentColor;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.mn-card-ico .f{fill:currentColor}
/* Armería: la etiqueta "Pack gratis" ocupa arriba a la derecha; el ícono baja (24 % fuera por abajo) y su dibujo vive en la mitad inferior de la caja */
.mn-ico-armory{right:-1.6em;bottom:-1.8em}
/* Legibilidad: la chapa (óxido + mancha) queda clara bajo el texto y el subtítulo en arcilla caía a ≈1:1. Un velo oscuro estático
   (degradado, sin blur) anclado abajo asegura contraste ≥4.5:1 (peor píxel medido) en título y subtítulo, con o sin ícono; también en calidad "performance". */
.mn-card::before,
.mn-item:not(.mn-paint)::before,
.mn-skin:not(.selected)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--mn-card-veil);
}
/* El texto va siempre por encima del ícono */
.mn-card-title,.mn-card-sub{position:relative;z-index:1}
.mn-card-sub{color:var(--mn-clay-hi)}

/* Barra inferior */
.mn-bar{position:relative;display:flex;align-items:center;gap:.8em}
.mn-btns{display:flex;gap:.5em;flex:none}
.mn-profile{max-width:13em;overflow:hidden;white-space:nowrap}
/* Contenedor propio del resplandor: el clip-path del botón lo recortaría */
.mn-playwrap{position:relative;flex:1;min-width:0;display:flex}
.mn-playwrap::before{content:"";position:absolute;inset:.35em .6em;background:rgba(214,166,52,.6);filter:blur(.65em);opacity:.4;animation:mn-glow 3.6s ease-in-out infinite;pointer-events:none}
@keyframes mn-glow{0%,100%{opacity:.28}50%{opacity:.62}}
.mn-play{
  position:relative;
  flex:1;
  height:1.5714em;
  font-family:var(--mn-display);
  font-size:2.1em;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  border:0;
  border-bottom:.1429em solid var(--mn-paint-edge);
  text-shadow:0 1px 0 rgba(255,235,170,.5);
  clip-path:polygon(0 0,98% 0,100% 12%,100% 100%,2% 100%,0 88%);
}
.mn-play:active{transform:translateY(.0571em);filter:brightness(.9)}
.mn-links{flex:none;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:.5em 1.375em;font-size:.8em;color:var(--mn-clay)}
.mn-links button{display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:32px;padding:.25em 0;text-decoration:underline;text-decoration-color:rgba(154,139,114,.4);text-underline-offset:.275em}
.mn-links button:active{filter:brightness(.88)}
@media (hover:hover){
  .mn-card:hover,.mn-play:hover:not(:disabled){filter:brightness(1.1)}
  .mn-links button:hover{filter:brightness(1.2)}
}

/* ───────────── Paneles de juego (fase 2B) ─────────────
   Misiones, mundos, skins, tienda, ranking, comunidad y top local. Valores en em (escala de .mn-root). */
.mn-body-list,.mn-body-cards{display:block}
.mn-head-end{display:flex;align-items:center;gap:.9em;flex:none}
.mn-note-top{margin:0 0 .8em}
/* Barra de herramientas bajo la cabecera (búsqueda de mapas) */
.mn-toolbar{flex:none;display:flex;align-items:center;gap:.5em;padding:0 1em .6em}
.mn-field{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  min-width:0;
  min-height:32px;
  margin:0;
  padding:.4em .8em;
  font-family:var(--mn-type);
  font-size:.9em;
  color:var(--mn-bone);
  border:1px solid var(--mn-line);
  border-radius:0;
  background:var(--mn-field);
  user-select:text;
  -webkit-user-select:text;
}
.mn-field::placeholder{color:var(--mn-clay);opacity:1}
.mn-field:focus-visible{outline:2px solid var(--mn-paint);outline-offset:2px}

/* Moneda: disco de pintura con la inicial (sustituye a P + corona) */
.mn-coins{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mn-stencil);font-size:.95em;letter-spacing:.04em;color:var(--mn-paint)}
.mn-coin{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;font-family:var(--mn-stencil);font-weight:400;font-size:.8em;line-height:1;color:var(--mn-ink);border:1px solid var(--mn-paint-edge);background:linear-gradient(180deg,var(--mn-paint-hi),var(--mn-paint-lo))}

/* Filas de lista (misiones, mundos, ranking, mapas, top local) */
.mn-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2em}
.mn-row-title{font-family:var(--mn-stencil);font-weight:400;font-size:.92em;letter-spacing:.03em;overflow-wrap:anywhere}
.mn-row-desc{font-size:.78em;line-height:1.4;color:var(--mn-clay);overflow-wrap:anywhere}
.mn-row-val{flex:none;margin-left:.8em;font-family:var(--mn-stencil);font-size:.92em;color:var(--mn-bone)}
.mn-row-end{flex:none;display:flex;align-items:center;gap:.6em;margin-left:.8em}
.mn-row-lead{flex:none;margin-right:.8em}
.mn-row-done{opacity:.6}
.mn-row-done .mn-row-val{color:var(--mn-paint)}
.mn-row-top .mn-row-title,.mn-row-top .mn-row-val{color:var(--mn-paint)}
.mn-rank{display:inline-block;min-width:2.2em;font-family:var(--mn-stencil);font-size:.92em;color:var(--mn-clay)}
.mn-row-top .mn-rank{color:var(--mn-paint)}
.mn-thumb{display:block;flex:none;width:3.4em;height:3.4em;object-fit:cover;background:var(--mn-field);border:1px solid var(--mn-line)}
.mn-stat{flex:none;min-width:3.6em;text-align:right;font-family:var(--mn-stencil);font-size:.86em;color:var(--mn-bone)}
.mn-stat small{margin-left:.3em;font-size:.8em;color:var(--mn-clay)}
.mn-row-in{animation:mn-row-in .16s ease-out both}
@keyframes mn-row-in{from{opacity:0;transform:translateX(-.6em)}to{opacity:1;transform:translateX(0)}}

/* Etiquetas pequeñas (IA, trofeos) */
.mn-badge{display:inline-block;margin-left:.5em;padding:.1em .5em;font-family:var(--mn-stencil);font-size:.7em;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;color:var(--mn-ink);background:var(--mn-clay);border:1px solid var(--mn-line)}
.mn-chips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.2em}
.mn-chip{display:inline-block;max-width:10em;padding:.1em .5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mn-stencil);font-size:.7em;letter-spacing:.04em;text-transform:uppercase;color:var(--mn-paint);border:1px solid var(--mn-paint-edge);background:rgba(0,0,0,.25)}

/* Estados vacío, carga y error */
.mn-state{margin:1.4em 0;text-align:center;font-family:var(--mn-type);font-size:.92em;line-height:1.5;color:var(--mn-clay)}
.mn-state-error{color:var(--mn-danger)}

/* Botones de acción (cargar, comprar, me gusta) */
.mn-like.mn-paint{border-color:var(--mn-paint-edge)}

/* Cuadrícula de tarjetas de chapa (skins y tienda) */
.mn-cards{display:grid;gap:.7em;align-content:start}
.mn-cards-skins{grid-template-columns:repeat(auto-fill,minmax(8em,1fr))}
.mn-cards-shop{grid-template-columns:repeat(auto-fill,minmax(13em,1fr))}
.mn-cards-sep{grid-column:1/-1;margin:.5em 0 0;padding:0 0 .3em;font-family:var(--mn-stencil);font-weight:400;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:var(--mn-paint);border-bottom:1px solid var(--mn-sep)}
.mn-cards-sep:first-child{margin-top:0}

.mn-skin{display:flex;flex-direction:column;align-items:center;gap:.5em;padding:.8em .6em .7em;cursor:pointer;text-align:center;min-width:0}
.mn-swatch{display:block;width:3em;height:3em;background:var(--mn-swatch,var(--mn-field));border:.14em solid var(--mn-line);box-shadow:0 0 0 .1em rgba(227,214,189,.35)}
.mn-skin-state{font-family:var(--mn-stencil);font-size:.78em;letter-spacing:.05em;text-transform:uppercase;color:var(--mn-clay)}
.mn-skin-price{font-family:var(--mn-stencil);font-size:.86em;letter-spacing:.04em;color:var(--mn-paint)}
.mn-skin.selected .mn-skin-state{color:var(--mn-ink)}
.mn-skin.selected .mn-swatch{border-color:var(--mn-ink);box-shadow:0 0 0 .1em rgba(27,20,12,.5)}
.mn-skin:not(.selected) .mn-st-on,.mn-skin.selected .mn-st-off{display:none}
.mn-skin:active{transform:translateY(.12em);filter:brightness(.9)}
.mn-is-locked{--mn-card-veil:linear-gradient(180deg,rgba(var(--mn-veil-rgb),.6),rgba(var(--mn-veil-rgb),.7));border-style:dashed;border-color:var(--mn-clay)}
.mn-is-locked .mn-swatch{filter:grayscale(.6) brightness(.65)}
.mn-is-locked .mn-skin-state{color:var(--mn-clay-hi)}

.mn-item,.mn-skin{--mn-card-veil:linear-gradient(180deg,rgba(var(--mn-veil-rgb),.24),rgba(var(--mn-veil-rgb),.34))}
.mn-item>*,.mn-skin>*{position:relative;z-index:1}
.mn-item{display:flex;flex-direction:column;gap:.5em;padding:.8em .9em .9em;min-width:0}
.mn-item-name{margin:0;font-family:var(--mn-stencil);font-weight:400;font-size:.98em;letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
.mn-item-desc{flex:1 1 auto;margin:0;font-size:.78em;line-height:1.45;color:var(--mn-clay-hi);overflow-wrap:anywhere}
.mn-item.mn-paint .mn-item-desc,.mn-item.mn-paint .mn-price{color:var(--mn-ink)}
.mn-price{font-family:var(--mn-stencil);font-size:.9em;letter-spacing:.04em;color:var(--mn-paint)}
.mn-item-btn{align-self:stretch;justify-content:center}
.mn-item-owned{border-color:var(--mn-paint-edge)}

@media (hover:hover){
  .mn-skin:hover{filter:brightness(1.1)}
  .mn-row:hover{background:rgba(227,214,189,.05)}
}

/* ───────────── Ajustes, login y configuración de misión (fase 2C) ─────────────
   Pestañas, filas de formulario, select en píldora, campos de login y reasignación de teclas. */

/* Pestañas: todas las secciones siguen en el DOM; la clase mn-pane-off solo cambia cuál se ve.
   Así el JS que lee estos controles por id funciona aunque estén ocultos. */
.mn-body-tabs{display:block}
.mn-pane{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2em;align-content:start}
.mn-pane-off{display:none}

/* Fila de formulario: etiqueta (y ayuda) a la izquierda, control a la derecha */
/* Altura igual en todas las filas (la de un slider manda: el área táctil es de ≥32px) */
.mn-row-set{gap:.9em;padding:.35em 0;min-height:calc(max(1.4em,32px) + .7em)}
label.mn-row-label{cursor:pointer}
.mn-row-set .mn-row-main{flex:1 1 auto;min-width:0}
/* flex:none + tope de ancho: el control nunca se encoge por debajo de su tamaño (un select largo recorta con puntos suspensivos) */
.mn-ctl{flex:none;max-width:60%;display:flex;align-items:center;gap:.7em}
.mn-row-action{justify-content:flex-start}
.mn-row-action .mn-ctl{max-width:100%}
.mn-row-note .mn-row-desc{margin:0}
.mn-val{flex:none;min-width:1.6em;text-align:right;font-family:var(--mn-stencil);font-size:.92em;color:var(--mn-paint)}

/* Píldora pulsable: respuesta táctil (la píldora estática de la maqueta no la tiene) */
button.mn-pill:active{transform:translateY(.12em);filter:brightness(.88)}
@media (hover:hover){
  button.mn-pill:hover{filter:brightness(1.12)}
}

/* Select nativo con aspecto de píldora de chapa */
.mn-select-pill{
  -webkit-appearance:none;
  appearance:none;
  display:inline-block;
  min-width:0;
  max-width:100%;
  min-height:32px;
  margin:0;
  padding:.375em 2.6em .375em 1.0625em;
  font-family:var(--mn-stencil);
  font-size:.8em;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-overflow:ellipsis;
  color:var(--mn-bone);
  border:1px solid var(--mn-line);
  border-radius:0;
  background:
    linear-gradient(45deg,transparent 50%,var(--mn-bone) 50%),
    linear-gradient(135deg,var(--mn-bone) 50%,transparent 50%),
    repeating-linear-gradient(88deg,rgba(255,235,210,.035) 0 1px,transparent 1px 9px),
    var(--mn-blotch),
    linear-gradient(180deg,var(--mn-plate-hi),var(--mn-plate-lo));
  background-size:.5em .5em,.5em .5em,auto,260px 180px,auto;
  background-position:calc(100% - 1.45em) 55%,calc(100% - 1em) 55%,0 0,0 0,0 0;
  background-repeat:no-repeat,no-repeat,repeat,repeat,repeat;
  box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35);
  cursor:pointer;
}
.mn-select-pill option{background:var(--mn-field);color:var(--mn-bone);text-transform:none}
@media (hover:hover){
  .mn-select-pill:hover:not(:disabled){filter:brightness(1.12)}
}

/* Campos de login (input nativo, ancho completo) y formularios en columna */
.mn-field-block{display:block;flex:none;width:100%}
.mn-form{display:flex;flex-direction:column;gap:.6em}
.mn-form .mn-h3{margin-bottom:.1em}
.mn-note-flush{margin:0}
.mn-block{width:100%}
.mn-body-auth{display:block}
.mn-auth-forms{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2em;align-items:start}
.mn-account{max-width:30em;margin:0 auto}
.mn-account-head{text-align:center;margin:0 0 .6em}
.mn-account-head .mn-sec{margin:.2em 0 .3em;border-bottom:0}
.mn-account-actions{display:flex;justify-content:center;margin-top:1em}

/* Pie con ayuda a la izquierda y botón a la derecha (configuración de misión) */
.mn-foot-split{align-items:center;justify-content:space-between;gap:1em}
.mn-foot-split .mn-help{flex:1 1 auto;min-width:0;margin:0}
.mn-foot-split .mn-cta{flex:none}

/* Asignar teclas. El JS de KeyRemap (index.html) genera .key-row / .key-btn y alterna el display
   de #keyRemapPanel con style.display: aquí solo se restiliza, sin tocar display. */
#keyRemapPanel.mn-keys{
  grid-column:1/-1;
  margin:.5em 0 .3em;
  padding:.3em .9em .7em;
  max-height:none;
  overflow:visible;
  border:1px solid var(--mn-line);
  border-left:.25em solid var(--mn-rust);
  border-radius:0;
  background:rgba(0,0,0,.3);
}
.mn-keys-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2em}
.mn-root .key-row{display:flex;justify-content:space-between;align-items:center;gap:.8em;min-height:32px;padding:.3em 0;border:0;border-bottom:1px dashed var(--mn-sep);font-size:.92em;color:var(--mn-bone)}
.mn-root .key-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:4.5em;
  min-height:32px;
  padding:.3em .85em;
  font-family:var(--mn-stencil);
  font-size:.8em;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--mn-bone);
  border:1px solid var(--mn-line);
  border-radius:0;
  background:
    repeating-linear-gradient(88deg,rgba(255,235,210,.035) 0 1px,transparent 1px 9px),
    var(--mn-blotch),
    linear-gradient(180deg,var(--mn-plate-hi),var(--mn-plate-lo));
  background-size:auto,260px 180px,auto;
  box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35);
  animation:none;
}
.mn-root .key-btn:active{transform:translateY(.12em);filter:brightness(.88)}
@media (hover:hover){
  .mn-root .key-btn:hover{filter:brightness(1.12)}
}
/* Esperando tecla: pintura amarilla (el parpadeo de blinkRec ya no se usa) */
.mn-root .key-btn.listening{
  color:var(--mn-ink);
  border-color:var(--mn-paint-edge);
  background:
    var(--mn-chips),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,var(--mn-paint-hi),var(--mn-paint-lo));
  background-size:200px 120px,auto,auto;
  box-shadow:inset 0 .08em 0 rgba(255,240,190,.45);
}
/* El color de estado que pone VisualQualitySystem (style.color) desentona con la paleta */
#qualityBtnValue{color:var(--mn-paint)!important}

/* ───────────── Social y navegación por pestañas (fase 2D) ─────────────
   Franja .mn-tabs de los grupos Multijugador, Mundos y Clasificación, y paneles de amigos, salas y lobby.
   Cada panel de un grupo es independiente: su pestaña activa es la suya (mn-paint + aria-current) y las demás
   abren el panel hermano (js/menu-tabs.js, data-mn-go). */
.mn-tab[aria-current="true"]{cursor:default}
.mn-tab[aria-current="true"]:active{transform:none;filter:none}
@media (hover:hover){
  .mn-tab[aria-current="true"]:hover{filter:none}
}

/* Subpestañas dentro del cuerpo (Mis amigos / Solicitudes) y resultado de búsqueda */
.mn-subtabs{display:flex;gap:.45em;margin:0 0 .6em}
.mn-search-result:not(:empty){margin:0 0 .6em}

/* Campo de texto como control de una fila de formulario (crear sala) */
.mn-ctl .mn-field{flex:0 1 auto;width:13em}

/* Lobby: título que se recorta, datos de la sala bajo la cabecera y lista de amigos a invitar */
.mn-title-fit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-lobby-meta{flex:none;display:flex;flex-wrap:wrap;gap:.2em 1.4em;padding:0 1em .4em}
.mn-lobby-meta .mn-note{margin:0}
.mn-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5em;padding:.4em 0}
.mn-wrap .mn-state{flex:1 1 100%;margin:.6em 0}

/* ───────────── Pulido (fase 3): transiciones y estados ─────────────
   TRANSICIÓN DE ENTRADA. Los paneles se muestran quitando "hidden" (display:none), así que no se puede animar la salida
   sin tocar la lógica: se anima la entrada del marco (.mn-panel) o de la pantalla del menú principal. Dura 160 ms y solo usa
   transform y opacity. animation-fill-mode:backwards evita que quede un transform residual al terminar. Las reglas de
   "performance" y de movimiento reducido (más abajo) ya la desactivan. Los shells no deben transicionar nada propio
   (base.css y menus.css ponían transition sobre .ui-layer y #mainMenu). */
.ui-layer.mn-shell,
#mainMenu.mn-shell{transition:none}
@keyframes mn-pane-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}
.mn-shell:not(.hidden) > .mn-root > .mn-panel,
#mainMenu:not(.hidden) > .mn-screen{animation:mn-pane-in .16s ease-out backwards}

/* PULSADO. Los controles pulsables sin :active propio lo heredan de aquí (los demás ya lo tienen arriba). */
.mn-switch:active{filter:brightness(.88)}
.mn-slider:active::-webkit-slider-thumb{background:var(--mn-paint)}
.mn-slider:active::-moz-range-thumb{background:var(--mn-paint)}
.mn-select-pill:active,.mn-seg-opt:active{filter:brightness(.88)}

/* FOCO (teclado y mando; el toque no lo activa). Anillo de pintura sobre la chapa. Los elementos recortados con
   clip-path (tarjetas .mn-cut-*, botón Jugar) cortarían un anillo exterior: ahí va por dentro. Sobre pintura amarilla el
   anillo es tinta oscura. */
.mn-root :is(button,a[href],input,select,textarea,summary):focus-visible{outline:2px solid var(--mn-paint);outline-offset:2px}
.mn-root :is(.mn-play,[class*="mn-cut-"]):focus-visible{outline-offset:-.35em}
.mn-root .mn-paint:focus-visible{outline-color:var(--mn-ink)}
.mn-root :is(.mn-cta,.mn-sm,.mn-pill,.mn-tab).mn-paint:focus-visible{outline-color:var(--mn-bone)}

/* DESHABILITADO. Un único aspecto para todos los controles: apagado y sin respuesta al pulsar. */
.mn-root :is(button,input,select,textarea):disabled,
.mn-root [aria-disabled="true"]{opacity:.55;filter:grayscale(.6);cursor:default}
.mn-root :is(button,input,select,textarea):disabled:active,
.mn-root [aria-disabled="true"]:active{transform:none;filter:grayscale(.6)}

/* ───────────── Fase 4: pantallas de partida y cookies ─────────────
   Pausa, muerte, victoria, resultados de partida y consentimiento de cookies. Aparecen SOBRE el juego (o sobre el
   menú), así que NO usan .mn-panel: nada de texturas, grano ni mix-blend-mode. El cuadro (.mn-dialog) es un color
   sólido con el borde irregular de la chapa; solo los botones conservan chapa/pintura, como en el resto de menús.
   La escala la sigue fijando .mn-root (dentro de cada .mn-over). */
.mn-over{position:fixed;inset:0;background:var(--mn-scrim)}
.mn-over > .mn-root{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(.8em + env(safe-area-inset-top,0px)) calc(.9em + env(safe-area-inset-right,0px)) calc(.7em + env(safe-area-inset-bottom,0px)) calc(.9em + env(safe-area-inset-left,0px));
}
.mn-dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  width:min(100%,26em);
  padding:1.1em 1.4em 1.2em;
  text-align:center;
  color:var(--mn-bone);
  background:var(--mn-panel-flat);
  border:1px solid var(--mn-line);
  box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35);
  clip-path:polygon(0 0,99% 0,100% 3%,100% 100%,1% 100%,0 97%);
  overflow-x:hidden;
  overflow-y:auto;  /* red de seguridad en pantallas aún más bajas que 640x360 */
  overscroll-behavior:contain;
}
.mn-dialog-narrow{width:min(100%,22em)}
.mn-dialog-wide{width:min(100%,34em)}
.mn-dialog-results{width:min(100%,40em)}

/* Los h2 globales de responsive.css llevan !important: el título los vence igual que .mn-title */
.mn-over-title{margin:0 0 .3em!important;font-family:var(--mn-display);font-weight:400!important;font-size:2.4em!important;line-height:1.05;letter-spacing:.05em!important;text-transform:uppercase;color:var(--mn-bone);overflow-wrap:anywhere}
.mn-over-title-danger{color:var(--mn-danger)}
.mn-over-title-win{color:var(--mn-paint)}
.mn-over-title-sm{font-size:1.5em!important}
.mn-over-head{flex:none;text-align:center;margin-bottom:.5em}
.mn-over-sub{margin:.2em 0 0;font-size:.8em;letter-spacing:.22em;text-transform:uppercase;color:var(--mn-clay)}
.mn-over-text{margin:.3em 0 0;font-size:1em;text-align:center}
.mn-over-note{margin:.2em 0 0;text-align:center}
.mn-over-actions{flex:none;display:flex;justify-content:center;gap:.6em;margin-top:.9em}
.mn-over-actions-col{flex-direction:column;align-items:stretch;gap:.7em}
.mn-over-actions-eq{gap:.8em}

/* Cookies: Aceptar y Rechazar son el MISMO componente (misma chapa, tamaño y tipografía), sin ninguno destacado */
.mn-eq{flex:1 1 0;min-width:0;min-height:40px;justify-content:center;font-size:1em}
.mn-over-cookie{background:rgba(14,12,9,.94)}
.mn-over-cookie .mn-p{text-align:left}
.mn-over-cookie .mn-dialog:focus{outline:0}

/* Estadísticas de la pantalla de muerte: 2 x 2 */
.mn-over-stats{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2em;margin:.2em 0 .3em;text-align:left}
.mn-over-stats-head{grid-column:1/-1;margin:.2em 0 .1em;text-align:center}
.mn-over-stats .mn-row-label{flex:none}
.mn-over-stats .mn-stat{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.mn-stat-hot{color:var(--mn-paint)}

/* Resultados de partida: filas en rejilla, columnas alineadas con la cabecera */
.mn-res-cols,
.mn-res-row{display:grid;grid-template-columns:2.4em minmax(0,1fr) 5em 6.5em;align-items:center;column-gap:.6em;text-align:left}
.mn-res-cols{flex:none;padding:.2em 0 .3em;border-bottom:1px solid var(--mn-sep)}
.mn-res-cols > span{font-family:var(--mn-stencil);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-clay)}
.mn-res-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mn-dialog,.mn-dialog *{touch-action:pan-y}
.mn-dialog button,.mn-dialog a{touch-action:manipulation}
.mn-res-num{text-align:right}
.mn-res-name{min-width:0;font-size:.92em;overflow-wrap:anywhere}
.mn-res-you{font-size:.78em;color:var(--mn-clay)}
.mn-res-status{font-family:var(--mn-stencil);font-size:.78em;letter-spacing:.05em;text-transform:uppercase}
.mn-res-ok{color:var(--mn-paint)}
.mn-res-dead{color:var(--mn-danger)}
.mn-res-alive{color:var(--mn-clay)}
.mn-res-me{background:rgba(180,95,38,.18)}
.mn-res-row:nth-child(2){animation-delay:.03s}
.mn-res-row:nth-child(3){animation-delay:.06s}
.mn-res-row:nth-child(n+4){animation-delay:.1s}

/* Pausa: el juego sigue debajo; el velo no captura toques (como antes) y solo el cuadro responde */
#pauseOverlay.mn-over{display:none;z-index:9500;background:rgba(14,12,9,.75);touch-action:auto}
#pauseOverlay.mn-over.visible{display:block}
#pauseOverlay .mn-dialog{pointer-events:auto}

/* Muerte y victoria: con display:none mientras no se muestran (en partida ninguna capa de menú ocupa pantalla) y fundido de entrada al activarse */
.mn-over-fade{display:none;z-index:2000}
.mn-over-fade.active{display:block;pointer-events:auto;animation:mn-over-in 1s ease both}
@keyframes mn-over-in{from{opacity:0}to{opacity:1}}

/* Resultados y cookies: sobre todo lo demás; solo se muestran con .active (resultados) o display (cookies, lo fija el JS) */
#matchResultsScreen.mn-over{display:none;z-index:99999;pointer-events:all}
#matchResultsScreen.mn-over.active{display:block}
#cookieConsentModal.mn-over{display:none;z-index:99999}

/* Pantalla completa obligatoria: por encima de todo (también del aviso de cookies); la activa js/fullscreen-gate.js */
#fsGate.mn-over{display:none;z-index:100000;background:rgba(14,12,9,.97)}
#fsGate.mn-over.active{display:block}
#fsGate .mn-cta{height:auto;padding:.5em 1.4em;line-height:1.15;max-width:100%}

/* Secuencia de infección de la pantalla de muerte (clases que activa game-core.js; antes eran estilos inline) */
.mn-flash{position:fixed;inset:0;z-index:2100;background:#000;opacity:0;transition:opacity .15s ease;pointer-events:none}
.mn-flash-on{opacity:1}
.mn-infect-vign{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,160,50,.5) 100%);box-shadow:inset 0 0 120px rgba(0,200,60,.5)}
.mn-infected .mn-over-title{color:var(--mn-infect);font-size:1.7em!important;text-shadow:0 0 .6em rgba(0,204,68,.45)}

/* ───────────── Calidad "performance": todo plano ───────────── */
body[data-quality="performance"] .mn-plate{background:var(--mn-plate-flat);box-shadow:none}
body[data-quality="performance"] .mn-paint,
body[data-quality="performance"] .mn-seg-input:checked + .mn-seg-opt{background:var(--mn-paint);box-shadow:none}
body[data-quality="performance"] .mn-panel{background:var(--mn-panel-flat)}
body[data-quality="performance"] .mn-skin.selected,
body[data-quality="performance"] .mn-root .key-btn.listening{background:var(--mn-paint);box-shadow:none}
body[data-quality="performance"] .mn-root .key-btn{background:var(--mn-plate-flat);box-shadow:none}
body[data-quality="performance"] .mn-select-pill{
  background:
    linear-gradient(45deg,transparent 50%,var(--mn-bone) 50%) calc(100% - 1.45em) 55%/.5em .5em no-repeat,
    linear-gradient(135deg,var(--mn-bone) 50%,transparent 50%) calc(100% - 1em) 55%/.5em .5em no-repeat,
    var(--mn-plate-flat);
  box-shadow:none;
}
/* menus.css pinta #settingsMenu de verde en performance (!important): aquí el shell es solo una capa transparente */
body[data-quality="performance"] #settingsMenu.mn-shell{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body[data-quality="performance"] .mn-swatch{box-shadow:none}
body[data-quality="performance"] .mn-coin{background:var(--mn-paint)}
/* menus.css pinta #missionPanel de verde en performance: aquí el shell es solo una capa transparente */
body[data-quality="performance"] #missionPanel.mn-shell{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body[data-quality="performance"] .mn-panel::after{display:none}
body[data-quality="performance"] .mn-root,
body[data-quality="performance"] .mn-root *,
body[data-quality="performance"] .mn-root *::before,
body[data-quality="performance"] .mn-root *::after{animation:none!important;transition:none!important;mix-blend-mode:normal!important;text-shadow:none!important}
/* Menú principal en performance: sin brillo, sin sway ni blow, sin texturas, sin grano, sin canvas animado */
body[data-quality="performance"] .mn-screen{background:none}
body[data-quality="performance"] .mn-screen::before,
body[data-quality="performance"] .mn-screen::after{mix-blend-mode:normal}
body[data-quality="performance"] .mn-screen::before,
body[data-quality="performance"] .mn-screen::after,
body[data-quality="performance"] .mn-playwrap::before,
body[data-quality="performance"] .mn-fx{display:none}
body[data-quality="performance"] #mainMenu.mn-shell #menuBgCanvas{display:none}
body[data-quality="performance"] .mn-ttl h1{background:none;-webkit-text-fill-color:currentColor;color:var(--mn-bone);filter:none}
body[data-quality="performance"] .mn-rope,
body[data-quality="performance"] .mn-dang{background:#7a5c37;box-shadow:none}
body[data-quality="performance"] .mn-sub{color:var(--mn-bone)}

/* Fase 4: pantallas sobre el juego. Sin fundidos ni confeti en performance */
body[data-quality="performance"] .mn-over-fade{animation:none}
body[data-quality="performance"] .mn-flash{transition:none}
body[data-quality="performance"] .confetti-container{display:none!important}

/* ───────────── Movimiento reducido ───────────── */
@media (prefers-reduced-motion:reduce){
  .mn-root,.mn-root *,.mn-root *::before,.mn-root *::after{animation:none!important;transition:none!important}
  .mn-over-fade.active{animation:none}
  .mn-flash{transition:none}
  .confetti-container{display:none!important}
}

/* ═════════════ Fase 5A: aviso de rotar y avisos de primera vez ═════════════
   Aviso de rotar (#orientationWarning), consejo de retención (.mn-toast) y foco de primera vez (#ftueLayer).
   Todo con tokens --mn-* y en em (la escala la fija .mn-root).
   Los JS (js/progression.js) solo alternan clases (is-on / is-in / mn-hint) y escriben coordenadas calculadas
   (variables --mn-slot-*, --mn-sx/sy/srx/sry, --mn-tx/ty, --mn-ax/ay): ningún color ni sombra va inline. */

/* Pulso de pista, en tonos ocre. Va en inset: las tarjetas y el botón Jugar llevan clip-path y un brillo exterior se cortaría. */
@keyframes mn-hint-ring{
  0%,100%{box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35),inset 0 0 0 .16em rgba(201,151,43,.22),inset 0 0 .8em rgba(201,151,43,.10);filter:brightness(1)}
  50%{box-shadow:inset 0 .08em 0 rgba(255,220,180,.14),inset 0 -.2em 0 rgba(0,0,0,.35),inset 0 0 0 .16em rgba(201,151,43,.95),inset 0 0 1.5em rgba(201,151,43,.5);filter:brightness(1.1)}
}
/* Sobre pintura amarilla el anillo ocre no se vería: óxido */
@keyframes mn-hint-ring-paint{
  0%,100%{box-shadow:inset 0 .08em 0 rgba(255,240,190,.45),inset 0 0 0 .2em rgba(180,95,38,.22),inset 0 0 .9em rgba(180,95,38,.10);filter:brightness(1)}
  50%{box-shadow:inset 0 .08em 0 rgba(255,240,190,.45),inset 0 0 0 .2em rgba(180,95,38,.95),inset 0 0 1.6em rgba(180,95,38,.55);filter:brightness(1.12)}
}
.mn-hint{animation:mn-hint-ring 2s ease-in-out infinite}
.mn-hint-paint{animation-name:mn-hint-ring-paint}
/* El resplandor difuso detrás del botón Jugar (fuera del clip-path) se aviva mientras dura el foco */
@keyframes mn-glow-hint{0%,100%{opacity:.4}50%{opacity:.9}}
.mn-playwrap.mn-glow-hint::before{animation:mn-glow-hint 1.8s ease-in-out infinite}

/* ───────────── Aviso de rotar ─────────────
   display lo deciden menus.css (none) y responsive.css (flex en vertical ≤900px): aquí NO se fija.
   Por encima de todo, incluida la pantalla completa obligatoria (#fsGate, 100000) y el aviso de cookies. */
#orientationWarning{
  position:fixed;
  inset:0;
  z-index:100001;
  overflow:hidden;
  color:var(--mn-bone);
  background:
    radial-gradient(ellipse at 28% 18%,rgba(180,95,38,.16),transparent 62%),
    radial-gradient(ellipse at 85% 95%,rgba(0,0,0,.65),transparent 70%),
    var(--mn-bg);
}
#orientationWarning::before{content:"";position:absolute;inset:0;background:var(--mn-blotch);background-size:620px 430px;opacity:.26;pointer-events:none}
#orientationWarning::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--mn-grain);opacity:.5;mix-blend-mode:soft-light}
/* En vertical no hay altura de referencia (la escala de .mn-root saldría minúscula): se escala con el ancho */
#orientationWarning .mn-root{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:max(12px,min(4.2vw,2.4vh));
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
#orientationWarning .mn-rot-sign{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9em;
  width:min(88vw,24em);
  padding:2.7em 2em 2.2em;
  text-align:center;
  transform:rotate(-1.5deg);
}
/* Marco interior y agujeros, como el cartel del menú */
#orientationWarning .mn-rot-sign::before{content:"";position:absolute;inset:1.3em .7em .8em;border:.14em solid rgba(227,214,189,.38);pointer-events:none}
#orientationWarning .mn-rot-sign .mn-hole-r{left:auto;right:.5em}
#orientationWarning .mn-rot-phone{
  display:block;
  flex:none;
  width:6.4em;
  height:6.4em;
  transform-origin:50% 50%;
  animation:mn-rot-phone 3.6s ease-in-out infinite;
}
.mn-ph-body{fill:var(--mn-ink);stroke:var(--mn-bone);stroke-width:2.5}
.mn-ph-screen{fill:var(--mn-plate-lo)}
.mn-ph-rust{fill:var(--mn-rust)}
.mn-ph-line{fill:var(--mn-clay)}
.mn-ph-btn{fill:none;stroke:var(--mn-paint);stroke-width:1.6}
/* Vertical → horizontal (se queda así un momento) → vuelta suave */
@keyframes mn-rot-phone{0%,12%{transform:rotate(0)}42%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* h2 globales de responsive.css llevan !important: se vencen igual que .mn-over-title */
#orientationWarning .mn-rot-title{
  margin:0!important;
  font-family:var(--mn-display);
  font-weight:400!important;
  font-size:2em!important;
  line-height:1.1;
  letter-spacing:.05em!important;
  text-transform:uppercase;
  text-wrap:balance;
  overflow-wrap:anywhere;
  background:var(--mn-chips),linear-gradient(180deg,#f0e6cf,#cbbd9c);
  background-size:200px 120px,auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .06em 0 rgba(0,0,0,.55));
}
#orientationWarning .mn-rot-text{margin:0;font-family:var(--mn-type);font-size:1em;line-height:1.4;letter-spacing:.02em;color:var(--mn-bone);text-wrap:balance}

/* ───────────── Consejo de retención (nota rústica) ─────────────
   Vive dentro de .mn-screen: hereda la escala y se oculta con el menú. Su sitio lo calcula el JS (--mn-slot-*); estos
   valores son solo el respaldo si no se pudo medir. */
.mn-toast{
  position:absolute;
  z-index:3;
  left:var(--mn-slot-l,calc(.9em + env(safe-area-inset-left,0px)));
  bottom:var(--mn-slot-b,5em);
  width:min(var(--mn-slot-w,18em),18em);
  max-width:calc(100% - 1.8em);
  padding:.4em 1.2em .45em .7em;
  font-family:var(--mn-type);
  font-size:max(11px,.72em);
  font-weight:400;
  line-height:1.3;
  text-align:left;
  color:rgba(227,214,189,.78);
  cursor:pointer;
  border-left:2px solid var(--mn-rust);
  opacity:0;
  transform:translateY(.8em);
  transition:opacity .4s ease,transform .4s ease;
}
.mn-toast.is-in{opacity:.88;transform:none}
.mn-toast::before{content:"";position:absolute;top:.5em;right:.55em;width:.45em;height:.45em;border-radius:50%;background:#0b0907;box-shadow:0 0 0 .1em #7a5a3a}
.mn-toast-text{margin:0;overflow-wrap:anywhere}
/* Pantallas muy bajas: aún menos aire */
.mn-toast.mn-tight{padding:.3em 1.1em .35em .6em;line-height:1.25}

/* ───────────── Foco de primera vez ───────────── */
.mn-ftue{position:fixed;inset:0;z-index:10500;pointer-events:none;display:none}
.mn-ftue.is-on{display:block}
.mn-ftue-dim{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(ellipse calc(var(--mn-srx,0px) * 2) calc(var(--mn-sry,0px) * 2) at var(--mn-sx,50%) var(--mn-sy,50%),
    transparent 0%,
    transparent 60%,
    rgba(14,12,9,.55) 80%,
    rgba(14,12,9,.84) 100%);
}
.mn-ftue.is-in .mn-ftue-dim{opacity:1}
.mn-ftue-tip{
  position:absolute;
  left:var(--mn-tx,0);
  top:var(--mn-ty,0);
  width:max-content;
  max-width:calc(100% - 1.8em);
  padding:.65em 1.2em .75em;
  font-family:var(--mn-stencil);
  font-size:max(12px,1.05em);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  opacity:0;
  transition:opacity .35s ease;
  animation:mn-hint-ring 1.8s ease-in-out infinite;
}
.mn-ftue-arrow{
  position:absolute;
  left:var(--mn-ax,0);
  top:var(--mn-ay,0);
  width:1.3em;
  height:.8em;
  margin-left:-.65em;
  opacity:0;
  transition:opacity .35s ease;
  background:linear-gradient(180deg,var(--mn-paint-hi),var(--mn-paint-lo));
  clip-path:polygon(0 0,100% 0,50% 100%);
  animation:mn-arrow-bob 1.2s ease-in-out infinite;
}
@keyframes mn-arrow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(.25em)}}
.mn-ftue.is-in .mn-ftue-tip,
.mn-ftue.is-in .mn-ftue-arrow{opacity:1;transition-delay:.3s}

/* ───────────── Calidad "performance" y movimiento reducido ─────────────
   El pulso se apaga (regla global de arriba), así que la pista queda como un anillo fijo. El móvil del aviso de rotar
   se queda ya en horizontal. */
body[data-quality="performance"] .mn-hint{box-shadow:inset 0 0 0 .16em var(--mn-paint)}
body[data-quality="performance"] .mn-hint-paint{box-shadow:inset 0 0 0 .2em var(--mn-rust)}
body[data-quality="performance"] #orientationWarning{background:var(--mn-bg)}
body[data-quality="performance"] #orientationWarning::before,
body[data-quality="performance"] #orientationWarning::after{display:none}
body[data-quality="performance"] #orientationWarning .mn-rot-phone,
body[data-quality="performance"] #orientationWarning .mn-rot-title{animation:none;transition:none}
body[data-quality="performance"] #orientationWarning .mn-rot-phone{transform:rotate(-90deg)}
body[data-quality="performance"] #orientationWarning .mn-rot-title{background:none;-webkit-text-fill-color:currentColor;color:var(--mn-bone);filter:none}
body[data-quality="performance"] .mn-toast,
body[data-quality="performance"] .mn-ftue-tip,
body[data-quality="performance"] .mn-ftue-arrow{box-shadow:none}
body[data-quality="performance"] .mn-ftue-dim{transition:none}
@media (prefers-reduced-motion:reduce){
  #orientationWarning .mn-rot-phone{animation:none;transform:rotate(-90deg)}
  .mn-hint{box-shadow:inset 0 0 0 .16em var(--mn-paint)}
  .mn-hint-paint{box-shadow:inset 0 0 0 .2em var(--mn-rust)}
  .mn-ftue-dim{transition:none}
}