:root {
  --ceu-1: #5aaeff;
  --ceu-2: #9ad6ff;
  --tinta: #3a2a5c;
  --tinta-suave: #7a6c96;
  --branco: #ffffff;
  --amarelo: #ffd23f;
  --ouro: #f5b83d;
  --ouro-escuro: #c98a12;
  --limao: #5ccc3a;
  --limao-escuro: #3b8f1f;
  --verde: #1a7f45;
  --vermelho: #c53a31;
  --creme: #fff8ec;

  /* cores dos atributos */
  --ant: #8a6cf0; --ant-claro: #efeaff; --ant-texto: #6a4ed6;
  --apa: #3c9bf0; --apa-claro: #e3f1ff; --apa-texto: #1f78c9;
  --rei: #f6b81e; --rei-claro: #fff4d4; --rei-texto: #a87400;
  --men: #f0609a; --men-claro: #ffe6ef; --men-texto: #c9306e;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(circle, rgba(255,255,255,.45) 2px, transparent 2.5px) 0 0 / 22px 22px,
    linear-gradient(var(--ceu-1), var(--ceu-2));
  background-color: var(--ceu-1);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; cursor: pointer; color: inherit; }

.tela { display: none; min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; flex-direction: column; align-items: center; position: relative; }
.tela.ativa { display: flex; }

/* Letra de desenho animado: branca com contorno grosso */
/* Letra cartunesca em duas camadas: atrás, uma cópia do texto (data-texto, preenchida pelo
   game.js) com traço real da letra e uma sombra única; na frente, o texto branco. */
.cartoon { --c: var(--tinta); --e: 3.5px; --d: 3px; font-family: "Baloo 2", sans-serif; font-weight: 800; color: #fff; position: relative; z-index: 0; }
.cartoon::before {
  content: attr(data-texto); position: absolute; inset: 0; z-index: -1; padding: inherit; pointer-events: none;
  color: var(--c); -webkit-text-stroke: calc(var(--e) * 2) var(--c); paint-order: stroke fill;
  filter: drop-shadow(0 var(--d) 0 var(--c));
}

/* ---------- Botões ---------- */
.btn-jogar { --c: #2f6b14; --d: 2px; border: 0; width: 100%; max-width: 340px; margin-top: 16px; background: var(--limao); border-radius: 22px; padding: 6px 0 2px; font-size: 32px; letter-spacing: .03em; box-shadow: 0 6px 0 var(--limao-escuro); transition: transform .1s, box-shadow .1s; }
.btn-galeria { border: 0; width: 100%; max-width: 340px; margin-top: 12px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 18px; padding: 10px 0; font-family: "Baloo 2"; font-weight: 800; font-size: 19px; box-shadow: 0 5px 0 rgba(58,42,92,.22); transition: transform .1s, box-shadow .1s; }
.btn-galeria:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(58,42,92,.22); }
.btn-jogar.apertado { transform: translateY(4px); box-shadow: 0 2px 0 var(--limao-escuro); }
.btn-jogar:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--limao-escuro); }
.btn-menor { font-size: 24px; margin-top: 14px; }
.btn-link { border: 0; background: transparent; margin-top: 10px; font-weight: 900; font-size: 15px; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; padding: 6px 12px; }
.hud-btn { flex: none; border: 0; width: 44px; height: 44px; color: var(--tinta); border-radius: 50%; background: #fff; font-size: 18px; font-weight: 900; line-height: 1; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(58,42,92,.22); }
.hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,42,92,.22); }

/* ---------- Início ---------- */
#tela-inicio { justify-content: center; }
.capa { position: relative; width: 100%; max-width: 380px; height: 370px; margin-top: 4px; }
.fig-capa { position: absolute; left: var(--x); top: var(--y); width: 27%; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(30,60,120,.22); transform: rotate(var(--r)); opacity: .92; }
.raios { position: absolute; left: 50%; top: 46%; width: 380px; height: 380px; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,240,180,.55) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: girar 40s linear infinite; }
@keyframes girar { to { transform: translate(-50%, -50%) rotate(360deg); } }
.moises { position: absolute; left: 50%; top: 10px; width: 56%; transform: translateX(-50%) rotate(-2deg); z-index: 2; animation: flutuar 3.5s ease-in-out infinite; }
.moises img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center 15%; border-radius: 18px; border: 6px solid var(--ouro);
  box-shadow: 0 0 0 3px #fff, 0 0 40px 10px rgba(255,214,100,.75), 0 8px 0 rgba(30,60,120,.25); }
