/* =========================================================================
   MODOS DE JUEGO
   Pantalla de modos, tarjetas, bendiciones de expedición, franja de modo del
   HUD y la niebla. Todo lo que introdujo `config/modos.js`.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TARJETA DE MODO
   Cada tarjeta lleva su color en `--mc` y lo usa en el borde, el icono y el
   halo. Es lo que permite que quince tarjetas con la misma maquetación se
   distingan de un vistazo sin dibujar quince fondos distintos.
   ------------------------------------------------------------------------- */
.modo-card{
  position:relative; margin:0 0 9px;
  padding:11px 12px 10px;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(18,24,44,.94), rgba(10,14,28,.92));
  border:1px solid var(--stroke);
  border-left:3px solid var(--mc);
  overflow:hidden;
}
/* Halo del color del modo, muy tenue: da identidad sin competir con el texto. */
.modo-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mc) 16%, transparent), transparent 62%);
}
.modo-card.destacada{
  border-color:var(--mc);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 34%, transparent),
             0 6px 22px color-mix(in srgb, var(--mc) 22%, transparent);
}
/* Un barrido lento sólo en la destacada: marca "esto es lo de hoy" sin ruido. */
.modo-card.destacada::after{
  content:""; position:absolute; top:0; left:-55%; width:32%; height:100%;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--mc) 26%, transparent), transparent);
  transform:skewX(-20deg); animation:mcSheen 4.2s ease-in-out infinite;
  pointer-events:none;
}
/* 183% del padre sobre un elemento del 32% = 571,88% de su ancho. */
@keyframes mcSheen{
  0%,74%{ transform:translateX(0) skewX(-20deg) }
  100%  { transform:translateX(571.88%) skewX(-20deg) }
}
.modo-card.bloqueada{ opacity:.55; }
.modo-card.bloqueada::after{ display:none; }

.mc-top{ position:relative; display:flex; align-items:center; gap:9px; }
.mc-ico{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:17px; color:var(--mc);
  background:color-mix(in srgb, var(--mc) 15%, rgba(5,7,15,.7));
  border:1px solid color-mix(in srgb, var(--mc) 38%, transparent);
}
.mc-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.mc-txt b{ font-size:14px; letter-spacing:.3px; }
.mc-txt span{
  font-size:11px; color:var(--tx-lo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mc-tag{
  flex:0 0 auto; font-size:9px; font-weight:900; letter-spacing:.9px;
  padding:3px 7px; border-radius:99px; text-transform:uppercase;
  color:var(--mc); background:color-mix(in srgb, var(--mc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--mc) 42%, transparent);
}
.mc-desc{
  position:relative; margin:8px 0 0;
  font-size:11.5px; line-height:1.42; color:var(--tx-mid);
}
.mc-pie{
  position:relative; margin-top:9px;
  display:flex; align-items:center; justify-content:flex-end; gap:7px;
}
.mc-premio, .mc-stats{
  position:relative; margin-top:7px; display:flex; flex-wrap:wrap; gap:5px 12px;
  font-size:11px; color:var(--tx-mid);
}
.mc-stats b{ color:var(--tx-hi); }

/* Chip de intentos. `gastado` es la lectura de "hoy ya no". */
.mchip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:99px;
  background:rgba(10,14,28,.8); border:1px solid var(--stroke); color:var(--tx-mid);
}
.mchip.gastado{ color:var(--tx-lo); border-color:transparent; background:rgba(255,255,255,.05); }

/* Multiplicadores de la zona del día: el dato que hace entrar. */
.zmuls{ position:relative; display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.zmul{
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:900; letter-spacing:.4px;
  padding:4px 10px; border-radius:9px; color:var(--mc);
  background:color-mix(in srgb, var(--mc) 13%, rgba(5,7,15,.6));
  border:1px solid color-mix(in srgb, var(--mc) 40%, transparent);
}

/* Rejilla de fases de Pesadilla. */
.pes-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:8px; }

/* -------------------------------------------------------------------------
   VARIANTES DENTRO DE LA CAMPAÑA
   Una de cada tres fases se juega con otra regla (ver `varianteDeFase`). Tiene
   que verse en la lista ANTES de entrar, o el jugador descubre que le han
   cambiado las normas cuando ya ha gastado la energía.
   ------------------------------------------------------------------------- */
.stage-row.con-variante{
  border-left:3px solid var(--mc);
  background:linear-gradient(90deg, color-mix(in srgb, var(--mc) 11%, transparent), transparent 42%);
}
.fase-variante{
  display:block; font-size:10px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; margin-top:1px;
}
.fase-variante .ic{ width:12px; height:12px; vertical-align:-2px; }

/* Cartel de la fase actual, encima del botón de asalto. */
.fase-aviso{
  display:flex; align-items:center; gap:9px;
  margin:10px 0 2px; padding:9px 11px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--mc) 13%, rgba(5,7,15,.55));
  border:1px solid color-mix(in srgb, var(--mc) 45%, transparent);
}
.fase-aviso .fa-ico{
  flex:0 0 28px; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; color:var(--mc);
  background:rgba(5,7,15,.55); border:1px solid color-mix(in srgb, var(--mc) 40%, transparent);
}
.fase-aviso .fa-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.fase-aviso .fa-txt b{ font-size:12.5px; color:var(--mc); letter-spacing:.4px; }
.fase-aviso .fa-txt span{ font-size:11px; color:var(--tx-mid); line-height:1.35; }

/* -------------------------------------------------------------------------
   BENDICIONES DE EXPEDICIÓN
   Es el momento dulce del modo, así que las tres cartas ocupan la pantalla y
   entran escalonadas: la elección tiene que sentirse como un premio, no como
   un desplegable.
   ------------------------------------------------------------------------- */
