/* «Аэлор» (Aelor) — the card duel of spires (views/aelor.js, views/aelor_ui.js).

   Palette from the art set: deep navy plateau under a shattered violet sky, gold filigree, crystal
   blue. Resource tints follow the three stocks: bricks ember, gems crystal, recruits verdant.

   The stage is the whole board frame and is its own size container (`aestage`): the field is laid
   out from the stage's width AND height, not the window's — the console takes the rail and the
   context column off the window before the stage gets any space. Every card is an inline-size
   container too, so its name and rules text scale with the card instead of the screen. */

/* The palette lives on :root, not on .view-ae: cards are also drawn in sheets (the modal root), in
   the replay player and in «Свод», and a card outside the match view used to lose its colours. */
:root {
  --ae-gold: #e9c46a;
  --ae-gold-hi: #f6dc8f;
  --ae-sky: #7cc7ff;
  --ae-violet: #a78bfa;
  --ae-ink: #0b0d1c;
  --ae-panel: rgba(10, 12, 30, 0.74);
  --ae-panel-hi: rgba(20, 24, 54, 0.82);
  --ae-line: rgba(233, 196, 106, 0.3);
  --ae-line-soft: rgba(124, 199, 255, 0.18);
  --ae-bricks: #e07a4f;
  --ae-gems: #58aefc;
  --ae-recruits: #5fd07f;
  --ae-up: #7cf0a8;
  --ae-down: #ff7b86;
}

.view-ae .ae-frame { padding: 0; align-items: stretch; }

/* ================================================================ stage */
.ae-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "foe" "arena" "me" "hand";
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--ae-line);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), 0 0 60px rgba(76, 110, 245, 0.18);
  background: #0a0c1d;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  container-name: aestage;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.ae-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.5;
  filter: saturate(1.05) brightness(0.78);
  pointer-events: none;
}
.ae-strip-foe { grid-area: foe; }
.ae-arena { grid-area: arena; }
.ae-strip-me { grid-area: me; }
.ae-hand { grid-area: hand; }
.ae-stage:not(.is-dealt) .ae-strip,
.ae-stage:not(.is-dealt) .ae-arena { visibility: hidden; }

