/* theme.css — Fundação de design do Conquest (v1)
   Tokens + componentes reutilizáveis. Estética: app de cartas premium, tema de campanha militar.
   Display: Space Grotesk · Corpo: Inter. Assinatura: textura topográfica de contornos. */

:root {
  /* paleta premium — base "sala de comando" noturna */
  --c-bg:        #0c0f0d;   /* fundo profundo, levemente esverdeado */
  --c-bg-2:      #11150f;
  --c-surface:   #161b14;   /* cartões */
  --c-surface-2: #1e241b;   /* cartões elevados / hover */
  --c-line:      #2c3327;   /* divisórias sutis */
  --c-line-2:    #3a4433;
  --c-ink:       #ece8da;   /* texto principal (pergaminho claro) */
  --c-muted:     #9aa08c;   /* texto secundário */
  --c-faint:     #6a7060;

  /* acentos */
  --c-gold:      #d4af52;   /* dourado de patente — acento principal */
  --c-gold-dk:   #a6852f;
  --c-olive:     #5e8c4f;   /* verde campanha (você / sucesso) */
  --c-rust:      #c2603f;   /* terracota (inimigo / perigo) */
  --c-steel:     #6f93b8;   /* azul aço (info / naval) */

  /* escala de espaçamento (8pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* raios e sombras */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 6px 20px rgba(0,0,0,.35);
  --sh-3: 0 18px 50px rgba(0,0,0,.5);
  --sh-glow: 0 0 0 1px rgba(212,175,82,.25), 0 8px 30px rgba(212,175,82,.12);

  /* tipografia */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ponte de compatibilidade com o CSS antigo (variáveis legadas) */
  --bg: var(--c-bg); --panel: var(--c-surface); --panel2: var(--c-surface-2);
  --ink: var(--c-ink); --muted: var(--c-muted); --line: var(--c-line);
  --gold: var(--c-gold); --you: var(--c-olive); --ai: var(--c-rust);
  --text: var(--c-ink);
}

/* ---------- assinatura: textura topográfica de contornos ---------- */
/* SVG inline em data-uri: linhas de contorno tênues, como um mapa de campanha. */
.topo-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(10,12,9,.45), rgba(10,12,9,.55)),
    url("/img/bg-world.jpg");
  background-size: cover; background-position: center;
  transition: filter .4s, opacity .4s;
}
.topo-bg::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,82,.08), transparent 60%),
    radial-gradient(90% 60% at 50% 50%, transparent 30%, rgba(8,10,7,.5) 100%);
}
/* na tela de jogo, escurece bem o fundo para não competir com o tabuleiro */
body.in-game .topo-bg {
  filter: brightness(.32) saturate(.7);
}
/* quando há uma ARTE de batalha aplicada, ela já vem escura (centro vazio) e com
   overlay próprio — não aplica o escurecimento forte do fundo topográfico padrão. */
body.in-game.battle-bg .topo-bg {
  filter: brightness(.85) saturate(.9);
}
/* no mobile a arte preenche as laterais vazias do mapa — deixa com boa presença */
body.mobile-game.in-game.battle-bg .topo-bg {
  filter: brightness(.7) saturate(.95);
}

/* ---------- base ---------- */
body.cq {
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cq h1, .cq h2, .cq h3, .cq .display { font-family: var(--font-display); }

/* eyebrow: rótulo pequeno em caixa alta com espaçamento */
.eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold); }

/* ---------- botões ---------- */
.btn {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; border-radius: var(--r-sm); cursor: pointer;
  padding: 10px 18px; border: 1px solid var(--c-line-2);
  background: var(--c-surface-2); color: var(--c-ink);
  transition: transform .12s ease, border-color .15s, background .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover:not(:disabled) { border-color: var(--c-gold); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dk));
  color: #1a1206; border-color: transparent; font-weight: 700;
  box-shadow: var(--sh-1);
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--sh-glow); }
.btn-ghost { background: transparent; border-color: var(--c-line); color: var(--c-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--c-ink); border-color: var(--c-line-2); }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- cartões ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.card-elev { background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.card-pad { padding: var(--sp-5); }

/* ---------- inputs ---------- */
.cq input.fld, .cq select.fld, .input {
  font-family: var(--font-body); font-size: 14px; width: 100%;
  background: var(--c-bg-2); border: 1px solid var(--c-line-2); color: var(--c-ink);
  border-radius: var(--r-sm); padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
.cq input.fld:focus, .cq select.fld:focus, .input:focus {
  outline: none; border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212,175,82,.15);
}
.fld-label { display:block; font-family: var(--font-display); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }

/* ---------- pílulas / badges ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--c-line-2); color: var(--c-muted); }
.pill-gold { color:#1a1206; background: var(--c-gold); border-color: transparent; }

/* token de moeda */
.token-chip { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-display);
  font-weight: 700; color: var(--c-gold); background: rgba(212,175,82,.10);
  border: 1px solid rgba(212,175,82,.3); border-radius: var(--r-pill); padding: 5px 12px; }

/* foco de teclado acessível em tudo que é interativo */
.cq a:focus-visible, .cq button:focus-visible, .cq input:focus-visible, .cq select:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card, * { transition: none !important; animation: none !important; }
}

/* ============================================================
   REVELAÇÃO CINEMÁTICA DE CARTAS (packs + compra no mercado)
   Escalonada por raridade: quanto mais rara, mais dramática.
   ============================================================ */
.cr-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(circle at 50% 40%, rgba(20,26,18,.86), rgba(6,8,6,.96));
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease;
}
.cr-overlay.show { opacity: 1; }
.cr-eyebrow { font-family: var(--font-display); letter-spacing: .28em; text-transform: uppercase;
  font-size: 12px; color: var(--c-gold); opacity: .9; }
.cr-stage { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  max-width: min(92vw, 760px); perspective: 1200px; }
.cr-hint { font-family: var(--font-display); font-size: 13px; color: var(--c-muted); letter-spacing: .04em; }
.cr-actions { display: flex; gap: 10px; }

/* carta individual */
.cr-card {
  width: 132px; height: 188px; border-radius: 14px; position: relative;
  transform-style: preserve-3d; transform: rotateY(180deg) translateY(8px) scale(.9);
  transition: transform .55s cubic-bezier(.2,1.1,.3,1);
  flex: 0 0 auto;
}
.cr-card.flipped { transform: rotateY(0) translateY(0) scale(1); }
.cr-face, .cr-back {
  position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden;
  display: flex; flex-direction: column; overflow: hidden;
}
.cr-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #1d241b, #11150f);
  border: 1px solid var(--c-line-2); align-items: center; justify-content: center;
}
.cr-back::after { content: "★"; font-size: 30px; color: var(--c-gold-dk); opacity: .55; }
.cr-face {
  padding: 12px;
  background: linear-gradient(160deg, var(--c-surface-2), var(--c-bg-2));
  border: 1.5px solid var(--rc, var(--c-line-2)); justify-content: space-between;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 18px -2px var(--rc, transparent);
}
.cr-face .cr-terr { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--c-ink); line-height: 1.15; }
.cr-face .cr-cont { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-top: 2px; }
.cr-face .cr-sym { font-size: 40px; text-align: center; opacity: .9; }
.cr-face .cr-rar { font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; text-align: center; color: var(--rc, var(--c-muted)); padding: 4px 0 2px; border-top: 1px solid var(--c-line); }
.cr-foil { position: absolute; inset: 0; pointer-events: none; border-radius: 14px; opacity: .35;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  background-size: 220% 220%; animation: foilSweep 2.6s linear infinite; }
@keyframes foilSweep { 0%{background-position:120% 0} 100%{background-position:-120% 0} }

/* brilho por raridade ao virar */
.cr-card.r-incomum.flipped .cr-face { box-shadow: 0 0 16px -2px var(--rc); }
.cr-card.r-raro.flipped .cr-face   { box-shadow: 0 0 26px -1px var(--rc); }
.cr-card.r-epico.flipped .cr-face  { animation: crPulseE 1.6s ease-in-out infinite; }
.cr-card.r-lendario.flipped .cr-face { animation: crPulseL 1.3s ease-in-out infinite; }
@keyframes crPulseE { 0%,100%{box-shadow:0 0 20px -2px var(--rc)} 50%{box-shadow:0 0 40px 2px var(--rc)} }
@keyframes crPulseL { 0%,100%{box-shadow:0 0 26px -2px var(--rc)} 50%{box-shadow:0 0 54px 6px var(--rc)} }

/* a carta de destaque (melhor do pack) entra maior */
.cr-card.cr-hero { width: 168px; height: 238px; }
.cr-card.cr-hero .cr-sym { font-size: 54px; }
.cr-card.cr-hero .cr-terr { font-size: 18px; }

/* quando a face usa o componente renderCardFace, ele preenche a carta do flip */
.cr-face.cr-face-component{ padding:0; background:none; border:none; box-shadow:none; overflow:visible }
.cr-face-component .cf-card{ width:100%; height:100%; min-height:0 }
.cr-face-component .cf-mapwin{ aspect-ratio:auto; flex:1 1 auto; min-height:0 }
/* fontes compactas para caber no card estreito da revelação (igual à mão) */
.cr-face-component .cf-tname{ font-size:11px; min-height:2.1em; line-height:1.05; word-break:normal; hyphens:none; display:flex; align-items:center; justify-content:center; text-align:center }
.cr-face-component .cf-tcont{ font-size:7px }
.cr-face-component .cf-pips{ font-size:8px; letter-spacing:1px }
.cr-face-component .cf-rarbar{ margin:1px 8px 3px }
.cr-face-component .cf-rarlabel{ font-size:7px }
.cr-face-component .cf-emblem{ width:34px; height:34px }
.cr-face-component .cf-emblem svg{ width:20px; height:20px }
.cr-face-component .cf-symwrap{ width:34px }
.cr-face-component .cf-sym{ width:17px; height:17px }
.cr-face-component .cf-mapwin{ margin:0 8px }
.cr-face-component .cf-acticon{ width:20px; height:20px }
.cr-face-component .cf-actname{ font-size:9px; min-height:2.1em; line-height:1.05 }
.cr-face-component .cf-actdesc{ display:none }
.cr-face-component .cf-badge{ margin:4px 10px 8px; padding:3px 0 }
.cr-face-component .cf-bval{ font-size:15px }
.cr-face-component .cf-wing{ width:16px }
/* a carta de destaque (hero) é maior — pode mostrar um pouco mais */
.cr-card.cr-hero .cr-face-component .cf-tname{ font-size:13px }
.cr-card.cr-hero .cr-face-component .cf-actname{ font-size:10.5px }
.cr-card.cr-hero .cr-face-component .cf-actdesc{ display:block; font-size:8px }

