/* ==========================================================================
   MWRO — Cartoon Sky Theme  ("Launcher Look")
   ==========================================================================
   Loaded LAST on every page so it re-skins Bootstrap, site-menu.css and all
   page-specific stylesheets into the cartoony cloud style of the launcher.

   Strategy
   --------
   1. Re-map every --mw-* design token to the cartoon palette. The page CSS
      files consume those tokens, so most of the site follows for free.
   2. Layer structural overrides on top: rounded panels, white outlines,
      glossy chunky buttons, rounded display type, animated sky + clouds.

   To revert the whole restyle: delete the require line for
   includes/theme_assets.php from the page heads. Nothing was destroyed.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* ==========================================================================
   1. Design tokens — cartoon sky palette
   ========================================================================== */

:root {
    /* Sky */
    --mw-sky-top:      #bfeaff;
    --mw-sky-mid:      #7fd0fa;
    --mw-sky-low:      #3fa3ea;
    --mw-sky-deep:     #1e7fd4;

    /* Cartoon blues (panels / chrome) */
    --mw-blue-100:     #eaf7ff;
    --mw-blue-200:     #bfe6ff;
    --mw-blue-300:     #7ecdf7;
    --mw-blue-400:     #4aa8ea;
    --mw-blue-500:     #2b8ae0;
    --mw-blue-600:     #1d6fc4;
    --mw-blue-700:     #14559b;
    --mw-blue-800:     #0e3f76;
    --mw-ink:          #0b3a68;

    /* Accents */
    --mw-sun:          #ffd75e;
    --mw-sun-deep:     #ffa41c;
    --mw-sun-shadow:   #e07b12;
    --mw-grape:        #9b6cf5;
    --mw-grape-deep:   #6d3ee0;
    --mw-mint:         #4ee08a;
    --mw-mint-deep:    #21b45f;
    --mw-candy:        #ff7ab3;
    --mw-red:          #ff6b6b;
    --mw-red-deep:     #e03e3e;

    /* Outline + gloss */
    --mw-outline:      #ffffff;
    --mw-outline-w:    3px;
    --mw-radius:       22px;
    --mw-radius-sm:    14px;
    --mw-radius-pill:  999px;

    /* Legacy token remap: the old gold/dark fantasy names now resolve to
       cartoon values, so every page that used them re-skins itself. */
    --mw-gold:         #fff3c4;
    --mw-gold-dim:     var(--mw-sun);
    --mw-gold-glow:    rgba(255, 215, 94, .55);
    --mw-orange:       var(--mw-sun-deep);
    --mw-bronze:       var(--mw-blue-300);
    --mw-bronze-deep:  var(--mw-blue-600);
    --mw-charcoal:     var(--mw-blue-800);
    --mw-bg:           var(--mw-sky-mid);
    --mw-bg-panel:     var(--mw-blue-600);
    --mw-panel:        rgba(29, 111, 196, .88);
    --mw-earth:        var(--mw-blue-500);
    --mw-grass:        var(--mw-mint);
    --mw-life:         var(--mw-mint);
    --mw-danger:       var(--mw-red);
    --mw-line:         rgba(255, 255, 255, .45);
    --mw-border:       rgba(255, 255, 255, .70);
    --mw-border-soft:  rgba(255, 255, 255, .38);
    --mw-border-glow:  rgba(255, 255, 255, .85);
    --mw-text:         #ffffff;
    --mw-text-bright:  #ffffff;
    --mw-muted:        #d9efff;
    --mw-shadow:       0 8px 0 rgba(11, 58, 104, .35);
    --mw-shadow-sm:    0 4px 0 rgba(11, 58, 104, .28), 0 8px 18px rgba(11, 58, 104, .22);
    --mw-shadow-md:    0 8px 0 rgba(11, 58, 104, .30), 0 16px 30px rgba(11, 58, 104, .28);
    --mw-shadow-lg:    0 12px 0 rgba(11, 58, 104, .32), 0 26px 50px rgba(11, 58, 104, .35);
    --mw-glow:         0 0 22px rgba(255, 255, 255, .55);

    /* Bootstrap 5 variables */
    --bs-body-bg:            transparent;
    --bs-body-color:         #ffffff;
    --bs-body-font-family:   'Nunito', 'Segoe UI', system-ui, sans-serif;
    --bs-border-color:       rgba(255, 255, 255, .45);
    --bs-border-radius:      var(--mw-radius-sm);
    --bs-link-color:         #ffffff;
    --bs-link-hover-color:   var(--mw-sun);
    --bs-table-bg:           rgba(255, 255, 255, .10);
    --bs-table-color:        #ffffff;
    --bs-table-striped-bg:   rgba(255, 255, 255, .07);
    --bs-table-striped-color:#ffffff;
    --bs-table-hover-bg:     rgba(255, 255, 255, .18);
    --bs-table-hover-color:  #ffffff;
    --bs-table-border-color: rgba(255, 255, 255, .28);
    --bs-modal-bg:           var(--mw-blue-600);
    --bs-modal-border-color: #ffffff;
    --bs-emphasis-color:     #ffffff;
    --bs-secondary-color:    var(--mw-muted);
}

