/* =====================================================================
   CELULAR EM PÉ — OPÇÃO A (31/10, escolha do autor)
   ---------------------------------------------------------------------
   "Refazer totalmente o layout do android ... baseado em outros jogos mobile" (30/10).
   A arena ocupa a tela toda entre o topo e a faixa dos orbes; os orbes do demônio e
   da anja (as artes do PC, pedido de 28/10) ficam numa faixa logo abaixo da arena, com
   a EXP numa linha fina entre eles, e as skills no pé da arena. Os orbes NÃO ficam por
   cima da arena: a faixa da horda (onde os monstros nascem, desenhada no Editor) vai
   até o pé da arena (autor 31/10: "só cuida com a faixa da arena de horda"). Os atalhos ficam nas laterais
   (src/ui/celular-em-pe.js). Vale só com html.col-cel-a, que o JS liga em tela de
   até 640 px EM PÉ: PC, tablet largo e celular deitado não mudam nada.
   O "html.col-cel-a:not(#_):not(#__)" é de propósito: passa por cima das regras de
   celular de responsivo.css, combate-b.css e hud-arena.css (que usam html:not(#_)).
   ===================================================================== */
@media (max-width:640px) and (orientation:portrait){
  html.col-cel-a:not(#_):not(#__){--cel-exp-h:12px;--cel-topo:56px;--cel-nav:64px;--cel-vitais:96px;--cel-arena:calc(100svh - var(--cel-topo) - var(--cel-nav) - var(--cel-vitais) - env(safe-area-inset-bottom,0px))}

  /* ---------------- TOPO: retrato + moedas; sem logo e sem a faixa da liberação ---------------- */
  html.col-cel-a:not(#_):not(#__) #gameShell>.topbar{height:var(--cel-topo)!important;min-height:0!important;padding:5px 8px!important;margin:0!important;display:flex!important;align-items:center!important;gap:8px!important;
    background:linear-gradient(180deg,#17120c,#0b0907)!important;border:0!important;border-bottom:1px solid #4d3c1c!important;border-radius:0!important;box-shadow:none!important;position:relative;z-index:60}
  html.col-cel-a:not(#_):not(#__) #gameShell .game-brand{display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel{margin-left:auto!important;gap:6px!important;flex:0 0 auto}
  /* VIP, Ranking, Correio, Missões e Caçadas foram para a lateral direita da arena (os botões continuam aqui, escondidos) */
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel>.topbar-button:is(#vipTopButton,.top-rankings-button,[data-view="mail"],.top-missoes-button,#topCacadasButton){display:none!important}
  /* 31/10 (autor: "sentinela, loja, caçada, correio, conta"): os ícones ao lado da conta. Tamanho pela largura da
     tela (30 px no 360, 36 px do 420 para cima); a conta com o desenho maior ("ele tá minúsculo dentro do ícone"). */
  html.col-cel-a:not(#_):not(#__){--cel-ico:clamp(28px,8vw,36px)}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel{gap:clamp(3px,1vw,5px)!important}
  /* no 360 com os cinco ícones o nome e o Gold apertam: o topo junta um pouco os espaços */
  html.col-cel-a:not(#_):not(#__) #gameShell>.topbar{gap:clamp(4px,1.6vw,8px)!important}
  html.col-cel-a:not(#_):not(#__) .cel-topo{gap:clamp(6px,2vw,9px)}
  html.col-cel-a:not(#_):not(#__) .cel-moeda{padding:2px 5px 2px 3px!important}
  .cel-topo-ico{display:none}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel>.cel-topo-ico{position:relative;display:grid;place-items:center;flex:0 0 auto;width:var(--cel-ico);height:var(--cel-ico);min-width:0;min-height:0;
    padding:0!important;margin:0;border-radius:50%;border:1px solid #6b5228;background:radial-gradient(circle at 50% 35%,#2a2014,#0a0805);box-shadow:0 0 6px rgba(201,154,59,.3);cursor:var(--cur-mao,pointer)}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel>.cel-topo-ico[hidden]{display:none!important}
  html.col-cel-a:not(#_):not(#__) .cel-topo-ico img{width:84%;height:84%;object-fit:contain;pointer-events:none}
  html.col-cel-a:not(#_):not(#__) .cel-topo-ico>span{display:none}
  /* 31/10 (autor: "só falta pôr Loja, estilo o prazo no ícone da Sentinela, e Caçadas, discreto e pequeno"): o nome num
     selinho dourado embaixo do ícone, do mesmo jeito do prazo do portal da Sentinela. Só a Loja: "Caçadas" ficava largo demais
     (autor: "não sei se precisa pôr caçada") e a caveira já diz o que é. */
  html.col-cel-a:not(#_):not(#__) .cel-topo-ico[data-cel-atalho="loja"]>span{display:block;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:1;
    padding:0 4px;border-radius:999px;background:#f6d58a;color:#1b1204;border:1px solid #1b150c;font:800 8px/1.35 system-ui,sans-serif;white-space:nowrap;pointer-events:none;
    text-transform:lowercase;letter-spacing:0}
  html.col-cel-a:not(#_):not(#__) .cel-topo-ico[data-cel-atalho="loja"]>span::first-letter{text-transform:uppercase}
  html.col-cel-a:not(#_):not(#__) .cel-topo-ico .cel-atalho-selo{top:-4px;right:-4px;min-width:15px;height:15px;font-size:9px;line-height:13px;padding:0 3px}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .save-panel>.snt-portal-topo{width:var(--cel-ico)!important;height:var(--cel-ico)!important}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .conta-wrap>.conta-menu-button{width:calc(var(--cel-ico) + 4px)!important;height:calc(var(--cel-ico) + 4px)!important;min-width:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone{width:78%!important;height:78%!important;font-size:22px!important}
  html.col-cel-a:not(#_):not(#__) #gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone img{width:100%!important;height:100%!important}
  /* 31/10 (autor, foto do Elite: "olha como o menu dele fica gigante e quanto espaço ocupa o texto, dá pra matar"): o selo do
     dourado/Elite vira uma linha só, com a bolinha e o nome (game.js data-curto); a frase inteira fica na dica. */
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard .arena-enemy-panel>.golden-horda-selo[data-curto]{font-size:0!important;padding:2px 6px!important;margin:1px 0 3px!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;letter-spacing:0}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard .arena-enemy-panel>.golden-horda-selo[data-curto]::before{content:attr(data-curto);font-size:calc(10px * min(var(--text-scale,1),1.15));line-height:1.3}
  /* a LOJA subiu para o topo */
  html.col-cel-a:not(#_):not(#__) #bottomNav>[data-view="store"]{display:none!important}
  /* o nível do VIP ao lado do nome (toca e abre o VIP) */
  html.col-cel-a:not(#_):not(#__) .cel-vip{flex:0 0 auto;margin:0;padding:2px 5px!important;border:0!important;border-radius:7px!important;min-height:0!important;height:auto!important;cursor:var(--cur-mao,pointer);
    background:linear-gradient(#f0c766,#b8862e)!important;color:#1a1208!important;font:800 calc(9px * min(var(--text-scale,1),1.15))/1 system-ui,sans-serif!important;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.6)!important}
  html.col-cel-a:not(#_):not(#__) .cel-vip[hidden]{display:none!important}
  html.col-cel-a:not(#_):not(#__) #proximaLiberacao{display:none!important}
  .cel-topo{display:none}
  html.col-cel-a:not(#_):not(#__) .cel-topo{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
  .cel-retrato{position:relative;flex:0 0 clamp(40px,11.4vw,44px);width:clamp(40px,11.4vw,44px);height:clamp(40px,11.4vw,44px);padding:0;border-radius:50%;border:2px solid #c99a3b;background:radial-gradient(circle at 50% 35%,#2a2014,#0a0805);
    box-shadow:0 0 8px rgba(201,154,59,.45);overflow:visible;cursor:var(--cur-mao,pointer)}
  .cel-retrato .cel-rosto{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block}
  .cel-retrato .cel-rosto .perfil-rosto{position:absolute;inset:0;display:block}
  .cel-retrato .cel-rosto img{max-width:none}
  .cel-retrato em{position:absolute;left:-4px;bottom:-6px;z-index:2;font:800 calc(9px * min(var(--text-scale,1),1.15))/1 system-ui,sans-serif;font-style:normal;white-space:nowrap;
    background:linear-gradient(#f0c766,#b8862e);color:#1a1208;padding:2px 5px;border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.6)}
  .cel-topo-meio{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
  .cel-nome-linha{display:flex;align-items:center;gap:5px;min-width:0}
  .cel-nome-linha>b{flex:0 1 auto;font:700 calc(13px * min(var(--text-scale,1),1.15))/1.05 var(--font-display,Georgia),Georgia,serif;color:#f3dfae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .cel-moedas{display:flex;gap:4px;min-width:0}
  .cel-moeda{display:flex;align-items:center;gap:3px;min-width:0;padding:2px 6px 2px 3px!important;margin:0;border:1px solid #4d3c1c!important;border-radius:10px!important;background:rgba(0,0,0,.55)!important;
    color:#fff!important;font:700 calc(11px * min(var(--text-scale,1),1.15))/1 system-ui,sans-serif!important;white-space:nowrap;box-shadow:none!important;min-height:0!important;height:auto!important}
  .cel-moeda img{width:15px;height:15px;flex:0 0 15px;object-fit:contain}
  .cel-moeda b{font:inherit;min-width:0}
  .cel-gold{flex:0 1 auto;overflow:hidden}
  .cel-gold.cel-longo{font-size:calc(10px * min(var(--text-scale,1),1.1))!important}
  .cel-joia{flex:0 0 auto;cursor:var(--cur-mao,pointer)}

  /* ---------------- BATALHA: só a arena, sem rolar ---------------- */
  html.col-cel-a:not(#_):not(#__) #battleView{padding:0!important;margin:0!important}
  html.col-cel-a:not(#_):not(#__) #battleView .battle-hud-layout{display:block!important;padding:0!important;margin:0!important;gap:0!important}
  html.col-cel-a:not(#_):not(#__) #battleView aside.battle-left-rail,html.col-cel-a:not(#_):not(#__) #battleView .battle-command-deck{display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell:not(.hidden){padding-bottom:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell>main.game-view:not(#battleView){margin-bottom:84px!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard.battle-stage-card{--arena-height:var(--cel-arena);grid-template-rows:auto 0 var(--arena-height)!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;outline:0!important;padding:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>#starterQuestBanner{position:absolute!important;top:70px!important;left:62px!important;right:62px!important;width:auto!important;margin:0!important;z-index:25}
  /* Área e Inimigo por cima do alto da arena, menores */
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta){position:absolute!important;top:6px!important;left:6px!important;width:calc(58vw - 10px)!important;margin:0!important;z-index:40}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>#arenaRightStack{position:absolute!important;top:6px!important;right:6px!important;left:auto!important;width:calc(42vw - 6px)!important;margin:0!important;z-index:40}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>#arenaRightStack>*{width:100%!important;max-width:none!important;height:auto!important}
  /* 03/11 (autor: "esses menus ali na arena ficam mudando de posição toda hora"): a linha de ícones dos efeitos no
     inimigo (sangrar, veneno... efeitos-hud.js) aparece e some a cada golpe. Dentro do cartão ela deixava o cartão do
     Inimigo ~34 px mais alto e a coluna de atalhos da direita (que começa embaixo dele) era refeita a cada vez: duas
     linhas no alto, depois colunas finas dos lados, e de volta. Agora ela fica pendurada logo abaixo do cartão, sem
     mudar a altura dele, encostada à esquerda da coluna da direita, no céu entre as colunas
     (--cel-efx-dir e --cel-efx-max, celular-em-pe.js ajustarCeu). */
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>#arenaRightStack{overflow:visible!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>#arenaRightStack>#arenaEnemyPanel{position:relative!important;overflow:visible!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #arenaEnemyPanel>.efx-ini{position:absolute!important;top:calc(100% + 4px)!important;left:auto!important;right:var(--cel-efx-dir,0px)!important;width:max-content!important;max-width:var(--cel-efx-max,100%)!important;margin:0!important;z-index:41}
  html.col-cel-a:not(#_):not(#__) #gameShell #arenaEnemyPanel>.efx-ini .efx-linha{justify-content:flex-end}
  html.col-cel-a:not(#_):not(#__) #novBotao{display:none!important}
  /* as Ordens de Batalha dentro da gaveta da Área (celular-em-pe.js): só com a gaveta aberta, depois do MUNDO */
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta)>.cel-ordens{display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta>.cel-ordens{display:block;grid-column:1/-1;grid-row:auto;order:20;max-height:38svh;overflow:auto}
  html.col-cel-a:not(#_):not(#__) .cel-ordens>.automation-card{margin:0!important;border-radius:10px!important}
  html.col-cel-a:not(#_):not(#__) .cel-ordens>#autoEquipButton{display:block;width:100%;margin:8px 0 0!important}

  /* skills no pé da arena (como antes no celular); não crescem com o texto (como no PC) */
  html.col-cel-a:not(#_):not(#__) #gameShell #monsterCard .battle-skill-bar{--ui-scale:1;--text-scale:1;top:auto!important;bottom:calc(var(--cel-exp-h) + 8px)!important;left:0!important;right:0!important;margin:0 auto!important;width:max-content!important;max-width:calc(100% - 12px)!important;translate:none!important;transform:none!important;z-index:35}

  /* orbes numa faixa logo abaixo da arena (não por cima: ali nascem monstros) */
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip.battle-vitals-strip{--cel-orbe:54px;--cel-orbe-topo:18px;position:fixed!important;left:0!important;right:0!important;bottom:calc(var(--cel-nav) + env(safe-area-inset-bottom,0px))!important;
    height:var(--cel-vitais)!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important;
    background:linear-gradient(180deg,#17110a,#0b0806)!important;border:0!important;border-top:1px solid rgba(184,137,58,.45)!important;border-radius:0!important;box-shadow:none!important;z-index:36;pointer-events:none;overflow:visible!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>*{pointer-events:auto}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>:is(.vital-identity,.vital-gold,.vital-divider){display:none!important}
  /* ATK/DEF e as joias (Bless, Soul, Chaos, Life, Creation) entre os orbes, acima da Alma
     (31/10, autor: "entre as 2 orbs de hp e mp não tem nada além da barra de exp e alma, não tem atk nem defesa";
     depois: "a bless lá em cima, por quê? deixa ela ali junto das outras, mas sem aumentar o menu"): 3 por linha,
     as mesmas 2 linhas de antes. A Jewel of Dark mora no topo, ao lado do Gold. */
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>:is(#faixaAtkDef,#joiasVitais){position:absolute!important;left:calc(8px + var(--cel-orbe) * 1.9)!important;right:calc(8px + var(--cel-orbe) * 1.9)!important;
    width:auto!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;grid-area:auto!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#faixaAtkDef{display:flex!important;top:10px!important;justify-content:center;gap:12px;font:800 min(calc(11px * var(--text-scale,1)),12.5px)/1.15 system-ui,sans-serif!important;color:#fff!important;text-shadow:0 1px 2px #000}
  html.col-cel-a:not(#_):not(#__) #gameShell #faixaAtkDef small{font-size:min(calc(8.5px * var(--text-scale,1)),9.5px)!important;color:#e3bf6a!important;letter-spacing:.06em}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#joiasVitais{display:grid!important;top:30px!important;grid-template-columns:repeat(3,auto);justify-content:space-evenly;gap:1px 6px;justify-items:start;height:auto!important;min-height:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#joiasVitais>.joia-vista.joia-vista-dark{display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#joiasVitais .joia-vista{display:flex!important;align-items:center;gap:3px;min-width:0;max-width:100%;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0!important;height:auto!important;
    color:#fff!important;font:700 min(calc(9.5px * var(--text-scale,1)),10.5px,2.5vw)/1.2 system-ui,sans-serif!important;white-space:nowrap;text-shadow:0 1px 2px #000}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#joiasVitais .joia-vista img{width:12px!important;height:12px!important;flex:0 0 12px;object-fit:contain}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>#joiasVitais .joia-vista b{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* EXP e Alma: duas linhas finas entre os orbes */
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp){position:absolute!important;grid-area:auto!important;left:calc(8px + var(--cel-orbe) * 1.9)!important;right:calc(8px + var(--cel-orbe) * 1.9)!important;
    top:auto!important;width:auto!important;height:12px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center;gap:5px;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
  /* EXP fininha no pé da arena, embaixo das skills, com os números dentro, como na arena do PC (31/10, autor: "a barra
     de exp poderia ficar pequena abaixo das skills, não? como é na arena do pc ... bem fininha, com números dentro") */
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp):not(.vital-alma){top:calc(-1 * var(--cel-exp-h) - 3px)!important;bottom:auto!important;
    left:50%!important;right:auto!important;width:min(calc(100% - 24px),420px)!important;height:var(--cel-exp-h)!important;transform:translateX(-50%);display:block!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp):not(.vital-alma) :is(.vital-value,#resetContagem){display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp):not(.vital-alma) .vital-label{position:absolute;left:3px;top:50%;transform:translateY(-50%);z-index:3;font-size:0!important;line-height:0!important;display:flex}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp):not(.vital-alma) .vital-label>:not(.recomeco-selo){display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp):not(.vital-alma) .vital-track{position:absolute!important;inset:0;width:auto!important;height:auto!important;border-radius:99px!important;overflow:hidden;
    background:linear-gradient(rgba(4,4,8,.92),rgba(14,12,20,.86))!important;box-shadow:0 0 0 1px rgba(227,191,106,.75),0 0 0 2px rgba(60,40,10,.9),0 2px 8px rgba(0,0,0,.6)!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip #xpBar{height:100%!important;background:linear-gradient(180deg,#ffe6a0,#e3a93a 45%,#a8701c)!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip #hudExpNum{display:flex!important;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;gap:7px;pointer-events:none;
    font:800 min(calc(8.5px * var(--text-scale,1)),9.5px)/1 system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap;overflow:hidden;color:#fff7e0;text-shadow:0 1px 2px #000,0 0 4px #000;font-variant-numeric:tabular-nums}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip #hudExpNum b{color:#ffd774;font-weight:900}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip #hudExpNum i{font-style:normal;opacity:.9}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip #hudExpNum i:last-child{display:none}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-alma{bottom:7px!important}
  html.col-cel-a:not(#_):not(#__) body.desbloq-falta-alma:not(.col-v3-ativo) #gameShell #battleVitalsStrip>.vital-alma{display:none!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp) .vital-track{flex:1 1 auto;width:auto!important;height:6px!important;min-width:0;position:relative!important;margin:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp) :is(.vital-label,.vital-value){font-size:calc(8.5px * min(var(--text-scale,1),1.15))!important;line-height:1!important;color:#ffe2a0!important;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;margin:0!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-alma :is(.vital-label,.vital-value){color:#e0c8ff!important}
  /* 31/10 (vigia): o selo "+N" de pontos da Alma ficava solto por cima do número (29 • 6.336 / 27.673). Aqui ele entra na
     fila, depois do número, e a barrinha encolhe para dar lugar. */
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-alma .alma-selo-pontos{position:static!important;order:4;flex:none;transform:none!important;margin:0 0 0 5px!important;padding:0 5px!important;
    font-size:min(calc(9px * var(--text-scale,1)),10.5px)!important;line-height:1.3!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-alma.com-selo{flex-wrap:nowrap!important}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-alma.com-selo .vital-value{min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
  html.col-cel-a:not(#_):not(#__) #gameShell #battleVitalsStrip>.vital-meter:not(.vital-hp):not(.vital-mp) .vital-value{order:3}

  /* ---------------- ATALHOS nas laterais da arena ---------------- */
  .cel-lado{display:none}
  html.col-cel-a:not(#_):not(#__) .cel-lado{display:flex;flex-direction:column;gap:var(--cel-atalho-gap,9px);position:absolute;top:calc(var(--cel-lado-topo,84px));z-index:30;pointer-events:none}
  html.col-cel-a:not(#_):not(#__) .cel-lado-esq{left:4px;top:var(--cel-lado-topo-esq,84px)}
  html.col-cel-a:not(#_):not(#__) .cel-lado-dir{right:4px;top:var(--cel-lado-topo-dir,84px)}
  html.col-cel-a:not(#_):not(#__) .cel-atalho{pointer-events:auto;position:relative;width:60px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0!important;height:auto!important;
    color:#f6e3b4!important;font:800 calc(8.5px * min(var(--text-scale,1),1.08))/1.05 system-ui,sans-serif!important;letter-spacing:0;text-align:center;text-shadow:0 1px 2px #000,0 0 4px #000,0 0 6px #000;cursor:var(--cur-mao,pointer)}
  html.col-cel-a:not(#_):not(#__) .cel-atalho[hidden],html.col-cel-a:not(#_):not(#__) .cel-atalho.cel-sobra{display:none!important}
  html.col-cel-a:not(#_):not(#__) .cel-atalho>img{width:var(--cel-atalho-img,42px);height:var(--cel-atalho-img,42px);padding:calc(var(--cel-atalho-img,42px) * .12);border-radius:50%;border:2px solid #b8893a;background:radial-gradient(circle,#2a2014,#0d0a06);box-shadow:0 2px 6px rgba(0,0,0,.6);object-fit:contain;box-sizing:border-box}
  html.col-cel-a:not(#_):not(#__) .cel-atalho>span{display:block;max-width:60px}
  /* tela baixa com texto grande: o nome do atalho encolhe antes de o atalho descer na faixa da horda */
  html.col-cel-a:not(#_):not(#__) .cel-lado.cel-lado-mini .cel-atalho>span{font-size:7.5px!important;line-height:1!important;letter-spacing:0!important}
  html.col-cel-a:not(#_):not(#__) .cel-lado.cel-lado-mini .cel-atalho{gap:1px}
  /* tela baixa (31/10, com INVENTÁRIO e PONTOS): a coluna vira duas, a de dentro ao lado; a da direita cresce para a esquerda */
  html.col-cel-a:not(#_):not(#__) .cel-lado.cel-lado-duplo{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--cel-lado-linhas,4),auto);column-gap:0;row-gap:var(--cel-atalho-gap,5px);justify-items:center;align-items:start}
  html.col-cel-a:not(#_):not(#__) .cel-lado-dir.cel-lado-duplo{direction:rtl}
  html.col-cel-a:not(#_):not(#__) .cel-lado-dir.cel-lado-duplo>*{direction:ltr}
  html.col-cel-a:not(#_):not(#__) .cel-lado.cel-lado-duplo .cel-atalho{width:56px}
  html.col-cel-a:not(#_):not(#__) .cel-atalho-selo{position:absolute;top:-3px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d62b2b;color:#fff;border:1px solid rgba(255,255,255,.25);
    font:800 10px/15px system-ui,sans-serif;font-style:normal;text-shadow:none;box-sizing:border-box}
  html.col-cel-a:not(#_):not(#__) .cel-atalho-selo[hidden]{display:none}
  /* MENU (31/10): um ícone guarda todos os atalhos; html.col-cel-recolhido = guardados (celular-em-pe.js) */
  html.col-cel-a.col-cel-recolhido:not(#_):not(#__) .cel-lado .cel-atalho:not(.cel-menu):not([data-cel-atalho="jornada"]){display:none!important}
  .cel-menu{display:none}
  html.col-cel-a:not(#_):not(#__) .cel-menu-icone{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;place-content:center;width:var(--cel-atalho-img,42px);height:var(--cel-atalho-img,42px);
    padding:calc(var(--cel-atalho-img,42px) * .24);border-radius:50%;border:2px solid #e3bf6a;background:radial-gradient(circle,#3a2a12,#0d0a06);box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 8px rgba(227,191,106,.35);box-sizing:border-box}
  html.col-cel-a:not(#_):not(#__) .cel-menu-icone>s{display:block;width:100%;aspect-ratio:1;border-radius:2px;background:linear-gradient(#ffe6a0,#c99a3b);text-decoration:none}
  html.col-cel-a:not(#_):not(#__) .cel-menu[aria-expanded="true"] .cel-menu-icone>s{display:none}
  html.col-cel-a:not(#_):not(#__) .cel-menu[aria-expanded="true"] .cel-menu-icone::before{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#ffe6a0;font:700 calc(var(--cel-atalho-img,42px) * .42)/1 system-ui,sans-serif}

  /* ---------------- EVENTOS: a coluna "Chamados do Continente" numa folha ---------------- */
  html.col-cel-a:not(#_):not(#__).col-cel-eventos #battleView aside.battle-right-rail{display:block!important;position:fixed!important;left:0!important;right:0!important;top:var(--cel-topo)!important;bottom:calc(var(--cel-nav) + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;height:auto!important;margin:0!important;padding:0 10px 16px!important;overflow:auto!important;overscroll-behavior:contain;overflow-anchor:none;z-index:450;
    background:linear-gradient(180deg,#14100b,#0b0907)!important;border-top:1px solid #6b5326!important}
  /* fechada, a coluna fica fora da tela (e não some): assim o desbloqueio por nível continua valendo e os atalhos sabem o que mostrar */
  html.col-cel-a:not(#_):not(#__):not(.col-cel-eventos) #battleView aside.battle-right-rail{display:block!important;position:fixed!important;left:-300vw!important;top:0!important;width:100vw!important;visibility:hidden!important;pointer-events:none!important;contain:layout paint}
  html.col-cel-a:not(#_):not(#__) #battleView aside.battle-right-rail>.coluna-titulo{display:none!important}
  .cel-eventos-topo{display:none}
  html.col-cel-a:not(#_):not(#__) .cel-eventos-topo{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;margin:0 -10px 8px;padding:10px 12px;background:#14100b;border-bottom:1px solid #4d3c1c}
  html.col-cel-a:not(#_):not(#__) .cel-eventos-topo b{font:700 calc(15px * min(var(--text-scale,1),1.15))/1 var(--font-display,Georgia),Georgia,serif;letter-spacing:1.5px;color:#f3dfae}
  html.col-cel-a:not(#_):not(#__) .cel-eventos-x{width:34px;height:34px;min-height:0!important;padding:0!important;border-radius:50%!important;border:1px solid #6b5326!important;background:#0d0a07!important;color:#f3dfae!important;font-size:16px!important;line-height:1!important}
  .cel-nov-proxima{margin:4px 0 10px;padding:7px 10px;border:1px solid rgba(227,191,106,.35);border-radius:10px;background:rgba(0,0,0,.35);color:#f3dfae;font-size:calc(12px * var(--text-scale,1));line-height:1.3}

  /* ---------------- AVISOS (drop, joia...): no alto da arena, entre as colunas, e não mais em cima dos orbes e do MAIS ---------------- */
  html.col-cel-a:not(#_):not(#__) .action-feedback-stack.na-arena{top:var(--cel-avisos-topo,calc(var(--cel-topo) + 66px))!important;bottom:auto!important;left:var(--cel-ceu-esq,76px)!important;right:var(--cel-ceu-dir,76px)!important;width:auto!important;justify-content:flex-start!important}

  /* ---------------- PAINEL DO PERSONAGEM: cabeçalho e abas mais baixos (a 130% gastavam metade da tela) ---------------- */
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-card{margin:0!important;top:0!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-head{grid-template-columns:repeat(3,minmax(0,1fr)) auto!important;gap:6px 8px!important;padding:8px 10px!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-icon{width:52px!important;height:58px!important;flex-basis:52px!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-identity h2{font-size:calc(18px * min(var(--text-scale,1),1.15))!important;margin:0!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-overline{font-size:calc(8.5px * min(var(--text-scale,1),1.15))!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-identity p{font-size:calc(10px * min(var(--text-scale,1),1.15))!important;line-height:1.25!important;margin:2px 0 0!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.col-cel-a:not(#_):not(#__) #statModal .character-modal-chip,html.col-cel-a:not(#_):not(#__) #statModal .character-modal-gold{padding:5px 6px!important}
  /* 05/11 (autor: "no celular tem menu se sobrepondo ali, inclusive o lendario"): com 6 abas numa fileira só, ATRIBUTOS e
     EVOLUÇÃO passavam por cima da vizinha e o selo do LENDÁRIO caía embaixo do nome. Agora são 3 por linha, ícone ao lado
     do nome e o selo de pontos logo depois do nome (dentro da aba). */
  html.col-cel-a:not(#_):not(#__) #statModal .character-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;padding:2px 4px!important;gap:2px!important;overflow:visible!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button{flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:4px!important;padding:8px 2px 7px!important;min-width:0!important;
    font-size:min(calc(9.5px * var(--text-scale,1)),10.5px)!important;white-space:nowrap!important;line-height:1.1!important;text-align:center!important;letter-spacing:0!important;position:relative}
  html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button .character-tab-icone{font-size:16px!important;flex:0 0 auto}
  html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button .character-tab-icone>img{width:17px!important;height:17px!important;vertical-align:middle!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button>span{position:static!important;flex:0 0 auto;margin:0!important;min-width:16px!important;height:15px!important;padding:0 4px!important;font-size:9.5px!important;line-height:15px!important}
  html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button[hidden],html.col-cel-a:not(#_):not(#__) #statModal .character-tab-button.hidden{display:none!important}

  /* ---------------- LOJA E MERCADO (31/10, autor: "a loja no mercado é confusa, cheia de coisa no topo e eu nao entendo
     nada do mercado pelo cel"; escolheu "A com o total da C"). As categorias numa fileira só que desliza (a ativa fica à
     vista, game.js), a JoD numa linha, o VIP da conta sai (ele já está no topo), o aviso do Mercado vira uma linha com
     "Como funciona?" e a janela da joia mostra o TOTAL antes de comprar. A faixa "Joias e Emblemas" fica com a
     thread do MERCADO R$ (opção C dela: ofertas em cartões e as sem oferta como etiquetas "toque para vender"). ---------------- */
  html.col-cel-a:not(#_):not(#__) #storeView .loja-trilho{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;padding:6px 30px 8px 6px!important;height:auto!important;scrollbar-width:none}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-trilho>.vendor-subtab{flex:0 0 auto!important;min-height:0!important;height:auto!important;padding:6px 11px!important;white-space:nowrap!important;
    font-size:min(calc(11.5px * var(--text-scale,1)),13.5px)!important;border:1px solid #3d311a!important;border-radius:16px!important;margin:0!important;background:#16120b;box-shadow:none!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-trilho>.vendor-subtab.active{background:linear-gradient(#e9bd62,#b98a35)!important;border-color:#f3cf7a!important;color:#1a1208!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-trilho>.vendor-subtab.active *{color:inherit!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-trilho-seta{height:44px!important;width:34px!important;font-size:22px!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-vitrine{padding:8px 6px 14px!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .vip-store-status{display:none!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .store-account-strip{display:block!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet{display:flex!important;align-items:center;gap:8px;min-width:0!important;width:auto!important;padding:5px 6px 5px 10px!important;border-radius:10px}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>span{display:flex;align-items:center;flex:none;width:auto!important;min-width:0!important;margin:0!important;font-size:0!important;letter-spacing:0!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>span img{width:18px;height:18px}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>strong{flex:none;margin:0!important;font-size:min(calc(17px * var(--text-scale,1)),20px)!important;line-height:1}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>strong::after{content:" JoD";font-size:.62em;color:#b9a6d8;letter-spacing:.03em}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>small{flex:1 1 auto;min-width:0;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(calc(10px * var(--text-scale,1)),11.5px)!important}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>.loja-link{flex:none;margin:0 0 0 auto!important;padding:6px 10px!important;font-size:min(calc(11px * var(--text-scale,1)),12.5px)!important;white-space:nowrap}
  html.col-cel-a:not(#_):not(#__) #storeView .loja-barra .token-wallet>.loja-link::before{content:"+ "}
  html.col-cel-a:not(#_):not(#__) #marketPanel .market-list-card{padding:8px 6px 12px!important}
  html.col-cel-a:not(#_):not(#__) #marketPanel .mercado-abas{margin:0 0 8px!important;gap:0!important}
  html.col-cel-a:not(#_):not(#__) #marketPanel .mercado-aba{min-height:38px!important;padding:7px 9px!important;font-size:min(calc(11.5px * var(--text-scale,1)),13.5px)!important;letter-spacing:.02em!important}
  html.col-cel-a:not(#_):not(#__) #marketPanel .mercado-limite{margin:6px 0 0!important;padding:3px 8px!important;font-size:min(calc(11px * var(--text-scale,1)),12.5px)!important}
  /* 04/11 (autor): a faixa MERCADO ABERTO saiu; o "Como funciona?" das joias aparece no título delas */
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok.hidden:not(.conta-nova){display:none!important}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok:not(.conta-nova){display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 10px!important;margin:0 0 8px!important;
    font-size:min(calc(11.5px * var(--text-scale,1)),13px)!important;line-height:1.35}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok:not(.conta-nova) .mal-txt{display:none}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok .mal-como{display:inline-block!important;margin-left:auto;padding:2px 0;font-size:inherit!important;color:#9ff5c8!important;text-decoration:underline;background:none!important;border:0!important}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok.mal-aberto .mal-txt{display:block;width:100%;order:3}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus.ok.mal-aberto .mal-ajuda{display:block!important;width:100%;order:4}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus .mal-ajuda .mercado-ajuda{padding:6px 0 2px;color:#e8dcc0}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus .mal-ajuda .mercado-ajuda-titulo{font-size:min(calc(12.5px * var(--text-scale,1)),14px)!important;margin-bottom:5px}
  html.col-cel-a:not(#_):not(#__) #marketAccessStatus .mal-ajuda li b{font-size:min(calc(10.5px * var(--text-scale,1)),12px)!important}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-joia .market-listing-actions{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-joia .market-listing-actions>.market-buy-quantity{flex:0 0 72px;width:72px!important}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-joia .market-listing-actions>button{flex:1 1 auto}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 5px;width:100%;margin-top:4px;color:#cdbb92;font-size:min(calc(11px * var(--text-scale,1)),12.5px)}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-total .mercado-valor{color:#fff1c9;font-weight:900}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-total>span:first-child{color:#f3cf7a;font-weight:900;letter-spacing:.05em}
  html.col-cel-a:not(#_):not(#__) .jr-mercado-joia .mercado-oferta-total.falta>.mercado-valor:last-child{color:#ff8a7a}

  /* ---------------- BARRA DE BAIXO: 5 partes iguais; o "?" vai para o MAIS ---------------- */
  html.col-cel-a:not(#_):not(#__) .bottom-nav{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;padding-left:0!important;padding-right:0!important}
  html.col-cel-a:not(#_):not(#__).col-cel-chat .bottom-nav{padding-right:56px!important}
  html.col-cel-a:not(#_):not(#__).col-no-jogo .bottom-nav{padding-left:0!important}
  /* 31/10 (o Vigia, 360 px): "INVENTÁ..." cortado com o chat na barra; o nome encolhe com a largura (2,6vw) e a
     linha é mais alta para o acento do Á não ser cortado pelo overflow:hidden. */
  html.col-cel-a:not(#_):not(#__) .bottom-nav>button>span{font:700 min(calc(10px * var(--text-scale,1)),10.5px,2.6vw)/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;letter-spacing:0!important}
  html.col-cel-a:not(#_):not(#__) .col-ajuda.is-collapsed{display:none!important}
  .cel-ajuda-mais{display:none!important}
  html.col-cel-a:not(#_):not(#__) body.nav-folha-aberta #gameShell #navMoreMenu>.cel-ajuda-mais{display:flex!important}

  /* o botão APP (instalar o jogo) morava em cima do chat, por cima do orbe de MP. Primeiro foi para o meio da faixa
     dos orbes; desde 31/10 ali moram ATK/DEF e as joias: ele vai para o topo, ao lado do botão da conta (o JS liga
     html.col-cel-app e o nome/moedas abrem espaço). O balão de "instale" fica logo abaixo do topo. */
  /* 31/10 (topo com Sentinela, Loja, Caçadas, Correio e conta): no topo não sobra lugar no 360; o APP desce para a barra de baixo,
     ao lado do chat, onde a LOJA abriu espaço. */
  html.col-cel-a:not(#_):not(#__) .col-chat.is-collapsed .col-app-instalar{position:fixed!important;left:auto;right:60px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + (var(--cel-nav) - 44px) / 2);transform:none;z-index:61;margin:0}
  html.col-cel-a:not(#_):not(#__) .col-chat.is-collapsed .col-app-balao{position:fixed!important;right:8px;left:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + var(--cel-nav) + 6px);z-index:61}
  html.col-cel-a.col-cel-app.col-cel-chat:not(#_):not(#__) .bottom-nav{padding-right:106px!important}
  /* 02/11 (autor: "quando eu abro o menu da conta ele corta um pouco do final do menu"): a barra de baixo (display:grid acima)
     voltava por cima da gaveta da CONTA e cobria Discord e SAIR. Com a gaveta aberta ela sai, como no resto do celular (combate-b.css). */
  html.col-cel-a:not(#_):not(#__) body.conta-menu-aberto .bottom-nav,html.col-cel-a:not(#_):not(#__) body.conta-menu-aberto .col-chat{display:none!important}

  /* BÔNUS DE EVENTO E AVISOS DO SERVIDOR (#faixaSobArena, avisos-ui.js): no layout antigo moravam logo abaixo da placa
     de HP/MP; aqui ela é fixa. Ficam no céu da arena, entre as duas colunas de atalhos e logo abaixo dos cartões de
     Área/Inimigo: acima da faixa onde nascem os monstros. O JS mede os cartões (--cel-cartoes-b). */
  html.col-cel-a:not(#_):not(#__) #battleView #faixaSobArena{position:fixed!important;top:var(--cel-cartoes-b,calc(var(--cel-topo) + 64px));left:var(--cel-ceu-esq,76px);right:var(--cel-ceu-dir,76px);z-index:38;margin:0!important;
    min-height:0!important;padding:4px 8px!important;justify-content:center;border-color:rgba(184,137,58,.45)!important;background:rgba(12,9,5,.72)!important}
  html.col-cel-a:not(#_):not(#__) #battleView #faixaSobArena .faixa-avisos{justify-content:center}
  html.col-cel-a.col-cel-ceu-cheio:not(#_):not(#__) #battleView #faixaSobArena .faixa-avisos{pointer-events:none}
  /* 31/10 (autor: "o menu de eventos ali nunca mais sai do meio da arena"): a bandeja só aparece quando o atalho BÔNUS
     da lateral é tocado (html.col-cel-bonus, celular-em-pe.js); sem ela, a faixa é só a moldura dos avisos de passagem. */
  html.col-cel-a:not(#_):not(#__):not(.col-cel-bonus) #battleView #faixaSobArena .faixa-bonus{display:none!important}
  html.col-cel-a:not(#_):not(#__):not(.col-cel-bonus) #battleView #faixaSobArena{background:none!important;border-color:transparent!important;padding:0!important}
  html.col-cel-a:not(#_):not(#__):not(.col-cel-bonus) #battleView #faixaSobArena .col-aviso{background:rgba(12,9,5,.82)}
  html.col-cel-a:not(#_):not(#__) [data-cel-atalho="bonus"] .cel-atalho-selo{background:linear-gradient(#f0c766,#b8862e);color:#1a1208;border-color:rgba(0,0,0,.35)}
  html.col-cel-a.col-cel-bonus:not(#_):not(#__) [data-cel-atalho="bonus"]>img{border-color:#ffe08a;box-shadow:0 0 10px rgba(255,214,110,.75)}
  html.col-cel-a:not(#_):not(#__) #battleView #faixaSobArena .bandeja-caixa{top:calc(100% + 6px)!important;bottom:auto!important}

  /* TELA INICIAL (01/11, autor: "deixar o video do fundo no android em pe mostrando mais ele"; escolheu A, "só afastar").
     O vídeo é deitado (1918x1080) e cobria a tela em pé: só 1/4 da largura aparecia (o mastro e o sol). Agora ele ocupa
     62% da altura, mostra uns 40% da largura e some suave em cima e embaixo no fundo escuro. Sem borrado, sem movimento.
     A foto do CSS (main-menu-background.webp) sai só quando o vídeo está tocando; sem vídeo (economia de dados), ela fica. */
  html.col-cel-a:not(#_):not(#__) #mainMenu.main-menu-screen>video.tela-video{top:11vh;top:11lvh;bottom:auto;left:0;right:auto;width:100%;height:62vh;height:62lvh;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
  html.col-cel-a:not(#_):not(#__) #mainMenu.main-menu-screen:has(>video.tela-video.tocando){background-image:none!important}
}