/* ============================================================
   Memory Match — game-specific styles
   ============================================================ */

.mm-setup {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mm-control-block {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
}
.mm-control-block[hidden] {
  display: none;
}
.mm-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding-top: 8px;
}
.mm-size-grid,
.mm-theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mm-option,
.mm-chip {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 800;
  cursor: pointer;
}
.mm-option {
  min-width: 78px;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.05;
}
.mm-option span {
  display: inline-block;
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-score);
  font-size: 0.58rem;
}
.mm-chip {
  border-radius: 999px;
  padding: 8px 13px;
}
.mm-option:hover,
.mm-chip:hover {
  border-color: var(--pink);
  color: var(--pink-deep);
}
.mm-option.active,
.mm-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.mm-option.active span { color: #fff; }

.mm-status {
  min-height: 1.4em;
  margin: -4px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-soft);
}

.mm-board-wrap {
  --mm-rows: 2;
  --mm-cols: 3;
  width: min(100%, 720px);
}
.mm-board-wrap[data-size="4x4"],
.mm-board-wrap[data-size="5x6"],
.mm-board-wrap[data-size="6x6"],
.mm-board-wrap[data-size="6x7"] {
  width: min(
    100%,
    720px,
    max(560px, calc((100vh - 190px) * var(--mm-cols) / var(--mm-rows)))
  );
}
.mm-board {
  --mm-cols: 3;
  --mm-symbol-scale: 0.58;
  display: grid;
  grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr));
  gap: clamp(6px, 1.5vw, 12px);
  width: 100%;
}
.mm-card {
  position: relative;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  perspective: 800px;
  touch-action: manipulation;
}
.mm-card:disabled {
  cursor: default;
}
.mm-card-inner {
  position: absolute;
  inset: 0;
  border-radius: min(14px, 18%);
  transform-style: preserve-3d;
  transition: transform 0.22s ease;
  box-shadow: 0 4px 0 rgba(34, 49, 74, 0.15);
}
.mm-card.flipped .mm-card-inner,
.mm-card.matched .mm-card-inner {
  transform: rotateY(180deg);
}
.mm-card-front,
.mm-card-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}
.mm-card-front {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, var(--light-blue), var(--light-blue) 7px, var(--light-blue-deep) 7px, var(--light-blue-deep) 14px);
}
.mm-card-front::after {
  content: '?';
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.1rem, 6vw, 2.3rem);
  text-shadow: 0 2px 0 rgba(34, 49, 74, 0.25);
}
.mm-card-back {
  background: var(--surface);
  transform: rotateY(180deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(
    calc((100vw - 24px - (var(--mm-cols) - 1) * 6px) / var(--mm-cols) * var(--mm-symbol-scale)),
    calc((720px - (var(--mm-cols) - 1) * 12px) / var(--mm-cols) * var(--mm-symbol-scale)),
    4.6rem
  );
  color: var(--ink);
  line-height: 1;
  overflow: hidden;
}

@media (max-width: 560px) {
  .mm-card-back {
    font-size: min(
      calc((100vw - 20px - (var(--mm-cols) - 1) * 6px) / var(--mm-cols) * var(--mm-symbol-scale)),
      3.8rem
    );
  }
}
.mm-shape {
  display: block;
  position: relative;
  width: 76%;
  height: 76%;
  background: var(--shape-color);
  border: 3px solid var(--ink);
  box-sizing: border-box;
  --shape-outline:
    drop-shadow(2px 0 0 var(--ink))
    drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink))
    drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(1.5px 1.5px 0 var(--ink))
    drop-shadow(-1.5px 1.5px 0 var(--ink))
    drop-shadow(1.5px -1.5px 0 var(--ink))
    drop-shadow(-1.5px -1.5px 0 var(--ink));
}
.mm-shape[data-shape="circle"] { border-radius: 50%; }
.mm-shape[data-shape="square"] { border-radius: 8%; }
.mm-shape[data-shape="rectangle"] {
  width: 82%;
  height: 54%;
  border-radius: 8%;
}
.mm-shape[data-shape="triangle"] {
  border: none;
  background: var(--ink);
  clip-path: var(--shape-clip);
  --shape-clip: polygon(50% 0, 100% 100%, 0 100%);
}
.mm-shape[data-shape="oval"] {
  width: 82%;
  height: 58%;
  border-radius: 50%;
}
.mm-shape[data-shape="pentagon"],
.mm-shape[data-shape="hexagon"],
.mm-shape[data-shape="heptagon"],
.mm-shape[data-shape="octagon"],
.mm-shape[data-shape="nonagon"],
.mm-shape[data-shape="decagon"],
.mm-shape[data-shape="trapezoid"],
.mm-shape[data-shape="kite"] {
  border: none;
  background: var(--ink);
  clip-path: var(--shape-clip);
}
.mm-shape[data-shape="triangle"]::before,
.mm-shape[data-shape="pentagon"]::before,
.mm-shape[data-shape="hexagon"]::before,
.mm-shape[data-shape="heptagon"]::before,
.mm-shape[data-shape="octagon"]::before,
.mm-shape[data-shape="nonagon"]::before,
.mm-shape[data-shape="decagon"]::before,
.mm-shape[data-shape="trapezoid"]::before,
.mm-shape[data-shape="kite"]::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--shape-color);
  clip-path: var(--shape-clip);
}
.mm-shape[data-shape="pentagon"] { --shape-clip: polygon(50% 0, 98% 35%, 80% 100%, 20% 100%, 2% 35%); }
.mm-shape[data-shape="hexagon"] { --shape-clip: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.mm-shape[data-shape="heptagon"] { --shape-clip: polygon(50% 0, 88% 18%, 100% 58%, 72% 100%, 28% 100%, 0 58%, 12% 18%); }
.mm-shape[data-shape="octagon"] { --shape-clip: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.mm-shape[data-shape="nonagon"] { --shape-clip: polygon(50% 0, 82% 12%, 100% 41%, 94% 75%, 68% 100%, 32% 100%, 6% 75%, 0 41%, 18% 12%); }
.mm-shape[data-shape="decagon"] { --shape-clip: polygon(50% 0, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%); }
.mm-shape[data-shape="rhombus"] {
  width: 68%;
  height: 68%;
  transform: rotate(45deg);
}
.mm-shape[data-shape="trapezoid"] { --shape-clip: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.mm-shape[data-shape="parallelogram"] {
  width: 78%;
  height: 58%;
  border: none;
  transform: skew(-18deg);
  filter: var(--shape-outline);
}
.mm-shape[data-shape="kite"] { --shape-clip: polygon(50% 0, 84% 42%, 50% 100%, 16% 42%); }
.mm-shape[data-shape="semicircle"] {
  width: 78%;
  height: 40%;
  align-self: center;
  border-radius: 999px 999px 0 0;
}
.mm-shape[data-shape="crescent"] {
  background: var(--shape-color);
  border-radius: 50%;
}
.mm-shape[data-shape="crescent"]::after {
  content: '';
  position: absolute;
  width: 76%;
  height: 76%;
  right: -8%;
  top: 6%;
  border-radius: 50%;
  background: var(--surface);
  border-left: 3px solid var(--ink);
}
.mm-shape[data-shape="star"],
.mm-shape[data-shape="heart"],
.mm-shape[data-shape="arrow"],
.mm-shape[data-shape="cross"] {
  width: 86%;
  height: 86%;
  background: transparent;
  border: none;
}
.mm-shape[data-shape="star"]::before,
.mm-shape[data-shape="heart"]::before,
.mm-shape[data-shape="arrow"]::before,
.mm-shape[data-shape="cross"]::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shape-color);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35em;
  line-height: 1;
  -webkit-text-stroke: 2px var(--ink);
}
.mm-shape[data-shape="star"]::before { content: '★'; }
.mm-shape[data-shape="heart"]::before { content: '♥'; }
.mm-shape[data-shape="arrow"]::before { content: '➜'; }
.mm-shape[data-shape="cross"]::before { content: '✚'; }
.mm-card-back {
  --mm-shape-size: min(
    calc((100vw - 24px - (var(--mm-cols) - 1) * 6px) / var(--mm-cols) * 0.72),
    calc((720px - (var(--mm-cols) - 1) * 12px) / var(--mm-cols) * 0.72),
    4.8rem
  );
}
.mm-card.matched .mm-card-inner {
  animation: mm-match 0.34s ease;
}
.mm-card.matched .mm-card-back {
  border-color: var(--simon-green);
  box-shadow: inset 0 0 0 3px rgba(47, 191, 90, 0.3);
}
.mm-card.matched-p2 .mm-card-back {
  border-color: var(--simon-red);
  box-shadow: inset 0 0 0 3px rgba(230, 57, 44, 0.3);
}
.mm-card.mismatch .mm-card-inner {
  animation: mm-shake 0.24s ease;
}

@keyframes mm-match {
  0% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.06); }
  100% { transform: rotateY(180deg) scale(1); }
}
@keyframes mm-shake {
  0%, 100% { transform: translateX(0) rotateY(180deg); }
  25% { transform: translateX(-4px) rotateY(180deg); }
  75% { transform: translateX(4px) rotateY(180deg); }
}

#game-stage:fullscreen,
#game-stage.is-ios-fullscreen {
  border-radius: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--obg-vh, 1vh) * 100);
  justify-content: flex-start;
  background: var(--bg-soft);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#game-stage:fullscreen .mm-board-wrap,
#game-stage.is-ios-fullscreen .mm-board-wrap {
  width: min(100%, 88vh);
  width: min(100%, 88dvh);
}

@media (max-width: 560px) {
  .mm-control-block {
    grid-template-columns: 1fr;
  }
  .mm-label {
    padding-top: 0;
  }
  .mm-option {
    min-width: 70px;
    padding: 7px 8px;
  }
}