* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
/* Garantiza que el atributo HTML "hidden" siempre gane, aunque algún selector
   por ID más abajo también fije "display" en el mismo elemento (esto era lo
   que dejaba la pantalla de "Elige tu civilización" pegada encima de la
   batalla ya iniciada). */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #05070d; font-family: "Rajdhani", "Segoe UI", Arial, sans-serif; color: #dff4ff;
}
h1, h2, .civCard__play, #btnRestart { font-family: "Orbitron", "Rajdhani", sans-serif; }
.hud-pill, #heroName, #heroNivel { font-family: "Rajdhani", sans-serif; font-weight: 700; }
/* touch-action:none solo en el area del canvas — NUNCA en html/body entero,
   porque eso bloquea que un toque se convierta en "click" en los botones
   del HUD en varios navegadores moviles. */
#gameRoot { position: fixed; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; }
#gameRoot canvas { display: block; margin: 0 auto; }

#hud { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }

/* ---------- Selección de civilización ---------- */
/* Antes #civSelect centraba con flex (align-items:center) — con
   overflow-y:auto eso deja inalcanzable por scroll lo que se recorta ARRIBA
   (limitación conocida de flexbox: el contenido centrado que desborda solo
   es alcanzable hacia un lado). En ventanas bajas el contenido quedaba
   cortado sin forma de verlo. Se cambia al mismo patrón ya probado en
   Sugar Tycoon (#nivelesScroll/#nivelesInner): scroll simple de arriba
   hacia abajo, centrado solo horizontal vía margin:auto. */
