/* MU GAME Classic: página da inauguração (data, hora, contagem, o servidor, a dinâmica dos itens e tudo o que tem no site).
   Mesmo visual do site e do Market: pedra escura, vermelho de brasa, ouro e as janelas do cliente do jogo. 1000 px. */
.ig { --ig-ouro: #f2c14e; --ig-ouro-r: 242, 193, 78; --ig-brasa: 255, 90, 50;
  width: min(1000px, calc(100% - 32px)); margin: 0 auto; padding: 8px 0 48px; display: grid; gap: 22px; color: var(--tx-2); }
.ig *, .ig *::before, .ig *::after { box-sizing: border-box; }
.ig [hidden] { display: none !important; }
.ig h1, .ig h2, .ig h3 { margin: 0; font-family: var(--f-display); color: var(--tx-1); }
.ig p { margin: 0; }

/* o 3D: foto pronta atrás, o modelo por cima quando chega */
.ig-3d { position: relative; background-repeat: no-repeat; background-position: 50% 82%; background-size: auto 86%; }
.ig-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ig-chao { position: absolute; left: 50%; bottom: 8%; width: 62%; height: 12%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--ig-ouro-r), .45); box-shadow: 0 0 0 5px rgba(var(--ig-ouro-r), .05), 0 0 0 6px rgba(var(--ig-ouro-r), .18), 0 0 30px rgba(var(--ig-brasa), .4); }

