/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Pairs: the table, the cards and their flip. LogosVox original code.
 * Cards are keycaps on the shared .lv-board tray: the back a quiet keycap
 * with an aurora ring, the face a .lv-piece in the pair's colour (--c).
 * The table always fits the screen: a card is as wide as the width allows
 * and up to 1.4 times as tall as the height allows, so on a tall phone the
 * cards are card-shaped and the table fills the screen (--lv-avail is the
 * visible height less the bar beyond 56 px).
 */
.pr-main {
  gap: 12px;
  --gap: 8px;
  --pad: 10px;
  --max: 100px;
  /* Height the page needs besides the cards: the bar's first 56 px, padding, the tools row. */
  --reserve: 156px;
  --w: calc((min(100vw, 560px) - 24px - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --h: calc((var(--lv-avail) - var(--reserve) - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows));
  --cw0: max(36px, min(var(--w), var(--max)));
  --card-h: max(36px, min(var(--h), calc(var(--cw0) * 1.4)));
  --card: min(var(--cw0), var(--card-h));
  --board: calc(var(--cols) * var(--card) + (var(--cols) - 1) * var(--gap) + 2 * var(--pad));
}
.pr-main[data-size="4x5"] { --max: 96px; }
.pr-main[data-size="6x6"] { --gap: 6px; --pad: 8px; --max: 80px; }
@media (hover: hover) and (pointer: fine) { .pr-main { --reserve: 236px; } }
.pr-board { padding: var(--pad); flex: none; touch-action: manipulation; }

.pr-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--card));
  grid-auto-rows: var(--card-h);
  gap: var(--gap);
}

/* One card: the button holds the pop and the shake; .pr-flip turns. */
.pr-card {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--lv-g-piece-r);
  cursor: pointer;
  perspective: 600px;
  -webkit-tap-highlight-color: transparent;
}
.pr-card:focus-visible { outline: 2px solid var(--lv-cobalt); outline-offset: 3px; }
.pr-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.pr-card.is-up .pr-flip { transform: rotateY(180deg); }
.pr-back, .pr-face {
  position: absolute;
  inset: 0;
  border-radius: var(--lv-g-piece-r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The back: a soft keycap with the LogosVox ring in the aurora colours. */
.pr-card { --pr-back: #ffffff; --pr-back-lip: rgb(13 13 13 / 0.09); --pr-back-hi: rgb(255 255 255 / 0.9); --pr-ring: 0.5; }
.pr-back {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lv-g-violet) 9%, transparent), transparent 62%),
    var(--pr-back);
  box-shadow: inset 0 1px 0 var(--pr-back-hi), inset 0 -0.2em 0 var(--pr-back-lip), 0 1px 2px rgb(13 13 13 / 0.12);
}
.pr-back::before,
.pr-back::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--lv-g-violet), var(--lv-g-cobalt), var(--lv-g-cyan), var(--lv-g-magenta), var(--lv-g-violet));
}
/* The ring stays round on a card taller than wide: sized by the card's width. */
.pr-back::before {
  left: 25%;
  top: 50%;
  width: 50%;
  aspect-ratio: 1;
  translate: 0 -50%;
  opacity: var(--pr-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.pr-back::after {
  left: calc(50% - 2.5px);
  top: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  opacity: calc(var(--pr-ring) * 0.9);
}
@media (hover: hover) {
  .pr-card:not(.is-up):hover .pr-back { --pr-ring: 0.85; }
}
.pr-card:not(.is-up):active .pr-back { --pr-ring: 0.85; }

/* The face: the pair's colour (the card's --c, not .lv-piece's violet), the shape in white. */
.pr-face.lv-piece { --c: inherit; }
.pr-face {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-face svg { width: 60%; height: 60%; display: block; }
.pr-card.is-up:not(.is-found) .pr-face {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -0.18em 0 rgb(0 0 0 / 0.16), 0 8px 18px -8px var(--c);
}
/* Found: the pair settles a little into the tray. */
.pr-card.is-found .pr-flip { transform: rotateY(180deg) scale(0.94); }

/* A match: both cards pop, a ring of the pair's colour glows and fades. */
.pr-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--lv-g-piece-r) + 3px);
  box-shadow: 0 0 0 2px var(--c), 0 0 20px 2px var(--c);
  opacity: 0;
  pointer-events: none;
}
.pr-card.pr-hit { animation: pr-pop 300ms cubic-bezier(0.2, 0.7, 0.3, 1.2); }
.pr-card.pr-hit::after { animation: pr-glow 720ms ease-out; }
@keyframes pr-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pr-glow { 0% { opacity: 0; } 25% { opacity: 0.9; } 100% { opacity: 0; } }

/* The streak: a small keycap on the tray's top edge. */
.pr-streak {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  padding: 3px 10px 4px;
  border-radius: 999px;
  font: 700 12px/1.3 var(--lv-display);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 160ms var(--lv-ease), transform 200ms var(--lv-ease);
}
.pr-streak.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Under the table: the size and pairs found, then the tools. */
.pr-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pr-side .lv-keys:empty { display: none; }
.pr-meta {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--lv-ink-subtle);
}
.pr-size {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lv-surface);
  border: 1px solid var(--lv-edge);
  color: var(--lv-ink-muted);
  font-size: 12px;
}
.pr-found b { color: var(--lv-ink); font-size: 16px; }
@media (max-width: 719.98px) and (orientation: portrait) {
  /* Phones: one row, the count on the left and the tools on the right, as wide as the table. */
  .pr-side { flex-direction: row; justify-content: space-between; width: var(--board); max-width: 100%; }
  .pr-meta { flex-direction: column; align-items: flex-start; gap: 2px; padding-left: 4px; }
}

/* Dark: the back is a raised slate keycap and the ring glows a little more. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pr-card { --pr-back: #2a2b33; --pr-back-lip: rgb(0 0 0 / 0.35); --pr-back-hi: rgb(255 255 255 / 0.07); --pr-ring: 0.62; }
}
:root[data-theme="dark"] .pr-card { --pr-back: #2a2b33; --pr-back-lip: rgb(0 0 0 / 0.35); --pr-back-hi: rgb(255 255 255 / 0.07); --pr-ring: 0.62; }

/* Phones held sideways: the table beside the tools; the credit tucks into a corner. */
@media (orientation: landscape) and (max-height: 540px) {
  .pr-main { padding-top: 6px; padding-bottom: 6px; --reserve: 68px; --w: 100vw; }
  .pr-main[data-size="6x6"] { --gap: 5px; --pad: 6px; }
  .pr-side .lv-tools { flex-direction: column; }
}

/* Less motion: no 3D, no pops; a card simply shows its face. */
.pr-still .pr-flip { transition: none; transform: none !important; }
.pr-still .pr-face { transform: none; visibility: hidden; }
.pr-still .pr-card.is-up .pr-face { visibility: visible; }
.pr-still .pr-card.is-up .pr-back { visibility: hidden; }
.pr-still .pr-card.pr-hit, .pr-still .pr-card.pr-hit::after, .pr-still .pr-streak { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pr-flip { transition: none; }
}