/* ============================================================
   JUSTMU — TEMA MorpheusMuWeb
   Porte do design de C:\Site JustMU\JustMU\index.html
   ------------------------------------------------------------
   Ordem de carga (views/layouts/default.phtml):
     morpheus.css  ->  bootstrap 5.0.2 (CDN)  ->  ESTE arquivo
   Portanto este arquivo tem a palavra final sobre cor/tipografia.
   ============================================================ */

:root {
  --jmu-bg: #0a0706;
  --jmu-panel: #120e0b;
  --jmu-panel-2: #191410;
  --jmu-panel-flat: #0d0a08;
  --jmu-head-a: #2c2219;
  --jmu-head-b: #1c1610;
  --jmu-line: #3b2f21;
  --jmu-line-soft: #2a2119;
  --jmu-line-dim: #1e1811;
  --jmu-gold: #f0c24a;
  --jmu-gold-2: #e8a838;
  --jmu-gold-deep: #7a4f12;
  --jmu-grad-gold: linear-gradient(180deg, #f3cd63, #d29a2c 45%, #a9700f);
  --jmu-ink: #241603;
  --jmu-text: #c9c0b4;
  --jmu-text-bright: #e6ddd0;
  --jmu-text-soft: #bdb3a6;
  --jmu-text-muted: #8d8378;
  --jmu-text-dim: #7a7167;
  --jmu-green: #8cd23c;
  --jmu-red: #d0563c;
  --jmu-max: 1180px;
  --jmu-aside: 336px;
  --jmu-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jmu-serif: "Cinzel", "Times New Roman", serif;
}

/* ---------- base ---------- */
body {
  margin: 0;
  background: var(--jmu-bg);
  color: var(--jmu-text);
  font-family: var(--jmu-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--jmu-gold-2); text-decoration: none; }
a:hover { color: #f7d67f; }
::selection { background: #8a5a12; color: #fff; }
img { max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--jmu-max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* pilha de contexto acima dos fundos fixos */
.jmu-stack { position: relative; z-index: 1; }
main#main { position: relative; z-index: 1; }

/* ---------- keyframes (do index.html) ---------- */
@keyframes emberPulse { 0%, 100% { opacity: .5 } 50% { opacity: .9 } }
@keyframes barShine { 0% { transform: translateX(-140%) } 100% { transform: translateX(420%) } }
@keyframes jmuFadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes sparkRise1 {
  0% { transform: translate3d(0, 10vh, 0) scale(1.03); opacity: 0 }
  12% { opacity: .55 } 80% { opacity: .4 }
  100% { transform: translate3d(-2vw, -96vh, 0) scale(1.16); opacity: 0 }
}
@keyframes sparkRise2 {
  0% { transform: translate3d(0, 16vh, 0) scale(.9); opacity: 0 }
  18% { opacity: .34 } 78% { opacity: .22 }
  100% { transform: translate3d(2.6vw, -108vh, 0) scale(1.24); opacity: 0 }
}
@keyframes bkFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translate3d(8px, 8px, 0) } }
@keyframes smFloat {
  0%, 100% { transform: translate3d(8px, -8px, 0); opacity: .85 }
  50% { transform: translateY(0); opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  [data-sparks] *, [data-rocks] * { animation: none !important; opacity: .2 !important; transform: none !important; }
}

/* ---------- fundos fixos (injetados no default.phtml) ---------- */
.jmu-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.jmu-bg-base { background: var(--jmu-bg); }
.jmu-bg-header { background: url("../images/justmu/bg_header.png") 50% 0 / cover no-repeat; }
.jmu-bg-grad {
  background:
    radial-gradient(1300px 760px at 50% -14%, rgba(122,53,18,.5) 0%, rgba(44,18,7,.6) 34%, rgba(10,7,6,.8) 72%),
    linear-gradient(180deg, rgba(10,7,6,.34) 0%, rgba(10,7,6,.7) 52%, rgba(10,7,6,.93) 100%);
}
.jmu-bg-ember {
  background:
    radial-gradient(760px 420px at 10% 26%, rgba(226,124,44,.12), transparent 70%),
    radial-gradient(680px 520px at 92% 58%, rgba(184,78,28,.11), transparent 70%);
  animation: emberPulse 8s ease-in-out infinite;
}
.jmu-bg-dots {
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 3px 3px; opacity: .5;
}
.jmu-sparks { position: fixed; left: 0; right: 0; bottom: 0; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; }
.jmu-sparks > div {
  position: absolute; left: -6vw; right: -6vw; bottom: -14vh; height: 82vh;
  background: url("../images/justmu/effect.png") 50% 100% / cover no-repeat;
  mix-blend-mode: screen; opacity: .5; will-change: transform, opacity;
  animation: sparkRise1 16s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 90%);
}
.jmu-sparks > div + div {
  left: -9vw; right: -9vw; bottom: -18vh; height: 94vh;
  background-position: 32% 100%; background-size: 135% auto;
  opacity: .34; animation: sparkRise2 25s linear -11s infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 84%);
  mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 84%);
}

/* ---------- cursor custom ---------- */
html, body { cursor: url("../images/justmu/cursor/cursor.png") 8 4, auto; }
a, button, select, label, summary, [role="button"], .jmu-nav a, .btn, .button {
  cursor: url("../images/justmu/cursor/cursor-hover.png") 10 6, pointer !important;
}
input, textarea, [contenteditable="true"] { cursor: text !important; }

/* ============================================================
   CHROME — barra superior / logo / nav
   ============================================================ */
/* main#main tem z-index:1; sem isto, conteúdo de página puxado pra cima
   com margin negativa (ex.: /market/items) passa POR CIMA do menu e
   rouba o clique dos links. z-index aqui mantém a nav sempre no topo.
   A barra superior precisa ficar ACIMA da faixa do logo e da nav: senão
   esses elementos (que vêm depois no DOM, com a logo e as molduras) tapam
   os dropdowns de conta/idioma e roubam o clique das opções. */
