/* =====================================================================
   PokeHunt Duel v2 — Camada de apresentação (Fase 1)
   Aditivo: nada aqui altera o backend. Tudo é visual, ativado pelo
   flag window.DUEL_V2. Render incremental controlado por js/duel-v2.js.
   ===================================================================== */

:root {
  --dv2-bg:        #050816;
  --dv2-bg2:       #0a1024;
  --dv2-panel:     #0f172a;
  --dv2-line:      #1e293b;
  --dv2-me:        #00a8ff;
  --dv2-opp:       #ff6600;
  --dv2-gold:      #f59e0b;
  --dv2-good:      #22c55e;
  --dv2-warn:      #f59e0b;
  --dv2-bad:       #ef4444;
  --dv2-text:      #e2e8f0;
  --dv2-dim:       #94a3b8;
}

/* ---- Raiz / palco ------------------------------------------------- */
.dv2-root {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--dv2-text);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #13204a 0%, transparent 55%),
    radial-gradient(100% 60% at 50% 110%, #1a0f2e 0%, transparent 55%),
    linear-gradient(180deg, var(--dv2-bg) 0%, var(--dv2-bg2) 100%);
  font-family: inherit;
}
/* vinheta = campo vivo (#13) */
.dv2-root::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
  z-index: 5;
}