#civSelect {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, #101a2e 0%, #05070d 70%);
}
#civSelectInner { max-width: 760px; width: 100%; text-align: center; margin: 0 auto; padding: 24px; }
#civSelectInner h1 { font-size: clamp(28px, 6vw, 44px); letter-spacing: 4px; margin: 0 0 6px; color: #dff4ff; }
.civSelect__sub { color: #9fb4c9; font-size: 14px; margin: 0 0 28px; letter-spacing: 1px; text-transform: uppercase; }
.civSelect__stats {
  display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 20px;
  background: rgba(255, 178, 61, 0.1); border: 1px solid rgba(255, 178, 61, 0.35);
  color: #ffb23d; font-size: 12.5px; font-weight: 700;
}
@keyframes popHito { 0% { transform: scale(0.6); opacity: 0.3; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.civSelect__stats--hito {
  background: rgba(255, 210, 61, 0.22); border-color: rgba(255, 210, 61, 0.7); color: #ffd23d;
  animation: popHito 0.5s cubic-bezier(.17,.89,.32,1.49);
}

/* ---------- Botón de sonido ---------- */
/* Arriba a la izquierda, justo debajo del cronómetro de la partida; z-index 30
   para quedar sobre el menú (20) y bajo los modales (40). */
.btn-sonido {
  position: fixed; top: 62px; left: 10px; z-index: 30; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(56,225,255,0.5); background: rgba(8,14,26,0.85); font-size: 17px; cursor: pointer; color: #dff4ff;
}
.btn-sonido:active { transform: translateY(2px); }

/* ---------- Rango (trofeos) ---------- */
.rango-card {
  display: flex; align-items: center; gap: 12px; max-width: 340px; margin: 0 auto 18px;
  background: linear-gradient(160deg, rgba(255,210,61,0.12), rgba(255,138,61,0.06));
  border: 1px solid rgba(255,210,61,0.4); border-radius: 14px; padding: 10px 16px; text-align: left;
}
.rango-card__icono { font-size: 30px; flex-shrink: 0; }
.rango-card__info { flex: 1; min-width: 0; }
.rango-card__linea1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rango-card__linea1 strong { color: #ffd23d; font-size: 15px; letter-spacing: 0.4px; }
.rango-card__linea1 span { color: #ffb23d; font-size: 12.5px; font-weight: 700; }
.rango-bar { width: 100%; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 5px; }
.rango-bar__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd23d, #ff8a3d); transition: width 0.4s ease; }
.rango-card__siguiente { display: block; margin-top: 4px; font-size: 10.5px; color: #b9c8d6; }
.rango-card--end { margin: 4px auto 14px; }
.endRango__delta--positivo { color: #4ade80 !important; }
.endRango__delta--negativo { color: #ff6a6a !important; }

/* ---------- Misiones ---------- */
.btn-misiones {
  display: block; margin: 0 auto 18px; padding: 9px 18px; border-radius: 20px; cursor: pointer;
  background: rgba(157, 91, 255, 0.12); border: 1px solid rgba(157, 91, 255, 0.45);
  color: #c9a0ff; font-size: 13px; font-weight: 700; font-family: "Rajdhani", sans-serif;
}
.btn-misiones:active { transform: translateY(2px); }
#pantallaMisiones {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 10, 0.9); pointer-events: auto; padding: 20px; perspective: 900px;
}
#misionesCard {
  background: rgba(10, 16, 28, 0.97); border: 1px solid rgba(157, 91, 255, 0.4);
  border-radius: 16px; padding: 22px; max-width: 480px; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column; animation: giroEntradaCard 0.5s cubic-bezier(.2,.8,.3,1.1);
}
.misionesHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.misionesHeader h2 { margin: 0; font-size: 20px; color: #c9a0ff; }
.btn-cerrar-misiones { background: none; border: none; color: #9fb4c9; font-size: 18px; cursor: pointer; padding: 4px 8px; }
#misionesProgreso { margin: 0 0 14px; color: #9fb4c9; font-size: 12.5px; font-family: "Rajdhani", sans-serif; font-weight: 700; }
#misionesLista { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mision-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #9fb4c9;
}
.mision-item__check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: 1.5px solid rgba(255,255,255,0.25); background: transparent;
}
.mision-item--completa { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); color: #dff4ff; }
.mision-item--completa .mision-item__check { background: #4ade80; border-color: #4ade80; color: #05070d; }

/* ---------- Cómo jugar ---------- */
.civSelect__botones { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
#pantallaComoJugar {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 10, 0.9); pointer-events: auto; padding: 20px; perspective: 900px;
}
#comoJugarCard {
  background: rgba(10, 16, 28, 0.97); border: 1px solid rgba(56, 225, 255, 0.4);
  border-radius: 16px; padding: 22px; max-width: 480px; width: 100%; max-height: 85vh;
  display: flex; flex-direction: column; animation: giroEntradaCard 0.5s cubic-bezier(.2,.8,.3,1.1);
}
.comoJugar__lista { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin: 6px 0 16px; }
.comoJugar__item { display: flex; gap: 12px; align-items: flex-start; }
.comoJugar__icono { font-size: 26px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.comoJugar__item strong { display: block; color: #38e1ff; font-size: 14px; margin-bottom: 3px; font-family: "Rajdhani", sans-serif; font-weight: 700; }
.comoJugar__item p { margin: 0; color: #9fb4c9; font-size: 12.5px; line-height: 1.5; }
.btn-entendido {
  border: none; border-radius: 12px; padding: 13px; font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: "Orbitron", sans-serif; background: linear-gradient(90deg, #38e1ff, #2fb8ff); color: #05070d;
}
.btn-entendido:active { transform: translateY(2px); }
.civSelect__nota { color: #6f8298; font-size: 12px; margin-top: 22px; }
.creditos { color: #4a5a6e; font-size: 10.5px; margin-top: 10px; letter-spacing: 0.3px; }
#civCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1000px; }
@media (max-width: 900px) { #civCards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { #civCards { grid-template-columns: 1fr; } }
.civCard {
  text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  transform-style: preserve-3d;
}
.civCard:hover { transform: rotateX(6deg) translateY(-5px) translateZ(10px); background: rgba(255,255,255,0.06); }
.civCard:active { transform: rotateX(-4deg) translateZ(-4px); }
.civCard--aethelard { border-color: rgba(56, 225, 255, 0.35); }
.civCard--aethelard:hover { border-color: rgba(56, 225, 255, 0.8); }
.civCard--abisal { border-color: rgba(157, 91, 255, 0.35); }
.civCard--abisal:hover { border-color: rgba(157, 91, 255, 0.8); }
.civCard--horda_solar { border-color: rgba(255, 140, 26, 0.35); }
.civCard--horda_solar:hover { border-color: rgba(255, 140, 26, 0.8); }
.civCard h2 { margin: 0; font-size: 19px; }
.civCard--aethelard h2 { color: #38e1ff; }
.civCard--abisal h2 { color: #c9a0ff; }
.civCard--horda_solar h2 { color: #ff8c1a; }
.civCard__hero { margin: 0; font-size: 13px; color: #ffd23d; font-weight: 700; }
.civCard__estilo { margin: 0; font-size: 12.5px; color: #b9c8d6; line-height: 1.4; flex: 1; }
.civCard__play {
  margin-top: 10px; align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  padding: 8px 14px; border-radius: 8px; color: #041018;
}
.civCard--aethelard .civCard__play { background: linear-gradient(90deg, #38e1ff, #2fb8ff); }
.civCard--abisal .civCard__play { background: linear-gradient(90deg, #c9a0ff, #9d5bff); }
.civCard--horda_solar .civCard__play { background: linear-gradient(90deg, #ff8c1a, #ff3d1a); }

/* ---------- Top bar ---------- */
#hudTop {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 10px;
}
.hud-pill {
  background: rgba(8, 14, 26, 0.85); border: 1px solid rgba(56, 225, 255, 0.35);
  border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px; white-space: nowrap; backdrop-filter: blur(4px);
}
.hud-pill--elixir { color: #b06bff; border-color: rgba(176, 107, 255, 0.45); min-width: 96px; }
.hud-bar--elixir { margin-top: 4px; height: 7px; }
.hud-bar__fill--elixir { background: linear-gradient(90deg, #9d5bff, #b06bff); }
.hud-bases { flex: 1; display: flex; gap: 10px; min-width: 0; }
.hud-base { flex: 1; min-width: 0; background: rgba(8, 14, 26, 0.75); border-radius: 8px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.08); }
.hud-base__label { font-size: 10px; color: #9fb4c9; text-transform: uppercase; letter-spacing: 0.5px; }
.hud-bar { width: 100%; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 2px; }
.hud-bar__fill { height: 100%; width: 100%; border-radius: 5px; transition: width 0.25s ease; }
.hud-bar__fill--ally { background: linear-gradient(90deg, #2fb8ff, #38e1ff); }
.hud-bar__fill--enemy { background: linear-gradient(90deg, #ff4d6a, #ff8a3d); }
.hud-bar__fill--hero { background: linear-gradient(90deg, #ffd23d, #ff8a3d); }

/* ---------- Aviso flotante ---------- */
#avisoFlotante {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: rgba(8, 14, 26, 0.92); border: 1px solid rgba(255, 138, 61, 0.5);
  border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #ffd23d;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; white-space: nowrap;
}
#avisoFlotante.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.hud-btn--ayuda {
  position: absolute; top: 56px; right: 10px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(56,225,255,0.5); background: rgba(8,14,26,0.85);
  font-size: 18px; cursor: pointer; color: #dff4ff;
}

/* ---------- Mano de cartas ---------- */
#manoCartas {
  position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 10px; padding: 0 10px;
}
.carta-btn {
  width: 74px; height: 92px; border-radius: 12px; border: 2px solid rgba(56,225,255,0.4);
  background: linear-gradient(160deg, rgba(14,90,112,0.65), rgba(6,10,20,0.92));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; color: #dff4ff; box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.carta-btn__icono { font-size: 26px; line-height: 1; }
.carta-btn__nombre { font-size: 9px; font-weight: 700; text-align: center; line-height: 1.15; padding: 0 3px; }
.carta-btn__costo {
  font-size: 10.5px; font-weight: 800; color: #b06bff; background: rgba(176,107,255,0.15);
  border-radius: 8px; padding: 1px 7px; margin-top: 1px;
}
.carta-btn--seleccionada { border-color: #ffd23d; transform: translateY(-10px); box-shadow: 0 0 16px rgba(255,210,61,0.55); }
.carta-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carta-btn--enCampo { border-color: rgba(255,93,93,0.5); }
.carta-btn:not(:disabled):active { transform: scale(0.93); }
@keyframes pulsoCartaLista {
  0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(56,225,255,0.4); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 6px rgba(56,225,255,0); }
}
.carta-btn:not(:disabled):not(.carta-btn--seleccionada) { animation: pulsoCartaLista 2.2s ease-out infinite; }

/* Carta única caída (Campeón/Coloso): muestra los segundos de recarga en lugar del costo. */
.carta-btn--recarga .carta-btn__costo { color: #ffb23d; background: rgba(255,178,61,0.18); }

/* ---------- Rareza de cartas (puramente visual, por costo) ---------- */
.carta-btn--epico { border-color: rgba(176,107,255,0.55); }
.carta-btn--epico:not(:disabled):not(.carta-btn--seleccionada) { animation: pulsoCartaEpico 2.2s ease-out infinite; }
@keyframes pulsoCartaEpico {
  0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(176,107,255,0.45); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 6px rgba(176,107,255,0); }
}
.carta-btn--legendario { border-color: rgba(255,210,61,0.65); }
.carta-btn--legendario:not(:disabled):not(.carta-btn--seleccionada) { animation: pulsoCartaLegendario 1.7s ease-out infinite; }
@keyframes pulsoCartaLegendario {
  0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,210,61,0.55); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 8px rgba(255,210,61,0); }
}

/* ---------- Fantasma de arrastre (drag & drop de cartas) ---------- */
#cartaFantasma {
  position: fixed; top: 0; left: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: rgba(8, 14, 26, 0.85); border: 2px solid rgba(56,225,255,0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5); pointer-events: none; z-index: 999;
  transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
#cartaFantasma.cartaFantasma--valida {
  transform: scale(1.35); border-color: #ffd23d; box-shadow: 0 0 22px rgba(255,210,61,0.7);
}

/* ---------- End screen ---------- */
/* Mismo ajuste que #civSelect: scroll de arriba hacia abajo en vez de
   centrado con flex (que deja inalcanzable el recorte de arriba). */
#endScreen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(3, 5, 10, 0.88);
  pointer-events: auto; perspective: 900px; overflow-y: auto;
}
#endCard {
  background: rgba(10, 16, 28, 0.95); border: 1px solid rgba(56,225,255,0.4);
  border-radius: 16px; padding: 28px 32px; text-align: center; max-width: 320px;
  margin: 40px auto;
  animation: giroEntradaCard 0.5s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes giroEntradaCard {
  0% { transform: rotateY(-40deg) scale(0.85); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
#endTitle { margin: 0 0 8px; font-size: 26px; color: #38e1ff; letter-spacing: 1px; }
#endSub { margin: 0 0 18px; color: #cfe3f0; font-size: 14px; }
#endResumen { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.endResumen__item {
  flex: 1; background: rgba(56,225,255,0.06); border: 1px solid rgba(56,225,255,0.2); border-radius: 10px;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.endResumen__num { font-size: 18px; font-weight: 800; color: #38e1ff; }
.endResumen__item span:last-child { font-size: 9.5px; color: #8fb4c4; font-weight: 700; text-align: center; }
#btnRestart {
  background: linear-gradient(90deg, #38e1ff, #2fb8ff); border: none; color: #041018;
  font-weight: 800; padding: 12px 22px; border-radius: 10px; cursor: pointer; font-size: 14px;
}

@media (min-width: 700px) {
  .carta-btn { width: 86px; height: 104px; }
  .carta-btn__icono { font-size: 30px; }
}

/* ---------- Poderes especiales ---------- */
#barraPoderes { position: absolute; right: 10px; top: 112px; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; z-index: 12; }
.poder-btn { position: relative; width: 58px; height: 64px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.35); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden;
  background: linear-gradient(160deg, rgba(20,30,55,0.95), rgba(6,10,20,0.95)); box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.poder-btn__icono { font-size: 24px; line-height: 1; }
.poder-btn__costo { font-size: 10.5px; font-weight: 800; color: #b06bff; }
.poder-btn__tecla { position: absolute; top: 2px; left: 5px; font-size: 9px; font-weight: 800; opacity: 0.55; }
.poder-btn__cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; background: rgba(4,8,16,0.72); opacity: 0; transition: opacity 0.15s; }
.poder-btn--recarga .poder-btn__cd { opacity: 1; }
.poder-btn--rayo { border-color: rgba(253,224,71,0.7); }
.poder-btn--escarcha { border-color: rgba(125,211,252,0.7); }
.poder-btn--escudo { border-color: rgba(56,225,255,0.7); }
.poder-btn--frenesi { border-color: rgba(255,138,61,0.7); }
.poder-btn:not(:disabled):hover { transform: translateX(-3px); }
.poder-btn:not(:disabled):active { transform: scale(0.94); }
.poder-btn:disabled:not(.poder-btn--recarga) { opacity: 0.4; cursor: not-allowed; }
.poder-btn--activo { transform: translateX(-6px) scale(1.08); box-shadow: 0 0 18px rgba(255,255,255,0.55); border-color: #fff; }
@media (max-width: 700px) { .poder-btn { width: 50px; height: 56px; } .poder-btn__icono { font-size: 20px; } #barraPoderes { gap: 7px; } }

/* Retrato del avatar dentro de la carta */
.carta-btn__icono img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.55)); display: block; }
.carta-btn { height: 100px; }

/* Retrato del héroe en la tarjeta de civilización */
.civCard__retrato { display: block; width: 104px; height: 104px; object-fit: contain; margin: -4px auto 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); animation: retratoFlota 3.2s ease-in-out infinite; }
.civCard--aethelard .civCard__retrato { filter: drop-shadow(0 0 14px rgba(56,225,255,0.55)) drop-shadow(0 6px 8px rgba(0,0,0,0.6)); }
.civCard--abisal .civCard__retrato { filter: drop-shadow(0 0 14px rgba(157,91,255,0.6)) drop-shadow(0 6px 8px rgba(0,0,0,0.6)); }
.civCard--horda_solar .civCard__retrato { filter: drop-shadow(0 0 14px rgba(255,140,26,0.6)) drop-shadow(0 6px 8px rgba(0,0,0,0.6)); }
.civCard:hover .civCard__retrato { transform: scale(1.1); }
@keyframes retratoFlota { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* ---------- Menú principal: título brillante, fondo vivo, cartas con entrada escalonada ---------- */
#civSelect { background: radial-gradient(ellipse at 20% 10%, rgba(56,225,255,0.14), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(157,91,255,0.16), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(255,140,26,0.06), transparent 60%), #070b14; background-size: 140% 140%; animation: menuAura 14s ease-in-out infinite alternate; }
@keyframes menuAura { from { background-position: 0% 0%, 100% 100%, 50% 50%; } to { background-position: 30% 20%, 70% 80%, 50% 50%; } }
#civSelectInner h1 { background: linear-gradient(100deg, #38e1ff 0%, #fff 30%, #c9a0ff 55%, #ff8c1a 85%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 3px; filter: drop-shadow(0 0 14px rgba(56,225,255,0.45)); animation: tituloBrillo 6s linear infinite; }
@keyframes tituloBrillo { to { background-position: -220% 0; } }
.civCard { position: relative; overflow: hidden; animation: cardEntradaCN 0.7s cubic-bezier(.2,.9,.3,1.2) backwards; }
.civCard:nth-child(2) { animation-delay: 0.12s; }
.civCard:nth-child(3) { animation-delay: 0.24s; }
.civCard::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent); transform: skewX(-18deg); transition: left 0.7s ease; pointer-events: none; }
.civCard:hover::after { left: 130%; }
.civCard--aethelard:hover { box-shadow: 0 0 26px rgba(56,225,255,0.35); }
.civCard--abisal:hover { box-shadow: 0 0 26px rgba(157,91,255,0.4); }
.civCard--horda_solar:hover { box-shadow: 0 0 26px rgba(255,140,26,0.4); }
.civCard__play { transition: filter 0.2s, transform 0.2s; }
.civCard:hover .civCard__play { filter: brightness(1.15); transform: scale(1.03); }
@keyframes cardEntradaCN { from { opacity: 0; transform: translateY(26px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #civSelect, #civSelectInner h1, .civCard, .civCard__retrato { animation: none; } }

/* Indicador de próxima oleada */
#oleadaInfo { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 18px; font-size: 12.5px; font-weight: 700; color: #cfe3f5; background: rgba(8,14,26,0.72); border: 1px solid rgba(255,255,255,0.18); pointer-events: none; white-space: nowrap; }
#oleadaInfo:empty { display: none; }
#oleadaInfo.oleada--alerta { color: #fff; background: rgba(185,28,28,0.85); border-color: #fecaca; animation: pulsoSalirCN 0.6s ease-in-out infinite alternate; }
@keyframes pulsoSalirCN { to { transform: translateX(-50%) scale(1.07); } }
#avisoFlotante { top: 100px; white-space: normal; text-align: center; max-width: min(88vw, 620px); }

/* Mazo rotativo: vista previa de la siguiente carta */
#cartaSiguiente { position: absolute; left: 10px; bottom: 122px; width: 58px; padding: 4px 3px; border-radius: 10px; text-align: center; background: rgba(8,14,26,0.82); border: 1px dashed rgba(255,255,255,0.35); opacity: 0.9; pointer-events: none; }
#cartaSiguiente .sig__titulo { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #9fb4c9; }
#cartaSiguiente .sig__icono img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 1px auto; }
#cartaSiguiente .sig__costo { font-size: 11px; font-weight: 700; color: #ffd23d; }
.carta-btn--entra { animation: cartaEntraMano 0.4s cubic-bezier(.2,.9,.3,1.3); }
@keyframes cartaEntraMano { from { transform: translateY(30px) scale(0.8); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* Modo de partida / desafío con código */
.modoSelect { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.modo-chip { padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); color: #cfe3f5; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.modo-chip:hover { background: rgba(255,255,255,0.12); }
.modo-chip.is-activo { background: linear-gradient(90deg, #38e1ff, #9d5bff); color: #061019; border-color: transparent; box-shadow: 0 0 16px rgba(56,225,255,0.4); }
.codigo-reto { display: block; margin: 0 auto 6px; width: 150px; text-align: center; letter-spacing: 3px; font-weight: 800; font-size: 16px; padding: 8px; border-radius: 12px; border: 2px solid #38e1ff; background: #0a1220; color: #fff; text-transform: uppercase; }
.codigo-reto[hidden] { display: none; }
.modo-info { margin: 0 0 14px; font-size: 12.5px; color: #9fb4c9; min-height: 18px; }
#endReto { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(157,91,255,0.15); border: 1px solid rgba(157,91,255,0.5); display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 14px; }
#endReto[hidden] { display: none; }
.btn-compartir-reto { margin-top: 4px; padding: 7px 14px; border-radius: 16px; border: 0; background: #38e1ff; color: #061019; font-weight: 800; cursor: pointer; font-family: inherit; }

/* Editor de mazo */
#pantallaMazo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; background: rgba(5,8,18,0.94); padding: 16px; overflow-y: auto; }
#pantallaMazo[hidden] { display: none; }
#mazoCard { width: 100%; max-width: 520px; margin: auto; background: linear-gradient(160deg, #14213a, #0a1220); border: 1px solid rgba(120,160,255,0.25); border-radius: 20px; padding: 18px; }
.mazo__ayuda { color: #b9c8d6; font-size: 13px; line-height: 1.45; }
.mazo__civs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.mazo__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mazo-carta { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #9fb4c9; cursor: pointer; font-family: inherit; text-align: left; opacity: 0.6; transition: all 0.15s; }
.mazo-carta.is-en-mazo { opacity: 1; color: #fff; border-color: #38e1ff; background: rgba(56,225,255,0.12); box-shadow: 0 0 12px rgba(56,225,255,0.25); }
.mazo-carta__icono { font-size: 22px; }
.mazo-carta__nombre { flex: 1; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.mazo-carta__costo { font-size: 12px; font-weight: 800; color: #ffd23d; }
.mazo__resumen { text-align: center; color: #9fb4c9; font-size: 13px; margin: 12px 0 0; }
.modo-chip--mazo { border-style: dashed; }
/* boss */

/* Tutorial interactivo */
#tutorialGuia { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 15; width: min(86vw, 460px); padding: 12px 16px 10px; border-radius: 16px; text-align: center;
  background: rgba(8,14,26,0.94); border: 2px solid #38e1ff; box-shadow: 0 0 24px rgba(56,225,255,0.45); animation: tutEntra 0.35s ease-out; }
#tutorialGuia[hidden] { display: none; }
.tut__paso { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #7dd3fc; font-weight: 700; }
.tut__texto { margin: 4px 0 8px; font-size: 14.5px; line-height: 1.4; color: #fff; }
#tutSaltar { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #9fb4c9; border-radius: 12px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; pointer-events: auto; }
@keyframes tutEntra { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%); } }
.tut-resalte { animation: tutPulso 1.1s ease-in-out infinite alternate !important; outline: 3px solid #ffd23d; outline-offset: 4px; border-radius: 14px; }
@keyframes tutPulso { to { box-shadow: 0 0 26px 6px rgba(255,210,61,0.75); } }

#btnSalirPractica { position: absolute; left: 10px; top: 62px; z-index: 30; padding: 6px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.35); background: rgba(8,14,26,0.85); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; pointer-events: auto; }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid #38e1ff; outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}