/* MU GAME Easy: as páginas dos sistemas (Meus itens, Banco de joias, Chaos Machine Elite, Market) no visual do Easy.
   Vem depois do CSS de cada módulo. Troca o vermelho e o marrom do Hard pelo azul noite e o gelo do Easy, com as fontes do Easy.
   As janelas do jogo (grade do inventário, do baú e a máquina) continuam no estilo do cliente do MU, só que em tom frio. */
.gx {
  --ink-0: #050911; --ink-1: #08101c; --ink-2: #0b1422; --ink-3: #101c2e;
  --red: #38c6ff; --red-hi: #7cf0ff; --red-lo: #1d4f7a; --ember: #ff8f57;
  --gold: #f6c75c; --gold-hi: #ffe09a; --ok: #3ee39b;
  --tx-1: #eaf3ff; --tx-2: #aebdd3; --tx-3: #7a8aa5; --tx-4: #56647c;
  --line: rgba(140, 196, 255, .14); --line-soft: rgba(140, 196, 255, .07);
  --panel: linear-gradient(180deg, #0d1828 0%, #0a1220 100%);
  --f-display: "Rajdhani", "Arial Narrow", sans-serif; --f-body: "Sora", "Segoe UI", Arial, sans-serif; --f-cond: "Rajdhani", "Arial Narrow", sans-serif;
  padding: 0; color: var(--tx-2); font: 400 14px/1.6 var(--f-body);
  background: none; border: 0; box-shadow: none;
}
.gx .mq { --mq-bg: #060c16; --mq-pn: #0b1422; --mq-tx: #eaf3ff; --mq-tx2: #aebdd3; --mq-mu: #7a8aa5;
  --mq-f: "Rajdhani", "Arial Narrow", sans-serif; --mq-fb: "Sora", "Segoe UI", Arial, sans-serif; --mq-fc: "Rajdhani", "Arial Narrow", sans-serif; }
.gx .mc { --mc-v: #38c6ff; --mc-vr: 56, 198, 255; --mc-tx: #eaf3ff; --mc-tx2: #aebdd3; --mc-mu: #7a8aa5; --mc-pn: #0b1422;
  --mc-f: "Rajdhani", "Arial Narrow", sans-serif; --mc-fb: "Sora", "Segoe UI", Arial, sans-serif; --mc-fc: "Rajdhani", "Arial Narrow", sans-serif; }
.gx .iv { --iv-v: #38c6ff; --iv-vr: 56, 198, 255; --iv-pn: #0b1422; --iv-tx2: #aebdd3; --iv-mu: #7a8aa5;
  --iv-f: "Rajdhani", "Arial Narrow", sans-serif; --iv-fb: "Sora", "Segoe UI", Arial, sans-serif; --iv-fc: "Rajdhani", "Arial Narrow", sans-serif; }
:where(.gx) * { scrollbar-color: #1d4f7a #08101c; }

/* ---------------------------------------------------------------- topo: NPC e a fala (o título fica no cabeçalho do Easy) */
.gx .tmu { --tmu-or: 124, 240, 255; --tmu-v: 60, 141, 255; color: var(--tx-2); min-height: 200px; border-radius: var(--r, 12px); border-color: rgba(124, 240, 255, .2);
  background: radial-gradient(40% 74% at 11% 72%, rgba(var(--tmu-c), .2), transparent 70%), radial-gradient(38% 60% at 11% 110%, rgba(var(--tmu-v), .22), transparent 70%),
    linear-gradient(180deg, #0f1b2d, #070d18 82%); }
.gx .tmu::after { opacity: .04; }
.gx .tmu-npc { min-height: 200px; }
.gx .tmu-npc-nome { font: 600 13px var(--f-body); color: #eaf3ff; }
.gx .tmu-npc-nome i { font: 500 11px var(--f-body); color: #7cf0ff; }
.gx .tmu-fala h2 { margin: 0; font: 700 26px/1.05 var(--f-display); letter-spacing: .02em; color: #eaf3ff; }
.gx .tmu-orn { margin: 6px 0 10px; }
.gx .tmu-orn .e, .gx .tmu-orn .d { opacity: .6; filter: hue-rotate(170deg) saturate(.7); }
.gx .tmu-balao { background: rgba(8, 16, 28, .86); border: 1px solid rgba(124, 240, 255, .18); border-left: 3px solid #38c6ff; border-radius: 6px; }
.gx .tmu-balao::before { border-right-color: rgba(124, 240, 255, .28); }
.gx .tmu-balao p { font: 400 14px/1.6 var(--f-body); color: #d5e2f3; }
.gx .tmu-balao b { color: #7cf0ff; }

/* ---------------------------------------------------------------- os 5 sistemas */
.gx .sisx-b { background: #08101c; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(140, 196, 255, .12), inset 0 0 0 4px rgba(3, 7, 13, .9); }
.gx .sisx-b::before { background: linear-gradient(0deg, #08101c 10%, rgba(8, 16, 28, .55) 46%, rgba(8, 16, 28, 0) 80%); }
.gx .sisx-tx b { font: 700 15px/1.15 var(--f-display); }
.gx .sisx-b:hover { box-shadow: inset 0 0 0 1px rgba(124, 240, 255, .4), inset 0 0 0 4px rgba(3, 7, 13, .9), 0 14px 26px -18px var(--c); }
.gx .sisx-b.on { box-shadow: inset 0 0 0 1px var(--c), inset 0 0 0 4px rgba(3, 7, 13, .9), 0 0 24px -8px var(--c); }
.gx .sisx-b.per { --c: #f6c75c; } .gx .sisx-b.bau { --c: #ff8f57; } .gx .sisx-b.ban { --c: #a594ff; } .gx .sisx-b.cha { --c: #7cf0ff; } .gx .sisx-b.mkt { --c: #43e8b8; }

/* ---------------------------------------------------------------- sistema ainda não liberado: tudo aparece, os botões de ação ficam travados */
.gx-travado .js-dep, .gx-travado .js-saq, .gx-travado .js-all, .gx-travado .js-combinar,
.gx-travado .js-mc-comprar, .gx-travado .js-mc-vender, .gx-travado .js-mc-tirar, .gx-travado .js-mc-baixar, .gx-travado .js-mc-receber { opacity: .5; cursor: not-allowed; filter: saturate(.4); }
.gx-trava-aviso { position: fixed; z-index: 9999; left: 50%; bottom: 26px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 10px; border: 1px solid rgba(246, 199, 92, .45); background: #0b1422; color: #eaf3ff;
  font: 600 14px/1.3 "Sora", "Segoe UI", Arial, sans-serif; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8); transition: opacity .18s, transform .18s; }
.gx-trava-aviso.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- avisos que ficam fora da página */
.bk-toast { background: #0b1422; border-left-color: #3ee39b; }
.bk-alerta { border-radius: 10px; }
.gx.gx-nav { padding: 18px 18px 0; }
.gx.gx-nav .sisx { margin-bottom: 0; }

/* ---------------------------------------------------------------- Market: a praça no mesmo tom do topo dos outros sistemas */
.gx .mc-praca { border-color: rgba(124, 240, 255, .2); border-radius: 12px;
  background: radial-gradient(42% 70% at 15% 70%, rgba(255, 170, 70, .16), transparent 70%), radial-gradient(40% 60% at 15% 108%, rgba(60, 141, 255, .24), transparent 70%),
    linear-gradient(180deg, #0f1b2d, #070d18 80%); }
.gx .mc-praca::after { opacity: .04; }
.gx .mc-balao { background: rgba(8, 16, 28, .86); border: 1px solid rgba(124, 240, 255, .18); border-left: 3px solid #38c6ff; border-radius: 6px; }
.gx .mc-balao::before { border-right-color: rgba(124, 240, 255, .28); }
.gx .mc-balao p { font: 400 14px/1.6 var(--f-body); color: #d5e2f3; }
.gx .mc-balao b { color: #7cf0ff; }