.jmu-topbar, .jmu-logoband, .jmu-navwrap { position: relative; }
.jmu-logoband { z-index: 10; }
.jmu-navwrap { z-index: 20; }
.jmu-topbar { z-index: 30; background: linear-gradient(180deg, #0f0b08, #0a0705); border-bottom: 1px solid var(--jmu-line-soft); }
.jmu-topbar-inner {
  max-width: var(--jmu-max); margin: 0 auto; padding: 0 16px; min-height: 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.jmu-topbar-left { display: flex; align-items: center; gap: 12px; }
.jmu-topbar-label {
  font: 600 12px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--jmu-text-muted);
}
.jmu-onlinebar {
  position: relative; width: 200px; height: 6px; border-radius: 3px;
  background: #1a1410; border: 1px solid #2e2419; overflow: hidden;
}
.jmu-onlinebar > i { position: absolute; inset: 0; width: 72%; background: linear-gradient(90deg, #3f7a1e, var(--jmu-green)); }
.jmu-onlinebar > b {
  position: absolute; top: 0; bottom: 0; width: 26px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: barShine 3.4s linear infinite;
}
.jmu-online-count {
  display: flex; align-items: center; gap: 6px; font: 700 13px var(--jmu-sans); color: #d9d0c4;
}
.jmu-online-count > i { width: 8px; height: 8px; border-radius: 50%; background: var(--jmu-green); box-shadow: 0 0 8px var(--jmu-green); }
.jmu-topbar-right { display: flex; align-items: center; gap: 14px; }
.jmu-link-register { font: 700 12px var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--jmu-gold-2); }
.jmu-sep { font: 400 12px var(--jmu-sans); color: #6f665c; }

.jmu-btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 26px; border: 1px solid var(--jmu-gold-deep); border-radius: 3px;
  background: var(--jmu-grad-gold); color: var(--jmu-ink);
  font: 700 12px/1 var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.jmu-btn-gold:hover { color: var(--jmu-ink); filter: brightness(1.05); }

/* language switch (reaproveita .lang-switch do MuX, repintado) */
.lang-switch { position: relative; }
.lang-current {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: linear-gradient(180deg, #221a13, #14100c); border: 1px solid var(--jmu-line);
  border-radius: 3px; color: #cfc6ba; font: 500 12px var(--jmu-sans); cursor: pointer;
}
.lang-current img { width: 18px; height: 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,.18); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; z-index: 40;
  background: #16120e; border: 1px solid var(--jmu-line); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); padding: 6px; display: none;
}
.lang-switch.open .lang-menu { display: block; }
.lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 3px; color: var(--jmu-text-soft); font-size: 13px; }
.lang-menu a:hover, .lang-menu a.active { background: #211a13; color: var(--jmu-gold); }
.lang-menu img { width: 18px; height: 12px; }

/* account dropdown (reaproveita .header-account do MuX) */
.header-account { position: relative; }
.account-toggle {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--jmu-line); border-radius: 3px; background: linear-gradient(180deg, #221a13, #14100c);
  color: var(--jmu-text-bright); font: 700 12px var(--jmu-sans); letter-spacing: .08em; cursor: pointer;
}
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 240px; z-index: 40; display: none;
  background: #16120e; border: 1px solid var(--jmu-line); border-radius: 4px; box-shadow: 0 14px 34px rgba(0,0,0,.7); padding: 10px;
}
.header-account.open .account-menu { display: block; }
.account-menu a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 3px; color: var(--jmu-text-soft); font: 600 12px var(--jmu-sans); }
.account-menu a:hover { background: #211a13; color: var(--jmu-gold); }
.account-menu-logout { color: var(--jmu-red) !important; }
.account-menu-stats, .account-menu-featured, .account-menu-vip { border-top: 1px solid var(--jmu-line-dim); margin-top: 6px; padding-top: 8px; }
.account-menu-stat { display: flex; justify-content: space-between; padding: 4px 10px; font: 500 12px var(--jmu-sans); color: var(--jmu-text-soft); }
.account-menu-stat b { color: var(--jmu-text-bright); }

/* logo band + rochedos */
.jmu-logoband { position: relative; height: 300px; overflow: hidden; }
.jmu-logoband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 50% 120%, rgba(255,150,50,.22), transparent 70%);
}
.jmu-logoband-inner { position: relative; height: 100%; max-width: var(--jmu-max); margin: 0 auto; padding: 0 16px; }
.jmu-logo {
  position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
  width: min(620px, 76vw); height: auto; filter: drop-shadow(0 6px 22px rgba(0,0,0,.7));
}
.jmu-rocks { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; }
.jmu-rocks > i, .jmu-rocks > b { position: absolute; display: block; }
.jmu-rocks > i {
  top: 40px; left: 50%; margin-left: -585px; width: 404px; height: 279px;
  background: url("../images/justmu/hero-bk.png") top left / contain no-repeat;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); animation: bkFloat 5s ease-in-out infinite;
}
.jmu-rocks > b {
  top: 26px; left: 50%; margin-left: 205px; width: 338px; height: 331px;
  background: url("../images/justmu/hero-sm.png") top right / contain no-repeat;
  filter: sepia(.45) saturate(1.5) hue-rotate(-12deg) brightness(.85) drop-shadow(0 12px 26px rgba(0,0,0,.5));
  animation: smFloat 5s ease-in-out infinite;
}

