/* ==========================================================================
   Math Memory — shared components
   The mascot and the card/board component are used by both the game and the
   marketing pages, so they live here rather than in either one's stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mascot — the same shapes as the prototype, sized by --mascot
   -------------------------------------------------------------------------- */

.mascot {
  --mascot: 96px;
  position: relative;
  width: var(--mascot);
  height: calc(var(--mascot) * .92);
  flex: none;
}
.mascot--idle { animation: mmbob 3s ease-in-out infinite; }
.mascot--wow  { animation: mmjump .5s ease; }
.mascot--oops { animation: mmwobble .45s ease; }

.mascot__body {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--pink-soft), var(--pink));
  border-radius: 52% 52% 44% 44% / 58% 58% 42% 42%;
  box-shadow: inset 0 -8px 0 rgba(160, 30, 90, .10), 0 8px 20px rgba(255, 80, 150, .3);
}
.mascot__seam {
  position: absolute; left: 50%; top: 9%;
  width: 2px; height: 38%;
  background: rgba(190, 60, 120, .35);
  border-radius: 2px;
}
.mascot__ear {
  position: absolute; top: 18%;
  width: 23%; height: 16%;
  border: 2px solid rgba(190, 60, 120, .28);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.mascot__ear--l { left: 21%; }
.mascot__ear--r { right: 21%; }
.mascot__eye {
  position: absolute; top: 47%;
  width: 17%; height: 20%;
  background: #fff; border-radius: 50%;
}
.mascot__eye--l { left: 25%; }
.mascot__eye--r { right: 25%; }
.mascot__eye::after {
  content: ""; position: absolute;
  left: 25%; top: 26%;
  width: 50%; height: 50%;
  background: #3a1231; border-radius: 50%;
}
.mascot__mouth {
  position: absolute; left: 50%; top: 71%;
  transform: translateX(-50%);
  background: var(--pink-deep);
  width: 27%; height: 15%;
  border-radius: 0 0 14px 14px;
  transition: width .2s ease, height .2s ease, border-radius .2s ease;
}
.mascot[data-mood="wow"]  .mascot__mouth { width: 36%; height: 28%; border-radius: 0 0 12px 12px; }
.mascot[data-mood="oops"] .mascot__mouth { width: 20%; height: 24%; border-radius: 50%; }

.speech {
  position: relative;
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  font: 700 13px var(--font-ui); color: var(--ink-2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  margin-bottom: 18px;
}

.board {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--gap, 12px);
  align-content: start;
  /* An explicit width is required: `margin-inline:auto` opts this flex item
     out of stretching, and container-type makes its intrinsic width zero. */
  width: 100%;
  /* A memory game is unplayable if the board needs scrolling, so cap its
     width by the height left over once the chrome is accounted for.
     --rows is set by the game controller. */
  max-width: min(100%, calc((100vh - var(--board-reserve, 270px)) * var(--cols) / var(--rows, 2)));
  max-width: min(100%, calc((100dvh - var(--board-reserve, 270px)) * var(--cols) / var(--rows, 2)));
  margin: auto;   /* centres the board in whatever space is left over */
}

.card {
  aspect-ratio: 1;
  perspective: 900px;
  background: none;
  padding: 0;
  transition: opacity .5s ease;
}
.card__inner {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-card);
  display: grid; place-items: center;
}
.card__face--back {
  background: linear-gradient(160deg, var(--card-back-2), var(--card-back));
  border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .28);
}
.card__face--front {
  transform: rotateY(180deg);
  background: linear-gradient(175deg, var(--card-front), var(--card-front-2));
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  transition: box-shadow .25s ease, border-color .25s ease;
}

/* Equation sizing: ~20% of a card's width, floored at 16px per the spec. */
.card .eq {
  font-size: 17px; /* fallback for browsers without container queries */
  --eq-gap: 3px;
}
@supports (container-type: inline-size) {
  .card .eq {
    font-size: calc(
      max(16px, (100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * var(--eq-ratio, .21))
      * var(--eq-scale, 1)
    );
  }
}
.board[data-cols="2"] { --eq-ratio: .204; }
.board[data-cols="3"] { --eq-ratio: .224; }
.board[data-cols="4"] { --eq-ratio: .21; }
.board[data-cols="2"] .card .eq { --eq-gap: 5px; }
.board[data-cols="3"] .card .eq { --eq-gap: 4px; }

.card:not([disabled]):hover .card__inner { transform: translateY(-3px); }
.card[disabled] { cursor: default; }

.card.is-up   .card__inner { transform: rotateY(180deg); }
.card.is-up:hover .card__inner { transform: rotateY(180deg); }

.card.is-wrong { animation: mmwobble .45s ease; }
.card.is-wrong .card__face--front {
  border-color: #ffb3cd;
  box-shadow: 0 0 0 3px rgba(255, 120, 170, .3);
}

.card.is-right .card__inner { transform: rotateY(180deg) scale(1.06); }
.card.is-right .card__face--front {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold), 0 0 34px rgba(255, 205, 80, .95);
}

.card.is-gone {
  opacity: 0;
  pointer-events: none;
}
.card.is-gone .card__inner { transform: rotateY(180deg) scale(.55); }

/* Sparkle burst on a correct match */
.card__spark {
  position: absolute; inset: -10%;
  pointer-events: none;
}
.card__spark i {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: mmspark .8s ease-out forwards;
}
@keyframes mmspark {
  0%   { transform: scale(0) rotate(0);      opacity: 0; }
  40%  { transform: scale(1) rotate(90deg);  opacity: 1; }
  100% { transform: scale(0) rotate(200deg); opacity: 0; }
}

.celebration {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 30;
}
.celebration i {
  position: absolute;
  width: 9px; height: 9px; border-radius: 3px;
  animation: mmconf .9s ease-out forwards;
}
.celebration__word {
  position: absolute; left: 0; right: 0; top: 44%;
  text-align: center;
  font: 600 clamp(26px, 8vw, 34px) var(--font-display);
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  animation: mmfloat 1.1s ease-out forwards;
}