.mgx-learning-journey,
.mgx-game-deck,
.mgx-remix-hub {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 7% 0%, rgba(108,226,194,.18), transparent 31%),
    radial-gradient(circle at 96% 3%, rgba(255,190,110,.15), transparent 30%),
    linear-gradient(145deg, rgba(18,24,46,.98), rgba(8,12,28,.98));
  box-shadow: 0 24px 60px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.07);
}

.mgx-learning-journey {
  margin: 0 0 28px;
  padding: clamp(18px, 2.6vw, 30px);
}

.mgx-learning-journey > header,
.mgx-game-deck > header,
.mgx-remix-hub > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.mgx-learning-journey > header small,
.mgx-game-deck > header small,
.mgx-remix-hub > div:first-child small,
.mgx-learn-card small,
.mgx-run-choice > div > small,
.mgx-run-results small {
  color: #8fe4cf;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.mgx-learning-journey > header h3,
.mgx-game-deck > header h3,
.mgx-remix-hub h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(23px, 2.6vw, 37px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.mgx-learning-journey > header > strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
  font-size: 18px;
  white-space: nowrap;
}

.mgx-learning-journey > header > strong span {
  color: #fff092;
  font-size: 34px;
}

.mgx-learning-journey > header > strong small {
  color: rgba(255,255,255,.68);
  letter-spacing: 0;
}

.mgx-learning-passport {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 20px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.mgx-learning-passport button {
  display: grid;
  min-width: 108px;
  min-height: 94px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.045);
  font: inherit;
  text-align: left;
}

.mgx-learning-passport button span {
  color: #8fe4cf;
  font-size: 12px;
  font-weight: 950;
}

.mgx-learning-passport button b {
  font-size: 14px;
  line-height: 1.3;
}

.mgx-learning-passport button small {
  color: rgba(255,255,255,.54);
  font-size: 11px;
}

.mgx-learning-passport button.is-complete {
  color: #fff;
  border-color: rgba(143,228,207,.48);
  background: rgba(80,193,163,.13);
}

.mgx-learning-passport button.is-mastered {
  border-color: #fff092;
  box-shadow: inset 0 0 0 1px rgba(255,240,146,.28), 0 7px 18px rgba(0,0,0,.14);
}

.mgx-learning-passport button.is-mastered small {
  color: #fff092;
}

.mgx-learning-fun-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 15px;
}

.mgx-learn-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
}

.mgx-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #162127;
  background: linear-gradient(135deg,#8fe4cf,#fff092);
  font-size: 22px;
  font-weight: 950;
}

.mgx-learn-card h4 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.42;
}

.mgx-learn-card h4 strong {
  color: #fff092;
  font-size: 31px;
}

.mgx-learn-card p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}

.mgx-learn-card button,
.mgx-quiz-options button {
  min-height: 43px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(143,228,207,.45);
  border-radius: 12px;
  color: #fff;
  background: rgba(75,179,154,.15);
  font: inherit;
  font-weight: 850;
}

.mgx-quiz-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.mgx-quiz-options button {
  margin: 10px 0 0;
}

.mgx-quiz-feedback {
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}

.mgx-quiz-feedback.is-correct {
  color: #a9f3cf;
  background: rgba(63,180,127,.14);
}

.mgx-quiz-feedback.is-wrong {
  color: #ffd2bb;
  background: rgba(235,107,76,.14);
}

.mgx-game-deck {
  width: min(100%, 1180px);
  margin: 22px auto 26px;
  padding: clamp(18px,2.5vw,28px);
}

.mgx-rival {
  display: grid;
  justify-items: end;
  padding: 10px 16px;
  border: 1px solid rgba(255,240,146,.35);
  border-radius: 15px;
  background: rgba(255,240,146,.09);
}

.mgx-rival small {
  color: #fff092 !important;
}

.mgx-rival strong {
  color: #fff;
  font-size: 34px;
}

.mgx-target-story {
  margin-top:14px;
  border:1px solid rgba(143,228,207,.28);
  border-radius:14px;
  background:rgba(143,228,207,.07);
}

.mgx-target-story summary {
  min-height:46px;
  padding:12px 14px;
  color:#eafff8;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}

.mgx-target-story p {
  margin:0;
  padding:0 14px 14px;
  color:rgba(255,255,255,.74);
  font-size:14px;
  line-height:1.7;
}

.mgx-daily-missions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  margin-top: 18px;
}

.mgx-daily-missions span {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.045);
}

.mgx-daily-missions i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  font-style: normal;
  font-weight: 950;
}

.mgx-daily-missions .is-done {
  color: #fff;
  border-color: rgba(143,228,207,.45);
  background: rgba(66,181,148,.14);
}

.mgx-daily-missions .is-done i {
  color: #15271f;
  background: #8fe4cf;
}

.mgx-run-choice {
  display: grid;
  grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr);
  gap: 16px;
  align-items: center;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.mgx-run-choice p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.45;
}

.mgx-strategy-options,
.mgx-promise-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.mgx-strategy-options button,
.mgx-promise-options button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  min-height: 72px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.05);
  font: inherit;
  text-align: left;
}

.mgx-strategy-options button > span,
.mgx-promise-options button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #fff092;
  font-size: 22px;
}

.mgx-strategy-options button b,
.mgx-promise-options button b {
  font-size: 14px;
}

.mgx-strategy-options button small,
.mgx-promise-options button small {
  color: rgba(255,255,255,.58);
  font-size: 11px;
}

.mgx-strategy-options button[aria-pressed="true"],
.mgx-promise-options button[aria-pressed="true"] {
  border-color: #8fe4cf;
  background: linear-gradient(135deg,rgba(76,202,164,.24),rgba(255,240,146,.09));
  box-shadow: inset 0 0 0 1px rgba(143,228,207,.35);
}

.mgx-run-results {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 15px;
}

.mgx-run-results article {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}

.mgx-run-results article.is-win {
  border-color: rgba(255,240,146,.62);
  background: linear-gradient(135deg,rgba(255,240,146,.14),rgba(80,196,162,.12));
}

.mgx-run-results b {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 22px;
}

.mgx-run-results p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.7);
}

.mgx-remix-hub {
  width: min(100%, 1120px);
  margin: 28px auto;
  padding: clamp(20px,3vw,32px);
}

.mgx-remix-hub > div:last-child {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}

.mgx-remix-hub button {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 70px;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(143,228,207,.42);
  border-radius: 15px;
  color: #fff;
  background: rgba(75,179,154,.13);
  font: inherit;
  text-align: left;
}

.mgx-remix-hub button span {
  color: #fff092;
  font-size: 25px;
}

.mgx-remix-hub button b {
  font-size: 15px;
}

@media (max-width: 900px) {
  .mgx-learning-passport {
    grid-template-columns: repeat(7,118px);
  }

  .mgx-run-choice {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mgx-learning-fun-grid,
  .mgx-daily-missions,
  .mgx-run-results,
  .mgx-remix-hub > div:last-child {
    grid-template-columns: 1fr;
  }

  .mgx-strategy-options,
  .mgx-promise-options {
    grid-template-columns: 1fr;
  }

  .mgx-learning-journey > header,
  .mgx-game-deck > header,
  .mgx-remix-hub > div:first-child {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .mgx-learning-journey,
  .mgx-game-deck,
  .mgx-remix-hub {
    border-radius: 19px;
  }

  .mgx-learning-journey > header,
  .mgx-game-deck > header {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .mgx-learning-journey > header h3,
  .mgx-game-deck > header h3 {
    font-size: 22px;
  }

  .mgx-quiz-options {
    grid-template-columns: 1fr;
  }
}