/* GC-FERDI-FLIP-002
   Acute data stays on the front. Clicking only the artwork flips to secondary
   cost/time/effect information. Technical-data modals remain the deeper layer. */

[data-card-flip] {
  perspective: 1200px;
  overflow: hidden;
  align-self: start;
}

.gc-card-flip-stage {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 280ms cubic-bezier(.2,.72,.2,1),
    height 220ms cubic-bezier(.2,.72,.2,1);
  will-change: transform, height;
}

[data-card-flip].is-flipped .gc-card-flip-stage {
  transform: rotateY(180deg);
}

.gc-card-flip-face {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gc-card-flip-face--front {
  position: relative;
  transform: rotateY(0deg);
}

.gc-card-flip-face--back {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: visible;
  transform: rotateY(180deg);
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 12%, rgba(54, 211, 153, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(4, 17, 29, 0.99), rgba(2, 11, 20, 0.99));
  border: 1px solid rgba(91, 236, 183, 0.18);
}

[data-card-flip].is-flipped .gc-card-flip-face--front {
  pointer-events: none;
}

[data-card-flip].is-flipped .gc-card-flip-face--back {
  pointer-events: auto;
}

.gc-bld-hero-img-stack[data-card-flip-trigger] {
  /* Preserve the canonical hero stack geometry from style.css. The flip trigger
     is the image layer itself; making it relative collapses the absolutely
     positioned image stack to 0px height and removes the click hitbox. */
  position: absolute;
  inset: 0;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}

.gc-bld-hero-img-stack[data-card-flip-trigger]::after {
  content: "↻";
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 6;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(123, 230, 194, 0.42);
  border-radius: 999px;
  background: rgba(2, 14, 24, 0.78);
  color: #b7ffe6;
  font-size: 13px;
  line-height: 1;
  opacity: 0.72;
  transform: translateZ(1px);
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.gc-bld-hero-img-stack[data-card-flip-trigger]:hover::after,
.gc-bld-hero-img-stack[data-card-flip-trigger]:focus-visible::after {
  opacity: 1;
  transform: translateZ(1px) rotate(24deg) scale(1.06);
  background: rgba(12, 50, 55, 0.94);
}

.gc-bld-hero-img-stack[data-card-flip-trigger]:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(123, 230, 194, 0.72);
}

.gc-card-flip-backbar {
  min-height: 37px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid rgba(119, 180, 255, 0.16);
  background: rgba(7, 25, 39, 0.9);
  color: var(--gc-text, #e7f2ff);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.gc-card-flip-backbar:hover,
.gc-card-flip-backbar:focus-visible {
  background: rgba(13, 48, 59, 0.96);
}

.gc-card-flip-backbar:focus-visible {
  outline: 1px solid rgba(123, 230, 194, 0.75);
  outline-offset: -1px;
}

.gc-card-flip-backbar__icon {
  color: #8ff0cf;
  font-size: 1rem;
}

.gc-card-flip-backbar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
}

.gc-card-flip-backbar__target {
  color: var(--gc-accent, #79c9ff);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.gc-progression-reveal__body,
.gc-card-flip-back__body {
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
}

.gc-progression-reveal__time,
.gc-card-flip-back__time {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(119, 180, 255, 0.14);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--gc-text-muted, #9aafc8);
  font-size: 0.72rem;
}

.gc-card-flip-face--back .gc-bld-hero-time-chip {
  position: static;
  inset: auto;
  margin: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--gc-text, #e7f2ff);
}

.gc-card-flip-face--back .gc-bld-effect-bundle,
.gc-card-flip-face--back .gc-card-benefit-block,
.gc-card-flip-face--back .gc-bld-card-meta,
.gc-card-flip-face--back .gc-bld-card-costs,
.gc-card-flip-face--back .gc-compact-unit-stats,
.gc-card-flip-face--back .gc-unit-build-time {
  margin-top: 0;
  margin-bottom: 0;
}

.gc-card-flip-face--back .gc-bld-card-meta--costs-only {
  padding-top: 0;
}

@media (max-width: 640px) {
  .gc-card-flip-back__body,
  .gc-progression-reveal__body {
    padding: 7px 8px 8px;
  }

  .gc-card-flip-backbar {
    min-height: 34px;
    padding: 5px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-card-flip-stage,
  .gc-bld-hero-img-stack[data-card-flip-trigger]::after {
    transition: none;
  }
}