/* =============================================================================
   ELEMENTA · NEXUS WAR — visual
   Feito para a tela do celular dentro do Telegram: nada de hover obrigatório,
   área de toque grande, barra de abas fixa e respeito às áreas seguras.
============================================================================= */

:root{
  --bg:#06060d; --bg2:#0b0b18; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --txt:#e9ecf5; --dim:#99a2bb; --dim2:#6b7490;
  --acc:#8b6bff; --acc2:#55e6ff; --gold:#ffcf4d; --bad:#ff5b6e; --good:#3ddc84;
  --fire:#ff6b35; --water:#35a7ff; --earth:#4fd16b; --air:#7fe6e0; --light:#ffd84d; --dark:#a86bff;
  --r:16px; --r2:12px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabh:62px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#06060d}
/* nada de height:100%: com altura travada o conteúdo transborda do body,
   o fundo para de pintar e o cabeçalho sticky sai do lugar. */
html,body{margin:0;padding:0;min-height:100%}
body{
  background:transparent;
  color:var(--txt);
  font-family:'Exo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.4;
  overscroll-behavior-y:contain;
  -webkit-user-select:none; user-select:none;
}
/* fundo em camada própria e fixa: background-attachment:fixed engasga no
   celular e atrapalha o desenho do cabeçalho em algumas telas */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(139,107,255,.22), transparent 70%),
    radial-gradient(760px 520px at 108% 16%, rgba(85,230,255,.13), transparent 70%),
    radial-gradient(700px 500px at -10% 70%, rgba(255,107,53,.1), transparent 70%),
    linear-gradient(180deg,var(--bg2),var(--bg) 58%);
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}

/* ---------------------------------------------------------------- abertura */
#splash{
  position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:radial-gradient(900px 600px at 50% 30%,#141033,#05050c 72%);
  transition:opacity .45s ease, visibility .45s;
  overflow:hidden
}
#splash.off{opacity:0;visibility:hidden;pointer-events:none}

/* A arte da abertura (a grade do Nexus com os seis elementos). Nasce invisivel
   e so acende no `onload`: se entrasse de uma vez, apareceria um salto no meio
   do carregamento. `cover` porque a arte e 9:16 e a tela do Telegram varia. */
.sp-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;pointer-events:none
}
.sp-bg.on{opacity:.46}
/* O veu existe para o titulo e a barra continuarem legiveis por cima da arte —
   sem ele o texto branco cai em cima dos pontos claros da grade. */
#splash::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(62% 42% at 50% 42%, rgba(5,5,12,.82), transparent 70%),
    linear-gradient(180deg, rgba(5,5,12,.5), transparent 28%, transparent 62%, rgba(5,5,12,.72))
}
/* tudo que e conteudo fica ACIMA do veu */
#splash > *:not(.sp-bg){position:relative;z-index:1}
.sp-core{position:relative;width:148px;height:148px;display:grid;place-items:center;margin-bottom:12px}
.sp-ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:spin 7s linear infinite}
.sp-ring.r1{inset:0;border-top-color:var(--acc);border-right-color:rgba(139,107,255,.25)}
.sp-ring.r2{inset:18px;border-bottom-color:var(--acc2);border-left-color:rgba(85,230,255,.22);animation-duration:4.6s;animation-direction:reverse}
.sp-ring.r3{inset:36px;border-top-color:var(--gold);animation-duration:3s}
.sp-hex{
  width:64px;height:64px;
  background:conic-gradient(from 0deg,var(--acc),var(--acc2),var(--gold),var(--acc));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:pulse 2.1s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(1.35)}}
.sp-title{font-size:34px;font-weight:900;letter-spacing:.22em;background:linear-gradient(90deg,#fff,var(--acc2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 14px rgba(0,0,0,.9))}
.sp-sub{font-size:11px;letter-spacing:.42em;color:var(--dim);margin-bottom:22px;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.sp-bar{width:190px;height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.sp-bar i{display:block;height:100%;width:8%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .4s}
/* Sobre a arte, cinza-fino some. Clareia e ganha sombra — e a unica linha que
   diz ao jogador que algo esta acontecendo. */
.sp-msg{margin-top:10px;font-size:12px;color:#b9c2d6;text-shadow:0 1px 10px rgba(0,0,0,.95)}

/* ---------------------------------------------------------------- topo */
.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  background:linear-gradient(180deg,rgba(6,6,13,.96),rgba(6,6,13,.72) 70%,transparent);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.logo{width:34px;height:34px;flex:0 0 34px}
.bname{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.bname b{font-size:15px;font-weight:900;letter-spacing:.1em}
.bname span{font-size:9px;letter-spacing:.22em;color:var(--dim2);text-transform:uppercase}
.res{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden}
.chip{
  display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:700;
  white-space:nowrap;transition:transform .12s
}
.chip:active{transform:scale(.94)}
.chip i{font-style:normal;font-size:12px;opacity:.95}
.chip.ess{color:#c8b4ff}.chip.sh{color:#ffc98a}.chip.cr{color:#8fe3ff}.chip.ton{color:var(--gold)}
.chip.flash{animation:chipflash .6s ease}
@keyframes chipflash{0%{box-shadow:0 0 0 0 rgba(255,207,77,.6)}100%{box-shadow:0 0 0 14px rgba(255,207,77,0)}}

/* ---------------------------------------------------------------- base */
#view{padding:10px 12px calc(var(--tabh) + var(--safe-b) + 18px);max-width:620px;margin:0 auto;min-height:60vh}
.loading{display:grid;place-items:center;min-height:50vh}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--acc);animation:spin .8s linear infinite}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.card.tight{padding:10px}
.card h3{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.row{display:flex;align-items:center;gap:8px}
.row.sb{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--dim);font-size:12px}
.muted2{color:var(--dim2);font-size:11px}
.mono{font-variant-numeric:tabular-nums}
.big{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--line);margin:10px -12px}
.center{text-align:center}
.nowrap{white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 15px;border-radius:12px;font-weight:800;font-size:14px;
  background:linear-gradient(180deg,var(--acc),#6a46ff);color:#fff;
  box-shadow:0 6px 18px -8px rgba(139,107,255,.9);transition:transform .1s,filter .15s;
  min-height:42px
}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.42;filter:grayscale(.5);pointer-events:none;box-shadow:none}
.btn.ghost{background:var(--panel2);border:1px solid var(--line2);box-shadow:none;color:var(--txt)}
.btn.gold{background:linear-gradient(180deg,#ffd978,#e8a600);color:#2a1d00;box-shadow:0 6px 18px -8px rgba(255,207,77,.85)}
.btn.cyan{background:linear-gradient(180deg,#67eaff,#1aa9d6);color:#002431;box-shadow:0 6px 18px -8px rgba(85,230,255,.8)}
.btn.red{background:linear-gradient(180deg,#ff7b88,#d8243b)}
.btn.sm{padding:7px 11px;font-size:12px;min-height:34px;border-radius:10px}
.btn.xs{padding:5px 8px;font-size:11px;min-height:28px;border-radius:8px}
.btn.full{width:100%}
.btn.big{padding:14px;font-size:16px}

/* Ressonância Máxima ligada: pulsa em ciano pra ficar óbvio que está ativa */
.btn.boost-on{background:linear-gradient(180deg,#67eaff,#1aa9d6);color:#002431;box-shadow:0 0 0 2px rgba(85,230,255,.4),0 6px 18px -8px rgba(85,230,255,.8);animation:boostPulse 1.8s ease-in-out infinite;opacity:1!important;filter:none!important}
@keyframes boostPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
/* brilho discreto na grade e na lista de reações enquanto a Ressonância está ligada */
.card.boosted{border-color:rgba(85,230,255,.55);box-shadow:0 0 0 1px rgba(85,230,255,.25),0 0 22px -6px rgba(85,230,255,.55)}

.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:11px;font-weight:700}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
.bar.hp i{background:linear-gradient(90deg,#3ddc84,#9bff7a)}
.bar.en i{background:linear-gradient(90deg,#ff5b6e,#ff9d5c)}
.bar.gold i{background:linear-gradient(90deg,var(--gold),#ffeeae)}

/* ---------------------------------------------------------------- abas */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  padding:5px 4px calc(5px + var(--safe-b));
  background:linear-gradient(180deg,rgba(8,8,16,.82),rgba(8,8,16,.98));
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.tabs button{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 2px;border-radius:12px;color:var(--dim2);font-size:10px;font-weight:700;transition:color .18s,background .18s
}
.tabs button .ti{display:flex;align-items:center;justify-content:center;height:22px}
.uic{display:block;overflow:visible}
/* o ícone da aba ativa cresce de leve: o brilho sozinho não basta em tela clara */
.tabs button.on .ti .uic{transform:scale(1.06)}
.tabs button.on{color:#fff;background:rgba(139,107,255,.16)}
.tabs button.on .ti{filter:drop-shadow(0 0 7px rgba(139,107,255,.9))}
.tabs .dot{position:absolute;top:5px;right:calc(50% - 17px);width:8px;height:8px;border-radius:50%;background:var(--bad);border:1.5px solid #0a0a14}

/* ---------------------------------------------------------------- NEXUS */
.hero{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:10px}
#battle{display:block;width:100%;height:188px;background:#07080f}
.hero-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:8px 10px;gap:8px;pointer-events:none}
.sectag{display:flex;flex-direction:column;gap:2px}
.sectag b{font-size:13px;font-weight:900;letter-spacing:.06em;text-shadow:0 2px 8px #000}
.sectag span{font-size:10px;color:#cfd6ea;text-shadow:0 2px 6px #000}
.wavetag{text-align:right;font-size:10px;color:#cfd6ea;text-shadow:0 2px 6px #000}
.wavetag b{display:block;font-size:14px;color:#fff}
.hero-bot{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;display:flex;flex-direction:column;gap:5px;background:linear-gradient(0deg,rgba(4,4,10,.9),transparent);pointer-events:none}
.hero-bot .lbl{display:flex;justify-content:space-between;font-size:10px;color:#c6cde2}

/* barra de carga do Surto do Nexus: fininha, bem no topo do palco de batalha,
   para não brigar com o nome do setor nem com a barra da onda (que já mora
   no rodapé). pointer-events:none deixa o toque passar direto pro canvas. */
.surgebar{position:absolute;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,.08);z-index:4;pointer-events:none;overflow:hidden}
.surgebar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#fff6b8);box-shadow:0 0 8px rgba(255,207,77,.6);transition:width .15s linear}
.surgebar.cool i{background:linear-gradient(90deg,#5b6070,#80869c);box-shadow:none}
.surge-hint{position:absolute;top:44px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#ffe9b0;text-shadow:0 2px 6px #000;pointer-events:none;z-index:4;animation:surgeBlink 1.3s ease-in-out infinite}
@keyframes surgeBlink{0%,100%{opacity:.3}50%{opacity:1}}
/* contador de recarga: informativo, não precisa piscar como o convite a tocar */
.surge-hint.cd{color:#c7ccdc;animation:none;opacity:.85}

.wall{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:var(--r2);background:rgba(255,207,77,.09);border:1px solid rgba(255,207,77,.26);margin-bottom:10px}
.wall .wi{display:flex;align-items:center;color:var(--bad);flex:0 0 auto}
.wall b{color:var(--gold)}
/* a linha do ganho: é a informação principal do cartão, não uma nota de rodapé */
.wall .ganha{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--good)}
.wall .ganha svg{vertical-align:-3px}

/* grade do nexus */
.gridwrap{position:relative;margin:2px auto 0;width:min(100%,330px);aspect-ratio:1}
.gridwrap svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.ngrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9px;z-index:3}
.slot{
  position:relative;border-radius:14px;border:1.5px dashed var(--line2);background:rgba(255,255,255,.03);
  display:grid;place-items:center;overflow:visible;transition:transform .12s,border-color .2s,background .2s
}
.slot:active{transform:scale(.95)}
.slot.locked{border-style:solid;border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.015);color:var(--dim2)}
.slot.locked .lk{font-size:16px;opacity:.5}
.slot.full{border-style:solid;border-color:var(--line2);background:rgba(255,255,255,.05)}
.slot.sel{border-color:var(--gold);background:rgba(255,207,77,.12);box-shadow:0 0 0 2px rgba(255,207,77,.35)}
.slot.hint{border-color:var(--acc2);background:rgba(85,230,255,.09)}
.slot .av{width:100%;height:100%;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.slot .av svg,.slot .av img{width:100%;height:100%;object-fit:cover}
.slot .lv{position:absolute;bottom:2px;left:3px;font-size:9px;font-weight:800;padding:1px 4px;border-radius:6px;background:rgba(0,0,0,.65);backdrop-filter:blur(2px)}
.slot .bo{position:absolute;top:2px;right:3px;font-size:9px;font-weight:800;padding:1px 4px;border-radius:6px;background:rgba(85,230,255,.22);color:#bff3ff}
.slot .plus{font-size:22px;color:var(--dim2);font-weight:300}
/* retrato da carta com vida leve: flutuar bem sutil, atraso variado por posição
   para não ficarem todos subindo/descendo juntos (9 valores, um por slot) */
@keyframes avfloat{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(1.5px)}}
.slot .av{animation:avfloat 3.2s ease-in-out infinite}
.ngrid .slot:nth-child(1) .av{animation-delay:0s}
.ngrid .slot:nth-child(2) .av{animation-delay:.35s}
.ngrid .slot:nth-child(3) .av{animation-delay:.7s}
.ngrid .slot:nth-child(4) .av{animation-delay:1.05s}
.ngrid .slot:nth-child(5) .av{animation-delay:1.4s}
.ngrid .slot:nth-child(6) .av{animation-delay:1.75s}
.ngrid .slot:nth-child(7) .av{animation-delay:2.1s}
.ngrid .slot:nth-child(8) .av{animation-delay:2.45s}
.ngrid .slot:nth-child(9) .av{animation-delay:2.8s}
/* posição participando de uma reação agora (classe aplicada em buildGrid, app.js):
   brilho discreto pulsando na borda da carta */
@keyframes reagindoglow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,207,77,.25),0 0 7px rgba(255,207,77,.15)}
  50%{box-shadow:0 0 0 1px rgba(255,207,77,.55),0 0 13px rgba(255,207,77,.4)}
}
.slot.reagindo{animation:reagindoglow 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .slot .av{animation:none}
  .slot.reagindo{animation:none}
}
.rx{cursor:pointer}
.rxlabel{font-size:13px;pointer-events:auto;cursor:pointer}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:8px;text-align:center}
.stat b{display:block;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
.stat span{font-size:9px;color:var(--dim2);text-transform:uppercase;letter-spacing:.08em}

.rxlist{display:flex;flex-wrap:wrap;gap:6px}
.rxchip{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:11px;font-weight:700}
.rxchip i{font-style:normal;font-size:13px}
.rxchip svg,.lrow .li svg.rxi{flex:0 0 auto}
.rxi{display:block}
.rxchip em{font-style:normal;color:var(--dim2);font-size:10px}

.modlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.mod{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.mod b{display:block;font-size:13px;color:var(--acc2);font-variant-numeric:tabular-nums}
.mod span{font-size:9.5px;color:var(--dim2)}

/* ---------------------------------------------------------------- invocar */
.cores{display:grid;gap:10px}

/* Cada Nucleo carrega a cor da propria arte em --cc. Antes os cinco dividiam
   o mesmo roxo e so dava para distinguir lendo o nome; agora a escada do
   bronze ao ouro se ve de relance, que e como o jogador escolhe. */
.core{
  position:relative;overflow:hidden;border-radius:var(--r);padding:13px 13px 12px;
  border:1px solid color-mix(in srgb, var(--cc) 30%, transparent);
  background:
    radial-gradient(120% 85% at 12% 0%, color-mix(in srgb, var(--cc) 20%, transparent), transparent 62%),
    linear-gradient(140deg, rgba(10,10,22,.86), rgba(6,6,14,.94));
  --cc:#8b6bff
}
/* o brilho que corre na borda de cima da por si a sensacao de "isto e melhor" */
.core::before{
  content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--cc) 75%, transparent),transparent)
}
.core-free{--cc:#7fd4c4}
.core-essence{--cc:#3f8dff}
.core-crystal{--cc:#2fd9b4}
.core-prisma{--cc:#c58bff}
.core-aether{--cc:#ffcf4d}

/* a arte ganha um halo na cor dela: sem isso o recorte transparente flutua
   solto e o cartao parece inacabado */
.core .ci{
  font-size:30px;line-height:1;flex:0 0 auto;width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cc) 26%, transparent), transparent 70%)
}
.core .ci img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 7px color-mix(in srgb, var(--cc) 45%, transparent))}
.core h4{margin:0;font-size:15px;font-weight:900;display:flex;align-items:center;gap:6px}

/* "3x" e "10x" saiam do fim do nome e viram selo: e o que diferencia os
   nucleos caros, e no titulo o olho nao chegava la */
.cpulls{
  font-size:10px;font-weight:900;letter-spacing:.3px;padding:1px 6px;border-radius:99px;
  color:var(--cc);background:color-mix(in srgb, var(--cc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--cc) 38%, transparent)
}
.cfloor{margin-top:3px;font-size:10px;font-weight:800;color:var(--cc);opacity:.92}
/* As cinco raridades em proporcao. `min-width` existe para o Mitico de 0.1%
   nao sumir — a fatia fica maior que o real, mas o numero escrito ao lado
   corrige, e uma fatia invisivel nao informa nada. */
.oddbar{display:flex;gap:2px;margin-top:9px;height:5px;border-radius:99px;overflow:hidden;background:rgba(0,0,0,.4)}
.oddbar i{min-width:4px;border-radius:99px;opacity:.85}
.odds{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}

/* Botao de compra do Nucleo: pinta-se com o --cc do cartao. O texto fica
   escuro porque todas as cores da escada sao claras o bastante para branco
   sobre elas perder contraste. */
.core .btn.cbuy{
  background:linear-gradient(180deg, var(--cc), color-mix(in srgb, var(--cc) 66%, #000));
  color:#07101a;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--cc) 85%, transparent)
}
/* O icone da moeda traz a cor dele de dentro do SVG (ver ART.ui) e sumia sobre
   o botao claro — um Cristal ciano em cima de um botao teal. Aqui ele passa a
   seguir o texto. Atributo de apresentacao perde para CSS, entao basta isto. */
.core .btn.cbuy svg, .core .btn.cbuy svg *{stroke:currentColor;fill:none}
.core .btn.cbuy svg g[fill]{fill:currentColor}
.odd{font-size:9.5px;padding:2px 6px;border-radius:99px;background:rgba(0,0,0,.34);border:1px solid var(--line);font-weight:700}
/* a melhor raridade que o nucleo alcanca: e por ela que se comparam dois */
.odd.top{background:rgba(0,0,0,.5);font-weight:900}

.reveal{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px;justify-items:center}
.rv{width:100%;max-width:120px;text-align:center;animation:rvin .5s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes rvin{from{opacity:0;transform:translateY(16px) scale(.8)}to{opacity:1;transform:none}}
.rv .fr{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--line2)}
.rv.r-rare .fr{border-color:#49b4ff;box-shadow:0 0 16px -3px #49b4ff}
.rv.r-epic .fr{border-color:#b061ff;box-shadow:0 0 18px -2px #b061ff}
.rv.r-legendary .fr{border-color:#ffb224;box-shadow:0 0 22px -2px #ffb224}
.rv.r-mythic .fr{border-color:#ff4d8d;box-shadow:0 0 26px 0 #ff4d8d}
.rv .nm{font-size:10.5px;font-weight:800;margin-top:4px;line-height:1.15}
.rv .tg{font-size:9px;color:var(--dim2)}
.rv .new{position:absolute;top:3px;left:3px;font-size:8.5px;font-weight:900;padding:1px 5px;border-radius:6px;background:var(--good);color:#04240f}

/* ---------------------------------------------------------------- espíritos */
.filters{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fb{flex:0 0 auto;padding:6px 11px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--dim)}
.fb.on{background:rgba(139,107,255,.22);border-color:rgba(139,107,255,.5);color:#fff}

.splist{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.sp{position:relative;border-radius:var(--r2);border:1.5px solid var(--line);background:var(--panel);overflow:hidden;transition:transform .12s}
.sp:active{transform:scale(.96)}
.sp.r-rare{border-color:rgba(73,180,255,.55)}
.sp.r-epic{border-color:rgba(176,97,255,.6)}
.sp.r-legendary{border-color:rgba(255,178,36,.65)}
.sp.r-mythic{border-color:rgba(255,77,141,.7)}
.sp.ingrid::after{content:'';position:absolute;inset:0;border-radius:11px;box-shadow:inset 0 0 0 2px var(--acc2);pointer-events:none}
.sp .av{aspect-ratio:1;display:grid;place-items:center;background:rgba(0,0,0,.2)}
.sp .inf{padding:5px 6px 6px}
.sp .nm{font-size:10.5px;font-weight:800;line-height:1.1;height:2.2em;overflow:hidden}
.sp .st{display:flex;justify-content:space-between;align-items:center;margin-top:3px;font-size:9.5px;color:var(--dim2)}
.sp .badge{position:absolute;top:3px;right:3px;display:flex;gap:2px;align-items:center;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.6)}
.sp .cp{position:absolute;top:3px;left:3px;font-size:9px;font-weight:900;padding:1px 5px;border-radius:6px;background:rgba(61,220,132,.26);color:#b8ffd6}
.sp .lk2{position:absolute;bottom:34px;left:3px;font-size:10px}
/* carta do códex que o jogador ainda não tem: dá para ver o que é, com cadeado.
   Antes ficava quase invisível e o códex parecia vazio. */
.sp.nao-tem .av{filter:grayscale(.55) brightness(.62) contrast(.95)}
.sp.nao-tem .nm,.sp.nao-tem .st{opacity:.6}
.sp .cad{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:19px;opacity:.75;text-shadow:0 2px 8px #000}
/* Contrato do Nexus: selinho do selo na carta (canto oposto ao cadeado) e
   pontinho discreto na posição da grade — ambos só aparecem com selo ativo. */
.sp .selo{position:absolute;bottom:34px;right:3px;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px;background:rgba(255,207,77,.26);color:#ffe9b0}
.slot .ctr-dot{position:absolute;top:3px;left:4px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px rgba(255,207,77,.85)}

.el-fire{color:var(--fire)}.el-water{color:var(--water)}.el-earth{color:var(--earth)}
.el-air{color:var(--air)}.el-light{color:var(--light)}.el-dark{color:var(--dark)}
.bg-fire{background:rgba(255,107,53,.16)}.bg-water{background:rgba(53,167,255,.16)}
.bg-earth{background:rgba(79,209,107,.16)}.bg-air{background:rgba(127,230,224,.16)}
.bg-light{background:rgba(255,216,77,.16)}.bg-dark{background:rgba(168,107,255,.16)}

/* ---------------------------------------------------------------- arena */
.duelwrap{position:relative;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:linear-gradient(160deg,rgba(255,91,110,.08),rgba(85,230,255,.06))}
#duelcv{display:block;width:100%;height:230px;background:#06070e}
.vsbar{display:flex;align-items:center;gap:8px;padding:9px 10px}
.vside{flex:1;min-width:0}
.vside .nm{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vside.r{text-align:right}
.vs{font-size:13px;font-weight:900;color:var(--dim2)}
.rounds{display:flex;flex-direction:column;gap:4px;max-height:168px;overflow-y:auto;padding-right:3px}
.rnd{display:flex;align-items:center;gap:7px;font-size:11px;padding:5px 7px;border-radius:9px;background:rgba(255,255,255,.035)}
.rnd b{min-width:26px;color:var(--dim2);font-size:10px}
.rnd .dm{font-weight:800;font-variant-numeric:tabular-nums}
.rnd .me{color:#9bffc4}.rnd .op{color:#ffb3bb}
.crit{color:var(--gold);font-weight:900}

.board{display:flex;flex-direction:column;gap:5px}
.brow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line)}
.brow.me{border-color:rgba(139,107,255,.55);background:rgba(139,107,255,.12)}
.brow .pos{min-width:26px;font-weight:900;font-size:13px;text-align:center;color:var(--dim)}
.brow.p1 .pos{color:var(--gold)}.brow.p2 .pos{color:#dfe7ff}.brow.p3 .pos{color:#ffb98a}
.brow .nm{flex:1;min-width:0;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .pts{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.brow .prize{font-size:10.5px;color:var(--gold);font-weight:800;min-width:56px;text-align:right}

.pool{
  position:relative;overflow:hidden;text-align:center;padding:16px 12px;border-radius:var(--r);
  background:linear-gradient(150deg,rgba(255,207,77,.2),rgba(139,107,255,.12));border:1px solid rgba(255,207,77,.3)
}
.pool .v{font-size:32px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1;text-shadow:0 0 26px rgba(255,207,77,.5)}
.pool .t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#ffe9b0}
.cd{display:flex;gap:6px;justify-content:center;margin-top:9px}
.cd div{min-width:46px;padding:5px 4px;border-radius:10px;background:rgba(0,0,0,.34);border:1px solid var(--line)}
.cd b{display:block;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.cd span{font-size:8.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.1em}

/* ---------------------------------------------------------------- listas */
/* width:100% e text-align: o <button> do Chrome não estica sozinho nem alinha à esquerda */
.lrow{display:flex;width:100%;text-align:left;align-items:center;gap:10px;padding:10px;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);margin-bottom:7px}
.lrow .li{font-size:21px;width:28px;text-align:center;flex:0 0 28px}
.lrow .li img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.lrow .lt{flex:1;min-width:0}
.lrow .lt b{display:block;font-size:13px;font-weight:800}
.lrow .lt span{font-size:11px;color:var(--dim)}
.lrow.done{opacity:.5}

.chestrow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ch{position:relative;padding:7px 2px;border-radius:10px;background:var(--panel);border:1px solid var(--line);text-align:center}
.ch.on{border-color:var(--gold);background:rgba(255,207,77,.16)}
.ch.past{opacity:.42}
.ch b{display:block;font-size:9px;color:var(--dim2)}
.ch i{font-style:normal;font-size:15px}

/* ---------------------------------------------------------------- modal */
#modal-root:empty{display:none}
.mask{position:fixed;inset:0;z-index:200;background:rgba(3,3,8,.76);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:620px;max-height:90vh;overflow-y:auto;
  background:linear-gradient(180deg,#121226,#0a0a15);border:1px solid var(--line2);
  border-radius:20px 20px 0 0;padding:14px 14px calc(18px + var(--safe-b));
  animation:up .28s cubic-bezier(.2,1,.3,1);-webkit-overflow-scrolling:touch
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .sh-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheet h2{margin:0;font-size:17px;font-weight:900}
.x{width:32px;height:32px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-size:17px;flex:0 0 32px}
.grab{width:38px;height:4px;border-radius:99px;background:var(--line2);margin:0 auto 10px}

/* ---------------------------------------------------------------- toast/fx */
#toast{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--safe-b) + 14px);transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:calc(100% - 28px);max-width:420px}
.tst{
  padding:9px 14px;border-radius:12px;font-size:12.5px;font-weight:700;text-align:center;
  background:rgba(18,18,34,.96);border:1px solid var(--line2);box-shadow:0 10px 30px -10px #000;
  animation:tin .25s,tout .3s 2.6s forwards
}
.tst.good{border-color:rgba(61,220,132,.5);background:rgba(10,38,24,.96)}
.tst.bad{border-color:rgba(255,91,110,.5);background:rgba(44,10,16,.96)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}

#fx{position:fixed;inset:0;z-index:290;pointer-events:none;overflow:hidden}
.pop{position:absolute;font-weight:900;font-size:15px;color:var(--gold);text-shadow:0 2px 8px #000;animation:popup 1.1s ease-out forwards}
@keyframes popup{0%{opacity:0;transform:translateY(0) scale(.7)}18%{opacity:1;transform:translateY(-8px) scale(1.1)}100%{opacity:0;transform:translateY(-54px) scale(1)}}

.shake{animation:shk .36s}
@keyframes shk{0%,100%{transform:none}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-1px)}}

/* ---------------------------------------------------------------- misc */
input[type=text],input[type=number]{
  width:100%;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.34);
  border:1px solid var(--line2);font-size:14px
}
input:focus{outline:none;border-color:var(--acc)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.05)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim)}
.kv b{font-variant-numeric:tabular-nums}
.wheel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wh{padding:8px;border-radius:10px;background:var(--panel);border:1px solid var(--line);text-align:center;font-size:11px}
.wh b{display:block;font-size:15px}
.scroll-x{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:6px;font-size:11.5px;word-break:break-all}

/* telas estreitas: o nome sai do cabeçalho para os quatro recursos caberem */
@media (max-width:429px){
  .bname{display:none}
  .chip{padding:5px 7px;font-size:11.5px;gap:3px}
  .res{gap:4px}
}
@media (max-width:360px){
  .chip{padding:4px 6px;font-size:11px}
  #battle{height:164px}
  .statgrid{gap:5px}
}

/* Câmara de Coleta transbordando: o cartão pulsa de leve para o jogador ver */
.card.camara-cheia { border-color: rgba(255, 92, 92, .55); box-shadow: 0 0 0 1px rgba(255, 92, 92, .22) inset; }
.card.camara-cheia .bar > i { background: linear-gradient(90deg, var(--bad), var(--gold)); }

/* Anúncios recompensados: uma linha por prêmio, com o que falta hoje à direita */
.adrow { display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px; margin-top:6px;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); text-align:left; }
.adrow:disabled { opacity:.45; }
.adrow .adico { font-size:19px; width:26px; text-align:center; flex:0 0 26px; }
.adrow .adtxt { flex:1; min-width:0; }
.adrow .adtxt b { display:block; font-size:13px; }
.adrow .adtxt span { display:block; font-size:10.5px; color:var(--dim2); line-height:1.3; }
.adrow .adn { font-size:10px; font-weight:800; color:var(--acc2); white-space:nowrap; }
.adbusy { display:flex; align-items:center; gap:8px; justify-content:center; padding:14px; font-size:13px; font-weight:700; }

/* Ícone de interface dentro de texto e de linha de anúncio */
.uic.inline{display:inline-block;vertical-align:-3px;margin-right:3px}
.adrow .uic{opacity:.95}

/* moeda desenhada: no chip do topo e no meio do texto */
.res .chip i{display:flex;align-items:center}
.res .chip i svg{display:block}
.ch i svg{display:inline-block;vertical-align:middle}

/* Arte do Nucleo dentro da wiki: mesma peca da tela de Invocar, menor. */
.wk-core{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center}
.wk-core img{width:34px;height:34px;object-fit:contain}