/* Memory's play selection and race messages share the collection cabinet's palette. */
.mp-overlay {
  --mp-ink: #fff6e4;
  --mp-muted: #c2b1cb;
  --mp-gold: #ffce77;
  --mp-line: #b591c135;
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #100b17d9;
  color: var(--mp-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overscroll-behavior: contain;
}
.mp-overlay[hidden], .mp-overlay [hidden] { display: none !important; }
.mp-overlay *, .mp-overlay *::before, .mp-overlay *::after { box-sizing: border-box; }
.mp-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d6b5e047;
  border-radius: 25px;
  background: radial-gradient(ellipse at 12% 0%, #94576b30, transparent 60%), linear-gradient(150deg, #302238, #1b1424 72%);
  box-shadow: 0 30px 100px #000a, inset 0 1px 0 #fff2;
  outline: none;
  isolation: isolate;
  animation: mp-arrive 180ms ease-out both;
}
.mp-overlay button {
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.mp-overlay button:focus-visible { outline: 3px solid #a2e5da; outline-offset: 3px; }
.mp-overlay button:active { transform: scale(.985); }
.mp-overlay button:disabled { cursor: default; opacity: .55; }
.mp-overlay svg { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
.mp-header {
  display: flex;
  grid-area: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 23px 26px 21px;
  border: 0;
  border-bottom: 1px solid var(--mp-line);
}
.mp-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 50px;
  height: 55px;
  border: 1px solid #ffe4a991;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffdd96, #cd9343);
  color: #392517;
  box-shadow: inset 0 1px 1px #fffb, 0 6px 18px #0603094d;
  transform: rotate(-6deg);
}
.mp-emblem svg { width: 29px; height: 29px; }
.mp-heading { flex: 1; min-width: 0; }
.mp-title { margin: 0; color: var(--mp-ink); font: 700 clamp(22px, 3vw, 29px)/1.14 Georgia, "Times New Roman", serif; }
.mp-intro { margin: 7px 0 0; color: var(--mp-muted); font-size: 13px; line-height: 1.4; }
.mp-overlay .mp-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--mp-line); border-radius: 13px; background: #ffffff06; }
.mp-main { display: grid; gap: 23px; min-width: 0; min-height: 0; padding: 23px 26px 25px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #80608a #1b1424; }
.mp-modes-section, .mp-levels-section { min-width: 0; }
.mp-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mp-overlay .mp-mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 86px;
  padding: 16px 28px 16px 15px;
  border: 1px solid #ae8abb43;
  border-radius: 16px;
  background: linear-gradient(145deg, #3b2c445e, #281d32);
  text-align: left;
  box-shadow: inset 0 1px #ffffff07;
}
.mp-mode-icon { display: grid; place-items: center; flex: 0 0 35px; height: 39px; color: #ccafdc; }
.mp-mode-icon svg { width: 28px; height: 28px; }
.mp-mode-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-mode-text strong { color: var(--mp-ink); font-size: 14px; font-weight: 650; line-height: 1.2; }
.mp-mode-text > span { color: var(--mp-muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
.mp-context { margin: 13px 2px 0; color: #cbbbd2; font-size: 12px; line-height: 1.5; }
.mp-online-note { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #f0ba6340; border-radius: 10px; background: #d4a34b0c; color: #efcca0; font-size: 12px; line-height: 1.45; }
.mp-section-title { margin: 0 0 11px; font-size: 13px; line-height: 1.3; font-weight: 650; color: #dfcee5; }
.mp-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mp-overlay .mp-level {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 119px;
  padding: 14px 20px 14px 16px;
  border: 1px solid #ae8abb43;
  border-radius: 16px;
  background: radial-gradient(ellipse at 100% 0%, #7351771b, transparent 80%), linear-gradient(145deg, #33263c, #251b2e);
  text-align: left;
  box-shadow: 0 4px 13px #08050d20, inset 0 1px #ffffff07;
}
.mp-level-copy { display: block; min-width: 0; }
.mp-level-name { display: block; margin-bottom: 6px; color: #e4d5e9; font-size: 12px; line-height: 1.25; font-weight: 650; overflow-wrap: anywhere; }
.mp-level-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-bottom: 5px; }
.mp-level-count b { font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: -.045em; color: #fff5e1; }
.mp-level-count > span { color: var(--mp-muted); font-size: 10px; line-height: 1.25; font-weight: 500; }
.mp-level-description { overflow-wrap: anywhere; display: block; color: var(--mp-muted); font-size: 10px; line-height: 1.4; font-weight: 400; }
.mp-level-mini { display: grid; grid-template-columns: repeat(var(--mp-mini-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--mp-mini-rows), minmax(0, 1fr)); gap: 3px; width: 64px; height: 69px; align-self: center; transform: perspective(230px) rotateY(-9deg) rotateZ(5deg); filter: drop-shadow(0 6px 6px #05030840); }
.mp-level-mini i { display: block; min-width: 0; min-height: 0; border: 1px solid #bc91bd5c; border-radius: 2px; background: linear-gradient(145deg, #785380, #493251); box-shadow: inset 0 1px #e2c9f121, 0 1px 1px #0007; }
.mp-level-mini .mp-mini-open { border-color: #f6d38e; background: linear-gradient(135deg, #ffe4a9, #c99850); }
.mp-choice-check { position: absolute; display: grid; place-items: center; right: 9px; top: 8px; width: 19px; height: 19px; border: 1px solid #ffe4a988; border-radius: 50%; background: var(--mp-gold); color: #3d291d; opacity: 0; transform: scale(.7); transition: opacity 140ms, transform 140ms; }
.mp-choice-check svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mp-overlay .mp-mode[aria-checked="true"], .mp-overlay .mp-level[aria-checked="true"] { border-color: #ffce77d4; background: radial-gradient(ellipse at 100% 0%, #bd8b5021, transparent 85%), linear-gradient(145deg, #47333e, #31232f); box-shadow: 0 0 0 1px #ffce7729, 0 6px 18px #05020933, inset 0 1px #fff1; }
.mp-mode[aria-checked="true"] .mp-mode-icon, .mp-level[aria-checked="true"] .mp-level-count b { color: var(--mp-gold); }
.mp-mode[aria-checked="true"] .mp-choice-check, .mp-level[aria-checked="true"] .mp-choice-check { opacity: 1; transform: scale(1); }
.mp-footer { display: flex; grid-area: auto; align-items: stretch; gap: 12px; margin: 0; padding: 17px 26px 21px; border-top: 1px solid var(--mp-line); background: #160f1c42; }
.mp-overlay .mp-primary, .mp-overlay .mp-secondary { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; border-radius: 13px; text-align: center; font-size: 13px; font-weight: 650; line-height: 1.3; min-width: 0; min-height: 48px; }
.mp-overlay .mp-primary { flex: 1; border: 1px solid #ffe2a4a3; background: linear-gradient(135deg, #ffdc94, #e7b45f); color: #342319; box-shadow: inset 0 1px #fff8, 0 6px 20px #d4952f17; }
.mp-overlay .mp-primary > span, .mp-overlay .mp-secondary > span { min-width: 0; overflow-wrap: anywhere; }
.mp-overlay .mp-secondary { flex: 0 1 auto; border: 1px solid #b591c142; background: #ffffff06; color: #e6d9ea; }
.mp-secondary svg { width: 19px; height: 19px; color: #d5badf; }
.mp-overlay[data-mp-view="result"] .mp-dialog { width: min(550px, 100%); }
.mp-overlay[data-mp-view="result"] .mp-main { justify-items: center; gap: 20px; padding-top: 25px; }
.mp-result-medal { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #e6b96669; border-radius: 24px; background: radial-gradient(circle at 25% 15%, #ffd78c2e, transparent 78%), #6b49271f; color: #ffd58c; transform: rotate(-5deg); box-shadow: 0 8px 24px #09051055, inset 0 1px #fff1; }
.mp-result-medal svg { width: 42px; height: 42px; transform: rotate(5deg); }
.mp-overlay[data-mp-outcome="lost"] .mp-result-medal { color: #c9b0d8; border-color: #b894ce50; background: #73518122; }
.mp-results { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.mp-player-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; min-width: 130px; gap: 14px 10px; padding: 16px; border: 1px solid #ae8abb35; border-radius: 15px; background: #120d1961; }
.mp-player-result-you { border-color: #ffcc794d; background: #cda2530b; }
.mp-player-result h3 { grid-column: 1 / -1; margin: 0; color: #e6d8eb; font-size: 13px; line-height: 1.3; font-weight: 600; }
.mp-player-result-you h3 { color: var(--mp-gold); }
.mp-metric { display: grid; gap: 5px; min-width: 0; }
.mp-metric > span { color: var(--mp-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.mp-metric strong { color: #fff4df; font-size: 21px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-result-announcement { margin: 0; color: #e7c58b; font-size: 13px; text-align: center; line-height: 1.45; }
.mp-overlay[data-mp-view="status"] .mp-dialog, .mp-overlay[data-mp-view="leave"] .mp-dialog { width: min(500px, 100%); }
.mp-overlay[data-mp-view="status"] .mp-main, .mp-overlay[data-mp-view="leave"] .mp-main { justify-items: center; gap: 20px; padding-top: 26px; padding-bottom: 29px; }
.mp-status-mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #bc96c83d; border-radius: 20px; background: #bc96c80e; color: #d9bce4; }
.mp-status-mark svg { width: 32px; height: 32px; }
.mp-status-message { margin: 0; max-width: 350px; color: #eadbed; font-size: 15px; line-height: 1.55; text-align: center; }
.mp-overlay[data-mp-view="status"] .mp-footer { justify-content: center; }
.mp-overlay .mp-leave-action { color: #efb7b1; border-color: #e4998b4d; }
.mp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (hover: hover) {
  .mp-overlay .mp-mode:hover, .mp-overlay .mp-level:hover { border-color: #e5c4ee8c; }
  .mp-overlay .mp-mode[aria-checked="true"]:hover, .mp-overlay .mp-level[aria-checked="true"]:hover { border-color: #ffdfa2; }
  .mp-overlay .mp-primary:not(:disabled):hover { background: linear-gradient(135deg, #ffe3ab, #f0bf71); box-shadow: inset 0 1px #fff8, 0 7px 23px #d4952f26; }
  .mp-overlay .mp-secondary:hover, .mp-overlay .mp-close:hover { border-color: #d7b4e36b; background: #ffffff0d; }
}
@media (max-width: 600px) {
  .mp-dialog { border-radius: 21px; }
  .mp-header { gap: 11px; padding: 18px 15px 16px; }
  .mp-emblem { width: 38px; height: 43px; border-radius: 11px; }
  .mp-emblem svg { width: 25px; height: 25px; }
  .mp-title { font-size: 22px; }
  .mp-intro { margin-top: 5px; font-size: 11px; }
  .mp-main { gap: 18px; padding: 17px 14px 20px; }
  .mp-modes { gap: 8px; }
  .mp-overlay .mp-mode { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 7px; min-height: 112px; padding: 12px 13px; border-radius: 13px; }
  .mp-mode-icon { flex-basis: auto; width: 26px; height: 28px; }
  .mp-mode-icon svg { width: 25px; height: 25px; }
  .mp-mode-text { gap: 5px; }
  .mp-mode-text strong { font-size: 13px; }
  .mp-mode-text > span { font-size: 10px; line-height: 1.35; }
  .mp-context { margin-top: 11px; font-size: 11px; }
  .mp-online-note { padding: 8px 10px; font-size: 11px; }
  .mp-section-title { font-size: 12px; margin-bottom: 9px; }
  .mp-levels { gap: 8px; }
  .mp-overlay .mp-level { grid-template-columns: minmax(0, 1fr) 40px; gap: 7px; padding: 13px 10px 12px; min-height: 111px; border-radius: 13px; }
  .mp-level-name { margin-bottom: 6px; font-size: 11px; }
  .mp-level-count { gap: 4px; }
  .mp-level-count b { font-size: 24px; }
  .mp-level-count > span { font-size: 10px; }
  .mp-level-description { font-size: 10px; line-height: 1.4; }
  .mp-level-mini { width: 40px; height: 49px; gap: 2px; transform: perspective(230px) rotateY(-9deg) rotateZ(4deg); }
  .mp-level-mini i { border-radius: 1.5px; }
  .mp-choice-check { right: 7px; top: 7px; width: 16px; height: 16px; }
  .mp-choice-check svg { width: 11px; height: 11px; }
  .mp-footer { gap: 9px; padding: 13px 14px 16px; }
  .mp-overlay .mp-primary, .mp-overlay .mp-secondary { gap: 7px; min-height: 48px; padding: 12px; border-radius: 12px; font-size: 12px; }
  .mp-overlay .mp-primary svg { width: 18px; height: 18px; }
  .mp-overlay .mp-secondary svg { width: 18px; height: 18px; }
  .mp-player-result { padding: 13px; min-width: 120px; }
  .mp-results { gap: 9px; }
  .mp-overlay[data-mp-view="result"] .mp-footer .mp-secondary { flex-basis: 42%; }
  .mp-status-message { font-size: 14px; }
}
@media (max-height: 700px) and (max-width: 600px) {
  .mp-header { padding-top: 14px; padding-bottom: 13px; }
  .mp-title { font-size: 21px; }
  .mp-main { padding-top: 13px; padding-bottom: 15px; gap: 14px; }
  .mp-overlay .mp-mode { min-height: 103px; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .mp-overlay .mp-level { min-height: 103px; padding-top: 11px; padding-bottom: 10px; }
  .mp-footer { padding-top: 11px; padding-bottom: 13px; }
}
@media (min-width: 601px) and (max-height: 520px) {
  .mp-dialog { width: min(920px, 100%); border-radius: 20px; }
  .mp-header { padding: 12px 20px; gap: 12px; }
  .mp-emblem { width: 37px; height: 42px; border-radius: 11px; }
  .mp-emblem svg { width: 25px; height: 25px; }
  .mp-title { font-size: 22px; }
  .mp-intro { font-size: 11px; margin-top: 4px; }
  .mp-main { grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr); gap: 20px; padding: 14px 20px; }
  .mp-modes { gap: 7px; }
  .mp-overlay .mp-mode { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 10px; gap: 7px; min-height: 99px; border-radius: 12px; }
  .mp-mode-icon { flex-basis: auto; width: 25px; height: 25px; }
  .mp-mode-icon svg { width: 25px; height: 25px; }
  .mp-mode-text { gap: 4px; }
  .mp-mode-text strong { font-size: 12px; }
  .mp-mode-text > span { font-size: 10px; }
  .mp-context { font-size: 11px; margin-top: 10px; }
  .mp-online-note { padding: 7px 9px; font-size: 10px; margin-top: 7px; }
  .mp-section-title { margin-bottom: 7px; font-size: 11px; }
  .mp-levels { gap: 7px; }
  .mp-overlay .mp-level { grid-template-columns: minmax(0, 1fr) 42px; gap: 10px; min-height: 91px; padding: 10px 12px; border-radius: 12px; }
  .mp-level-name { font-size: 11px; margin-bottom: 4px; }
  .mp-level-count { margin-bottom: 4px; }
  .mp-level-count b { font-size: 22px; }
  .mp-level-count > span, .mp-level-description { font-size: 10px; }
  .mp-level-mini { width: 42px; height: 49px; gap: 2px; }
  .mp-choice-check { right: 7px; top: 6px; width: 16px; height: 16px; }
  .mp-choice-check svg { width: 11px; height: 11px; }
  .mp-footer { padding: 10px 20px 12px; gap: 10px; }
  .mp-overlay .mp-primary, .mp-overlay .mp-secondary { min-height: 44px; padding: 10px 15px; font-size: 12px; }
  .mp-overlay[data-mp-view="result"] .mp-main { grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 15px; padding-top: 18px; padding-bottom: 18px; }
  .mp-result-medal { width: 64px; height: 64px; border-radius: 20px; }
  .mp-result-medal svg { width: 35px; height: 35px; }
  .mp-result-announcement { grid-column: 1 / -1; }
  .mp-overlay[data-mp-view="status"] .mp-main, .mp-overlay[data-mp-view="leave"] .mp-main { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; padding-bottom: 18px; }
  .mp-overlay[data-mp-view="status"] .mp-status-mark, .mp-overlay[data-mp-view="leave"] .mp-status-mark { width: 48px; height: 48px; border-radius: 15px; }
}
@keyframes mp-arrive { from { transform: translateY(7px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mp-overlay *, .mp-overlay *::before, .mp-overlay *::after { animation: none !important; transition: none !important; } }

/* A live announcement stays available to assistive technology without visible glyphs. */
.mp-sr-only{opacity:0;pointer-events:none}