/* ═══════════════════════════════════════════════════════════════════
   REMASTER v3 — "Guerra das Rosas"
   Tema gráfico AAA do duelo: pedra, ferro forjado, heráldica e névoa.
   Tudo escopado em .gfx-v3 (classe aplicada no root da tela de duelo).
   Carrega DEPOIS de duel.css — empates de especificidade caem pra cá.
   Norte visual: comp "Arena de Pedra" + selo de cera/luz de vela.
   ═══════════════════════════════════════════════════════════════════ */

.gfx-v3 {
  /* pedra ardósia fria */
  --v3-stone-900: oklch(0.16 0.012 265);
  --v3-stone-700: oklch(0.22 0.014 265);
  --v3-stone-500: oklch(0.30 0.015 265);
  /* ferro */
  --v3-iron: oklch(0.38 0.012 260);
  --v3-iron-light: oklch(0.55 0.015 255);
  /* carmesim Lancaster (player) */
  --v3-crimson: oklch(0.45 0.16 25);
  --v3-crimson-bright: oklch(0.55 0.19 27);
  --v3-crimson-deep: oklch(0.30 0.12 22);
  /* prata York (inimigo) */
  --v3-silver: oklch(0.80 0.015 250);
  --v3-silver-dim: oklch(0.58 0.012 252);
  /* ouro envelhecido */
  --v3-gold: oklch(0.72 0.12 85);
  --v3-gold-dim: oklch(0.50 0.09 80);
  /* highlights táticos */
  --v3-rune-green: oklch(0.72 0.14 150);
  --v3-ember-red: oklch(0.58 0.20 27);
  --v3-ritual-gold: oklch(0.78 0.13 88);
  --v3-arcane-violet: oklch(0.65 0.15 300);
}

/* ── Cena: vinheta cinematográfica + vitral + god rays ─────────────── */
/* Pseudo do root pinta primeiro (ordem do documento) e fica abaixo de
   tudo que é posicionado/transformado. status-row/hand ganham
   position:relative mais abaixo justamente pra subirem deste plano. */
.gfx-v3 { position: relative; }
.gfx-v3::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* god rays — feixes diagonais quase imperceptíveis */
    linear-gradient(112deg,
      transparent 30%, oklch(0.85 0.03 95 / .035) 34%, transparent 39%,
      transparent 52%, oklch(0.85 0.03 95 / .025) 56%, transparent 60%),
    /* vitral: brasa carmesim à esquerda, aço lunar à direita */
    radial-gradient(46% 38% at 16% 0%, oklch(0.40 0.13 22 / .16), transparent 70%),
    radial-gradient(46% 38% at 84% 0%, oklch(0.45 0.05 255 / .14), transparent 70%),
    /* rosácea fantasma no topo central */
    repeating-conic-gradient(from 0deg at 50% -12%,
      oklch(0.55 0.06 25 / .045) 0deg 12deg, transparent 12deg 24deg),
    /* vinheta de bordas */
    radial-gradient(120% 95% at 50% 42%, transparent 58%, oklch(0.08 0.01 265 / .55) 100%);
}

/* ── Arena: o tabuleiro como mesa de pedra ─────────────────────────── */
.gfx-v3 .board {
  background:
    radial-gradient(80% 70% at 50% 30%, oklch(0.20 0.014 262), transparent 75%),
    linear-gradient(155deg, var(--v3-stone-700), var(--v3-stone-900) 60%);
  /* banda de pedra + aro de ferro + fio de ouro */
  border: 10px solid oklch(0.19 0.013 263);
  border-radius: 6px;
  box-shadow:
    0 0 0 2px var(--v3-iron),
    0 0 0 3px oklch(0.10 0.01 265),
    0 0 0 4px oklch(0.62 0.09 85 / .4),
    0 36px 80px oklch(0.05 0.01 265 / .8),
    0 0 70px oklch(0.35 0.10 22 / .14),
    inset 0 2px 0 oklch(0.85 0.02 255 / .07),
    inset 0 0 46px oklch(0.06 0.01 265 / .6);
}

