/* ══════════════════════════════════════════════════════════════════════════
YGO Classic Duels — estilos do jogo.
As telas (login/lobby/loja/decks) usam Tailwind (tailwind.css); este arquivo
cuida do BOARD DE DUELO, efeitos/animações e componentes compartilhados.
══════════════════════════════════════════════════════════════════════════ */
:root {
/* Dourado fica reservado para ALERTAS (aguardando, turno, vitória, toasts). */
--gold: #e8c064;
--gold-bright: #ffd75e;
/* Acento da interface: azul sobre azul-escuro/quase-preto. */
--accent: #59a7f0;
--accent-bright: #8ec7ff;
--abyss: #0a0e14;
--panel: #141b26;
--line: #2c3a4a;
/* ── Painel chanfrado: os MESMOS valores da home e das configurações ───────
A assinatura da casa é "elemento com clip-path pinta a BORDA · ::before
inset:1px pinta o FUNDO". Estes três tokens são o par de cores desse
truque; o duelo os usa para não ter uma paleta própria (era azul saturado)
enquanto o resto da plataforma usa aço sobre carvão. */
--edge: rgba(140, 158, 182, 0.22); /* fio do chanfro, neutro */
--edge-lit: rgba(120, 180, 255, 0.40); /* fio ACESO: diálogo/painel em foco */
--fill-panel: linear-gradient(168deg, rgba(20, 25, 33, 0.94), rgba(10, 13, 19, 0.93));
/* Caixa DENTRO de um painel (texto de efeito, registro): mais funda que ele. */
--fill-inset: rgba(5, 9, 16, 0.66);
/* Divisória de cabeçalho — a mesma linha fina do .set-card-head. */
--hair: rgba(140, 165, 200, 0.14);
/* Costura da coluna do duelista (moldura lateral do avatar, diagonal da base
e separador da barra de vida). PRETA: qualquer cinza-azulado ali vira um
contorno claro em volta do retrato e é a primeira coisa que o olho pega —
e o assunto daquela área é o personagem, não a moldura. A 25% ela
separa sem virar contorno: é sombra, não traço. */
--seam: rgba(0, 0, 0, 0.25);
/* Queda da diagonal do perfil: a MESMA medida corta a base do avatar
(partículas) e inclina o topo da barra de vida — assim os dois casam
exatamente. Subir = diagonal mais acentuada. */
--avatar-cut: 36px;
--steel: #9fb4c8;
/* Enquadramento dos retratos de perfil nos espaços REDONDOS/pequenos. Eles
são bustos altos e de proporções variadas na zona (894×894, 768×1080…):
recortar pelo centro pega o peito e decapita o personagem. Puxando o corte
para perto do topo, o que sobrevive é sempre o ROSTO. */
--face-crop: 50% 14%;
--danger: #ff5c49;
--heal: #5eff9c;
/* Carta na MÃO: a largura é o token, a altura sai dela pela proporção da
carta (59×86). Existem para as fileiras da mão poderem RESERVAR a altura
de uma carta mesmo com a mão vazia — antes a fileira colapsava e o board
(que é `flex: 1` entre as duas) subia ou descia sozinho. Mão vazia é
estado comum (setou tudo, descartou por Dark World); o tabuleiro andar
junto era a peça saindo debaixo do dedo. */
--hand-card-w: clamp(64px, 6.2vw, 92px);
--hand-card-h: calc(var(--hand-card-w) * 86 / 59);
--ohand-card-w: clamp(40px, 3.6vw, 58px);
--ohand-card-h: calc(var(--ohand-card-w) * 86 / 59);
/* Respiro lateral do #field. Era uma zona inteira + 46px, para caber os
slots satélite de BANIDAS; hoje é só a folga das colunas externas, que já
se afastam 24px pelo `edge-l/edge-r`. Vira token porque a linha da
divisória precisa dele para alcançar as duas bordas. */
--field-pad-x: 42px;
/* Trilho de fases colado por fora da borda direita, e a altura de cada
degrau dele (o cursor deslizante herda a mesma). */
--rail-w: 44px;
--seg-h: 30px;
/* Largura de zona: o MENOR entre o que a largura permite e o que a altura
permite. Só a conta de largura existia, e o teto de 96px era ela disfarçada
de gosto — numa tela 1366×768 o board já transbordava e o `overflow:hidden`
escondia o corte.
LARGURA: (100vw − 726) ÷ 7 colunas. As colunas laterais têm 224px de piso e
comem a calha que sobra; 726 = 2×224 + 2×20 de calha + 24 de padding do
root + 122 do campo fora do grid (gaps, padding, borda) + 2×44 do trilho e
do espelho dele que mantém o board centrado.
ALTURA: o que sobra do #board3d dividido pelas 4 fileiras. 102 = padding e
borda do #duel-root e do #field + os gaps + a divisória; as duas mãos
entram pelos próprios tokens, que já dependem da largura da janela.
O teto subiu de 96 para 120: com as fases fora do meio do board e as
banidas fora da lateral, em tela cheia sobrava calha para dar de sobra.
As três peças ficam separadas para os @media trocarem só a que muda: o
orçamento de LARGURA muda com as colunas laterais, o de ALTURA não muda
nunca (é a mesma pilha vertical em qualquer janela). */
--zone-fit-w: calc((100vw - 726px) / 7);
--zone-fit-h: calc((100vh - 102px - var(--hand-card-h) - var(--ohand-card-h)) / 4 / 1.375);
--zone-cap: 120px;
--zone-w: clamp(50px, min(var(--zone-fit-w), var(--zone-fit-h)), var(--zone-cap));
--zone-h: calc(var(--zone-w) * 1.375);
/* Cantos "quebrados" (chanfro no canto sup-esq e inf-dir): a assinatura
visual tecnológica do board — usada em painéis, botões e diálogos. */
/* --cut-xs: mesma assinatura em peças MIÚDAS (chip, selo, interruptor), onde o
corte de 8px comeria metade do elemento. */
--cut-xs: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
--cut-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
--cut-md: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
/* Espelho horizontal do cut-md: chanfra SUP-DIR + INF-ESQ. Vai na lateral
esquerda p/ os dois painéis "se encararem" (cantos internos espelhados). */
--cut-md-mirror: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
/* O mesmo corte do --cut-md-mirror (SUP-DIR + INF-ESQ), mas GRANDE: é a
assinatura do BOARD. O tamanho é responsivo porque o corte come o padding
lateral do #field, e esse padding encolhe junto com a tela — passar do
padding significaria decepar a primeira/última zona (ver os @media). */
/* Paralelogramo dos segmentos de fase (bordas laterais inclinadas). */
--slant: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
/* Cursor "navigation-arrow": seta dourada SÓLIDA com leve degradê (dourado
claro → um pouco mais escuro), sem borda. Hotspot na ponta (6 6). */
--cursor-nav: url("data:image/svg+xml;utf8,") 6 6;
/* Mesma seta, dourado mais ESCURO — usada enquanto o botão está pressionado. */
--cursor-nav-down: url("data:image/svg+xml;utf8,") 6 6;
/* ── Marcas das ZONAS do board (glifos Phosphor, peso LIGHT) ──────────────
Vão como MÁSCARA e não como fonte de ícone: o bundle de ícones da
plataforma (`fonts/phosphor/style.css` no CDN) só traz o peso duotone, e
subir a fonte Light inteira — 155 kB — por causa de cinco marcas não se
paga. Máscara ainda tem a vantagem de herdar a cor: a mesma marca acende
no hover e na zona elegível sem precisar de um segundo arquivo.
Extraídos de @phosphor-icons/web/src/light/selection.json (grade 1024). */
--ic-circle: url("data:image/svg+xml,");
--ic-circle-dashed: url("data:image/svg+xml,");
--ic-ghost: url("data:image/svg+xml,");
--ic-hexagon: url("data:image/svg+xml,");
--ic-octagon: url("data:image/svg+xml,");
--ic-prohibit: url("data:image/svg+xml,");
--ic-spiral: url("data:image/svg+xml,");
}
.hidden { display: none !important; }
/* Sem seleção/arraste acidental ao clicar-e-arrastar (feel de app/jogo). Campos
de texto seguem selecionáveis para o usuário digitar/editar normalmente. */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }
/* ── Barra de rolagem (TODA a plataforma) ──────────────────────────────────
Um só desenho para qualquer área rolável — modais, listas, log do duelo,
inspetor. Traço da casa: nada de pílula cinza do sistema; a barra é um FIO
RETO (cantos vivos, como os chanfros dos painéis), quase invisível parada, e
que acende no AZUL do acento quando o ponteiro entra na área rolável — o que
dá o retorno sem competir com o conteúdo.
O `border` transparente + `background-clip: padding-box` é o truque que
afina o fio dentro de uma calha larga: a área de arraste continua confortável
(10px), mas o que se vê são 4px. Regra global de propósito — área rolável
nova já nasce no padrão, sem CSS próprio. */
* { scrollbar-width: thin; scrollbar-color: rgba(159, 180, 200, 0.16) transparent; }
*:hover { scrollbar-color: rgba(142, 199, 255, 0.38) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(159, 180, 200, 0.16); border: 3px solid transparent;
background-clip: padding-box; /* deixa o fio com 4px dentro da calha de 10px */
transition: background 0.16s;
}
:hover::-webkit-scrollbar-thumb { background: rgba(142, 199, 255, 0.34); }
::-webkit-scrollbar-thumb:hover { background: rgba(142, 199, 255, 0.6); }
::-webkit-scrollbar-thumb:active { background: var(--accent-bright); }
/* Fundo com auras (todas as telas) */
#bg-aura {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(600px 400px at 15% -5%, rgba(90, 150, 230, 0.09), transparent 70%),
radial-gradient(700px 500px at 110% 15%, rgba(56, 120, 198, 0.12), transparent 70%),
radial-gradient(900px 700px at 50% 120%, rgba(30, 70, 140, 0.14), transparent 70%);
}
/* ── Componentes compartilhados (criados via JS) ───────────────────────── */
.room-entry {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 12px 16px; clip-path: var(--cut-sm);
background: rgba(255, 255, 255, 0.04); transition: background 0.16s;
}
.room-entry:hover { background: rgba(255, 255, 255, 0.08); }
.room-entry .re-info { min-width: 0; }
.room-entry .re-name { font-size: 14px; font-weight: 800; color: #e7ebf1; }
.room-entry .re-meta {
margin-top: 3px; font-size: 11.5px; color: #8b93a0;
display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
}
.room-entry .re-meta i { font-size: 13px; opacity: 0.8; }
.room-entry .re-right { display: flex; align-items: center; gap: 10px; flex: none; }
.re-status {
font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
}
.re-status--waiting { color: #6ee7a5; background: rgba(52, 214, 126, 0.14); }
.re-status--rps { color: var(--gold-bright); background: rgba(232, 192, 100, 0.14); }
.re-status--duel, .re-status--done { color: #9fb4c8; background: rgba(160, 180, 210, 0.12); }
.re-join {
border: none; cursor: pointer; font-family: inherit; clip-path: var(--cut-sm);
padding: 8px 16px; font-weight: 800; font-size: 12.5px; color: #fff;
background: linear-gradient(180deg, #34d67e, #12a355);
display: inline-flex; align-items: center; gap: 6px; transition: filter 0.15s, transform 0.1s;
}
.re-join:hover { filter: brightness(1.1); }
.re-join:active { transform: scale(0.95); }
/* (A loja de boosters — prateleira, boosters e carrinho — vive na seção
"LOJA DE BOOSTERS" mais abaixo, junto do parallax da cena.) */
.deck-entry {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
background: rgba(255, 255, 255, 0.03); transition: border-color 0.15s;
}
.deck-entry:hover { border-color: rgba(56, 189, 248, 0.5); }
.deck-entry .deck-meta { color: var(--steel); font-size: 12.5px; }
.deck-entry button {
border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 13px;
font-weight: 600; color: #e2e8f0; background: rgba(255, 255, 255, 0.05); cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.deck-entry button:hover { background: rgba(255, 255, 255, 0.1); }
.deck-entry button.danger { color: #fca5a5; border-color: rgba(153, 27, 27, 0.6); background: rgba(69, 10, 10, 0.4); }
.deck-entry button:active { transform: scale(0.95); }
.filter-btn {
border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 12px;
font-weight: 600; color: var(--steel); background: transparent; cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { color: #e2e8f0; border-color: var(--steel); }
.filter-btn.selected-filter { color: var(--abyss); background: var(--accent); border-color: var(--accent); font-weight: 800; }
.scroll-list {
height: 420px; overflow-y: auto; background: rgba(6, 10, 15, 0.7);
border: 1px solid var(--line); border-radius: 10px; padding: 4px;
}
.scroll-list.small { height: 150px; }
.card-row {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 6px 9px; border-radius: 7px; font-size: 13px; cursor: pointer; transition: background 0.12s;
}
.card-row:hover { background: rgba(56, 120, 198, 0.15); }
.card-row .qty { color: var(--steel); font-size: 11.5px; white-space: nowrap; }
.card-row.depleted { opacity: 0.35; }
.rps-btn {
font-size: 32px; width: 68px; height: 68px; clip-path: var(--cut-sm); cursor: pointer;
border: none; color: #dbe9fa; background: rgba(120, 180, 255, 0.28);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.rps-btn:hover {
transform: translateY(-4px) scale(1.06); background: rgba(120, 180, 255, 0.5);
box-shadow: 0 12px 30px -10px rgba(90, 160, 240, 0.5);
}
.rarity-COMMON { color: #c8d4e0; }
.rarity-RARE { color: #6bb2ff; }
.rarity-SUPER { color: #c9a2ff; }
.rarity-ULTRA { color: var(--gold-bright); }
@keyframes pull-reveal {
from { opacity: 0; transform: translateX(-18px) scale(0.9); }
to { opacity: 1; transform: none; }
}
/* ── Modal / menu de contexto / toast / preview ────────────────────────── */
#modal-backdrop {
position: fixed; inset: 0; background: rgba(2, 4, 8, 0.72); z-index: 40;
display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px);
animation: fade-in 0.15s ease-out;
}
#modal {
position: relative; background: rgba(120, 180, 255, 0.4); border: none;
clip-path: var(--cut-md);
padding: 20px; width: 620px; max-width: 94vw; max-height: 82vh;
display: flex; flex-direction: column; gap: 12px;
filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.85));
animation: modal-pop 0.22s cubic-bezier(0.2, 1.3, 0.4, 1);
}
#modal::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-md);
background: rgba(15, 21, 33, 0.97); pointer-events: none;
}
@keyframes modal-pop { from { opacity: 0; transform: scale(0.92) translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }
#modal h3 { color: var(--accent-bright); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
#modal-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
/* ── Picker de cartas: lista agrupada + toggle à esquerda, preview à direita;
divider e painel de efeito (abas + scroll) embaixo. Alturas FIXAS: o modal
não muda de tamanho conforme o mouse passa por textos maiores/menores. */
.picker { display: flex; flex-direction: column; gap: 10px; height: min(540px, 68vh); }
.picker.compact { height: min(440px, 60vh); }
.picker-top { display: flex; gap: 14px; flex: 1; min-height: 0; }
/* Declarar 1 nome de carta (D.D. Designator, Mind Crush): a coluna da esquerda
ganha a busca em cima da lista. O `.picker-list` de dentro herda o scroll. */
/* `min-height: 0` nos DOIS: sem isso o item flex adota a altura do conteúdo
e a lista transborda o modal em vez de rolar dentro dele — a pegadinha
clássica de scroll aninhado em flexbox. */
.picker-search-col {
flex: 1.15; min-width: 0; min-height: 0;
display: flex; flex-direction: column; gap: 6px;
}
.picker-search-col .picker-list { flex: 1; min-height: 0; }
.picker-search {
width: 100%; padding: 7px 10px; font: inherit; font-size: 12px;
color: #e8eef6; background: rgba(9, 13, 21, 0.9);
border: 1px solid rgba(159, 180, 200, 0.22); border-radius: 6px; outline: none;
}
.picker-search::placeholder { color: rgba(159, 180, 200, 0.5); }
.picker-search:focus { border-color: rgba(120, 200, 255, 0.55); }
/* O X nativo do type=search fica cinza demais no fundo escuro. */
.picker-search::-webkit-search-cancel-button { filter: invert(0.7); cursor: pointer; }
.picker-list {
flex: 1.15; min-width: 0; overflow-y: auto; padding-right: 4px;
}
.picker-group {
position: sticky; top: 0; z-index: 1; padding: 6px 8px 4px;
font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
background: rgba(15, 21, 33, 0.97);
}
.picker-group.g-monster { color: #ffd9a8; }
.picker-group.g-spell { color: #a8f0d8; }
.picker-group.g-trap { color: #f3c2e4; }
.picker-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 7px 9px; border-radius: 5px; font-size: 13px; color: #dbe7f5;
transition: background 0.12s;
}
.picker-row:hover { background: rgba(56, 120, 198, 0.16); }
.picker-row .picker-name {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Badge "de onde vem" a carta (campo/mão/cemitério/banido) no picker. */
.picker-where {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
color: rgba(190, 208, 230, 0.7); padding: 2px 7px; border-radius: 999px;
background: rgba(120, 160, 210, 0.14); border: 1px solid rgba(120, 160, 210, 0.22);
}
.picker-where i { font-size: 13px; }
/* o toggle: bolinha que fica verdinha quando marcada */
.picker-toggle {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid rgba(150, 175, 205, 0.4); background: transparent;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: transparent; transition: all 0.15s;
}
.picker-row.sel { background: rgba(16, 122, 60, 0.22); }
.picker-row.sel .picker-toggle {
border-color: #2fbf6b; background: #2fbf6b; color: #06131c;
}
/* Candidata travada pela restrição de combinação (fusão): não completa nenhuma
receita válida junto com o que já está marcado. */
.picker-row.picker-dis { opacity: 0.38; pointer-events: none; }
.picker-preview {
flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
gap: 6px; align-items: center;
}
.picker-preview img {
flex: 1; min-height: 0; width: 100%; object-fit: contain;
filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7));
}
.picker-pname { font-weight: 800; font-size: 13px; color: var(--accent-bright); text-align: center; }
.picker-pstats { font-size: 11px; color: var(--steel); text-align: center; }
.picker-divider {
flex-shrink: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(120, 165, 215, 0.45), transparent);
}
/* painel de efeito: altura fixa, abas quando a carta tem mais de 1 efeito */
.picker-effect {
flex-shrink: 0; height: 112px; display: flex; flex-direction: column; gap: 7px;
}
.picker-tabs { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.picker-tab {
padding: 3px 11px; border-radius: 4px; cursor: pointer; user-select: none;
border: 1px solid rgba(120, 160, 210, 0.28); background: rgba(255, 255, 255, 0.04);
font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--steel); transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.picker-tab:hover { background: rgba(56, 120, 198, 0.16); color: #dbe7f5; }
.picker-tab.on {
background: rgba(56, 120, 198, 0.28); border-color: rgba(100, 160, 230, 0.6);
color: var(--accent-bright);
}
.picker-tab.static { cursor: default; }
.picker-tab.static:hover { background: rgba(56, 120, 198, 0.28); }
.picker-ptext {
flex: 1; min-height: 0; font-size: 11.5px; line-height: 1.55; color: #cdd9e6;
white-space: pre-wrap; overflow-y: auto; padding-right: 4px;
}
#modal-list button {
background: rgba(255, 255, 255, 0.04); text-align: left; font-weight: 500; font-size: 13px;
color: #e2e8f0; border: 1px solid transparent; border-radius: 8px; padding: 8px 11px;
cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
#modal-list button:hover { background: rgba(56, 120, 198, 0.18); }
#modal-list button.selected { background: rgba(16, 122, 60, 0.35); border-color: #2fbf6b; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions button {
flex: 1; border: none; clip-path: var(--cut-sm); padding: 10px; font-weight: 800; font-size: 13px;
cursor: pointer; color: var(--abyss); background: linear-gradient(180deg, #6cbcff, #2a7fd8);
transition: filter 0.15s, transform 0.1s;
}
.modal-actions button.secondary { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); }
.modal-actions button:hover { filter: brightness(1.1); }
.modal-actions button:active { transform: scale(0.97); }
.modal-actions button:disabled { filter: grayscale(0.8) brightness(0.75); opacity: 0.6; }
/* Escolha VISUAL (posição/modo): duas cartas grandes lado a lado.
O frame é QUADRADO (lado = altura da carta) para caber tanto a carta em pé
quanto a mesma girada 90° na MESMA escala — sem espremer a de defesa. */
.vpick { display: flex; gap: 16px; justify-content: center; padding: 6px 2px 2px; }
.vpick-opt {
cursor: pointer; flex: 0 0 auto; box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; gap: 9px;
width: 210px; padding: 12px; border-radius: 10px;
border: 2px solid rgba(120, 160, 210, 0.22); background: rgba(255, 255, 255, 0.03);
transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.vpick-opt:hover { background: rgba(120, 160, 210, 0.12); transform: translateY(-2px); }
.vpick-opt.sel { border-color: #2fbf6b; background: rgba(16, 122, 60, 0.18); }
.vpick-frame {
flex: 0 0 auto; width: 182px; height: 182px;
display: flex; align-items: center; justify-content: center;
}
.vpick-frame img {
max-width: 178px; max-height: 178px; border-radius: 6px;
box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.75);
}
/* Girada 90°: mesma escala da carta em pé (a rotação é só transform visual). */
.vpick-frame img.rot { transform: rotate(90deg); }
.vpick-cap {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; font-weight: 800; color: #dbe7f5;
}
.vpick-cap i { font-size: 16px; }
.vpick-opt.sel .vpick-cap { color: #6fe6a3; }
/* [Reasoning] Declaração de NÚMERO: fichas quadradas (não há carta para
ilustrar, então o .vpick não serve). Mesma linguagem de seleção do .vpick. */
.numpick {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
padding: 10px 4px 4px; justify-items: stretch;
}
.numpick-opt {
cursor: pointer; box-sizing: border-box; padding: 14px 0;
font-size: 20px; font-weight: 800; color: #dbe7f5;
border-radius: 10px; font-variant-numeric: tabular-nums;
border: 2px solid rgba(120, 160, 210, 0.22); background: rgba(255, 255, 255, 0.03);
transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.numpick-opt:hover { background: rgba(120, 160, 210, 0.12); transform: translateY(-2px); }
.numpick-opt.sel { border-color: #2fbf6b; background: rgba(16, 122, 60, 0.18); color: #6fe6a3; }
@media (max-width: 560px) { .numpick { grid-template-columns: repeat(4, 1fr); } }
/* Menu de contexto: UM único shape (corpo + cauda/setinha) desenhado por
clip-path — a cauda segue o MESMO contorno/borda do menu, integrada (sem
emenda). --tail é o polígono; --tail-pad afasta os botões da cauda. */
#context-menu {
position: fixed; z-index: 30;
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.75));
transform-origin: left center;
animation: menu-pop 0.16s cubic-bezier(0.2, 1.25, 0.4, 1);
/* cauda à ESQUERDA (menu abre à direita da carta) — 4 cantos chanfrados */
--tail: polygon(16px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 16px 100%, 9px calc(100% - 7px), 9px calc(50% + 8px), 0 50%, 9px calc(50% - 8px), 9px 7px);
--tail-pad: 0 0 0 9px;
}
#context-menu.menu-left {
transform-origin: right center;
/* cauda à DIREITA (menu abre à esquerda da carta) — 4 cantos chanfrados */
--tail: polygon(7px 0, calc(100% - 16px) 0, calc(100% - 9px) 7px, calc(100% - 9px) calc(50% - 8px), 100% 50%, calc(100% - 9px) calc(50% + 8px), calc(100% - 9px) calc(100% - 7px), calc(100% - 16px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
--tail-pad: 0 9px 0 0;
}
.menu-body {
position: relative; background: rgba(120, 180, 255, 0.45);
display: flex; flex-direction: column; min-width: 180px;
padding: var(--tail-pad); clip-path: var(--tail); backdrop-filter: blur(6px);
}
.menu-body::before {
content: ''; position: absolute; inset: 1px; z-index: -1;
clip-path: var(--tail); background: rgba(14, 20, 32, 0.97); pointer-events: none;
}
@keyframes menu-pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
#context-menu.menu-closing { animation: menu-close 0.14s ease-in forwards; }
@keyframes menu-close { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }
#context-menu button {
background: none; border: none; text-align: left; padding: 10px 14px; font-size: 13px;
font-weight: 600; color: #e2e8f0; cursor: pointer;
}
#context-menu button:hover { background: rgba(90, 160, 240, 0.2); color: var(--accent-bright); }
#toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
background: rgba(20, 27, 38, 0.95); border: 1px solid rgba(232, 192, 100, 0.5);
color: #f1f5f9; padding: 11px 20px; border-radius: 12px; z-index: 50; font-size: 14px;
font-weight: 600; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.8);
animation: toast-in 0.25s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } }
#card-preview {
/* acima do modal (40): o preview serve justamente os pickers de alvo/fusão. */
position: fixed; left: 14px; bottom: 14px; width: 236px; z-index: 45;
background: rgba(14, 19, 28, 0.94); border: 1px solid rgba(120, 180, 255, 0.45);
border-radius: 14px; padding: 12px; pointer-events: none;
display: flex; flex-direction: column; gap: 7px; backdrop-filter: blur(6px);
box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.9);
animation: fade-in 0.15s;
}
/* A moldura leva a medida e a sombra; a ![]()
só preenche. Ela é quem hospeda
as camadas do acabamento (ver "ACABAMENTOS DE CARTA"). */
#preview-card-art {
position: relative; display: block; width: 172px; align-self: center;
border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
#preview-img { display: block; width: 100%; border-radius: 8px; }
#preview-name { font-weight: 800; color: var(--accent-bright); font-size: 14px; }
#preview-stats { font-size: 11.5px; color: var(--steel); }
#preview-text {
font-size: 11px; line-height: 1.5; color: #d5dde5;
max-height: 128px; overflow-y: auto; white-space: pre-wrap;
}
/* ══════════════════════════════════════════════════════════════════════════
O BOARD DE DUELO
══════════════════════════════════════════════════════════════════════════ */
/* Cursor do jogo em TODAS as telas (nativo, imagem). */
* { cursor: var(--cursor-nav), auto !important; }
input, textarea, [contenteditable="true"] { cursor: text !important; }
/* Sliders (ex.: volume) NÃO são campo de texto — mantêm o cursor do jogo. */
input[type="range"] { cursor: var(--cursor-nav), pointer !important; }
:disabled { cursor: not-allowed !important; }
/* Clicar/segurar (qualquer botão) troca a seta pro dourado mais escuro. Nativo
não faz fade, então é troca instantânea — mas sem bug de seta dupla. */
body.pressing, body.pressing * { cursor: var(--cursor-nav-down), pointer !important; }
/* ── Céu do duelo: NEBULOSA animada (src/duel/nebula.ts) ───────────────────
Mesmo lugar dos outros fundos de cena (#parallax, #academy-bg, #lobby-bg):
fixo atrás do , ligado por body.scene-duel. Duas
profundidades com velocidades diferentes dão a sensação de espaço; o
`isolation: isolate` prende o mix-blend-mode dos canvas e do grão AQUI —
sem ele o "screen" das nuvens vazaria por cima do board. */
#duel-sky {
position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none;
isolation: isolate;
background:
radial-gradient(ellipse 95% 75% at 20% 82%, rgba(16, 58, 74, 0.55), transparent 62%),
radial-gradient(ellipse 85% 80% at 82% 16%, rgba(38, 26, 84, 0.50), transparent 64%),
radial-gradient(ellipse 55% 45% at 74% 76%, rgba(70, 20, 48, 0.26), transparent 68%),
radial-gradient(ellipse 70% 60% at 60% 55%, rgba(14, 44, 60, 0.30), transparent 70%),
#02030c;
}
body.scene-duel #duel-sky { display: block; animation: neb-wake 2.4s ease-out both; }
body.scene-duel #bg-aura { display: none; }
@keyframes neb-wake { from { opacity: 0; } to { opacity: 1; } }
/* Cada profundidade se move numa velocidade diferente (o JS escreve o
translate; a escala > 1 existe p/ o deslocamento nunca revelar a borda). */
.neb-depth { position: absolute; inset: 0; will-change: transform; }
#neb-depth-clouds { transform: scale(1.10); }
#neb-depth-stars { transform: scale(1.06); }
#duel-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* `screen`: nuvem e estrela são LUZ somada ao céu, não tinta por cima dele. */
#neb-clouds, #neb-stars { mix-blend-mode: screen; }
/* Vinheta MAIS ABERTA que a do protótipo. Lá o fundo é o espetáculo e a
vinheta fecha as bordas para o olho ir ao centro; aqui o centro é o BOARD, e
a nebulosa só aparece justamente na moldura — fechar as bordas apagaria a
única parte dela que se vê. Fica o suficiente para os cantos não brigarem
com os painéis. */
.neb-vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 78% 78% at 50% 50%,
transparent 0%, transparent 40%, rgba(0, 0, 0, 0.16) 70%, rgba(0, 0, 0, 0.38) 92%, rgba(0, 0, 0, 0.48) 100%);
}
/* Em tela alta e estreita a vinheta precisa ser mais suave nas laterais. */
@media (max-aspect-ratio: 3/4) {
.neb-vignette {
background: radial-gradient(ellipse 98% 66% at 50% 50%,
transparent 0%, transparent 42%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.32) 94%, rgba(0, 0, 0, 0.42) 100%);
}
}
/* Grão de filme — também disfarça o banding dos degradês do céu. */
.neb-grain {
position: absolute; inset: -8%; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: neb-grain 1.05s steps(1) infinite;
}
@keyframes neb-grain {
0% { transform: translate(0, 0); } 20% { transform: translate(-1.5%, 1%); }
40% { transform: translate(1%, -1.5%); } 60% { transform: translate(-1%, -1%); }
80% { transform: translate(1.5%, 1.5%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .neb-grain { animation: none; } }
/* Em duelo o navbar some e o board ocupa a tela inteira. */
body.in-duel > header { display: none; }
body.in-duel #duel-root { height: 100vh; }
/* O #duel-root não pinta mais fundo próprio — quem pinta é o céu, atrás dele.
Fica só um VÉU LEVE: o board já é translúcido e os painéis já são opacos, o
que precisa de ajuda é o contraste das cartas na mão, que ficam soltas sobre
o céu no topo e na base. Véu pesado aqui apaga a nebulosa inteira — foi
exatamente o que aconteceu na primeira tentativa. */
#duel-root {
display: flex; gap: 20px; height: calc(100vh - 58px); padding: 10px 12px;
background:
radial-gradient(1200px 620px at 50% 50%, rgba(2, 5, 12, 0.20), transparent 76%),
linear-gradient(180deg, rgba(3, 6, 13, 0.32), rgba(2, 4, 10, 0.08) 46%, rgba(3, 6, 13, 0.36));
overflow: hidden;
}
/* ── Coluna esquerda: inspetor de carta + registro ─────────────────────── */
/* Chanfro com borda que ACOMPANHA o corte: clip-path decapita a border nativa
na diagonal, então o fundo do elemento vira a COR DA LINHA e um ::before
interno (inset 1px, mesmo polígono) pinta o fundo real — o anel de 1px que
sobra é a borda, inclusive nos cantos quebrados. */
/* Colunas laterais SIMÉTRICAS: jogador+inspetor à esquerda, inimigo+registro
à direita — mesma largura e mesmo tratamento. */
#duel-left {
position: relative;
/* "Engorda" as laterais comendo a calha vazia que sobra ao redor do board
em telas largas — o board NUNCA encolhe (--zone-w intacto). Enxugadas de
248/400 para 224/336: o board é o assunto, a coluna é apoio. O que sobra
vira a calha entre a coluna e o board (o `gap` do #duel-root). */
width: clamp(224px, calc((100vw - 1120px) / 2), 336px); flex-shrink: 0;
display: flex; flex-direction: column; gap: 0;
border: none; clip-path: var(--cut-md-mirror); overflow: hidden;
/* Sem backdrop-filter: o céu ATRÁS agora é animado, e desfocar um fundo que
muda a cada frame custa uma recomposição por frame só p/ o que o painel
quase esconde. O `--fill-panel` já dá o contraste sozinho. */
background: var(--edge); min-height: 0;
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
#duel-left::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-md-mirror);
background: var(--fill-panel); pointer-events: none;
}
#inspector {
flex: 1; display: flex; flex-direction: column; gap: 9px;
padding: calc(12px + var(--avatar-cut)) 12px 12px; margin-top: calc(-1 * var(--avatar-cut));
min-height: 0;
/* Mesma costura do avatar e da barra de vida: a coluna lateral é UMA peça
só, e a moldura dela não pode trocar de cor no meio do caminho. */
border-left: 1px solid var(--seam);
border-right: 1px solid var(--seam);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
/* Topo recortado na MESMA diagonal do rodapé da barra → a área da carta
"acompanha" o corte em vez de começar reto. Puxado p/ cima (margin) p/
encostar na barra; padding-top compensa o conteúdo. */
clip-path: polygon(0 0, 100% var(--avatar-cut), 100% 100%, 0 100%);
}
#insp-empty {
flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
color: rgba(150, 175, 205, 0.4); font-size: 12.5px; line-height: 1.7; font-weight: 600;
}
/* Carta em destaque: flutuação sutil contínua + "pop" de entrada em carta nova. */
/* Topo do inspetor: carta à ESQUERDA + stats empilhados à DIREITA. */
#insp-top { display: flex; align-items: flex-start; gap: 11px; }
#insp-top.solo { justify-content: center; } /* magia/armadilha (sem stats): carta centralizada */
#insp-card {
position: relative; flex: 0 0 auto; width: min(50%, 148px); perspective: 750px;
animation: insp-float 4.5s ease-in-out infinite;
}
#insp-card img {
width: 100%; display: block; border-radius: 8px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(120, 160, 210, 0.14);
transition: transform 0.16s ease-out; /* segue o cursor (leve 3D) suavemente */
}
#insp-card.pop img { animation: insp-pop 0.46s cubic-bezier(0.2, 1.25, 0.35, 1); }
/* Badge de raridade no inspetor do duelo (mesmo estilo das outras telas). */
#insp-card::after {
content: ''; position: absolute; bottom: 100%; right: 2px; margin-bottom: 1px; z-index: 3; pointer-events: none;
box-sizing: border-box; width: 33px; height: 17px;
display: flex; align-items: center; justify-content: center; padding-left: 5px;
font-family: "Cabin", "Segoe UI", system-ui, sans-serif; font-size: 10.5px; font-weight: 900; letter-spacing: 0.03em;
line-height: 1; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.5);
}
#insp-card.r-COMMON::after { content: 'N'; background: linear-gradient(135deg, #9aa7b5, #566470); }
#insp-card.r-RARE::after { content: 'R'; background: linear-gradient(135deg, #63b2f8, #2464c8); }
#insp-card.r-SUPER::after { content: 'SR'; background: linear-gradient(135deg, #ff9a4d, #e0431f); }
#insp-card.r-ULTRA::after { content: 'UR'; background: linear-gradient(125deg, #c07bff 0%, #7b8cff 38%, #5aa8ff 62%, #ff85cc 100%); }
@keyframes insp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes insp-pop {
0% { opacity: 0; transform: scale(0.86) rotateX(16deg); }
100% { opacity: 1; transform: none; }
}
/* Stats (só monstros): ATK/DEF em destaque + estrelas de nível / atributo. */
/* Stats EMPILHADOS à direita da carta: [ícone/rótulo] … [valor à direita]. */
#insp-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Chanfrada como o resto da interface (borda = fundo, ::before = preenchimento);
a mesma linha serve ao inspetor do duelo, à loja e ao montador. */
.insp-stat {
position: relative; isolation: isolate;
display: flex; align-items: center; gap: 7px; min-width: 0;
clip-path: var(--cut-xs); background: rgba(150, 160, 175, 0.22); padding: 5px 9px;
}
.insp-stat::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-xs);
background: rgba(8, 13, 22, 0.72);
}
.insp-stat-ic { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.insp-stat-k { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--steel); flex: 0 0 auto; }
.insp-stat-v {
margin-left: auto; min-width: 0; font-size: 14px; font-weight: 800; color: #eaf3ff;
font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nome + tipo (tipo colorido pela natureza da carta). */
#insp-head { display: flex; flex-direction: column; gap: 1px; }
#insp-name { font-weight: 800; color: var(--accent-bright); font-size: 15px; line-height: 1.22; }
#insp-type { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); }
#insp-head.kind-monster #insp-type { color: #ffd9a8; }
#insp-head.kind-spell #insp-type { color: #a8f0d8; }
#insp-head.kind-trap #insp-type { color: #f3c2e4; }
/* Abas quando a carta tem mais de um efeito (segmentos ●) */
#insp-tabs { display: flex; gap: 4px; }
#insp-tabs button {
position: relative; flex: 1; font-size: 10px; font-weight: 800; padding: 4px 8px;
color: var(--steel); background: rgba(110, 140, 180, 0.4);
border: none; clip-path: var(--slant); transition: color 0.15s; cursor: pointer;
}
#insp-tabs button::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--slant);
background: rgba(20, 27, 40, 0.95); transition: background 0.15s;
}
#insp-tabs button.on { color: var(--abyss); background: var(--accent); }
#insp-tabs button.on::before { background: var(--accent); }
/* Descrição do efeito: fundo mais ESCURO, scrollável (efeitos podem ser longos). */
#insp-text {
flex: 1; min-height: 46px; overflow-y: auto; font-size: 11px; line-height: 1.6;
color: #d5dde5; white-space: pre-wrap;
background: var(--fill-inset); border: 1px solid var(--hair); border-radius: 7px; padding: 9px 11px;
}
#insp-text:empty { display: none; }
#log-panel {
flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0;
padding: calc(12px + var(--avatar-cut)) 12px 12px; margin-top: calc(-1 * var(--avatar-cut));
border-left: 1px solid var(--seam);
border-right: 1px solid var(--seam);
/* Oponente: topo recortado na diagonal ESPELHADA ("/") p/ casar com a barra dele. */
clip-path: polygon(0 var(--avatar-cut), 100% 0, 100% 100%, 0 100%);
}
.side-label {
display: flex; align-items: center; gap: 7px;
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--steel);
}
.side-label i { font-size: 15px; color: var(--accent-bright); }
/* ── REGISTRO DO DUELO: linha do tempo ─────────────────────────────────────
Uma trilha vertical (fio + ponto por lance) com capítulos por TURNO, um
marcador fino por fase e, em cada lance, quem fez · o que fez · a miniatura
das cartas envolvidas. A miniatura é a peça-chave: "Destruído por efeito"
não diz nada, "Mirror Force destruiu estes três monstros" diz tudo — e ela
ainda serve de atalho (hover = prévia, clique = inspetor).
As cores do ícone contam a FAMÍLIA do lance (invocação, ataque, destruição,
magia…); o anel dele conta de QUEM foi (azul você, vermelho o inimigo). */
#duel-log {
flex: 1; min-height: 60px; overflow-y: auto;
background: var(--fill-inset); border: 1px solid var(--hair); border-radius: 4px;
padding: 6px 6px 10px; color: #b9c7d6;
display: flex; flex-direction: column;
scrollbar-gutter: stable;
}
#duel-log:empty::before {
content: attr(data-empty); display: block; margin: auto; padding: 20px 12px; text-align: center;
font-size: 11.5px; font-weight: 600; line-height: 1.7; color: rgba(150, 175, 205, 0.4);
}
/* Capítulo: começa um turno. Quebra a trilha de propósito — é o respiro que
deixa o registro navegável em vez de virar uma fita sem fim. */
.tl-turn {
display: flex; align-items: center; gap: 8px; flex: none;
margin: 12px 2px 7px; padding: 6px 10px; clip-path: var(--cut-xs);
background: linear-gradient(90deg, rgba(120, 175, 255, 0.22), rgba(120, 175, 255, 0.03) 78%, transparent);
}
.tl-turn:first-child { margin-top: 2px; }
.tl-turn[data-side="opp"] {
background: linear-gradient(90deg, rgba(255, 120, 105, 0.22), rgba(255, 120, 105, 0.03) 78%, transparent);
}
.tl-turn-n {
font-size: 9.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #dbe9fa;
}
.tl-turn-who {
margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11px; font-weight: 800; color: var(--accent-bright);
}
.tl-turn[data-side="opp"] .tl-turn-who { color: #ffb0a2; }
/* Marcador de fase: fino, sem peso — está ali para situar, não para ser lido. */
.tl-phase {
position: relative; flex: none;
display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 6px; align-items: center;
padding: 3px 8px 3px 4px;
}
.tl-phase span {
grid-column: 2;
font-size: 9px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(159, 180, 200, 0.5);
}
/* Lance. Grade [trilha/ícone · corpo · selo] — o selo (delta de LP, nº do elo)
fica ancorado à direita e não empurra o texto. */
.tl-row {
position: relative; flex: none;
display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 6px;
align-items: start; padding: 4px 8px 4px 4px;
transition: background 0.12s;
}
.tl-row:hover { background: rgba(255, 255, 255, 0.035); }
/* O fio da trilha: um pedaço por linha, colados formam a vertical contínua. */
.tl-row::before, .tl-phase::before {
content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px;
background: rgba(140, 165, 200, 0.20);
}
/* Traço curto ligando a fase à trilha. */
.tl-phase::after {
content: ''; position: absolute; left: 12px; top: 50%; width: 8px; height: 1px;
background: rgba(140, 165, 200, 0.3);
}
.tl-ico {
--ring: rgba(140, 165, 200, 0.16);
position: relative; z-index: 1; justify-self: center; margin-top: 1px;
width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%;
font-size: 12px; line-height: 1; color: var(--steel);
background: #0a0f18; /* tapa o fio da trilha atrás do ponto */
box-shadow: 0 0 0 1px var(--ring);
}
/* De QUEM foi o lance: o anel do ponto (azul você, vermelho o inimigo). */
.tl-row[data-side="me"] .tl-ico { --ring: rgba(110, 170, 255, 0.40); }
.tl-row[data-side="opp"] .tl-ico { --ring: rgba(255, 120, 105, 0.40); }
/* FAMÍLIA do lance: a cor do ícone. */
.tl-row.t-summon .tl-ico { color: #93e3b3; }
.tl-row.t-attack .tl-ico { color: #ffb689; }
.tl-row.t-destroy .tl-ico { color: #ff8f7d; }
.tl-row.t-spell .tl-ico { color: #8ecdff; }
.tl-row.t-draw .tl-ico { color: #c4b2ff; }
.tl-row.t-grave .tl-ico { color: #9aa8bc; }
.tl-row.t-banish .tl-ico { color: #d9a6ff; }
.tl-row.t-life .tl-ico { color: #ffd28a; }
.tl-row.t-system .tl-ico { color: var(--gold); }
.tl-body { grid-column: 2; min-width: 0; }
.tl-text { font-size: 11.5px; line-height: 1.45; color: #c6d3e1; overflow-wrap: anywhere; }
.tl-row.t-system .tl-text { color: #d9caa4; }
.tl-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.tl-mini {
position: relative; display: block; flex: none; width: 27px; aspect-ratio: 59 / 86;
border-radius: 3px; overflow: hidden;
box-shadow: 0 0 0 1px rgba(150, 180, 215, 0.22), 0 3px 8px -3px rgba(0, 0, 0, 0.8);
transition: transform 0.14s ease-out, box-shadow 0.14s;
}
.tl-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-mini:hover {
transform: scale(1.16) translateY(-1px); z-index: 2;
box-shadow: 0 0 0 1px rgba(142, 199, 255, 0.75), 0 7px 16px -4px rgba(0, 0, 0, 0.9);
}
.tl-more { font-size: 10px; font-weight: 800; color: var(--steel); padding-left: 1px; }
.tl-badge {
grid-column: 3; align-self: start; margin-top: 2px; white-space: nowrap;
font-size: 10px; font-weight: 900; padding: 2px 6px; clip-path: var(--cut-xs);
font-variant-numeric: tabular-nums;
}
.tl-badge.b-up { color: #bdf5d4; background: rgba(94, 255, 156, 0.16); }
.tl-badge.b-down { color: #ffc9c0; background: rgba(255, 92, 73, 0.22); }
.tl-badge.b-flat { color: var(--steel); background: rgba(150, 175, 210, 0.14); }
/* Entrada suave só do que ACABOU de chegar (o registro é acrescido, nunca
repintado — por isso as linhas antigas não reanimam a cada lance). */
.tl-row, .tl-turn, .tl-phase { animation: tl-in 0.26s ease-out; }
@keyframes tl-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
.tl-row, .tl-turn, .tl-phase { animation: none; }
}
/* (scrollbar: o desenho global no topo do arquivo cobre o log e o inspetor) */
#btn-surrender {
position: relative; border: none; clip-path: var(--cut-sm);
background: rgba(153, 27, 27, 0.65);
color: #fca5a5; font-size: 12.5px; font-weight: 700; padding: 9px;
}
#btn-surrender::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-sm);
background-color: rgba(40, 7, 7, 0.9); transition: background 0.15s;
}
#btn-surrender:hover::before {
background-image: linear-gradient(rgba(180, 40, 40, 0.35), rgba(180, 40, 40, 0.35));
}
/* ── Coluna direita: duelistas (oponente em cima, jogador embaixo) ─────── */
#duel-right {
position: relative;
width: clamp(224px, calc((100vw - 1120px) / 2), 336px); flex-shrink: 0;
display: flex; flex-direction: column; min-height: 0;
border: none; clip-path: var(--cut-md); overflow: hidden;
background: var(--edge);
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
#duel-right::before {
content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-md);
background: var(--fill-panel); pointer-events: none;
}
/* Área do AVATAR: base cortada na DIAGONAL ("\") — as partículas/fundo terminam
nesse corte. A barra de vida (.lp-zone, logo abaixo) encaixa a inclinação do
topo dela nessa MESMA linha (via --avatar-cut). Mantém fundo tingido + aura +
bordas laterais. Padding-bottom folgado p/ o nome caber ACIMA do corte. */
.duelist {
flex: 0 0 auto; position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 5px; padding: 8px 12px calc(var(--avatar-cut) + 6px);
border-left: 1px solid var(--seam);
border-right: 1px solid var(--seam);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--avatar-cut)));
}
/* Linha-costura NA diagonal da base do avatar: define o corte e casa com o topo
da barra logo abaixo (mesma inclinação, --avatar-cut). O clip do próprio
.duelist deixa aparecer só o ~1px em cima da linha. */
.duelist::after {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: var(--seam);
clip-path: polygon(
0 calc(100% - var(--avatar-cut) - 1.2px),
100% calc(100% - 1.2px),
100% 100%,
0 calc(100% - var(--avatar-cut))
);
}
/* Oponente: avatar espelhado ("/", corte alto na DIREITA) + linha-costura idem. */
.duelist.opp {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--avatar-cut)), 0 100%);
}
.duelist.opp::after {
clip-path: polygon(
0 calc(100% - 1.2px),
100% calc(100% - var(--avatar-cut) - 1.2px),
100% calc(100% - var(--avatar-cut)),
0 100%
);
}
/* Nome + #action: sentam ACIMA da diagonal, no lado INICIAL/alto da barra (esq no
jogador), INCLINADOS acompanhando o caimento da LP bar (--lp-rot herdado do
painel). #action pequeno em cima, nome (CAPS) embaixo. */
.lp-names {
position: absolute; z-index: 1; pointer-events: none;
display: flex; flex-direction: column; gap: 0;
left: 15px; bottom: calc(var(--avatar-cut) + 7px);
align-items: flex-start;
transform: rotate(var(--lp-rot, 0deg)); transform-origin: left bottom;
}
/* Oponente espelhado: o lado alto é a DIREITA. */
.duelist.opp .lp-names {
left: auto; right: 15px;
align-items: flex-end;
transform-origin: right bottom;
}
/* Área do duelista: PRETO translúcido, o mesmo dos painéis — sem tingimento
por lado. Você azul / inimigo vermelho competia com a nebulosa e com as
cores das cartas, e a informação que ele dava (de quem é este lado) já vem
do nome, da barra de vida e do lado da tela em que a placa está. O vermelho
volta, e aí sim significando algo, quando o duelista TOMA DANO. */
.duelist.me, .duelist.opp {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 70%),
rgba(6, 9, 15, 0.72);
}
/* Jogador (coluna esquerda) espelhado: os dois se encaram através do board.
`scale` individual compõe com o transform do frame-pop sem conflito. */
#plate-me .avatar-slot video { scale: -1 1; }
/* Aura SEMPRE ligada e NEUTRA nos dois lados (a aura é o radial do ::before
do slot, que desvanece antes das bordas). */
.duelist.me, .duelist.opp { box-shadow: inset 0 0 46px -16px rgba(220, 232, 248, 0.16); }
.duelist.me .avatar-slot::before,
.duelist.opp .avatar-slot::before { --aura: rgba(220, 232, 248, 0.1); }
/* Carta SELECIONADA (última clicada): borda branca para não se perder. */
/* ── Contorno de ESTADO na carta do board ──────────────────────────────────
A MESMA peça da mão: um retângulo de 2px colado na carta, cantos retos, com
um fio de brilho e mais nada. Antes cada estado tingia a borda da arte e
somava um halo de 12–22px — três ou quatro cartas acesas ao mesmo tempo e o
board virava uma sopa de luz, sem dizer qual estado era qual.
Uma regra só desenha o contorno; cada estado só escolhe a COR (`--edge-on`).
A ordem abaixo é a de prioridade: quem vem depois ganha quando dois estados
caem na mesma carta. */
.bcard.pickable { --edge-on: rgba(142, 199, 255, 0.95); }
.bcard.activatable { --edge-on: rgba(255, 215, 94, 0.95); }
.bcard.selected { --edge-on: rgba(255, 255, 255, 0.95); }
.bcard.attacker-sel { --edge-on: rgba(142, 199, 255, 0.95); }
.bcard.attacking,
.bcard.targetable,
.bcard.battle-target { --edge-on: rgba(255, 92, 73, 0.95); }
.bcard.pick-sel { --edge-on: #37d17f; }
.bcard.pickable::after, .bcard.activatable::after, .bcard.selected::after,
.bcard.attacker-sel::after, .bcard.attacking::after,
.bcard.targetable::after, .bcard.battle-target::after, .bcard.pick-sel::after {
content: ''; position: absolute; inset: -1px; border-radius: 0; z-index: 6;
pointer-events: none;
border: 2px solid var(--edge-on, transparent);
box-shadow: 0 0 3px var(--edge-on, transparent);
}
/* Só o ALVO de ataque pulsa: ali o contorno não está informando, está
convidando o clique. */
.bcard.targetable::after, .bcard.battle-target::after { animation: target-pulse 0.9s infinite; }
.hcard.selected img {
border: 2px solid #fff;
box-shadow: 0 0 14px rgba(255, 255, 255, 0.5), 0 8px 22px -6px rgba(0, 0, 0, 0.85);
}
/* ── Seleção de alvo DIRETO no board (pickers de cartas do campo) ────────
Candidatas acendem em azul, selecionadas ficam verdes, o resto apaga. */
/* Selecionada (alvo de efeito / sacrifício): borda verde NÍTIDA (como a da mão)
+ uma setinha que sobe e desce apontando pra carta. */
.bcard.pick-sel::before {
content: ''; position: absolute; left: 50%; top: -20px; width: 18px; height: 18px; z-index: 7;
transform: translateX(-50%); pointer-events: none;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
animation: pick-bob 0.9s ease-in-out infinite;
}
.bcard.def.pick-sel::before { display: none; } /* carta em defesa gira 90° — sem a seta */
@keyframes pick-bob { 0%, 100% { top: -20px; } 50% { top: -13px; } }
.bcard.pick-dim { opacity: 0.4; pointer-events: none; }
/* Barra flutuante do picker de board: título + confirmar/cancelar. */
#pick-bar {
position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 14;
display: flex; align-items: center; gap: 10px;
background: rgba(120, 180, 255, 0.5); clip-path: var(--cut-sm);
padding: 1px; /* anel */
}
#pick-bar .pick-inner {
display: flex; align-items: center; gap: 10px;
background: rgba(8, 13, 22, 0.96); clip-path: var(--cut-sm); padding: 8px 14px;
}
#pick-info { font-size: 12.5px; font-weight: 700; color: #dbe9fa; white-space: nowrap; }
#pick-bar button {
border: none; clip-path: var(--cut-sm); font-size: 11.5px; font-weight: 800;
padding: 7px 14px; white-space: nowrap;
}
#pick-confirm { color: #06131c; background: linear-gradient(180deg, #57d68d, #23a45c); }
#pick-confirm:hover { filter: brightness(1.1); }
#pick-confirm:disabled { filter: grayscale(0.8) brightness(0.75); opacity: 0.6; }
#pick-cancel { color: #cbd5e1; background: rgba(255, 255, 255, 0.1); }
#pick-cancel:hover { background: rgba(255, 255, 255, 0.18); }
/* Retrato do duelista: só o PNG, sem moldura — os frames trocam com as ações
do duelo (idle/draw_01/draw_02/damage/set). */
.avatar-slot {
/* Referência de posição/tamanho do avatar. O modelo Live2D é renderizado no
overlay #avatar-stage e recortado sobre ESTE rect (com fade-out na base
feito pela máscara do Pixi). Aqui só vive a aura (::before). */
width: 100%; height: clamp(168px, 24vh, 226px);
position: relative; overflow: hidden;
}
/* Fundo animado da placa (canvas 2D): cobre a placa INTEIRA — borda a borda,
incluindo o padding — ATRÁS do conteúdo. O conteúdo (avatar-slot, nome,
action) fica por cima (z-index 1); o personagem Live2D vem no overlay Pixi. */
/* width/height 100% OBRIGATÓRIOS: