/* =====================================================================
   TITANS — o Altar e o botão do Titan na barra de skills (10/10)
   ---------------------------------------------------------------------
   Menu "A — Altar", escolhido pelo autor no cartão (thread Titans, 12:30Z).
   PC: medalhas à esquerda, Titan no centro sobre o sigilo, painel à direita.
   Celular em pé: medalhas em cima, Titan no meio, painel embaixo.
   Celular deitado: medalhas finas à esquerda, painel à direita.
   As cores vêm do Titan escolhido (--ta-c, --ta-c2, --ta-esc). Letra Cinzel
   (@font-face em styles/salao.css). Números sempre inteiros, sem "mil"/"mi".
   ===================================================================== */

/* ---------------- botão do Titan na barra de skills ---------------- */
/* Autor (10/10): "coloca do lado oposto à relíquia, aí ficam 2 círculos iguais". O mesmo círculo da Relíquia
   (--rel-base × --rel-mult, saindo por cima da pílula do mesmo jeito, relic.css), na ponta esquerda, com o anel
   na cor do Titan no lugar do dourado. */
.titan-slot{position:relative;flex:0 0 auto;width:calc(38px * var(--ui-scale, 1));height:calc(38px * var(--ui-scale, 1));
  border-radius:50%;cursor:var(--cur-mao,pointer);overflow:hidden;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--ta-c,#ff5a1f) 55%,transparent),#120a06 70%);
  box-shadow:0 0 0 2px #120a06,0 0 0 3px var(--ta-c2,#ffc46b),0 0 16px color-mix(in srgb,var(--ta-c,#ff5a1f) 65%,transparent);
  transition:transform .12s ease,filter .12s ease}
.battle-skill-bar .titan-slot{width:calc(var(--rel-base) * var(--rel-mult));height:calc(var(--rel-base) * var(--rel-mult));
  margin:calc(var(--rel-base) * var(--rel-sobe) * -1) calc(var(--rel-base) * .12) 0 0}