/* flash de tela e tremor para épico/lendário */
.cr-flash { position: fixed; inset: 0; z-index: 199; pointer-events: none; background: #fff; opacity: 0; }
.cr-flash.go { animation: crFlash .5s ease-out; }
@keyframes crFlash { 0%{opacity:0} 12%{opacity:.55} 100%{opacity:0} }
.cr-shake { animation: crShake .5s ease-in-out; }
@keyframes crShake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-7px,4px)} 40%{transform:translate(6px,-5px)} 60%{transform:translate(-5px,-3px)} 80%{transform:translate(5px,4px)} }

/* partículas (faíscas) que sobem ao revelar carta rara+ */
.cr-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: var(--rc, var(--c-gold)); box-shadow: 0 0 8px 2px var(--rc, var(--c-gold)); }
@keyframes crSparkUp { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0} }

/* raios de luz atrás da carta lendária */
.cr-rays { position: absolute; width: 420px; height: 420px; left:50%; top:50%; margin:-210px 0 0 -210px;
  pointer-events: none; opacity: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(212,175,82,.18) 8deg 16deg, transparent 16deg 24deg,
    rgba(212,175,82,.18) 24deg 32deg, transparent 32deg 40deg, rgba(212,175,82,.18) 40deg 48deg, transparent 48deg);
  animation: crRays 9s linear infinite; }
.cr-rays.go { opacity: 1; transition: opacity .6s ease; }
@keyframes crRays { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.cr-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); text-align:center; }
.cr-title .cr-best { color: var(--c-gold); }

/* ============================================================
   MATCHMAKER — busca de oponente com suspense (radar de campanha)
   ============================================================ */
.mm-overlay {
  position: fixed; inset: 0; z-index: 190; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(circle at 50% 45%, rgba(16,21,15,.92), rgba(6,8,6,.97));
  backdrop-filter: blur(7px);
}
.mm-overlay.show { display: flex; }
.mm-eyebrow { font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase;
  font-size: 12px; color: var(--c-gold); }
.mm-radar { position: relative; width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(212,175,82,.25);
  background:
    radial-gradient(circle, transparent 0 28%, rgba(212,175,82,.06) 28% 29%, transparent 29%),
    radial-gradient(circle, transparent 0 56%, rgba(212,175,82,.06) 56% 57%, transparent 57%),
    radial-gradient(circle, transparent 0 84%, rgba(212,175,82,.06) 84% 85%, transparent 85%); }
.mm-radar::before { content:""; position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background: conic-gradient(from 0deg, rgba(212,175,82,.35), transparent 60deg);
  animation: mmSweep 2.4s linear infinite; }
.mm-radar::after { content:""; position:absolute; left:50%; top:50%; width:2px; height:2px; margin:-1px;
  border-radius:50%; box-shadow:0 0 0 3px rgba(212,175,82,.5); }
@keyframes mmSweep { to { transform: rotate(360deg); } }
.mm-blip { position:absolute; width:9px; height:9px; border-radius:50%; background: var(--c-olive);
  box-shadow: 0 0 10px 2px var(--c-olive); opacity:0; transform: scale(0); }
.mm-blip.on { animation: mmBlip 2.4s ease-out forwards; }
@keyframes mmBlip { 0%{opacity:0;transform:scale(0)} 12%{opacity:1;transform:scale(1.4)} 60%{opacity:1;transform:scale(1)} 100%{opacity:.25} }
.mm-status { font-family: var(--font-display); font-size: 17px; color: var(--c-ink); letter-spacing:.02em; text-align:center; min-height:24px; }
.mm-sub { font-size: 13px; color: var(--c-muted); text-align:center; }
.mm-count { font-family: var(--font-display); font-weight: 700; color: var(--c-gold); }
.mm-dots::after { content:""; animation: mmDots 1.4s steps(4,end) infinite; }
@keyframes mmDots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""} }
.mm-found .mm-radar::before { animation: none; background: conic-gradient(from 0deg, rgba(94,140,79,.5), transparent 90deg); }
.mm-found .mm-status { color: var(--c-olive); }

/* RADARZINHO de fila no lobby — indica que há gente procurando partida agora */
.mm-pulse{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 8px; border-radius:999px;
  background:rgba(120,190,120,.12); border:1px solid rgba(120,190,120,.35); font-size:13px; color:#bfe0c2; font-weight:600; }
.mm-mini{ position:relative; width:22px; height:22px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  border:1px solid rgba(120,190,120,.4); }
.mm-mini::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(150,210,150,.55), transparent 70deg);
  animation:mmMiniSweep 1.8s linear infinite; }
.mm-mini::after{ content:""; position:absolute; left:50%; top:50%; width:2px; height:2px; margin:-1px;
  border-radius:50%; box-shadow:0 0 0 2px rgba(150,210,150,.6); }
@keyframes mmMiniSweep{ to{ transform:rotate(360deg); } }

/* ============================================================
   CARTA — moldura programática (componente renderCardFace)
   Classes prefixadas com cf-. Usadas no Baralho, packs, mão, mercado.
   ============================================================ */
.cf-card{ --rc:#8d9484; --rc-dk:#5f6657;
  width:100%; min-height:300px; border-radius:14px; position:relative; padding:6px; isolation:isolate;
  background:linear-gradient(135deg, var(--rc), var(--rc-dk) 60%, var(--rc));
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.4); }
.cf-card.is-foil::before{ content:""; position:absolute; inset:0; border-radius:14px; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.5) 38%, rgba(120,220,255,.45) 46%,
    rgba(255,180,240,.45) 54%, rgba(255,255,255,.5) 62%, transparent 80%);
  background-size:280% 280%; mix-blend-mode:overlay; animation:cfFoil 5s linear infinite; opacity:.85; }