/* Moldura de filigrana — cantos SVG dentro do plano 3D do board */
.gfx-v3 .v3-board-frame {
  position: absolute; inset: -10px;
  pointer-events: none;
  z-index: 4;
}
.gfx-v3 .v3-corner {
  position: absolute;
  width: 64px; height: 64px;
  color: var(--v3-gold);
  filter: drop-shadow(0 1px 2px oklch(0.05 0.01 265 / .9));
  opacity: .92;
}
.gfx-v3 .v3-corner-tl { top: -7px; left: -7px; }
.gfx-v3 .v3-corner-tr { top: -7px; right: -7px; transform: scaleX(-1); }
.gfx-v3 .v3-corner-bl { bottom: -7px; left: -7px; transform: scaleY(-1); }
.gfx-v3 .v3-corner-br { bottom: -7px; right: -7px; transform: rotate(180deg); }

/* ── Células: lajes esculpidas ─────────────────────────────────────── */
.gfx-v3 .cell {
  border: 1px solid oklch(0.10 0.012 265 / .9);
  border-radius: 2px;
  /* bisel: luz no topo, peso embaixo, sulcos laterais */
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .08),
    inset 0 -2px 4px oklch(0.05 0.01 265 / .5),
    inset 2px 0 3px oklch(0.05 0.01 265 / .2),
    inset -2px 0 3px oklch(0.05 0.01 265 / .2);
}
.gfx-v3 .cell.dark:not([class*="terrain-"]) {
  background: linear-gradient(140deg, oklch(0.20 0.014 264), oklch(0.165 0.013 266));
}
.gfx-v3 .cell.light:not([class*="terrain-"]) {
  background: linear-gradient(140deg, oklch(0.235 0.015 263), oklch(0.19 0.014 265));
}

/* Grading dos terrenos: mantém a foto, assenta a laje no chão */
.gfx-v3 .cell[class*="terrain-"]::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
  background:
    linear-gradient(180deg, oklch(0.80 0.02 255 / .06) 0%, transparent 22%),
    linear-gradient(180deg, transparent 55%, oklch(0.07 0.012 265 / .42) 100%);
  box-shadow: inset 0 0 14px oklch(0.06 0.01 265 / .35);
}
/* Muralha intransponível: pedra mais pesada, sem dúvida de leitura */
.gfx-v3 .cell.terrain-wall::before {
  background:
    linear-gradient(180deg, oklch(0.75 0.02 255 / .07) 0%, transparent 20%),
    linear-gradient(180deg, oklch(0.10 0.012 265 / .25) 0%, oklch(0.06 0.012 265 / .55) 100%);
  box-shadow:
    inset 0 0 0 2px oklch(0.40 0.012 260 / .55),
    inset 0 0 18px oklch(0.05 0.01 265 / .6);
}
.gfx-v3 .cell:hover {
  box-shadow:
    inset 0 0 0 1px oklch(0.72 0.12 85 / .45),
    inset 0 1px 0 oklch(0.85 0.02 255 / .08),
    inset 0 -2px 4px oklch(0.05 0.01 265 / .5);
}

/* ── Peças: molduras forjadas ──────────────────────────────────────── */
.gfx-v3 .card-token.player {
  background: linear-gradient(180deg, oklch(0.34 0.11 24), oklch(0.21 0.08 22) 55%, oklch(0.15 0.05 20));
  border-color: var(--v3-crimson);
  box-shadow:
    inset 0 0 0 1px oklch(0.72 0.12 85 / .5),
    0 3px 10px oklch(0.05 0.01 265 / .65),
    0 0 12px oklch(0.45 0.16 25 / .3);
}
.gfx-v3 .card-token.enemy {
  background: linear-gradient(180deg, oklch(0.40 0.015 252), oklch(0.26 0.013 254) 55%, oklch(0.18 0.012 256));
  border-color: var(--v3-silver-dim);
  box-shadow:
    inset 0 0 0 1px oklch(0.88 0.012 250 / .45),
    0 3px 10px oklch(0.05 0.01 265 / .65),
    0 0 12px oklch(0.70 0.02 250 / .22);
}
.gfx-v3 .card-token.leader.player {
  border-color: var(--v3-gold);
  box-shadow:
    inset 0 0 0 1px oklch(0.78 0.13 88 / .65),
    0 4px 14px oklch(0.05 0.01 265 / .7),
    0 0 18px oklch(0.72 0.12 85 / .4),
    0 0 5px oklch(0.72 0.12 85 / .35);
}
.gfx-v3 .card-token.leader.enemy {
  border-color: var(--v3-silver);
  box-shadow:
    inset 0 0 0 1px oklch(0.90 0.012 250 / .6),
    0 4px 14px oklch(0.05 0.01 265 / .7),
    0 0 18px oklch(0.80 0.015 250 / .35);
}
/* Sombra de contato mais firme (a peça pisa na laje) */
.gfx-v3 .card-3d-wrapper::after {
  background: oklch(0.05 0.01 265 / .5);
  filter: blur(5px);
  inset: 3px 2px 0 2px;
}
/* Nome/estatísticas com voz de gravação */
.gfx-v3 .card-token .card-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: .02em;
}

