/* =====================================================================
   ZODÍACO — A Roda Celeste (25/10, tela "A" escolhida pelo autor)
   ---------------------------------------------------------------------
   PC: a roda à esquerda, o cartão "Precisa / Você tem" à direita.
   Celular em pé: a roda em cima, o cartão embaixo (rola só o cartão).
   Celular deitado: roda à esquerda, cartão à direita, como no PC.
   Letra Cinzel (@font-face em styles/salao.css). Números inteiros com ponto.
   Conferido com o texto do jogo de 100% a 130% (o tamanho vem do rem).
   ===================================================================== */
.zod-tela{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(3,4,12,.8);
  font:14px/1.35 system-ui,"Segoe UI",sans-serif;color:#ece8f6;-webkit-user-select:none;user-select:none;
  --zod-ouro:#e2b85c;--zod-ouro2:#f5d98f;--zod-linha:#2c3762;--zod-ok:#6fd39a;--zod-falta:#f08a7a}
.zod-tela.hidden{display:none}
.zod-cin{font-family:Cinzel,Georgia,serif}
.zod-painel{position:relative;display:flex;flex-direction:column;width:min(1180px,96vw);height:min(700px,94vh);border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 35% 40%,#1d2550 0%,#0b0f1d 62%),#0b0f1d;border:1px solid #e2b85c66;
  box-shadow:0 0 0 1px #000,0 30px 80px #000c}
.zod-painel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:radial-gradient(1px 1px at 12% 20%,#fff8 50%,transparent),radial-gradient(1px 1px at 72% 12%,#fff6 50%,transparent),
  radial-gradient(1.5px 1.5px at 40% 60%,#fff5 50%,transparent),radial-gradient(1px 1px at 88% 70%,#fff7 50%,transparent),
  radial-gradient(1px 1px at 25% 85%,#fff5 50%,transparent),radial-gradient(1px 1px at 60% 40%,#fff4 50%,transparent),
  radial-gradient(1px 1px at 52% 8%,#fff6 50%,transparent),radial-gradient(1px 1px at 6% 52%,#fff5 50%,transparent)}
.zod-topo{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2b85c44;background:#0b0f1dcc}
.zod-topo h1{margin:0;flex:1;min-width:0;font-size:1.35em;letter-spacing:.12em;color:var(--zod-ouro2);text-shadow:0 0 12px #e2b85c66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zod-pilula{flex:none;font-size:.86em;background:#e2b85c1f;border:1px solid #e2b85c66;color:var(--zod-ouro2);border-radius:999px;padding:2px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.zod-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--zod-linha);background:#141a2e;color:#cfd3ea;font-size:16px;cursor:var(--cur-mao,pointer)}
.zod-x:hover{border-color:var(--zod-ouro)}
.zod-corpo{position:relative;z-index:1;flex:1;min-height:0;display:flex}
.zod-vazio{flex:1;display:grid;place-items:center;color:#9aa0bd}

/* ---------------- a roda ---------------- */
.zod-roda{position:relative;flex:none;height:100%;aspect-ratio:1;max-width:62%;margin:0 auto;color:var(--zod-ouro)}
.zod-aneis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zod-med{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:0;cursor:var(--cur-mao,pointer);overflow:hidden;
  border:2px solid #3a4370;background:#141a2e;transition:transform .12s ease,border-color .12s ease}
.zod-med>img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;pointer-events:none}
.zod-med:hover{transform:translate(-50%,-50%) scale(1.06)}
.zod-med:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zod-med.sel{border-color:var(--zod-ouro2);box-shadow:0 0 14px #f5d98f99}
.zod-med.completo{border-color:var(--zod-ouro)}
.zod-med.fechado>img{filter:grayscale(.75) brightness(.55)}
.zod-med-n{position:absolute;right:6%;bottom:4%;min-width:1.5em;padding:0 .3em;border-radius:1em;background:#0b0f1de6;border:1px solid var(--zod-ouro);
  color:var(--zod-ouro2);font:700 .78em/1.35 system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.zod-med-lk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}
.zod-med-lk img{width:34%;height:auto}
.zod-med-lk b{font:700 .7em/1 system-ui,sans-serif;color:#d6d9ec;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.zod-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;height:62%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;pointer-events:none}
.zod-heroi{flex:1;min-height:0;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 18px #e2b85c55)}
.zod-centro b{font-size:1.15em;color:var(--zod-ouro2);text-shadow:0 2px 4px #000;text-align:center}
.zod-centro.brilha .zod-heroi{animation:zod-brilho 1.4s ease-out}
@keyframes zod-brilho{0%{filter:drop-shadow(0 0 0 #fff) brightness(1.6)}100%{filter:drop-shadow(0 0 18px #e2b85c55) brightness(1)}}
.zod-estrelas{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.zod-est{width:1.15em;height:1.15em;background:#3a4370;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.zod-est.on{background:var(--zod-ouro2);filter:drop-shadow(0 0 3px #f5d98f)}
.zod-est.prox{background:#9a7a35;animation:zod-pisca 1.6s infinite}
@keyframes zod-pisca{50%{background:var(--zod-ouro2)}}

/* ---------------- o cartão ---------------- */
.zod-lado{flex:none;width:430px;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;justify-content:center}
.zod-cartao{display:flex;flex-direction:column;gap:8px;min-width:0;background:#121831ee;border:1px solid #e2b85c55;border-radius:12px;padding:12px}
.zod-cartao h2{margin:0;font-size:1.2em;color:var(--zod-ouro2);overflow-wrap:anywhere}
.zod-cartao .zod-estrelas{justify-content:flex-start}
.zod-bonus{margin:0}
.zod-bonus b{color:#fff;font-variant-numeric:tabular-nums}
.zod-bonus .zod-novo{color:var(--zod-ok)}
.zod-const{margin:0;font-size:.92em;color:#c7bfa0}
.zod-const.on{color:var(--zod-ok)}
.zod-custo{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 8px;align-items:center;font-size:.95em}
.zod-c-cab{font-size:.85em;color:#9aa0bd}
.zod-c-ico{display:flex}
.zod-ico{width:1.6em;height:1.6em;object-fit:contain}
.zod-c-nome{min-width:0;overflow-wrap:break-word;line-height:1.15;color:#b8bdd8}
.zod-c-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.zod-c-n.tem{color:var(--zod-ok)}
.zod-c-n.nao{color:var(--zod-falta)}
.zod-aviso{margin:0;color:var(--zod-falta);font-size:.92em}
.zod-msg{margin:0;font-weight:600;font-size:.95em}
.zod-msg.ok{color:var(--zod-ok)}
.zod-msg.erro{color:var(--zod-falta)}
.zod-btn{font:700 1em system-ui,sans-serif;letter-spacing:.04em;border:0;border-radius:9px;padding:11px 12px;width:100%;cursor:var(--cur-mao,pointer);
  background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);box-shadow:0 2px 0 #6b4d14}
.zod-btn:disabled{cursor:var(--cur-seta,default);background:#2a3157;color:#9aa0bd;box-shadow:none}
.zod-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zod-btn-teste{background:#1b2340;color:var(--zod-ouro2);border:1px dashed var(--zod-ouro);box-shadow:none;font-weight:600}
.zod-mats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px}
.zod-mat{display:flex;align-items:center;gap:6px;min-width:0;background:#0b0f1d;border:1px solid var(--zod-linha);border-radius:8px;padding:6px}
.zod-mat-ico{width:2em;height:2em;flex:none;object-fit:contain}
.zod-mat span{min-width:0;display:flex;flex-direction:column}
.zod-mat b{color:var(--zod-ouro2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.zod-mat small{color:#9aa0bd;font-size:.8em;overflow-wrap:anywhere}
.zod-onde{margin:0;font-size:.85em;color:#9aa0bd}

/* ---------------- cartão estreito (celular, ou letra grande) ----------------
   O custo vai em duas linhas: o nome em cima, "Precisa" e "Você tem" embaixo (os números inteiros
   não cabem ao lado do nome). Medido no próprio cartão, em em: cresce junto com a letra. */
.zod-lado{container-type:inline-size}
@container (max-width:26em){
  .zod-custo{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:2px 10px}
  .zod-c-vazio:first-child{display:none}
  .zod-c-ico{grid-row:span 2;align-self:center}
  .zod-c-nome{grid-column:2/span 2;padding-top:4px}
}

/* ---------------- celular em pé ---------------- */
@media (max-width:760px) and (orientation:portrait){
  .zod-tela{place-items:stretch}
  .zod-painel{width:100vw;height:100%;border-radius:0;border:0}
  .zod-corpo{flex-direction:column}
  .zod-roda{height:auto;width:min(100%,44vh);max-width:none;flex:none}
  .zod-lado{width:auto;flex:1;padding:0 10px 10px;justify-content:flex-start}
  .zod-so-largo{display:none}
  .zod-centro .zod-estrelas{display:none}   /* as estrelas já estão no cartão logo abaixo */
}
/* ---------------- celular deitado ---------------- */
@media (max-height:520px) and (orientation:landscape){
  .zod-painel{width:100vw;height:100%;border-radius:0;border:0}
  .zod-topo{padding:5px 10px}
  .zod-lado{width:min(380px,52vw);padding:8px;justify-content:flex-start}
  .zod-roda{max-width:48%}
  .zod-centro .zod-estrelas{display:none}
}
body.combat-fx-off .zod-est.prox,body.graphics-lite .zod-est.prox{animation:none}
@media (prefers-reduced-motion:reduce){.zod-est.prox,.zod-centro.brilha .zod-heroi{animation:none}}