.pp-stage { display: grid; place-items: center; padding: 10px 0 8px; }
.tip { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 8px; }
.pp-board {
  --cols: 3;
  --gap: 8px;
  --cw: 80px;
  --ch: 96px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cw));
  grid-auto-rows: var(--ch);
  gap: var(--gap);
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(13, 11, 38, 0.55);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7);
}
.pp-card {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: calc(var(--cw) * 0.16);
  cursor: pointer;
  perspective: 700px;
  font: inherit;
  color: inherit;
}
.pp-card:focus-visible { outline: 2px solid #eef0ff; outline-offset: 2px; }
.pp-card.up, .pp-card.matched { cursor: default; }
.pp-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.pp-card.up .pp-inner { transform: rotateY(180deg); }
.pp-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: calc(var(--cw) * 0.16);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pp-back {
  background: linear-gradient(150deg, #332b86, #241e63);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.22), 0 4px 10px -4px rgba(0, 0, 0, 0.55);
}
.pp-back svg { width: 46%; height: 46%; opacity: 0.8; }
.pp-card:hover .pp-back { background: linear-gradient(150deg, #3b3296, #2a236e); }
.pp-front {
  transform: rotateY(180deg);
  background: #1d1946;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 4px 10px -4px rgba(0, 0, 0, 0.55);
}
.pp-front svg { width: 70%; height: 70%; max-height: 80%; }
.pp-card.matched .pp-front { background: var(--cs); box-shadow: inset 0 0 0 2px var(--c), 0 0 14px -4px var(--c); }
.pp-card.matched .pp-front svg { opacity: 0.85; }
.pp-card.hint .pp-front { box-shadow: inset 0 0 0 3px #fde047, 0 0 18px -2px rgba(253, 224, 71, 0.8); }
.pp-card.moved .pp-back { box-shadow: inset 0 0 0 2px #22d3ee, 0 0 16px -2px rgba(34, 211, 238, 0.75); }
.pp-card.moved { z-index: 2; }

/* Match: a small pop and sparks */
.pp-card.pop .pp-inner { animation: pp-pop 0.42s ease-out; }
@keyframes pp-pop { 45% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.pp-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: pp-spark 0.62s ease-out forwards;
}
@keyframes pp-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--ch) * -0.62)) rotate(45deg) scale(0.4); }
}
.pp-board.done .pp-card.matched .pp-front { animation: pp-glow 0.9s ease-in-out 0.3s; }
@keyframes pp-glow { 50% { box-shadow: inset 0 0 0 2px var(--c), 0 0 22px 2px var(--c); } }

/* Reduced motion: no 3D turn, just a fade between the two sides */
.pp-rm .pp-inner { transition: none; transform: none !important; animation: none !important; }
.pp-rm .pp-front { transform: none; opacity: 0; transition: opacity 0.18s; }
.pp-rm .pp-back { transition: opacity 0.18s; }
.pp-rm .pp-card.up .pp-front { opacity: 1; }
.pp-rm .pp-card.up .pp-back { opacity: 0; }
.pp-rm.done .pp-card.matched .pp-front { animation: none; }

@media (max-width: 420px) {
  .hud { gap: 4px; }
  .pill { padding: 5px 8px; font-size: 12px; }
}