/* A physical board with layered cards. No canvas, sensor access or idle animation.
   rotate is independent of the flip's transform and the impact's translate/scale. */
.has-card-depth :is(.duel-position, .card-hand, .mulligan-cards, .deployment-cards, .collection-grid, .deck-card-grid) {
  perspective: 1100px;
  perspective-origin: 50% 42%;
}
.has-card-depth .depth-card {
  rotate: var(--depth-rotation, none);
}
:where(.has-card-depth) .duel-card.depth-card {
  --depth-rest: 1 .45 0 2deg;
  rotate: var(--depth-rotation, var(--depth-rest));
  box-shadow: 0 2px 0 #c4d8df38, 0 5px 0 #07101dde, 0 8px 0 #02091390, 0 17px 24px #0008;
}
.has-card-depth .opponent .duel-card.depth-card { --depth-rest: 1 -.45 0 2deg; }
:where(.has-card-depth) :is(.hand-card, .deploy-card).depth-card {
  box-shadow: 0 2px 0 #d4dee52b, 0 4px 0 #07101df0, 0 11px 18px #0009;
}
.has-card-depth .depth-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 12;
  border: 1px solid #ffffff1c;
  border-radius: inherit;
  box-shadow: inset 1px 1px 0 #ffffff32, inset -1px -2px 0 #02060f9c;
  background: linear-gradient(125deg, #e4f5ff0b, transparent 40%, transparent 75%, #02060c18);
  pointer-events: none;
}
.has-card-depth .depth-tracking::after {
  background: radial-gradient(ellipse at var(--depth-light-x,50%) var(--depth-light-y,40%), #e7f7ff1c, transparent 65%), linear-gradient(125deg, #ffffff08, transparent 60%);
}
.has-card-depth .depth-tracking .portrait.individual-art {
  object-position: calc(50% + var(--depth-art-x,0px)) calc(27% + var(--depth-art-y,0px));
}
.has-card-depth .depth-tracking .hand-art.individual-tool-art {
  background-position: calc(50% + var(--depth-art-x,0px)) calc(0% + var(--depth-art-y,0px));
}
/* Card backs must cover every front treatment at the beginning of a flip. */
.has-card-depth .card-motion-flip.depth-card::after { visibility: hidden; }
.has-card-depth :is(.card-motion-flip, .card-motion-draw).depth-card { rotate: none !important; }
.has-card-depth .is-defeated .duel-card.depth-card { rotate: none; }
.has-card-depth .is-defeated .duel-card.depth-card::after { background: linear-gradient(120deg,#ffffff05,transparent 65%); }
/* Existing winner/impact styles keep their border and glow above this base. */
.has-card-depth .duel-position::before {
  content: '';
  position: absolute;
  bottom: 24px;
  left: 8%;
  width: 84%;
  height: 24px;
  z-index: -1;
  background: radial-gradient(ellipse,#02070ed9,transparent 70%);
  pointer-events: none;
}
.has-card-depth .arena-background::before,
.has-card-depth .arena-background::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.has-card-depth .arena-background::before {
  background: radial-gradient(ellipse at 15% 36%, #7398b51c, transparent 40%), radial-gradient(ellipse at 85% 38%, #e4ad5b0d, transparent 38%);
}
.has-card-depth .arena-background::after {
  background: linear-gradient(0deg, #050b15b3, transparent 37%), linear-gradient(90deg, #050b1533, transparent 18%, transparent 82%, #050b1533);
}
.has-card-depth .arena-ring {
  border-color: #d6c0904d;
  box-shadow: 0 7px 0 #030c14b3, 0 13px 22px #0006, inset 0 0 32px #88bac01a;
  background: radial-gradient(ellipse, #21323c38, #101c2680 54%, #b7c4bf19 55% 56%, transparent 57% 74%, #c8ad6429 75% 76%, transparent 77%);
}
.has-card-depth .arena-ring::before,
.has-card-depth .arena-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.has-card-depth .arena-ring::before { inset: -18px -10px; border: 1px solid #b3cbcc20; }
.has-card-depth .arena-ring::after { inset: 18% 17%; border: 1px solid #cbb98033; box-shadow: 0 0 0 9px #bdced109; }
@media (hover: hover) and (pointer: fine) {
  .has-card-depth .depth-card:not(.card-motion-flip) {
    transition-property: transform, border-color, box-shadow, rotate;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(.18,.75,.25,1);
  }
}
@media (hover: none), (pointer: coarse) {
  .has-card-depth .hand-card.selected.depth-card { rotate: x 2deg; }
  .has-card-depth :is(.hand-card, .deploy-card, .monster-card).depth-card:active:not(:disabled) { rotate: x -2deg; }
}
/* Reduced motion leaves the bevel and the board in place but removes all tilt. */
.has-card-depth.depth-reduced .depth-card,
.reduced-motion .has-card-depth .depth-card { rotate: none !important; transition: none !important; }
.has-card-depth.depth-reduced .depth-tracking .portrait.individual-art,
.reduced-motion .has-card-depth .depth-tracking .portrait.individual-art { object-position: center 27%; }
@media (prefers-reduced-motion: reduce) {
  .has-card-depth .depth-card { rotate: none !important; transition: none !important; }
  .has-card-depth .depth-tracking .portrait.individual-art { object-position: center 27%; }
}