/* Verso das cartas (assets/verso.webp) e a virada do início do combate (deal.js). */
:root{--verso:url('assets/verso.webp')}
#gameView.dealing :is(#enemyHand,#playerHand){visibility:hidden}
.dealLayer{position:fixed;inset:0;z-index:60;pointer-events:none;perspective:1400px}
.dealCard{position:fixed}
.dealInner{position:absolute;inset:0;transform-style:preserve-3d}
.dealBack,.dealInner>.dealFront{position:absolute!important;inset:0;margin:0!important;padding:0!important;display:block!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dealBack{border-radius:10px;background:#0b0812 var(--verso) center/cover;box-shadow:0 14px 26px #000c,0 0 18px #ffd36b44;border:1px solid #e8c98b88}
.dealInner>.dealFront{transform:rotateY(180deg)}
.dealFront>.card.duel{width:100%!important;height:100%!important;margin:0!important}
.dealBack { background-size: 100% 100% !important; }
/* Nitidez na virada: sem escala durante a rotação (a escala fazia o navegador reamostrar o texto da carta e ele ficava embaçado até parar) e camadas promovidas
   para a GPU desde o início, com o texto rasterizado no tamanho final. */
.dealInner{will-change:transform}
.dealInner>.dealFront{will-change:transform;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* Cópia que voa da carta ao modal (ui.js flipOpen): gira com a face e, no meio do giro, o verso. */
.flipGhost .flipSpin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.flipGhost .flipFront,.flipGhost .flipBack{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipGhost .flipBack{transform:rotateY(180deg);border-radius:10px;background:#0b0812 var(--verso) center/100% 100%;box-shadow:0 14px 26px #000c,0 0 18px #ffd36b44;border:1px solid #e8c98b88}