/* ── Feedback tático: runas, brasas e círculos rituais ─────────────── */
/* Forma + cor: cada intenção tem um glifo próprio, legível sobre
   qualquer terreno. Ícones só em ::after (o ::before é do grading). */

/* MOVER — runa esmeralda gravada no chão (células vazias) */
.gfx-v3 .cell.highlight-move {
  box-shadow:
    inset 0 0 0 2px oklch(0.72 0.14 150 / .6),
    inset 0 0 16px oklch(0.60 0.13 150 / .25);
}
.gfx-v3 .cell.highlight-move::after {
  content: '◆';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 5;
  color: oklch(0.80 0.13 150 / .85);
  font-size: .85rem;
  text-shadow: 0 0 8px oklch(0.65 0.14 150 / .9);
  animation: v3RunePulse 1.7s ease-out infinite;
}

/* ATACAR — brasas carmesim + espadas no canto (célula tem peça inimiga) */
.gfx-v3 .cell.highlight-attack {
  box-shadow:
    inset 0 0 0 2px oklch(0.58 0.20 27 / .7),
    inset 0 0 18px oklch(0.50 0.19 26 / .3);
  animation: v3EmberBreath 1.4s ease-in-out infinite;
}
.gfx-v3 .cell.highlight-attack::after {
  content: '⚔';
  position: absolute; top: 2px; right: 3px;
  pointer-events: none;
  z-index: 230; /* acima da carta alvo */
  color: oklch(0.85 0.08 25);
  font-size: .68rem;
  text-shadow: 0 0 6px oklch(0.58 0.20 27), 0 1px 2px oklch(0.05 0.01 265);
  animation: v3RunePulse 1.1s ease-out infinite;
}

/* INVOCAR — círculo ritual dourado girando devagar (células vazias) */
.gfx-v3 .cell.highlight-summon {
  box-shadow:
    inset 0 0 0 2px oklch(0.78 0.13 88 / .55),
    inset 0 0 16px oklch(0.70 0.12 86 / .25);
}
.gfx-v3 .cell.highlight-summon::after {
  content: '';
  position: absolute; inset: 16%;
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
  border: 1.5px solid oklch(0.78 0.13 88 / .8);
  outline: 1px dashed oklch(0.78 0.13 88 / .4);
  outline-offset: 3px;
  box-shadow: 0 0 10px oklch(0.72 0.12 85 / .5), inset 0 0 8px oklch(0.72 0.12 85 / .3);
  animation: v3RitualSpin 7s linear infinite;
}

/* ALVO DE MAGIA — sigilo arcano violeta */
.gfx-v3 .cell.highlight-spell-target {
  box-shadow:
    inset 0 0 0 2px oklch(0.65 0.15 300 / .65),
    inset 0 0 18px oklch(0.55 0.14 300 / .3);
}
.gfx-v3 .cell.highlight-spell-target::after {
  content: '◎';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 230;
  color: oklch(0.78 0.13 300 / .9);
  font-size: .9rem;
  text-shadow: 0 0 9px oklch(0.65 0.15 300 / .9);
  animation: v3RunePulse 1.5s ease-out infinite;
}

/* SELECIONADO — aro de ouro vivo na peça */
.gfx-v3 .card-token.selected {
  border-color: oklch(0.80 0.13 88);
  box-shadow:
    inset 0 0 0 1px oklch(0.85 0.13 90 / .8),
    0 0 0 2px oklch(0.78 0.13 88 / .65),
    0 0 18px oklch(0.75 0.13 87 / .55),
    0 4px 14px oklch(0.05 0.01 265 / .7);
  animation: v3SelectedBreath 1.6s ease-in-out infinite;
}
/* Cursor de câmera (modo PS2/gamepad) — mira de ferro e ouro */
.gfx-v3 .cell.camera-cursor {
  box-shadow:
    inset 0 0 0 2px oklch(0.72 0.12 85 / .85),
    inset 0 0 0 4px oklch(0.10 0.01 265 / .6),
    inset 0 0 20px oklch(0.72 0.12 85 / .2);
}