/* ==========================================================================
   2. The sky — gradient + animated clouds (injected by mwro-cartoon.js)
   ========================================================================== */

html {
    background: linear-gradient(180deg,
        var(--mw-sky-top)  0%,
        var(--mw-sky-mid) 38%,
        var(--mw-sky-low) 72%,
        var(--mw-sky-deep) 100%) fixed;
}

body {
    background: transparent;
    color: #fff;
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

/* The realistic video backdrop fights the cartoon look — retire it. */
.hero-video-bg,
.hero-video-bg video { display: none !important; }

/* The world stage itself lives in mwro-scene.css (.mw-world); the pieces it is
   built from — clouds, sparkles, horizon — are defined below and shared. */

@keyframes mw-sun-breathe {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

/* Cloud layers (parallax: far = small/slow/pale, near = big/fast/opaque) */
.mw-cloud-layer { position: absolute; inset: 0; }
.mw-layer-far  { opacity: .55; filter: blur(1.5px); }
.mw-layer-mid  { opacity: .8; }
.mw-layer-near { opacity: 1; }

/* ── Clouds ───────────────────────────────────────────────────────────────
   Each cloud is a cluster of gradient puffs. Two things matter here:

   1. NOTHING may reach the element box. The parent is a composited layer
      (will-change: transform), so a gradient or blur that touches the edge
      gets sliced off square. Every puff is therefore kept inside roughly
      10%-90% horizontally and 10%-78% vertically, leaving a margin for the
      blur to bleed into.
   2. Radii are written as an x/y percentage PAIR. The box is 300x170, so a
      round puff needs its y-radius ~1.77x its x-radius; using one value would
      squash every puff into an ellipse.

   Nine puffs — five large along a shallow arc, two small bumps on the crown,
   two shoulders — give a lumpy silhouette rather than a smooth mound.
   ------------------------------------------------------------------------ */

.mw-cloud {
    position: absolute;
    top: var(--y, 20%);
    left: 0;
    width: 300px;
    height: 170px;
    transform: translate3d(-40vw, 0, 0) scale(var(--s, 1));
    animation: mw-drift var(--d, 90s) linear infinite;
    animation-delay: var(--delay, 0s);
    opacity: var(--o, 1);
    will-change: transform;
}

.mw-cloud i {
    position: absolute;
    inset: 0;
    display: block;
    /* Just enough to take the digital edge off; the shape carries the form. */
    filter: blur(1.5px);
    animation: mw-cloud-bob var(--bob, 14s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}

/* Each variant is a solid BODY mass plus overlapping crown puffs. Puffs alone
   read as a row of separate balls — the body is what fuses them into one
   cloud, and the puffs only break up its top edge. Every puff overlaps both
   the body and its neighbour, and all opaque cores run to ~70% so the
   overlaps merge instead of showing seams. */

.mw-cloud-v1 i {
    background:
        radial-gradient(8.0% 14.1% at 17% 47%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(11.3% 20.0% at 28% 36%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(12.7% 22.4% at 44% 34%, #fff 0 74%, rgba(255,255,255,0) 100%),
        radial-gradient(11.3% 20.0% at 60% 33%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(9.3% 16.5% at 73% 41%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(7.3% 12.9% at 84% 48%, #fdfeff 0 68%, rgba(253,254,255,0) 100%),
        radial-gradient(40% 22% at 50% 52%, #fff 0 72%, rgba(255,255,255,0) 100%);
}

.mw-cloud-v2 i {
    background:
        radial-gradient(8.0% 14.1% at 18% 49%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(12.0% 21.2% at 27% 38%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(10.7% 18.8% at 41% 31%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(12.7% 22.4% at 56% 34%, #fff 0 74%, rgba(255,255,255,0) 100%),
        radial-gradient(10.0% 17.6% at 71% 40%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(7.3% 12.9% at 84% 49%, #fdfeff 0 68%, rgba(253,254,255,0) 100%),
        radial-gradient(41% 21% at 50% 53%, #fff 0 72%, rgba(255,255,255,0) 100%);
}

.mw-cloud-v3 i {
    background:
        radial-gradient(7.3% 12.9% at 18% 48%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(13.3% 23.5% at 33% 33%, #fff 0 74%, rgba(255,255,255,0) 100%),
        radial-gradient(10.0% 17.6% at 50% 36%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(11.3% 20.0% at 65% 38%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(8.0% 14.1% at 80% 47%, #fdfeff 0 68%, rgba(253,254,255,0) 100%),
        radial-gradient(38% 21% at 49% 53%, #fff 0 72%, rgba(255,255,255,0) 100%);
}

.mw-cloud-v4 i {
    background:
        radial-gradient(8.0% 14.1% at 18% 51%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(10.0% 17.6% at 27% 42%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(12.7% 22.4% at 43% 32%, #fff 0 74%, rgba(255,255,255,0) 100%),
        radial-gradient(11.3% 20.0% at 60% 35%, #fff 0 72%, rgba(255,255,255,0) 100%),
        radial-gradient(9.3% 16.5% at 75% 43%, #fff 0 70%, rgba(255,255,255,0) 100%),
        radial-gradient(6.7% 11.8% at 86% 52%, #fdfeff 0 66%, rgba(253,254,255,0) 100%),
        radial-gradient(40% 22% at 51% 54%, #fff 0 72%, rgba(255,255,255,0) 100%);
}

/* Volume: a warm highlight skimming the crown, and a cool shadow gathered
   under the base. Both sit inside the safe area so neither can be clipped. */
.mw-cloud i::before {
    content: '';
    position: absolute;
    left: 22%;
    right: 26%;
    top: 20%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%);
    filter: blur(4px);
}

.mw-cloud i::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 56%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(142, 183, 222, .38), rgba(142, 183, 222, 0) 74%);
    filter: blur(7px);
}

/* Clouds breathe slightly as they cross, which stops the drift reading as a
   flat sprite sliding past. */
@keyframes mw-cloud-bob {
    from { transform: translateY(-1.5%) scaleX(1);    opacity: .96; }
    to   { transform: translateY(1.5%)  scaleX(1.03); opacity: 1; }
}

@keyframes mw-drift {
    from { transform: translate3d(-40vw, 0, 0) scale(var(--s, 1)); }
    to   { transform: translate3d(130vw, 0, 0) scale(var(--s, 1)); }
}

/* Drifting sparkles */
.mw-sparkle {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: var(--sz, 6px);
    height: var(--sz, 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, .9);
    opacity: 0;
    animation: mw-twinkle var(--d, 5s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes mw-twinkle {
    0%, 100%  { opacity: 0;   transform: scale(.4) translateY(0); }
    45%       { opacity: .95; transform: scale(1) translateY(-8px); }
}

/* Soft cloud bank hugging the bottom of the viewport. */
.mw-horizon {
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    height: 26vh;
    background:
        radial-gradient(60% 100% at 12% 100%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 86%),
        radial-gradient(55% 95%  at 38% 100%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 86%),
        radial-gradient(65% 100% at 66% 100%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 86%),
        radial-gradient(50% 90%  at 92% 100%, rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 86%);
    animation: mw-horizon-sway 18s ease-in-out infinite alternate;
}

@keyframes mw-horizon-sway {
    from { transform: translateX(-2%); }
    to   { transform: translateX(2%); }
}

/* ==========================================================================
   3. Typography — rounded display type with cartoon outlines
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.hero-title, .hero-title-main, .section-title, .title,
.guide-title, .page-title, .navbar-brand {
    font-family: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    color: #fff !important;
    text-shadow:
        0 2px 0 var(--mw-blue-600),
        0 4px 0 rgba(14, 63, 118, .55),
        0 8px 18px rgba(11, 58, 104, .35) !important;
    -webkit-text-stroke: 0;
}

.hero-title, .hero-title-main {
    text-transform: uppercase;
    text-shadow:
        0 3px 0 var(--mw-blue-600),
        0 6px 0 var(--mw-blue-800),
        0 12px 26px rgba(11, 58, 104, .45) !important;
}

/* Yellow "sticker" heading used for section headers. */
.section-title,
.guide-title {
    color: #fff7d6 !important;
    text-shadow:
        0 2px 0 var(--mw-sun-shadow),
        0 4px 0 rgba(160, 82, 6, .6),
        0 10px 20px rgba(11, 58, 104, .35) !important;
}

.text-muted, .text-secondary { color: var(--mw-muted) !important; }
.text-success { color: #d6ffe6 !important; }
.text-danger  { color: #ffd9d9 !important; }
.text-warning { color: #fff0b8 !important; }

a { color: #fff; text-decoration: none; }
a:hover { color: var(--mw-sun); }

::selection { background: var(--mw-sun); color: var(--mw-ink); }

/* ==========================================================================
   4. Navbar — floating glossy sky bar
   ========================================================================== */

.site-navbar,
.navbar.site-navbar {
    background: linear-gradient(180deg, rgba(90, 186, 240, .96) 0%, rgba(29, 111, 196, .96) 100%) !important;
    backdrop-filter: blur(6px);
    border: none !important;
    border-bottom: var(--mw-outline-w) solid rgba(255, 255, 255, .85) !important;
    box-shadow: 0 8px 0 rgba(14, 63, 118, .22), 0 18px 34px rgba(11, 58, 104, .28) !important;
}

.navbar-brand img {
    filter: drop-shadow(0 3px 0 rgba(14, 63, 118, .45));
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.navbar-brand:hover img { transform: scale(1.06) rotate(-2deg); }

.site-navbar .nav-link {
    font-family: 'Baloo 2', 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: .98rem !important;
    letter-spacing: .02em !important;
    text-transform: uppercase;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 100%) !important;
    border: 2px solid rgba(255, 255, 255, .65) !important;
    border-radius: var(--mw-radius-pill) !important;
    padding: .45rem 1.05rem !important;
    margin: .2rem .22rem !important;
    text-shadow: 0 2px 0 rgba(14, 63, 118, .5) !important;
    box-shadow: 0 3px 0 rgba(14, 63, 118, .35) !important;
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, background .18s ease !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    background: linear-gradient(180deg, #ffffff 0%, #d8f0ff 100%) !important;
    color: var(--mw-blue-700) !important;
    text-shadow: none !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(14, 63, 118, .35) !important;
}

.site-navbar .nav-link.active,
.site-navbar .nav-link.show {
    background: linear-gradient(180deg, var(--mw-sun) 0%, var(--mw-sun-deep) 100%) !important;
    color: var(--mw-ink) !important;
    border-color: #fff !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6) !important;
    box-shadow: 0 4px 0 var(--mw-sun-shadow) !important;
}

/* Bootstrap's caret sits oddly on pill buttons — soften it. */
.site-navbar .dropdown-toggle::after { opacity: .7; margin-left: .45em; }

.navbar-toggler {
    border: 3px solid #fff !important;
    border-radius: var(--mw-radius-sm) !important;
    background: linear-gradient(180deg, var(--mw-blue-400), var(--mw-blue-600)) !important;
    box-shadow: 0 4px 0 rgba(14, 63, 118, .4) !important;
    padding: .35rem .6rem !important;
}
.navbar-toggler:focus { box-shadow: 0 4px 0 rgba(14, 63, 118, .4), 0 0 0 4px rgba(255, 255, 255, .45) !important; }

/* Dropdowns — chunky white-outlined cloud cards */
.dropdown-menu {
    background: linear-gradient(180deg, #ffffff 0%, #e8f6ff 100%) !important;
    border: var(--mw-outline-w) solid #fff !important;
    border-radius: var(--mw-radius) !important;
    box-shadow: 0 10px 0 rgba(14, 63, 118, .18), 0 22px 40px rgba(11, 58, 104, .32) !important;
    padding: .5rem !important;
    margin-top: .55rem !important;
    overflow: hidden;
}

.dropdown-item {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    color: var(--mw-blue-700) !important;
    border-radius: var(--mw-radius-sm) !important;
    padding: .55rem .85rem !important;
    text-shadow: none !important;
    transition: background .15s ease, transform .15s ease, color .15s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: linear-gradient(180deg, var(--mw-blue-300), var(--mw-blue-500)) !important;
    color: #fff !important;
    transform: translateX(4px);
}

.dropdown-item i,
.dropdown-item svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .35rem; }

.dropdown-divider { border-top: 2px dashed rgba(29, 111, 196, .3) !important; }

/* ==========================================================================
   5. Buttons — glossy candy buttons with a hard bottom edge
   ========================================================================== */

.btn {
    font-family: 'Baloo 2', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase;
    border-radius: var(--mw-radius-pill) !important;
    border: var(--mw-outline-w) solid #fff !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(14, 63, 118, .45) !important;
    padding: .6rem 1.5rem !important;
    position: relative;
    overflow: hidden;
    transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease, filter .16s ease !important;
}

/* Glass highlight across the top half of every button. */
.btn::before {
    content: '';
    position: absolute;
    inset: 2px 2px 45% 2px;
    border-radius: var(--mw-radius-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.btn:hover  { transform: translateY(-3px); filter: saturate(1.08) brightness(1.04); }
.btn:active { transform: translateY(2px); }

.btn-primary, .btn-info, .btn-secondary {
    background: linear-gradient(180deg, #7fd0fa 0%, var(--mw-blue-400) 45%, var(--mw-blue-600) 100%) !important;
    box-shadow: 0 5px 0 var(--mw-blue-700), 0 12px 22px rgba(11, 58, 104, .3) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-secondary:hover {
    box-shadow: 0 8px 0 var(--mw-blue-700), 0 18px 28px rgba(11, 58, 104, .34) !important;
}

/* The launcher's big orange PLAY button. */
.btn-gold, .btn-warning, .btn-success, .amount-btn.selected {
    background: linear-gradient(180deg, #ffe38a 0%, var(--mw-sun) 40%, var(--mw-sun-deep) 100%) !important;
    color: #6b3b00 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65) !important;
    box-shadow: 0 5px 0 var(--mw-sun-shadow), 0 12px 22px rgba(224, 123, 18, .35) !important;
}
.btn-gold:hover, .btn-warning:hover, .btn-success:hover {
    box-shadow: 0 8px 0 var(--mw-sun-shadow), 0 18px 28px rgba(224, 123, 18, .4) !important;
    color: #6b3b00 !important;
}

.btn-danger {
    background: linear-gradient(180deg, #ff9d9d 0%, var(--mw-red) 45%, var(--mw-red-deep) 100%) !important;
    box-shadow: 0 5px 0 #b62a2a, 0 12px 22px rgba(182, 42, 42, .32) !important;
}

.btn-outline-primary, .btn-outline-warning, .btn-outline-light,
.btn-outline-secondary, .btn-outline-info, .btn-outline-danger {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    border: var(--mw-outline-w) solid #fff !important;
    box-shadow: 0 5px 0 rgba(14, 63, 118, .35) !important;
}
.btn-outline-primary:hover, .btn-outline-warning:hover, .btn-outline-light:hover,
.btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-danger:hover {
    background: #fff !important;
    color: var(--mw-blue-700) !important;
    text-shadow: none !important;
}

.btn-lg { padding: .85rem 2.1rem !important; font-size: 1.15rem !important; }
.btn-sm { padding: .35rem 1rem !important; font-size: .85rem !important; }
.btn:disabled, .btn.disabled { filter: grayscale(.45) brightness(.95); box-shadow: none !important; transform: none !important; }

/* ==========================================================================
   6. Panels & cards — white-outlined cloud plates
   ========================================================================== */

.card, .retro-card, .wiki-card, .map-card, .npc-card, .news-card, .quest-card,
.pet-card, .rank-card, .guide-card, .perk-card, .profile-card, .mall-card,
.donate-card, .info-box, .score-panel, .leaderboard-panel, .reward-tier-panel,
.reward-tier-card, .class-showcase-card, .status-indicator-box, .leader-frame,
.game-shell, .login-form, .register-form, .login-guide, .register-guide,
.accordion-item, .list-group-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .14) 100%) !important;
    backdrop-filter: blur(8px);
    border: var(--mw-outline-w) solid rgba(255, 255, 255, .80) !important;
    border-radius: var(--mw-radius) !important;
    box-shadow: 0 8px 0 rgba(14, 63, 118, .20), 0 18px 36px rgba(11, 58, 104, .26) !important;
    color: #fff !important;
}

.card-header, .modal-header, .accordion-button {
    background: linear-gradient(180deg, var(--mw-blue-400) 0%, var(--mw-blue-600) 100%) !important;
    border-bottom: 3px solid rgba(255, 255, 255, .7) !important;
    border-radius: calc(var(--mw-radius) - 6px) calc(var(--mw-radius) - 6px) 0 0 !important;
    color: #fff !important;
}

.card-footer, .modal-footer {
    background: rgba(255, 255, 255, .12) !important;
    border-top: 3px solid rgba(255, 255, 255, .55) !important;
}

/* Cards lift on hover like launcher tiles. */
.card:hover, .retro-card:hover, .map-card:hover, .npc-card:hover, .news-card:hover,
.pet-card:hover, .quest-card:hover, .rank-card:hover, .guide-card:hover, .perk-card:hover,
.mall-card:hover, .donate-card:hover {
    transform: translateY(-6px) rotate(-.4deg);
    box-shadow: 0 14px 0 rgba(14, 63, 118, .20), 0 28px 46px rgba(11, 58, 104, .32) !important;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}

/* Accent plates matching the launcher's News (blue) and Event (purple) tiles. */
.news-card {
    background: linear-gradient(180deg, #4fc0f5 0%, #1f8ad6 100%) !important;
}
.perk-card, .reward-tier-card, .event-chip {
    background: linear-gradient(180deg, var(--mw-grape) 0%, var(--mw-grape-deep) 100%) !important;
}

.page-wrap, .page-shell, .page-content, .wrap, .login-bg, .register-bg,
.login-wrapper, .register-wrapper, .hero, .donate-hero, .mall-hero {
    background: transparent !important;
}

.section-divider {
    border: none !important;
    height: 6px !important;
    border-radius: var(--mw-radius-pill);
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,.85) 0 18px, rgba(255,255,255,0) 18px 34px) !important;
}

/* ==========================================================================
   7. Badges, pills, alerts, progress
   ========================================================================== */

.badge, .mini-pill, .hero-badge, .map-badge, .npc-badge, .npc-role-tag,
.showcase-badge, .quest-level, .online-badge, .launcher-version, .hero-motto {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    border-radius: var(--mw-radius-pill) !important;
    border: 2px solid rgba(255, 255, 255, .85) !important;
    background: linear-gradient(180deg, var(--mw-blue-400), var(--mw-blue-600)) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(14, 63, 118, .5) !important;
    box-shadow: 0 3px 0 rgba(14, 63, 118, .3) !important;
    padding: .35em .85em !important;
}

.badge.bg-success, .online-badge { background: linear-gradient(180deg, var(--mw-mint), var(--mw-mint-deep)) !important; }
.badge.bg-danger  { background: linear-gradient(180deg, var(--mw-red), var(--mw-red-deep)) !important; }
.badge.bg-warning { background: linear-gradient(180deg, var(--mw-sun), var(--mw-sun-deep)) !important; color: #6b3b00 !important; }

.alert {
    border: var(--mw-outline-w) solid #fff !important;
    border-radius: var(--mw-radius) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 0 rgba(14, 63, 118, .2) !important;
}
.alert-success { background: linear-gradient(180deg, #64e59a, var(--mw-mint-deep)) !important; }
.alert-danger  { background: linear-gradient(180deg, #ff9d9d, var(--mw-red-deep)) !important; }
.alert-warning { background: linear-gradient(180deg, #ffe38a, var(--mw-sun-deep)) !important; color: #6b3b00 !important; }
.alert-info    { background: linear-gradient(180deg, #7fd0fa, var(--mw-blue-600)) !important; }

.progress {
    height: 18px !important;
    border-radius: var(--mw-radius-pill) !important;
    border: 3px solid rgba(255, 255, 255, .85) !important;
    background: rgba(14, 63, 118, .35) !important;
    overflow: hidden;
    box-shadow: inset 0 3px 6px rgba(11, 58, 104, .35) !important;
}
.progress-bar {
    background: linear-gradient(180deg, #ffe38a 0%, var(--mw-sun) 45%, var(--mw-sun-deep) 100%) !important;
    box-shadow: inset 0 -4px 0 rgba(224, 123, 18, .5);
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.form-control, .form-select, .input-group-text, textarea, input[type="text"],
input[type="password"], input[type="email"], input[type="number"], input[type="search"] {
    background: rgba(255, 255, 255, .92) !important;
    color: var(--mw-blue-800) !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    border: 3px solid #fff !important;
    border-radius: var(--mw-radius-sm) !important;
    box-shadow: inset 0 3px 6px rgba(11, 58, 104, .18) !important;
    padding: .6rem .95rem !important;
}

.form-control::placeholder, textarea::placeholder { color: rgba(20, 85, 155, .55) !important; }

.form-control:focus, .form-select:focus, textarea:focus {
    background: #fff !important;
    border-color: var(--mw-sun) !important;
    box-shadow: inset 0 3px 6px rgba(11, 58, 104, .12), 0 0 0 5px rgba(255, 215, 94, .45) !important;
    outline: none !important;
}

.form-label, .form-check-label { font-weight: 800 !important; color: #fff !important; text-shadow: 0 2px 0 rgba(14, 63, 118, .4); }
.form-check-input { border: 2px solid #fff !important; background-color: rgba(255,255,255,.35) !important; }
.form-check-input:checked { background-color: var(--mw-sun) !important; border-color: #fff !important; }

/* ==========================================================================
   9. Tables
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    border-radius: var(--mw-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    color: #fff !important;
}

.table > :not(caption) > * > * {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .28) !important;
    padding: .8rem .9rem !important;
}

.table thead th,
.table > thead > tr > th {
    background: linear-gradient(180deg, var(--mw-blue-400), var(--mw-blue-600)) !important;
    font-family: 'Baloo 2', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    border-bottom: 3px solid rgba(255, 255, 255, .7) !important;
}

.table > tbody > tr:hover > * { background: rgba(255, 255, 255, .24) !important; }
.table-dark { --bs-table-bg: transparent; }

/* ==========================================================================
   10. Modals
   ========================================================================== */

.modal-content {
    background: linear-gradient(180deg, #5ab6ef 0%, var(--mw-blue-600) 100%) !important;
    border: 4px solid #fff !important;
    border-radius: calc(var(--mw-radius) + 6px) !important;
    box-shadow: 0 14px 0 rgba(14, 63, 118, .28), 0 34px 60px rgba(11, 58, 104, .45) !important;
    color: #fff !important;
}
.modal-backdrop.show { background: rgba(14, 63, 118, .6) !important; opacity: 1 !important; }
.btn-close { filter: brightness(0) invert(1); opacity: .9 !important; }

/* ==========================================================================
   11. Page-specific polish
   ========================================================================== */

/* Homepage hero */
.hero-banner-wrap { padding-top: 2rem; }
.hero-motto {
    display: inline-block;
    background: linear-gradient(180deg, var(--mw-sun), var(--mw-sun-deep)) !important;
    color: #6b3b00 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
    border: 2px solid #fff !important;
    border-radius: var(--mw-radius-pill) !important;
    padding: .35rem 1rem !important;
    box-shadow: 0 3px 0 var(--mw-sun-shadow) !important;
}

.hero-title-main {
    font-size: clamp(3.2rem, 9vw, 6.5rem) !important;
    line-height: .95 !important;
    animation: mw-float 5s ease-in-out infinite;
}

@keyframes mw-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.hero-description { color: #f2fbff !important; font-weight: 700 !important; text-shadow: 0 2px 0 rgba(14,63,118,.4); }

/* Server status boxes -> launcher "SERVER STATUS" plates */
.status-indicator-box { padding: 1rem 1.15rem !important; }
.status-dot { border: 2px solid #fff !important; box-shadow: 0 0 10px currentColor; }
.status-dot.online  { background: var(--mw-mint) !important; color: var(--mw-mint); }
.status-dot.offline { background: var(--mw-red) !important;  color: var(--mw-red); }
.status-server-title { font-family: 'Baloo 2', sans-serif !important; font-weight: 800 !important; text-transform: uppercase; }

/* Class showcase tabs -> launcher sidebar buttons */
.class-tab-btn {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)) !important;
    border: 2px solid rgba(255,255,255,.7) !important;
    border-radius: var(--mw-radius-pill) !important;
    padding: .45rem 1.1rem !important;
    box-shadow: 0 3px 0 rgba(14,63,118,.32) !important;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .16s ease !important;
}
.class-tab-btn:hover { transform: translateY(-2px); }
.class-tab-btn.active {
    background: linear-gradient(180deg, var(--mw-sun), var(--mw-sun-deep)) !important;
    color: #6b3b00 !important;
    box-shadow: 0 4px 0 var(--mw-sun-shadow) !important;
}

.showcase-portrait { filter: drop-shadow(0 10px 16px rgba(11, 58, 104, .45)); }

/* Media frames */
.leader-frame, .map-card img, .npc-card img, .pet-card img {
    border-radius: var(--mw-radius-sm) !important;
}

/* Footer */
footer, .site-footer {
    background: linear-gradient(180deg, rgba(29,111,196,0) 0%, rgba(14,63,118,.55) 100%) !important;
    border-top: 3px solid rgba(255,255,255,.6) !important;
    color: #eaf7ff !important;
}

/* Bootstrap dark utility classes fight the sky — neutralise them. */
.bg-dark, .bg-black, .bg-body-tertiary, .bg-body-secondary, .bg-light, .bg-white {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}

/* ==========================================================================
   11b. Page surfaces — the remaining hard-coded dark panels
   ==========================================================================
   These classes paint their own near-black backgrounds in the per-page CSS,
   so token remapping alone cannot reach them. Grouped by the page they
   belong to; each becomes a translucent white cloud plate.
   ========================================================================== */

/* Shared recipe for every surface below. */
.status-dashboard, .wrapper-title-plate, .item-tooltip,
.champ-1, .champ-2, .champ-3, .showcase-portrait-wrap, .hero-modal-img,
.guide-hero, .guide-search, .rule-panel, .stage-card, .evolution-chain,
.rank-darkblue, .rank-green,
.class-entry, #mapSearch,
.quest-npc-block, .quest-map-block, .spring-banner, .spring-stage,
.char-card, .char-option, .prize-item, .result-overlay,
.progress-bar-container,
.leaderboard-row, .personal-rank, .prize-select,
.corner-stat-box, .selection-tip, .journal-list li, .block-shop-modal,
.arena-tip, .battle-log li, .shop-item, .stage-banner, .sprite-caption,
.battle-journal, .chat-log, .chat-input, .class-card, .equip-slot-box,
.inv-slot, .mmo-hud, .mmo-minimap, .mmo-overlay-panel, .mmo-tabs-nav,
.npc-dialogue-text, .shop-item-card, .stat-box, .entity-name-tag {
    background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .13) 100%) !important;
    border-color: rgba(255, 255, 255, .70) !important;
    border-radius: var(--mw-radius-sm) !important;
    color: #fff !important;
}

/* Guide pages (Pet Evolution, Weather Effects) own their whole palette. */
:root {
    --guide-gold:       var(--mw-sun);
    --guide-cream:      #fff7d6;
    --guide-panel:      rgba(255, 255, 255, .26);
    --guide-panel-soft: rgba(255, 255, 255, .16);
    --guide-border:     rgba(255, 255, 255, .65);
    --guide-text:       #ffffff;
    --guide-muted:      var(--mw-muted);
}

.guide-page { background: transparent !important; }
.guide-page::before,
.guide-page::after { display: none !important; }
.guide-hero { border-bottom: 3px solid rgba(255, 255, 255, .55) !important; }

/* Homepage odds and ends. */
.status-dashboard { border: 3px solid rgba(255, 255, 255, .7) !important; border-radius: var(--mw-radius) !important; }
.item-tooltip {
    border: 3px solid #fff !important;
    box-shadow: 0 8px 0 rgba(14, 63, 118, .22), 0 16px 30px rgba(11, 58, 104, .3) !important;
    backdrop-filter: blur(10px);
}
.wrapper-title-plate { border: 3px solid #fff !important; border-radius: var(--mw-radius-pill) !important; }

/* Portrait/avatar wells read better light — they sit behind transparent PNGs. */
.champ-avatar, .player-avatar, .pet-img, .char-icon, .prize-icon-img, .prize-item img {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(191, 230, 255, .35)) !important;
    border-radius: var(--mw-radius-sm) !important;
}

/* Rankings. */
.ranking-table-wrap.server-cad thead th {
    background: linear-gradient(180deg, var(--mw-grape), var(--mw-grape-deep)) !important;
}
.table-dark-custom td { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* Quest / wiki filter inputs follow the global form recipe. */
.filter-bar input, .filter-bar select, .prize-select, #mapSearch {
    background: rgba(255, 255, 255, .92) !important;
    color: var(--mw-blue-800) !important;
    border: 3px solid #fff !important;
    border-radius: var(--mw-radius-sm) !important;
}
.filter-bar select option { background: #fff !important; color: var(--mw-blue-800) !important; }

/* Event-game action buttons inherit the candy-button look. */
.claim-prize-btn, .submit-score-btn, .action-btn, .btn-energy, .btn-potion,
.btn-shovel, .shop-buy-btn, .mmo-btn, .npc-option-btn, .mmo-tab-btn, .audio-toggle {
    background: linear-gradient(180deg, #7fd0fa 0%, var(--mw-blue-400) 45%, var(--mw-blue-600) 100%) !important;
    color: #fff !important;
    border: 3px solid #fff !important;
    border-radius: var(--mw-radius-pill) !important;
    box-shadow: 0 4px 0 var(--mw-blue-700) !important;
    text-shadow: 0 2px 0 rgba(14, 63, 118, .45) !important;
}
.danger-btn.revive, .action-btn.shuffle {
    background: linear-gradient(180deg, #ff9d9d 0%, var(--mw-red) 45%, var(--mw-red-deep) 100%) !important;
    box-shadow: 0 4px 0 #b62a2a !important;
}
.claim-prize-btn:hover, .submit-score-btn:hover, .shop-buy-btn:hover, .mmo-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

/* Live game canvases keep a readable stage, but gain the cartoon frame. */
.game-frame, .mmo-viewport, .mmo-viewport-wrapper, .arena, .sky-stage, .sky-astral {
    border: 4px solid #fff !important;
    border-radius: var(--mw-radius) !important;
    box-shadow: 0 10px 0 rgba(14, 63, 118, .22), 0 22px 40px rgba(11, 58, 104, .32) !important;
    overflow: hidden;
}

/* ==========================================================================
   12. Scrollbar
   ========================================================================== */

* { scrollbar-color: var(--mw-blue-500) rgba(255, 255, 255, .35); scrollbar-width: thin; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .35); border-radius: var(--mw-radius-pill); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mw-blue-300), var(--mw-blue-600));
    border: 3px solid rgba(255, 255, 255, .75);
    border-radius: var(--mw-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--mw-sun), var(--mw-sun-deep)); }

/* ==========================================================================
   13. Responsive & accessibility
   ========================================================================== */

@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        background: linear-gradient(180deg, #ffffff 0%, #e8f6ff 100%);
        border: 3px solid #fff;
        border-radius: var(--mw-radius);
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: 0 10px 0 rgba(14, 63, 118, .18);
    }
    .site-navbar .navbar-collapse .nav-link {
        color: var(--mw-blue-700) !important;
        background: linear-gradient(180deg, #ffffff, #dcf1ff) !important;
        text-shadow: none !important;
        border-color: var(--mw-blue-300) !important;
    }
    .mw-layer-far { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mw-cloud, .mw-sparkle, .mw-world-sun, .mw-horizon, .hero-title-main {
        animation: none !important;
    }
    .btn, .card, .nav-link { transition: none !important; }
}