/* Minimal pairs player. Same calm, playful look as Countdown and Word Ladders. */

body.page-pron {
  overflow-x: hidden;
  background: #eaf3fd;
}

body.page-pron .mainCenter {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.pr-player {
  --blue: #0080ff;
  --blue-edge: #0062c4;
  --orange: #ff8a00;
  --green: #1fae68;
  --green-edge: #168a51;
  --red: #e0413a;
  --ink: #1d2b3d;
  --muted: #6c7a8a;
  --edge: #dfe7f0;
  --focus: rgba(0, 128, 255, 0.35);
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - 60px);
  margin: 0;
  padding: 26px 16px 40px;
  overflow-x: hidden;
  background:
    radial-gradient(rgba(0, 110, 220, 0.09) 1.3px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #e3f0ff 0%, #f4f9ff 70%);
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.pr-player *,
.pr-player *::before,
.pr-player *::after {
  box-sizing: border-box;
}

.pr-player p {
  max-width: none;
  margin: 0;
  font-family: inherit;
}

.pr-player [hidden] {
  display: none !important;
}

.pr-player button {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

.pr-player button:hover {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.pr-player button:focus {
  outline: none;
}

.pr-player button:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}

/* Heading */

.pr-player .pr-kicker {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pr-player h1 {
  margin: 6px 0 0;
  padding: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.pr-player h1 span,
.pr-ipa {
  font-style: normal;
  font-family: "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", Helvetica, Arial, sans-serif;
}

.pr-snd-a { color: var(--blue); }
.pr-snd-b { color: var(--orange); }
.pr-player h1 .pr-snd-none { color: var(--muted); }

.pr-player .pr-keys {
  margin-top: 6px;
  font-size: 18px;
}

/* Tabs */

.pr-seg {
  display: inline-flex;
  margin: 20px auto 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(40, 60, 90, 0.07);
}

.pr-player .pr-seg button {
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.pr-player .pr-seg button:hover {
  color: var(--ink);
}

.pr-player .pr-seg button[aria-selected="true"],
.pr-player .pr-seg button[aria-selected="true"]:hover {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(30, 50, 80, 0.16);
}

.pr-view {
  width: min(100%, 700px);
  margin: 26px auto 0;
}

.pr-player .pr-prompt {
  min-height: 22px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

/* Progress dots */

.pr-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.pr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9d6e4;
}

.pr-dot.is-now { background: var(--blue); transform: scale(1.35); }
.pr-dot.is-right { background: var(--green); }
.pr-dot.is-wrong { background: var(--red); }

/* Big play button */

.pr-player .pr-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 0 var(--blue-edge), 0 12px 22px rgba(0, 70, 150, 0.25);
  transition: transform 100ms ease;
}

.pr-player .pr-play:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 0 var(--blue-edge), 0 12px 22px rgba(0, 70, 150, 0.25);
  transform: translateY(-1px);
}

.pr-player .pr-play:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--blue-edge);
}

.pr-play svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-play svg path:first-child {
  fill: currentColor;
}

.pr-play.is-playing {
  animation: pr-pulse 600ms ease;
}

.pr-play.is-ready {
  animation: pr-ready 1.6s ease-in-out infinite;
}

@keyframes pr-ready {
  0%, 100% { box-shadow: 0 6px 0 var(--blue-edge), 0 0 0 0 rgba(0, 128, 255, 0.28); }
  50% { box-shadow: 0 6px 0 var(--blue-edge), 0 0 0 12px rgba(0, 128, 255, 0); }
}

.pr-play.is-nudge {
  animation: pr-nudge 420ms ease;
}

@keyframes pr-pulse {
  0% { box-shadow: 0 6px 0 var(--blue-edge), 0 0 0 0 rgba(0, 128, 255, 0.45); }
  100% { box-shadow: 0 6px 0 var(--blue-edge), 0 0 0 26px rgba(0, 128, 255, 0); }
}

@keyframes pr-nudge {
  25%, 75% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}

/* Word cards */

.pr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.pr-player .pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 156px;
  padding: 22px 12px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 var(--edge);
  transition: transform 100ms ease, box-shadow 150ms ease;
}

.pr-player .pr-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 5px;
  border-radius: 0 0 4px 4px;
  background: var(--blue);
}

