/* MU GAME Easy, Meus personagens: o inventário do jogo (imagens do cliente) e o personagem em 3D com o que está equipado. */
.iv { --iv-v: #ff4a3d; --iv-vr: 255, 74, 61; --iv-ouro: #f2c14e; --iv-ouro-r: 242, 193, 78; --iv-ex: #6cf28c; --iv-azul: #8fb8ff; --iv-pn: #0d121a; --iv-tx2: #c4b2ad; --iv-mu: #8f7d78;
  --iv-f: "Cinzel", Georgia, serif; --iv-fb: "Barlow", Arial, sans-serif; --iv-fc: "Barlow Condensed", "Barlow", Arial, sans-serif;
  max-width: 1180px; margin: 0 auto; padding: 0 20px 50px; color: #f2e9e7; font-family: var(--iv-fb); }
.iv *, .iv *::before, .iv *::after { box-sizing: border-box; }
.iv button { font-family: inherit; }
.iv-proto { 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(--iv-fb); color: #9fe3c8; }
.iv-proto b { color: #c9f3e2; }
.iv-pers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.iv-pb { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 8px 14px 8px 8px; border-radius: 6px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2)), var(--iv-pn); border: 1px solid rgba(255, 255, 255, .08); color: #f2e9e7; }
.iv-pb[aria-pressed="true"] { border-color: var(--iv-v); background: linear-gradient(180deg, rgba(var(--iv-vr), .16), rgba(0, 0, 0, .2)), var(--iv-pn); }
.iv-pb i { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 5px; border: 1px solid rgba(var(--iv-vr), .4); font: 700 13px/1 var(--iv-fc); font-style: normal; color: #ffcfc8; }
.iv-pb b { font: 700 15px/1.2 var(--iv-fb); }
.iv-pb span { font: 500 12.5px/1.2 var(--iv-fb); color: var(--iv-mu); }
.iv-pb:focus-visible, .iv-sl:focus-visible, .iv-it:focus-visible { outline: 2px solid var(--iv-ouro); outline-offset: 2px; }

.iv-mesa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.iv-palco { position: relative; height: calc(433px * 1.6); border-radius: 8px; overflow: hidden; border: 1px solid rgba(var(--iv-vr), .3);
  background: radial-gradient(60% 70% at 50% 62%, rgba(var(--iv-vr), .2), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0e141d, #0a0607); }
.iv-palco .c3d-cv, .iv-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-palco::after { content: ""; position: absolute; left: 50%; bottom: 40px; width: 300px; height: 56px; margin-left: -150px; border-radius: 50%; border: 1px solid rgba(var(--iv-ouro-r), .4);
  box-shadow: 0 0 0 9px rgba(var(--iv-ouro-r), .05), 0 0 0 10px rgba(var(--iv-ouro-r), .25), 0 0 30px rgba(var(--iv-vr), .45); pointer-events: none; }
.iv-ficha-p { position: absolute; z-index: 2; left: 24px; top: 22px; }
.iv-ficha-p h2 { margin: 0; font: 900 36px/1.05 var(--iv-f); color: #fff; letter-spacing: .02em; text-shadow: 0 0 24px rgba(var(--iv-vr), .5), 0 2px 0 #000; }
.iv-ficha-p p { margin: 6px 0 0; font: 600 15px/1.3 var(--iv-fb); color: var(--iv-tx2); }
.iv-ficha-p p b { color: #fff; }
.iv-dica3d { position: absolute; z-index: 2; left: 24px; bottom: 18px; margin: 0; font: 500 13px/1.4 var(--iv-fb); color: var(--iv-mu); }

/* janela do inventário: medidas em pixels do jogo x --s */
.iv-jan { --s: 1.6; position: relative; width: calc(190px * var(--s)); height: calc(433px * var(--s)); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .8)); }
.iv-jan::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; }
.iv-jan > * { position: absolute; }
.iv-jan 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(--iv-f); letter-spacing: .06em; color: var(--iv-ouro); text-shadow: 0 0 10px rgba(var(--iv-ouro-r), .6), 0 1px 0 #000; }
.iv-sl { display: grid; place-items: center; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); cursor: default; }
.iv-sl.tem { cursor: help; }
.iv-sl.tem::after { content: ""; position: absolute; inset: 0; background: rgba(40, 60, 120, .35); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .35); }
.iv-sl.tem.ex::after { background: rgba(40, 120, 70, .3); box-shadow: inset 0 0 0 1px rgba(108, 242, 140, .45); }
.iv-sl img { position: absolute; z-index: 1; inset: 0; margin: auto; width: auto; height: auto; max-width: 94%; max-height: 94%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)); }
.iv-sl:hover::after, .iv-sl:focus-visible::after { background: rgba(var(--iv-ouro-r), .3); }
.iv-bag { left: calc(15px * var(--s)); top: calc(200px * var(--s)); width: calc(160px * var(--s)); height: calc(160px * 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 18px rgba(0, 0, 0, .6); }
.iv-it { position: absolute; display: grid; place-items: center; cursor: help; background: rgba(60, 90, 160, .16); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .22); }
.iv-it.ex { background: rgba(40, 120, 70, .2); box-shadow: inset 0 0 0 1px rgba(108, 242, 140, .35); }
.iv-it:hover, .iv-it:focus-visible { background: rgba(var(--iv-ouro-r), .28); outline: 0; z-index: 2; }
.iv-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)); }
.iv-it small { position: absolute; right: 1px; bottom: 0; font: 700 calc(6.5px * var(--s))/1 var(--iv-fc); color: #fff; text-shadow: 0 0 3px #000; }
.iv-zen { left: 50%; top: calc(368px * var(--s)); width: calc(113px * var(--s)); height: calc(18px * var(--s)); margin-left: calc(-56.5px * var(--s)); display: flex; align-items: center; justify-content: flex-end; padding-right: calc(8px * var(--s));
  background: url(ui/item_money.png) 0 0 / 100% 100%; font: 700 calc(7.5px * var(--s))/1 var(--iv-fb); color: #f0e2b8; }
.iv-rod { left: calc(16px * var(--s)); right: calc(16px * var(--s)); top: calc(394px * var(--s)); text-align: center; font: 500 calc(6.6px * var(--s))/1.35 var(--iv-fb); color: #b9ab93; }

/* ficha do item, igual à do jogo */
.iv-ficha { position: fixed; z-index: 1000; min-width: 220px; max-width: 300px; padding: 10px 14px 12px; 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.55 var(--iv-fb); color: #d8d8d8; }
.iv-ficha[hidden] { display: none; }
.iv-ficha b { display: block; margin-bottom: 4px; font: 700 15px/1.3 var(--iv-fb); color: #fff; }
.iv-ficha.ex b { color: var(--iv-ex); }
.iv-ficha.alto b { color: #ffd84a; }
.iv-ficha .az { display: block; color: var(--iv-azul); }
.iv-ficha .vd { display: block; color: var(--iv-ex); }
.iv-ficha .br { display: block; color: #e8e8e8; }
.iv-ficha small { display: block; margin-top: 6px; color: #8a8a8a; font-size: 12px; }
/* página de verdade (25/10): aviso sem login e nota embaixo */
.iv-aviso { margin: 0 0 16px; padding: 14px 16px; border-radius: 6px; border: 1px solid rgba(255, 74, 61, .35); background: rgba(255, 74, 61, .07); font: 500 15px/1.5 var(--iv-fb); color: #e7d3cf; }
.iv-aviso[hidden] { display: none; }
.iv-aviso a { color: #f6d391; font-weight: 600; }
.iv-nota { margin: 14px 0 0; font: 400 13px/1.5 var(--iv-fb); color: #8f7d78; }
.iv-ficha .an { color: #5ce1ff; }

/* escolha do personagem: moldura do jogo (igual aos eventos da semana na página Info), separada do cabeçalho (25/10) */
.iv-pers { gap: 10px; margin: 20px 0 18px; }
.iv-pb { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; min-width: 176px; min-height: 68px; padding: 12px 18px 11px 14px;
  border: 0; border-radius: 3px; background: url(ui/message_box.png) 0 0 / 100% 100%; box-shadow: 0 10px 20px -14px #000; transition: transform .15s, filter .15s, box-shadow .15s; }
.iv-pb:hover { transform: translateY(-2px); filter: brightness(1.12); }
.iv-pb[aria-pressed="true"] { background: url(ui/message_box.png) 0 0 / 100% 100%; filter: brightness(1.18);
  box-shadow: 0 0 0 1px rgba(var(--iv-ouro-r), .75), 0 0 22px -4px rgba(var(--iv-ouro-r), .55), 0 12px 22px -14px #000; }
.iv-pb i { width: 36px; height: 36px; border-radius: 3px; border: 1px solid rgba(var(--iv-ouro-r), .45); background: rgba(0, 0, 0, .45);
  font: 700 12px/1 var(--iv-fc); letter-spacing: .06em; color: var(--iv-ouro); }
.iv-pb b { font: 700 16px/1.15 var(--iv-f); letter-spacing: .03em; color: var(--iv-ouro); text-shadow: 0 1px 0 #000, 0 0 12px rgba(var(--iv-ouro-r), .25); }
.iv-pb span { margin-top: 3px; font: 700 13.5px/1 var(--iv-fc); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 0 #000; }
.iv-pb[aria-pressed="true"] b { color: #ffe08a; }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .iv-pb { transition: none; } .iv-pb:hover { transform: none; } }
.iv-pb { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
@media (max-width: 760px) {
  .iv-pers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-pb { min-width: 0; padding: 11px 12px 10px 10px; column-gap: 10px; }
  .iv-pb b { font-size: 14.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .iv-mesa { grid-template-columns: minmax(0, 1fr); }
  .iv-palco { height: 440px; }
}