/* MU GAME Classic, página /info: Info do servidor, Eventos com os modelos do jogo em 3D e Drops das boxes nos baús do jogo.
   As janelas usam as imagens do próprio cliente (Data/Interface). Funciona do celular ao monitor grande. */
.pi { --pi-v: #ff4a3d; --pi-vr: 255, 74, 61; --pi-ouro: #f2c14e; --pi-ouro-r: 242, 193, 78; --pi-ex: #6cf28c; --pi-pn: #140c0d; --pi-tx: #f6f0ef; --pi-tx2: #c9b9b4; --pi-mu: #94827d;
  --pi-f: "Cinzel", Georgia, serif; --pi-fb: "Barlow", Arial, sans-serif; --pi-fc: "Barlow Condensed", "Barlow", Arial, sans-serif;
  width: 100%; max-width: 980px; margin: 0 auto; padding: 22px 0 0; color: var(--pi-tx); font-family: var(--pi-fb); }
.pi *, .pi *::before, .pi *::after { box-sizing: border-box; }
.pi button { font-family: inherit; }
.pi-sec[hidden] { display: none !important; }
.pi [hidden] { display: none !important; }
.pi h2.pi-t { margin: 0 0 4px; font: 700 26px/1.15 var(--pi-f); letter-spacing: .03em; color: #fff; }
.pi .pi-st { margin: 0 0 16px; font: 400 15px/1.5 var(--pi-fb); color: var(--pi-tx2); max-width: 680px; }
.pi-aviso { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; border: 1px dashed rgba(87, 214, 164, .5); background: rgba(87, 214, 164, .06); font: 500 13px/1.45 var(--pi-fb); color: #9fe3c8; }
.pi-aviso b { color: #c9f3e2; }

/* ---------------------------------------------------------------- as três caixas do topo */
.pi-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.pi-aba { position: relative; display: grid; grid-template-columns: 1fr 96px; align-items: center; min-height: 128px; padding: 18px 14px 18px 22px; overflow: hidden; border-radius: 10px; cursor: pointer; text-align: left;
  color: var(--pi-tx); background: radial-gradient(90% 120% at 100% 50%, rgba(var(--pi-vr), .16), rgba(0, 0, 0, 0) 60%), linear-gradient(160deg, #1d0d0f, #0c0607);
  border: 1px solid rgba(var(--pi-vr), .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s, transform .2s, box-shadow .2s; }
.pi-aba:hover { border-color: rgba(var(--pi-vr), .6); transform: translateY(-2px); }
.pi-aba[aria-selected="true"] { border-color: var(--pi-v); box-shadow: 0 0 0 1px var(--pi-v), 0 18px 40px -22px rgba(var(--pi-vr), .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pi-aba[aria-selected="true"]::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--pi-v), #ff8a3d); }
.pi-aba b { display: block; font: 900 30px/1 var(--pi-f); letter-spacing: .04em; color: #fff; }
.pi-aba span { display: block; margin-top: 7px; font: 500 14px/1.35 var(--pi-fb); color: var(--pi-tx2); }
.pi-aba img { width: 96px; height: 96px; object-fit: contain; justify-self: end; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .8)); transition: transform .3s; }
.pi-aba:hover img, .pi-aba[aria-selected="true"] img { transform: scale(1.06); }
.pi-aba:focus-visible, .pi-eb:focus-visible, .pi-bx:focus-visible, .pi-pg button:focus-visible, .pi-it:focus-visible { outline: 2px solid var(--pi-ouro); outline-offset: 2px; }

/* a parte Info (o guia que já existia) dentro da página */
.pi-sec .info-wrap { padding-top: 0; }

/* ---------------------------------------------------------------- palco com o modelo 3D */
.pi-palco { position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 470px; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(var(--pi-vr), .3); background: radial-gradient(70% 90% at 20% 62%, rgba(var(--pi-luz, 255, 74, 61), .24), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #170d0e, #0a0607);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(var(--pi-vr), .8); }
.pi-3d { position: relative; min-height: 300px; background: center 46% / contain no-repeat; touch-action: pan-y; }
.pi-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .35s; cursor: grab; }
.pi-3d.carregando canvas { opacity: 0; }
.pi-3d.sem3d canvas { display: none; }
.pi-3d::before { content: ""; position: absolute; left: 50%; bottom: 30px; width: 280px; height: 60px; margin-left: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pi-luz, 255, 74, 61), .55), rgba(var(--pi-luz, 255, 74, 61), 0)); }
.pi-3d::after { content: ""; position: absolute; left: 50%; bottom: 38px; width: 236px; height: 46px; margin-left: -118px; border-radius: 50%; border: 1px solid rgba(var(--pi-ouro-r), .45);
  box-shadow: 0 0 0 9px rgba(var(--pi-ouro-r), .05), 0 0 0 10px rgba(var(--pi-ouro-r), .28), 0 0 24px rgba(var(--pi-luz, 255, 74, 61), .5); pointer-events: none; }
.pi-3d .pi-esp { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 30px; font: 600 14px/1.5 var(--pi-fb); color: var(--pi-mu); }
.pi-3d.esperando .pi-esp { display: grid; }
.pi-3d.esperando canvas { opacity: 0; }
.pi-info { position: relative; z-index: 1; padding: 30px 32px 28px 6px; display: flex; flex-direction: column; }
.pi-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pi-tags span { padding: 4px 9px; border-radius: 4px; border: 1px solid rgba(var(--pi-vr), .45); background: rgba(var(--pi-vr), .1); font: 700 12px/1 var(--pi-fc); letter-spacing: .06em; color: #ffcfc8; }
.pi-nome { margin: 0; font: 900 44px/1.02 var(--pi-f); letter-spacing: .02em; color: #fff; text-shadow: 0 0 30px rgba(var(--pi-luz, 255, 74, 61), .55), 0 2px 0 #000; }
.pi-desc { margin: 12px 0 0; max-width: 540px; font: 400 15.5px/1.55 var(--pi-fb); color: var(--pi-tx2); }
.pi-desc b { color: #fff; }
.pi-conta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin: 20px 0 0; }
.pi-conta > div > span { display: block; font: 600 13px/1.2 var(--pi-fb); color: var(--pi-mu); }
.pi-relogio { font: 700 54px/1 var(--pi-fc); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.pi-relogio.agora { color: var(--pi-ex); text-shadow: 0 0 20px rgba(108, 242, 140, .6); }
.pi-proxh { font: 600 15px/1.3 var(--pi-fb); color: var(--pi-tx2); padding-bottom: 6px; }
.pi-proxh b { color: #fff; }
.pi-horas { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.pi-horas li { display: grid; min-width: 62px; padding: 7px 9px 6px; border-radius: 5px; text-align: center; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.pi-horas b { font: 700 17px/1.1 var(--pi-fc); color: #fff; font-variant-numeric: tabular-nums; }
.pi-horas small { font: 500 11.5px/1.2 var(--pi-fb); color: var(--pi-mu); }
.pi-horas li.foi { opacity: .38; }
.pi-horas li.prox { border-color: var(--pi-v); background: rgba(var(--pi-vr), .14); box-shadow: 0 0 18px -4px rgba(var(--pi-vr), .8); }
.pi-horas li.prox b { color: #ffd6d0; }
.pi-sem-hora { margin: 18px 0 0; font: 500 14px/1.5 var(--pi-fb); color: var(--pi-mu); }
.pi-evs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.pi-eb { display: grid; gap: 3px; padding: 11px 12px; border-radius: 7px; cursor: pointer; text-align: left; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2)), var(--pi-pn);
  border: 1px solid rgba(255, 255, 255, .07); color: var(--pi-tx); transition: border-color .2s, background .2s; }
.pi-eb:hover { border-color: rgba(var(--pi-vr), .5); }
.pi-eb[aria-pressed="true"] { border-color: var(--pi-v); background: linear-gradient(180deg, rgba(var(--pi-vr), .16), rgba(0, 0, 0, .2)), var(--pi-pn); }
.pi-eb b { font: 700 15px/1.2 var(--pi-fb); }
.pi-eb span { font: 500 12.5px/1.3 var(--pi-fb); color: var(--pi-mu); }
.pi-eb span em { font-style: normal; color: #ffcfc8; font-weight: 600; }
.pi-mais { margin: 26px 0 0; }
.pi-mais h3 { margin: 0 0 10px; font: 700 19px/1.2 var(--pi-f); color: #fff; }
.pi-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.pi-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 6px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); font: 500 14px/1.35 var(--pi-fb); color: var(--pi-tx2); }
.pi-lista li b { color: #fff; font-weight: 600; }
.pi-lista li span { font: 600 14px/1.35 var(--pi-fc); color: #ffcfc8; letter-spacing: .02em; text-align: right; }
.pi-sem { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pi-sem li { padding: 13px 14px 11px; min-height: 68px; background: url(ui/message_box.png) 0 0 / 100% 100%; border-radius: 3px; box-shadow: 0 10px 20px -14px #000; }
.pi-sem b { display: block; font: 700 14px/1.2 var(--pi-f); color: var(--pi-ouro); text-shadow: 0 1px 0 #000; }
.pi-sem span { display: block; margin-top: 6px; font: 700 15px/1 var(--pi-fc); color: #fff; letter-spacing: .03em; }

/* ---------------------------------------------------------------- drops */
.pi-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pi-bx { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: 8px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)), var(--pi-pn); border: 1px solid rgba(255, 255, 255, .07); color: var(--pi-tx); transition: border-color .2s, transform .2s; }
.pi-bx:hover { border-color: rgba(var(--pi-ouro-r), .5); transform: translateY(-2px); }
.pi-bx[aria-pressed="true"] { border-color: var(--pi-ouro); background: radial-gradient(80% 60% at 50% 35%, rgba(var(--pi-bxc, 242, 193, 78), .22), rgba(0, 0, 0, 0)), var(--pi-pn); }
.pi-bx img { width: 132px; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .8)); }
.pi-bx b { font: 700 15px/1.2 var(--pi-fb); }
.pi-bx span { font: 500 12px/1.25 var(--pi-fb); color: var(--pi-mu); }
.pi-ver { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.pi-baus { --s: 1.6; display: flex; gap: 14px; }
.pi-bau { position: relative; flex: 0 0 auto; width: calc(190px * var(--s)); height: calc(433px * var(--s)); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .8)); }
.pi-bau::before { content: ""; position: absolute; inset: 0; background: url(ui/item_back01.png) 0 0 / 100% auto no-repeat, url(ui/item_back02.png) 0 100% / 100% auto no-repeat; }
.pi-bau > * { position: absolute; }
.pi-bau h3 { left: calc(16px * var(--s)); right: calc(16px * var(--s)); top: calc(8px * var(--s)); height: calc(24px * var(--s)); margin: 0; display: grid; place-items: center;
  font: 700 calc(10.5px * var(--s))/1 var(--pi-f); letter-spacing: .06em; color: var(--pi-ouro); text-shadow: 0 0 10px rgba(var(--pi-ouro-r), .6), 0 1px 0 #000; }
.pi-gr { left: calc(15px * var(--s)); top: calc(46px * var(--s)); width: calc(160px * var(--s)); height: calc(300px * var(--s));
  background: url(ui/inventorybox2.png) 0 0 / calc(20px * var(--s)) calc(20px * var(--s)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 20px rgba(0, 0, 0, .6); }
.pi-it { position: absolute; display: block; cursor: help; background: rgba(60, 90, 160, .16); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .22); transition: background .15s; }
.pi-it:hover, .pi-it:focus-visible { background: rgba(var(--pi-ouro-r), .28); box-shadow: inset 0 0 0 1px rgba(var(--pi-ouro-r), .8); outline: 0; z-index: 2; }
.pi-it > i { position: absolute; inset: 3px; display: grid; place-content: center; gap: 2px; text-align: center; border-radius: 3px; background: rgba(255, 255, 255, .04); font: 600 calc(9px * var(--s)) / 1.15 var(--pi-fb); font-style: normal; color: var(--pi-mu); }
.pi-it > i b { color: #dcdcdc; font-weight: 700; }
.pi-it img { position: absolute; inset: 0; margin: auto; max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
.pi-bau .pi-zen { left: 50%; top: calc(356px * var(--s)); width: calc(113px * var(--s)); height: calc(18px * var(--s)); margin-left: calc(-56.5px * var(--s)); display: grid; place-items: center;
  background: url(ui/item_money.png) 0 0 / 100% 100%; font: 700 calc(7.5px * var(--s))/1 var(--pi-fb); color: #f0e2b8; }
.pi-bau .pi-rod { left: calc(16px * var(--s)); right: calc(16px * var(--s)); top: calc(384px * var(--s)); text-align: center; font: 500 calc(6.6px * var(--s))/1.35 var(--pi-fb); color: #b9ab93; }
.pi-lado .pi-3d { height: 220px; min-height: 0; margin: -10px 0 0; }
.pi-lado .pi-3d::before { bottom: 18px; width: 200px; height: 44px; margin-left: -100px; }
.pi-lado .pi-3d::after { bottom: 24px; width: 160px; height: 32px; margin-left: -80px; }
.pi-lado h3 { margin: 4px 0 2px; font: 900 30px/1.1 var(--pi-f); color: #fff; letter-spacing: .02em; }
.pi-lado .pi-sub { margin: 0 0 14px; font: 600 14.5px/1.4 var(--pi-fb); color: var(--pi-ouro); }
.pi-lado dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 16px; font: 400 14.5px/1.4 var(--pi-fb); }
.pi-lado dt { color: var(--pi-mu); }
.pi-lado dd { margin: 0; color: #fff; }
.pi-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 16px; font: 600 13.5px/1 var(--pi-fb); color: var(--pi-tx2); }
.pi-pg button { height: 36px; padding: 0 14px; border-radius: 5px; border: 1px solid rgba(var(--pi-ouro-r), .45); background: rgba(255, 255, 255, .03); color: var(--pi-tx); font: 600 13.5px/1 var(--pi-fb); cursor: pointer; }
.pi-pg button:disabled { opacity: .35; cursor: not-allowed; }
/* box sem modelo 3D: a imagem do jogo flutua no lugar */
.pi-3d.so-foto canvas { visibility: hidden; }
.pi-3d.so-foto { background-size: auto 62%; background-position: center 40%; animation: pi-flut 3.6s ease-in-out infinite; }
@keyframes pi-flut { 50% { background-position: center 34%; } }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .pi-3d.so-foto { animation: none; } }
.pi-regras { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pi-regras li { position: relative; padding: 9px 12px 9px 30px; border-radius: 6px; background: rgba(var(--pi-bxc, 242, 193, 78), .07); border: 1px solid rgba(255, 255, 255, .07); font: 400 14px/1.45 var(--pi-fb); color: var(--pi-tx2); }
.pi-regras li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--pi-ouro); }
.pi-ficha em { display: block; margin-top: 2px; font: 700 12.5px/1.3 var(--pi-fb); font-style: normal; color: #7fd6ff; }
.pi-lado .pi-dica { margin: 0; font: 400 13.5px/1.5 var(--pi-fb); color: var(--pi-mu); }

/* ficha do item, igual à do jogo */
.pi-ficha { position: fixed; z-index: 1000; min-width: 180px; max-width: 280px; padding: 9px 14px 10px; pointer-events: none; text-align: center;
  background: rgba(8, 8, 12, .93); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 30px rgba(0, 0, 0, .7); font: 500 13px/1.5 var(--pi-fb); color: #d8d8d8; }
.pi-ficha[hidden] { display: none; }
.pi-ficha b { display: block; font: 700 14.5px/1.3 var(--pi-fb); color: #fff; }
.pi-ficha small { display: block; margin-top: 3px; color: #8a8a8a; font-size: 12px; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1000px) {
  .pi { padding-left: 14px; padding-right: 14px; }
  .pi-ver { grid-template-columns: 1fr; }
  .pi-lado { order: -1; display: grid; grid-template-columns: 200px 1fr; column-gap: 18px; align-items: center; }
  .pi-lado .pi-3d { grid-row: 1 / span 3; height: 200px; margin: 0; }
  .pi-lado .pi-regras, .pi-lado .pi-pg, .pi-lado .pi-dica { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .pi-abas { gap: 8px; }
  .pi-aba { grid-template-columns: 1fr; min-height: 0; padding: 14px 12px; text-align: center; }
  .pi-aba img { width: 64px; height: 64px; justify-self: center; grid-row: 1; margin-bottom: 4px; }
  .pi-aba b { font-size: 18px; letter-spacing: .02em; } .pi-aba span { display: none; }
  .pi-palco { grid-template-columns: 1fr; min-height: 0; }
  .pi-palco .pi-3d { height: 340px; }
  .pi-info { padding: 0 18px 22px; }
  .pi-nome { font-size: 34px; } .pi-relogio { font-size: 44px; }
  .pi-evs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-lista { grid-template-columns: 1fr; }
  .pi-sem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-bx img { width: 96px; height: 80px; }
  .pi-bx b { font-size: 14px; }
  .pi-baus { flex-direction: column; align-items: center; }
  .pi-baus { --s: 1.5; }
  .pi-lado { grid-template-columns: 130px 1fr; }
  .pi-lado .pi-3d { height: 150px; }
  .pi-lado .pi-3d::before { width: 120px; height: 30px; margin-left: -60px; bottom: 14px; }
  .pi-lado .pi-3d::after { width: 96px; height: 22px; margin-left: -48px; bottom: 18px; }
  .pi-lado h3 { font-size: 24px; }
  /* o guia: menu em cima, rolando de lado */
  .pi-sec .info-wrap { flex-direction: column; }
  .pi-sec .info-nav { position: static; width: 100%; display: flex; overflow-x: auto; border-radius: 10px; margin-bottom: 12px; }
  .pi-sec .info-nav-head { display: none; }
  .pi-sec .info-nav-item { flex: 0 0 auto; border-bottom: 0; white-space: nowrap; }
  .pi-sec .info-content { padding-left: 0; }
}
@media (max-width: 380px) { .pi-baus { --s: 1.35; } }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .pi-aba, .pi-bx, .pi-aba img { transition: none; } }