/* =====================================================================================
   Ato 07 · Torre Sem Fim — a troca de mundo (módulo a07 da página do Episódio 3.0)
   Só seletores com o prefixo ep3-a07- ou o id da própria seção (#torre). Contrato: temas/biolab/CONTRATO.md.
   Visual da Torre: temas/biolab/torre/TORRE-VISUAL.md (texturas da data.grf em assets/torre-mundo/).
   Tudo que anima mexe só em transform e opacity. Camadas: fundo do Biolab -1 · mundo da Torre 0 · main 1 ·
   barra 30 · contador 40 · cartão de item 60.
   ===================================================================================== */

@font-face {
  font-family: 'Cinzel';
  src: url('../../assets/torre-mundo/fontes/cinzel-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}

/* ------------------------------------------------------------------ arquivos (caminhos) */
.ep3-a07-fundo--pedra .ep3-a07-fundo-tex,
.ep3-a07-parede { background-image: url('../../assets/torre-mundo/fundo-parede.webp'); }
.ep3-a07-fundo--raizes .ep3-a07-fundo-tex { background-image: url('../../assets/torre-mundo/fundo-raizes.webp'); }
.ep3-a07-fundo--cosmos .ep3-a07-fundo-tex { background-image: url('../../assets/torre-mundo/fundo-cosmos.webp'); }
.ep3-a07-chao { background-image: url('../../assets/torre-mundo/piso-pedra.webp'); }
.ep3-a07-palco--raizes .ep3-a07-chao { background-image: url('../../assets/torre-mundo/piso-raizes.webp'); }
.ep3-a07-palco--topo .ep3-a07-chao { background-image: url('../../assets/torre-mundo/piso-topo.webp'); }
.ep3-a07-tocha-fogo i { background-image: url('../../assets/torre-mundo/chama-vermelha.webp'); }
.ep3-a07-tocha--verde .ep3-a07-tocha-fogo i { background-image: url('../../assets/torre-mundo/chama-verde.webp'); }
.ep3-a07-aura::before { background-image: url('../../assets/torre-mundo/brilho-vermelho.webp'); }
.ep3-a07-selo i { background-image: url('../../assets/torre-mundo/selo-verde.webp'); }
.ep3-a07-palco--topo .ep3-a07-selo i,
.ep3-a07-manto-selo i { background-image: url('../../assets/torre-mundo/selo-ouro.webp'); }
.ep3-a07-portao-pedra { background-image: url('../../assets/torre-mundo/portao-arco.webp'); }
.ep3-a07-anel { background-image: url('../../assets/torre-mundo/anel-portal.webp'); }
.ep3-a07-col,
.ep3-a07-lado-trilho,
.ep3-a07-nos::before { background-image: url('../../assets/torre-mundo/coluna.webp'); }
.ep3-a07-placa,
.ep3-a07-hud-placa,
.ep3-a07-chips-pedra li,
.ep3-a07-degraus li,
.ep3-a07-fila-chip { background-image: linear-gradient(180deg, rgba(12, 8, 6, .42), rgba(12, 8, 6, .8)), url('../../assets/torre-mundo/placa-viga.webp'); }
.ep3-a07-trecho-faixa span::after,
.ep3-a07-hud-fim,
.ep3-a07-fala::before { background-image: url('../../assets/torre-mundo/cranio.webp'); }
/* as texturas da Torre só baixam perto do ato: o a07.js põe html.ep3-a07-perto um viewport antes (na carga eram
   ~400 KB de imagens de um ato a 16 mil px do topo). Sem JS e com ?estatico=1 baixam já. */
html.ep3-js:not(.ep3-estatico):not(.ep3-a07-perto) :is(.ep3-a07-fundo-tex, .ep3-a07-parede, .ep3-a07-chao,
  .ep3-a07-tocha-fogo i, .ep3-a07-selo i, .ep3-a07-manto-selo i, .ep3-a07-portao-pedra, .ep3-a07-anel,
  .ep3-a07-col, .ep3-a07-lado-trilho, .ep3-a07-placa, .ep3-a07-hud-placa, .ep3-a07-chips-pedra li, .ep3-a07-degraus li,
  .ep3-a07-fila-chip, .ep3-a07-hud-fim),
html.ep3-js:not(.ep3-estatico):not(.ep3-a07-perto) .ep3-a07-aura::before,
html.ep3-js:not(.ep3-estatico):not(.ep3-a07-perto) .ep3-a07-nos::before,
html.ep3-js:not(.ep3-estatico):not(.ep3-a07-perto) .ep3-a07-trecho-faixa span::after,
html.ep3-js:not(.ep3-estatico):not(.ep3-a07-perto) .ep3-a07-fala::before { background-image: none !important; }
/* sem JS (e nas capturas com ?estatico=1) o próprio ato é a Torre: a camada fixa só entra com o a07.js */
#torre {
  background-image: linear-gradient(rgba(13, 9, 7, .58), rgba(13, 9, 7, .58)), url('../../assets/torre-mundo/fundo-parede.webp');
  background-size: auto, 512px 256px;
}
html.ep3-a07-js #torre { background: none; }

/* ------------------------------------------------------------------ paleta (da GRF) */
#torre,
.ep3-a07-mundo,
.ep3-a07-hud {
  --tr-breu: #0d0907;          /* sombra da calçada dg2_bottom01 */
  --tr-pedra-1: #1a120c;
  --tr-pedra-2: #2a1d14;
  --tr-pedra-3: #3b2314;
  --tr-ouro: #f1b10d;          /* luz do portão dg2_bosswall07 */
  --tr-ouro-claro: #f6d98b;
  --tr-chama: #f58e00;         /* miolo de torch_red */
  --tr-brasa: #c85e00;
  --tr-furia: #eb591d;         /* glow03: a aura vermelha do Enfurecido */
  --tr-sangue: #8a1410;        /* raízes do andar 100 */
  --tr-verde: #52eb28;         /* torch_green */
  --tr-tapete: #7b1d16;        /* tapete do topo */
  --tr-texto: #ecdcc0;
  --tr-texto-2: #bba586;       /* contraste >= 7:1 sobre a pedra escura */
  --tr-texto-3: #9a8466;
  --tr-linha: rgba(227, 211, 182, .13);
  --tr-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --tr-corpo: var(--ep3-f-texto, 'Oxanium', system-ui, sans-serif);
}

/* =====================================================================================
   1. A camada fixa do mundo (sobre o fundo do Biolab, sob o conteúdo)
   ===================================================================================== */
.ep3-a07-mundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  contain: strict;
}
.ep3-a07-mundo.is-ativo { will-change: opacity; }
/* a paralaxe (a07.js) move a parede, os trilhos e os halos por transform a cada quadro: camada própria só com o mundo
   aceso; apagado, nenhuma (desempenho, 15/10) */
.ep3-a07-mundo.is-ativo :is(.ep3-a07-fundo-tex, .ep3-a07-lado-trilho, .ep3-a07-lado-luz i) { will-change: transform; }
.ep3-a07-mundo-in { position: absolute; inset: 0; background: var(--tr-breu); }
.ep3-a07-fundo { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1s ease; }
.ep3-a07-fundo.is-on { opacity: 1; }
.ep3-a07-fundo-tex {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 768px);
  background-repeat: repeat;
}
.ep3-a07-fundo--pedra .ep3-a07-fundo-tex { background-size: 512px 256px; }
.ep3-a07-fundo--raizes .ep3-a07-fundo-tex { background-size: 768px 768px; background-position: center top; }
.ep3-a07-fundo--cosmos .ep3-a07-fundo-tex { height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ep3-a07-fundo::after { content: ''; position: absolute; inset: 0; }
.ep3-a07-fundo--pedra::after {
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(10, 7, 5, .58), rgba(10, 7, 5, 0) 75%),
    linear-gradient(180deg, rgba(8, 5, 3, .75), rgba(8, 5, 3, 0) 22%, rgba(8, 5, 3, 0) 78%, rgba(8, 5, 3, .8));
}
.ep3-a07-fundo--raizes::after {
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(8, 3, 2, .62), rgba(8, 3, 2, .1) 80%),
    linear-gradient(180deg, rgba(8, 3, 2, .7), rgba(8, 3, 2, 0) 25%, rgba(8, 3, 2, 0) 75%, rgba(8, 3, 2, .75));
}
.ep3-a07-fundo--cosmos::after { background: radial-gradient(55% 50% at 50% 50%, rgba(2, 2, 6, .55), rgba(2, 2, 6, 0) 80%); }
.ep3-a07-luz {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(28% 70% at 0% 55%, rgba(245, 142, 0, .16), rgba(245, 142, 0, 0) 70%),
    radial-gradient(28% 70% at 100% 45%, rgba(245, 142, 0, .14), rgba(245, 142, 0, 0) 70%);
  opacity: .55;
  animation: ep3-a07-ambiente 7.3s ease-in-out infinite;
}

/* colunas com tochas nas laterais (só onde sobra calha). Sem overflow: a luz da tocha passa do pilar e banha a parede
   dos dois lados (o trilho que sobra embaixo, da paralaxe, é cortado pela própria camada, que tem contain: strict). */
.ep3-a07-lado { position: absolute; top: 0; bottom: 0; width: 96px; display: none; }
.ep3-a07-lado--e { left: max(12px, calc((100vw - 1180px) / 2 - 116px)); }
.ep3-a07-lado--d { right: max(12px, calc((100vw - 1180px) / 2 - 116px)); }
.ep3-a07-lado-trilho {
  position: absolute;
  left: 20px;
  width: 56px;
  top: 0;
  height: calc(100% + 480px);
  background-size: 56px 120px;
  background-repeat: repeat-y;
  box-shadow: inset 8px 0 14px rgba(0, 0, 0, .7), inset -8px 0 14px rgba(0, 0, 0, .7);
}
.ep3-a07-lado-trilho::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 5, 3, .55), rgba(8, 5, 3, .15) 50%, rgba(8, 5, 3, .55)); }
.ep3-a07-lado .ep3-a07-tocha { --tam: 64px; --raio: clamp(240px, 17vw, 330px); left: -4px; z-index: 1; }
.ep3-a07-lado .ep3-a07-tocha:nth-child(1) { top: 150px; }
.ep3-a07-lado .ep3-a07-tocha:nth-child(2) { top: 630px; }
.ep3-a07-lado .ep3-a07-tocha:nth-child(3) { top: 1110px; }
.ep3-a07-lado .ep3-a07-tocha:nth-child(4) { top: 1590px; }
/* a luz nas arestas do pilar (o trilho tem 56 px, a tocha começa 4 px antes dele) e um pouco na face */
.ep3-a07-lado .ep3-a07-tocha::before {
  content: '';
  position: absolute;
  left: 4px;
  width: 56px;
  top: calc(var(--tam) * .45 - 190px);
  height: 380px;
  background:
    radial-gradient(4px 44% at 0 50%, rgba(255, 196, 120, .62), rgba(255, 150, 60, 0)),
    radial-gradient(4px 44% at 100% 50%, rgba(255, 196, 120, .62), rgba(255, 150, 60, 0)),
    radial-gradient(16px 40% at 0 50%, rgba(245, 140, 40, .22), rgba(245, 140, 40, 0)),
    radial-gradient(16px 40% at 100% 50%, rgba(245, 140, 40, .22), rgba(245, 140, 40, 0)),
    radial-gradient(70% 36% at 50% 50%, rgba(255, 160, 60, .26), rgba(255, 140, 40, .08) 60%, rgba(255, 140, 40, 0));
}
/* a luz das tochas dos pilares: um halo por tocha, fora do trilho (o trilho anda pela paralaxe e é um grupo à parte;
   aqui o halo soma à parede, com plus-lighter, e os tijolos aparecem acesos em vez de cobertos por uma névoa). Cada
   halo recebe do a07.js o mesmo translate do trilho; o bruxuleio fica no ::before. Sem caixa que o corte. */
.ep3-a07-lado-luz { position: absolute; top: 0; bottom: 0; width: 96px; display: none; pointer-events: none; --raio: clamp(240px, 17vw, 330px); }
.ep3-a07-lado-luz--e { left: max(12px, calc((100vw - 1180px) / 2 - 116px)); }
.ep3-a07-lado-luz--d { right: max(12px, calc((100vw - 1180px) / 2 - 116px)); }
.ep3-a07-lado-luz i {
  position: absolute;
  left: calc(48px - var(--raio));
  top: calc(179px - var(--raio));
  width: calc(var(--raio) * 2);
  height: calc(var(--raio) * 2);
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  transition: opacity .4s ease;
}
.ep3-a07-lado-luz i:nth-child(2) { top: calc(659px - var(--raio)); }
.ep3-a07-lado-luz i:nth-child(3) { top: calc(1139px - var(--raio)); }
.ep3-a07-lado-luz i:nth-child(4) { top: calc(1619px - var(--raio)); }
.ep3-a07-lado-luz i::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side,
    rgba(255, 214, 140, .8) 0%, rgba(255, 170, 70, .6) 6%, rgba(245, 135, 30, .42) 15%, rgba(230, 108, 18, .28) 28%,
    rgba(210, 88, 12, .17) 42%, rgba(180, 70, 10, .09) 58%, rgba(150, 56, 8, .035) 76%, rgba(150, 56, 8, 0) 100%);
  animation: ep3-a07-bruxuleio 3.9s ease-in-out infinite;
}
.ep3-a07-lado-luz i:nth-child(2n)::before { animation-duration: 4.7s; animation-delay: -1.9s; }
.ep3-a07-lado-luz i:nth-child(3n)::before { animation-duration: 3.3s; animation-delay: -2.6s; }
.ep3-a07-lado-luz--d i::before { animation-delay: -3.1s; }
.ep3-a07-lado .ep3-a07-tocha-luz { display: none; }
@media (min-width: 1400px) { .ep3-a07-lado, .ep3-a07-lado-luz { display: block; } }
.ep3-a07-lado { transition: opacity .4s ease; }
.ep3-a07-mundo.is-saindo .ep3-a07-lado, .ep3-a07-mundo.is-saindo .ep3-a07-lado-luz i { opacity: 0; }

.ep3-a07-brasas i {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffc27a;
  box-shadow: 0 0 6px 1px rgba(245, 142, 0, .9);
  opacity: 0;
  animation: ep3-a07-sobe var(--t) linear infinite;
  animation-delay: var(--d);
}

/* =====================================================================================
   2. O contador de andar
   ===================================================================================== */
.ep3-a07-hud {
  --odo-h: 40px;
  --p: 0;
  position: fixed;
  z-index: 40;
  /* fora do pilar da direita, no meio da calha que sobra além dele: nunca na frente de uma tocha (a coluna vai de
     (100vw - 1180px) / 2 - 116px até 96 px antes) */
  right: max(10px, calc(((100vw - 1180px) / 2 - 116px - 108px) / 2));
  top: 50%;
  transform: translate3d(12px, -50%, 0);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  transition: opacity .4s ease, transform .4s ease;
  font-family: var(--tr-display);
}
.ep3-a07-hud.is-on { opacity: 1; transform: translate3d(0, -50%, 0); }
.ep3-a07-hud-placa {
  position: relative;
  width: 108px;
  padding: 11px 8px 10px;
  text-align: center;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(241, 177, 13, .3);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .14), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 34px rgba(0, 0, 0, .65);
}
.ep3-a07-hud-k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tr-texto-2);
  margin-bottom: 4px;
  padding-left: .34em;
}
.ep3-a07-odo {
  display: flex;
  justify-content: center;
  height: var(--odo-h);
  overflow: hidden;
  font-size: calc(var(--odo-h) * .86);
  font-weight: 700;
  line-height: var(--odo-h);
  color: var(--tr-ouro-claro);
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(241, 177, 13, .4);
  transition: opacity .3s ease;
}
.ep3-a07-odo-d { width: .74em; height: var(--odo-h); overflow: hidden; text-align: center; transition: opacity .3s; }
.ep3-a07-odo-d i { display: block; font-style: normal; transition: transform .32s cubic-bezier(.25, .8, .25, 1); }
.ep3-a07-odo-d b { display: block; height: var(--odo-h); font-weight: inherit; color: inherit; }
.ep3-a07-odo-d.is-zero { opacity: .22; }
.ep3-a07-hud-topo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: var(--odo-h);
  line-height: var(--odo-h);
  font-size: calc(var(--odo-h) * .62);
  font-weight: 700;
  letter-spacing: .12em;
  color: #ffd2a8;
  text-shadow: 0 0 16px rgba(235, 89, 29, .7), 0 1px 0 #000;
  opacity: 0;
  transition: opacity .3s ease;
}
.ep3-a07-hud.is-topo .ep3-a07-odo { opacity: 0; }
.ep3-a07-hud.is-topo .ep3-a07-hud-topo { opacity: 1; }
.ep3-a07-hud-poco {
  position: relative;
  width: 8px;
  height: 200px;
  background: linear-gradient(90deg, #0b0705, #1d140e 50%, #0b0705);
  border: 1px solid rgba(241, 177, 13, .25);
  box-shadow: 0 0 0 3px rgba(13, 9, 7, .8);
}
.ep3-a07-hud-nivel {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: scaleY(var(--p));
  background: linear-gradient(0deg, var(--tr-brasa), var(--tr-ouro) 70%, #fff1c8);
  box-shadow: 0 0 10px rgba(241, 177, 13, .55);
  transition: transform .3s ease;
}
.ep3-a07-hud-marca {
  position: absolute;
  left: 14px;
  bottom: calc(var(--p) * 100%);
  transform: translateY(50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--tr-texto-3);
  letter-spacing: .06em;
}
.ep3-a07-hud-marca::before { content: ''; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px; background: rgba(241, 177, 13, .55); }
.ep3-a07-hud-fim {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 26px;
  height: 23px;
  margin-left: -13px;
  background-size: 100% 100%;
  opacity: .85;
}
.ep3-a07-hud.is-topo .ep3-a07-hud-fim { opacity: 1; }
/* abaixo de 1700 o contador vira uma barra de 44 px sob a de atos (a calha não comporta o pilar e o contador lado a
   lado; em pé, ele ficava na frente das tochas do pilar da direita): as âncoras dentro da Torre param abaixo das duas */
@media (max-width: 1699px) {
  /* os 44 px do contador vão nos próprios elementos da Torre (especificidade zero: quem já tem scroll-margin mantém),
     não num scroll-padding do <html> trocado com o mundo: mudar o estilo do <html> recalculava a página inteira */
  :where(html.ep3-a07-js #torre) * { scroll-margin-top: 44px; }
}
/* com o menu de atos aberto, o contador sai do caminho */
.ep3-barra.is-aberta ~ .ep3-a07-hud { opacity: 0; }

/* abaixo de 1700: barra fina logo abaixo da barra de atos */
@media (max-width: 1699px) {
  .ep3-a07-hud {
    --odo-h: 26px;
    left: 0;
    right: 0;
    top: var(--ep3-hud-top, 0px);
    transform: translate3d(0, -100%, 0);
    flex-direction: row;
    gap: 14px;
    height: 44px;
    padding: 0 max(16px, calc((100vw - 1180px) / 2 + 24px));
    background: linear-gradient(180deg, rgba(13, 9, 7, .96), rgba(13, 9, 7, .88));
    border-bottom: 1px solid rgba(241, 177, 13, .28);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  }
  .ep3-a07-hud.is-on { transform: translate3d(0, 0, 0); }
  /* a barra do contador é opaca: o texto das salas nunca aparece por baixo dela */
  .ep3-a07-hud {
    background: rgb(14, 10, 6);   /* opaca de fato: a 94% o texto claro das salas ainda vazava por baixo no celular */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6);
  }
  .ep3-a07-hud-placa { display: flex; align-items: center; gap: 8px; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .ep3-a07-hud-k { margin: 0; }
  .ep3-a07-hud-topo { bottom: auto; top: 0; left: auto; right: 0; width: 80px; text-align: right; }
  .ep3-a07-hud-poco { flex: 1; width: auto; height: 6px; margin-right: 40px; }
  .ep3-a07-hud-nivel { transform-origin: 0 50%; transform: scaleX(var(--p)); }
  .ep3-a07-hud-marca { left: calc(var(--p) * 100%); bottom: auto; top: 10px; transform: translateX(-50%); }
  .ep3-a07-hud-marca::before { left: 50%; top: -9px; width: 1px; height: 7px; }
  .ep3-a07-hud-fim { bottom: auto; left: auto; right: -40px; top: 50%; margin: -11px 0 0; width: 24px; height: 21px; }
}
@media (max-width: 559px) {
  .ep3-a07-hud-marca { display: none; }
  .ep3-a07-hud-k { letter-spacing: .24em; }
}

/* =====================================================================================
   3. A seção do ato
   ===================================================================================== */
#torre.ep3-ato {
  position: relative;
  padding: 0;                       /* os dois portões (120 px) fazem a borda do ato */
  scroll-margin-top: -212px;        /* pelo índice, o cabeçalho para logo abaixo da barra, já depois do portão (236 + 16) */
  color: var(--tr-texto);
  font-family: var(--tr-corpo);
  font-size: 16px;
  line-height: 1.6;
}
:where(#torre) strong, :where(#torre) b { color: #fff3dc; font-weight: 700; }
#torre code {
  font: 600 .9em/1 var(--ep3-f-mono, ui-monospace, monospace);
  color: var(--tr-ouro-claro);
  background: rgba(241, 177, 13, .1);
  border: 1px solid rgba(241, 177, 13, .3);
  border-radius: 2px;
  padding: .1em .42em;
}
#torre :focus-visible { outline: 2px solid var(--tr-ouro); outline-offset: 3px; }
#torre ::selection { background: rgba(241, 177, 13, .35); color: #fff; }
/* o chip de item da página, na pele da Torre */
#torre .ep3-mini {
  border-color: rgba(241, 177, 13, .38);
  background: rgba(20, 13, 9, .82);
  color: var(--tr-ouro-claro);
  vertical-align: baseline;
}
#torre .ep3-mini:hover, #torre .ep3-mini.is-aberto { border-color: var(--tr-ouro); background: rgba(42, 29, 20, .95); }
#torre .ep3-mini .ep3-mini-nome { color: inherit; }
#torre .ep3-el { font-size: .7rem; padding: 1px 6px; }

/* ------------------------------------------------------------------ cabeça do ato
   o 07 entalhado | sub, h2 e lede | a arte do Nacht Sieger num quadro entre duas tochas */
.ep3-a07-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'num txt arte';
  column-gap: clamp(24px, 2.6vw, 36px);
  align-items: center;
}
.ep3-a07-cab-txt { grid-area: txt; }
.ep3-a07-num {
  grid-area: num;
  margin: 0;
  font: 700 clamp(96px, 9.2vw, 136px)/.8 var(--tr-display);
  letter-spacing: -.03em;
  user-select: none;
}
.ep3-a07-num span {
  display: block;
  padding: .06em 0 .02em;
  background: linear-gradient(180deg, rgba(255, 236, 190, .2), rgba(241, 177, 13, .04) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(241, 177, 13, .66);
  filter: drop-shadow(0 0 22px rgba(241, 177, 13, .28));
}
.ep3-a07-sub {
  margin: 0 0 12px;
  font: 700 .7rem/1.7 var(--tr-corpo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tr-ouro-claro);
}
.ep3-a07-sub code { letter-spacing: .02em; text-transform: none; }
.ep3-a07-h2 {
  margin: 0;
  font: 700 clamp(2.3rem, 3.7vw, 3.3rem)/1.02 var(--tr-display);
  letter-spacing: .01em;
  background: linear-gradient(180deg, #fff2c9 0%, #f0c46a 46%, #a8681f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 22px rgba(245, 142, 0, .22));
}
@media (min-width: 1024px) { .ep3-a07-h2 { white-space: nowrap; } }
.ep3-a07-lede { margin: 18px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.6; max-width: 34em; color: var(--tr-texto); }

/* o quadro: moldura entalhada, a luz das duas tochas na parede, a arte em 2x (escala inteira) */
.ep3-a07-arte { grid-area: arte; position: relative; isolation: isolate; margin: 0; padding: 0 34px; }
.ep3-a07-arte::before {
  content: '';
  position: absolute;
  inset: -36px -12px -8px;
  z-index: -1;
  background:
    radial-gradient(22% 46% at 7% 34%, rgba(245, 142, 0, .3), rgba(245, 142, 0, 0) 75%),
    radial-gradient(22% 46% at 93% 34%, rgba(245, 142, 0, .3), rgba(245, 142, 0, 0) 75%),
    radial-gradient(50% 60% at 50% 46%, rgba(13, 9, 7, .7), rgba(13, 9, 7, 0) 80%);
}
.ep3-a07-arte-moldura {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  background: linear-gradient(180deg, #3b2818, #160e09);
  border: 1px solid rgba(241, 177, 13, .42);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 5px rgba(42, 29, 20, .95), inset 0 0 0 6px rgba(241, 177, 13, .22),
    0 26px 54px rgba(0, 0, 0, .65), 0 0 40px rgba(245, 142, 0, .12);
}
.ep3-a07-arte-moldura::after {
  content: '';
  position: absolute;
  inset: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 26px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.ep3-a07-arte img { display: block; flex: none; width: 360px; max-width: none; height: 256px; }
.ep3-a07-arte figcaption {
  margin-top: 10px;
  text-align: center;
  font: 600 .74rem/1.4 var(--tr-display);
  letter-spacing: .12em;
  color: var(--tr-texto-2);
}
.ep3-a07-tocha--quadro { --tam: 40px; --raio: 120px; --f: .85; top: 26%; z-index: 2; }
/* a luz do quadro passa por trás do texto do cabeçalho, nunca por cima dele */
.ep3-a07-cab-txt { position: relative; z-index: 1; }
.ep3-a07-tocha--quadro.ep3-a07-tocha--e { left: -6px; }
.ep3-a07-tocha--quadro.ep3-a07-tocha--d { right: -6px; }

/* ------------------------------------------------------------------ o portão como divisória (entrada e saída)
   Saída: 120 px (84 no celular), o arco com o portal aceso no centro e um fio de ouro até as bordas. Entrada: o portão
   grande (200 px; 120 no celular) com uma tocha de cada lado, o halo dourado atrás e o fio no chão. O a07.js prende a
   troca de mundo a eles: a pedra dissolve de cima para baixo no portão de entrada e some no de saída. */
.ep3-a07-portal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 120px;
  margin: 0 auto;
  max-width: var(--ep3-largura, 1180px);
  padding-inline: var(--ep3-calha, 24px);
}
.ep3-a07-portal--entra { margin-bottom: 40px; }
.ep3-a07-portal--sai { margin-top: 44px; }
.ep3-a07-portal-fio {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(241, 177, 13, 0), rgba(241, 177, 13, .55));
  box-shadow: 0 0 10px rgba(241, 177, 13, .25);
}
.ep3-a07-portal-fio:last-child { background: linear-gradient(90deg, rgba(241, 177, 13, .55), rgba(241, 177, 13, 0)); }
.ep3-a07-portal .ep3-a07-portao--portal { --esc: .444; flex: none; margin: 0; gap: 0; }
.ep3-a07-portal .ep3-a07-portao-n { display: none; }
.ep3-a07-portal .ep3-a07-anel { bottom: -8px; }
/* o chão do portão: a luz do portal no piso */
.ep3-a07-portal::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 220px;
  height: 26px;
  margin-left: -110px;
  background: radial-gradient(closest-side, rgba(241, 177, 13, .32), rgba(241, 177, 13, 0));
  pointer-events: none;
}
@media (max-width: 759px) {
  .ep3-a07-portal { height: 96px; gap: 12px; }
  .ep3-a07-portal .ep3-a07-portao--portal { --esc: .37; }
  .ep3-a07-portal--entra { margin-bottom: 24px; }
  .ep3-a07-portal--sai { margin-top: 32px; }
}

/* ------------------------------------------------------------------ bloco que fecha no celular (regras da entrada, I a IV) */
.ep3-a07-det > summary { list-style: none; cursor: var(--ep3-mao); }
.ep3-a07-det > summary::-webkit-details-marker { display: none; }
.ep3-a07-det-sum {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(26, 18, 12, .94), rgba(13, 9, 7, .94));
  border: 1px solid var(--tr-linha);
  border-left: 3px solid rgba(241, 177, 13, .5);
}
.ep3-a07-det-k { font: 700 .74rem/1.3 var(--tr-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tr-ouro-claro); }
.ep3-a07-det-tit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.ep3-a07-det-tit span { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: .9rem; line-height: 1.3; color: #fff0d0; }
.ep3-a07-det-tit i { flex: none; width: 1.6em; font: 700 .9rem/1 var(--tr-display); font-style: normal; color: #e9b44c; }
.ep3-a07-det-mais { display: flex; align-items: center; gap: 8px; font: 700 .7rem/1 var(--tr-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tr-ouro); }
.ep3-a07-det-mais::before { content: '+'; font-size: 1rem; letter-spacing: 0; }
.ep3-a07-det-fecha { display: none; }
.ep3-a07-det[open] .ep3-a07-det-abre, .ep3-a07-det[open] .ep3-a07-det-tit { display: none; }
.ep3-a07-det[open] .ep3-a07-det-fecha { display: inline; }
.ep3-a07-det[open] .ep3-a07-det-mais::before { content: '\2212'; }
.ep3-a07-det[open] > .ep3-a07-det-sum { margin-bottom: 12px; }
.ep3-a07-det-sum:hover { border-left-color: var(--tr-ouro); }
/* a partir de 1024 o bloco está sempre aberto e o sumário não aparece */
@media (min-width: 1024px) {
  .ep3-a07-det > .ep3-a07-det-sum { display: none; }
}
@media (max-width: 359px) { .ep3-a07-det-tit { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 559px) { .ep3-a07-det-tit span { font-size: .84rem; } }

/* ------------------------------------------------------------------ portão (arco + luz + portal) */
.ep3-a07-portao { --esc: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto; }
.ep3-a07-portao-arco { position: relative; width: calc(208px * var(--esc)); height: calc(216px * var(--esc)); flex: none; }
.ep3-a07-portao-pedra { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; z-index: 2; }
.ep3-a07-portao-luz {
  position: absolute;
  left: 32.6%;
  right: 33.6%;
  top: 26.5%;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: linear-gradient(180deg, #fff1b0 0%, #ffd34d 22%, var(--tr-ouro) 55%, var(--tr-chama) 100%);
  box-shadow: 0 0 calc(30px * var(--esc)) calc(6px * var(--esc)) rgba(241, 177, 13, .45);
  opacity: .08;
  transition: opacity 1.4s ease;
  z-index: 1;
}
.ep3-a07-portao.is-aceso .ep3-a07-portao-luz { opacity: 1; animation: ep3-a07-pulso 3.4s ease-in-out 1.4s infinite alternate; }
html:not(.ep3-a07-js) .ep3-a07-portao-luz { opacity: 1; }
.ep3-a07-anel {
  position: absolute;
  left: 50%;
  bottom: calc(-22px * var(--esc));
  width: calc(150px * var(--esc));
  height: calc(75px * var(--esc));
  margin-left: calc(-75px * var(--esc));
  background-size: 100% 100%;
  opacity: 0;
  transform: scale(.15);
  z-index: 3;
}
.ep3-a07-portao.is-aceso .ep3-a07-anel { animation: ep3-a07-anel 2.4s linear infinite; }
.ep3-a07-portao.is-aceso .ep3-a07-anel:nth-of-type(3) { animation-delay: .8s; }
.ep3-a07-portao.is-aceso .ep3-a07-anel:nth-of-type(4) { animation-delay: 1.6s; }
.ep3-a07-portao-n {
  margin: 8px 0 0;
  font: 700 14px/1 var(--tr-display);
  letter-spacing: .26em;
  color: var(--tr-ouro-claro);
  text-shadow: 0 0 14px rgba(241, 177, 13, .45);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ tocha
   A luz é um gradiente radial pronto (sem imagem, sem blur): quente e forte junto da chama, âmbar no meio do caminho e
   quase nada na borda do --raio. Nenhum ancestral a corta (o pilar lateral não tem overflow; na sala, a borda é a da
   própria sala). --f escala a força. O bruxuleio mexe só em opacity e transform, lento e irregular (sem degrau), e
   para fora da tela e sem movimento. */
.ep3-a07-tocha { --tam: 48px; --raio: calc(var(--tam) * 3); --f: 1; position: absolute; width: var(--tam); height: calc(var(--tam) * 1.45); pointer-events: none; }
.ep3-a07-tocha-luz {
  position: absolute;
  left: 50%;
  top: calc(var(--tam) * .45);
  width: calc(var(--raio) * 2);
  height: calc(var(--raio) * 2);
  margin: calc(var(--raio) * -1) 0 0 calc(var(--raio) * -1);
  background:
    radial-gradient(circle calc(var(--tam) * .95) at 50% 50%, rgba(255, 226, 160, .42), rgba(255, 180, 80, .14) 55%, rgba(255, 160, 60, 0)),
    radial-gradient(closest-side,
    rgba(255, 214, 140, calc(.8 * var(--f))) 0%,
    rgba(255, 170, 70, calc(.6 * var(--f))) 6%,
    rgba(245, 135, 30, calc(.42 * var(--f))) 15%,
    rgba(230, 108, 18, calc(.28 * var(--f))) 28%,
    rgba(210, 88, 12, calc(.17 * var(--f))) 42%,
    rgba(180, 70, 10, calc(.09 * var(--f))) 58%,
    rgba(150, 56, 8, calc(.035 * var(--f))) 76%,
    rgba(150, 56, 8, 0) 100%);
  /* soma ao que está atrás dentro do mesmo grupo (a parede da sala); onde não há nada atrás, é o halo comum */
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  animation: ep3-a07-bruxuleio 3.9s ease-in-out infinite;
}
.ep3-a07-tocha--verde .ep3-a07-tocha-luz {
  background:
    radial-gradient(circle calc(var(--tam) * .95) at 50% 50%, rgba(214, 255, 186, .4), rgba(140, 250, 90, .13) 55%, rgba(120, 240, 70, 0)),
    radial-gradient(closest-side,
    rgba(206, 255, 164, calc(.72 * var(--f))) 0%,
    rgba(146, 250, 84, calc(.54 * var(--f))) 6%,
    rgba(98, 236, 46, calc(.38 * var(--f))) 15%,
    rgba(82, 216, 38, calc(.25 * var(--f))) 28%,
    rgba(68, 186, 32, calc(.15 * var(--f))) 42%,
    rgba(58, 156, 28, calc(.08 * var(--f))) 58%,
    rgba(50, 130, 25, calc(.03 * var(--f))) 76%,
    rgba(50, 130, 25, 0) 100%);
}
/* tochas vizinhas não respiram juntas */
.ep3-a07-tocha:nth-child(2n) > .ep3-a07-tocha-luz,
.ep3-a07-tocha--d > .ep3-a07-tocha-luz { animation-duration: 4.7s; animation-delay: -1.9s; }
.ep3-a07-tocha:nth-child(3n) > .ep3-a07-tocha-luz { animation-duration: 3.3s; animation-delay: -2.6s; }
.ep3-a07-tocha-fogo { position: absolute; left: 0; top: 0; width: var(--tam); height: var(--tam); overflow: hidden; }
.ep3-a07-tocha-fogo i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1300%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: ep3-a07-chama 1.3s steps(13) infinite;
}
.ep3-a07-tocha-suporte {
  position: absolute;
  left: 30%;
  width: 40%;
  top: calc(var(--tam) * .9);
  height: calc(var(--tam) * .5);
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 220, 160, .12) 45%, rgba(0, 0, 0, .55)), linear-gradient(180deg, #4a3423, #1a110b);
  clip-path: polygon(0 0, 100% 0, 72% 38%, 60% 100%, 40% 100%, 28% 38%);
}

/* ------------------------------------------------------------------ linha do tempo do ato */
.ep3-a07-nos { --a07-pad: 64px; list-style: none; margin: 48px 0 0; padding: 0 0 0 var(--a07-pad); position: relative; }
.ep3-a07-nos::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 6px;
  bottom: 0;
  width: 20px;
  background-size: 20px auto;
  background-repeat: repeat-y;
  opacity: .55;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(0, 0, 0, .6);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 80px), transparent);
}
.ep3-a07-no { position: relative; padding-bottom: 52px; }
/* nó com um bloco ao lado do cabeçalho (a sequência do topo): a partir de 1024, à direita; antes, logo abaixo */
.ep3-a07-no-lado { margin-bottom: 22px; }
@media (min-width: 1024px) {
  .ep3-a07-no.tem-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-areas: 'cab lado' 'corpo corpo';
    column-gap: 48px;
    align-items: end;
  }
  .ep3-a07-no.tem-lado > .ep3-a07-no-cab { grid-area: cab; }
  .ep3-a07-no.tem-lado > .ep3-a07-no-lado { grid-area: lado; margin-bottom: 26px; }
  .ep3-a07-no.tem-lado > .ep3-a07-no-corpo { grid-area: corpo; }
}
.ep3-a07-no:last-child { padding-bottom: 0; }
.ep3-a07-pino {
  position: absolute;
  left: -54px;
  top: 4px;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #7b5634, #2a1a0e 70%);
  border: 1px solid rgba(241, 177, 13, .4);
  box-shadow: 0 0 0 4px rgba(13, 9, 7, .9);
}
.ep3-a07-no.is-marco > .ep3-a07-pino { --tam: 40px; left: -60px; top: -10px; width: var(--tam); height: var(--tam); transform: none; background: none; border: 0; box-shadow: none; }
.ep3-a07-no.is-marco > .ep3-a07-pino::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 34px;
  height: 8px;
  background: linear-gradient(180deg, #4a3423, #1a110b);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.ep3-a07-no-cab { max-width: 760px; margin-bottom: 20px; }
.ep3-a07-etq {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px 5px;
  font: 700 11px/1 var(--tr-display);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tr-ouro-claro);
  border: 1px solid rgba(241, 177, 13, .35);
  background: linear-gradient(180deg, rgba(42, 29, 20, .9), rgba(20, 14, 10, .9));
}
.ep3-a07-no.is-marco .ep3-a07-etq { color: #ffe1c2; border-color: rgba(235, 89, 29, .55); background: linear-gradient(180deg, rgba(110, 22, 14, .85), rgba(52, 12, 8, .9)); }
.ep3-a07-h3 { margin: 0; font: 700 clamp(1.45rem, 2.4vw, 1.95rem)/1.2 var(--tr-display); color: #f7e7c6; text-wrap: balance; }
.ep3-a07-txt { margin: 14px 0 0; color: var(--tr-texto); max-width: 64ch; }
.ep3-a07-linha { margin: 18px 0 0; color: var(--tr-texto-2); max-width: 70ch; }
#torre .ep3-a07-no-corpo > * + * { margin-top: 20px; }

/* modos, chips, regras */
.ep3-a07-modos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ep3-a07-modos li {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(26, 18, 12, .94), rgba(13, 9, 7, .94));
  border: 1px solid var(--tr-linha);
  border-left: 3px solid rgba(241, 177, 13, .5);
}
.ep3-a07-modos b { color: var(--tr-ouro-claro); }
.ep3-a07-chips-pedra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ep3-a07-chips-pedra li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 5px;
  font: 600 .68rem/1.4 var(--tr-corpo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tr-texto-2);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(241, 177, 13, .24);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .1);
}
.ep3-a07-chips-pedra b { color: #fff0d0; letter-spacing: .02em; text-transform: none; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; }
.ep3-a07-chips-pedra .ep3-mini { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.ep3-a07-regras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tr-linha); border: 1px solid var(--tr-linha); }
.ep3-a07-regras li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 16px 18px; background: rgba(15, 10, 7, .95); }
.ep3-a07-regras p { margin: 0; }
.ep3-a07-regra-n { font: 700 34px/1 var(--tr-display); color: var(--tr-ouro-claro); text-align: center; text-shadow: 0 0 14px rgba(241, 177, 13, .3); }
.ep3-a07-regra-n small { font-size: 15px; margin-left: 2px; color: var(--tr-texto-2); }
.ep3-a07-regra-n--img { display: grid; place-items: center; }
.ep3-a07-regra-cranio { width: 46px; height: auto; opacity: .9; filter: drop-shadow(0 0 8px rgba(235, 89, 29, .35)); }
.ep3-a07-regras .ep3-a07-regra-r { font: 700 11px/1 var(--tr-display); letter-spacing: .26em; text-transform: uppercase; color: var(--tr-texto-3); margin-bottom: 6px; }

