.card-root {
  --card-thickness: 3px;
  --card-orientation: 0deg;
  --card-contact-shadow-resting-width: 86%;
  --card-contact-shadow-resting-blur: 11px;
  --card-contact-shadow-resting-color: rgb(6 21 34 / 21%);
  --card-contact-shadow-resting-y: 7px;
  --card-floating-shadow-resting:
    0 10px 24px rgba(6, 21, 34, 0.21),
    0 3px 5px rgba(6, 21, 34, 0.12);

  position: relative;
  width: 100%;
  /*
   * The shared Card exposes exactly one geometry knob. Gameplay never sets
   * it, so the Table keeps the approved 3:4 that the gesture thresholds,
   * animation endpoints and responsive caps are built on. The Home Hero
   * sets it to match the Final Visual Reference's narrower product shot.
   */
  aspect-ratio: var(--card-ratio, 3 / 4);
  /*
   * The Card is its own size container so the back scales with the Card
   * instead of the viewport. Containment sits above the 3D chain, which
   * keeps the flip, tilt and float layers untouched.
   */
  container-type: inline-size;
  border-radius: var(--card-radius);
  perspective: 1100px;
  perspective-origin: 50% 44%;
}

.game-table__active-card > .card-root {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.game-table__active-card > .card-root.is-dragging {
  cursor: grabbing;
}

.card-contact-shadow {
  position: absolute;
  z-index: 0;
  inset-inline-start: 7%;
  inset-block-end: -1px;
  width: var(--card-contact-shadow-resting-width);
  height: 11px;
  border-radius: 50%;
  background: var(--card-contact-shadow-resting-color);
  filter: blur(var(--card-contact-shadow-resting-blur));
  pointer-events: none;
  transform:
    translateY(var(--card-contact-shadow-resting-y))
    scaleY(0.68);
  transform-origin: center;
}

.card-lift,
.card-float,
.card-tilt,
.card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.card-lift {
  z-index: 1;
  box-shadow: var(--card-floating-shadow-resting);
  transform: translate3d(0, 0, 0);
  transform-origin: center;
}

.card-float {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0) rotateZ(0deg);
}

.card-tilt {
  transform: rotateX(0deg) rotateY(0deg);
  transform-origin: center;
}

.card-inner {
  transform: rotateY(var(--card-orientation));
  transform-origin: center;
}

