/* Mithai Pairs: a maroon mithai-shop counter with cards in brass-edged boxes. */

body.game {
  --bg-top: #7a2440;
  --bg-bottom: #3a0f1f;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .15);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 200, 130, .2), transparent 62%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
.subhud .chip { white-space: nowrap; }
.subhud .mp-hearts { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; }
.mp-heart { display: inline-grid; width: 18px; height: 18px; transition: opacity .3s, filter .3s, transform .3s; }
.mp-heart svg { width: 100%; height: 100%; }
.mp-heart.off { opacity: .35; filter: grayscale(1); transform: scale(.8); }
.mp-hearts.hurt { animation: mp-hurt .5s ease; }
@keyframes mp-hurt { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); background: rgba(230, 50, 40, .6); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.subhud .mp-shuffle { background: var(--turmeric); color: var(--ink); font-weight: 800; }

.mp-stage { display: grid; place-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
.mp-grid {
  display: grid; grid-template-columns: repeat(var(--cols), var(--cw, 64px)); gap: var(--gap, 8px);
  transition: opacity .3s, transform .3s;
}
.mp-card.lift { transform: translateY(-10px) scale(1.06) rotate(-4deg); transition: transform .3s; opacity: .7; }
.mp-card.moved .mp-back { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #7a1a35, 0 0 0 4px #ffd93d, 0 4px 0 rgba(0, 0, 0, .3); }
.mp-card.moved { animation: mp-land .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mp-land { from { transform: scale(.8); } }
.mp-card {
  width: var(--cw, 64px); height: calc(var(--cw, 64px) * 1.12); padding: 0; border: 0; background: none; perspective: 600px;
  touch-action: manipulation;
}
.mp-inner {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
}
.mp-card.up .mp-inner, .mp-card.open .mp-inner { transform: rotateY(180deg); }
.mp-back, .mp-face {
  position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
}
.mp-back {
  background:
    radial-gradient(circle at 50% 50%, #f2b33d 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(242, 179, 61, .55) 23% 26%, transparent 27%),
    repeating-conic-gradient(from 45deg, #a8234a 0 25%, #93203f 0 50%) 0 0 / 16px 16px;
  box-shadow: inset 0 0 0 3px #f2b33d, inset 0 0 0 5px #7a1a35, 0 4px 0 rgba(0, 0, 0, .3);
}
.mp-face {
  transform: rotateY(180deg); background: #fffaf1; box-shadow: inset 0 0 0 3px #e9c38f, 0 4px 0 rgba(0, 0, 0, .3);
}
.mp-face img, .mp-food { width: 76%; height: 76%; object-fit: contain; display: grid; place-items: center; }
.mp-food svg { width: 100%; height: 100%; }
.mp-card.open .mp-face { background: #eaf7ef; box-shadow: inset 0 0 0 3px #2f8f6b, 0 4px 0 rgba(0, 0, 0, .3); }
.mp-card.pop { animation: mp-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mp-pop { 50% { transform: scale(1.1); } }
.mp-card.miss .mp-face { box-shadow: inset 0 0 0 3px #e5484d, 0 4px 0 rgba(0, 0, 0, .3); }
.mp-card.miss { animation: mp-shake .35s ease; }
@keyframes mp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.mp-banner {
  position: absolute; left: 50%; top: 10px; z-index: 6; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 8px 16px; border-radius: 14px; background: var(--turmeric); color: var(--ink); font: 800 16px/1.25 var(--font);
  width: max-content; max-width: calc(100% - 24px); text-align: center; transition: opacity .25s, transform .25s;
}
.mp-banner.show { opacity: 1; transform: translate(-50%, 0); }

.mp-win .mp-kicker { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--chili); }
.mp-win .mp-got { font-weight: 800; color: var(--ink); }
.mp-bar { height: 10px; border-radius: 999px; background: #f0e2c8; overflow: hidden; }
.mp-bar i { display: block; height: 100%; background: var(--mint); border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  .mp-inner, .mp-grid { transition-duration: .01ms; }
  .mp-card.pop, .mp-card.miss, .mp-card.moved, .mp-hearts.hurt { animation: none; }
}