/* Space Frog X Cardverse — camada visual.
   Linguagem das artes das cartas: espaço escuro, aro chanfrado metálico na cor
   da raridade com brilho neon, gemas hexagonais azul (custo) e laranja (poder),
   tipografia condensada pesada itálica. Fontes embutidas (sem CDN). */

@font-face { font-family: 'Saira Condensed'; src: url('fonts/saira-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/saira-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/saira-condensed-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo2-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo2-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --fundo: #05030c;
  --navy: #0b0a1f;
  --painel: linear-gradient(180deg, rgba(28, 22, 58, .88), rgba(11, 9, 28, .94));
  --borda: rgba(150, 110, 255, .28);
  --borda-forte: rgba(184, 77, 255, .6);
  --verde: #86ff1e;
  --verde-esc: #3f9a0e;
  --laranja: #ff8a1f;
  --roxo: #b84dff;
  --roxo-esc: #5b1fd6;
  --ciano: #2fd5ff;
  --ouro: #ffc83d;
  --vermelho: #ff4a3d;
  --azul: #2f6bff;
  --texto: #eef0ff;
  --mudo: #9b97bd;
  --fd: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --ft: 'Exo 2', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --chanfro: 10px;
  /* curva de mola: nada de `ease` padrão, o movimento tem que ter massa */
  --mola: cubic-bezier(.32, .72, 0, 1);
  --mola-toque: cubic-bezier(.2, .9, .3, 1.25);
  --clip-btn: polygon(var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--ft); overflow: hidden; }
body { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
input { font: inherit; }
h1, h2, h3 { font-family: var(--fd); font-style: italic; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
a { color: var(--verde); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- fundo: nebulosa, estrelas, horizonte de planeta */
#fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(90% 60% at 50% 0%, #1a0f3a 0%, #0b0620 45%, #05030c 100%); }
#fundo .nebulosa { position: absolute; inset: -25%; background:
  radial-gradient(38% 28% at 18% 28%, rgba(120, 50, 230, .30), transparent 70%),
  radial-gradient(30% 24% at 82% 18%, rgba(226, 61, 255, .16), transparent 70%),
  radial-gradient(28% 22% at 62% 62%, rgba(47, 107, 255, .14), transparent 70%),
  radial-gradient(30% 26% at 30% 85%, rgba(134, 255, 30, .07), transparent 70%);
  filter: blur(24px); animation: deriva 80s linear infinite alternate; }
#fundo .estrelas { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 50% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 15%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 20% 90%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 60% 85%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 30%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 40% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 55%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 77% 78%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 15% 45%, #fff 50%, transparent 51%);
  background-size: 420px 420px, 420px 420px, 640px 640px, 420px 420px, 520px 520px, 640px 640px, 420px 420px, 520px 520px, 640px 640px, 420px 420px, 520px 520px, 420px 420px; opacity: .6; }
#fundo::after { /* horizonte do planeta, como no hero da arte */
  content: ''; position: absolute; left: 50%; bottom: -168vw; width: 220vw; height: 220vw; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, #2a1a52 0%, #130c2e 22%, #07040f 45%);
  box-shadow: 0 -6px 60px rgba(150, 90, 255, .45), 0 -1px 0 rgba(200, 160, 255, .55), inset 0 30px 80px rgba(134, 255, 30, .05); }
@media (min-width: 900px) { #fundo::after { bottom: -150vw; width: 190vw; height: 190vw; } }
@keyframes deriva { to { transform: translate(3%, 2%) scale(1.04); } }

#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.tela { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b)); animation: surgir .25s ease; }
.tela.centro { align-items: center; justify-content: center; text-align: center; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }

/* ---------- logo: SPACE (metal) / FROG (verde) X (laranja) / CARDVERSE */
.logo { font-family: var(--fd); font-style: italic; font-weight: 900; line-height: .86; text-transform: uppercase; display: inline-block; }
.logo .l1 { display: block; font-size: 1em; color: #f4f4ff; letter-spacing: .01em; text-shadow: 0 .035em 0 #a9a9c8, 0 .07em 0 #5a5a78, 0 .09em .18em rgba(0, 0, 0, .85); }
.logo .l2 { display: block; font-size: 1.42em; color: var(--verde); text-shadow: 0 .035em 0 #3d8a0e, 0 .07em 0 #1f4a05, 0 0 .3em rgba(134, 255, 30, .5), 0 .1em .2em rgba(0, 0, 0, .8); }
.logo .l2 b { color: var(--laranja); text-shadow: 0 .035em 0 #a34a00, 0 .07em 0 #5a2800, 0 0 .3em rgba(255, 138, 31, .55), 0 .1em .2em rgba(0, 0, 0, .8); }
.logo .l3 { display: block; font-family: var(--ft); font-style: normal; font-weight: 700; font-size: .36em; letter-spacing: .46em; margin: .5em 0 0 .1em; background: linear-gradient(90deg, #f0e6ff, #b98cff 60%, #e6d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; padding-bottom: .35em; }
.logo .l3::after { content: ''; position: absolute; left: .1em; right: .4em; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--roxo), transparent); box-shadow: 0 0 10px var(--roxo); }
.slogan { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: #dcd6ff; }
.slogan b { color: var(--verde); text-shadow: 0 0 12px rgba(134, 255, 30, .45); }

/* ---------- botões chanfrados */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; clip-path: var(--clip-btn); transition: transform .12s var(--mola-toque), filter .2s var(--mola); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; filter: grayscale(.4); }
.btn-verde { background: linear-gradient(180deg, #c2ff5e 0%, #86ff1e 40%, #4fbf12 100%); color: #07220a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(0, 0, 0, .25); }
/* botão de terminar turno: losango magenta do mockup */
.controles .btn-turno { --chanfro: 16px; background: linear-gradient(180deg, #d06bff 0%, #8b2fd6 46%, #5a1394 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.3), 0 0 22px rgba(184,77,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.btn-roxo { background: linear-gradient(180deg, #c88aff 0%, #8b3dff 45%, #5b1fd6 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.btn-laranja { background: linear-gradient(180deg, #ffc46a 0%, #ff8a1f 45%, #d85f00 100%); color: #2a1200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .25); }
.btn-fantasma { background: linear-gradient(180deg, rgba(60, 45, 110, .6), rgba(25, 18, 50, .8)); color: #e8e2ff; box-shadow: inset 0 0 0 1px var(--borda); }
.btn-vermelho { background: linear-gradient(180deg, rgba(120, 30, 40, .7), rgba(60, 12, 20, .85)); color: #ffb3b3; box-shadow: inset 0 0 0 1px rgba(255, 77, 77, .45); }
.btn-xl { font-size: 24px; padding: 16px 44px; --chanfro: 14px; }
.btn-sm { font-size: 14px; padding: 8px 14px; min-height: 44px; --chanfro: 7px; }
.btn-icone { width: 44px; height: 44px; padding: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, rgba(70, 50, 130, .8), rgba(25, 18, 50, .9)); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.brilho { filter: drop-shadow(0 0 14px rgba(134, 255, 30, .45)); }
.brilho-roxo { filter: drop-shadow(0 0 14px rgba(184, 77, 255, .5)); }

/* ---------- painéis */
.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; backdrop-filter: blur(10px); position: relative; }
.painel.chanfro { border-radius: 0; border: 0; clip-path: var(--clip-btn); box-shadow: inset 0 0 0 1px var(--borda); }
.barra { display: flex; align-items: center; gap: 10px; }
.espaco { flex: 1; }
.mudo { color: var(--mudo); }
.peq { font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--borda); font-size: 13px; font-weight: 600; font-family: var(--fd); font-style: italic; letter-spacing: .03em; text-transform: uppercase; }
.chip.verde { color: var(--verde); border-color: rgba(134, 255, 30, .4); }
.chip.ouro { color: var(--ouro); border-color: rgba(255, 200, 61, .4); }
.chip.roxo { color: #dcc0ff; border-color: rgba(184, 77, 255, .5); }
.grade { display: grid; gap: 10px; }
.rolavel { flex: 1; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.campo { width: 100%; padding: 13px 14px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid var(--borda); color: var(--texto); outline: none; font-size: 16px; }
.campo:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(134, 255, 30, .15); }

.retrato { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- toasts */
#toasts { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 6px; pointer-events: none; width: min(92vw, 420px); }
.toast { background: rgba(16, 10, 34, .94); border: 1px solid var(--borda); border-left: 3px solid var(--verde); border-radius: 4px; padding: 9px 12px; font-size: 13px; animation: toastIn .2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.toast.erro { border-left-color: var(--vermelho); }
.toast.ouro { border-left-color: var(--ouro); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- CARTA (o elemento-assinatura) */
.carta {
  --cor: #dfe4f5; --cor2: #8c94b3; --glow: rgba(223, 228, 245, .45);
  --cut: .8em;
  position: relative; width: var(--w, 120px); aspect-ratio: 5 / 7; font-size: calc(var(--w, 120px) * .085);
  flex: none; filter: drop-shadow(0 0 .55em var(--glow)) drop-shadow(0 .18em .22em rgba(0,0,0,.35)) drop-shadow(0 .5em .8em rgba(0,0,0,.45));
  transition: transform .2s var(--mola), filter .2s var(--mola);
}
.carta.raro { --cor: #5fe3ff; --cor2: #1486c8; --glow: rgba(47, 213, 255, .55); }
.carta.epico { --cor: #d98cff; --cor2: #7a1fd6; --glow: rgba(184, 77, 255, .6); }
.carta.lendario { --cor: #ffe08a; --cor2: #c98a0a; --glow: rgba(255, 200, 61, .6); }
.carta.mitico { --cor: #ff8a7a; --cor2: #c41d2a; --glow: rgba(255, 74, 61, .65); }
.carta .corpo { position: absolute; inset: 0; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: linear-gradient(160deg, #ffffff 0%, var(--cor) 18%, var(--cor2) 55%, var(--cor) 85%, #ffffff 100%); }
.carta .moldura { position: absolute; inset: .26em; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: #080614; display: flex; flex-direction: column; overflow: hidden; }
.carta .arte { flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 30%, #2a1650 0%, #0c0720 70%), #0c0720; }
.carta .arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta .arte .marca { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 2.6em; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: .02em rgba(255, 255, 255, .14); opacity: .9; }
.carta .arte .marca::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 50%, var(--glow), transparent 70%); opacity: .25; }
.carta .arte::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, transparent, #080614); pointer-events: none; }
.carta .rodape { position: relative; padding: .1em .45em .4em; text-align: center; background: #080614; }
.carta .nome { font-family: var(--fd); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.2em; line-height: 1; letter-spacing: .01em; color: #fff; text-shadow: 0 .06em 0 #000, 0 0 .5em rgba(255, 255, 255, .15); }
.carta .sub { font-family: var(--fd); font-style: italic; font-weight: 700; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: #cfcbf0; margin-top: .1em; }
.carta .texto { font-size: .72em; line-height: 1.2; color: #e9e7ff; margin-top: .35em; min-height: 2.4em; }
.carta .raridade { display: inline-block; margin-top: .4em; padding: .1em .9em; font-family: var(--fd); font-style: italic; font-weight: 800; font-size: .62em; letter-spacing: .2em; text-transform: uppercase; color: var(--cor); background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .08); }
/* gemas hexagonais */
.carta .hex { position: absolute; top: -.25em; width: 2.5em; height: 2.85em; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 3; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 1.3em; color: #fff; text-shadow: 0 .06em .05em rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #ffffff 0%, #cfd8ff 40%, #5c6a9c 100%); }
.carta .hex::before { content: ''; position: absolute; inset: .16em; clip-path: inherit; z-index: -1; }
.carta .hex::after { content: ''; position: absolute; left: .35em; right: .35em; top: .22em; height: 36%; clip-path: polygon(50% 0, 100% 45%, 0 45%); background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.carta .hex.custo { left: -.25em; }
.carta .hex.custo::before { background: linear-gradient(180deg, #8fb6ff 0%, #2f6bff 45%, #0d37b0 100%); }
.carta .hex.poder { right: -.25em; }
.carta .hex.poder::before { background: linear-gradient(180deg, #ffd27a 0%, #ff8a1f 45%, #c24a00 100%); }
.carta .hex.poder.mais::before { background: linear-gradient(180deg, #c8ff7a 0%, #6fe01f 45%, #2f8a0a 100%); }
.carta .hex.poder.menos::before { background: linear-gradient(180deg, #ff9a9a 0%, #ff3b3b 45%, #8a0a0a 100%); }
.carta .hex.custo.mais::before { background: linear-gradient(180deg, #c8ff7a 0%, #6fe01f 45%, #2f8a0a 100%); }
.carta.mini .texto, .carta.mini .sub, .carta.mini .raridade { display: none; }
.carta.mini .rodape { padding: .12em .25em .3em; }
.carta.mini .nome { font-size: 1.05em; }
.carta.verso { --cor: #a774ff; --cor2: #4a1aa8; --glow: rgba(139, 61, 255, .5); }
.carta.verso .moldura { background: radial-gradient(70% 50% at 50% 40%, #3a1a7a, #0a0618 75%); }
.carta.verso .moldura::before { content: 'SFX'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 2em; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: .03em rgba(134, 255, 30, .55); text-shadow: 0 0 .6em rgba(134, 255, 30, .35); }
.carta.verso .moldura::after { content: ''; position: absolute; inset: .6em; border: 1px solid rgba(180, 140, 255, .25); clip-path: polygon(.5em 0, calc(100% - .5em) 0, 100% .5em, 100% calc(100% - .5em), calc(100% - .5em) 100%, .5em 100%, 0 calc(100% - .5em), 0 .5em); }
.carta.trancada { filter: grayscale(1) brightness(.5) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
.carta.selecionada { transform: translateY(-12px) scale(1.06); filter: drop-shadow(0 0 .9em rgba(134, 255, 30, .85)) drop-shadow(0 .4em .6em rgba(0, 0, 0, .6)); z-index: 3; }
.carta.selecionada .corpo { background: linear-gradient(160deg, #fff, var(--verde) 30%, #3f9a0e 70%, #fff); }
.carta.pendente .corpo { background: linear-gradient(160deg, #fff, var(--verde) 30%, #3f9a0e 70%, #fff); }
.carta.pendente { filter: drop-shadow(0 0 .6em rgba(134, 255, 30, .6)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
.carta.nova { animation: cartaEntra .4s cubic-bezier(.2, .9, .3, 1.2); }
.carta.revelando { animation: virar .55s ease; }
.carta.destruida { animation: destruir .5s ease forwards; }
.carta.arrasto-clone { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg) scale(1.08); filter: drop-shadow(0 10px 24px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(134,255,30,.6)); transition: none; }
.carta.arrastando-origem { opacity: .25; }
.dica-jogar.aviso { color: var(--laranja); text-shadow: 0 0 10px rgba(255,138,31,.4); }
.btn-turno.chama { animation: chamaBtn 1.2s ease-in-out infinite; }
@keyframes chamaBtn { 50% { filter: brightness(1.25) drop-shadow(0 0 12px rgba(134,255,30,.7)); } }
.dica-jogar { position: relative; z-index: 31; text-align: center; font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); padding: 2px 0; text-shadow: 0 0 10px rgba(134,255,30,.4); animation: surgir .2s; }
.carta.indisponivel { opacity: .45; filter: grayscale(.6) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
@keyframes cartaEntra { from { transform: translateY(40px) scale(.7); opacity: 0; } }
@keyframes virar { 0% { transform: rotateY(90deg); filter: brightness(2); } 100% { transform: rotateY(0); } }
@keyframes destruir { to { transform: scale(.4) rotate(12deg); opacity: 0; } }

/* ---------- MESA (partida) */
.mesa { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; gap: 6px; min-width: 0; max-width: 100vw; overflow: hidden; }
.mesa .topo { display: flex; align-items: center; gap: 6px; padding: 2px 2px; min-width: 0; }
.jogador { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.jogador.dele { justify-content: flex-end; }
.jogador .avatar { width: 34px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #7ec2ff, #1c4fa8); }
.jogador.dele .avatar { background: linear-gradient(180deg, #ff8a9a, #a01427); }
/* etiqueta com o nome, como no mockup: azul de um lado, vermelha do outro */
.jogador .tag { min-width: 0; padding: 3px 9px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(40,90,180,.85), rgba(12,32,80,.9)); box-shadow: inset 0 0 0 1px rgba(140,190,255,.35); }
.jogador.dele .tag { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 6px 100%); text-align: right;
  background: linear-gradient(180deg, rgba(170,30,50,.85), rgba(70,8,18,.92)); box-shadow: inset 0 0 0 1px rgba(255,140,150,.32); }
.jogador .tnome { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.jogador .tinfo { font-size: 9.5px; color: #cfd8f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cubos { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: none; }
.cubo { width: 40px; height: 40px; background: linear-gradient(135deg, #d2a6ff, #8b3dff 50%, #3e129e); box-shadow: 0 0 18px rgba(184, 77, 255, .7), inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -8px 10px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 22px; transform: rotate(45deg); transition: transform .34s var(--mola-toque); }
.cubo span { transform: rotate(-45deg); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.cubo.pulso { animation: pulso .6s ease; }
@keyframes pulso { 50% { transform: rotate(45deg) scale(1.35); } }
.turno-ind { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 11px; color: var(--mudo); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.turno-ind b { color: var(--verde); }
.relogio { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 11px; color: var(--mudo); }
.relogio.urgente { color: var(--vermelho); animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .4; } }
.topo .canto { display: flex; flex-direction: column; gap: 3px; flex: none; }
/* o ícone fica pequeno, mas a área tocável não pode encolher junto */
.btn-icone.peq { width: 44px; height: 44px; padding: 0; }
.btn-icone.peq svg { width: 16px; height: 16px; }

/* --- O CAMPO: um fundo cósmico único atrás de tudo, como no mockup, em vez de
   cada coluna ter a sua arte. Os locais viram PAINÉIS compactos no centro. --- */
.campo { position: relative; min-height: 0; min-width: 0; overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: radial-gradient(120% 70% at 50% 6%, #22114e 0%, #12082c 38%, #070316 72%, #05020e 100%);
  box-shadow: inset 0 0 0 1px rgba(150,110,255,.20), inset 0 0 90px rgba(0,0,0,.7); }
.campo .ceu { position: absolute; inset: 0; opacity: .62; background-image:
  radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 62% 12%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 34% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 82% 44%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 86%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 74% 78%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 46% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 66%, #fff 50%, transparent 51%);
  background-size: 240px 300px; animation: derivaEstrelas 120s linear infinite alternate; }
/* o anel de galáxia alaranjado do mockup, no alto do campo */
.campo .galaxia { position: absolute; left: 50%; top: 2%; width: min(56%, 340px); aspect-ratio: 2.1 / 1;
  transform: translateX(-50%) rotate(-13deg); pointer-events: none; opacity: .55;
  background:
    radial-gradient(closest-side, transparent 54%, rgba(255,150,60,.55) 61%, rgba(255,90,40,.30) 70%, transparent 82%),
    radial-gradient(closest-side, rgba(255,220,160,.45) 0%, rgba(255,120,50,.22) 30%, transparent 62%);
  filter: blur(.6px); animation: giraGalaxia 90s linear infinite; }
@keyframes giraGalaxia { to { transform: translateX(-50%) rotate(347deg); } }

.locais { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; height: 100%; min-height: 0; min-width: 0; align-items: stretch; padding: 4px; }
.local { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 0; min-width: 0;
  transition: transform .24s var(--mola); }
.local.alvo { cursor: pointer; }
.local.alvo .painel-local { box-shadow: 0 0 0 2px var(--verde), 0 0 26px rgba(134,255,30,.55); animation: alvoPulsa 1.2s ease-in-out infinite; }
.local.alvo.sobre .painel-local { box-shadow: 0 0 0 3px var(--verde), 0 0 40px rgba(134,255,30,.8); transform: scale(1.05); animation: none; }
@keyframes alvoPulsa { 50% { box-shadow: 0 0 0 2px var(--verde), 0 0 38px rgba(134,255,30,.8); } }
.mesa.arrastando .local:not(.alvo) { opacity: .5; filter: saturate(.55); }

/* --- painel do local: objeto com arte própria, como uma placa/carta --- */
.centro-local { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; }
.painel-local { position: relative; width: 100%; aspect-ratio: 1.24 / 1; padding: 3px;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  background: linear-gradient(180deg, rgba(190,165,255,.55), rgba(90,70,150,.3) 45%, rgba(20,14,40,.6));
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.55), 0 3px 10px -4px rgba(0,0,0,.4);
  transition: box-shadow .26s var(--mola), transform .26s var(--mola); }
/* o miolo, com raio concêntrico menor e brilho interno na borda de cima */
.painel-local > * { clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.painel-local .pl-arte, .painel-local .pl-veu { inset: 3px; }
.painel-local::after { content: ''; position: absolute; inset: 3px; pointer-events: none; z-index: 3;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -14px 24px -14px rgba(0,0,0,.7); }
.painel-local .pl-arte { position: absolute; inset: 0; background: var(--arte); background-size: cover; background-position: center; filter: saturate(1.35) brightness(1.35); }
.painel-local .pl-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,2,10,.10) 0%, rgba(4,2,10,0) 34%, rgba(4,2,10,.55) 68%, rgba(4,2,10,.92) 100%); }
.painel-local .pl-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px 5px; text-align: center; }
.painel-local .pl-nome { font-family: var(--fd); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(10px, 3vw, 14px); line-height: 1.02; color: #fff; text-shadow: 0 1px 0 #000, 0 0 12px rgba(0,0,0,.9); }
.painel-local .pl-efeito { font-size: clamp(7.5px, 2.2vw, 10px); line-height: 1.12; color: #ded8f7; margin-top: 2px; text-shadow: 0 1px 3px #000; }
.painel-local.oculto .pl-arte { filter: grayscale(.75) brightness(.45); }
.painel-local.oculto::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: clamp(28px, 9vw, 46px); color: transparent;
  -webkit-text-stroke: 2px rgba(180,140,255,.7); text-shadow: 0 0 24px rgba(139,61,255,.6); }
/* local que você está ganhando: aro dourado quente, como o Planet X do mockup */
.local.ganhando .painel-local { box-shadow: 0 0 0 2px #ffc24a, 0 0 30px rgba(255,170,50,.6), 0 6px 18px rgba(0,0,0,.6); transform: scale(1.04); }
.local.perdendo .painel-local { box-shadow: 0 0 0 1.5px rgba(255,90,110,.75), 0 6px 18px rgba(0,0,0,.6); }

/* poder: hexágono dourado acima e abaixo do painel */
.centro-local .pp { min-width: 26px; height: 25px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 14px; color: #2a1600;
  background: linear-gradient(180deg, #ffe9a8, #f2b23a 52%, #b06f0d);
  text-shadow: 0 1px 0 rgba(255,255,255,.4); transition: transform .3s var(--mola-toque); }
.centro-local .pp.dele { background: linear-gradient(180deg, #f0d0ff, #b06ae0 52%, #6a2596); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.local.ganhando .pp.meu { box-shadow: 0 0 16px rgba(255,190,70,.95); transform: scale(1.14); }
.local.oculto .centro-local .pp { display: none; }

/* cartas nos locais: 2 por linha, encostadas na faixa; o lado do oponente é
   levemente menor, o que lê como profundidade sem embaçar texto */
.lado { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; justify-content: center; min-height: 0; overflow: hidden; padding: 3px 2px; }
.lado.dele { align-content: flex-end; }
.lado.dele .carta { transform: scale(.93); }
/* dimensiona pela ALTURA: assim as 4 cartas (2x2) sempre cabem sem cortar, e a
   largura sai do aspect-ratio. max-width 50% garante no máximo 2 por linha. */
.lado .carta { width: auto; height: calc(50% - 2px); max-height: 132px; max-width: calc(50% - 3px);
  aspect-ratio: 5 / 7; font-size: clamp(5px, 2.05vw, 8.6px); }

/* revelação encenada: cada carta entra no seu tempo (--atraso) */
.carta.revelando { animation: revelarCarta .46s cubic-bezier(.2, .8, .3, 1.15) var(--atraso, 0ms) backwards; }
@keyframes revelarCarta {
  0%   { transform: rotateY(90deg) scale(.72); opacity: 0; filter: brightness(2.6); }
  58%  { transform: rotateY(0deg) scale(1.12); opacity: 1; filter: brightness(1.7); }
  100% { transform: none; opacity: 1; filter: none; }
}
.lado.dele .carta.revelando { animation-name: revelarCartaDele; }
@keyframes revelarCartaDele {
  0%   { transform: rotateY(90deg) scale(.68); opacity: 0; filter: brightness(2.6); }
  58%  { transform: rotateY(0deg) scale(1.04); opacity: 1; filter: brightness(1.7); }
  100% { transform: scale(.93); opacity: 1; filter: none; }
}

/* --- mão em leque --- */
.rodape-mesa { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mao { display: flex; justify-content: center; align-items: flex-end; padding: 34px 8px 2px; min-height: 0; min-width: 0; }
/* touch-action: none é OBRIGATÓRIO para arrastar no celular. Sem isso o
   navegador entende o gesto como rolagem, assume o toque e dispara
   pointercancel — o arrasto morre no meio e parece que a carta não responde. */
.mao .carta { --w: clamp(74px, 18.5vw, 106px); cursor: pointer; transform-origin: bottom center; touch-action: none;
  margin: 0 calc(var(--w) * -0.14);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px));
  z-index: var(--i, 0); }
.mao .carta.selecionada { transform: rotate(0deg) translateY(-16px) scale(1.22); z-index: 30;
  filter: drop-shadow(0 0 .9em rgba(134,255,30,.85)) drop-shadow(0 .5em .8em rgba(0,0,0,.75)); }

/* faixa com o efeito da carta escolhida. O Snap não escreve o efeito na carta
   da mão — mostra num painel legível. Espremer o texto na carta era o que
   ficava ilegível no celular. */
.sel-info { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 34px 7px 12px; margin-bottom: 2px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(30,46,96,.95), rgba(9,14,34,.97));
  box-shadow: inset 0 0 0 1px rgba(134,255,30,.45); animation: surgir .18s ease; }
.si-nome { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 15px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--verde); text-shadow: 0 0 10px rgba(134,255,30,.4); line-height: 1.05; }
.si-efeito { font-size: 11.5px; line-height: 1.25; color: #e4e9ff; }
.si-lupa { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 40px;
  display: flex; align-items: center; justify-content: center; color: #b9cdf0;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, rgba(70,100,180,.8), rgba(20,30,70,.9)); }

/* ---------- ficha da carta em tela cheia (igual arte/snap/snap-03.jpg) ---------- */
.ficha { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 16px calc(18px + var(--safe-b)); background: rgba(4,2,10,.94); backdrop-filter: blur(8px); animation: surgir .2s ease; }
.ficha-topo { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: #cbd6f5; padding: 6px 30px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(52,68,124,.95), rgba(14,20,46,.97)); box-shadow: inset 0 0 0 1px rgba(150,190,255,.35); }

/* palco: segura a carta, as gemas grandes e o nome que atravessa a base */
.ficha-palco { position: relative; display: flex; justify-content: center; margin: 14px 0 4px; }
.ficha .carta.ficha-carta { --w: min(58vw, 232px); }
/* dentro da ficha a carta mostra só a arte: nome, texto e gemas vêm por fora */
.ficha .carta.ficha-carta .rodape, .ficha .carta.ficha-carta .hex { display: none; }
.ficha .carta.ficha-carta .arte::after { height: 30%; }
/* gemas grandes, sobrepondo os cantos de cima */
.ficha-palco .fh { position: absolute; top: -14px; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 31px; color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.7); z-index: 3; }
.ficha-palco .fh.custo { left: -14px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #cfe4ff 0%, #5b9bff 30%, #1f4fd8 62%, #0b2680 100%);
  box-shadow: 0 0 20px rgba(70,140,255,.8), inset 0 -6px 12px rgba(0,0,0,.35), inset 0 4px 10px rgba(255,255,255,.5); }
.ficha-palco .fh.poder { right: -14px; clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #ffd08a 0%, #ff8a1f 45%, #c24a00 100%);
  box-shadow: 0 0 20px rgba(255,140,40,.7), inset 0 3px 0 rgba(255,255,255,.5); }
/* o NOME atravessa a base da carta, como no Snap */
.ficha-nome { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: max-content; max-width: 118%;
  z-index: 4; text-align: center; line-height: .92;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: clamp(27px, 8.6vw, 40px);
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.9), 0 0 34px var(--glow, rgba(255,255,255,.35)); }
.ficha-palco.lendario .ficha-nome { color: #ffe9a8; }
.ficha-palco.mitico .ficha-nome { color: #ffc0b0; }
.ficha-palco.epico .ficha-nome { color: #eecfff; }
.ficha-palco.raro .ficha-nome { color: #cdeeff; }
.ficha-sub { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: #efe9ff; text-shadow: 0 2px 4px rgba(0,0,0,.9); }
.ficha-efeito { max-width: 330px; margin-top: 34px; text-align: center; font-size: 15.5px; line-height: 1.42; color: #f2f4ff; }
.ficha-efeito b { color: #fff; font-weight: 800; }
.ficha-x { width: 68px; height: 46px; margin-top: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #ffd3d3; clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, rgba(186,40,54,.95), rgba(74,10,18,.97)); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 0 18px rgba(200,40,50,.4); }
.ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; max-width: 340px; }
.ficha .carta.ficha-carta.trancada { filter: grayscale(1) brightness(.5) drop-shadow(0 .3em .5em rgba(0,0,0,.6)); }
.ficha-x { width: 62px; height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #ffd3d3; clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, rgba(170,36,50,.92), rgba(70,10,18,.95)); box-shadow: inset 0 0 0 1px rgba(255,130,130,.45); }
.mao .carta.arrastando-origem { opacity: .2; }
@media (hover: hover) { .mao .carta:hover { transform: rotate(0deg) translateY(-12px) scale(1.07); z-index: 25; } }
@media (max-width: 600px) { .mao .carta .texto, .mao .carta .sub { display: none; } .mao .carta .rodape { padding-bottom: .35em; } }
@media (max-width: 899px) { .mao .carta { margin: 0 calc(var(--w) * -0.20); } }
/* a carta vizinha sai da frente da selecionada, senão a prévia fica coberta */
.mao .carta.selecionada + .carta { transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)) translateX(26%); }
@media (min-width: 900px) { .mao .carta { margin: 0 calc(var(--w) * -0.03); } }

/* barra do tabuleiro no formato do Snap: Recuar à esquerda, orbe de energia no
   centro (com o Acelerar ao lado) e Terminar Turno à direita — os dois botões
   são paralelogramos inclinados para dentro. */
.controles { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.btn-lado { position: relative; flex: 1; min-width: 0; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.6); transition: transform .14s var(--mola-toque), filter .2s var(--mola); }
.btn-lado:active { transform: scale(.97); }
.btn-lado:disabled { opacity: .45; pointer-events: none; filter: grayscale(.5); }
.btn-lado small { font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 11px; opacity: .85; letter-spacing: .06em; }
.btn-lado.recuar { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background: linear-gradient(180deg, #d2354a 0%, #8e1024 48%, #4d0813 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.32), inset 0 -5px 0 rgba(0,0,0,.32); }
.btn-lado.terminar { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #c46bff 0%, #7b2ad6 46%, #46108e 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -5px 0 rgba(0,0,0,.3), 0 0 20px rgba(150,70,255,.4); }
.btn-lado.terminar.esperando { background: linear-gradient(180deg, rgba(70,80,130,.85), rgba(20,26,54,.92)); color: #a9b4d8; box-shadow: inset 0 0 0 1px var(--borda); }
.btn-lado.terminar.chama { animation: chamaBtn 1.2s ease-in-out infinite; }
@keyframes chamaBtn { 50% { filter: brightness(1.28) drop-shadow(0 0 14px rgba(180,90,255,.8)); } }

.centro-controles { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 2px; }
.btn-acelerar { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #fff;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #ffb057, #e06a00 50%, #8a3c00);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 14px rgba(255,140,40,.5); transition: transform .14s var(--mola-toque); }
.btn-acelerar:active { transform: scale(.94); }
.btn-acelerar:disabled { opacity: .4; pointer-events: none; filter: grayscale(.6); }
.btn-acelerar.usado { background: linear-gradient(180deg, #6a6a86, #2c2c42); }
/* orbe de energia: esfera azul, o elemento central da barra no Snap */
.orbe { position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; flex: none;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 26px; color: #fff; line-height: 1;
  background: radial-gradient(circle at 36% 28%, #f0f7ff 0%, #8ec2ff 24%, #2f6bff 60%, #0a2a8e 100%);
  box-shadow: 0 0 24px rgba(70,150,255,.9), inset 0 -8px 14px rgba(0,0,0,.35), inset 0 5px 12px rgba(255,255,255,.55);
  text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.orbe::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(150,200,255,.45); }
.orbe small { font-family: var(--ft); font-style: normal; font-weight: 700; font-size: 9.5px; opacity: .9; margin-top: 1px; }
.btn-turno.esperando { background: linear-gradient(180deg, rgba(60, 45, 110, .6), rgba(25, 18, 50, .8)); color: var(--mudo); box-shadow: inset 0 0 0 1px var(--borda); }
.btn-turno.chama { animation: chamaBtn 1.2s ease-in-out infinite; }
@keyframes chamaBtn { 50% { filter: brightness(1.25) drop-shadow(0 0 12px rgba(134,255,30,.7)); } }
.dica-jogar { position: relative; z-index: 31; text-align: center; font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); padding: 1px 0; text-shadow: 0 0 10px rgba(134,255,30,.4); animation: surgir .2s; }
.dica-jogar.aviso { color: var(--laranja); text-shadow: 0 0 10px rgba(255,138,31,.4); }

/* --- o snap: tela inteira --- */
.flash-snap { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none; background: radial-gradient(60% 45% at 50% 50%, rgba(184,77,255,.4), rgba(5,2,12,.86) 72%);
  animation: snapFundo 2.2s ease forwards; }
.flash-snap .cubo.gigante { width: 120px; height: 120px; font-size: 62px; animation: snapCubo 2.2s cubic-bezier(.2,.9,.3,1.2) forwards; }
.flash-snap .snap-txt { font-family: var(--fd); font-style: italic; font-weight: 900; font-size: clamp(40px, 13vw, 76px); text-transform: uppercase; letter-spacing: .04em;
  color: var(--laranja); text-shadow: 0 .05em 0 #7a3c00, 0 0 34px rgba(255,138,31,.8); animation: snapTxt 2.2s cubic-bezier(.2,.9,.3,1.2) forwards; }
.flash-snap .snap-quem { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .18em; color: #e8e0ff; animation: snapTxt 2.2s ease .1s backwards; }
@keyframes snapFundo { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes snapCubo { 0% { transform: rotate(45deg) scale(0); } 34% { transform: rotate(45deg) scale(1.25); } 46% { transform: rotate(45deg) scale(1); } 100% { transform: rotate(45deg) scale(1) translateY(-10px); } }
@keyframes snapTxt { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.14); opacity: 1; } 42% { transform: scale(1); } 100% { transform: scale(1); opacity: 1; } }

.fim { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(5, 2, 12, .86); backdrop-filter: blur(6px); animation: surgir .3s; }
.fim .caixa { width: min(92vw, 420px); padding: 28px 22px; text-align: center; }
.fim h1 { font-size: 54px; line-height: .9; font-weight: 900; }
.fim h1.vit { color: var(--verde); text-shadow: 0 .04em 0 #2e7a0c, 0 0 30px rgba(134, 255, 30, .55); }
.fim h1.der { color: var(--vermelho); text-shadow: 0 .04em 0 #6a0a0a; }
.fim h1.emp { color: var(--mudo); }
.fim .cubos-res { font-family: var(--fd); font-style: italic; font-size: 30px; font-weight: 800; margin: 8px 0; }
.recompensas { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; }

.painel-jogo { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  background: rgba(4,2,10,.82); backdrop-filter: blur(5px); animation: surgir .18s ease; }
.pj-caixa { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 22px; width: min(88vw, 320px);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background: linear-gradient(180deg, rgba(30,44,92,.97), rgba(9,13,32,.98)); box-shadow: inset 0 0 0 1px rgba(140,180,255,.3); }
.pj-titulo { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: #cfdcff; }
.pj-emotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.pj-emotes .btn-icone { width: 100%; height: 52px; font-size: 24px; }
.pj-som { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px;
  font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; color: #dbe7ff;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(52,72,130,.9), rgba(16,24,54,.95)); box-shadow: inset 0 0 0 1px rgba(130,180,255,.3); }
.balao { position: absolute; background: #fff; color: #000; border-radius: 14px; padding: 6px 10px; font-size: 22px; animation: balao 2.4s ease forwards; z-index: 6; }
@keyframes balao { 0% { transform: scale(.5); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }



/* --- encenação da resolução --- */
/* carta que está revelando agora: holofote */
.carta.foco { z-index: 6; animation: focoCarta .7s ease; }
@keyframes focoCarta {
  0% { filter: drop-shadow(0 0 .3em var(--glow)); }
  35% { transform: scale(1.16); filter: drop-shadow(0 0 1.1em #fff) drop-shadow(0 0 1.6em var(--glow)); }
  100% { transform: none; filter: drop-shadow(0 0 .55em var(--glow)) drop-shadow(0 .3em .5em rgba(0,0,0,.6)); }
}
/* carta que sofreu um efeito de outra */
.carta.tocada { animation: tocadaCarta .6s ease; z-index: 5; }
@keyframes tocadaCarta {
  0%, 100% { filter: drop-shadow(0 0 .55em var(--glow)); }
  40% { filter: drop-shadow(0 0 1em rgba(255,255,255,.9)) brightness(1.5); transform: scale(1.08); }
}
/* número que sobe e some sobre a carta */
.flutuante { position: fixed; z-index: 58; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 30px; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,255,255,.6);
  animation: flutuar 1.2s cubic-bezier(.2,.9,.3,1) forwards; }
.flutuante.mais { color: var(--verde); text-shadow: 0 2px 0 #14400a, 0 0 20px rgba(134,255,30,.9); }
.flutuante.menos { color: #ff6b6b; text-shadow: 0 2px 0 #4a0808, 0 0 20px rgba(255,80,80,.9); }
.flutuante.ruim { color: #ff8a7a; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
@keyframes flutuar {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  22% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); }
  40% { transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.95); }
}
/* total do local pulsando quando muda */
.faixa .pp.subiu { animation: poderSubiu .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes poderSubiu {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); filter: brightness(1.5) drop-shadow(0 0 12px currentColor); }
  100% { transform: scale(1); }
}

/* --- fim de partida: resolve local por local --- */
.local.resolvendo { animation: resolveLocal .5s ease; }
@keyframes resolveLocal { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
.local.resolvendo.vit { box-shadow: inset 0 0 0 3px var(--verde), inset 0 0 70px rgba(134,255,30,.34); }
.local.resolvendo.der { box-shadow: inset 0 0 0 3px var(--vermelho), inset 0 0 70px rgba(255,74,61,.26); }
.local.resolvendo.emp { box-shadow: inset 0 0 0 3px var(--mudo), inset 0 0 60px rgba(255,255,255,.12); }
.banner-res { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; text-align: center;
  padding: 9px 4px; background: linear-gradient(180deg, rgba(6,3,14,.35), #06030e 22%, #06030e 78%, rgba(6,3,14,.35));
  box-shadow: 0 0 26px rgba(0,0,0,.8);
  animation: bannerEntra .45s cubic-bezier(.2,.9,.3,1.2) backwards; }
.banner-res .bt { font-family: var(--fd); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(14px, 4.2vw, 22px); line-height: 1; }
.banner-res .bp { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: clamp(12px, 3.4vw, 16px); color: #cfc8ee; margin-top: 3px; }
.banner-res.vit .bt { color: var(--verde); text-shadow: 0 2px 0 #1d5807, 0 0 22px rgba(134,255,30,.8); }
.banner-res.der .bt { color: var(--vermelho); text-shadow: 0 2px 0 #5a0d0d, 0 0 22px rgba(255,74,61,.7); }
.banner-res.emp .bt { color: #d9d4f0; }
@keyframes bannerEntra { 0% { opacity: 0; transform: translateY(-50%) scale(.6); } 60% { opacity: 1; transform: translateY(-50%) scale(1.08); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }


/* --- as cenas dos locais se mexem: gradiente parado lê como papel de parede --- */
.local .arte-local { will-change: transform, filter, opacity; }
.local[data-local="buraco-de-minhoca"] .arte-local { transform: scale(1.6); animation: giraVortice 22s linear infinite; }
@keyframes giraVortice { to { transform: scale(1.6) rotate(360deg); } }
.local[data-local="nebulosa-prime"] .arte-local { animation: respiraNebulosa 11s ease-in-out infinite alternate; }
@keyframes respiraNebulosa { 0% { transform: scale(1) translateY(0); filter: saturate(1.2) brightness(1.12); } 100% { transform: scale(1.14) translateY(-3%); filter: saturate(1.45) brightness(1.3); } }
.local[data-local="tempestade-solar"] .arte-local { animation: tremulaSol 4.5s ease-in-out infinite; }
@keyframes tremulaSol { 0%,100% { filter: saturate(1.2) brightness(1.05); } 40% { filter: saturate(1.6) brightness(1.5); } 62% { filter: saturate(1.3) brightness(1.15); } }
.local[data-local="anel-de-gelo"] .arte-local { animation: brilhaGelo 7s ease-in-out infinite; }
@keyframes brilhaGelo { 0%,100% { filter: saturate(1.1) brightness(1.05); transform: none; } 50% { filter: saturate(1.5) brightness(1.35); transform: translateX(2%); } }
.local[data-local="mercado-orbital"] .arte-local { animation: piscaMercado 5s ease-in-out infinite; }
@keyframes piscaMercado { 0%,100% { filter: saturate(1.2) brightness(1.05); } 30% { filter: saturate(1.7) brightness(1.4); } 55% { filter: saturate(1.1) brightness(.95); } }
.local[data-local="planeta-x"] .arte-local { animation: giraPlaneta 26s ease-in-out infinite alternate; }
@keyframes giraPlaneta { 0% { transform: scale(1.05) translateX(-2%); } 100% { transform: scale(1.12) translateX(2%); } }
.local[data-local="brejo-lunar"] .arte-local { animation: respiraBrejo 9s ease-in-out infinite alternate; }
@keyframes respiraBrejo { 0% { filter: saturate(1.15) brightness(1.02); } 100% { filter: saturate(1.5) brightness(1.28); } }
.local[data-local="cinturao-de-asteroides"] .arte-local { animation: derivaPedras 40s linear infinite alternate; }
@keyframes derivaPedras { 0% { transform: scale(1.08) translate(-1.5%, 1%); } 100% { transform: scale(1.08) translate(1.5%, -1%); } }
.local[data-local="estacao-sfx"] .arte-local { animation: pulsaEstacao 6s ease-in-out infinite; }
@keyframes pulsaEstacao { 0%,100% { filter: saturate(1.15) brightness(1.05); } 50% { filter: saturate(1.5) brightness(1.3); } }
.local[data-local="zona-zero"] .arte-local { animation: giraZona 60s linear infinite; transform: scale(1.5); }
@keyframes giraZona { to { transform: scale(1.5) rotate(-360deg); } }
/* as estrelas de cada local também derivam, de leve */
.local .estrelas-local { animation: derivaEstrelas 90s linear infinite alternate; }
@keyframes derivaEstrelas { to { transform: translate(-14px, 10px); } }

/* --- foil: varredura de luz nas lendárias e míticas --- */
.carta.lendario .moldura::after, .carta.mitico .moldura::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 47%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.30) 53%, transparent 62%);
  background-size: 260% 100%; animation: varreFoil 4.5s ease-in-out infinite; }
.carta.mitico .moldura::after { animation-duration: 3.4s;
  background: linear-gradient(105deg, transparent 36%, rgba(255,190,150,.35) 46%, rgba(255,255,255,.7) 50%, rgba(190,220,255,.35) 54%, transparent 64%);
  background-size: 260% 100%; }
@keyframes varreFoil { 0% { background-position: 180% 0; } 55%, 100% { background-position: -80% 0; } }
/* o aro das raras respira */
.carta.lendario, .carta.mitico { animation: aroVivo 3.2s ease-in-out infinite; }
@keyframes aroVivo { 0%, 100% { filter: drop-shadow(0 0 .55em var(--glow)) drop-shadow(0 .3em .5em rgba(0,0,0,.6)); } 50% { filter: drop-shadow(0 0 .95em var(--glow)) drop-shadow(0 .3em .5em rgba(0,0,0,.6)); } }

/* --- faíscas da revelação --- */
.faisca { position: fixed; z-index: 57; width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, var(--verde) 45%, transparent 70%);
  animation: voaFaisca .62s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes voaFaisca {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}

/* --- profundidade: carta da mão inclina no ponteiro (desktop) --- */
@media (hover: hover) and (min-width: 900px) {
  .mao { perspective: 1000px; }
  .mao .carta { transition: transform .18s cubic-bezier(.2,.8,.3,1.1), filter .18s; }
  .mao .carta:hover { transform: rotate(0deg) translateY(-14px) scale(1.09) rotateX(6deg); }
}


/* --- CELULAR ESTREITO (<=430px) ---
   A linha de controles não cabe com quatro elementos de texto: o botão de
   terminar turno era espremido e o rótulo saía cortado ("MINAR TU"). Aqui
   Acelerar e Recuar viram só ícone e o botão principal fica com o espaço. */
@media (max-width: 430px) {
  .controles { gap: 5px; }
  .btn-lado { font-size: 14px; padding: 11px 6px; letter-spacing: .01em; }
  .btn-lado small { font-size: 10px; }
  .orbe { width: 52px; height: 52px; font-size: 22px; }
  .btn-acelerar { width: 44px; height: 44px; }
  .centro-controles { gap: 4px; }

  /* barra de cima: os nomes sumiam atrás de "..." porque a linha de baixo
     empurrava a etiqueta. Menos informação, nome inteiro. */
  .jogador .tag { padding: 3px 7px; }
  .jogador .tnome { font-size: 12.5px; }
  .jogador .tinfo { font-size: 8.5px; }
  .jogador .avatar { width: 28px; height: 32px; }
  .topo .canto { flex-direction: row; gap: 2px; }
  .btn-icone.peq { width: 44px; height: 44px; }
  .cubo { width: 34px; height: 34px; font-size: 18px; }

  .dica-jogar { font-size: 11px; padding: 0; }
  .mao { padding: 30px 4px 2px; }
  .painel-local .pl-efeito { font-size: 8px; }
}
/* telas muito baixas (celular deitado ou janela curta): a mesa some se cada
   parte insistir na altura mínima */
@media (max-height: 640px) {
  .mao .carta { --w: clamp(62px, 15vw, 88px); }
  .mao { padding: 22px 4px 2px; }
  .painel-local .pl-efeito { display: none; }
  .dica-jogar { display: none; }
}


/* ============================================================
   DOCK: a barra de navegação de baixo, no formato do Snap.
   Barra angular colada no rodapé; a seção ATIVA sobe num hexágono
   maior e ganha rótulo, as outras ficam só com o ícone.
   ============================================================ */
/* o recorte angular fica numa CAMADA DE FUNDO, não no contêiner: com clip-path
   no próprio .dock o hexágono elevado da seção ativa era cortado fora. */
.dock { position: relative; margin-top: auto; display: flex; align-items: flex-end; justify-content: space-around;
  margin: 22px -12px calc(-12px - var(--safe-b)); padding: 0 6px calc(6px + var(--safe-b)); height: 60px; flex: none; }
.dock::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,38,78,.96), rgba(8,12,30,.99));
  clip-path: polygon(0 30%, 13% 0, 87% 0, 100% 30%, 100% 100%, 0 100%);
  box-shadow: 0 -2px 22px rgba(0,0,0,.6); }
.dock::before { content: ''; position: absolute; left: 13%; right: 13%; top: 0; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, #6fc0ff, transparent); box-shadow: 0 0 12px #4aa0ff; }
.dock-item { z-index: 2; }
/* min-height 48px: é a área de toque, não o tamanho do ícone */
.dock-item { position: relative; flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; padding-bottom: 6px; color: #93a6cc; transition: color .2s var(--mola), transform .16s var(--mola-toque); min-width: 0; }
.dock-item:active { transform: scale(.94); }
.dock-item .di-forma { display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; }
.dock-item.ativo { color: #fff; }
/* a seção ativa vira um hexágono elevado */
.dock-item.ativo .di-forma { width: 54px; height: 50px; margin-top: -26px;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #5aa8ff 0%, #2a6ad8 48%, #14357e 100%);
  box-shadow: 0 0 20px rgba(70,150,255,.75), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 10px rgba(0,0,0,.3); }
.dock-item .di-rotulo { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.dock-item .di-aviso { position: absolute; top: -2px; right: 22%; min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: linear-gradient(180deg, #ff6a6a, #c1112b); color: #fff;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 10.5px;
  box-shadow: 0 0 8px rgba(255,60,60,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.dock-item.ativo .di-aviso { top: -28px; right: 18%; }

/* ---------- TELA PRINCIPAL (casa) ---------- */
.casa { gap: 10px; max-width: 620px; width: 100%; margin: 0 auto; }
.topo-casa { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.moeda { display: flex; align-items: center; justify-content: center; min-height: 44px; gap: 5px; padding: 6px 14px; font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 15px;
  background: linear-gradient(180deg, rgba(40,64,120,.9), rgba(12,22,52,.95)); box-shadow: inset 0 0 0 1px rgba(120,170,255,.35);
  color: #dce9ff; }
.moeda.esq { clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); color: var(--ouro); }
.moeda.dir { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); color: #dcb8ff; }
.perfil-topo { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -4px; }
.avatar-grande { width: 58px; height: 62px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #8ad0ff, #1f4f9e 55%, #0d2450);
  box-shadow: 0 0 18px rgba(80,160,255,.5), inset 0 2px 0 rgba(255,255,255,.45); color: #fff; }
.pnome-topo { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.ppatente { font-size: 10.5px; color: var(--mudo); }

.paineis-casa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.painel-casa { text-align: left; padding: 8px 11px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(34,48,96,.85), rgba(10,16,40,.92)); box-shadow: inset 0 0 0 1px rgba(120,170,255,.28); }
.pc-topo { display: flex; align-items: center; gap: 6px; font-family: var(--fd); font-style: italic; font-weight: 800;
  font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: #dbe8ff; }
.pc-info { font-size: 10.5px; color: var(--mudo); margin: 3px 0 5px; }

.meio-casa { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px 0; min-height: 0; }
.meio-casa .logo { font-size: 42px; }
.meio-casa .barra-rank { width: 170px; margin-top: 6px; }

.btn-treino { align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 7px; padding: 8px 20px;
  font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: #cfe0ff; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(48,66,120,.8), rgba(14,22,50,.9)); box-shadow: inset 0 0 0 1px rgba(120,170,255,.3); }

/* faixa de jogar: deck | JOGAR | cubos */
.faixa-jogar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 2px; }
.mini-deck, .mini-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 62px; color: #b9c9ea; }
.md-cartas { width: 42px; height: 46px; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #4a6bb8, #16244e); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.mr-num { width: 42px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 17px; color: #fff;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(180deg, #b98cff, #4a1a9e); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.md-txt { font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.btn-jogar { flex: 1; max-width: 260px; padding: 15px 10px; font-family: var(--fd); font-style: italic; font-weight: 900;
  font-size: 27px; text-transform: uppercase; letter-spacing: .05em; color: #fff;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background: linear-gradient(180deg, #c46bff 0%, #7b2ad6 45%, #4a1094 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(0,0,0,.28), 0 0 26px rgba(160,70,255,.5);
  text-shadow: 0 2px 4px rgba(0,0,0,.55); transition: transform .14s var(--mola-toque), filter .2s var(--mola); }
.btn-jogar:active { transform: scale(.97); }

/* ---------- FILA / PAREANDO ---------- */
.faixa-titulo { text-align: center; padding: 8px 0 12px; }
.faixa-titulo h2 { font-size: 30px; letter-spacing: .04em; }
.ft-sub { font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 13px; color: var(--mudo); text-transform: uppercase; letter-spacing: .12em; }
.pareando { align-items: center; }
.vs-area { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.vs-jogador { display: flex; align-items: center; gap: 10px; }
.vs-tag { padding: 7px 20px 7px 14px; text-align: left;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(70,120,210,.9), rgba(16,34,80,.95)); box-shadow: inset 0 0 0 1px rgba(140,190,255,.4); }
.vs-nome { font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 21px; text-transform: uppercase; letter-spacing: .03em; }
.vs-sub { font-size: 11px; color: #b9cdf0; }
.vs-bola { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-style: italic; font-weight: 900; font-size: 30px; color: #fff;
  background: radial-gradient(circle at 40% 32%, #2a1a52, #0a0518 70%);
  box-shadow: 0 0 0 3px rgba(190,120,255,.75), 0 0 34px rgba(150,70,255,.65); animation: pulsarVs 2s ease-in-out infinite; }
@keyframes pulsarVs { 50% { box-shadow: 0 0 0 3px rgba(220,160,255,.95), 0 0 48px rgba(180,100,255,.85); } }
.procurando { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 22px; text-transform: uppercase;
  letter-spacing: .03em; color: #e6ecff; animation: piscar 2s ease-in-out infinite; }
.btn-cancelar { align-self: center; padding: 11px 44px; font-family: var(--fd); font-style: italic; font-weight: 800;
  font-size: 17px; text-transform: uppercase; letter-spacing: .05em; color: #ffc9c9;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(150,32,44,.9), rgba(60,10,16,.95)); box-shadow: inset 0 0 0 1px rgba(255,120,120,.45); }

/* ---------- MENU (telas antigas) */
.menu { gap: 14px; max-width: 640px; width: 100%; margin: 0 auto; }
.menu .cabecalho { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.perfil-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.perfil-mini .n { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 18px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-rank { height: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.barra-rank i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde-esc), var(--verde)); box-shadow: 0 0 8px var(--verde); }
.menu .heroi { text-align: center; padding: 26px 12px 18px; }
.menu .heroi .logo { font-size: 46px; }
.menu .acoes { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; transition: transform .14s var(--mola-toque); }
.tile:active { transform: scale(.96); }
.tile .ic { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.rodape-menu { text-align: center; font-size: 11px; color: var(--mudo); }
.rodape-menu a { color: var(--mudo); }

/* ---------- telas secundárias */
.cab { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.cab h2 { font-size: 26px; }
.grade-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 20px 10px; padding: 6px 4px 16px; }
.grade-cartas .carta { --w: 100%; width: 100%; font-size: clamp(8px, 2.3vw, 10px); cursor: pointer; }
.grade-cartas .item { position: relative; }
.grade-cartas .nivel { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .12em; color: var(--ouro); background: #0a0718; border: 1px solid var(--borda); padding: 1px 7px; white-space: nowrap; z-index: 2; }
.grade-cartas .no-deck { position: absolute; top: -6px; right: -4px; background: var(--verde); color: #07220a; font-weight: 900; font-size: 11px; padding: 1px 7px; z-index: 2; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.detalhe { position: fixed; inset: 0; z-index: 30; background: rgba(5, 2, 12, .9); display: flex; align-items: center; justify-content: center; padding: 16px; animation: surgir .2s; }
.detalhe .caixa { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; width: min(92vw, 380px); }
.detalhe .carta { --w: 230px; }
.detalhe .carta .texto { min-height: 0; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.linha .t { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.linha .d { font-size: 12px; color: var(--mudo); }
.pos { font-family: var(--fd); font-style: italic; font-weight: 900; width: 30px; color: var(--mudo); font-size: 16px; }
.pos.top { color: var(--ouro); }
.progresso { height: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 6px; clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.progresso i { display: block; height: 100%; background: linear-gradient(90deg, var(--roxo-esc), var(--roxo)); }
.editor-deck { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 0; }
.deck-atual { display: flex; gap: 6px; overflow-x: auto; padding: 6px 4px; }
.deck-atual .carta { --w: 52px; }
.deck-atual .vazio { width: 52px; aspect-ratio: 5/7; border: 1px dashed var(--borda); flex: none; clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
.abas { display: flex; gap: 6px; }
.aba { padding: 8px 14px; font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; background: rgba(255, 255, 255, .06); border: 1px solid var(--borda); }
.aba.ativa { background: rgba(134, 255, 30, .12); border-color: var(--verde); color: var(--verde); }
.aviso-plat { font-size: 12px; color: var(--mudo); padding: 8px 12px; border-left: 3px solid var(--roxo); }

.login { gap: 24px; }
.login .logo { font-size: 58px; }
.login form { display: flex; flex-direction: column; gap: 12px; width: min(88vw, 340px); }
.login .destaques { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.login .destaques div { font-family: var(--fd); font-style: italic; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #dcd6ff; line-height: 1.15; }
.login .destaques .ic { font-size: 26px; display: block; margin-bottom: 4px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }

.carregando { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--mudo); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--verde); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (min-width: 900px) {
  .tela { padding: 18px 24px; }
  .mesa { max-width: 1100px; width: 100%; margin: 0 auto; }
  .lado .carta { font-size: 9.5px; }
  .mao .carta { --w: 124px; }
  .faixa .pnome { font-size: 15px; }
  .faixa .ptexto { font-size: 11px; }
  .grade-cartas { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .login .logo { font-size: 84px; }
  .menu .heroi .logo { font-size: 64px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .mao { padding-top: 8px; }
  .mao .carta { --w: 72px; }
  .faixa .ptexto { display: none; }
  .lado .carta { max-width: 66px; }
}

/* ============================================================
   ORBITAL SALVAGE — SISTEMA VISUAL V2
   Interface original do Cardverse. A cor fica na telemetria e nas ações;
   os painéis usam metal gasto, vidro escuro e recortes de escotilha.
   ============================================================ */
:root {
  --fundo: #02090a;
  --navy: #061113;
  --painel-solido: #07191a;
  --painel: linear-gradient(155deg, rgba(10, 31, 31, .96), rgba(3, 15, 16, .98));
  --borda: rgba(167, 191, 168, .2);
  --borda-forte: rgba(157, 195, 167, .42);
  --verde: #b8ef37;
  --verde-esc: #628c13;
  --laranja: #ff6b2b;
  --roxo: #a875ff;
  --roxo-esc: #4c2d7e;
  --ciano: #56d7d5;
  --ouro: #e9b451;
  --vermelho: #ff5e58;
  --azul: #4ca7d9;
  --texto: #f1ecdf;
  --mudo: #92a09b;
  --metal: #c9c0ab;
  --linha: rgba(204, 190, 157, .16);
  --sombra: 0 20px 60px rgba(0, 0, 0, .48);
  --clip-panel: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 14px);
  --clip-btn: polygon(10px 0, calc(100% - 2px) 0, 100% 8px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 2px 100%, 0 calc(100% - 8px), 0 10px);
}

html, body { min-height: 100%; height: 100%; background: var(--fundo); color: var(--texto); }
body { min-height: 100dvh; overflow: hidden; background: #02090a; }
#app { height: 100dvh; isolation: isolate; }
#fundo { background: #02090a; }
#fundo .nebulosa { opacity: .16; filter: blur(60px) saturate(.55); }
#fundo::after { display: none; }
button { border-radius: 0; }
button:not(:disabled):hover { filter: brightness(1.07); }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.tela { padding: calc(16px + var(--safe-t)) 18px calc(16px + var(--safe-b)); }
.eyebrow, .module-kicker {
  display: block; font: 800 11px/1.2 var(--ft); letter-spacing: .18em; text-transform: uppercase; color: var(--ciano);
}
.module-kicker { color: #a6b5ad; font-size: 10px; }
.form-help, .privacy-note { color: var(--mudo); font-size: 12px; line-height: 1.5; }

/* logotipo: menos efeito 3D, mais emblema industrial */
.logo { filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .7)); }
.logo .l1 { color: #d8d2c4; text-shadow: 0 2px 0 #4b514e, 0 7px 16px #000; }
.logo .l2 { color: #9fd52c; text-shadow: 0 2px 0 #354d12, 0 8px 18px #000; }
.logo .l2 b { color: var(--laranja); text-shadow: 0 2px 0 #68280d, 0 8px 18px #000; }
.logo .l3 { color: #b9c8c2; background: none; -webkit-text-fill-color: currentColor; letter-spacing: .38em; }
.logo .l3::after { background: linear-gradient(90deg, transparent, var(--ciano), transparent); box-shadow: none; opacity: .55; }

/* botões e painéis */
.btn { min-height: 44px; border: 1px solid var(--linha); clip-path: var(--clip-btn); font-style: normal; letter-spacing: .06em; }
.btn-verde { color: #122000; background: linear-gradient(180deg, #c9f45d, #a6d625 58%, #6d9614); box-shadow: inset 0 1px rgba(255,255,255,.45), inset 0 -3px rgba(0,0,0,.24); }
.btn-roxo { background: linear-gradient(180deg, #6f8f88, #294e4c); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.btn-laranja { background: linear-gradient(180deg, #ff8a50, #df4d17); }
.btn-fantasma { background: rgba(5, 22, 23, .82); border-color: var(--borda-forte); color: #d8d5c9; }
.btn-vermelho { background: rgba(69, 18, 19, .84); border-color: rgba(255, 94, 88, .35); }
.btn-icone { clip-path: var(--clip-btn); border: 1px solid var(--linha); background: rgba(8, 29, 29, .92); }
.painel, .command-module {
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 26%),
    var(--painel);
  border: 1px solid var(--linha); border-radius: 0; clip-path: var(--clip-panel); box-shadow: var(--sombra);
}
.painel::after, .command-module::after {
  content: ''; position: absolute; inset: 7px; clip-path: var(--clip-panel); border: 1px solid rgba(213, 199, 163, .07); pointer-events: none;
}
.campo { border-radius: 0; clip-path: var(--clip-btn); background: rgba(0, 8, 9, .78); border-color: rgba(171, 199, 184, .28); color: var(--texto); }
.campo:focus { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(86, 215, 213, .11); }
.chip { border-radius: 2px; background: rgba(4, 17, 18, .82); border-color: var(--linha); font-style: normal; color: #c3cac4; }
.chip.verde { color: var(--verde); border-color: rgba(184,239,55,.32); }
.chip.roxo { color: #c4a9ef; border-color: rgba(168,117,255,.3); }
.chip.ouro { color: var(--ouro); border-color: rgba(233,180,81,.3); }

/* cenário compartilhado pelas telas de entrada, menu e fila */
.command-backdrop { position: relative; isolation: isolate; overflow: hidden; }
.command-backdrop::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background-image: url('assets/ui/command-center-desktop-v1.webp');
  background-size: cover; background-position: center; transform: scale(1.01);
}
.command-backdrop::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 9, 10, .98) 0%, rgba(1, 11, 12, .84) 25%, rgba(1, 11, 12, .26) 55%, rgba(1,7,8,.18) 100%),
    linear-gradient(0deg, rgba(1,8,9,.88) 0%, transparent 42%, rgba(1,8,9,.28) 100%);
}

/* login */
.login { display: flex; align-items: stretch; justify-content: center; gap: 0; overflow-y: auto; }
.login-panel { width: min(1500px, 100%); min-height: 100%; display: grid; grid-template-columns: minmax(420px, 610px) 1fr; grid-template-rows: 1fr auto; align-items: center; padding: clamp(28px, 5vw, 82px); }
.login-brand { max-width: 590px; align-self: center; }
.login-brand .logo { font-size: clamp(55px, 6vw, 92px); margin: 18px 0 28px; }
.login-brand h1 { max-width: 580px; font-size: clamp(52px, 6vw, 88px); font-style: normal; line-height: .87; letter-spacing: -.035em; color: #eee8db; }
.login-brand p { max-width: 520px; margin: 24px 0 0; color: #b1bbb5; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; }
.login-form-panel { grid-column: 1; width: min(420px, 100%); padding: 22px; align-self: end; background: rgba(4, 19, 20, .88); border: 1px solid var(--linha); clip-path: var(--clip-panel); backdrop-filter: blur(14px); }
.login form { width: 100%; gap: 10px; margin-top: 11px; }
.login form label { color: #d6d0c2; font: 700 14px var(--ft); }
.login .privacy-note { margin: 12px 0 0; }
.login-features { grid-column: 2; grid-row: 2; justify-self: end; display: grid; grid-template-columns: repeat(3, minmax(135px, 1fr)); width: min(680px, 100%); gap: 8px; }
.login-features > div { min-height: 100px; padding: 15px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto 1fr; gap: 3px 9px; background: rgba(3,17,18,.78); border-top: 1px solid var(--linha); }
.login-features .ic { grid-row: 1 / 3; color: var(--ciano); }
.login-features b { color: #ddd6c8; font: 800 15px var(--fd); letter-spacing: .05em; text-transform: uppercase; }
.login-features small { color: var(--mudo); line-height: 1.35; }

/* Centro de Comando */
.casa { width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; }
.casa.command-backdrop::after { background: linear-gradient(90deg, rgba(1,10,11,.98), rgba(1,11,12,.76) 30%, rgba(1,9,10,.08) 65%), linear-gradient(0deg, rgba(1,8,9,.95), transparent 46%); }
.command-center { position: relative; height: 100dvh; min-height: 650px; margin-left: 184px; padding: 18px clamp(22px, 2.5vw, 44px) 20px; overflow: hidden; }
.command-topbar { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 66px; }
.pilot-card { display: inline-flex; align-items: center; gap: 11px; padding: 6px 17px 6px 7px; min-width: 220px; text-align: left; background: rgba(3,20,21,.84); border: 1px solid var(--linha); clip-path: var(--clip-btn); backdrop-filter: blur(12px); }
.pilot-avatar { width: 48px; height: 48px; overflow: hidden; border: 1px solid rgba(184,239,55,.35); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.pilot-copy { display: flex; flex-direction: column; min-width: 0; }
.pilot-copy b { font: 800 17px/1.1 var(--fd); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-copy small { color: var(--ciano); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.resource-cluster { display: flex; gap: 8px; }
.resource-pill { min-width: 130px; height: 50px; display: flex; align-items: center; gap: 9px; padding: 6px 14px; background: rgba(3,20,21,.86); border: 1px solid var(--linha); clip-path: var(--clip-btn); backdrop-filter: blur(12px); }
.resource-pill > span { display: flex; flex-direction: column; align-items: flex-start; }
.resource-pill small { color: var(--mudo); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.resource-pill b { font: 800 19px/1 var(--fd); color: var(--ouro); }
.resource-pill.gems b { color: #c4a9ef; }
.command-hero { position: absolute; left: clamp(28px, 4vw, 72px); top: 108px; width: min(570px, 43vw); z-index: 2; }
.command-intro .logo { font-size: clamp(46px, 4vw, 64px); margin: 11px 0 14px; }
.command-intro h1 { max-width: 540px; padding-bottom: .25em; font-size: clamp(39px, 3.65vw, 58px); line-height: 1.04; letter-spacing: -.035em; font-style: normal; color: #eee8dc; }
.command-intro p { max-width: 490px; margin: 16px 0 0; color: #aeb9b3; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; }
.command-grid { position: absolute; z-index: 4; left: clamp(22px, 2.5vw, 44px); right: clamp(22px, 2.5vw, 44px); bottom: 20px; height: clamp(172px, 23vh, 218px); display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.command-module { position: relative; overflow: hidden; min-width: 0; padding: 18px 20px; color: var(--texto); text-align: left; display: flex; flex-direction: column; transition: transform .18s var(--mola), border-color .18s; }
.command-module:hover { transform: translateY(-3px); border-color: rgba(184,239,55,.36); }
.module-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; z-index: 1; }
.module-head > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.module-head small { color: var(--mudo); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.module-head b { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px var(--fd); text-transform: uppercase; letter-spacing: .04em; }
.module-count { color: var(--ciano); font: 800 15px var(--fd); }
.module-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: #c1c8c1; font: 700 11px var(--ft); letter-spacing: .1em; text-transform: uppercase; }
.module-meta { margin-top: auto; color: var(--mudo); font-size: 11px; }
.module-skeleton { color: var(--mudo); font-size: 12px; }
.deck-fan { position: relative; display: flex; align-items: flex-end; height: 98px; margin: 7px 0 1px; padding-left: 4px; }
.deck-fan .carta.command-card { --w: clamp(62px, 4.7vw, 72px); margin-right: -7px; transform-origin: bottom center; }
.deck-fan .carta.command-card:nth-child(1) { transform: rotate(-4deg); }
.deck-fan .carta.command-card:nth-child(2) { transform: translateY(-4px); z-index: 2; }
.deck-fan .carta.command-card:nth-child(3) { transform: rotate(4deg); }
.rank-title { margin: 10px 0 14px; color: var(--ciano); font: 800 clamp(24px, 2vw, 31px)/1 var(--fd); text-transform: uppercase; letter-spacing: .04em; }
.rank-track { display: block; width: 100%; height: 7px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); }
.rank-track i { display: block; height: 100%; background: linear-gradient(90deg, #789b13, var(--verde)); box-shadow: 0 0 12px rgba(184,239,55,.45); }
.mission-copy { margin: 10px 0 12px; max-width: 300px; color: #ded8ca; font: 700 clamp(15px, 1.25vw, 19px)/1.25 var(--fd); }
.mission-progress { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mission-progress b { color: var(--ciano); font: 800 13px var(--fd); }
.launch-console { position: absolute; z-index: 5; left: clamp(28px, 4vw, 72px); top: clamp(438px, 56vh, 504px); width: min(440px, 42vw); display: grid; gap: 8px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: rgba(2,15,16,.9); border: 1px solid var(--linha); clip-path: var(--clip-btn); }
.mode-switch button { min-height: 48px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7f8e88; }
.mode-switch button + button { border-left: 1px solid var(--linha); }
.mode-switch button b { font: 800 14px var(--fd); text-transform: uppercase; letter-spacing: .08em; }
.mode-switch button small { font-size: 9px; letter-spacing: .05em; }
.mode-switch button.ativo { color: var(--verde); background: linear-gradient(180deg, rgba(184,239,55,.15), rgba(184,239,55,.04)); }
.launch-button { min-height: 76px; padding: 10px 25px; display: flex; justify-content: center; align-items: center; gap: 14px; color: #132000; background: linear-gradient(180deg, #d1f761, #a9d624 60%, #709512); border: 1px solid rgba(232,255,157,.48); clip-path: var(--clip-btn); box-shadow: 0 12px 32px rgba(0,0,0,.42), inset 0 2px rgba(255,255,255,.46), inset 0 -5px rgba(45,73,0,.28); }
.launch-button span { font: 900 clamp(25px, 2.2vw, 34px)/1 var(--fd); text-transform: uppercase; letter-spacing: .045em; }
.launch-button:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.05); }

/* navegação: rail no desktop */
.dock { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 184px; height: 100dvh; margin: 0; padding: 18px 10px; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, rgba(4,21,22,.98), rgba(2,11,12,.99)); border-right: 1px solid var(--linha); box-shadow: 12px 0 34px rgba(0,0,0,.35); }
.dock::before, .dock::after { display: none; }
.dock-brand { min-height: 112px; padding: 10px 9px 18px; display: flex; align-items: center; border-bottom: 1px solid var(--linha); }
.dock-brand .logo { font-size: 28px; }
.dock-items { display: flex; flex-direction: column; gap: 3px; margin-top: 20px; }
.dock-item { position: relative; z-index: 1; width: 100%; min-height: 55px; flex: none; padding: 8px 12px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; justify-items: start; color: #899891; border-left: 2px solid transparent; }
.dock-item:hover { color: #d9d6cb; background: rgba(255,255,255,.025); }
.dock-item.ativo { color: var(--verde); border-left-color: var(--verde); background: linear-gradient(90deg, rgba(184,239,55,.11), transparent); }
.dock-item .di-forma, .dock-item.ativo .di-forma { width: 30px; height: 30px; margin: 0; clip-path: none; background: none; box-shadow: none; }
.dock-item .di-rotulo { display: block; font: 800 13px var(--fd); letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.dock-item .di-aviso, .dock-item.ativo .di-aviso { top: 8px; right: 9px; background: var(--laranja); color: #220b02; box-shadow: none; }

/* fila */
.pareando { align-items: center; justify-content: center; overflow: auto; }
.pareando.command-backdrop::after { background: rgba(1,10,11,.74); backdrop-filter: blur(4px); }
.matchmaking-console { position: relative; width: min(540px, 94vw); min-height: min(660px, calc(100dvh - 38px)); padding: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(3,19,20,.9); border: 1px solid var(--linha); clip-path: var(--clip-panel); box-shadow: var(--sombra); overflow: hidden; }
.matchmaking-console .faixa-titulo h1 { margin-top: 8px; font-size: clamp(34px, 6vw, 54px); font-style: normal; }
.vs-area { gap: 13px; }
.vs-tag { background: rgba(10,38,39,.9); clip-path: var(--clip-btn); border: 1px solid var(--borda-forte); }
.vs-bola { width: 72px; height: 72px; background: #06191a; color: var(--laranja); border: 1px solid rgba(255,107,43,.5); box-shadow: 0 0 30px rgba(255,107,43,.12); }
.procurando { color: #ddd7ca; font-style: normal; }
.scan-line { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 46%, rgba(86,215,213,.1) 50%, transparent 54%); background-size: 100% 140px; animation: scan 4s linear infinite; }
@keyframes scan { to { background-position: 0 140px; } }
.btn-cancelar { z-index: 1; min-height: 44px; padding: 9px 28px; color: #d1c9bc; background: rgba(25,13,13,.72); border: 1px solid rgba(255,94,88,.26); clip-path: var(--clip-btn); }

/* cartas: moldura própria de módulo de missão, com cor contida no perímetro */
.carta { filter: drop-shadow(0 .42em .48em rgba(0,0,0,.68)); }
.carta.raro { --cor: #77c6dd; --cor2: #315f72; --glow: rgba(76,167,217,.25); }
.carta.epico { --cor: #b38adb; --cor2: #56346f; --glow: rgba(168,117,255,.25); }
.carta.lendario { --cor: #e4b45d; --cor2: #785421; --glow: rgba(233,180,81,.28); }
.carta.mitico { --cor: #ef745f; --cor2: #772c27; --glow: rgba(255,94,88,.28); }
.carta .corpo { background: linear-gradient(145deg, #d8d1c1, var(--cor) 22%, #182526 29%, var(--cor2) 84%, #d4ccb9); }
.carta .moldura { inset: .22em; background: #041011; }
.carta .arte { background: radial-gradient(80% 60% at 50% 30%, #173436, #031012 72%); }
.carta .rodape { background: linear-gradient(180deg, rgba(4,16,17,.9), #030b0c); }
.carta .nome { color: #eee8dc; text-shadow: 0 2px 3px #000; }
.carta .sub { color: #9faaa5; }
.carta .texto { color: #c8cec8; }
.carta .raridade { background: transparent; color: var(--cor); }
.carta .hex { top: -.18em; width: 2.35em; height: 2.55em; clip-path: polygon(.55em 0,100% 0,100% calc(100% - .55em),calc(100% - .55em) 100%,0 100%,0 .55em); background: #b7b09f; box-shadow: 0 3px 10px rgba(0,0,0,.55); }
.carta .hex::before { inset: .13em; clip-path: inherit; }
.carta .hex::after { display: none; }
.carta .hex.custo::before { background: linear-gradient(145deg, #5aa5c8, #17495d); }
.carta .hex.poder::before { background: linear-gradient(145deg, #ff8c51, #9b3917); }
.carta.lendario, .carta.mitico { animation: none; }
.carta.lendario .moldura::after, .carta.mitico .moldura::after { opacity: .36; animation-duration: 8s; }
.carta.selecionada { filter: drop-shadow(0 0 .65em rgba(184,239,55,.55)) drop-shadow(0 .5em .8em rgba(0,0,0,.7)); }

@media (max-width: 899px) {
  body { overflow: hidden; }
  .tela { padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); }
  .command-backdrop { overflow-y: auto; overscroll-behavior: contain; }
  .command-backdrop::before { position: absolute; min-height: 690px; background-image: url('assets/ui/command-center-mobile-v1.webp'); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; transform: none; }
  .command-backdrop::after { min-height: 100%; background: linear-gradient(180deg, rgba(1,8,9,.05) 0, rgba(1,9,10,.04) 40%, rgba(1,10,11,.94) 67%, #02090a 100%); }

  .login { padding: 0 0 calc(28px + var(--safe-b)); }
  .login::after { background: linear-gradient(180deg, rgba(1,8,9,.12), rgba(1,8,9,.5) 35%, #02090a 67%); }
  .login-panel { display: flex; flex-direction: column; min-height: 100dvh; padding: calc(24px + var(--safe-t)) 20px 28px; }
  .login-brand { min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 24px; }
  .login-brand .logo { font-size: clamp(48px, 17vw, 70px); margin: 12px 0 18px; }
  .login-brand h1 { font-size: clamp(42px, 13vw, 60px); }
  .login-brand p { font-size: 15px; margin-top: 14px; }
  .login-features { order: 3; grid-column: auto; width: 100%; grid-template-columns: 1fr; margin-top: 16px; }
  .login-features > div { min-height: 78px; }
  .login-form-panel { order: 2; grid-column: auto; width: 100%; align-self: auto; padding: 18px; }

  .casa { overflow-y: auto; padding-bottom: calc(82px + var(--safe-b)); }
  .casa.command-backdrop::after { background: linear-gradient(180deg, rgba(1,8,9,.05) 0, rgba(1,8,9,.08) 33%, rgba(1,9,10,.88) 57%, #02090a 76%); }
  .command-center { height: auto; min-height: 100dvh; margin: 0; padding: 8px 10px 22px; overflow: visible; display: flex; flex-direction: column; }
  .command-topbar { order: 0; min-height: 58px; gap: 7px; position: relative; }
  .pilot-card { min-width: 0; flex: 1; max-width: 55%; padding: 4px 8px 4px 4px; gap: 7px; }
  .pilot-avatar { width: 42px; height: 42px; }
  .pilot-copy b { font-size: 14px; }
  .pilot-copy small { font-size: 9px; }
  .resource-cluster { gap: 4px; }
  .resource-pill { min-width: 52px; width: auto; height: 44px; padding: 5px 8px; gap: 5px; }
  .resource-pill small { display: none; }
  .resource-pill b { font-size: 16px; }
  .command-hero { order: 1; position: relative; inset: auto; width: auto; min-height: clamp(430px, 122vw, 560px); display: flex; align-items: flex-end; padding: 0 7px 20px; }
  .command-intro { width: 100%; }
  .command-intro .eyebrow { display: none; }
  .command-intro .logo { font-size: clamp(42px, 14vw, 58px); margin: 0 0 12px; }
  .command-intro h1 { max-width: 360px; font-size: clamp(37px, 11.5vw, 52px); }
  .command-intro p { max-width: 360px; margin-top: 10px; font-size: 14px; }
  .command-grid { order: 3; position: static; height: auto; display: grid; grid-template-columns: 1fr; gap: 9px; }
  .command-module { min-height: 145px; padding: 16px; }
  .deck-module { min-height: 290px; }
  .deck-fan { justify-content: center; height: 190px; margin: 6px 0 -8px; }
  .deck-fan .carta.command-card { --w: clamp(80px, 24vw, 102px); margin-right: -4px; }
  .rank-module, .mission-module { min-height: 142px; }
  .launch-console { order: 2; position: static; width: 100%; margin: 0 0 10px; scroll-margin-bottom: calc(82px + var(--safe-b)); }
  .launch-button { min-height: 70px; }
  .launch-button span { font-size: clamp(24px, 7vw, 30px); }

  .dock { position: fixed; inset: auto 0 0; width: 100%; height: calc(72px + var(--safe-b)); padding: 4px 5px var(--safe-b); display: block; background: rgba(3,17,18,.97); border: 0; border-top: 1px solid var(--linha); backdrop-filter: blur(16px); }
  .dock-brand { display: none; }
  .dock-items { height: 68px; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .dock-item { width: auto; min-height: 64px; padding: 5px 2px 4px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 0; border-top: 2px solid transparent; }
  .dock-item.ativo { border: 0; border-top-color: var(--verde); background: linear-gradient(180deg, rgba(184,239,55,.12), transparent); }
  .dock-item .di-forma, .dock-item.ativo .di-forma { width: 28px; height: 28px; }
  .dock-item .di-rotulo { font-size: 9px; letter-spacing: .035em; }
  .dock-item .di-aviso, .dock-item.ativo .di-aviso { top: 2px; right: 18%; }

  .matchmaking-console { min-height: calc(100dvh - 20px - var(--safe-t) - var(--safe-b)); width: 100%; padding: 24px 16px; }
}

@media (max-width: 359px) {
  .resource-pill { padding-inline: 6px; }
  .resource-pill svg { display: none; }
  .pilot-card { max-width: 58%; }
  .command-hero { min-height: 405px; }
  .command-intro h1 { font-size: 37px; }
  .command-intro p { font-size: 13px; }
  .deck-module { min-height: 260px; }
  .deck-fan { height: 165px; }
  .deck-fan .carta.command-card { --w: 79px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .command-center { min-height: 620px; }
  .command-hero { top: 88px; }
  .command-intro .logo { font-size: 54px; margin: 8px 0 12px; }
  .command-intro h1 { font-size: 46px; max-width: 470px; }
  .command-intro p { margin-top: 10px; font-size: 14px; }
  .launch-console { top: 405px; width: 390px; }
  .launch-button { min-height: 62px; }
  .command-grid { height: 166px; bottom: 12px; }
  .command-module { padding: 14px 16px; }
  .deck-fan { height: 88px; }
  .deck-fan .carta.command-card { --w: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-line { animation: none; display: none; }
}

/* ---------- cockpit de batalha ---------- */
.mesa-batalha {
  position: relative; max-width: none; width: 100%; height: 100dvh; margin: 0; padding: calc(8px + var(--safe-t)) 10px calc(8px + var(--safe-b));
  display: grid; grid-template-rows: 72px minmax(0, 1fr) 214px; gap: 8px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(1,9,10,.42), rgba(1,8,9,.76)),
    url('assets/ui/orbital-theater-background-v1.webp') center / cover no-repeat;
}
.mesa-batalha::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 44%, transparent, rgba(0,0,0,.52) 76%); pointer-events: none; }
.cockpit-topo { min-width: 0; display: grid; grid-template-columns: minmax(210px,1fr) 180px minmax(210px,1fr) 44px; align-items: center; gap: 8px; padding: 0; }
.jogador-painel { min-width: 0; height: 64px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: linear-gradient(100deg, rgba(8,34,35,.96), rgba(3,19,20,.86)); border: 1px solid var(--linha); clip-path: var(--clip-btn); }
.jogador-painel.dele { flex-direction: row; justify-content: flex-end; background: linear-gradient(260deg, rgba(41,24,18,.93), rgba(11,22,22,.86)); }
.jogador-painel.com-prioridade { border-color: rgba(184,239,55,.42); box-shadow: inset 3px 0 var(--verde); }
.jogador-painel.dele.com-prioridade { box-shadow: inset -3px 0 var(--laranja); border-color: rgba(255,107,43,.4); }
.jogador-retrato, .jogador .avatar { width: 48px; height: 52px; flex: none; clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background: #0d3537; }
.jogador.dele .avatar { background: #3d251d; }
.jogador-identidade, .jogador .tag, .jogador.dele .tag { min-width: 0; flex: 1; padding: 0; clip-path: none; background: none; box-shadow: none; text-align: left; }
.jogador.dele .jogador-identidade { text-align: right; }
.jogador-linha { min-height: 14px; display: flex; align-items: center; gap: 6px; }
.jogador.dele .jogador-linha { justify-content: flex-end; }
.jogador-papel, .prioridade-selo { color: var(--mudo); font: 800 8px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; }
.prioridade-selo { padding: 2px 5px; color: #172100; background: var(--verde); }
.jogador.dele .prioridade-selo { color: #2a0e03; background: var(--laranja); }
.jogador .tnome { margin: 3px 0 2px; color: #e9e3d6; font-size: 17px; font-style: normal; }
.jogador-recursos { display: flex; align-items: center; gap: 5px; min-width: 0; color: #8fa09a; font-size: 9px; }
.jogador.dele .jogador-recursos { justify-content: flex-end; }
.estado-jogador { margin-left: 4px; color: var(--ciano); white-space: nowrap; }
.estado-jogador.pronto { color: var(--verde); }
.estado-jogador.acelerou { color: var(--laranja); }
.nucleo-partida { height: 66px; display: grid; grid-template-columns: 1fr 48px 1fr; grid-template-rows: 20px 23px 18px; align-items: center; justify-items: center; gap: 0 5px; padding: 3px 8px; background: rgba(3,21,22,.94); border: 1px solid var(--linha); clip-path: var(--clip-btn); }
.fase-partida { grid-column: 1 / -1; color: var(--ciano); font: 800 9px var(--ft); letter-spacing: .14em; text-transform: uppercase; }
.cubos-em-jogo, .cubo { grid-column: 2; grid-row: 2 / 4; width: 42px; height: 42px; transform: none; clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background: linear-gradient(145deg, #db895f, #8e2e17); box-shadow: 0 0 20px rgba(255,107,43,.16), inset 0 1px rgba(255,255,255,.25); color: #fff2e8; }
.cubo span { transform: none; }
.turno-ind { grid-column: 1; grid-row: 2 / 4; margin: 0; color: #a6b1ac; text-align: center; }
.turno-prefixo { display: block; font-size: 8px; }
.turno-ind b { color: #eee8dc; font-size: 17px; }
.relogio { grid-column: 3; grid-row: 2 / 4; color: var(--ouro); font: 800 18px var(--fd); letter-spacing: .03em; }
.menu-mesa { width: 44px; height: 44px; }

.campo-batalha, .mesa .campo-batalha { position: relative; min-width: 0; min-height: 0; padding: 8px; overflow: hidden; border: 1px solid rgba(180,195,181,.13); clip-path: var(--clip-panel); background: rgba(1,10,11,.42); }
.campo-batalha .ceu { position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, rgba(86,215,213,.07), transparent 45%); }
.campo-batalha .galaxia { position: absolute; inset: 0; opacity: .28; background: repeating-radial-gradient(circle at 50% 48%, transparent 0 80px, rgba(86,215,213,.08) 81px 82px); }
.tabuleiro-setores, .locais.tabuleiro-setores { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.setor, .local.setor { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) 106px minmax(0,1fr); gap: 4px; padding: 5px; background: linear-gradient(180deg, rgba(4,24,25,.67), rgba(2,13,14,.78)); border: 1px solid rgba(194,203,189,.13); clip-path: var(--clip-panel); transition: border-color .18s, background .18s; }
.setor[data-estado='ganhando'] { border-color: rgba(184,239,55,.3); }
.setor[data-estado='perdendo'] { border-color: rgba(255,107,43,.3); }
.setor.alvo { border-color: var(--verde); background: linear-gradient(180deg, rgba(41,68,22,.5), rgba(5,25,22,.82)); box-shadow: inset 0 0 26px rgba(184,239,55,.08); cursor: pointer; }
.fileira-cartas, .lado { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 3px; padding: 2px; }
.fileira-oponente { align-items: start; }
.fileira-jogador { align-items: end; }
.fileira-cartas .carta, .lado .carta { --w: min(72px, 5.1vw); width: var(--w); max-width: 100%; }
.setor-nucleo, .centro-local { min-width: 0; min-height: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: stretch; gap: 4px; }
.setor-nucleo > .poder-setor.dele { grid-column: 1; }
.setor-nucleo > .setor-painel { grid-column: 2; }
.setor-nucleo > .poder-setor.meu { grid-column: 3; }
.setor-painel, .painel-local { position: relative; width: auto; height: auto; min-width: 0; aspect-ratio: auto; padding: 0; overflow: hidden; clip-path: var(--clip-btn); border: 1px solid rgba(195,208,193,.18); background: #071718; }
.setor-painel .pl-arte { position: absolute; inset: 0; background: var(--arte) center / cover no-repeat; filter: saturate(.74) contrast(1.05) brightness(.75); }
.setor-painel .pl-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,10,11,.14), rgba(2,11,12,.89)); }
.setor-painel .pl-txt { position: absolute; inset: auto 6px 6px; text-align: left; }
.setor-painel .pl-nome { color: #eee7d8; font: 800 clamp(11px, 1vw, 15px)/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; }
.setor-painel .pl-efeito { margin-top: 4px; color: #aeb9b2; font-size: clamp(8px, .72vw, 10px); line-height: 1.2; }
.setor.oculto .setor-painel .pl-arte { background: radial-gradient(circle at 50%, rgba(86,215,213,.13), transparent 60%); }
.poder-setor, .pp { min-width: 0; display: flex; align-items: center; justify-content: center; color: #eae4d8; background: rgba(3,17,18,.88); border: 1px solid var(--linha); clip-path: var(--clip-btn); font: 900 clamp(21px, 2vw, 30px)/1 var(--fd); }
.poder-setor.meu { color: var(--verde); }
.poder-setor.dele { color: var(--laranja); }
.poder-setor.subiu { animation: powerPulse .48s ease; }
@keyframes powerPulse { 50% { transform: scale(1.16); filter: brightness(1.35); } }

.painel-comando, .rodape-mesa { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 10px; padding: 8px 10px; background: linear-gradient(180deg, rgba(5,25,26,.97), rgba(2,12,13,.99)); border: 1px solid var(--linha); clip-path: var(--clip-panel); box-shadow: 0 -12px 36px rgba(0,0,0,.28); }
.area-mao { position: relative; min-width: 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.mao-cartas, .mao { min-width: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px,.45vw,7px); padding: 30px 5px 2px; overflow: visible; perspective: 1000px; }
.mao-cartas .carta, .mao .carta { --w: clamp(75px, 6.2vw, 104px); margin: 0; transform: translateY(var(--dy,0)) rotate(var(--rot,0)); }
.mao-cartas .carta:hover { transform: translateY(-12px) rotate(0) scale(1.05); }
.carta-selecionada-info, .sel-info { position: absolute; z-index: 12; left: 10px; top: 0; width: min(340px, 46%); min-height: 48px; padding: 8px 42px 8px 10px; background: rgba(4,24,25,.96); border: 1px solid rgba(184,239,55,.28); clip-path: var(--clip-btn); }
.si-nome { color: var(--verde); font: 800 13px var(--fd); text-transform: uppercase; }
.si-efeito { margin-top: 2px; color: #b7c0ba; font-size: 10px; line-height: 1.25; }
.si-lupa { position: absolute; right: 5px; top: 5px; width: 34px; height: 34px; color: var(--ciano); }
.controles-batalha, .controles { min-width: 0; display: grid; grid-template-columns: 78px 92px minmax(118px,1fr); gap: 7px; align-items: end; padding: 5px 0; }
.btn-lado { min-height: 54px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: var(--clip-btn); border: 1px solid var(--linha); background: rgba(8,27,28,.92); color: #c6ccc6; font: 800 13px var(--fd); text-transform: uppercase; letter-spacing: .035em; }
.btn-lado.terminar { background: linear-gradient(180deg, #c8ee58, #89b41e); color: #142000; border-color: rgba(226,255,143,.45); }
.btn-lado.terminar.esperando { color: #9aa49e; background: rgba(8,27,28,.9); }
.acao-contexto { margin-top: 2px; font-size: 9px; }
.centro-controles { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-acelerar { width: 43px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--laranja); background: rgba(54,27,17,.9); border: 1px solid rgba(255,107,43,.32); clip-path: var(--clip-btn); }
.btn-acelerar.usado { opacity: .35; }
.energia-orbe, .orbe { width: 52px; height: 58px; display: flex; align-items: baseline; justify-content: center; padding-top: 13px; border-radius: 50%; clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); background: radial-gradient(circle at 45% 35%, #6ec3be, #154a48 55%, #071d1e); border: 1px solid rgba(103,220,215,.42); box-shadow: 0 0 20px rgba(86,215,213,.13); }
.energia-livre { font: 900 23px/1 var(--fd); color: #f3eee3; }
.energia-total { color: #9cc7c2; font-size: 9px; }
.dica-jogar { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: var(--ciano); white-space: nowrap; }
.mao-vazia { align-self: center; }

/* diálogos da partida */
.painel-jogo, .fim { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgba(0,7,8,.84); backdrop-filter: blur(9px); overflow-y: auto; }
.pj-caixa, .fim .caixa { width: min(480px, 94vw); max-height: min(680px, 90dvh); overflow-y: auto; padding: 24px; background: var(--painel); border: 1px solid var(--linha); clip-path: var(--clip-panel); box-shadow: var(--sombra); }
.pj-titulo { color: #e9e2d4; font: 800 26px var(--fd); text-transform: uppercase; }
.pj-emotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.pj-som { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px; color: #c5ccc5; border: 1px solid var(--linha); }
.fim .caixa { text-align: center; }
.fim .caixa h1 { font-style: normal; font-size: clamp(42px, 8vw, 68px); }
.cubos-res { margin: 18px 0; font: 900 36px var(--fd); }
.recompensas { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 20px; }

@media (max-width: 899px) {
  .mesa-batalha { padding: calc(5px + var(--safe-t)) 5px calc(5px + var(--safe-b)); grid-template-rows: 64px minmax(0,1fr) 212px; gap: 5px; }
  .cockpit-topo { grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr) 36px; gap: 3px; }
  .jogador-painel { height: 58px; padding: 3px 5px; gap: 4px; }
  .jogador-retrato, .jogador .avatar { width: 34px; height: 38px; }
  .jogador .tnome { font-size: 12px; }
  .jogador-recursos { font-size: 7.5px; gap: 3px; }
  .estado-jogador, .recurso-separador { display: none; }
  .jogador-papel { font-size: 7px; }
  .prioridade-selo { font-size: 6.5px; padding: 2px 3px; }
  .nucleo-partida { height: 58px; grid-template-columns: 1fr 34px 1fr; grid-template-rows: 16px 20px 17px; padding: 2px 3px; }
  .fase-partida { font-size: 7px; }
  .cubos-em-jogo, .cubo { width: 34px; height: 34px; font-size: 16px; }
  .turno-ind b, .relogio { font-size: 13px; }
  .turno-prefixo { font-size: 6px; }
  .menu-mesa { width: 36px; height: 42px; }

  .campo-batalha, .mesa .campo-batalha { padding: 5px 4px; overflow: hidden; }
  .campo-batalha::after { content: 'DESLIZE PARA VER OS 3 SETORES  →'; position: absolute; z-index: 6; left: 50%; bottom: 5px; transform: translateX(-50%); padding: 3px 8px; color: rgba(202,214,205,.68); background: rgba(1,12,13,.68); font: 800 7px var(--ft); letter-spacing: .12em; white-space: nowrap; pointer-events: none; }
  .tabuleiro-setores, .locais.tabuleiro-setores { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tabuleiro-setores::-webkit-scrollbar { display: none; }
  .setor, .local.setor { flex: 0 0 calc(100vw - 34px); max-width: 420px; height: 100%; grid-template-rows: minmax(0,1fr) 88px minmax(0,1fr); padding: 4px; scroll-snap-align: center; }
  .fileira-cartas .carta, .lado .carta { --w: clamp(55px, 17vw, 70px); }
  .setor-nucleo, .centro-local { grid-template-columns: 35px minmax(0,1fr) 35px; }
  .setor-painel .pl-nome { font-size: 12px; }
  .setor-painel .pl-efeito { font-size: 8px; }
  .poder-setor, .pp { font-size: 20px; }

  .painel-comando, .rodape-mesa { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 59px; gap: 3px; padding: 4px 5px; }
  .area-mao { min-height: 0; overflow: hidden; }
  .mao-cartas, .mao { justify-content: flex-start; gap: 3px; padding: 26px 4px 1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mao-cartas::-webkit-scrollbar { display: none; }
  .mao-cartas .carta, .mao .carta { --w: clamp(67px, 20vw, 83px); margin: 0; transform: none; }
  .mao-cartas .carta.selecionada { transform: translateY(-8px); }
  .mao-cartas .carta.selecionada + .carta, .mao .carta.selecionada + .carta { transform: none; }
  .carta-selecionada-info, .sel-info { left: 4px; right: 4px; top: 0; width: auto; min-height: 42px; padding-block: 6px; }
  .si-efeito { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .controles-batalha, .controles { grid-template-columns: 68px 84px minmax(112px,1fr); gap: 4px; padding: 0; align-items: stretch; }
  .btn-lado { min-height: 53px; padding: 5px; font-size: 11px; }
  .centro-controles { gap: 3px; }
  .btn-acelerar { width: 37px; height: 48px; }
  .energia-orbe, .orbe { width: 43px; height: 49px; padding-top: 11px; }
  .energia-livre { font-size: 19px; }
  .dica-jogar { bottom: 0; font-size: 9px; }
}

@media (max-width: 359px) {
  .cockpit-topo { grid-template-columns: minmax(0,1fr) 78px minmax(0,1fr) 32px; }
  .jogador-retrato { display: none; }
  .jogador-painel { padding-inline: 4px; }
  .jogador-recursos .deck-contagem { display: none; }
  .menu-mesa { width: 32px; }
  .setor, .local.setor { flex-basis: calc(100vw - 26px); }
  .controles-batalha, .controles { grid-template-columns: 59px 76px minmax(102px,1fr); }
  .btn-lado { font-size: 10px; letter-spacing: 0; }
  .mao-cartas .carta, .mao .carta { --w: 64px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .mesa-batalha { grid-template-rows: 54px minmax(0,1fr) 130px; }
  .cockpit-topo, .jogador-painel, .nucleo-partida { height: 50px; }
  .fileira-cartas .carta, .lado .carta { --w: min(55px, 7vw); }
  .setor, .local.setor { grid-template-rows: minmax(0,1fr) 66px minmax(0,1fr); }
  .painel-comando, .rodape-mesa { grid-template-columns: 1fr 270px; grid-template-rows: 1fr; }
  .mao-cartas .carta, .mao .carta { --w: 62px; }
  .controles-batalha, .controles { grid-template-columns: 64px 78px 1fr; }
}

/* ---------- telas de progressão / Flight Log ---------- */
.progression-screen { position: relative; width: auto; height: 100dvh; margin-left: 184px; padding: 24px clamp(24px,4vw,64px) 20px; overflow: hidden; background: radial-gradient(circle at 85% 0, rgba(86,215,213,.06), transparent 34%), #020b0c; }
.progression-screen.profile-screen { margin-left: 0; padding-inline: max(24px, calc((100vw - 1100px) / 2)); }
.progression-header { min-height: 88px; padding: 0 0 18px; border-bottom: 1px solid var(--linha); }
.progression-back { flex: none; }
.progression-heading { min-width: 0; max-width: 760px; }
.progression-eyebrow { color: var(--ciano); font: 800 9px/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; }
.progression-title { margin-top: 4px; padding-bottom: .08em; color: #eee7da; font-size: clamp(31px,3vw,46px); font-style: normal; line-height: 1.14; letter-spacing: -.01em; }
.progression-subtitle { margin: 7px 0 0; color: var(--mudo); font-size: 13px; line-height: 1.45; }
.progression-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.progression-scroll { min-height: 0; padding: 16px 4px 98px 0; scrollbar-color: rgba(140,169,151,.32) transparent; }
.progression-loading { min-height: 210px; justify-content: center; }
.progression-summary { flex: none; min-height: 120px; margin-top: 14px; padding: 18px 22px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px 28px; }
.progression-summary-copy h3 { margin: 5px 0 4px; color: #e5ded1; font-size: 25px; font-style: normal; }
.progression-summary-copy p { margin: 0; color: var(--mudo); font-size: 12px; line-height: 1.4; }
.progression-summary-stats, .ranking-self-stats, .profile-stats { display: grid; grid-auto-flow: column; gap: 7px; margin: 0; }
.progression-summary-stats > div, .ranking-self-stats > div, .profile-stat { min-width: 94px; padding: 10px 12px; background: rgba(255,255,255,.025); border-left: 1px solid var(--linha); }
.progression-summary dt, .ranking-self-stats dt, .profile-stat dt { color: var(--mudo); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.progression-summary dd, .ranking-self-stats dd, .profile-stat dd { margin: 3px 0 0; color: #eee8dc; font: 800 21px var(--fd); }
.progression-meter { grid-column: 1 / -1; width: 100%; height: 7px; margin: 0; background: rgba(255,255,255,.07); clip-path: none; }
.progression-meter i { background: linear-gradient(90deg, #638615, var(--verde)); box-shadow: none; }

/* missões */
.mission-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.mission-card { position: relative; min-height: 194px; padding: 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; }
.mission-card.is-ready { border-color: rgba(184,239,55,.34); background: linear-gradient(135deg, rgba(69,99,21,.19), transparent 42%), var(--painel); }
.mission-card.is-claimed { opacity: .62; }
.mission-card-header { display: flex; align-items: center; gap: 9px; }
.mission-index { color: var(--ciano); font: 800 15px var(--fd); }
.mission-status-label { color: var(--mudo); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.mission-status-label.is-ready { color: var(--verde); }
.mission-card-body { grid-column: 1; min-width: 0; }
.mission-title { margin: 5px 0 9px; padding-bottom: .06em; color: #e9e2d5; font-size: clamp(18px,1.5vw,23px); font-style: normal; line-height: 1.2; }
.mission-rewards { display: flex; flex-wrap: wrap; gap: 5px; }
.mission-progress-copy { margin: 13px 0 6px; display: flex; justify-content: space-between; gap: 12px; color: var(--mudo); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mission-progress-copy strong { color: #c8d0c9; }
.mission-card-action { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.mission-claim-button { min-width: 100px; }

/* ranking */
.ranking-self { grid-template-columns: 110px minmax(0,1fr) auto; }
.ranking-self-position { color: var(--verde); font: 900 46px var(--fd); text-align: center; }
.ranking-self-copy h3 { margin: 4px 0 2px; color: #e9e2d5; font-size: 24px; font-style: normal; }
.ranking-self-copy p { margin: 0; color: var(--mudo); }
.ranking-sections { display: grid; gap: 22px; }
.ranking-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ranking-section-header h3 { color: #dcd6ca; font-size: 18px; font-style: normal; }
.ranking-section-header span { color: var(--mudo); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.ranking-entry { position: relative; min-height: 68px; padding: 12px 15px; }
.ranking-entry-podium { min-height: 126px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; }
.ranking-entry.is-me { border-color: rgba(184,239,55,.38); box-shadow: inset 3px 0 var(--verde); }
.ranking-position { width: auto; min-width: 42px; color: #aeb7b1; font-style: normal; }
.ranking-position.top { color: var(--ouro); font-size: 22px; }
.ranking-crown { position: absolute; right: 13px; top: 11px; color: var(--ouro); }
.ranking-player { min-width: 0; }
.ranking-player-name-row { display: flex; align-items: center; gap: 7px; }
.ranking-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8e1d4; font-style: normal; }
.ranking-score { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ranking-score strong { color: var(--ciano); font: 800 15px var(--fd); }
.ranking-score span { color: var(--mudo); font-size: 10px; }
.ranking-entry-podium .ranking-score { grid-column: 1 / -1; margin: 5px 0 0; align-items: flex-start; }
.progression-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.progression-empty-icon { color: var(--ciano); }
.progression-empty h3 { margin: 12px 0 5px; font-size: 24px; font-style: normal; }
.progression-empty p { margin: 0; color: var(--mudo); }

/* loja */
.store-trust-note { flex: none; margin: 14px 0 0; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-left: 2px solid var(--ciano); }
.store-trust-note p { margin: 0; color: #aeb8b2; font-size: 12px; line-height: 1.45; }
.store-trust-icon { color: var(--ciano); }
.store-sections { gap: 24px; }
.store-section-header { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.store-section-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ciano); border: 1px solid var(--linha); clip-path: var(--clip-btn); }
.store-section-heading h3 { color: #e3dccf; font-size: 21px; font-style: normal; }
.store-section-heading p { margin: 2px 0 0; color: var(--mudo); font-size: 11px; }
.store-section-count { color: var(--mudo); font: 800 14px var(--fd); }
.store-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.store-item { position: relative; min-height: 112px; padding: 14px; }
.store-item-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; color: var(--ouro); background: rgba(233,180,81,.06); border: 1px solid rgba(233,180,81,.2); clip-path: var(--clip-btn); }
.store-item-copy { min-width: 0; flex: 1; }
.store-item-kicker { color: var(--ciano); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.store-item-title { margin: 3px 0; color: #e9e2d5; font-style: normal; }
.store-item-description { margin: 0; line-height: 1.35; }
.store-item-action { flex: none; }

/* perfil */
.profile-sections { max-width: 1060px; margin: 0 auto; gap: 10px; }
.profile-identity-card { position: relative; min-height: 132px; padding: 18px 22px; display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 18px; }
.profile-avatar-shell { width: 80px; height: 88px; overflow: hidden; clip-path: var(--clip-btn); border: 1px solid var(--borda-forte); }
.profile-identity-copy h3 { margin: 4px 0 2px; color: #eee7da; font-size: 31px; font-style: normal; }
.profile-identity-copy p { margin: 0; color: var(--mudo); }
.profile-section { position: relative; padding: 18px 22px; }
.profile-section-header { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 15px; }
.profile-section-header h3 { margin-top: 4px; color: #e3dccf; font-size: 22px; font-style: normal; }
.profile-stats { grid-auto-flow: initial; grid-template-columns: repeat(4,1fr); }
.profile-stat.is-positive dd { color: var(--verde); }
.profile-stat.is-rank dd { color: var(--ciano); }
.profile-collection-progress { margin-top: 16px; }
.profile-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--mudo); font-size: 11px; }
.profile-progress-copy strong { color: #d2d7d1; }
.profile-name-form label { display: block; margin-bottom: 7px; color: #c9c8bf; font-size: 12px; }
.profile-name-controls { align-items: stretch; }
.profile-name-input { max-width: 420px; }
.profile-field-help { margin: 7px 0 0; }
.profile-session-note { margin: 0; color: var(--mudo); font-size: 12px; line-height: 1.45; }
.profile-session-section { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.profile-session-section .profile-section-header { margin: 0; }

@media (max-width: 899px) {
  .progression-screen, .progression-screen.profile-screen { width: 100%; height: 100dvh; margin: 0; padding: calc(12px + var(--safe-t)) 10px calc(78px + var(--safe-b)); }
  .profile-screen { padding-bottom: calc(12px + var(--safe-b)); }
  .progression-header { min-height: 76px; padding-bottom: 11px; align-items: flex-start; }
  .progression-back { width: 40px; height: 40px; }
  .progression-title { font-size: clamp(28px,9vw,38px); }
  .progression-subtitle { font-size: 11px; }
  .progression-header-actions { position: absolute; right: 10px; top: calc(56px + var(--safe-t)); }
  .progression-scroll { padding: 12px 0 24px; }
  .progression-summary { min-height: 142px; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .progression-summary-stats { grid-auto-flow: column; justify-self: stretch; }
  .progression-summary-stats > div { min-width: 0; }
  .mission-list { grid-template-columns: 1fr; }
  .mission-card { min-height: 184px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .mission-card-action { grid-column: 1; grid-row: 3; }
  .mission-claim-button { width: 100%; }

  .ranking-self { grid-template-columns: 70px 1fr; }
  .ranking-self-stats { grid-column: 1 / -1; grid-auto-flow: column; }
  .ranking-self-position { font-size: 36px; }
  .ranking-podium { grid-template-columns: 1fr; }
  .ranking-entry-podium { min-height: 84px; display: flex; }
  .ranking-entry-podium .ranking-score { margin-left: auto; align-items: flex-end; }
  .ranking-entry { min-height: 72px; padding: 10px; }
  .ranking-score strong { font-size: 12px; }

  .store-trust-note { margin-top: 36px; }
  .store-grid { grid-template-columns: 1fr; }
  .store-item { min-height: 124px; align-items: flex-start; flex-wrap: wrap; }
  .store-item-action { margin-left: 52px; }

  .profile-identity-card { grid-template-columns: 68px 1fr; padding: 15px; }
  .profile-avatar-shell { width: 66px; height: 74px; }
  .profile-status { grid-column: 1 / -1; justify-self: start; }
  .profile-section { padding: 15px; }
  .profile-stats { grid-template-columns: repeat(2,1fr); gap: 5px; }
  .profile-name-controls { flex-direction: column; }
  .profile-name-input { max-width: none; }
  .profile-session-section { grid-template-columns: 1fr; }
}

/* ---------- hangar de cartas e editor de esquadrão ---------- */
.collection-screen, .decks-screen, .deck-editor-screen { width: auto; height: 100dvh; margin-left: 184px; padding: 22px clamp(22px,3.5vw,54px) 18px; overflow: hidden; background: radial-gradient(circle at 78% 0, rgba(86,215,213,.055), transparent 33%), #020b0c; }
.decks-screen, .deck-editor-screen { margin-left: 0; padding-inline: max(22px, calc((100vw - 1180px) / 2)); }
.collection-screen > .cab, .decks-screen > .cab, .deck-editor-screen .cab { min-height: 64px; padding-bottom: 13px; border-bottom: 1px solid var(--linha); }
.collection-screen > .cab h2, .decks-screen > .cab h2, .deck-editor-screen .cab h2 { color: #e9e2d5; font-size: clamp(30px,3vw,44px); font-style: normal; }
.collection-screen > .barra, .decks-screen > .barra { padding: 12px 4px !important; }
.collection-screen > .painel, .deck-editor-screen .painel.grade { flex: none; padding: 13px 15px !important; border-color: rgba(190,202,189,.16); }
.collection-screen .abas, .deck-editor-screen .abas { gap: 4px; }
.aba { min-height: 38px; padding: 7px 13px; background: rgba(5,23,24,.82); border-color: var(--linha); color: #9ba8a1; font-style: normal; clip-path: var(--clip-btn); }
.aba.ativa { color: var(--verde); background: rgba(184,239,55,.1); border-color: rgba(184,239,55,.38); }
.collection-screen select.campo { color-scheme: dark; }
.collection-screen > .rolavel, .decks-screen > .rolavel, .deck-editor-screen > .rolavel { padding: 12px 4px 90px; }
.grade-cartas { grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: 25px 12px; padding: 8px 6px 24px; }
.grade-cartas .item { min-width: 0; }
.grade-cartas .nivel { bottom: -13px; color: #b9c2bb; background: #061516; border-color: var(--linha); }
.grade-cartas .carta { font-size: clamp(8px, .72vw, 11px); }
.deck-atual { gap: 7px; padding: 12px 8px; background: rgba(0,10,11,.5); border-top: 1px solid var(--linha); overflow-x: auto; scrollbar-width: thin; }
.deck-atual .carta { --w: 68px; }
.deck-atual .vazio { width: 68px; background: rgba(255,255,255,.018); border-color: rgba(182,199,185,.2); }
.decks-screen .lista > .painel { position: relative; margin-bottom: 10px; padding: 8px; }
.decks-screen .linha .t { color: #e8e1d4; font-style: normal; font-size: 20px; }
.decks-screen .linha .d { margin-top: 3px; }
.deck-editor-screen { grid-template-rows: auto minmax(0,1fr); }
.deck-editor-screen > div:first-child { padding-bottom: 5px; }
.deck-editor-screen .deck-atual { max-height: 122px; }
.deck-editor-screen .deck-atual .carta, .deck-editor-screen .deck-atual .vazio { --w: 58px; width: 58px; }
.deck-editor-screen .grade-cartas { grid-template-columns: repeat(auto-fill,minmax(118px,1fr)); }

/* ficha de carta */
.ficha { position: fixed; inset: 0; z-index: 80; padding: clamp(12px,3vw,32px); display: grid; grid-template-columns: minmax(260px,420px) minmax(300px,480px); grid-template-rows: auto 1fr auto; justify-content: center; align-content: center; gap: 0 28px; overflow-y: auto; background: radial-gradient(circle at 45% 45%, rgba(40,91,88,.22), transparent 40%), rgba(0,7,8,.93); backdrop-filter: blur(12px); }
.ficha-topo { grid-column: 1; align-self: end; margin-bottom: 8px; color: var(--ciano); font: 800 10px var(--ft); letter-spacing: .16em; text-transform: uppercase; }
.ficha-palco { grid-column: 1; grid-row: 2 / 4; position: relative; align-self: center; justify-self: center; width: min(390px, 38vw); }
.ficha-carta { --w: min(390px,38vw); }
.ficha .fh { position: absolute; z-index: 6; top: -10px; width: 64px; height: 68px; display: grid; place-items: center; color: #fff; font: 900 31px var(--fd); clip-path: var(--clip-btn); border: 1px solid rgba(255,255,255,.25); }
.ficha .fh.custo { left: -16px; background: linear-gradient(145deg,#5aa5c8,#17495d); }
.ficha .fh.poder { right: -16px; background: linear-gradient(145deg,#ff8c51,#9b3917); }
.ficha-nome { position: absolute; z-index: 7; left: -8px; right: -8px; bottom: 34px; padding: 9px 10px; color: #f0e9dc; background: rgba(2,12,13,.92); border: 1px solid var(--linha); font: 900 clamp(23px,2.5vw,36px)/1 var(--fd); text-align: center; text-transform: uppercase; }
.ficha-sub { position: absolute; z-index: 7; left: 0; right: 0; bottom: 13px; color: var(--ciano); font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.ficha-efeito { grid-column: 2; grid-row: 2; align-self: end; padding: 22px; color: #d2d5ce; background: var(--painel); border: 1px solid var(--linha); clip-path: var(--clip-panel); font-size: 16px; line-height: 1.55; }
.ficha-efeito b { color: var(--verde); }
.ficha-acoes { grid-column: 2; grid-row: 3; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.ficha-x { position: fixed; z-index: 9; right: max(15px,3vw); top: max(15px,3vw); width: 48px; height: 48px; color: #d6d2c6; background: rgba(5,23,24,.9); border: 1px solid var(--linha); clip-path: var(--clip-btn); font-size: 20px; }

@media (max-width: 899px) {
  .collection-screen, .decks-screen, .deck-editor-screen { width: 100%; height: 100dvh; margin: 0; padding: calc(10px + var(--safe-t)) 9px calc(78px + var(--safe-b)); }
  .decks-screen, .deck-editor-screen { padding-bottom: calc(12px + var(--safe-b)); }
  .collection-screen > .cab h2, .decks-screen > .cab h2, .deck-editor-screen .cab h2 { font-size: 29px; }
  .collection-screen > .painel { padding: 10px !important; }
  .collection-screen > .rolavel, .decks-screen > .rolavel, .deck-editor-screen > .rolavel { padding: 10px 2px 20px; }
  .grade-cartas { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 22px 7px; padding-inline: 2px; }
  .grade-cartas .carta { font-size: clamp(7.5px,2.25vw,9px); }
  .deck-atual .carta { --w: 60px; }
  .decks-screen .linha { align-items: flex-start; }
  .deck-editor-screen .deck-atual { max-height: 106px; }
  .deck-editor-screen .deck-atual .carta, .deck-editor-screen .deck-atual .vazio { --w: 50px; width: 50px; }
  .deck-editor-screen .grade-cartas { grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); }

  .ficha { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 56px 14px 22px; }
  .ficha-topo { align-self: center; margin: 0; }
  .ficha-palco { width: min(285px,78vw); flex: none; }
  .ficha-carta { --w: min(285px,78vw); }
  .ficha .fh { width: 50px; height: 54px; font-size: 25px; }
  .ficha-nome { font-size: clamp(22px,7vw,30px); }
  .ficha-efeito { width: min(520px,100%); padding: 16px; font-size: 14px; }
  .ficha-acoes { width: min(520px,100%); padding: 0; justify-content: center; }
  .ficha-acoes .btn { width: 100%; }
  .ficha-x { right: 10px; top: 10px; }
}

@media (max-width: 340px) {
  .grade-cartas { grid-template-columns: repeat(2,minmax(0,1fr)); }
}