.mra {
  --mra-gold: #ddb86b;
  --mra-gold-bright: #f1d493;
  --mra-violet: #a686d7;
  --mra-ink: #f6eff8;
  --mra-muted: #b3a8bc;
  --mra-deep: #080610;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  color: var(--mra-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mra *, .mra *::before, .mra *::after { box-sizing: border-box; }
.mra button, .mra input { font: inherit; }
.mra button { cursor: pointer; }
.mra button:disabled { cursor: default; }
.mra [hidden] { display: none !important; }
.mra .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mra-kicker {
  display: block;
  color: var(--mra-gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mra-hero {
  position: relative;
  min-height: clamp(31rem, 57vw, 39rem);
  overflow: hidden;
  border: 1px solid rgba(221, 184, 107, .25);
  border-radius: 28px;
  background: var(--mra-deep);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .36);
  isolation: isolate;
}
.mra-hero::after {
  content: '';
  position: absolute;
  inset: .7rem;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 21px;
  pointer-events: none;
}
.mra-hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}
.mra-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 3, 12, .98) 0%, rgba(5, 3, 12, .88) 30%, rgba(5, 3, 12, .38) 56%, rgba(5, 3, 12, .08) 100%),
    linear-gradient(180deg, rgba(5, 3, 12, .12), rgba(5, 3, 12, .58));
}
.mra-hero-copy {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: min(47%, 32rem);
  padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  flex-direction: column;
  justify-content: center;
}
.mra-hero-copy h2 {
  max-width: 9.3em;
  margin: .7rem 0 1rem;
  color: #fff8ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 4.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
}
.mra-hero-copy > p {
  max-width: 30rem;
  margin: 0;
  color: #d7cddc;
  font-size: clamp(.94rem, 1.5vw, 1.04rem);
  line-height: 1.65;
}
.mra-hero-points {
  display: flex;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.mra-hero-points span {
  padding: .44rem .72rem;
  border: 1px solid rgba(221, 184, 107, .24);
  border-radius: 999px;
  background: rgba(7, 5, 15, .62);
  color: #ded3e2;
  font-size: .72rem;
  font-weight: 650;
}

.mra-game {
  position: relative;
  max-width: 1000px;
  margin: clamp(1.4rem, 4vw, 2.5rem) auto 0;
  padding: clamp(1.25rem, 4vw, 2.6rem);
  border: 1px solid rgba(221, 184, 107, .19);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -10%, rgba(134, 90, 180, .15), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .036), rgba(255, 255, 255, .014));
  box-shadow: 0 26px 65px rgba(0, 0, 0, .24);
}
.mra-game::before {
  content: '';
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 18px;
  pointer-events: none;
}
.mra-game > section { position: relative; z-index: 1; }
.mra-section-head,
.mra-board-head { max-width: 44rem; margin: 0 auto; text-align: center; }
.mra-section-head h2,
.mra-board-head h2,
.mra-result > h2 {
  margin: .55rem 0 .75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}
.mra-section-head > p,
.mra-board-head > p {
  margin: 0;
  color: var(--mra-muted);
  line-height: 1.65;
}