/* ================================================================ strips */
.ae-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 12px;
  border: 1px solid var(--ae-line-soft);
  background: var(--ae-panel);
  transition: border-color 0.25s, box-shadow 0.35s;
}
.ae-strip.is-turn {
  border-color: rgba(233, 196, 106, 0.62);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.18), 0 0 22px rgba(233, 196, 106, 0.2);
}
.ae-hero { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 190px; }
.ae-hero-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ae-gold);
  box-shadow: 0 0 12px rgba(233, 196, 106, 0.35);
  flex: 0 0 auto;
}
.ae-hero-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ae-hero-name {
  font: 800 13px/1.1 var(--font-display, inherit);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ae-hero-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(40, 28, 76, 0.6);
  color: var(--violet-300, #c4b5fd);
  font: 700 10px/1 var(--font-body, inherit);
  cursor: pointer;
}
.ae-doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-doc-next {
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(233, 196, 106, 0.22);
  color: var(--ae-gold-hi);
  font-weight: 900;
}
.ae-ico { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.ae-ico-doc { width: 18px; height: 18px; }
.ae-res { display: grid; grid-auto-flow: column; gap: 6px; flex: 0 0 auto; }
.ae-resrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ae-resrow-bricks { box-shadow: inset 0 -2px 0 rgba(224, 122, 79, 0.55); }
.ae-resrow-gems { box-shadow: inset 0 -2px 0 rgba(88, 174, 252, 0.55); }
.ae-resrow-recruits { box-shadow: inset 0 -2px 0 rgba(95, 208, 127, 0.55); }
.ae-prod, .ae-stock { position: relative; display: flex; align-items: center; gap: 4px; }
.ae-prod .ae-num { color: var(--text-soft); font-size: 11px; }
.ae-num { font: 800 14px/1 var(--font-mono, monospace); color: var(--text); min-width: 1.4em; }
.ae-stock .ae-num { font-size: 15px; }
.ae-vault {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(233, 196, 106, 0.3);
  background: rgba(60, 46, 12, 0.35);
  flex: 0 0 auto;
}
.ae-vault.is-debt .ae-num { color: var(--ae-down); }
.ae-vault.is-near { box-shadow: 0 0 16px rgba(233, 196, 106, 0.45); border-color: rgba(233, 196, 106, 0.75); }
.ae-vault-body { display: flex; flex-direction: column; gap: 3px; }
.ae-vault-line { display: flex; align-items: baseline; gap: 2px; }
.ae-goal { font: 700 10px/1 var(--font-mono, monospace); color: var(--text-faint); }
.ae-vault-bar { display: block; width: 56px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ae-vault-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8860b, var(--ae-gold-hi)); transition: width 0.6s ease; }
.ae-extras { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.ae-structs, .ae-traps { display: flex; gap: 4px; align-items: center; }
.ae-struct {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(124, 199, 255, 0.55);
  background: #101528;
  cursor: pointer;
  overflow: visible;
}
.ae-struct-relic { border-color: rgba(233, 196, 106, 0.85); }
.ae-struct-champion { border-color: rgba(167, 139, 250, 0.85); }
.ae-struct-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ae-pips { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.ae-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--ae-gold-hi); box-shadow: 0 0 4px var(--ae-gold); }
.ae-trap {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 34px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(233, 196, 106, 0.45);
  background: linear-gradient(160deg, #1c2450, #0c1026);
  overflow: hidden;
}
.ae-trap.is-open { cursor: pointer; }
.ae-trap.is-hidden { animation: aeTrapBreath 2.6s ease-in-out infinite; }
.ae-trap-img { width: 100%; height: 100%; object-fit: cover; }
.ae-trap-ico { width: 18px; height: 18px; object-fit: contain; opacity: 0.85; }
@keyframes aeTrapBreath { 0%, 100% { box-shadow: 0 0 0 rgba(233, 196, 106, 0); } 50% { box-shadow: 0 0 10px rgba(233, 196, 106, 0.45); } }
.ae-oath { display: inline-flex; }
.ae-oath-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 4px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(34, 22, 64, 0.65);
  color: var(--text);
  cursor: pointer;
}
.ae-oath-bar { display: block; width: 46px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ae-oath-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ae-violet), var(--ae-gold-hi)); transition: width 0.5s; }
.ae-oath-n { font: 800 10px/1 var(--font-mono, monospace); }
.ae-handcount { display: inline-flex; align-items: center; gap: 4px; }
.ae-backs { position: relative; display: inline-block; width: 46px; height: 30px; }
.ae-back {
  position: absolute;
  bottom: 0;
  left: calc(var(--k) * 4px);
  width: 20px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(233, 196, 106, 0.6);
  background: url("../../assets/aelor/card_back.webp") center / cover, #16204a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.ae-handn { font: 800 12px/1 var(--font-mono, monospace); color: var(--text-soft); }

/* ================================================================ arena: spires + centre */
.ae-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}
.ae-gauge {
  --tower: 0;
  --wall: 0;
  position: relative;
  min-height: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 14, 36, 0.25), rgba(10, 14, 36, 0.62));
  border: 1px solid rgba(124, 199, 255, 0.12);
  overflow: hidden;
}
.ae-gauge-sky { position: absolute; inset: 22px 0 0 0; }
.ae-spire-ghost, .ae-spire-live {
  position: absolute;
  left: 50%;
  bottom: 6%;
  height: 92%;
  max-width: 82%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  pointer-events: none;
}
.ae-spire-ghost { opacity: 0.14; filter: grayscale(0.6); }
.ae-spire-live {
  clip-path: inset(calc((1 - var(--tower)) * 100%) 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 0 12px rgba(124, 199, 255, 0.35));
}
.ae-gauge.is-near .ae-spire-live { filter: drop-shadow(0 0 18px rgba(233, 196, 106, 0.75)); }
.ae-gauge.is-low .ae-spire-live { filter: drop-shadow(0 0 14px rgba(255, 93, 108, 0.6)); }
.ae-wall-live {
  position: absolute;
  left: -4%;
  bottom: 0;
  width: 108%;
  height: calc(5% + var(--wall) * 36%);
  object-fit: cover;
  object-position: top center;
  transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.ae-gauge.no-wall .ae-wall-live { visibility: hidden; }
.ae-gauge.is-hit { animation: aeShake 0.45s ease; }
@keyframes aeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.ae-gtag {
  position: absolute;
  left: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(8, 10, 26, 0.8);
  border: 1px solid rgba(233, 196, 106, 0.35);
  z-index: 2;
}
.ae-gtag-tower { top: 5px; }
.ae-gtag-wall { bottom: 5px; border-color: rgba(124, 199, 255, 0.35); }
.ae-gcap { font: 700 9px/1 var(--font-body, inherit); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.ae-gnum { font: 900 18px/1 var(--font-mono, monospace); color: var(--text); }
.ae-gauge-foe .ae-gtag { left: auto; right: 6px; }
.ae-gpops { position: absolute; inset: 0; pointer-events: none; }

.ae-center {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 10, 26, 0.45);
  border: 1px solid rgba(233, 196, 106, 0.16);
}
.ae-center-top { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ae-pile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(36px, 10cqw, 64px);
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.ae-pile-img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; box-shadow: 3px 3px 0 #0b1030, 6px 6px 0 #0a0d24, 0 6px 14px rgba(0, 0, 0, 0.6); }
.ae-pile-disc .ae-card { width: 100%; }
.ae-pile-empty { width: 100%; height: 100%; border-radius: 7px; border: 1px dashed rgba(255, 255, 255, 0.18); }
.ae-pile-n {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 20px;
  padding: 2px 4px;
  border-radius: 8px;
  background: #11162e;
  border: 1px solid rgba(233, 196, 106, 0.5);
  font: 800 10px/1 var(--font-mono, monospace);
  color: var(--ae-gold-hi);
  text-align: center;
}
.ae-last-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-height: 0; flex: 0 1 auto; }
.ae-last { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 7; max-height: 100%; }
.ae-last .ae-card { width: 100%; cursor: zoom-in; }
.ae-last-back { width: 70%; opacity: 0.55; filter: drop-shadow(0 0 16px rgba(124, 199, 255, 0.35)); }
.ae-last-trap { position: relative; width: 100%; }
.ae-last-trapico { position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; object-fit: contain; }
.ae-last.is-fresh .ae-card { animation: aeCardIn 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.ae-last.is-fresh.from-foe .ae-card { animation-name: aeCardInFoe; }
@keyframes aeCardIn { from { transform: translateY(60%) scale(0.7) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aeCardInFoe { from { transform: translateY(-60%) scale(0.7) rotate(6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ae-last-who { font: 700 10px/1.2 var(--font-body, inherit); color: var(--text-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ae-ticker { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.ae-tick { font: 600 11px/1.3 var(--font-body, inherit); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ae-tick.is-last { color: var(--text); }

/* ================================================================ cards */
.ae-card {
  --res: var(--ae-gems);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 5 / 7;
  /* Percent radii, not cqi: a container's own box resolves cq units against its ANCESTOR container
     (or the viewport when there is none), which rounded a card in a sheet into a pill. */
  border-radius: 7% / 5%;
  border: 2px solid var(--res);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(160deg, #161b3c, #0b0e22 70%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.ae-card.ae-res-bricks { --res: var(--ae-bricks); }
.ae-card.ae-res-gems { --res: var(--ae-gems); }
.ae-card.ae-res-recruits { --res: var(--ae-recruits); }
.ae-card.ae-rar-R { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(88, 174, 252, 0.45); }
.ae-card.ae-rar-E { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.6), 0 0 10px rgba(167, 139, 250, 0.25); }
.ae-card.ae-rar-L { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(233, 196, 106, 0.75), 0 0 14px rgba(233, 196, 106, 0.3); }
.ae-card.ae-rar-M { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 93, 108, 0.75), 0 0 18px rgba(255, 93, 108, 0.35); }
.ae-card.is-back { border-color: rgba(233, 196, 106, 0.6); background: #121838; }
.ae-card-backimg { width: 100%; height: 100%; object-fit: cover; }
.ae-card-art { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 0.86; overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.6); }
.ae-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.ae-card-cost {
  position: absolute;
  top: 3cqi;
  left: 3cqi;
  display: grid;
  place-items: center;
  width: 22cqi;
  height: 22cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 55%), var(--res);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.ae-card-costico { position: absolute; width: 60%; height: 60%; object-fit: contain; opacity: 0.35; }
.ae-card-costn { position: relative; font: 900 12cqi/1 var(--font-mono, monospace); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.ae-card-sac {
  position: absolute;
  top: 27cqi;
  left: 5cqi;
  padding: 1cqi 3cqi;
  border-radius: 4cqi;
  background: #5b0f1a;
  border: 1px solid #ff8a94;
  color: #ffd1d5;
  font: 900 8cqi/1 var(--font-mono, monospace);
}
.ae-card-name {
  padding: 3cqi 4cqi 1cqi;
  font: 800 8.4cqi/1.12 var(--font-display, inherit);
  color: var(--ae-gold-hi);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ae-card-text {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 5cqi;
  font: 600 6.6cqi/1.22 var(--font-body, inherit);
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.ae-card-foot { display: flex; align-items: center; gap: 1.5cqi; padding: 1.5cqi 4cqi 3cqi; min-height: 10cqi; }
.ae-card-kw { width: 10cqi; height: 10cqi; object-fit: contain; }
.ae-card-grow { flex: 1 1 auto; }
.ae-card-gem { width: 11cqi; height: 11cqi; object-fit: contain; }
.ae-card-ribbon {
  position: absolute;
  top: 6cqi;
  right: -12cqi;
  width: 52cqi;
  padding: 1cqi 0;
  transform: rotate(35deg);
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff;
  font: 800 6cqi/1 var(--font-body, inherit);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ae-card.is-mini .ae-card-name { font-size: 11cqi; padding-top: 2cqi; }
.ae-card.is-mini .ae-card-art { aspect-ratio: 1 / 1.05; }
.ae-card.is-big { width: 100%; }
.ae-card.is-big .ae-card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 7.6cqi; }
.ae-card.is-big .ae-card-text { -webkit-line-clamp: 9; }
/* A small card cannot hold rules text legibly: it shows art, cost and name; the sheet reads it out. */
@container (max-width: 104px) {
  .ae-card-text, .ae-card-foot { display: none; }
  .ae-card-name { font-size: 11cqi; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ae-card-art { aspect-ratio: 1 / 1.08; }
}

/* ================================================================ hand */
.ae-hand {
  --n: 6;
  --gap: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap);
  min-height: 0;
  padding: 2px 0 0;
}
.ae-hand-card {
  flex: 0 0 auto;
  width: min(calc((100cqw - 20px - (var(--n) - 1) * var(--gap)) / var(--n)), calc(27cqh * 0.714), 168px);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.2s;
  animation: aeDeal 0.35s ease both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes aeDeal { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.ae-hand-card:hover, .ae-hand-card:focus-visible { transform: translateY(-8px); z-index: 2; outline: none; }
.ae-hand.is-myturn .ae-hand-card.is-playable { box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.85), 0 0 18px rgba(233, 196, 106, 0.45), 0 8px 18px rgba(0, 0, 0, 0.6); }
.ae-hand-card.is-poor { filter: grayscale(0.55) brightness(0.62); }
.ae-hand-card.is-poor .ae-card-costn { color: #ffb4bb; }
.ae-hand.is-discarding .ae-hand-card.is-discardable { box-shadow: 0 0 0 2px rgba(255, 123, 134, 0.8), 0 0 14px rgba(255, 123, 134, 0.35); }
.ae-hand:not(.is-myturn) .ae-hand-card { cursor: zoom-in; }

/* ================================================================ floating numbers */
.ae-pop {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font: 900 14px/1 var(--font-mono, monospace);
  pointer-events: none;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  animation: aePop 1.4s ease-out forwards;
  z-index: 5;
}
.ae-pop.is-up { color: var(--ae-up); }
.ae-pop.is-down { color: var(--ae-down); }
.ae-pop-tower { top: 18%; font-size: 22px; }
.ae-pop-wall { top: auto; bottom: 22%; font-size: 18px; }
@keyframes aePop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }

/* ================================================================ banner */
.ae-banner {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 86%;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(233, 196, 106, 0.6);
  background: rgba(10, 12, 30, 0.92);
  color: var(--text);
  font: 800 13px/1.25 var(--font-body, inherit);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 26px rgba(233, 196, 106, 0.25);
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.ae-banner.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ae-banner.is-trap { border-color: rgba(255, 123, 134, 0.75); }
.ae-banner.is-ambush { border-color: rgba(255, 123, 134, 0.75); }
.ae-banner.is-oath, .ae-banner.is-champion { border-color: rgba(167, 139, 250, 0.8); }
.ae-banner.is-gift { border-color: rgba(124, 240, 168, 0.75); }

/* ================================================================ placement */
.ae-place {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(6, 8, 20, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ae-place-card {
  width: min(100%, 980px);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--ae-line);
  background: var(--ae-panel-hi);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.ae-place-card.is-pick { align-items: stretch; }
.ae-place-emblem { width: 120px; height: 120px; object-fit: contain; }
.ae-place-kicker { font: 700 11px/1 var(--font-body, inherit); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.ae-place-title { font: 900 20px/1.2 var(--font-display, inherit); color: var(--ae-gold-hi); text-align: center; }
.ae-place-sub { font: 600 12px/1.35 var(--font-body, inherit); color: var(--text-dim); text-align: center; }
.ae-place-portrait { width: min(220px, 40cqw); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 2px solid var(--ae-gold); box-shadow: 0 0 30px rgba(233, 196, 106, 0.3); }
.ae-place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ae-place-hero {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 8px;
  border-radius: 14px;
  border: 1px solid rgba(124, 199, 255, 0.2);
  background: rgba(12, 16, 40, 0.8);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.ae-place-hero:hover { transform: translateY(-3px); }
.ae-place-hero.is-sel { border-color: var(--ae-gold); box-shadow: 0 0 0 1px var(--ae-gold), 0 0 24px rgba(233, 196, 106, 0.35); }
.ae-place-heroimg { width: 100%; height: clamp(84px, 32cqh, 270px); object-fit: cover; object-position: center 18%; }
.ae-place-heroname { padding: 0 9px; font: 900 14px/1.1 var(--font-display, inherit); color: var(--ae-gold-hi); }
.ae-place-house { display: flex; align-items: center; gap: 5px; padding: 0 9px; font: 700 10px/1.2 var(--font-body, inherit); color: var(--text-faint); }
.ae-place-doc { display: flex; align-items: flex-start; gap: 5px; padding: 0 9px; font: 600 11px/1.3 var(--font-body, inherit); color: var(--text-dim); }
.ae-place-start { padding: 0 9px; font: 700 10px/1.2 var(--font-body, inherit); color: var(--ae-sky); }
.ae-place-detail { display: none; }
.ae-place-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding-top: 4px; }
.ae-place-deck { font: 700 11px/1.2 var(--font-body, inherit); color: var(--text-soft); }
.ae-place-decks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.chip-sq.ae-place-deckchip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-place-opp { font: 700 12px/1.2 var(--font-body, inherit); color: var(--text-faint); }
.ae-place-opp.is-ready { color: var(--ae-up); }
.ae-place-timer { font: 800 12px/1 var(--font-body, inherit); color: var(--ae-gold-hi); }
.ae-place-go { min-width: 160px; }
.ae-stage.is-placement .ae-hand { visibility: hidden; }

/* ================================================================ the finish */
.ae-end { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; overflow: hidden; border-radius: 16px; }
.ae-end-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: aeEndZoom 6s ease-out both; }
@keyframes aeEndZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.ae-end-scrim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(6, 8, 20, 0.15), rgba(6, 8, 20, 0.78)); }
.ae-end-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; text-align: center; }
.ae-end-title { font: 900 clamp(28px, 9cqw, 64px)/1 var(--font-display, inherit); letter-spacing: 0.04em; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); animation: aeEndIn 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.ae-end-title.is-win { color: var(--ae-gold-hi); }
.ae-end-title.is-loss { color: #ffb0b8; }
.ae-end-title.is-draw, .ae-end-title.is-watch { color: var(--ae-sky); }
@keyframes aeEndIn { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ae-end-sub { font: 700 14px/1.3 var(--font-body, inherit); color: var(--text); text-shadow: 0 2px 10px #000; }
.ae-end-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.ae-end-again { min-width: 200px; }
/* «К доске»: the scene folds into a bar along the bottom so the final board can be read. */
.ae-end.is-compact { inset: auto 0 0 0; place-items: stretch; border-radius: 0 0 16px 16px; }
.ae-end.is-compact .ae-end-art { opacity: 0.35; }
.ae-end.is-compact .ae-end-body { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 12px; }
.ae-end.is-compact .ae-end-title { font-size: 20px; animation: none; }
.ae-end.is-compact .ae-end-sub { display: none; }
.ae-end.is-compact .ae-end-actions { margin: 0; }

/* ================================================================ coach line + fighters */
.ae-coach { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.ae-coach-title { font: 800 13px/1.25 var(--font-body, inherit); text-align: center; }
.ae-coach-body { font: 600 11px/1.25 var(--font-body, inherit); color: var(--text-faint); text-align: center; }
.ae-fighter-ava { overflow: hidden; padding: 0; }
.ae-fighter-img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================ sheets */
.ae-sheet-back { padding: 14px; }
.ae-sheet {
  position: relative;
  width: min(96vw, 760px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 12px 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--ae-line, rgba(233, 196, 106, 0.3));
  background: linear-gradient(160deg, rgba(22, 26, 60, 0.97), rgba(9, 11, 28, 0.97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 199, 255, 0.12);
  color: var(--text);
  animation: popIn var(--dur-med, 0.3s) var(--spring, ease) both;
}
.ae-sheet-face { align-self: start; }
.ae-sheet-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ae-info { display: flex; flex-direction: column; gap: 8px; }
.ae-info-name { font: 900 22px/1.15 var(--font-display, inherit); color: var(--ae-gold-hi, #f6dc8f); padding-right: 34px; }
.ae-info-text { font: 650 15px/1.45 var(--font-body, inherit); color: var(--text); padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.ae-tag { display: inline-flex; align-items: center; gap: 4px; }
.ae-tag-ico { width: 14px; height: 14px; object-fit: contain; }
.ae-tag-cost.ae-res-bricks { border-color: rgba(224, 122, 79, 0.6); color: #ffb08a; }
.ae-tag-cost.ae-res-gems { border-color: rgba(88, 174, 252, 0.6); color: #a9d4ff; }
.ae-tag-cost.ae-res-recruits { border-color: rgba(95, 208, 127, 0.6); color: #9be8b2; }
.ae-tag-sac { border-color: rgba(255, 123, 134, 0.6); color: #ffb4bb; }
.ae-tag-rar.ae-rar-E { border-color: rgba(167, 139, 250, 0.6); color: #d5c8ff; }
.ae-tag-rar.ae-rar-L { border-color: rgba(233, 196, 106, 0.7); color: #f6dc8f; }
.ae-tag-rar.ae-rar-M { border-color: rgba(255, 123, 134, 0.7); color: #ffb4bb; }
.ae-sheet-small { grid-template-columns: minmax(0, 1fr); width: min(94vw, 460px); justify-items: center; text-align: center; }
.ae-sheet-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  cursor: pointer;
  z-index: 2;
}
.ae-detail-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ae-tag { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(124, 199, 255, 0.3); font: 700 10px/1 var(--font-body, inherit); color: var(--ae-sky, #7cc7ff); }
.ae-kwline { display: grid; grid-template-columns: 22px auto 1fr; gap: 6px; align-items: start; font: 600 12px/1.3 var(--font-body, inherit); color: var(--text-dim); }
.ae-kwline-ico { width: 22px; height: 22px; object-fit: contain; }
.ae-kwline-name { font-weight: 800; color: var(--ae-gold-hi, #f6dc8f); white-space: nowrap; }
.ae-kwline-text { min-width: 0; }
.ae-flavor { font: italic 500 12px/1.4 var(--font-body, inherit); color: var(--text-faint); padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ae-preview { display: flex; flex-direction: column; gap: 6px; }
.ae-deltas { display: flex; flex-wrap: wrap; gap: 5px; }
.ae-delta { padding: 4px 8px; border-radius: 8px; font: 800 12px/1 var(--font-body, inherit); border: 1px solid transparent; }
.ae-delta.is-up.is-mine, .ae-delta.is-down.is-foe { color: var(--ae-up, #7cf0a8); background: rgba(124, 240, 168, 0.1); border-color: rgba(124, 240, 168, 0.3); }
.ae-delta.is-down.is-mine, .ae-delta.is-up.is-foe { color: var(--ae-down, #ff7b86); background: rgba(255, 123, 134, 0.1); border-color: rgba(255, 123, 134, 0.3); }
.ae-sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.ae-sheet-label { font: 700 10px/1 var(--font-body, inherit); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.ae-sheet-note { font: 600 12px/1.35 var(--font-body, inherit); color: var(--text-soft); }
.ae-sheet-note.is-warn { color: #ffb4bb; }
.ae-sheet-hint { font: 500 10px/1.3 var(--font-body, inherit); color: var(--text-faint); }
.ae-sheet-btns { display: flex; gap: 8px; }
.ae-sheet-btns .btn { flex: 1 1 0; }
.ae-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-mode {
  flex: 1 1 140px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(124, 199, 255, 0.28);
  background: rgba(14, 20, 48, 0.8);
  color: var(--text);
  font: 700 12px/1.25 var(--font-body, inherit);
  text-align: left;
  cursor: pointer;
}
.ae-mode.is-on { border-color: var(--ae-gold, #e9c46a); box-shadow: 0 0 0 1px var(--ae-gold, #e9c46a), 0 0 14px rgba(233, 196, 106, 0.25); }
.ae-mode:disabled { opacity: 0.45; cursor: not-allowed; }
.ae-play { min-height: 44px; }
.ae-sheet-title { font: 900 18px/1.2 var(--font-display, inherit); color: var(--ae-gold-hi, #f6dc8f); }
.ae-sheet-sub { display: flex; align-items: center; gap: 6px; font: 700 11px/1.2 var(--font-body, inherit); color: var(--text-faint); }
.ae-sheet-text { font: 600 13px/1.4 var(--font-body, inherit); color: var(--text-dim); }
.ae-struct-big { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ae-gold, #e9c46a); }
.ae-hero-big { width: min(260px, 70vw); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 2px solid var(--ae-gold, #e9c46a); }
.ae-doc-box { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px; border-radius: 12px; background: rgba(40, 28, 76, 0.45); border: 1px solid rgba(167, 139, 250, 0.3); }
.ae-doc-title { font: 800 13px/1.2 var(--font-body, inherit); color: var(--violet-300, #c4b5fd); margin-bottom: 3px; }
.ae-help-line { display: flex; gap: 8px; text-align: left; font: 600 13px/1.4 var(--font-body, inherit); color: var(--text-dim); }
.ae-help-mark { color: var(--ae-gold, #e9c46a); }

/* ================================================================ discover */
.ae-pick-back { padding: 14px; }
.ae-pick {
  width: min(96vw, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(160deg, rgba(26, 20, 60, 0.97), rgba(9, 11, 28, 0.97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(167, 139, 250, 0.2);
  animation: popIn var(--dur-med, 0.3s) var(--spring, ease) both;
}
.ae-pick-title { display: flex; align-items: center; gap: 8px; font: 900 20px/1.2 var(--font-display, inherit); color: var(--violet-300, #c4b5fd); }
.ae-pick-sub { font: 600 12px/1.35 var(--font-body, inherit); color: var(--text-dim); text-align: center; }
.ae-pick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; width: 100%; justify-content: center; }
.ae-pick-opt { display: block; min-width: 0; cursor: pointer; border-radius: 12px; outline: none; }
.ae-pick-card { transition: transform 0.18s, box-shadow 0.2s; animation: aeDeal 0.4s ease both; }
.ae-pick-opt:hover .ae-pick-card, .ae-pick-opt:focus-visible .ae-pick-card { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 2px var(--violet, #a78bfa), 0 0 26px rgba(167, 139, 250, 0.45); }
.ae-pick-info { display: none; min-width: 0; }
.ae-pick-name { font: 800 14px/1.2 var(--font-display, inherit); color: var(--ae-gold-hi, #f6dc8f); }
.ae-pick-text { margin-top: 3px; font: 600 12px/1.35 var(--font-body, inherit); color: var(--text-dim); }

/* ================================================================ chronicle (side column) */
.ae-log { max-height: 340px; }
.ae-log-row { display: grid; grid-template-columns: 20px 1fr; gap: 6px; padding: 4px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font: 600 12px/1.35 var(--font-body, inherit); color: var(--text-dim); }
.ae-log-row.is-mine { color: var(--text); }
.ae-log-ico { text-align: center; }
.ae-log-text { min-width: 0; overflow-wrap: anywhere; }

/* ================================================================ compact stages */
/* A narrow stage (phone portrait, or a desktop scene squeezed by the side column) stacks each
   strip into two rows and lets the extras wrap; the spires keep the middle of the field. */
@container aestage (max-width: 700px) {
  .ae-strip { flex-wrap: wrap; gap: 6px 8px; padding: 5px 7px; }
  .ae-hero { flex: 1 1 140px; }
  .ae-hero-ava { width: 34px; height: 34px; }
  .ae-res { gap: 4px; }
  .ae-resrow { padding: 2px 5px; }
  .ae-num { font-size: 12px; }
  .ae-stock .ae-num { font-size: 13px; }
  .ae-ico { width: 16px; height: 16px; }
  .ae-extras { flex: 1 1 100%; justify-content: flex-start; }
  .ae-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 5px; }
  .ae-gnum { font-size: 15px; }
  .ae-tick:not(.is-last) { display: none; }
}
/* A phone: every strip is one tight row (the fighter bar above already names the hero, so the strip
   keeps the avatar and the doctrine chip), the extras wrap under it only when there are any, and
   the spires get the height. */
/* A phone picks a hero from four portraits and reads the chosen one's house, doctrine and start
   once, under them: four tiles of full text do not fit a 390px stage. */
@container aestage (max-width: 620px) {
  .ae-place-card { padding: 10px; gap: 6px; }
  .ae-place-title { font-size: 17px; }
  .ae-place-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .ae-place-hero { padding: 0 0 4px; gap: 2px; border-radius: 10px; }
  .ae-place-hero:hover { transform: none; }
  .ae-place-heroimg { height: clamp(64px, 20cqh, 150px); }
  .ae-place-hero .ae-place-heroname { padding: 0 4px; font-size: 10px; text-align: center; }
  .ae-place-hero .ae-place-house, .ae-place-hero .ae-place-doc, .ae-place-hero .ae-place-start { display: none; }
  .ae-place-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ae-place-detail .ae-place-heroname { font-size: 15px; }
  .ae-place-foot { justify-content: center; gap: 6px 12px; }
  .ae-place-go { flex: 1 1 100%; }
}
@container aestage (max-width: 520px) {
  .ae-stage { gap: 4px; padding: 5px; }
  .ae-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "hero res vault" "extras extras extras";
    align-items: center;
    gap: 3px 6px;
    padding: 4px 6px;
  }
  .ae-hero { grid-area: hero; flex: none; gap: 5px; }
  .ae-hero-name { display: none; }
  .ae-hero-ava { width: 30px; height: 30px; }
  .ae-hero-doc { padding: 2px 5px 2px 2px; font-size: 9px; max-width: 86px; }
  .ae-res { grid-area: res; justify-content: center; gap: 3px; }
  .ae-resrow { padding: 1px 4px; gap: 1px; }
  .ae-prod .ae-num { font-size: 9px; }
  .ae-ico { width: 14px; height: 14px; }
  .ae-vault { grid-area: vault; padding: 3px 5px; gap: 4px; }
  .ae-vault-bar { width: 30px; }
  .ae-extras { grid-area: extras; justify-content: flex-start; gap: 5px; }
  .ae-struct { width: 26px; height: 26px; }
  .ae-trap { width: 18px; height: 26px; }
  .ae-backs { width: 34px; height: 22px; }
  .ae-back { width: 15px; height: 21px; left: calc(var(--k) * 3px); }
  .ae-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 4px; min-height: 34cqh; }
  .ae-gauge-sky { inset: 18px 0 0 0; }
  .ae-gtag { padding: 2px 5px; }
  .ae-gnum { font-size: 14px; }
  .ae-center { padding: 4px; gap: 3px; }
  .ae-center-top { gap: 4px; }
  .ae-pile-disc { display: none; }
  .ae-last-who { display: none; }
  .ae-tick { font-size: 10px; }
}
@container aestage (max-width: 460px) {
  .ae-vault-bar, .ae-oath-bar { width: 34px; }
  .ae-gcap { display: none; }
  .ae-hand { --gap: 4px; }
  .ae-pile { width: clamp(30px, 11cqw, 48px); }
}
@container aestage (max-height: 560px) {
  .ae-stage { gap: 4px; padding: 6px; }
  .ae-strip { padding: 3px 7px; }
  .ae-hero-ava { width: 30px; height: 30px; }
  .ae-hand-card { width: min(calc((100cqw - 20px - (var(--n) - 1) * var(--gap)) / var(--n)), calc(30cqh * 0.714), 140px); }
}

@media (max-width: 720px) {
  .ae-sheet { grid-template-columns: minmax(0, 1fr); }
  .ae-card.ae-sheet-face { width: min(170px, 46vw); margin: 0 auto; }
  .ae-info-name { text-align: center; padding: 0 30px; }
  .ae-pick-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ae-pick-opt {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background: rgba(255, 255, 255, 0.03);
  }
  .ae-pick-opt:hover .ae-pick-card, .ae-pick-opt:focus-visible .ae-pick-card { transform: none; }
  .ae-pick-opt:focus-visible, .ae-pick-opt:active { border-color: var(--violet, #a78bfa); box-shadow: 0 0 18px rgba(167, 139, 250, 0.35); }
  .ae-pick-info { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ae-hand-card, .ae-pick-card { animation: none; }
  .ae-spire-live, .ae-wall-live { transition: none; }
  .ae-gauge.is-hit { animation: none; }
  .ae-end-art, .ae-end-title { animation: none; }
  .ae-trap.is-hidden { animation: none; }
}

/* ================================================================ lobby setup (views/arcade_lobby.js) */
.chip-sq.al-ae-hero { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; }
.al-ae-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(233, 196, 106, 0.6); }
.al-ae-break { flex-basis: 100%; height: 0; }
.al-ae-deck { flex-basis: 100%; font: 600 11px/1.35 var(--font-body, inherit); color: var(--text-faint); }
.chip-sq.al-ae-vault { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; border-color: rgba(233, 196, 106, 0.55); color: var(--ae-gold-hi); }
.al-ae-doc { flex-basis: 100%; display: flex; align-items: flex-start; gap: 6px; padding: 2px 2px 4px; font: 600 11.5px/1.35 var(--font-body, inherit); color: var(--text-dim); }
.al-ae-docico { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
/* Four heroes, a doctrine, bot strength and the rules do not always fit the lobby's fixed panel. */
.al-setup.al-setup-ae { overflow-y: auto; }

/* ================================================================ the tutorial tour (views/aelor_tour.js) */
.ae-tour { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.ae-tour-ring {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(4, 6, 16, 0.6), 0 0 0 2px var(--ae-gold), 0 0 26px rgba(233, 196, 106, 0.55);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.ae-tour-bubble {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--ae-line);
  background: linear-gradient(160deg, rgba(20, 24, 54, 0.98), rgba(9, 11, 28, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  animation: popIn var(--dur-med, 0.3s) var(--spring, ease) both;
}
.ae-tour-title { font: 900 15px/1.2 var(--font-display, inherit); color: var(--ae-gold-hi); }
.ae-tour-text { font: 600 13px/1.45 var(--font-body, inherit); color: var(--text); }
.ae-tour-foot { display: flex; align-items: center; gap: 8px; }
.ae-tour-count { margin-right: auto; font: 700 11px/1 var(--font-mono, monospace); color: var(--text-faint); }
.ae-help-tour { align-self: flex-start; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ae-tour-ring { transition: none; }
  .ae-tour-bubble { animation: none; }
}