.tcg-grid {
  margin: -.55rem;
  padding: .55rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1.35rem);
  overflow: visible;
  isolation: isolate;
  grid-auto-flow: dense;
}

.tcg-card {
  --card-accent: #70f4ff;
  --card-corner-1: var(--card-accent);
  --card-corner-2: var(--card-accent);
  --card-corner-3: var(--card-accent);
  --card-corner-4: var(--card-accent);
  position: relative;
  min-width: 0;
  overflow: visible;
}

.tcg-card--structure {
  grid-column: span 2;
}

.tcg-card--structure .tcg-card-image {
  aspect-ratio: 744 / 532;
}

.tcg-card > button {
  --tcg-tilt-x: 0deg;
  --tcg-tilt-y: 0deg;
  --tcg-glare-x: 50%;
  --tcg-glare-y: 50%;
  --tcg-glare-opacity: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  display: grid;
  overflow: visible;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.tcg-card:hover,
.tcg-card:focus-within {
  z-index: 80;
}

.tcg-card-visual {
  position: relative;
  display: grid;
  gap: .1rem;
  overflow: visible;
  transform: perspective(900px) rotateX(var(--tcg-tilt-x)) rotateY(var(--tcg-tilt-y));
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.2, .72, .25, 1), filter 220ms ease;
  will-change: transform;
}

.tcg-card > button.is-reveal-origin .tcg-card-visual {
  visibility: hidden;
}

.tcg-card > button:is(:hover, :focus-visible) {
  z-index: 2;
}

.tcg-card > button:is(:hover, :focus-visible) .tcg-card-visual {
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .42));
  transform: translate3d(var(--tcg-hover-shift-x, 0px), var(--tcg-hover-shift-y, -8px), 0) perspective(900px) rotateX(var(--tcg-tilt-x)) rotateY(var(--tcg-tilt-y)) scale(var(--tcg-hover-scale, 1.09));
}

.tcg-card-image {
  position: relative;
  aspect-ratio: 744 / 1039;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 24%, rgba(91, 129, 136, .42));
  border-radius: 4.7% / 3.4%;
  background: #061016;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
  transform: translateZ(0);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.tcg-card-image::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at var(--tcg-glare-x) var(--tcg-glare-y), rgba(255, 255, 255, .62), rgba(105, 217, 230, .18) 18%, transparent 48%),
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .13) 46%, transparent 64%);
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.tcg-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tcg-card > button:is(:hover, :focus-visible) .tcg-card-image {
  border-color: color-mix(in srgb, var(--card-accent) 76%, white);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .52), 0 0 0 2px color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.tcg-card > button:hover .tcg-card-image::after {
  opacity: var(--tcg-glare-opacity);
}

.tcg-card > button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}

.tcg-card-selection-frame {
  position: absolute;
  z-index: 8;
  inset: -.34rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transform-origin: center;
  transition: opacity 220ms cubic-bezier(.2, .72, .25, 1);
}

.tcg-card-selection-frame i {
  position: absolute;
  width: 1rem;
  height: 1rem;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--card-accent) 84%, transparent));
  transform: scale(1);
}

.tcg-card-selection-frame i:nth-child(1) { top: 0; left: 0; border-top: 3px solid var(--card-corner-1); border-left: 3px solid var(--card-corner-1); transform-origin: bottom right; }
.tcg-card-selection-frame i:nth-child(2) { top: 0; right: 0; border-top: 3px solid var(--card-corner-2); border-right: 3px solid var(--card-corner-2); transform-origin: bottom left; }
.tcg-card-selection-frame i:nth-child(3) { right: 0; bottom: 0; border-right: 3px solid var(--card-corner-3); border-bottom: 3px solid var(--card-corner-3); transform-origin: top left; }
.tcg-card-selection-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom: 3px solid var(--card-corner-4); border-left: 3px solid var(--card-corner-4); transform-origin: top right; }

.tcg-card > button:is(:hover, :focus-visible) .tcg-card-selection-frame {
  opacity: 1;
}

.tcg-card > button:is(:hover, :focus-visible) .tcg-card-selection-frame i {
  animation: tcg-corner-breathe 980ms cubic-bezier(.45, 0, .55, 1) 160ms infinite;
}

