/* Smocze pary — memory game quantity <-> symbol (§3.7.3).
 * Every selector starts with .mod-pary. The board fills the left 744 px of the module area (cards >= 150 px need
 * the full height); the side column (296 px) holds the instruction with the ear, the legend and the main button. */

.mod-pary {
  --pr-back-a: var(--night-2); /* quantity / operation / words cards: dragon purple (Jaskinia) */
  --pr-back-a2: #4d3d7d;
  --pr-back-b: #1f3a63; /* symbol cards: night blue */
  --pr-back-b2: #2c5287;
  --pr-gold-ink: #f2d27a;
  background: var(--bg);
}

/* ---------- board and cards ---------- */

.mod-pary .pr-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 744px;
  height: 712px;
}

.mod-pary .pr-card {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  perspective: 1100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.mod-pary .pr-card:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}
.mod-pary .pr-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.mod-pary .pr-card.is-up .pr-card-inner {
  transform: rotateY(180deg);
}
.mod-pary .pr-card:active:not(.is-up) .pr-card-inner {
  transform: scale(0.97);
}
.mod-pary .pr-back,
.mod-pary .pr-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* back: dragon scales + a golden emblem (two colours: one card of each colour makes a pair) */
.mod-pary .pr-back {
  background-color: var(--pr-back-a);
  background-image:
    radial-gradient(circle at 50% 0, transparent 0 10px, rgba(242, 210, 122, 0.2) 10.5px 12.5px, transparent 13px),
    radial-gradient(circle at 50% 0, transparent 0 10px, rgba(242, 210, 122, 0.2) 10.5px 12.5px, transparent 13px),
    radial-gradient(ellipse at 50% 45%, var(--pr-back-a2) 0 38%, transparent 72%);
  background-size: 26px 17px, 26px 17px, 100% 100%;
  background-position: 0 0, 13px 8.5px, 0 0;
  border: 4px solid #2a2146;
  box-shadow: 0 5px 0 rgba(42, 34, 56, 0.28), 0 8px 18px rgba(42, 34, 56, 0.2), inset 0 0 0 3px rgba(242, 210, 122, 0.4);
}
.mod-pary .pr-back-b .pr-back {
  background-color: var(--pr-back-b);
  background-image:
    radial-gradient(circle at 50% 0, transparent 0 10px, rgba(242, 210, 122, 0.2) 10.5px 12.5px, transparent 13px),
    radial-gradient(circle at 50% 0, transparent 0 10px, rgba(242, 210, 122, 0.2) 10.5px 12.5px, transparent 13px),
    radial-gradient(ellipse at 50% 45%, var(--pr-back-b2) 0 38%, transparent 72%);
  border-color: #15294a;
}
.mod-pary .pr-back::before {
  content: '';
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 3px solid rgba(242, 210, 122, 0.75);
  background: rgba(20, 14, 38, 0.35);
  box-shadow: 0 0 0 6px rgba(242, 210, 122, 0.12);
}
.mod-pary .pr-emblem {
  position: relative;
  width: 58px;
  height: 54px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

/* face */
.mod-pary .pr-face {
  transform: rotateY(180deg);
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: 0 5px 0 rgba(42, 34, 56, 0.14), 0 8px 18px rgba(42, 34, 56, 0.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.mod-pary .pr-face-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}

/* a pair stays open with a golden glow (success is gold, never green) */
.mod-pary .pr-card.is-matched {
  cursor: default;
}
.mod-pary .pr-card.is-matched .pr-face {
  border: 4px solid var(--gold);
  background-color: #fffaeb;
  box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.45), 0 0 26px 6px rgba(242, 183, 5, 0.45);
}
.mod-pary .pr-card.is-matched .pr-face::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #fff6c8 0 3px, transparent 4px),
    radial-gradient(circle at 82% 18%, #ffe27a 0 4px, transparent 5px),
    radial-gradient(circle at 86% 80%, #fff6c8 0 3px, transparent 4px),
    radial-gradient(circle at 14% 84%, #ffe27a 0 4px, transparent 5px),
    radial-gradient(circle at 50% 8%, #fff 0 2.5px, transparent 3.5px);
  animation: pr-sparkle 0.9s ease-out both;
}
@keyframes pr-sparkle {
  0% { opacity: 0; transform: scale(0.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* all pairs found: a calm golden wave over the board */
.mod-pary .pr-board.is-all .pr-card {
  animation: pr-wave 0.8s ease-in-out both;
}
@keyframes pr-wave {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-10px) scale(1.04); }
}

/* reduced motion: cross-fade instead of turning over */
.mod-pary.is-calm .pr-card-inner,
.mod-pary.is-calm .pr-card.is-up .pr-card-inner,
.mod-pary.is-calm .pr-card:active .pr-card-inner {
  transition: none;
  transform: none;
}
.mod-pary.is-calm .pr-face {
  transform: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mod-pary.is-calm .pr-back {
  transition: opacity 0.15s ease;
}
.mod-pary.is-calm .pr-card.is-up .pr-face {
  opacity: 1;
}
.mod-pary.is-calm .pr-card.is-up .pr-back {
  opacity: 0;
}
.mod-pary.is-calm .pr-board.is-all .pr-card,
.mod-pary.is-calm .pr-card.is-matched .pr-face::after {
  animation: none;
}

/* ---------- card contents ---------- */

.mod-pary .pr-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mod-pary .pr-gold-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-pary .pr-gold-grid {
  display: grid;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.mod-pary .pr-units {
  display: grid;
  gap: 5px 6px;
  justify-content: center;
}
.mod-pary .pr-tens {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-pary .pr-hundreds,
.mod-pary .pr-thousands {
  display: grid;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.mod-pary .pr-face .mat-num,
.mod-pary .pr-mini .mat-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mod-pary .pr-op {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.mod-pary .pr-op-sign {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
}
.mod-pary .pr-words {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.16;
  padding: 0 4px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.mod-pary .pr-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mod-pary .pr-amount.is-two {
  font-size: 42px;
}
.mod-pary .pr-amount-part {
  white-space: nowrap;
}
.mod-pary .pr-coins {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mod-pary .pr-coin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- side column: instruction + ear, legend, main button ---------- */

.mod-pary .pr-side {
  position: absolute;
  left: 744px;
  top: 0;
  width: 296px;
  height: 712px;
  background: var(--panel-2);
  border-left: 3px solid var(--line);
  box-sizing: border-box;
}
.mod-pary .pr-side .task-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 293px;
  height: 110px;
  padding: 0 16px 0 22px;
  gap: 16px;
  background: transparent;
  box-sizing: border-box;
}
.mod-pary .pr-side .task-content {
  min-width: 0;
}
.mod-pary .pr-band-text {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  white-space: normal;
}
.mod-pary .pr-legend {
  position: absolute;
  left: 0;
  top: 132px;
  width: 293px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-pary .pr-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mod-pary .pr-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 3px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.25), 0 4px 0 rgba(42, 34, 56, 0.1);
  overflow: hidden;
  box-sizing: border-box;
}
.mod-pary .pr-mini .pr-words {
  font-size: 27px !important;
}
.mod-pary .pr-link-ico {
  flex: none;
}
.mod-pary .pr-legend.is-key {
  display: grid;
  grid-template-columns: 116px 116px;
  grid-template-rows: 144px 144px;
  gap: 24px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
}
.mod-pary .pr-key-cell {
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 6px 6px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-sizing: border-box;
}
.mod-pary .pr-key-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-pary .action-bar {
  left: 744px;
  width: 296px;
  justify-content: flex-end;
  padding: 0 24px;
  box-sizing: border-box;
}
.mod-pary .pr-mini .pr-amount {
  font-size: 30px;
}
.mod-pary .pr-mini .pr-amount.is-two {
  font-size: 24px;
}
.mod-pary .pr-units .pr-odd {
  grid-column: 1 / span 2;
  justify-self: center;
}