/* Physical card lighting and cinematic combat. No gameplay layout changes. */
:root {
  --impact-color: #edc587;
  --arena-light-x: 50%;
  --arena-light-y: 40%;
}

.arena {
  background:
    radial-gradient(ellipse at var(--arena-light-x) var(--arena-light-y), #68536240, transparent 52%),
    radial-gradient(ellipse at 50% 51%, #2c334499, #16131dcf 78%),
    linear-gradient(160deg, #293b47, #241620 54%, #202d36);
  border-color: #997d7459;
  box-shadow:
    inset 0 1px 0 #e0b68825,
    inset 0 -2px 0 #05070dd9,
    0 4px 0 #131018,
    0 7px 0 #06070b,
    0 27px 70px #0008;
  transform-origin: 50% 50%;
}

.arenaFloor {
  position: absolute;
  z-index: -1;
  inset: 19% 5% 16%;
  pointer-events: none;
  border: 1px solid #d0b79e17;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, transparent 17%, #b59cbb0d 18%, transparent 19%, transparent 45%, #b59cbb11 46%, transparent 47%),
    repeating-linear-gradient(0deg, transparent 0 51px, #d3b7a113 52px 53px),
    repeating-linear-gradient(90deg, transparent 0 51px, #d3b7a110 52px 53px);
  transform: perspective(800px) rotateX(49deg) scale(1.1);
  opacity: .65;
  mask-image: radial-gradient(ellipse, #000 32%, transparent 73%);
}

.board {
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.leader {
  position: relative;
  background: linear-gradient(90deg, #0a101525, transparent 46%, #0a10151a);
  box-shadow: inset 0 1px 0 #e6d1af09;
}

.portrait {
  box-shadow: inset 0 0 0 2px #14111a8a, 0 3px 0 #07080e, 0 9px 20px #0006, 0 0 25px #9c566830;
}

.centerLine {
  border-color: #d4b69326;
  background: linear-gradient(90deg, transparent, #d2b79507 35%, #d2b79507 65%, transparent);
}

#event { text-shadow: 0 2px 5px #000a; }

.card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 20%;
  --card-lift: -8px;
  background: linear-gradient(140deg, #27212c, #17131d 60%);
  border-color: #b3a09185;
  box-shadow:
    0 1px 0 #e9d4b448,
    1px 3px 0 #685246,
    2px 5px 0 #1d161a,
    0 10px 18px #0007;
  transform-origin: center center;
  transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}

.card::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 2px;
  pointer-events: none;
  border: 1px solid #f4d5a72a;
  border-radius: 8px;
  box-shadow: inset 1px 1px 0 #fff1d91e, inset -1px -1px 0 #05050ba8;
}

.card::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at var(--light-x) var(--light-y), #fff2cd19, transparent 54%),
    linear-gradient(125deg, #fff8df0a, transparent 35%, transparent 62%, #03040922);
  opacity: .45;
  transition: opacity .25s ease-out;
}

.card:hover::after, .card:focus-visible::after { opacity: 1; }

.card.depth-active:not(.selected):not(.summon):not(.drawCard):not(.combat-moving):not(.deathGhost):not(.impact) {
  transform: perspective(950px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  border-color: #dbc7aa;
  box-shadow: 0 1px 0 #ffe7c565, 1px 4px 0 #80644e, 2px 6px 0 #23191e, 0 18px 30px #0008;
}

.card.unit { --card-lift: -5px; }
.card .art { box-shadow: inset 0 1px 0 #e7d4ba14; }
.card .cardText { position: relative; background: linear-gradient(180deg, #211b2680, #17131d); }
.card h4 { color: #f6ead6; text-shadow: 0 1px 3px #0009; }
.card .cost { box-shadow: inset 0 1px 1px #b7f5ff5c, 0 2px 0 #10151d, 0 4px 9px #0009; }
.card .type, .card .state { box-shadow: 0 2px 5px #0006; }
.card .cardStats { text-shadow: 0 2px 4px #0008; }
.card.playable::before { border-color: #edc98c57; }
.card.ready::before { border-color: #aee7b05c; }
.card.selected::before { border-color: #ffe1a582; }
.card.target::before { border-color: #f9a4a98a; }
.card.combat-moving { transition: none; will-change: transform; z-index: 50; }
.card.combat-moving::after { opacity: .65; }

/* The FX layer stays outside the camera so targets remain aligned on screen. */
#fx .combatVignette {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 27%, #04060b65 72%, #010205b8 100%);
  animation: combatVignette .95s ease-in-out both;
}

#fx .impactRing {
  position: absolute;
  z-index: 2;
  width: 140px;
  height: 140px;
  border: 2px solid var(--impact-color);
  border-radius: 50%;
  box-shadow: 0 0 16px color-mix(in srgb, var(--impact-color) 42%, transparent), inset 0 0 13px color-mix(in srgb, var(--impact-color) 22%, transparent);
  animation: impactRipple .68s cubic-bezier(.1,.55,.24,1) both;
}

#fx .impactRing.shield, #fx .impactRing.shield-contact { border-width: 4px; --impact-color: #8fe7ff; }
#fx .impactRing.shield-contact {
  background: radial-gradient(circle, #a6eaff08 40%, #9fecff29 72%, transparent);
  box-shadow: 0 0 24px #68d9ff70, inset 0 0 24px #81dfff33;
}
#fx .impactRing.shield-contact::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #d7f7ffa3;
  border-radius: 50%;
}
#fx .impactRing.heal { --impact-color: #92edb3; }
#fx .impactRing.void { --impact-color: #c3a0ff; }

#fx .impactFlash {
  position: absolute;
  z-index: 3;
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0d561 0%, color-mix(in srgb, var(--impact-color) 44%, transparent) 18%, transparent 67%);
  mix-blend-mode: screen;
  animation: impactBloom .34s ease-out both;
}

#fx .combatStreak {
  position: absolute;
  z-index: 2;
  width: var(--length, 150px);
  height: 4px;
  transform-origin: 0 50%;
  border-radius: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--impact-color) 55%, transparent) 45%, var(--impact-color));
  box-shadow: 0 0 11px color-mix(in srgb, var(--impact-color) 50%, transparent);
  animation: combatSlash .38s ease-out both;
}

#fx .combatStreak::after {
  content: '';
  position: absolute;
  inset: -5px 0;
  border-radius: 100%;
  background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--impact-color) 16%, transparent));
}

#fx .combatDebris {
  position: absolute;
  z-index: 3;
  width: var(--size, 5px);
  height: calc(var(--size, 5px) * 1.8);
  pointer-events: none;
  background: var(--impact-color);
  border-radius: 1px;
  box-shadow: 0 0 7px color-mix(in srgb, var(--impact-color) 48%, transparent);
  animation: combatFragment .72s cubic-bezier(.15,.58,.5,1) both;
}

#fx .floating { z-index: 6; text-shadow: 0 2px 2px #0a0613, 0 0 14px #000c; }
#fx .turnBanner, #fx .actionToast { z-index: 7; }

@keyframes combatVignette {
  0% { opacity: 0; }
  22%, 54% { opacity: .78; }
  100% { opacity: 0; }
}

@keyframes impactRipple {
  0% { opacity: .8; transform: translate(-50%,-50%) scale(.15) rotateX(35deg); }
  38% { opacity: .6; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.2) rotateX(35deg); }
}

@keyframes impactBloom {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  25% { opacity: .66; transform: translate(-50%,-50%) scale(.9); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.35); }
}

@keyframes combatSlash {
  0% { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(.2); }
  30% { opacity: .8; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(.65); }
}

@keyframes combatFragment {
  0% { opacity: .9; transform: translate(-50%,-50%) rotate(0deg) scale(1); }
  45% { opacity: .85; transform: translate(calc(var(--x, 0px) * .55 - 50%), calc(var(--y, 0px) * .55 - 25px - 50%)) rotate(calc(var(--spin, 180deg) * .55)) scale(.9); }
  100% { opacity: 0; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) + 45px - 50%)) rotate(var(--spin, 180deg)) scale(.35); }
}

@media (max-width: 760px) {
  .arena { box-shadow: inset 0 1px 0 #e0b68825, 0 3px 0 #08070d, 0 16px 35px #0007; }
  .arenaFloor { inset: 17% 2% 18%; opacity: .45; }
  .card { --card-lift: -5px; }
  #fx .impactRing { width: 100px; height: 100px; }
  #fx .impactFlash { width: 110px; height: 110px; }
}

@media (hover: none), (pointer: coarse) {
  .card.depth-active:not(.selected):not(.summon):not(.drawCard):not(.combat-moving):not(.deathGhost):not(.impact) { transform: none; }
  .card::after { opacity: .35; }
}

.flat .arenaFloor { display: none; }
.flat .arena {
  background: radial-gradient(ellipse at center, #34263d99, #13131dcf), linear-gradient(135deg, #182934, #391b2b);
  box-shadow: 0 15px 60px #0005;
}
.flat .card { box-shadow: 0 7px 15px #0004; }
.flat .card::before { box-shadow: none; border-color: #f4d5a714; }
.flat .card::after { display: none; }
.flat .card.depth-active:not(.selected):not(.summon):not(.drawCard):not(.combat-moving):not(.deathGhost):not(.impact) {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px #0007;
}
.flat .portrait { box-shadow: 0 0 22px #9c566844; }
.flat .leader { box-shadow: none; }

.reduced .card.depth-active:not(.selected):not(.summon):not(.drawCard):not(.combat-moving):not(.deathGhost):not(.impact) { transform: none; }
.reduced #fx .combatVignette, .reduced #fx .impactRing, .reduced #fx .impactFlash,
.reduced #fx .combatStreak, .reduced #fx .combatDebris { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card.depth-active:not(.selected):not(.summon):not(.drawCard):not(.combat-moving):not(.deathGhost):not(.impact) { transform: none; }
  #fx .combatVignette, #fx .impactRing, #fx .impactFlash,
  #fx .combatStreak, #fx .combatDebris { display: none; }
}
html,body{overflow-x:clip}

/* ---------- Game feel (feel.js) ---------- */
#fx .screenFlash { position: fixed; inset: 0; opacity: 0; mix-blend-mode: screen; z-index: 8; }
#fx .edgeFlash { position: fixed; inset: 0; opacity: 0; z-index: 8; box-shadow: inset 0 0 120px 30px var(--edge); }
#fx .popNumber { position: absolute; translate: -50% -50%; z-index: 9; font:800 36px Georgia, serif; color: #ff8fa0; white-space: nowrap; -webkit-text-stroke: 1px #2a0b18; text-shadow: 0 3px 0 #2a0b18, 0 0 18px #ff4d6d99; will-change: transform, opacity; }
#fx .popNumber.crit { color: #fff0c2; text-shadow: 0 3px 0 #3a1a08, 0 0 24px #ff9b4d, 0 0 50px #ff4d6d88; }
#fx .popNumber.heal { color: #9af0bd; font-family: inherit; font-weight: 700; -webkit-text-stroke: 0; text-shadow: 0 2px 4px #000c; }
#fx .popNumber.tie { color: #9fe9ff; letter-spacing: 4px; text-shadow: 0 2px 0 #06222c, 0 0 18px #6fdcff88; }
.lifeTrack { position: relative; }
.lifeTrack i { position: relative; z-index: 1; }
.lifeTrack i.lag { position: absolute; left: 0; top: 0; z-index: 0; background: #fff3e6; width: var(--to); animation: lagDrain .7s .35s cubic-bezier(.4,0,.2,1) both; }
@keyframes lagDrain { from { width: var(--from); } to { width: var(--to); } }
.slotInfo .force { display: inline-block; min-width: 1.6em; }
.slot.won .card { box-shadow: 0 0 0 2px #e9c77d, 0 0 28px #e9c77d77; }
.slot.lost .card { filter: grayscale(.65) brightness(.72); transition: filter .5s; }
.slot.tie .card { box-shadow: 0 0 0 2px #8fe7fa99; }
.duelHand .card.ponder { translate: 0 6px; box-shadow: 0 0 0 2px #b798f2, 0 0 22px #b798f288; transition: translate .15s, box-shadow .15s; }
#gameView.danger::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; box-shadow: inset 0 0 110px #c02a4a66; animation: heartbeat 1.1s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 24% { opacity: .5; } 36% { opacity: .9; } }
#gameView .arena { transition: filter 1.2s; }
#gameView.defeat .arena { filter: grayscale(.7) brightness(.7); }
#gameView.victory .arena { filter: saturate(1.25) brightness(1.08); }
#fight:active, #deckPlay:active, #start:active { scale: .96; }
.reduced #gameView.danger::after { animation: none; opacity: .6; }
@media (prefers-reduced-motion: reduce) { #gameView.danger::after { opacity: .6; } }
/* "Duelo · Aprendiz" e a trilha de rounds ficam sempre por cima da carta que cresce no hover (pedido do gab, 01/10/2026). */
.midLine{z-index:6;pointer-events:none}
.midLine :is(button,a,[tabindex]){pointer-events:auto}
.roundInfo small{max-width:none;white-space:nowrap;padding:3px 8px;border-radius:999px;background:#120d19d9;border:1px solid #9a739140}
.roundInfo .rounds span{box-shadow:0 2px 6px #0009}
/* HUD do jogador: vida e mana à direita, como o do oponente (pedido do gab, 01/10/2026). */
.hudPlayer .stats{order:3;margin-left:auto;margin-right:0}
.hudPlayer .hudTools{order:2;margin-left:clamp(10px,2vw,28px)}
.hudPlayer:has(#manaPanel:not([hidden])) .stats{margin-left:auto}
#attackPreview[hidden]{display:none}