/* nav ornamentada */
.jmu-navwrap { max-width: var(--jmu-max); margin: 0 auto; padding: 0 16px; position: relative; }
.jmu-nav {
  position: relative; height: 62px;
  background: url("../images/justmu/bg-nav.png") center / cover no-repeat,
             linear-gradient(180deg, #2e241a, #1b1510 60%, #120e0a);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.jmu-nav::before, .jmu-nav::after {
  content: ""; position: absolute; top: -44px; width: 106px; height: 129px; z-index: 3; pointer-events: none;
  background: url("../images/justmu/nav-frame.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
.jmu-nav::before { left: -42px; }
.jmu-nav::after { right: -42px; transform: scaleX(-1); }
.jmu-nav-list { height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 2px; padding: 0 70px; }
.jmu-nav-list a {
  position: relative; display: flex; align-items: center; padding: 0 26px;
  font: 600 13px var(--jmu-serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #cdc2b2; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.jmu-nav-list a:hover { color: #f7d67f; }
.jmu-nav-list a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 12px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--jmu-gold), transparent); opacity: 0;
}
.jmu-nav-list a.active { color: var(--jmu-gold); }
.jmu-nav-list a.active::after { opacity: 1; }
.jmu-nav-list .jmu-nav-soon {
  position: relative; display: flex; align-items: center; padding: 0 26px;
  font: 600 13px var(--jmu-serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #6f665a; text-shadow: 0 1px 2px rgba(0,0,0,.8); cursor: help; user-select: none;
}
.jmu-nav-list .jmu-nav-soon::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% - 6px);
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap; padding: 7px 12px;
  background: linear-gradient(180deg, #1c1712, #100c09);
  border: 1px solid var(--jmu-gold-deep); border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  font: 600 10.5px var(--jmu-sans); letter-spacing: .04em; text-transform: none;
  color: var(--jmu-text-soft);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.jmu-nav-list .jmu-nav-soon:hover::after,
.jmu-nav-list .jmu-nav-soon:focus::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.menu-toggle { display: none; }

/* ============================================================
   HOME — grid 2 colunas
   ============================================================ */
.jmu-content-wrap { max-width: var(--jmu-max); margin: 0 auto; padding: 0 16px; }
.jmu-content-bg {
  background-color: var(--jmu-panel-flat);
  background-image: url("../images/justmu/bg-content-top.jpg");
  background-repeat: repeat-y; background-position: top center; background-size: 100% auto;
  padding: 16px 16px 0;
}
.jmu-grid {
  padding: 20px 6px 42px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--jmu-aside); gap: 20px; align-items: start;
}
.jmu-col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jmu-col-aside { display: flex; flex-direction: column; gap: 18px; }
.jmu-content-foot {
  height: 17px; margin-top: -1px;
  background: url("../images/justmu/bg-content-bottom.jpg") center / 100% 100% no-repeat;
}

/* ---------- banner rotativo ---------- */
.jmu-slider-card {
  position: relative; background: var(--jmu-panel-flat); border: 1px solid var(--jmu-line);
  border-radius: 3px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.jmu-slider { position: relative; height: 246px; overflow: hidden; }
.jmu-slide {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; gap: 20px;
  animation: jmuFadeUp .5s ease;
}
.jmu-slide.active { display: flex; }
.jmu-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jmu-slide-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 40px; }
.jmu-slide-art {
  width: 190px; height: 150px; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.35);
  font: 600 10px var(--jmu-sans); letter-spacing: .14em; text-align: center;
}
.jmu-slide-body { text-align: right; }
.jmu-slide-kicker { font: 400 22px var(--jmu-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--jmu-text-bright); }
.jmu-slide-title { font: 700 46px/1 var(--jmu-sans); letter-spacing: .02em; text-transform: uppercase; color: #f2c451; text-shadow: 0 3px 12px rgba(0,0,0,.7); }
.jmu-slide-lines { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.jmu-slide-lines div { font: 500 14px var(--jmu-sans); color: #d3cabd; }
/* seletor de imagens — widget no canto superior direito do slide, igual ao
   "main_prom" original da WebZen (.gMainPromWrap .rollingIconWrap):
   asa (main_prom_rollTop) à esquerda + faixa (main_prom_rollMiddle) atrás dos dots */
.jmu-slider-dots {
  position: absolute; top: 0; right: 0; z-index: 12;
  display: flex; align-items: flex-start;
  height: 40px; padding: 10px 15px 0 0;
  background: url("../images/justmu/slide/main_prom_rollMiddle.png") no-repeat right top;
  border: 0;
}
/* asa (.bgFirst): peça fixa de 53px encostada na ESQUERDA da faixa */
.jmu-slider-dots::before {
  content: ""; position: absolute; top: 0; right: 100%; width: 53px; height: 40px; pointer-events: none;
  background: url("../images/justmu/slide/main_prom_rollTop.png") no-repeat left top;
}
.jmu-slider-dots button {
  width: 19px; height: 21px; margin-right: 3px; border: 0; padding: 0; cursor: pointer;
  background: url("../images/justmu/slide/main_prom_icon_off.gif") no-repeat center;
}
.jmu-slider-dots button:last-child { margin-right: 0; }
.jmu-slider-dots button.active { background-image: url("../images/justmu/slide/main_prom_icon_on.gif"); }

/* ---------- cards de notícia ---------- */
.jmu-news-card {
  position: relative; background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel));
  border: 1px solid var(--jmu-line); border-radius: 3px; box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.jmu-news-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; background: linear-gradient(180deg, #241c14, #181310); border-bottom: 1px solid #33281c;
  font: 600 13px var(--jmu-serif); letter-spacing: .1em; text-transform: uppercase; color: #cbbfae;
}
.jmu-news-title { min-width: 0; }
.jmu-news-tag {
  flex: none; padding: 3px 9px; border: 1px solid rgba(240,194,74,.34); border-radius: 2px;
  background: rgba(240,194,74,.07); color: #e0bd6c;
  font: 700 9px var(--jmu-sans); letter-spacing: .16em; text-transform: uppercase;
}
.jmu-news-body { padding: 18px; }
.jmu-news-cover {
  height: 120px; border: 1px solid #33281c; border-radius: 3px; background: #0d0a08 center / cover no-repeat;
  box-shadow: inset 0 -40px 46px rgba(13,10,8,.92), inset 0 0 30px rgba(0,0,0,.5);
}
.jmu-news-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.jmu-news-excerpt { margin: 0; font: 400 14.5px/1.6 var(--jmu-sans); color: var(--jmu-text-soft); }
.jmu-news-date { margin-top: 12px; text-align: right; font: 400 12px var(--jmu-sans); color: var(--jmu-text-dim); }
/* espaçamento entre os cards dentro de cada grupo do paginador (a home
   perdeu o gap ao passar a aninhar os cards em [data-news-group]) */
[data-news-group] { display: flex; flex-direction: column; gap: 20px; }
.jmu-news-more {
  flex: none; padding: 9px 22px; border: 1px solid var(--jmu-gold-deep); border-radius: 3px;
  background: var(--jmu-grad-gold); color: var(--jmu-ink);
  font: 700 12px/1 var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.jmu-borda {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto;
  transform: translateY(50%); pointer-events: none; z-index: 2;
}
.jmu-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; }
/* inclui `span` porque a página atual vem como <span class="active"> e
   precisa da mesma caixa 32x32 dos irmãos <a>/<button> */
.jmu-pager button, .jmu-pager a, .jmu-pager span {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jmu-line); border-radius: 3px; background: #191410;
  color: var(--jmu-text-soft); font: 600 13px var(--jmu-sans); cursor: pointer;
}
.jmu-pager a:hover { border-color: var(--jmu-gold-deep); color: var(--jmu-gold); }
.jmu-pager .active {
  background: var(--jmu-grad-gold); border-color: var(--jmu-gold-deep);
  color: var(--jmu-ink); cursor: default;
}
.jmu-news-pager { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 2px; }
.jmu-news-all { font: 600 11.5px var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; }

/* ============================================================
   PAINÉIS DA SIDEBAR
   ============================================================ */
.jmu-panel {
  position: relative; background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel));
  border: 1px solid var(--jmu-line); border-radius: 3px;
}
.jmu-panel.shadow { box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.jmu-panel-head {
  position: relative; padding: 12px 40px; text-align: center;
  background: linear-gradient(180deg, var(--jmu-head-a), var(--jmu-head-b)); border-bottom: 1px solid var(--jmu-line);
}
.jmu-panel-head > .diamond {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
}
.jmu-panel-head > .diamond.l { left: 6px; }
.jmu-panel-head > .diamond.r { right: 6px; }
.jmu-panel-head > .diamond i {
  display: block; width: 44px; height: 20px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.jmu-panel-head > .diamond.l i { background-image: url("../images/justmu/sub_nav_title_bg_left.png"); }
.jmu-panel-head > .diamond.r i { background-image: url("../images/justmu/sub_nav_title_bg_right.png"); }
.jmu-panel-title {
  font: 600 13px var(--jmu-serif); letter-spacing: .16em; text-transform: uppercase;
  color: var(--jmu-gold); text-shadow: 0 0 14px rgba(240,194,74,.3);
}
.jmu-panel-arrow {
  position: absolute; top: 0; bottom: 0; width: 26px; border: 0; cursor: pointer; opacity: .8;
  background: url("../images/justmu/ico_arrow_cont.png") center / 12px no-repeat;
}
.jmu-panel-arrow.prev { left: 8px; transform: scaleX(-1); }
.jmu-panel-arrow.next { right: 8px; }
.jmu-panel-body { padding: 12px 0 8px; }

/* account panel */
.jmu-acc-form { padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.jmu-field { position: relative; }
.jmu-field > .ico {
  position: absolute; left: 1px; top: 1px; bottom: 1px; width: 30px; display: grid; place-items: center;
  background: #1a140f; border-right: 1px solid #2b2118; border-radius: 2px 0 0 2px;
}
.jmu-field > .ico img { width: 16px; height: 16px; opacity: .9; }
.jmu-field input {
  width: 100%; padding: 11px 12px 11px 42px; background: #0e0b09; border: 1px solid #35291d;
  border-radius: 3px; color: #d6cdc0; font: 400 14px var(--jmu-sans); outline: none;
}
.jmu-acc-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.jmu-acc-actions a { font: 400 13px var(--jmu-sans); }
.jmu-btn-login {
  padding: 11px 30px; border: 1px solid var(--jmu-gold-deep); border-radius: 3px; background: var(--jmu-grad-gold);
  color: var(--jmu-ink); font: 700 12px var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.jmu-acc-logged { padding: 16px; }
.jmu-acc-logged .jmu-acc-links { padding: 12px 0 0; }
.jmu-acc-wallets { border: 1px solid var(--jmu-line-soft); border-radius: 3px; background: #0f0c09; overflow: hidden; }
.jmu-acc-wallet { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--jmu-line-dim); }
.jmu-acc-wallet > i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #f3cd63, #a9700f); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.jmu-acc-wallet .label { font: 500 13.5px var(--jmu-sans); color: var(--jmu-text-soft); }
.jmu-acc-wallet .value { margin-left: auto; font: 700 14px var(--jmu-sans); color: var(--jmu-text-bright); }
.jmu-acc-links { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.jmu-acc-link {
  width: 100%; text-align: left; padding: 10px 14px; border: 1px solid #34291d; border-radius: 3px;
  background: linear-gradient(180deg, #211a13, #171209); color: var(--jmu-text-soft);
  font: 600 12px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase;
}
.jmu-acc-link:hover { border-color: var(--jmu-gold-deep); color: var(--jmu-gold); }
.jmu-acc-logout { display: flex; justify-content: center; padding: 14px 16px; }
.jmu-btn-logout {
  padding: 11px 40px; border: 1px solid var(--jmu-gold-deep); border-radius: 3px; background: var(--jmu-grad-gold);
  color: var(--jmu-ink); font: 700 12px var(--jmu-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.jmu-form-error { font: 500 12px var(--jmu-sans); color: var(--jmu-red); min-height: 14px; }

/* castle siege card */
.jmu-siege {
  position: relative; background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel));
  border: 1px solid var(--jmu-line); border-radius: 3px; overflow: hidden;
}
.jmu-siege > video,
.jmu-siege > img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .5; pointer-events: none;
}
/* filtro escuro por cima da capa (igual ao html offline) */
.jmu-siege::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,11,8,.5) 0%, rgba(14,11,8,.86) 100%);
}
.jmu-siege::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 150px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 70% 40%, rgba(232,168,56,.16), transparent 65%);
}
.jmu-siege-inner { position: relative; z-index: 2; padding: 16px 18px 18px; text-align: center; }
.jmu-siege-title { font: 600 16px var(--jmu-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--jmu-gold); text-shadow: 0 0 16px rgba(240,194,74,.35); }
.jmu-siege-owner { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.jmu-siege-owner .emblem { width: 38px; height: 38px; border-radius: 3px; background: linear-gradient(135deg, #2f7fd6, #0f3f7a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); overflow: hidden; }
.jmu-siege-owner .info { text-align: left; }
.jmu-siege-owner .info small, .jmu-siege-owner .info .role { font: 600 11px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--jmu-gold-2); }
.jmu-siege-owner .info strong, .jmu-siege-owner .info a { font: 700 14px var(--jmu-sans); color: var(--jmu-text-bright); display: block; }
.jmu-siege-next { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--jmu-line-soft); border-radius: 3px; background: rgba(0,0,0,.35); display: inline-block; }
.jmu-siege-next small { font: 600 11px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--jmu-gold-2); display: block; }
.jmu-siege-cd { font: 700 15px var(--jmu-sans); color: var(--jmu-text-bright); }
.jmu-siege-more { margin-top: 12px; }
.jmu-siege-more a { font: 400 13px var(--jmu-sans); color: #b9ad9d; }

/* top players / listas */
.jmu-list-head {
  display: grid; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--jmu-line-soft);
  font: 600 11px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--jmu-text-muted);
}
.jmu-list-row {
  display: grid; gap: 6px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--jmu-line-dim);
  font: 500 13px var(--jmu-sans); color: var(--jmu-text-soft);
}
.jmu-list-row a { color: var(--jmu-gold-2); }
.jmu-flag { width: 19px; height: 13px; object-fit: cover; border-radius: 2px; border: 1px solid #3d3225; }
.jmu-list-row .n { color: var(--jmu-text-dim); font-weight: 600; }
.jmu-list-row .s { text-align: right; color: #d3cabd; font-weight: 600; }
.jmu-list-row .jmu-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jmu-list-row .jmu-ellipsis a { color: var(--jmu-gold-2); }
.jmu-list-row .jmu-flag-cell { text-align: center; }
.jmu-list-row .jmu-flag-cell .jmu-flag { display: inline-block; vertical-align: middle; }
.jmu-list-head span:last-child, .jmu-list-row span:last-child { min-width: 0; }
.jmu-top-grid { grid-template-columns: 26px minmax(0, 1fr) 44px 40px; }
.jmu-top-grid .n { color: var(--jmu-text-dim); }
.jmu-top-grid .s { text-align: right; color: var(--jmu-text-bright); font-weight: 700; }

.jmu-event-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--jmu-line-dim); }
.jmu-event-row .name { font: 600 13.5px var(--jmu-sans); color: #d3cabd; }
.jmu-event-row .sub { font: 400 11.5px var(--jmu-sans); color: var(--jmu-text-dim); }
.jmu-event-row .time { font: 600 13.5px var(--jmu-sans); color: #d3cabd; text-align: right; }
.jmu-event-row .cd { font: 600 12px var(--jmu-sans); color: var(--jmu-gold-2); text-align: right; }

.jmu-market-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; }
.jmu-market-row .item {
  font: 600 12.5px var(--jmu-sans); padding: 1px 5px; border-radius: 2px;
  color: #e8e2d6; background: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* cores por raridade — as MESMAS do tooltip de item do jogo (Morpheus):
     normal    = branco   (.item-info -> #fff)
     excellent = verde    (.is-excellent -> #65ff65)
     ancient   = âmbar    (título do tooltip, ver print -> #e8a838)
   socket/harmony seguem o azul de opção do tooltip (.luck -> #7fbfff).
   Hoje o offers.phtml só emite normal/excellent/ancient; os demais
   ficam alinhados à mesma família. Se o tooltip do teu servidor usar
   outros hex, é só trocar aqui. */
.jmu-market-row .item.jmu-grade-normal   { color: #eeeeee; }
.jmu-market-row .item.jmu-grade-excellent{ color: #19ff80; }
.jmu-market-row .item.jmu-grade-ancient  { color: #00ff00; }
.jmu-market-row .item.jmu-grade-socket   { color: #7fbfff; }
.jmu-market-row .item.jmu-grade-380      { color: #e7d24a; }
.jmu-market-row .item.jmu-grade-harmony  { color: #7fbfff; }
.jmu-market-row .item.jmu-grade-jewel    { color: #e0b04a; }
.jmu-market-row .item.jmu-grade-wing     { color: #c07de0; }
.jmu-market-row .price { flex: none; padding: 3px 9px; border-radius: 11px; border: 1px solid #6b5220; background: rgba(180,130,40,.14); font: 700 11px var(--jmu-sans); color: var(--jmu-gold); }

/* Nome do item nas tabelas do Market (/market/items e "itens à venda" no
   perfil): o nome vem de getFullName(), que embrulha em <span class="is-*">.
   O morpheus.css só colore essas classes DENTRO de .item-info (tooltip);
   aqui replicamos EXATAMENTE os mesmos valores do
   /resources/assets/morpheus.css do servidor. */
.mk-item-name { color: #EEEEEE; }
.mk-item-name .is-normal          { color: #EEEEEE !important; }
.mk-item-name .is-high-level      { color: #FFCC00 !important; } /* "amarelo": Dragon Helm +7, Legendary Staff +9... */
.mk-item-name .is-excellent       { color: #19ff80 !important; }
.mk-item-name .is-excellent-socket { color: #AE80AF !important; }
.mk-item-name .is-ancient         { color: #00FF00 !important; background-color: #0066FF !important;
                                    display: inline !important; width: auto !important;
                                    padding: 0 4px; border-radius: 2px; } /* verde sobre barra azul, igual ao tooltip */
.mk-item-name .is-socket          { color: #B266FF !important; font-weight: bold; }
.mk-item-name .is-pentagram,
.mk-item-name .is-errtel          { color: #B266FF !important; }
.mk-item-name .is-luck,
.mk-item-name .is-skill           { color: #80B2FF !important; }

.jmu-panel-link { padding: 10px 16px 2px; text-align: center; }
.jmu-panel-link a { font: 600 11.5px var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; }
.jmu-panel-note { text-align: center; font: 400 12px var(--jmu-sans); color: var(--jmu-text-dim); padding-bottom: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer, .jmu-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--jmu-line-soft);
  background: linear-gradient(180deg, #0c0908, #080605);
}
.jmu-footer-main {
  max-width: var(--jmu-max); margin: 0 auto; padding: 34px 16px 24px;
  display: grid; grid-template-columns: 1fr minmax(0, 1.35fr) 300px; gap: 32px; align-items: start;
}
.jmu-footer-logo { display: inline-block; line-height: 0; }
.jmu-footer-logo img { height: 52px; width: auto; max-width: 100%; display: block; }
.jmu-footer-brand p { margin: 14px 0 0; font: 400 13px/1.7 var(--jmu-sans); color: #7f766b; max-width: 300px; }
.jmu-footer-checks { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.jmu-footer-checks li { position: relative; padding-left: 21px; font: 400 12.5px/1.55 var(--jmu-sans); color: #8a8175; }
.jmu-footer-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #7fb23a; font-weight: 700; }
.jmu-footer-col .col-title { display: flex; align-items: center; gap: 10px; font: 600 12px var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase; color: #cbbfae; }
.jmu-footer-col .col-title span { flex: 1; height: 1px; background: linear-gradient(90deg, var(--jmu-line-soft), transparent); }
.jmu-sponsors { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jmu-sponsor {
  display: flex; align-items: center; justify-content: center; height: 68px; padding: 8px 12px; overflow: hidden;
  border: 1px solid var(--jmu-line-soft); border-radius: 3px; background: #100c09;
}
.jmu-sponsor:hover { border-color: var(--jmu-gold-deep); }
.jmu-sponsor img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; opacity: .9; }
.jmu-sponsors-foot { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jmu-sponsors-foot span { font: 400 12px var(--jmu-sans); color: #6b6258; }
.jmu-sponsors-foot a { font: 600 11px var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; }

.jmu-discord-card { padding: 18px; border: 1px solid #2f3a63; border-radius: 3px; background: linear-gradient(180deg, #161a2e, #101322); }
.jmu-discord-card .head { display: flex; align-items: center; gap: 11px; }
.jmu-discord-card .head .icon { flex: none; width: 38px; height: 38px; border-radius: 9px; background: #5865f2; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(88,101,242,.4); }
.jmu-discord-card .head .icon svg { width: 22px; height: 17px; fill: #fff; }
.jmu-discord-card .head strong { display: block; font: 600 13.5px var(--jmu-sans); color: var(--jmu-text-bright); }
.jmu-discord-card .head span { margin-top: 2px; display: flex; align-items: center; gap: 6px; font: 400 12px var(--jmu-sans); color: #8d93b0; }
.jmu-discord-card .head span i { width: 7px; height: 7px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 7px rgba(63,191,106,.8); }
.jmu-discord-card p { margin: 12px 0 0; font: 400 12.5px/1.6 var(--jmu-sans); color: #8d93b0; }
.jmu-discord-join {
  margin-top: 14px; display: block; padding: 11px 0; border-radius: 3px; background: #5865f2; color: #fff;
  text-align: center; font: 700 12px var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.jmu-discord-join:hover { background: #4752d4; color: #fff; }
.jmu-footer-links {
  max-width: var(--jmu-max); margin: 0 auto; padding: 2px 16px 20px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font: 600 13px var(--jmu-sans); letter-spacing: .04em;
}
.jmu-footer-links a { color: var(--jmu-gold); }
.jmu-footer-links a:hover { color: #f7d67f; }
.jmu-footer-links .sep { color: #4a3a26; }
.jmu-footer-bottom { max-width: var(--jmu-max); margin: 0 auto; padding: 14px 16px 30px; border-top: 1px solid #1d1712; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jmu-footer-bottom p { margin: 0; font: 400 12px var(--jmu-sans); color: #6b6258; }

/* ============================================================
   RESTYLE DAS CLASSES LEGADAS (páginas internas — só cor/tipo)
   ============================================================ */
/* páginas internas usam o mesmo wrap de 2 colunas da home */
main.page-inner-main { padding: 0; }
.page-inner .jmu-grid { padding-top: 22px; }
/* garante os botões de seta do painel (não deixa o reset de button vencer) */
.jmu-col-aside .jmu-panel-arrow {
  background: url("../images/justmu/ico_arrow_cont.png") center / 12px no-repeat !important;
  border: 0 !important; box-shadow: none !important;
}
.jmu-col-aside .jmu-panel-arrow.prev { transform: scaleX(-1); }

.card, .bg-dark-grey-2, .bg-grey-2 {
  background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel)) !important;
  border: 1px solid var(--jmu-line) !important; border-radius: 3px !important; color: var(--jmu-text);
}
.card-header {
  background: linear-gradient(180deg, #241c14, #181310) !important; border-bottom: 1px solid #33281c !important;
  font-family: var(--jmu-serif); letter-spacing: .1em; text-transform: uppercase; color: #cbbfae;
}
.page-header { position: relative; padding: 24px 0 8px; text-align: center; }
.page-header h1, .page-title h1, .page-title h2 { font-family: var(--jmu-serif); color: var(--jmu-text-bright); }
.page-title span, .page-header .eyebrow { color: var(--jmu-gold-2); font: 600 12px var(--jmu-sans); letter-spacing: .2em; text-transform: uppercase; }
.background_cover { position: fixed; inset: 0; z-index: 0; opacity: .18; pointer-events: none; }
.background_cover img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb { background: transparent; border: 1px solid var(--jmu-line-dim); border-radius: 3px; padding: 8px 12px; font-size: 13px; }
.breadcrumb a { color: var(--jmu-text-soft); }
.breadcrumb .active { color: #fff; }

.table, .custom-table-2 { color: var(--jmu-text-soft); border-color: var(--jmu-line-dim); }
.table thead th, .custom-table-2 thead th { color: var(--jmu-text-bright); border-color: var(--jmu-line-soft); font: 600 11.5px var(--jmu-sans); letter-spacing: .08em; text-transform: uppercase; }
.custom-table-2-striped tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }
.table td, .custom-table-2 td { border-color: var(--jmu-line-dim); }

.btn, .button, .submit_button, .small-button {
  border-radius: 3px; font-family: var(--jmu-sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.btn-primary, .button-primary, .btn-gold, .submit_button, .small-button {
  border: 1px solid var(--jmu-gold-deep) !important; background: var(--jmu-grad-gold) !important;
  color: var(--jmu-ink) !important; box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-ghost, .btn-outline-light { border: 1px solid var(--jmu-line) !important; background: linear-gradient(180deg, #211a13, #171209) !important; color: var(--jmu-text-soft) !important; }

.input-group_label input, .form-control, input[type="text"], input[type="password"], input[type="email"], select, textarea {
  background: #0e0b09 !important; border: 1px solid #35291d !important; color: #d6cdc0 !important; border-radius: 3px !important;
}
.input-group_label label { color: var(--jmu-text-muted); }

.alert { border-radius: 3px; border: 1px solid var(--jmu-line); }
.alert-warning { background: rgba(180,130,40,.1); color: #d6c8ae; border-color: #6b5220; }
.badge.bg-success { background: #3f7a1e !important; }

.mux-frame, .corner-frame { border: 1px solid var(--jmu-line); border-radius: 3px; }

/* asidebar das páginas internas */
.asidebar .aside_block { background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel)); border: 1px solid var(--jmu-line); border-radius: 3px; margin-bottom: 18px; }
.asidebar .aside_title { padding: 12px 16px; background: linear-gradient(180deg, var(--jmu-head-a), var(--jmu-head-b)); border-bottom: 1px solid var(--jmu-line); }
.asidebar .aside_title h3 { margin: 0; font: 600 13px var(--jmu-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--jmu-gold); }
.asidebar .aside_content { padding: 12px 16px; }
.asidebar .list-style-1 li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--jmu-line-dim); font-size: 13px; }
.gold-2, .gold-4 { color: var(--jmu-gold) !important; }
.grey-7, .text-grey-5, .text-light-grey-1 { color: var(--jmu-text-muted) !important; }

/* ---------- back-top / progress / cursor-light do MuX ---------- */
.page-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; background: transparent; }
.page-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--jmu-gold-deep), var(--jmu-gold)); }
.cursor-light { position: fixed; width: 380px; height: 380px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(240,194,74,.06), transparent 70%); }
.noise-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size: 3px 3px; }
.back-top {
  position: fixed; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; z-index: 55;
  border: 1px solid var(--jmu-gold-deep); background: var(--jmu-grad-gold); color: var(--jmu-ink); font-size: 18px; cursor: pointer;
  opacity: 0; transform: translateY(10px); transition: .25s;
}
.back-top.show { opacity: 1; transform: none; }

/* ---------- selo Free2Play (canto inferior direito) ---------- */
.jmu-f2p {
  position: fixed; right: 22px; bottom: 74px; z-index: 54;
  width: 62px; height: 62px; cursor: help; outline: none;
}
.jmu-f2p-gif {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.65));
  animation: jmu-f2p-float 3.4s ease-in-out infinite;
}
@keyframes jmu-f2p-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.jmu-f2p-bubble {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 290px; padding: 13px 15px;
  background: linear-gradient(180deg, #1c1712, #100c09);
  border: 1px solid var(--jmu-gold-deep); border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0,0,0,.62);
  font: 400 12.5px/1.62 var(--jmu-sans); color: var(--jmu-text-soft);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.jmu-f2p-bubble::after {
  content: ""; position: absolute; right: 21px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--jmu-gold-deep);
}
.jmu-f2p:hover .jmu-f2p-bubble,
.jmu-f2p:focus .jmu-f2p-bubble,
.jmu-f2p:focus-visible .jmu-f2p-bubble,
.jmu-f2p.is-intro .jmu-f2p-bubble { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 600px) {
  .jmu-f2p { right: 12px; bottom: 66px; width: 50px; height: 50px; }
  .jmu-f2p-bubble { width: min(220px, 72vw); }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   WIDGETS DE PLUGIN NA HOME (banner/posts/top-players/market)
   Ainda usam classes do MuX (mux.css dá a base). Aqui só encaixe.
   ============================================================ */
.jmu-slider-card-plugin { position: relative; }
.jmu-slider-card-plugin .mux-slider { position: relative; height: 246px; overflow: hidden; }
.jmu-slider-card-plugin .mux-slide { position: absolute; inset: 0; display: none; }
.jmu-slider-card-plugin .mux-slide.active { display: block; }
.jmu-slider-card-plugin .mux-slide > a,
.jmu-slider-card-plugin .mux-slide > img,
.jmu-slider-card-plugin .mux-slide > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jmu-slider-card-plugin .mux-slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 18px;
  background: linear-gradient(180deg, transparent, rgba(13,10,8,.9));
}
.jmu-slider-card-plugin .mux-slide-caption strong { font: 700 20px var(--jmu-serif); color: var(--jmu-gold); }
/* dots do plugin: mesmo seletor no canto superior direito (o justmu.js move
   o elemento pra fora do .mux-slider, pra dentro do .jmu-slider-card-plugin) */
.jmu-slider-card-plugin > .mux-slider-dots {
  position: absolute; top: 0; right: 0; z-index: 12;
  display: flex; align-items: flex-start;
  height: 40px; padding: 10px 15px 0 0;
  background: url("../images/justmu/slide/main_prom_rollMiddle.png") no-repeat right top;
  border: 0;
}
.jmu-slider-card-plugin > .mux-slider-dots::before {
  content: ""; position: absolute; top: 0; right: 100%; width: 53px; height: 40px; pointer-events: none;
  background: url("../images/justmu/slide/main_prom_rollTop.png") no-repeat left top;
}
.jmu-slider-card-plugin .mux-slider-dots button {
  width: 19px; height: 21px; margin-right: 3px; border: 0; padding: 0; cursor: pointer;
  background: url("../images/justmu/slide/main_prom_icon_off.gif") no-repeat center;
}
.jmu-slider-card-plugin .mux-slider-dots button:last-child { margin-right: 0; }
.jmu-slider-card-plugin .mux-slider-dots button.active { background-image: url("../images/justmu/slide/main_prom_icon_on.gif"); }
/* enquanto o JS não moveu, esconde os dots pra não aparecerem no topo */
.jmu-slider-card-plugin .mux-slider > .mux-slider-dots { display: none; }

/* Notícias reais (Posts) direto na coluna esquerda */
.jmu-col-main .portal-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.jmu-col-main .portal-tabs button {
  padding: 8px 14px; border: 1px solid var(--jmu-line); border-radius: 3px; background: #191410;
  color: var(--jmu-text-soft); font: 600 12px var(--jmu-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.jmu-col-main .portal-tabs button.active { background: var(--jmu-grad-gold); border-color: var(--jmu-gold-deep); color: var(--jmu-ink); }
.jmu-col-main .portal-tabs .notice-count { margin-left: 6px; opacity: .7; }
.home-feed { display: flex; flex-direction: column; gap: 12px; }
.home-feed-item {
  position: relative; display: grid; grid-template-columns: 90px auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px; border: 1px solid var(--jmu-line); border-radius: 3px;
  background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel)); color: var(--jmu-text-soft);
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.home-feed-item:hover { border-color: var(--jmu-gold-deep); }
.home-feed-art { width: 90px; height: 64px; border-radius: 3px; overflow: hidden; border: 1px solid #33281c; }
.home-feed-art img { width: 100%; height: 100%; object-fit: cover; }
.home-feed-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #6b5220; display: grid; place-items: center; color: var(--jmu-gold); }
.home-feed-icon .material-symbols-outlined { font-size: 18px; }
.home-feed-date { text-align: center; color: var(--jmu-text-muted); }
.home-feed-date strong { display: block; font: 700 18px var(--jmu-sans); color: var(--jmu-text-bright); }
.home-feed-date span { font-size: 10px; letter-spacing: .1em; }
.home-feed-copy strong { display: block; font: 600 15px var(--jmu-sans); color: var(--jmu-text-bright); }
.home-feed-copy .home-feed-tag { font: 600 10px var(--jmu-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--jmu-gold-2); }
.home-feed-copy p { margin: 4px 0 0; font: 400 13px/1.5 var(--jmu-sans); color: var(--jmu-text-muted); }
.home-feed-arrow { color: var(--jmu-gold); font-size: 18px; }
.home-feed-empty, .market-preview-empty { padding: 20px; text-align: center; color: var(--jmu-text-dim); }

/* Top Players reais (HallFame) dentro do painel */
.jmu-panel-body .portal-tabs { padding: 0 14px 10px; flex-wrap: wrap; }
.jmu-panel-body [data-hall-panel] { display: flex; flex-direction: column; }
.jmu-panel-body .portal-rank {
  display: grid; grid-template-columns: 28px 34px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--jmu-line-dim); color: var(--jmu-text-soft); font: 500 13px var(--jmu-sans);
}
.jmu-panel-body .portal-rank strong { color: var(--jmu-text-bright); font-weight: 700; }
.jmu-panel-body .portal-rank small { display: block; font-size: 10px; color: var(--jmu-text-dim); }
.jmu-panel-body .portal-rank b { color: var(--jmu-gold); }
.jmu-panel-body .portal-rank-position { color: var(--jmu-text-dim); font-weight: 700; }
.jmu-panel-body .portal-rank-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #0f0c09; }
.jmu-panel-body .portal-rank-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Market real (ItemMarket) — compacta o mk-card para caber na sidebar */
.jmu-panel-body .mk-card {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 14px; border: 0; border-bottom: 1px solid var(--jmu-line-dim); background: transparent; box-shadow: none;
}
.jmu-panel-body .mk-card-visual { width: 52px; height: 52px; }
.jmu-panel-body .mk-card-visual img { width: 100%; height: 100%; object-fit: contain; }
.jmu-panel-body .mk-badge, .jmu-panel-body .mk-glow, .jmu-panel-body .mk-stats, .jmu-panel-body .mk-opts, .jmu-panel-body .mk-cart { display: none; }
.jmu-panel-body .mk-card-body h3 { margin: 0; font: 600 12.5px var(--jmu-sans); color: var(--jmu-gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jmu-panel-body .mk-card-foot { display: block; }
.jmu-panel-body .mk-price { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 11px; border: 1px solid #6b5220; background: rgba(180,130,40,.14); font: 700 11px var(--jmu-sans); color: var(--jmu-gold); }
.jmu-panel-body .mk-price img { width: 12px; height: 12px; }
.jmu-panel-body .mk-price small { display: none; }

/* ============================================================
   FORMULÁRIOS (login / registro) — igual ao offline
   ============================================================ */
.jmu-form-panel { max-width: 480px; margin: 0 auto; }
.jmu-form-body {
  padding: 30px 26px 36px; max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.jmu-form-field label { display: block; margin-bottom: 6px; font: 500 13px var(--jmu-sans); color: #a99e91; }
.jmu-input-ico { position: relative; }
.jmu-input-ico > img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: .8; pointer-events: none; }
.jmu-input-ico > input {
  width: 100%; padding: 11px 12px 11px 38px; background: #0e0b09; border: 1px solid #35291d;
  border-radius: 3px; color: #d6cdc0; font: 400 14px var(--jmu-sans); outline: none;
}
.jmu-input-ico > input:focus { border-color: var(--jmu-gold-deep); box-shadow: 0 0 0 2px rgba(240,194,74,.12); }
.jmu-form-check { display: flex; align-items: center; gap: 9px; font: 400 13px var(--jmu-sans); color: #a99e91; cursor: pointer; }
.jmu-form-body .jmu-form-error { font: 500 13px var(--jmu-sans); color: var(--jmu-red); min-height: 18px; }
.jmu-form-submit {
  padding: 13px 0; border: 1px solid var(--jmu-gold-deep); border-radius: 3px; background: var(--jmu-grad-gold);
  color: var(--jmu-ink); font: 700 14px/1 var(--jmu-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.jmu-form-submit:hover { filter: brightness(1.06); }
.jmu-form-links { display: flex; align-items: center; justify-content: space-between; font: 400 13px var(--jmu-sans); color: var(--jmu-text-muted); }

/* registro: variação mais larga + caixas de aviso */
.jmu-reg-panel { max-width: 620px; margin: 0 auto; }
.jmu-reg-body { padding: 22px 26px 30px; }
.jmu-reg-notes { display: flex; flex-direction: column; gap: 10px; }
.jmu-reg-note { padding: 11px 14px; border: 1px solid; border-left-width: 3px; border-radius: 3px; font: 400 13.5px var(--jmu-sans); }
.jmu-reg-note.ok  { border-color: #3f5c22; border-left-color: #6fa32f; background: rgba(90,140,40,.1);  color: #c3d4ae; }
.jmu-reg-note.mail{ border-color: #24486b; border-left-color: #3f86c4; background: rgba(40,100,160,.1); color: #aec4d6; }
.jmu-reg-note.warn{ border-color: #6b5220; border-left-color: #d19a2c; background: rgba(180,130,40,.1); color: #d6c8ae; }
.jmu-reg-form { margin: 22px auto 0; max-width: 430px; display: flex; flex-direction: column; gap: 15px; }

/* ============================================================
   SERVIDOR / INFORMAÇÕES (views/server/info.phtml) — igual ao offline
   ============================================================ */
.jmu-si-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--jmu-line-soft); }
.jmu-si-tab {
  position: relative; padding: 0; border: 0; cursor: pointer; height: 200px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, var(--jmu-panel-2), var(--jmu-panel));
}
.jmu-si-tab.active { background: linear-gradient(180deg, #241c14, #171208); }
.jmu-si-tab > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.jmu-si-tab.active > img { opacity: 1; }
.jmu-si-tab-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,9,.12) 0%, rgba(15,12,9,.55) 55%, rgba(15,12,9,.92) 100%); }
.jmu-si-tab-label {
  position: relative; padding: 10px; border-bottom: 2px solid transparent;
  font: 700 11.5px var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase;
  color: #a99e91; text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
.jmu-si-tab.active .jmu-si-tab-label { color: var(--jmu-gold); border-bottom-color: var(--jmu-gold); }

.jmu-si-body { padding: 24px; }
.jmu-si-section { margin-bottom: 28px; }
.jmu-si-section:last-child { margin-bottom: 0; }
.jmu-si-section-title {
  padding-bottom: 8px; border-bottom: 1px solid #33281c;
  font: 700 13px var(--jmu-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--jmu-text-bright);
}
.jmu-si-table-wrap { margin-top: 12px; border: 1px solid var(--jmu-line-soft); border-radius: 3px; overflow-x: auto; }
.jmu-si-thead { display: grid; gap: 10px; padding: 12px 14px; background: #1d1710; border-bottom: 1px solid var(--jmu-line-3, #2e241a); }
.jmu-si-thead > div { display: flex; align-items: center; gap: 6px; }
.jmu-si-thead > div.is-first { justify-content: flex-start; }
.jmu-si-thead > div.is-center { justify-content: center; }
.jmu-si-thead span { font: 600 12px var(--jmu-sans); letter-spacing: .1em; text-transform: uppercase; color: #b7ab9c; line-height: 1.35; text-align: center; }
.jmu-si-star { color: var(--jmu-gold); font-size: 11px; }
.jmu-si-row { display: grid; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #221b13; background: #171209; }
.jmu-si-row.alt { background: #130f0b; }
.jmu-si-row:last-child { border-bottom: 0; }
.jmu-si-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jmu-si-lbl { font: 400 13.5px var(--jmu-sans); color: #a99e91; }
.jmu-si-val { font: 500 13.5px var(--jmu-sans); color: #d3cabd; }
.jmu-si-val.bold { font-weight: 700; }
.jmu-si-tag { flex: none; padding: 1px 5px; border-radius: 2px; background: #a12b1e; color: #fff; font: 700 8.5px var(--jmu-sans); letter-spacing: .08em; }
.jmu-si-note {
  margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid #6b5220; border-radius: 3px; background: rgba(180,130,40,.1);
  font: 400 13px var(--jmu-sans); color: #d6c8ae;
}
.jmu-si-note > span {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--jmu-gold); color: var(--jmu-gold); font: 700 11px var(--jmu-sans);
}

/* ============================================================
   TOOLTIP DE ITEM (Tippy / .item-info)
   Só a moldura e a tipografia entram no estilo do tema (painel
   escuro quente + borda dourada + Cinzel no título). As cores de
   raridade do nome e das opções continuam vindo do jogo
   (morpheus.css) — não são tocadas aqui.
   ============================================================ */
.tippy-popper .tippy-tooltip,
.tippy-tooltip,
.tippy-tooltip.dark-theme,
.tippy-box {
  background: linear-gradient(180deg, #1c1712, #100c09) !important;
  border: 1px solid var(--jmu-gold-deep) !important;
  border-radius: 3px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .62), 0 0 0 1px rgba(0, 0, 0, .5),
              inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  color: #cfc6ba !important;
  padding: 0 !important;
  white-space: normal !important;
  max-width: 320px !important;
}
.tippy-tooltip .tippy-content,
.tippy-box .tippy-content,
.tippy-content { padding: 14px 16px !important; background: transparent !important; }

/* seta some — a moldura já basta, igual aos cards do tema */
.tippy-arrow, .tippy-roundarrow, .tippy-svg-arrow, .tippy-tooltip .arrow-regular { display: none !important; }

.item-info { min-width: 190px; text-align: left; font-family: var(--jmu-sans); }
.item-info .name {
  margin: 0 0 10px !important; padding-bottom: 9px !important;
  border-bottom: 1px solid var(--jmu-line) !important;
  font: 700 13.5px/1.25 var(--jmu-serif) !important;
  letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 0, 0, .5);
}
.item-info .serial,
.item-info .durability {
  color: var(--jmu-text-muted) !important;
  font: 400 11px/1.5 var(--jmu-sans) !important;
  letter-spacing: .02em;
}
.item-info .durability {
  margin-top: 8px !important; padding-top: 8px !important;
  border-top: 1px solid var(--jmu-line-dim) !important;
}
.item-info .option, .item-info .luck, .item-info .ancient, .item-info .excellent,
.item-info .excellent-socket, .item-info .basic-options, .item-info .pentagram,
.item-info .socket, .item-info .mastery, .item-info .harmonies, .item-info .can-equip,
.item-info .description, .item-info .refine, .item-info .add, .item-info .set {
  margin-top: 4px !important;
  font: 500 12px/1.45 var(--jmu-sans) !important;
  letter-spacing: .01em;
}
.item-info .can-equip { color: #cfc6ba; }

/* ============================================================
   SWEETALERT2 — pop-ups de confirmação no estilo do tema novo.
   Carrega depois do mux.css, então re-skina os .swal2-* dele com a
   paleta quente do JustMU. !important porque o SweetAlert2 injeta o
   próprio <style> em runtime e o Dialog do core passa
   confirmButtonColor/cancelButtonColor inline.
   ============================================================ */
.swal2-container { background: rgba(8, 6, 5, .72) !important; }
.swal2-popup {
  background: linear-gradient(180deg, #191410, #120e0b) !important;
  border: 1px solid #4a3a26 !important;
  border-radius: 4px !important;
  color: var(--jmu-text) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .5) !important;
  font-family: var(--jmu-sans) !important;
}
.swal2-title {
  font: 700 1.5rem/1.15 var(--jmu-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--jmu-gold) !important;
  text-shadow: 0 0 16px rgba(240, 194, 74, .3) !important;
}
.swal2-html-container,
.swal2-content { color: var(--jmu-text-soft) !important; font-size: .95rem !important; }

.swal2-icon { border-color: var(--jmu-gold-deep) !important; }
.swal2-icon .swal2-icon-content { color: var(--jmu-gold) !important; }
.swal2-icon.swal2-warning,
.swal2-icon.swal2-question,
.swal2-icon.swal2-info { border-color: rgba(240, 194, 74, .55) !important; color: var(--jmu-gold) !important; }
.swal2-icon.swal2-warning .swal2-icon-content,
.swal2-icon.swal2-question .swal2-icon-content,
.swal2-icon.swal2-info .swal2-icon-content { color: var(--jmu-gold) !important; }
.swal2-icon.swal2-success { border-color: rgba(140, 210, 60, .5) !important; color: var(--jmu-green) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--jmu-green) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(140, 210, 60, .4) !important; }
.swal2-icon.swal2-error { border-color: rgba(208, 86, 60, .5) !important; color: var(--jmu-red) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--jmu-red) !important; }

.swal2-actions { gap: 10px !important; }
.swal2-styled { border-radius: 3px !important; box-shadow: none !important; outline: none !important; }
.swal2-styled:focus { box-shadow: none !important; }
.swal2-styled.swal2-confirm {
  background: var(--jmu-grad-gold) !important;
  border: 1px solid var(--jmu-gold-deep) !important;
  color: var(--jmu-ink) !important;
  font: 700 12px var(--jmu-sans) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 11px 30px !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  background: #1a1410 !important;
  border: 1px solid var(--jmu-line) !important;
  color: var(--jmu-text-soft) !important;
  font: 700 12px var(--jmu-sans) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 11px 26px !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover { border-color: var(--jmu-gold-deep) !important; color: var(--jmu-gold) !important; }

.swal2-close { color: var(--jmu-text-muted) !important; box-shadow: none !important; }
.swal2-close:hover { color: var(--jmu-gold) !important; }
.swal2-input,
.swal2-textarea,
.swal2-select {
  background: #0e0b09 !important;
  border: 1px solid #35291d !important;
  border-radius: 3px !important;
  color: #d6cdc0 !important;
  box-shadow: none !important;
}
.swal2-input:focus,
.swal2-textarea:focus { border-color: var(--jmu-gold-deep) !important; }
.swal2-loader { border-color: var(--jmu-gold) transparent var(--jmu-gold) transparent !important; }
.swal2-timer-progress-bar { background: var(--jmu-grad-gold) !important; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
  .jmu-grid { grid-template-columns: 1fr; }
  .jmu-nav::before, .jmu-nav::after { display: none; }
  .jmu-rocks { display: none; }
  .jmu-footer-main { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .jmu-nav-list { gap: 0; padding: 0 8px; overflow-x: auto; justify-content: flex-start; }
  .jmu-nav-list a { padding: 0 14px; font-size: 12px; }
  .jmu-logoband { height: 210px; }
  .jmu-logo { width: min(440px, 82vw); top: 28px; }
  .jmu-slide-title { font-size: 32px; }
  .jmu-slide-art { display: none; }
  .jmu-topbar-inner { padding: 8px 16px; }
}