/* mecânicas I a IV */
.ep3-a07-mecs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ep3-a07-mecs li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px 18px 18px 14px;
  background: linear-gradient(180deg, rgba(26, 18, 12, .94), rgba(13, 9, 7, .94));
  border: 1px solid var(--tr-linha);
}
.ep3-a07-mecs i { font: 700 26px/1 var(--tr-display); font-style: normal; color: #e9b44c; text-shadow: 0 1px 0 #000, 0 0 14px rgba(241, 177, 13, .35); text-align: center; padding-top: 2px; }
.ep3-a07-mecs b { color: var(--tr-ouro-claro); }
.ep3-a07-aviso {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(235, 89, 29, .45);
  background: linear-gradient(90deg, rgba(110, 22, 14, .55), rgba(30, 10, 6, .7));
  color: #ffd9c4;
  font-size: .9rem;
}
.ep3-a07-aviso p::before { content: '! '; font-family: var(--tr-display); font-weight: 700; color: var(--tr-furia); }

/* ------------------------------------------------------------------ a subida: trechos */
.ep3-a07-trecho + .ep3-a07-trecho { margin-top: 32px; }
.ep3-a07-trecho-cab {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  grid-template-areas: 'planta txt chips' 'planta k k';
  gap: 0 26px;
  align-items: center;
  padding: 16px 20px 14px 16px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(24, 16, 11, .95), rgba(12, 8, 6, .95));
  border: 1px solid var(--tr-linha);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.ep3-a07-trecho-cab > .ep3-a07-planta { grid-area: planta; }
.ep3-a07-trecho-txt {
  grid-area: txt;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'faixa id' 'frase frase';
  column-gap: 22px;
  align-items: center;
}
.ep3-a07-trecho-txt > .ep3-a07-trecho-faixa { grid-area: faixa; }
.ep3-a07-trecho-id { grid-area: id; min-width: 0; padding-left: 20px; border-left: 1px solid rgba(241, 177, 13, .2); }
.ep3-a07-trecho-txt > .ep3-a07-trecho-frase { grid-area: frase; }
.ep3-a07-trecho-cab > .ep3-a07-chips { grid-area: chips; }
.ep3-a07-trecho-cab > .ep3-a07-trecho-k { grid-area: k; }
.ep3-a07-planta {
  position: relative;
  width: 124px;
  aspect-ratio: 1;
  background: #000;
  border: 1px solid rgba(241, 177, 13, .3);
  box-shadow: 0 0 0 4px rgba(13, 9, 7, .9), inset 0 0 30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.ep3-a07-planta-img { display: block; width: 100%; height: 100%; }
.ep3-a07-planta i {
  position: absolute;
  left: calc(1% + var(--c) * 21.25%);
  top: calc(1% + var(--r) * 21.25%);
  width: 12.5%;
  height: 12.5%;
  display: flex;
  align-items: center;
}
.ep3-a07-planta i::before {
  content: '';
  position: absolute;
  inset: 24%;
  transform: rotate(45deg);
  border: 1px solid rgba(241, 177, 13, .9);
  box-shadow: 0 0 8px rgba(241, 177, 13, .7);
}
.ep3-a07-planta i.is-furia::before { border-color: #ff8a5c; box-shadow: 0 0 10px rgba(235, 89, 29, .95), inset 0 0 6px rgba(235, 89, 29, .7); }
.ep3-a07-planta i b {
  position: absolute;
  right: 100%;
  margin-right: 1px;
  font: 700 9px/1 var(--tr-display);
  color: #fff3d6;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000;
}
.ep3-a07-planta-aqui {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 12.5%;
  height: 12.5%;
  border: 2px solid #fff1c8;
  box-shadow: 0 0 14px 2px rgba(241, 177, 13, .85), inset 0 0 10px rgba(241, 177, 13, .6);
  opacity: 0;
  transition: transform .28s cubic-bezier(.25, .8, .25, 1), opacity .3s ease;
}
.ep3-a07-planta.is-aqui .ep3-a07-planta-aqui { opacity: 1; }
.ep3-a07-trecho-faixa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 700 clamp(28px, 2.9vw, 38px)/1 var(--tr-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 177, 13, .62);
}
.ep3-a07-trecho-faixa b {
  font-weight: 700;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #fff2c9, #ebb655 55%, #8f5a1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9));
}
.ep3-a07-trecho-faixa span { position: relative; flex: 0 0 76px; height: 1px; background: linear-gradient(90deg, rgba(241, 177, 13, .1), rgba(241, 177, 13, .7), rgba(241, 177, 13, .1)); }
.ep3-a07-trecho-faixa span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 27px;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  opacity: .9;
}
.ep3-a07-trecho-h { margin: 0; font: 700 1.22rem/1.2 var(--tr-display); color: #f7e7c6; }
.ep3-a07-trecho-info { margin: 3px 0 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tr-texto-2); }
.ep3-a07-trecho-frase { margin: 10px 0 0; max-width: 66ch; color: var(--tr-texto); }
/* os números do trecho como duas lápides: o número grande em cima, o rótulo embaixo */
#torre .ep3-a07-chips { gap: 8px; flex-wrap: nowrap; align-self: start; align-items: stretch; margin: 0; }
#torre .ep3-a07-chips .ep3-chip {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  width: 92px;
  padding: 11px 6px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(42, 29, 20, .7), rgba(13, 9, 7, .9));
  border: 1px solid rgba(241, 177, 13, .26);
  border-top: 2px solid rgba(241, 177, 13, .5);
  border-radius: 0;
  font: 700 .6rem/1.3 var(--tr-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-texto-2);
}
#torre .ep3-a07-chips .ep3-chip b {
  font: 700 2.1rem/1 var(--tr-display);
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff2c9, #ebb655 55%, #8f5a1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9));
}
.ep3-a07-k {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 700 .72rem/1 var(--tr-display);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tr-ouro-claro);
}
.ep3-a07-k::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(241, 177, 13, .45), rgba(241, 177, 13, 0)); }
.ep3-a07-trecho-k { padding: 10px 0 0; margin-top: 10px; border-top: 1px solid rgba(241, 177, 13, .14); align-self: end; }
.ep3-a07-arraste { display: none; }
.ep3-a07-notas { margin: 0; padding-left: 18px; color: var(--tr-texto-2); font-size: .9rem; }
.ep3-a07-notas li + li { margin-top: 6px; }
.ep3-a07-notas li::marker { color: var(--tr-ouro); }
.ep3-a07-trecho-notas { margin-top: 18px; padding: 14px 18px; border-left: 2px solid rgba(241, 177, 13, .45); background: rgba(13, 9, 7, .8); }
.ep3-a07-lista { margin-top: 14px; border: 1px solid var(--tr-linha); background: rgba(13, 9, 7, .9); }
.ep3-a07-lista summary {
  cursor: var(--ep3-mao);
  padding: 12px 16px;
  font: 700 .74rem/1 var(--tr-display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tr-ouro-claro);
  list-style: none;
}
.ep3-a07-lista summary::-webkit-details-marker { display: none; }
.ep3-a07-lista summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--tr-ouro); }
.ep3-a07-lista[open] summary::before { content: '\2212'; }
.ep3-a07-lista ol { list-style: none; margin: 0; padding: 4px 16px 14px; columns: 2 300px; column-gap: 28px; font-size: .82rem; line-height: 1.5; color: var(--tr-texto-2); }
.ep3-a07-lista li { break-inside: avoid; padding: 5px 0; border-top: 1px solid rgba(227, 211, 182, .07); }
.ep3-a07-lista li b { color: var(--tr-texto); font-weight: 600; }
.ep3-a07-lista .is-mvp { color: #ffb38a; }

/* ------------------------------------------------------------------ a sala do andar (a ficha do chefe) */
.ep3-a07-salas { --a07-cols: 6; display: grid; grid-template-columns: repeat(var(--a07-cols), minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@media (min-width: 1280px) {
  /* a subida ocupa a coluna inteira: as salas avançam sobre o eixo da linha do tempo */
  .ep3-a07-trechos { margin-left: calc(-1 * var(--a07-pad)); }
  /* o gerador diz onde ficam a foto, o portão e a lista (--gx, --ox):
     salas (0) · foto em linha inteira (1) · notas (2) · pé com a lista e, na fileira cheia, o portão (3) */
  .ep3-a07-salas > .ep3-a07-trecho-notas { grid-column: 1 / -1; order: 2; margin: 0; }
  .ep3-a07-salas > .ep3-a07-lista { align-self: start; }
  .ep3-a07-salas > .ep3-a07-lista,
  .ep3-a07-salas > .ep3-a07-salas-fim,
  .ep3-a07-salas > .ep3-a07-salas-fig { grid-column: var(--gx, 1 / -1); order: var(--ox, 3); margin: 0; }
}
.ep3-a07-sala {
  grid-column: span var(--sx, 1);
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  background: linear-gradient(180deg, #1b130d, #0f0a07);
  border: 1px solid rgba(227, 211, 182, .14);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
}
@supports not (grid-template-rows: subgrid) {
  .ep3-a07-sala { display: flex; flex-direction: column; }
  .ep3-a07-palco { flex: 1; }
}
/* o portão que fecha o trecho: na última fileira (ocupa a altura das salas) ou no pé, ao lado da lista */
.ep3-a07-salas-fim {
  grid-row: span 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border: 1px dashed rgba(241, 177, 13, .16);
  background: radial-gradient(50% 60% at 50% 55%, rgba(241, 177, 13, .08), rgba(241, 177, 13, 0) 70%);
}
.ep3-a07-salas-fim .ep3-a07-portao { --esc: .8; }
.ep3-a07-salas-fig { grid-row: span 3; align-self: center; min-width: 0; }
.ep3-a07-salas-fig .ep3-a07-quadro { max-width: 560px; margin-inline: auto; }
/* no pé: a porta baixa, deitada ao lado da lista; a foto que não cabe na fileira vira uma linha inteira */
@media (min-width: 1280px) {
  .ep3-a07-salas-fig.is-linha-x { grid-row: span 1; padding: 6px 0 4px; }
  .ep3-a07-salas-fim.is-pe-x { grid-row: span 1; min-height: 0; align-self: start; justify-content: flex-end; padding: 0 6px; border: 0; background: none; }
  .ep3-a07-salas-fim.is-pe-x .ep3-a07-portao { --esc: .34; flex-direction: row; gap: 16px; margin: 0; }
  .ep3-a07-salas-fim.is-pe-x .ep3-a07-portao-n { margin: 0; }
}

.ep3-a07-placa {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px 8px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .14), inset 0 -2px 0 rgba(0, 0, 0, .45);
}
.ep3-a07-placa-k { font: 700 11px/1 var(--tr-display); letter-spacing: .32em; text-transform: uppercase; color: rgba(236, 220, 192, .8); }
.ep3-a07-placa-n {
  font: 700 28px/1 var(--tr-display);
  background: linear-gradient(180deg, #fff2c9, #ebb655 55%, #8f5a1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .95));
}

.ep3-a07-palco {
  --luz: rgba(82, 235, 40, .16);
  position: relative;
  min-height: calc(var(--hmax) + 62px);
  overflow: hidden;
  isolation: isolate;
  background: #0d0907;
}
.ep3-a07-palco--raizes, .ep3-a07-palco--topo { --luz: rgba(245, 120, 20, .2); }
.ep3-a07-parede { position: absolute; inset: 0 0 28% 0; background-size: 384px 192px; background-position: center bottom; z-index: 0; }
.ep3-a07-parede::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 50% 100%, var(--luz), rgba(0, 0, 0, 0) 75%), linear-gradient(180deg, rgba(8, 5, 3, .55), rgba(8, 5, 3, 0) 60%);
}
.ep3-a07-chao {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 60%;
  transform-origin: 50% 100%;
  transform: perspective(380px) rotateX(62deg);
  background-size: 150px 150px;
  background-position: center bottom;
  z-index: 1;
}
.ep3-a07-palco--raizes .ep3-a07-chao { background-size: 240px 240px; }
.ep3-a07-palco--topo .ep3-a07-chao { background-size: auto 100%; background-position: center; background-repeat: repeat-x; }
.ep3-a07-chao::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(22% 34% at 30% 4%, rgba(var(--chama), .2), rgba(var(--chama), 0) 100%),
    radial-gradient(22% 34% at 70% 4%, rgba(var(--chama), .2), rgba(var(--chama), 0) 100%),
    radial-gradient(45% 60% at 50% 70%, var(--luz), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(10, 7, 5, .98) 0%, rgba(10, 7, 5, .5) 40%, rgba(10, 7, 5, .1) 100%);
}
.ep3-a07-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background-size: 12px auto;
  background-repeat: repeat-y;
  z-index: 5;
  box-shadow: 0 0 14px rgba(0, 0, 0, .9);
}
.ep3-a07-col::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .45)); }
.ep3-a07-col--e { left: 0; }
.ep3-a07-col--d { right: 0; }
/* sem z-index: a tocha não vira grupo, e a luz soma à parede da sala (o palco é o grupo, com isolation) */
.ep3-a07-tocha--sala { --tam: 30px; --raio: 150px; --f: .46; top: 14px; }
/* a luz da tocha da sala também pega na aresta de dentro da coluna e no chão, embaixo dela */
.ep3-a07-palco { --chama: 110, 240, 60; }
.ep3-a07-palco--raizes, .ep3-a07-palco--topo { --chama: 255, 160, 70; }
.ep3-a07-col::before { content: ''; position: absolute; top: 0; height: 190px; width: 10px; z-index: 1; }
.ep3-a07-col--e::before { right: -1px; background: radial-gradient(5px 70% at 100% 20%, rgba(var(--chama), .34), rgba(var(--chama), 0)); }
.ep3-a07-col--d::before { left: -1px; background: radial-gradient(5px 70% at 0 20%, rgba(var(--chama), .34), rgba(var(--chama), 0)); }
.ep3-a07-tocha--sala.ep3-a07-tocha--e { left: 18px; }
.ep3-a07-tocha--sala.ep3-a07-tocha--d { right: 18px; }
.ep3-a07-bosses {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 26px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8%;
  z-index: 4;
}
.ep3-a07-boss { position: relative; margin: 0; width: var(--w); height: var(--h); flex: 0 0 auto; }
.ep3-a07-spr { position: relative; z-index: 3; display: block; width: var(--w); height: var(--h); max-width: none; image-rendering: pixelated; }
.ep3-a07-sombra {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: calc(var(--w) * .85 + 18px);
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  z-index: 2;
}
.ep3-a07-selo {
  position: absolute;
  left: 50%;
  bottom: calc(min(var(--w) + 90px, 220px) / -2);
  width: min(calc(var(--w) + 90px), 220px);
  aspect-ratio: 1;
  transform: translateX(-50%) perspective(700px) rotateX(72deg);
  z-index: 1;
  pointer-events: none;
}
.ep3-a07-selo i {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .85;
  animation: ep3-a07-gira 28s linear infinite;
}
.ep3-a07-palco--raizes .ep3-a07-selo { display: none; }