@keyframes tcg-corner-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

.tcg-card-variant {
  position: absolute;
  top: 3.1rem;
  right: -.1rem;
  padding: .3rem .5rem .28rem .7rem;
  color: #160a1d;
  background: linear-gradient(90deg, #f5d77b, #eb80ce);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform-origin: right top;
  transition:
    transform 240ms cubic-bezier(.2, .72, .25, 1),
    filter 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

.tcg-card-variant:hover {
  transform: translate(-.14rem, .06rem) scale(1.24);
  filter: saturate(1.14) brightness(1.05);
  box-shadow: 0 .32rem .8rem rgba(0, 0, 0, .32);
}

.tcg-card-number {
  min-height: 1.5rem;
  padding: .38rem .15rem .12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: #6f9399;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tcg-card-number b {
  color: var(--card-accent);
  font-weight: 900;
}

body.tcg-card-reveal-open {
  overflow: hidden;
}

.tcg-card-flight-stage {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  color: #eaf8fa;
  pointer-events: auto;
  perspective: 1800px;
}

.tcg-card-flight-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--flight-accent) 18%, transparent), transparent 30rem),
    rgba(0, 7, 11, .82);
  backdrop-filter: blur(9px);
  cursor: zoom-out;
}

.tcg-card-flight {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 4.7% / 3.4%;
  background: none;
  color: inherit;
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 45px rgba(0, 0, 0, .68));
  will-change: left, top, width, height, opacity, transform;
  cursor: grab;
}

.tcg-card-flight:active { cursor: grabbing; }

.tcg-card-flight:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flight-accent) 78%, white);
  outline-offset: 5px;
}

.tcg-card-flight-tilt,
.tcg-card-flight-inner,
.tcg-card-flight-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tcg-card-flight-tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 50%;
  --glare-opacity: 0;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 120ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.tcg-card-flight-inner {
  transform-style: preserve-3d;
  will-change: transform;
}

.tcg-card-flight-pulse {
  position: absolute;
  z-index: -1;
  inset: -.5%;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--flight-accent) 78%, white);
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--flight-accent) 20%, transparent), transparent 68%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--flight-accent) 30%, transparent);
  pointer-events: none;
}

.tcg-card-flight-face {
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--flight-accent) 66%, #efffff);
  background: #061016;
  box-shadow: inset 0 0 0 3px rgba(3, 13, 18, .76), 0 0 30px color-mix(in srgb, var(--flight-accent) 25%, transparent);
  backface-visibility: hidden;
}

.tcg-card-flight-front img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tcg-card-flight-glare {
  position: absolute;
  inset: 0;
  opacity: var(--glare-opacity);
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, .62), rgba(105, 217, 230, .18) 18%, transparent 48%),
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .13) 46%, transparent 64%);
  mix-blend-mode: screen;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.tcg-card-flight-variant {
  position: absolute;
  z-index: 3;
  top: 13.8%;
  right: -.15rem;
  padding: .42rem .72rem .38rem .9rem;
  color: #160a1d;
  background: linear-gradient(90deg, #f5d77b, #eb80ce);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  font-size: clamp(.52rem, .75vw, .72rem);
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform-origin: right center;
  transition: transform 220ms cubic-bezier(.2, .72, .25, 1), filter 180ms ease, box-shadow 180ms ease;
}

.tcg-card-flight-variant:hover {
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .34);
  transform: translateX(-.18rem) scale(1.12);
}

.tcg-card-flight-variant[hidden] { display: none; }

.tcg-card-flight-back {
  background: #17120d;
  border-color: transparent;
  box-shadow: 0 0 30px rgba(8, 4, 1, .7);
  transform: rotateY(180deg);
}

.tcg-card-flight-stage.is-card-back .tcg-card-flight:focus-visible {
  outline-color: #cfb06b;
}

