/* ==========================================================================
   MT Overview Themes – mt-overview-themes.css
   Realm overrides for .realm--glitch and .realm--arcade.
   Only colour values change — layout, spacing and structure stay identical.
   ========================================================================== */


/* ████████████████████████████████████████████████████████████████████████████
   LIGHT THEME
   ████████████████████████████████████████████████████████████████████████████ */

.realm--light .mto-exp-card__tag {
    margin-bottom: 22px !important;
}

/* ── Loop cards ───────────────────────────────────────────────────────────── */
.realm--light .mto-loop-card--ui {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--light .mto-loop-card--ui::before {
    display: none;
}

.realm--light .mto-loop-card:not(.mto-loop-card--ui) {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(68, 30, 133, 0.14);
    background: linear-gradient(73deg, rgba(113, 57, 209, 0.15) 13.26%, rgba(187, 147, 255, 0.00) 96.68%);
}

.realm--light .mto-loop-card:not(.mto-loop-card--ui)::before {
    display: none;
}

.realm--light .mto-loop-card--templates {
    border-radius: 1.72813rem;
    border: 3.281px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--light .mto-loop-card--templates::before {
    display: none;
}

.realm--light .mto-loop-card--collab {
    border-radius: 1.70194rem;
    border: 3.468px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--light .mto-loop-card--collab::before {
    display: none;
}

.realm--light .mto-loop-card--leaderboard {
    border-radius: 1.73075rem;
    border: 5.821px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--light .mto-loop-card--leaderboard::before {
    display: none;
}


/* ████████████████████████████████████████████████████████████████████████████
   GLITCH THEME
   ████████████████████████████████████████████████████████████████████████████ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.realm--glitch .mto-wrapper {
    background: #040512;
    color: #fff;
}

/* ── Typography utilities ─────────────────────────────────────────────────── */
.realm--glitch .mto-eyebrow {
    color: #7139D1;
}

.realm--glitch .mto-section-heading {
    color: #fff;
}

/* ── Primary CTA button ───────────────────────────────────────────────────── */
.realm--glitch .btn-mto-primary {
    background: linear-gradient(135deg, #7139D1 0%, #9b7ff7 100%);
    box-shadow: 0 4px 24px rgba(113, 57, 209, 0.28);
}

.realm--glitch .btn-mto-primary:hover,
.realm--glitch .btn-mto-primary:focus-visible {
    background: linear-gradient(135deg, #5b28b3 0%, #7139D1 100%);
    box-shadow: 0 8px 32px rgba(113, 57, 209, 0.38);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.realm--glitch .mto-hero {
    background-image: url('../images/Bg 1.png');
    background-size: cover;
    background-position: center top;
}

.realm--glitch .mto-hero-experience-wrapper {
    background-color: #040512;
}

.realm--glitch .mto-hero-experience-wrapper .mto-hero__bg-plate {
    display: none;
}

.realm--glitch .mto-hero__heading {
    color: #ffffff;
}

.realm--glitch .mto-hero__subheading {
    background: linear-gradient(73deg, rgba(113, 57, 209, 0.15) 13.26%, rgba(113, 57, 209, 0.00) 96.68%);
    border: 2.894px solid rgba(68, 30, 133, 0.14);
    border-radius: 1.5245rem;
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.realm--glitch .btn-hero-dungeon {
    color: #ffffff;
}

.realm--glitch .mto-hero__cta-subtext {
    color: #ffffff;
}

/* ── Experience section ───────────────────────────────────────────────────── */
.realm--glitch .mto-experience {
    background: #040512;
}

.realm--glitch .mto-exp-main-title {
    color: #ffffff;
}

.realm--glitch .mto-exp-main-subtitle {
    color: #7139D1;
}

/* ── Experience cards ─────────────────────────────────────────────────────── */
.realm--glitch .mto-exp-card {
    background: #F7F2FF;
    border-color: #DECAFF;
    box-shadow: 0 8px 36px rgba(113, 57, 209, 0.07);
}

.realm--glitch .mto-exp-card:hover {
    box-shadow: 0 18px 52px rgba(113, 57, 209, 0.18);
}

.realm--glitch .mto-exp-card--realm {
    background: linear-gradient(270deg, rgba(50, 0, 136, 0.11) 0%, rgba(30, 3, 76, 0.80) 100%);
    border-color: transparent;
    border-radius: 2.5rem;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
}

.realm--glitch .mto-exp-card--progress-block {
    border-radius: 2.58981rem;
    border: 8px solid rgba(80, 29, 166, 0.21);
    background: linear-gradient(102deg, rgba(50, 0, 136, 0.15) 0%, rgba(50, 0, 136, 0.21) 106.07%);
    box-sizing: border-box;
}

.realm--glitch .mto-exp-card--progress-block::before {
    background: url('../images/overview/progress-bg-glitch.png') lightgray -58.128px -17.342px / 114.215% 105.095% no-repeat;
    opacity: 0.08;
    mix-blend-mode: plus-lighter;
}

@keyframes mto-glow-pulse-glitch {
    0%,  100% { filter: brightness(1)    drop-shadow(0 0 0px  rgba(113, 57, 209, 0)); }
    50%        { filter: brightness(1.12) drop-shadow(0 0 28px rgba(113, 57, 209, 0.65)); }
}

.realm--glitch .mto-exp-card__img--glow-pulse {
    animation-name: mto-glow-pulse-glitch;
}

.realm--glitch .mto-exp-card__content--right {
    background: linear-gradient(0deg, rgba(50, 0, 136, 0.34) 0%, rgba(50, 0, 136, 0.00) 60.68%) !important;
    border-radius: 2.5rem;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
}

.realm--glitch .mto-exp-card__content--bottom-left {
    background: linear-gradient(270deg, rgba(50, 0, 136, 0.11) 0%, rgba(30, 3, 76, 0.80) 100%) !important;
    border-radius: 2.5rem;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
}


.realm--glitch .mto-exp-card__content--right .mto-exp-card__title,
.realm--glitch .mto-exp-card__content--bottom-center .mto-exp-card__title {
    color: #ffffff;
}

.realm--glitch .mto-exp-card__tag {
    color: #ffffff;
    font-family: "Fjalla One";
    font-weight: 400;
    line-height: 1.66744rem;
    letter-spacing: 0.32425rem;
}

/* ── Experience tabs ──────────────────────────────────────────────────────── */
.realm--glitch .mto-exp-tab {
    opacity: 0.7;
}

.realm--glitch .mto-exp-tabs::before,
.realm--glitch .mto-exp-tabs > div:not(:last-child) .mto-exp-tab::after {
    background: linear-gradient(90deg, rgba(102, 105, 254, 0.00) 0%, #6669FE 50%, rgba(102, 105, 254, 0.00) 100%);
    opacity: 0.5;
}

.realm--glitch .mto-exp-tab__dot {
    background: url('../images/overview/dot-normal-glitch.svg') center / contain no-repeat;
    width: 16px;
    height: 16px;
}

.realm--glitch .mto-exp-tab:hover .mto-exp-tab__dot,
.realm--glitch .mto-exp-tab.active .mto-exp-tab__dot {
    background: url('../images/overview/dot-active-glitch.svg') center / contain no-repeat;
    width: 57px;
    height: 57px;
    box-shadow: none;
    bottom: -21.5px;
    transform: translateX(-50%);
}

.realm--glitch .mto-exp-tab__text {
    color: #ffffff;
}

.realm--glitch .mto-exp-tab.active .mto-exp-tab__text {
    color: #ffffff;
}

/* ── Loop section ─────────────────────────────────────────────────────────── */
.realm--glitch .mto-loop {
    background: #040512;
}

.realm--glitch .mto-loop__glow-top-left {
    background: rgba(117, 120, 254, 0.36);
}

.realm--glitch .mto-loop__glow-top-right {
    background: rgba(177, 46, 165, 0.4);
}

.realm--glitch .mto-loop__glow-mid-left {
    background: #4731AF;
}

.realm--glitch .mto-loop__glow-mid-right {
    background: #FFA077;
}

.realm--glitch .mto-loop__eyebrow {
    color: #FFF;
}

.realm--glitch .mto-loop__heading {
    color: #7139D1;
}

/* ── Loop cards ───────────────────────────────────────────────────────────── */
.realm--glitch .mto-loop-card--ui {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--glitch .mto-loop-card--ui::before {
    display: none;
}

.realm--glitch .mto-loop-card:not(.mto-loop-card--ui) {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(68, 30, 133, 0.14);
    background: linear-gradient(73deg, rgba(113, 57, 209, 0.15) 13.26%, rgba(187, 147, 255, 0.00) 96.68%);
}

.realm--glitch .mto-loop-card:not(.mto-loop-card--ui)::before {
    display: none;
}

.realm--glitch .mto-loop-card--templates {
    border-radius: 1.72813rem;
    border: 3.281px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--glitch .mto-loop-card--templates::before {
    display: none;
}

.realm--glitch .mto-loop-card--collab {
    border-radius: 1.70194rem;
    border: 3.468px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--glitch .mto-loop-card--collab::before {
    display: none;
}

.realm--glitch .mto-loop-card--leaderboard {
    border-radius: 1.73075rem;
    border: 5.821px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--glitch .mto-loop-card--leaderboard::before {
    display: none;
}

.realm--glitch .mto-loop-card:hover {
    box-shadow: 0 12px 32px rgba(113, 57, 209, 0.08);
}

.realm--glitch .mto-loop-card__title {
    color: #7139D1;
}

.realm--glitch .mto-loop-card__desc {
    color: #FFF5F5;
}

/* ── CTA section ──────────────────────────────────────────────────────────── */
.realm--glitch .mto-cta {
    background: url('../images/bg 5.png') center / cover no-repeat;
}

.realm--glitch .mto-cta__cloud {
    display: none;
}

.realm--glitch .mto-cta__top-text {
    color: #ffffff;
}

.realm--glitch .mto-cta__pill {
    background: linear-gradient(180deg, rgba(113, 57, 209, 0.11) 0%, rgba(187, 147, 255, 0.11) 100%);
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.3);
}

.realm--glitch .mto-cta__heading {
    color: #fff;
}

.realm--glitch .eb-btn-cta {
    background: linear-gradient(94deg, #7239D1 0%, #F741E8 100.42%);
    box-shadow: 0 8px 28px rgba(113, 57, 209, 0.45);
}

.realm--glitch .eb-btn-cta:hover {
    background: #8a50e0;
    box-shadow: 0 14px 40px rgba(113, 57, 209, 0.6);
}


/* ████████████████████████████████████████████████████████████████████████████
   ARCADE THEME
   ████████████████████████████████████████████████████████████████████████████ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.realm--arcade .mto-wrapper {
    background: #1B1C48;
    color: #fff;
}

/* ── Typography utilities ─────────────────────────────────────────────────── */
.realm--arcade .mto-eyebrow {
    color: #7139D1;
}

.realm--arcade .mto-section-heading {
    color: #fff;
}

/* ── Primary CTA button ───────────────────────────────────────────────────── */
.realm--arcade .btn-mto-primary {
    background: linear-gradient(135deg, #7139D1 0%, #9b7ff7 100%);
    box-shadow: 0 4px 24px rgba(113, 57, 209, 0.28);
}

.realm--arcade .btn-mto-primary:hover,
.realm--arcade .btn-mto-primary:focus-visible {
    background: linear-gradient(135deg, #5b28b3 0%, #7139D1 100%);
    box-shadow: 0 8px 32px rgba(113, 57, 209, 0.38);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.realm--arcade .mto-hero {
    background: #1B1C48;
}

.realm--arcade .mto-hero-experience-wrapper {
    background-color: #1B1C48;
}

.realm--arcade .mto-hero-experience-wrapper .mto-hero__bg-plate {
    display: none;
}

.realm--arcade .mto-hero__heading {
    color: #ffffff;
}

.realm--arcade .mto-hero__subheading {
    background:
        linear-gradient(73deg, rgba(113, 57, 209, 0.15) 13.26%, rgba(113, 57, 209, 0.00) 96.68%) left / 50% 100% no-repeat,
        linear-gradient(73deg, rgba(113, 57, 209, 0.00) 3.32%, rgba(113, 57, 209, 0.15) 86.74%) right / 50% 100% no-repeat;
    border: 2.894px solid rgba(68, 30, 133, 0.14);
    border-radius: 1.5245rem;
    color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.realm--arcade .btn-hero-dungeon {
    color: #ffffff;
}

.realm--arcade .mto-hero__cta-subtext {
    color: #ffffff;
}

/* ── Experience section ───────────────────────────────────────────────────── */
.realm--arcade .mto-experience {
    background: #1B1C48;
}

.realm--arcade .mto-exp-main-title {
    color: #ffffff;
}

.realm--arcade .mto-exp-main-subtitle {
    color: #7139D1;
}

/* ── Experience cards ─────────────────────────────────────────────────────── */
.realm--arcade .mto-exp-card {
    background: #F7F2FF;
    border-color: #DECAFF;
    box-shadow: 0 8px 36px rgba(113, 57, 209, 0.07);
}

.realm--arcade .mto-exp-card:hover {
    box-shadow: 0 18px 52px rgba(113, 57, 209, 0.18);
}

.realm--arcade .mto-exp-card--realm {
    background: linear-gradient(270deg, rgba(50, 0, 136, 0.11) 0%, rgba(30, 3, 76, 0.80) 100%);
    border-color: transparent;
    border-radius: 2.5rem;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
}

.realm--arcade .mto-exp-card--progress-block {
    border: 8px solid rgba(80, 29, 166, 0.21);
    background: linear-gradient(102deg, rgba(50, 0, 136, 0.15) 0%, rgba(50, 0, 136, 0.21) 106.07%);
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .realm--arcade .mto-exp-card--tall {
        height: 37rem !important;
    }
}

@media (min-width: 1920px) {
    .realm--arcade .mto-exp-card--tall {
        height: 41rem !important;
    }
}

.realm--arcade .mto-exp-card--progress-block::before {
    background: url('../images/overview/progress-bg-arcade.png') lightgray -58.128px -17.342px / 114.215% 105.095% no-repeat;
    opacity: 0.08;
    mix-blend-mode: plus-lighter;
}


@keyframes mto-glow-pulse-arcade {
    0%,  100% { filter: brightness(1)    drop-shadow(0 0 0px  rgba(113, 57, 209, 0)); }
    50%        { filter: brightness(1.12) drop-shadow(0 0 28px rgba(113, 57, 209, 0.65)); }
}

.realm--arcade .mto-exp-card__img--glow-pulse {
    animation-name: mto-glow-pulse-arcade;
}

.realm--arcade .mto-exp-card__content--right {
    background: linear-gradient(0deg, rgba(50, 0, 136, 0.34) 0%, rgba(50, 0, 136, 0.00) 60.68%) !important;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
    border-radius: 2.5rem;
}

.realm--arcade .mto-exp-card__content--bottom-left {
    background: linear-gradient(270deg, rgba(50, 0, 136, 0.11) 0%, rgba(30, 3, 76, 0.80) 100%) !important;
    border-radius: 2.5rem;
    box-shadow: inset 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.16);
}


.realm--arcade .mto-exp-card__content--right .mto-exp-card__title,
.realm--arcade .mto-exp-card__content--bottom-center .mto-exp-card__title {
    color: #ffffff;
}

.realm--arcade .mto-exp-card__tag {
    color: #FFF;
    font-family: "Pixelify Sans";
    font-style: normal;
    font-weight: 700;
    line-height: 1.66744rem;
    letter-spacing: 0.27794rem;
}

/* ── Experience tabs ──────────────────────────────────────────────────────── */
.realm--arcade .mto-exp-tab {
    opacity: 0.7;
}

.realm--arcade .mto-exp-tabs::before,
.realm--arcade .mto-exp-tabs > div:not(:last-child) .mto-exp-tab::after {
    background: linear-gradient(90deg, rgba(102, 105, 254, 0.00) 0%, #6669FE 50%, rgba(102, 105, 254, 0.00) 100%);
    opacity: 0.5;
}

.realm--arcade .mto-exp-tab__dot {
    background: url('../images/overview/dot-normal-glitch.svg') center / contain no-repeat;
    width: 16px;
    height: 16px;
}

.realm--arcade .mto-exp-tab:hover .mto-exp-tab__dot,
.realm--arcade .mto-exp-tab.active .mto-exp-tab__dot {
    background: url('../images/overview/dot-active-glitch.svg') center / contain no-repeat;
    width: 57px;
    height: 57px;
    box-shadow: none;
    bottom: -21.5px;
    transform: translateX(-50%);
}

.realm--arcade .mto-exp-tab__text {
    color: #ffffff;
}

.realm--arcade .mto-exp-tab.active .mto-exp-tab__text {
    color: #ffffff;
}

/* ── Loop section ─────────────────────────────────────────────────────────── */
.realm--arcade .mto-loop {
    background: #1B1C48;
}

.realm--arcade .mto-loop__glow-top-left {
    background: rgba(117, 120, 254, 0.36);
}

.realm--arcade .mto-loop__glow-top-right {
    background: rgba(177, 46, 165, 0.4);
}

.realm--arcade .mto-loop__glow-mid-left {
    background: #4731AF;
}

.realm--arcade .mto-loop__glow-mid-right {
    background: #FFA077;
}

.realm--arcade .mto-loop__eyebrow {
    color: #FFF;
}

.realm--arcade .mto-loop__heading {
    color: #7139D1;
}

/* ── Loop cards ───────────────────────────────────────────────────────────── */
.realm--arcade .mto-loop-card--ui {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--arcade .mto-loop-card--ui::before {
    display: none;
}

.realm--arcade .mto-loop-card--templates {
    border-radius: 1.72813rem;
    border: 3.281px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--arcade .mto-loop-card--templates::before {
    display: none;
}

.realm--arcade .mto-loop-card--collab {
    border-radius: 1.70194rem;
    border: 3.468px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--arcade .mto-loop-card--collab::before {
    display: none;
}

.realm--arcade .mto-loop-card--leaderboard {
    border-radius: 1.73075rem;
    border: 5.821px solid rgba(50, 0, 136, 0.15);
    background: linear-gradient(102deg, rgba(187, 147, 255, 0.15) 0%, rgba(113, 57, 209, 0.15) 106.07%);
}

.realm--arcade .mto-loop-card--leaderboard::before {
    display: none;
}

.realm--arcade .mto-loop-card:not(.mto-loop-card--ui) {
    border-radius: 1.5245rem;
    border: 2.894px solid rgba(68, 30, 133, 0.14);
    background: linear-gradient(73deg, rgba(113, 57, 209, 0.15) 13.26%, rgba(187, 147, 255, 0.00) 96.68%);
}

.realm--arcade .mto-loop-card:not(.mto-loop-card--ui)::before {
    display: none;
}

.realm--arcade .mto-loop-card:hover {
    box-shadow: 0 12px 32px rgba(113, 57, 209, 0.08);
}

.realm--arcade .mto-loop-card__title {
    color: #7139D1;
}

.realm--arcade .mto-loop-card__desc {
    color: #FFF5F5;
}

/* ── CTA section ──────────────────────────────────────────────────────────── */
.realm--arcade .mto-cta {
    background: #1B1C48;
}

.realm--arcade .mto-cta__cloud {
    display: none;
}

.realm--arcade .mto-cta__top-text {
    color: #ffffff;
}

.realm--arcade .mto-cta__pill {
    background: linear-gradient(180deg, rgba(113, 57, 209, 0.11) 0%, rgba(187, 147, 255, 0.11) 100%);
    box-shadow: 0 -6.163px 24.651px 0 rgba(255, 255, 255, 0.3);
}

.realm--arcade .mto-cta__heading {
    color: #fff;
}

.realm--arcade .eb-btn-cta {
    background: linear-gradient(94deg, #7239D1 0%, #F741E8 100.42%);
    box-shadow: 0 8px 28px rgba(113, 57, 209, 0.45);
}

.realm--arcade .eb-btn-cta:hover {
    background: #8a50e0;
    box-shadow: 0 14px 40px rgba(113, 57, 209, 0.6);
}

/* ── Mobile: reset active dot to vertical layout ─────────────────────────── */
@media (max-width: 767px) {
    .realm--glitch .mto-exp-tab:hover .mto-exp-tab__dot,
    .realm--glitch .mto-exp-tab.active .mto-exp-tab__dot,
    .realm--arcade .mto-exp-tab:hover .mto-exp-tab__dot,
    .realm--arcade .mto-exp-tab.active .mto-exp-tab__dot {
        width: 16px;
        height: 16px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%) scale(1.2);
        box-shadow: 0 0 0 4px rgba(102, 105, 254, 0.3);
    }
}