/* ---------------- abertura */
.ig-abre { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 440px; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(var(--ig-ouro-r), .28);
  background: radial-gradient(55% 80% at 78% 70%, rgba(var(--ig-brasa), .32), transparent 70%), radial-gradient(40% 50% at 78% 100%, rgba(224, 37, 44, .4), transparent 70%),
    linear-gradient(180deg, #1c1110, #0b0607 85%); box-shadow: 0 24px 50px -30px #000; }
.ig-abre::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(../mercado/ui/message_box1.png) 0 0 / 260px auto; opacity: .06; mix-blend-mode: screen; }
.ig-abre-txt { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px 10px 32px 34px; }
.ig-abre .crumbs { margin: 0; }
.ig-pre { font: 700 15px var(--f-display); letter-spacing: .08em; color: var(--ig-ouro); text-shadow: 0 1px 0 #000; }
.ig-abre h1 { font-size: 50px; line-height: 1.02; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff 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 16px rgba(var(--ig-brasa), .45)); }
.ig-data { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 16px; }
.ig-data b { font: 700 22px var(--f-display); color: #ffe08a; text-shadow: 0 1px 0 #000; }
.ig-data span { color: var(--tx-2); }
/* a contagem: quatro janelas do jogo */
.ig-conta { display: grid; grid-template-columns: repeat(4, minmax(0, 92px)); gap: 10px; }
.ig-conta div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 10px solid transparent;
  border-image: url(../mercado/ui/item_back01.png) 34 22 24 22 fill / 18px 12px 14px 12px; background-clip: padding-box; }
.ig-conta b { font: 700 38px/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000, 0 0 14px rgba(var(--ig-brasa), .6); }
.ig-conta span { font: 600 12px var(--f-body); color: var(--tx-3); }
.ig-aberto { font: 700 20px var(--f-display); color: #4ce67a; }
.ig-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ig-bt { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: 3px; text-decoration: none;
  font: 700 14.5px var(--f-body); color: #eee4d8; background: url(../mercado/ui/win_button.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000; text-shadow: 0 1px 0 #000; transition: filter .15s; }
.ig-bt:hover { filter: brightness(1.18); color: #fff; }
.ig-bt.ouro { color: #1d1204; text-shadow: none; background: linear-gradient(180deg, #ffe6ad, #c99640); box-shadow: 0 0 0 1px #000, 0 0 22px -6px rgba(var(--ig-ouro-r), .9); }
.ig-bt.zap { background: linear-gradient(180deg, #2fc76d, #1a8a48); color: #fff; }
.ig-abre-3d { min-height: 380px; background-size: auto 72%; }

/* ---------------- seções */
.ig-sec { display: grid; gap: 16px; padding: 24px 26px 26px; border: 10px solid transparent; border-radius: 0;
  border-image: url(../mercado/ui/item_back01.png) 34 22 24 22 / 22px 14px 16px 14px; background-clip: padding-box;
  background-color: #0e0808; background-image: radial-gradient(70% 60% at 0% 0%, rgba(var(--ig-brasa), .08), transparent 70%), url(../mercado/ui/message_box1.png);
  background-size: auto, 260px auto; background-blend-mode: normal, soft-light; }
.ig-h { display: grid; gap: 6px; }
.ig-h h2 { font-size: 26px; letter-spacing: .03em; color: #ffe08a; text-shadow: 0 1px 0 #000, 0 0 12px rgba(var(--ig-ouro-r), .25); }
.ig-h p { max-width: 70ch; font-size: 15px; color: var(--tx-2); text-shadow: 0 1px 0 #000; }
.ig-sec b { color: #fff; }

.ig-srv { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ig-srv-txt { display: grid; gap: 10px; font-size: 15px; line-height: 1.65; text-shadow: 0 1px 0 #000; }
.ig-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ig-ficha div { padding: 9px 12px; border-radius: 3px; background: url(../mercado/ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000; }
.ig-ficha dt { font: 600 12px var(--f-body); color: var(--tx-3); }
.ig-ficha dd { margin: 2px 0 0; font: 700 15px var(--f-body); color: #fff; }
.ig-classes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ig-classes li { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; text-align: center; border-radius: 3px;
  background: url(../mercado/ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000; }
.ig-classes img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(var(--ig-ouro-r), .5), 0 6px 14px -6px #000; }
.ig-classes b { font: 700 14px var(--f-display); }
.ig-classes span { font-size: 12.5px; line-height: 1.4; color: var(--tx-2); }

/* joias: os passos do item full */
.ig-joias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.ig-joias li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 10px 14px; text-align: center; border-radius: 3px;
  background: url(../mercado/ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000; counter-increment: passo; }
.ig-joias li::before { content: counter(passo); position: absolute; left: 10px; top: 8px; font: 700 16px var(--f-display); color: rgba(var(--ig-ouro-r), .7); }
.ig-joias li + li::after { content: ""; position: absolute; left: -9px; top: 58px; width: 8px; height: 8px; border-top: 2px solid var(--ig-ouro); border-right: 2px solid var(--ig-ouro); transform: rotate(45deg); }
.ig-j3d { width: 100%; height: 120px; background-size: auto 56%; background-position: 50% 50%; }
.ig-j3d.ig-foto { display: grid; place-items: center; }
.ig-j3d.ig-foto img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(120, 200, 255, .55)); animation: igFlutua 3.2s ease-in-out infinite; }
@keyframes igFlutua { 50% { transform: translateY(-6px); } }
.ig-joias b { font: 700 15px var(--f-display); }
.ig-joias span { font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.ig-nota { padding: 12px 16px; border-radius: 3px; background: url(../mercado/ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .3);
  font-size: 14.5px; color: #e9e0d6; text-shadow: 0 1px 0 #000; }

/* black e white */
.ig-bw { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 20px; }
.ig-bw-3d { height: 300px; background-size: auto 70%; background-position: 50% 50%; }
.ig-bw-txt { display: grid; gap: 14px; font-size: 15px; line-height: 1.6; text-shadow: 0 1px 0 #000; }
.ig-bw-troca { display: flex; gap: 8px; }
.ig-bw-troca button { height: 38px; padding: 0 18px; border: 0; border-radius: 3px; cursor: pointer; background: url(../mercado/ui/text_button.png) 0 0 / 100% 100%;
  font: 700 14px var(--f-display); letter-spacing: .04em; color: #d8cfc4; text-shadow: 0 1px 0 #000; box-shadow: 0 0 0 1px #000; filter: brightness(.8); }
.ig-bw-troca button[aria-pressed="true"] { filter: none; color: #ffe08a; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--ig-ouro), 0 0 14px -3px rgba(var(--ig-ouro-r), .8); }
.ig-bw-set { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ig-bw-set li { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 9px; text-align: center; background: url(../mercado/ui/inventorybox2.png) 0 0 / 34px 34px;
  box-shadow: 0 0 0 1px #000, inset 0 0 18px rgba(0, 0, 0, .7); }
.ig-bw-set img { width: 52px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .8)); transition: transform .2s; }
.ig-bw-set li:hover img { transform: scale(1.08); }
.ig-bw-set small { font: 600 11.5px/1.25 var(--f-body); color: #e9e0d6; text-shadow: 0 1px 0 #000; }
.ig-bw-set.white small { color: #fff; }
.ig-link { justify-self: start; font-weight: 700; color: var(--ig-ouro); text-decoration: none; border-bottom: 1px solid rgba(var(--ig-ouro-r), .4); }
.ig-link:hover { color: #ffe08a; }

/* novidades: box a box */
.ig-nov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ig-cx { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: stretch; min-height: 190px; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: 4px; background: radial-gradient(70% 90% at 0% 70%, rgba(var(--ig-brasa), .16), transparent 70%), url(../mercado/ui/message_box.png) 0 0 / 100% 100%;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .18); transition: box-shadow .2s, transform .2s; }
.ig-cx:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .6), 0 14px 30px -18px rgba(var(--ig-brasa), .8); }
.ig-cx-3d { min-height: 190px; }
.ig-cx-3d .ig-chao { width: 70%; bottom: 7%; }
.ig-ic { display: grid; place-items: center; }
.ig-ic .i { width: 64px; height: 64px; padding: 16px; border-radius: 50%; color: var(--ig-ouro); background: radial-gradient(circle at 50% 40%, #2b1712, #0c0606 70%);
  box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(var(--ig-ouro-r), .14), 0 0 30px -6px rgba(var(--ig-brasa), .7); stroke-width: 1.6; box-sizing: content-box; }
.ig-cx-t { display: grid; align-content: center; gap: 8px; padding: 16px 18px 16px 4px; text-shadow: 0 1px 0 #000; }
.ig-cx-t h3 { font-size: 19px; color: #ffe08a; }
.ig-cx-t p { font-size: 14px; line-height: 1.55; color: #e2d8cf; }
.ig-ir { justify-self: start; font: 700 13.5px var(--f-body); color: var(--ig-ouro); border-bottom: 1px solid rgba(var(--ig-ouro-r), .35); }
.ig-cx:hover .ig-ir { color: #ffe08a; }

/* fechamento */
.ig-fim { display: grid; justify-items: center; gap: 14px; padding: 34px 20px; text-align: center; border-radius: 12px; border: 1px solid rgba(var(--ig-ouro-r), .28);
  background: radial-gradient(60% 120% at 50% 120%, rgba(var(--ig-brasa), .35), transparent 70%), linear-gradient(180deg, #160c0c, #0b0607); }
.ig-fim h2 { font-size: 34px; background: linear-gradient(180deg, #fff, #c9c9c9 60%, #eaeaea); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(var(--ig-brasa), .45)); }
.ig-fim .ig-data, .ig-fim .ig-acoes { justify-content: center; }

@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .ig-j3d.ig-foto img { animation: none; } .ig-cx { transition: none; } }

/* celular */
@media (max-width: 860px) {
  .ig-abre { grid-template-columns: 1fr; }
  .ig-abre-txt { padding: 24px 18px 6px; }
  .ig-abre-3d { min-height: 300px; }
  .ig-abre h1 { font-size: 38px; }
  .ig-srv, .ig-bw { grid-template-columns: 1fr; }
  .ig-bw-3d { height: 240px; }
  .ig-joias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-joias li:nth-child(3)::after { display: none; }
  .ig-classes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-nov { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ig { width: calc(100% - 20px); }
  .ig-sec { padding: 18px 12px 20px; }
  .ig-conta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ig-conta b { font-size: 28px; }
  .ig-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-bw-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-cx { grid-template-columns: 120px minmax(0, 1fr); }
  .ig-h h2 { font-size: 22px; }
  .ig-acoes .ig-bt { flex: 1 1 100%; }
}

/* chamada para entrar: frase da abertura, selo, os 4 passos e o texto final */
.ig-chama { max-width: 46ch; font-size: 16px; line-height: 1.5; color: #f1e8e4; text-shadow: 0 1px 0 #000; }
.ig-selo { font-size: 13px; color: var(--tx-3); }
.ig-passos { display: grid; gap: 12px; }
.ig-passos-t { font-size: 22px !important; color: #ffe08a !important; letter-spacing: .03em; }
.ig-passos ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: pp; }
.ig-passos li { counter-increment: pp; }
.ig-passos li > a, .ig-passo-fim { position: relative; display: grid; gap: 4px; height: 100%; padding: 16px 14px 14px 52px; border-radius: 4px; text-decoration: none; color: inherit;
  background: url(../mercado/ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .2); text-shadow: 0 1px 0 #000; transition: box-shadow .2s, transform .2s; }
.ig-passos li > a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .6); }
.ig-passos li > a::before, .ig-passo-fim::before { content: counter(pp); position: absolute; left: 12px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 700 15px var(--f-display); color: #1d1204; background: linear-gradient(180deg, #ffe6ad, #c99640); box-shadow: 0 0 0 1px #000; }
.ig-passo-fim { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(var(--ig-ouro-r), .55), 0 0 20px -8px rgba(var(--ig-brasa), .8); }
.ig-passos b { font: 700 15px var(--f-display); color: #ffe08a; }
.ig-passos span span, .ig-passos a span { font-size: 13px; line-height: 1.45; color: #e2d8cf; }
.ig-ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ig-cx-ev { min-height: 220px; }
.ig-cx-ev .ig-cx-3d { min-height: 220px; }
.ig-fim-p { max-width: 52ch; font-size: 16px; line-height: 1.55; color: #f1e8e4; }
@media (max-width: 860px) { .ig-passos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ig-ev { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ig-passos ol { grid-template-columns: 1fr; } }