.tcg-card-flight-back-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.tcg-card-flight-details {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tcg-card-flight-side {
  position: absolute;
  top: 50%;
  width: min(26vw, 22rem);
  max-height: min(86dvh, 50rem);
  padding-block: 1rem;
  overflow: auto;
  opacity: 0;
  pointer-events: auto;
  scrollbar-color: color-mix(in srgb, var(--flight-accent) 55%, transparent) transparent;
  scrollbar-width: thin;
  translate: 0 -50%;
}

.tcg-card-flight-side--identity {
  right: calc(50% + (var(--flight-card-width) / 2) + clamp(1.4rem, 3vw, 3.5rem));
  padding-right: 1.15rem;
  text-align: right;
  border-right: 2px solid color-mix(in srgb, var(--flight-accent) 72%, white);
  background: linear-gradient(270deg, color-mix(in srgb, var(--flight-accent) 9%, rgba(4, 17, 23, .72)), transparent 88%);
}

.tcg-card-flight-side--text {
  left: calc(50% + (var(--flight-card-width) / 2) + clamp(1.4rem, 3vw, 3.5rem));
  padding-left: 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--flight-accent) 72%, white);
  background: linear-gradient(90deg, color-mix(in srgb, var(--flight-accent) 9%, rgba(4, 17, 23, .72)), transparent 88%);
}

.tcg-card-flight-kicker {
  margin: 0 0 .55rem;
  color: color-mix(in srgb, var(--flight-accent) 78%, white);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tcg-card-flight-side h2 {
  margin: 0 0 1.2rem;
  color: #f1fcfd;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2.55rem);
  letter-spacing: -.03em;
  line-height: .96;
}

.tcg-card-flight-side dl {
  margin: 0 0 1rem;
  border-top: 1px solid rgba(105, 217, 230, .18);
}

.tcg-card-flight-stat {
  min-height: 2.55rem;
  padding: .55rem 0;
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: center;
  gap: .68rem;
  border-bottom: 1px solid rgba(105, 217, 230, .14);
}

.tcg-card-flight-stat-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.tcg-card-flight-side--identity .tcg-card-flight-stat-copy {
  flex-direction: row-reverse;
}

.tcg-card-flight-stat-image,
.tcg-card-flight-stat-svg {
  width: 1.12rem;
  height: 1.12rem;
  display: block;
  justify-self: center;
  object-fit: contain;
}

.tcg-card-flight-stat-svg {
  color: color-mix(in srgb, var(--flight-accent) 68%, white);
  fill: currentColor;
}

.tcg-card-flight-stat-image.is-ink-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(105, 217, 230, .38));
}

.tcg-card-flight-color {
  width: .72rem;
  height: .72rem;
  border: 1px solid color-mix(in srgb, var(--stat-color) 68%, white);
  border-radius: 50%;
  background: var(--stat-color);
  box-shadow: 0 0 9px color-mix(in srgb, var(--stat-color) 58%, transparent);
  justify-self: center;
}

.tcg-card-flight-side dt,
.tcg-product small {
  color: #6f979d;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tcg-card-flight-side dd {
  margin: 0;
  color: #e6f6f8;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.25;
}

.tcg-card-flight-side > a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: color-mix(in srgb, var(--flight-accent) 78%, white);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.tcg-card-flight-side > div + div {
  margin-top: 1.25rem;
}

.tcg-card-flight-side h3 {
  margin: 0 0 .5rem;
  color: color-mix(in srgb, var(--flight-accent) 78%, white);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tcg-rules-text,
.tcg-flavor {
  margin: 0;
  padding: .85rem 0 .85rem 1rem;
  color: #d2e3e5;
  border-left: 1px solid color-mix(in srgb, var(--flight-accent) 48%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--flight-accent) 8%, rgba(6, 22, 28, .58)), transparent);
  font-size: clamp(.82rem, .95vw, .96rem);
  line-height: 1.62;
}

.tcg-flavor {
  color: #9fb4b8;
  border-left-color: rgba(105, 217, 230, .24);
  font-style: italic;
}

.tcg-inline-icon {
  width: auto;
  height: 1.35em;
  margin: 0 .1em;
  display: inline-block;
  vertical-align: -.28em;
}

.tcg-product {
  padding: .8rem 0 .8rem 1rem;
  display: grid;
  gap: .25rem;
  border-left: 1px solid rgba(105, 217, 230, .2);
  background: linear-gradient(90deg, rgba(5, 20, 27, .58), transparent);
}

.tcg-product strong {
  color: #eefbfc;
  font-size: .9rem;
}