.bend-list{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.bend-card{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:var(--r-lg); cursor:pointer;
  background:linear-gradient(150deg, rgba(20,26,48,.96), rgba(10,14,28,.94));
  border:1px solid var(--stroke);
  transition:transform var(--t-fast) var(--ease-back), border-color var(--t-fast);
  animation:bendIn .34s var(--ease-back) backwards;
}
.bend-list .bend-card:nth-child(2){ animation-delay:.07s }
.bend-list .bend-card:nth-child(3){ animation-delay:.14s }
@keyframes bendIn{ from{ opacity:0; transform:translateY(14px) scale(.96) } }
.bend-card:active{ transform:scale(.97); }
.bend-card.comun{ border-left:3px solid #7C8AA8; }
.bend-card.rara{
  border-left:3px solid #55E6FF;
  box-shadow:0 0 0 1px rgba(85,230,255,.22), 0 4px 18px rgba(85,230,255,.14);
}
/* La épica late: es la que quieres que el ojo encuentre primero. */
.bend-card.epica{
  border-left:3px solid #C4A6FF;
  box-shadow:0 0 0 1px rgba(196,166,255,.3), 0 6px 24px rgba(196,166,255,.22);
  animation:bendIn .34s var(--ease-back) backwards, bendEpica 2.4s ease-in-out infinite .4s;
}
@keyframes bendEpica{
  0%,100%{ box-shadow:0 0 0 1px rgba(196,166,255,.3), 0 6px 24px rgba(196,166,255,.20) }
  50%    { box-shadow:0 0 0 2px rgba(196,166,255,.5), 0 8px 32px rgba(196,166,255,.36) }
}
.bend-card .bico{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:17px;
  background:rgba(5,7,15,.7); border:1px solid currentColor;
}
.bend-card .btxt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bend-card .btxt b{ font-size:13.5px; }
.bend-card .btxt span{ font-size:11px; color:var(--tx-mid); }
.bend-card .brar{
  flex:0 0 auto; font-size:9px; font-weight:900;
  letter-spacing:1px; text-transform:uppercase;
}
/* Bendiciones ya elegidas, en fila mínima dentro de la tarjeta del modo. */
.bend-mini{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; font-size:15px; }

/* -------------------------------------------------------------------------
   FRANJA DE MODO EN EL HUD
   Debajo de los buffs, en la banda izquierda que ya estaba libre. Compacta a
   propósito: en misión el jugador mira el corredor, no el HUD.
   ------------------------------------------------------------------------- */
.mh-modo{
  position:absolute; top:calc(var(--safe-t) + 60px); left:10px;
  display:none; flex-direction:column; gap:5px;
  pointer-events:none;
}
.mh-modo.on{ display:flex; }
.mm-item{
  display:flex; align-items:center; gap:6px;
  padding:3px 9px 3px 8px; border-radius:99px;
  background:rgba(10,14,28,.84); border:1px solid var(--stroke);
  font-size:11.5px; font-weight:800;
}
.mm-item.barra{ flex-direction:column; align-items:flex-start; gap:3px; padding:4px 9px 5px; border-radius:10px; }
.mm-k{ font-size:8.5px; letter-spacing:1.4px; color:var(--tx-lo); text-transform:uppercase; }
.mm-item b{ font-size:14px; font-variant-numeric:tabular-nums; }
.mm-item .bar{ width:88px; height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.mm-item .bar i{ display:block; height:100%; border-radius:99px; transition:width .18s linear; }
.mm-item .bar.esc i{ background:linear-gradient(90deg,#2E6BFF,#55E6FF); }
.mm-item .bar.mun i{ background:linear-gradient(90deg,#B36B00,#FFD34E); }
/*
 * URGENTE. Late en rojo. El aviso salta al 25 % y a 10 s, no al 10 %: por
 * debajo de eso ya no da tiempo a reaccionar, y una alarma que llega tarde
 * enseña al jugador a ignorarla.
 */
.mm-item.urgente{ border-color:var(--bad); color:var(--bad); animation:mmUrge .7s ease-in-out infinite; }
.mm-item.urgente .bar i{ background:linear-gradient(90deg,#8E1130,#FF4D6D) !important; }
@keyframes mmUrge{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* -------------------------------------------------------------------------
   NIEBLA
   Viñeta radial sobre el lienzo. Se hace en DOM y no en canvas porque el
   compositor la resuelve sin tocar el bucle de dibujo: el modo no cuesta ni un
   milisegundo de fotograma, que en un móvil de gama baja es la diferencia
   entre jugable e injugable.
   ------------------------------------------------------------------------- */
#mission.con-niebla::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  --niebla:.8;
  background:
    radial-gradient(circle at 50% 62%,
      transparent 0%,
      transparent calc(18% - var(--niebla) * 6%),
      rgba(9,13,24, calc(var(--niebla) * .55)) 38%,
      rgba(6,9,18, calc(var(--niebla) * .93)) 66%,
      #05070F 88%);
  animation:nieblaLatir 7s ease-in-out infinite;
}
@keyframes nieblaLatir{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }

/* -------------------------------------------------------------------------
   ACCESIBILIDAD
   Se apaga el movimiento decorativo. NO se apaga el color ni la jerarquía —eso
   es información— ni la niebla, que es una regla de juego y no un adorno.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .modo-card.destacada::after,
  .bend-card,
  .bend-card.epica,
  .mm-item.urgente,
  #mission.con-niebla::after{
    animation:none !important;
  }
}