.pr-player .pr-card[data-side="1"]::before {
  background: var(--orange);
}

.pr-player .pr-card:hover {
  background: #fff;
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 5px 0 var(--edge);
  transform: translateY(-2px);
}

.pr-player .pr-card:active {
  transform: translateY(4px);
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 1px 0 var(--edge);
}

.pr-word {
  color: var(--ink);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.pr-ipa {
  color: var(--blue);
  font-size: 19px;
  font-weight: 400;
}

.pr-card[data-side="1"] .pr-ipa {
  color: var(--orange);
}

.pr-player .pr-card.is-right,
.pr-player .pr-card.is-right:hover {
  background: #e9f8f0;
  box-shadow: inset 0 0 0 3px var(--green), 0 5px 0 var(--green-edge);
  transform: none;
}

.pr-player .pr-card.is-wrong,
.pr-player .pr-card.is-wrong:hover {
  background: #fdeceb;
  box-shadow: inset 0 0 0 3px var(--red), 0 5px 0 #b8322c;
  transform: none;
}

.pr-player .pr-card.is-wrong {
  animation: pr-nudge 380ms ease;
}

.pr-ear {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef4fb;
  color: var(--blue);
}

.pr-player.is-answered .pr-ear {
  display: flex;
}

.pr-ear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-ear svg path:first-child {
  fill: currentColor;
}

/* Score */

.pr-end {
  margin-top: 6px;
}

.pr-player .pr-score {
  color: var(--blue);
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
}

.pr-player .pr-score-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 18px;
}

/* Buttons */

.pr-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 58px;
  margin-top: 26px;
}

.pr-player .pr-pill {
  min-width: 200px;
  height: 54px;
  padding: 0 36px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 5px 0 var(--blue-edge), 0 8px 14px rgba(0, 0, 0, 0.12);
}

.pr-player .pr-pill:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 0 var(--blue-edge), 0 8px 14px rgba(0, 0, 0, 0.12);
}

.pr-player .pr-pill:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--blue-edge);
}

.pr-player .pr-pill:disabled,
.pr-player .pr-pill:disabled:hover {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: 0 5px 0 var(--blue-edge);
}

.pr-player .pr-text {
  padding: 8px 4px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.pr-player .pr-text:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* Keyboard hint: only for mouse-and-keyboard screens */
.pr-player .pr-keyhint {
  display: none;
  margin-top: 18px;
  color: #9aa8b7;
  font-size: 13px;
}

.pr-keyhint kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 var(--edge);
}

@media (hover: hover) and (pointer: fine) {
  .pr-player .pr-keyhint { display: block; }
}

/* Match */

.pr-match {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.pr-mcol {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  transition: background 150ms ease;
}

.pr-mcol.is-active {
  background: rgba(0, 128, 255, 0.10);
}

.pr-player .pr-spk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--blue-edge);
}

.pr-player .pr-spk:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--blue-edge);
}

.pr-player .pr-spk:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--blue-edge);
}

.pr-spk svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-spk svg path:first-child {
  fill: currentColor;
}


.pr-player .pr-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 4px;
  border-radius: 12px;
  background: #f3f8fe;
  color: #a9bccf;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px #bcd3ec;
  overflow-wrap: anywhere;
}

.pr-mcol.is-active .pr-slot:not(.is-filled) {
  box-shadow: inset 0 0 0 3px var(--blue);
  color: var(--blue);
}

.pr-player .pr-slot.is-filled {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 var(--edge);
}

.pr-player .pr-slot.is-right {
  background: #e9f8f0;
  color: var(--green-edge);
  box-shadow: inset 0 0 0 3px var(--green);
}