/* a aura vermelha do Enfurecido */
.ep3-a07-aura { position: absolute; left: 50%; bottom: -6px; width: calc(var(--w) + 60px); height: calc(var(--h) + 30px); transform: translateX(-50%); z-index: 2; pointer-events: none; }
.ep3-a07-aura::before {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22px;
  height: 52px;
  background-size: 100% 100%;
  opacity: .62;
  animation: ep3-a07-aura 1.7s ease-in-out infinite alternate;
}
.ep3-a07-aura::after {
  content: '';
  position: absolute;
  inset: 0 6% 4px;
  background: radial-gradient(50% 78% at 50% 100%, rgba(235, 89, 29, .5), rgba(170, 30, 16, .2) 55%, rgba(170, 30, 16, 0) 78%);
  transform-origin: 50% 100%;
  animation: ep3-a07-coluna 2.3s ease-in-out infinite alternate;
}
.ep3-a07-aura i {
  position: absolute;
  left: var(--x);
  bottom: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffc59a;
  box-shadow: 0 0 6px 1px rgba(235, 89, 29, .95);
  opacity: 0;
  animation: ep3-a07-brasa 2.4s linear infinite;
  animation-delay: var(--d);
}

/* a ficha (corpo) */
.ep3-a07-corpos { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(241, 177, 13, .24); }
.ep3-a07-sala--par .ep3-a07-corpos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ep3-a07-corpo { padding: 10px 12px 12px; min-width: 0; container-type: inline-size; }
.ep3-a07-corpo + .ep3-a07-corpo { border-left: 1px solid var(--tr-linha); }
.ep3-a07-tag {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 7px 2px;
  font: 700 9px/1 var(--tr-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffdcc8;
  background: linear-gradient(180deg, #8f1712, #560b07);
  border: 1px solid rgba(235, 89, 29, .65);
  box-shadow: 0 0 12px rgba(235, 89, 29, .3);
}
.ep3-a07-tag--mvp { color: var(--tr-ouro-claro); background: linear-gradient(180deg, #3d2a15, #22170b); border-color: rgba(241, 177, 13, .45); box-shadow: none; }
.ep3-a07-tag--chefe { color: #ffe0c8; background: linear-gradient(180deg, #5c1410, #2c0806); border-color: rgba(200, 60, 30, .55); box-shadow: none; }
.ep3-a07-tag--topo { color: #2a1405; background: linear-gradient(180deg, #ffe7a4, #d39a2e); border-color: #ffefc2; box-shadow: 0 0 16px rgba(241, 177, 13, .45); }
.ep3-a07-nome { margin: 0 0 6px; font: 700 14px/1.22 var(--tr-display); color: #f7e7c6; text-wrap: balance; }
.ep3-a07-st { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 18px; margin: 0; font-size: 12px; line-height: 1.3; }
.ep3-a07-st > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 3px 0 2px; border-top: 1px solid rgba(227, 211, 182, .08); min-width: 0; }
.ep3-a07-st dt { font: 700 9px/1.3 var(--tr-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tr-texto-3); white-space: nowrap; }
.ep3-a07-st dd { margin: 0; color: var(--tr-texto); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.ep3-a07-hp { color: #ffb58c; font-weight: 700; }
@container (min-width: 268px) {
  .ep3-a07-st { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
}
.ep3-a07-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tr-texto-2); }
.ep3-a07-larga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px dashed rgba(241, 177, 13, .26);
  font-size: 12.5px;
}
.ep3-a07-larga-k { font: 700 9px/1 var(--tr-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tr-texto-3); }
.ep3-a07-taxa { margin-left: auto; color: var(--tr-ouro-claro) !important; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ep3-a07-carta {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 8px 2px 2px;
  border: 1px dashed rgba(241, 177, 13, .32);
  border-radius: 2px;
  background: rgba(13, 9, 7, .7);
  color: var(--tr-ouro-claro);
  font: 600 12.5px/1.3 var(--tr-corpo);
  cursor: var(--ep3-mao);
  transition: border-color .15s, background-color .15s;
}
.ep3-a07-carta:hover, .ep3-a07-carta.is-aberto { border-style: solid; border-color: var(--tr-ouro); background: rgba(42, 29, 20, .9); }
.ep3-a07-carta .ep3-ico { width: 24px; height: 24px; }
.ep3-a07-larga.is-nada { display: block; color: var(--tr-texto-2); line-height: 1.5; }
.ep3-a07-larga.is-nada .ep3-a07-larga-k { display: block; margin-bottom: 4px; }

/* sala sozinha (Crothen) e a do topo (Nacht Sieger) */
.ep3-a07-sala.is-solo { display: flex; flex-direction: column; grid-row: auto; grid-column: auto; }
.ep3-a07-sala.is-solo .ep3-a07-palco { flex: none; }
.ep3-a07-sala.is-nacht { border-color: rgba(241, 177, 13, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 0 54px rgba(241, 177, 13, .18), 0 30px 60px rgba(0, 0, 0, .6); }
.ep3-a07-sala.is-nacht .ep3-a07-nome { font-size: 22px; background: linear-gradient(180deg, #fff2c9, #ebb655 60%, #a8681f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ep3-a07-sala.is-nacht .ep3-a07-placa-k { font-size: 13px; color: var(--tr-ouro-claro); }
.ep3-a07-solo-grade { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: center; }
.ep3-a07-solo-lado { display: grid; justify-items: center; gap: 18px; text-align: center; }
.ep3-a07-portao--100 { --esc: 1.15; }
.ep3-a07-linha--token { margin: 0; max-width: 34ch; }

@media (min-width: 1024px) {
  /* andar 100: a sala do Crothen à esquerda; o texto, o portão e os Tokens à direita */
  .ep3-a07-no--100 { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: 'sala cab' 'sala lado'; column-gap: 44px; align-items: start; }
  .ep3-a07-no--100 > .ep3-a07-no-corpo, .ep3-a07-no--100 .ep3-a07-solo-grade { display: contents; }
  .ep3-a07-no--100 > .ep3-a07-no-cab { grid-area: cab; margin-bottom: 18px; }
  .ep3-a07-no--100 .ep3-a07-sala { grid-area: sala; }
  .ep3-a07-no--100 .ep3-a07-solo-lado { grid-area: lado; justify-items: start; text-align: left; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .ep3-a07-no--100 .ep3-a07-portao--100 { --esc: .95; }
}

/* o topo: a sequência como a escada até o trono. O HTML segue a ordem da luta (Guarda, ondas, Chefe); a escada é
   desenhada de baixo para cima, cada degrau um passo à direita, com o Nacht Sieger no alto. */
.ep3-a07-seq-caixa .ep3-a07-k { margin-bottom: 10px; }
.ep3-a07-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.ep3-a07-seq li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7.6em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-left: calc(var(--k, 0) * 16px);
  margin-right: calc((4 - var(--k, 0)) * 16px);
  padding: 7px 14px 6px;
  background: linear-gradient(90deg, rgba(42, 29, 20, .92), rgba(13, 9, 7, .94));
  border: 1px solid var(--tr-linha);
  border-left: 2px solid rgba(241, 177, 13, .5);
}
.ep3-a07-seq-k { font: 700 9.5px/1.25 var(--tr-display); letter-spacing: .18em; text-transform: uppercase; color: var(--tr-texto-3); }
.ep3-a07-seq-q { font-weight: 600; color: var(--tr-texto); font-size: .92rem; line-height: 1.3; text-align: left; }
.ep3-a07-seq b { font: 700 22px/1 var(--tr-display); color: var(--tr-ouro-claro); font-variant-numeric: tabular-nums; }
.ep3-a07-seq li.is-chefe {
  padding-block: 10px 9px;
  border-color: rgba(235, 89, 29, .6);
  border-left-color: var(--tr-furia);
  background: linear-gradient(90deg, rgba(120, 24, 15, .86), rgba(30, 8, 6, .95));
  box-shadow: 0 0 30px rgba(235, 89, 29, .22);
}
.ep3-a07-seq li.is-chefe .ep3-a07-seq-k { color: #ffb999; }
.ep3-a07-seq li.is-chefe .ep3-a07-seq-q { font: 700 1.02rem/1.2 var(--tr-display); color: #ffe6cc; }
.ep3-a07-seq li.is-chefe b { color: #ffd2b5; }
.ep3-a07-topo-grade { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ep3-a07-topo-lado > * + * { margin-top: 18px; }
.ep3-a07-fala {
  position: relative;
  margin: 0;
  padding: 18px 22px 18px 94px;
  background: linear-gradient(180deg, rgba(26, 18, 12, .96), rgba(12, 8, 6, .96));
  border: 1px solid rgba(241, 177, 13, .34);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.ep3-a07-fala::before { content: ''; position: absolute; left: 16px; top: 18px; width: 62px; height: 55px; background-size: 100% 100%; opacity: .9; }
.ep3-a07-fala figcaption { display: grid; gap: 2px; }
.ep3-a07-fala-quem { font: 700 1.1rem/1.2 var(--tr-display); color: var(--tr-ouro-claro) !important; }
.ep3-a07-fala-onde { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tr-texto-3); }
.ep3-a07-fala-txt { margin: 10px 0 0; }
.ep3-a07-fala-txt p { font-size: 1.04rem; line-height: 1.5; color: #fff0d6; }
.ep3-a07-cita { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--tr-furia); }
.ep3-a07-cita p { font: 600 italic 1.12rem/1.45 var(--tr-display); color: #f3dcc0; }

/* foto do jogo */
.ep3-a07-quadro { margin: 0; }
.ep3-a07-quadro-in {
  padding: 7px;
  background: linear-gradient(180deg, #2a1d14, #120c08);
  border: 1px solid rgba(241, 177, 13, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), 0 26px 60px rgba(0, 0, 0, .55);
}
.ep3-a07-quadro-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep3-a07-quadro figcaption { margin-top: 10px; font-size: .84rem; color: var(--tr-texto-2); }
.ep3-a07-quadro--75 { max-width: 700px; margin-inline: auto; }

/* o que se ganha: os degraus dos marcos */
.ep3-a07-ganhos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ep3-a07-marcos-k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .72rem/1 var(--tr-display); letter-spacing: .26em; text-transform: uppercase; color: var(--tr-texto-3); }
.ep3-a07-degraus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ep3-a07-degraus li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: calc(88px + var(--k) * 16px);
  padding: 11px 9px 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(241, 177, 13, .24);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12);
}
.ep3-a07-degraus li.is-total { border-color: rgba(241, 177, 13, .65); box-shadow: 0 0 26px rgba(241, 177, 13, .22), inset 0 1px 0 rgba(255, 230, 170, .2); }
.ep3-a07-degrau-k { font: 700 9px/1.25 var(--tr-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tr-texto-2); }
.ep3-a07-degraus b { font: 700 30px/1 var(--tr-display); color: var(--tr-ouro-claro) !important; text-shadow: 0 0 14px rgba(241, 177, 13, .35); }
.ep3-a07-degraus li.is-total b { font-size: 40px; color: #fff0c4 !important; }
.ep3-a07-marcos .ep3-a07-linha { margin-top: 14px; }
.ep3-a07-manto {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(60, 14, 10, .74), rgba(16, 8, 6, .95));
  border: 1px solid rgba(235, 89, 29, .45);
  box-shadow: 0 0 40px rgba(235, 89, 29, .12);
}
.ep3-a07-manto > * { position: relative; }
.ep3-a07-manto-selo { position: absolute !important; right: -70px; top: -70px; width: 240px; aspect-ratio: 1; opacity: .2; pointer-events: none; }
.ep3-a07-manto-selo i { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; animation: ep3-a07-gira 40s linear infinite; }
.ep3-a07-manto p { margin: 10px 0 0; }
.ep3-a07-manto .ep3-a07-manto-nome { margin: 0; font: 700 1.15rem/1.2 var(--tr-display); }
.ep3-a07-manto-nome .ep3-mini { font: 700 1.05rem/1.3 var(--tr-display); color: #ffe2b8; }
.ep3-a07-manto .ep3-a07-manto-tipo { margin-top: 6px; font-size: .8rem; letter-spacing: .06em; color: var(--tr-texto-2); }
.ep3-a07-manto .ep3-a07-notas { margin-top: 12px; }

/* navegação da fileira lateral (só abaixo de 1024, com JS) */
.ep3-a07-fila-nav { display: none; }

/* =====================================================================================
   4. Responsivo
   ===================================================================================== */
@media (max-width: 1279px) {
  .ep3-a07-cab { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'num txt' '. arte'; row-gap: 28px; }
  .ep3-a07-num { align-self: start; margin-top: 4px; }
  .ep3-a07-arte { justify-self: start; }
  .ep3-a07-degraus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep3-a07-ganhos { grid-template-columns: 1fr; }
}

/* abaixo de 1024: a subida vira uma fileira lateral (cabeça do trecho, salas, notas, lista e portão) */
@media (max-width: 1023px) {
  .ep3-a07-cab { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'num' 'txt' 'arte'; row-gap: 0; }
  .ep3-a07-num { font-size: 96px; margin-bottom: 10px; }
  .ep3-a07-arte { justify-self: center; margin-top: 26px; }
  .ep3-a07-mecs, .ep3-a07-modos, .ep3-a07-regras { grid-template-columns: 1fr; }
  .ep3-a07-topo-grade, .ep3-a07-solo-grade { grid-template-columns: 1fr; }
  .ep3-a07-topo-grade > .ep3-a07-sala, .ep3-a07-solo-grade > .ep3-a07-sala { max-width: 440px; width: 100%; }
  /* andar 100: o portão pequeno, deitado ao lado da linha dos Tokens */
  .ep3-a07-solo-lado { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 18px; text-align: left; }
  .ep3-a07-portao--100 { --esc: .5; }
  .ep3-a07-portao--100 .ep3-a07-portao-n { font-size: 11px; letter-spacing: .18em; }

}
/* abaixo de 1280: a subida vira uma fileira lateral (cabeça do trecho, salas, notas, lista e portão), com as
   setas e os chips dos trechos; o contador corre com o arraste */
@media (max-width: 1279px) {
  html.ep3-a07-js .ep3-a07-fila-nav:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .ep3-a07-fila-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .ep3-a07-fila-chips::-webkit-scrollbar { display: none; }
  .ep3-a07-fila-chip {
    flex: none;
    padding: 8px 10px 7px;
    border: 1px solid rgba(241, 177, 13, .26);
    background-size: cover;
    background-position: center;
    font: 700 .74rem/1 var(--tr-display);
    letter-spacing: .06em;
    color: var(--tr-texto-2);
    white-space: nowrap;
  }
  .ep3-a07-fila-chip[aria-current="true"] { color: #2a1405; background: linear-gradient(180deg, #ffe7a4, #d39a2e); border-color: #ffefc2; }
  .ep3-a07-fila-setas { display: flex; gap: 6px; flex: none; }
  .ep3-a07-fila-seta {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(241, 177, 13, .34);
    background: rgba(13, 9, 7, .9);
    color: var(--tr-ouro-claro);
    font-size: 1rem;
  }
  .ep3-a07-fila-seta:disabled { opacity: .35; cursor: inherit; }

  #torre .ep3-a07-trechos {
    --a07-card: min(80vw, 330px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    /* sem isto o overflow-y vira auto: a fileira (com a altura dos cartões da vez) rolava na vertical e engolia o
       gesto da página no celular */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: calc(-1 * (var(--a07-pad) + var(--ep3-calha)));
    margin-right: calc(-1 * var(--ep3-calha));
    padding: 4px var(--ep3-calha) 16px calc(var(--a07-pad) + var(--ep3-calha));
    scroll-padding-inline: calc(var(--a07-pad) + var(--ep3-calha)) var(--ep3-calha);
    /* o cartão que já passou some na margem da esquerda (antes ficava um pedaço dele, cortado, sobre o eixo da linha
       do tempo: o "6" do portão 75 → 76 ao lado do 76 a 99) */
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--ep3-calha) * .5), #000 calc(var(--a07-pad) + var(--ep3-calha) - 4px));
    mask-image: linear-gradient(90deg, transparent calc(var(--ep3-calha) * .5), #000 calc(var(--a07-pad) + var(--ep3-calha) - 4px));
  }
  #torre .ep3-a07-trechos::-webkit-scrollbar { display: none; }
  #torre .ep3-a07-trecho, #torre .ep3-a07-salas { display: contents; }
  #torre .ep3-a07-trechos > * , #torre .ep3-a07-trecho > *, #torre .ep3-a07-salas > * {
    flex: 0 0 auto;
    width: var(--a07-card);
    margin: 0;
    scroll-snap-align: start;
  }
  #torre .ep3-a07-sala--par { width: min(88vw, 400px); }
  /* a cabeça do trecho é o primeiro cartão da fileira: planta no canto, faixa, nome, frase, números, "Os chefes" */
  .ep3-a07-trecho-cab {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'txt' 'chips' 'k';
    align-content: start;
    gap: 14px 0;
    padding: 16px 16px 14px;
    align-self: flex-start;
  }
  .ep3-a07-planta { position: absolute; right: 14px; top: 14px; width: 92px; }
  .ep3-a07-planta i b { display: none; }
  .ep3-a07-trecho-txt { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'faixa' 'id' 'frase'; padding-right: 0; }
  .ep3-a07-trecho-faixa { padding-right: 104px; font-size: 30px; min-height: 40px; }
  .ep3-a07-trecho-faixa span { flex-basis: 44px; }
  .ep3-a07-trecho-id { margin-top: 10px; padding: 0 104px 0 0; border: 0; }
  .ep3-a07-trecho-frase { font-size: .94rem; line-height: 1.55; margin-top: 12px; }
  #torre .ep3-a07-trecho-cab > .ep3-a07-chips { display: flex; gap: 8px; }
  #torre .ep3-a07-chips .ep3-chip { flex: 1; width: auto; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; padding: 8px 10px; text-align: left; }
  #torre .ep3-a07-chips .ep3-chip b { font-size: 1.6rem; }
  .ep3-a07-trecho-k { margin-top: auto; }
  .ep3-a07-arraste {
    display: inline-block;
    order: 3;
    width: 26px;
    height: 10px;
    border-top: 1px solid var(--tr-ouro);
    border-right: 1px solid var(--tr-ouro);
    transform: skewX(40deg);
    animation: ep3-a07-arraste 1.6s ease-in-out infinite;
  }
  /* só pulsa com o visitante na Torre (desempenho, 15/10): eram 4 animações vivas na página inteira, e animação viva
     custa um quadro do navegador a cada vsync */
  html:not([data-ep3-mundo="torre"]) #torre .ep3-a07-arraste { animation: none; }
  .ep3-a07-sala { display: flex; flex-direction: column; }
  .ep3-a07-palco { min-height: calc(var(--hmax) + 50px); }
  .ep3-a07-salas-fim { align-self: center; width: 200px !important; min-height: 0; padding: 20px 0; border: 0; background: none; }
  .ep3-a07-salas-fim .ep3-a07-portao { --esc: .82; }
  .ep3-a07-trecho-notas { padding: 16px; border: 1px solid var(--tr-linha); border-left: 2px solid rgba(241, 177, 13, .45); }
  /* integração 15/10: era columns: 1, que ainda faz da lista um bloco de colunas: com a altura presa em 52vh os andares
     que não cabiam viravam colunas escondidas à direita (só os 6 primeiros apareciam, sem rolagem para baixo).
     r3: sem rolagem própria. Com 52vh e overscroll-behavior: contain a lista aberta ocupava meia tela e o dedo sobre ela
     não rolava mais a página (nunca passava a rolagem adiante). Aberta, ela cresce inteira e a fileira acompanha a
     altura (o a07.js remede no toggle) */
  .ep3-a07-lista ol { columns: auto; max-height: none; overflow: visible; }
  #torre .ep3-a07-salas > .ep3-a07-salas-fig { width: min(86vw, 380px); align-self: center; }
}

@media (max-width: 759px) {
  #torre.ep3-ato { padding: 0; font-size: 15px; line-height: 1.55; scroll-margin-top: -140px; }
  .ep3-a07-nos { --a07-pad: 28px; margin-top: 32px; }
  .ep3-a07-nos::before { left: 5px; width: 12px; background-size: 12px auto; }
  .ep3-a07-pino { left: -29px; width: 16px; height: 16px; }
  .ep3-a07-no.is-marco > .ep3-a07-pino { --tam: 28px; left: -35px; top: -5px; }
  .ep3-a07-no.is-marco > .ep3-a07-pino::after { top: 24px; left: 8px; right: 8px; height: 6px; }
  .ep3-a07-no { padding-bottom: 40px; }
  .ep3-a07-no-cab { margin-bottom: 14px; }
  .ep3-a07-h3 { font-size: 1.24rem; }
  .ep3-a07-txt { margin-top: 8px; }
  #torre .ep3-a07-no-corpo > * + * { margin-top: 14px; }
  /* cabeça: o 07 entalhado ao lado do sub e do h2 (como a placa dos outros atos); a lede desce */
  .ep3-a07-cab { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; column-gap: 14px; align-items: start; }
  .ep3-a07-cab-txt { display: contents; }
  .ep3-a07-num { grid-area: auto; grid-column: 1; grid-row: 1; font-size: 64px; margin: 0; }
  .ep3-a07-sub { grid-column: 2; grid-row: 1; align-self: start; margin: 4px 0 6px; font-size: .68rem; letter-spacing: .1em; line-height: 1.5; }
  .ep3-a07-h2 { grid-column: 1 / -1; grid-row: 2; font-size: 2.1rem; margin-top: 6px; }
  .ep3-a07-lede { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  /* o quadro: a arte fica em 2x (escala inteira) e a moldura mostra a faixa do meio, com 168 px de altura */
  .ep3-a07-arte { grid-area: auto; grid-column: 1 / -1; grid-row: 4; justify-self: stretch; padding: 0; margin-top: 18px; }
  .ep3-a07-arte .ep3-a07-tocha { display: none; }
  .ep3-a07-arte-moldura { padding: 6px; }
  .ep3-a07-arte-moldura::after { inset: 6px; }
  .ep3-a07-arte img { height: 168px; object-fit: cover; object-position: 50% 30%; }
  .ep3-a07-arte figcaption { margin-top: 6px; }
  .ep3-a07-modos li { font-size: .92rem; line-height: 1.5; }
  .ep3-a07-trecho-frase { font-size: .9rem; }
  .ep3-a07-modos { gap: 10px; }
  .ep3-a07-modos li, .ep3-a07-mecs li { padding: 11px 13px 11px 12px; }
  .ep3-a07-mecs { gap: 10px; }
  .ep3-a07-mecs li { grid-template-columns: 30px 1fr; gap: 10px; }
  .ep3-a07-mecs i { font-size: 21px; }
  .ep3-a07-regras li { grid-template-columns: 46px 1fr; gap: 12px; padding: 12px 14px 12px 10px; }
  .ep3-a07-regra-n { font-size: 26px; }
  .ep3-a07-regra-cranio { width: 38px; }
  .ep3-a07-aviso { margin-top: 16px; padding: 12px 14px; }
  .ep3-a07-fala { padding: 14px 14px 14px 72px; }
  .ep3-a07-fala::before { left: 12px; top: 14px; width: 46px; height: 41px; }
  .ep3-a07-fala-txt p { font-size: .98rem; }
  .ep3-a07-cita p { font-size: 1rem; }
  .ep3-a07-seq li { margin-left: calc(var(--k, 0) * 8px); margin-right: calc((4 - var(--k, 0)) * 8px); grid-template-columns: minmax(0, 6.4em) minmax(0, 1fr) auto; gap: 8px; padding: 7px 10px 6px; }
  .ep3-a07-seq b { font-size: 19px; }
  .ep3-a07-degraus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep3-a07-degraus li { min-height: 0; }
  .ep3-a07-manto { padding: 16px 14px; }
}

/* =====================================================================================
   5. Animações (só transform/opacity) e quando param
   ===================================================================================== */
@keyframes ep3-a07-chama { to { transform: translateX(-100%); } }
@keyframes ep3-a07-gira { to { transform: rotate(360deg); } }
@keyframes ep3-a07-pulso { from { opacity: .55; } to { opacity: 1; } }
@keyframes ep3-a07-aura { from { opacity: .38; } to { opacity: .7; } }
@keyframes ep3-a07-coluna { from { opacity: .55; transform: scaleY(.92); } to { opacity: 1; transform: scaleY(1.04); } }
/* o bruxuleio da tocha: passos desiguais, sempre suaves (nada de degrau, que lia como pisca-pisca) */
@keyframes ep3-a07-bruxuleio {
  0% { opacity: .9; transform: scale(1); }
  14% { opacity: 1; transform: translate(.6%, -.8%) scale(1.035); }
  29% { opacity: .86; transform: translate(-.3%, .2%) scale(.982); }
  41% { opacity: .95; transform: translate(-.6%, -.4%) scale(1.02); }
  58% { opacity: .88; transform: scale(.99); }
  73% { opacity: 1; transform: translate(.4%, -1%) scale(1.04); }
  87% { opacity: .91; transform: translate(-.2%, -.2%) scale(1.004); }
  100% { opacity: .9; transform: scale(1); }
}
@keyframes ep3-a07-ambiente {
  0%, 100% { opacity: .52; } 23% { opacity: .6; } 47% { opacity: .49; } 71% { opacity: .63; }
}
@keyframes ep3-a07-brasa {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(6px, calc(var(--h) * -.85), 0) scale(.35); }
}
@keyframes ep3-a07-sobe {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: .9; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(24px, -105vh, 0); }
}
@keyframes ep3-a07-anel {
  0% { opacity: 0; transform: scale(1.25); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(.12); }
}
@keyframes ep3-a07-arraste { 0%, 100% { transform: translateX(0) skewX(40deg); opacity: .5; } 50% { transform: translateX(6px) skewX(40deg); opacity: 1; } }

/* animação só onde se vê: o a07.js marca .is-vivo (salas, portões, cena; 120 px antes de entrar na tela) e .is-ativo
   (mundo). Fora disso a animação sai, não só pausa (desempenho, 15/10): pausada, cada uma seguia numa camada própria
   do compositor, a página inteira. Ao voltar recomeça do quadro 0, o que não se nota em chama, brasa, aura ou anel. */
html.ep3-a07-js .ep3-a07-sala:not(.is-vivo) *,
html.ep3-a07-js .ep3-a07-arte:not(.is-vivo) *,
html.ep3-a07-js .ep3-a07-portao:not(.is-vivo) *,
html.ep3-a07-js .ep3-a07-portal:not(.is-vivo) *,
html.ep3-a07-js .ep3-a07-manto:not(.is-vivo) *,
html.ep3-a07-js .ep3-a07-no.is-marco:not(.is-vivo) > .ep3-a07-pino *,
.ep3-a07-mundo:not(.is-ativo) *,
/* o * não pega pseudo-elemento: a aura do Enfurecido (::before e ::after) corria em todas as salas, a página inteira */
html.ep3-a07-js .ep3-a07-sala:not(.is-vivo) *::before, html.ep3-a07-js .ep3-a07-sala:not(.is-vivo) *::after,
html.ep3-a07-js .ep3-a07-arte:not(.is-vivo) *::before, html.ep3-a07-js .ep3-a07-arte:not(.is-vivo) *::after,
html.ep3-a07-js .ep3-a07-portao:not(.is-vivo) *::before, html.ep3-a07-js .ep3-a07-portao:not(.is-vivo) *::after,
html.ep3-a07-js .ep3-a07-portal:not(.is-vivo) *::before, html.ep3-a07-js .ep3-a07-portal:not(.is-vivo) *::after,
html.ep3-a07-js .ep3-a07-manto:not(.is-vivo) *::before, html.ep3-a07-js .ep3-a07-manto:not(.is-vivo) *::after,
.ep3-a07-mundo:not(.is-ativo) *::before, .ep3-a07-mundo:not(.is-ativo) *::after { animation: none !important; }
/* o mundo apagado (opacidade 0) também não pinta nem entra no raster */
.ep3-a07-mundo:not(.is-ativo) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  #torre *, #torre *::before, #torre *::after,
  .ep3-a07-mundo *, .ep3-a07-mundo *::before, .ep3-a07-mundo *::after,
  .ep3-a07-hud, .ep3-a07-hud * {
    animation: none !important;
    transition: none !important;
  }
  .ep3-a07-brasas, .ep3-a07-aura i { display: none; }
  .ep3-a07-portao .ep3-a07-portao-luz { opacity: 1; }
  .ep3-a07-portao .ep3-a07-anel:nth-of-type(2) { opacity: .8; transform: scale(.9); }
}

/* =====================================================================================
   Ajuste r1: o celular mais justo (regra 57)
   ===================================================================================== */
@media (max-width: 759px) {
  /* entrada: os chips da Torre mais baixos */
  .ep3-a07-chips-pedra { gap: 6px; }
  .ep3-a07-chips-pedra li { padding: 4px 8px 3px; font-size: .64rem; letter-spacing: .06em; }
  .ep3-a07-chips-pedra b { font-size: .8rem; }
  .ep3-a07-modos li { padding: 10px 12px; }
  /* andar 100: o portão grande sai (o portão de saída do ato já faz o papel); fica a linha dos Tokens */
  .ep3-a07-no--100 .ep3-a07-portao--100 { display: none; }
  .ep3-a07-solo-lado { display: block; }
  .ep3-a07-solo-grade { gap: 14px; }
  /* o topo: a fala e a queda mais justas, a sequência com degraus mais baixos */
  .ep3-a07-seq { gap: 3px; }
  .ep3-a07-seq li { padding-block: 5px 4px; }
  .ep3-a07-seq li.is-chefe { padding-block: 7px 6px; }
  .ep3-a07-topo-grade { gap: 16px; }
  .ep3-a07-topo-lado > * + * { margin-top: 12px; }
  .ep3-a07-fala { padding: 11px 12px 12px 64px; }
  .ep3-a07-fala-txt { margin-top: 6px; }
  .ep3-a07-fala-txt p { font-size: .94rem; line-height: 1.45; }
  .ep3-a07-cita p { font-size: .94rem; line-height: 1.4; }
  .ep3-a07-quadro figcaption { margin-top: 6px; font-size: .8rem; }
  .ep3-a07-quadro-in { padding: 5px; }
  /* o que se ganha */
  .ep3-a07-degraus li { padding: 8px 7px 7px; gap: 6px; }
  .ep3-a07-degraus b { font-size: 24px; }
  .ep3-a07-degraus li.is-total b { font-size: 30px; }
  .ep3-a07-manto { padding: 13px 12px; }
  .ep3-a07-manto p { margin-top: 8px; font-size: .9rem; line-height: 1.5; }
  .ep3-a07-manto .ep3-a07-notas { margin-top: 8px; font-size: .84rem; }
  .ep3-a07-ganhos { gap: 16px; }
  /* as salas da subida (a fileira): palco e ficha mais baixos */
  .ep3-a07-palco { min-height: calc(var(--hmax) + 40px); }
  .ep3-a07-corpo { padding: 8px 10px 10px; }
  .ep3-a07-trecho-cab { gap: 10px 0; padding: 12px 12px 12px; }
}
/* a foto da Torre no celular: miniatura ao lado da legenda, um toque amplia (base.js) */
@media (max-width: 759px) {
  .ep3-a07-no--topo .ep3-a07-quadro { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 12px; align-items: center; }
  .ep3-a07-no--topo .ep3-a07-quadro-in { cursor: zoom-in; aspect-ratio: 16 / 10 !important; }
  .ep3-a07-no--topo .ep3-a07-quadro figcaption { margin-top: 0; }
}
@media (max-width: 759px) {
  .ep3-a07-etq { padding: 4px 10px 3px; margin-bottom: 8px; }
  .ep3-a07-h3 { font-size: 1.16rem; line-height: 1.18; }
  .ep3-a07-arte img { height: 148px; }
  .ep3-a07-lede { font-size: .96rem; line-height: 1.5; }
  .ep3-a07-txt { font-size: .94rem; line-height: 1.52; }
  .ep3-a07-linha { font-size: .9rem; line-height: 1.5; margin-top: 12px; }
  .ep3-a07-aviso { font-size: .86rem; line-height: 1.45; }
  .ep3-a07-seq li { gap: 6px; }
  .ep3-a07-no-lado { margin-bottom: 14px; }
  .ep3-a07-seq-caixa .ep3-a07-k { margin-bottom: 6px; }
}
@media (max-width: 759px) {
  .ep3-a07-portal { height: 84px; }
  .ep3-a07-portal .ep3-a07-portao--portal { --esc: .34; }
  .ep3-a07-no { padding-bottom: 34px; }
}
@media (max-width: 759px) {
  .ep3-a07-manto .ep3-a07-manto-tipo { margin-top: 4px; }
  .ep3-a07-manto .ep3-a07-notas li + li { margin-top: 4px; }
  .ep3-a07-marcos .ep3-a07-linha { margin-top: 10px; }
  .ep3-a07-marcos-k { margin-bottom: 8px; }
}

/* =====================================================================================
   Ajuste r2: a entrada da Torre é atravessar um portão
   ===================================================================================== */
/* o portão grande (~200 px), as duas tochas acesas, o halo dourado atrás e o fio de ouro no chão dele */
.ep3-a07-portal--entra { height: 236px; align-items: flex-end; padding-bottom: 10px; margin-bottom: 16px; }
.ep3-a07-portal--entra .ep3-a07-portal-fio { margin-bottom: 6px; }
.ep3-a07-portal-porta { position: relative; flex: none; display: flex; align-items: flex-end; padding-inline: 66px; }
.ep3-a07-portal--entra .ep3-a07-portao--portal { --esc: .94; }
.ep3-a07-portal--entra .ep3-a07-anel { bottom: calc(-22px * var(--esc)); }
.ep3-a07-portal--entra::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(10px + 88px - 210px);
  width: 420px;
  height: 420px;
  margin-left: -210px;
  background: radial-gradient(closest-side, rgba(255, 226, 140, .44), rgba(241, 177, 13, .22) 30%, rgba(241, 177, 13, .08) 60%, rgba(241, 177, 13, 0));
  pointer-events: none;
}
.ep3-a07-portal--entra::after { width: 420px; height: 44px; margin-left: -210px; bottom: -2px; background: radial-gradient(closest-side, rgba(241, 177, 13, .34), rgba(241, 177, 13, 0)); }
.ep3-a07-tocha--portal { --tam: 44px; --raio: 220px; --f: 1.15; bottom: 92px; z-index: 1; }
.ep3-a07-tocha--portal.ep3-a07-tocha--e { left: 6px; }
.ep3-a07-tocha--portal.ep3-a07-tocha--d { right: 6px; }
@media (max-width: 759px) {
  .ep3-a07-portal--entra { height: 146px; padding-bottom: 8px; margin-bottom: 10px; gap: 8px; }
  .ep3-a07-portal--entra .ep3-a07-portao--portal { --esc: .556; }
  .ep3-a07-portal-porta { padding-inline: 40px; }
  .ep3-a07-portal--entra::before { width: 280px; height: 280px; margin-left: -140px; bottom: calc(8px + 52px - 140px); }
  .ep3-a07-portal--entra::after { width: 260px; height: 30px; margin-left: -130px; }
  .ep3-a07-tocha--portal { --tam: 28px; --raio: 120px; bottom: 56px; }
  .ep3-a07-tocha--portal.ep3-a07-tocha--e { left: 4px; }
  .ep3-a07-tocha--portal.ep3-a07-tocha--d { right: 4px; }
}