* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0b0806; overflow: hidden; }
body { display: flex; justify-content: center; align-items: center; font-family: "Alegreya Sans", sans-serif; color: #f6ead0;
  -webkit-tap-highlight-color: transparent; user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }

/* a tela do jogo: proporção de celular, centralizada no computador */
.tela {
  position: relative; width: min(100vw, calc(100vh * 0.4615)); height: min(100vh, calc(100vw / 0.4615));
  overflow: hidden; display: flex; flex-direction: column;
  background:
    url(img/mesa_cel.jpg) center/cover no-repeat, #1d120a;
  container-type: size; --u: 1cqw;
}
.tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 20px rgba(0,0,0,.75); z-index: 1; }

/* barras dos jogadores */
.barra { display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: 1cqh calc(3 * var(--u)); z-index: 2; flex-shrink: 0; }
#barra-0 { padding-top: 1.6cqh; }
.avatar { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; flex: none; margin: calc(-1 * var(--u)) 0;
  background: url(img/avatar_gelo.png) center/contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.avatar.fogo { background-image: url(img/avatar_fogo.png); }
.avatar.energia { background-image: url(img/avatar_energia.png); }
.barra.vez .avatar { filter: drop-shadow(0 0 6px #ffb020) drop-shadow(0 0 3px #ffd36b); }
.barra .nome { font-family: Cinzel, serif; font-weight: 800; font-size: calc(3.6 * var(--u)); }
.barra .sub { font-size: calc(2.6 * var(--u)); opacity: .75; }
.estrelas { margin-left: auto; display: flex; gap: calc(.6 * var(--u)); }
.estrelas img { width: calc(6 * var(--u)); height: calc(6 * var(--u)); transition: filter .4s, opacity .4s, transform .4s; }
.estrelas .on { filter: drop-shadow(0 0 4px rgba(255,170,60,.7)); transform: scale(1.08); }
.estrelas .off { filter: grayscale(1) brightness(.45); opacity: .55; }

/* cartas */
.carta { position: relative; border-radius: calc(1.6 * var(--u)); box-shadow: 0 .6cqh 1.4cqh rgba(0,0,0,.6); cursor: pointer; }
.carta img { width: 100%; display: block; border-radius: calc(1.6 * var(--u)); }
.banco { display: flex; justify-content: center; gap: calc(3 * var(--u)); z-index: 2; flex-shrink: 0; align-items: flex-start; }
.banco .carta, .banco .vazio { width: calc(17 * var(--u)); }
.ativo { display: flex; justify-content: center; z-index: 2; flex-shrink: 0; align-items: flex-start; }
.ativo .carta, .ativo .vazio { width: calc(26 * var(--u)); }
#banco-1 { margin-top: 1cqh; }
#ativo-1 { margin-top: 1.8cqh; }
#banco-0 { margin-top: 2cqh; }
.vazio { aspect-ratio: 2/3; border: 2px dashed rgba(255,255,255,.10); border-radius: calc(1.6 * var(--u)); }

.vida { position: absolute; left: 6%; right: 6%; bottom: -1.6cqh; height: 1.5cqh; border-radius: 1cqh;
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.vida i { display: block; height: 100%; background: linear-gradient(#7dff8a, #2fae3e); transition: width .5s; }
.vida.meia i { background: linear-gradient(#ffe066, #d49a12); }
.vida.baixa i { background: linear-gradient(#ff7a5c, #c62a12); }
.vida b { position: absolute; inset: 0; font-size: 1.2cqh; line-height: 1.5cqh; text-align: center; font-weight: 700;
  text-shadow: 0 0 3px #000, 0 0 2px #000; }
.banco .vida { height: 1.1cqh; bottom: -1.3cqh; }
.banco .vida b { font-size: .9cqh; line-height: 1.1cqh; }

/* energias ligadas: fileira de ícones grandes na base da carta (estilo TCG Pocket) */
.orbes { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center;
  gap: calc(.5 * var(--u)); padding: calc(.5 * var(--u)) calc(.8 * var(--u)); border-radius: 99px;
  background: rgba(10,6,3,.82); border: 1px solid rgba(216,165,74,.7); box-shadow: 0 2px 6px rgba(0,0,0,.8); }
.orbes span { width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,.9); }
.orbes .fogo { background: radial-gradient(circle at 35% 30%, #ffd27a, #d2410e 60%, #6b1300); }
.orbes .gelo { background: radial-gradient(circle at 35% 30%, #e7fbff, #49b6e6 60%, #0f4a7a); }
.orbes .energia { background: radial-gradient(circle at 35% 30%, #f3dcff, #a24be6 60%, #3d0f6b); }
.orbes img { width: 74%; }
.banco .orbes span { width: calc(3.8 * var(--u)); height: calc(3.8 * var(--u)); border-width: 1.5px; }
.orbes .mais { width: auto !important; height: auto !important; border: 0; box-shadow: none; padding: 0 calc(.4 * var(--u));
  font-size: calc(3 * var(--u)); font-weight: 800; color: #ffd36b; }
.banco .orbes .mais { font-size: calc(2.2 * var(--u)); }

.equip { position: absolute; left: -2.2cqw; top: 8%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
  border: 2px solid #d8a54a; background: #241509 center/150% no-repeat; box-shadow: 0 0 8px #000; }
.banco .equip { width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); }
.selo { position: absolute; top: -1.4cqh; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font-size: 1.1cqh; padding: .15cqh calc(1.4 * var(--u)); border-radius: 1cqh; font-weight: 700; border: 1px solid; }
.selo.queimado { background: #8a1d06; border-color: #ffb27a; }
.selo.paralisado { background: #4a4a4a; border-color: #dcdcdc; }
.selo.outro { background: #13405c; border-color: #8fe3ff; }
.status { position: absolute; top: calc(-2.2 * var(--u)); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: calc(.6 * var(--u)); align-items: center; }
.status img { width: calc(7 * var(--u)); height: calc(7 * var(--u)); filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)); animation: surge .35s ease-out; }
.banco .status img { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
.status .guarda { font-weight: 800; font-size: calc(2.6 * var(--u)); color: #e8f7ff; background: rgba(19,64,92,.92); border: 1px solid #8fe3ff; border-radius: 99px; padding: 0 calc(1 * var(--u)); }
.st-queimado img { filter: sepia(.4) saturate(1.6) hue-rotate(-12deg) brightness(.95); }
.st-paralisado img { filter: grayscale(.85) brightness(.8); }
.muralha { box-shadow: 0 0 0 2px #8fe3ff, 0 0 18px 4px #49b6e6; }

.carta.alvo { box-shadow: 0 0 0 3px #4fe36b, 0 0 20px 4px #4fe36b; animation: pulsa 1s infinite alternate; }
@keyframes pulsa { to { box-shadow: 0 0 0 3px #4fe36b, 0 0 8px 1px #4fe36b; } }

/* faixa do meio */
.meio { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(3 * var(--u)); height: 7cqh; z-index: 2; margin-top: .8cqh; }
.ambiente { display: flex; align-items: center; gap: calc(1.6 * var(--u)); font-size: calc(2.6 * var(--u)); width: 34%; line-height: 1.15; }
.ambiente img { width: calc(9 * var(--u)); border-radius: calc(1 * var(--u)); box-shadow: 0 0 6px #000; cursor: pointer; }
.ambiente small { opacity: .7; }
.turno { font-family: Cinzel, serif; font-weight: 800; font-size: calc(4.2 * var(--u)); color: #ffd36b; text-align: center; flex: 1;
  text-shadow: 0 0 10px rgba(255,170,0,.6); }
.btn { font-family: Cinzel, serif; font-weight: 800; font-size: calc(3 * var(--u)); padding: 1.1cqh calc(3 * var(--u)); border-radius: calc(2 * var(--u));
  color: #fff4da; border: 0; border-radius: 0; background: url(img/btn_placa.png) center/100% 100% no-repeat;
  min-width: calc(30 * var(--u)); padding: 1.6cqh calc(5 * var(--u)); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.7)); }
.btn:not(:disabled):hover { filter: drop-shadow(0 0 8px rgba(255,190,80,.8)) brightness(1.08); }
.btn:disabled, .energia:disabled { opacity: .35; filter: grayscale(.6); cursor: default; }

/* botões flutuantes */
.energia { position: absolute; right: calc(3 * var(--u)); bottom: 24cqh; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; z-index: 4;
  background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #ffe2a0, #e2531a 50%, #6b1300 76%, transparent 78%) center/100% 100% no-repeat;
  border: 0; box-shadow: none; filter: drop-shadow(0 0 10px rgba(255,120,30,.8)); display: grid; place-items: center; }
.energia img { width: 60%; }
.energia small { position: absolute; bottom: -2.4cqh; font-size: calc(2.3 * var(--u)); font-weight: 700; white-space: nowrap; }
.energia .prox { position: absolute; left: -38%; top: -14%; width: 52%; height: 52%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #3a2a18, #120b05 90%); border: 2px solid #b98a3e; box-shadow: 0 2px 6px rgba(0,0,0,.8); pointer-events: none; }
.energia .prox img { width: 70%; opacity: .9; }
.energia .prox i { position: absolute; top: -1.9cqh; font-style: normal; font-size: calc(2 * var(--u)); font-weight: 700; color: #e9d7ae; text-shadow: 0 1px 2px #000; }
.energia .prox.oculto { display: none; }
.energia.ligando { animation: brilha .7s infinite alternate; }
@keyframes brilha { to { filter: drop-shadow(0 0 22px rgba(255,170,60,1)); transform: scale(1.08); } }
.icone-log { position: absolute; left: calc(3 * var(--u)); bottom: 24cqh; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; z-index: 4;
  background: url(img/btn_log.png) center/contain no-repeat; border: 0; font-size: 0 !important; color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }

/* mão em leque */
.mao { position: relative; height: 15cqh; margin-top: auto; z-index: 3; flex-shrink: 0; }
.mao .carta { position: absolute; width: calc(22 * var(--u)); bottom: -9cqh; left: 50%; transform-origin: 50% 120%;
  transition: transform .25s, bottom .25s; }
.mao .carta.arrastando { opacity: .25; }
.fantasma { position: fixed; z-index: 9999; pointer-events: none; translate: -50% -50%; rotate: -4deg; border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.75), 0 0 0 2px #ffd36b; }
.carta.alvo-arraste { box-shadow: 0 0 0 3px #4fe36b, 0 0 20px 4px #4fe36b; animation: pulsa 1s infinite alternate; }
.previa { display: none; }
.mao .carta.jogavel { box-shadow: 0 0 0 2px #ffd36b, 0 0 14px #ffb020; }
.mao .carta.entra { animation: entra .45s ease-out; }
@keyframes entra { from { opacity: 0; translate: calc(40 * var(--u)) -10cqh; } }
.mao-op { display: flex; justify-content: center; margin-top: -1cqh; min-height: calc(7 * var(--u)); z-index: 2; }
.mao-op span { width: calc(6.4 * var(--u)); height: calc(9.6 * var(--u)); margin: 0 calc(-1.6 * var(--u)); border-radius: calc(.6 * var(--u));
  background: url(img/verso.jpg) center/cover; box-shadow: 0 2px 5px rgba(0,0,0,.8); }

/* animações de combate */
.investida-cima { animation: investeCima .45s ease-in-out; }
.investida-baixo { animation: investeBaixo .45s ease-in-out; }
@keyframes investeCima { 50% { transform: translateY(-6cqh) scale(1.06); } }
@keyframes investeBaixo { 50% { transform: translateY(6cqh) scale(1.06); } }
.treme { animation: treme .4s; }
@keyframes treme { 20%, 60% { transform: translateX(-1.6cqw); } 40%, 80% { transform: translateX(calc(1.6 * var(--u))); } }
.desfaz { animation: desfaz .6s forwards; }
@keyframes desfaz { to { opacity: 0; transform: scale(.6) rotate(8deg); filter: brightness(2) blur(2px); } }
.dano-flutuante { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); font-family: Cinzel, serif;
  font-size: calc(7 * var(--u)); font-weight: 800; color: #ff5a3a; text-shadow: 0 0 6px #000, 0 0 2px #000; pointer-events: none; z-index: 6;
  animation: sobe 1.2s ease-out forwards; }
.dano-flutuante.cura { color: #7dff8a; }
@keyframes sobe { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -6cqh; } }

/* dica de alvo e aviso rápido */
.dica { position: absolute; top: 45%; left: calc(4 * var(--u)); right: calc(4 * var(--u)); z-index: 7; text-align: center; padding: 1.2cqh calc(3 * var(--u));
  background: rgba(20,60,25,.92); border: 2px solid #4fe36b; border-radius: calc(2 * var(--u)); font-weight: 700; font-size: calc(3.2 * var(--u)); }
.dica button { margin-left: calc(2 * var(--u)); padding: .3cqh calc(2 * var(--u)); border-radius: calc(1 * var(--u)); border: 1px solid #ccc; background: #333; font-size: calc(2.8 * var(--u)); }
.toast { position: absolute; top: 11cqh; left: calc(6 * var(--u)); right: calc(6 * var(--u)); z-index: 6; text-align: center; font-size: calc(2.9 * var(--u));
  padding: .8cqh calc(2 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(0,0,0,.72); border: 1px solid rgba(255,211,107,.4);
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.toast.mostra { opacity: 1; }

/* carta aberta */
.modal { position: absolute; inset: 0; z-index: 10; background: rgba(5,3,2,.84); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; }
.modal .grande { width: calc(74 * var(--u)); cursor: default; }
.acoes { width: calc(82 * var(--u)); display: flex; flex-direction: column; gap: 1.2cqh; }
.acao { display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: 1.4cqh calc(3 * var(--u)); border-radius: calc(2.4 * var(--u)); text-align: left;
  background: linear-gradient(#6e4419, #3d220a); border: 2px solid #e2b25a; font-weight: 700; font-size: calc(3.4 * var(--u)); }
.acao .custo { display: flex; gap: .6cqw; }
.acao .custo span { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffd27a, #d2410e 60%, #6b1300); }
.acao .custo img { width: 70%; }
.acao .dano { margin-left: auto; font-family: Cinzel, serif; font-size: calc(4.6 * var(--u)); }
.acao:disabled { opacity: .4; filter: grayscale(.6); cursor: default; }
.acao.cinza { background: linear-gradient(#3b3b3b, #1c1c1c); border-color: #9a9a9a; }
.acao .motivo { font-size: calc(2.4 * var(--u)); font-weight: 500; opacity: .8; margin-left: auto; }
.fechar { position: absolute; top: 2cqh; right: calc(4 * var(--u)); font-size: calc(6 * var(--u)); opacity: .8; background: none; border: 0; }

/* histórico */
.painel-log { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 9; display: flex; flex-direction: column;
  background: rgba(14,9,5,.97); border-top: 2px solid #d8a54a; border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; }
.painel-topo { position: relative; font-family: Cinzel, serif; font-weight: 800; font-size: calc(4 * var(--u)); padding: 1.4cqh calc(4 * var(--u)); }
.painel-topo .fechar { top: .4cqh; }
#log { flex: 1; overflow-y: auto; padding: 0 calc(4 * var(--u)) 2cqh; font-size: calc(3 * var(--u)); line-height: 1.35; }
#log div { margin-bottom: .5cqh; }
#log .ia { color: #9fd3ff; } #log .eu { color: #ffe3a3; } #log .sis { color: #c9c9c9; font-style: italic; }

/* fim de jogo / moeda */
.aviso { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(0,0,0,.75); font-family: Cinzel, serif; font-size: calc(8 * var(--u)); color: #ffd36b; text-shadow: 0 0 14px rgba(255,170,0,.7); }
.aviso small { display: block; font-size: calc(4 * var(--u)); color: #f6ead0; margin-top: 1cqh; }
.aviso .btn { margin-top: 3cqh; font-size: calc(4 * var(--u)); }
.moeda-palco { perspective: 900px; margin: 0 auto 2cqh; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.moeda { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: gira 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
.moeda.coroa { animation-name: gira-coroa; }
.moeda i { position: absolute; inset: 0; backface-visibility: hidden; background: url(img/moeda_cara.png) center/contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(230,230,255,.45)); }
.moeda i + i { transform: rotateY(180deg); background-image: url(img/moeda_coroa.png); }
.aviso-texto { opacity: 0; animation: aparece .4s 1.3s forwards; }
@keyframes aparece { to { opacity: 1; } }
@keyframes gira { from { transform: translateY(-20cqh) rotateY(0) scale(.5); } 60% { transform: translateY(0) scale(1.1); } to { transform: rotateY(1800deg) scale(1); } }
@keyframes gira-coroa { from { transform: translateY(-20cqh) rotateY(0) scale(.5); } 60% { transform: translateY(0) scale(1.1); } to { transform: rotateY(1980deg) scale(1); } }
.oculto { display: none !important; }

/* tela inicial */
.inicio { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3cqh; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.85)), url(img/mesa_cel.jpg) center/cover; }
.logo img { width: calc(72 * var(--u)); display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.9)); }
.logo h1 { font-family: Cinzel, serif; font-weight: 800; font-size: calc(14 * var(--u)); color: #ffd36b; text-shadow: 0 0 18px rgba(255,170,0,.6), 0 3px 0 #5a3508; margin: 0; }
.escolha-titulo { font-family: Cinzel, serif; font-size: calc(4.4 * var(--u)); color: #f6ead0; text-shadow: 0 2px 4px #000; }
.baralhos { display: flex; gap: calc(3 * var(--u)); }
.baralho { display: flex; flex-direction: column; align-items: center; gap: .6cqh; background: none; border: 0; padding: 0; opacity: .55; transition: opacity .2s, transform .2s; }
.baralho img { width: calc(28 * var(--u)); border-radius: calc(1.6 * var(--u)); box-shadow: 0 6px 14px rgba(0,0,0,.8); }
.baralho b { font-family: Cinzel, serif; font-size: calc(3 * var(--u)); text-align: center; color: #ffd36b; }
.baralho small { font-size: calc(2.8 * var(--u)); color: #f6ead0; opacity: .8; }
.baralho.sel { opacity: 1; transform: scale(1.06); }
.baralho.sel img { box-shadow: 0 0 0 3px #ffd36b, 0 0 22px 4px rgba(255,190,80,.7); }
#btn-jogar { font-size: calc(5 * var(--u)); min-width: calc(48 * var(--u)); }

/* fim de jogo ilustrado */
.fim { display: flex; flex-direction: column; align-items: center; gap: 2cqh; }
.fim-avatar { width: calc(34 * var(--u)) !important; height: calc(34 * var(--u)) !important; margin: 0 !important; animation: surge .6s ease-out; }
.fim.ganhou .fim-avatar { filter: drop-shadow(0 0 24px rgba(255,190,80,.9)); }
.fim.perdeu .fim-avatar { filter: grayscale(.4) drop-shadow(0 0 18px rgba(200,40,40,.8)); }
.fim-titulo { font-size: calc(11 * var(--u)); line-height: 1; }
.fim.perdeu .fim-titulo { color: #e05a4a; text-shadow: 0 0 14px rgba(200,30,30,.7); }
.fim-placar { display: flex; flex-direction: column; gap: 1cqh; }
.fim-placar > div { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.fim-placar span { font-size: calc(3.4 * var(--u)); color: #f6ead0; width: calc(10 * var(--u)); text-align: right; }
.fim-placar .estrelas img { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
@keyframes surge { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.energia.gelo { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #e7fbff, #49b6e6 50%, #0f4a7a 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(80,180,255,.8)); }
.energia.roxo { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #f3dcff, #a24be6 50%, #3d0f6b 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(170,90,255,.8)); }

/* ===== computador / tela deitada ===== */
@media (min-aspect-ratio: 1/1) {
  .tela { width: 100vw; height: min(100vh, calc(100vw * 9 / 16)); display: block; --u: .5cqh;
    background:
      url(img/mesa_pc.jpg) center/cover no-repeat, #1d120a; }
  .tela::before { content: ""; position: absolute; left: 17cqw; right: 17cqw; top: 2cqh; bottom: 21cqh; border-radius: 3cqh; z-index: 1;
    border: 2px solid rgba(216,165,74,.18); background: rgba(0,0,0,.18) linear-gradient(transparent calc(50% - 1px), rgba(216,165,74,.22) 50%, transparent calc(50% + 1px)); }
  .barra { position: absolute; left: 1.6cqw; width: 14cqw; flex-wrap: wrap; gap: .8cqw; padding: 1.4cqh 1cqw; border-radius: 1.6cqh;
    background: rgba(20,12,6,.75); border: 1px solid rgba(216,165,74,.35); }
  #barra-1 { top: 3cqh; } #barra-0 { top: 50cqh; padding-top: 1.4cqh; }
  .barra .avatar { width: 8cqh; height: 8cqh; margin: -.6cqh 0; }
  .barra .nome { font-size: 2.2cqh; } .barra .sub { font-size: 1.5cqh; }
  .estrelas { margin-left: 0; width: 100%; justify-content: space-between; }
  .estrelas img { width: 4.4cqh; height: 4.4cqh; }
  .mao-op { position: absolute; top: -3cqh; left: 50%; transform: translateX(-50%); margin: 0; }
  .mao-op span { width: 7cqh; height: 10.5cqh; margin: 0 -1.4cqh; }
  .ativo, .banco { position: absolute; margin: 0 !important; }
  #ativo-1 { left: 34cqw; top: 5cqh; } #ativo-0 { left: 34cqw; top: 43cqh; }
  #banco-1 { left: 49cqw; top: 7cqh; } #banco-0 { left: 49cqw; top: 50cqh; }
  .ativo .carta, .ativo .vazio { width: calc(31cqh * 2 / 3); }
  .banco { gap: 1.6cqw; }
  .banco .carta, .banco .vazio { width: calc(21cqh * 2 / 3); }
  .meio { position: absolute; right: 1.6cqw; top: 3cqh; bottom: 4cqh; width: 14cqw; height: auto; margin: 0; padding: 0;
    flex-direction: column; justify-content: flex-start; gap: 3cqh; }
  .ambiente { width: 100%; flex-direction: column; text-align: center; font-size: 1.6cqh; }
  .ambiente img { width: 9cqw; }
  .turno { flex: none; font-size: 3cqh; margin-top: 6cqh; }
  #btn-fim { font-size: 2cqh; padding: 1.4cqh 2cqw; margin-top: auto; }
  .energia { right: calc(1.6cqw + 7cqw - 5cqh); bottom: 15cqh; width: 10cqh; height: 10cqh; }
  .energia small { bottom: -2.6cqh; font-size: 1.5cqh; }
  .energia .prox i { top: -2.2cqh; font-size: 1.4cqh; }
  .icone-log { left: 1.6cqw; bottom: 3cqh; width: 6cqh; height: 6cqh; font-size: 2.8cqh; }
  .mao { position: absolute; left: 0; right: 0; bottom: 0; height: 0; margin: 0; }
  .mao .carta { width: calc(25cqh * 2 / 3); bottom: -12cqh; }
  .mao .carta:hover { bottom: -4cqh; z-index: 50 !important; }
  .modal { flex-direction: row; gap: 4cqw; }
  .modal .grande { width: calc(80cqh * 2 / 3); }
  .acoes { width: 30cqw; }
  .acao { font-size: 2.2cqh; padding: 1.6cqh 1.4cqw; }
  .acao .custo span { width: 3.4cqh; height: 3.4cqh; }
  .acao .dano { font-size: 3cqh; }
  .fechar { font-size: 4cqh; }
  .painel-log { left: auto; right: 0; top: 0; bottom: 0; width: 28cqw; height: auto; border-radius: 0; border-top: 0; border-left: 2px solid #d8a54a; }
  .painel-topo { font-size: 2.4cqh; } #log { font-size: 1.8cqh; }
  .dica { top: 37cqh; left: 30cqw; right: 30cqw; font-size: 2cqh; }
  .toast { top: 1.4cqh; left: 30cqw; right: 30cqw; font-size: 1.8cqh; }
  .aviso { font-size: 7cqh; } .aviso small { font-size: 2.6cqh; } .aviso .btn { font-size: 2.6cqh; }
  .moeda-palco { width: 26cqh; height: 26cqh; }
  .ativo .orbes span { width: 4.2cqh; height: 4.2cqh; }
  .banco .orbes span { width: 2.9cqh; height: 2.9cqh; }
  .orbes .mais { font-size: 2.4cqh; } .banco .orbes .mais { font-size: 1.8cqh; }
  .dano-flutuante { font-size: 5cqh; }
  .status { top: -1.6cqh; } .ativo .status img { width: 4.6cqh; height: 4.6cqh; } .banco .status img { width: 3.2cqh; height: 3.2cqh; } .status .guarda { font-size: 1.6cqh; }
  .inicio { background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.3), rgba(0,0,0,.85)), url(img/mesa_pc.jpg) center/cover; gap: 2.4cqh; }
  .logo img { width: 44cqh; } .logo h1 { font-size: 10cqh; }
  .escolha-titulo { font-size: 3cqh; }
  .baralhos { gap: 4cqh; }
  .baralho img { width: 22cqh; } .baralho b { font-size: 2.4cqh; } .baralho small { font-size: 1.8cqh; }
  #btn-jogar { font-size: 3.4cqh; min-width: 30cqh; }
  .fim-avatar { width: 24cqh !important; height: 24cqh !important; }
  .fim-titulo { font-size: 8cqh; }
  .fim-placar span { font-size: 2.4cqh; width: 7cqh; }
  .fim-placar .estrelas img { width: 5cqh; height: 5cqh; }
}

/* ===== menu, pacotes, coleção e baralho (07/11) ===== */
.inicio { justify-content: flex-start; }
.tela-menu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 2.4cqh;
  padding: 3cqh calc(4 * var(--u)) 2cqh; }
#tela-menu { justify-content: center; gap: 4cqh; }
.menu { display: flex; flex-direction: column; gap: 1.6cqh; width: calc(70 * var(--u)); }
.menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; --h: calc(17 * var(--u)); height: var(--h); box-sizing: border-box;
  /* a faixa da arte fica um pouco abaixo do meio (enfeite em cima): empurra o texto ~5% pra baixo */
  padding: calc(var(--h) * .1) calc(9 * var(--u)) 0;
  background: url(img/btn_placa.png) center/100% 100% no-repeat; border: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.8)); transition: transform .15s, filter .15s; }
.menu-item b { font-family: Cinzel, serif; font-weight: 800; font-size: calc(4 * var(--u)); line-height: 1.05; color: #ffd36b; text-shadow: 0 2px 0 #3a1f04; }
.menu-item small { font-size: calc(2.8 * var(--u)); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: #f6ead0; opacity: .9; min-height: 1em; }
.menu-item:hover { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(255,190,80,.7)); }
.topo-menu { display: flex; align-items: center; gap: calc(3 * var(--u)); width: 100%; flex: none; }
.topo-menu h2 { font-family: Cinzel, serif; font-size: calc(5.4 * var(--u)); color: #ffd36b; text-shadow: 0 2px 4px #000; flex: 1; }
.voltar { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; border: 2px solid #d8a54a; background: rgba(20,12,6,.85);
  font-size: calc(6 * var(--u)); line-height: 1; color: #ffd36b; flex: none; }
.conta { font-family: Cinzel, serif; font-weight: 800; font-size: calc(5 * var(--u)); color: #e05a4a; }
.conta.ok { color: #7fe07a; }
.info-menu { font-size: calc(3.4 * var(--u)); color: #f6ead0; text-align: center; flex: none; }
.vazio-msg { font-size: calc(3.6 * var(--u)); text-align: center; margin-top: 4cqh; }
.baralhos { flex-wrap: wrap; justify-content: center; row-gap: 2cqh; }
.baralho:disabled { opacity: .25; cursor: default; }

/* pacotes */
.pacotes { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)); margin-top: 2cqh; }
.pacote, .abre-pacote { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1cqh; border: 0; background: none; padding: 0; }
.pacote-capa { width: calc(36 * var(--u)); aspect-ratio: 2 / 3.3; border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u));
  background: center 30% / cover no-repeat; box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px rgba(255,211,107,.85), inset 0 0 40px rgba(0,0,0,.6);
  position: relative; overflow: hidden; }
.pacote-capa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: repeating-linear-gradient(90deg, #d8a54a 0 6px, #8a5a14 6px 9px); opacity: .95; }
.pacote-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 45%, transparent 60%); background-size: 250% 100%; animation: brilho 3.5s infinite; }
.p-fogo .pacote-capa { box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px #ffb347, 0 0 22px rgba(255,90,20,.45); }
.p-gelo .pacote-capa { box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px #9fe3ff, 0 0 22px rgba(80,180,255,.45); }
.p-energia .pacote-capa { box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px #d9a6ff, 0 0 22px rgba(170,90,255,.5); }
.pacote b, .abre-pacote b { font-family: Cinzel, serif; font-size: calc(3.4 * var(--u)); color: #ffd36b; text-shadow: 0 2px 4px #000; }
.pacote:not(:disabled):hover { transform: translateY(-1cqh); transition: transform .2s; }
.pacote:disabled { opacity: .35; filter: grayscale(.7); cursor: default; }
@keyframes brilho { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* abertura do pacote e detalhes */
.abertura { position: absolute; inset: 0; z-index: 40; background: rgba(5,3,2,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqh; cursor: pointer; }
.abre-pacote { animation: treme-pacote .9s ease-in-out infinite; }
.abre-pacote .pacote-capa { width: calc(56 * var(--u)); }
.abre-pacote.rasga { animation: rasga .45s ease-in forwards; }
@keyframes treme-pacote { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes rasga { to { transform: scale(1.25); opacity: 0; filter: brightness(3); } }
.abre-dica { font-size: calc(3.2 * var(--u)); color: #f6ead0; opacity: .75; }
.revela { width: calc(70 * var(--u)); border-radius: calc(3 * var(--u)); animation: vira .5s ease-out; }
.revela img { width: 100%; display: block; border-radius: calc(3 * var(--u)); }
@keyframes vira { from { transform: perspective(900px) rotateY(90deg) scale(.8); } to { transform: perspective(900px) rotateY(0) scale(1); } }
.revela-rotulo { display: flex; gap: calc(2 * var(--u)); min-height: 4cqh; align-items: center; }
.rar, .nova { font-family: Cinzel, serif; font-weight: 800; font-size: calc(3.6 * var(--u)); padding: .4cqh calc(2.4 * var(--u)); border-radius: 99px; }
.nova { background: #c0392b; color: #fff; }
.rar.r-fullart { background: linear-gradient(90deg, #6a2bd1, #c64be6); color: #fff; }
.rar.r-platina { background: linear-gradient(90deg, #8e9aa8, #eef3f8, #8e9aa8); color: #222; }
.rar.r-crystal { background: linear-gradient(90deg, #4fb6e8, #d8f6ff, #4fb6e8); color: #08304a; }
.rar.r-gold { background: linear-gradient(90deg, #a8740c, #ffe28a, #a8740c); color: #3a2400; }
.revela.r-fullart { box-shadow: 0 0 30px 6px rgba(190,90,255,.7); }
.revela.r-platina { box-shadow: 0 0 30px 6px rgba(230,240,255,.7); }
.revela.r-crystal { box-shadow: 0 0 34px 8px rgba(120,220,255,.8); }
.revela.r-gold { box-shadow: 0 0 40px 10px rgba(255,200,60,.9); animation: vira .5s ease-out, pulsa-ouro 1.6s .5s infinite; }
@keyframes pulsa-ouro { 50% { box-shadow: 0 0 60px 18px rgba(255,210,80,1); } }
.resumo-titulo { font-family: Cinzel, serif; font-size: calc(5 * var(--u)); color: #ffd36b; }
.resumo-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(2.4 * var(--u)); max-width: calc(92 * var(--u)); }
.resumo-grade .mini { width: calc(28 * var(--u)); }

/* grade de cartas (coleção e montagem) */
.rolagem { flex: 1; min-height: 0; width: 100%; overflow-y: auto; padding: 0 calc(1 * var(--u)) 2cqh; }
.rolagem h3 { font-family: Cinzel, serif; font-size: calc(4 * var(--u)); color: #ffd36b; margin: 1.6cqh 0 1cqh; border-bottom: 1px solid rgba(216,165,74,.4); }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2 * var(--u)); }
.mini { position: relative; border: 0; padding: 0; background: none; border-radius: calc(1.4 * var(--u)); }
.mini img { width: 100%; display: block; border-radius: calc(1.4 * var(--u)); box-shadow: 0 3px 8px rgba(0,0,0,.8); }
.mini.falta img { filter: grayscale(1) brightness(.35); }
.mini.r-fullart img { box-shadow: 0 0 10px 2px rgba(190,90,255,.8); }
.mini.r-platina img { box-shadow: 0 0 10px 2px rgba(230,240,255,.8); }
.mini.r-crystal img { box-shadow: 0 0 10px 3px rgba(120,220,255,.9); }
.mini.r-gold img { box-shadow: 0 0 12px 3px rgba(255,200,60,1); }
.mini .qtd { position: absolute; right: 4%; bottom: 3%; font-size: calc(2.8 * var(--u)); font-weight: 700; background: rgba(10,6,3,.85);
  border: 1px solid #d8a54a; border-radius: 99px; padding: 0 calc(1.2 * var(--u)); color: #ffd36b; }
.mini .nova { position: absolute; left: 50%; top: -1.4cqh; transform: translateX(-50%); font-size: calc(2.6 * var(--u)); }
.monta { opacity: .6; } .monta.no-baralho { opacity: 1; } .monta.no-baralho img { outline: 3px solid #7fe07a; }
.mais-menos { position: absolute; left: 0; right: 0; top: 38%; display: flex; justify-content: space-between; padding: 0 4%; }
.mais-menos button { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; border: 2px solid #d8a54a; background: rgba(10,6,3,.88);
  color: #ffd36b; font-size: calc(5 * var(--u)); line-height: 1; font-weight: 800; }
.mais-menos button:disabled { opacity: .25; cursor: default; }
.barra-acoes { display: flex; gap: calc(4 * var(--u)); flex: none; }
.btn.cinza { filter: grayscale(1) brightness(.85); }

@media (min-aspect-ratio: 1/1) {
  .menu { width: 56cqh; gap: 1.2cqh; }
  .grade { grid-template-columns: repeat(8, 1fr); }
  .pacote-capa { width: 28cqh; }
  .abre-pacote .pacote-capa { width: 34cqh; }
  .revela { width: 40cqh; }
  .resumo-grade { max-width: 92cqw; } .resumo-grade .mini { width: 21cqh; }
  .rolagem { max-width: 150cqh; }
}
.pacote-logo { position: absolute; left: 50%; bottom: 6%; width: 74%; transform: translateX(-50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.95)); z-index: 1; }
.p-guerreiros .pacote-capa { box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px #ffb347, 0 0 24px rgba(255,120,30,.5); }
.p-misterios .pacote-capa { box-shadow: 0 8px 18px rgba(0,0,0,.85), inset 0 0 0 3px #d9a6ff, 0 0 24px rgba(170,90,255,.55); }
.pacote small { font-size: calc(2.8 * var(--u)); color: #f6ead0; opacity: .8; margin-top: -.6cqh; }
.mini.escolhe { cursor: pointer; transition: transform .15s; }
.mini.escolhe:not(:disabled):hover { transform: translateY(-.8cqh); }
.mini.usada img { outline: 4px solid #7fe07a; outline-offset: 2px; }
.mini .usando { position: absolute; left: 50%; top: -1.6cqh; transform: translateX(-50%); font-family: Cinzel, serif; font-weight: 800;
  font-size: calc(2.6 * var(--u)); background: #2f8a2a; color: #fff; padding: .2cqh calc(1.6 * var(--u)); border-radius: 99px; white-space: nowrap; }
.mini .troca-arte { position: absolute; left: 4%; top: 3%; font-size: calc(2.4 * var(--u)); font-weight: 700; background: rgba(60,20,90,.9);
  border: 1px solid #d9a6ff; border-radius: 99px; padding: 0 calc(1.2 * var(--u)); color: #f3dcff; }
.monta { cursor: pointer; }

/* abertura estilo Pocket (07/11): pacote rasga e revela a pilha de cartas já viradas */
.mesa-abertura { position: relative; width: calc(66 * var(--u)); aspect-ratio: 2 / 3; }
.pilha, .carta-pilha { position: absolute; inset: 0; }
.carta-pilha { border-radius: calc(3 * var(--u)); overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.85); transition: transform .38s ease-in, opacity .38s ease-in; }
.carta-pilha img { width: 100%; height: 100%; display: block; }
.carta-pilha.sai { transform: translateX(-130%) rotate(-18deg); opacity: 0; }
.carta-pilha .holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.carta-pilha.especial.na-frente .holo { opacity: 1; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.55) 42%, rgba(255,255,255,.1) 50%, transparent 62%) 0 0 / 260% 100%;
  animation: holo 1.8s ease-in-out infinite; }
.carta-pilha.r-gold.na-frente .holo { background-image: linear-gradient(115deg, transparent 25%, rgba(255,230,140,.7) 42%, rgba(255,255,255,.2) 50%, transparent 62%); }
.carta-pilha.r-crystal.na-frente .holo { background-image: linear-gradient(115deg, transparent 22%, rgba(160,240,255,.65) 40%, rgba(255,160,255,.35) 48%, transparent 62%); }
@keyframes holo { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.carta-pilha.na-frente.r-fullart { box-shadow: 0 0 34px 8px rgba(190,90,255,.75); }
.carta-pilha.na-frente.r-platina { box-shadow: 0 0 34px 8px rgba(230,240,255,.75); }
.carta-pilha.na-frente.r-crystal { box-shadow: 0 0 38px 10px rgba(120,220,255,.85); }
.carta-pilha.na-frente.r-gold { box-shadow: 0 0 44px 12px rgba(255,200,60,.95); animation: pulsa-ouro2 1.6s infinite; }
@keyframes pulsa-ouro2 { 50% { box-shadow: 0 0 64px 20px rgba(255,215,90,1); } }
.mesa-abertura .abre-pacote { position: absolute; inset: -4% -3%; z-index: 20; animation: treme-pacote 1.2s ease-in-out infinite; }
.mesa-abertura .abre-pacote .pacote-capa { width: 100%; height: 100%; aspect-ratio: auto; }
.pacote-capa.sem-tira::before { display: none; }
.abre-pacote .tira { position: absolute; left: 0; right: 0; top: 0; height: 9%; border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0;
  background: repeating-linear-gradient(90deg, #d8a54a 0 6px, #8a5a14 6px 9px); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.abre-pacote.rasga { animation: desce-pacote 1.1s ease-in forwards; }
.abre-pacote.rasga .tira { animation: voa-tira .55s ease-out forwards; }
@keyframes voa-tira { to { transform: translate(40%, -260%) rotate(18deg); opacity: 0; } }
@keyframes desce-pacote { 0%, 40% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(115%); opacity: 0; } }
@media (min-aspect-ratio: 1/1) { .mesa-abertura { width: 40cqh; } }

/* pacote desenhado (GPT, 07/11): imagem com transparência; rasgo em zigue-zague */
.pacote-img { position: relative; width: calc(38 * var(--u)); aspect-ratio: 520 / 847; }
.pacote-img > img.pacote-arte, .pacote-corpo, .pacote-tira { position: absolute; inset: 0; width: 100%; height: 100%; }
.pacote-corpo img.pacote-arte, .pacote-tira img.pacote-arte { position: absolute; inset: 0; width: 100%; height: 100%; }
.pacote-img .pacote-logo { position: absolute; left: 50%; bottom: 11%; width: 72%; transform: translateX(-50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.95)); }
.p-guerreiros .pacote-img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(255,120,30,.45)); }
.p-misterios .pacote-img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(170,90,255,.5)); }
.mesa-abertura .abre-pacote { position: absolute; inset: auto; left: -5%; top: -9.7%; width: 110%; z-index: 20; }
.mesa-abertura .abre-pacote .pacote-img { width: 100%; }
.abre-pacote.rasga .pacote-tira { animation: voa-tira2 .6s ease-out forwards; }
@keyframes voa-tira2 { 0% { transform: none; } 30% { transform: translate(2%, -4%) rotate(2deg); } 100% { transform: translate(35%, -60%) rotate(22deg); opacity: 0; } }
.abre-pacote.rasga { animation: desce-pacote2 1.1s ease-in forwards; }
@keyframes desce-pacote2 { 0%, 45% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(110%); opacity: 0; } }
@media (min-aspect-ratio: 1/1) { .pacote-img { width: 30cqh; } }

/* God Pack */
.abertura.god { background: radial-gradient(circle at 50% 45%, rgba(255,200,60,.45), rgba(120,60,0,.25) 40%, rgba(5,3,2,.95) 75%), #070402; overflow: hidden; }
.abertura.god::before { content: ""; position: absolute; inset: -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,215,90,.18) 0 6deg, transparent 6deg 18deg); animation: raios 12s linear infinite; }
@keyframes raios { to { transform: rotate(360deg); } }
.god-aviso { position: absolute; top: 4cqh; left: 0; right: 0; text-align: center; z-index: 30; font-family: Cinzel, serif; font-weight: 800;
  font-size: calc(11 * var(--u)); color: #ffe28a; text-shadow: 0 0 20px rgba(255,190,40,1), 0 4px 0 #6a3d00; animation: god-surge .8s ease-out; }
@keyframes god-surge { from { transform: scale(3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== Meus baralhos + editor estilo Pocket (07/11) ===== */
.meus-baralhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)); padding-top: 1cqh; }
.caixa-baralho { display: flex; flex-direction: column; align-items: center; gap: .4cqh; border: 0; background: none; padding: 0; position: relative; }
.caixa-capa { width: 100%; aspect-ratio: 3 / 4; border-radius: calc(1.6 * var(--u)); overflow: hidden; position: relative;
  background: linear-gradient(160deg, #3a2410, #120a04); box-shadow: 0 6px 14px rgba(0,0,0,.85), inset 0 0 0 3px #8a5a14;
  display: grid; place-items: center; }
.caixa-capa img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.caixa-capa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #d8a54a, inset 0 -40px 30px -20px rgba(0,0,0,.7); }
.caixa-baralho.pronto .caixa-capa::after { box-shadow: inset 0 0 0 3px #7fe07a, inset 0 -40px 30px -20px rgba(0,0,0,.7); }
.caixa-capa span { font-size: calc(14 * var(--u)); color: #d8a54a; font-weight: 800; line-height: 1; }
.caixa-baralho.novo .caixa-capa { background: rgba(20,12,6,.6); box-shadow: inset 0 0 0 2px dashed #8a5a14; border: 2px dashed #8a5a14; }
.caixa-energia { position: absolute; top: 4%; right: 6%; width: 22%; filter: drop-shadow(0 2px 3px #000); }
.caixa-baralho b { font-family: Cinzel, serif; font-size: calc(3.2 * var(--u)); color: #ffd36b; text-align: center; line-height: 1.1; }
.caixa-baralho small { font-size: calc(2.8 * var(--u)); color: #f6ead0; opacity: .85; }
.caixa-baralho.pronto small { color: #7fe07a; opacity: 1; }

.tela-menu.editor { gap: 1.2cqh; padding-top: 2cqh; }
.ed-nome { flex: 1; min-width: 0; font-family: Cinzel, serif; font-weight: 800; font-size: calc(4.6 * var(--u)); color: #ffd36b;
  background: rgba(20,12,6,.7); border: 1px solid #8a5a14; border-radius: calc(1.4 * var(--u)); padding: .5cqh calc(2 * var(--u)); outline: none; }
.ed-nome:focus { border-color: #ffd36b; }
.ed-energia { display: flex; align-items: center; gap: calc(1.6 * var(--u)); flex: none; width: 100%; }
.ed-energia > span { font-family: Cinzel, serif; font-size: calc(3.2 * var(--u)); color: #f6ead0; margin-right: auto; }
.en-op { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: 2px solid #5a3a12; background: rgba(20,12,6,.8);
  display: grid; place-items: center; padding: 0; opacity: .55; }
.en-op img { width: 76%; } .en-op small { font-size: calc(2.4 * var(--u)); color: #f6ead0; font-weight: 700; }
.en-op.sel { opacity: 1; border-color: #ffd36b; box-shadow: 0 0 10px rgba(255,190,80,.8); }
.ed-espacos { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(.8 * var(--u)); width: 100%; flex: none;
  background: rgba(10,6,3,.55); border: 1px solid rgba(216,165,74,.35); border-radius: calc(1.6 * var(--u)); padding: calc(1.2 * var(--u)); }
.espaco { aspect-ratio: 2 / 3; border-radius: calc(.8 * var(--u)); border: 1.5px dashed rgba(216,165,74,.35); background: rgba(0,0,0,.25); padding: 0; position: relative; overflow: hidden; }
.espaco.cheio { border: 0; box-shadow: 0 2px 4px rgba(0,0,0,.8); cursor: pointer; }
.espaco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.espaco.cheio:hover img { filter: brightness(.6); }
.selo-capa { position: absolute; top: 2%; left: 4%; font-style: normal; font-size: calc(2.4 * var(--u)); color: #ffd36b; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.ed-aviso { font-size: calc(2.8 * var(--u)); opacity: .85; margin: 0; }
.ed-barra { display: flex; align-items: center; gap: calc(1.2 * var(--u)); width: 100%; flex: none; flex-wrap: wrap; }
.ed-filtros { display: flex; gap: calc(1 * var(--u)); flex: 1; flex-wrap: wrap; }
.chip { height: calc(7.5 * var(--u)); min-width: calc(7.5 * var(--u)); padding: 0 calc(2 * var(--u)); border-radius: 99px; border: 1px solid #8a5a14;
  background: rgba(20,12,6,.8); color: #f6ead0; font-weight: 700; font-size: calc(2.8 * var(--u)); display: inline-flex; align-items: center; justify-content: center; }
.chip img { width: calc(5 * var(--u)); }
.chip.sel { border-color: #ffd36b; background: #5a3a12; color: #ffd36b; }
.acao-chip { background: #3a2410; color: #ffd36b; }
.ed-colecao { padding-top: .6cqh; }
.ed-grade { grid-template-columns: repeat(5, 1fr); gap: calc(1.6 * var(--u)); }
.ed-carta { cursor: pointer; }
.ed-carta.esgotada img { filter: grayscale(.8) brightness(.45); }
.ed-carta.usada-no img { outline: 2px solid #7fe07a; outline-offset: 1px; }
.ed-carta .info { position: absolute; top: 3%; right: 4%; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); border-radius: 50%;
  border: 1.5px solid #ffd36b; background: rgba(10,6,3,.85); color: #ffd36b; font-family: Georgia, serif; font-style: italic; font-weight: 700;
  font-size: calc(3 * var(--u)); line-height: 1; padding: 0; display: grid; place-items: center; }
#ed-excluir.confirma { filter: none; background: #8a1f14; color: #fff; }
.abertura .barra-acoes { justify-content: center; }

@media (max-aspect-ratio: 1/1) {
  .ed-espacos { grid-template-columns: repeat(10, 1fr); }
}
@media (min-aspect-ratio: 1/1) {
  .meus-baralhos { grid-template-columns: repeat(5, 1fr); max-width: 150cqh; margin: 0 auto; }
  .tela-menu.editor { max-width: 170cqh; margin: 0 auto; left: 0; right: 0; }
  .ed-espacos { grid-template-columns: repeat(15, 1fr); }
  .ed-grade { grid-template-columns: repeat(10, 1fr); }
}
.ed-aviso.pisca { animation: pisca-aviso .6s; color: #ffb38a; } @keyframes pisca-aviso { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.orbes .terra { background: radial-gradient(circle at 35% 30%, #e6ffd0, #4caf3a 60%, #1d4a12); }
.avatar.terra { background-image: url(img/avatar_terra.png); }
.energia.verde { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #e6ffd0, #4caf3a 50%, #1d4a12 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(110,220,80,.8)); }
/* ampulhetas */
.amp-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(2 * var(--u)); flex: none; }
.amp-qtd { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); font-family: Cinzel, serif; font-weight: 800; font-size: calc(4.4 * var(--u)); color: #ffd36b; }
.amp-qtd img, .fim-amp img { width: calc(8 * var(--u)); filter: drop-shadow(0 2px 4px #000); }
.amp-dica { font-size: calc(3 * var(--u)); color: #f6ead0; opacity: .85; width: 100%; text-align: center; }
.amp-barra .chip:disabled { opacity: .4; }
.fim-amp { display: inline-flex; align-items: center; gap: calc(1.5 * var(--u)); font-family: Cinzel, serif; font-weight: 800; font-size: calc(4.4 * var(--u)); color: #ffd36b; animation: surge .6s ease-out; }
@media (min-aspect-ratio: 1/1) { .amp-qtd img, .fim-amp img { width: 5cqh; } }

/* sagrado (07/11) */
.orbes .sagrado { background: radial-gradient(circle at 35% 30%, #fffbe6, #f2c94c 60%, #8a5a00); }
.avatar.sagrado { background-image: url(img/avatar_sagrado.png); }
.energia.dourado { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #fffbe6, #f2c94c 50%, #8a5a00 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(255,210,90,.85)); }

/* físico + fusão (08/11) */
.orbes .fisico { background: radial-gradient(circle at 35% 30%, #f2f2f2, #9aa3ad 60%, #3a3f46); }
.energia.aco { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #f2f2f2, #9aa3ad 50%, #3a3f46 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(200,210,225,.75)); }
.barra .extra { height: calc(11 * var(--u)); aspect-ratio: 2 / 3; border-radius: calc(.8 * var(--u)); flex: none; cursor: pointer;
  box-shadow: 0 0 0 2px #ffd36b, 0 0 10px rgba(255,200,80,.7); margin: calc(-1 * var(--u)) 0; }
@media (min-aspect-ratio: 1/1) { .barra .extra { height: 8cqh; } }
.espaco.extra-slot { border: 2px solid rgba(255,211,107,.8); box-shadow: 0 0 8px rgba(255,200,80,.5); display: grid; place-items: center; color: #ffd36b; }
.espaco.extra-slot small { font-size: calc(2.4 * var(--u)); font-weight: 700; }

/* morte (08/11) */
.orbes .morte { background: radial-gradient(circle at 35% 30%, #f4f1ea, #8f8a80 60%, #1c1a18); }
.avatar.morte { background-image: url(img/avatar_morte.png); }
.energia.osso { background: url(img/btn_aro.png) center/100% 100% no-repeat,
    radial-gradient(closest-side, #f4f1ea, #8f8a80 50%, #1c1a18 76%, transparent 78%) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(200,220,235,.7)); }

/* Set Base (08/11): baralho de físico, 3 pacotes e a janela de escolher carta */
.avatar.fisico { background-image: url(img/avatar_fisico.png); }
.p-orshabaal .pacote-img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(255,90,20,.5)); }
.p-oberon .pacote-img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(255,210,90,.5)); }
.p-medusa .pacote-img { filter: drop-shadow(0 10px 16px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(90,220,120,.45)); }
.escolha { display: flex; flex-direction: column; align-items: center; gap: 2cqh; max-width: 94cqw; }
.escolha-titulo { font-size: calc(4.4 * var(--u)); }
.escolha-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqh; max-height: 62cqh; overflow-y: auto; padding: .5cqh; }
.escolha-carta { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; transition: transform .15s; }
.escolha-carta:hover { transform: translateY(-.8cqh); }
.escolha-carta img { width: calc(20 * var(--u)); display: block; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.8); }
@media (orientation: landscape) { .escolha-titulo { font-size: 3.4cqh; } .escolha-carta img { width: 17cqh; } }

/* Vocação (08/11): botão do poder na barra e escolha antes da partida */
.barra .voc { margin-left: calc(1.5 * var(--u)); padding: calc(.8 * var(--u)) calc(2 * var(--u)); border-radius: 99px; border: 1px solid #e2b25a;
  background: linear-gradient(#5a3a12, #2a1a08); color: #ffe2a0; font-family: Cinzel, serif; font-size: calc(2.6 * var(--u)); cursor: pointer;
  box-shadow: 0 0 8px rgba(255,190,80,.45); flex: none; }
.barra .voc.usada { opacity: .35; box-shadow: none; filter: grayscale(.8); }
.vocacoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8cqh 1cqw; max-width: 94cqw; }
.voc-titulo { color: #ffd36b; font-family: Cinzel, serif; font-size: calc(3 * var(--u)); margin-right: .5cqw; }
.voc-op { padding: .7cqh 1.6cqw; border-radius: 99px; border: 1px solid #6b5432; background: rgba(20,14,8,.8); color: #f6ead0;
  font-family: Cinzel, serif; font-size: calc(2.8 * var(--u)); cursor: pointer; }
.voc-op.sel { border-color: #ffd36b; color: #ffd36b; box-shadow: 0 0 10px rgba(255,200,90,.55); }
.voc-desc { width: 100%; text-align: center; margin: 0; color: #f6ead0; font-size: calc(2.6 * var(--u)); opacity: .9; }
@media (orientation: landscape) { .voc-titulo, .voc-op { font-size: 1.9cqh; } .voc-desc { font-size: 1.7cqh; } .barra .voc { font-size: 1.8cqh; } }
/* com a escolha de vocação, os baralhos da tela "Jogar" ficam um pouco menores pra tudo caber */
#tela-jogar { gap: 1.6cqh; }
#tela-jogar .baralho img { width: calc(22 * var(--u)); }
@media (orientation: landscape) { #tela-jogar .baralho img { width: 17cqh; } #tela-jogar .baralho b { font-size: 2cqh; } #tela-jogar .baralho small { font-size: 1.5cqh; } }

/* ===== Tela inicial, conta, Premium e tutorial (09/11) — arte do GPT em img/ui_*.png ===== */
.inicio { background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.75)), url(img/ui_keyart.jpg) center/cover no-repeat, #120c08; }
@media (orientation: landscape) { .inicio { background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.1), rgba(0,0,0,.7)), url(img/ui_keyart.jpg) center 22%/cover no-repeat, #120c08; } }
.topo-home { position: absolute; top: 1.6cqh; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 calc(3 * var(--u)); z-index: 2; }
.chip-premium, .chip-conta { display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: .5cqh calc(2.4 * var(--u)) .5cqh .5cqh; border-radius: 99px;
  border: 1px solid #e2b25a; background: linear-gradient(rgba(60,30,10,.85), rgba(20,10,5,.9)); color: #ffe2a0; font-family: Cinzel, serif;
  font-size: calc(3 * var(--u)); cursor: pointer; box-shadow: 0 0 12px rgba(0,0,0,.6); }
.chip-premium img, .chip-conta img { width: calc(8 * var(--u)); height: calc(8 * var(--u)); object-fit: contain; }
.menu-item.primario { background-image: url(img/ui_btn_primario.png); }
.menu-item.secundario { background-image: url(img/ui_btn_secundario.png); --h: calc(17 * var(--u)); }
.menu-item.secundario b { color: #e8f1ff; text-shadow: 0 2px 0 #0b1830; font-size: calc(3.5 * var(--u)); }
.menu-item.curto { width: 70%; align-self: center; --h: calc(13 * var(--u)); }
.menu-par { display: flex; gap: calc(2 * var(--u)); } .menu-par .menu-item { flex: 1; min-width: 0; padding-left: calc(6 * var(--u)); padding-right: calc(6 * var(--u)); }
.menu-item b { letter-spacing: .03em; }
.btn { background-image: url(img/ui_btn_primario.png); }
.btn.cinza { background-image: url(img/ui_btn_secundario.png); }
.relogio-pacote { margin: -1cqh 0 0; font-family: Cinzel, serif; color: #ffd36b; font-size: calc(3.4 * var(--u)); font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #000; }

/* painel (conta / Premium) */
.painel-ui { --w: min(88cqw, calc(86 * var(--u))); width: var(--w); box-sizing: border-box; flex: 1; min-height: 0; overflow-y: auto;
  /* a moldura vai no border-image (fatias na escala da largura): o conteúdo fica sempre dentro dela, mesmo rolando */
  border-style: solid; border-color: transparent; border-width: calc(var(--w) * 130 / 640) calc(var(--w) * 64 / 640) calc(var(--w) * 130 / 640);
  border-image: url(img/ui_painel.png) 130 64 130 fill / 1 / 0 stretch; padding: calc(var(--w) * .01) calc(var(--w) * .05) calc(var(--w) * .02);
  display: flex; flex-direction: column; gap: 1.4cqh; color: #f6ead0; }
.painel-ui label { display: flex; flex-direction: column; gap: .5cqh; font-size: calc(2.9 * var(--u)); color: #e8d7b5; }
.painel-ui input { font: inherit; font-size: calc(3.3 * var(--u)); padding: 1cqh calc(2 * var(--u)); border-radius: 8px; border: 1px solid #8a6a3c;
  background: rgba(10,6,3,.75); color: #fff4da; outline: none; }
.painel-ui input:focus { border-color: #ffd36b; box-shadow: 0 0 8px rgba(255,200,90,.5); }
.botao-ui { font-family: Cinzel, serif; font-weight: 800; font-size: calc(3.6 * var(--u)); color: #fff4da; border: 0; cursor: pointer; padding: 1.6cqh calc(4 * var(--u));
  background: url(img/ui_btn_primario.png) center/100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.8)); }
.botao-ui.secundario { background-image: url(img/ui_btn_secundario.png); color: #e8f1ff; }
.botao-ui:disabled { opacity: .4; cursor: default; }
.botao-ui:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(255,190,80,.7)); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--u)); padding: 1.3cqh; border-radius: 10px; border: 0;
  background: #fff; color: #222; font-weight: 700; font-size: calc(3.3 * var(--u)); cursor: pointer; }
.btn-google .g { font-weight: 800; color: #4285f4; font-size: calc(4 * var(--u)); }
.ou { display: flex; align-items: center; gap: 2cqw; color: #b9a27a; font-size: calc(2.8 * var(--u)); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: #6b5432; }
.link-ui { background: none; border: 0; color: #ffd36b; text-decoration: underline; cursor: pointer; font-size: calc(3 * var(--u)); }
.erro-form { margin: 0; min-height: 1em; color: #ff8a7a; font-size: calc(2.8 * var(--u)); }
.texto-ui { margin: 0; font-size: calc(3.1 * var(--u)); line-height: 1.35; }
.mini-ui { margin: 0; font-size: calc(2.6 * var(--u)); opacity: .75; text-align: center; }
.aviso-proto { margin: .5cqh 0 0; font-size: calc(2.5 * var(--u)); color: #ffcf7a; text-align: center; opacity: .85; }
.perfil-topo { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.perfil-topo img { width: calc(22 * var(--u)); } .perfil-topo b { font-family: Cinzel, serif; font-size: calc(4.4 * var(--u)); color: #ffd36b; display: block; }
.perfil-topo small { opacity: .75; font-size: calc(2.8 * var(--u)); }
.avatares-ui { display: flex; flex-wrap: wrap; gap: calc(1.6 * var(--u)); justify-content: center; }
.avatares-ui .av { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; opacity: .55; transition: .15s; }
.avatares-ui .av img { width: calc(15 * var(--u)); display: block; } .avatares-ui .av.sel { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 8px #ffd36b); }
.premium-selo { width: calc(26 * var(--u)); align-self: center; filter: drop-shadow(0 0 16px rgba(255,210,120,.7)); }
.premium-preco { margin: 0; text-align: center; font-family: Cinzel, serif; font-size: calc(9 * var(--u)); color: #ffd36b; }
.premium-preco small { font-size: calc(3.4 * var(--u)); color: #f6ead0; }
.premium-lista { margin: 0; padding-left: 1.2em; font-size: calc(3.4 * var(--u)); line-height: 1.6; }
@media (orientation: landscape) {
  .painel-ui { --w: 60cqh; }
  .painel-ui label, .ou, .link-ui, .texto-ui { font-size: 1.9cqh; } .painel-ui input, .btn-google { font-size: 2.1cqh; }
  .botao-ui { font-size: 2.3cqh; } .mini-ui, .aviso-proto, .erro-form { font-size: 1.6cqh; }
  .chip-premium, .chip-conta { font-size: 1.9cqh; } .chip-premium img, .chip-conta img { width: 5cqh; height: 5cqh; }
  .relogio-pacote { font-size: 2.2cqh; } .premium-preco { font-size: 6cqh; } .premium-preco small, .premium-lista { font-size: 2.2cqh; }
  .avatares-ui .av img { width: 9cqh; } .perfil-topo img { width: 13cqh; } .perfil-topo b { font-size: 2.8cqh; } .perfil-topo small { font-size: 1.7cqh; }
  .menu-item.secundario b { font-size: 2.1cqh; } .menu-item.secundario { --h: 9cqh; } .menu-item.curto { --h: 7cqh; }
}

/* tutorial: a caixa tem a proporção do painel (640x952) e tudo dentro é medido pela largura dela,
   então o texto fica sempre dentro da moldura (laterais ~9%, topo ~17%, base ~16% da largura) */
.tutorial { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.78); }
.tut-caixa { position: relative; container-type: inline-size; --w: min(94cqw, 64cqh); width: var(--w); aspect-ratio: 640 / 952; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw;
  padding: calc(var(--w) * .18) calc(var(--w) * .115) calc(var(--w) * .17); background: url(img/ui_painel.png) center/100% 100% no-repeat; color: #f6ead0; text-align: center; }
.tut-img { width: 100%; max-height: 54cqw; max-width: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.8)); border-radius: 8px; }
.tut-texto { width: 100%; min-width: 0; overflow-wrap: break-word; }
.tut-texto h3 { margin: 0 0 1.5cqw; font-family: Cinzel, serif; color: #ffd36b; font-size: 6.6cqw; line-height: 1.15; text-wrap: balance; }
.tut-texto p { margin: 0; font-size: 5.2cqw; line-height: 1.35; text-wrap: pretty; } .tut-texto b { color: #ffd36b; }
.tut-texto .tut-passo { opacity: .6; font-size: 3.8cqw; margin-bottom: 1cqw; }
.tut-botoes { display: flex; gap: 3cqw; width: 100%; justify-content: center; }
.tut-botoes .botao-ui { flex: 1 1 0; min-width: 0; max-width: 34cqw; font-size: 5cqw; padding: 2.8cqw 2cqw; }
.tut-fechar { position: absolute; top: 10.5%; right: 9.5%; background: none; border: 0; color: #ffd36b; font-size: 6cqw; cursor: pointer; }

/* avatar por vocação na batalha */
.avatar.voc-knight { background-image: url(img/avatar_knight.png); } .avatar.voc-paladin { background-image: url(img/avatar_paladin.png); }
.avatar.voc-sorcerer { background-image: url(img/avatar_sorcerer.png); } .avatar.voc-druid { background-image: url(img/avatar_druid.png); }
.avatar.voc-monk { background-image: url(img/avatar_monk.png); }
.voc-op { display: inline-flex; align-items: center; gap: .6cqw; padding-left: .4cqw; }
.voc-op img { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
@media (orientation: landscape) { .voc-op img { width: 3.6cqh; height: 3.6cqh; } }
/* avatares novos (09/11): força recarregar */
.avatar.voc-knight { background-image: url(img/avatar_knight.png?v=2); } .avatar.voc-paladin { background-image: url(img/avatar_paladin.png?v=2); } .avatar.voc-druid { background-image: url(img/avatar_druid.png?v=2); }
.avatar.voc-monk { background-image: url(img/avatar_monk.png?v=2); }

/* prévia grande da carta ao passar o mouse (computador) */
@media (min-aspect-ratio: 1/1) and (hover: hover) and (pointer: fine) {
  .previa { display: block; position: absolute; left: 1.2cqw; top: 50%; height: 68cqh; translate: 0 -50%; border-radius: 2.2cqh; z-index: 8;
    pointer-events: none; opacity: 0; transition: opacity .12s; box-shadow: 0 1.4cqh 4cqh rgba(0,0,0,.85); }
  .previa.mostra { opacity: 1; }
}

/* aviso de login obrigatório (jogar / abrir pacotes) */
.aviso-login { font-size: calc(3 * var(--u)); margin: 0 0 1.4em; padding: .7em 1em; border-radius: .6em; text-align: center; font-weight: 700; color: #1b1206;
  background: linear-gradient(#ffd36b, #e2a93c); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (min-aspect-ratio: 1/1) { .aviso-login { font-size: 1.9cqh; } }

/* login: senha com olho, lembrar, formulário */
.form-conta { display: contents; }
.senha-caixa { position: relative; display: block; }
.senha-caixa input { width: 100%; padding-right: 3em !important; }
.olho { position: absolute; right: .35em; top: 50%; translate: 0 -50%; background: none; border: 0; padding: .3em; color: #d8b778; cursor: pointer; display: grid; place-items: center; }
.olho:hover { color: #ffd36b; }
.olho svg { width: 1.3em; height: 1.3em; }
.painel-ui label.lembrar { display: flex; flex-direction: row; align-items: center; gap: .6em; cursor: pointer; }
.lembrar input { width: 1.1em !important; height: 1.1em; padding: 0 !important; margin: 0; accent-color: #e2a93c; transform: scale(1.25); }

/* tutorial: pular */
.tut-pular { background: none; border: 0; color: #d8c49a; font-family: inherit; font-size: 4cqw; text-decoration: underline; cursor: pointer; opacity: .85; margin-top: -1cqw; }
.tut-pular:hover { color: #ffd36b; opacity: 1; }
.ic-share { display: inline-block; font-weight: 700; color: #ffd36b; }