.moises-selo { position: absolute; left: 50%; top: -12px; transform: translateX(-50%) rotate(-4deg); background: radial-gradient(circle at 30% 30%, #fff3c4, var(--ouro) 60%, var(--ouro-escuro)); color: #5a3500; font-family: "Baloo 2"; font-weight: 800; font-size: 15px; letter-spacing: .06em; padding: 1px 12px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); white-space: nowrap; }
@keyframes flutuar { 50% { transform: translateX(-50%) rotate(-2deg) translateY(-6px); } }

.faixa-logo { margin: -4px 0 0; width: 100%; max-width: 360px; background: var(--amarelo); text-align: center; padding: 4px 0 10px; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); transform: rotate(-2deg); position: relative; z-index: 3; }
.logo-a { display: block; font-family: "Baloo 2"; font-weight: 800; font-size: 28px; letter-spacing: .12em; line-height: 1.1; margin-bottom: 2px; }
.logo-b { --e: 4px; display: block; font-size: 44px; line-height: .9; }

.opcoes { width: 100%; max-width: 340px; display: grid; gap: 8px; margin-top: 16px; }
.seletor { display: flex; background: rgba(255,255,255,.55); border-radius: 99px; padding: 4px; }
.seletor button { flex: 1; border: 0; background: transparent; min-height: 44px; padding: 6px; border-radius: 99px; font-weight: 900; font-size: 15px; }
.seletor button.sel { background: #fff; box-shadow: 0 3px 0 rgba(58,42,92,.18); }

/* ---------- Figurinha (carta) ---------- */
/* .fig é o "container" de medida; o papel branco fica num filho, para as medidas
   relativas (cqw) usarem a largura da carta e não a da tela */
.fig { --cor: #f0954a; container-type: inline-size; width: 100%; user-select: none; }
.fig .papel { background: #fff; border-radius: 8cqw; padding: 2.4cqw; box-shadow: 0 2.6cqw 0 rgba(30,60,120,.25); }
.fig .moldura { border: 2.2cqw solid var(--cor); border-radius: 6cqw; overflow: hidden; background: var(--creme); padding-bottom: 3cqw; }
.fig .foto { position: relative; aspect-ratio: 2 / 2.35; }
.fig .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.fig .selo { position: absolute; top: 3cqw; left: 3cqw; background: var(--amarelo); font-weight: 900; font-size: 3.8cqw; padding: .8cqw 2.6cqw; border-radius: 3cqw; transform: rotate(-6deg); box-shadow: 0 .8cqw 0 rgba(0,0,0,.2); text-transform: uppercase; }
.fig .cod { position: absolute; top: 3cqw; right: 3cqw; width: 11cqw; height: 11cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: "Baloo 2"; font-weight: 800; color: var(--cor); font-size: 4.8cqw; box-shadow: 0 .8cqw 0 rgba(0,0,0,.2); }
.fig .data { position: absolute; right: 3cqw; bottom: 10cqw; background: #fff; font-weight: 900; font-size: 3.8cqw; padding: .6cqw 2.6cqw; border-radius: 3cqw; box-shadow: 0 .7cqw 0 rgba(0,0,0,.2); }
.fig .fita { position: relative; margin: -8cqw auto 0; width: 74%; background: var(--amarelo); text-align: center; font-family: "Baloo 2"; font-weight: 800; font-size: 10cqw; line-height: 1.25; clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%); transform: rotate(-2deg); white-space: nowrap; }
.fig .local { text-align: center; font-weight: 800; font-size: 4.2cqw; margin: 2cqw 0 0; opacity: .85; }
.fig .frase { text-align: center; font-weight: 900; font-size: 4.5cqw; line-height: 1.3; text-wrap: balance; margin: .4cqw 2cqw 2.6cqw; }
.fig .lista { display: grid; gap: 1.6cqw; padding: 0 3cqw; }

.attr { display: flex; align-items: center; gap: 3cqw; width: 100%; border: 0; border-radius: 4.5cqw; padding: 1.3cqw 3.6cqw 1.3cqw 1.5cqw; text-align: left; font-family: "Nunito"; position: relative; transition: transform .1s, background .15s; }
.attr .ic { width: 8.5cqw; height: 8.5cqw; border-radius: 50%; display: grid; place-items: center; font-size: 4.2cqw; flex: none; }
.attr .r { flex: 1; font-weight: 900; font-size: 4.8cqw; }
.attr .v { font-family: "Baloo 2"; font-weight: 800; font-size: 6.6cqw; line-height: 1; }
.attr.ant { background: var(--ant-claro); } .attr.ant .ic { background: var(--ant); } .attr.ant .v { color: var(--ant-texto); }
.attr.apa { background: var(--apa-claro); } .attr.apa .ic { background: var(--apa); } .attr.apa .v { color: var(--apa-texto); }
.attr.rei { background: var(--rei-claro); } .attr.rei .ic { background: var(--rei); } .attr.rei .v { color: var(--rei-texto); }
.attr.men { background: var(--men-claro); } .attr.men .ic { background: var(--men); } .attr.men .v { color: var(--men-texto); }

.fig.jogavel .attr { cursor: pointer; box-shadow: 0 1cqw 0 rgba(58,42,92,.12); }
.fig.jogavel .attr:active { transform: translateY(.8cqw); box-shadow: none; }
.attr.escolhido { outline: 1.2cqw solid var(--tinta); outline-offset: -.2cqw; }
.attr.venceu { background: var(--verde) !important; outline: none; }
.attr.perdeu { background: #efedf3 !important; outline: none; opacity: .7; }
.attr.venceu .r, .attr.venceu .v { color: #fff !important; }
.attr.perdeu .r, .attr.perdeu .v { color: #8f88a3 !important; }

/* Carta Triunfo (Moisés) */
.fig.triunfo .papel { background: linear-gradient(135deg, #fff6d0, #ffe08a); box-shadow: 0 0 0 1cqw var(--ouro), 0 0 8cqw rgba(255,200,80,.7), 0 2.6cqw 0 rgba(30,60,120,.25); }
.fig.triunfo .moldura { border-color: var(--ouro); }
.fig.triunfo .selo { background: radial-gradient(circle at 30% 30%, #fff3c4, var(--ouro) 60%, var(--ouro-escuro)); color: #5a3500; }

/* Verso da carta */
.verso { width: 100%; height: 100%; border-radius: 22px; border: 6px solid #fff; background:
  radial-gradient(circle at 50% 42%, var(--amarelo) 0 16%, transparent 17%),
  repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.18) 0 10deg, transparent 10deg 20deg),
  linear-gradient(160deg, #6a4fc7, #2b8bd6 60%, #2bb39a);
  box-shadow: 0 6px 0 rgba(30,60,120,.25); }

/* ---------- Partida ---------- */
.hud { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hud-jog { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 99px; padding: 3px 12px 3px 3px; box-shadow: 0 3px 0 rgba(58,42,92,.22); }
.hud-jog b { font-family: "Baloo 2"; font-weight: 800; font-size: 20px; line-height: 1; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.hud-meio { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hud-rod { background: var(--tinta); color: #fff; font-weight: 900; font-size: 13px; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.hud-mesa { background: var(--amarelo); font-weight: 900; font-size: 11px; border-radius: 99px; padding: 1px 8px; }

.slot { width: 100%; max-width: min(380px, calc((100dvh - 190px) * .56)); margin-top: 12px; }
.slot .fig { transform: rotate(-1deg); }
.slot .fig.entrando { animation: entrar .35s ease-out; }
@keyframes entrar { from { transform: translateY(30px) rotate(-4deg) scale(.95); opacity: 0; } to { transform: rotate(-1deg); opacity: 1; } }

.balao { margin: 14px 0 0; max-width: 100%; background: var(--tinta); color: #fff; border-radius: 12px; padding: 3px 14px; font-family: "Baloo 2"; font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.2); }

/* Vez do computador: robô no centro da tela, por cima da carta */
.vez-cpu { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(40,60,120,.28); animation: aparecer .25s ease-out; pointer-events: none; }
.vez-cpu[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.robo { width: 112px; height: 112px; border-radius: 50%; background: #ff6b6b; border: 6px solid #fff; display: grid; place-items: center; font-size: 62px; box-shadow: 0 6px 0 rgba(30,60,120,.3); animation: pular .9s ease-in-out infinite; }
@keyframes pular { 50% { transform: translateY(-8px) rotate(-4deg); } }
.robo-fala { margin: 0 20px; max-width: 320px; background: #fff; border-radius: 18px; padding: 8px 16px; font-family: "Baloo 2"; font-weight: 800; font-size: 20px; line-height: 1.25; text-align: center; box-shadow: 0 4px 0 rgba(30,60,120,.25); }
.robo-fala b { color: var(--men-texto); }
.balao.cpu { background: #fff; color: var(--tinta); }

/* ---------- Sobreposições (duelo e regras) ---------- */
/* sem backdrop-filter: no Safari do iPhone ele impede o painel de redesenhar durante a rolagem */
.sobreposicao { position: fixed; inset: 0; background: rgba(20,30,70,.62); display: flex; align-items: flex-end; justify-content: center; z-index: 10; overscroll-behavior: contain; }
.sobreposicao[hidden] { display: none; }
.painel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; width: 100%; max-width: 520px; border-radius: 26px 26px 0 0; padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); max-height: 100dvh; overflow-y: auto; animation: subir .3s ease-out; display: flex; flex-direction: column; align-items: center; }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.duelo-titulo { font-size: 32px; margin: 4px 0 10px; text-align: center; line-height: 1.1; }
.duelo-titulo.vitoria { color: #8ff0ae; }
.duelo-titulo.derrota { color: #ffb0ab; }
.duelo-titulo.triunfo { color: var(--amarelo); animation: pulsar .8s ease-in-out 2; }
@keyframes pulsar { 50% { transform: scale(1.12); } }
.duelo-motivo { margin: 6px 0 2px; text-align: center; font-weight: 800; color: var(--tinta-suave); font-size: 14px; }
.duelo-proxima { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-weight: 800; font-size: 15px; color: var(--tinta); }
.duelo-proxima:empty { display: none; }
.duelo-proxima .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex: none; }
.duelo-proxima + .btn-jogar { margin-top: 8px; }
.duelo-cartas { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 4px; width: 100%; align-items: center; }
.duelo-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.duelo-lado > div { width: 100%; }
.duelo-dono { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.duelo-x { font-family: "Baloo 2"; font-weight: 800; font-size: 22px; color: #b5aec6; text-align: center; }
#duelo .fig .papel { box-shadow: 0 2cqw 0 rgba(30,60,120,.2); }
#duelo .fig.vencedora .papel { box-shadow: 0 0 0 2cqw var(--verde), 0 2cqw 0 rgba(30,60,120,.2); }

.virador { position: relative; perspective: 900px; display: grid; }
.virador .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s ease; }
.virador .frente { transform: rotateY(180deg); }
.virador.virado .frente { transform: rotateY(0); }
.virador.virado .tras { transform: rotateY(-180deg); }

.curiosidade { width: 100%; background: #fff6df; border: 2px solid #f5d98a; border-radius: 16px; padding: 10px 14px; margin-top: 14px; }
.curiosidade-rot { font-family: "Baloo 2"; font-weight: 800; color: var(--ouro-escuro); }
.curiosidade p { margin: 2px 0 4px; font-weight: 700; line-height: 1.35; }
.curiosidade-ref { font-size: 12px; font-weight: 900; color: #8a6a1d; }

.regras { align-items: stretch; }
.regras h2 { font-size: 30px; margin: 0 0 8px; text-align: center; }
.regras ol { padding-left: 22px; margin: 0; line-height: 1.45; font-weight: 700; }
.regras li { margin-bottom: 6px; }
.regras .btn-jogar { align-self: center; }

/* ---------- Fim ---------- */
.fim-titulo { font-size: 44px; margin: 18px 0 0; text-align: center; line-height: 1; }
.fim-placar { margin: 10px 0 14px; background: #fff; border-radius: 99px; padding: 4px 16px; font-weight: 900; box-shadow: 0 3px 0 rgba(58,42,92,.2); }
.destaque { display: flex; flex-direction: column; align-items: center; width: 100%; }
.destaque-rot { font-family: "Baloo 2"; font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.fim-carta { width: 62%; max-width: 250px; }
.fim-carta .fig { transform: rotate(2deg); }
.fim-destaque-texto { text-align: center; font-weight: 800; margin: 14px 0 0; max-width: 340px; }

/* ---------- Confirmação ---------- */
.sobreposicao.centro { align-items: center; padding: 16px; }
.caixa { border-radius: 24px; max-width: 360px; text-align: center; }
.caixa h2 { font-size: 28px; margin: 0; }
.caixa p { font-weight: 700; margin: 8px 0 4px; }
.caixa-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 14px; }
.caixa-botoes button { margin: 0; height: 50px; padding: 0; display: grid; place-items: center; }
.caixa-botoes .btn-jogar { font-size: 21px; }

/* ---------- Galeria ---------- */
.galeria-topo { width: 100%; display: flex; align-items: center; gap: 10px; }
.galeria-topo h2 { --e: 2.5px; --d: 2px; margin: 0; font-size: 28px; }
.galeria-lista { width: 100%; margin-top: 10px; }
.grupo-titulo { display: inline-block; margin: 16px 0 8px; background: var(--cor); color: #fff; font-weight: 900; font-size: 14px; padding: 3px 12px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.15); transform: rotate(-2deg); }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini { border: 0; padding: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center 20%; border-radius: 12px; border: 4px solid #fff; outline: 3px solid var(--cor); outline-offset: -3px; box-shadow: 0 4px 0 rgba(30,60,120,.22); transition: transform .12s; }
.mini:active img { transform: scale(.96); }
.mini span { font-weight: 900; font-size: 12px; line-height: 1.1; text-align: center; }

#ficha { align-items: stretch; }
.ficha { align-items: stretch; padding: 0 22px; overflow-x: hidden; border-radius: 0; min-height: 100dvh; max-height: 100dvh; }
.ficha-foto { margin: 0 -22px; position: relative; }
.ficha-foto img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.ficha-fechar { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 2; border: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--tinta); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(58,42,92,.25); }
.ficha-nome { margin: -34px 0 0; font-size: 44px; line-height: 1; position: relative; }
.ficha-significado { margin: 8px 0 0; align-self: flex-start; background: var(--rei-claro); color: var(--tinta); border-radius: 12px; padding: 4px 12px; font-weight: 700; font-size: 15px; }
.ficha-significado b { color: var(--rei-texto); }
.ficha-info { margin: 8px 0 0; font-weight: 800; color: var(--tinta-suave); font-size: 14px; }
.ficha-destaque { margin: 4px 0 0; font-weight: 900; font-size: 17px; }
.ficha-bio { margin: 10px 0 0; font-weight: 700; line-height: 1.45; }
.ficha-sub { font-family: "Baloo 2"; font-weight: 800; font-size: 20px; margin: 14px 0 4px; }
.ficha-momentos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ficha-momentos li { background: var(--ant-claro); border-radius: 14px; padding: 8px 12px; font-weight: 700; line-height: 1.35; }
.ficha-momentos li:nth-child(4n+2) { background: var(--apa-claro); }
.ficha-momentos li:nth-child(4n+3) { background: var(--rei-claro); }
.ficha-momentos li:nth-child(4n+4) { background: var(--men-claro); }
.ficha-momentos .ref { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 900; color: var(--tinta-suave); white-space: nowrap; }
.ficha-rodape { position: sticky; bottom: 0; z-index: 2; margin: 6px -22px 0; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255,255,255,0), #fff 35%); display: flex; justify-content: center; }
.ficha-rodape .btn-jogar { margin-top: 0; }

/* ---------- Duelo: confronto do atributo disputado ---------- */
.duelo-attr { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 12px; border-radius: 99px; padding: 5px 14px; font-weight: 900; font-size: 16px; }
.duelo-attr.ant { background: var(--ant-claro); color: var(--ant-texto); }
.duelo-attr.apa { background: var(--apa-claro); color: var(--apa-texto); }
.duelo-attr.rei { background: var(--rei-claro); color: var(--rei-texto); }
.duelo-attr.men { background: var(--men-claro); color: var(--men-texto); }
.confronto { display: grid; grid-template-columns: 1fr 34px 1fr; column-gap: 4px; row-gap: 6px; justify-items: center; width: 100%; }
.lado { display: contents; }
.lado:first-child > * { grid-column: 1; }
.lado:last-child > * { grid-column: 3; }
.lado-dono { grid-row: 1; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.lado-rosto, .lado-virador { grid-row: 2; width: min(100%, 136px); }
.lado-rosto { position: relative; aspect-ratio: 1; border-radius: 24px; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--cor, #ccc), 0 5px 0 rgba(30,60,120,.2); background: var(--creme); overflow: hidden; }
.lado-virador .lado-rosto { width: 100%; }
.lado-rosto img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; display: block; }
.lado-nome { grid-row: 3; font-family: "Baloo 2"; font-weight: 800; font-size: 20px; line-height: 1.1; text-align: center; }
.lado-valor { grid-row: 4; width: min(100%, 136px); font-family: "Baloo 2"; font-weight: 800; font-size: 40px; line-height: 1; text-align: center; padding: 8px 6px 4px; border-radius: 18px; background: #f1eef8; color: var(--tinta); font-variant-numeric: tabular-nums; }
.lado.ganhou .lado-valor { background: var(--verde); color: #fff; box-shadow: 0 4px 0 #11592f; }
.lado.perdeu .lado-valor { background: #efedf3; color: #b0a9c2; }
.lado.ganhou .lado-rosto { box-shadow: 0 0 0 4px var(--verde), 0 5px 0 rgba(30,60,120,.2); }
.selo-venceu { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2; background: var(--amarelo); color: var(--tinta); font-weight: 900; font-size: 12px; padding: 1px 9px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); white-space: nowrap; }
.lado.ganhou .lado-valor.triunfo { background: radial-gradient(circle at 30% 30%, #fff3c4, var(--ouro) 60%, var(--ouro-escuro)); color: #5a3500; box-shadow: 0 4px 0 #8a5d0a; font-size: 26px; padding: 12px 6px 8px; }
.confronto-x { grid-column: 2; grid-row: 2; align-self: center; font-family: "Baloo 2"; font-weight: 800; font-size: 26px; color: #b5aec6; }
.lado-virador { perspective: 700px; display: grid; }
.lado-virador > * { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s ease; }
.lado-virador .frente { transform: rotateY(180deg); }
.lado-virador.virado .frente { transform: rotateY(0); }
.lado-virador.virado .tras { transform: rotateY(-180deg); }
.lado-virador .tras { border-radius: 24px; border: 5px solid #fff; background:
  radial-gradient(circle at 50% 50%, var(--amarelo) 0 16%, transparent 17%),
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.18) 0 10deg, transparent 10deg 20deg),
  linear-gradient(160deg, #6a4fc7, #2b8bd6 60%, #2bb39a); box-shadow: 0 5px 0 rgba(30,60,120,.2); }
.btn-ver-cartas { border: 0; background: transparent; margin-top: 10px; font-weight: 900; font-size: 14px; color: var(--apa-texto); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 12px; }

/* emoji separado do texto nos botões */
.e { margin-right: 7px; }
.botoes-par { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr 50px; gap: 10px; margin-top: 12px; }
.btn-som { font-size: 22px; padding: 0; }
.botoes-par .btn-galeria { margin-top: 0; }
.duelo-cartas[hidden] { display: none; }
.lado-virador .tras { aspect-ratio: 1; }
.lado.ganhou .lado-valor.triunfo.longo, .lado.perdeu .lado-valor.longo { font-size: 18px; line-height: 1.1; padding: 12px 6px 8px; }
html.travado, html.travado body { overflow: hidden; }
/* Ficha em tela cheia: layout de bloco e sem animação (evita falhas de rolagem no Safari do iPhone) */
#ficha .painel { display: block; animation: none; }
#ficha .ficha-significado { width: fit-content; }

/* ---------- Ficha: foto fixa, texto rola por cima e a foto escurece ---------- */
#ficha .painel { padding: 0; }
#ficha .ficha-foto { position: sticky; top: 0; z-index: 0; margin: 0; }
#ficha .ficha-foto img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
#ficha .ficha-foto::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--escuro, 0); pointer-events: none; }
.ficha-corpo { position: relative; z-index: 1; margin-top: -44px; padding: 0 22px; background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -8px 18px rgba(0,0,0,.18); }
#ficha .ficha-nome { margin: 0 0 6px; padding-top: 22px; }
#ficha .ficha-rodape { padding-top: 40px; margin-top: -8px; background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.92) 45%, #fff 60%); }

/* ---------- Botões do topo ficam acima da máscara do duelo ---------- */
#tela-partida .hud-btn { position: relative; z-index: 11; }
#confirmar { z-index: 12; }

/* ---------- Seta animada apontando os atributos ---------- */
.dica-toque { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-top: 4px; }
.dica-toque .balao { margin-top: 0; }
.seta { color: var(--tinta); flex: none; margin-bottom: 14px; animation: apontar 1.1s ease-in-out infinite; }
@keyframes apontar { 50% { transform: translate(-3px, -7px); } }
@media (prefers-reduced-motion: reduce) { .seta { animation: none; } }

/* ---------- Tela final ---------- */
.fim-icone { position: relative; margin-top: 18px; width: 96px; height: 96px; border-radius: 50%; border: 6px solid #fff; display: grid; place-items: center; font-size: 52px; box-shadow: 0 6px 0 rgba(30,60,120,.25); background: #d9d4ea; }
.fim-icone.jogador { background: #4cd16d; }
.fim-icone.cpu { background: #ff6b6b; }
.fim-icone.coroa::after { content: "👑"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 34px; animation: coroa-flutua 2.6s ease-in-out infinite; }
/* coroa flutuando, balançando de leve */
@keyframes coroa-flutua { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-8deg); } 50% { transform: translateX(-50%) translateY(-7px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .fim-icone.coroa::after { animation: none; } }
.tela#tela-fim .fim-titulo { margin-top: 12px; font-size: 40px; }
.fim-rodadas { margin: -6px 0 14px; font-weight: 800; font-size: 14px; text-align: center; }
.fim-profeta { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 340px; background: #fff; border-radius: 22px; padding: 12px; box-shadow: 0 5px 0 rgba(30,60,120,.2); }
.lado-rosto.fim-rosto { width: 112px; flex: none; }
.fim-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.fim-info .lado-nome { text-align: left; font-size: 22px; }
.fim-info .duelo-attr { margin: 0; font-size: 13px; padding: 3px 10px; }
.fim-valor { font-family: "Baloo 2"; font-weight: 800; font-size: 28px; line-height: 1.15; background: var(--verde); color: #fff; border-radius: 14px; padding: 4px 14px 1px; box-shadow: 0 4px 0 #11592f; }
.fim-valor.longo { font-size: 16px; padding: 7px 12px 4px; }
#tela-fim .fim-destaque-texto { margin-top: 12px; }
#fim-destaque[hidden] { display: none; }
/* frase em duas linhas: a foto perde a altura de uma linha (4.5cqw x 1.3) */
.fig.frase-2l .foto { aspect-ratio: auto; height: calc(106.69cqw - 5.85cqw); }

/* ---------- Tela final com a "Melhor jogada" ---------- */
#tela-fim { justify-content: flex-start; }
#tela-fim .fim-icone { margin-top: 22px; width: 76px; height: 76px; font-size: 40px; border-width: 5px; }
#tela-fim .fim-icone.coroa::after { top: -24px; font-size: 26px; }
#tela-fim .fim-titulo { margin: 8px 0 10px; font-size: 38px; }
.fim-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.fim-stat { background: #fff; border-radius: 16px; padding: 6px 10px 4px; text-align: center; box-shadow: 0 4px 0 rgba(30,60,120,.18); }
.fim-stat small { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.fim-stat b { font-family: "Baloo 2"; font-weight: 800; font-size: 22px; line-height: 1.2; }
.fim-stat b em { font-style: normal; color: var(--tinta-suave); font-size: 15px; margin: 0 5px; }
.fim-melhor { width: 100%; max-width: 380px; margin-top: 30px; background: #fff; border-radius: 24px; padding: 14px 12px 16px; box-shadow: 0 6px 0 rgba(30,60,120,.2); display: flex; flex-direction: column; align-items: center; }
.fim-melhor[hidden] { display: none; }
.faixa-m { background: var(--amarelo); padding: 3px 24px 1px; font-family: "Baloo 2"; font-weight: 800; font-size: 15px; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); margin-top: -28px; }
.fim-melhor .duelo-attr { margin: 10px 0 12px; }
.fim-melhor .confronto { grid-template-columns: 1fr 28px 1fr; }
.fim-melhor .lado-rosto, .fim-melhor .lado-valor { width: min(100%, 148px); }
.fim-frase { margin: 12px 4px 0; text-align: center; font-weight: 800; font-size: 14px; color: var(--tinta-suave); }
.fim-botoes { margin-top: auto; padding-top: 16px; width: 100%; max-width: 380px; display: grid; gap: 10px; }
.fim-botoes .btn-jogar, .fim-botoes .btn-galeria { margin: 0; max-width: none; }
/* no botão centralizado em grade, a camada do contorno também precisa centralizar */
.caixa-botoes .cartoon::before { display: grid; place-items: center; }

/* Ficha: puxador no topo da aba e um "aceno" ao abrir, para mostrar que o texto sobe */
.ficha-corpo::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 99px; background: #d3cee0; }

/* Sem "efeito elástico" do iPhone: a página não rola; cada tela rola por dentro, só se precisar */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.tela { position: fixed; inset: 0; min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
.tela.ativa > * { flex-shrink: 0; }
/* telas mais baixas: a capa encolhe para a tela inicial caber inteira, sem rolar */
@media (max-height: 860px) { .capa { zoom: .86; } }
@media (max-height: 760px) { .capa { zoom: .74; } }
@media (max-height: 680px) { .capa { zoom: .62; } }

/* ---------- acesso (código na primeira vez) ---------- */
.acesso { position: fixed; inset: 0; z-index: 50; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(circle, rgba(255,255,255,.45) 2px, transparent 2.5px) 0 0 / 22px 22px, linear-gradient(var(--ceu-1), var(--ceu-2)); }
.acesso[hidden] { display: none; }
.acesso-caixa { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.acesso-cartao { width: 100%; margin-top: 26px; background: #fff; border-radius: 24px; padding: 20px 18px 18px; box-shadow: 0 6px 0 rgba(30,60,120,.2); display: flex; flex-direction: column; align-items: center; text-align: center; }
.acesso-cartao label { font-weight: 800; font-size: 16px; line-height: 1.35; }
.acesso-cartao input { width: 100%; margin-top: 14px; border: 3px solid #d9d2e8; border-radius: 16px; padding: 12px 10px 10px; text-align: center;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .08em; color: var(--tinta); text-transform: uppercase; background: #faf8fd; }
.acesso-cartao input:focus { outline: none; border-color: var(--ant); background: #fff; }
.acesso-cartao input::placeholder { color: #c9c2d6; }
.acesso-erro { min-height: 20px; margin: 8px 0 0; font-weight: 800; font-size: 14px; color: var(--vermelho); }
.acesso-cartao .btn-jogar { margin-top: 6px; font-size: 28px; }
.acesso-cartao .btn-jogar:disabled { opacity: .6; }
.acesso-dica { margin: 12px 0 0; font-weight: 700; font-size: 13px; color: var(--tinta-suave); }

/* sem zoom no toque duplo (iOS); o zoom de pinça continua funcionando */
* { touch-action: manipulation; }