/* borda/brilho holográfico claramente visível em cartas foil */
.cf-card.is-foil{ border-radius:14px; }
.cf-card.is-foil::after{ content:""; position:absolute; inset:-2px; border-radius:15px; z-index:2; pointer-events:none;
  padding:2px;
  background:linear-gradient(125deg,#ffe08a,#7fd4ff,#ff9ee6,#9dffd0,#ffe08a);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:cfFoilBorder 4s linear infinite;
  box-shadow:0 0 14px rgba(150,210,255,.55), 0 0 26px rgba(255,170,235,.35); }
@keyframes cfFoilBorder{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes cfFoil{0%{background-position:140% 0}100%{background-position:-140% 0}}
.cf-paper{ position:relative; z-index:1; height:100%; border-radius:10px;
  background:radial-gradient(120% 100% at 50% 0%, #f2ecda, #e9e2cf 55%, #d8cfb4);
  border:1px solid rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:inset 0 0 24px rgba(120,100,60,.2), inset 0 0 0 2px rgba(255,255,255,.22); }
.cf-top{ display:flex; align-items:flex-start; justify-content:space-between }
.cf-emblem{ width:42px; height:42px; flex:0 0 auto; background:linear-gradient(135deg,var(--rc),var(--rc-dk));
  border-bottom-right-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 4px rgba(0,0,0,.25) }
.cf-emblem svg{ width:26px; height:26px; opacity:.95 }
.cf-titlewrap{ flex:1; text-align:center; padding:5px 2px 0; min-width:0 }
.cf-pips{ font-size:10px; letter-spacing:2px; color:var(--rc-dk); line-height:1 }
.cf-tname{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-weight:700; font-size:14px; color:#2a2620; line-height:1.05; margin-top:1px; word-break:break-word; hyphens:auto; min-height:2.1em; display:flex; align-items:center; justify-content:center }
.cf-foilbadge{ font-size:11px }
.cf-tcont{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-weight:600; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; display:flex; align-items:center; justify-content:center; gap:4px }
.cf-cdot{ display:inline-block; width:6px; height:6px; border-radius:50% }
.cf-symwrap{ width:42px; flex:0 0 auto; display:flex; justify-content:center; padding-top:6px }
.cf-sym{ width:22px; height:22px; fill:none; stroke:var(--rc-dk); stroke-width:2.4 }
.cf-rarbar{ display:flex; align-items:center; gap:5px; justify-content:center; margin:2px 8px 5px }
.cf-rarbar .cf-ln{ height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--rc-dk)) }
.cf-rarbar .cf-ln:last-child{ background:linear-gradient(90deg,var(--rc-dk),transparent) }
.cf-rarlabel{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-weight:600; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rc-dk) }
.cf-mapwin{ margin:0 10px; border:2px solid var(--rc-dk); border-radius:5px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1c2740,#0d1422); aspect-ratio:16/10; position:relative }
.cf-mapwin svg{ position:absolute; inset:0; width:100%; height:100% }
.cf-mapwin .cf-rest{ fill:#34405c; opacity:.7 }
.cf-action{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 10px 2px; text-align:center }
.cf-acticon{ width:26px; height:26px; margin-bottom:2px; stroke:var(--rc-dk); stroke-width:2; fill:none }
.cf-acticon *{ stroke:var(--rc-dk); stroke-width:2; fill:none }
.cf-actname{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em; color:var(--rc-dk); text-transform:uppercase; line-height:1.1; min-height:2.2em; display:flex; align-items:center; justify-content:center }
.cf-actrule{ height:1px; width:55%; background:var(--rc-dk); opacity:.4; margin:3px 0 4px }
.cf-actdesc{ font-size:9.5px; color:#5b5444; line-height:1.3; max-width:92% }
.cf-badge{ display:flex; align-items:center; justify-content:center; gap:7px; margin:5px 12px 10px;
  background:linear-gradient(135deg,var(--rc),var(--rc-dk)); border-radius:6px; padding:5px 0;
  box-shadow:0 2px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25) }
.cf-wing{ width:20px; height:9px; opacity:.8; fill:#f3eeda }
.cf-bval{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-weight:700; font-size:18px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); display:inline-flex; align-items:center; gap:3px }
.cf-bemoji{ font-size:13px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) }
/* modificadores de raridade (cores) */
.cf-card.r-comum{ --rc:#5fa595; --rc-dk:#3c7b6d }
.cf-card.r-incomum{ --rc:#6bbf73; --rc-dk:#3e8c4a }
.cf-card.r-raro{ --rc:#5b8cc0; --rc-dk:#345f93 }
.cf-card.r-epico{ --rc:#9b6fc4; --rc-dk:#6a4a9a }
.cf-card.r-lendario{ --rc:#d4af52; --rc-dk:#a6852f }

/* RARIDADES ALTAS: borda/brilho sempre presente (mesmo sem foil), na cor da raridade.
   Quando a carta também é foil, o brilho holográfico (is-foil::after) tem prioridade. */
.cf-card.r-epico:not(.is-foil)::after,
.cf-card.r-lendario:not(.is-foil)::after{
  content:""; position:absolute; inset:-2px; border-radius:15px; z-index:2; pointer-events:none;
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.cf-card.r-epico:not(.is-foil)::after{
  background:linear-gradient(135deg, #c79bf0, #9b6fc4 45%, #e0c2ff 55%, #7a4fb0);
  box-shadow:0 0 12px rgba(155,111,196,.6), 0 0 22px rgba(155,111,196,.35);
  animation:rarShine 3.4s ease-in-out infinite; }
.cf-card.r-lendario:not(.is-foil)::after{
  background:linear-gradient(135deg, #ffe9a8, #d4af52 45%, #fff2cc 55%, #b8902f);
  box-shadow:0 0 14px rgba(212,175,82,.7), 0 0 26px rgba(212,175,82,.4);
  animation:rarShine 2.8s ease-in-out infinite; }
@keyframes rarShine{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.35) } }

/* slots do editor de baralho (carta + seletor de versão) */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:20px; align-items:stretch }
.deck-slot{ position:relative; display:flex; flex-direction:column; gap:8px }
.deck-slot .cf-card{ flex:1 1 auto }
.deck-slot.is-new .cf-card{ box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 2px var(--c-gold), 0 0 16px rgba(212,175,82,.5) }
.deck-new{ position:absolute; top:-8px; right:-6px; z-index:3; background:var(--c-gold); color:#10130f; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; font-family:var(--font-display),sans-serif }
/* COLEÇÃO: contagem de cópias, botão de equipar e destaque do que está no baralho */
.col-count{ position:absolute; top:-8px; left:-6px; z-index:3; background:var(--panel,#222); color:var(--ink,#eee); border:1px solid var(--line); font-size:11px; font-weight:800; padding:2px 8px; border-radius:10px; font-family:var(--font-display),sans-serif }
.col-slot.is-equipped .cf-card{ box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 2px #6ec38c, 0 0 16px rgba(110,195,140,.4) }
.col-equip{ padding:7px 10px; font-size:12px; border-radius:8px; cursor:pointer; border:1px solid var(--line); width:100% }
.col-equip.primary{ background:var(--gold,#c8a24a); color:#10130f; font-weight:700; border-color:var(--gold,#c8a24a) }
.col-equip.equipped{ background:transparent; color:#6ec38c; border-color:#6ec38c; font-weight:700; cursor:default }
.col-equip:disabled{ opacity:.5; cursor:default }
.deck-sel{ width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:7px 9px; color:var(--ink); font-size:12px; cursor:pointer }
.cf-fallback{ padding:20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:10px }

/* aviso de "carta melhor disponível" no editor de baralho */
.deck-upgrade{ display:flex; align-items:center; gap:6px; justify-content:center;
  font-size:11px; color:var(--c-gold); background:rgba(212,175,82,.10);
  border:1px solid rgba(212,175,82,.5); border-radius:7px; padding:5px 8px; cursor:pointer;
  transition:background .15s, transform .1s; text-align:center; line-height:1.2 }
.deck-upgrade:hover{ background:rgba(212,175,82,.2); transform:translateY(-1px) }
.deck-upgrade .up-arrow{ font-size:12px; animation:upPulse 1.6s ease-in-out infinite }
@keyframes upPulse{ 0%,100%{transform:translateY(0);opacity:.7} 50%{transform:translateY(-2px);opacity:1} }

/* botão de configurações dentro da partida */
#gSettingsBtn:hover{ border-color:var(--c-gold); color:var(--c-gold) }

/* controles de áudio fixos (música + efeitos) */
.audio-btn{ width:42px; height:42px; border-radius:50%; background:rgba(16,19,15,.9); border:1px solid var(--line);
  color:var(--ink); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35); transition:border-color .15s, transform .1s, opacity .15s }
.audio-btn:hover{ border-color:var(--c-gold); transform:translateY(-2px) }
.audio-btn.muted{ opacity:.5; border-color:var(--c-rust); color:var(--c-rust) }

/* cartas no mercado usam o componente completo, em tamanho compacto */
.mkt-cardface{ width:100%; max-width:170px; margin:0 auto }
.mkt-cardface .cf-card{ min-height:240px }
.mkt-cardface .cf-actdesc{ font-size:8.5px }

/* cartas da mão em jogo usam o componente compacto */
/* cartas da mão em jogo: versão compacta (fontes menores p/ caber sem quebrar feio) */
.hand-card{ height:188px }
.hand-card .cf-card{ min-height:0; height:188px }
/* MODO PEEK: a faixa mostra só o topo das cartas; ao passar o mouse, revela tudo.
   Em repouso a faixa clipa o excedente; no hover a faixa deixa transbordar p/ cima. */
.hand-peek{ overflow:hidden }
.hand-peek:hover, .hand-peek.has-armed{ overflow:visible }
/* IMPORTANTE (anti-"quique"): o gatilho do hover é a FAIXA (zona fixa que não se move),
   não a carta. Assim a carta sobe e NÃO sai de baixo do cursor — sem loop sobe/desce.
   Todas as cartas sobem juntas quando o cursor entra na faixa. */
.hand-peek .hand-card{ transition:transform .16s ease, filter .12s; transform-origin:50% 100% }
.hand-peek:hover .hand-card{ transform:translateY(-110px) }
/* FOCO: a carta sob o cursor AUMENTA (scale) ancorada na base — cresce sem se afastar
   do mouse, então não quica. Mantém o mesmo translateY do lift uniforme. */
.hand-peek:hover .hand-card:hover{ transform:translateY(-110px) scale(1.12); z-index:8; filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)) }
/* carta armada (selecionada p/ atacar/blindar) fica revelada mesmo sem hover */
.hand-peek .hand-card.armed{ transform:translateY(-110px); z-index:7 }
/* "ponte" de hover: estende a zona sensível ao mouse PARA CIMA, cobrindo onde as
   cartas levantadas ficam. Assim o cursor pode subir até a carta sem perder o hover
   (a carta não "cai"). Invisível e sem capturar cliques fora das cartas. */
.hand-peek::before{ content:""; position:absolute; left:0; right:0; bottom:0; top:-120px;
  pointer-events:none; z-index:-1 }
.hand-peek:hover::before{ pointer-events:auto }
/* MOBILE: o peek de desktop é desligado — vale o bottom-sheet (.mob-sheet) */
body.mobile-game .hand-peek{ overflow:visible !important; height:auto !important; margin-bottom:0 !important }
body.mobile-game .hand-peek #gHand{ position:static !important; }
body.mobile-game .hand-peek .hand-card{ height:auto !important; transform:none !important }
body.mobile-game .hand-peek .hand-card .cf-card{ height:auto !important }
.hand-card .cf-actdesc{ display:none }
.hand-card.armed .cf-card{ box-shadow:0 0 0 2px var(--para), 0 0 14px rgba(143,179,201,.6) }
.hand-card .cf-tname{ font-size:11px; min-height:2.1em; line-height:1.05; word-break:normal; hyphens:none; display:flex; align-items:center; justify-content:center; text-align:center }
.hand-card .cf-tcont{ font-size:7px }
.hand-card .cf-pips{ font-size:8px; letter-spacing:1px }
.hand-card .cf-rarbar{ margin:1px 8px 3px }
.hand-card .cf-rarlabel{ font-size:7px }
.hand-card .cf-emblem{ width:34px; height:34px }
.hand-card .cf-emblem svg{ width:20px; height:20px }
.hand-card .cf-symwrap{ width:34px }
.hand-card .cf-sym{ width:17px; height:17px }
.hand-card .cf-mapwin{ margin:0 8px }
.hand-card .cf-acticon{ width:20px; height:20px }
.hand-card .cf-actname{ font-size:9.5px; min-height:2.1em; line-height:1.05 }
.hand-card .cf-badge{ margin:4px 10px 8px; padding:3px 0 }
.hand-card .cf-bval{ font-size:15px }
.hand-card .cf-wing{ width:16px }

/* CARTAS DEFENSIVAS: tema de fortaleza (verde militar) para distinguir das ofensivas.
   O emblema (fortaleza) e o ícone (escudo) ganham um leve tom verde; a borda da carta
   recebe um anel verde sutil. A raridade/cor de fundo continua igual à ofensiva. */
.cf-card.is-defense .cf-emblem{ box-shadow:0 0 0 1px rgba(110,195,140,.5) }
.cf-card.is-defense .cf-acticon{ stroke:#2f6b44 }
.cf-card.is-defense .cf-actname{ color:#2f6b44 }
.cf-card.is-defense .cf-bval{ color:#fff }
.cf-card.is-defense::after{ content:""; position:absolute; inset:-2px; border-radius:15px; z-index:1; pointer-events:none;
  border:2px solid rgba(110,195,140,.55) }
/* a defensiva FOIL mantém a borda holográfica (prioridade do foil) */
.cf-card.is-defense.is-foil::after{ border:none }
.hand-card.is-def.armed{ filter:drop-shadow(0 0 12px rgba(110,195,140,.8)) }

/* ============================================================
   ANIMAÇÃO DE FUSÃO DE CARTAS (suspense -> sucesso/falha)
   ============================================================ */
.fuse-ov{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(30,20,50,.86), rgba(6,8,12,.95));
  opacity:0; transition:opacity .3s }
.fuse-ov.show{ opacity:1 }
.fuse-stage{ position:relative; width:min(92vw,560px); height:min(80vh,560px); display:flex; align-items:center; justify-content:center }
/* leque de 5 cartas espalhadas, com entrada escalonada */
.fuse-spread{ position:absolute; width:0; height:0 }
.fuse-piece{ position:absolute; top:0; left:0; width:124px; margin:-84px 0 0 -62px;
  transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(.9);
  opacity:0; animation:fusePieceIn .5s cubic-bezier(.2,1,.3,1) forwards; animation-delay:var(--d);
  transition:transform .7s cubic-bezier(.55,0,.35,1), opacity .55s }
@keyframes fusePieceIn{ from{opacity:0; transform:translate(calc(var(--x)*1.5),calc(var(--y) + 60px)) rotate(var(--rot)) scale(.6)} to{opacity:1; transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(.9)} }
.fuse-piece .cf-card{ min-height:168px; box-shadow:0 6px 18px rgba(0,0,0,.55) }
.fuse-piece .cf-actdesc, .fuse-piece .cf-action .cf-actrule{ display:none }
/* nomes inteiros (sem quebra letra a letra) e fontes compactas */
.fuse-piece .cf-tname{ font-size:10px; min-height:2.2em; line-height:1.1; word-break:normal; overflow-wrap:normal; hyphens:none; display:flex; align-items:center; justify-content:center; text-align:center }
.fuse-piece .cf-tcont{ font-size:7px } .fuse-piece .cf-rarlabel{ font-size:7px }
.fuse-piece .cf-emblem{ width:30px; height:30px } .fuse-piece .cf-emblem svg{ width:17px; height:17px }
.fuse-piece .cf-symwrap{ width:30px } .fuse-piece .cf-sym{ width:15px; height:15px }
.fuse-piece .cf-actname{ font-size:8px; min-height:1.8em; line-height:1.1 }
.fuse-piece .cf-bval{ font-size:13px }
/* convergência: as 5 cartas deslizam e giram até o centro, empilham e somem */
.fuse-spread.converge .fuse-piece{ animation:none; transform:translate(0,0) rotate(0) scale(.55); opacity:0 }
.fuse-spread.converge .fuse-piece{ transition:transform .7s cubic-bezier(.55,0,.35,1), opacity .6s .15s }
/* núcleo de energia */
.fuse-core{ position:absolute; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd98a 40%,#e8893a 70%,transparent 75%);
  box-shadow:0 0 40px 10px rgba(232,137,58,.6); opacity:0; transform:scale(.4); transition:opacity .4s }
.fuse-core.charge{ animation:fuseCharge .8s ease-in forwards }
@keyframes fuseCharge{ 0%{transform:scale(.4);opacity:0} 50%{opacity:.7} 100%{transform:scale(1.3);opacity:1} }
.fuse-core.flash{ animation:fuseFlash .6s ease-out forwards }
@keyframes fuseFlash{ 0%{transform:scale(1.3);opacity:1} 40%{transform:scale(4);opacity:1;box-shadow:0 0 120px 60px rgba(255,240,200,.9)} 100%{transform:scale(6);opacity:0} }
.fuse-core.shatter{ animation:fuseShatter .6s ease-in forwards }
@keyframes fuseShatter{ 0%{transform:scale(1.3);opacity:1} 30%{transform:scale(1.5);opacity:1} 100%{transform:scale(.1);opacity:0;filter:blur(4px)} }
/* FALHA: as cartas se desintegram em pó (dessaturam, tremem e somem em fumaça) */
.fuse-spread.crumble .fuse-piece{ animation:fusePieceCrumble .7s ease-in forwards }
@keyframes fusePieceCrumble{
  0%{ filter:grayscale(0) brightness(1); transform:translate(0,0) scale(.55); opacity:1 }
  35%{ filter:grayscale(.7) brightness(.7); transform:translate(0,2px) scale(.5) rotate(1deg) }
  100%{ filter:grayscale(1) brightness(.4) blur(3px); transform:translate(0,18px) scale(.42); opacity:0 } }
.fuse-dust{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:3 }
.fuse-mote{ position:absolute; left:0; top:0; width:var(--sz); height:var(--sz); border-radius:1px;
  background:linear-gradient(135deg,#cdbfa6,#7a6f5c); opacity:0;
  animation:fuseMote 1s ease-out var(--dl) forwards }
@keyframes fuseMote{
  0%{ transform:translate(0,0) rotate(0); opacity:0 }
  15%{ opacity:.95 }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(220deg); opacity:0 } }
.fuse-ov.is-fail .fuse-stage{ animation:fuseFailShake .4s ease-in-out }
@keyframes fuseFailShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
/* raios de explosão no sucesso */
.fuse-rays{ position:absolute; width:0; height:0 }
.fuse-rays.burst::before, .fuse-rays.burst::after{ content:""; position:absolute; left:50%; top:50%;
  width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,220,150,.5) 8deg 10deg, transparent 10deg 18deg);
  animation:fuseRays 1s ease-out forwards }
.fuse-rays.burst::after{ animation-delay:.1s; opacity:.6 }
@keyframes fuseRays{ 0%{transform:scale(.2) rotate(0);opacity:0} 30%{opacity:1} 100%{transform:scale(1.4) rotate(40deg);opacity:0} }
/* carta resultante */
.fuse-result{ position:absolute; opacity:0 }
.fuse-result.reveal{ animation:fuseReveal .8s cubic-bezier(.2,1.2,.3,1) forwards }
@keyframes fuseReveal{ 0%{opacity:0;transform:scale(.3) rotateY(180deg)} 60%{opacity:1} 100%{opacity:1;transform:scale(1) rotateY(0)} }
.fuse-newcard{ width:200px }
.fuse-newcard .cf-card{ min-height:300px }
.fuse-ov.big-win .fuse-newcard{ animation:fuseBigWin 1.4s ease-in-out infinite }
@keyframes fuseBigWin{ 0%,100%{filter:drop-shadow(0 0 18px rgba(212,175,82,.5))} 50%{filter:drop-shadow(0 0 38px rgba(212,175,82,.9))} }
/* legenda + botão */
.fuse-caption{ position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:15px; font-weight:700;
  font-family:var(--font-display),sans-serif; color:var(--ink); text-shadow:0 2px 8px rgba(0,0,0,.7) }
.fuse-caption.ok{ color:#ffd98a } .fuse-caption.err{ color:#e08b7a }
.fuse-close{ position:absolute; bottom:-54px; left:50%; transform:translateX(-50%);
  padding:9px 22px; border-radius:22px; font-weight:700; cursor:pointer; background:var(--panel); border:1px solid var(--line); color:var(--ink) }
.fuse-close:hover{ border-color:var(--c-gold) }
.fuse-mini-fallback,.fuse-newcard>div:only-child{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--ink); font-size:12px }

/* ============================================================
   MISSÕES DIÁRIAS — botão da topbar (3 estados) + quadro
   ============================================================ */
.missions-btn{ display:inline-flex; align-items:center; gap:6px; position:relative;
  padding:6px 12px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink); transition:all .18s }
.missions-btn .mb-icon{ font-size:14px }
.missions-btn:hover{ transform:translateY(-1px) }
/* estado ATIVO (há missões a cumprir): discreto */
.missions-btn.m-active{ border-color:var(--line) }
/* estado RESGATÁVEL: dourado pulsante, chama atenção */
.missions-btn.m-claimable{ border-color:var(--c-gold); color:var(--c-gold);
  background:linear-gradient(135deg, rgba(212,175,82,.18), rgba(212,175,82,.06));
  box-shadow:0 0 14px rgba(212,175,82,.4); animation:mbPulse 1.6s ease-in-out infinite }
@keyframes mbPulse{ 0%,100%{box-shadow:0 0 10px rgba(212,175,82,.3)} 50%{box-shadow:0 0 20px rgba(212,175,82,.65)} }
/* estado CONCLUÍDO (tudo resgatado): esmaecido, verde */
.missions-btn.m-done{ border-color:rgba(95,174,155,.5); color:#5fae9b; opacity:.7 }
.missions-btn.m-done .mb-icon::after{ content:''; }
.missions-btn .mb-dot{ display:none; width:9px; height:9px; border-radius:50%; background:var(--c-gold);
  box-shadow:0 0 8px var(--c-gold); animation:mbPulse 1.2s ease-in-out infinite }

/* BOTÃO DE PACKS (perto da Loja): atraente e destacado, com cara de "abra-me".
   Quando há packs disponíveis, ganha um brilho âmbar pulsante chamativo. */
.packs-btn{ display:inline-flex; align-items:center; gap:7px; position:relative;
  padding:7px 14px; border-radius:9px; font-weight:800; font-size:13px; cursor:pointer;
  border:1px solid rgba(200,162,74,.5); color:#f0d79a;
  background:linear-gradient(135deg, rgba(180,120,60,.22), rgba(120,80,40,.12));
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease }
.packs-btn .pk-icon{ display:inline-flex; align-items:center; font-size:16px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); transition:transform .14s ease }
.packs-btn .pk-icon svg{ display:block; height:25px; width:auto }
.packs-btn:hover{ transform:translateY(-1px); border-color:var(--c-gold); box-shadow:0 4px 16px rgba(200,162,74,.3) }
.packs-btn:hover .pk-icon{ transform:rotate(-8deg) scale(1.12) }
/* tem packs para abrir → brilho âmbar pulsante (estado "has-packs" via JS) */
.packs-btn.has-packs{ border-color:var(--c-gold); color:#ffe9b8;
  background:linear-gradient(135deg, rgba(212,160,74,.32), rgba(160,110,50,.16));
  box-shadow:0 0 14px rgba(212,175,82,.4); animation:mbPulse 1.8s ease-in-out infinite }
@media (max-width:760px){ .packs-btn .pk-label{ display:none } .packs-btn{ padding:7px 11px } }

/* COMPRA DE PACKS EM LOTE — cartões com "leque" de packs empilhados */
.pack-bulk-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:560px }
.pack-bulk-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 18px 18px; cursor:pointer; border-radius:14px; overflow:hidden;
  border:1px solid rgba(200,162,74,.4); background:linear-gradient(160deg, rgba(40,55,38,.5), rgba(20,28,18,.4));
  transition:transform .18s cubic-bezier(.2,.7,.3,1.3), box-shadow .22s ease, border-color .18s ease; color:var(--ink) }
/* brilho que varre o card no hover (shine sweep) */
.pack-bulk-card::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.16), transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0; transition:opacity .2s ease }
.pack-bulk-card:hover{ transform:translateY(-6px) scale(1.02); border-color:var(--c-gold);
  box-shadow:0 14px 36px rgba(200,162,74,.4); animation:pbcGlow 1.8s ease-in-out infinite }
.pack-bulk-card:hover::after{ opacity:1; animation:pbcShine 1.1s ease-in-out }
@keyframes pbcGlow{ 0%,100%{ box-shadow:0 14px 30px rgba(200,162,74,.32) } 50%{ box-shadow:0 16px 42px rgba(200,162,74,.55) } }
@keyframes pbcShine{ 0%{ left:-60% } 100%{ left:130% } }
.pack-bulk-card:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; animation:none }
.pack-bulk-card:disabled::after{ display:none }
.pack-bulk-card .pbc-qty{ font-family:var(--font-display),sans-serif; font-weight:800; font-size:17px; color:var(--ink); letter-spacing:.02em; transition:color .18s ease }
.pack-bulk-card .pbc-price{ font-size:14px; font-weight:700; color:var(--c-gold,#d4af52); transition:transform .18s ease }
.pack-bulk-card:hover .pbc-qty{ color:#ffe9b8 }
.pack-bulk-card:hover .pbc-price{ transform:scale(1.08); animation:pbcPricePulse 1.2s ease-in-out infinite }
@keyframes pbcPricePulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.3) } }
/* respeita quem prefere menos animação: mantém o hover, tira pulsos/varredura */
@media (prefers-reduced-motion: reduce){
  .pack-bulk-card:hover{ animation:none }
  .pack-bulk-card:hover::after{ animation:none; opacity:0 }
  .pack-bulk-card:hover .pbc-price{ animation:none }
}
/* LEQUE DE 5 (pbc-fan5): cinco packs espalhados em leque, todos visíveis para "contar" */
.pbc-fan5{ position:relative; width:140px; height:100px; margin:0 auto 4px }
.pbc-fan5 .pbc-pack{ position:absolute; left:50%; bottom:0; width:46px; margin-left:-23px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); transition:transform .22s ease; transform-origin:50% 100% }
.pbc-fan5 .pbc-pack svg{ display:block; width:100%; height:auto }
/* ângulos do leque: -28, -14, 0, +14, +28 (em repouso) */
.pbc-fan5 .pf-0{ transform:rotate(-28deg) }
.pbc-fan5 .pf-1{ transform:rotate(-14deg) }
.pbc-fan5 .pf-2{ transform:rotate(0deg); z-index:3 }
.pbc-fan5 .pf-3{ transform:rotate(14deg) }
.pbc-fan5 .pf-4{ transform:rotate(28deg) }
/* hover: o leque se abre mais e cada pack sobe um pouco (carta sendo distribuída) */
.pack-bulk-card:hover .pbc-fan5 .pf-0{ transform:rotate(-42deg) translateY(-6px) }
.pack-bulk-card:hover .pbc-fan5 .pf-1{ transform:rotate(-21deg) translateY(-3px) }
.pack-bulk-card:hover .pbc-fan5 .pf-2{ transform:rotate(0deg) translateY(-8px) }
.pack-bulk-card:hover .pbc-fan5 .pf-3{ transform:rotate(21deg) translateY(-3px) }
.pack-bulk-card:hover .pbc-fan5 .pf-4{ transform:rotate(42deg) translateY(-6px) }

/* PILHA DE 10 (pbc-stack10): packs empilhados de frente, levemente escalonados
   para dar ESPESSURA (como um maço), sem espalhar. */
.pbc-stack10{ position:relative; width:80px; height:104px; margin:0 auto 4px }
.pbc-stack10 .pbc-pack{ position:absolute; left:0; top:0; width:56px;
  transform:translate(var(--sx,0), var(--sy,0)); transition:transform .26s cubic-bezier(.2,.7,.3,1.3) }
.pbc-stack10 .pbc-pack svg{ display:block; width:100%; height:auto }
/* o de frente levanta de leve no hover */
.pack-bulk-card:hover .pbc-stack10 .ps-front{ transform:translate(var(--sx), calc(var(--sy) - 7px)) }
/* as camadas de trás se espalham um pouco (o maço "ganha vida" e mostra que são vários) */
.pack-bulk-card:hover .pbc-stack10 .pbc-pack:nth-child(1){ transform:translate(calc(var(--sx) - 7px), calc(var(--sy) - 2px)) rotate(-5deg) }
.pack-bulk-card:hover .pbc-stack10 .pbc-pack:nth-child(2){ transform:translate(calc(var(--sx) - 3px), var(--sy)) rotate(-2deg) }
.pack-bulk-card:hover .pbc-stack10 .pbc-pack:nth-child(4){ transform:translate(calc(var(--sx) + 3px), var(--sy)) rotate(2deg) }

/* BADGE de contagem nos botões de navegação (QG pronto / missões resgatáveis).
   Bolha dourada pulsante com número; escondida quando vazia. */
.nav button{ position:relative; }
.nav-badge{
  display:none; position:absolute; top:-6px; right:-6px; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px; background:linear-gradient(135deg,#e8c25e,#c8a24a);
  color:#10130f; font-size:11px; font-weight:800; line-height:17px; text-align:center;
  box-shadow:0 0 10px rgba(212,175,82,.7); animation:mbPulse 1.5s ease-in-out infinite;
}
.nav-badge.on{ display:inline-block; }
/* o próprio botão pulsa de leve quando tem badge ativo */
.nav button.has-badge{ border-color:var(--c-gold,#c8a24a); color:var(--c-gold,#c8a24a); }

/* HOVER nos cosméticos clicáveis do perfil (só em aparelhos com mouse/hover real,
   para não disparar estado "preso" em telas de toque). Reforça que dá para equipar. */
@media (hover:hover) and (pointer:fine){
  .me-equip-cell:hover{
    border-color:var(--c-gold,#c8a24a) !important;
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(200,162,74,.28);
  }
  .me-equip-cell:active{ transform:translateY(0); }
}

/* quadro de missões */
.missions-board{ width:min(94vw,560px); max-height:88vh; overflow-y:auto;
  background:linear-gradient(170deg, #1a2236, #11151f); border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) }
.mboard-head{ display:flex; align-items:flex-start; justify-content:space-between }
.mboard-eyebrow{ font-family:var(--font-display),sans-serif; font-size:10px; font-weight:700; letter-spacing:.24em; color:var(--c-gold); text-transform:uppercase }
.mboard-title{ font-family:var(--font-display),sans-serif; font-size:24px; margin:2px 0 0; color:var(--ink) }
.mboard-x{ background:none; border:1px solid var(--line); border-radius:8px; color:var(--muted); width:32px; height:32px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; line-height:1; padding:0 }
.mboard-x:hover{ color:var(--ink); border-color:var(--c-rust) }
.mboard-sub{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 8px; flex-wrap:wrap }
.mboard-timer{ font-size:12px; color:var(--muted) }
.mboard-prize{ font-size:12px; color:var(--ink) } .mboard-prize b{ color:var(--c-gold) }
.mboard-progress{ height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:16px }
.mboard-progress-fill{ height:100%; width:0; background:linear-gradient(90deg,#5fae9b,var(--c-gold)); transition:width .4s }
.missions-list{ display:flex; flex-direction:column; gap:10px }
.mission-row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--line); transition:border-color .2s, background .2s }
.mission-row.is-ready{ border-color:var(--c-gold); background:linear-gradient(135deg, rgba(212,175,82,.12), rgba(212,175,82,.03)) }
.mission-row.is-claimed{ opacity:.55 }
.m-tier{ flex:0 0 auto; width:56px; text-align:center; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tc); border:1px solid var(--tc); border-radius:6px; padding:5px 0 }
.m-main{ flex:1; min-width:0 }
.m-text{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px }
.m-comp{ font-size:9px; font-weight:700; color:#c8a24a; background:rgba(200,162,74,.15); border-radius:4px; padding:1px 5px; white-space:nowrap }
.m-barwrap{ height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden }
.m-bar{ height:100%; width:0; border-radius:4px; transition:width .4s }
.m-prog{ font-size:10px; color:var(--muted); margin-top:3px }
.m-reward{ flex:0 0 auto; text-align:center; min-width:84px; display:flex; flex-direction:column; align-items:center; gap:5px }
.m-coins{ font-weight:800; font-size:15px; color:var(--c-gold) }
.m-claim{ padding:6px 12px; border-radius:7px; font-weight:700; font-size:12px; cursor:pointer;
  background:var(--c-gold); color:#10130f; border:none; animation:mbPulse 1.6s ease-in-out infinite }
.m-claim:hover{ filter:brightness(1.1) }
.m-claimed-tag{ font-size:11px; color:#5fae9b; font-weight:700 }
.m-locked{ font-size:10px; color:var(--muted) }

/* ============================================================
   LOJA DE DIAMONDS
   ============================================================ */
.shop-h2{ font-family:var(--font-display),sans-serif; font-size:16px; color:var(--ink); margin:24px 0 12px; font-weight:700 }
.shop-h2 .shop-sub{ font-size:12px; color:var(--muted); font-weight:400 }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.shop-card{ position:relative; background:linear-gradient(165deg,#1b2738,#141a24); border:1px solid var(--line);
  border-radius:14px; padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .15s, border-color .15s, box-shadow .15s }
.shop-card:hover{ transform:translateY(-3px); border-color:#6fc3e0; box-shadow:0 8px 24px rgba(0,0,0,.4) }
.shop-card.is-best{ border-color:var(--c-gold); box-shadow:0 0 18px rgba(212,175,82,.3) }
.shop-ribbon{ position:absolute; top:10px; left:-4px; background:var(--c-gold); color:#10130f; font-size:9px; font-weight:800;
  letter-spacing:.05em; padding:3px 8px; border-radius:0 6px 6px 0; box-shadow:0 2px 5px rgba(0,0,0,.4) }
.shop-ribbon.green{ background:#5fae9b; color:#0b1410 }
.shop-dia{ font-size:24px; font-weight:800; color:#6fc3e0; font-family:var(--font-display),sans-serif }
.shop-packs{ font-size:20px; font-weight:800; color:var(--ink); font-family:var(--font-display),sans-serif }
.shop-bonus{ font-size:11px; color:#5fae9b; font-weight:700 }
.shop-buy{ width:100%; margin-top:auto }
/* conversão */
.convert-box{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:16px; max-width:560px }
.convert-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.conv-step{ width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:18px; cursor:pointer }
.conv-step:hover{ border-color:#6fc3e0 }
.conv-input{ width:80px; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); text-align:center; font-size:15px; font-weight:700 }
.conv-unit{ font-size:16px }
.conv-arrow{ color:var(--muted); font-size:18px }
.conv-result{ font-size:18px; font-weight:800 } .conv-result b{ color:var(--c-gold) }
.conv-input::-webkit-outer-spin-button,.conv-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* arte do Conquest Pack (reutilizada na loja e na abertura) */
.cpack-thumb{ display:flex; justify-content:center; margin-bottom:2px }
.cpack-thumb .cpack-svg{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition:transform .15s }
.shop-card:hover .cpack-thumb .cpack-svg{ transform:translateY(-2px) scale(1.03) }
.cpack-svg{ display:block }

/* ============================================================
   ABERTURA MÚLTIPLA DE PACKS — revelação em grade
   ============================================================ */
.multi-reveal-ov{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,7,.9); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; padding:20px }
.multi-reveal-ov.show{ opacity:1 }
.multi-reveal-box{ width:min(96vw,1000px); max-height:92vh; display:flex; flex-direction:column;
  background:linear-gradient(170deg,#1a2236,#11151f); border:1px solid var(--c-gold); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6) }
.mr-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px 8px }
.mr-eyebrow{ font-family:var(--font-display),sans-serif; font-size:10px; font-weight:700; letter-spacing:.24em; color:var(--c-gold); text-transform:uppercase }
.mr-title{ font-family:var(--font-display),sans-serif; font-size:20px; margin:2px 0 0; color:var(--ink) }
.mr-close{ background:none; border:1px solid var(--line); border-radius:8px; color:var(--muted); width:32px; height:32px; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; font-size:14px }
.mr-close:hover{ color:var(--ink); border-color:var(--c-rust) }
.mr-summary{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 20px 12px }
.mr-chip{ font-size:11px; font-weight:700; border:1px solid; border-radius:20px; padding:3px 10px; background:rgba(255,255,255,.04) }
.mr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px;
  overflow-y:auto; padding:16px 20px 8px; align-content:start; align-items:start }
.mr-card{ position:relative; border-radius:10px; opacity:0; transform:translateY(12px) scale(.95);
  animation:mrIn .4s ease-out forwards; animation-delay:var(--d) }
@keyframes mrIn{ to{ opacity:1; transform:translateY(0) scale(1) } }
.mr-card.r-epico{ box-shadow:0 0 12px rgba(168,85,247,.5) }
.mr-card.r-lendario{ box-shadow:0 0 16px rgba(232,194,94,.6) }
/* altura FIXA: toda carta da grade ocupa exatamente o mesmo espaço, independente do
   tamanho do nome do território ou do efeito (evita o desalinhamento entre cartas). */
.mr-card .cf-card{ height:200px; min-height:200px }
.mr-card .cf-paper{ height:100%; display:flex; flex-direction:column }
.mr-card .cf-mapwin{ flex:0 0 auto }
.mr-card .cf-action{ flex:1 1 auto; justify-content:center }
.mr-foil{ position:absolute; top:4px; right:6px; font-size:13px; filter:drop-shadow(0 0 4px #fff) }
.mr-foot{ padding:12px 20px 18px; text-align:center; border-top:1px solid var(--line) }
/* compacta o componente de carta na grade (sem espremer o nome) */
.mr-card .cf-tname{ font-size:10px; min-height:2.4em; line-height:1.1; display:flex; align-items:center; justify-content:center; text-align:center; hyphens:none; word-break:normal; overflow-wrap:normal }
.mr-card .cf-tcont{ font-size:6.5px } .mr-card .cf-rarlabel{ font-size:6.5px }
.mr-card .cf-emblem{ width:30px; height:30px } .mr-card .cf-emblem svg{ width:17px; height:17px }
.mr-card .cf-symwrap{ width:30px } .mr-card .cf-sym{ width:15px; height:15px }
.mr-card .cf-actname{ font-size:8px; min-height:2em; line-height:1.1 } .mr-card .cf-actdesc{ display:none }
.mr-card .cf-bval{ font-size:13px } .mr-card .cf-wing{ width:13px }
.mr-card .cf-pips{ font-size:7.5px } .mr-card .cf-acticon{ width:18px; height:18px }

/* emblemas de perfil (cosmético) */
.emblem-svg{ display:inline-block; vertical-align:middle; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) }

/* nome do jogador no topo: claramente clicável (abre Meu Perfil) */
.user-link{ cursor:pointer; padding:4px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); transition:border-color .15s, color .15s, background .15s;
  display:inline-flex; align-items:center; gap:4px }
.user-link:hover{ border-color:var(--gold); color:var(--gold); background:rgba(212,175,82,.10) }
.user-link::after{ content:'›'; opacity:.5; font-size:14px; margin-left:2px }

/* dados rolando no tabuleiro (visíveis a todos durante o combate) */
.board-dice{ animation:bdFade 1.6s ease-out forwards; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) }
.bd-die{ animation:bdRoll .5s cubic-bezier(.34,1.56,.64,1) backwards }
@keyframes bdRoll{ 0%{ transform:rotate(-180deg) scale(.3); opacity:0 } 60%{ transform:rotate(12deg) scale(1.12); opacity:1 } 100%{ transform:rotate(0) scale(1); opacity:1 } }
@keyframes bdFade{ 0%,72%{ opacity:1 } 100%{ opacity:0 } }

/* destaque quando a sala é criada (chama a atenção do jogador) */
@keyframes roomFlash{ 0%{ box-shadow:0 0 0 0 rgba(212,175,82,.0); border-color:var(--line) }
  20%{ box-shadow:0 0 0 4px rgba(212,175,82,.45); border-color:var(--gold) }
  100%{ box-shadow:0 0 0 0 rgba(212,175,82,0); border-color:var(--line) } }
.room-flash{ animation:roomFlash 1.6s ease-out }

/* destaque sutil da "troca disponível" na mão do jogador */
.trade-ready{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  color:#10130f; background:linear-gradient(180deg,#e8c25e,#c8a24a); border-radius:20px;
  padding:2px 10px; margin-left:8px; letter-spacing:.02em; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(212,175,82,.55); animation:tradePulse 2.2s ease-in-out infinite }
@keyframes tradePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,175,82,.5) } 50%{ box-shadow:0 0 0 5px rgba(212,175,82,0) } }

/* botão "Trocar cartas" em destaque quando há troca disponível */
#gTradeBtn.trade-glow{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 0 rgba(212,175,82,.5); animation:tradePulse 2.2s ease-in-out infinite }
/* ----- PAINEL DE INFORMAÇÕES (direita, em batalha) ----- */
/* cabeçalho de seção estilo "patente": eyebrow dourado + filete divisório */
.gpanel-head{ font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.92;
  margin-bottom:8px; padding-bottom:5px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(212,175,82,.18) }
.gpanel-head::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(212,175,82,.25), transparent) }
/* card de jogador */
.gp-card{ position:relative; padding:7px 9px 8px; border-radius:9px; margin-bottom:6px;
  background:rgba(255,255,255,.018); border:1px solid transparent; overflow:hidden;
  transition:background .2s, border-color .2s }
.gp-card.is-turn{ background:var(--panel2); border-color:rgba(212,175,82,.35);
  box-shadow:0 0 0 1px rgba(212,175,82,.12), 0 4px 14px rgba(0,0,0,.3) }
.gp-card.is-turn::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--pc, var(--gold)) }
.gp-card.is-dead{ opacity:.5 }
/* barra de domínio (proporção de territórios) */
.gp-bar{ position:relative; height:4px; border-radius:3px; margin-top:6px;
  background:rgba(255,255,255,.06); overflow:hidden }
.gp-bar > i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:var(--pc, var(--gold)); transition:width .5s cubic-bezier(.2,.8,.2,1) }
/* linha de continente */
.gc-row{ display:flex; align-items:center; gap:7px; padding:4px 4px; border-radius:6px;
  font-size:13px; transition:background .15s }
.gc-row.owned{ background:rgba(255,255,255,.03) }
.gc-row .gc-dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.3) }
.gc-row .gc-bonus{ margin-left:auto; font-weight:700; font-family:var(--font-display);
  font-size:13px; color:var(--ink) }
/* botão verde TRAVADO por ~1s ao mudar de fase (proteção anti-clique acidental) */
#gMainBtn.btn-guarded{ opacity:.55; cursor:wait; filter:grayscale(.3); position:relative; overflow:hidden }
#gMainBtn.btn-guarded::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:rgba(255,255,255,.5); transform-origin:left; animation:btnGuardSweep 1s linear forwards }
@keyframes btnGuardSweep{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* aviso "Em breve na Season I" no lugar das seções de dinheiro real */
.coming-soon-box{ position:relative; border:1px dashed var(--line); border-radius:12px;
  padding:22px 24px; margin:6px 0 8px; text-align:center;
  background:linear-gradient(160deg, rgba(212,175,82,.06), rgba(111,195,224,.04) 70%); overflow:hidden }
.coming-soon-box::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(212,175,82,.10), transparent 60%) }
.coming-soon-box .cs-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#10130f; background:linear-gradient(180deg,#e8c25e,#c8a24a);
  border-radius:20px; padding:4px 14px; margin-bottom:10px }
.coming-soon-box .cs-title{ font-family:var(--font-display),"Space Grotesk",sans-serif; font-size:19px;
  font-weight:700; color:var(--ink); margin-bottom:6px }
.coming-soon-box .cs-text{ font-size:13px; color:var(--muted); max-width:560px; margin:0 auto; line-height:1.5 }

/* ============================================================
   LAYOUT MÓVEL (paisagem) — ativado por body.mobile-game.
   Mapa = fundo de tela cheia; status flutua no topo; ações + cartas
   na base; painel de info = gaveta lateral da direita. Só afeta mobile.
   ============================================================ */
/* MOBILE: trava TOTAL de rolagem. Só 'overflow:hidden' não basta no iOS Safari (permite
   overscroll/rubber-band que empurra a faixa de status para trás da barra de endereço).
   position:fixed no body + overscroll-behavior:none impedem qualquer deslocamento da tela. */
html.mobile-game-html, body.mobile-game{
  overflow:hidden !important; overscroll-behavior:none !important;
  position:fixed !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; touch-action:none;
}
/* modais ainda precisam rolar internamente (settings tem conteúdo longo): reabilita o
   toque de rolagem dentro deles, apesar do body estar com touch-action:none. */
body.mobile-game #settingsModal, body.mobile-game #gCombat,
body.mobile-game #gQty, body.mobile-game #gTurnModal,
body.mobile-game .modal, body.mobile-game [class*="Modal"]{ touch-action:auto !important; }
/* esconde o cromo de site (topbar/nav) durante a partida no celular */
body.mobile-game .topbar,
body.mobile-game #lobbyChatBox,
body.mobile-game .chat-fab{ display:none !important; }

/* o wrapper do jogo vira tela cheia */
body.mobile-game #gameWrap{ position:fixed; inset:0; max-width:none; margin:0; padding:0; z-index:1; background:transparent !important; }
body.mobile-game #gameGrid{ display:block; height:100%; background:transparent !important; }

/* ---- MAPA: ocupa a tela toda como fundo ---- */
/* O mapa (SVG e imagem) usa 'contain/meet', então em telas largas sobra espaço nas
   laterais. Esse espaço é DELIBERADAMENTE transparente para a arte de batalha (.topo-bg,
   sorteada por partida) preencher o vazio em vez de uma faixa preta. */
body.mobile-game #gMapWrap{
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  margin:0 !important; border:0 !important; border-radius:0 !important;
  aspect-ratio:auto !important; z-index:1; background:transparent !important;
}
body.mobile-game #gMap{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; display:block !important;
}
body.mobile-game #gClassicBg, body.mobile-game #gMapBg{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
}

