/* PokéMerge — pantalla de partida (js/ui/match.js).
   Vertical: barra arriba, tablero y controles abajo.
   Horizontal: tablero a la izquierda y panel a la derecha. */

.mt {
  --mt-ink: var(--ink, #fff);
  --mt-muted: var(--muted, #b9cbf0);
  --mt-edge: var(--edge, #f4f8ff);
  --mt-edge-in: var(--edge-in, #5b83d6);
  --mt-edge-out: var(--edge-out, #0b1838);
  --mt-gold: var(--gold, #ffd23f);
  --mt-red: var(--red, #ff5f6d);
  --mt-green: var(--green, #5fe08a);
  --mt-panel: linear-gradient(180deg, #2c58b2 0%, #1c3d8c 100%);
  --mt-well: rgba(6, 14, 38, 0.55);
  --mt-out: 0 2px 0 #0b1838, 2px 0 0 #0b1838, -2px 0 0 #0b1838, 0 -2px 0 #0b1838,
    2px 2px 0 #0b1838, -2px 2px 0 #0b1838, 2px -2px 0 #0b1838, -2px -2px 0 #0b1838, 0 3px 0 rgba(0, 0, 0, 0.35);
  --mt-out-sm: 0 1px 0 #0b1838, 1px 0 0 #0b1838, -1px 0 0 #0b1838, 0 -1px 0 #0b1838, 0 2px 0 rgba(0, 0, 0, 0.4);

  position: absolute;          /* llena la pantalla del router (o el viewport) */
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'top' 'board' 'ctrl';
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  overflow: hidden;
  background: #0b1838;
  color: var(--mt-ink);
  font-family: var(--font, 'Pixelify', 'Trebuchet MS', system-ui, sans-serif);
  font-size: clamp(12px, min(2.15vh, 3.6vw), 20px);
  line-height: 1.15;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mt[data-orient='landscape'] {
  grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 380px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'board top' 'board ctrl';
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mt button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mt [hidden] { display: none !important; }

.mt-ico { display: inline-flex; width: 1.1em; height: 1.1em; flex: none; }
.mt-ico svg { width: 100%; height: 100%; display: block; }

/* ---------- Tablero ---------- */

/* El canvas ocupa todo el sitio: en vertical el renderer pega el tablero
   abajo (girado 90° si así gana sitio) y el decorado de la región rellena el
   hueco de arriba, donde van avisos y ficha. Mientras no pinta, el fondo de
   la región. */
.mt-board {
  grid-area: board;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--board-bg, #0b1838);
}
.mt-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
}
.mt-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 4em 1em rgba(255, 40, 60, 0.75);
}
.mt-vignette.is-on { animation: mt-vig 0.7s ease-out; }
@keyframes mt-vig { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Barra superior ---------- */

.mt-top {
  grid-area: top;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em 0.55em;
  padding: 0.3em 0.55em;
  background: var(--mt-panel);
  border-bottom: 3px solid var(--mt-edge-out);
  box-shadow: inset 0 -2px 0 var(--mt-edge-in);
  z-index: 2;
}
.mt[data-orient='landscape'] .mt-top {
  border-bottom: 0;
  border-left: 3px solid var(--mt-edge-out);
  box-shadow: inset 2px 0 0 var(--mt-edge-in);
  padding: 0.45em 0.55em 0.2em;
}

.mt-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mt-stat small {
  color: var(--mt-muted);
  font-size: max(10px, 0.68em);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mt-stat b {
  font-size: 1.2em;
  text-shadow: var(--mt-out-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mt-wave b { color: var(--mt-gold); }

.mt-boss { min-width: 3.6em; }
.mt-bossbar {
  display: none;
  height: 0.42em;
  margin-top: 0.12em;
  border: 1px solid var(--mt-edge-out);
  border-radius: 0.2em;
  background: #2a1d3a;
  overflow: hidden;
}
.mt-bossbar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ff8a94, #e8414f);
  transition: width 0.2s;
}
.mt-boss.is-boss { flex: 1 1 5em; max-width: 12em; }
.mt-boss.is-boss small { color: #ff8a94; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.mt-boss.is-boss b { display: none; }
.mt-boss.is-boss .mt-bossbar { display: block; }
.mt-boss.is-soon b { color: var(--mt-red); animation: mt-blink 0.5s steps(2) infinite; }
@keyframes mt-blink { 50% { opacity: 0.35; } }

.mt-lives { display: flex; gap: 0.08em; }
.mt-heart { width: 1.15em; height: 1.15em; color: #ff5f6d; }
.mt-heart.is-empty { color: #34406a; }
.mt-heart.is-lost { animation: mt-heartlost 0.7s ease-out; }
@keyframes mt-heartlost {
  0% { transform: scale(1.6); color: #fff; }
  40% { transform: scale(0.8) rotate(-15deg); }
  100% { transform: none; }
}

.mt-weather {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.82em;
  color: var(--mt-muted);
  white-space: nowrap;
}
.mt-weather .mt-ico { width: 1.35em; height: 1.35em; }
.mt-weather.is-clear span:not(.mt-ico) { opacity: 0.7; }

.mt-topbtns { display: flex; gap: 0.3em; margin-left: auto; }
.mt-btn {
  position: relative;
  min-width: 2.3em;
  height: 2.1em;
  padding: 0 0.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mt-edge-out);
  border-radius: 0.5em;
  background: linear-gradient(180deg, #3d6fd0, #1c3d8c);
  box-shadow: inset 0 0 0 1px var(--mt-edge-in), 0 0.15em 0 var(--mt-edge-out);
  font-weight: 700;
  text-shadow: var(--mt-out-sm);
}
.mt-btn:active { transform: translateY(0.1em); box-shadow: inset 0 0 0 1px var(--mt-edge-in); }
.mt-btn .mt-ico { width: 1em; height: 1em; }
.mt-speed.is-fast { background: linear-gradient(180deg, #ffe066, #f2a91b); color: #3a2400; text-shadow: none; }
/* A ×1 mientras el jefe apunta (se ha elegido ×2 o ×3). */
.mt-speed.is-held { background: linear-gradient(180deg, #ff8a94, #d63a4a); animation: mt-blink 0.5s steps(2) infinite; }

@media (max-width: 479px) {
  .mt[data-orient='portrait'] .mt-weather span:not(.mt-ico) { display: none; }
  .mt[data-orient='portrait'] .mt-top { gap: 0.25em 0.4em; padding: 0.3em 0.4em; }
}

/* ---------- Controles ---------- */

.mt-ctrl {
  grid-area: ctrl;
  display: flex;
  flex-direction: column;
  gap: 0.42em;
  min-height: 0;
  padding: 0.45em 0.5em calc(0.45em + env(safe-area-inset-bottom, 0px));
  background: var(--mt-panel);
  border-top: 3px solid var(--mt-edge-out);
  box-shadow: inset 0 2px 0 var(--mt-edge-in);
  z-index: 2;
}
.mt[data-orient='landscape'] .mt-ctrl {
  border-top: 0;
  border-left: 3px solid var(--mt-edge-out);
  box-shadow: inset 2px 0 0 var(--mt-edge-in);
  padding-top: 0.25em;
  overflow-y: auto;
  scrollbar-width: none;
}
.mt[data-orient='landscape'] .mt-ctrl::-webkit-scrollbar { display: none; }

.mt-manarow { display: flex; gap: 0.45em; align-items: stretch; }
.mt-mana {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-width: 5.2em;
  padding: 0.15em 0.6em 0.15em 0.4em;
  border-radius: 0.6em;
  background: var(--mt-well);
  box-shadow: inset 0 0 0 2px rgba(91, 131, 214, 0.6);
}
.mt-mana-ico { width: 1.6em; height: 1.6em; }
.mt-mana b {
  font-size: 1.7em;
  color: #bfe6ff;
  text-shadow: var(--mt-out);
  font-variant-numeric: tabular-nums;
}
.mt-mana.is-bump b { animation: mt-bump 0.45s ease-out; }
@keyframes mt-bump { 30% { transform: scale(1.25); color: #fff; } }

.mt-summon {
  flex: 1;
  min-height: 2.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  border: 3px solid var(--mt-edge-out);
  border-radius: 0.7em;
  background: linear-gradient(180deg, #ffe066 0%, #ffd23f 45%, #f2a91b 100%);
  box-shadow: inset 0 0 0 2px #fff3b0, inset 0 -0.3em 0 rgba(160, 90, 0, 0.35), 0 0.2em 0 var(--mt-edge-out);
  color: #3a2400;
}
.mt-summon-lbl { font-weight: 700; font-size: 1.25em; letter-spacing: 0.06em; }
.mt-summon small { display: inline-flex; align-items: center; gap: 0.2em; font-weight: 700; font-size: 0.9em; }
.mt-cost-ico { width: 1em; height: 1em; }
.mt-summon:active { transform: translateY(0.12em); box-shadow: inset 0 0 0 2px #fff3b0, inset 0 -0.2em 0 rgba(160, 90, 0, 0.35); }
.mt-summon.is-off {
  background: linear-gradient(180deg, #8f9bb8, #5e6a88);
  box-shadow: inset 0 0 0 2px #b9c3dc, 0 0.2em 0 var(--mt-edge-out);
  color: #1f2840;
}

/* Cartas: 5 columnas en vertical. */
.mt-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35em;
}
.mt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  min-width: 0;
  padding: 0.3em 0.2em 0.25em;
  border-radius: 0.6em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)), var(--mt-well);
  box-shadow: inset 0 0 0 2px var(--tc, #5b83d6), inset 0 0.25em 0 rgba(255, 255, 255, 0.08);
}
.mt-card.is-upg { box-shadow: inset 0 0 0 2px var(--mt-gold), inset 0 0.25em 0 rgba(255, 255, 255, 0.08); }
.mt-card-pic {
  width: 100%;
  height: 2.9em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mt-card-pic canvas {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}
.mt-card-meta { display: contents; }
.mt-card-name { display: none; }
.mt-card-lv {
  position: absolute;
  top: 0.2em;
  left: 0.3em;
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  font-size: max(10px, 0.72em);
  font-weight: 700;
  color: var(--mt-gold);
  text-shadow: var(--mt-out-sm);
}
.mt-lv-ico { width: 0.95em; height: 0.95em; color: var(--mt-gold); }
.mt-card-key {
  position: absolute;
  top: 0.2em;
  right: 0.35em;
  font-size: 0.62em;
  color: var(--mt-muted);
  opacity: 0.8;
}
@media (hover: none) { .mt-card-key { display: none; } }

.mt-up {
  position: relative;
  width: 100%;
  height: 1.95em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  border: 2px solid var(--mt-edge-out);
  border-radius: 0.45em;
  background: linear-gradient(180deg, #7fe0a0, #2fa860);
  box-shadow: inset 0 0 0 1px #c8ffd8, 0 0.12em 0 var(--mt-edge-out);
  font-weight: 700;
  font-size: 0.88em;
  color: #fff;
  text-shadow: var(--mt-out-sm);
  white-space: nowrap;
  padding: 0 0.2em;
}
.mt-up-ico { width: 0.95em; height: 0.95em; color: #fff; }
.mt-up:active { transform: translateY(0.1em); }
.mt-up.is-off { background: linear-gradient(180deg, #6f7a96, #4a5470); box-shadow: inset 0 0 0 1px #9aa4bf, 0 0.12em 0 var(--mt-edge-out); color: #d8deec; }
.mt-up.is-off .mt-up-ico { color: #c0c8da; }
.mt-up.is-max { background: linear-gradient(180deg, #ffe066, #f2a91b); color: #3a2400; text-shadow: none; }
.mt-up.is-max .mt-up-ico { display: none; }

/* Cartas en filas en horizontal. */
.mt[data-orient='landscape'] .mt-cards { grid-template-columns: minmax(0, 1fr); gap: 0.3em; }
.mt[data-orient='landscape'] .mt-card {
  flex-direction: row;
  gap: 0.45em;
  padding: 0.22em 0.35em 0.22em 0.3em;
  min-height: clamp(2.6em, 7.5vh, 4em);
}
.mt[data-orient='landscape'] .mt-card-pic { width: 2.5em; height: 2.3em; flex: none; align-items: center; }
.mt[data-orient='landscape'] .mt-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.mt[data-orient='landscape'] .mt-card-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9em;
}
.mt[data-orient='landscape'] .mt-card-lv { position: static; }
.mt[data-orient='landscape'] .mt-up { width: auto; min-width: 4.4em; flex: none; }
.mt[data-orient='landscape'] .mt-card-key { top: auto; bottom: 0.15em; left: 0.3em; right: auto; }

/* Sinergias: chips compactos (nombre sólo en los activos). En vertical, una
   fila; lo que no cabe va tras un «+N» (match.js). En horizontal, en varias. */
.mt-syn {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3em;
  overflow: hidden;
  min-height: 1.85em;
  align-items: center;
}
/* Sin recorte en vertical: la zona de toque de los chips puede sobresalir. */
@supports (overflow: clip) {
  .mt-syn { overflow-x: clip; overflow-y: visible; }
}
.mt[data-orient='landscape'] .mt-syn { flex-wrap: wrap; overflow: visible; align-content: flex-start; }
.mt-syn-empty { font-size: 0.75em; color: var(--mt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chip:not(.is-on) .mt-chip-name { display: none; }
.mt-chip-more { --tc: var(--mt-edge-in); font-weight: 700; color: var(--mt-ink); opacity: 1; }
.mt-tip-syn { list-style: none; padding-left: 0 !important; }
.mt-tip-syn .mt-chip-dot { display: inline-block; vertical-align: middle; }
.mt-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  height: 1.75em;
  padding: 0 0.55em 0 0.4em;
  border: 2px solid var(--tc, #888);
  border-radius: 1em;
  background: rgba(6, 14, 38, 0.55);
  font-size: 0.82em;
  opacity: 0.75;
}
.mt-chip b { font-size: 0.9em; color: var(--mt-muted); }
.mt-chip-dot { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--tc, #888); box-shadow: 0 0 0 1px #0b1838; }
.mt-chip.is-on {
  opacity: 1;
  background: var(--tc, #888);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 80%, #fff), color-mix(in srgb, var(--tc) 70%, #000));
  text-shadow: var(--mt-out-sm);
}
.mt-chip.is-on b { color: #fff; }

/* ---------- Ficha de un Pokémon ---------- */

.mt-panel,
.mt-info,
.mt-tip {
  background: var(--mt-panel);
  border: 3px solid var(--mt-edge);
  border-radius: 0.8em;
  box-shadow: 0 0 0 3px var(--mt-edge-out), inset 0 0 0 2px var(--mt-edge-in), 0 0.4em 0 rgba(0, 0, 0, 0.35);
}

.mt-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(23em, calc(100% - 1.2em));
  max-height: calc(60% - 0.6em);
  overflow-y: auto;
  padding: 0.6em 0.7em 0.7em;
  z-index: 4;
  font-size: 0.92em;
  animation: mt-pop 0.18s ease-out;
}
.mt-info[data-side='top'] { top: 0.6em; }
.mt-info[data-side='bottom'] { bottom: 0.6em; }
/* Al lado de la casilla (horizontal y móviles cortos): match.js pone left/right, top, ancho y alto. */
.mt-info[data-side='left'],
.mt-info[data-side='right'] { transform: none; animation-name: mt-pop-side; }
@keyframes mt-pop { from { transform: translateX(-50%) scale(0.92); opacity: 0; } }
@keyframes mt-pop-side { from { transform: scale(0.92); opacity: 0; } }
.mt-info-x {
  position: absolute;
  top: 0.35em;
  right: 0.35em;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  border: 2px solid var(--mt-edge-out);
  border-radius: 0.4em;
  background: #15306f;
}
.mt-info-x .mt-ico { width: 0.9em; height: 0.9em; }
.mt-info-head { display: flex; gap: 0.6em; align-items: center; padding-right: 2em; }
.mt-info-pic {
  width: 3.4em;
  height: 3.4em;
  object-fit: contain;
  image-rendering: pixelated;
  flex: none;
  border-radius: 0.5em;
  background: var(--mt-well);
  padding: 0.2em;
}
.mt-info-ttl { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.mt-info-ttl > b { font-size: 1.25em; text-shadow: var(--mt-out-sm); }
.mt-info-rank { color: var(--mt-gold); font-size: 0.82em; }
.mt-types { display: flex; gap: 0.25em; flex-wrap: wrap; }
.mt-type {
  display: inline-block;
  padding: 0.08em 0.45em;
  border-radius: 0.4em;
  background: var(--tc, #888);
  font-size: 0.75em;
  font-weight: 700;
  text-shadow: var(--mt-out-sm);
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.mt-info-move {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-top: 0.5em;
}
.mt-info-move > b { color: var(--mt-gold); }
.mt-kind { font-size: 0.75em; color: var(--mt-muted); }
.mt-info-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3em;
  margin-top: 0.45em;
}
.mt-info-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2em 0.1em;
  border-radius: 0.4em;
  background: var(--mt-well);
}
.mt-info-stats small { font-size: max(10px, 0.68em); color: var(--mt-muted); white-space: nowrap; }
.mt-info-stats b { font-size: 1.05em; }
.mt-info-desc { margin: 0.45em 0 0; font-size: 0.85em; color: #e2ecff; line-height: 1.25; }
.mt-info-ult { margin: 0.35em 0 0; font-size: 0.82em; }
.mt-info-ult small { color: var(--mt-muted); }
.mt-info-ult b { color: #ff9a5c; }
.mt-info-buffs {
  margin: 0.4em 0 0;
  padding: 0.35em 0.5em 0.35em 1.3em;
  border-radius: 0.4em;
  background: var(--mt-well);
  font-size: 0.78em;
  line-height: 1.3;
  color: #d8e6ff;
}

/* Aviso / tooltip sobre el tablero. */
.mt-tip {
  position: absolute;
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: min(22em, calc(100% - 1em));
  padding: 0.5em 0.65em;
  font-size: 0.85em;
  animation: mt-tipin 0.15s ease-out;
}
@keyframes mt-tipin { from { opacity: 0; } }
.mt-tip > b { display: block; font-size: 1.05em; text-shadow: var(--mt-out-sm); }
.mt-tip > small { display: block; color: var(--mt-muted); font-size: 0.8em; margin-top: 0.1em; }
.mt-tip ul { margin: 0.35em 0 0; padding-left: 1.1em; line-height: 1.3; }
.mt-tip li { color: var(--mt-muted); }
.mt-tip li.is-on { color: #fff; font-weight: 700; }
.mt-tip-short { font-weight: 700; color: #ffd0d4; padding: 0.35em 0.7em; }

/* ---------- Banners ---------- */

/* match.js pone `top`: en el hueco de encima del tablero (centrado en él) o
   justo debajo de la franja de la barra del jefe. */
.mt-banners {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  padding: 0 0.6em;
}
.mt-banners[data-place='band'] { transform: translateY(-50%); }
.mt-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  max-width: 100%;
  padding: 0.35em 1.3em 0.45em;
  text-align: center;
  border-radius: 0.6em;
  background: linear-gradient(90deg, rgba(11, 24, 56, 0) 0%, rgba(11, 24, 56, 0.82) 18%, rgba(11, 24, 56, 0.82) 82%, rgba(11, 24, 56, 0) 100%);
  animation: mt-bannerin 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.mt-banner strong {
  font-size: 1.7em;
  text-shadow: var(--mt-out);
  color: #fff;
  letter-spacing: 0.02em;
}
.mt-banner span { font-size: 0.85em; color: var(--mt-muted); text-shadow: var(--mt-out-sm); }
.mt-banner.is-out { animation: mt-bannerout 0.26s ease-in forwards; }
.mt-banner-wave strong { color: var(--mt-gold); font-size: 1.45em; }
.mt-banner-boss strong { color: #ff5f6d; font-size: 1.9em; animation: mt-shakey 0.35s infinite; }
.mt-banner-win strong { color: var(--mt-gold); }
.mt-banner-bad strong { color: #ff8a94; }
.mt-banner-syn strong { color: #bfe6ff; font-size: 1.35em; }
.mt-banner-weather strong { color: #9fe8ff; font-size: 1.35em; }
@keyframes mt-bannerin { from { transform: scale(0.6); opacity: 0; } }
@keyframes mt-bannerout { to { transform: translateY(-0.6em); opacity: 0; } }
@keyframes mt-shakey {
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.mt .is-deny { animation: mt-deny 0.35s; }
@keyframes mt-deny {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---------- Capas: carga, pausa, fin ---------- */

.mt-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1em;
  background: rgba(5, 10, 30, 0.74);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: auto;
}

.mt-loading {
  background: radial-gradient(120% 80% at 50% 0%, #2c58b2 0%, #0b1838 70%);
  align-content: center;
  gap: 0.7em;
  transition: opacity 0.35s;
}
.mt-loading.is-out { opacity: 0; pointer-events: none; }
.mt-loading h2 { font-size: 1.8em; color: var(--accent, var(--mt-gold)); text-shadow: var(--mt-out); margin: 0; }
.mt-load-txt { margin: 0; color: var(--mt-muted); }
.mt-loadbar {
  width: min(16em, 70vw);
  height: 0.75em;
  border: 2px solid var(--mt-edge);
  border-radius: 0.4em;
  background: #0b1838;
  box-shadow: 0 0 0 2px var(--mt-edge-out);
  overflow: hidden;
}
.mt-loadbar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #ffe066, #f2a91b);
  transition: width 0.2s;
}
.mt-loadball {
  position: relative;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  border: 0.2em solid #16142a;
  background: linear-gradient(180deg, #e8414f 0 45%, #16142a 45% 55%, #f4f4f8 55%);
  animation: mt-spin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.mt-loadball::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f4f4f8;
  box-shadow: 0 0 0 0.2em #16142a;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }

.mt-panel {
  width: min(22em, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  padding: 1em 1.1em 1.1em;
}
.mt-panel h2 {
  margin: 0;
  text-align: center;
  font-size: 1.6em;
  color: var(--mt-gold);
  text-shadow: var(--mt-out);
}
.mt-big {
  min-height: 2.6em;
  padding: 0.2em 1em;
  border: 2px solid var(--mt-edge-out);
  border-radius: 0.65em;
  font-weight: 700;
  font-size: 1.05em;
  box-shadow: inset 0 -0.25em 0 rgba(0, 0, 0, 0.22), 0 0.2em 0 var(--mt-edge-out);
}
.mt-big:active { transform: translateY(0.12em); box-shadow: inset 0 -0.15em 0 rgba(0, 0, 0, 0.22); }
.mt-gold { background: linear-gradient(180deg, #ffe066, #f2a91b); color: #3a2400; }
.mt-red { background: linear-gradient(180deg, #ff7d89, #d63a4a); color: #fff; text-shadow: var(--mt-out-sm); }
.mt-dark { background: linear-gradient(180deg, #2c58b2, #15306f); color: #fff; text-shadow: var(--mt-out-sm); }

.mt-opts {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.6em 0.7em;
  border-radius: 0.6em;
  background: var(--mt-well);
}
.mt-range { display: flex; flex-direction: column; gap: 0.25em; }
.mt-range-top { display: flex; justify-content: space-between; font-size: 0.9em; }
.mt-range-top b { color: var(--mt-gold); }
.mt-range input { width: 100%; accent-color: #ffd23f; height: 1.4em; }
.mt-toggle { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; cursor: pointer; }
.mt-toggle input { width: 1.2em; height: 1.2em; accent-color: #ffd23f; }
.mt-confirm { display: flex; flex-direction: column; gap: 0.45em; }
.mt-confirm p { margin: 0; text-align: center; color: #ffd0d4; font-size: 0.9em; }
.mt-keys { margin: 0; text-align: center; font-size: 0.72em; color: var(--mt-muted); }
@media (hover: none) { .mt-keys { display: none; } }

.mt-endpanel { align-items: stretch; text-align: center; }
.mt-end-region { margin: -0.4em 0 0; color: var(--mt-muted); }
.mt-end-wave { display: flex; flex-direction: column; align-items: center; }
.mt-end-wave small { color: var(--mt-muted); }
.mt-end-wave b { font-size: 3.2em; color: var(--mt-gold); text-shadow: var(--mt-out); line-height: 1.05; }
.mt-end-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35em; }
.mt-end-stats div {
  display: flex;
  flex-direction: column;
  padding: 0.3em;
  border-radius: 0.45em;
  background: var(--mt-well);
}
.mt-end-stats small { color: var(--mt-muted); font-size: 0.75em; }
.mt-end-stats b { font-size: 1.15em; }
.mt-end-caps small { color: var(--mt-muted); font-size: 0.8em; }
.mt-end-caprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em; margin-top: 0.2em; }
.mt-end-caprow canvas { height: 2.6em; width: auto; image-rendering: pixelated; }

/* Táctil: zona de toque de unos 44 px sin agrandar el dibujo. */
@media (pointer: coarse) {
  .mt-btn::after,
  .mt-up::after,
  .mt-chip::after,
  .mt-info-x::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .mt-up::after { width: 100%; }
  .mt-chip::after { width: calc(100% + 0.3em); }
}

@media (prefers-reduced-motion: reduce) {
  .mt-banner-boss strong, .mt-boss.is-soon b, .mt-speed.is-held { animation: none; }
}