/* canvas de partículas ambiente */
.dv2-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* camada de FX por cima de tudo (dano, efetividade, shiny burst) */
.dv2-fx {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

/* ---- Barras de banco (topo / base) -------------------------------- */
.dv2-banco {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 12px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(15,23,42,0.7), rgba(15,23,42,0.2));
  border-top: 1px solid var(--dv2-line);
  border-bottom: 1px solid var(--dv2-line);
}
.dv2-banco-label {
  font-size: 10px; font-weight: 900; letter-spacing: 2px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  opacity: 0.8;
}
.dv2-banco-slots { display: flex; gap: 8px; flex: 1; justify-content: center; }
.dv2-bslot {
  position: relative;
  width: 56px; height: 74px;
  border-radius: 8px;
  border: 1.5px solid var(--dv2-line);
  background: rgba(2,6,23,0.6);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
  cursor: pointer;
}
.dv2-bslot.filled:hover { transform: translateY(-3px); }
.dv2-bslot.empty { opacity: 0.35; border-style: dashed; cursor: default; }
.dv2-bslot.blink { animation: dv2Blink .7s steps(1,end) infinite; }
.dv2-bslot.enter { animation: dv2SlideInUp .35s cubic-bezier(.2,.9,.3,1.2) both; }
.dv2-bslot img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.dv2-bslot img.gif { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.dv2-bslot .hpwrap { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.75); padding:2px 3px; }
.dv2-bslot .hpbar { height:3px; background:#0f172a; border-radius:2px; overflow:hidden; }
.dv2-bslot .hpfill { height:100%; transition: width .5s ease; }
.dv2-bslot .nm { font-size:7px; color:var(--dv2-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dv2-bslot .retreat-tag {
  position:absolute; top:0; left:0; right:0; text-align:center;
  font-size:7px; font-weight:900; color:#02131a;
  background:rgba(34,211,238,.85); padding:1px;
}

/* ---- Campo principal (3 colunas) ---------------------------------- */
.dv2-field {
  flex: 1;
  display: grid;
  grid-template-columns: 168px 1fr 168px;
  gap: 8px;
  padding: 4px 12px;
  z-index: 10;
  min-height: 0;
}
.dv2-col { display: flex; flex-direction: column; gap: 8px; }
.dv2-col-center { align-items: center; justify-content: space-between; }

/* HUD do jogador */
.dv2-hud {
  background: rgba(15,23,42,0.85);
  border: 1px solid var(--dv2-line);
  border-radius: 12px;
  padding: 8px 10px;
}
.dv2-hud-name { font-size: 13px; font-weight: 900; margin-bottom: 4px; }
.dv2-hud-row { display:flex; align-items:center; gap:6px; margin:3px 0; }
.dv2-hud-label { font-size: 9px; letter-spacing: 1px; color: var(--dv2-dim); width: 52px; }
.dv2-dot { width:11px; height:11px; border-radius:50%; border:1px solid currentColor; }
.dv2-dot.on { background: currentColor; }

/* Pilhas (deck/descarte/prêmios) */
.dv2-pile-label { font-size:9px; letter-spacing:1px; color:var(--dv2-dim); margin-top:4px; }
.dv2-deck {
  position: relative;
  width: 60px; height: 80px;
  margin: 0 auto;
  border-radius: 8px;
}
/* pilha do deck com "espessura" (#2) */
.dv2-deck-stack {
  position:absolute; inset:0;
  border-radius:8px;
  background: linear-gradient(135deg, #1d2b4d, #0b1430);
  border:1px solid #2a3b66;
  box-shadow:
    2px 2px 0 #0b1430, 3px 3px 0 #16224a,
    5px 5px 0 #0b1430, 6px 6px 0 #16224a,
    8px 8px 0 #0b1430, 9px 9px 0 #16224a;
}
.dv2-deck img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:8px; opacity:.85; }
.dv2-deck .count {
  position:absolute; bottom:-6px; right:-6px;
  min-width:22px; height:22px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:#020617; border:2px solid currentColor; border-radius:11px;
  font-size:12px; font-weight:900; z-index:3;
}
.dv2-prizes { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.dv2-prize {
  aspect-ratio: 3/4;
  border-radius:5px; border:1px solid var(--dv2-line);
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.5);
  overflow:hidden;
}
.dv2-prize img { width:100%; height:100%; object-fit:cover; }
.dv2-prize.fly { animation: dv2PrizeFly .6s ease both; }

/* ---- ATIVO 2x (#4) ------------------------------------------------ */
.dv2-active-zone { width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; }
.dv2-active-tag { font-size:11px; font-weight:900; letter-spacing:3px; opacity:.85; }
.dv2-active {
  position: relative;
  width: 188px;            /* compacto p/ caber os 2 campos */
  max-width: 46vw;
  aspect-ratio: 3/4;
  border-radius: 16px;
  border: 2px solid currentColor;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), transparent 60%), #060b1c;
  box-shadow: 0 0 28px -4px currentColor, inset 0 0 30px rgba(0,0,0,.6);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
.dv2-active.enter { animation: dv2ActiveEnter .45s cubic-bezier(.2,.9,.3,1.25) both; }
.dv2-active.shake { animation: dv2Shake .4s ease; }
.dv2-active.ko { animation: dv2KO .6s ease forwards; }
.dv2-active.evolving { animation: dv2EvolveFlash .9s ease; }
.dv2-active-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.4;
}
.dv2-active-gif {
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:68%; height:54%; object-fit:contain; image-rendering:pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
/* plataforma/sombra projetada */
.dv2-active-platform {
  position:absolute; left:50%; bottom:30%; transform:translateX(-50%);
  width:60%; height:14px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
}
.dv2-active-info {
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(2,6,23,.92) 45%);
}
.dv2-active-top {
  position:absolute; top:8px; left:8px; right:8px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.dv2-active-name { font-size:15px; font-weight:900; text-shadow:0 1px 3px #000; }
.dv2-hpbar { height:10px; border-radius:6px; background:#0b1428; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.dv2-hpfill { height:100%; border-radius:6px; transition: width .6s cubic-bezier(.3,.7,.3,1); }
.dv2-hptext { font-size:12px; font-weight:800; margin-top:2px; }
.dv2-active-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; }

/* tipos (#4) */
.dv2-type {
  font-size:9px; font-weight:800; letter-spacing:.5px;
  padding:2px 7px; border-radius:999px; color:#fff;
  text-transform:uppercase;
}

/* nature (#10) */
.dv2-nature {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.dv2-nature .ic { font-size:12px; }

/* IV estrelas (#11) */
.dv2-iv { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; }
.dv2-stars { letter-spacing:1px; color:var(--dv2-gold); text-shadow:0 0 6px rgba(245,158,11,.5); }
.dv2-stars .off { color:#334155; text-shadow:none; }

/* dica "pode evoluir" (preparada p/ Fase 3) */
.dv2-evohint {
  font-size:9px; font-weight:900; color:#34d399;
  padding:1px 6px; border-radius:999px; border:1px solid #34d39966;
  animation: dv2GlowPulse 1.2s infinite alternate;
}

/* aura shiny (#9) */
.dv2-shiny-aura {
  position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: radial-gradient(circle at 50% 45%, rgba(250,204,21,.35), transparent 65%);
  animation: dv2ShinyPulse 1.4s infinite alternate;
  mix-blend-mode: screen;
}
.dv2-shiny-ring {
  position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  border:2px solid rgba(250,204,21,.7);
  box-shadow: 0 0 18px 2px rgba(250,204,21,.55), inset 0 0 18px rgba(250,204,21,.35);
  animation: dv2ShinyPulse 1.4s infinite alternate;
}

/* slot ativo vazio */
.dv2-active.empty {
  display:flex; align-items:center; justify-content:center;
  color: currentColor; opacity:.4; font-size:40px; border-style:dashed;
  box-shadow:none;
}

/* ---- Centro: logo / turno / log ----------------------------------- */
.dv2-center-stack { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.dv2-logo { font-size:18px; font-weight:900; letter-spacing:2px; opacity:.9; }
.dv2-logo b { color: var(--dv2-gold); }
.dv2-turn {
  font-size:12px; font-weight:900; letter-spacing:1px;
  padding:5px 14px; border-radius:999px;
  border:1px solid var(--dv2-line); color:var(--dv2-dim);
  transition: all .3s ease;
}
.dv2-turn.mine { animation: dv2TurnGlow 1.2s infinite alternate; }
.dv2-log {
  width:100%; max-width:260px;
  background:rgba(2,6,23,.6); border:1px solid var(--dv2-line);
  border-radius:10px; padding:6px 8px; font-size:10px; line-height:1.5;
  min-height:64px; max-height:96px; overflow:hidden;
}
.dv2-log-line { color:var(--dv2-dim); animation: dv2FadeIn .3s ease; }
.dv2-log-line:first-child { color:var(--dv2-text); }

/* ---- Barra de ações ----------------------------------------------- */
.dv2-action {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px;
  background: linear-gradient(0deg, rgba(15,23,42,.92), rgba(15,23,42,.4));
  border-top:1px solid var(--dv2-line);
  z-index:12;
}
.dv2-moves { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; flex:1; min-width:220px; }
.dv2-move {
  text-align:left; cursor:pointer;
  background: linear-gradient(135deg, #15233f, #0c1730);
  border:1px solid #28406b; border-radius:10px;
  padding:7px 10px; color:var(--dv2-text);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s;
}
.dv2-move:hover:not(.off) { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,168,255,.25); border-color:#3b82f6; }
.dv2-move.off { opacity:.4; cursor:not-allowed; }
.dv2-move-name { display:block; font-size:12px; font-weight:800; }
.dv2-move-sub { display:block; font-size:9px; color:var(--dv2-dim); margin-top:1px; }
.dv2-act-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.dv2-energy { font-size:13px; font-weight:900; padding:5px 12px; border-radius:999px; border:1px solid currentColor; }
.dv2-btn {
  cursor:pointer; font-size:12px; font-weight:800;
  padding:7px 12px; border-radius:10px; border:1px solid var(--dv2-line);
  background:#0f172a; color:var(--dv2-text); transition:transform .12s, box-shadow .2s;
}
.dv2-btn:hover { transform:translateY(-1px); }
.dv2-btn.end { background:transparent; }
.dv2-btn.surrender { background:transparent; border-color:#7f1d1d; color:#fca5a5; }
.dv2-moves-wait { flex:1; text-align:center; color:var(--dv2-dim); font-size:12px; padding:8px; }

/* botão mute */
.dv2-mute {
  position:absolute; top:10px; right:12px; z-index:50;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--dv2-line); background:rgba(15,23,42,.8);
  color:var(--dv2-text); cursor:pointer; font-size:16px;
}

/* ---- FX: dano flutuante / efetividade / KO ------------------------ */
.dv2-dmg {
  position:absolute; font-weight:900; font-size:26px;
  color:#fff; text-shadow:0 2px 0 #7f1d1d, 0 0 14px rgba(239,68,68,.8);
  animation: dv2DmgFloat 1s ease forwards;
  pointer-events:none;
}
.dv2-dmg.crit { font-size:34px; color:#fde68a; text-shadow:0 2px 0 #b45309, 0 0 18px rgba(245,158,11,.9); }
.dv2-eff {
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) scale(.6);
  font-weight:900; letter-spacing:2px; text-align:center; white-space:nowrap;
  animation: dv2EffPop 1.3s cubic-bezier(.2,.9,.3,1.2) forwards;
  pointer-events:none; z-index:42;
}
.dv2-eff.super { color:#fde047; font-size:30px; text-shadow:0 0 18px rgba(245,158,11,.9); }
.dv2-eff.weak  { color:#93c5fd; font-size:24px; text-shadow:0 0 14px rgba(59,130,246,.7); }
.dv2-eff.none  { color:#94a3b8; font-size:24px; }
.dv2-eff.crit  { color:#f87171; font-size:30px; text-shadow:0 0 18px rgba(239,68,68,.9); }

/* burst de partículas shiny */
.dv2-spark {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#fde047; box-shadow:0 0 8px #fde047;
  pointer-events:none; animation: dv2Spark .9s ease-out forwards;
}

/* ---- Overlay de fim de jogo --------------------------------------- */
.dv2-end {
  position:absolute; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(2,6,23,.82); backdrop-filter:blur(3px);
  animation: dv2FadeIn .4s ease;
}
.dv2-end-title { font-size:34px; font-weight:900; text-shadow:0 0 24px currentColor; animation: dv2EndPop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.dv2-end-sub { font-size:13px; color:var(--dv2-dim); margin:10px 0 16px; }

/* ---- Modal de detalhe (flip 3D #12) ------------------------------- */
.dv2-detail-back {
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.8); backdrop-filter:blur(4px);
  animation: dv2FadeIn .2s ease;
}
.dv2-flip {
  width:320px; max-width:88vw; aspect-ratio:3/4;
  perspective:1400px; cursor:pointer;
}
.dv2-flip-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition: transform .6s cubic-bezier(.3,.7,.3,1);
  animation: dv2FlipIn .6s cubic-bezier(.3,.7,.3,1) both;
}
.dv2-flip.flipped .dv2-flip-inner { transform: rotateY(180deg); }
.dv2-face {
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:18px; overflow:hidden;
  border:2px solid currentColor;
  background:#0a1024;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px -6px currentColor;
}
.dv2-face-back { transform: rotateY(180deg); padding:16px; }
.dv2-face-front img.art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.dv2-face-front .gif { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:70%; height:55%; object-fit:contain; image-rendering:pixelated; }
.dv2-face-front .cap { position:absolute; left:0; right:0; bottom:0; padding:12px; background:linear-gradient(180deg,transparent,rgba(2,6,23,.95)); }
.dv2-detail-name { font-size:20px; font-weight:900; }
.dv2-detail-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.dv2-detail-section-t { font-size:10px; letter-spacing:2px; color:var(--dv2-dim); margin:12px 0 6px; }
.dv2-stat { display:flex; justify-content:space-between; font-size:11px; padding:3px 0; border-bottom:1px solid var(--dv2-line); }
.dv2-detail-move { background:rgba(255,255,255,.04); border:1px solid var(--dv2-line); border-radius:8px; padding:6px 8px; margin-bottom:5px; }
.dv2-detail-move .mn { font-size:12px; font-weight:800; }
.dv2-detail-move .ms { font-size:9px; color:var(--dv2-dim); }
.dv2-flip-hint { position:absolute; top:10px; right:12px; font-size:9px; color:var(--dv2-dim); }

/* =====================================================================
   Keyframes
   ===================================================================== */
@keyframes dv2Blink { 50% { box-shadow:0 0 0 2px #fde047, 0 0 16px #fde047; border-color:#fde047; } }
@keyframes dv2SlideInUp { from { transform:translateY(40px) scale(.8); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dv2ActiveEnter { 0%{ transform:translateY(50px) scale(.7); opacity:0; } 60%{ transform:translateY(-6px) scale(1.04); opacity:1; } 100%{ transform:none; } }
@keyframes dv2Shake { 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px) rotate(-2deg); } 40%{ transform:translateX(7px) rotate(2deg); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(4px); } }
@keyframes dv2KO { 0%{ transform:none; opacity:1; } 30%{ transform:translateY(4px) rotate(2deg); filter:grayscale(.7); } 100%{ transform:translateY(60px) rotate(12deg) scale(.7); opacity:0; } }
@keyframes dv2EvolveFlash { 0%{ filter:brightness(1); } 40%{ filter:brightness(3) saturate(0); } 60%{ filter:brightness(5) saturate(0); } 100%{ filter:brightness(1); } }
@keyframes dv2ShinyPulse { from{ opacity:.45; } to{ opacity:1; } }
@keyframes dv2GlowPulse { from{ box-shadow:0 0 4px currentColor; } to{ box-shadow:0 0 14px currentColor; } }
@keyframes dv2TurnGlow { from{ box-shadow:0 0 4px currentColor; } to{ box-shadow:0 0 16px currentColor; } }
@keyframes dv2FadeIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes dv2DmgFloat { 0%{ transform:translateY(0) scale(.6); opacity:0; } 20%{ transform:translateY(-10px) scale(1.2); opacity:1; } 100%{ transform:translateY(-60px) scale(1); opacity:0; } }
@keyframes dv2EffPop { 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; } 25%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; } 75%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
@keyframes dv2Spark { 0%{ transform:translate(0,0) scale(1); opacity:1; } 100%{ transform:translate(var(--dx,0),var(--dy,-40px)) scale(0); opacity:0; } }
@keyframes dv2PrizeFly { 0%{ transform:translateY(-30px) scale(1.3); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes dv2EndPop { 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1); } }
@keyframes dv2FlipIn { 0%{ transform:rotateY(-90deg) scale(.8); opacity:0; } 100%{ transform:rotateY(0) scale(1); opacity:1; } }

/* =====================================================================
   Responsividade (#18)
   ===================================================================== */
@media (max-width: 1024px) {
  .dv2-field { grid-template-columns: 140px 1fr 140px; }
  .dv2-active { width: 200px; }
}
@media (max-width: 760px) {
  /* empilha: oponente em cima, eu embaixo; laterais viram faixas finas */
  .dv2-field {
    grid-template-columns: 1fr;
    grid-template-areas: "center";
  }
  .dv2-col-left, .dv2-col-right {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 6px;
    order: 3;
  }
  .dv2-col-center { order: 2; }
  .dv2-deck { width: 52px; height: 70px; }
  .dv2-prizes { grid-template-columns: repeat(6, 1fr); }
  .dv2-active { width: 170px; max-width: 70vw; }
  .dv2-hud { width: 100%; }
  .dv2-bslot { width: 48px; height: 64px; }
  .dv2-moves { grid-template-columns: 1fr 1fr; min-width: 0; }
}
@media (max-width: 420px) {
  .dv2-active { width: 150px; }
  .dv2-active-name { font-size: 13px; }
  .dv2-banco-slots { gap: 4px; }
  .dv2-bslot { width: 42px; height: 56px; }
}

/* acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .dv2-root *,
  .dv2-root *::before,
  .dv2-root *::after { animation-duration: .01ms !important; transition-duration: .05ms !important; }
}

/* ============================================================
   MODO MAT — playmat de fundo (atrás de window.DUEL_MAT)
   Ajuste fino de cada slot pelas variáveis abaixo (em % do mat).
   ============================================================ */
.dv2-root.dv2-mat{
  position:relative;
  width:min(100vw, calc(100dvh * 1.5));
  height:min(100dvh, calc(100vw / 1.5));
  min-height:0;
  margin:auto;
  display:block;
  background:#06080f url('../images/duel/stadio_padrao.png') center/100% 100% no-repeat;
  overflow:hidden;
  /* --- slots (top/left/width/height em %) --- */
  --bancoTop-l:22%;  --bancoTop-t:4.5%;  --bancoTop-w:56%; --bancoTop-h:18%;
  --bancoBot-l:22%;  --bancoBot-t:77%;   --bancoBot-w:56%; --bancoBot-h:18%;
  --sideOpp-l:2.5%;  --sideOpp-t:2%;     --side-w:16%;     --side-h:96%;
  --sideMe-r:2.5%;
  --center-l:42%;    --center-t:25%;     --center-w:16%;   --center-h:48%;
}
.dv2-root.dv2-mat::after{ display:none; }              /* tira a vinheta */
.dv2-mat .dv2-banco{ background:none; border:none; padding:0; }
.dv2-mat .dv2-banco-label{ display:none; }
.dv2-mat .dv2-pile-label{ display:none; }
.dv2-mat .dv2-hud{ background:rgba(6,10,20,.45); border-color:transparent; padding:4px 6px; }
.dv2-mat .dv2-field{ display:block; position:static; padding:0; flex:none; }

.dv2-mat .dv2-banco-top{ position:absolute; left:var(--bancoTop-l); top:var(--bancoTop-t); width:var(--bancoTop-w); height:var(--bancoTop-h); }
.dv2-mat .dv2-banco-bot{ position:absolute; left:var(--bancoBot-l); top:var(--bancoBot-t); width:var(--bancoBot-w); height:var(--bancoBot-h); }
.dv2-mat .dv2-banco-slots{ height:100%; gap:3px; align-items:stretch; }
.dv2-mat .dv2-bslot{ width:auto; height:100%; flex:1; max-width:19%; }

.dv2-mat #dv2-side-opp{ position:absolute; left:var(--sideOpp-l); top:var(--sideOpp-t); width:var(--side-w); height:var(--side-h); gap:6px; }
.dv2-mat #dv2-side-me { position:absolute; right:var(--sideMe-r); left:auto; top:var(--sideOpp-t); width:var(--side-w); height:var(--side-h); gap:6px; }
.dv2-mat .dv2-deck{ width:54px; height:72px; }
.dv2-mat .dv2-prizes{ gap:3px; }

.dv2-mat .dv2-col-center{ position:absolute; left:var(--center-l); top:var(--center-t); width:var(--center-w); height:var(--center-h);
  display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:0; }
.dv2-mat .dv2-active{ width:100%; max-width:none; }
.dv2-mat .dv2-active-tag{ display:none; }

.dv2-mat .dv2-action{ position:absolute; left:50%; bottom:1%; transform:translateX(-50%); width:60%; z-index:20; }
.dv2-mat #dv2-mute{ z-index:25; }

/* ajustes mat v2 — HUD limpo, prêmios 2 colunas, ativo central enxuto */
.dv2-mat .dv2-hud-label{ display:none; }
.dv2-mat .dv2-hud-name{ font-size:11px; margin-bottom:2px; }
.dv2-mat .dv2-hud-row{ margin:1px 0; gap:3px; }
.dv2-mat .dv2-dot{ width:9px; height:9px; }
.dv2-mat .dv2-prizes{ grid-template-columns:repeat(2,1fr); }
.dv2-mat .dv2-active-name{ font-size:13px; }
.dv2-mat .dv2-active-info{ padding:5px 7px 6px; }

/* ============================================================
   MAT v3 — desenhado em CSS (sem PNG). Override do bloco anterior.
   Azul = oponente (cima/esquerda) · Laranja = você (baixo/direita).
   ============================================================ */
.dv2-root.dv2-mat{
  width:min(100vw, calc(100dvh * 1.6));
  height:min(100dvh, calc(100vw / 1.6));
  background:
    radial-gradient(90% 70% at 50% -8%, rgba(47,159,224,.18), transparent 60%),
    radial-gradient(90% 70% at 50% 108%, rgba(240,132,60,.16), transparent 60%),
    radial-gradient(70% 60% at 0% 50%, rgba(20,58,102,.45), transparent 55%),
    radial-gradient(70% 60% at 100% 50%, rgba(122,52,18,.42), transparent 55%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #0c1830, #070b16);
  /* blueprint coords */
  --bancoTop-l:22%; --bancoTop-t:2.5%; --bancoTop-w:56%; --bancoTop-h:13%;
  --bancoBot-l:22%; --bancoBot-t:84.5%; --bancoBot-w:56%; --bancoBot-h:13%;
  --sideOpp-l:2.5%; --sideOpp-t:2%; --side-w:16%; --side-h:96%; --sideMe-r:2.5%;
  --center-l:43.5%; --center-t:15%; --center-w:13%; --center-h:70%;
}
/* moldura central (linha divisória + brilho) */
.dv2-root.dv2-mat::before{
  content:""; position:absolute; left:18%; right:18%; top:50%; height:2px; transform:translateY(-1px);
  background:linear-gradient(90deg, transparent, rgba(47,159,224,.5) 20%, rgba(240,132,60,.5) 80%, transparent);
  z-index:2; pointer-events:none;
}

/* ---- molduras dos slots ---- */
.dv2-mat .dv2-bslot{ border-radius:10px; background:rgba(6,12,24,.55);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5); }
.dv2-mat .dv2-banco-top .dv2-bslot{ border:1.5px solid rgba(47,159,224,.45); }
.dv2-mat .dv2-banco-bot .dv2-bslot{ border:1.5px solid rgba(240,132,60,.45); }

.dv2-mat #dv2-side-opp{ --dv2-line:rgba(47,159,224,.4); }
.dv2-mat #dv2-side-me { --dv2-line:rgba(240,132,60,.4); }
.dv2-mat .dv2-deck, .dv2-mat .dv2-prize{ box-shadow:0 0 10px rgba(0,0,0,.4); }
.dv2-mat #dv2-side-opp .dv2-deck{ border:1px solid rgba(47,159,224,.5); }
.dv2-mat #dv2-side-me  .dv2-deck{ border:1px solid rgba(240,132,60,.5); }
.dv2-mat .dv2-hud{ border-radius:12px; }
.dv2-mat #dv2-side-opp .dv2-hud{ border:1px solid rgba(47,159,224,.45); box-shadow:0 0 14px rgba(47,159,224,.12); }
.dv2-mat #dv2-side-me  .dv2-hud{ border:1px solid rgba(240,132,60,.45); box-shadow:0 0 14px rgba(240,132,60,.12); }

/* ativos: cor por lado */
.dv2-mat #dv2-active-opp{ color:#2f9fe0; }
.dv2-mat #dv2-active-me { color:#f0843c; }

/* rótulos dos slots (reaparecem, discretos) */
.dv2-mat .dv2-banco-label{ display:block; color:rgba(255,255,255,.45); font-size:9px; }
.dv2-mat .dv2-pile-label{ display:block; color:rgba(255,255,255,.35); }

/* ============================================================
   CAMPOS / CENÁRIOS — tema por bioma. Aplique com a classe fld-*
   (window.DUEL_FIELD = 'vulcao' | 'oceano' | 'floresta' |
    'montanha' | 'usina' | 'caverna'). As molduras azul/laranja
   dos jogadores continuam (identidade), só o fundo muda.
   ============================================================ */
.dv2-root.dv2-mat.fld-vulcao{
  background:
    radial-gradient(80% 70% at 50% 112%, rgba(255,95,25,.40), transparent 55%),
    radial-gradient(60% 50% at 50% -6%, rgba(150,25,12,.45), transparent 60%),
    repeating-linear-gradient(60deg, rgba(255,120,40,.04) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #1c0e0a, #0a0605);
}
.dv2-root.dv2-mat.fld-oceano{
  background:
    radial-gradient(95% 80% at 50% -6%, rgba(40,165,215,.34), transparent 62%),
    radial-gradient(70% 60% at 50% 110%, rgba(20,80,140,.4), transparent 60%),
    repeating-linear-gradient(60deg, rgba(120,200,255,.035) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #08263e, #03101e);
}
.dv2-root.dv2-mat.fld-floresta{
  background:
    radial-gradient(95% 75% at 50% -6%, rgba(70,180,90,.30), transparent 62%),
    radial-gradient(70% 60% at 50% 112%, rgba(30,90,40,.4), transparent 60%),
    repeating-linear-gradient(60deg, rgba(150,230,150,.03) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #0d2616, #05140a);
}
.dv2-root.dv2-mat.fld-montanha{
  background:
    radial-gradient(95% 75% at 50% 112%, rgba(170,148,120,.30), transparent 60%),
    radial-gradient(60% 50% at 50% -6%, rgba(90,78,64,.4), transparent 62%),
    repeating-linear-gradient(60deg, rgba(220,205,180,.03) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #26201a, #110d09);
}
.dv2-root.dv2-mat.fld-usina{
  background:
    radial-gradient(80% 60% at 50% -6%, rgba(245,212,60,.26), transparent 55%),
    radial-gradient(70% 60% at 50% 112%, rgba(55,140,225,.24), transparent 60%),
    repeating-linear-gradient(0deg, rgba(245,212,60,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(120,180,255,.03) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #181b24, #0a0c12);
}
.dv2-root.dv2-mat.fld-caverna{
  background:
    radial-gradient(80% 70% at 50% -6%, rgba(130,90,175,.26), transparent 60%),
    radial-gradient(70% 60% at 50% 112%, rgba(40,30,60,.5), transparent 60%),
    repeating-linear-gradient(60deg, rgba(180,150,220,.025) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #16121e, #080611);
}
/* nome do campo (badge no topo-centro) */
.dv2-mat .dv2-field-badge{
  position:absolute; left:50%; top:0.5%; transform:translateX(-50%);
  font-size:11px; font-weight:900; letter-spacing:2px; color:#fff;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18);
  padding:2px 12px; border-radius:999px; z-index:15; text-transform:uppercase;
}

/* ===== ROLETA DE CAMPO ===== */
.dv2-roulette{ position:absolute; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; background:rgba(4,7,14,.85);
  transition:opacity .6s ease; }
.dv2-roulette.fade{ opacity:0; }
.dv2-roul-title{ font-size:16px; font-weight:900; letter-spacing:5px; color:#cfe0f5; }
.dv2-roul-window{ position:relative; width:min(82%,640px); height:120px; overflow:hidden;
  border:2px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(10,16,30,.65);
  box-shadow:inset 0 0 30px rgba(0,0,0,.55); }
.dv2-roul-pointer{ position:absolute; left:50%; top:-1px; transform:translateX(-50%);
  color:#f0843c; font-size:22px; z-index:3; text-shadow:0 0 8px #f0843c; }
.dv2-roul-window::before, .dv2-roul-window::after{ content:""; position:absolute; top:0; bottom:0;
  width:90px; z-index:2; pointer-events:none; }
.dv2-roul-window::before{ left:0; background:linear-gradient(90deg, rgba(10,16,30,.95), transparent); }
.dv2-roul-window::after{ right:0; background:linear-gradient(270deg, rgba(10,16,30,.95), transparent); }
.dv2-roul-window::marker{ }
.dv2-roul-strip{ display:flex; height:100%; will-change:transform; }
.dv2-roul-cell{ flex:0 0 160px; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; border-right:1px solid rgba(255,255,255,.06); }
.dv2-roul-cell .ic{ font-size:40px; line-height:1; }
.dv2-roul-cell .nm{ font-size:13px; font-weight:800; letter-spacing:2px; color:#dfe7f5; }
.dv2-roul-result{ font-size:19px; font-weight:900; letter-spacing:2px; color:#fff;
  opacity:0; transform:scale(.8); transition:all .45s cubic-bezier(.2,.9,.3,1.5); }
.dv2-roul-result.show{ opacity:1; transform:scale(1); }
/* linha central de mira da roleta */
.dv2-roul-window{ background-image:linear-gradient(rgba(240,132,60,.0),rgba(240,132,60,.0)); }