/* MU GAME Easy, página inicial: a vitrine do Market e a caixa da Chaos Machine Elite */

/* ---------------------------------------------------------------- Market */
.mkh .js-mkh-n { margin-left: 4px; font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.mkh .js-mkh-n b { color: var(--tx); font-weight: 600; }
.mkh-palco { position: relative; padding: 14px 46px 6px; }
.mkh-trilho { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 0 10px; }
.mkh-trilho::-webkit-scrollbar { display: none; }
.mkh-it { position: relative; flex: 0 0 132px; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 6px 6px 10px; scroll-snap-align: start; color: inherit; text-decoration: none;
  border-radius: 10px; background: #08101c; border: 1px solid var(--line); transition: border-color .15s, transform .15s, box-shadow .15s; }
a.mkh-it:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: 0 14px 24px -16px rgba(56, 198, 255, .7); }
a.mkh-it:focus-visible, .mkh-seta:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.mkh-slot { position: relative; display: grid; place-items: center; width: 100%; height: 104px; border-radius: 7px;
  background: radial-gradient(60% 60% at 50% 46%, #1b2b45, #0a1322 76%); box-shadow: inset 0 0 0 1px rgba(140, 196, 255, .08), inset 0 -18px 30px -18px rgba(0, 0, 0, .6); }
.mkh-it.exc .mkh-slot { background: radial-gradient(60% 60% at 50% 46%, #17402f, #0a1a16 76%); }
.mkh-it.alto .mkh-slot { background: radial-gradient(60% 60% at 50% 46%, #47381a, #1a1409 76%); }
.mkh-slot img { max-width: 92px; max-height: 86px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.mkh-it.exc .mkh-slot img { filter: drop-shadow(0 0 7px rgba(62, 227, 155, .5)) drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.mkh-lv { position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 4px; font: 700 13px/1.4 var(--f-display); color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .22); }
.mkh-promo { position: absolute; left: 4px; top: 4px; padding: 0 5px; border-radius: 4px; font: 700 11px/1.5 var(--f-body); color: #04121f; background: var(--gold); }
.mkh-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 32px; padding: 0 2px; text-align: center; font: 600 12px/1.3 var(--f-body); color: var(--tx); }
.mkh-it.exc .mkh-nome { color: #3ee39b; }
.mkh-it.alto .mkh-nome { color: var(--gold); }
.mkh-preco { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: 6px; font: 700 15px/1.3 var(--f-display); color: var(--tx); background: rgba(140, 196, 255, .06); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mkh-preco img { width: 18px; height: 18px; object-fit: contain; }
.mkh-preco small { font: 500 11px var(--f-body); color: var(--tx-3); }
.mkh-preco s { font: 500 11px var(--f-body); color: var(--tx-3); }
.mkh-gc { display: none; }
.mkh-vend { font-size: 10.5px; color: var(--tx-3); }
.mkh-mais { justify-content: center; align-content: center; gap: 8px; padding: 14px 10px; text-align: center; border-style: dashed; border-color: var(--line-2); }
.mkh-mais .i { width: 28px; height: 28px; color: var(--ice); }
.mkh-mais b { font: 700 16px/1.15 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--tx); }
.mkh-mais small { font-size: 11.5px; color: var(--tx-3); }
.mkh-ph { height: 188px; background: #08101c; opacity: .6; }
.mkh-seta { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 56px; margin-top: -30px; padding: 0; cursor: pointer; color: var(--tx);
  border-radius: 8px; background: #0b1422; border: 1px solid var(--line-2); transition: opacity .2s, border-color .2s, color .2s, background .2s; }
.mkh-seta:hover:not(:disabled) { color: #04121f; background: var(--ice-2); border-color: var(--ice-2); }
.mkh-seta:disabled { opacity: .3; cursor: default; }
.mkh-seta[hidden] { display: none; }
.mkh-seta.ant { left: 8px; } .mkh-seta.ant .i { transform: scaleX(-1); }
.mkh-seta.prox { right: 8px; }
.mkh-vazio { flex: 1; margin: 0; padding: 30px 16px; text-align: center; font-size: 13.5px; color: var(--tx-2); }
.mkh-vazio a { color: var(--ice); font-weight: 600; }
@media (max-width: 620px) { .mkh-palco { padding: 12px 10px 4px; } .mkh-seta { display: none; } }

/* ---------------------------------------------------------------- Chaos Machine Elite no menu do lado: o goblin em cima, a chamada embaixo */
.cxh-card { overflow: hidden; }
.cxh { display: block; color: inherit; text-decoration: none; }
.cxh-box { position: relative; height: 210px; margin-top: 12px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 55% at 50% 62%, rgba(165, 148, 255, .34), transparent 72%), radial-gradient(60% 30% at 50% 96%, rgba(124, 240, 255, .22), transparent 70%), linear-gradient(180deg, #120f26, #080b18); }
.cxh-box::after { content: ""; position: absolute; left: 50%; bottom: 16px; width: 150px; height: 30px; margin-left: -75px; border-radius: 50%;
  border: 2px solid rgba(165, 148, 255, .5); box-shadow: 0 0 22px rgba(165, 148, 255, .45), inset 0 0 14px rgba(165, 148, 255, .35); }
.cxh-foto, .cxh-cv { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.cxh-foto { object-fit: contain; object-position: 50% 100%; padding: 12px 22px 30px; transition: opacity .3s; }
.cxh-cv { opacity: 0; transition: opacity .3s; }
.cxh-box.vivo .cxh-cv { opacity: 1; }
.cxh-box.vivo .cxh-foto { opacity: 0; }
.cxh-tx { display: grid; gap: 10px; padding: 12px 16px 16px; }
.cxh-tx p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tx-2); }
.cxh-niveis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cxh-niveis li { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(140, 196, 255, .05); font-size: 11.5px; line-height: 1.35; color: var(--tx-3); }
.cxh-niveis b { display: block; font: 700 19px/1.1 var(--f-display); color: var(--gold); }
a.cxh:hover .cxh-box { background-color: #0d0f24; }
a.cxh:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }