.tg-surface {position:absolute;inset:0;width:100%;height:100%;z-index:150;pointer-events:none}
.tg-surface[hidden],.tgs-tray[hidden]{display:none}
.tg-ready .tt-card-hit>.tt-back,.tg-ready .tgs-piece>:is(img,i){visibility:hidden}
.tgs-tray {
  position:absolute;z-index:3;left:var(--tr-rail,0px);right:0;bottom:0;height:clamp(110px,23%,220px);
  display:flex;justify-content:center;pointer-events:none;
  background:linear-gradient(to top,#15100de8,#1c130cb5 50%,transparent);
}
.tgs-row {position:relative;width:min(80%,480px);height:100%;pointer-events:none}
.tgs-piece {
  position:absolute;left:calc(var(--slot) * 100%);top:52%;padding:0;margin:0;
  width:auto;height:min(78%,145px);aspect-ratio:3/5;border:0;border-radius:5%;
  transform:translate(-50%,-50%) perspective(850px) rotateZ(var(--turn)) rotateX(26deg);
  transform-origin:center;background:transparent;box-shadow:0 2px 0 #8e724b,3px 6px 9px #0503039c;
  cursor:pointer;pointer-events:auto;transform-style:preserve-3d;
}
.tgs-piece[aria-pressed=true]{outline:1px solid #f8d69c;outline-offset:3px}
.tgs-piece:focus-visible {outline:3px solid #ffeaaf;outline-offset:4px}
.tgs-piece img,.tgs-piece .tgs-back {position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;backface-visibility:hidden;pointer-events:none}
.tgs-piece[data-reversed=true] img{transform:rotate(180deg)}
.tgs-back {background:#302129 url('assets/tarot-back.webp') center/100% 100%;transform:rotateY(180deg)}
@keyframes tgs-place{
  from{transform:translate(-50%,-115%) perspective(850px) rotateZ(-13deg) rotateX(35deg) rotateY(180deg) scale(.85)}
  to{transform:translate(-50%,-50%) perspective(850px) rotateZ(var(--turn)) rotateX(26deg) rotateY(0)}
}
.tgs-deal .tgs-piece {animation:tgs-place .62s cubic-bezier(.23,.55,.32,1) var(--delay) backwards}
@media(max-width:800px) {
  .tgs-tray {left:0;height:29%;min-height:61px}
  .tgs-row {width:min(72%,310px)}
}
@media(prefers-reduced-motion:reduce){.tgs-deal .tgs-piece{animation:none}}