.card-surface {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.card-back {
  display: grid;
  border: 1px solid rgb(6 21 34 / 92%);
  background:
    /*
     * Top-lit navy, matching the Final Visual Reference: the crown reads
     * near #323c4d and the foot near #18253a instead of one flat fill.
     */
    linear-gradient(
      178deg,
      rgb(70 84 108 / 46%) 0%,
      rgb(46 58 78 / 22%) 26%,
      rgb(10 24 40 / 0%) 58%,
      rgb(4 14 26 / 34%) 100%
    ),
    radial-gradient(
      ellipse 72% 58% at 48% 40%,
      rgb(23 59 91 / 48%) 0%,
      rgb(10 32 53 / 0%) 72%
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 43%,
      rgb(247 242 232 / 2.4%) 48%,
      transparent 54%,
      transparent 100%
    ),
    linear-gradient(
      9deg,
      transparent 0%,
      transparent 46%,
      rgb(197 164 94 / 1.5%) 50%,
      transparent 55%,
      transparent 100%
    ),
    linear-gradient(
      145deg,
      rgb(247 242 232 / 3.5%) 0%,
      rgb(247 242 232 / 0%) 34%
    ),
    var(--color-card-back);
  background-position:
    center,
    center,
    18% 14%,
    82% 76%,
    center,
    center;
  background-size:
    100% 100%,
    100% 100%,
    176px 228px,
    214px 186px,
    100% 100%,
    100% 100%;
  color: var(--color-gold-300);
  place-items: center;
  transform: translateZ(calc(var(--card-thickness) / 2));
}

.card-back::before,
.card-back::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.card-back::before {
  z-index: 1;
  inset: 4%;
  border: 1px solid rgb(222 201 143 / 76%);
  border-radius: calc(var(--card-radius) - 5px);
}

.card-back::after {
  z-index: 1;
  inset: calc(4% + 7px);
  border: 1px solid rgb(197 164 94 / 48%);
  border-radius: calc(var(--card-radius) - 9px);
}

.card-back__content {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  /* 2.06cqw reproduces the approved 5.46px gap on the 265px Table card. */
  gap: clamp(0.2rem, 2.06cqw, 0.65rem);
  width: 76%;
  transform: translateY(1.5%);
}

/*
 * Large gold ring behind the brand mark, as in the Final Visual Reference.
 * It is sized from the Card's own width so it holds its proportion at any
 * --card-ratio, and it sits under the content layer.
 */
.card-back__ring {
  position: absolute;
  z-index: 2;
  /*
   * Anchored and sized from the Card's height so the geometry holds at both
   * the 3:4 Table ratio and the narrower Home ratio: the ring encircles the
   * brand mark and finishes above the wordmark. A percentage translate would
   * resolve against the ring itself, so the centre is set by inset instead.
   */
  inset-block-start: 43.5%;
  inset-inline-start: 50%;
  height: 21%;
  aspect-ratio: 1;
  border: 1px solid rgb(197 164 94 / 26%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/*
 * Below this Card width the type has hit its readability floor, so the
 * content block no longer scales down with the Card and would meet the
 * ring. The ring is purely decorative, so it stands down instead of
 * crowding the wordmark.
 */
@container (max-width: 155px) {
  .card-back__ring {
    display: none;
  }
}

.card-back__brand-mark {
  width: 34%;
  aspect-ratio: 1;
  background: var(--color-gold-500);
  opacity: 0.96;
  -webkit-mask:
    url("../assets/icons/conversation-mark.svg") center / contain no-repeat;
  mask:
    url("../assets/icons/conversation-mark.svg") center / contain no-repeat;
}

.card-back__divider {
  width: 18%;
  height: 1px;
  margin-block: clamp(0.03rem, 0.66cqw, 0.2rem);
  background: rgb(197 164 94 / 72%);
}

.card-back__brand {
  color: var(--color-ivory-100);
  font-family: var(--font-serif);
  /*
   * 6.9cqw reproduces the approved 18.33px brand line on the 265px Table
   * card. The floor keeps a heavily zoomed or Home-sized Card readable and
   * the ceiling stops a large Card from inflating the wordmark.
   */
  font-size: clamp(0.75rem, 6.9cqw, 1.35rem);
  line-height: var(--line-height-tight);
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgb(6 21 34 / 44%);
  white-space: nowrap;
}

.card-back__subbrand {
  color: rgb(222 201 143 / 78%);
  font-family: var(--font-serif);
  /* 2.8cqw reproduces the approved 7.41px sub-line on the Table card. */
  font-size: clamp(0.4rem, 2.8cqw, 0.62rem);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  letter-spacing: 0.22em;
  white-space: nowrap;
}

/*
 * Each corner now carries its own upright glyph (three sparkles and one
 * heart) instead of four rotated copies of the same bracket, matching the
 * Final Visual Reference.
 */
.card-back__corner {
  position: absolute;
  z-index: 3;
  width: 9%;
  max-width: 11%;
  aspect-ratio: 1;
  overflow: visible;
  color: rgb(197 164 94 / 72%);
  fill: currentColor;
  stroke: none;
}

.card-back__corner--bottom-left {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.card-back__corner--top-left {
  inset-block-start: 8.5%;
  inset-inline-start: 8.5%;
}

.card-back__corner--top-right {
  inset-block-start: 8.5%;
  inset-inline-end: 8.5%;
}

.card-back__corner--bottom-right {
  inset-inline-end: 8.5%;
  inset-block-end: 8.5%;
}

.card-back__corner--bottom-left {
  inset-block-end: 8.5%;
  inset-inline-start: 8.5%;
}

.card-question-face {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  gap: clamp(0.3rem, 1.15dvh, 0.55rem);
  padding: 8% 12% 7%;
  border: 1px solid var(--color-navy-700);
  background:
    radial-gradient(
      ellipse 78% 62% at 48% 42%,
      rgb(255 255 255 / 32%) 0%,
      rgb(255 255 255 / 0%) 76%
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 45%,
      rgb(16 40 62 / 1.2%) 49%,
      transparent 54%,
      transparent 100%
    ),
    linear-gradient(
      8deg,
      transparent 0%,
      transparent 46%,
      rgb(197 164 94 / 0.9%) 50%,
      transparent 55%,
      transparent 100%
    ),
    linear-gradient(
      145deg,
      rgb(255 255 255 / 22%) 0%,
      rgb(255 255 255 / 0%) 34%
    ),
    var(--color-question-face);
  background-position:
    center,
    16% 12%,
    84% 78%,
    center,
    center;
  background-size:
    100% 100%,
    190px 236px,
    218px 178px,
    100% 100%,
    100% 100%;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 34%),
    inset 0 -12px 24px rgb(16 40 62 / 2.2%);
  color: var(--color-ink);
  transform: rotateY(180deg)
    translateZ(calc(var(--card-thickness) / 2));
}

.card-question-face::before {
  position: absolute;
  z-index: 1;
  inset: 4.5%;
  border: 1px solid rgb(23 59 91 / 30%);
  border-radius: calc(var(--card-radius) - 7px);
  box-shadow: inset 0 0 0 2px rgb(255 253 247 / 34%);
  content: "";
  pointer-events: none;
}

.card-question-face__metadata,
.card-question-face__question,
.card-question-face__divider,
.card-question-face__difficulty,
.card-question-face__guide,
.card-question-face__brand-mark {
  position: relative;
  z-index: 2;
}

.card-question-face__metadata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.card-question-face__number {
  display: inline-grid;
  min-width: 2.1rem;
  min-height: 1.5rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid rgb(6 21 34 / 30%);
  border-radius: 999px;
  background: var(--color-navy-900);
  color: var(--color-ivory-100);
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, 2.4vw, 0.7rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  line-height: 1;
  place-items: center;
}

.card-question-face__category {
  overflow: hidden;
  color: rgb(16 40 62 / 68%);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 2.2vw, 0.68rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.16em;
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-question-face__question {
  display: grid;
  min-height: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-navy-900);
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 5.2vw, 1.42rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  place-items: center;
  text-align: center;
  text-wrap: balance;
}

.card-question-face__divider {
  justify-self: center;
  width: 28%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgb(197 164 94 / 0%),
      rgb(197 164 94 / 72%) 28%,
      rgb(197 164 94 / 72%) 72%,
      rgb(197 164 94 / 0%)
    );
}

.card-question-face__difficulty {
  display: grid;
  justify-items: center;
  gap: clamp(0.2rem, 0.65dvh, 0.32rem);
}

.card-question-face__level {
  color: rgb(16 40 62 / 62%);
  font-family: var(--font-sans);
  font-size: clamp(0.55rem, 2vw, 0.65rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.card-question-face__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 1.05vw, 0.34rem);
  min-height: 1rem;
}

.card-question-face__star {
  display: block;
  width: clamp(0.82rem, 3.2vw, 1rem);
  height: auto;
  overflow: visible;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.card-question-face__star--active {
  fill: var(--color-gold-500);
  stroke: var(--color-gold-500);
}

.card-question-face__star--inactive {
  fill: transparent;
  stroke: rgb(16 40 62 / 34%);
}

.card-question-face__guide {
  margin: 0;
  color: rgb(16 40 62 / 64%);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 2vw, 0.68rem);
  line-height: var(--line-height-normal);
  text-align: center;
}

.card-question-face__brand-mark {
  width: clamp(1rem, 7.5%, 1.25rem);
  aspect-ratio: 1;
  justify-self: center;
  background: var(--color-navy-900);
  opacity: 0.54;
  -webkit-mask:
    url("../assets/icons/conversation-mark.svg") center / contain no-repeat;
  mask:
    url("../assets/icons/conversation-mark.svg") center / contain no-repeat;
}

.card-edge {
  position: absolute;
  z-index: 1;
  display: block;
  border: 1px solid rgb(6 21 34 / 32%);
  background:
    linear-gradient(
      90deg,
      rgb(238 229 214 / 92%) 0%,
      rgb(197 164 94 / 28%) 48%,
      rgb(6 21 34 / 54%) 100%
    ),
    var(--color-card-edge);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-style: preserve-3d;
}

.card-edge--top,
.card-edge--bottom {
  inset-inline: var(--card-radius);
  height: var(--card-thickness);
  transform: rotateX(90deg);
}

.card-edge--top {
  inset-block-start: calc(var(--card-thickness) / -2);
}

.card-edge--bottom {
  inset-block-end: calc(var(--card-thickness) / -2);
}

.card-edge--left,
.card-edge--right {
  inset-block: var(--card-radius);
  width: var(--card-thickness);
  transform: rotateY(90deg);
}

.card-edge--left {
  inset-inline-start: calc(var(--card-thickness) / -2);
}

.card-edge--right {
  inset-inline-end: calc(var(--card-thickness) / -2);
}

@media (min-width: 480px) {
  .card-root {
    --card-thickness: 4px;
  }
}

@media (max-width: 359px) {
  .card-root {
    border-radius: 16px;
  }

  .card-question-face {
    gap: clamp(0.22rem, 0.8dvh, 0.4rem);
    padding-block: 7% 6.5%;
  }

  .card-question-face__number {
    min-width: 1.9rem;
    min-height: 1.35rem;
  }
}