/* Seiva — estilo comum do site. Tema de jogo: mata escura, painéis de madeira
   e folha, botões dourados. Cores de raridade seguem o plano. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* 02/10: marca nova (Seiva Games): azul-noite e dourado no lugar da mata das plantas — dono: "fundo verde herdando da plantinha" */
  --fundo: #0b1124; --fundo2: #10182f; --painel: #16213d; --painel2: #1c2a4a; --borda: #2a3b63;
  --madeira: #2a3b63; --madeira-escura: #16213d;
  --tinta: #eef2fb; --mudo: #a3b1cc; --fraco: #6f7f9e;
  --ouro: #f4c542; --ouro-escuro: #b88714; --seiva: #c8e05a; --sol: #9b6bff; --perigo: #ff7a6b; --ok: #6fe08a;
  --r-silvestre: #9aa39a; --r-comum: #e9e6d6; --r-incomum: #6fd66f; --r-rara: #56aaff; --r-epica: #b977ff; --r-lendaria: #ffb526;
  --raio: 14px; --sombra: 0 6px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box }
/* 25/09 (dono): nenhuma barra de rolagem no site; rola com a roda do mouse, o touchpad ou o dedo */
html { background: #070b18 }
* { scrollbar-width: none !important }
::-webkit-scrollbar { display: none; width: 0; height: 0 }
/* `hidden` tem que vencer qualquer display: (.modal-fundo usa grid e o atributo
   perdia — as duas janelas da fase apareciam juntas). */
[hidden] { display: none !important }
html, body { margin: 0; min-height: 100% }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1d2b52 0%, transparent 70%), linear-gradient(#0e1530, #0a1024 60%, #070b18);
  color: var(--tinta); font: 16px/1.5 Nunito, system-ui, sans-serif; min-height: 100vh;
}
a { color: var(--ouro); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3 { font-family: 'Baloo 2', Nunito, sans-serif; line-height: 1.1; margin: 0 0 .4em; letter-spacing: .01em }
h1 { font-size: clamp(30px, 4vw, 44px) } h2 { font-size: 26px } h3 { font-size: 20px }
img { max-width: 100% }

/* ---------------------------------------------------------------- casca do site (24/09)
   Layout pedido pelo dono, no formato do nmt.gg e nas cores do Seiva: barra no
   topo, menu à esquerda (tudo que o jogador precisa), jogo no centro e chat ao
   vivo à direita. As duas colunas minimizam e o estado fica salvo por conta
   (localStorage). No celular viram gavetas que abrem por cima. */
:root { --topo-h: 60px; --esq: 232px; --dir: 320px }
html.casca-esq-min { --esq: 68px }
html.casca-dir-min { --dir: 48px }
html.com-casca body { padding: var(--topo-h) var(--dir) 0 var(--esq) }
/* 02/10 (dono: "o layout do painel da planta deve ser desativado"): com só a sinuca no ar, as colunas e a faixa ao vivo das
   plantas somem; a carteira e o token ficam só com o topo */
html.so-sinuca .lado-esq, html.so-sinuca .lado-dir, html.so-sinuca #ao-vivo, html.so-sinuca .gaveta-fundo { display: none !important }
html.so-sinuca.com-casca body { padding: var(--topo-h) 0 0 0 }
/* animação só depois de montada: no carregamento nada desliza (dono, 24/09) */
html.casca-pronta body { transition: padding .18s ease }
html.casca-pronta .lado-esq, html.casca-pronta .lado-dir { transition: width .18s ease }
html.com-casca main { max-width: min(1180px, 100%) }

.topo {
  position: fixed; inset: 0 0 auto 0; height: var(--topo-h); z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; background: linear-gradient(#141e38, #0c1428); border-bottom: 3px solid #24345a; box-shadow: 0 4px 12px rgba(0,0,0,.45)
}
.topo .marca { display: flex; align-items: center; gap: 8px; font: 800 25px 'Baloo 2', sans-serif; color: var(--ouro); text-shadow: 0 2px 0 #5a3a08; white-space: nowrap }
.topo .marca:hover { text-decoration: none }
.topo .marca img { width: 36px; height: 36px }
.topo .gaveta { display: none }
.topo .online { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); font-weight: 800; font-size: 14px; color: var(--mudo); white-space: nowrap }
.topo .online b { color: var(--ok); font-variant-numeric: tabular-nums }
.topo .online i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok) }
.topo .selo.teste { white-space: nowrap }
.topo .vao { flex: 1 }
.topo .bolsa { display: flex; gap: 8px; align-items: center }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); font-weight: 800; font-variant-numeric: tabular-nums }
.pilula img { width: 24px; height: 24px }
.pilula.sol { color: #d6c4ff } .pilula.seiva { color: var(--seiva) }
.pilula.carteira { color: #3a2400; background: linear-gradient(#ffe07a, var(--ouro)); border: 0; padding: 6px 14px; box-shadow: 0 3px 0 var(--ouro-escuro) }
.pilula.carteira:hover { text-decoration: none; filter: brightness(1.06) }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 17px 'Baloo 2', sans-serif; color: #fff; background: var(--av, #5a8a3a); border: 2px solid rgba(255,255,255,.25); flex: none; text-transform: uppercase }
.perfil { position: relative }
.perfil > button { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--mudo) }
.perfil .menu-perfil { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #1a2e20; border: 2px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 8px; display: none }
.perfil.aberto .menu-perfil { display: block }
.menu-perfil .quem { padding: 6px 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 6px }
.menu-perfil .quem b { display: block; font: 800 17px 'Baloo 2', sans-serif }
.menu-perfil a, .menu-perfil button { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; color: var(--tinta); font: 700 14px Nunito, sans-serif; background: none; border: 0; cursor: pointer }
.menu-perfil a:hover, .menu-perfil button:hover { background: rgba(255,255,255,.07); text-decoration: none }

/* ícones em traço (SVG inline) */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* ---- menu da esquerda */
.lado-esq {
  position: fixed; top: var(--topo-h); bottom: 0; left: 0; width: var(--esq); z-index: 25; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px; background: linear-gradient(#10251a, #0b1a12); border-right: 2px solid #1f3d2a; overflow-y: auto; overflow-x: hidden
}
.lado-esq .destaque { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: #3a2400; font: 800 15px 'Baloo 2', sans-serif; background: linear-gradient(#ffe07a, var(--ouro)); box-shadow: 0 3px 0 var(--ouro-escuro); white-space: nowrap }
.lado-esq .destaque:hover { text-decoration: none; filter: brightness(1.06) }
.lado-esq .destaque img { width: 26px; height: 26px; flex: none }
.lado-esq .destaque .bolinha { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; background: #3a2400; color: var(--ouro); display: grid; place-items: center; font-size: 12px; padding: 0 6px }
.lado-esq .resumo { border-radius: 12px; padding: 10px 12px; background: rgba(0,0,0,.25); border: 1px solid #1f3d2a; white-space: nowrap }
.lado-esq .resumo span { display: block; font-size: 11px; color: var(--fraco); font-weight: 800; text-transform: uppercase; letter-spacing: .06em }
.lado-esq .resumo b { font: 800 20px 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums }
.lado-esq .resumo small { color: var(--mudo); font-weight: 700 }
.lado-esq .grupo { flex: none; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid #1f3d2a; padding: 4px }
.lado-esq .grupo.atual { border-color: #2a5238 }
.lado-esq .grupo-cab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--tinta); font: 800 16px 'Baloo 2', sans-serif; white-space: nowrap; text-align: left }
.lado-esq .grupo-cab:hover { background: rgba(255,255,255,.04) }
.lado-esq .grupo-cab .ico { width: 20px; height: 20px }
.lado-esq .grupo-cab .seta { margin-left: auto; display: flex; color: var(--fraco); transition: transform .15s }
.lado-esq .grupo-cab .seta .ico { width: 16px; height: 16px }
.lado-esq .grupo.fechado .grupo-cab .seta { transform: rotate(-90deg) }
.lado-esq .grupo nav { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 2px }
.lado-esq .grupo.fechado nav { display: none }
.lado-esq .grupo a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c9dcc9; font-weight: 700; font-size: 15.5px; white-space: nowrap; border: 1px solid transparent }
.lado-esq .grupo a .ico { width: 20px; height: 20px; opacity: .85 }
.lado-esq .grupo a:hover { background: rgba(255,255,255,.05); color: var(--tinta); text-decoration: none }
.lado-esq .grupo a.ativo { color: var(--ouro); font-weight: 800; background: linear-gradient(90deg, rgba(244,197,66,.16), rgba(244,197,66,.05)); border-color: rgba(244,197,66,.45) }
.lado-esq .grupo a.ativo .ico { opacity: 1 }
.lado-esq .grupo a .ponto { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4e; box-shadow: 0 0 0 3px rgba(255,90,78,.18) }
.lado-esq .grupo a .novo-v { margin-left: auto; font-style: normal; font: 800 10px Nunito, sans-serif; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: #2fbf6a; color: #062b14 }
.lado-esq .grupo a em { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--mudo) }
.lado-esq .grupo a em.novo { background: var(--perigo); color: #fff }
.lado-esq .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 6px }
.lado-esq .recolher, .lado-dir .recolher {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px; border-radius: 10px; cursor: pointer;
  background: rgba(0,0,0,.25); border: 1px solid #1f3d2a; color: var(--mudo); font: 800 13px Nunito, sans-serif
}
.lado-esq .recolher:hover, .lado-dir .recolher:hover { color: var(--tinta); border-color: var(--borda) }
/* recolhido: só os ícones */
html.casca-esq-min .lado-esq { padding: 12px 8px }
html.casca-esq-min .lado-esq .txt, html.casca-esq-min .lado-esq .grupo-cab, html.casca-esq-min .lado-esq .resumo,
html.casca-esq-min .lado-esq .grupo a em, html.casca-esq-min .lado-esq .grupo a .novo-v, html.casca-esq-min .lado-esq .destaque .bolinha { display: none }
html.casca-esq-min .lado-esq .grupo a, html.casca-esq-min .lado-esq .destaque { justify-content: center; padding: 10px 0; position: relative }
html.casca-esq-min .lado-esq .grupo a .ponto { position: absolute; top: 6px; right: 8px; margin: 0 }
html.casca-esq-min .lado-esq .grupo { padding: 3px }
html.casca-esq-min .lado-esq .grupo.fechado nav { display: flex }
html.casca-esq-min .lado-esq .recolher .ico { transform: scaleX(-1) }

/* ---- chat da direita */
.lado-dir {
  position: fixed; top: var(--topo-h); bottom: 0; right: 0; width: var(--dir); z-index: 25; display: flex; flex-direction: column;
  background: linear-gradient(#10251a, #0b1a12); border-left: 2px solid #1f3d2a
}
.lado-dir .cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px }
.lado-dir .cab h3 { margin: 0; font-size: 18px; flex: 1; display: flex; align-items: center; gap: 8px }
.lado-dir .cab .recolher { width: 34px; height: 34px; padding: 0; flex: none }
.lado-dir .salas { position: relative; padding: 0 10px 8px }
.lado-dir .salas > button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid #1f3d2a; color: var(--tinta); font: 800 15px Nunito, sans-serif; cursor: pointer }
.lado-dir .salas > button:hover { border-color: var(--borda) }
.lado-dir .salas > button .n { margin-left: auto; color: var(--ok); font-size: 13px; display: flex; align-items: center; gap: 5px }
.lado-dir .salas > button .n::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }
.lado-dir .lista-salas { position: absolute; left: 10px; right: 10px; top: 100%; z-index: 5; background: #14291c; border: 2px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; max-height: 360px; overflow-y: auto; display: none }
.lado-dir .salas.aberto .lista-salas { display: block }
.lista-salas button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; background: none; border: 0; color: var(--tinta); font: 700 14px Nunito, sans-serif; cursor: pointer; text-align: left }
.lista-salas button:hover, .lista-salas button.ativa { background: rgba(255,255,255,.07) }
.lista-salas button .n { margin-left: auto; color: var(--mudo); font-size: 12px }
.bandeira { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4) }
.bandeira.globo { display: grid; place-items: center; background: #1f5a8a; color: #cfe8ff }
.bandeira.globo .ico { width: 13px; height: 13px; stroke-width: 2.4 }
.lado-dir .msgs { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin }
.msg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start }   /* 28/09: sem a bolinha do perfil, só o nome (como o nmt) */
.msg .avatar { width: 30px; height: 30px; font-size: 14px; border-width: 1px }
.msg .corpo { min-width: 0; background: rgba(0,0,0,.22); border-radius: 4px 12px 12px 12px; padding: 5px 10px 6px; border: 1px solid rgba(255,255,255,.04) }
.msg .quem { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.3 }
.msg .quem b { color: var(--seiva); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.msg .quem .onda { font-size: 11px; color: var(--mudo); font-weight: 700; white-space: nowrap }
.msg .quem time { margin-left: auto; font-size: 11px; color: var(--fraco); white-space: nowrap }
.msg .txt { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; color: var(--tinta) }
.msg .txt .mencao { color: var(--ouro); font-weight: 800 }
.msg.minha .corpo { background: rgba(244,197,66,.09); border-color: rgba(244,197,66,.2) }
.msg.adm .quem b { color: var(--perigo) }
.msg.sistema { display: block; text-align: center; font-size: 12px; color: var(--fraco); font-weight: 700 }
.lado-dir .escrever { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #1f3d2a }
.lado-dir .escrever input { padding: 9px 12px; font-size: 14px; border-radius: 10px }
.lado-dir .escrever button { flex: none; width: 42px; border-radius: 10px; border: 0; cursor: pointer; background: linear-gradient(#ffe07a, var(--ouro)); color: #3a2400; display: grid; place-items: center; box-shadow: 0 3px 0 var(--ouro-escuro) }
.lado-dir .escrever button:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed }
.lado-dir .conexao { font-size: 12px; color: var(--fraco); text-align: center; padding: 0 10px 6px; min-height: 0 }
/* recolhido: faixa fina com o balão e as não lidas */
.lado-dir .faixa-min { display: none }
html.casca-dir-min .lado-dir > :not(.faixa-min) { display: none }
html.casca-dir-min .lado-dir .faixa-min { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; width: 100%; background: none; border: 0; color: var(--mudo); cursor: pointer; height: 100% }
.faixa-min:hover { color: var(--tinta) }
.faixa-min .nao-lidas { min-width: 20px; height: 20px; border-radius: 10px; background: var(--perigo); color: #fff; font: 800 11px/20px Nunito, sans-serif; padding: 0 5px }
.faixa-min .vertical { writing-mode: vertical-rl; font: 800 13px Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase }

/* ---- celular / tela estreita: colunas viram gavetas por cima do jogo */
.veu { display: none }
@media (max-width: 1100px) {
  html.com-casca body { padding: var(--topo-h) 0 0 0 }
  .lado-esq { width: 260px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(0,0,0,.5) }
  .lado-dir { width: min(340px, 92vw); transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,.5) }
  html.casca-esq-min .lado-esq .txt, html.casca-esq-min .lado-esq .resumo, html.casca-esq-min .lado-esq .grupo a em, html.casca-esq-min .lado-esq .grupo a .novo-v { display: revert }
  html.casca-esq-min .lado-esq .grupo-cab { display: flex }
  html.casca-esq-min .lado-esq .grupo a { justify-content: flex-start; padding: 9px 10px }
  html.casca-dir-min .lado-dir > :not(.faixa-min) { display: revert }
  html.casca-dir-min .lado-dir .faixa-min, .lado-esq .recolher { display: none !important }
  html.gaveta-esq .lado-esq, html.gaveta-dir .lado-dir { transform: none }
  html.gaveta-esq .veu, html.gaveta-dir .veu { display: block; position: fixed; inset: var(--topo-h) 0 0 0; background: rgba(0,0,0,.55); z-index: 24 }
  .topo .gaveta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); color: var(--tinta); cursor: pointer; position: relative; flex: none }
  .topo .gaveta .nao-lidas { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--perigo); color: #fff; font: 800 10px/18px Nunito, sans-serif; padding: 0 4px }
  .lado-dir .cab .recolher { display: none }
}
@media (max-width: 700px) {
  :root { --topo-h: 56px }
  .topo { gap: 8px; padding: 0 10px }
  .topo .marca { font-size: 0; gap: 0 }
  .topo .marca img { width: 32px; height: 32px }
  .topo .online, .topo .selo.teste, .pilula.carteira { display: none }
  .pilula { padding: 3px 9px 3px 4px; font-size: 14px }
  .pilula img { width: 20px; height: 20px }
  .avatar { width: 34px; height: 34px }
  /* 25/09: com a pílula da Seiva trancada a bolsa empurrava o botão do chat para fora da tela */
  .topo .bolsa { min-width: 0; flex: 0 1 auto; overflow: hidden; gap: 5px }
}
@media (max-width: 480px) { .pilula { font-size: 13px; padding: 3px 8px 3px 3px } .pilula.sol img { display: none } .pilula.sol { padding-left: 8px } }
/* celular estreito: o saldo em dólar sai do topo (está na Carteira) para a Seiva não passar por baixo do avatar */
@media (max-width: 420px) { .pilula.sol { display: none } }
/* idioma no menu do perfil (25/09, dono: "não poluir o topo") */
.idioma-perfil { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08) }
.idioma-perfil > span { display: flex; align-items: center; gap: 6px; font: 700 14px Nunito, sans-serif; color: var(--mudo) } .idioma-perfil .ico { width: 16px; height: 16px }
.idioma-perfil .seg { display: flex; padding: 2px; border-radius: 999px; background: rgba(0,0,0,.35) }
.menu-perfil .idioma-perfil .seg button { width: auto; padding: 4px 10px; border-radius: 999px; font: 800 12px Nunito, sans-serif; color: var(--mudo) }
.menu-perfil .idioma-perfil .seg button.ativo { background: var(--madeira); color: var(--tinta) }

/* ---------------------------------------------------------------- miolo */
main { max-width: 1180px; margin: 0 auto; padding: 24px 18px 60px }
.painel { background: linear-gradient(var(--painel), var(--fundo2)); border: 2px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra) }
.painel.madeira { background: linear-gradient(#8a5630, #6b3f1f); border-color: #3b2210; }
.grade { display: grid; gap: 16px }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.mudo { color: var(--mudo) } .fraco { color: var(--fraco) } .ouro { color: var(--ouro) } .perigo { color: var(--perigo) } .okc { color: var(--ok) }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.entre { justify-content: space-between }
.num { font-variant-numeric: tabular-nums }
.pequeno { font-size: 13px }

/* ---------------------------------------------------------------- botões e campos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none;
  font: 800 16px 'Baloo 2', Nunito, sans-serif; letter-spacing: .02em; color: #3a2400; border: 0; border-radius: 12px;
  padding: 10px 18px; background: linear-gradient(#ffe07a, var(--ouro)); box-shadow: 0 4px 0 var(--ouro-escuro), 0 6px 14px rgba(0,0,0,.35);
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.btn:hover { filter: brightness(1.06); text-decoration: none }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ouro-escuro) }
.btn:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; transform: none }
.btn.verde { color: #0d2a12; background: linear-gradient(#9ff06a, #5cc23b); box-shadow: 0 4px 0 #2f7a1c, 0 6px 14px rgba(0,0,0,.35) }
.btn.roxo { color: #fff; background: linear-gradient(#b38cff, #7a4ae0); box-shadow: 0 4px 0 #4a2aa0, 0 6px 14px rgba(0,0,0,.35) }
.btn.cinza { color: var(--tinta); background: linear-gradient(#3d5c47, #2b4534); box-shadow: 0 4px 0 #1a2c20, 0 6px 14px rgba(0,0,0,.35) }
.btn.vermelho { color: #fff; background: linear-gradient(#ff8f7d, #d9483a); box-shadow: 0 4px 0 #8f2519, 0 6px 14px rgba(0,0,0,.35) }
.btn.mini { padding: 5px 10px; font-size: 14px; border-radius: 9px }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #fff; outline-offset: 2px }
label { display: block; font-weight: 700; margin: 10px 0 4px; color: var(--mudo); font-size: 14px }
input, select { width: 100%; font: inherit; color: var(--tinta); background: #0b1424; border: 2px solid var(--borda); border-radius: 10px; padding: 10px 12px }
input:focus, select:focus { border-color: var(--ouro); outline: none }

/* ---------------------------------------------------------------- cartas de planta */
.carta { position: relative; border-radius: 14px; padding: 10px; background: linear-gradient(#20402c, #142a1c); border: 3px solid var(--cor, #666); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.carta canvas { width: 100%; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 50% 70%, #3d7a3a, #1e4424); display: block }
.carta .nome { font: 800 17px 'Baloo 2', sans-serif; line-height: 1.1 }
.carta .raridade { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cor) }
.carta .etiqueta { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); border-radius: 8px; padding: 1px 7px; font-size: 12px; font-weight: 800; max-width: calc(100% - 76px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }   /* não entra embaixo do selo de IV (28/09) */
.carta.sel { outline: 4px solid var(--ouro); outline-offset: 2px }
.carta.clicavel { cursor: pointer }
.carta.clicavel:hover { transform: translateY(-2px) }
.r0 { --cor: var(--r-silvestre) } .r1 { --cor: var(--r-comum) } .r2 { --cor: var(--r-incomum) } .r3 { --cor: var(--r-rara) } .r4 { --cor: var(--r-epica) } .r5 { --cor: var(--r-lendaria) }
.r5 { box-shadow: 0 0 18px rgba(255,181,38,.5), var(--sombra) } .r4 { box-shadow: 0 0 14px rgba(185,119,255,.4), var(--sombra) }

/* ---------------------------------------------------------------- tabela */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07) }
.tabela th { color: var(--mudo); font-size: 12px; text-transform: uppercase; letter-spacing: .06em }
.tabela td.num, .tabela th.num { text-align: right }
.rolagem { overflow-x: auto }

/* ---------------------------------------------------------------- avisos */
#avisos { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, 90vw) }
.aviso { background: #10261a; border: 2px solid var(--borda); border-left: 6px solid var(--ok); border-radius: 12px; padding: 10px 14px; box-shadow: var(--sombra); font-weight: 700; animation: entra .25s ease-out }
.aviso.erro { border-left-color: var(--perigo) }
@keyframes entra { from { transform: translateY(12px); opacity: 0 } }
.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.08) }
.selo.teste { background: #3a2a6a; color: #d6c4ff }
.vazio { padding: 30px; text-align: center; color: var(--mudo); border: 2px dashed var(--borda); border-radius: var(--raio) }
.modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 40; display: grid; place-items: center; padding: 16px }
.modal { max-width: 520px; width: 100%; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* colheitas restantes (lei 3: planta se desgasta) */
.vida-planta { position: relative; height: 14px; border-radius: 7px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 4px }
.vida-planta i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5cbf4a, #a6e36b) }
.vida-planta span { position: relative; display: block; text-align: center; font: 800 10px/14px 'Nunito', sans-serif; color: #fff; text-shadow: 0 1px 1px #000 }
.carta.esgotada canvas { filter: grayscale(1) brightness(.6) }

}

/* status da planta na corrida do Jardim */
.status-planta { display: flex; gap: 8px; font: 800 13px 'Baloo 2', sans-serif; margin: 2px 0 }
.status-planta span:first-child { color: #ff8a8a } .status-planta span:last-child { color: #ffd27a }

/* carta com estrutura fixa: mesmo tamanho, botões sempre no mesmo lugar (24/09) */
.carta .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.carta .raridade { white-space: nowrap }
.carta .status-planta { min-height: 18px }
.carta .papel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; margin: 0 }
.carta .vida-planta.eterna { background: rgba(255,255,255,.08) }
.carta .vida-planta.eterna span { color: var(--mudo) }
.carta .acoes { margin-top: auto; padding-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 38px; align-items: end }
.carta .acoes .btn { width: 100%; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.carta .acoes .selo { grid-column: 1; text-align: center }

/* fundo da carta pela raridade (24/09, dono: "não quero só a borda, quero o fundo"):
   Comum cinza, Incomum verde, Rara azul, Épica roxa, Lendária amarela. Silvestre
   fica cor de terra, para não se confundir com a Comum. --f1/--f2 = fundo da carta,
   --c1/--c2 = o brilho atrás da planta. */
.r0 { --f1: #5a4a36; --f2: #2e2519; --c1: #8a7353; --c2: #3e3222 }
.r1 { --f1: #5b6168; --f2: #2d3136; --c1: #8d949c; --c2: #3b4046 }
.r2 { --f1: #2f7a3e; --f2: #173d20; --c1: #56b865; --c2: #1f5129 }
.r3 { --f1: #2764b0; --f2: #11305a; --c1: #5aa0f0; --c2: #173f75 }
.r4 { --f1: #7440b8; --f2: #3a1d66; --c1: #b07cf2; --c2: #4c2785 }
.r5 { --f1: #b8861c; --f2: #684608; --c1: #ffd35a; --c2: #8a5e0c }
.carta { background: linear-gradient(165deg, var(--f1, #20402c), var(--f2, #142a1c)); border-color: var(--c1, var(--borda)) }
.carta canvas, .muda canvas, .deck canvas { background: radial-gradient(circle at 50% 68%, var(--c1, #3d7a3a), var(--c2, #1e4424) 72%) }
.carta .raridade { color: #fff; opacity: .85 }
.muda { background: linear-gradient(165deg, var(--f1, #20402c), var(--f2, #142a1c)) }

/* status da carta (24/09): vida, dano, velocidade, alcance, defesa e elemento */
.status-carta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 2px 0 }
.status-carta span { display: flex; align-items: center; gap: 3px; justify-content: center; background: rgba(0,0,0,.28); border-radius: 7px; padding: 1px 2px; font: 800 12px/18px 'Baloo 2', sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums }
.status-carta i { font-style: normal; font-size: 11px }

/* ---------------------------------------------------------------- pool da temporada (coluna esquerda) */
.pool-temporada { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; color: var(--tinta); white-space: nowrap;
  background: radial-gradient(120% 140% at 0% 0%, rgba(244,197,66,.22), transparent 60%), rgba(0,0,0,.28); border: 1px solid rgba(244,197,66,.35) }
.pool-temporada:hover { text-decoration: none; border-color: var(--ouro) }
.pool-temporada .rot { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #e8c79a }
.pool-temporada .rot img { width: 20px; height: 20px }
.pool-temporada .p-sol { font: 800 22px 'Baloo 2', sans-serif; color: var(--ouro); font-variant-numeric: tabular-nums; line-height: 1.1 }
.pool-temporada .p-usd { color: var(--ok); font-weight: 800; font-size: 13px }
.pool-temporada .p-falta { color: var(--mudo); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums }
html.casca-esq-min .lado-esq .pool-temporada { align-items: center; padding: 8px 0 }
html.casca-esq-min .lado-esq .pool-temporada .txt { display: none }

/* ---------------------------------------------------------------- detalhes da carta */
.carta .info { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font: 800 13px/24px Georgia, serif; font-style: italic; padding: 0 }
.carta .info:hover { background: var(--ouro); color: #3a2400 }
.carta:not(.clicavel) canvas { cursor: zoom-in }
.det-carta { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 340px 1fr; border-radius: 18px;
  background: linear-gradient(165deg, var(--f1), var(--f2)); border: 3px solid var(--c1); box-shadow: 0 20px 60px rgba(0,0,0,.6) }
.det-carta .fechar { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2 }
.det-carta .fechar:hover { background: rgba(0,0,0,.8) }
.det-arte { padding: 18px; display: flex; flex-direction: column; gap: 10px }
.det-arte canvas { width: 100%; aspect-ratio: 1; border-radius: 14px; background: radial-gradient(circle at 50% 68%, var(--c1), var(--c2) 72%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12) }
.det-selos { display: flex; gap: 6px; flex-wrap: wrap }
.det-selos span { padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.35); font-weight: 800; font-size: 13px }
.det-selos .selo-r { background: var(--c1); color: #111 }
.det-info { padding: 20px 22px 20px 4px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,.18) }
.det-info h2 { margin: 0; font-size: 30px }
.det-papel { margin: 0; color: rgba(255,255,255,.85); font-size: 14px }
.det-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.det-status div, .det-bloco { background: rgba(0,0,0,.28); border-radius: 12px; padding: 8px 12px }
.det-status span, .det-bloco .rot { display: block; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75) }
.det-status b { display: block; font: 800 24px 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.15 }
.det-status small, .det-bloco small { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.35; display: block }
.det-bloco .casas { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin: 6px 0 }
.det-bloco .casas i { height: 16px; border-radius: 4px; background: rgba(0,0,0,.35) }
.det-bloco .casas i.eu { background: var(--ouro) }
.det-bloco .casas i.alc { background: #6fe08a }
.det-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px }
.det-lista span { display: block; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 700 }
.det-lista b { font-size: 14px }
.det-prox b { color: var(--ok) }
@media (max-width: 760px) { .det-carta { grid-template-columns: 1fr } .det-info { padding: 0 16px 16px } .det-arte canvas { max-width: 260px; margin: 0 auto } }

/* ---------------------------------------------------------------- bancada (24/09, dono: "um do lado do outro, como o nmt")
   Fusão e Contrato: suas cartas à esquerda (rolam sozinhas) e a mesa à direita com
   as vagas, o resultado e o botão, tudo numa tela só, sem descer a página. */
html.com-casca main.largo, main.largo { max-width: none; padding-top: 16px; padding-bottom: 16px }
.bancada { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32%, 390px); gap: 16px; height: calc(100vh - var(--topo-h) - 32px); min-height: 520px }
.bancada .inventario { display: flex; flex-direction: column; min-height: 0; padding: 14px }
.bancada .inventario .cab-inv { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px }
.bancada .inventario .cab-inv h1, .bancada .inventario .cab-inv h2 { margin: 0; font-size: 22px }
.bancada .inventario .cab-inv select { width: auto; padding: 6px 10px }
.bancada .grade-inv { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-content: start;   /* colunas dividem a largura toda (sem sobra à direita) */ padding: 4px 6px 4px 2px; scrollbar-width: thin }
.bancada .grade-inv .carta { font-size: 14px }
.bancada .grade-inv .carta .papel { display: none }
.bancada .grade-inv .carta.apagada { opacity: .3; filter: grayscale(.7) }
.bancada .grade-inv .carta.par { box-shadow: 0 0 0 3px var(--ok), var(--sombra) }
.bancada .mesa { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px }
.bancada .mesa h2 { margin: 0; font-size: 22px }
.bancada .mesa .rodape-mesa { margin-top: auto; display: flex; flex-direction: column; gap: 8px }
.bancada .mesa .rodape-mesa .btn { width: 100%; font-size: 18px; padding: 12px }
@media (max-width: 1000px) { .bancada { grid-template-columns: 1fr; height: auto } .bancada .grade-inv { max-height: 60vh } }

/* mostrador do token Seiva na coluna esquerda (24/09) */
.ticker-seiva { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid #1f3d2a; color: var(--tinta); white-space: nowrap }
.ticker-seiva:hover { text-decoration: none; border-color: var(--seiva) }
.ticker-seiva img { width: 28px; height: 28px; flex: none }
.ticker-seiva small { display: block; font-size: 11px; color: var(--mudo); font-weight: 800; text-transform: uppercase; letter-spacing: .05em }
.ticker-seiva b { font: 800 16px 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums }
.ticker-seiva, .pool-temporada, .lado-esq .resumo { flex: none }   /* não encolhem quando a coluna fica sem altura */
.ticker-seiva .txt { min-width: 0 }
.ticker-seiva em { font-style: normal; font-weight: 800; font-size: 11px; color: var(--mudo); margin-left: 4px; letter-spacing: 0 }
.ticker-seiva em.sobe { color: var(--ok) } .ticker-seiva em.desce { color: #ff8a7a }
html.casca-esq-min .lado-esq .ticker-seiva { justify-content: center; padding: 8px 0 }

/* Seiva: pílula única com balão de vendável/trancada (25/09) */
#p-seiva-pilula { position: relative; cursor: help }
.balao-seiva { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 300px; padding: 10px 12px; border-radius: 14px; background: #10261a; border: 1px solid #2a3b63; box-shadow: 0 12px 28px rgba(0,0,0,.55); color: var(--tinta); font-weight: 400; z-index: 60; flex-direction: column; gap: 8px; cursor: default }
.balao-seiva::before { content: ''; position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; background: #10261a; border-left: 1px solid #2a3b63; border-top: 1px solid #2a3b63; transform: rotate(45deg) }
#p-seiva-pilula:hover .balao-seiva, #p-seiva-pilula:focus-within .balao-seiva, #p-seiva-pilula.aberto .balao-seiva { display: flex }
.balao-seiva .linha-b { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start }
.balao-seiva .linha-b > span { display: flex; flex-direction: column; gap: 2px }
.balao-seiva b { color: var(--seiva); font-size: 14px } .balao-seiva .trancada b { color: #d8c79a }
.balao-seiva small { color: var(--mudo); font-size: 12px; line-height: 1.35 }
.balao-seiva b.v { font: 800 17px 'Baloo 2', sans-serif; white-space: nowrap }
@media (max-width: 480px) { .balao-seiva { position: fixed; top: 60px; right: 10px; left: 10px; width: auto } .balao-seiva::before { display: none } }

/* confirmação no estilo do site (25/09) */
.confirma { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(var(--painel), var(--fundo2)); border: 2px solid var(--ouro); border-radius: 18px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 14px; animation: entra .2s ease-out }
.confirma h2 { margin: 0; color: var(--ouro); font-size: 26px }
.cf-corpo { display: flex; flex-direction: column; gap: 10px; color: var(--tinta) }
.cf-corpo p { margin: 0; color: var(--mudo) }
.cf-corpo ul { margin: 0; padding-left: 20px; color: var(--mudo) } .cf-corpo li { margin: 3px 0 } .cf-corpo li b { color: var(--tinta) }
.cf-corpo .alerta { background: rgba(255,122,107,.12); border: 1px solid rgba(255,122,107,.4); color: #ffc2b8; border-radius: 10px; padding: 8px 12px; font-size: 14px }
.cf-botoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.cf-botoes .btn { min-width: 130px }

/* IV (qualidade) da planta: nota S/A/B/C/D (25/09) */
.carta .selo-iv { position: absolute; top: 8px; right: 38px; font: 800 11px/20px Nunito, sans-serif; padding: 0 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.2) }
.selo-iv.iv-S { background: linear-gradient(#ffe07a, #d99a12); color: #3a2400; border-color: #fff3c2 }
.selo-iv.iv-A { background: #7440b8 } .selo-iv.iv-B { background: #2764b0 } .selo-iv.iv-C { background: #2f7a3e } .selo-iv.iv-D { background: #5b6168 }

/* ---------------------------------------------------------------- ao vivo (25/09) */
.ao-vivo { position: sticky; top: var(--topo-h); z-index: 20; display: flex; align-items: center; gap: 10px; height: 58px; padding: 6px 14px; background: rgba(8,19,13,.92); backdrop-filter: blur(6px); border-bottom: 1px solid #1f3d2a; overflow: hidden }
.ao-vivo .rot { display: flex; align-items: center; gap: 7px; font: 800 12px Nunito, sans-serif; letter-spacing: .06em; color: #b6f59a; white-space: nowrap; text-decoration: none; flex: none }
.ao-vivo .rot i { width: 8px; height: 8px; border-radius: 50%; background: #5cbf4a; box-shadow: 0 0 0 0 rgba(92,191,74,.7); animation: pulsa-vivo 1.6s infinite }
@keyframes pulsa-vivo { 70% { box-shadow: 0 0 0 7px rgba(92,191,74,0) } 100% { box-shadow: 0 0 0 0 rgba(92,191,74,0) } }
.ao-vivo .fila { display: flex; gap: 8px; overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, #000 85%, transparent) }
.vivo-c { display: flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 2px 10px 2px 2px; border-radius: 10px; background: linear-gradient(135deg, var(--f1), var(--f2)); border: 1px solid var(--c1); color: #fff; text-decoration: none; min-width: 128px }
.vivo-c:hover { filter: brightness(1.15); text-decoration: none }
.vivo-c canvas { width: 40px; height: 40px; border-radius: 8px; background: radial-gradient(circle at 50% 68%, var(--c1), var(--c2) 72%) }
.vivo-c span { display: flex; flex-direction: column; line-height: 1.1 }
.vivo-c b { font: 800 13px 'Baloo 2', sans-serif } .vivo-c small { font-size: 11px; opacity: .8 }
.vivo-c.novo { animation: entra-vivo .5s cubic-bezier(.2,1.3,.4,1) }
.vivo-c.novo.r4, .vivo-c.novo.r5 { box-shadow: 0 0 14px var(--c1) }
@keyframes entra-vivo { from { transform: translateX(-40px) scale(.8); opacity: 0 } }
@media (max-width: 700px) { .ao-vivo { height: 50px; padding: 4px 10px } .ao-vivo .rot { font-size: 0; gap: 0 } .vivo-c { min-width: 0; height: 40px } .vivo-c canvas { width: 34px; height: 34px } }

/* modal do evento da cadeia (faixa AO VIVO e Explorador) */
.ev-modal .arte-ev { display: grid; place-items: center; padding: 14px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(92,191,74,.18), rgba(0,0,0,.25)); margin-bottom: 10px }
.ev-modal .arte-ev canvas { width: 150px; height: 150px; border-radius: 14px; background: radial-gradient(circle at 50% 68%, var(--c1), var(--c2) 72%) }
.ev-modal .arte-ev .land-img { width: 240px; aspect-ratio: 16 / 10; border-radius: 12px; background: url(sprites/quintal.jpg) center / cover }
.ev-modal .arte-ev .emoji { font-size: 64px }
.ev-modal table { width: 100%; border-collapse: collapse; font-size: 14px }
.ev-modal td { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.07); overflow-wrap: anywhere } .ev-modal td:last-child { text-align: right; font-weight: 800 }
.ev-modal .elo { font-size: 12px; color: var(--mudo); margin-top: 8px }
.ev-modal .hash-ev { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #b6f59a; cursor: pointer; overflow-wrap: anywhere }

/* modal da planta com a cadeia (25/09, como o do nmt) */
.det-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08) }
.det-mini div { background: rgba(0,0,0,.35); padding: 6px 10px } .det-mini span { display: block; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7) } .det-mini b { font: 800 17px 'Baloo 2', sans-serif }
.det-hash { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(0,0,0,.35) }
.det-hash span { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); flex: 1 }
.det-hash .copiar { border: 0; background: rgba(255,255,255,.1); color: #fff; border-radius: 6px; width: 26px; height: 24px; cursor: pointer }
.det-dono { font-size: 13px; color: rgba(255,255,255,.8) } .det-dono b { color: #fff }
.det-evento { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); background: rgba(0,0,0,.2); font-size: 13px }
.det-evento span { font-weight: 800 } .det-evento small { color: rgba(255,255,255,.7); font-size: 12px }
.hash-ev { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #b6f59a; cursor: pointer; overflow-wrap: anywhere }
.det-merc .linha { margin: 4px 0 }
.spark { width: 100%; height: 60px; margin: 6px 0 2px; display: block } .spark polyline { fill: none; stroke: #c8e05a; stroke-width: 2; vector-effect: non-scaling-stroke }
.prov { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06) }
.prov:first-of-type { border-top: 0 } .prov .i { font-size: 16px } .prov b { font-size: 13px; display: block } .prov small { display: block }
.det-arte .det-lista { gap: 6px 12px; background: rgba(0,0,0,.28); border-radius: 12px; padding: 8px 12px } .det-arte .det-lista b { font-size: 13px }

/* ofertas no modal da planta */
.ofertas-det { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px }
.of-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 } .of-linha b { font-size: 14px } .of-linha small { display: block }
.of-linha .btn + .btn { margin-left: 4px }
.of-form { display: flex; gap: 6px; margin-top: 4px } .of-form input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 14px }
.selo-of { font: 800 11px Nunito, sans-serif; padding: 1px 8px; border-radius: 999px; background: rgba(214,196,255,.15); color: #d6c4ff; border: 1px solid #7a66b8; white-space: nowrap }
.iv-linha { grid-column: 1 / -1 } .iv-linha small { display: block; color: rgba(255,255,255,.75); font-size: 12px } .iv-linha .sobe { color: #7be08a } .iv-linha .desce { color: #ff8a7a }

/* ---------------------------------------------------------------- filtros (25/09, como o nmt) */
.filtro-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px }
.filtro-busca { flex: 1 1 220px; min-width: 160px; padding: 8px 12px; font-size: 14px }
.filtro-abrir .n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--ouro); color: #2a1a04; font-size: 11px }
.filtro-abrir .n:empty { display: none }
.filtro-ordem { width: auto; padding: 7px 10px; font-size: 14px }
.filtro-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100% } .filtro-chips:empty { display: none }
.filtro-chip { border: 1px solid #4f9a44; background: rgba(79,154,68,.15); color: #b6f59a; border-radius: 999px; padding: 3px 10px; font: 800 12px Nunito, sans-serif; cursor: pointer }
.filtro-chip.limpar { border-color: #6b7c72; background: transparent; color: var(--mudo) }
.fm { width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 0; overflow: hidden }
.fm-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #1f3d2a } .fm-topo b { font: 800 19px 'Baloo 2', sans-serif }
.fm-topo button { border: 0; background: none; color: var(--mudo); font: 800 14px Nunito, sans-serif; cursor: pointer } .fm-reset { color: #b6f59a !important; margin-right: 10px }
.fm-x { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.35) !important; font-size: 20px !important; color: #fff !important }
.fm-corpo { overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px }
.fm-rot { display: block; font: 800 11px Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); margin-bottom: 6px }
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px }
.fm-chip { border: 1px solid #2a3b63; background: rgba(0,0,0,.25); color: var(--tinta); border-radius: 999px; padding: 5px 12px; font: 800 13px Nunito, sans-serif; cursor: pointer }
.fm-chip[aria-pressed="true"] { background: var(--madeira); border-color: var(--ouro); color: #fff }
.fm-chip.r1[aria-pressed="true"], .fm-chip.r2[aria-pressed="true"], .fm-chip.r3[aria-pressed="true"], .fm-chip.r4[aria-pressed="true"], .fm-chip.r5[aria-pressed="true"], .fm-chip.r0[aria-pressed="true"] { background: var(--f1); border-color: var(--c1) }
.fm-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px } @media (max-width: 600px) { .fm-grade { grid-template-columns: 1fr } }
.fm-bloco { position: relative } .fm-bloco.ativo .fm-rot { color: #b6f59a }
.fm-cab { display: flex; justify-content: space-between; align-items: baseline } .fm-val { font: 800 12px Nunito, sans-serif; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.35) }
.fm-duplo { position: relative; height: 24px; margin: 4px 6px }
.fm-duplo::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12) }
.fm-duplo i { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: #8fe07f }
.fm-duplo input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; border: 0; padding: 0; height: 24px }
.fm-duplo input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #56b865; cursor: pointer; position: relative; z-index: 2 }
.fm-duplo input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #56b865; cursor: pointer }
.fm-duplo input::-webkit-slider-runnable-track { background: none } .fm-duplo input::-moz-range-track { background: none }
.fm-nums { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: end }
.fm-nums label { margin: 0; font-size: 10px; color: var(--mudo); font-weight: 800; text-transform: uppercase }
.fm-nums input { width: 100%; padding: 5px 8px; font-size: 14px }
.fm-u { position: absolute; right: 0; bottom: -14px; font-size: 10px; color: var(--mudo) } .fm-u:empty { display: none }
.fm-ordem { display: flex; gap: 8px } .fm-ordem select { width: auto; padding: 6px 10px }
.fm-rodape { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid #1f3d2a; background: rgba(0,0,0,.2) } .fm-rodape b { font: 800 20px 'Baloo 2', sans-serif }
.fm-chip.r0, .fm-chip.r1, .fm-chip.r2, .fm-chip.r3, .fm-chip.r4, .fm-chip.r5 { box-shadow: none; animation: none; filter: none }

/* ---------------------------------------------------------------- carteira em gaveta (25/09, como a do nmt) */
.cart-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0); pointer-events: none; transition: background .2s }
.cart-fundo.aberta { background: rgba(0,0,0,.55); pointer-events: auto }
.cart-gaveta { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(400px, calc(100vw - 16px)); border-radius: 18px; background: linear-gradient(180deg, #14301f, #0c1d13); border: 1px solid #2a3b63; box-shadow: -12px 0 40px rgba(0,0,0,.5); transform: translateX(110%); transition: transform .25s cubic-bezier(.2,.9,.3,1); overflow: hidden; display: flex }
.cart-fundo.aberta .cart-gaveta { transform: none }
.cart-miolo { flex: 1; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; overscroll-behavior: contain }
.cart-miolo::-webkit-scrollbar { display: none }
/* dono 25/09: com a carteira aberta, nenhuma barra de rolagem (a página para de rolar; a gaveta rola sem barra) */
html.cart-aberta { overflow: hidden }
.cart-topo { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; text-align: center } .cart-topo b { font: 800 19px 'Baloo 2', sans-serif }
.cart-topo button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 20px; cursor: pointer }
.cart-aviso { font-size: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(244,197,66,.12); border: 1px dashed #d9a92a; color: #ffe07a } .cart-aviso.perigo { background: rgba(184,69,58,.18); border-color: #b8453a; color: #ff9a8a }
.cart-total { text-align: center } .cart-total small { color: var(--mudo); font-size: 12px } .cart-total b { display: block; font: 800 38px 'Baloo 2', sans-serif; line-height: 1.1 }
.cart-barra { height: 6px; border-radius: 3px; background: #d6c4ff; overflow: hidden } .cart-barra i { display: block; height: 100%; background: var(--seiva) }
.cart-leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--mudo) } .cart-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px } .cart-leg .s { background: var(--seiva) } .cart-leg .u { background: #d6c4ff }
.cart-botoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.cart-botoes button, .cart-botoes a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 12px; border: 1px solid #2a3b63; background: rgba(0,0,0,.25); color: var(--tinta); font: 800 12px Nunito, sans-serif; cursor: pointer; text-decoration: none }
.cart-botoes span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); font-size: 18px }
.cart-saldo { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25) }
.cart-saldo img { width: 32px } .cart-saldo b { display: block } .cart-saldo small { color: var(--mudo); font-size: 12px } .cart-saldo .d { text-align: right }
.cart-hist-cab { display: flex; justify-content: space-between; align-items: baseline } .cart-hist-cab b { font: 800 17px 'Baloo 2', sans-serif }
.cart-hist { display: flex; flex-direction: column; gap: 4px }
.cart-ev { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 0; border-radius: 10px; background: rgba(0,0,0,.2); color: var(--tinta); text-align: left; cursor: pointer }
.cart-ev b { display: block; font-size: 13px } .cart-ev small { color: var(--mudo); font-size: 11px } .cart-ev .v { font-weight: 800; font-size: 13px }
.cart-redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.cart-rede { text-align: left; padding: 10px; border-radius: 12px; border: 1px solid #2a3b63; background: rgba(0,0,0,.25); color: var(--tinta); cursor: pointer } .cart-rede b { display: block } .cart-rede small { color: var(--mudo); font-size: 11px }
.cart-rede.sel { border-color: var(--ouro); background: rgba(217,169,42,.15) } .cart-rede[disabled] { opacity: .45; cursor: not-allowed }
.cart-dep { display: flex; flex-direction: column; gap: 10px }
.cart-end { padding: 10px; border-radius: 12px; background: rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px } .cart-end small { color: var(--mudo); font-size: 12px } .cart-end code { overflow-wrap: anywhere; font-size: 13px; color: #b6f59a }
.cart-auto { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid #7a66b8; background: rgba(214,196,255,.08); cursor: pointer; margin: 0 }
.cart-auto input { width: 18px; height: 18px; margin-top: 2px } .cart-auto b { display: block } .cart-auto small { color: var(--mudo); font-size: 12px }
.cart-teste .linha { gap: 8px; margin-top: 4px } .cart-teste input { width: 110px }
.cart-lim { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 13px } .cart-lim span { color: var(--mudo) } .cart-lim b { text-align: right }
.cart-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.2) } .cart-sec > b { font: 800 16px 'Baloo 2', sans-serif } .cart-sec > small { color: var(--mudo); font-size: 12px }
.cart-sec label { margin: 0; font-size: 12px; color: var(--mudo); display: flex; flex-direction: column; gap: 4px } .cart-sec input, .cart-sec select { padding: 8px 10px; font-size: 14px }
.cart-endl { display: flex; justify-content: space-between; align-items: center; font-size: 13px } .cart-endl .ok { color: #7be08a; font-weight: 800 } .cart-endl .espera { color: #ffe07a; font-weight: 800 } .cart-endl .perigo { color: #ff8a7a; font-weight: 800 }
.cart-add { display: flex; flex-direction: column; gap: 6px }
/* abas Plantas | Monstros (Coleção, Fusão, Alimentar) */
.abas-pm { display: flex; gap: 6px; margin: 0 0 14px } .abas-pm button { font: 800 16px 'Baloo 2', sans-serif; padding: 8px 18px; border-radius: 12px; border: 0; cursor: pointer; background: rgba(0,0,0,.3); color: var(--mudo) }
.abas-pm button[aria-selected="true"] { background: var(--madeira); color: var(--tinta); box-shadow: inset 0 -3px 0 var(--ouro) }
.some-pm { display: none !important }
.painel-monstros h1 { margin-bottom: 8px } .barra-pm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 44px; margin-bottom: 12px } .barra-pm > span { flex: 1 1 240px } .barra-pm .btn { width: auto; flex: none }
.cartas-m { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 1fr } .carta-monstro { cursor: pointer }
.carta-monstro.escolhida { outline: 4px solid var(--ouro); outline-offset: 2px } .carta-monstro.come { outline: 4px solid #8fe68f; outline-offset: 2px } .carta-monstro.apagada { opacity: .35 }
.carta-monstro .acoes .btn { flex: 1 1 auto; width: 100%; white-space: nowrap; overflow: visible }
.pool-temporada .p-modos { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 2px; font: 700 12px Nunito, sans-serif; color: #d9e6cf }
.pool-temporada .p-modos span { display: flex; justify-content: space-between; gap: 8px } .pool-temporada .p-modos b { color: var(--ouro) }
/* ---- Janelas da conta: Configurações, Segurança e Perfil (26/09, como o nmt) */
.menu-perfil .perigo-m { color: #ff9a8a; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 8px 8px }
.cm-fundo { align-items: flex-start; padding: 5vh 12px }
.cm-painel { position: relative; width: min(520px, 100%); max-height: 90vh; display: flex; flex-direction: column; border-radius: 18px; background: linear-gradient(#1c3224, #102218); border: 1px solid #2e5a3c; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; animation: cm-entra .18s ease-out }
.cm-painel.cm-largo { width: min(1080px, 100%) }
@keyframes cm-entra { from { transform: translateY(10px); opacity: 0 } }
.cm-cab { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.07) }
.cm-cab h2 { margin: 0; font-size: 22px } .cm-cab p { margin: 0; color: var(--mudo); font-size: 13px }
.cm-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(244,197,66,.12); font-size: 20px; flex: none }
.cm-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: var(--tinta); font-size: 20px; cursor: pointer; flex: none } .cm-x:hover { background: rgba(0,0,0,.55) }
.cm-x-solto { position: absolute; top: 10px; right: 10px; z-index: 2 }
.cm-corpo { overflow-y: auto; padding: 6px 18px 18px; scrollbar-width: thin }
.cm-sec { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06) } .cm-sec:last-child { border-bottom: 0 }
.cm-sec h3 { margin: 0 0 4px; font-size: 17px } .cm-desc { margin: 0 0 10px; color: var(--mudo); font-size: 13px }
.cm-seg { display: flex; gap: 6px } .cm-seg button { flex: 1; padding: 10px; border-radius: 12px; border: 2px solid transparent; background: rgba(0,0,0,.3); color: var(--tinta); font: 800 14px Nunito, sans-serif; cursor: pointer } .cm-seg button.ativo { border-color: var(--ouro); background: rgba(244,197,66,.1) }
.cm-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; cursor: pointer } .cm-linha small { display: block; color: var(--mudo); font-size: 12px }
.cm-chave { appearance: none; width: 44px; height: 24px; border-radius: 12px; background: #3a4a40; position: relative; cursor: pointer; flex: none; transition: background .15s }
.cm-chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s } .cm-chave:checked { background: #5cbf4a } .cm-chave:checked::after { left: 23px }
.cm-links { display: flex; gap: 6px; flex-wrap: wrap } .cm-links .btn { width: auto; margin: 0 }
.cm-estado { padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.28); font-weight: 800; margin-bottom: 10px } .cm-estado.ok { background: rgba(80,200,110,.14); color: #9be8a9 }
.cm-2fa ol { margin: 10px 0; padding-left: 20px; font-size: 14px } .cm-qr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px }
.cm-qr [data-qr] { background: #fff; border-radius: 10px; padding: 6px; line-height: 0 } .cm-qr code { display: block; font-size: 14px; word-break: break-all; margin: 2px 0 6px; color: #ffe07a }
.cm-linha-in { display: flex; gap: 8px } .cm-linha-in input { flex: 1; font: 800 20px 'Baloo 2', monospace; letter-spacing: .3em; text-align: center } .cm-linha-in .btn { width: auto; margin: 0 }
.cm-sessoes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px }
.cm-sessao { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid transparent }
.cm-sessao.atual { border-color: rgba(244,197,66,.4) } .cm-sessao small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cm-sessao .btn { width: auto; margin: 0 } .cm-disp { font-size: 20px }
.cm-form { display: flex; flex-direction: column; gap: 8px } .cm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mudo); margin: 0 }
/* perfil */
.cm-perfil { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; padding: 0 }
@media (max-width: 800px) { .cm-perfil { grid-template-columns: minmax(0, 1fr) } }
.pf-lado { padding: 0 16px 16px; border-right: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 10px }
.pf-banner { height: 90px; margin: 0 -16px; background: radial-gradient(circle at 70% 30%, rgba(244,197,66,.35), transparent 60%), linear-gradient(135deg, #2d6a3e, #1a3a26 60%, #3a2a14) }
.pf-id { display: flex; gap: 10px; align-items: flex-end; margin-top: -34px } .pf-id small { color: var(--mudo); font-size: 12px }
.pf-av { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font: 800 30px 'Baloo 2', sans-serif; color: #10200f; background: var(--av, #8fc88f); border: 4px solid #1c3224; flex: none }
.pf-nome { display: block; font: 800 20px 'Baloo 2', sans-serif; line-height: 1.1 } .pf-on.sim { color: #7be08a; font-weight: 800 }
.pf-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px } .pf-nums div, .pf-rank { padding: 10px; border-radius: 12px; background: rgba(0,0,0,.25) }
.pf-nums small, .pf-rank small { display: block; color: var(--mudo); font: 800 11px Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase }
.pf-nums b, .pf-rank b { display: block; font: 800 17px 'Baloo 2', sans-serif } .pf-nums em, .pf-rank em { display: block; font-style: normal; font-size: 11px; color: var(--mudo) }
.pf-cartas { padding: 14px 16px; min-width: 0 } .pf-abas { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,.07); margin: 0 40px 8px 0; overflow-x: auto; scrollbar-width: none }
.pf-abas button { border: 0; background: none; color: var(--mudo); font: 800 15px 'Baloo 2', sans-serif; padding: 8px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap } .pf-abas button span { font: 800 11px Nunito, sans-serif; color: var(--mudo) }
.pf-abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--ouro) }
.pf-venda { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: 13px; color: var(--mudo); margin: 0 0 10px; cursor: pointer } .pf-venda input { width: 16px; height: 16px; margin: 0; flex: none }
.pf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px } .pf-grade .carta { font-size: 13px } .pf-grade .carta .papel { display: none }
.pf-land { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 14px; background: rgba(0,0,0,.25); text-align: center } .pf-land span { font-size: 34px } .pf-land small { color: var(--mudo) }
.link-perfil { cursor: pointer } .link-perfil:hover { color: var(--ouro); text-decoration: underline }
.cm-verif { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); margin-top: 8px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px }
.cm-verif.ok { border-color: rgba(110,220,140,.35); background: rgba(80,200,110,.08) }
.cm-verif-cab { display: flex; align-items: center; gap: 10px } .cm-verif-cab small { margin-left: auto; color: var(--mudo); font-size: 12px; overflow-wrap: anywhere; text-align: right }
.cm-verif.ok .cm-verif-cab small { color: #9be8a9 } .cm-v-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); font-weight: 800; flex: none } .cm-verif.ok .cm-v-num { background: #5cbf4a; color: #0b1a10 }
.cm-verif .cm-linha-in input { font: 700 15px Nunito, sans-serif; letter-spacing: normal; text-align: left } .cm-verif .cm-conf input { font: 800 18px 'Baloo 2', monospace; letter-spacing: .3em; text-align: center }
.cm-verif .btn.discord { width: auto; align-self: flex-start; background: #5865f2; color: #fff; margin: 0 } .cm-teste { color: #ffe07a }
/* ---- Faixa de topo com arte do Flow (27/09): arte ancorada à direita, degradê escuro vindo da esquerda para o título */
.faixa-hero { position: relative; border-radius: 18px; padding: 26px 28px; min-height: 190px; box-sizing: border-box; margin-bottom: 16px; border: 1px solid rgba(143,200,143,.15); box-shadow: var(--sombra);
  background: linear-gradient(90deg, #0a1a10 0%, rgba(10,26,16,.92) 28%, rgba(10,26,16,.5) 52%, rgba(10,26,16,0) 76%), var(--img) right var(--pos, center) / cover no-repeat }
.faixa-hero h1 { text-shadow: 0 3px 16px rgba(0,0,0,.6) } .faixa-hero .sub { margin: 0; max-width: 520px; color: #d7e8cf; font-weight: 700 }
.faixa-hero.so-titulo { display: flex; flex-direction: column; justify-content: center }
@media (max-width: 760px) { .faixa-hero { padding: 110px 16px 16px; background: linear-gradient(0deg, #0a1a10 12%, rgba(10,26,16,.6) 55%, rgba(10,26,16,.15)), var(--img) 72% center / cover no-repeat } }
/* ---- Mensagens privadas no painel do chat (27/09) */
.chat-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 10px 8px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.3) }
.chat-abas button { border: 0; background: none; color: var(--mudo); font: 800 13px Nunito, sans-serif; padding: 7px 6px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px }
.chat-abas button[aria-selected="true"] { background: var(--madeira); color: var(--tinta) }
.chat-abas .n-dm { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; line-height: 18px }
.lado-dir .dm { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 10px 10px }
.dm[hidden] { display: none !important }
.dm-nova { display: flex; gap: 6px; margin-bottom: 8px } .dm-nova input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px } .dm-nova .btn { width: auto; margin: 0 }
.dm-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin }
.dm-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; border: 0; background: rgba(0,0,0,.22); color: var(--tinta); cursor: pointer; text-align: left }
.dm-item:hover { background: rgba(0,0,0,.35) } .dm-item.nova { background: rgba(244,197,66,.08) }
.dm-item .avatar, .dm-cab .avatar { width: 32px; height: 32px; font-size: 14px }
.dm-meio { min-width: 0 } .dm-meio b { display: block; font-size: 14px } .dm-meio small { display: block; color: var(--mudo); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dm-meio em { font-style: normal; color: #9fb49a }
.dm-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 3px } .dm-dir time { font-size: 11px; color: var(--mudo) } .dm-dir i { font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; padding: 0 5px }
.dm-cab { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 8px } .dm-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.dm-volta { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.3); color: var(--tinta); cursor: pointer; font-size: 16px } .dm-cab .btn { width: auto; margin: 0 }
.dm-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; scrollbar-width: thin }
.dm-msg { max-width: 85%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px } .dm-msg.minha { align-self: flex-end; align-items: flex-end }
.dm-txt { padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.07); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere }
.dm-msg.minha .dm-txt { border-radius: 14px 14px 4px 14px; background: #2f6a3e } .dm-msg time { font-size: 10px; color: var(--mudo); padding: 0 4px }
.dm-vazio { color: var(--mudo); font-size: 13px; text-align: center; padding: 18px 8px }
.lado-dir .dm .escrever { margin: 8px 0 0; padding: 0 } .pf-msg { width: 100%; margin: 0 }

/* anúncio de carta no chat (27/09): hash colado vira um cartão da carta, na cor da raridade */
.hash-chat { font-family: ui-monospace, monospace; font-size: 12px; color: var(--mudo); background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 5px }
.anuncio { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 7px; padding: 6px 10px 6px 6px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--tinta);
  border: 1px solid var(--c1, rgba(255,255,255,.15)); background: linear-gradient(100deg, color-mix(in srgb, var(--f1, #1a2a20) 55%, transparent), rgba(0,0,0,.35) 70%); font: inherit; transition: transform .12s, box-shadow .12s }
.anuncio:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px var(--c1, transparent) }
.anuncio.carregando { height: 68px; border-color: rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.08), rgba(255,255,255,.03)); background-size: 200% 100%; animation: brilho-carga 1.2s linear infinite }
.anuncio canvas { width: 56px; height: 56px; flex: none; border-radius: 9px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c1, #888) 35%, transparent), rgba(0,0,0,.3) 70%) }
.anuncio .an-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2 }
.anuncio .an-info b { font: 800 15px 'Baloo 2', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.anuncio .an-rar { font-size: 11.5px; font-weight: 800; color: var(--cor, var(--mudo)) }
.anuncio .an-dono { font-size: 11.5px; color: var(--mudo) }
.anuncio .an-pe { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px }
.anuncio .an-pe em { flex: none; font: 800 13px 'Baloo 2', sans-serif; font-style: normal; color: #3a2400; background: var(--ouro); padding: 0 7px; border-radius: 999px; line-height: 1.5 }
.anuncio .an-dono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.anuncio .an-ver { flex: none; font: 800 22px 'Baloo 2', sans-serif; color: var(--c1, var(--ouro)); opacity: .8 }
.dm-msg .anuncio { max-width: 280px }
@keyframes brilho-carga { to { background-position: -200% 0 } }

/* Carregamento (27/09): a página nasce escondida (casca-cedo.js) e aparece inteira, com um fade curto, quando a
   casca e os dados da primeira tela chegaram (app.js revelar). O fundo do body continua pintado. */
html.carregando body > * { opacity: 0 !important; transition: none !important }
html.revelando body > * { transition: opacity .22s ease-out !important }
@media (prefers-reduced-motion: reduce) { html.revelando body > * { transition: none } }
canvas[data-monstro] { transition: opacity .25s } canvas[data-monstro]:not(.desenhado) { opacity: 0 }

/* navegação sem recarregar (spa.js): palco escondido onde a página nova monta; barra fina no topo se demorar */
#spa-palco[hidden] { display: none !important }
#spa-barra { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ouro), #ffe9a3); box-shadow: 0 0 10px rgba(244,197,66,.7) }
#spa-barra.indo { transition: transform 2.5s cubic-bezier(.1,.7,.2,1); transform: scaleX(.85) }
#spa-barra.fim { transition: transform .2s ease-out, opacity .25s .15s; transform: scaleX(1); opacity: 0 }
/* dicas vazias (27/09, dono: "remove esse bando de tutorialzinho"): o espaço some junto */
.dica-modo:empty, p.regras:empty, [data-dica]:empty, #dica:empty, #d-nota:empty { display: none }
/* ---- Informações por cima da arte da faixa (27/09, dono: "no market bota coisas informativas por cima da imagem, como
   na Invasão"): chips embaixo do título e um painel de números à direita. Mesmo desenho da Invasão, para todo o site. */
.faixa-hero.hero-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end }
.faixa-hero h1 { margin: 0 0 8px }
@media (max-width: 1000px) { .faixa-hero.hero-grade { grid-template-columns: minmax(0, 1fr) } }
.hero-chips { display: flex; gap: 6px; flex-wrap: wrap }
.hero-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(4px); font: 700 13px Nunito, sans-serif; color: #dfe9d8 }
.hero-chips b { color: var(--ouro) }
.hero-stats { display: grid; grid-auto-flow: column; gap: 0; padding: 0; overflow: hidden; background: rgba(12,26,18,.72); backdrop-filter: blur(8px) }
.hero-stats > div { padding: 10px 16px; border-right: 1px solid rgba(255,255,255,.06) } .hero-stats > div:last-child { border-right: 0 }
.hero-stats small { display: block; color: var(--mudo); font: 800 11px Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.hero-stats b { font: 800 22px 'Baloo 2', sans-serif; display: block; line-height: 1.15; white-space: nowrap }
.hero-stats b.ouro { color: var(--ouro) }
@media (max-width: 700px) { .hero-stats { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)) } .hero-stats > div { padding: 8px 10px } .hero-stats b { font-size: 18px } }
/* ---- Bancada no celular (27/09, dono: "no celular a roleta tem que ser lateral, não um embaixo do outro, tipo o deck
   no jogo Jardim, e em cima os slots"): a mesa (slots, roleta, botão) sobe para o topo como uma faixa compacta e os
   slots correm para o lado; o inventário vem embaixo, rolando com a página. Vale para Fusão, Contrato e Alimentar
   (plantas e monstros). */
@media (max-width: 1000px) {
  .bancada { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 12px }
  .bancada .mesa { order: -1; padding: 10px; gap: 8px }
  .bancada .mesa h2 { font-size: 17px }
  .bancada .grade-inv { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
  .bancada .mesa .rodape-mesa { margin-top: 0; flex-direction: row; align-items: center; flex-wrap: wrap }
  .bancada .mesa .rodape-mesa > p, .bancada .mesa .rodape-mesa > div { flex: 1 1 140px }
  .bancada .mesa .rodape-mesa .btn { width: auto; flex: 0 0 auto; padding: 10px 18px; font-size: 16px }
  /* Contrato: a roleta vira uma fila de cartinhas que desliza para o lado */
  .bancada .mesa .elevador { flex: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 8px; scroll-snap-type: x proximity }
  .bancada .mesa .elevador .andar { flex: 0 0 86px; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 3px; padding: 6px 4px; position: relative; scroll-snap-align: start }
  .bancada .mesa .elevador .andar canvas { width: 60px; height: 60px }
  .bancada .mesa .elevador .andar b { font-size: 12px; max-width: 78px }
  .bancada .mesa .elevador .andar small { display: none }
  .bancada .mesa .elevador .andar .n { position: absolute; top: 3px; left: 5px; font-size: 11px }
  .bancada .mesa .elevador .andar button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; font-size: 13px }
  .bancada .mesa .elevador .andar.vazio { grid-template-columns: 1fr; min-height: 112px; align-content: center; font-size: 11px }
  /* Fusão: 1ª + 2ª = resultado numa linha só */
  .bancada .mesa:has(.dupla) { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px }
  .bancada .mesa:has(.dupla) > h2, .bancada .mesa:has(.dupla) > .rodape-mesa, .bancada .mesa:has(.dupla) > .linha { grid-column: 1 / -1 }
  .bancada .mesa .dupla { grid-template-columns: 1fr 18px 1fr; gap: 4px }
  .bancada .mesa .dupla .sinal, .bancada .mesa .igual { font-size: 20px }
  .bancada .mesa .resultado { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; padding: 6px; gap: 4px }
  .bancada .mesa .resultado canvas { width: 64px; height: 64px }
  .bancada .mesa .resultado b { font-size: 14px }
  .bancada .mesa .resultado .linha-st { font-size: 11px; line-height: 1.35 }
  /* Alimentar: quem come compacto e a comida numa fila lateral */
  .bancada .mesa .quem { grid-template-columns: 64px 1fr; min-height: 0; padding: 8px; gap: 10px }
  .bancada .mesa .quem canvas { width: 64px; height: 64px }
  .bancada .mesa .quem b { font-size: 15px }
  .bancada .mesa .comidas { flex: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: 118px; min-height: 64px }
  .bancada .mesa .comidas > * { flex: 0 0 auto }
}
@media (max-width: 1000px) { .bancada .mesa .quem:not(.cheia) { display: flex; align-items: center; justify-content: center; min-height: 56px; text-align: center } }
/* idioma no topo (27/09): EN | PT, só no computador; no celular a troca fica no menu do perfil */
/* ---- Análise da land (27/09): gráficos de barras de uma cor, tabela das plantas com quanto aguentam */
.an-kpis { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 6px 0 4px }
@media (max-width: 800px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.an-barras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: end; height: 130px; margin-top: 10px }
.an-b { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: default }
.an-b i { display: block; width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: #4c9a5a; transition: background .15s }
.an-b:hover i { background: #7fd08b } .an-b.hoje i { background: var(--ouro) }
.an-b span { font: 700 10px Nunito, sans-serif; color: var(--mudo); white-space: nowrap }
.an-eixo { text-align: right; font: 700 11px Nunito, sans-serif; color: var(--mudo); margin-top: -18px }
@media (max-width: 700px) { .an-kpis small { white-space: normal; line-height: 1.2 } .an-barras[style*='--n:14'] .an-b:nth-child(even) span { visibility: hidden } .an-barras[style*='--n:24'] .an-b:not(:nth-child(3n)) span { visibility: hidden } }
.an-sim { margin: 4px 0 10px; font-size: 15px } .an-sim b { color: var(--ouro) }
.an-chips { margin-bottom: 12px }
.an-tab { width: 100%; border-collapse: separate; border-spacing: 0 6px }
.an-tab th { text-align: left; font: 800 11px Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); padding: 0 8px }
.an-tab td { padding: 6px 8px; background: rgba(0,0,0,.22); vertical-align: middle } .an-tab td:first-child { border-radius: 10px 0 0 10px; width: 64px } .an-tab td:last-child { border-radius: 0 10px 10px 0 }
.an-tab canvas { width: 48px; height: 48px; border-radius: 8px; background: radial-gradient(circle at 50% 68%, var(--c1), var(--c2) 72%); display: block }
.an-tab td b { display: block; font: 800 15px 'Baloo 2', sans-serif } .an-tab td small { color: var(--mudo); font-weight: 700 }
.an-vida { width: 42% } .an-trilho { height: 8px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; margin-bottom: 4px } .an-trilho i { display: block; height: 100%; background: linear-gradient(90deg, #d9534f, var(--ouro) 60%, #6fd66f) }
@media (max-width: 700px) { .an-tab .an-trab { display: none } .an-vida { width: auto } }
.an-recs { display: flex; gap: 8px; flex-wrap: wrap } .an-recs span { display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,.25); font: 700 12px Nunito, sans-serif; color: var(--mudo) }
.an-recs span b { font: 800 20px 'Baloo 2', sans-serif; color: var(--tinta) } .an-recs span.atual { box-shadow: inset 0 0 0 1px var(--ouro) }

/* rollover na tela de saque (27/09, "como no nmt: uma barrinha e as regras") */
.cart-roll-cab b { display: block } .cart-roll-cab span { display: block; margin-top: 2px; font: 800 15px "Baloo 2", sans-serif; color: var(--tinta); white-space: nowrap }
.cart-roll-barra { height: 10px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; margin: 8px 0 6px }
.cart-roll-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d8961c, var(--ouro)) } .cart-roll-barra.ok i { background: linear-gradient(90deg, #3f9d4d, #6fd66f) }
.cart-roll-alerta { display: block; color: var(--perigo); font-weight: 800; margin-top: 4px }
.cart-roll-regras { margin: 8px 0 0; padding-left: 18px; color: var(--mudo); font-size: 12px; line-height: 1.5 }
/* ---- Celular (27/09, dono: "no PC está perfeito; no celular informação sai da carta ou fica uma sobre a outra").
   Faixa de topo mais baixa em todas as páginas; a carta COMPACTA (2 por linha) vale onde a grade tem a classe
   .compacta — cada página entra quando for revisada no celular (a Coleção foi a primeira). */
@media (max-width: 760px) {
  .faixa-hero { padding: 64px 14px 12px; min-height: 0; margin-bottom: 12px }
  .faixa-hero h1 { font-size: 30px; margin: 0 0 6px }
  .faixa-hero .hero-chips { gap: 5px } .faixa-hero .hero-chips span { font-size: 12px; padding: 3px 9px }
}
@media (max-width: 560px) {
  .filtro-barra { gap: 6px; margin: 0 0 8px } .filtro-busca { flex: 1 1 120px; min-width: 0; padding: 8px 10px }
  .filtro-ordem { max-width: 118px; padding: 7px 6px; font-size: 13px }
  .cartas.compacta, .cartas-m.compacta { gap: 8px }
  .compacta .carta { padding: 6px; border-width: 2px; border-radius: 12px; gap: 3px }
  .compacta .carta .nome { font-size: 14px }
  .compacta .carta .raridade { font-size: 9.5px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis }
  .compacta .carta .papel { display: none }
  .compacta .status-carta { gap: 2px }
  .compacta .status-carta span { font-size: 10.5px; line-height: 16px; padding: 0 1px; gap: 2px; overflow: hidden }
  .compacta .status-carta i { display: none }   /* elemento só pelo ícone; o nome está nos detalhes */
  /* canto de cima: nível à esquerda, IV logo abaixo dele (lado a lado com o ⓘ, os dois se atropelavam) */
  .compacta .carta .etiqueta { top: 5px; left: 5px; font-size: 10px; padding: 0 5px; max-width: calc(100% - 38px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .compacta .carta .selo-iv { top: 25px; left: 5px; right: auto; font-size: 10px; line-height: 17px; padding: 0 5px }
  .compacta .carta .info { top: 4px; right: 4px; width: 22px; height: 22px; line-height: 22px; font-size: 12px }
  .compacta .vida-planta { height: 12px } .compacta .vida-planta span { font-size: 9px; line-height: 12px }
  .compacta .carta .acoes { gap: 4px; min-height: 30px; padding-top: 4px }
  .compacta .carta .acoes .btn { font-size: 12px; padding: 5px 2px; min-height: 0 }
}
/* detalhes da carta no celular: nome primeiro (ficava no fim do modal, depois de toda a coluna da arte) */
@media (max-width: 760px) {
  .det-carta { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 18px }
  .det-carta > .det-arte, .det-carta > .det-info { display: contents }
  .det-carta .det-info h2 { order: -3; font-size: 26px; padding-right: 44px; line-height: 1.1 }
  .det-carta .det-arte canvas { order: -2; width: 100%; max-width: 240px; margin: 0 auto }
}
.barra-pm > span:empty { display: none }   /* sem texto, a caixa vazia empurrava o botão para uma 2ª linha no celular */
@media (max-width: 560px) { .barra-pm { padding: 8px 10px; min-height: 0 } }
/* item do menu tocado: fica aceso enquanto a página nova monta (a gaveta só fecha quando ela entra — spa.js) */
.lado-esq .grupo a.spa-indo { color: var(--ouro); background: linear-gradient(90deg, rgba(244,197,66,.22), rgba(244,197,66,.06)); border-color: rgba(244,197,66,.5) }
/* 3 cartas por linha no celular (27/09, dono: "2 é muito pouco"): ~110 px por carta — fica o essencial (retrato, nome,
   raridade, vida/dano/velocidade, colheitas, botão); alcance, defesa e elemento ficam nos detalhes (ⓘ) */
@media (max-width: 560px) {
  .cartas.compacta, .cartas-m.compacta { gap: 6px }
  .compacta .carta { padding: 4px; gap: 2px; border-radius: 10px }
  .compacta .carta canvas { border-radius: 7px }
  .compacta .carta .nome { font-size: 12.5px }
  .compacta .carta .raridade { font-size: 8.5px; letter-spacing: .02em }
  .compacta .status-carta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px }
  .compacta .status-carta span:nth-child(n+4) { display: none }
  .compacta .status-carta span { font-size: 9.5px; line-height: 15px; padding: 0; gap: 1px; border-radius: 5px }
  .compacta .carta .etiqueta { top: 3px; left: 3px; font-size: 9px; padding: 0 4px; border-radius: 6px; max-width: calc(100% - 26px) }
  .compacta .carta .selo-iv { top: 19px; left: 3px; font-size: 9px; line-height: 14px; padding: 0 4px }
  .compacta .carta .info { top: 3px; right: 3px; width: 19px; height: 19px; line-height: 19px; font-size: 11px }
  .compacta .vida-planta { height: 11px; margin-top: 2px } .compacta .vida-planta span { font-size: 8px; line-height: 11px }
  .compacta .carta .acoes { grid-template-columns: 1fr; min-height: 0; padding-top: 3px }
  .compacta .carta .acoes .btn { font-size: 11px; padding: 4px 2px }
}
@media (max-width: 380px) {   /* celular estreito: 3 status não cabem em ~105 px ("0.36" cortava) — vida e dano */
  .compacta .status-carta { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .compacta .status-carta span:nth-child(n+3) { display: none }
  .compacta .status-carta span { font-size: 10px }
}
/* colunas da grade compacta: diminui aos poucos (5 → 4 → 3) e nunca fica abaixo de 3 (27/09, dono: "em tela um
   pouco maior, tablet, ainda aparecem só 2"). A coluna mínima é 180 px OU um terço da largura, o que for menor. */
/* Fusão, Contrato e Alimentar (28/09, dono: "a Coleção ficou muito boa no celular; o mesmo nelas"): a grade da bancada também */
.cartas.compacta, .cartas-m.compacta, .bancada .grade-inv.compacta { grid-template-columns: repeat(auto-fill, minmax(min(180px, calc((100% - 28px) / 3)), 1fr)) }
@media (max-width: 560px) { .bancada .grade-inv.compacta { gap: 6px }
  /* na bancada a carta fica ~100 px: 3 status não cabem (o 3º cortava) — vida e dano; o resto nos detalhes */
  .bancada .compacta .status-carta { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bancada .compacta .status-carta span:nth-child(n+3) { display: none } }
/* tablet (700–1000 px): o topo do PC não cabe — o "online" passava por cima do "Seiva" e o chat cortava na direita */
@media (max-width: 1000px) {
  .topo .marca { font-size: 0; gap: 0 }
  .topo .online, .topo .selo.teste { display: none }
  .topo .bolsa { min-width: 0; flex: 0 1 auto; overflow: hidden }
}
/* celular deitado: o site é feito para ficar em pé; o jogo expandido (tela cheia) fica por cima disto */
.vire-celular { display: none } .vire-celular .vc-jogo { display: none; margin-top: 10px } body:has(#b-cheia) .vire-celular .vc-jogo { display: inline-block }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html:not(.tela-cheia) .vire-celular { display: grid; place-items: center; position: fixed; inset: 0; z-index: 9000; background: #0b1710; text-align: center; padding: 20px }
  .vire-celular div { display: flex; flex-direction: column; align-items: center; gap: 8px }
  .vire-celular .vc-ico { font-size: 44px; animation: vc-gira 1.8s ease-in-out infinite }
  .vire-celular b { font: 800 22px 'Baloo 2', sans-serif; color: var(--ouro) } .vire-celular small { color: var(--mudo); font-size: 14px }
}
@keyframes vc-gira { 0%, 30% { transform: rotate(-90deg) } 60%, 100% { transform: rotate(0) } }

/* selo de IV só com a letra (28/09) */
.carta .selo-iv { min-width: 22px; text-align: center; padding: 0 6px }

/* Resgatar código (menu do avatar, 28/09) */
.cm-codigo { display: flex; gap: 8px } .cm-codigo input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .05em; font-weight: 800 }
.cm-premio { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px } .cm-premio .cm-carta-premio { width: min(220px, 100%) }

/* Pré-temporada (28/09): vitrine do prêmio acumulando no lugar do ranking */
.pre-t { display: flex; flex-direction: column; gap: 18px }
.pre-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 34px 24px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(8,20,12,.55), rgba(8,20,12,.92)), url(ui/faixa-ranking.jpg) center 30% / cover; border: 2px solid rgba(244,197,66,.35); box-shadow: 0 0 60px rgba(244,197,66,.12), var(--sombra) }
.pre-chip { font: 800 13px Nunito, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #2a1a00; background: var(--ouro); padding: 5px 14px; border-radius: 999px }
.pre-hero h1 { margin: 0; font-size: clamp(24px, 4vw, 38px); text-shadow: 0 3px 0 rgba(0,0,0,.5) }
.pre-contagem { display: flex; gap: 10px }
.pre-contagem div { min-width: 74px; padding: 10px 8px 8px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12) }
.pre-contagem b { display: block; font: 800 clamp(26px, 5vw, 42px)/1 'Baloo 2', sans-serif; font-variant-numeric: tabular-nums }
.pre-contagem small { font-size: 11px; color: var(--mudo); text-transform: uppercase; letter-spacing: .08em }
.pre-premio { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px }
.pre-premio > small { font: 800 13px Nunito, sans-serif; color: var(--mudo); text-transform: uppercase; letter-spacing: .12em }
.pre-valor { font: 800 clamp(46px, 10vw, 104px)/1.05 'Baloo 2', sans-serif; color: var(--ouro); font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(244,197,66,.45), 0 5px 0 rgba(0,0,0,.45) }
.pre-valor.pulsa { animation: pre-pulsa .7s ease }
@keyframes pre-pulsa { 30% { transform: scale(1.06); text-shadow: 0 0 50px rgba(244,197,66,.8), 0 5px 0 rgba(0,0,0,.45) } }
.pre-divisao { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--mudo) } .pre-divisao b { color: var(--tinta) }
.pre-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px }
.pre-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.pre-cards .painel h3 { margin: 6px 0 4px } .pre-cards .painel p { margin: 0; color: var(--mudo); font-size: 14px; line-height: 1.5 } .pre-ic { font-size: 26px }
@media (max-width: 760px) { .pre-cards { grid-template-columns: minmax(0, 1fr) } .pre-contagem div { min-width: 62px } .pre-hero { padding: 26px 14px 24px } }
.pool-temporada.pre .p-falta { color: var(--ouro); font-weight: 800 }

/* cargos no chat (28/09, como o nmt): sem balão colorido — fundo levíssimo, barrinha de 2px na cor do cargo,
   nome colorido, ícone pequeno ao lado do nome e o texto em branco forte */
.msg.c-admin .corpo, .msg.c-moderador .corpo, .msg.c-streamer .corpo { position: relative; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.06) }
.msg.c-admin .corpo::before, .msg.c-moderador .corpo::before, .msg.c-streamer .corpo::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 0 2px 2px 0 }
.msg.c-admin .corpo::before { background: #34a4fc } .msg.c-moderador .corpo::before { background: #f5c400 } .msg.c-streamer .corpo::before { background: #e03131 }
.msg.c-admin .quem b { color: #34a4fc } .msg.c-moderador .quem b { color: #f5c400 } .msg.c-streamer .quem b { color: #ff4d4d }
.msg.c-admin .txt, .msg.c-moderador .txt, .msg.c-streamer .txt { font-weight: 700; color: #f2f5ff }
.selo-cargo { display: inline-flex; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; flex: none }
.selo-cargo svg { width: 14px; height: 14px; display: block }
.selo-cargo.c-admin { color: #34a4fc } .selo-cargo.c-moderador { color: #f5c400 } .selo-cargo.c-streamer { color: #ff4d4d }
.mod-bt { margin-left: auto; background: none; border: 0; color: var(--mudo); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; opacity: 0; transition: opacity .15s } .msg:hover .mod-bt, .mod-bt:focus-visible { opacity: 1 }
@media (hover: none) { .mod-bt { opacity: .7 } }
.mod-caixa { display: flex; flex-direction: column; gap: 10px; text-align: left } .mod-caixa p { margin: 0 } .mod-caixa label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px }
.mod-caixa label.mod-l { flex-direction: row; align-items: center; gap: 8px; font-weight: 600 } .mod-caixa select, .mod-caixa .motivo { width: 100% }

/* aviso de resposta do suporte (menu do avatar) */
.sp-n { font: 800 11px Nunito, sans-serif; font-style: normal; background: var(--perigo); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center }
.sp-ponto { position: absolute; top: 2px; left: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); box-shadow: 0 0 0 2px #1a1208 } #perfil > button { position: relative }

/* Ajuda e suporte (28/09, igual ao nmt): widget flutuante no canto; tela cheia no celular */
.sw { --sw-bg: #0b1124; --sw-panel: #121c17; --sw-card: #18241e; --sw-line: rgba(255,255,255,.08); --sw-text: #f0f3ef; --sw-muted: rgba(240,243,239,.62); --sw-acc: #3fa452; --sw-acc2: #7fd66b; --sw-radius: 22px;
  position: fixed; right: 20px; bottom: 20px; width: min(390px, 100vw - 20px); height: min(680px, 100vh - 36px); z-index: 100000; display: flex; flex-direction: column; background: var(--sw-bg); color: var(--sw-text);
  border: 1px solid var(--sw-line); border-radius: var(--sw-radius); box-shadow: 0 28px 80px rgba(0,0,0,.55); overflow: hidden; font-family: Nunito, "Segoe UI", system-ui, sans-serif;
  opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none; transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1) }
.sw.is-in { opacity: 1; transform: none; pointer-events: auto } .sw.is-out { opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none }
.sw svg { width: 1.15rem; height: 1.15rem; flex: none; display: block }
.sw-vista { flex: 1; min-height: 0; display: flex; flex-direction: column }
.sw-icon-btn { width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--sw-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none }
.sw-icon-btn:hover { color: var(--sw-text); background: rgba(255,255,255,.06) } .sw-icon-btn--light { color: rgba(255,255,255,.85) }
.sw-hero { position: relative; padding: 18px 18px 30px; background: radial-gradient(120% 90% at 20% 0, rgba(63,164,82,.5), transparent 55%), linear-gradient(160deg, #1d3a26, #122219 55%, #0b1124) }
.sw-hero__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 22px }
.sw-marca { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font: 800 17px 'Baloo 2', sans-serif; color: #fff } .sw-marca img { width: 24px; height: 24px }
.sw-hero__top .sw-avatars { justify-self: center } .sw-hero__top .sw-icon-btn { justify-self: end }
.sw-hero__title { margin: 0; font: 800 1.55rem/1.2 'Baloo 2', sans-serif; letter-spacing: -.01em; color: #fff; max-width: 16ch }
.sw-panel { flex: 1; min-height: 0; margin-top: -14px; padding: 16px 14px 12px; border-radius: 20px 20px 0 0; background: var(--sw-panel); display: flex; flex-direction: column; gap: 12px; overflow: auto }
.sw-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 46px; border-radius: 999px; background: var(--sw-card); border: 1px solid var(--sw-line); color: var(--sw-muted); flex: none }
.sw-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--sw-text); font: inherit; font-size: .95rem; min-width: 0; padding: 0; box-shadow: none } .sw-search input::placeholder { color: var(--sw-muted) }
.sw-res { display: flex; flex-direction: column; gap: 6px } .sw-res:empty { display: none }
.sw-card { display: block; text-decoration: none; color: inherit; background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: 16px; padding: 14px 16px; transition: border-color .15s, background .15s }
.sw-card:hover { border-color: rgba(63,164,82,.5); background: #1d2b24; text-decoration: none }
.sw-card__kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sw-muted); margin-bottom: 6px } .sw-card__title { font-size: .98rem; font-weight: 800; line-height: 1.3; margin-bottom: 4px }
.sw-card__excerpt { font-size: .84rem; color: var(--sw-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sw-cta { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--sw-line); background: var(--sw-card); color: var(--sw-text); border-radius: 16px; padding: 14px 16px; font: inherit; font-weight: 800; cursor: pointer; flex: none }
.sw-cta:hover { background: #1d2b24; border-color: rgba(63,164,82,.45) } .sw-cta svg { color: var(--sw-acc2) }
.sw-cta--pri { background: var(--sw-acc); border-color: transparent; color: #fff } .sw-cta--pri svg { color: #fff } .sw-cta--pri:hover { background: #48b25c }
.sw-section-label { font-size: .75rem; color: var(--sw-muted); margin: 4px 2px 0; font-weight: 700 }
.sw-home-tickets, .sw-grupo { display: flex; flex-direction: column; gap: 8px }
.sw-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--sw-line); background: #0f1813 } .sw-bar__title { font-weight: 800; font-size: 1.05rem }
.sw-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px }
.sw-rodape { padding: 10px 14px 12px; border-top: 1px solid var(--sw-line) }
.sw-empty { padding: 28px 12px; text-align: center; color: var(--sw-muted); font-size: .92rem; line-height: 1.5 }
.sw-ticket { width: 100%; text-align: left; border: 1px solid var(--sw-line); background: var(--sw-card); color: inherit; border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit }
.sw-ticket:hover { border-color: rgba(63,164,82,.45) }
.sw-ticket__title { font-size: .92rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sw-ticket__meta { font-size: .75rem; color: var(--sw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .sw-ticket__pe { display: flex; align-items: center; justify-content: space-between }
.sw-pill { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--sw-muted); text-transform: uppercase; letter-spacing: .03em }
.sw-pill--aberto { background: rgba(56,189,248,.16); color: #7dd3fc } .sw-pill--andamento { background: rgba(250,204,21,.14); color: #fde047 } .sw-pill--resolvido { background: rgba(127,214,107,.16); color: #a6e89a }
.sw-tab-n { font: 800 10.5px Nunito, sans-serif; font-style: normal; background: var(--perigo, #ff6b5b); color: #fff; border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center }
.sw-avatars { display: flex; align-items: center }
.sw-avatar { width: var(--sw-av, 32px); height: var(--sw-av, 32px); border-radius: 999px; border: 2px solid #17301f; overflow: hidden; margin-left: -10px; background: radial-gradient(circle at 50% 70%, #3f8f4a, #16301f 75%); display: inline-flex; flex: none }
.sw-avatars .sw-avatar:first-child { margin-left: 0 } .sw-avatar canvas, .sw-msg__face canvas { width: 100%; height: 100%; display: block }
.sw-art { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sw-card); border: 1px solid var(--sw-line); color: var(--sw-text); text-decoration: none; font-weight: 700; font-size: .92rem }
.sw-art:hover { border-color: rgba(63,164,82,.5); text-decoration: none } .sw-art svg { color: var(--sw-acc2); width: 1rem; height: 1rem }
.sw-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 6px; border-bottom: 1px solid var(--sw-line); background: #0f1813 }
.sw-chat-head__meta { flex: 1; min-width: 0 } .sw-chat-head__name { font-weight: 800; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sw-chat-head__sub { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .75rem; color: var(--sw-muted) } .sw-chat-head__sub svg { width: .8rem; height: .8rem }
.sw-dot { width: 7px; height: 7px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); flex: none; display: inline-block }
.sw-msgs { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; background: radial-gradient(80% 50% at 50% 0, rgba(63,164,82,.07), transparent 70%), var(--sw-bg) }
.sw-msg { max-width: 88%; display: flex; flex-direction: column } .sw-msg--me { align-self: flex-end; align-items: flex-end } .sw-msg--agent { align-self: flex-start }
.sw-msg__agent { display: flex; flex-direction: column; gap: 6px }
.sw-msg__face { width: 26px; height: 26px; border-radius: 999px; overflow: hidden; background: radial-gradient(circle at 50% 70%, #3f8f4a, #16301f 75%); display: inline-flex }
.sw-bubble { padding: 11px 13px; border-radius: 18px; background: #1b2a22; border: 1px solid var(--sw-line); font-size: .94rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word }
.sw-bubble--me { background: var(--sw-acc); border-color: transparent; color: #fff; border-bottom-right-radius: 6px } .sw-msg--agent .sw-bubble { border-bottom-left-radius: 6px }
.sw-msg__meta { font-size: .72rem; color: var(--sw-muted); padding: 4px 2px 0 }
.sw-attach-img { display: block; max-width: 100%; margin-top: 8px; border-radius: 10px; padding: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden }
.sw-attach-img img { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; object-fit: cover }
.sw-system { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.04); color: var(--sw-muted); font-size: .78rem; max-width: 92% }
.sw-system__avatar { width: 20px; height: 20px; border-radius: 999px; overflow: hidden; flex: none } .sw-system__avatar img { width: 100%; height: 100% }
.sw-waiting { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; color: var(--sw-muted); font-size: .84rem; padding: 4px 2px }
.sw-baixo { flex: none }
.sw-composer { padding: 10px 12px 14px; background: #0f1813; border-top: 1px solid var(--sw-line) }
.sw-drafts { display: flex; gap: 8px; margin-bottom: 8px } .sw-draft { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--sw-card); border: 1px solid var(--sw-line) }
.sw-draft img { width: 100%; height: 100%; object-fit: cover } .sw-draft button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: 0; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 13px; line-height: 1 }
.sw-composer__box { border: 1.5px solid rgba(63,164,82,.6); background: #131e18; border-radius: 18px; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 0 3px rgba(63,164,82,.08) }
.sw-composer__box textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--sw-text); font: inherit; font-size: .95rem; line-height: 1.4; min-height: 44px; max-height: 120px; padding: 0; box-shadow: none }
.sw-composer__box textarea::placeholder { color: var(--sw-muted) }
.sw-composer__tools { display: flex; align-items: center; justify-content: space-between }
.sw-plus { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--sw-line); background: transparent; color: var(--sw-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer } .sw-plus:hover { color: var(--sw-text); border-color: rgba(255,255,255,.2) }
.sw-send { width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); display: inline-flex; align-items: center; justify-content: center; cursor: not-allowed }
.sw-send.is-on { background: var(--sw-acc); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(63,164,82,.35) }
.sw-closed { padding: 14px; text-align: center; border-top: 1px solid var(--sw-line); background: #0f1813 }
.sw-closed__rate, .sw-closed__thanks { margin-top: 8px; color: var(--sw-muted); font-size: .88rem }
.sw-stars { display: flex; justify-content: center; gap: 6px; margin-top: 8px } .sw-stars button { border: 0; background: transparent; color: #fbbf24; font-size: 24px; cursor: pointer; opacity: .3; padding: 0 2px } .sw-stars button.is-on { opacity: 1 }
.sw-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--sw-line); background: #0d1511; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); flex: none }
.sw-tabs button { position: relative; border: 0; background: transparent; color: var(--sw-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; border-radius: 12px }
.sw-tabs button.is-active { color: var(--sw-acc2) } .sw-tabs button:hover { color: var(--sw-text) } .sw-tabs .sw-tab-n { position: absolute; top: 3px; left: calc(50% + 6px) }
.sw-zoom { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.85); display: grid; place-items: center; cursor: zoom-out; padding: 20px } .sw-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px }
@media (max-width: 900px) {
  .sw { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; opacity: 1; transform: translateY(110%); transition: transform .3s cubic-bezier(.16,1,.3,1); padding-top: env(safe-area-inset-top, 0px) }
  .sw.is-in { transform: none } .sw.is-out { opacity: 1; transform: translateY(110%) }
}

/* emblema da liga (29/09) */
.emb-liga { display: inline-block; vertical-align: middle; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); flex: none }