.titan-slot.hidden{display:none}
.titan-slot:hover{transform:translateY(-2px);filter:brightness(1.15)}
.titan-slot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.titan-slot img{position:absolute;left:-8%;top:-4%;width:116%;height:116%;object-fit:contain;pointer-events:none}
.titan-slot .titan-slot-cd{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(rgba(6,8,18,.72) var(--titan-cd,0deg),transparent 0)}
/* 05/11: os segundos da recarga no meio do círculo, no mesmo jeito do número das skills */
.titan-slot .titan-slot-t{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  color:#e6f0ff;font-size:calc(11px * var(--text-scale, 1));font-weight:900;font-style:normal;text-shadow:0 1px 3px #000,0 0 2px #000}
.titan-slot .titan-slot-t:empty{display:none}
.titan-slot .titan-slot-2 .titan-slot-t{font-size:calc(8px * var(--text-scale, 1))}
.titan-slot.tem-2>.titan-slot-t{inset:0 24% 28% 0}   /* com o 2º Titã no canto, o número sobe e vai para a esquerda */
.titan-slot.pronto{animation:titan-slot-pronto 1.6s ease-in-out infinite}
.titan-slot.dormindo img{filter:grayscale(1) brightness(.6) drop-shadow(0 0 2px #fff4)}
@keyframes titan-slot-pronto{50%{box-shadow:0 0 0 2px #120a06,0 0 0 3px var(--ta-c2,#ffc46b),0 0 24px var(--ta-c,#ff5a1f)}}
body.combat-fx-off .titan-slot.pronto,body.graphics-lite .titan-slot.pronto{animation:none}

/* ---------------- o Altar ---------------- */
.titans-altar{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(3,2,6,.78);
  font:14px/1.3 system-ui,"Segoe UI",sans-serif;color:#f3eadb;-webkit-user-select:none;user-select:none;
  --ta-c:#ff5a1f;--ta-c2:#ffc46b;--ta-esc:#2a0905}
.titans-altar.hidden{display:none}
.ta-painel{position:relative;width:min(1180px,96vw);height:min(660px,92vh);border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--ta-esc) 85%,#000) 0%,#07060b 70%);
  border:1px solid color-mix(in srgb,var(--ta-c) 45%,#3a2f22);
  box-shadow:0 0 0 1px #000,0 30px 80px #000c,0 0 60px color-mix(in srgb,var(--ta-c) 22%,transparent) inset}
.ta-cin{font-family:Cinzel,Georgia,serif}
.ta-topo{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;z-index:6;background:linear-gradient(#000b,#0000)}
.ta-topo h1{font:900 19px Cinzel,Georgia,serif;letter-spacing:.14em;color:#f7e6c2;text-shadow:0 0 12px var(--ta-c);white-space:nowrap}
.ta-topo-ico{width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.4em}
.ta-el-ico{display:inline-block;width:1.4em;height:1.4em;object-fit:contain;vertical-align:-.35em}
.ta-pacote .ta-pac-ico .col-icone-img{width:30px;height:30px}
.ta-moedas{margin-left:auto;display:flex;gap:6px;min-width:0;overflow:hidden}
.ta-moeda{display:flex;align-items:center;gap:5px;background:#0009;border:1px solid #ffffff1c;border-radius:20px;padding:3px 10px 3px 4px;font-weight:800;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ta-moeda img{width:20px;height:20px;flex:none}
.ta-fechar{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #fff3;background:#0008;color:#fff;font-size:18px;cursor:var(--cur-mao,pointer)}
.ta-fechar:hover{background:#fff2}
.ta-ico{width:18px;height:18px;vertical-align:-4px;flex:none}

/* medalhas (os 4 Titans) */
.ta-medalhas{position:absolute;left:14px;top:62px;bottom:14px;width:96px;display:flex;flex-direction:column;gap:10px;z-index:4}
.ta-med{position:relative;border:0;background:none;color:#ddd;cursor:var(--cur-mao,pointer);display:flex;flex-direction:column;align-items:center;gap:3px;padding:0}
.ta-med .ta-bola{width:66px;height:66px;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 60%,var(--mc) 0%,#000 75%);border:2px solid #fff3;box-shadow:0 0 0 2px #000}
.ta-med .ta-bola img{position:absolute;left:-12%;top:-6%;width:124%;height:124%;object-fit:contain}
.ta-med b{font:800 11px Cinzel,Georgia,serif;letter-spacing:.06em}
.ta-med small{font-size:10px;color:#bba;white-space:nowrap}
.ta-med.sel .ta-bola{border-color:var(--ta-c2);box-shadow:0 0 0 2px #000,0 0 18px var(--ta-c),inset 0 0 14px var(--ta-c)}
.ta-med.sel b{color:var(--ta-c2)}
.ta-med.preso .ta-bola img{filter:brightness(0) drop-shadow(0 0 2px #fff4)}
.ta-med .ta-ativo-selo{position:absolute;right:4px;top:-2px;z-index:2;font-size:9px;font-weight:900;padding:1px 5px;border-radius:8px;background:var(--ta-c2);color:#1b0d03}

/* palco */
.ta-palco{position:absolute;left:118px;right:376px;top:40px;bottom:0}
.ta-aura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ta-sigilo{position:absolute;left:50%;top:60%;width:min(440px,74%);aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.36);opacity:.95;pointer-events:none}
/* ANIMAÇÕES POR @keyframes (11/10, "lag no Android"): antes o laço escrevia --ta-t no Altar inteiro a cada
   quadro e o navegador recalculava a tela toda 60x/s. Agora quem gira/balança é o próprio navegador. */
@keyframes ta-gira{to{transform:rotate(360deg)}}
@keyframes ta-gira-volta{to{transform:rotate(-360deg)}}
@keyframes ta-boia{from{translate:0 -8px}to{translate:0 8px}}
@keyframes ta-pulsa{from{box-shadow:0 0 0 var(--ta-c)}to{box-shadow:0 0 12px var(--ta-c)}}
@keyframes ta-brilho{from{translate:0 0}to{translate:650% 0}}
.ta-sigilo svg{width:100%;height:100%;animation:ta-gira 25.7s linear infinite}
.ta-sigilo .s2{position:absolute;inset:12%;width:76%;height:76%;animation:ta-gira-volta 16.4s linear infinite}
.ta-titan{position:absolute;left:50%;top:60%;width:min(400px,66%);aspect-ratio:1;object-fit:contain;pointer-events:none;
  transform:translate(-50%,-70%) scale(var(--ta-bump,1));animation:ta-boia 1.96s ease-in-out infinite alternate;will-change:translate;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--ta-c) 70%,transparent)) drop-shadow(0 12px 10px #000a)}
.ta-titan.preso{filter:brightness(0) drop-shadow(0 0 3px #fff5)}
.ta-pips{position:absolute;left:50%;top:60%;width:0;height:0}
.ta-pip{position:absolute;width:16px;height:16px;margin:-8px;transform:rotate(45deg);background:#1a1410;border:2px solid #6b5a44}
.ta-pip.on{background:var(--ta-c2);border-color:#fff;box-shadow:0 0 12px var(--ta-c)}
.ta-pip.prox{border-color:var(--ta-c2);animation:ta-pulsa .52s ease-in-out infinite alternate}
.ta-nomeT{position:absolute;left:0;right:0;top:12px;text-align:center;padding:0 8px}
.ta-nomeT h2{font:900 34px Cinzel,Georgia,serif;letter-spacing:.12em;color:#fff;text-shadow:0 0 18px var(--ta-c),0 3px 0 #000}
.ta-nomeT p{color:var(--ta-c2);font-weight:700;font-size:13px;letter-spacing:.04em}
.ta-nivel{position:absolute;left:50%;top:calc(60% + 84px);transform:translateX(-50%);text-align:center}
.ta-nivel .ta-lv{font:900 30px Cinzel,Georgia,serif;color:#fff;text-shadow:0 0 14px var(--ta-c),0 2px 0 #000;font-variant-numeric:tabular-nums}
.ta-palco.ta-encaixado .ta-titan{width:var(--ta-s);top:var(--ta-y)}
.ta-palco.ta-encaixado .ta-sigilo{width:var(--ta-sig);top:var(--ta-y)}
.ta-palco.ta-encaixado .ta-pips{top:var(--ta-y)}
.ta-rot{font-size:11px;font-weight:800;letter-spacing:.16em;color:color-mix(in srgb,var(--ta-c2) 80%,#fff);text-transform:uppercase}

/* painel da direita */
.ta-lado{position:absolute;right:14px;top:56px;bottom:14px;width:350px;display:flex;flex-direction:column;gap:8px;z-index:4;min-height:0}
.ta-abas{display:flex;gap:6px}
.ta-aba{flex:1;border:1px solid #ffffff22;background:#0007;color:#d8ccb8;border-radius:10px;padding:6px;font:800 12px Cinzel,Georgia,serif;letter-spacing:.08em;cursor:var(--cur-mao,pointer)}
.ta-aba.sel{background:color-mix(in srgb,var(--ta-c) 30%,#000);color:#fff;border-color:var(--ta-c2)}
.ta-corpo{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1;overflow:auto;scrollbar-width:thin}
.ta-card{background:linear-gradient(180deg,#ffffff0d,#0000004d);border:1px solid #ffffff1a;border-radius:12px;padding:10px 12px}
.ta-card h3{font:900 17px Cinzel,Georgia,serif;letter-spacing:.05em;color:#fff}
.ta-linha{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:5px;color:#d8ccb8}
.ta-linha b{color:#fff;text-align:right}
.ta-marco{display:flex;align-items:center;gap:8px;font-size:13px}
.ta-marco b{color:var(--ta-c2)}
.ta-marco-txt{margin:5px 0 6px;font-weight:800;font-size:15px}
.ta-barra{height:10px;border-radius:6px;background:#0009;border:1px solid #ffffff1f;overflow:hidden;position:relative}
.ta-barra>div{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ta-c),var(--ta-c2));box-shadow:0 0 10px var(--ta-c);transition:width .12s}
.ta-acao{margin-top:auto;position:sticky;bottom:0;z-index:2;padding-top:6px;background:linear-gradient(#0000,#140a06 14px);display:flex;flex-direction:column;gap:7px}
.ta-botao{position:relative;width:100%;border:0;border-radius:14px;cursor:var(--cur-mao,pointer);padding:11px 14px 9px;color:#1b0d03;overflow:hidden;touch-action:none;
  background:linear-gradient(180deg,var(--ta-c2),var(--ta-c) 70%,color-mix(in srgb,var(--ta-c) 70%,#000));
  box-shadow:0 0 0 2px #000,0 0 0 3px color-mix(in srgb,var(--ta-c2) 70%,transparent),0 8px 22px color-mix(in srgb,var(--ta-c) 50%,transparent),inset 0 2px 0 #fff8}
.ta-botao b{display:block;font:900 21px Cinzel,Georgia,serif;letter-spacing:.06em;text-shadow:0 1px 0 #fff6}
.ta-botao small{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;font-size:13px;margin-top:2px;font-variant-numeric:tabular-nums}
.ta-botao small span{display:flex;align-items:center;gap:4px}
.ta-botao i{display:block;font-style:normal;font-size:11px;font-weight:700;opacity:.75;margin-top:3px}
.ta-botao::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,#fff0,#fff7,#fff0);transform:skewX(-20deg);pointer-events:none;animation:ta-brilho 4.33s linear infinite}
.ta-botao.mercado{background:linear-gradient(180deg,#d9b6ff,#7b3fe0 70%,#3e1a7a);color:#fff}
.ta-botao.mercado b{text-shadow:0 1px 0 #000;font-size:18px}
/* 01/11: o nível que usa Coração de Titã (marco) */
.ta-botao.marco{background:linear-gradient(180deg,#ff9aa8,#c8203c 65%,#5c0a18);color:#fff;box-shadow:0 0 0 2px #ffd36b inset,0 0 18px #ff3d5a88}
.ta-botao.marco b{text-shadow:0 1px 0 #000;font-size:18px}
.ta-botao.marco b .ta-ico{width:22px;height:22px;vertical-align:-4px}
.ta-botao.marco i{opacity:.9}
.ta-botao.cinza{background:linear-gradient(180deg,#5a5a62,#2a2a30);color:#ddd;cursor:var(--cur-seta,default)}
.ta-botao.cinza::after{display:none}
.ta-botao.segurando{filter:brightness(1.18)}
.ta-botao:disabled{cursor:var(--cur-seta,default)}
.ta-linkm{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;color:#d9c3ff;background:#2a1450aa;border:1px solid #9a6bff55;border-radius:10px;padding:7px;cursor:var(--cur-mao,pointer)}
.ta-linkm:hover{background:#3a1c70cc}
.ta-dupla{display:flex;gap:7px}.ta-dupla>*{flex:1}
.ta-pequeno{border:1px solid #ffffff30;background:#0008;color:#fff;border-radius:10px;padding:8px;font:800 12px Cinzel,Georgia,serif;letter-spacing:.06em;cursor:var(--cur-mao,pointer)}
.ta-pequeno.ok{background:color-mix(in srgb,var(--ta-c) 35%,#000);border-color:var(--ta-c2)}
.ta-pequeno:disabled{opacity:.55;cursor:var(--cur-seta,default)}
.ta-evo{display:flex;align-items:center;gap:10px}
.ta-evo .ta-mini{width:56px;height:56px;position:relative;flex:none;border-radius:10px;background:#0008;border:1px solid #ffffff1a;overflow:hidden}
.ta-evo .ta-mini img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain;filter:brightness(0) invert(.2) drop-shadow(0 0 3px var(--ta-c))}
.ta-evo .ta-mini.pronto img{filter:none}
.ta-custos{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;font-weight:800;margin-top:4px}
.ta-custos span{display:flex;align-items:center;gap:3px}
.ta-custos .falta{color:#ff8b8b}
.ta-pacote{display:flex;align-items:center;gap:10px}
.ta-pacote .ta-pac-ico{font-size:26px;width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle,color-mix(in srgb,var(--ta-c) 50%,#000),#000)}
.ta-pacote .ta-pac-ico img{width:30px;height:30px}
.ta-pacote .ta-pac-txt{flex:1;min-width:0}
.ta-pacote .ta-pac-txt b{display:block;font:900 14px Cinzel,Georgia,serif;color:#fff}
.ta-pacote .ta-pac-txt small{color:#cbb;font-size:12px}
.ta-pacote .ta-pequeno{white-space:nowrap}
.ta-nota{font-size:11px;color:#b9ad9b;text-align:center}

/* avisos e números que sobem */
.ta-flutua{position:fixed;pointer-events:none;font:900 20px Cinzel,Georgia,serif;color:var(--ta-c2);text-shadow:0 2px 0 #000,0 0 10px var(--ta-c);z-index:9002;white-space:nowrap;transform:translate(-50%,-50%);will-change:transform,opacity}
.ta-aviso{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;text-align:center;padding:10px 28px;white-space:nowrap;
  background:linear-gradient(90deg,#0000,color-mix(in srgb,var(--ta-esc) 90%,#000) 15%,color-mix(in srgb,var(--ta-esc) 90%,#000) 85%,#0000);border-top:2px solid var(--ta-c2);border-bottom:2px solid var(--ta-c2)}
.ta-aviso b{display:block;font:900 26px Cinzel,Georgia,serif;color:#fff;text-shadow:0 0 14px var(--ta-c)}
.ta-aviso span{font-weight:800;color:var(--ta-c2)}
.ta-tampa{position:absolute;inset:46px 0 0;z-index:8;display:grid;place-items:center;text-align:center;padding:24px;background:radial-gradient(circle,#000a,#000e)}
.ta-tampa b{display:block;font:900 24px Cinzel,Georgia,serif;color:#fff;text-shadow:0 0 14px var(--ta-c);margin-bottom:8px}
.ta-tampa p{max-width:440px;color:#d8ccb8;margin:0 auto}
.ta-msg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:12;max-width:90%;background:#000d;border:1px solid var(--ta-c2);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;text-align:center;pointer-events:none}
.ta-msg.hidden{display:none}

/* Força do Titã (1358): a faixa colada no APRIMORAR; o chip do próximo ponto brilha, o do clique pula */
.ta-forca{display:flex;flex-direction:column;gap:5px;padding:7px 9px;border-radius:12px;cursor:var(--cur-mao,pointer);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ta-esc) 70%,#000),#000a);border:1px solid color-mix(in srgb,var(--ta-c) 55%,#0000)}
.ta-forca-tit{display:flex;align-items:baseline;gap:8px;min-width:0}
.ta-forca-tit span{font:900 13px Cinzel,Georgia,serif;letter-spacing:.08em;color:#fff;white-space:nowrap}
.ta-forca-tit small{font-size:11px;font-weight:700;color:#b9ad9b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ta-forca-tit b{margin-left:auto;font:900 16px Cinzel,Georgia,serif;color:var(--ta-c2);text-shadow:0 0 10px var(--ta-c);font-variant-numeric:tabular-nums}
.ta-chips{display:flex;gap:5px}
.ta-chip{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:4px;padding:4px 2px;border-radius:8px;background:#ffffff0f;border:1px solid #ffffff1a;font-variant-numeric:tabular-nums}
.ta-chip i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;color:#c9bca8}
.ta-chip b{font-size:14px;font-weight:900;color:#fff}
.ta-chip.prox{border-color:var(--ta-c2);box-shadow:0 0 8px color-mix(in srgb,var(--ta-c) 70%,#0000) inset}
.ta-chip.prox i{color:var(--ta-c2)}
.ta-chip.sobe{animation:ta-chip-sobe .42s ease-out}
@keyframes ta-chip-sobe{0%{transform:scale(1.28);background:color-mix(in srgb,var(--ta-c) 70%,#000);box-shadow:0 0 18px var(--ta-c)}100%{transform:scale(1)}}
.ta-flutua.ta-flutua-at{font:900 17px system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 #000,0 0 10px var(--ta-c),0 0 4px var(--ta-c2)}
/* clique de sorte: ×2 / ×3 / ×4 */
.ta-sorte{position:absolute;left:50%;top:30%;z-index:16;pointer-events:none;text-align:center;white-space:nowrap;transform:translate(-50%,-50%);animation:ta-sorte 1.6s ease-out forwards}
.ta-sorte b{display:block;font:900 44px Cinzel,Georgia,serif;letter-spacing:.04em;color:#fff;text-shadow:0 3px 0 #000,0 0 18px var(--ta-c),0 0 36px var(--ta-c2)}
.ta-sorte span{display:inline-block;margin-top:2px;padding:3px 12px;border-radius:999px;font-weight:900;font-size:14px;color:#1b0d03;background:linear-gradient(180deg,#fff2c4,var(--ta-c2))}
.ta-sorte.x3 b{font-size:54px;color:#ffe9a6}
.ta-sorte.x4{animation-duration:2s}.ta-sorte.x4 b{font-size:66px;color:#fff;background:linear-gradient(180deg,#fff,#ffd36b 45%,#ff7a1f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px var(--ta-c))}
@keyframes ta-sorte{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}12%{opacity:1;transform:translate(-50%,-50%) scale(.92)}22%{transform:translate(-50%,-50%) scale(1.05)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-62%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.96)}}
.ta-lv.ta-lv-sorte{animation:ta-lv-sorte .9s ease-out}
@keyframes ta-lv-sorte{0%{transform:scale(1.6);color:#ffe9a6;text-shadow:0 0 22px var(--ta-c2),0 0 40px var(--ta-c)}100%{transform:scale(1)}}
.ta-palco.ta-treme{animation:ta-treme .45s linear}
@keyframes ta-treme{0%,100%{transform:none}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,-1px)}}

/* ---------------- celular em pé ---------------- */
@media (max-width:760px) and (orientation:portrait){
  .ta-painel{width:100vw;height:100dvh;border-radius:0;border:0}
  .ta-topo h1{font-size:16px;letter-spacing:.08em}
  .ta-moeda{font-size:12px;padding:2px 8px 2px 3px}
  .ta-moeda.ta-gold,.ta-moeda.ta-ess{display:none}   /* 2454: a Essência aparece no botão APRIMORAR (como o Gold) */
  .ta-medalhas{left:0;right:0;top:46px;bottom:auto;width:auto;height:86px;flex-direction:row;justify-content:space-around;padding:0 6px}
  .ta-med .ta-bola{width:52px;height:52px}
  .ta-palco{left:0;right:0;top:130px;bottom:auto;height:calc(100dvh - 130px - 330px);min-height:150px}
  .ta-nomeT{top:0}.ta-nomeT h2{font-size:24px;margin:2px 0 0}.ta-nomeT p{font-size:12px;margin:0}
  .ta-titan{width:min(270px,70%)}
  .ta-nivel{top:auto;bottom:0}.ta-nivel .ta-lv{font-size:22px}
  .ta-lado{left:10px;right:10px;top:auto;bottom:10px;width:auto;height:322px;gap:6px}
  .ta-card{padding:8px 11px}.ta-card h3{font-size:15px}.ta-linha{margin-top:3px}
  .ta-botao{padding:9px 12px 7px}.ta-botao b{font-size:19px}
  .ta-forca{padding:5px 8px;gap:4px}.ta-forca-tit small{display:none}.ta-chip{padding:3px 1px}.ta-chip b{font-size:13px}
  .ta-sorte b{font-size:36px}.ta-sorte.x3 b{font-size:44px}.ta-sorte.x4 b{font-size:52px}
}
/* celular em pé BAIXO (360x640, ou com a barra do navegador): medalhas e painel mais baixos, o Titan ganha altura */
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){
  .ta-medalhas{height:68px}.ta-med .ta-bola{width:42px;height:42px}.ta-med{gap:1px}.ta-med small{font-size:9px}
  .ta-palco{top:112px;height:calc(100dvh - 112px - 290px);min-height:140px}
  .ta-lado{height:282px}
}
/* ---------------- celular deitado ---------------- */
@media (max-height:520px) and (orientation:landscape){
  .ta-painel{width:100vw;height:100dvh;border-radius:0;border:0}
  .ta-topo{height:40px}.ta-topo h1{font-size:15px}
  .ta-moeda.ta-gold{display:none}
  .ta-medalhas{top:44px;bottom:6px;left:6px;width:64px;gap:4px}
  .ta-med .ta-bola{width:42px;height:42px}.ta-med b{font-size:9px;letter-spacing:.02em}.ta-med small{display:none}
  .ta-palco{left:70px;right:328px;top:30px;bottom:0}
  .ta-nomeT h2{font-size:20px;margin:0}.ta-nomeT p{font-size:11px;margin:0}
  .ta-titan{width:min(220px,58%)}
  .ta-nivel{top:auto;bottom:4px}.ta-nivel .ta-lv{font-size:20px}
  .ta-lado{right:8px;top:44px;bottom:6px;width:316px;gap:5px}
  .ta-card{padding:7px 10px}.ta-card h3{font-size:14px}
  .ta-botao{padding:7px 10px 6px}.ta-botao b{font-size:17px}.ta-botao i{display:none}
  .ta-forca{padding:4px 8px;gap:3px}.ta-forca-tit small{display:none}.ta-chip{padding:2px 1px}.ta-chip b{font-size:12px}
  .ta-sorte b{font-size:32px}.ta-sorte.x3 b{font-size:38px}.ta-sorte.x4 b{font-size:46px}
}
body.graphics-lite .ta-titan{filter:none}
body.graphics-lite .ta-botao::after{display:none}
@media (prefers-reduced-motion:reduce){.ta-sigilo svg,.ta-sigilo .s2,.ta-titan,.ta-pip.prox,.ta-chip.sobe,.ta-lv.ta-lv-sorte,.ta-palco.ta-treme{animation:none}.ta-botao::after{display:none}}
body.titans-altar-aberto .col-dialog-backdrop{z-index:9100}
/* 1881: aba TALENTOS */
.ta-tal-topo{margin:0 0 8px}
.ta-tal{display:grid;gap:2px;margin-bottom:8px}
.ta-tal-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ta-tal-cab h3{margin:0;font:900 15px Cinzel,Georgia,serif;color:#fff}
.ta-tal-niv{font-size:12px;font-weight:800;color:var(--ta-c2);white-space:nowrap}
.ta-tal-faz{margin:0;font-size:12px;color:#cbb}
.ta-tal-seta{color:#7dff9a;white-space:nowrap}
.ta-tal-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.ta-tal-pe .ta-custos{margin-top:0}
.ta-tal-trava{font-size:12px;color:#cbb}
.ta-tal .ta-linha>span{flex:none;white-space:nowrap}
.ta-tal .ta-linha>b{text-align:right}
.ta-tal-max{margin-top:6px;font-size:12px;font-weight:800;color:var(--ta-c2)}
/* 17/10 (lag do Altar): no celular o Altar cobre a tela; a arena por baixo não precisa ser pintada (a luta continua). */
@media (max-width:760px),(max-height:520px){body.titans-altar-aberto #battleView{visibility:hidden}}

/* ---- Força do Titã À PARTE nos atributos (11/10, pedido do autor: "ENE 34 +13 em vermelho").
   Sidebar da batalha, janela do personagem e ficha. Em "em" para seguir o tamanho de cada lugar. */
.forca-tita{font-style:normal;font-weight:800;color:#ff5a4f;font-size:.8em;margin-left:.22em;white-space:nowrap;letter-spacing:0;text-shadow:0 0 6px rgba(255,60,40,.35)}
.battle-left-rail .hero-attributes strong,.stat-modal-row .stat-modal-value>strong{white-space:nowrap}
.battle-left-rail .hero-attributes strong{min-width:0;overflow:hidden;text-overflow:clip}
.fh-atrib-mini .forca-tita{color:#ff6a5c}

/* ---- O que cada Titan faz e o que o aprimorar dá (11/10, jogadores: "não tem escrito qual debuff eles dão nem o que melhorar") */
.ta-efeitos{display:grid;gap:6px;margin:6px 0 4px}
.ta-ef{border-left:3px solid var(--ta-c);background:color-mix(in srgb,var(--ta-c) 12%,#0006);border-radius:0 8px 8px 0;padding:5px 8px}
.ta-ef-rot{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ta-c2) 85%,#fff)}
.ta-ef p{margin:2px 0 0;font-size:13px;line-height:1.3;color:#fff;font-weight:700;overflow-wrap:anywhere}
.ta-ef p.ta-ef-raiva{font-size:12px;font-weight:600;color:#ffb3a1}
.ta-ganhos{list-style:none;margin:5px 0 8px;padding:0;display:grid;gap:4px}
.ta-ganhos li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.3;color:#e8dcc6;overflow-wrap:anywhere}
.ta-ganhos li::before{content:"✦";position:absolute;left:0;top:0;color:var(--ta-c2);font-size:11px}
.ta-evo-ganho{font-size:11.5px;line-height:1.3;color:#e8dcc6;margin:2px 0 3px;overflow-wrap:anywhere}
.ta-evo-preco{color:#ffb36b}
/* 23/10: o preço do 1º nível da forma nova e o "Faltam:" da evolução, com a arte de verdade. */
.ta-evo-preco .ta-ico{width:15px;height:15px;vertical-align:-3px;margin:0 1px}
.ta-faltam{color:#ff8b8b;margin-top:2px}.ta-faltam b{font-weight:900}
@media (max-width:760px) and (orientation:portrait){.ta-ef p{font-size:12.5px}.ta-ganhos li{font-size:12px}}
@media (max-height:520px) and (orientation:landscape){.ta-ef{padding:4px 7px}.ta-ef p{font-size:12px}.ta-ganhos li{font-size:11.5px}}
/* o efeito sob o nome: só no celular (no PC o painel da direita já mostra tudo) */
.ta-nome-ef{display:none}
@media (max-width:760px) and (orientation:portrait){
  .ta-nome-ef{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;pointer-events:auto;cursor:var(--cur-mao,pointer);
    margin:4px auto 0;max-width:min(360px,94%);padding:3px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ta-c) 55%,#fff0);
    background:color-mix(in srgb,var(--ta-c) 18%,#000a);color:#fff;font:700 11.5px/1.3 inherit;text-align:center;overflow-wrap:anywhere}
  .ta-nome-ef b{color:var(--ta-c2);font-weight:900;white-space:nowrap}
  .ta-ef-curto{display:none}
}
/* celular baixo (360x640): uma linha só, com o nome do efeito; o toque abre o texto inteiro */
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){
  .ta-nome-ef{-webkit-line-clamp:1;margin-top:1px;padding:1px 10px;font-size:10.5px;line-height:1.25}.ta-ef-longo{display:none}.ta-ef-curto{display:inline}
}

/* 1819 (17/10): o 2º Titan no canto do círculo da barra, com a recarga dele */
.titan-slot .titan-slot-2{--titan-cd:0deg;position:absolute;right:2%;bottom:2%;width:46%;height:46%;border-radius:50%;overflow:hidden;
  background:#120a06;box-shadow:0 0 0 1.5px var(--ta-c,#ffc46b);pointer-events:none}
.titan-slot .titan-slot-2.hidden{display:none}
.titan-slot .titan-slot-2 img{position:absolute;left:-10%;top:-6%;width:120%;height:120%;object-fit:contain}
.titan-slot .titan-slot-2 i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.62) var(--titan-cd,0deg),transparent 0)}

/* 23/10 (Android, print do autor): em pé, o painel de baixo tinha altura fixa e o bloco do APRIMORAR (preso no pé)
   cobria quase tudo — o quadro da skill virava uma faixinha. O painel cresce com a tela e o Titan encolhe. */
@media (max-width:760px) and (orientation:portrait){
  .ta-painel{--ta-lado:clamp(322px,calc(100dvh - 402px),400px)}
  .ta-lado{height:var(--ta-lado)}
  .ta-palco{height:calc(100dvh - 130px - var(--ta-lado) - 12px);min-height:150px}
  .ta-acao{gap:5px}.ta-acao .ta-nota{font-size:10.5px;line-height:1.25}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){
  .ta-painel{--ta-lado:clamp(282px,calc(100dvh - 358px),400px)}
  .ta-palco{height:calc(100dvh - 112px - var(--ta-lado) - 8px);min-height:140px}
  .ta-acao .ta-botao i,.ta-acao .ta-nota{display:none}
}
/* celular deitado: a nota do 2º Titan saía do pé preso e dava lugar ao quadro da skill */
@media (max-height:520px) and (orientation:landscape){.ta-acao .ta-nota{display:none}}
/* No celular a página de trás não rola com o Altar aberto (antes o dedo descia a página e nada mexia). */
@media (max-width:760px),(max-height:520px){
  /* 23/10: html.col-com-titans (estado-da-pagina.js) no lugar de html:has(), que pesa no Android. */
  html.col-com-titans,body.titans-altar-aberto{overflow:hidden;overscroll-behavior:none}
  .titans-altar{overscroll-behavior:contain}
  .ta-corpo{overscroll-behavior:contain}
}
/* 31/10: o marco de forma do PvP na "Próxima forma" */
.ta-evo-marco{color:#ffd23f;font-weight:700}