.tcg-product span {
  color: #72979d;
  font-size: .62rem;
}

.tcg-card-flight-navigation {
  position: absolute;
  z-index: 18;
  top: calc(50% + (var(--flight-card-height) / 2) + clamp(1.15rem, 1.8vw, 1.55rem));
  left: 50%;
  display: grid;
  grid-template-columns: 3rem minmax(12.5rem, 15.5rem) 3rem;
  align-items: stretch;
  gap: .72rem;
  opacity: 0;
  pointer-events: none;
  translate: -50% 0;
}

.tcg-card-flight-navigation button {
  position: relative;
  min-height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--cyan);
  border: 1px solid rgba(105, 217, 230, .34);
  background: rgba(4, 18, 24, .94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.tcg-card-flight-navigation .tcg-card-flight-back-list {
  isolation: isolate;
  padding-inline: 1.75rem;
  color: #eefbfc;
  border: 0;
  background: transparent;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tcg-card-flight-navigation .tcg-card-flight-back-list::before,
.tcg-card-flight-navigation .tcg-card-flight-back-list::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background: color-mix(in srgb, var(--cyan) 48%, transparent);
  transition: background 150ms ease, filter 150ms ease;
}

.tcg-card-flight-navigation .tcg-card-flight-back-list::after {
  z-index: -1;
  inset: 1px;
  background: rgba(4, 18, 24, .98);
}

.tcg-card-flight-navigation button:not(:disabled):hover,
.tcg-card-flight-navigation button:not(:disabled):focus-visible {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 82%, transparent);
  background: rgba(5, 20, 27, .98);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .46), 0 0 18px color-mix(in srgb, var(--cyan) 18%, transparent), inset 0 0 12px color-mix(in srgb, var(--cyan) 7%, transparent);
  outline: 0;
}

.tcg-card-flight-navigation .tcg-card-flight-back-list:not(:disabled):is(:hover, :focus-visible)::before {
  background: color-mix(in srgb, var(--cyan) 88%, transparent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 30%, transparent));
}

.tcg-card-flight-navigation .tcg-card-flight-back-list:not(:disabled):is(:hover, :focus-visible)::after {
  background: color-mix(in srgb, var(--cyan) 7%, rgba(4, 18, 24, .98));
}

.tcg-card-flight-navigation button:disabled {
  opacity: .32;
  cursor: default;
}

.tcg-card-flight-navigation svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.tcg-card-flight-close {
  position: absolute;
  z-index: 20;
  top: clamp(1rem, 2vw, 1.8rem);
  right: clamp(1rem, 2vw, 1.8rem);
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  color: #ff6b72;
  border: 1px solid color-mix(in srgb, #ff6b72 54%, transparent);
  background: rgba(4, 23, 30, .9);
  box-shadow: 0 0 18px rgba(255, 79, 91, .1), inset 0 0 0 1px rgba(255, 79, 91, .07);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.tcg-card-flight-close:hover,
.tcg-card-flight-close:focus-visible {
  color: #ff626c;
  border-color: rgba(255, 98, 108, .86);
  background: rgba(5, 20, 27, .98);
  box-shadow: 0 0 24px rgba(255, 79, 91, .2), inset 0 0 12px rgba(255, 79, 91, .06);
  outline: 0;
}

.tcg-card-flight-close svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.tcg-modal-control-frame {
  position: absolute;
  z-index: 2;
  inset: -.28rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.tcg-modal-control-frame i {
  position: absolute;
  width: .7rem;
  height: .7rem;
  color: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
}

.tcg-modal-control-frame i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.tcg-modal-control-frame i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.tcg-modal-control-frame i:nth-child(3) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.tcg-modal-control-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }

:is(.tcg-card-flight-navigation button:not(:disabled), .tcg-card-flight-close):is(:hover, :focus-visible) > .tcg-modal-control-frame {
  opacity: 1;
}

.tcg-card-flight-stage.is-revealed .tcg-card-flight-side,
.tcg-card-flight-stage.is-revealed .tcg-card-flight-close,
.tcg-card-flight-stage.is-revealed .tcg-card-flight-navigation {
  opacity: 1;
}

.tcg-card-flight-stage.is-revealed .tcg-card-flight-navigation { pointer-events: auto; }