/* =====================================================================
   Portal das Ondas (01/11, SQL 2513): o cartão da coluna da batalha, a
   janela de entrada (src/ui/portal-ui.js), a escolha da forma e a luta em
   tela cheia (src/combat/portal-luta.js desenha o palco; aqui é o HUD nos
   cantos, o joystick, as fichas e o resultado).
   Celular: a janela ocupa a tela inteira e as colunas viram uma só; a luta
   pede o celular deitado. Texto grande do Android: tudo usa --text-scale.
   ===================================================================== */
:root{--po-ouro:#f2c46b;--po-ouro2:#ffe7a8;--po-azul:#4f8bff;--po-azul2:#9cc4ff;--po-fg:#e8eefc;--po-mut:#9fb0cf;--po-fundo:#070b18;--po-borda:rgba(120,160,255,.32)}

/* ---------- cartão da coluna ---------- */
.po-rail-card{padding:0!important;overflow:hidden!important;border-color:rgba(79,139,255,.6)!important;
  background:radial-gradient(circle at 18% 50%,rgba(79,139,255,.45),transparent 42%),linear-gradient(90deg,rgba(8,12,30,.6),rgba(8,12,30,.92) 62%),#0a1024!important}
.po-rail-entry{width:100%}
.po-rail-entry .rail-toggle-copy strong{color:var(--po-ouro2)}
.po-rail-entry .rail-toggle-chevron{font-size:1.3em;color:var(--po-azul2)}

/* ---------- janela de entrada ---------- */
.po-fundo{z-index:1400}
.po-janela.modal-card{position:relative;width:min(1400px,100%);max-height:calc(100vh - 40px);padding:0;display:flex;flex-direction:column;overflow:hidden;
  border-color:#2c4a8a;color:var(--po-fg);box-shadow:0 0 0 1px #000,0 0 44px rgba(79,139,255,.3),0 20px 60px #000;
  background:radial-gradient(ellipse at 18% 30%,rgba(79,139,255,.22),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(163,92,255,.16),transparent 55%),var(--po-fundo)}
.po-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(180deg,rgba(12,20,48,.96),rgba(12,20,48,.6));border-bottom:1px solid var(--po-borda)}
.po-cab-icone{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;font-size:30px}
.po-cab-icone .col-icone{font-style:normal;display:grid;place-items:center;width:100%;height:100%}
.po-cab-icone .col-icone-img{width:100%;height:100%;object-fit:contain}
.po-cab-txt{min-width:0;flex:1 1 auto}
.po-cab small{display:block;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;color:var(--po-mut)}
.po-cab h2{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(22px * var(--text-scale,1));color:var(--po-ouro2);text-shadow:0 0 16px rgba(79,139,255,.8),0 2px 4px #000;line-height:1.15;overflow-wrap:anywhere}
.po-fechar{min-width:40px;flex:0 0 auto}
.po-teste{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 10px;border:1px solid rgba(255,196,77,.6);border-radius:10px;background:rgba(60,40,6,.75);color:#ffe2a0;text-decoration:none;font-size:calc(11px * var(--text-scale,1));line-height:1.25;text-align:right;max-width:46%}
.po-teste b{color:#ffc44d;letter-spacing:.12em;font-size:calc(10.5px * var(--text-scale,1))}
.po-teste:hover,.po-teste:focus-visible{border-color:#ffc44d;color:#fff}
.po-corpo{padding:10px 12px 12px;overflow:auto;min-height:0;flex:1 1 auto}
.po-vazio{padding:28px 10px;text-align:center;color:var(--po-mut);font-size:calc(13px * var(--text-scale,1));background:rgba(10,16,36,.8);border-radius:12px}
.po-grade{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"a b c";gap:10px;align-items:start}
.po-col-a{grid-area:a}.po-col-b{grid-area:b}.po-col-c{grid-area:c}
.po-col{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:761px) and (max-width:1180px){.po-grade{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"a b" "c c"}}
@media (min-width:761px) and (max-height:820px){
  .po-cab{padding:6px 14px}.po-cab-icone{width:40px;height:40px}
  .po-corpo{padding:8px 10px 10px}.po-grade,.po-col{gap:8px}
  .po-bloco{padding:8px 10px}.po-item{padding:5px 8px}
  .po-btn-grande{min-height:42px}
}
.po-bloco{background:rgba(10,16,38,.86);border:1px solid var(--po-borda);border-radius:12px;padding:10px 12px;min-width:0}
.po-bloco h3,.po-formas h3,.po-cartao h3{margin:0 0 6px;font-family:var(--font-display,Georgia,serif);font-size:calc(15px * var(--text-scale,1));color:var(--po-ouro);letter-spacing:.04em;overflow-wrap:anywhere}
.po-bloco h4{margin:10px 0 5px;font-size:calc(10.5px * var(--text-scale,1));font-weight:900;letter-spacing:.12em;color:var(--po-azul2)}
.po-nota{margin:6px 0 0;color:var(--po-mut);font-size:calc(11.5px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.po-ruim{color:#ff9a8a}

/* a Coroa dos Portais e os saldos */
.po-coroa-bloco{display:flex;align-items:center;gap:10px}
.po-coroa{flex:0 0 auto;max-width:34%;height:auto;filter:drop-shadow(0 0 10px rgba(79,139,255,.35))}
.po-coroa-bloco>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.po-coroa-bloco small{font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;color:var(--po-mut)}
.po-coroa-bloco>div>b{font-family:var(--font-display,Georgia,serif);font-size:calc(17px * var(--text-scale,1));color:var(--po-ouro2)}
.po-saldos{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.po-saldo{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border-radius:99px;background:rgba(20,30,64,.9);border:1px solid var(--po-borda);font-size:calc(11px * var(--text-scale,1))}
.po-saldo b{color:var(--po-ouro2);font-weight:900}
.po-saldo small{letter-spacing:0!important;font-weight:700!important}
.po-saldo img{width:22px;height:22px;object-fit:contain}

/* a lista dos 6 portais */
.po-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.po-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;margin:0;padding:7px 10px 7px 8px;border-radius:10px;cursor:var(--cur-mao,pointer);text-align:left;text-transform:none;letter-spacing:0;
  color:var(--po-fg);background:rgba(14,22,48,.88);border:1px solid rgba(120,160,255,.18);transition:border-color .12s,box-shadow .12s}
.po-item:hover,.po-item:focus-visible{border-color:var(--po-cor,var(--po-azul))}
.po-item.sel{border-color:var(--po-cor,var(--po-azul));box-shadow:0 0 0 1px var(--po-cor,var(--po-azul)),0 0 16px color-mix(in srgb,var(--po-cor,#4f8bff) 45%,transparent);background:rgba(22,34,72,.95)}
.po-item.fechado{opacity:.6}
.po-item-arco{width:8px;align-self:stretch;border-radius:4px;background:var(--po-cor,var(--po-azul));box-shadow:0 0 8px var(--po-cor,var(--po-azul))}
.po-item-txt{min-width:0;display:flex;flex-direction:column}
.po-item-txt b{font-size:calc(13px * var(--text-scale,1));color:var(--po-ouro2);overflow-wrap:anywhere}
.po-item-txt small{font-size:calc(11px * var(--text-scale,1));color:var(--po-mut);overflow-wrap:anywhere}
.po-item-chaves{display:inline-flex;align-items:center;gap:2px;font-weight:900;font-size:calc(13px * var(--text-scale,1));color:var(--po-ouro2)}
.po-item-chaves img{width:20px;height:20px;object-fit:contain}

/* o detalhe do portal escolhido */
.po-detalhe{border-color:color-mix(in srgb,var(--po-cor,#4f8bff) 55%,transparent);box-shadow:inset 0 0 30px color-mix(in srgb,var(--po-cor,#4f8bff) 14%,transparent)}
.po-det-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.po-det-cab h3{margin:0}
.po-selo{padding:2px 8px;border-radius:99px;font-size:calc(10.5px * var(--text-scale,1));font-weight:900;background:rgba(79,139,255,.2);border:1px solid rgba(120,160,255,.5);color:var(--po-azul2)}
.po-selo-novo{background:rgba(242,196,107,.16);border-color:rgba(242,196,107,.6);color:var(--po-ouro2)}
.po-forca{margin:8px 0;display:flex;flex-direction:column;gap:4px}
.po-forca-txt{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:calc(12px * var(--text-scale,1))}
.po-forca-txt b.bom{color:#7cf0a0}.po-forca-txt b.medio{color:var(--po-ouro2)}.po-forca-txt b.ruim{color:#ff8a7a}
.po-forca-barra{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.po-forca-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:#ff8a7a}
.po-forca-barra i.medio{background:linear-gradient(90deg,#f2c46b,#ffe7a8)}.po-forca-barra i.bom{background:linear-gradient(90deg,#3fd47a,#9cf5be)}
.po-forca-barra em{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;opacity:.7}
.po-forca small{font-size:calc(10.5px * var(--text-scale,1));color:var(--po-mut)}
.po-fatos{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px;font-size:calc(12px * var(--text-scale,1));line-height:1.35}
.po-chips{display:flex;flex-wrap:wrap;gap:4px}
.po-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:99px;background:rgba(18,28,60,.92);border:1px solid var(--po-borda);font-size:calc(11.5px * var(--text-scale,1));font-weight:700;white-space:nowrap;color:var(--po-fg)}
.po-chip img{width:20px;height:20px;object-fit:contain}
.po-chip-gold{border-color:rgba(242,196,107,.55);color:var(--po-ouro2);white-space:normal}
.po-chip-xp{padding-left:8px;border-color:rgba(156,196,255,.55);color:var(--po-azul2)}
.po-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.po-acoes>.po-btn-grande{flex:1 1 220px}

/* botões */
.po-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;min-height:40px;padding:8px 16px;border:0;border-radius:10px;cursor:var(--cur-mao,pointer);white-space:normal;text-transform:none;
  font-family:var(--font-display,Georgia,serif);font-weight:900;letter-spacing:.05em;font-size:calc(13px * var(--text-scale,1));color:#08122c;
  background:linear-gradient(180deg,#ffe7a8,#f2c46b 55%,#b9822a);box-shadow:0 0 0 1px #4a3210,0 0 16px rgba(242,196,107,.35),inset 0 1px 0 #fff4d0}
.po-btn img{width:20px;height:20px;object-fit:contain}
.po-btn-grande{min-height:48px;padding:10px 20px;font-size:calc(16px * var(--text-scale,1));width:100%}
.po-btn-sec{background:rgba(20,30,64,.95);color:var(--po-fg);box-shadow:0 0 0 1px rgba(120,160,255,.5)}
.po-btn-mini{min-height:30px;padding:4px 10px;font-size:calc(11px * var(--text-scale,1))}
.po-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.po-btn .po-chip{background:rgba(8,18,44,.25);border-color:rgba(8,18,44,.35);color:inherit}

/* abas */
.po-abas{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.po-aba{flex:1 1 auto;margin:0;min-height:34px;padding:5px 8px;border-radius:8px;cursor:var(--cur-mao,pointer);text-transform:none;letter-spacing:.04em;font-weight:900;font-size:calc(11px * var(--text-scale,1));white-space:normal;
  color:var(--po-mut);background:rgba(14,22,48,.9);border:1px solid rgba(120,160,255,.2)}
.po-aba.sel{color:var(--po-ouro2);border-color:var(--po-ouro);box-shadow:inset 0 -2px 0 var(--po-ouro)}
.po-como{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:calc(12px * var(--text-scale,1));line-height:1.35}
.po-como b{color:var(--po-ouro2)}
.po-receita{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(14,22,48,.9);border:1px solid rgba(120,160,255,.2)}
.po-rec-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.po-rec-txt b{font-size:calc(12.5px * var(--text-scale,1));color:var(--po-ouro2)}
.po-rec-txt small{font-size:calc(11px * var(--text-scale,1));color:var(--po-mut)}
.po-receita>.po-btn{flex:0 0 auto}
/* 02/11: a Coroa dos Portais no perfil, embaixo do nome */
.po-perfil-coroa{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:3px 10px 3px 3px;border-radius:99px;background:rgba(8,12,30,.7);border:1px solid rgba(120,160,255,.32)}
.po-perfil-coroa .po-coroa{flex:0 0 auto}
.po-perfil-coroa span{display:flex;flex-direction:column;line-height:1.15}
.po-perfil-coroa small{font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.12em;color:#9fb0cf}
.po-perfil-coroa b{font-size:calc(12.5px * var(--text-scale,1));color:#ffe7a8}
/* 02/11: a Chave do Portal dentro da Máquina do Caos (Ferreiro) */
.po-chave-maquina{margin:14px 0 4px;padding:10px 12px;border-radius:12px;background:rgba(8,12,30,.85);border:1px solid var(--po-borda);color:var(--po-fg)}
.po-chave-maquina .mq-titulo{display:flex;align-items:center;gap:8px}
.po-chave-maquina .mq-titulo img{width:28px;height:28px;object-fit:contain}
.po-admin{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:10px;padding-top:8px;border-top:1px dashed rgba(255,138,122,.4)}
.po-admin small{color:#ff9a8a;font-weight:900;font-size:calc(10px * var(--text-scale,1))}
.po-aberta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;border-color:var(--po-ouro);box-shadow:0 0 18px rgba(242,196,107,.25)}
.po-aberta b{font-size:calc(13px * var(--text-scale,1));color:var(--po-ouro2)}
.po-aberta .po-acoes{margin:0}

/* escolher a forma */
.po-formas{max-width:980px;margin:0 auto;text-align:center}
.po-formas-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.po-forma{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:10px 8px 12px;border-radius:12px;cursor:var(--cur-mao,pointer);text-transform:none;letter-spacing:0;color:var(--po-fg);
  border:1px solid rgba(120,160,255,.35);background:linear-gradient(180deg,rgba(24,38,80,.95),rgba(10,16,38,.95));box-shadow:0 4px 14px #000;transition:transform .12s,box-shadow .12s}
.po-forma:hover,.po-forma:focus-visible{transform:translateY(-3px)}
.po-forma.sel{border-color:var(--po-ouro);box-shadow:0 0 0 2px var(--po-ouro),0 0 24px rgba(242,196,107,.45)}
.po-forma-arte{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(79,139,255,.35),transparent 70%)}
.po-forma-arte img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px #000)}
.po-forma b{font-family:var(--font-display,Georgia,serif);font-size:calc(16px * var(--text-scale,1));color:var(--po-ouro2)}
.po-forma small{font-size:calc(10.5px * var(--text-scale,1));font-weight:900;letter-spacing:.1em;color:var(--po-azul2);text-transform:uppercase}
.po-forma-txt{font-size:calc(12px * var(--text-scale,1));line-height:1.35;color:var(--po-fg)}
.po-formas .po-acoes{justify-content:center}
.po-formas .po-acoes>.po-btn-sec{flex:0 0 auto}

/* ---------- a LUTA (tela cheia) ---------- */
/* a luta fica por cima do jogo e dos guias (8000), embaixo das confirmações (10600) */
body.po-lutando{overflow:hidden}
body.po-lutando .gl-guia{display:none!important}
/* 02/11: a luta cobre a tela toda; a arena da horda continua contando por baixo, mas sem desenhar (era o lag: 40 → 60 quadros) */
body.po-lutando .swarm-layer{display:none}
.po-luta{position:fixed;inset:0;z-index:9000;background:#03060f;color:var(--po-fg);user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
.po-luta.hidden{display:none}
.po-palco{position:absolute;inset:0}
.po-canvas{display:block;width:100%;height:100%}
.po-hud{position:absolute;z-index:2;pointer-events:none;background:rgba(6,10,26,.78);border:1px solid var(--po-borda);border-radius:10px;padding:6px 10px;box-shadow:0 2px 10px #000}
.po-hud button{pointer-events:auto}
.po-hud small{display:block;font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.12em;color:var(--po-mut)}
.po-hud-ganho{top:10px;left:10px;display:flex;flex-direction:column;gap:1px;font-size:calc(12px * var(--text-scale,1));min-width:130px}
.po-hud-ganho b{color:var(--po-ouro2)}
.po-hud-onda{top:10px;left:50%;transform:translateX(-50%);text-align:center;min-width:220px;max-width:calc(100% - 340px)}
.po-hud-onda>b{display:block;font-family:var(--font-display,Georgia,serif);font-size:calc(19px * var(--text-scale,1));color:var(--po-ouro2);text-shadow:0 0 10px rgba(79,139,255,.8)}
.po-hud-onda>span{display:block;font-size:calc(11px * var(--text-scale,1));color:var(--po-fg)}
.po-hud-barra{height:5px;margin:3px 0;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.po-hud-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--po-azul),var(--po-azul2));transition:width .25s}
.po-hud-dir{top:10px;right:10px;display:flex;align-items:center;gap:8px}
.po-renascer{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#ffe7a8,#f2c46b 50%,#7a4e10);box-shadow:0 0 10px rgba(242,196,107,.7);pointer-events:auto}
.po-renascer.usado{background:#2a2f40;box-shadow:none;opacity:.6}
.po-hud-vida{left:50%;bottom:12px;transform:translateX(-50%);width:min(520px,calc(100% - 360px));padding:5px 8px}
.po-vida{position:relative;height:20px;border-radius:6px;background:#2a0b10;overflow:hidden;border:1px solid rgba(255,120,120,.4)}
.po-vida i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#ff6b6b,#c0192f);transition:width .15s}
.po-vida b{position:relative;display:block;text-align:center;font-size:calc(11px * var(--text-scale,1));line-height:20px;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.po-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:4px}
.po-tags:empty{display:none}
.po-tag{padding:1px 7px;border-radius:99px;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.06em;background:#333}
.po-tag-fogo{background:#a4320f;color:#ffe0c0}.po-tag-gelo{background:#1e5a86;color:#d8f1ff}.po-tag-chao{background:#5a1430;color:#ffd0e0;animation:poPisca .6s infinite alternate}
.po-tag-escudo{background:#1d4a8a;color:#d8e8ff}.po-tag-furia{background:#8a2a1d;color:#ffe0d0}
@keyframes poPisca{to{opacity:.55}}
.po-hud-skills{right:12px;bottom:12px;display:flex;gap:8px;background:none;border:0;box-shadow:none;padding:0}
.po-skill{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(56px + 20px * var(--text-scale,1));height:calc(56px + 20px * var(--text-scale,1));margin:0;padding:4px;border-radius:50%;overflow:hidden;cursor:var(--cur-mao,pointer);text-transform:none;letter-spacing:0;
  color:var(--po-fg);background:radial-gradient(circle,rgba(40,60,120,.95),rgba(10,16,38,.95));border:2px solid var(--po-azul);box-shadow:0 0 14px rgba(79,139,255,.5)}
.po-skill b{font-size:calc(11px * var(--text-scale,1));color:var(--po-ouro2);position:relative}
.po-skill span:not(.po-skill-cd){font-size:calc(9.5px * var(--text-scale,1));font-weight:900;line-height:1.1;position:relative;max-width:100%;overflow-wrap:anywhere}
.po-skill-esq{border-color:var(--po-ouro);box-shadow:0 0 14px rgba(242,196,107,.45)}
.po-skill{touch-action:none;-webkit-tap-highlight-color:transparent}
.po-skill.po-apertado{transform:scale(.9)}
/* 06/11 (conferência no celular): "ESQUIVA" a 130% quebrava no meio da palavra (ESQUIV/A) */
.po-skill-esq span:not(.po-skill-cd){font-size:calc(8.5px * var(--text-scale,1));overflow-wrap:normal;letter-spacing:-.02em}
.po-skill-cd{position:absolute;left:0;right:0;bottom:0;height:calc(var(--po-cd,0) * 100%);background:rgba(0,0,0,.62);pointer-events:none}
.po-joy{position:absolute;left:22px;bottom:22px;z-index:2;width:132px;height:132px;border-radius:50%;display:none;place-items:center;touch-action:none;
  background:radial-gradient(circle,rgba(79,139,255,.18),rgba(79,139,255,.06));border:2px solid rgba(120,160,255,.45)}
.po-joy i{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#cfe0ff,#4f8bff);box-shadow:0 0 12px rgba(79,139,255,.8);pointer-events:none}
.po-dica-teclas{position:absolute;left:12px;bottom:14px;z-index:2;pointer-events:none;max-width:calc(50% - 280px);font-size:calc(11px * var(--text-scale,1));color:var(--po-mut);background:rgba(6,10,26,.7);padding:4px 8px;border-radius:8px}
.po-toque .po-joy{display:grid}
.po-toque .po-dica-teclas{display:none}
.po-toque .po-skill-esq b{display:none}

/* o painel do meio (fichas, caiu, fim, treino) */
.po-painel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;background:rgba(3,6,15,.55);overflow:auto}
.po-painel.hidden{display:none}
.po-cartao{width:min(760px,100%);max-height:100%;overflow:auto;padding:14px 16px 16px;border-radius:14px;text-align:center;
  border:1px solid #2c4a8a;background:radial-gradient(ellipse at 50% 0,rgba(79,139,255,.28),transparent 60%),#0a1024;box-shadow:0 0 44px rgba(79,139,255,.35),0 20px 60px #000}
.po-cartao h3{font-size:calc(22px * var(--text-scale,1));color:var(--po-ouro2);text-shadow:0 0 14px rgba(79,139,255,.7)}
.po-cartao .po-como{text-align:left;max-width:520px;margin:6px auto 0}
.po-cartao .po-acoes{justify-content:center}
.po-cartao-mini{width:auto;padding:10px 18px;font-size:calc(15px * var(--text-scale,1))}
.po-cartao-mini b{color:var(--po-ouro2)}
.po-fichas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.po-ficha{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:12px 8px;min-height:160px;border-radius:12px;cursor:var(--cur-mao,pointer);color:var(--po-fg);text-transform:none;letter-spacing:0;
  border:1px solid rgba(120,160,255,.5);background:linear-gradient(180deg,rgba(24,38,80,.95),rgba(10,16,38,.95));box-shadow:0 4px 14px #000;transition:transform .12s,box-shadow .12s}
.po-ficha:hover,.po-ficha:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 2px var(--po-ouro),0 0 22px rgba(79,139,255,.6)}
.po-ficha[disabled]{opacity:.5;cursor:wait;transform:none}
.po-ficha.alto{border-color:var(--po-ouro);box-shadow:0 0 18px rgba(242,196,107,.4)}
.po-ficha-arte{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(79,139,255,.6))}
.po-ficha b{font-family:var(--font-display,Georgia,serif);font-size:calc(15px * var(--text-scale,1));color:var(--po-ouro2)}
.po-ficha span{font-size:calc(12px * var(--text-scale,1));line-height:1.3}
.po-ficha-cura{border-color:rgba(124,240,160,.55)}.po-ficha-furia{border-color:rgba(255,138,90,.6)}
.po-caiu h3{color:#ff9a8a}
.po-fim-arco{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 8px}
.po-fim-arco .po-coroa{max-width:none;animation:poArco 2.4s ease-in-out infinite}
.po-fim-arco b{color:var(--po-ouro2);font-size:calc(14px * var(--text-scale,1))}
@keyframes poArco{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.po-chips-fim{justify-content:center;margin:8px 0}
.po-chips-fim .po-chip{font-size:calc(13px * var(--text-scale,1));padding:4px 10px 4px 5px}
.po-chips-fim .po-chip img{width:24px;height:24px}
.po-virar{display:none;position:absolute;inset:0;z-index:9;place-items:center;padding:24px;text-align:center;background:#03060f;color:var(--po-ouro2);
  font-family:var(--font-display,Georgia,serif);font-size:calc(18px * var(--text-scale,1))}

/* ---------- celular ---------- */
@media (max-width:760px){
  .po-fundo{padding:0!important}
  .po-janela.modal-card{max-height:100dvh;height:100dvh;border-radius:0;width:100%}
  .po-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "a" "c"}
  .po-formas-grade{grid-template-columns:minmax(0,1fr);gap:8px}
  .po-forma{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;text-align:left;padding:8px 10px}
  .po-forma-arte{width:72px;height:72px;grid-row:1/4}
  .po-receita{flex-wrap:wrap}.po-receita>.po-btn{width:100%}
}
/* o celular em pé não cabe a arena: pede para deitar */
@media (orientation:portrait) and (max-width:760px){.po-toque .po-virar,.po-luta .po-virar{display:grid}}
/* celular deitado (baixo): HUD menor, fichas em 3 colunas compactas */
@media (max-height:520px){
  .po-janela.modal-card{max-height:100dvh}
  .po-hud{padding:4px 8px}
  .po-hud-ganho{min-width:0;font-size:calc(10.5px * var(--text-scale,1))}
  .po-hud-onda{min-width:0;max-width:calc(100% - 300px)}
  .po-hud-onda>b{font-size:calc(15px * var(--text-scale,1))}
  .po-hud-onda>span{font-size:calc(9.5px * var(--text-scale,1))}
  .po-hud-vida{bottom:8px;width:calc(100% - 380px);min-width:150px}
  .po-vida{height:16px}.po-vida b{line-height:16px;font-size:calc(9.5px * var(--text-scale,1))}
  .po-skill{width:calc(48px + 14px * var(--text-scale,1));height:calc(48px + 14px * var(--text-scale,1))}
  .po-hud-skills{right:8px;bottom:8px}
  .po-dica-teclas{max-width:118px}
  .po-skill b{font-size:calc(9px * var(--text-scale,1));letter-spacing:-.02em}
  /* 06/11 (conferência no celular deitado): a barra de vida ficava embaixo do Q. Ela vai entre o joystick (ou a dica das teclas) e os 3 botões. */
  .po-hud-vida{left:136px;right:calc(46px + 3 * (48px + 14px * var(--text-scale,1)));width:auto;min-width:0;transform:none}
  .po-joy{left:14px;bottom:12px;width:112px;height:112px}
  .po-joy i{width:46px;height:46px}
  .po-cartao{padding:10px 12px 12px}
  .po-cartao h3{font-size:calc(17px * var(--text-scale,1))}
  .po-fichas{gap:6px;margin-top:6px}
  .po-ficha{min-height:0;padding:8px 6px;gap:3px}
  .po-ficha-arte{width:38px;height:38px}
  .po-ficha span{font-size:calc(11px * var(--text-scale,1))}
  .po-btn-grande{min-height:40px;font-size:calc(14px * var(--text-scale,1))}
}

/* ---------- o ranking do Portal (02/11, SQL 2547): aba RANKING, HOJE / SEMANA ---------- */
.po-rk{display:flex;flex-direction:column;gap:6px}
.po-rk-subs{display:flex;gap:4px}
.po-rk-sub{flex:1 1 0;margin:0;min-height:30px;padding:4px 8px;border-radius:99px;cursor:var(--cur-mao,pointer);font-weight:900;letter-spacing:.06em;font-size:calc(11px * var(--text-scale,1));
  color:var(--po-mut);background:rgba(10,16,38,.85);border:1px solid var(--po-borda)}
.po-rk-sub.sel{color:#1a1206;background:linear-gradient(180deg,var(--po-ouro2),var(--po-ouro));border-color:var(--po-ouro)}
.po-rk-pontos{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:calc(11px * var(--text-scale,1));color:var(--po-mut)}
.po-rk-pontos small{flex-basis:100%;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.po-rk-pontos span{padding:1px 7px;border-radius:6px;background:rgba(18,28,60,.8);border:1px solid var(--po-borda)}
.po-rk-pontos b{color:var(--po-ouro2)}
.po-rk-voce{margin:0;padding:6px 9px;border-radius:8px;border:1px solid var(--po-ouro);background:rgba(242,196,107,.1);color:var(--po-ouro2);font-weight:800;font-size:calc(12px * var(--text-scale,1));display:flex;flex-direction:column;gap:2px}
.po-rk-voce.vazio{border-color:var(--po-borda);background:rgba(10,16,38,.6);color:var(--po-fg);font-weight:700}
.po-rk-voce small{color:var(--po-mut);font-weight:700}
.po-rk-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto}
.po-rk-linha{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:8px;background:rgba(10,16,38,.7);border:1px solid rgba(120,160,255,.16)}
.po-rk-linha.eu{border-color:var(--po-ouro);background:rgba(242,196,107,.12)}
.po-rk-pos{min-width:22px;text-align:center;font-weight:900;color:var(--po-mut);font-size:calc(13px * var(--text-scale,1))}
.po-rk-linha.top1 .po-rk-pos{color:#ffd76a}.po-rk-linha.top2 .po-rk-pos{color:#dfe7f5}.po-rk-linha.top3 .po-rk-pos{color:#e0a36b}
.po-rk-classe{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#0a1024 center/cover no-repeat;border:1px solid var(--po-borda)}
.po-rk-nome{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.po-rk-nome b{color:var(--po-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12.5px * var(--text-scale,1))}
.po-rk-nome small,.po-rk-pts small{color:var(--po-mut);font-size:calc(10.5px * var(--text-scale,1))}
.po-rk-pts{display:flex;flex-direction:column;align-items:flex-end}
.po-rk-pts b{color:var(--po-ouro2);font-size:calc(14px * var(--text-scale,1))}
.po-rk-vazio{padding:10px;text-align:center;color:var(--po-mut);font-size:calc(12px * var(--text-scale,1))}
.po-rk-tit{margin-top:4px;font-weight:900;letter-spacing:.08em;color:var(--po-ouro);font-size:calc(11px * var(--text-scale,1))}
.po-rk-premios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.po-rk-premios li{display:flex;align-items:center;gap:7px}
.po-rk-premios li>b{min-width:46px;color:var(--po-ouro2);font-size:calc(12px * var(--text-scale,1))}
.po-rk-premios .po-kit{display:flex;flex-wrap:wrap;gap:3px}

/* ---------- a maldição de cada portal (02/11) ---------- */
.po-maldicao{margin:6px 0 2px;padding:6px 9px;border-radius:8px;border:1px solid var(--po-cor,#a35cff);background:rgba(60,14,40,.45);color:var(--po-fg);font-size:calc(11.5px * var(--text-scale,1));line-height:1.35}
.po-maldicao b{display:block;color:#ff9ab8;letter-spacing:.06em;font-size:calc(11px * var(--text-scale,1))}
.po-tag-mal{background:#4a1238;color:#ffd0e6}.po-tag-areia{background:#7a5a1e;color:#fff0cf}

/* ---------- o Estilhaço como mini item na moldura da raridade, com a peça de quebra-cabeça (02/11) ---------- */
.po-est{position:relative;display:inline-flex;flex:0 0 auto;width:22px;height:22px;border-radius:5px;padding:1px;box-sizing:border-box;background:#0b1020;border:2px solid #6ff0b0;vertical-align:middle;cursor:var(--cur-seta,help)}
.po-est-primordial{border-color:transparent;background:linear-gradient(#0b1020,#0b1020) padding-box,conic-gradient(#fbf8f1,#ffd6e8,#fff1c2,#d2ffe6,#cfe9ff,#e6d6ff,#fbf8f1) border-box}
.po-est img{width:100%;height:100%;object-fit:contain;display:block}
.po-est-g{width:34px;height:34px;border-radius:7px;padding:2px}
.po-est-peca{position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;border-radius:50%;background:#1a1206;display:flex;align-items:center;justify-content:center;border:1px solid var(--po-ouro)}
.po-est-g .po-est-peca{width:16px;height:16px;right:-6px;bottom:-6px}
.po-est-peca svg{width:80%;height:80%;fill:var(--po-ouro2)}
.po-chip .po-est{margin-right:3px}

/* =====================================================================
   03/11 — a tela nova (ideia 2, escolha do autor: "abas no topo"; "tudo no mesmo menu sem precisar rolar nada").
   Os saldos sobem para o cabeçalho, as abas ficam numa faixa logo abaixo e a aba PORTAIS mostra a fileira dos
   6 portais (cada um com o seu desenho, assets/portal/portal-N.webp) + O DESAFIO e O PRÊMIO lado a lado.
   ===================================================================== */
.po-cab-saldos{margin-left:auto;flex:0 1 auto;min-width:0}
.po-cab-saldos .po-saldos{margin:0;flex-wrap:nowrap;gap:6px}
.po-cab-saldos .po-saldo{padding:3px 12px 3px 4px;font-size:calc(11px * var(--text-scale,1))}
.po-cab-saldos .po-saldo b{font-size:calc(16px * var(--text-scale,1));color:#fff}
.po-cab-saldos .po-saldo .po-ico-g{width:30px;height:30px}
.po-abas-topo{display:flex;padding:6px 14px 0;border-bottom:1px solid var(--po-borda);background:rgba(8,12,30,.6)}
.po-abas-topo.hidden{display:none}
.po-abas-topo .po-abas{flex:1 1 auto;margin:0;flex-wrap:nowrap;gap:4px;align-items:flex-end}
.po-abas-topo .po-aba{flex:0 0 auto;min-height:40px;padding:8px 20px;border-radius:10px 10px 0 0;border:1px solid transparent;border-bottom:0;background:transparent;box-shadow:none;
  font-size:calc(13px * var(--text-scale,1));letter-spacing:.06em;color:var(--po-mut)}
.po-abas-topo .po-aba:hover,.po-abas-topo .po-aba:focus-visible{color:var(--po-fg)}
.po-abas-topo .po-aba.sel{color:var(--po-ouro2);background:var(--po-fundo);border-color:var(--po-borda);box-shadow:inset 0 2px 0 var(--po-ouro);margin-bottom:-1px}
.po-abas-topo .po-aba-criar{margin-left:auto;display:inline-flex;align-items:center;gap:6px;align-self:center;min-height:32px;padding:4px 12px;border-radius:9px;border:1px solid rgba(120,160,255,.4);background:rgba(20,30,64,.9);color:var(--po-fg)}
.po-aba-criar img{width:20px;height:20px;object-fit:contain}
.po-jogar{display:flex;flex-direction:column;gap:10px;min-height:100%}
.po-fila{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.po-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;margin:0;padding:6px 4px 7px;border-radius:12px;cursor:var(--cur-mao,pointer);text-transform:none;letter-spacing:0;color:var(--po-fg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--po-cor,#4f8bff) 24%,transparent),rgba(12,20,44,.92));border:1px solid rgba(255,255,255,.1);transition:border-color .12s,transform .12s}
.po-tile:hover,.po-tile:focus-visible{border-color:var(--po-cor,var(--po-azul))}
.po-tile.sel{border:2px solid var(--po-cor,var(--po-azul));box-shadow:0 0 0 3px color-mix(in srgb,var(--po-cor,#4f8bff) 28%,transparent);padding:5px 3px 6px}
.po-tile.fechado .po-tile-img{filter:grayscale(.85) brightness(.55)}
.po-tile.fechado>b,.po-tile.fechado>small{opacity:.6}
.po-tile-arte{width:calc(64px * var(--text-scale,1));height:calc(64px * var(--text-scale,1));max-width:100%;display:grid;place-items:center}
.po-tile-img{width:100%;height:100%;object-fit:contain}
.po-tile>b{font-family:var(--font-display,Georgia,serif);font-size:calc(18px * var(--text-scale,1));color:var(--po-ouro2);line-height:1}
.po-tile>small{font-size:calc(11.5px * var(--text-scale,1));color:var(--po-fg)}
.po-tile-chaves{display:inline-flex;align-items:center;gap:2px;font-weight:900;font-size:calc(13px * var(--text-scale,1));color:#fff}
.po-tile-chaves img{width:18px;height:18px;object-fit:contain}
.po-tile em{font-style:normal;font-weight:800;font-size:calc(10.5px * var(--text-scale,1))}
.po-tile-vit{color:#7cf0a0}.po-tile-tranca{color:#d8c08e}
.po-duas{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;align-items:stretch}
.po-caixa{display:flex;flex-direction:column;padding:10px 14px;border-color:color-mix(in srgb,var(--po-cor,#4f8bff) 45%,transparent)}
.po-caixa h4{margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po-desafio .po-fatos{margin-top:4px;font-size:calc(12.5px * var(--text-scale,1))}
.po-coroa-linha{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:10px}
.po-coroa-linha .po-coroa{max-width:none}
.po-coroa-linha span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.po-coroa-linha small{font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;color:var(--po-mut)}
.po-coroa-linha b{color:var(--po-ouro2);font-size:calc(13px * var(--text-scale,1))}
.po-coroa-linha em{font-style:normal;color:var(--po-mut);font-size:calc(11px * var(--text-scale,1))}
.po-grade-premio{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(86px * var(--text-scale,1)),1fr));gap:6px}
.po-pq{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 3px;border-radius:9px;background:rgba(8,14,34,.88);border:1px solid var(--po-borda);text-align:center;min-width:0}
.po-pq>img{width:32px;height:32px;object-fit:contain}
.po-pq .po-est{margin:0}
.po-pq b{font-size:calc(14px * var(--text-scale,1));color:#fff;line-height:1.15}
.po-pq small{font-size:calc(10px * var(--text-scale,1));color:var(--po-mut);line-height:1.1;overflow-wrap:anywhere}
.po-pq-gold{border-color:rgba(242,196,107,.6);background:rgba(50,36,8,.7)}
.po-pq-xp{border-color:rgba(156,196,255,.6);background:rgba(14,28,64,.8)}   /* 2700: Resets de EXP */
.po-premio .po-acoes{margin-top:auto;padding-top:8px;flex-wrap:nowrap}
.po-premio .po-acoes>.po-btn-sec{flex:0 0 auto;min-height:48px}
/* as outras abas: uma página só, sem rolar no PC */
.po-pagina{padding:12px 16px}
.po-pagina-como .po-como{columns:2;column-gap:28px;display:block;font-size:calc(13px * var(--text-scale,1))}
.po-pagina-como .po-como li{break-inside:avoid;margin-bottom:8px}
.po-pagina-forja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.po-pagina-forja>.po-nota,.po-pagina-forja>.po-admin{grid-column:1/-1}
.po-pagina-forja .po-receita{margin:0}
.po-rk-esq,.po-rk-dir{display:flex;flex-direction:column;gap:6px;min-width:0}
.po-pagina-ranking .po-rk{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:start}
.po-pagina-ranking .po-rk-lista{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(10,auto);grid-auto-flow:column;gap:3px 8px}
.po-pagina-ranking .po-rk-lista>.po-rk-vazio{grid-column:1/-1}
.po-pagina-ranking .po-rk-linha{padding:3px 7px}
.po-pagina-ranking .po-rk-nome,.po-pagina-ranking .po-rk-pts{flex-direction:row;align-items:baseline;gap:6px}
.po-pagina-ranking .po-rk-nome b{flex:0 1 auto}
.po-pagina-ranking .po-rk-nome small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:761px) and (max-height:820px){
  .po-abas-topo .po-aba{min-height:36px;padding:6px 16px}
  .po-tile-arte{width:calc(54px * var(--text-scale,1));height:calc(54px * var(--text-scale,1))}
  .po-pq>img{width:28px;height:28px}
}
@media (max-width:760px){
  .po-cab{flex-wrap:wrap}
  .po-cab-saldos{order:5;flex-basis:100%;margin:0}
  .po-cab-saldos .po-saldos{flex-wrap:wrap}
  .po-abas-topo{padding:6px 8px}
  .po-abas-topo .po-abas{flex-wrap:wrap}
  .po-abas-topo .po-aba{flex:1 1 40%;min-height:36px;padding:6px 8px;border-radius:9px;border:1px solid rgba(120,160,255,.2);margin:0}
  .po-abas-topo .po-aba.sel{border-color:var(--po-ouro);box-shadow:inset 0 -2px 0 var(--po-ouro)}
  .po-abas-topo .po-aba-criar{flex-basis:100%;margin:0;justify-content:center}
  .po-fila{grid-template-columns:repeat(3,minmax(0,1fr))}
  .po-duas{grid-template-columns:minmax(0,1fr)}
  .po-premio{order:-1}
  .po-pagina-como .po-como{columns:1}
  .po-pagina-forja{grid-template-columns:minmax(0,1fr)}
  .po-pagina-ranking .po-rk{grid-template-columns:minmax(0,1fr)}
  .po-pagina-ranking .po-rk-lista{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}
/* no PC a janela tem a mesma altura em todas as abas (não pula ao trocar) */
@media (min-width:761px){.po-janela.modal-card{min-height:min(640px,calc(100vh - 40px))}.po-pagina{min-height:100%;box-sizing:border-box}}
/* tela estreita ou baixa (notebook pequeno, celular deitado): saldos sem o nome e portais menores */
@media (max-width:1100px){.po-cab-saldos .po-saldo small{display:none}.po-cab-saldos .po-saldo{padding-right:9px}}
@media (max-height:520px){
  .po-cab{padding:4px 10px}.po-cab-icone{width:34px;height:34px}.po-cab small{display:none}
  .po-abas-topo .po-aba{min-height:32px;padding:4px 12px}
  .po-tile-arte{width:40px;height:40px}.po-tile>small{display:none}
  .po-fila{gap:6px}
  /* 06/11 (conferência no celular deitado a 130%): o aviso EM TESTES ficava por cima do saldo de Estilhaço Primordial */
  .po-cab-saldos{flex-shrink:0}
  .po-teste{max-width:28%;font-size:calc(9.5px * var(--text-scale,1));line-height:1.15}
}
.po-skill-cura{border-color:#5fd88a;box-shadow:none;background:radial-gradient(circle,rgba(30,90,60,.95),rgba(8,26,18,.95))}
.po-toque .po-skill-cura b{display:none}