@keyframes v3RunePulse {
  0%   { opacity: .55; transform: scale(.96); }
  55%  { opacity: 1;   transform: scale(1.03); }
  100% { opacity: .55; transform: scale(.96); }
}
@keyframes v3EmberBreath {
  0%, 100% { box-shadow: inset 0 0 0 2px oklch(0.58 0.20 27 / .7), inset 0 0 14px oklch(0.50 0.19 26 / .25); }
  50%      { box-shadow: inset 0 0 0 2px oklch(0.64 0.21 28 / .85), inset 0 0 24px oklch(0.52 0.20 26 / .4); }
}
@keyframes v3RitualSpin {
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}
@keyframes v3SelectedBreath {
  0%, 100% { box-shadow: inset 0 0 0 1px oklch(0.85 0.13 90 / .8), 0 0 0 2px oklch(0.78 0.13 88 / .65), 0 0 14px oklch(0.75 0.13 87 / .45), 0 4px 14px oklch(0.05 0.01 265 / .7); }
  50%      { box-shadow: inset 0 0 0 1px oklch(0.88 0.13 90 / .95), 0 0 0 2px oklch(0.80 0.13 88 / .85), 0 0 24px oklch(0.76 0.13 87 / .7), 0 4px 14px oklch(0.05 0.01 265 / .7); }
}

/* ── HUD: placas heráldicas ────────────────────────────────────────── */
/* position só fora do modo imersivo — lá o status-row/hand-area são
   fixed (duel.css) e mesma especificidade aqui venceria pela ordem. */
.gfx-v3:not(.ps2-immersive) .status-row { position: relative; z-index: 2; }

/* Painéis de facção: dark-glass angular com chanfros assimétricos e
   linha de facção na borda externa. Moderno: sem ornamento, hierarquia
   por tipografia (números em Plex Mono) e pela barra de LP. */
.gfx-v3 .player-info {
  background: linear-gradient(180deg, oklch(0.21 0.012 262 / .94), oklch(0.13 0.012 266 / .97));
  border: 1px solid oklch(0.42 0.015 258 / .45);
  border-radius: 2px;
  padding: 6px 14px 7px 32px;
  position: relative;
  box-shadow: none;
}
/* chanfros: corte no canto superior externo + inferior interno */
.gfx-v3 .player-info.red {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.gfx-v3 .player-info.white {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* identidade de facção: tinta de fundo vinda do lado externo + borda
   completa tonalizada (a rosa heráldica é o ícone-guia do painel) */
.gfx-v3 .player-info.red {
  border-color: oklch(0.45 0.13 25 / .55);
  background:
    linear-gradient(100deg, oklch(0.34 0.10 24 / .35), transparent 46%),
    linear-gradient(180deg, oklch(0.21 0.012 262 / .94), oklch(0.13 0.012 266 / .97));
}
.gfx-v3 .player-info.white {
  border-color: oklch(0.62 0.012 252 / .5);
  background:
    linear-gradient(260deg, oklch(0.55 0.015 252 / .25), transparent 46%),
    linear-gradient(180deg, oklch(0.21 0.012 262 / .94), oklch(0.13 0.012 266 / .97));
}
/* brasão: rosa heráldica em SVG (Lancaster / York) */
.gfx-v3 .player-info::before {
  content: '';
  position: absolute; left: 7px; top: 50%;
  width: 17px; height: 17px;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px oklch(0.05 0.01 265 / .8));
}
.gfx-v3 .player-info.red::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23b32638'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='30.5' cy='16.6' r='8'/%3E%3Ccircle cx='26.5' cy='29' r='8'/%3E%3Ccircle cx='13.5' cy='29' r='8'/%3E%3Ccircle cx='9.5' cy='16.6' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='7.2' fill='%23711423'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23dfb14d'/%3E%3C/svg%3E");
}
.gfx-v3 .player-info.white::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23dce3f0'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='30.5' cy='16.6' r='8'/%3E%3Ccircle cx='26.5' cy='29' r='8'/%3E%3Ccircle cx='13.5' cy='29' r='8'/%3E%3Ccircle cx='9.5' cy='16.6' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='7.2' fill='%239aa6bd'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23dfb14d'/%3E%3C/svg%3E");
}
/* Avatar sem foto: monograma em ouro sobre ferro (nada de azul) */
.gfx-v3 .player-hud-avatar-initials {
  background: linear-gradient(170deg, oklch(0.30 0.015 262), oklch(0.19 0.014 265));
  color: var(--v3-gold);
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 900;
  border: 1px solid oklch(0.48 0.015 256 / .6);
  border-radius: 4px;
  box-shadow: inset 0 -4px 8px oklch(0.05 0.01 265 / .4);
}
.gfx-v3 .player-hud-avatar {
  border: 1px solid oklch(0.48 0.015 256 / .6);
  border-radius: 4px;
}

