/* Tarot's own look on the game template (static/game.css styles the shell), in the Inlay language: a flat stage, no
   star chart. Three cards in reading order, Past, Present (larger, raised) and Future, drawn in gold line on navy; the
   next card to turn breathes gold, a tap turns it; under each a hairline tag with its multiplier (mint up, silver back,
   coral for a dark card). The formula sits beside the plate (on phones under the cards). */

.tr-stage { --tw: 148px; --tm: 172px; position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3.4vw, 40px); padding: 26px 12px 18px; }
.tr-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; width: calc(var(--tw) + 14px); -webkit-tap-highlight-color: transparent; }
.tr-slot.tr-mid { width: calc(var(--tm) + 14px); margin-top: calc((var(--tw) - var(--tm)) * 1.6); }
.tr-pos { font: 600 13px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transition: color .2s; }
.tr-slot.tr-next .tr-pos, .tr-slot.tr-turned .tr-pos { color: var(--ink-2); }
.tr-card { width: var(--tw); aspect-ratio: 150 / 240; perspective: 900px;
  transform: translateY(var(--ly, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform .38s var(--e-out), opacity .4s var(--e-out); }
.tr-slot.tr-mid .tr-card { width: var(--tm); }
.tr-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3, 1.2, .5, 1); }
.gm.gm-fast .tr-in { transition-duration: .12s; }
.tr-f { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 12px 24px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .06) inset; transition: box-shadow .3s; }
.tr-f svg { display: block; width: 100%; height: 100%; }
.tr-face { transform: rotateY(180deg); }
.tr-slot.tr-turned .tr-in { transform: rotateY(180deg); }
.tr-slot.tr-lift .tr-card { --ly: -10px; --sc: 1.03; }
.tr-slot.tr-next { cursor: pointer; }
.tr-slot.tr-next .tr-back { animation: tr-breathe 1.2s var(--e-out) infinite; }
@keyframes tr-breathe { 0%, 100% { box-shadow: 0 0 0 2px rgb(216 165 72 / .35), 0 12px 24px rgb(0 0 0 / .45); }
  50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 12px 24px rgb(0 0 0 / .45); } }
.tr-slot.tr-k-up .tr-face { box-shadow: 0 0 0 1.5px var(--win), 0 12px 24px rgb(0 0 0 / .45); }
.tr-slot.tr-k-back .tr-face { box-shadow: 0 0 0 1.5px var(--back), 0 12px 24px rgb(0 0 0 / .45); }
.tr-slot.tr-k-dead .tr-face { box-shadow: 0 0 0 2px var(--loss), 0 12px 24px rgb(0 0 0 / .45); }
.tr-slot.tr-out .tr-card { opacity: .3; }

/* the tag under a card: its multiplier and its name */
.tr-ln { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; border: 0; background: var(--lnc);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.tr-ln::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.tr-tag { --fill: var(--well); --lnc: transparent; width: 100%; min-height: 70px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--e-settle); }
.tr-tag b { font: 800 24px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.tr-tag span { font: 500 13px/1.08 var(--f-ui); color: var(--ink-2); text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-tag.tr-show { opacity: 1; transform: none; }
.tr-slot.tr-k-up .tr-tag { --lnc: var(--win); } .tr-slot.tr-k-up .tr-tag b { color: var(--win); }
.tr-slot.tr-k-back .tr-tag { --lnc: var(--back); } .tr-slot.tr-k-back .tr-tag b { color: var(--back); }
.tr-slot.tr-k-dead .tr-tag { --lnc: rgb(255 77 103 / .7); } .tr-slot.tr-k-dead .tr-tag b, .tr-slot.tr-k-dead .tr-tag span { color: var(--loss); }
.tr-trace { position: absolute; pointer-events: none; overflow: visible; }
.tr-trace rect { fill: none; stroke: var(--gold); stroke-width: 1.5; }

/* the panel: the four levels two by two, two read-only numbers */
.tr-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-stats.tr-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the formula: beside the plate on wide screens, under the cards on phones */
.tr-say { flex: 0 1 auto; min-width: 0; font: 600 13px/1.1 var(--f-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tr-say:empty { display: none; }
.tr-form { position: absolute; left: 8px; right: 8px; bottom: 10px; display: none; text-align: center; font: 700 17px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-2); }

@media (max-width: 899px) {
  .gm[data-game="tarot"] .gm-play { min-height: 0; }
  .tr-stage { --tw: 88px; --tm: 100px; gap: 12px; padding: 22px 10px 40px; }
  .tr-tag { min-height: 62px; padding: 5px; }
  .tr-tag b { font-size: 19px; }
  .tr-say { display: none; }
  .tr-form { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-in, .tr-card { transition: none; }
  .tr-slot.tr-next .tr-back { animation: none; }
}