/* MU GAME Hard: base das páginas no visual do cliente do MU (Meus itens, Banco de joias, Chaos Machine Elite, Market).
   As cores e as fontes valem só dentro de .gx: o resto da página continua com o visual do Hard. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }


.body.gx-body { display: block; }
.gx {
  --ink-0: #080405; --ink-1: #0d0708; --ink-2: #130a0b; --ink-3: #1a0e0f;
  --red: #e0252c; --red-hi: #ff4a3d; --red-lo: #8e1016; --ember: #ff7a45;
  --gold: #e3b45e; --gold-hi: #f6d391; --silver: #cdd1d8; --bronze: #cf8c5c; --ok: #3fd98a;
  --tx-1: #f3e9e6; --tx-2: #c4b2ad; --tx-3: #8f7d78; --tx-4: #65554f;
  --line: rgba(255, 110, 95, .13); --line-soft: rgba(255, 255, 255, .055);
  --panel: linear-gradient(180deg, #150b0c 0%, #100809 100%);
  --f-display: "Cinzel", Georgia, serif; --f-body: "Barlow", Tahoma, Arial, sans-serif; --f-cond: "Barlow", "Arial Narrow", Arial, sans-serif;
  --r: 8px; --ease: cubic-bezier(.2, .7, .2, 1);
  position: relative; display: block; margin: 0; padding: 18px 18px 22px; color: var(--tx-2); font: 400 15px/1.5 var(--f-body); letter-spacing: 0;
  background: radial-gradient(1200px 400px at 50% -80px, rgba(140, 20, 24, .35), transparent 70%), linear-gradient(180deg, #120909, #0a0607 60%, #080405);
  border: 1px solid #22161a; box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .8);
}
:where(.gx) a { color: inherit; text-decoration: none; }
:where(.gx) button { font: inherit; color: inherit; }
:where(.gx) strong, :where(.gx) b { color: var(--tx-1); font-weight: 600; }
:where(.gx) .i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
:where(.gx) .i-sm { width: 13px; height: 13px; }
:where(.gx) .i-lg { width: 20px; height: 20px; }
:where(.gx) .num { font-variant-numeric: tabular-nums; }
:where(.gx) .crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx-4); }
:where(.gx) .crumbs a:hover { color: var(--tx-1); }
:where(.gx) :focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
:where(.gx) * { scrollbar-width: thin; scrollbar-color: var(--red-lo) var(--ink-1); }
:where(.gx) h1, :where(.gx) h2, :where(.gx) h3 { letter-spacing: normal; text-transform: none; }

/* os 5 sistemas no topo (do classic.css) */
/* sisx: sistemas interligados (sistemas.py) */
.sisx { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.sisx-b { --c: var(--gold); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 108px; padding: 10px 11px 12px;
  border-radius: 4px; text-decoration: none; color: var(--tx-1); background: #0d0708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 4px rgba(6, 3, 3, .9); transition: transform .2s, box-shadow .2s; }
.sisx-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0d0708 10%, rgba(13, 7, 8, .55) 46%, rgba(13, 7, 8, 0) 80%); }
.sisx-art { position: absolute; inset: 0 0 0 26%; z-index: -2; pointer-events: none; opacity: .8; transition: opacity .25s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%); }
.sisx-art img { position: absolute; top: -6%; right: -4%; height: 116%; width: auto; max-width: none; object-fit: contain; filter: saturate(1.05) brightness(1.1); }
.sisx-b.ban .sisx-art img { top: 8%; right: 6%; height: 50%; }
.sisx-b.ban .sisx-art img.a1 { right: 30%; top: 26%; height: 46%; }
.sisx-b.ban .sisx-art img.a2 { right: 48%; top: 6%; height: 42%; opacity: .8; }
.sisx-b.bau .sisx-art img { top: 4%; right: -6%; height: 84%; }
.sisx-b.cha .sisx-art img { top: -2%; right: -6%; height: 112%; }
.sisx-b.mkt .sisx-art img { top: 2%; right: -10%; height: 100%; }
.sisx-em { flex: none; width: 28px; height: 28px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px transparent); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 35%, transparent)); transition: transform .25s; }
.sisx-em svg { display: block; width: 100%; height: 100%; }
.sisx-tx b { display: block; font: 700 14.5px/1.15 var(--f-display); letter-spacing: .02em; color: var(--c); color: color-mix(in srgb, var(--c) 70%, #fff); text-shadow: 0 1px 0 #000, 0 0 8px #000; }
.sisx-tx small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--tx-3); text-shadow: 0 1px 2px #000; }
.sisx-b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); }
.sisx-b:hover .sisx-art { opacity: 1; }
.sisx-b:hover .sisx-em { transform: scale(1.06); }
.sisx-b.on { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 24px -8px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 24px -8px var(--c); }
.sisx-b.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--c), transparent); }
.sisx-b.on .sisx-art { opacity: 1; }
.sisx-b:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sisx-b.per { --c: #e3b45e; } .sisx-b.bau { --c: #d98a3a; } .sisx-b.ban { --c: #8f8cff; } .sisx-b.cha { --c: #f2b03a; } .sisx-b.mkt { --c: #5fd08a; }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .sisx-b, .sisx-em, .sisx-art { transition: none; } .sisx-b:hover { transform: none; } }
@media (max-width: 760px) {
  .rsp .sisx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsp .sisx-tx small { display: none; }
}
/* fim sisx */