.mra-modes {
  display: grid;
  margin: 1.75rem auto 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .72rem;
}
.mra-mode {
  position: relative;
  display: grid;
  min-height: 9.1rem;
  padding: 1.05rem 2.1rem 1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 17px;
  background: rgba(5, 4, 12, .48);
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.mra-mode:hover { transform: translateY(-2px); border-color: rgba(221, 184, 107, .38); }
.mra-mode.is-selected {
  border-color: rgba(221, 184, 107, .74);
  background: linear-gradient(145deg, rgba(221, 184, 107, .11), rgba(117, 77, 158, .09));
  box-shadow: inset 0 0 28px rgba(221, 184, 107, .045);
}
.mra-mode input,
.mra-pools input { position: absolute; opacity: 0; pointer-events: none; }
.mra-mode:has(input:focus-visible),
.mra-pools label:has(input:focus-visible) { outline: 2px solid var(--mra-gold-bright); outline-offset: 3px; }
.mra-mode-number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(221, 184, 107, .28);
  border-radius: 50%;
  color: var(--mra-gold);
  font-family: Georgia, serif;
  font-size: .85rem;
}
.mra-mode-copy { min-width: 0; }
.mra-mode-copy small,
.mra-mode-copy strong,
.mra-mode-copy em { display: block; }
.mra-mode-copy small {
  color: var(--mra-gold);
  font-size: .62rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.mra-mode-copy strong {
  margin-top: .3rem;
  color: var(--mra-ink);
  font-family: Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.2;
}
.mra-mode-copy em {
  margin-top: .4rem;
  color: var(--mra-muted);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.42;
}
.mra-mode > i {
  position: absolute;
  top: 1rem;
  right: .9rem;
  width: .9rem;
  height: .9rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}
.mra-mode.is-selected > i {
  border: 3px solid #151020;
  background: var(--mra-gold);
  box-shadow: 0 0 0 1px var(--mra-gold);
}

.mra-pools {
  display: grid;
  max-width: 720px;
  margin: 1.25rem auto 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}
.mra-pools legend {
  width: 100%;
  margin-bottom: .7rem;
  color: var(--mra-gold);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
.mra-pools label {
  position: relative;
  display: grid;
  min-height: 5rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(5, 4, 12, .38);
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  cursor: pointer;
}
.mra-pools label.is-selected {
  border-color: rgba(166, 134, 215, .7);
  background: rgba(105, 70, 144, .13);
}
.mra-pools b {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid rgba(166, 134, 215, .28);
  border-radius: 50%;
  color: #c9adea;
  font-family: Georgia, serif;
  font-size: .84rem;
}
.mra-pools strong,
.mra-pools small { display: block; }
.mra-pools strong { color: var(--mra-ink); font-family: Georgia, serif; font-size: .98rem; }
.mra-pools small { margin-top: .2rem; color: var(--mra-muted); font-size: .72rem; line-height: 1.35; }

.mra-rules { max-width: 720px; margin: 1.25rem auto 0; }
.mra-rules h3 {
  margin: 0 0 .65rem;
  color: var(--mra-gold);
  font-size: .67rem;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
.mra-rules ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.mra-rules li {
  display: flex;
  min-height: 4.1rem;
  padding: .75rem;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 12px;
  background: rgba(6, 5, 12, .32);
  align-items: center;
  gap: .65rem;
}
.mra-rules li b { color: var(--mra-gold); font-family: Georgia, serif; font-size: .78rem; }
.mra-rules li span { color: #d1c7d5; font-size: .76rem; line-height: 1.35; }

.mra-btn {
  display: inline-flex;
  min-height: 3.2rem;
  padding: .78rem 1.25rem;
  border: 1px solid rgba(221, 184, 107, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, #d9b267, #f0d692);
  color: #17101c;
  font-weight: 800;
  line-height: 1.2;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  box-shadow: 0 12px 28px rgba(195, 146, 63, .16);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.mra-btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 32px rgba(195, 146, 63, .24); }
.mra-btn:focus-visible,
.mra-tile:focus-visible { outline: 2px solid var(--mra-gold-bright); outline-offset: 4px; }
.mra-btn.is-secondary {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .035);
  color: var(--mra-ink);
  box-shadow: none;
}
.mra-begin { display: flex; width: min(100%, 22rem); margin: 1.45rem auto 0; }

.mra-loading {
  display: grid;
  min-height: 24rem;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  color: var(--mra-muted);
  text-align: center;
}
.mra-loading strong { font-size: .84rem; font-weight: 650; letter-spacing: .05em; }
.mra-loading-cards { position: relative; display: block; width: 7rem; height: 7.2rem; }
.mra-loading-cards i {
  position: absolute;
  top: .35rem;
  left: 2.25rem;
  display: block;
  width: 2.55rem;
  height: 4.35rem;
  border: 1px solid rgba(221, 184, 107, .52);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(221, 184, 107, .58) 0 4%, transparent 5%),
    linear-gradient(145deg, #161027, #090711);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .28);
  transform-origin: 50% 100%;
  animation: mra-deal 1.35s ease-in-out infinite;
}
.mra-loading-cards i:first-child { transform: rotate(-20deg); animation-delay: -.2s; }
.mra-loading-cards i:last-child { transform: rotate(20deg); animation-delay: .2s; }
@keyframes mra-deal {
  0%, 100% { translate: 0 0; opacity: .55; }
  50% { translate: 0 1.4rem; opacity: 1; }
}

.mra-scoreboard {
  display: grid;
  max-width: 760px;
  margin: 0 auto 1.45rem;
  padding: .72rem;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  background: rgba(5, 4, 12, .48);
  grid-template-columns: repeat(4, 1fr);
}
.mra-scoreboard p { margin: 0; padding: .2rem .7rem; text-align: center; }
.mra-scoreboard p + p { border-left: 1px solid rgba(255, 255, 255, .07); }
.mra-scoreboard small,
.mra-scoreboard strong { display: block; }
.mra-scoreboard small {
  color: var(--mra-muted);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mra-scoreboard strong { margin-top: .18rem; color: var(--mra-gold-bright); font-family: Georgia, serif; font-size: 1.1rem; }
.mra-board-head { margin-bottom: 1.1rem; }
.mra-board-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }

.mra-board {
  display: grid;
  width: min(100%, 760px);
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, .8rem);
  perspective: 1200px;
}
.mra-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  /* Las cartas optimizadas miden 600 × 1020: mantener su 10:17 evita
     recortar el título y el marco inferior al mostrarlas completas. */
  aspect-ratio: 10 / 17;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mra-tile-inner {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.2, .72, .24, 1);
}
.mra-tile.is-open .mra-tile-inner { transform: rotateY(180deg); }
.mra-face {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(221, 184, 107, .22);
  border-radius: inherit;
  background: #0b0813;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .26);
}
.mra-back { place-items: stretch; }
.mra-back::after {
  content: '';
  position: absolute;
  inset: .38rem;
  border: 1px solid rgba(239, 207, 135, .18);
  border-radius: 7px;
  pointer-events: none;
}
.mra-back img,
.mra-front.is-image img {
  width: 100%;
  height: 100%;
}
.mra-back img {
  object-fit: cover;
}
.mra-front.is-image img {
  object-fit: contain;
}
.mra-front {
  transform: rotateY(180deg);
  border-color: rgba(237, 207, 139, .36);
}
.mra-front.is-image { background: #09060d; }
.mra-card-mask {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  height: 16%;
  border-top: 1px solid rgba(221, 184, 107, .25);
  background:
    radial-gradient(circle at 50% 20%, rgba(221, 184, 107, .14), transparent 48%),
    linear-gradient(180deg, rgba(7, 5, 13, .94), #07050d);
}
.mra[data-mode="name"] .mra-card-mask,
.mra[data-mode="meaning"] .mra-card-mask { display: block; }
.mra-front.is-name,
.mra-front.is-meaning {
  padding: clamp(.55rem, 2.2vw, 1.15rem);
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(166, 134, 215, .16), transparent 48%),
    linear-gradient(150deg, #171025, #090711 72%);
}
.mra-front.is-name::before,
.mra-front.is-meaning::before {
  content: '';
  position: absolute;
  inset: .38rem;
  border: 1px solid rgba(221, 184, 107, .18);
  border-radius: 7px;
}
.mra-front small {
  position: relative;
  z-index: 1;
  color: var(--mra-gold);
  font-size: clamp(.46rem, 1.1vw, .61rem);
  font-weight: 800;
  letter-spacing: .17em;
}
.mra-front strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: .55rem;
  color: #fff6e9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.72rem, 1.7vw, 1.08rem);
  line-height: 1.22;
  text-wrap: balance;
}
.mra-front.is-meaning strong {
  font-size: clamp(.62rem, 1.48vw, .9rem);
  line-height: 1.34;
}
.mra-tile:not(:disabled):hover .mra-tile-inner { translate: 0 -3px; }
.mra-tile.is-matched .mra-face {
  border-color: rgba(241, 212, 147, .85);
  box-shadow: 0 0 0 1px rgba(241, 212, 147, .28), 0 0 26px rgba(203, 158, 72, .26);
}
.mra-tile.is-matched::after {
  content: '✓';
  position: absolute;
  top: .42rem;
  right: .42rem;
  z-index: 3;
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: #dcb86d;
  color: #160f1b;
  font-size: .8rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.mra-status {
  min-height: 1.5rem;
  margin: 1rem auto 0;
  color: #cfc4d5;
  font-size: .84rem;
  font-weight: 650;
  text-align: center;
}

.mra-result {
  max-width: 780px;
  min-height: 33rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.7rem);
  border: 1px solid rgba(221, 184, 107, .21);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 24%, rgba(162, 120, 201, .2), transparent 38%),
    rgba(7, 5, 14, .55);
  text-align: center;
}
.mra-result-orbit {
  position: relative;
  display: block;
  width: 5.2rem;
  height: 5.2rem;
  margin: 0 auto 1.2rem;
  border: 1px solid rgba(221, 184, 107, .35);
  border-radius: 50%;
}
.mra-result-orbit::before,
.mra-result-orbit::after,
.mra-result-orbit i {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.mra-result-orbit::before { inset: .7rem; border: 1px solid rgba(166, 134, 215, .35); }
.mra-result-orbit::after { inset: 1.85rem; background: var(--mra-gold); box-shadow: 0 0 22px rgba(221, 184, 107, .55); }
.mra-result-orbit i { inset: -.32rem; border-top: 1px solid rgba(221, 184, 107, .58); transform: rotate(38deg); }
.mra-result-moves {
  display: block;
  margin-top: .65rem;
  color: var(--mra-gold-bright);
  font-family: Georgia, serif;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1;
}
.mra-record-badge {
  display: inline-block;
  margin-top: .8rem;
  padding: .38rem .7rem;
  border: 1px solid rgba(221, 184, 107, .4);
  border-radius: 999px;
  color: var(--mra-gold);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mra-result-rank {
  margin: 1.2rem 0 .55rem;
  color: #fff5e7;
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
}
.mra-result-text { max-width: 38rem; margin: 0 auto; color: var(--mra-muted); line-height: 1.65; }
.mra-result-stats {
  display: flex;
  margin: 1.35rem auto 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.mra-result-stats span {
  padding: .52rem .75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: #d6ccd9;
  font-size: .75rem;
}
.mra-actions {
  display: flex;
  margin-top: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
}
.mra-share-status { min-height: 1.35rem; margin: .85rem 0 0; color: var(--mra-gold); font-size: .78rem; }
.mra-disclaimer { margin: 1rem 0 0; color: #8f8598; font-size: .72rem; text-align: center; }

@media (max-width: 760px) {
  .mra-hero { min-height: 35rem; border-radius: 21px; }
  .mra-hero::after { inset: .45rem; border-radius: 16px; }
  .mra-hero > img { object-position: 59% center; }
  .mra-hero-veil {
    background:
      linear-gradient(180deg, rgba(5, 3, 12, .3) 0%, rgba(5, 3, 12, .64) 40%, rgba(5, 3, 12, .98) 74%),
      linear-gradient(90deg, rgba(5, 3, 12, .45), transparent 70%);
  }
  .mra-hero-copy {
    inset: auto 0 0;
    width: 100%;
    padding: 4.7rem 1.3rem 2.1rem;
    justify-content: flex-end;
  }
  .mra-hero-copy h2 { max-width: 11em; font-size: clamp(2.15rem, 10vw, 3.25rem); }
  .mra-game { padding: 1.15rem; border-radius: 19px; }
  .mra-modes { grid-template-columns: 1fr; }
  .mra-mode { min-height: 6.6rem; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; }
  .mra-rules ol { grid-template-columns: 1fr; }
  .mra-rules li { min-height: 3.25rem; }
  .mra-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .48rem; }
  .mra-front.is-name,
  .mra-front.is-meaning { padding: .45rem; }
  .mra-front strong { margin-top: .35rem; }
}

@media (max-width: 440px) {
  .mra-pools { grid-template-columns: 1fr; }
  .mra-pools label { min-height: 4.3rem; }
  .mra-scoreboard { padding: .5rem .25rem; }
  .mra-scoreboard p { padding-inline: .25rem; }
  .mra-scoreboard small { font-size: .5rem; letter-spacing: .07em; }
  .mra-scoreboard strong { font-size: .95rem; }
  .mra-front small { letter-spacing: .1em; }
  .mra-actions { display: grid; }
  .mra-actions .mra-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mra *, .mra *::before, .mra *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}