/* ---- FAIXA DE STATUS no topo (fase / tempo) — já são filhos do gMapWrap ---- */
body.mobile-game #gPhase{ top:6px !important; left:6px !important; font-size:11px !important; padding:5px 9px !important; z-index:30 !important; }
body.mobile-game #gMapWrap > div:nth-child(2){ top:6px !important; right:6px !important; z-index:30 !important; } /* grupo ⚙ + ⏱ */

/* ---- BARRA DE AÇÕES (flutua na base, acima das cartas) ---- */
#mobActionBar{
  position:fixed; left:0; right:0; bottom:28px;   /* 28px = faixa das cartas espiando (reduzida) */
  display:flex; gap:6px; align-items:center;
  padding:3px 7px; z-index:40;
  background:linear-gradient(180deg, rgba(13,16,11,.0), rgba(13,16,11,.78) 42%);
  pointer-events:none;   /* só os botões capturam toque; o resto deixa ver o mapa */
}
#mobActionBar > *{ pointer-events:auto; }
.mob-chip{
  flex:0 0 auto; font-size:13px; padding:7px 12px; border-radius:9px;
  background:rgba(16,19,15,.9); border:1px solid var(--line); color:var(--ink);
  white-space:nowrap; cursor:pointer;
}
.mob-chip-on{ border-color:var(--gold); color:var(--gold); }