/* Tipografia: nome limpo, vitais em mono tabular */
.gfx-v3 .player-info .name {
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .02em;
  color: oklch(0.93 0.01 255);
}
.gfx-v3 .player-info .stat {
  color: oklch(0.62 0.015 258);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gfx-v3 .player-info .stat b {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 600;
  font-size: .8rem;
  color: oklch(0.88 0.09 85);
}

/* Barra de LP — leitura instantânea de quem está na frente */
.gfx-v3 .v3-lp-track {
  width: 100%;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: oklch(0.30 0.015 262 / .7);
  overflow: hidden;
}
.gfx-v3 .v3-lp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.gfx-v3 .player-info.red .v3-lp-fill {
  background: linear-gradient(90deg, oklch(0.50 0.17 25), oklch(0.66 0.18 35));
}
.gfx-v3 .player-info.white .v3-lp-fill {
  background: linear-gradient(90deg, oklch(0.60 0.012 252), oklch(0.84 0.015 250));
}

/* turno ativo: o painel acende por dentro (clip-path corta glow externo) */
.gfx-v3 .player-info.red.turn-active {
  border-color: oklch(0.58 0.17 26 / .8);
  box-shadow: inset 0 0 24px oklch(0.45 0.16 25 / .25);
}
.gfx-v3 .player-info.white.turn-active {
  border-color: oklch(0.80 0.015 250 / .7);
  box-shadow: inset 0 0 24px oklch(0.70 0.02 250 / .2);
}

/* ── Medalhão de turno: hexágono moderno ───────────────────────────── */
.gfx-v3 .turn-badge {
  position: relative;
  width: 86px; height: 52px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
/* hexágono nos pseudos (clip-path no elemento cortaria o chip de
   status pendurado abaixo): ::before = aro de ouro, ::after = fundo */
.gfx-v3 .turn-badge::before {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
  background: linear-gradient(180deg, oklch(0.68 0.11 85 / .85), oklch(0.45 0.08 80 / .85));
  z-index: 0;
}
.gfx-v3 .turn-badge::after {
  content: '';
  position: absolute; inset: 1px;
  clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
  background: linear-gradient(180deg, oklch(0.20 0.012 262 / .97), oklch(0.13 0.012 266));
  z-index: 0;
}
.gfx-v3 .turn-badge > * { position: relative; z-index: 1; }
.gfx-v3 .turn-badge > div:first-child {
  font-size: .4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: oklch(0.60 0.04 85);
}
.gfx-v3 .turn-badge .turn-num {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.05;
  color: oklch(0.90 0.10 85);
}
/* "Sua vez / Inimigo": chip de status com indicador pulsante */
.gfx-v3 .turn-badge > div:last-child {
  position: absolute;
  bottom: -15px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  background: oklch(0.15 0.012 265 / .95);
  border: 1px solid oklch(0.40 0.015 258 / .6);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .48rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 2;
}
.gfx-v3 .turn-badge > div:last-child::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: v3StatusPulse 2s ease-in-out infinite;
}
@keyframes v3StatusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ── Relíquias do Milênio (rail) ───────────────────────────────────── */
.gfx-v3 .v3-relic-rail {
  position: relative;
  z-index: 5;
  width: fit-content;
  margin: 3px auto 0;
}
/* No modo imersivo o status-row é fixed no topo; o rail pendura logo abaixo */
.gfx-v3.ps2-immersive .v3-relic-rail {
  position: fixed;
  top: 54px; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 210;
}
.gfx-v3 .v3-relic-toggle {
  display: flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, oklch(0.23 0.014 262), oklch(0.16 0.013 265));
  border: 1px solid var(--v3-gold-dim);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  color: var(--v3-gold);
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .08),
    0 2px 8px oklch(0.05 0.01 265 / .5);
  font-size: .78rem;
  line-height: 1.4;
}
.gfx-v3 .v3-relic-toggle:hover {
  border-color: var(--v3-gold);
  box-shadow: 0 0 10px oklch(0.72 0.12 85 / .3), 0 2px 8px oklch(0.05 0.01 265 / .5);
}
.gfx-v3 .v3-relic-icon { filter: drop-shadow(0 0 4px oklch(0.72 0.12 85 / .5)); }
.gfx-v3 .v3-relic-caret { font-size: .55rem; color: oklch(0.60 0.06 85); }
.gfx-v3 .v3-relic-panel {
  position: absolute;
  top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  min-width: 240px; max-width: 300px;
  background: linear-gradient(170deg, oklch(0.22 0.014 262), oklch(0.15 0.013 266));
  border: 1px solid var(--v3-gold-dim);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .08),
    0 10px 30px oklch(0.05 0.01 265 / .75);
  padding: 8px 10px;
  z-index: 400;
}
.gfx-v3 .v3-relic-panel-title {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v3-gold);
  border-bottom: 1px solid oklch(0.50 0.09 80 / .35);
  padding-bottom: 4px;
  margin-bottom: 6px;
  text-align: center;
}
.gfx-v3 .v3-relic-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 4px 0;
}
.gfx-v3 .v3-relic-row + .v3-relic-row { border-top: 1px solid oklch(0.30 0.015 265 / .6); }
.gfx-v3 .v3-relic-row-icon { font-size: 1rem; line-height: 1.2; }
.gfx-v3 .v3-relic-row-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: .68rem;
  font-weight: 700;
  color: oklch(0.88 0.02 255);
}
.gfx-v3 .v3-relic-row-desc {
  font-size: .62rem;
  color: oklch(0.70 0.015 258);
  line-height: 1.35;
}

