/* =====================================================================================
   jogo.css — O ARQUIVO DO ETERNO (interface)
   Responsivo de verdade: as casas são dimensionadas por --cw/--ch, que respeitam ao mesmo
   tempo a ALTURA disponível (2 campos + mão + painéis cabem em 100dvh) e a LARGURA (4 casas
   por fileira). Foco: celular. Desktop só ganha mais respiro.
   ===================================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --ouro:#c9a961; --ouro-forte:#f2d99a; --ouro-fraco:rgba(201,169,97,.5);
  --eter:#49cfc9; --sangue:#c2513a;
  --papel:#efe3c8; --tinta:#0a0d11;
  --casa-bg:rgba(4,8,12,.55);
  /* 11vh: MEDIDO em 02/10/2026 (tools/calibra-mesa.mjs) — é o maior fator que ainda deixa a barra de baixo
     (vida, postura, avançar fase) DENTRO da tela em toda a faixa de 667px a 1000px de altura. Com 12.4vh a
     barra escapava em telas de 900px; com os 15vh do desktop escapava sempre. */
  --cw: min(calc(11vh * 0.7161), calc((100vw - 44px) / 2.9));
  --ch: calc(var(--cw) / 0.7161);
  --raio: calc(var(--cw) * .055);
}
html,body{ height:100%; background:#05070a; overscroll-behavior:none; }
body{ font-family:"Trebuchet MS",Verdana,sans-serif; color:#e9dcc0; -webkit-font-smoothing:antialiased;
      user-select:none; }
svg.ic{ display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7;
        stroke-linecap:round; stroke-linejoin:round; }
.escondido{ display:none !important; }

/* ======================= TELA (login / menu / vitória / derrota) ======================= */
.tela{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
       padding:24px; z-index:50; text-align:center; }
.tela .fundo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.tela .veu{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, rgba(4,8,12,.42) 0%, rgba(3,6,9,.86) 60%, rgba(2,4,6,.96) 100%); }
.tela .conteudo{ position:relative; width:min(440px, 100%); display:flex; flex-direction:column; align-items:center; gap:14px; }
.tela .selo{ width:min(190px, 42vw); filter:drop-shadow(0 0 26px rgba(242,217,154,.35)); mix-blend-mode:screen; }
.tela h1{ font-size:clamp(24px, 7.5vw, 40px); letter-spacing:.14em; text-transform:uppercase; font-weight:normal;
          color:#f3e6c8; text-shadow:0 2px 18px rgba(0,0,0,.9), 0 0 40px rgba(242,217,154,.22); line-height:1.15; }
.tela h2{ font-size:clamp(11px, 3.2vw, 14px); letter-spacing:.42em; text-transform:uppercase; color:#bda876; font-weight:normal; }
.tela .faixa{ width:100%; opacity:.55; mix-blend-mode:screen; }
.campo{ width:100%; text-align:left; display:flex; flex-direction:column; gap:5px; }
.campo label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#a8945f; }
.campo input{ width:100%; padding:13px 14px; border-radius:10px; font-size:17px; color:#f5e9cd;
              background:rgba(4,8,12,.8); border:1px solid var(--ouro-fraco); outline:none; }
.campo input:focus{ border-color:var(--ouro); box-shadow:0 0 14px rgba(242,217,154,.22); }
.btn{ width:100%; padding:15px 18px; border-radius:11px; font-size:15px; letter-spacing:.14em; text-transform:uppercase;
      color:#f6e9c4; border:1px solid var(--ouro); cursor:pointer;
      background:linear-gradient(180deg, rgba(62,47,18,.94), rgba(24,18,7,.96)); }
.btn:active{ transform:translateY(1px); }
.btn.claro{ background:linear-gradient(180deg, rgba(96,74,28,.95), rgba(40,30,11,.96)); }
.btn.ghost{ background:rgba(4,8,12,.6); border-color:rgba(201,169,97,.3); color:#c9b47e; }
.btn.pequeno{ width:auto; padding:10px 16px; font-size:12px; }
.erro{ color:#e2705f; font-size:13px; min-height:18px; }
.niveis{ display:flex; gap:8px; width:100%; }
.niveis .btn{ flex:1; }
.niveis .btn.on{ border-color:var(--ouro-forte); box-shadow:0 0 16px rgba(242,217,154,.35); background:linear-gradient(180deg, rgba(96,74,28,.95), rgba(40,30,11,.96)); }
.rodape{ font-size:11px; color:#7d6e4c; letter-spacing:.1em; }
.link{ color:#c9b47e; text-decoration:underline; font-size:12px; cursor:pointer; }

/* ======================= MESA ======================= */
#mesa{ position:relative; height:100dvh; width:100%; max-width:980px; margin:0 auto; overflow:hidden;
       display:flex; flex-direction:column; padding:8px 14px calc(10px + env(safe-area-inset-bottom)); gap:5px; }

#mesa .piso{ position:absolute; inset:-2px; background-image:url("../assets/piso.webp"); background-size:cover;
             background-position:center; filter:saturate(.82) contrast(1.05); }
#mesa .veu{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%, rgba(8,16,20,.34) 0%, rgba(4,9,12,.8) 58%, rgba(2,4,6,.96) 100%); }
#mesa .veu2{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,.68) 100%); }
#mesa .moldura{ position:absolute; inset:5px; border:1px solid var(--ouro-fraco); border-radius:12px; pointer-events:none; }
#mesa .moldura::after{ content:""; position:absolute; inset:3px; border:1px solid rgba(201,169,97,.12); border-radius:9px; }
.orn{ position:absolute; width:clamp(48px, 11vw, 84px); opacity:.34; mix-blend-mode:screen; pointer-events:none; }
.orn.tl{ left:3px; top:3px; } .orn.tr{ right:3px; top:3px; transform:scaleX(-1); }
.orn.bl{ left:3px; bottom:3px; transform:scaleY(-1); } .orn.br{ right:3px; bottom:3px; transform:scale(-1,-1); }
#mesa canvas.fx{ position:absolute; inset:0; pointer-events:none; opacity:.5; }

#conteudo{ position:relative; z-index:3; display:flex; flex-direction:column; height:100%; gap:3px; min-height:0; }
/* BLINDAGEM (02/10/2026): o campo pode encolher, a BARRA DE BAIXO nunca — é ela que tem a Vida, a postura e
   o botão de avançar fase. Sem isto, quando a coluna estoura, a barra é a primeira a sair da tela (e com
   `overflow:hidden` no #mesa ela fica inalcançável: o jogo trava de verdade). */
#mesa #painel, #mesa .barra, #mesa .hud{ flex:0 0 auto; }
#campo-oponente, #campo-jogador{ flex:0 1 auto; min-height:0; }

/* ---- HUD ---- */
.hud{ display:flex; align-items:center; justify-content:space-between; gap:6px; flex:0 0 auto; }
.bloco{ background:rgba(4,8,12,.78); border:1px solid var(--ouro-fraco); border-radius:calc(var(--raio)*1.4);
        padding:4px 8px; display:flex; align-items:center; gap:5px; }
.bloco .rot{ font-size:9px; letter-spacing:1.4px; color:#bda876; text-transform:uppercase; }
.bloco .val{ font-size:clamp(14px, 4.1vw, 19px); font-weight:bold; color:#f5e9cd; line-height:1; }
.val.vida{ color:#e2705f; } .val.mana{ color:#69cdf0; }
.val.pulso{ animation:pulso .5s ease-out; }
@keyframes pulso{ 0%{ transform:scale(1.5); filter:brightness(2); } 100%{ transform:scale(1); } }
.quem{ display:flex; align-items:center; gap:6px; min-width:0; }
.quem .selo{ width:26px; height:26px; border-radius:50%; border:1px solid var(--ouro); display:flex;
             align-items:center; justify-content:center; font-size:11px; color:#f2d99a; flex:0 0 auto;
             background:radial-gradient(circle at 35% 30%, #2f4150, #0a1014); }
.quem .nome{ font-size:clamp(10px,2.9vw,12px); letter-spacing:1.1px; color:#d9c9a3; text-transform:uppercase;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- campo ---- */
.campo-jogo{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; }
.faixa{ display:flex; flex-direction:column; gap:2px; }
.rotfaixa{ display:flex; justify-content:space-between; padding:0 4px; }
.rotfaixa span{ font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(214,186,124,.8); }
.rotfaixa .ret{ color:rgba(201,169,97,.85); } .rotfaixa .lat{ color:rgba(73,207,201,.7); }
.rotfaixa .fre{ color:rgba(214,96,72,.9); } .rotfaixa .oc{ visibility:hidden; }
.trilho{ display:flex; justify-content:center; align-items:center; gap:calc(var(--cw)*.13); }
.casa{ position:relative; width:var(--cw); height:var(--ch); border-radius:var(--raio); padding:3px;
       background:var(--casa-bg); border:2px solid var(--ouro-fraco); flex:0 0 auto;
       transition:box-shadow .18s, border-color .18s, transform .18s; }
.casa.frente{ border-color:rgba(194,81,58,.8); }
.casa.lateral{ border-color:rgba(73,207,201,.65); }
.casa .vago{ position:absolute; inset:4px; border-radius:calc(var(--raio)*.8); border:1px dashed rgba(201,169,97,.3);
             display:flex; align-items:center; justify-content:center; }
.casa.frente .vago{ border-color:rgba(194,81,58,.42); }
.casa.lateral .vago{ border-color:rgba(73,207,201,.4); }
.casa .vago::after{ content:""; width:44%; aspect-ratio:.7; border-radius:4px; background:rgba(201,169,97,.06);
                    border:1px solid rgba(201,169,97,.18); }
.casa img{ position:relative; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--raio)*.8); display:block; }
.casa.alvo-valido{ box-shadow:0 0 0 2px var(--eter), 0 0 18px rgba(73,207,201,.55); cursor:pointer; }
.casa.alvo-vida{ box-shadow:0 0 0 2px var(--sangue), 0 0 22px rgba(194,81,58,.7); animation:bate .9s infinite; }
@keyframes bate{ 50%{ box-shadow:0 0 0 3px #e2705f, 0 0 26px rgba(226,112,95,.8); } }
.casa.ocupada{ cursor:pointer; }
.casa.marcada{ box-shadow:0 0 0 2px var(--eter), 0 0 18px rgba(73,207,201,.5); }
/* ATAQUE EM CONJUNTO: criatura que pode atacar / que já está no grupo de ataque */
/* ---- MÍTICA reagível (janela de reação no turno do adversário) ---- */
.carta-mao.mitica-brilha{ box-shadow:0 0 0 2px var(--ouro), 0 0 20px rgba(201,169,97,.85); animation:pulsaMit .9s infinite; }
@keyframes pulsaMit{ 50%{ box-shadow:0 0 0 3px #f0d99a, 0 0 28px rgba(240,217,154,.95); transform:translateY(-4px); } }
.btn.aviso{ opacity:.62; cursor:default; }
/* ---- LISTA DE ALVOS (escolher em vez de o jogo escolher no chute) ---- */
.lista-alvos{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; margin-top:4px; }
.lista-alvos.com-arte{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.op-alvo{ display:flex; align-items:center; gap:8px; text-align:left; padding:7px 9px; border-radius:8px;
          background:rgba(28,34,26,.9); border:1px solid rgba(201,169,97,.35); color:#e8e0d0;
          font-size:.85rem; cursor:pointer; font-family:inherit; }
.op-alvo:active{ transform:scale(.97); border-color:var(--eter); }
.op-alvo img{ width:44px; border-radius:5px; display:block; flex:0 0 auto; }
.lista-alvos.com-arte .op-alvo{ flex-direction:column; gap:4px; font-size:.68rem; line-height:1.1; text-align:center; }
.lista-alvos.com-arte .op-alvo img{ width:100%; }
/* ---- botão de SOM ---- */
.btn-som{ position:absolute; z-index:60; right:8px; bottom:8px; width:34px; height:34px; border-radius:50%;
          font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
          background:rgba(12,16,12,.72); border:1px solid rgba(201,169,97,.45); color:var(--ouro);
          cursor:pointer; padding:0; }
.btn-som:active{ transform:scale(.92); }
/* ---- SELOS DE BÔNUS na carta em campo (+1 ATK / +2 DEF): sem isso não havia como saber o que mudou ---- */
.casa .bonus{ position:absolute; z-index:5; top:-6px; left:-6px; padding:1px 5px 2px; border-radius:8px;
              font-size:.62rem; font-weight:800; line-height:1.1; display:flex; flex-direction:column;
              align-items:center; border:1.5px solid #12160f; }
.casa .bonus small{ font-size:.5rem; font-weight:700; letter-spacing:.04em; }
.casa .bonus.mais{ background:#2f6b4a; color:#d7f5e4; }
.casa .bonus.menos{ background:#7a3030; color:#fadcd6; }
.casa .bonus.def{ top:auto; bottom:-6px; left:auto; right:-6px; background:#2b4f75; color:#d9e8fa; }
.casa .bonus.def.menos{ background:#7a3030; color:#fadcd6; }
/* ---- janela de VER CARTAS (revelado) e de REORGANIZAR o topo do Deck ---- */
#zoom .texto.revela{ display:flex; flex-direction:column; gap:8px; }
.revela-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px;
              border-bottom:1px solid rgba(201,169,97,.28); padding-bottom:7px; }
.revela-topo b{ color:var(--ouro); font-size:.98rem; }
.fechar-x{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; font-size:19px; line-height:1;
           background:rgba(194,81,58,.22); color:#f0d9c8; border:1px solid rgba(194,81,58,.55); cursor:pointer; }
.fechar-x:active{ transform:scale(.92); }
#zoom .pergunta{ margin:6px 0 8px; font-size:.92rem; color:#e6ded0; }
.revela-cartas{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.revela-cartas.um{ grid-template-columns:minmax(0,190px); justify-content:center; }
.revela-cartas figure{ margin:0; display:flex; flex-direction:column; gap:3px; }
.revela-cartas img{ width:100%; border-radius:7px; border:1px solid rgba(201,169,97,.35); display:block; }
.revela-cartas figcaption{ font-size:.63rem; color:#c9bfa9; text-align:center; line-height:1.15; }
.revela-sep{ font-size:.72rem; color:var(--ouro); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.revela-bloco{ overflow-y:auto; }
/* ordenar: a carta escolhida ganha um número (1 = topo) */
.revela-cartas.ordem figure{ position:relative; cursor:pointer; }
.revela-cartas.ordem figure .badge{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%;
  background:#1b2018; border:2px solid var(--ouro); color:var(--ouro); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.revela-cartas.ordem figure.escolhida{ outline:2px solid var(--eter); outline-offset:1px; }
.revela-cartas.ordem figure.escolhida img{ border-color:var(--eter); }
.ordem-txt{ font-size:.76rem; color:#cfc6b2; min-height:1.5em; margin:6px 0 0; }
.casa.pode-atacar{ cursor:crosshair; box-shadow:0 0 0 2px rgba(201,169,97,.7); }
.casa.pode-atacar::after{ content:""; position:absolute; inset:0; border-radius:calc(var(--raio)*.8);
                          background:rgba(201,169,97,.10); pointer-events:none; }
.casa.no-grupo{ box-shadow:0 0 0 3px var(--sangue), 0 0 20px rgba(194,81,58,.75); }
.casa.no-grupo::before{ content:""; position:absolute; top:-7px; right:-7px; width:19px; height:19px; z-index:4;
                        border-radius:50%; background:var(--sangue); border:2px solid #12160f;
                        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l2.6 6.2 6.4.5-4.9 4.2 1.5 6.3L12 16.8 6.4 20.2l1.5-6.3L3 9.7l6.4-.5z' fill='white'/></svg>");
                        background-size:11px; background-position:center; background-repeat:no-repeat; }
.casa.atacando{ animation:avanca .45s ease-out; z-index:9; }
@keyframes avanca{ 0%{ transform:translateY(0) scale(1); } 45%{ transform:translateY(-42%) scale(1.12); filter:brightness(1.3);} 100%{ transform:translateY(0) scale(1);} }
.casa.morrendo{ animation:morre .6s forwards; }
@keyframes morre{ 0%{ opacity:1; filter:brightness(2.2) saturate(1.4); } 100%{ opacity:0; transform:scale(.72) rotate(6deg); } }
.casa.entrando{ animation:entra .5s ease-out; }
@keyframes entra{ 0%{ opacity:0; transform:scale(.6) translateY(18%);} 100%{ opacity:1; transform:none; } }
.casa .fx-circulo{ position:absolute; inset:-14%; background:url("../assets/fx-invocacao2.webp") center/contain no-repeat;
                   mix-blend-mode:screen; opacity:0; pointer-events:none; animation:circulo .7s ease-out; }
@keyframes circulo{ 0%{ opacity:0; transform:scale(.5) rotate(-25deg);} 40%{ opacity:.95;} 100%{ opacity:0; transform:scale(1.25) rotate(12deg);} }
.casa .fx-boom{ position:absolute; inset:-30%; background:url("../assets/fx-explosao.webp") center/contain no-repeat;
                mix-blend-mode:screen; opacity:0; pointer-events:none; animation:boom .65s ease-out; }
@keyframes boom{ 0%{ opacity:0; transform:scale(.35);} 25%{ opacity:1;} 100%{ opacity:0; transform:scale(1.35);} }
.casa .selo-estado{ position:absolute; top:-6px; right:-6px; width:19px; height:19px; border-radius:50%;
                    background:#0b1116; border:1px solid var(--ouro); display:flex; align-items:center;
                    justify-content:center; font-size:10px; color:#f2d99a; }
.casa .selo-estado.def{ border-color:var(--eter); color:var(--eter); }
.casa.virada img{ filter:brightness(.55) saturate(.4); }

/* ---- centro / Arquivo ---- */
.arquivo{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:calc(var(--cw)*.14);
          padding:4px 0; }
.centro-bloco{ display:flex; align-items:center; gap:calc(var(--cw)*.11); }
.risco{ width:clamp(24px,7vw,90px); height:1px; background:linear-gradient(90deg,transparent,rgba(201,169,97,.5),transparent); }
.zona{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.zona .pilha{ width:calc(var(--cw)*.42); height:calc(var(--ch)*.42); border-radius:5px;
              border:1px solid rgba(201,169,97,.55); background:rgba(4,8,12,.7); overflow:hidden;
              display:flex; align-items:center; justify-content:center; }
.zona .pilha img{ width:100%; height:100%; object-fit:cover; }
.zona.exilio .pilha{ border-style:dashed; border-color:rgba(201,169,97,.4); }
.zona .nm{ font-size:8.5px; letter-spacing:1.2px; text-transform:uppercase; color:#d8c496; }
.zona .ct{ font-size:11px; font-weight:bold; color:#f5e9cd; }

/* ---- mão ---- */
.areamao{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; }
.areamao .rot{ font-size:8px; letter-spacing:2.4px; text-transform:uppercase; color:rgba(201,169,97,.5); }
.mao{ display:flex; justify-content:center; align-items:flex-end; gap:calc(var(--cw)*-.15); height:calc(var(--ch)*.8);
      padding:0 6px; }
.mao .carta-mao{ width:calc(var(--cw)*.86); height:calc(var(--ch)*.86); border-radius:var(--raio); overflow:hidden;
                 border:1.5px solid var(--ouro-fraco); box-shadow:0 -4px 14px rgba(0,0,0,.7); background:#0a0f14;
                 transition:transform .18s, box-shadow .18s; }
.mao .carta-mao img{ width:100%; height:100%; object-fit:cover; display:block; }
.mao .carta-mao.sel{ transform:translateY(-16%) scale(1.06); box-shadow:0 0 0 2px var(--ouro-forte), 0 0 20px rgba(242,217,154,.5); z-index:5; }
.mao .carta-mao.marcada-descarte{ box-shadow:0 0 0 2px var(--sangue), 0 0 18px rgba(194,81,58,.6); }

/* ---- painel inferior ---- */
.painel{ flex:0 0 auto; display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.fases{ display:flex; gap:4px; justify-content:center; }
.fase{ font-size:clamp(7px,2.1vw,9px); letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border-radius:12px;
       border:1px solid rgba(201,169,97,.28); color:#a08d63; }
.fase.on{ border-color:var(--eter); color:#d6fbf9; background:rgba(73,207,201,.14); box-shadow:0 0 8px rgba(73,207,201,.3); }
.fase.feita{ color:#6f8a5f; border-color:rgba(111,138,95,.4); }
.barra{ display:flex; align-items:center; justify-content:space-between; gap:5px; }
.posts{ display:flex; gap:4px; }
.post{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:3px 6px; border-radius:8px;
       border:1px solid rgba(201,169,97,.24); background:rgba(4,8,12,.62); color:#c9b47e; cursor:pointer; }
.post span{ font-size:6.5px; letter-spacing:.8px; text-transform:uppercase; color:#8b7a55; }
.post.on{ border-color:var(--ouro-forte); background:rgba(46,35,12,.8); color:#f2d99a; box-shadow:0 0 10px rgba(242,217,154,.3); }
.post.on span{ color:#e8d6a8; }
.acao{ display:flex; align-items:center; gap:5px; font-size:clamp(8px,2.4vw,10px); letter-spacing:1px; min-width:96px; justify-content:center;
       text-transform:uppercase; padding:8px 12px; border-radius:9px; border:1px solid var(--ouro);
       background:linear-gradient(180deg,rgba(60,46,18,.92),rgba(26,20,8,.96)); color:#f2d99a; cursor:pointer;
       white-space:nowrap; }
.acao:disabled{ opacity:.35; }
.acao.urgente{ animation:bate 1.1s infinite; }

/* ---- dica / log ---- */
.dica{ position:absolute; left:50%; transform:translateX(-50%); top:calc(42px + env(safe-area-inset-top));
       z-index:12; background:rgba(6,10,14,.94); border:1px solid var(--ouro-fraco); border-radius:9px;
       padding:6px 12px; font-size:11.5px; color:#eadfc0; max-width:88%; text-align:center; pointer-events:none;
       transition:opacity .3s; box-shadow:0 6px 20px rgba(0,0,0,.6); }
.log{ position:absolute; left:0; right:0; bottom:0; z-index:20; max-height:42%; overflow:auto;
      background:rgba(3,6,9,.94); border-top:1px solid var(--ouro-fraco); padding:10px 12px; font-size:12px; line-height:1.5; }
.log .l{ color:#c9b47e; } .log .l.combate{ color:#e8b48a; } .log .l.jogada{ color:#cfe8c0; }
.log .l.turno{ color:#8fc9e8; font-weight:bold; } .log .l.aviso{ color:#e2705f; } .log .l.fim{ color:#f2d99a; font-weight:bold; }
.barra-acoes{ position:absolute; right:8px; top:calc(100% - 34px); z-index:21; display:flex; gap:6px; }
.mini{ width:30px; height:30px; border-radius:50%; border:1px solid var(--ouro-fraco); background:rgba(4,8,12,.8);
       color:#c9b47e; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ---- ZOOM da carta (toque para ler) ---- */
#zoom{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center;
       justify-content:center; gap:12px; padding:16px; background:rgba(2,4,6,.9); backdrop-filter:blur(3px); }
#zoom .carta-grande{ width:min(88vw, 46vh); aspect-ratio:744/1039; border-radius:12px; overflow:hidden;
                     border:2px solid var(--ouro); box-shadow:0 0 46px rgba(242,217,154,.28); }
#zoom .carta-grande img{ width:100%; height:100%; object-fit:cover; display:block; }
#zoom .texto{ width:min(92vw, 620px); max-height:26vh; overflow:auto; background:rgba(6,10,14,.92);
              border:1px solid var(--ouro-fraco); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.55; }
#zoom .texto b{ color:var(--ouro-forte); } #zoom .texto em{ color:#bda876; font-style:italic; }
#zoom .botoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* ---- sala de espera do duelo (o convidado ainda não entrou) ---- */
.espera-fundo{ position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,6,.92); padding:18px; }
.espera-caixa{ max-width:min(420px,94vw); width:100%; text-align:center; padding:26px 20px 22px;
  border:1px solid var(--ouro-fraco); border-radius:14px; background:linear-gradient(180deg,rgba(16,20,16,.96),rgba(6,9,6,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.7); }
.espera-selo{ font-size:30px; margin-bottom:6px; animation:pulsa 1.8s infinite; }
@keyframes pulsa{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.espera-caixa h2{ font-size:19px; margin:0 0 8px; color:var(--ouro-forte); }
.espera-caixa p{ font-size:12.8px; line-height:1.6; opacity:.85; margin:0 0 14px; }
.espera-caixa p b{ color:var(--ouro-forte); }
.espera-link{ display:flex; gap:7px; margin:0 0 14px; }
.espera-link input{ flex:1; min-width:0; padding:10px 12px; border-radius:9px; font-size:12.5px;
  border:1px solid rgba(201,169,97,.4); background:rgba(4,8,12,.8); color:#e9dcc0; font-family:inherit; }
.espera-link button{ padding:10px 14px; border-radius:9px; border:1px solid var(--ouro); cursor:pointer;
  background:linear-gradient(180deg,rgba(60,46,18,.92),rgba(26,20,8,.96)); color:#f2d99a; font:inherit; font-size:12.5px; }
.espera-nota{ font-size:11.5px; opacity:.66 !important; }
.espera-caixa .btn{ width:100%; margin-top:4px; }

/* ---- aviso de dano flutuante ---- */
.dano{ position:absolute; z-index:30; font-size:clamp(18px,6vw,30px); font-weight:bold; color:#ff8b73;
       text-shadow:0 0 12px rgba(226,112,95,.9), 0 2px 4px #000; pointer-events:none; animation:sobe 1s ease-out forwards; }
@keyframes sobe{ 0%{ opacity:0; transform:translateY(6px) scale(.8);} 25%{ opacity:1;} 100%{ opacity:0; transform:translateY(-42px) scale(1.15);} }

/* ---- desktop: mesa fica mais larga (as cartas NÃO crescem mais por altura) ----
   A regra antiga fazia `--cw: 15vh`, que estourava a coluna em qualquer altura e empurrava a barra de baixo
   para fora da tela (bug relatado pelo Over em 02/10/2026). O tamanho agora vem da base, calibrada. */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  #mesa{ max-width:1100px; padding:10px 18px 10px; gap:6px; }
  .faixa{ gap:3px; }
  .dica{ bottom:auto; top:50%; }
}