/* ---- CARTAS: espiam na borda inferior; toque puxa pra cima ---- */
body.mobile-game #gHandBar.mob-sheet{
  position:fixed !important; left:0; right:0; bottom:0;
  margin:0 !important; border-radius:14px 14px 0 0;
  transform:translateY(calc(100% - 28px));   /* só ~28px aparecem (espiando) */
  transition:transform .22s ease; z-index:60;
  max-height:62vh; overflow:hidden;
  background:rgba(16,19,15,.97); border-top:1px solid var(--gold);
}
body.mobile-game #gHandBar.mob-sheet.mob-open{ transform:translateY(0); }
/* "alça" visual no topo da folha */
body.mobile-game #gHandBar.mob-sheet::before{
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:42px; height:4px; border-radius:2px; background:var(--muted); opacity:.6;
}
body.mobile-game #gHandBar.mob-sheet > div:first-child{ padding-top:14px; }
body.mobile-game #gHandBar #gHand{ min-height:150px; }

/* ---- PAINEL: gaveta lateral da direita ---- */
.mob-panel{
  position:fixed; top:0; right:0; height:100%; width:min(72vw, 260px);
  transform:translateX(100%); transition:transform .24s ease; z-index:80;
  background:rgba(11,14,9,.98); border-left:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,.5);
}
.mob-panel.mob-open{ transform:translateX(0); }
.mob-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line);
  font-weight:700; color:var(--gold); flex:0 0 auto;
}
.mob-panel-body{ flex:1; overflow-y:auto; padding:10px 12px; }
.mob-panel-body aside{ max-height:none !important; border:0 !important; padding:0 !important; background:transparent !important; }

/* ---- AVISO DE ORIENTAÇÃO (retrato) ---- */
.mob-rotate{
  position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; background:rgba(8,10,7,.96);
}
@media (orientation:portrait){
  body.mobile-game .mob-rotate{ display:flex; }
}

/* ---- Quadro de Missões: duas colunas (Diárias | Semanais) ---- */
.missions-board-wide{ width:min(96vw,820px) !important; }
.missions-columns{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
.missions-col{ min-width:0; }
.missions-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.missions-col-title{ font-family:var(--font-display),sans-serif; font-size:16px; margin:0; color:var(--c-ink); }
@media (max-width:680px){
  .missions-columns{ grid-template-columns:1fr; gap:14px; }
  .missions-board-wide{ max-height:88vh; overflow-y:auto; }
}
/* missão semanal com dois níveis — ACENTO AZUL CLARO (diferencia das diárias douradas) */
.weekly-mission{ background:var(--panel2); border:1px solid rgba(111,195,224,.28); border-radius:10px; padding:12px; margin-bottom:10px; }
.weekly-mission .wm-title{ font-weight:700; color:var(--ink); font-size:13px; margin-bottom:6px; }
.weekly-mission .wm-bar{ height:7px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; margin:6px 0; position:relative; }
.weekly-mission .wm-bar-fill{ height:100%; background:linear-gradient(90deg,#5fa8d8,#8fd0f0); border-radius:4px; transition:width .4s; }
.weekly-mission .wm-tier{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; padding:5px 0; }
.weekly-mission .wm-tier-reward{ color:var(--c-muted); }
.weekly-mission .wm-tier-reward b{ color:#6fc3e0 !important; }
.weekly-mission .wm-tier-done{ color:#5fae9b; font-weight:700; }
/* botão de resgate AZUL das semanais */
.wm-claim{ font-size:12px; padding:6px 12px; border-radius:7px; white-space:nowrap; cursor:pointer; font-weight:700; border:1px solid transparent; }
.wm-claim-blue{ background:linear-gradient(135deg,#6fc3e0,#4a9fce); color:#08222e; border-color:#8fd0f0; }
.wm-claim-blue:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.missions-col-title.col-weekly{ color:#8fd0f0; }

/* ============ CONQUEST PASS ============ */
.bp-hero{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(200,162,74,.35);
  background:linear-gradient(160deg,#1c1a12,#12110c); margin-bottom:8px; }
.bp-hero-bg{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(120% 80% at 80% -10%, rgba(200,162,74,.22), transparent 60%),
             radial-gradient(80% 60% at 0% 120%, rgba(111,195,224,.10), transparent 60%); }
.bp-hero-content{ position:relative; padding:26px 28px; }
.bp-eyebrow{ font-family:var(--font-display),sans-serif; font-size:11px; letter-spacing:.28em; color:var(--c-gold); font-weight:700; }
.bp-title{ font-family:var(--font-display),sans-serif; font-size:34px; margin:2px 0 0; color:#f4ecd6;
  text-shadow:0 2px 18px rgba(200,162,74,.25); letter-spacing:.02em; }
.bp-season-timer{ font-size:12px; color:var(--c-muted); margin-top:4px; }
.bp-level-row{ display:flex; align-items:center; gap:18px; margin-top:20px; }
.bp-level-badge{ flex:0 0 auto; width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #e8c25e, #b5892f); color:#1a1408;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(200,162,74,.45), inset 0 2px 6px rgba(255,255,255,.4);
  border:2px solid #f0d98a; }
.bp-level-badge span{ font-family:var(--font-display),sans-serif; font-size:30px; font-weight:900; line-height:1; }
.bp-level-badge small{ font-size:8px; letter-spacing:.18em; font-weight:800; margin-top:1px; }
.bp-xpbar-wrap{ flex:1; min-width:0; }
.bp-xpbar{ height:14px; background:rgba(0,0,0,.4); border:1px solid rgba(200,162,74,.3); border-radius:8px; overflow:hidden; }
.bp-xpbar-fill{ height:100%; width:0%; border-radius:8px; transition:width .6s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(90deg,#b5892f,#f0d98a); box-shadow:0 0 14px rgba(240,217,138,.5); }
.bp-xp-label{ font-size:11px; color:var(--c-muted); margin-top:5px; text-align:right; }
.bp-purchase-row{ margin-top:18px; }
.bp-buy-btn{ font-family:var(--font-display),sans-serif; font-size:14px; font-weight:800; letter-spacing:.04em;
  padding:11px 24px; border-radius:10px; cursor:pointer; border:1px solid #8fd0f0;
  background:linear-gradient(135deg,#6fc3e0,#3f8fbe); color:#06222e; box-shadow:0 6px 18px rgba(111,195,224,.35); }
.bp-buy-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.bp-owned-tag{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#7ad17a;
  background:rgba(95,174,155,.12); border:1px solid rgba(95,174,155,.4); border-radius:9px; padding:8px 16px; }

.bp-track-title{ font-family:var(--font-display),sans-serif; font-size:18px; margin:18px 0 10px; color:var(--c-ink); }
/* trilha: marcos em sequência, ligados por uma linha que se preenche conforme o nível */
.bp-track{ display:flex; flex-direction:column; gap:0; }
.bp-tier{ display:flex; align-items:stretch; gap:14px; position:relative; padding:2px 0; }
/* a "linha" vertical de progresso à esquerda */
.bp-tier-rail{ flex:0 0 auto; width:46px; display:flex; flex-direction:column; align-items:center; position:relative; }
.bp-tier-line{ width:4px; flex:1; background:rgba(255,255,255,.08); }
.bp-tier:first-child .bp-tier-line.top{ background:transparent; }
.bp-tier:last-child .bp-tier-line.bottom{ background:transparent; }
.bp-tier.reached .bp-tier-line{ background:linear-gradient(180deg,#b5892f,#f0d98a); }
.bp-node{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display),sans-serif; font-size:13px; font-weight:800; z-index:1;
  background:#15140e; border:2px solid rgba(255,255,255,.14); color:var(--c-muted); }
.bp-tier.reached .bp-node{ background:radial-gradient(circle at 50% 35%,#e8c25e,#b5892f); color:#1a1408; border-color:#f0d98a;
  box-shadow:0 0 12px rgba(240,217,138,.5); }
.bp-tier-card{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; margin:6px 0;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:border-color .2s; }
.bp-tier.reached .bp-tier-card{ border-color:rgba(200,162,74,.4); }
.bp-tier.claimable .bp-tier-card{ border-color:var(--c-gold); box-shadow:0 0 16px rgba(200,162,74,.25); }
.bp-reward-icon{ width:46px; height:46px; flex:0 0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(160deg,#23211a,#16150f); border:1px solid rgba(200,162,74,.3); }
.bp-tier.milestone .bp-reward-icon{ background:linear-gradient(160deg,#2a2233,#1a1622); border-color:rgba(143,176,232,.45); }
/* recompensas de PACKS: destaque azul-esverdeado para diferenciar do cosmético */
.bp-tier.pack .bp-reward-icon{ background:linear-gradient(160deg,#15302b,#0f211d); border-color:rgba(95,174,155,.5); }
.bp-tier.pack .bp-reward-name{ color:#a7e0cf; }
.bp-tier.pack.reached .bp-tier-card{ border-color:rgba(95,174,155,.45); }
.bp-reward-info{ flex:1; min-width:0; }
.bp-reward-name{ font-weight:700; color:var(--c-ink); font-size:13px; }
.bp-reward-sub{ font-size:11px; color:var(--c-muted); margin-top:1px; }
.bp-tier-action{ flex:0 0 auto; }
.bp-claim-btn{ font-size:12px; font-weight:700; padding:7px 14px; border-radius:8px; cursor:pointer; border:none;
  background:var(--c-gold); color:#10130f; animation:mbPulse 1.6s ease-in-out infinite; }
.bp-claim-btn:hover{ filter:brightness(1.1); }
.bp-claimed-tag{ font-size:11px; color:#5fae9b; font-weight:700; }
.bp-locked-tag{ font-size:11px; color:var(--c-muted); display:inline-flex; align-items:center; gap:4px; }
@media (max-width:560px){
  .bp-title{ font-size:26px; } .bp-hero-content{ padding:20px; }
  .bp-level-badge{ width:64px; height:64px; } .bp-level-badge span{ font-size:24px; }
}

/* ---- Botão premium do Conquest Pass (entre Missões e Loja) ---- */
.cpass-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:9px; cursor:pointer; font-weight:800; font-size:13px;
  font-family:var(--font-display),"Space Grotesk",sans-serif; letter-spacing:.02em;
  color:#2a1e05; border:1px solid #f0d98a;
  background:linear-gradient(135deg,#f3d987 0%,#e0b34a 45%,#caa33f 100%);
  box-shadow:0 3px 12px rgba(200,162,74,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s, box-shadow .2s;
}
.cpass-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,162,74,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.cpass-btn.nav-active{ box-shadow:0 0 0 2px rgba(240,217,138,.6), 0 6px 20px rgba(200,162,74,.6); }
.cpass-star{ font-size:13px; color:#5a4410; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.cpass-label{ position:relative; z-index:1; }
/* brilho que varre o botão periodicamente */
.cpass-shine{
  position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg); animation:cpassShine 4.5s ease-in-out infinite;
}
@keyframes cpassShine{ 0%{ left:-60%; } 18%{ left:160%; } 100%{ left:160%; } }
@media (max-width:760px){
  .cpass-btn .cpass-label{ display:none; }   /* no mobile, só o ✦ para economizar espaço */
  .cpass-btn{ padding:7px 11px; }
}

/* aviso de recompensa pendente no botão "Como jogar" (tutorial pulado) */
#btnTutorial{ position:relative; }
.tut-reward-chip{
  display:inline-flex; align-items:center; gap:3px; margin-left:8px;
  font-size:11px; font-weight:800; color:#10130f;
  background:linear-gradient(135deg,#f0d98a,#c8a24a); border:1px solid #f0d98a;
  border-radius:999px; padding:2px 8px; vertical-align:middle;
  box-shadow:0 0 10px rgba(200,162,74,.5); animation:tutChipPulse 1.8s ease-in-out infinite;
}
@keyframes tutChipPulse{ 0%,100%{ box-shadow:0 0 8px rgba(200,162,74,.4);} 50%{ box-shadow:0 0 16px rgba(240,217,138,.8);} }

/* ============================================================
   PAINEL DE CONTROLE (ADMIN) — console de operações
   Identidade própria: war room / readout tático. Base escura,
   acento dourado, dados em monoespaçada, chips de status semânticos.
   ============================================================ */
#adminPanel{ position:fixed; inset:0; z-index:200; background:var(--c-bg);
  display:flex; flex-direction:column; color:var(--c-ink); }
.apx-top{ display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-bottom:1px solid var(--c-line); background:linear-gradient(180deg,rgba(212,175,82,.06),transparent); }
.apx-brand{ display:flex; flex-direction:column; }
.apx-brand .apx-eyebrow{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-gold); }
.apx-brand h2{ margin:0; font-family:var(--font-display),sans-serif; font-size:18px; letter-spacing:.02em; }
.apx-spacer{ flex:1; }
.apx-statestrip{ display:flex; gap:18px; align-items:center; font-size:12px; }
.apx-state{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.apx-state b{ font-family:var(--font-mono,ui-monospace,monospace); font-size:14px; color:var(--c-ink); }
.apx-state span{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); }
.apx-close{ background:var(--c-surface-2); border:1px solid var(--c-line); color:var(--c-muted);
  border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px; }
.apx-close:hover{ color:var(--c-ink); border-color:var(--c-gold); }
.apx-body{ flex:1; display:flex; min-height:0; }
.apx-nav{ flex:0 0 210px; border-right:1px solid var(--c-line); padding:14px 10px; display:flex; flex-direction:column; gap:4px;
  background:var(--c-bg-2); overflow-y:auto; }
.apx-navitem{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; cursor:pointer;
  font-size:13px; color:var(--c-muted); border:1px solid transparent; }
.apx-navitem:hover{ background:var(--c-surface); color:var(--c-ink); }
.apx-navitem.active{ background:linear-gradient(100deg,rgba(212,175,82,.16),rgba(212,175,82,.04));
  color:var(--c-gold); border-color:rgba(212,175,82,.4); font-weight:700; }
.apx-navitem .ic{ width:20px; text-align:center; font-size:15px; }
.apx-navgroup{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-muted);
  padding:14px 12px 4px; }
.apx-main{ flex:1; overflow-y:auto; padding:22px 26px; }
.apx-locked{ max-width:380px; margin:8vh auto 0; text-align:center; }
.apx-locked h3{ font-family:var(--font-display),sans-serif; font-size:20px; margin:0 0 6px; }
.apx-locked p{ color:var(--c-muted); font-size:13px; margin:0 0 16px; }
.apx-section-h{ display:flex; align-items:baseline; gap:12px; margin:0 0 18px; }
.apx-section-h h3{ font-family:var(--font-display),sans-serif; font-size:22px; margin:0; }
.apx-section-h .apx-sub{ font-size:12px; color:var(--c-muted); }
/* cards de KPI */
.apx-kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:22px; }
.apx-kpi{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:12px; padding:14px 16px; position:relative; overflow:hidden; }
.apx-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c-gold); opacity:.6; }
.apx-kpi.alert::before{ background:#e08b7a; }
.apx-kpi.good::before{ background:#5fae9b; }
.apx-kpi .k-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); margin-bottom:8px; }
.apx-kpi .k-value{ font-family:var(--font-mono,ui-monospace,monospace); font-size:26px; font-weight:700; color:var(--c-ink); line-height:1; }
.apx-kpi .k-value .k-unit{ font-size:14px; color:var(--c-muted); margin-left:4px; }
.apx-kpi .k-foot{ font-size:11px; color:var(--c-muted); margin-top:7px; }
.apx-kpi .k-foot .up{ color:#5fae9b; } .apx-kpi .k-foot .down{ color:#e08b7a; }
/* blocos de painel */
.apx-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:880px){ .apx-grid2{ grid-template-columns:1fr; } .apx-nav{ flex-basis:64px; } .apx-navitem span.lbl{ display:none; } }
.apx-block{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.apx-block h4{ margin:0 0 12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-gold); }
.apx-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--c-line); font-size:13px; }
.apx-row:first-of-type{ border-top:none; }
.apx-row .v{ font-family:var(--font-mono,ui-monospace,monospace); color:var(--c-ink); }
.apx-chip{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; }
.apx-chip.amber{ background:rgba(224,179,74,.16); color:#e0b34a; border:1px solid rgba(224,179,74,.4); }
.apx-chip.green{ background:rgba(95,174,155,.16); color:#7fd0bd; border:1px solid rgba(95,174,155,.4); }
.apx-chip.red{ background:rgba(224,139,122,.16); color:#e8a092; border:1px solid rgba(224,139,122,.4); }
.apx-chip.gray{ background:rgba(154,160,140,.14); color:var(--c-muted); border:1px solid var(--c-line); }
.apx-loading{ color:var(--c-muted); font-size:13px; padding:30px; text-align:center; }

/* ===== Abertura de pack LENDÁRIA: tremor de tela sincronizado com o som ===== */
@keyframes legendaryShake {
  0%,100% { transform: translate(0,0) }
  10% { transform: translate(-5px,3px) rotate(-.3deg) }
  20% { transform: translate(6px,-4px) rotate(.3deg) }
  30% { transform: translate(-7px,-2px) }
  40% { transform: translate(5px,5px) rotate(-.2deg) }
  50% { transform: translate(-4px,3px) }
  60% { transform: translate(5px,-3px) rotate(.2deg) }
  70% { transform: translate(-3px,2px) }
  80% { transform: translate(3px,-2px) }
  90% { transform: translate(-2px,1px) }
}
.legendary-shake { animation: legendaryShake .8s cubic-bezier(.36,.07,.19,.97) both; }
/* brilho de fundo pulsante no momento da revelação — cor por raridade (--glow) */
@keyframes legendaryGlow { 0%{opacity:0} 30%{opacity:.55} 100%{opacity:0} }
.legendary-glow-layer{ position:fixed; inset:0; z-index:60; pointer-events:none;
  background: radial-gradient(circle at 50% 45%, rgba(212,175,82,.55), rgba(212,175,82,.12) 40%, transparent 70%);
  animation: legendaryGlow 1.6s ease-out forwards; }
/* glow genérico por raridade: usa --glow (rgb) e --glowdur; intensidade via --glowmax */
@keyframes rarityGlowAnim { 0%{opacity:0} 28%{opacity:var(--glowmax,.5)} 100%{opacity:0} }
.rarity-glow-layer{ position:fixed; inset:0; z-index:60; pointer-events:none;
  background: radial-gradient(circle at 50% 45%, rgba(var(--glow),var(--glowmax,.5)), rgba(var(--glow),.12) 42%, transparent 72%);
  animation: rarityGlowAnim var(--glowdur,1.4s) ease-out forwards; }

/* ===== Toast / notificações deslizantes (canto superior direito) ===== */
#toastWrap{ position:fixed; top:16px; right:16px; z-index:9998; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:min(360px,90vw) }
.toast{ pointer-events:auto; background:linear-gradient(160deg,#1c2417,#12160e); border:1px solid var(--line,#2a3326);
  border-left:3px solid var(--c-gold,#d4af52); border-radius:10px; padding:12px 14px; color:var(--ink,#e8e2cf);
  font-size:13px; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform:translateX(120%); opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
.toast.show{ transform:translateX(0); opacity:1 }
.toast .toast-title{ font-family:var(--font-display),sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-gold,#d4af52); margin-bottom:3px; display:block }
.toast.sale{ border-left-color:#7fd089 }
.toast.sale .toast-title{ color:#9bd0a0 }
.toast.auction{ border-left-color:#d4af52; background:linear-gradient(160deg,#241d08,#15120a) }
.toast.auction .toast-title{ color:#e8c25e }
.toast.outbid{ border-left-color:#d88a4a; background:linear-gradient(160deg,#241408,#15100a) }
.toast.outbid .toast-title{ color:#e0a878 }
.toast.warn{ border-left-color:#e08b7a; background:linear-gradient(160deg,#241410,#15100c) }
.toast.warn .toast-title{ color:#f0a895 }