/* ── Mão de cartas: leque sobre a bancada de ferro ─────────────────── */
/* Cartas em arco de leque real: todas giram em torno de um pivô comum
   bem abaixo da mão (transform-origin 50% 190%) — a rotação por índice
   (--hi, injetado no JSX) gera posição E inclinação de arco de graça.
   Sobreposição via margens negativas; hover/seleção erguem a carta. */
.gfx-v3:not(.ps2-immersive) .hand-area { position: relative; z-index: 10; }
.gfx-v3 .hand-area { --v3-hand-w: 106px; }

.gfx-v3 .hand-label {
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: oklch(0.66 0.03 85);
  border-bottom: 1px solid oklch(0.50 0.09 80 / .25);
  padding-bottom: 3px;
}

.gfx-v3 .hand {
  overflow: visible;            /* o leque sobe além da bandeja */
  gap: 0;
  justify-content: center;
  align-items: flex-end;
  padding: 18px 30px 10px;
}

.gfx-v3 .hand-card {
  --off: calc(var(--hi, 0) - (var(--hand-n, 5) - 1) / 2);
  width: var(--v3-hand-w);
  min-height: calc(var(--v3-hand-w) * 1.42);
  margin: 0 -9px;
  padding: 3px;
  background: linear-gradient(180deg, oklch(0.31 0.02 262), oklch(0.17 0.014 265) 70%);
  border: 1px solid var(--v3-iron-light);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px oklch(0.10 0.01 265 / .8),
    inset 0 1px 0 oklch(0.85 0.02 255 / .14),
    0 6px 14px oklch(0.05 0.01 265 / .6);
  transform-origin: 50% 190%;
  transform: rotate(calc(var(--off) * 3deg));
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease,
              border-color .18s ease, filter .18s ease;
  z-index: calc(10 + var(--hi, 0));
}
.gfx-v3 .hand-card:hover {
  transform: rotate(calc(var(--off) * 3deg)) translateY(-16px) scale(1.08);
  border-color: var(--v3-gold-dim);
  box-shadow:
    inset 0 0 0 1px oklch(0.72 0.12 85 / .4),
    0 14px 26px oklch(0.05 0.01 265 / .7),
    0 0 14px oklch(0.72 0.12 85 / .25);
  z-index: 99;
}
.gfx-v3 .hand-card.selected-hand {
  transform: rotate(calc(var(--off) * 3deg)) translateY(-22px) scale(1.1);
  border-color: var(--v3-gold);
  box-shadow:
    inset 0 0 0 1px oklch(0.78 0.13 88 / .7),
    0 0 0 1px oklch(0.78 0.13 88 / .55),
    0 0 20px oklch(0.72 0.12 85 / .5),
    0 16px 28px oklch(0.05 0.01 265 / .7);
  z-index: 100;
}
.gfx-v3 .hand-card.fusion-selected {
  border-color: oklch(0.65 0.15 300);
  box-shadow:
    inset 0 0 0 1px oklch(0.70 0.14 300 / .6),
    0 0 16px oklch(0.60 0.15 300 / .45),
    0 10px 20px oklch(0.05 0.01 265 / .65);
  transform: rotate(calc(var(--off) * 3deg)) translateY(-14px) scale(1.04);
}
/* Sem PE: a carta apaga, o custo acusa em carmesim */
.gfx-v3 .hand-card.no-afford { filter: grayscale(.5) brightness(.62); }
.gfx-v3 .hand-card.no-afford .hc-cost b { color: oklch(0.62 0.18 27); }

