/* MU GAME Classic: topo das páginas dos sistemas (Meus itens, Baú virtual, Banco de joias, Chaos Machine Elite).
   O mesmo desenho da praça do Market: o NPC do sistema em 3D (modelo do próprio cliente do jogo), o título prateado
   com os ornamentos dos nomes de mapa do jogo e a explicação na caixa de mensagem do jogo, como se o NPC falasse. */
.tmu { --tmu-o: #f2c14e; --tmu-or: 242, 193, 78; --tmu-c: 255, 140, 50; --tmu-v: 255, 74, 61;
  position: relative; isolation: isolate; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: stretch; min-height: 232px; margin: 0 0 12px;
  overflow: hidden; border-radius: 10px; border: 1px solid rgba(var(--tmu-or), .28); color: #f1e8e4;
  background: radial-gradient(40% 74% at 11% 72%, rgba(var(--tmu-c), .24), transparent 70%), radial-gradient(38% 60% at 11% 110%, rgba(var(--tmu-v), .26), transparent 70%),
    linear-gradient(180deg, #1c1110, #0d0708 82%);
  box-shadow: 0 20px 40px -26px #000; }
.tmu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(message_box1.png) 0 0 / 260px auto; opacity: .07; mix-blend-mode: screen; }
.tmu *, .tmu *::before, .tmu *::after { box-sizing: border-box; }
.tmu.cor-itens { --tmu-c: 255, 150, 60; }
.tmu.cor-bau { --tmu-c: 230, 150, 70; }
.tmu.cor-banco { --tmu-c: 130, 120, 255; --tmu-v: 110, 80, 255; }
.tmu.cor-chaos { --tmu-c: 170, 90, 255; --tmu-v: 255, 120, 40; }

/* nas páginas em grade (baú virtual, banco) o espaço entre os blocos já vem da grade */
.bv > .tmu, .bk > .tmu { margin-bottom: -6px; }
.bv > .sisx, .bk > .sisx { margin-bottom: 0; }

/* o NPC no pedestal */
.tmu-npc { position: relative; min-height: 232px; background-position: 50% 78%; background-size: auto 84%; background-repeat: no-repeat; }
.tmu-npc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tmu-npc::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 168px; height: 32px; margin-left: -84px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--tmu-or), .45); box-shadow: 0 0 0 6px rgba(var(--tmu-or), .05), 0 0 0 7px rgba(var(--tmu-or), .2), 0 0 26px rgba(var(--tmu-c), .45); }
.tmu-npc-nome { position: absolute; z-index: 2; left: 0; right: 0; top: 10px; margin: 0; text-align: center; font: 700 13px "Barlow", Arial, sans-serif; color: #ffe9a8; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.tmu-npc-nome i { display: block; font: 600 11px "Barlow", Arial, sans-serif; font-style: normal; color: #9ad0ff; }

/* título, ornamento e a fala */
.tmu-fala { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 22px 20px 2px; }
.tmu .crumbs { margin: 0 0 6px; }
.tmu h1 { margin: 0; font: 800 36px/1.05 "Cinzel", Georgia, serif; letter-spacing: .03em;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 38%, #9b9b9b 60%, #e2e2e2 82%, #bdbdbd 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(var(--tmu-c), .45)); }
.tmu-orn { display: flex; align-items: center; gap: 6px; height: 26px; margin: 4px 0 8px; }
.tmu-orn .e, .tmu-orn .d { height: 21px; width: auto; opacity: .85; }
.tmu-orn .m { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--tmu-c), .7)) drop-shadow(0 1px 1px #000); }
.tmu-balao { position: relative; max-width: 760px; padding: 12px 16px 11px; border-radius: 3px; background: url(message_box.png) 0 0 / 100% 100%; box-shadow: 0 12px 24px -16px #000; }
.tmu-balao::before { content: ""; position: absolute; left: -8px; top: 18px; border: 8px solid transparent; border-left: 0; border-right-color: #2b2622; }
.tmu-balao p { margin: 0; font: 500 15px/1.5 "Barlow", Arial, sans-serif; color: #f3ece3; text-shadow: 0 1px 0 #000; }
.tmu-balao b { color: #ffe08a; }

/* lado direito: a situação da conta (preenchida pela página) */
.tmu-lado { position: relative; z-index: 1; display: flex; align-items: center; padding: 18px 18px 18px 0; }
.tmu-lado:empty, .tmu-lado > [hidden]:only-child { display: none; }
.tmu-lado > * { margin: 0 !important; }

@media (max-width: 900px) {
  .tmu { grid-template-columns: 180px minmax(0, 1fr); }
  .tmu-lado { grid-column: 1 / -1; padding: 0 16px 16px; }
  .tmu h1 { font-size: 30px; }
}
@media (max-width: 620px) {
  .tmu { grid-template-columns: 1fr; }
  .tmu-npc { min-height: 190px; }
  .tmu-fala { padding: 0 16px 18px; }
  .tmu-balao::before { display: none; }
  .tmu h1 { font-size: 27px; }
}

/* 25/10: as páginas dos sistemas com a mesma largura do Market (1000 px) */
.bv, .bk, .mq, .iv { width: min(1000px, calc(100% - 32px)) !important; margin-left: auto !important; margin-right: auto !important; max-width: none !important; }