.pr-player .pr-slot.is-wrong {
  background: #fdeceb;
  color: var(--red);
  box-shadow: inset 0 0 0 3px var(--red);
  text-decoration: line-through;
}

.pr-fix {
  color: var(--green-edge);
  font-size: 15px;
}

.pr-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.pr-player .pr-chip {
  min-width: 92px;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}

.pr-player .pr-chip:hover {
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 4px 0 var(--edge);
}

.pr-player .pr-chip:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 1px 0 var(--edge);
}

.pr-player .pr-result {
  min-height: 24px;
  margin-top: 18px;
  font-size: 18px;
}

.pr-result.is-good { color: var(--green-edge); }
.pr-result.is-ok { color: var(--ink); }

/* Say it */

.pr-player .pr-say-word {
  margin-top: 6px;
  color: var(--ink);
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
}

.pr-player .pr-say-ipa {
  margin-top: 4px;
  font-family: "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
}

.pr-player .pr-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}

.pr-player .pr-ghost:hover {
  background: #fff;
  color: var(--blue-edge);
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 4px 0 var(--edge);
}

.pr-player .pr-ghost:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px #bcd3ec, 0 1px 0 var(--edge);
}

.pr-ghost svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-ghost svg path:first-child {
  fill: currentColor;
}

.pr-player .pr-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-top: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 0 #b8322c, 0 12px 22px rgba(150, 40, 30, 0.22);
}

.pr-player .pr-mic:hover {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 0 #b8322c, 0 12px 22px rgba(150, 40, 30, 0.22);
}

.pr-player .pr-mic:disabled {
  opacity: 0.35;
  cursor: default;
}

.pr-mic svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.pr-mic svg rect {
  fill: currentColor;
}

.pr-mic.is-on {
  animation: pr-rec 1s ease infinite;
}

@keyframes pr-rec {
  0% { box-shadow: 0 6px 0 #b8322c, 0 0 0 0 rgba(224, 65, 58, 0.5); }
  100% { box-shadow: 0 6px 0 #b8322c, 0 0 0 24px rgba(224, 65, 58, 0); }
}

.pr-player .pr-heard {
  min-height: 24px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 18px;
}

.pr-heard.is-good { color: var(--green-edge); }
.pr-heard.is-bad { color: var(--red); }

.pr-player .pr-note {
  width: min(100%, 520px);
  margin: 0 auto 22px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff6e5;
  color: #7a5200;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px #ffdca0;
}

.pr-note strong {
  font-weight: 800;
}

.pr-note.is-warn {
  background: #fdeceb;
  color: #a5261f;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #f5c2bf;
}

.pr-player .pr-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  width: min(100%, 700px);
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(40, 60, 90, 0.10);
  font-size: 14px;
}

.pr-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.pr-switch select {
  max-width: 260px;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--edge);
  cursor: pointer;
}

.pr-switch select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 3px var(--focus);
}

.pr-more a {
  color: var(--muted);
  text-decoration: none;
}

.pr-more a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* Phones */

@media (max-width: 560px) {
  .pr-player {
    padding: 22px 12px 32px;
  }

  .pr-player h1 {
    font-size: 26px;
  }

  .pr-player .pr-seg button {
    padding: 0 12px;
    font-size: 13px;
  }

  .pr-cards {
    gap: 10px;
  }

  .pr-player .pr-card {
    min-height: 120px;
  }

  .pr-word {
    font-size: 32px;
  }

  .pr-ipa {
    font-size: 17px;
  }

  .pr-player .pr-more {
    flex-direction: column;
  }

  .pr-match {
    grid-template-columns: repeat(3, 1fr);
  }

  .pr-player .pr-say-word {
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr-play.is-playing,
  .pr-play.is-ready,
  .pr-play.is-nudge,
  .pr-player .pr-card.is-wrong,
  .pr-mic.is-on {
    animation: none;
  }
}