/* Conteúdo: nome em Cinzel, custo como chip de ouro */
.gfx-v3 .hand-card .hc-img { border-radius: 5px; }
.gfx-v3 .hand-card .hc-img-overlay {
  background: linear-gradient(to bottom, transparent 52%, oklch(0.08 0.012 265 / .92) 100%);
  border-radius: 5px;
}
.gfx-v3 .hand-card .hc-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: .54rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px oklch(0.05 0.01 265);
}
.gfx-v3 .hand-card .hc-stats {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: .5rem;
  color: oklch(0.85 0.06 85);
}
.gfx-v3 .hand-card .hc-cost {
  margin-top: 2px;
  padding: 0 7px;
  border-radius: 999px;
  background: oklch(0.16 0.013 265 / .85);
  border: 1px solid oklch(0.50 0.09 80 / .5);
  color: oklch(0.70 0.02 258);
  line-height: 1.5;
}
.gfx-v3 .hand-card .hc-cost b {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: var(--v3-gold);
}

/* Costas das cartas inimigas: leque carmesim apagado */
.gfx-v3 .hand-card.enemy-hand-card {
  background: linear-gradient(180deg, oklch(0.26 0.08 22), oklch(0.15 0.05 20) 70%);
  border-color: oklch(0.38 0.10 23);
}

/* Compra de carta: desliza para a posição do leque (a animação base
   termina em transform:none e estalaria contra o rotate do arco) */
.gfx-v3 .hand-card.hand-card-draw {
  animation: v3HandDraw .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes v3HandDraw {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--off, 0) * 3deg)) translateX(-70px) translateY(12px) scale(.85);
  }
  100% {
    opacity: 1;
    transform: rotate(calc(var(--off, 0) * 3deg));
  }
}

/* ── Botões de comando: ferro forjado ──────────────────────────────── */
.gfx-v3 .btn-end {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, oklch(0.46 0.15 25), oklch(0.32 0.12 23) 60%, oklch(0.26 0.10 22));
  border: 1px solid oklch(0.52 0.14 26);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.04 30 / .25),
    inset 0 0 0 1px oklch(0.20 0.06 22 / .8),
    0 3px 10px oklch(0.05 0.01 265 / .6);
  text-shadow: 0 1px 2px oklch(0.10 0.04 20 / .9);
}
.gfx-v3 .btn-end:hover:not(:disabled) {
  background: linear-gradient(180deg, oklch(0.52 0.17 26), oklch(0.36 0.13 24) 60%, oklch(0.28 0.11 22));
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.04 30 / .3),
    0 0 14px oklch(0.50 0.16 25 / .45),
    0 3px 10px oklch(0.05 0.01 265 / .6);
}
.gfx-v3 .btn-graveyard,
.gfx-v3 .btn-restart {
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: .05em;
  background: linear-gradient(180deg, oklch(0.30 0.015 262), oklch(0.21 0.014 264));
  border: 1px solid var(--v3-iron);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .08),
    0 3px 8px oklch(0.05 0.01 265 / .5);
}
.gfx-v3 .btn-graveyard:hover,
.gfx-v3 .btn-restart:hover {
  border-color: var(--v3-iron-light);
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .12),
    0 0 10px oklch(0.55 0.015 255 / .25),
    0 3px 8px oklch(0.05 0.01 265 / .5);
}

/* ── Modo PS2 imersivo: cockpit de ferro ───────────────────────────── */
.gfx-v3.ps2-immersive .ps2-action-bar {
  background: linear-gradient(180deg, oklch(0.20 0.014 263 / .92), oklch(0.13 0.012 266 / .96));
  border-top: 1px solid oklch(0.62 0.09 85 / .35);
  box-shadow: 0 -6px 22px oklch(0.05 0.01 265 / .6);
  backdrop-filter: blur(5px);
}
.gfx-v3 .ps2-action-btn {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .05em;
  background: linear-gradient(180deg, oklch(0.28 0.015 262), oklch(0.19 0.014 265));
  border: 1px solid var(--v3-iron);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 oklch(0.85 0.02 255 / .08);
}
.gfx-v3 .ps2-action-btn.ps2-btn-active {
  border-color: var(--v3-gold-dim);
  color: var(--v3-gold);
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .1),
    0 0 10px oklch(0.72 0.12 85 / .25);
}
.gfx-v3 .ps2-action-btn.ps2-btn-end {
  background: linear-gradient(180deg, oklch(0.44 0.15 25), oklch(0.30 0.11 23));
  border-color: oklch(0.52 0.14 26);
  text-shadow: 0 1px 2px oklch(0.10 0.04 20 / .9);
}
/* HUD do PS2 abandona o VT323: a era é medieval, não terminal */
.gfx-v3.ps2-immersive .selected-card-info,
.gfx-v3.ps2-immersive .timeline-area {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  background: linear-gradient(170deg, oklch(0.20 0.014 263 / .92), oklch(0.14 0.012 266 / .95));
  border: 1px solid var(--v3-iron);
  border-radius: 5px;
  box-shadow: 0 6px 18px oklch(0.05 0.01 265 / .55);
}

/* ── Log de partida (timeline) ─────────────────────────────────────── */
.gfx-v3 .timeline-area {
  border: 1px solid var(--v3-iron);
  border-radius: 5px;
  background: linear-gradient(170deg, oklch(0.20 0.014 263), oklch(0.14 0.012 266));
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.02 255 / .06),
    0 6px 18px oklch(0.05 0.01 265 / .5);
}

/* ── Responsivo ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gfx-v3 .v3-corner { width: 46px; height: 46px; }
  .gfx-v3 .turn-badge { width: 72px; height: 44px; }
  .gfx-v3 .turn-badge .turn-num { font-size: .95rem; }
  .gfx-v3 .player-info { padding-left: 26px; }
  .gfx-v3 .player-info::before { width: 14px; height: 14px; left: 6px; }
  .gfx-v3 .hand-area { --v3-hand-w: 86px; }
  .gfx-v3 .hand { padding: 14px 22px 8px; }
  .gfx-v3 .hand-card { margin: 0 -7px; }
}
@media (max-width: 480px) {
  .gfx-v3 .v3-corner { width: 36px; height: 36px; }
  .gfx-v3 .v3-relic-panel { min-width: 200px; }
  .gfx-v3 .hand-area { --v3-hand-w: 66px; }
  .gfx-v3 .hand { padding: 12px 16px 6px; }
  .gfx-v3 .hand-card { margin: 0 -5px; }
}

/* ── Movimento reduzido: a arena fica parada, a informação fica ────── */
@media (prefers-reduced-motion: reduce) {
  .gfx-v3 .cell.highlight-move::after,
  .gfx-v3 .cell.highlight-attack,
  .gfx-v3 .cell.highlight-attack::after,
  .gfx-v3 .cell.highlight-summon::after,
  .gfx-v3 .cell.highlight-spell-target::after,
  .gfx-v3 .card-token.selected {
    animation: none;
  }
}