:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020609;
  color: #eef6ff;
}

/* V36.21.1 — jornada narrativa, controle do atalho e conclusão celebrada */
.quest-tracker {
  position: absolute;
  z-index: 23;
  top: clamp(116px, 15vh, 166px);
  right: max(18px, env(safe-area-inset-right));
  width: min(310px, 27vw);
  padding: 15px 18px 16px 21px;
  border: 1px solid rgba(226, 188, 105, .42);
  border-left: 4px solid #e5ba58;
  border-radius: 8px 2px 8px 2px;
  color: #f8efd5;
  background:
    linear-gradient(115deg, rgba(34, 27, 22, .96), rgba(12, 18, 24, .90)),
    radial-gradient(circle at 90% 10%, rgba(223, 171, 66, .2), transparent 45%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 240, 187, .08);
  pointer-events: none;
  backdrop-filter: blur(7px);
  box-sizing: border-box;
  transition: width .24s ease, padding .24s ease, border-color .24s ease, background .24s ease;
}

.quest-tracker::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(226, 188, 105, .11);
  pointer-events: none;
}

.quest-tracker__kicker {
  display: block;
  color: #e5ba58;
  font: 800 9px/1.2 system-ui, sans-serif;
  letter-spacing: .2em;
}

.quest-tracker__header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.quest-tracker__toggle {
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(239, 204, 128, .42);
  border-radius: 50%;
  color: #f5d88d;
  background: rgba(4, 9, 13, .48);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 9px rgba(0,0,0,.32);
  font: 900 17px/1 system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .2s ease;
}
.quest-tracker__toggle:hover, .quest-tracker__toggle:focus-visible { color: #fff3c8; border-color: #f1ca70; background: rgba(229, 186, 88, .18); outline: none; }
.quest-tracker__body { position: relative; z-index: 1; max-height: 130px; opacity: 1; overflow: hidden; transition: max-height .24s ease, opacity .18s ease, transform .24s ease; }

.quest-tracker strong { display: block; font: 800 15px/1.25 Georgia, serif; text-shadow: 0 2px 3px #000; }
.quest-tracker p { margin: 7px 0 0; color: #d8d9d5; font: 600 11px/1.45 system-ui, sans-serif; }
.quest-tracker small { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 99px; color: #ffe39a; background: rgba(225, 174, 67, .13); font: 800 10px/1.25 system-ui, sans-serif; }
.quest-tracker[data-state="return"] { border-left-color: #75dca5; }
.quest-tracker[data-state="return"] .quest-tracker__kicker { color: #80e4ad; }
.quest-tracker[data-collapsed="true"] { width: 49px; padding: 9px; border-left-width: 1px; border-radius: 50%; background: rgba(16, 21, 24, .94); }
.quest-tracker[data-collapsed="true"]::before { inset: 3px; border-radius: 50%; }
.quest-tracker[data-collapsed="true"] .quest-tracker__header { justify-content: center; margin: 0; }
.quest-tracker[data-collapsed="true"] .quest-tracker__kicker { display: none; }
.quest-tracker[data-collapsed="true"] .quest-tracker__toggle { transform: rotate(180deg); }
.quest-tracker[data-collapsed="true"] .quest-tracker__body { max-height: 0; opacity: 0; transform: translateY(-5px); }

/* V36.40.13 — o HUD de missão nunca disputa camada ou toque com interfaces. */
.game-frame.menu-open .quest-tracker,
.game-frame.dialogue-open .quest-tracker,
.game-frame.contract-board-open .quest-tracker,
.game-frame.chat-open .quest-tracker {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.quest-notification {
  position: absolute;
  z-index: 96;
  top: max(7%, calc(env(safe-area-inset-top) + 12px));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(620px, 86vw);
  padding: 11px 30px 13px;
  border: 0;
  border-bottom: 1px solid rgba(245, 210, 123, .58);
  border-radius: 0;
  color: #fff1c2;
  background: linear-gradient(90deg, transparent, rgba(18, 22, 24, .82) 18%, rgba(28, 25, 22, .94) 50%, rgba(18, 22, 24, .82) 82%, transparent);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .34);
  opacity: 0;
  transform: translate(-50%, -14px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.quest-notification--visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.quest-notification span { color: #f3ca69; font-size: 20px; filter: drop-shadow(0 0 8px rgba(243, 202, 105, .6)); }
.quest-notification strong { font: 800 clamp(12px, 1.25vw, 15px)/1.4 system-ui, sans-serif; letter-spacing: .035em; text-align: center; text-shadow: 0 2px 5px #000; }

.quest-notification--completion {
  min-width: min(510px, 84vw);
  justify-content: center;
  padding: 18px 34px;
  border-color: rgba(255, 226, 143, .92);
  border-radius: 12px 3px;
  color: #fff8df;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 220, 127, .22), transparent 52%),
    linear-gradient(90deg, rgba(8, 14, 18, .2), rgba(42, 32, 21, .98) 16%, rgba(26, 31, 32, .98) 84%, rgba(8, 14, 18, .2));
  box-shadow: 0 17px 64px rgba(0, 0, 0, .68), 0 0 28px rgba(238, 190, 82, .2), inset 0 1px rgba(255, 246, 207, .2);
  overflow: hidden;
  animation: quest-completion-bloom .82s cubic-bezier(.16, .86, .26, 1.12) both;
}
.quest-notification--completion::before {
  content: "";
  position: absolute;
  inset: -120% -35%;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,.22) 49%, transparent 60%);
  transform: translateX(-42%);
  animation: quest-completion-shine 1.15s .18s ease-out both;
}
.quest-notification--completion::after {
  content: "◆  ✦  ◆";
  position: absolute;
  inset: auto 0 3px;
  color: rgba(249, 210, 116, .58);
  font: 700 8px/1 system-ui, sans-serif;
  letter-spacing: .7em;
  text-align: center;
}
.quest-notification--completion span { position: relative; z-index: 1; font-size: 27px; animation: quest-completion-glyph 1.25s ease-in-out both; }
.quest-notification--completion strong { position: relative; z-index: 1; font: 800 16px/1.35 Georgia, serif; letter-spacing: .04em; text-shadow: 0 2px 8px #000; }

.attribute-level-announcement {
  position: absolute;
  z-index: 97;
  top: max(15%, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  display: grid;
  grid-template-columns: 36px minmax(210px, 1fr) 36px;
  align-items: center;
  gap: 14px;
  width: min(560px, 88vw);
  min-height: 92px;
  padding: 13px 28px;
  overflow: hidden;
  border: 1px solid rgba(117, 236, 230, .56);
  border-radius: 16px 5px;
  color: #eaffff;
  background:
    radial-gradient(circle at 50% -20%, rgba(129, 246, 237, .23), transparent 52%),
    linear-gradient(105deg, rgba(8, 18, 22, .97), rgba(17, 52, 58, .98) 48%, rgba(8, 18, 22, .97));
  box-shadow: 0 18px 62px rgba(0, 0, 0, .66), 0 0 28px rgba(63, 214, 216, .19), inset 0 1px rgba(237, 255, 252, .16);
  opacity: 0;
  transform: translate(-50%, -22px) scale(.86);
  transition: opacity .38s ease, transform .42s cubic-bezier(.16, .86, .26, 1.12);
  pointer-events: none;
}
.attribute-level-announcement[hidden] { display: none; }
.attribute-level-announcement::before {
  content: "";
  position: absolute;
  inset: -120% -35%;
  background: linear-gradient(108deg, transparent 40%, rgba(226, 255, 250, .2) 50%, transparent 60%);
  transform: translateX(-46%);
}
.attribute-level-announcement::after {
  content: "◆  DISCIPLINA  ◆";
  position: absolute;
  inset: auto 0 6px;
  color: rgba(234, 197, 105, .58);
  font: 800 7px/1 system-ui, sans-serif;
  letter-spacing: .38em;
  text-align: center;
}
.attribute-level-announcement--visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.attribute-level-announcement--visible::before { animation: attribute-level-shine 1.15s .16s ease-out both; }
.attribute-level-announcement__sigil {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(237, 203, 117, .48);
  border-radius: 50%;
  color: #f4cf72;
  background: radial-gradient(circle, rgba(244, 207, 114, .19), transparent 70%);
  font-size: 19px;
  filter: drop-shadow(0 0 9px rgba(244, 207, 114, .38));
}
.attribute-level-announcement--visible .attribute-level-announcement__sigil { animation: attribute-level-sigil .8s cubic-bezier(.16, .86, .26, 1.12) both; }
.attribute-level-announcement__copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.attribute-level-announcement__copy > span { color: #83e9e7; font: 900 9px/1.2 system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.attribute-level-announcement__copy strong { color: #fff0bc; font: 800 clamp(22px, 3.2vw, 32px)/1 Georgia, serif; text-shadow: 0 2px 8px #000, 0 0 16px rgba(240, 201, 106, .22); }
.attribute-level-announcement__copy small { overflow: hidden; max-width: 100%; color: #c8e4e2; font: 700 10px/1.3 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

@keyframes attribute-level-shine { from { transform: translateX(-46%); } to { transform: translateX(46%); } }
@keyframes attribute-level-sigil {
  0% { opacity: 0; transform: rotate(-38deg) scale(.35); }
  62% { opacity: 1; transform: rotate(9deg) scale(1.18); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes quest-completion-bloom {
  0% { opacity: 0; transform: translate(-50%, -24px) scale(.76); filter: brightness(1.8); }
  56% { opacity: 1; transform: translate(-50%, 4px) scale(1.045); filter: brightness(1.18); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: brightness(1); }
}
@keyframes quest-completion-shine { from { transform: translateX(-45%); } to { transform: translateX(46%); } }
@keyframes quest-completion-glyph {
  0% { transform: rotate(-32deg) scale(.35); opacity: 0; }
  45% { transform: rotate(12deg) scale(1.25); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

.npc-dialogue {
  position: absolute;
  z-index: 96;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 max(22px, env(safe-area-inset-right)) max(32px, calc(env(safe-area-inset-bottom) + 24px)) max(22px, env(safe-area-inset-left));
}

.npc-dialogue[hidden] { display: none; }
.npc-dialogue__veil { position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(2, 6, 10, .67)); pointer-events: none; }

.npc-dialogue__card {
  position: relative;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  width: min(920px, 92vw);
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(224, 190, 119, .58);
  border-radius: 12px 3px 12px 3px;
  color: #f3ead5;
  background:
    linear-gradient(104deg, rgba(43, 30, 25, .98), rgba(15, 23, 30, .985) 33%, rgba(8, 14, 20, .98)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 246, 211, .1), inset 0 -5px rgba(0, 0, 0, .26);
  animation: npc-dialogue-enter .24s ease-out both;
}

.npc-dialogue__card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(233, 203, 137, .10); border-radius: 8px 2px; pointer-events: none; }

.npc-dialogue__portrait {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  border-right: 1px solid rgba(222, 184, 102, .28);
  background: radial-gradient(circle at 50% 36%, rgba(197, 154, 85, .24), transparent 42%), linear-gradient(145deg, #263238, #101820 70%);
}

.npc-dialogue__portrait::before { content: ""; position: absolute; inset: auto -25% -36% -25%; height: 75%; border-radius: 50% 50% 0 0; background: #5c4535; box-shadow: inset 0 10px rgba(255,255,255,.08), 0 -4px 0 #171c20; }
.npc-portrait__face { position: absolute; z-index: 2; left: 50%; top: 49px; width: 62px; height: 76px; transform: translateX(-50%); border: 4px solid #171c20; border-radius: 45% 45% 40% 40%; background: #cf976f; box-shadow: inset 8px 0 rgba(255,255,255,.08), inset -8px -8px rgba(91,45,33,.13); }
.npc-portrait__face::before { content: ""; position: absolute; left: 13px; right: 13px; top: 34px; height: 6px; border-left: 6px solid #19222b; border-right: 6px solid #19222b; }
.npc-portrait__face::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 3px; border-radius: 50%; background: #714737; }
.npc-portrait__hair { position: absolute; z-index: 3; left: 50%; top: 34px; width: 76px; height: 51px; transform: translateX(-50%); border: 4px solid #171c20; border-radius: 48% 48% 20% 20%; background: #583c30; clip-path: polygon(0 0,100% 0,100% 68%,84% 52%,73% 78%,55% 50%,42% 80%,24% 54%,0 75%); }
.npc-portrait__body { position: absolute; z-index: 1; left: 50%; bottom: -17px; width: 118px; height: 105px; transform: translateX(-50%); border: 5px solid #151b20; border-radius: 45% 45% 8% 8%; background: #705643; }
.npc-portrait__accent { position: absolute; z-index: 4; left: 50%; bottom: 7px; width: 17px; height: 78px; transform: translateX(-50%); background: #d3b66f; clip-path: polygon(50% 0,100% 17%,72% 100%,28% 100%,0 17%); }
.npc-dialogue__portrait[data-palette="maera"] { background: radial-gradient(circle at 50% 34%, rgba(74, 185, 188, .3), transparent 43%), linear-gradient(145deg, #243943, #101822 72%); }
.npc-dialogue__portrait[data-palette="maera"]::before, .npc-dialogue__portrait[data-palette="maera"] .npc-portrait__body { background: #275f66; }
.npc-dialogue__portrait[data-palette="maera"] .npc-portrait__hair { background: #312e39; }
.npc-dialogue__portrait[data-palette="maera"] .npc-portrait__accent { background: #e2bd5a; }
.npc-dialogue__portrait[data-palette="borin"] { background: radial-gradient(circle at 50% 34%, rgba(205, 159, 78, .30), transparent 42%), linear-gradient(145deg, #29454d, #141b21 72%); }
.npc-dialogue__portrait[data-palette="borin"]::before, .npc-dialogue__portrait[data-palette="borin"] .npc-portrait__body { background: #743e45; }
.npc-dialogue__portrait[data-palette="borin"] .npc-portrait__hair { background: #49312d; }
.npc-dialogue__portrait[data-palette="borin"] .npc-portrait__accent { background: linear-gradient(#294b55 0 44%, #d8ad58 44% 100%); }
.npc-dialogue__portrait[data-palette="borin"] .npc-portrait__face::after { height: 11px; bottom: 6px; border-radius: 2px 2px 45% 45%; background: #6f4637; }
.npc-dialogue__portrait[data-palette="guard"]::before, .npc-dialogue__portrait[data-palette="guard"] .npc-portrait__body { background: #536c8c; }
.npc-dialogue__portrait[data-palette="guard"] .npc-portrait__hair { background: #9aaebe; }
.npc-dialogue__portrait[data-palette="banker"]::before, .npc-dialogue__portrait[data-palette="banker"] .npc-portrait__body { background: #334e72; }
.npc-dialogue__portrait[data-palette="steel"]::before, .npc-dialogue__portrait[data-palette="steel"] .npc-portrait__body { background: #6b5b4c; }
.npc-dialogue__portrait[data-palette="plum"]::before, .npc-dialogue__portrait[data-palette="plum"] .npc-portrait__body { background: #664e70; }
.npc-dialogue__portrait[data-palette="green"]::before, .npc-dialogue__portrait[data-palette="green"] .npc-portrait__body { background: #446749; }

.npc-dialogue__content { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; padding: 24px 30px 20px; }
.npc-dialogue__content header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 11px; border-bottom: 1px solid rgba(224, 190, 119, .19); }
.npc-dialogue__content header span { display: block; color: #c6ab74; font: 800 9px/1.2 system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.npc-dialogue__content h2 { margin: 3px 0 0; color: #fff1c8; font: 800 24px/1 Georgia, serif; text-shadow: 0 2px 4px #000; }
.npc-dialogue__content header em { max-width: 260px; padding: 6px 11px; border: 1px solid rgba(226, 183, 86, .34); color: #f1cd79; background: rgba(222, 170, 56, .09); font: 700 10px/1.2 system-ui, sans-serif; font-style: normal; text-align: right; }
.npc-dialogue__text { flex: 1; padding: 12px 0 8px; }
.npc-dialogue__text p { margin: 0 0 7px; color: #e4e4df; font: 500 14px/1.52 system-ui, sans-serif; }
.npc-dialogue__text p[data-tone="sheepish"] { color: #e6d2ad; font-style: italic; }
.npc-dialogue__text p[data-tone="urgent"] { color: #ffd5a5; }
.npc-dialogue__text p[data-tone="solemn"] { color: #cfd9df; }
.npc-dialogue__text p[data-tone="warm"] { color: #f3d99e; }
.npc-dialogue__choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: auto; }
.npc-dialogue__choice { min-width: 128px; padding: 10px 16px; border: 1px solid rgba(214, 187, 130, .3); border-radius: 4px 1px; color: #ddd7c9; background: rgba(255,255,255,.055); font: 800 11px/1.15 system-ui, sans-serif; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.npc-dialogue__choice:hover, .npc-dialogue__choice:focus-visible { transform: translateY(-1px); border-color: rgba(244, 207, 126, .8); background: rgba(244, 207, 126, .12); outline: none; }
.npc-dialogue__choice--primary { color: #241c13; border-color: #e2bc67; background: linear-gradient(#f1cf7d, #c99a45); box-shadow: 0 4px 13px rgba(0,0,0,.28); }
.npc-dialogue__choice--primary:hover, .npc-dialogue__choice--primary:focus-visible { background: linear-gradient(#ffe29a, #d5a44d); }
.npc-dialogue__choice:disabled { opacity: .45; cursor: wait; transform: none; }
.npc-dialogue__close { position: absolute; z-index: 5; top: 10px; right: 11px; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #bcb3a3; background: rgba(0,0,0,.28); font: 400 22px/1 system-ui, sans-serif; cursor: pointer; }

@keyframes npc-dialogue-enter { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .quest-tracker { top: 102px; right: 10px; width: min(240px, 58vw); padding: 11px 12px 12px 15px; }
  .quest-tracker[data-collapsed="true"] { width: 45px; padding: 8px; }
  .quest-tracker strong { font-size: 12px; }
  .quest-tracker p { font-size: 9px; }
  .quest-notification--completion { min-width: min(390px, 90vw); padding: 15px 20px; }
  .quest-notification--completion strong { font-size: 13px; }
  .attribute-level-announcement { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; min-height: 78px; padding: 11px 14px 14px; }
  .attribute-level-announcement__sigil { width: 27px; height: 27px; font-size: 15px; }
  .attribute-level-announcement__copy strong { font-size: 22px; }
  .attribute-level-announcement__copy small { font-size: 9px; }
  .npc-dialogue { padding: 0 9px max(11px, env(safe-area-inset-bottom)); }
  .npc-dialogue__card { grid-template-columns: 88px minmax(0, 1fr); width: 100%; min-height: 188px; }
  .npc-dialogue__portrait { min-height: 188px; }
  .npc-portrait__face { top: 37px; transform: translateX(-50%) scale(.78); }
  .npc-portrait__hair { top: 22px; transform: translateX(-50%) scale(.78); }
  .npc-portrait__body { bottom: -27px; transform: translateX(-50%) scale(.78); }
  .npc-portrait__accent { bottom: -4px; transform: translateX(-50%) scale(.78); }
  .npc-dialogue__content { padding: 16px 15px 13px; }
  .npc-dialogue__content header { padding-right: 25px; }
  .npc-dialogue__content h2 { font-size: 18px; }
  .npc-dialogue__content header em { display: none; }
  .npc-dialogue__text { padding-top: 9px; }
  .npc-dialogue__text p { margin-bottom: 5px; font-size: 11px; line-height: 1.38; }
  .npc-dialogue__choice { min-width: 105px; padding: 8px 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .quest-tracker, .quest-tracker__body, .quest-tracker__toggle, .quest-notification--completion, .quest-notification--completion::before, .quest-notification--completion span, .attribute-level-announcement, .attribute-level-announcement::before, .attribute-level-announcement__sigil { animation: none; transition-duration: .01ms; }
}

/* V36.18.0 — oficina exclusiva de Doran: refino, Forja e Ascensão. */
.blacksmith-page {
  width: min(100%, 1120px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.2vmin, 12px);
  overflow: hidden;
  color: #eaf2f1;
  text-align: left;
}

.blacksmith-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: clamp(9px, 1.4vmin, 14px);
  border: 1px solid rgba(222, 178, 92, .46);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 20%, rgba(232, 141, 48, .18), transparent 32%),
    linear-gradient(135deg, rgba(49, 36, 29, .96), rgba(17, 30, 34, .98));
  box-shadow: inset 0 0 22px rgba(255, 168, 61, .06), 0 8px 24px rgba(0, 0, 0, .24);
}

.blacksmith-header h2,
.blacksmith-header p { margin: 0; }
.blacksmith-header > div:first-child > small,
.blacksmith-section-heading small {
  color: #e8b85d;
  font-size: clamp(.52rem, .9vmin, .66rem);
  font-weight: 900;
  letter-spacing: .16em;
}
.blacksmith-header h2 { margin: 2px 0 3px; font-size: clamp(1rem, 2.4vmin, 1.55rem); }
.blacksmith-header p { color: #b8c7c6; font-size: clamp(.62rem, 1.05vmin, .76rem); }

.blacksmith-wallet {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid rgba(244, 204, 112, .28);
  border-radius: 8px;
  background: rgba(5, 12, 15, .48);
}
.blacksmith-wallet strong { color: #ffe28d; font-size: clamp(.78rem, 1.35vmin, .98rem); }
.blacksmith-wallet span { color: #c7d7d5; font-size: clamp(.57rem, .95vmin, .69rem); }
.blacksmith-wallet small { color: #70deb4; font-size: clamp(.52rem, .85vmin, .64rem); font-weight: 800; text-transform: uppercase; }

.blacksmith-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1.25vmin, 13px);
  overflow: hidden;
}

.blacksmith-page-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.blacksmith-page-tabs button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(129, 159, 162, .34);
  border-radius: 8px;
  color: #b9c8c7;
  background: rgba(12, 24, 28, .9);
  font-weight: 900;
}
.blacksmith-page-tabs button.active {
  border-color: rgba(239, 190, 91, .72);
  color: #fff0b7;
  background: linear-gradient(180deg, rgba(132, 78, 34, .92), rgba(70, 44, 28, .94));
}
.blacksmith-view[hidden] { display: none !important; }

.blacksmith-upgrade-panel,
.blacksmith-refinery-panel,
.blacksmith-commerce-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(8px, 1.25vmin, 12px);
  border: 1px solid rgba(129, 159, 162, .31);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 29, 33, .96), rgba(8, 17, 21, .97));
  overflow: hidden;
}

.blacksmith-section-heading {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.blacksmith-section-heading h3 { margin: 0; font-size: clamp(.84rem, 1.55vmin, 1.08rem); }
.blacksmith-section-heading > span {
  padding: 3px 7px;
  border: 1px solid rgba(103, 210, 177, .28);
  border-radius: 999px;
  color: #83d9bd;
  background: rgba(32, 99, 84, .18);
  font-size: clamp(.52rem, .9vmin, .65rem);
  font-weight: 800;
}

.blacksmith-rule {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid #d9a64e;
  color: #b9c7c7;
  background: rgba(218, 163, 73, .07);
  font-size: clamp(.55rem, .92vmin, .68rem);
  line-height: 1.25;
}

.blacksmith-equipment-grid,
.blacksmith-recipe-grid {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.blacksmith-equipment-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 5px;
  padding: 1px 4px 4px 1px;
}

.blacksmith-equipment-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(122, 151, 155, .27);
  border-radius: 7px;
  color: #e9f1f0;
  background: rgba(28, 44, 48, .62);
  text-align: left;
}
.blacksmith-equipment-card:hover,
.blacksmith-equipment-card:focus-visible { border-color: rgba(233, 183, 85, .72); background: rgba(57, 61, 49, .72); }
.blacksmith-equipment-card.selected { border-color: var(--item-rarity-color, #f0c369); box-shadow: inset 3px 0 var(--item-rarity-color, #f0c369); }
.blacksmith-equipment-card .inventory-item-icon { width: 31px; height: 31px; }
.blacksmith-equipment-card span { min-width: 0; display: grid; gap: 1px; }
.blacksmith-equipment-card b { overflow: hidden; color: var(--item-rarity-color, #eef5f4); font-size: clamp(.58rem, 1vmin, .72rem); line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.blacksmith-equipment-card small { overflow: hidden; color: #91a5a5; font-size: clamp(.49rem, .82vmin, .6rem); text-overflow: ellipsis; white-space: nowrap; }
.blacksmith-equipment-card em { color: #f6cc75; font-size: clamp(.52rem, .88vmin, .64rem); font-style: normal; font-weight: 900; }
.blacksmith-empty { grid-column: 1 / -1; margin: 20px 6px; color: #9cadad; text-align: center; }

.blacksmith-selection {
  flex: 0 0 auto;
  min-height: 114px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px 9px;
  padding: 9px;
  border: 1px solid rgba(223, 179, 91, .33);
  border-radius: 8px;
  background: rgba(8, 14, 17, .72);
}
.blacksmith-selected-icon { display: grid; place-items: start center; }
.blacksmith-selected-icon .inventory-item-icon { width: 44px; height: 44px; }
.blacksmith-selected-copy { min-width: 0; display: grid; align-content: start; gap: 3px; }
.blacksmith-selected-copy > strong { font-size: clamp(.69rem, 1.15vmin, .86rem); }
.blacksmith-selected-copy > small { color: #91a4a5; font-size: clamp(.52rem, .87vmin, .64rem); }
.blacksmith-selected-copy > p { margin: 2px 0 0; color: #d5e0de; font-size: clamp(.54rem, .92vmin, .67rem); }
.blacksmith-selected-copy > p span { color: #8ea09e; padding-inline: 3px; }
.blacksmith-selected-copy > p small { color: #df8f8f; }
.blacksmith-power-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 5px; }
.blacksmith-power-preview > div { min-width: 0; display: grid; gap: 1px; padding: 5px 6px; border-radius: 5px; background: rgba(71, 91, 93, .2); }
.blacksmith-power-preview > div.next { background: rgba(46, 125, 102, .2); }
.blacksmith-power-preview small { color: #8fa3a4; font-size: clamp(.47rem, .76vmin, .56rem); font-weight: 900; }
.blacksmith-power-preview strong { color: #f1d582; font-size: clamp(.59rem, .96vmin, .7rem); }
.blacksmith-power-preview span { overflow-wrap: anywhere; color: #b8c6c6; font-size: clamp(.48rem, .78vmin, .58rem); line-height: 1.16; }
.blacksmith-power-preview > i { align-self: center; color: #e9b85e; font-size: 1.15rem; font-style: normal; }
.blacksmith-effect-evolution {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  padding: 6px 7px;
  border: 1px solid rgba(242, 194, 96, .28);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(119, 70, 27, .28), rgba(38, 105, 83, .22));
}
.blacksmith-effect-evolution > small { grid-column: 1 / -1; color: #e7bb62; letter-spacing: .06em; }
.blacksmith-effect-evolution > em { color: #aebdbc; font-size: clamp(.49rem, .8vmin, .59rem); font-style: normal; font-weight: 800; }
.blacksmith-effect-evolution > strong { color: #ffe19a; font-size: clamp(.58rem, .94vmin, .69rem); }
.blacksmith-effect-evolution > span { grid-column: 1 / -1; color: #c9d7d4; }
.blacksmith-effect-evolution.mastered { grid-template-columns: 1fr; border-color: rgba(107, 224, 177, .3); background: rgba(33, 105, 81, .2); }
.blacksmith-effect-evolution.mastered > * { grid-column: 1; }
.blacksmith-primary-action { grid-column: 1 / -1; min-height: 32px; margin: 0; border-color: rgba(240, 190, 91, .58); color: #fff1bf; background: linear-gradient(180deg, #8e5426, #58351f); font-size: clamp(.61rem, 1.02vmin, .74rem); }
.blacksmith-primary-action:disabled { opacity: .46; filter: grayscale(.4); }

.blacksmith-band-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.blacksmith-band-tab { min-width: 0; min-height: 29px; padding: 3px 2px; border-color: rgba(118, 151, 154, .3); color: #aebfbe; background: rgba(24, 40, 44, .7); font-size: clamp(.48rem, .82vmin, .61rem); }
.blacksmith-band-tab.active { border-color: #dfa951; color: #fff0b2; background: rgba(126, 78, 35, .58); }

.blacksmith-recipe-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  padding: 1px 4px 4px 1px;
}
.blacksmith-recipe-card { min-width: 0; display: grid; gap: 5px; padding: 7px; border: 1px solid rgba(126, 157, 159, .26); border-radius: 7px; background: rgba(26, 42, 46, .65); }
.blacksmith-recipe-card.ascension { grid-column: 1 / -1; border-color: rgba(209, 126, 238, .45); background: radial-gradient(circle at 90% 0, rgba(175, 85, 210, .14), transparent 42%), rgba(34, 31, 52, .72); }
.blacksmith-recipe-card > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.blacksmith-recipe-card > header .inventory-item-icon { width: 32px; height: 32px; }
.blacksmith-recipe-card > header div { min-width: 0; display: grid; gap: 1px; }
.blacksmith-recipe-card > header small { color: #dfa951; font-size: clamp(.46rem, .77vmin, .56rem); font-weight: 900; }
.blacksmith-recipe-card > header strong { overflow-wrap: anywhere; color: #eaf2f0; font-size: clamp(.57rem, .94vmin, .69rem); line-height: 1.1; }
.blacksmith-recipe-card > header em { color: #87a09f; font-size: clamp(.46rem, .76vmin, .55rem); font-style: normal; }
.blacksmith-ingredients { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 4px; }
.blacksmith-ingredients > span { min-width: 0; display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; align-items: center; gap: 0 4px; padding: 3px 4px; border-radius: 5px; background: rgba(4, 11, 14, .46); }
.blacksmith-ingredients .inventory-item-icon { grid-row: 1 / 3; width: 21px; height: 21px; }
.blacksmith-ingredients b { font-size: clamp(.5rem, .82vmin, .61rem); }
.blacksmith-ingredients small { overflow: hidden; color: #91a3a3; font-size: clamp(.43rem, .7vmin, .52rem); text-overflow: ellipsis; white-space: nowrap; }
.blacksmith-ingredients span.ready b { color: #75d6ae; }
.blacksmith-ingredients span.missing b { color: #ef8983; }
.blacksmith-craft-button { min-height: 28px; margin: 0; border-color: rgba(98, 192, 161, .36); color: #d8fff1; background: rgba(32, 96, 78, .48); font-size: clamp(.53rem, .87vmin, .65rem); }
.blacksmith-craft-button:disabled { opacity: .4; }
.blacksmith-refinery-note { flex: 0 0 auto; display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; color: #b8c6c5; background: rgba(87, 48, 105, .18); font-size: clamp(.49rem, .82vmin, .61rem); }
.blacksmith-refinery-note strong { color: #e5b8f5; }

.blacksmith-equipment-grid::-webkit-scrollbar,
.blacksmith-recipe-grid::-webkit-scrollbar { width: 8px; }
.blacksmith-equipment-grid::-webkit-scrollbar-thumb,
.blacksmith-recipe-grid::-webkit-scrollbar-thumb { border: 2px solid rgba(5, 12, 17, .55); border-radius: 999px; background: rgba(147, 181, 194, .46); }

@media (max-height: 700px) and (min-width: 721px) {
  .blacksmith-header { padding: 6px 9px; }
  .blacksmith-header p { display: none; }
  .blacksmith-layout { gap: 6px; }
  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel { gap: 5px; padding: 6px; }
  .blacksmith-rule { padding: 4px 6px; }
  .blacksmith-selection { min-height: 92px; padding: 6px; }
  .blacksmith-recipe-card { padding: 5px; gap: 3px; }
}

@media (max-width: 720px) {
  .blacksmith-page { height: auto; max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
  .blacksmith-header { grid-template-columns: 1fr; }
  .blacksmith-wallet { min-width: 0; grid-template-columns: repeat(3, auto); justify-content: space-between; justify-items: start; }
  .blacksmith-layout { flex: 0 0 auto; grid-template-columns: 1fr; overflow: visible; }
  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel { min-height: 430px; }
  .blacksmith-equipment-grid,
  .blacksmith-recipe-grid { max-height: 250px; }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020609;
  overscroll-behavior: none;
}

button,
canvas {
  -webkit-tap-highlight-color: transparent;
}

.controls-hint {
  position: absolute;
  z-index: 5;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(42vw, 650px);
  color: rgba(235, 244, 252, 0.88);
  font-size: clamp(0.58rem, 0.72vw, 0.74rem);
  font-weight: 750;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}

.controls-hint span {
  padding: 5px 8px;
  border: 1px solid rgba(177, 207, 226, 0.22);
  border-radius: 7px;
  background: rgba(4, 12, 19, 0.72);
  backdrop-filter: blur(5px);
}

.controls-hint kbd {
  margin-right: 3px;
  color: #ffe38d;
  font: inherit;
  font-weight: 1000;
}

.game-frame.menu-open .controls-hint { display: none; }

@media (max-width: 1050px), (max-height: 620px) {
  .controls-hint { display: none; }
}

.app-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: stretch;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  background: #020609;
}

.game-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #071018;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  /* Os personagens, monstros e efeitos são ilustração procedural vetorial.
     O upscale nearest-neighbor deixava curvas e diagonais serrilhadas. */
  image-rendering: auto;
}

.resource-panel {
  position: absolute;
  z-index: 4;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  width: clamp(185px, 21vw, 330px);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
}

.resource-bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: clamp(2px, 0.12vw, 3px) solid rgba(8, 12, 16, 0.94);
  background: #121820;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.resource-bar strong {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: clamp(0.66rem, 1.05vw, 1.05rem);
  font-weight: 1000;
  letter-spacing: 0.012em;
  line-height: 1;
  text-shadow:
    -1px -1px 0 rgba(25, 28, 32, 0.96),
    1px -1px 0 rgba(25, 28, 32, 0.96),
    -1px 1px 0 rgba(25, 28, 32, 0.96),
    1px 1px 0 rgba(25, 28, 32, 0.96);
}

.resource-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transition: width 100ms linear;
}

.resource-fill::after {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 22%;
  background: rgba(255, 255, 255, 0.22);
}

.health-bar {
  height: clamp(24px, 2.15vw, 34px);
  border-radius: 6px 6px 2px 2px;
}

.health-bar .resource-fill {
  background: #ed2336;
}

.mana-bar {
  height: clamp(14px, 1.22vw, 20px);
  margin-top: -2px;
  border-radius: 2px;
}

.experience-bar {
  height: clamp(5px, 0.48vw, 7px);
  margin-top: -2px;
  border-width: 1px;
  border-radius: 1px 1px 5px 5px;
  background: #555c64;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.experience-bar .resource-fill {
  width: 0;
  background: linear-gradient(90deg, #f1f3f5, #ffffff);
}

.experience-bar .resource-fill::after {
  display: none;
}

.pressure-hud {
  position: relative;
  overflow: hidden;
  height: clamp(12px, 1vw, 16px);
  margin-top: 4px;
  border: 2px solid rgba(8, 12, 16, 0.94);
  border-radius: 3px;
  background: rgba(26, 27, 31, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.pressure-hud[hidden] { display: none; }

.pressure-hud-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #e0b83f, #e46d35 72%, #d7313b);
  transition: width 90ms linear;
}

.pressure-hud strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff3c1;
  font-size: clamp(0.48rem, 0.62vw, 0.64rem);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 rgba(30, 20, 15, 0.95);
}

.pressure-hud.ruptured {
  border-color: rgba(255, 102, 79, 0.9);
  animation: rupture-hud-pulse 340ms ease-in-out infinite alternate;
}

@keyframes rupture-hud-pulse {
  to { filter: brightness(1.35); transform: scaleX(1.012); }
}

.mana-bar strong {
  font-size: clamp(0.52rem, 0.72vw, 0.76rem);
}

.mana-bar .resource-fill {
  background: #20c6e8;
}

.hud {
  position: absolute;
  top: max(70px, calc(env(safe-area-inset-top) + 64px));
  left: max(8px, env(safe-area-inset-left));
  display: grid;
  width: clamp(112px, 7.7vw, 148px);
  grid-template-columns: 1fr;
  gap: 8px;
  pointer-events: none;
}

.hud > div {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(5, 12, 19, 0.82);
  backdrop-filter: blur(8px);
}

.hud span,
.hud strong {
  display: block;
}

.hud span {
  color: #9cb0c2;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud strong {
  margin-top: 2px;
  color: #fff;
  font-size: 0.88rem;
}

.fullscreen-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(5, 12, 19, 0.84);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

/* V36.36.1 — mapa amplo, aberto sob demanda ao lado da espada de PvP. */
.world-map-button {
  position:absolute; z-index:9; top:max(8px,env(safe-area-inset-top));
  right:calc(max(10px,env(safe-area-inset-right)) + clamp(148px,14.2vw,210px));
  display:grid; place-items:center; width:clamp(42px,4.1vw,62px); height:clamp(42px,4.1vw,62px);
  padding:0; border:0; background:transparent; color:#e4dcc3; cursor:pointer; touch-action:manipulation;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.82)); transition:color .14s ease,filter .14s ease,transform .12s ease;
}
.world-map-button:hover { color:#fff2c4; filter:brightness(1.14) drop-shadow(0 3px 3px rgba(0,0,0,.88)); }
.world-map-button:active { transform:translateY(1px) scale(.97); }
.world-map-icon { width:74%; height:74%; overflow:visible; }
.game-frame.menu-open .world-map-button,.game-frame.login-open .world-map-button,.game-frame.map-open .world-map-button { display:none!important; }
.world-map-overlay[hidden] { display:none!important; }
.world-map-overlay { position:absolute; z-index:96; inset:0; display:grid; place-items:center; padding:clamp(8px,2vw,28px); }
.world-map-overlay__backdrop { position:absolute; inset:0; background:rgba(3,8,10,.9); backdrop-filter:blur(6px) saturate(.68); }
.world-map-window {
  position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); width:min(1500px,96vw); height:min(920px,94dvh);
  overflow:hidden; border:1px solid rgba(226,215,177,.42); border-radius:12px; background:#293733;
  box-shadow:0 26px 90px rgba(0,0,0,.75),inset 0 0 0 4px rgba(11,18,18,.55); animation:world-map-enter .18s ease-out both;
}
@keyframes world-map-enter { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:none} }
.world-map-window__header { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:52px; padding:8px 12px 8px 18px; border-bottom:1px solid rgba(226,215,177,.22); background:linear-gradient(180deg,#27332f,#1d2926); }
.world-map-window__eyebrow { color:#a9b4ac; font:900 9px/1 system-ui,sans-serif; letter-spacing:.18em; }
.world-map-window__header strong { overflow:hidden; color:#f4edda; font:900 clamp(15px,1.7vw,23px)/1.1 Georgia,serif; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.world-map-close { width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(4,10,11,.68); color:#f8f1dd; font:400 25px/1 Georgia,serif; cursor:pointer; }
.world-map-close:hover { background:rgba(89,54,38,.86); }
.world-map-canvas-wrap { position:relative; min-height:0; overflow:hidden; background:#4b5a54; }
.world-map-canvas-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(8,15,14,.38); }
#worldMapCanvas { display:block; width:100%; height:100%; }
.world-map-compass { position:absolute; right:18px; bottom:15px; display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(246,235,199,.4); border-radius:50%; color:#f4e7bc; background:rgba(17,27,25,.62); box-shadow:0 3px 12px rgba(0,0,0,.3); }
.world-map-compass b { transform:translateY(-5px); font:900 10px/1 Georgia,serif; }
.world-map-compass i { position:absolute; top:17px; width:0; height:0; border-right:5px solid transparent; border-bottom:12px solid #d8b964; border-left:5px solid transparent; transform:translateY(-10px); }
@media (max-height:620px) {
  .world-map-button { top:max(5px,env(safe-area-inset-top)); right:calc(max(7px,env(safe-area-inset-right)) + 140px); width:38px; height:38px; }
  .world-map-overlay { padding:max(4px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)); }
  .world-map-window { width:100%; height:100%; border-radius:8px; }
  .world-map-window__header { min-height:38px; padding:3px 7px 3px 12px; }
  .world-map-close { width:32px; height:32px; }
}

.world-builder-button {
  position: absolute;
  z-index: 10;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(66px, calc(env(safe-area-inset-bottom) + 54px));
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(106, 211, 224, 0.32);
  border-radius: 10px;
  background: rgba(7, 28, 36, 0.9);
  color: #e9fbff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.world-builder-button kbd {
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.7rem;
}

.world-builder-button:hover {
  background: rgba(19, 64, 76, 0.96);
}

.world-builder-button:active {
  transform: translateY(1px);
}

.fullscreen-button:hover {
  background: rgba(24, 46, 63, 0.92);
}

.fullscreen-button:active {
  transform: translateY(1px);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 76px));
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(5, 12, 19, 0.86);
  color: #e9f4ff;
  font-size: 0.8rem;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;
  backdrop-filter: blur(8px);
}

.toast.hidden {
  opacity: 0;
}

.orientation-warning {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: rgba(3, 9, 14, 0.94);
  text-align: center;
}

.orientation-warning strong {
  font-size: 1.25rem;
}

.orientation-warning span {
  max-width: 310px;
  color: #adbdca;
}

@media (orientation: portrait) and (max-width: 900px) {
  .orientation-warning {
    display: flex;
  }
}

@media (max-height: 620px) {
  .resource-panel {
    top: max(5px, env(safe-area-inset-top));
    left: max(5px, env(safe-area-inset-left));
    width: clamp(170px, 25vw, 270px);
  }

  .hud {
    top: max(58px, calc(env(safe-area-inset-top) + 53px));
    left: max(5px, env(safe-area-inset-left));
    width: clamp(82px, 7.7vw, 132px);
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hud > div {
    min-width: 0;
    padding: 5px 8px;
    border-radius: 8px;
  }

  .hud span {
    font-size: 0.5rem;
  }

  .hud strong {
    font-size: 0.68rem;
  }

  .fullscreen-button {
    top: max(7px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .toast {
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 60px));
    padding: 6px 10px;
    font-size: 0.66rem;
  }
}

/* Menu sobreposto --------------------------------------------------------- */
.outlined-text,
.outlined-icon {
  color: #ffffff;
  text-shadow:
    -2px -2px 0 #30363d,
    0 -2px 0 #30363d,
    2px -2px 0 #30363d,
    -2px 0 0 #30363d,
    2px 0 0 #30363d,
    -2px 2px 0 #30363d,
    0 2px 0 #30363d,
    2px 2px 0 #30363d;
}

.menu-button,
.menu-back-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.menu-button {
  position: absolute;
  z-index: 9;
  top: max(8px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: clamp(42px, 4.1vw, 62px);
  height: clamp(42px, 4.1vw, 62px);
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  line-height: 1;
}

.menu-button:hover,
.menu-back-button:hover,
.menu-entry:hover {
  filter: brightness(1.18);
}

.menu-button:active,
.menu-back-button:active,
.menu-entry:active {
  transform: translateY(1px) scale(0.98);
}

.fullscreen-button {
  top: auto;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
}

.menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 9, 0.52);
  pointer-events: auto;
  touch-action: none;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-back-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: clamp(48px, 5vw, 76px);
  height: clamp(48px, 5vw, 76px);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1;
}

.menu-window {
  width: min(88%, 860px);
  min-height: min(62%, 520px);
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 54px);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(7, 13, 18, 0.76);
  box-shadow: inset 0 0 0 2px rgba(42, 48, 55, 0.72);
}

.menu-page {
  width: min(100%, 390px);
  text-align: center;
}

.menu-page[hidden] {
  display: none;
}

.menu-page h2 {
  margin: 0 0 clamp(22px, 4vh, 42px);
  font-size: clamp(1.75rem, 4vw, 3.3rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
}

.menu-entry {
  width: 100%;
  min-height: clamp(58px, 8vh, 82px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(31, 38, 44, 0.72);
  color: #ffffff;
  font: inherit;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 1000;
  cursor: pointer;
}

.status-list {
  display: grid;
  gap: clamp(8px, 1.7vh, 17px);
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 2rem);
  font-weight: 1000;
  text-align: left;
}

.status-list > div {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto;
  gap: 20px;
}

.status-list dt,
.status-list dd {
  margin: 0;
}

.status-list dd {
  text-align: right;
}

.game-frame.menu-open canvas {
  pointer-events: none;
}

@media (max-height: 620px) {
  .menu-button {
    top: max(4px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
  }

  .fullscreen-button {
    top: auto;
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
  }

  .world-builder-button {
    right: max(7px, env(safe-area-inset-right));
    bottom: max(57px, calc(env(safe-area-inset-bottom) + 50px));
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .menu-window {
    min-height: 72%;
    padding: 18px 34px;
  }

  .menu-page h2 {
    margin-bottom: 18px;
  }

  .status-list {
    gap: 6px;
  }
}

/* Painel de diagnóstico: F3 ------------------------------------------------ */
.debug-panel {
  position: absolute;
  z-index: 30;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px));
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(3, 8, 12, 0.88);
  color: #d9f1ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  line-height: 1.45;
  white-space: pre;
  pointer-events: none;
}

/* Progressão V12 ---------------------------------------------------------- */
.level-badge {
  display: inline-grid;
  place-items: center;
  min-width: clamp(52px, 5vw, 74px);
  height: clamp(20px, 1.85vw, 29px);
  margin: 0 0 4px;
  padding: 0 8px;
  border: 2px solid rgba(13, 17, 23, 0.92);
  border-radius: 5px;
  background: rgba(28, 35, 43, 0.88);
  font-size: clamp(0.62rem, 0.9vw, 0.92rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
  line-height: 1;
}

@media (max-height: 620px) {
  .level-badge {
    height: 18px;
    margin-bottom: 2px;
    font-size: 0.58rem;
  }
}

/* Inventário V15 ---------------------------------------------------------- */
.menu-entry-list {
  display: grid;
  gap: clamp(10px, 1.8vh, 18px);
}

.inventory-page {
  width: min(100%, 760px);
}

.inventory-page h2 {
  margin-bottom: clamp(12px, 2.2vh, 24px);
}

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(200px, 0.72fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 10px);
  align-content: start;
}

.inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(20, 29, 37, 0.86);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.55),
    inset 0 -7px 0 rgba(0, 0, 0, 0.12);
  touch-action: manipulation;
}

.inventory-slot:hover {
  background: rgba(40, 55, 68, 0.92);
}

.inventory-slot.occupied {
  border-color: rgba(216, 231, 242, 0.44);
}

.inventory-slot.selected {
  border-color: #f2d467;
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.62),
    0 0 0 3px rgba(242, 212, 103, 0.25);
}

.inventory-slot strong {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: #ffffff;
  font-size: clamp(0.68rem, 1.1vw, 0.96rem);
  font-weight: 1000;
  text-shadow:
    -1px -1px 0 #252b31,
    1px -1px 0 #252b31,
    -1px 1px 0 #252b31,
    1px 1px 0 #252b31;
}

.inventory-slot-number {
  color: rgba(255, 255, 255, 0.2);
  font-size: clamp(0.62rem, 0.9vw, 0.82rem);
  font-weight: 900;
}

.material-pouch {
  margin-top: clamp(10px, 1.4vh, 16px);
  padding-top: 10px;
  border-top: 1px solid rgba(131, 209, 191, 0.22);
}

.material-pouch-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.material-pouch-heading h4 {
  margin: 0;
  color: #bdf0db;
  font-size: clamp(0.78rem, 1vw, 0.94rem);
}

.material-pouch-heading strong {
  color: #82cbb5;
  font-size: clamp(0.62rem, 0.82vw, 0.78rem);
}

.material-pouch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: min(21vh, 180px);
  padding-right: 3px;
  overflow-y: auto;
}

.material-pouch-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(12, 25, 30, 0.72);
  color: rgba(221, 232, 231, 0.55);
}

.material-pouch-item.collected {
  border-color: rgba(116, 221, 190, 0.38);
  background: rgba(17, 47, 47, 0.88);
  color: #effff9;
}

.material-pouch-item .inventory-item-icon {
  width: 30px;
  height: 30px;
  filter: saturate(.55) opacity(.58);
}

.material-pouch-item.collected .inventory-item-icon {
  filter: drop-shadow(0 0 4px rgba(117, 225, 193, .25));
}

.material-pouch-item span {
  display: grid;
  min-width: 0;
}

.material-pouch-item b,
.material-pouch-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-pouch-item b { font-size: clamp(.58rem, .72vw, .7rem); }
.material-pouch-item small { font-size: clamp(.48rem, .62vw, .58rem); text-transform: capitalize; opacity: .65; }
.material-pouch-item > strong { color: #d6ffed; font-size: clamp(.72rem, .9vw, .86rem); }

.inventory-item-icon {
  position: relative;
  display: block;
  width: clamp(25px, 3vw, 42px);
  height: clamp(25px, 3vw, 42px);
  image-rendering: pixelated;
  overflow: visible;
  transform-origin: center center;
}

.inventory-slot .inventory-item-icon {
  width: clamp(23px, 2.7vw, 36px);
  height: clamp(23px, 2.7vw, 36px);
  margin-bottom: 3px;
  justify-self: center;
  align-self: center;
}

.inventory-slot .inventory-item-icon[data-item-icon$="belt"] {
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(18px, 1.9vw, 24px);
}

.inventory-slot .inventory-item-icon[data-item-icon$="glove"],
.inventory-slot .inventory-item-icon[data-item-icon$="pants"] {
  width: clamp(24px, 2.85vw, 34px);
  height: clamp(24px, 2.85vw, 34px);
}

.inventory-details {
  min-width: 0;
  padding: clamp(14px, 2vw, 22px);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(15, 23, 30, 0.76);
  text-align: left;
}

.inventory-details h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2vw, 1.45rem);
}

.inventory-details strong {
  display: block;
  min-height: 1.3em;
  color: #f0d16a;
  font-size: clamp(0.78rem, 1.35vw, 1rem);
}

.inventory-details p {
  margin: 14px 0;
  color: #ffffff;
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  line-height: 1.45;
  white-space: pre-line;
}

.inventory-details small {
  display: block;
  color: #c6d0d8;
  font-size: clamp(0.68rem, 1vw, 0.84rem);
  line-height: 1.35;
}

@media (max-width: 760px), (max-height: 620px) {
  .menu-window {
    width: min(92%, 860px);
    min-height: min(78%, 520px);
    padding: 14px 26px;
  }

  .inventory-layout {
    grid-template-columns: minmax(220px, 1fr) minmax(155px, 0.62fr);
    gap: 12px;
  }

  .inventory-grid {
    gap: 5px;
  }

  .inventory-slot {
    border-radius: 6px;
  }

  .inventory-details {
    padding: 10px 12px;
  }

  .inventory-details p {
    margin: 8px 0;
  }
}

/* Equipamentos e mochilas V16 -------------------------------------------- */
.inventory-page {
  width: min(100%, 1060px);
}

.game-menu-window {
  width: min(94%, 1160px);
  min-height: min(76%, 690px);
  padding: clamp(18px, 2.5vw, 34px);
}

.inventory-layout-v16 {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.06fr) minmax(210px, 0.76fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}

.equipment-panel,
.backpack-panel {
  min-width: 0;
  padding: clamp(11px, 1.4vw, 17px);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(15, 23, 30, 0.76);
}

.equipment-panel > h3,
.backpack-heading h3 {
  margin: 0;
  font-size: clamp(0.9rem, 1.55vw, 1.25rem);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(58px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.equipment-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(20, 29, 37, 0.9);
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.55),
    inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  touch-action: manipulation;
}

.equipment-slot[hidden] {
  display: none;
}

.equipment-slot:hover,
.equipment-slot.selected {
  background: rgba(40, 55, 68, 0.95);
}

.equipment-slot.selected {
  border-color: #f2d467;
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.62),
    0 0 0 3px rgba(242, 212, 103, 0.25);
}

.equipment-slot small,
.equipment-placeholder {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.46rem, 0.6vw, 0.6rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #20262d;
}

.equipment-placeholder {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.24);
}

.equipment-slot--weapon { grid-column: 1; grid-row: 1; }
.equipment-slot--offhand-weapon { grid-column: 1; grid-row: 2; }
.equipment-slot--shield { grid-column: 1; grid-row: 2; }
.equipment-slot--quiver { grid-column: 1; grid-row: 2; }
.equipment-slot--focus { grid-column: 1; grid-row: 2; }
.equipment-slot--relic { grid-column: 1; grid-row: 2; }
.equipment-slot--necklace { grid-column: 2; grid-row: 1; }
.equipment-slot--glove-left { grid-column: 2; grid-row: 2; }
.equipment-slot--ring { grid-column: 2; grid-row: 3; }
.equipment-slot--helmet { grid-column: 3; grid-row: 1; }
.equipment-slot--armor { grid-column: 3; grid-row: 2; }
.equipment-slot--pants { grid-column: 3; grid-row: 3; }
.equipment-slot--boots { grid-column: 3; grid-row: 4; }
.equipment-slot--backpack { grid-column: 4; grid-row: 1; }
.equipment-slot--glove-right { grid-column: 4; grid-row: 2; }
.equipment-slot--belt { grid-column: 4; grid-row: 3; }
.equipment-slot--fishing-rod { grid-column: 4; grid-row: 4; }

.equipment-slot .inventory-item-icon {
  width: clamp(24px, 2.25vw, 32px);
  height: clamp(24px, 2.25vw, 32px);
  margin-bottom: 12px;
  align-self: center;
  justify-self: center;
}

.equipment-slot--weapon .inventory-item-icon,
.equipment-slot--shield .inventory-item-icon,
.equipment-slot--quiver .inventory-item-icon,
.equipment-slot--focus .inventory-item-icon,
.equipment-slot--relic .inventory-item-icon,
.equipment-slot--backpack .inventory-item-icon {
  width: clamp(26px, 2.45vw, 36px);
  height: clamp(26px, 2.45vw, 36px);
}

.equipment-slot .inventory-item-icon[data-item-icon$="belt"] {
  width: clamp(28px, 2.65vw, 38px);
  height: clamp(19px, 1.8vw, 24px);
}

.equipment-slot .inventory-item-icon[data-item-icon$="glove"],
.equipment-slot .inventory-item-icon[data-item-icon$="pants"] {
  width: clamp(24px, 2.35vw, 32px);
  height: clamp(24px, 2.35vw, 32px);
}

.equipment-slot--backpack .inventory-item-icon {
  margin-bottom: 10px;
  transform: scale(1.08);
}

.equipment-panel {
  min-height: 100%;
}


.backpack-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.backpack-heading strong {
  color: #e7cf75;
  font-size: clamp(0.62rem, 0.92vw, 0.82rem);
  text-align: right;
}

.quiver-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(123, 210, 190, 0.3);
}

.quiver-panel[hidden] {
  display: none;
}

.quiver-heading strong {
  color: #8fe0c7;
}

.quiver-grid {
  max-height: min(29vh, 250px);
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-color: rgba(111, 211, 185, 0.58) rgba(7, 14, 19, 0.5);
}

.quiver-grid .inventory-slot {
  border-color: rgba(111, 211, 185, 0.25);
  background: rgba(13, 33, 36, 0.88);
}

.quiver-grid .inventory-slot.occupied {
  border-color: rgba(124, 228, 198, 0.58);
}

.inventory-layout-v16 .inventory-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(5px, 0.65vw, 8px);
}

.inventory-layout-v16 .inventory-slot {
  min-height: 44px;
}

.inventory-details b {
  display: block;
  min-height: 1.4em;
  margin: 0 0 12px;
  color: #9fe3ff;
  font-size: clamp(0.7rem, 1vw, 0.88rem);
  line-height: 1.35;
}

.inventory-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
}

.inventory-action-row .inventory-action-button {
  margin-bottom: 0;
}

.inventory-drop-button {
  background: rgba(108, 65, 52, 0.9);
  border-color: rgba(232, 169, 134, 0.34);
}

.inventory-drop-button:hover {
  background: rgba(137, 77, 58, 0.98);
}

.inventory-action-button {
  width: 100%;
  min-height: 42px;
  margin: 0 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(49, 77, 96, 0.88);
  color: #fff;
  font: inherit;
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  font-weight: 1000;
  cursor: pointer;
}

.inventory-action-button:hover {
  background: rgba(68, 103, 127, 0.96);
}

/* Ícones procedurais de equipamento -------------------------------------- */
.inventory-item-icon--training-sword::before,
.inventory-item-icon--training-sword::after,
.inventory-item-icon--training-shield::before,
.inventory-item-icon--training-shield::after,
.inventory-item-icon--training-helmet::before,
.inventory-item-icon--training-helmet::after,
.inventory-item-icon--training-armor::before,
.inventory-item-icon--training-armor::after,
.inventory-item-icon--training-boots::before,
.inventory-item-icon--training-boots::after,
.inventory-item-icon--simple-sack::before,
.inventory-item-icon--simple-sack::after,
.inventory-item-icon--traveler-bag::before,
.inventory-item-icon--traveler-bag::after,
.inventory-item-icon--adventurer-backpack::before,
.inventory-item-icon--adventurer-backpack::after,
.inventory-item-icon--giant-backpack::before,
.inventory-item-icon--giant-backpack::after {
  content: "";
  position: absolute;
}

.inventory-item-icon--training-sword::before {
  left: 47%; top: 1px; width: 6px; height: 34px;
  border: 2px solid #e7fdff;
  background: #88dff8;
  transform: rotate(42deg);
  box-shadow: 2px 2px 0 rgba(10, 18, 24, 0.55);
}
.inventory-item-icon--training-sword::after {
  left: 9px; bottom: 7px; width: 21px; height: 5px;
  background: #e3c05b;
  transform: rotate(42deg);
  box-shadow: 0 5px 0 -1px #6f4e33;
}

.inventory-item-icon--training-shield::before {
  inset: 4px 6px 3px;
  border: 4px solid #e3c05b;
  border-radius: 8px 8px 14px 14px;
  background: #507ba8;
  clip-path: polygon(0 0, 100% 0, 94% 62%, 50% 100%, 6% 62%);
  filter: drop-shadow(2px 2px 0 rgba(20, 25, 31, 0.62));
}
.inventory-item-icon--training-shield::after {
  left: 48%; top: 8px; width: 3px; height: 24px;
  background: #8ab4dc;
  box-shadow: -8px 9px 0 -1px #294b71, 8px 9px 0 -1px #294b71;
}

.inventory-item-icon--training-helmet::before {
  inset: 5px 5px 9px;
  border: 3px solid #687788;
  border-radius: 13px 13px 5px 5px;
  background: #a7b6c6;
  box-shadow: inset 0 5px 0 #dfe7f1, 2px 2px 0 rgba(20, 25, 31, 0.6);
}
.inventory-item-icon--training-helmet::after {
  left: 8px; right: 8px; bottom: 8px; height: 5px;
  background: #687788;
  box-shadow: 12px -25px 0 -4px #a43232;
}

.inventory-item-icon--training-armor::before {
  inset: 4px 7px 4px;
  border: 3px solid #687788;
  background: #a7b6c6;
  clip-path: polygon(18% 0, 82% 0, 100% 24%, 85% 100%, 15% 100%, 0 24%);
  box-shadow: inset 0 7px 0 #dfe7f1;
}
.inventory-item-icon--training-armor::after {
  left: 50%; top: 7px; width: 3px; height: 29px;
  background: #e3c05b;
  transform: translateX(-50%);
  box-shadow: -10px 14px 0 -1px #314054, 10px 14px 0 -1px #314054;
}

.inventory-item-icon--training-boots::before {
  left: 5px; bottom: 5px; width: 14px; height: 25px;
  border-radius: 3px 3px 7px 3px;
  background: #29313d;
  box-shadow: 18px 0 0 #29313d, 2px 2px 0 rgba(0, 0, 0, 0.45), 20px 2px 0 rgba(0, 0, 0, 0.45);
}
.inventory-item-icon--training-boots::after {
  left: 5px; bottom: 4px; width: 18px; height: 7px;
  border-radius: 2px;
  background: #1c212a;
  box-shadow: 18px 0 0 #1c212a;
}

.inventory-item-icon--simple-sack::before,
.inventory-item-icon--traveler-bag::before,
.inventory-item-icon--adventurer-backpack::before,
.inventory-item-icon--giant-backpack::before {
  inset: 5px 7px 3px;
  border: 3px solid #5f3e29;
  border-radius: 9px 9px 12px 12px;
  background: #9b6a40;
  box-shadow: inset 0 6px 0 #b98552, 2px 2px 0 rgba(15, 15, 17, 0.55);
}
.inventory-item-icon--simple-sack::after,
.inventory-item-icon--traveler-bag::after,
.inventory-item-icon--adventurer-backpack::after,
.inventory-item-icon--giant-backpack::after {
  left: 9px; right: 9px; top: 16px; height: 5px;
  border-radius: 2px;
  background: #714b2e;
  box-shadow: 9px 0 0 -1px #e3c05b;
}
.inventory-item-icon--traveler-bag::before { background: #805738; }
.inventory-item-icon--adventurer-backpack::before { inset: 3px 5px 2px; background: #684832; }
.inventory-item-icon--giant-backpack::before { inset: 1px 3px 1px; background: #50382a; }

@media (max-width: 920px), (max-height: 680px) {
  .game-menu-window {
    width: min(97%, 1160px);
    min-height: 86%;
    padding: 10px 18px;
  }

  .inventory-page h2 {
    margin-bottom: 8px;
    font-size: clamp(1rem, 2.4vw, 1.55rem);
  }

  .inventory-layout-v16 {
    grid-template-columns: minmax(230px, 0.84fr) minmax(250px, 1fr) minmax(170px, 0.68fr);
    gap: 8px;
  }

  .equipment-panel,
  .backpack-panel,
  .inventory-details {
    padding: 8px;
  }

  .equipment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(42px, 1fr));
    gap: 5px;
    margin-top: 6px;
  }

  .equipment-slot {
    min-height: 42px;
    border-radius: 6px;
  }

  .inventory-layout-v16 .inventory-slot {
    min-height: 36px;
  }

  .inventory-item-icon {
    width: clamp(22px, 2.7vw, 34px);
    height: clamp(22px, 2.7vw, 34px);
  }

  .equipment-slot .inventory-item-icon {
    width: clamp(19px, 2.2vw, 26px);
    height: clamp(19px, 2.2vw, 26px);
    margin-bottom: 10px;
  }

  .inventory-slot .inventory-item-icon[data-item-icon$="belt"],
  .equipment-slot .inventory-item-icon[data-item-icon$="belt"] {
    width: clamp(22px, 2.5vw, 30px);
    height: clamp(15px, 1.7vw, 20px);
  }

  .inventory-details p {
    margin: 6px 0;
  }

  .inventory-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
}

.inventory-action-row .inventory-action-button {
  margin-bottom: 0;
}

.inventory-drop-button {
  background: rgba(108, 65, 52, 0.9);
  border-color: rgba(232, 169, 134, 0.34);
}

.inventory-drop-button:hover {
  background: rgba(137, 77, 58, 0.98);
}

.inventory-action-button {
    min-height: 34px;
    margin-bottom: 6px;
  }
}

/* V18.1 — equipamentos encontrados e raridades ----------------------------- */
.inventory-slot.rarity-uncommon,
.equipment-slot.rarity-uncommon {
  border-color: rgba(114, 214, 127, 0.86);
}

.inventory-slot.rarity-rare,
.equipment-slot.rarity-rare {
  border-color: rgba(99, 169, 255, 0.94);
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.58),
    0 0 8px rgba(99, 169, 255, 0.28);
}

.inventory-slot.rarity-epic,
.equipment-slot.rarity-epic {
  border-color: rgba(199, 131, 255, 0.94);
}

.inventory-slot.rarity-legendary,
.equipment-slot.rarity-legendary {
  border-color: rgba(255, 191, 87, 0.98);
  background: radial-gradient(circle at 50% 45%, rgba(255, 239, 166, 0.34), rgba(255, 196, 76, 0.18) 55%, rgba(24, 26, 31, 0.96) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, 0.58),
    0 0 10px rgba(255, 191, 87, 0.28);
  animation: legendary-slot-pulse 1.45s ease-in-out infinite;
}

@keyframes legendary-slot-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(3, 7, 11, 0.58),
      0 0 8px rgba(255, 191, 87, 0.24),
      0 0 0 rgba(255, 214, 96, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(3, 7, 11, 0.52),
      0 0 14px rgba(255, 205, 102, 0.42),
      0 0 22px rgba(255, 218, 116, 0.18);
    filter: brightness(1.05);
  }
}

.inventory-item-icon--rusty-sword::before,
.inventory-item-icon--wooden-shield::before,
.inventory-item-icon--worn-helmet::before,
.inventory-item-icon--ragged-armor::before,
.inventory-item-icon--worn-boots::before,
.inventory-item-icon--small-pouch::before,
.inventory-item-icon--rusty-sword::after,
.inventory-item-icon--wooden-shield::after,
.inventory-item-icon--worn-helmet::after,
.inventory-item-icon--ragged-armor::after,
.inventory-item-icon--worn-boots::after,
.inventory-item-icon--small-pouch::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
}

.inventory-item-icon--rusty-sword::before {
  left: 46%;
  top: 2px;
  width: 6px;
  height: 31px;
  background: #8b9091;
  border: 2px solid #41484c;
  transform: rotate(42deg);
  transform-origin: 50% 80%;
  box-shadow: inset 2px 0 #c1c3be;
}
.inventory-item-icon--rusty-sword::after {
  left: 7px;
  bottom: 6px;
  width: 17px;
  height: 5px;
  background: #a67b45;
  border: 2px solid #513521;
  transform: rotate(42deg);
}

.inventory-item-icon--wooden-shield::before {
  inset: 3px 6px 2px;
  background: #96663a;
  border: 3px solid #5d3c25;
  clip-path: polygon(0 0, 100% 0, 94% 65%, 50% 100%, 6% 65%);
}
.inventory-item-icon--wooden-shield::after {
  left: 47%;
  top: 6px;
  width: 3px;
  height: 27px;
  background: #c29c62;
  box-shadow: -9px 10px 0 -1px #c29c62, 9px 10px 0 -1px #c29c62;
}

.inventory-item-icon--worn-helmet::before {
  inset: 5px 5px 8px;
  background: #7c8589;
  border: 3px solid #454f54;
  border-radius: 12px 12px 4px 4px;
}
.inventory-item-icon--worn-helmet::after {
  left: 8px;
  right: 8px;
  bottom: 9px;
  height: 5px;
  background: #a7acad;
  border: 2px solid #50595d;
}

.inventory-item-icon--ragged-armor::before {
  inset: 4px 7px 3px;
  background: #6c5d4e;
  border: 3px solid #3f372f;
  clip-path: polygon(20% 0, 80% 0, 100% 25%, 86% 100%, 14% 100%, 0 25%);
}
.inventory-item-icon--ragged-armor::after {
  left: 10px;
  right: 10px;
  top: 11px;
  height: 5px;
  background: #8f7c67;
  box-shadow: 0 10px 0 #70777a;
}

.inventory-item-icon--worn-boots::before {
  left: 5px;
  top: 8px;
  width: 12px;
  height: 24px;
  background: #65452f;
  border: 3px solid #39291f;
  box-shadow: 17px 0 0 #65452f, 20px 0 0 #39291f;
}
.inventory-item-icon--worn-boots::after {
  left: 3px;
  bottom: 4px;
  width: 17px;
  height: 7px;
  background: #8a603f;
  box-shadow: 18px 0 0 #8a603f;
}

.inventory-item-icon--small-pouch::before {
  inset: 6px 5px 2px;
  background: #704a2f;
  border: 3px solid #422c1d;
  border-radius: 4px 4px 9px 9px;
}
.inventory-item-icon--small-pouch::after {
  left: 9px;
  right: 9px;
  top: 4px;
  height: 7px;
  background: #a06d42;
  border: 2px solid #4c3321;
  box-shadow: 0 8px 0 -2px #c39a59;
}

/* V20 — barra de ações --------------------------------------------------- */
.action-hotbar {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: clamp(5px, 0.55vw, 10px);
  transform: translateX(-50%);
}

.arrow-ammo-hud {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(54px, 5vw, 76px));
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border: 1px solid rgba(119, 218, 191, 0.55);
  border-radius: 999px;
  background: rgba(9, 23, 27, 0.86);
  color: #d9fff3;
  font-size: clamp(0.7rem, 1vw, 0.88rem);
  pointer-events: none;
}

.arrow-ammo-hud[hidden] {
  display: none;
}

.arrow-ammo-hud span {
  color: #e7d17e;
  font-size: 1.15em;
}

.arrow-ammo-hud.empty {
  border-color: rgba(242, 103, 103, 0.72);
  color: #ffd1cd;
  background: rgba(47, 15, 18, 0.9);
}

.assassin-combo-hud {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(54px, 5vw, 76px));
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  padding: 5px 11px;
  border: 1px solid rgba(151, 104, 224, 0.58);
  border-radius: 999px;
  background: rgba(20, 14, 38, 0.9);
  color: #ded1f8;
  font-size: clamp(0.64rem, 0.9vw, 0.8rem);
  letter-spacing: 0.035em;
  pointer-events: none;
}
.assassin-combo-hud[hidden] { display: none; }
.assassin-combo-hud span { color: #9a66ff; filter: drop-shadow(0 0 4px rgba(154,102,255,.9)); }
.assassin-combo-hud em { color: #cbbce9; font-size: .9em; font-style: normal; }
.assassin-combo-hud.primed { border-color: rgba(201, 166, 255, .82); }
.assassin-combo-hud.ready {
  border-color: rgba(255, 207, 108, .92);
  background: linear-gradient(90deg, rgba(63, 18, 48, .94), rgba(30, 16, 55, .94));
  color: #fff0b0;
  box-shadow: 0 0 14px rgba(255, 91, 124, .24), inset 0 0 8px rgba(154, 102, 255, .18);
  animation: assassin-combo-pulse .72s ease-in-out infinite alternate;
}
@keyframes assassin-combo-pulse { to { filter: brightness(1.22); transform: translateX(-50%) scale(1.025); } }

.fishing-hud { position:absolute; z-index:8; left:50%; bottom:calc(max(14px, env(safe-area-inset-bottom)) + clamp(92px,8vw,118px)); display:flex; align-items:center; gap:8px; transform:translateX(-50%); padding:6px 11px; border:1px solid rgba(103,216,237,.64); border-radius:11px; background:linear-gradient(90deg,rgba(8,31,42,.93),rgba(11,47,51,.91)); color:#d8faff; font-size:clamp(.62rem,.9vw,.79rem); pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.28); }
.fishing-hud[hidden] { display:none; }
.fishing-hud > span:not(.fishing-hud__icon) { display:grid; gap:1px; }
.fishing-hud small { color:#9ed8df; font-size:.88em; }
.fishing-hud em { color:#f0d78a; font-size:.92em; font-style:normal; white-space:nowrap; }
.fishing-hud__icon { color:#7ee2f1; font-size:1.25em; }

.action-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.35vw, 66px);
  height: clamp(46px, 4.35vw, 66px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(12, 19, 27, 0.91);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.42), inset 0 -8px 0 rgba(0, 0, 0, 0.16);
  touch-action: manipulation;
}

.action-slot:hover:not(:disabled) {
  background: rgba(34, 49, 62, 0.96);
}

.action-slot:disabled {
  cursor: default;
  opacity: 0.48;
}

.action-slot.locked {
  opacity: 0.62;
  border-color: rgba(176, 187, 199, 0.22);
}

.action-slot.unavailable:not(.locked) {
  opacity: 0.68;
  filter: grayscale(0.45);
}

.action-slot.active {
  border-color: rgba(255, 225, 113, 0.95);
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 113, 0.24),
    0 0 10px rgba(255, 225, 113, 0.32);
}

.action-key {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 5;
  font-size: clamp(0.54rem, 0.72vw, 0.74rem);
  font-weight: 1000;
  text-shadow: 1px 1px 0 #111;
}

.action-slot > strong,
.action-slot > small {
  position: absolute;
  right: 5px;
  bottom: 3px;
  z-index: 5;
  margin: 0;
  font-size: clamp(0.58rem, 0.76vw, 0.78rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 1px 1px 0 #111;
}

.action-slot--ability > small::before {
  content: "◆ ";
  color: #68d4ff;
}

.action-icon {
  position: relative;
  width: 30px;
  height: 34px;
  z-index: 2;
  transition: opacity 120ms ease;
}

.action-slot.empty .action-icon,
.action-slot.empty > strong {
  opacity: 0;
}

.action-icon--health-potion::before,
.action-icon--mana-potion::before {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 1px;
  width: 18px;
  height: 23px;
  border: 3px solid #dbe8ef;
  border-radius: 4px 4px 8px 8px;
  background: #a62f3c;
  box-shadow: inset 0 5px 0 rgba(255,255,255,0.22);
}

.action-icon--health-potion::after,
.action-icon--mana-potion::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 1px;
  width: 10px;
  height: 9px;
  border: 2px solid #dbe8ef;
  border-bottom: 0;
  background: #725038;
}

.action-icon--mana-potion::before {
  background: #268ec5;
}

.action-icon--heavy-strike::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 3px;
  width: 6px;
  height: 27px;
  border: 2px solid #e8f7ff;
  background: #8fdfff;
  transform: rotate(38deg);
  box-shadow: 0 0 4px rgba(126, 222, 255, 0.7);
}

.action-icon--heavy-strike::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 22px;
  height: 5px;
  border-radius: 50%;
  border-top: 3px solid #ffd86a;
  transform: rotate(-22deg);
}

.action-icon--spin::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 24px;
  height: 24px;
  border: 3px solid transparent;
  border-top-color: #9eefff;
  border-right-color: #ffd86a;
  border-radius: 50%;
  transform: rotate(25deg);
  box-shadow: 0 0 5px rgba(126, 222, 255, 0.6);
}

.action-icon--spin::after {
  content: "➤";
  position: absolute;
  left: 11px;
  top: 7px;
  color: #fff2a6;
  font-size: 15px;
  font-weight: 1000;
  transform: rotate(58deg);
  text-shadow: 0 0 4px rgba(255, 216, 106, 0.8);
}

.action-icon--lightning-spin::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 1px;
  width: 5px;
  height: 25px;
  border: 2px solid #efffff;
  background: linear-gradient(#dfffff, #35cfff 58%, #236eff);
  transform: rotate(-12deg);
  box-shadow: 0 0 7px #42d9ff, 0 0 12px rgba(38, 116, 255, 0.72);
}

.action-icon--lightning-spin::after {
  content: "ϟ";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 25px;
  height: 19px;
  color: #f2ffff;
  border-bottom: 3px solid #54dcff;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 1000;
  line-height: 17px;
  text-shadow: 0 0 4px #fff, 0 0 8px #29c5ff;
}

.action-icon--bomb::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 20px;
  height: 20px;
  border: 2px solid #070b10;
  border-radius: 47% 53% 51% 49%;
  background: radial-gradient(circle at 35% 29%, #72818d 0 11%, #303a43 15% 54%, #121820 78%);
  box-shadow: 0 0 6px rgba(255, 151, 55, 0.35), inset -3px -4px 0 rgba(0,0,0,0.28);
}

.action-icon--bomb::after {
  content: "✦";
  position: absolute;
  left: 18px;
  top: -1px;
  color: #ffd45e;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 5px #ff732e;
  transform: rotate(16deg);
}

.action-icon--fishing::before { content:""; position:absolute; left:7px; top:1px; width:4px; height:31px; border-radius:3px; background:linear-gradient(#d4b66a,#74472d); transform:rotate(37deg); box-shadow:1px 0 0 #3f291f; }
.action-icon--fishing::after { content:"≈"; position:absolute; right:0; bottom:0; color:#7ee2f1; font-size:21px; font-weight:1000; text-shadow:0 0 4px rgba(69,196,226,.72); }
.action-slot--fishing.fishing { border-color:rgba(104,225,240,.95); background:rgba(9,49,59,.95); box-shadow:inset 0 0 0 2px rgba(104,225,240,.2),0 0 12px rgba(57,207,229,.3); }
.action-slot--fishing.mount-ready,
.action-slot--fishing.mounted { border-color:rgba(111,235,218,.96); background:linear-gradient(145deg,rgba(21,91,106,.97),rgba(14,54,75,.97)); box-shadow:inset 0 0 0 2px rgba(143,245,231,.18),0 0 14px rgba(67,216,207,.34); }
.action-slot--fishing.mount-ready .action-icon--fishing::before,
.action-slot--fishing.mounted .action-icon--fishing::before { left:2px; top:8px; width:31px; height:19px; border-radius:55% 48% 52% 45%; background:linear-gradient(155deg,#9cebef 0 24%,#49b9c8 25% 68%,#e8f8e4 69%); transform:none; box-shadow:inset 0 0 0 2px #173d4f,0 0 7px rgba(141,244,234,.55); }
.action-slot--fishing.mount-ready .action-icon--fishing::after,
.action-slot--fishing.mounted .action-icon--fishing::after { content:""; right:-2px; bottom:5px; width:13px; height:20px; background:#f0bd58; clip-path:polygon(0 50%,100% 0,75% 50%,100% 100%); filter:drop-shadow(0 0 1px #173d4f); }
.action-slot--fishing:not(.fishing):not(.active) { background:rgba(12,19,27,.91); border-color:rgba(255,255,255,.18); box-shadow:inset 0 0 0 2px rgba(0,0,0,.42),inset 0 -8px 0 rgba(0,0,0,.16); }

.action-cooldown {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: bottom;
  background: rgba(3, 8, 12, 0.7);
  pointer-events: none;
}

.action-cooldown-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
  font-weight: 1000;
  text-shadow: 0 2px 3px #000, 0 0 5px #000;
  pointer-events: none;
}

.action-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  background: rgba(4, 8, 12, 0.46);
  pointer-events: none;
}

.action-slot.locked .action-lock {
  display: grid;
}

.action-lock::before {
  content: "🔒";
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  filter: grayscale(1);
}

.action-future-mark {
  color: rgba(255,255,255,0.35);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 900;
}

.game-frame.menu-open .action-hotbar,
.game-frame.menu-open .arrow-ammo-hud,
.game-frame.menu-open .assassin-combo-hud,
.game-frame.menu-open .fishing-hud {
  pointer-events: none;
}

/* V19 — comerciante ------------------------------------------------------ */
.merchant-page {
  width: min(100%, 900px);
}

.merchant-page h2 {
  margin-bottom: clamp(12px, 2vh, 22px);
}

.merchant-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(310px, 1.15fr);
  gap: clamp(14px, 2vw, 26px);
  text-align: left;
}

.merchant-buy-panel,
.merchant-sell-panel {
  padding: clamp(12px, 1.6vw, 20px);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(12, 20, 28, 0.8);
}

.merchant-buy-panel h3,
.merchant-sell-panel h3 {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
}

.merchant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.merchant-heading > strong {
  color: #ffe27a;
  font-size: clamp(0.76rem, 1vw, 0.95rem);
}

.merchant-product {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(26, 37, 48, 0.92);
  color: #fff;
  text-align: left;
  cursor: default;
}

.merchant-product:hover {
  background: rgba(43, 58, 72, 0.96);
}

.merchant-product span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.merchant-product small {
  color: #b8c6d1;
}

.merchant-buy-actions {
  display: grid;
  gap: 5px;
  min-width: 112px;
}

.merchant-buy-actions button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 226, 122, 0.45);
  border-radius: 7px;
  background: rgba(60, 72, 51, 0.96);
  color: #ffeaa0;
  font-weight: 800;
  cursor: pointer;
}

.merchant-buy-actions button:hover,
.merchant-buy-actions button:focus-visible {
  background: rgba(83, 99, 67, 0.98);
}

.merchant-sell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.merchant-sell-actions > button {
  flex: 1 1 170px;
}

.merchant-sell-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  padding-right: 3px;
}

.merchant-sell-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(20,29,37,0.88);
  color: #fff;
  cursor: pointer;
}

.merchant-sell-slot.selected {
  border-color: #ffe27a;
  box-shadow: 0 0 0 2px rgba(255,226,122,0.25);
}

.merchant-sell-slot strong {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 0.7rem;
}

.merchant-selection {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  min-height: 90px;
}

.merchant-selection small {
  color: #d2dce5;
}

/* V36.1.4 — banco pessoal de Volkaris ---------------------------------- */
.bank-page {
  width: min(100%, 960px);
}

.bank-page h2 {
  margin-bottom: 12px;
}

.bank-page-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.bank-page-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(255, 226, 122, .3);
  border-radius: 8px;
  color: #c9d4db;
  background: rgba(20, 29, 37, .94);
  font-weight: 900;
}
.bank-page-tabs button.active {
  border-color: #ffe27a;
  color: #fff2ad;
  background: linear-gradient(180deg, rgba(112, 83, 30, .96), rgba(58, 47, 27, .96));
}
.bank-page-content,
.bank-view { min-width: 0; min-height: 0; }
.bank-page-content { flex: 1 1 auto; overflow: hidden; }
.bank-view { height: 100%; }
.bank-view[hidden] { display: none !important; }
.bank-view[data-bank-view="items"] { display: flex; flex-direction: column; }
.bank-material-panel.bank-view { margin-top: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.bank-material-heading { margin-bottom: 12px; }
.bank-material-heading > * { margin-top: 0; }
.bank-material-heading small { color: #e8b85d; font-weight: 900; letter-spacing: .14em; }

.bank-gold-panel {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(90px, 130px) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  margin-bottom: 14px;
  border: 2px solid rgba(255, 226, 122, 0.28);
  border-radius: 12px;
  background: rgba(25, 21, 14, 0.82);
}

.bank-gold-summary {
  display: grid;
  gap: 4px;
  color: #ffe27a;
}

.bank-gold-presets {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
}

.bank-gold-presets button {
  min-width: 72px;
  min-height: 32px;
  padding: 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(45, 53, 61, 0.96);
  color: #fff;
  cursor: pointer;
}

.bank-gold-presets button.active {
  border-color: #ffe27a;
  color: #ffe27a;
}

.bank-gold-panel label {
  align-self: center;
}

.bank-gold-panel input,
.bank-gold-panel button {
  min-height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.bank-gold-panel input {
  width: 100%;
  padding: 0 10px;
  background: rgba(8, 13, 18, 0.9);
  color: #fff;
}

.bank-gold-panel button {
  padding: 0 12px;
  background: rgba(52, 70, 56, 0.96);
  color: #fff;
  cursor: pointer;
}

.bank-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}

.bank-storage-panel,
.bank-inventory-panel {
  padding: 13px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(12, 20, 28, 0.82);
}

.bank-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-heading h3,
.bank-inventory-panel h3,
.bank-storage-panel p,
.bank-inventory-panel p {
  margin: 0 0 8px;
}

.bank-heading strong {
  color: #ffe27a;
  font-size: 0.82rem;
}

.bank-storage-panel p,
.bank-inventory-panel p {
  color: #b8c6d1;
  font-size: 0.78rem;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(46px, 1fr));
  gap: 7px;
  max-height: 265px;
  overflow: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.bank-grid .bank-slot { touch-action: pan-y; }

/* V36.58.4 — Loja cosmética e pacotes de Diamantes. */
.menu-tile--store { border-color: rgba(77, 226, 255, .38) !important; background: radial-gradient(circle at 50% 18%, rgba(47, 208, 255, .2), transparent 48%), rgba(16, 33, 45, .9) !important; }
.menu-tile-icon--diamond { color: #86efff; text-shadow: 0 0 5px #fff, 0 0 11px #25c9ff; transform: rotate(45deg); }
.store-page { width: min(100%, 1120px); height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; color: #eaf7ff; text-align: left; }
.store-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid rgba(85, 218, 255, .38); border-radius: 12px; background: radial-gradient(circle at 18% 0, rgba(46, 208, 255, .18), transparent 35%), linear-gradient(135deg, rgba(10, 27, 42, .98), rgba(22, 18, 47, .98)); box-shadow: inset 0 0 28px rgba(30, 180, 255, .06); }
.store-header h2,.store-header p { margin: 0; }.store-header h2 { color: #eaffff; }.store-header p { margin-top: 3px; color: #a9c6d5; font-size: .72rem; }.store-header > div > small,.store-section-heading small,.store-coming-view > small { color: #62ddff; font-weight: 1000; letter-spacing: .16em; }
.store-wallet { display: flex; align-items: center; gap: 9px; min-width: 190px; padding: 8px 11px; border: 1px solid rgba(117, 232, 255, .38); border-radius: 10px; background: rgba(4, 17, 31, .75); }
.store-wallet div { display: grid; gap: 1px; }.store-wallet small { color: #78b7ce; font-size: .58rem; }.store-wallet strong { color: #c6f7ff; font-size: .88rem; }
.store-wallet-diamond { position: relative; width: 29px; height: 29px; flex: 0 0 auto; clip-path: polygon(50% 0,100% 36%,78% 100%,22% 100%,0 36%); background: linear-gradient(135deg,#efffff 0 16%,#75eeff 18% 46%,#268cff 48% 72%,#723eff 74%); filter: drop-shadow(0 0 6px #3cddff); }.store-wallet-diamond::after { content:""; position:absolute; inset:5px 8px 9px 5px; background:rgba(255,255,255,.72); clip-path:polygon(0 0,100% 18%,40% 100%); }
.store-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }.store-tabs button { min-width:0; min-height:42px; border:1px solid rgba(111,164,190,.35); border-radius:9px; color:#b8ccd8; background:rgba(9,24,37,.92); font-weight:900; }.store-tabs button.active { border-color:#68e5ff; color:#eaffff; background:linear-gradient(180deg,rgba(28,129,171,.92),rgba(26,56,91,.96)); box-shadow:inset 0 0 13px rgba(77,224,255,.16),0 0 9px rgba(51,193,255,.12); }
.store-content { min-width:0; min-height:0; overflow:hidden; }.store-view { width:100%; height:100%; min-width:0; min-height:0; }.store-view[hidden] { display:none!important; }.store-diamonds-view { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:9px; border:1px solid rgba(99,162,193,.2); border-radius:11px; background:rgba(5,17,29,.74); }
.store-section-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; }.store-section-heading h3 { margin:1px 0 0; }.store-section-heading span { color:#7ee8bc; font-size:.68rem; font-weight:800; }.store-disclaimer { margin:5px 0 9px; padding:6px 8px; border-left:3px solid #48ccea; color:#b2cbd8; background:rgba(38,139,178,.1); font-size:.66rem; }
.diamond-package-grid { display:grid; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:8px; }.diamond-package { position:relative; min-width:0; display:grid; grid-template-rows:74px auto auto 1fr auto auto; justify-items:center; gap:2px; padding:9px 7px; overflow:hidden; border:1px solid rgba(100,203,238,.28); border-radius:11px; text-align:center; background:radial-gradient(circle at 50% 22%,rgba(62,208,255,.14),transparent 35%),linear-gradient(180deg,rgba(17,43,61,.96),rgba(11,25,43,.98)); }.diamond-package.featured { border-color:#8bedff; box-shadow:inset 0 0 20px rgba(61,213,255,.11),0 0 10px rgba(50,199,255,.12); }.diamond-package > small { color:#72bfd7; font-size:.55rem; font-weight:1000; letter-spacing:.12em; }.diamond-package h3,.diamond-package p { margin:0; }.diamond-package h3 { color:#ddfbff; font-size:.82rem; }.diamond-package p { color:#7ee8bc; font-size:.58rem; font-weight:800; }.diamond-package > strong { margin-top:4px; color:#fff0a8; font-size:.92rem; }.diamond-package button { width:100%; min-height:34px; margin-top:4px; border:1px solid #61ddff; border-radius:7px; color:#efffff; background:linear-gradient(#168ec0,#10557f); font-weight:1000; cursor:pointer; }.diamond-package-badge { position:absolute; top:4px; right:-25px; width:92px; padding:3px 0; color:#08202d; background:#8cecff; font-size:.43rem; font-weight:1000; transform:rotate(35deg); }
.diamond-sprite { position:relative; width:82px; height:70px; filter:drop-shadow(0 5px 5px rgba(0,0,0,.45)); }.diamond-sprite i,.diamond-sprite b,.diamond-sprite em { position:absolute; display:block; width:27px; height:35px; clip-path:polygon(50% 0,100% 34%,77% 100%,23% 100%,0 34%); background:linear-gradient(135deg,#f4ffff 0 13%,#75edff 15% 44%,#268fff 46% 72%,#713eff 74%); box-shadow:inset 5px 0 rgba(255,255,255,.18); }.diamond-sprite i { left:27px; top:9px; z-index:3; transform:scale(1.25); }.diamond-sprite b { left:8px; top:29px; z-index:2; transform:rotate(-13deg) scale(.84); }.diamond-sprite em { right:7px; top:31px; z-index:1; transform:rotate(14deg) scale(.8); }.diamond-package--shard .diamond-sprite b,.diamond-package--shard .diamond-sprite em { display:none; }.diamond-package--stack .diamond-sprite em { display:none; }.diamond-package--pouch .diamond-sprite::before,.diamond-package--chest .diamond-sprite::before,.diamond-package--vault .diamond-sprite::before { content:""; position:absolute; left:6px; right:6px; bottom:0; height:35px; border:3px solid #7a5a34; border-radius:8px 8px 12px 12px; background:linear-gradient(#d39e54,#79502c); box-shadow:inset 0 6px rgba(255,220,132,.18); }.diamond-package--pouch .diamond-sprite i { top:1px; }.diamond-package--chest .diamond-sprite::before { height:30px; border-color:#9a7336; border-radius:5px; background:linear-gradient(#bd8138 0 48%,#6f4221 50%); }.diamond-package--vault .diamond-sprite::before { left:1px;right:1px;height:42px;border-color:#b98d42;background:linear-gradient(#5b7180 0 45%,#2e3b47 47%);box-shadow:inset 0 0 0 4px #9e783c; }.diamond-package--vault .diamond-sprite::after { content:"◆";position:absolute;z-index:5;left:31px;bottom:8px;color:#8cecff;text-shadow:0 0 5px #37cfff; }
.store-coming-view { display:grid; place-content:center; justify-items:center; gap:6px; padding:20px; overflow-y:auto; border:1px solid rgba(100,184,220,.22); border-radius:12px; text-align:center; background:radial-gradient(circle at 50% 40%,rgba(60,164,220,.13),transparent 34%),rgba(7,20,34,.78); }.store-coming-view h3,.store-coming-view p { margin:0; }.store-coming-view p { max-width:620px; color:#b7ced9; line-height:1.45; }.store-coming-view span { color:#72e8bb; font-size:.75rem; }.store-coming-mark { display:grid;place-items:center;width:76px;height:76px;border:2px solid rgba(109,226,255,.55);border-radius:50%;color:#a7f2ff;font-size:42px;background:rgba(33,135,179,.13);box-shadow:inset 0 0 22px rgba(61,214,255,.12),0 0 16px rgba(42,190,255,.12); }
.store-mount-view { overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:9px; }
.cosmetic-product { min-height:100%;display:grid;grid-template-columns:minmax(290px,.95fr) minmax(280px,1.25fr) minmax(150px,.48fr);align-items:center;gap:16px;padding:15px;border:1px solid rgba(255,166,63,.5);border-radius:14px;background:radial-gradient(circle at 20% 45%,rgba(255,80,17,.25),transparent 36%),linear-gradient(135deg,rgba(44,14,15,.98),rgba(20,14,34,.98));box-shadow:inset 0 0 40px rgba(255,83,17,.08);}
.cosmetic-product-copy small { color:#ffb450;font-size:.6rem;font-weight:1000;letter-spacing:.14em; }.cosmetic-product-copy h3 { margin:3px 0 7px;color:#fff1bd;font-size:1.45rem; }.cosmetic-product-copy p { margin:0;color:#e4c6b6;font-size:.76rem;line-height:1.45; }.cosmetic-product-copy ul { display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;padding:0;margin:11px 0;list-style:none;color:#ffd481;font-size:.68rem;font-weight:800; }.cosmetic-product-copy li::before { content:"✦ ";color:#ff642e; }.cosmetic-product-copy > span { display:block;padding:6px 8px;border-left:3px solid #ff7c33;color:#ffd7ae;background:rgba(255,111,32,.1);font-size:.65rem; }
.cosmetic-product-buy { display:grid;justify-items:stretch;gap:7px;padding:12px;border:1px solid rgba(255,194,84,.35);border-radius:11px;background:rgba(12,10,22,.7);text-align:center; }.cosmetic-product-buy > div { display:flex;align-items:center;justify-content:center;gap:8px;color:#d8fbff;font-size:1.2rem; }.cosmetic-product-buy .store-wallet-diamond { width:24px;height:24px; }.cosmetic-product-buy button { min-height:42px;border:1px solid #ffbd52;border-radius:8px;color:#fff7d7;background:linear-gradient(#d85a22,#7b251a);font-weight:1000;cursor:pointer; }.cosmetic-product-buy button:disabled { opacity:.5;cursor:not-allowed; }.cosmetic-product-buy small { color:#a9c3ce;font-size:.62rem; }
.phoenix-store-preview { position:relative;min-height:230px;overflow:hidden;border:1px solid rgba(255,144,49,.32);border-radius:13px;background:radial-gradient(circle at 50% 48%,rgba(255,213,73,.24),rgba(166,35,15,.12) 35%,rgba(9,11,25,.9) 70%);box-shadow:inset 0 0 45px rgba(255,73,13,.13); }.phoenix-store-preview::before { content:"";position:absolute;left:50%;top:50%;width:174px;height:174px;border:2px solid rgba(255,167,53,.25);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 25px rgba(255,87,20,.18),inset 0 0 20px rgba(255,194,65,.09); }.phoenix-store-body { position:absolute;z-index:3;left:50%;top:51%;width:105px;height:48px;border:3px solid #5a1718;border-radius:55% 62% 58% 47%;background:linear-gradient(180deg,#fff0a0 0 12%,#ff9d2f 15% 43%,#d63120 47% 75%,#711e2b 78%);transform:translate(-50%,-50%);box-shadow:inset 0 -9px rgba(70,14,35,.3),0 0 17px rgba(255,108,25,.65); }.phoenix-store-body::before { content:"";position:absolute;right:-16px;top:7px;width:31px;height:31px;border:3px solid #5a1718;border-radius:48% 65% 55% 45%;background:radial-gradient(circle at 65% 35%,#fff 0 4%,#ffe35b 5% 9%,transparent 10%),linear-gradient(135deg,#ffc24e,#dc3824 65%,#721c2a); }.phoenix-store-body::after { content:"";position:absolute;right:-27px;top:18px;border-left:15px solid #ffe47a;border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(1px 1px #76221e); }
.phoenix-store-wing { position:absolute;z-index:2;top:50%;width:98px;height:87px;background:linear-gradient(145deg,#fff0a1 0 12%,#ffb52e 15% 38%,#f05420 41% 66%,#8b1f35 69%);clip-path:polygon(100% 52%,67% 0,50% 34%,19% 5%,34% 47%,0 32%,30% 72%,11% 100%,57% 78%);filter:drop-shadow(0 0 7px rgba(255,103,24,.7));animation:phoenix-store-flap 1.7s ease-in-out infinite; }.phoenix-store-wing--left { left:9%;transform-origin:100% 52%; }.phoenix-store-wing--right { right:9%;transform:scaleX(-1);transform-origin:0 52%;animation-delay:-.85s; }.phoenix-store-tail { position:absolute;z-index:1;left:22%;top:52%;width:91px;height:73px;background:linear-gradient(90deg,#6f1732,#ee4120 42%,#ffad25 72%,#fff09c);clip-path:polygon(100% 38%,61% 0,69% 32%,18% 12%,48% 47%,0 63%,48% 62%,12% 100%,70% 73%);filter:drop-shadow(0 0 8px #f45520);animation:phoenix-store-tail 1.25s ease-in-out infinite; }.phoenix-store-preview i { position:absolute;z-index:5;width:5px;height:8px;border-radius:50% 50% 35% 35%;background:#ffd858;box-shadow:0 0 6px #ff5b1e;animation:phoenix-store-ember 1.8s linear infinite; }.phoenix-store-preview i:nth-of-type(1){left:18%;top:75%;animation-delay:-.3s}.phoenix-store-preview i:nth-of-type(2){left:36%;top:22%;animation-delay:-1.1s}.phoenix-store-preview i:nth-of-type(3){left:63%;top:78%;animation-delay:-.7s}.phoenix-store-preview i:nth-of-type(4){left:81%;top:29%;animation-delay:-1.5s}.phoenix-store-preview i:nth-of-type(5){left:53%;top:16%;animation-delay:-.1s}@keyframes phoenix-store-flap{50%{scale:1 .86;rotate:2deg}}@keyframes phoenix-store-tail{50%{transform:skewY(-6deg) scaleX(1.05)}}@keyframes phoenix-store-ember{0%{opacity:0;translate:0 14px}25%{opacity:1}100%{opacity:0;translate:8px -30px}}
@media(max-width:820px),(max-height:620px){.cosmetic-product{grid-template-columns:minmax(220px,.9fr) minmax(250px,1.25fr) minmax(125px,.5fr);gap:8px;padding:7px}.phoenix-store-preview{min-height:150px}.cosmetic-product-copy h3{font-size:1rem}.cosmetic-product-copy p{font-size:.62rem}.cosmetic-product-copy ul{margin:5px 0;font-size:.56rem}.cosmetic-product-buy{padding:7px}.cosmetic-product-buy button{min-height:36px}}
@media (max-width:900px),(max-height:700px){.store-header{padding:6px 9px}.store-header p{display:none}.store-wallet{min-width:165px;padding:5px 8px}.diamond-package-grid{grid-template-columns:repeat(5,minmax(120px,1fr))}.diamond-package{grid-template-rows:58px auto auto 1fr auto auto;padding:6px 5px}.diamond-sprite{transform:scale(.78);transform-origin:50% 30%;height:55px}.store-diamonds-view{padding:6px}.store-disclaimer{margin:3px 0 5px}.store-tabs button{min-height:38px}}

.bank-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(20, 29, 37, 0.9);
  color: #fff;
  cursor: pointer;
}

.bank-slot:hover:not(:disabled) {
  border-color: #ffe27a;
}

.bank-slot:disabled {
  cursor: default;
  opacity: 0.48;
}

.bank-slot strong {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 0.7rem;
}

@media (max-width: 820px), (max-height: 640px) {
  .bank-gold-panel {
    grid-template-columns: 1fr minmax(82px, 110px) 1fr 1fr;
  }

  .bank-gold-summary {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .bank-gold-panel label {
    display: none;
  }

  .bank-layout {
    gap: 10px;
  }

  .bank-grid {
    max-height: 190px;
  }
}

.inventory-item-icon--small-health-potion::before,
.inventory-item-icon--small-mana-potion::before {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 2px;
  width: 20px;
  height: 24px;
  border: 3px solid #dce8ef;
  border-radius: 4px 4px 8px 8px;
  background: #b63240;
  box-shadow: inset 0 5px 0 rgba(255,255,255,0.2);
}

.inventory-item-icon--small-mana-potion::before {
  background: #288fc6;
}

.inventory-item-icon--small-health-potion::after,
.inventory-item-icon--small-mana-potion::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 10px;
  height: 9px;
  border: 2px solid #dce8ef;
  border-bottom: 0;
  background: #704c35;
}

@media (max-height: 620px) {
  .action-hotbar {
    bottom: max(7px, env(safe-area-inset-bottom));
  }
  .merchant-layout {
    grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
    gap: 10px;
  }
  .merchant-buy-panel,
  .merchant-sell-panel {
    padding: 9px;
  }
  .merchant-product {
    min-height: 52px;
    margin-top: 7px;
  }
  .merchant-sell-grid {
    max-height: 145px;
  }
}

@media (max-width: 780px) {
  .merchant-layout {
    grid-template-columns: 1fr;
  }
}

/* Atributos universais V22 ------------------------------------------------ */
.status-page {
  width: min(100%, 760px);
}

.status-page > h2 {
  margin-bottom: clamp(12px, 2vh, 22px);
}

.attribute-panel {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
  padding: 13px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(14, 23, 31, 0.84);
  text-align: left;
}

.attribute-points-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 8px;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
}

.attribute-points-heading strong {
  min-width: 42px;
  padding: 5px 10px;
  border: 2px solid rgba(255, 229, 112, 0.58);
  border-radius: 10px;
  background: rgba(111, 86, 25, 0.56);
  color: #ffe570;
  text-align: center;
}

.attribute-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 44px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(36, 45, 54, 0.66);
}

.attribute-row > div {
  min-width: 0;
}

.attribute-row strong {
  display: block;
  font-size: clamp(0.92rem, 1.5vw, 1.16rem);
}

.attribute-row small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.68rem, 1.05vw, 0.86rem);
  line-height: 1.25;
}

.attribute-row > b {
  color: #fff1bc;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  text-align: right;
}

.attribute-add-button {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 229, 112, 0.62);
  border-radius: 10px;
  background: rgba(91, 72, 25, 0.86);
  color: #ffe570;
  font: inherit;
  font-size: 1.55rem;
  font-weight: 1000;
  cursor: pointer;
}

.attribute-add-button:disabled {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(45, 49, 54, 0.72);
  color: rgba(255, 255, 255, 0.32);
  cursor: not-allowed;
}

.attribute-reset-button {
  justify-self: end;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  background: rgba(66, 37, 37, 0.72);
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.attribute-reset-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.status-list--combat {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 20px;
  font-size: clamp(0.76rem, 1.35vw, 1.02rem);
}

.status-list--combat > div {
  grid-template-columns: minmax(88px, 1fr) auto;
  gap: 10px;
  padding: 4px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-list--combat .status-breakdown {
  grid-column: span 2;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82em;
}

@media (max-width: 720px), (max-height: 660px) {
  .attribute-panel {
    gap: 5px;
    padding: 8px;
    margin-bottom: 9px;
  }

  .attribute-row {
    grid-template-columns: minmax(0, 1fr) 38px 36px;
    min-height: 43px;
    padding: 4px 6px;
  }

  .attribute-row small {
    display: none;
  }

  .attribute-add-button {
    width: 34px;
    height: 34px;
    font-size: 1.25rem;
  }

  .status-list--combat {
    gap: 3px 12px;
  }
}

/* Refinamento V22.2: página própria de atributos e trava de combate ------- */
.attributes-page {
  width: min(100%, 720px);
}

.attributes-page > h2 {
  margin-bottom: clamp(12px, 2vh, 22px);
}

.attributes-page .attribute-panel {
  margin-bottom: 12px;
}

.attribute-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(25, 34, 43, 0.78);
}

.attribute-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.attribute-summary dt {
  color: rgba(255, 255, 255, 0.76);
}

.attribute-summary dd {
  margin: 0;
  color: #fff1bc;
  font-weight: 900;
}

.attribute-balance-note {
  margin: 11px 3px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 620px), (max-height: 600px) {
  .attribute-summary {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 8px 10px;
  }

  .attribute-balance-note {
    font-size: 0.7rem;
  }
}

/* Revisão V22.2: bloqueio de alterações durante combate ------------------ */
.attribute-lock-note {
  margin: 10px 3px 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 190, 95, 0.42);
  border-radius: 9px;
  background: rgba(92, 55, 21, 0.52);
  color: #ffd8a0;
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  line-height: 1.35;
  text-align: left;
}

/* V36.8.2 — identificação de região discreta e atmosférica */
.area-banner {
  position: absolute;
  top: 7.2%;
  left: 50%;
  z-index: 12;
  width: min(430px, 62vw);
  min-width: 250px;
  padding: 8px 28px 10px;
  transform: translate(-50%, -8px);
  border: 0;
  border-bottom: 1px solid rgba(231, 221, 181, 0.40);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(8, 14, 17, 0), rgba(8, 14, 17, 0.58) 19%, rgba(8, 14, 17, 0.68) 50%, rgba(8, 14, 17, 0.58) 81%, rgba(8, 14, 17, 0));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  color: #f5efd7;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.35px);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,.75,.2,1), filter 360ms ease;
}

.area-banner::before,
.area-banner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 224, 161, 0.70));
}

.area-banner::before { left: calc(50% - 60px); }
.area-banner::after { right: calc(50% - 60px); transform: scaleX(-1); }

.area-banner.area-banner--visible {
  transform: translate(-50%, 0);
  opacity: 1;
  filter: blur(0);
}

.area-banner strong,
.area-banner span { display: block; }

.area-banner strong {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 900;
  letter-spacing: 0.105em;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72);
}

.area-banner span {
  margin-top: 3px;
  color: rgba(222, 215, 187, 0.84);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.area-banner.area-banner--safe {
  border-bottom-color: rgba(122, 210, 155, 0.42);
}
.area-banner.area-banner--safe::before,
.area-banner.area-banner--safe::after {
  background: linear-gradient(90deg, transparent, rgba(132, 219, 165, 0.66));
}

.admin-console {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 8.5rem;
  width: min(760px, calc(100% - 3rem));
  transform: translateX(-50%);
  border: 2px solid rgba(118, 210, 255, 0.7);
  border-radius: 14px;
  background: rgba(4, 10, 15, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #e8f7ff;
  font: 600 16px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: hidden;
}

.admin-console__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(118, 210, 255, 0.26);
  background: linear-gradient(180deg, rgba(25, 58, 76, 0.92), rgba(10, 26, 37, 0.92));
}

.admin-console__header div {
  display: flex;
  flex-direction: column;
}

.admin-console__header span {
  color: #9fc7d8;
  font-size: 0.75rem;
}

.admin-console__header button {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.admin-console__output {
  height: min(300px, 34vh);
  padding: 0.85rem 1rem;
  overflow-y: auto;
  white-space: pre-wrap;
  user-select: text;
}

.admin-console-line {
  margin: 0 0 0.42rem;
}

.admin-console-line--command { color: #f7d66c; }
.admin-console-line--success { color: #8ff29c; }
.admin-console-line--error { color: #ff8b8b; }
.admin-console-line--system { color: #83d7ff; }
.admin-console-line--info { color: #d9e8ef; }

.admin-console__prompt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(118, 210, 255, 0.26);
  background: rgba(9, 20, 29, 0.98);
  color: #f7d66c;
}

.admin-console__prompt input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
}

/* V31.11 — transições entre mapas */
.map-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: #05090c;
  color: #dbe8e4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.map-transition-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.map-transition-overlay strong {
  font-size: clamp(.85rem, 1.25vw, 1.15rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* V34.0.0 — Fundação de Itens ------------------------------------------- */
.admin-inventory-button {
  position: absolute;
  z-index: 10;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(116px, calc(env(safe-area-inset-bottom) + 104px));
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(238, 190, 82, 0.44);
  border-radius: 10px;
  background: rgba(48, 34, 10, 0.92);
  color: #fff0bb;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.admin-inventory-button:hover { background: rgba(83, 58, 16, 0.96); }
.admin-inventory-button:active { transform: translateY(1px); }

.admin-inventory-page {
  width: min(100%, 1080px);
  max-height: min(76vh, 700px);
  overflow: hidden;
}
.admin-inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.admin-inventory-heading h2 { margin: 0 0 4px; }
.admin-inventory-heading p { margin: 0; color: #c7d5df; font-size: .82rem; }
.admin-resource-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-gold-button,
.admin-diamond-button,
.admin-xp-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(245, 201, 94, .45);
  border-radius: 9px;
  background: rgba(82, 57, 13, .88);
  color: #ffe7a0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.admin-xp-button {
  border-color: rgba(104, 202, 255, .48);
  background: rgba(18, 61, 91, .90);
  color: #c9f1ff;
}
.admin-diamond-button {
  border-color: rgba(88, 236, 255, .62);
  background: linear-gradient(145deg, rgba(12, 74, 99, .96), rgba(32, 40, 105, .94));
  color: #d9fbff;
  text-shadow: 0 1px 0 #062534, 0 0 8px rgba(84, 229, 255, .62);
  box-shadow: inset 0 0 12px rgba(92, 229, 255, .10);
}
.admin-gold-button:hover { background: rgba(102, 70, 14, .96); }
.admin-diamond-button:hover { background: linear-gradient(145deg, rgba(14, 92, 122, .98), rgba(42, 52, 132, .98)); }
.admin-xp-button:hover { background: rgba(21, 78, 116, .98); }
.admin-gold-button:active,
.admin-diamond-button:active,
.admin-xp-button:active { transform: translateY(1px); }
.admin-inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .34fr);
  gap: 12px;
  margin-bottom: 12px;
}
.admin-inventory-toolbar label { display: grid; gap: 5px; color: #c8d4dc; font-size: .72rem; font-weight: 800; }
.admin-inventory-toolbar input {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(5,12,18,.86);
  color: #fff;
  font: inherit;
}
.admin-inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-height: min(55vh, 500px);
  padding-right: 5px;
  overflow: auto;
}
.admin-item-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(13,21,28,.82);
}
.admin-item-icon { width: 54px; height: 54px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.admin-item-card div { min-width: 0; display: grid; gap: 3px; }
.admin-item-card strong { color: #f2f6f8; font-size: .82rem; }
.admin-item-card small { color: #aebfcb; font-size: .67rem; line-height: 1.2; }
.admin-item-card em { color: #dfe6eb; font-size: .62rem; font-style: normal; }
.admin-item-card button {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(106,211,224,.3);
  border-radius: 7px;
  background: rgba(15,55,67,.88);
  color: #ebfbff;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  cursor: pointer;
}
.admin-item-card button:hover { background: rgba(24,83,98,.96); }
.admin-item-empty { grid-column: 1 / -1; color: #becbd4; text-align: center; }

.merchant-buy-grid { display: grid; gap: 8px; max-height: min(48vh, 440px); overflow: auto; padding-right: 4px; }
.merchant-product { grid-template-columns: 48px minmax(0, 1fr) auto; }
.merchant-product .inventory-item-icon { width: 46px; height: 46px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.inventory-item-icon { overflow: visible; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }

@media (max-width: 900px), (max-height: 620px) {
  .admin-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 48vh; }
  .admin-item-card { grid-template-columns: 48px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .admin-item-icon { width: 44px; height: 44px; }
  .admin-inventory-button { bottom: max(105px, calc(env(safe-area-inset-bottom) + 93px)); min-height: 36px; }
}

/* V35.3 — chat global ------------------------------------------------------ */
.chat-button {
  position: absolute;
  z-index: 9;
  top: max(8px, env(safe-area-inset-top));
  right: calc(max(10px, env(safe-area-inset-right)) + clamp(48px, 4.7vw, 70px));
  display: grid;
  place-items: center;
  width: clamp(42px, 4.1vw, 62px);
  height: clamp(42px, 4.1vw, 62px);
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: clamp(1.35rem, 2.45vw, 2.2rem);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-button:hover { filter: brightness(1.18); }
.chat-button:active { transform: translateY(1px) scale(0.98); }

.chat-unread {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(16, 24, 30, 0.92);
  border-radius: 50%;
  background: #7cf2a5;
  box-shadow: 0 0 8px rgba(124, 242, 165, 0.75);
}

.chat-dock {
  position: absolute;
  z-index: 8;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  width: min(42vw, 520px);
  min-width: 250px;
  pointer-events: none;
  transition: background 150ms ease, border-color 150ms ease, padding 150ms ease, bottom 150ms ease;
}

.chat-tabs {
  display: none;
  gap: 5px;
  margin-bottom: 7px;
}

.chat-tab {
  min-width: 66px;
  height: 29px;
  border: 1px solid rgba(150, 181, 199, 0.24);
  border-radius: 7px;
  background: rgba(16, 28, 36, 0.92);
  color: rgba(221, 235, 242, 0.72);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  cursor: pointer;
}

.chat-close {
  margin-left: auto;
  width: 30px;
  height: 29px;
  border: 1px solid rgba(214, 227, 235, 0.18);
  border-radius: 7px;
  background: rgba(24, 31, 36, 0.88);
  color: #f1f6f8;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.chat-tab.active {
  border-color: rgba(120, 236, 155, 0.62);
  color: #effff4;
  background: rgba(31, 91, 55, 0.94);
}

.chat-dock.open .chat-tabs { display: flex; }

.chat-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  max-height: 124px;
  overflow: hidden;
  padding: 3px 1px;
}

.chat-message {
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(3, 9, 14, 0.34);
  color: #dfeaf0;
  font-size: clamp(0.67rem, 0.84vw, 0.82rem);
  font-weight: 750;
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 1px 0 1px rgba(0, 0, 0, 0.9), -1px 0 1px rgba(0, 0, 0, 0.9);
}

.chat-message--player { color: #78ec9b; }
.chat-message--channel-local { color: #8fd8ff; }
.chat-message--boss {
  color: #ffd769;
  font-weight: 900;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 191, 57, 0.42);
}
.chat-message--system { color: #dce9f1; }

.chat-dock:not(.open) .chat-message:nth-last-child(n+5) { display: none; }

.chat-form {
  display: none;
  gap: 7px;
  padding-top: 8px;
}

.chat-input {
  min-width: 0;
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(139, 237, 171, 0.34);
  border-radius: 7px;
  outline: none;
  background: rgba(5, 12, 18, 0.96);
  color: #eaf7ee;
  font: inherit;
  font-size: 0.76rem;
}

.chat-input:focus {
  border-color: rgba(120, 236, 155, 0.75);
  box-shadow: 0 0 0 2px rgba(120, 236, 155, 0.12);
}

.chat-send {
  min-width: 70px;
  border: 1px solid rgba(120, 236, 155, 0.38);
  border-radius: 7px;
  background: rgba(31, 91, 55, 0.94);
  color: #f0fff4;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.chat-dock.open {
  z-index: 18;
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px));
  width: min(460px, calc(100% - 24px));
  padding: 10px;
  border: 1px solid rgba(120, 236, 155, 0.24);
  border-radius: 10px;
  background: rgba(3, 9, 14, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.chat-dock.open .chat-messages {
  justify-content: flex-start;
  max-height: min(34vh, 240px);
  overflow-y: auto;
  padding-right: 4px;
}

.chat-dock.open .chat-form { display: flex; }

.game-frame.menu-open .chat-button,
.game-frame.menu-open .chat-dock { display: none; }

@media (max-height: 620px) {
  .chat-button {
    top: max(5px, env(safe-area-inset-top));
    right: calc(max(7px, env(safe-area-inset-right)) + 48px);
    width: 38px;
    height: 38px;
    font-size: 1.22rem;
  }
  .chat-dock {
    width: min(44vw, 410px);
    bottom: max(7px, env(safe-area-inset-bottom));
  }
  .chat-message { font-size: 0.62rem; }
  .chat-dock.open {
    bottom: max(60px, calc(env(safe-area-inset-bottom) + 52px));
  }
  .chat-dock.open .chat-messages { max-height: 145px; }
  .chat-input { height: 32px; font-size: 0.68rem; }
}

@media (max-width: 700px) {
  .chat-dock { width: min(55vw, 390px); min-width: 190px; }
  .chat-dock.open { width: calc(100% - 20px); }
}


/* V35.4 — identidade e party ---------------------------------------------- */
.identity-card {
  display: grid;
  gap: 6px;
  margin: 0 auto 12px;
  width: min(390px, 100%);
  padding: 10px;
  border: 1px solid rgba(125, 184, 255, .26);
  border-radius: 9px;
  background: rgba(7, 20, 31, .72);
  color: #e9f5ff;
  font-size: .72rem;
  font-weight: 800;
}
.identity-row { display: flex; gap: 7px; }
.identity-row input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(135, 198, 255, .34);
  border-radius: 6px;
  background: rgba(3, 10, 16, .92);
  color: white;
  font: inherit;
}
.identity-row button, .party-leave-button, .reset-character-button {
  border: 1px solid rgba(135, 198, 255, .38);
  border-radius: 6px;
  background: rgba(25, 71, 112, .9);
  color: white;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 10px;
}
.party-leave-button { min-height: 30px; background: rgba(112, 48, 43, .88); }
.reset-character-button { min-height: 32px; background: rgba(128, 38, 45, .92); border-color: rgba(255, 154, 165, .42); }
.reset-character-button:hover { background: rgba(160, 47, 57, .98); }
.identity-card small { color: #a9cce9; }

.feedback-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  width: min(390px, 100%);
  margin: 0 auto 12px;
  padding: 9px 10px;
  border: 1px solid rgba(246, 203, 91, .24);
  border-radius: 9px;
  background: rgba(24, 19, 10, .56);
  color: #f6e7b3;
  font-size: .72rem;
  font-weight: 850;
}

.feedback-settings > strong { grid-column: 1 / -1; color: #ffe28a; }
.feedback-settings label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.feedback-settings input { width: 17px; height: 17px; accent-color: #e5bc43; }

@media (max-width: 560px) {
  .feedback-settings { grid-template-columns: 1fr; }
  .feedback-settings > strong { grid-column: 1; }
}

.player-interaction-panel {
  position: absolute;
  z-index: 28;
  right: max(12px, env(safe-area-inset-right));
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(98px, 9vw, 130px));
  width: min(250px, calc(100% - 24px));
  padding: 12px;
  border: 1px solid rgba(112, 180, 255, .48);
  border-radius: 10px;
  background: rgba(5, 13, 21, .94);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  color: #eff8ff;
  backdrop-filter: blur(8px);
}
.player-interaction-panel strong { display: block; padding-right: 22px; font-size: .9rem; }
.player-interaction-panel small { display: block; margin: 3px 0 10px; color: #aacbe6; }
.player-interaction-close {
  position: absolute; right: 6px; top: 5px; border: 0; background: transparent; color: #dcecff;
  font: 900 1.15rem/1 system-ui; cursor: pointer;
}
.player-interaction-actions { display: grid; gap: 6px; }
.player-interaction-actions button {
  min-height: 34px; border: 1px solid rgba(112,180,255,.36); border-radius: 6px;
  background: rgba(24, 68, 108, .92); color: white; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer;
}
.player-interaction-actions button.danger { background: rgba(112, 44, 42, .9); border-color: rgba(242, 110, 101, .4); }
.player-interaction-actions button.leader { background: rgba(113, 89, 26, .92); border-color: rgba(255, 215, 91, .5); }

.party-invite-panel {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: max(76px, calc(env(safe-area-inset-top) + 66px));
  transform: translateX(-50%);
  width: min(360px, calc(100% - 24px));
  padding: 11px;
  border: 1px solid rgba(92, 166, 255, .55);
  border-radius: 10px;
  background: rgba(5, 15, 24, .96);
  color: #edf7ff;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  text-align: center;
}
.party-invite-panel strong { display: block; color: #8fc7ff; margin-bottom: 4px; }
.party-invite-panel span { display: block; font-size: .72rem; margin-bottom: 9px; }
.party-invite-panel div { display: flex; justify-content: center; gap: 8px; }
.party-invite-panel button { min-width: 92px; min-height: 32px; border-radius: 6px; border: 1px solid rgba(120,190,255,.4); background: rgba(29,86,130,.95); color:white; font:inherit; font-weight:900; cursor:pointer; }
#partyInviteDecline { background: rgba(108,45,42,.92); border-color: rgba(242,110,101,.42); }

.chat-time { color: rgba(215, 231, 239, .62); font-weight: 700; margin-right: 4px; }
.chat-message--boss .chat-time { color: rgba(255, 225, 132, .72); }

@media (max-width: 700px), (max-height: 620px) {
  .player-interaction-panel { top: 55px; right: 7px; width: min(220px, calc(100% - 14px)); padding: 9px; }
  .party-invite-panel { top: 54px; }
}

/* V36.0.0 Alpha 1: ferramentas de desenvolvimento não aparecem no modo jogador. */
.developer-only[hidden] { display: none !important; }


/* V36.6.0 — QOL / UI Rework --------------------------------------------- */
.game-menu-window {
  width: min(94%, 980px);
  min-height: min(68%, 610px);
  max-height: min(90%, 760px);
  overflow: auto;
  padding: clamp(18px, 2.8vw, 38px);
  align-content: center;
}

.menu-home { width: min(100%, 820px); }
.menu-title-block { margin-bottom: clamp(16px, 3vh, 28px); }
.menu-title-block h2 { margin-bottom: 3px; }
.menu-title-block small { color: rgba(255,255,255,.58); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.menu-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}
.menu-tile {
  min-height: clamp(84px, 12vh, 112px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 3px solid rgba(231,241,238,.88);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(41,57,52,.94), rgba(18,29,27,.94));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.38), 0 5px 16px rgba(0,0,0,.24);
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}
.menu-tile:hover, .menu-tile:focus-visible { filter: brightness(1.14); border-color: #f6fff8; outline: none; }
.menu-tile:active { transform: translateY(1px) scale(.99); }
.menu-tile-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 7px;
  background: rgba(3,10,9,.38);
  font-size: 1.35rem;
  line-height: 1;
}
.menu-tile strong { font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 1000; }

.config-page, .account-page, .social-page, .support-page, .credits-page { width: min(100%, 820px); }
.settings-stack { display: grid; gap: 14px; }
.settings-card {
  padding: 18px 20px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(18,29,36,.9);
  text-align: left;
}
.settings-card-heading, .settings-card--toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.settings-card strong { display: block; font-size: 1.05rem; }
.settings-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.62); }
.settings-card output { min-width: 62px; color: #dff7e7; font-weight: 1000; text-align: right; }
.mobile-hud-settings-card { display: none; gap: 12px; }
.mobile-hud-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.mobile-hud-setting > input {
  grid-column: 1 / -1;
  width: 100%;
  margin: 2px 0 0;
  accent-color: #e0b849;
  cursor: pointer;
}
.mobile-hud-reset {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(232,196,103,.42);
  border-radius: 8px;
  background: rgba(43,35,20,.78);
  color: #ffe6a1;
  font-weight: 900;
  cursor: pointer;
}
.mobile-hud-reset:active { transform: scale(.96); }
.volume-slider { width: 100%; margin-top: 16px; accent-color: #53d677; cursor: pointer; }
.switch-control { position: relative; display: inline-block; width: 62px; height: 34px; flex: 0 0 auto; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control span { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(52,58,62,.88); cursor: pointer; transition: .14s ease; }
.switch-control span::after { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #eef5f2; transition: .14s ease; }
.switch-control input:checked + span { background: rgba(42,132,68,.9); border-color: rgba(116,239,149,.72); }
.switch-control input:checked + span::after { transform: translateX(28px); }
.switch-control input:focus-visible + span { outline: 3px solid rgba(155,228,255,.45); outline-offset: 2px; }

.status-page { width: min(100%, 860px); }
.status-page > h2, .attributes-page > h2, .config-page > h2, .account-page > h2, .social-page > h2, .support-page > h2, .credits-page > h2 { margin-bottom: clamp(12px, 2vh, 20px); }
.status-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; text-align: left; }
.status-card {
  padding: 12px 14px;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(13,23,29,.88);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.status-card h3 { margin: 0 0 8px; color: #dff3e4; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.status-group { display: grid; gap: 3px; margin: 0; }
.status-group > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.status-group dt, .status-group dd { margin: 0; }
.status-group dt { color: rgba(255,255,255,.74); font-size: clamp(.72rem, 1.05vw, .88rem); }
.status-group dd { color: #fff; font-size: clamp(.76rem, 1.1vw, .94rem); font-weight: 1000; text-align: right; overflow-wrap: anywhere; }
.status-group .status-detail { grid-template-columns: 1fr; gap: 2px; }
.status-group .status-detail dd { color: rgba(255,255,255,.66); font-size: .7rem; font-weight: 750; text-align: left; line-height: 1.25; }

.attributes-page { width: min(100%, 780px); }
.attribute-panel--qol { padding: 14px; background: rgba(13,23,29,.9); }
.attribute-panel--qol .attribute-points-heading > div small { display: block; margin-top: 2px; color: rgba(255,255,255,.56); font-size: .7rem; font-weight: 700; }
.attribute-panel--qol .attribute-row { min-height: 64px; border-width: 2px; background: rgba(34,47,52,.7); }
.attribute-row--strength { border-left-color: rgba(244,111,78,.72); }
.attribute-row--vitality { border-left-color: rgba(242,103,128,.78); }
.attribute-row--agility { border-left-color: rgba(105,222,178,.72); }
.attribute-row--intelligence { border-left-color: rgba(105,174,246,.72); }
.attribute-row--dexterity { border-left-color: rgba(238,194,91,.72); }
.attribute-row--luck { border-left-color: rgba(206,129,244,.72); }
.attribute-summary--qol { grid-template-columns: repeat(3, minmax(0,1fr)); }
.attribute-summary--qol > div { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }

.inventory-page { width: min(100%, 860px); }
.inventory-page > h2 { margin-bottom: clamp(10px, 1.8vh, 18px); }

.account-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; text-align: left; }
.account-card { display: grid; align-content: start; gap: 12px; min-height: 220px; padding: 18px; border: 2px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(14,24,30,.9); }
.account-card--active { border-color: rgba(98,211,126,.36); }
.account-card--planned { color: rgba(255,255,255,.65); }
.account-card--planned p { margin: 4px 0 0; font-size: .8rem; line-height: 1.45; }
.account-state { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.account-state strong { font-size: 1rem; }
.account-state small { grid-column: 2; color: rgba(255,255,255,.58); }
.account-dot { width: 12px; height: 12px; border-radius: 50%; background: #58da78; box-shadow: 0 0 10px rgba(88,218,120,.45); }
.account-google-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; font-weight: 1000; }
.account-card label { color: rgba(255,255,255,.72); font-size: .76rem; font-weight: 900; }
.account-card input,.account-card textarea{width:100%;margin-top:5px;padding:9px;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:#08141a;color:#f4f7f8;font:700 .78rem system-ui;resize:vertical}
.account-card button{min-height:36px;padding:7px 11px;border:1px solid rgba(221,186,99,.72);border-radius:7px;background:linear-gradient(#8c6a2c,#594018);color:#fff4cf;font-weight:900;cursor:pointer}
.account-card--danger{border-color:rgba(222,86,80,.48)}.account-card--danger button{border-color:#e36d66;background:linear-gradient(#922f32,#5d1f24)}
.account-card--danger p{margin:0;color:#e5c7c5;font-size:.72rem;line-height:1.45}.account-action-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.account-feedback{min-height:18px;color:#9fdfb1;font-size:.68rem;font-weight:800}.account-legal-links{display:flex;flex-wrap:wrap;gap:12px}.account-legal-links a{color:#dfc271;font-size:.7rem;font-weight:850}
.account-shield{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(220,190,104,.65);border-radius:7px;color:#f0ce72;font-weight:1000}
.chat-report-button{float:right;width:22px;height:22px;margin-left:6px;padding:0;border:1px solid rgba(229,130,112,.55);border-radius:50%;background:rgba(91,28,30,.8);color:#ffc1b7;font-weight:1000;cursor:pointer}

.credits-card { display: grid; place-items: center; min-height: 270px; padding: 28px; border: 3px solid rgba(232,242,239,.82); border-radius: 12px; background: linear-gradient(180deg, rgba(32,49,44,.93), rgba(12,21,19,.96)); }
.credits-card small { color: rgba(255,255,255,.6); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.credits-card strong { margin: 14px 0 4px; font-size: clamp(2rem, 5vw, 3.8rem); }
.credits-card span { color: rgba(255,255,255,.72); font-weight: 800; }

@media (max-width: 760px), (max-height: 610px) {
  .game-menu-window { width: min(96%, 920px); min-height: 82%; max-height: 94%; padding: 12px 18px; }
  .menu-page h2 { margin-bottom: 10px; font-size: clamp(1.35rem, 3.2vw, 2rem); }
  .menu-title-block { margin-bottom: 10px; }
  .menu-tile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .menu-tile { min-height: 62px; padding: 8px 12px; gap: 8px; border-width: 2px; }
  .menu-tile-icon { width: 32px; height: 32px; font-size: 1rem; }
  .status-dashboard { gap: 7px; }
  .status-card { padding: 7px 9px; }
  .status-card h3 { margin-bottom: 4px; font-size: .68rem; }
  .status-group > div { padding: 2px 1px; }
  .status-group dt, .status-group dd { font-size: .67rem; }
  .status-group .status-detail dd { font-size: .58rem; }
  .attribute-panel--qol .attribute-row { min-height: 44px; }
  .attribute-summary--qol { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 6px; }
  .attribute-summary--qol > div { padding: 3px 5px; font-size: .66rem; }
  .account-card { min-height: 0; padding: 10px; gap: 7px; }
  .credits-card { min-height: 190px; }
}

@media (max-width: 590px) {
  .menu-tile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .status-dashboard, .account-layout { grid-template-columns: 1fr; }
  .attribute-summary--qol { grid-template-columns: 1fr 1fr; }
}

/* V36.10.32 — direcional touch e WASD responsivo -------------------------- */
.touch-dpad {
  position: absolute;
  z-index: 9;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: repeat(3, clamp(46px, 8.3vw, 66px));
  grid-template-rows: repeat(3, clamp(46px, 8.3vw, 66px));
  gap: 4px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.touch-dpad__key,
.touch-dpad__center {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.touch-dpad__key {
  border: 2px solid rgba(232, 244, 255, 0.36);
  background: rgba(5, 14, 22, 0.76);
  color: rgba(255, 255, 255, 0.94);
  font: inherit;
  font-size: clamp(1rem, 2.6vw, 1.45rem);
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(6px);
  touch-action: none;
}

.touch-dpad__key:active {
  transform: scale(0.94);
  background: rgba(34, 63, 78, 0.9);
}

.touch-dpad__key--up { grid-column: 2; grid-row: 1; }
.touch-dpad__key--left { grid-column: 1; grid-row: 2; }
.touch-dpad__center {
  grid-column: 2;
  grid-row: 2;
  background: rgba(5, 14, 22, 0.34);
  border: 1px solid rgba(232, 244, 255, 0.12);
  pointer-events: none;
}
.touch-dpad__key--right { grid-column: 3; grid-row: 2; }
.touch-dpad__key--down { grid-column: 2; grid-row: 3; }

.game-frame.menu-open .touch-dpad { display: none !important; }

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .touch-dpad { display: grid; }
  .action-hotbar { bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .touch-dpad {
    grid-template-columns: repeat(3, clamp(42px, 7.2vw, 56px));
    grid-template-rows: repeat(3, clamp(42px, 7.2vw, 56px));
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* V36.10.33 — fundação do sistema de classes */
.class-selection-overlay {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: auto;
}

.class-selection-overlay[hidden] { display: none; }

.class-selection-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(67, 82, 72, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(3, 8, 11, 0.91), rgba(2, 5, 8, 0.97));
  backdrop-filter: blur(9px) saturate(0.72);
}

.class-selection-window {
  position: relative;
  width: min(1120px, 96vw);
  border: 1px solid rgba(226, 205, 154, 0.3);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(20, 27, 29, 0.98), rgba(8, 13, 17, 0.99)),
    #0b1115;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.class-selection-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(231, 197, 112, 0.88), transparent);
}

.class-selection-header {
  padding: clamp(22px, 3vw, 38px) clamp(22px, 4vw, 48px) 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.class-selection-kicker {
  display: block;
  margin-bottom: 7px;
  color: rgba(232, 203, 132, 0.78);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.22em;
}

.class-selection-header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 3.25rem);
  letter-spacing: 0.02em;
  color: #fff4d5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.class-selection-header p {
  max-width: 720px;
  margin: 10px auto 0;
  color: rgba(226, 234, 237, 0.72);
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  line-height: 1.5;
}

.class-selection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr);
  gap: 22px;
  padding: clamp(20px, 3vw, 34px);
}

.class-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.class-card {
  min-height: 175px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 12px 14px;
  padding: 18px;
  border: 1px solid rgba(195, 214, 215, 0.16);
  border-radius: 13px;
  color: #eaf3f4;
  background: linear-gradient(145deg, rgba(23, 35, 37, 0.94), rgba(12, 19, 23, 0.96));
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.class-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(231, 199, 117, 0.46);
}

.class-card.selected {
  border-color: rgba(240, 207, 117, 0.9);
  background: linear-gradient(145deg, rgba(42, 46, 38, 0.98), rgba(19, 28, 29, 0.98));
  box-shadow: inset 0 0 0 1px rgba(240, 207, 117, 0.18), 0 10px 30px rgba(0, 0, 0, 0.24);
}

.class-card--future {
  opacity: 0.44;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.class-card__crest {
  grid-row: 1 / span 2;
  width: 64px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 213, 149, 0.28);
  border-radius: 10px 10px 17px 17px;
  background: linear-gradient(180deg, rgba(114, 101, 64, 0.5), rgba(35, 40, 34, 0.7));
  color: #ffe8ad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: inset 0 0 16px rgba(255, 220, 139, 0.06);
}

.class-card__heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: center;
}

.class-card__heading strong {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.class-card__heading small {
  color: rgba(224, 207, 160, 0.76);
  font-weight: 750;
}

.class-card__strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: end;
}

.class-card__strengths span {
  padding: 5px 7px;
  border: 1px solid rgba(191, 215, 214, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(226, 235, 235, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
}

.class-selection-details {
  padding: 22px;
  border: 1px solid rgba(231, 203, 137, 0.18);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(18, 24, 25, 0.92), rgba(10, 15, 18, 0.95));
}

.class-selection-details__title > span {
  color: rgba(225, 199, 133, 0.62);
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.class-selection-details h2 {
  margin: 5px 0 2px;
  color: #fff0c6;
  font: 900 clamp(1.7rem, 3vw, 2.55rem)/1 Georgia, "Times New Roman", serif;
}

.class-selection-details__title strong {
  color: rgba(232, 237, 232, 0.78);
  font-size: 0.86rem;
}

.class-selection-details > p {
  min-height: 76px;
  margin: 18px 0;
  color: rgba(224, 233, 233, 0.78);
  line-height: 1.5;
  font-size: 0.88rem;
}

.class-selection-stats {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
}

.class-selection-stats div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.class-selection-stats dt {
  color: rgba(188, 204, 204, 0.58);
  font-size: 0.7rem;
  font-weight: 850;
}

.class-selection-stats dd {
  margin: 0;
  color: #eaf0e9;
  font-size: 0.76rem;
  font-weight: 800;
}

.class-selection-confirm {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 226, 150, 0.62);
  border-radius: 9px;
  background: linear-gradient(180deg, #796332, #58431e);
  color: #fff5d8;
  font-weight: 950;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.2);
}

.class-selection-confirm:hover:not(:disabled) { filter: brightness(1.12); }
.class-selection-confirm:disabled { opacity: 0.58; cursor: progress; }

.class-selection-warning {
  display: block;
  margin-top: 10px;
  color: rgba(210, 218, 217, 0.52);
  font-size: 0.67rem;
  line-height: 1.4;
  text-align: center;
}

.class-selection-feedback {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  color: rgba(201, 232, 198, 0.85);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.class-selection-feedback.error { color: rgba(255, 166, 157, 0.92); }

.game-frame.class-selection-open > :not(#game):not(#classSelectionOverlay) {
  pointer-events: none;
}

@media (max-width: 780px), (max-height: 660px) {
  .class-selection-overlay { place-items: start center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .class-selection-window { width: min(720px, 100%); border-radius: 13px; }
  .class-selection-header { padding: 18px 18px 14px; }
  .class-selection-header h1 { font-size: clamp(1.55rem, 7vw, 2.25rem); }
  .class-selection-layout { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .class-selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .class-card { min-height: 116px; grid-template-columns: 46px minmax(0, 1fr); padding: 11px; gap: 7px 9px; }
  .class-card__crest { width: 46px; height: 53px; font-size: 1.45rem; }
  .class-card__heading strong { font-size: 0.93rem; }
  .class-card__heading small { font-size: 0.65rem; }
  .class-card__strengths { display: none; }
  .class-selection-details { padding: 15px; }
  .class-selection-details > p { min-height: 0; margin: 11px 0; }
  .class-selection-stats { display: none; }
  .class-selection-warning { font-size: 0.62rem; }
}

@media (max-width: 480px) {
  .class-selection-grid { grid-template-columns: 1fr; }
  .class-card { min-height: 90px; }
  .class-selection-header p { font-size: 0.76rem; }
}

/* V36.10.50 — Flecha de Impacto: ponta concentrada e onda de choque. */
.action-icon--impact-arrow::before {
  content: "➤";
  position: absolute;
  left: 2px;
  top: 2px;
  color: #fff0a4;
  font-size: 24px;
  font-weight: 1000;
  transform: rotate(-4deg);
  text-shadow: 0 0 4px rgba(117, 224, 255, 0.95), 0 0 8px rgba(255, 211, 83, 0.62);
}
.action-icon--impact-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(149, 235, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 224, 103, 0.75), inset 0 0 4px rgba(255,255,255,0.45);
}

/* V36.10.34 — Archer: ícone procedural da Saraivada de Flechas. */
.action-icon--arrow-volley::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 20px;
  height: 24px;
  border-right: 4px solid #b67a3b;
  border-radius: 50%;
  transform: rotate(2deg);
  box-shadow: inset -1px 0 0 #e2ad61, 2px 0 0 rgba(38, 23, 13, 0.55);
}

.action-icon--arrow-volley::after {
  content: "➶≡";
  position: absolute;
  left: 2px;
  top: 5px;
  color: #e8dfa9;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -4px;
  transform: rotate(-2deg);
  text-shadow: 0 0 4px rgba(177, 227, 119, 0.55);
}

/* V36.10.37 — Chuva de Flechas: múltiplos projéteis sobre uma área ampla. */
.action-icon--arrow-rain::before {
  content: "↓↓↓";
  position: absolute;
  left: 1px;
  top: -1px;
  color: #eef0bd;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -3px;
  transform: rotate(8deg);
  text-shadow: 0 0 5px rgba(169, 224, 102, 0.78);
}

.action-icon--arrow-rain::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 25px;
  height: 10px;
  border: 2px solid #8fc466;
  border-radius: 50%;
  background: rgba(123, 178, 83, 0.18);
  box-shadow: inset 0 0 5px rgba(238, 240, 189, 0.32), 0 0 4px rgba(123, 178, 83, 0.42);
}

/* V36.57.4 — o ícone da Chuva Voltaica deixa de parecer a Chuva comum. */
.action-icon--lightning-arrow-rain::before {
  content: "ϟ";
  position: absolute;
  left: 6px;
  top: -4px;
  color: #f5ffff;
  font-size: 29px;
  font-weight: 1000;
  line-height: 30px;
  transform: rotate(-10deg);
  text-shadow: 0 0 3px #ffffff, 0 0 8px #4bdcff, 0 0 13px rgba(37, 107, 255, 0.88);
}

.action-icon--lightning-arrow-rain::after {
  content: "↓↓";
  position: absolute;
  left: 3px;
  top: 11px;
  color: #59dcff;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -4px;
  transform: rotate(4deg);
  text-shadow: 0 0 3px #ffffff, 0 0 7px #2dbdff;
}

/* V36.57.6 — maça-condutor, vitral da Catedral e Sentença Final. */
.action-icon--lightning-sanctuary::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 2px;
  width: 6px;
  height: 25px;
  border: 2px solid #f7ffff;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(#fff2a7 0 20%, #5edfff 24% 72%, #226aff 100%);
  box-shadow: 0 0 5px #fff5bb, 0 0 9px #42d9ff;
}

.action-icon--lightning-sanctuary::after {
  content: "◇ϟ◇";
  position: absolute;
  left: -1px;
  top: 9px;
  width: 33px;
  color: #f6ffff;
  border-bottom: 2px solid #e8cc70;
  font-size: 16px;
  font-weight: 1000;
  line-height: 15px;
  letter-spacing: 0;
  transform: rotate(-5deg);
  text-shadow: 0 0 3px #ffffff, 0 0 8px #31ceff, 0 0 12px rgba(38, 105, 255, 0.76), 0 5px 8px rgba(255, 214, 94, 0.55);
}

/* V36.57.7 — leitura elétrica própria para o Mago e o Assassino. */
.action-icon--lightning-shields::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px;
  width: 11px; height: 11px;
  border: 2px solid #dffcff;
  border-radius: 50%;
  box-shadow: -7px 6px 0 -1px #2dbbe8, 7px 6px 0 -1px #3188ff, 0 0 8px #48dcff;
  background: rgba(38, 156, 255, .24);
}
.action-icon--lightning-shields::after {
  content: "ϟ";
  position: absolute;
  left: 10px; top: 3px;
  color: #fff;
  font: 1000 23px/25px system-ui, sans-serif;
  transform: rotate(8deg);
  text-shadow: 0 0 4px #fff, 0 0 9px #31cfff;
}

.action-icon--lightning-lance::before {
  content: "";
  position: absolute;
  left: 5px; top: 14px;
  width: 23px; height: 5px;
  border: 2px solid #efffff;
  border-radius: 80% 15% 15% 80%;
  background: linear-gradient(90deg, #2679ff, #55dcff 58%, #fff);
  box-shadow: 0 0 7px #38cfff;
  transform: rotate(-32deg);
}
.action-icon--lightning-lance::after {
  content: "ϟ";
  position: absolute;
  right: 0; bottom: -1px;
  color: #66e6ff;
  font: 1000 20px/20px system-ui, sans-serif;
  text-shadow: 0 0 4px #fff, 0 0 8px #247cff;
}

.action-icon--lightning-storm::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 23px; height: 12px;
  border-radius: 50% 55% 43% 48%;
  background: radial-gradient(circle at 50% 25%, #ecffff, #4fbcf0 42%, #2853a7 76%);
  box-shadow: 0 0 8px #43d9ff, inset 0 -3px 5px rgba(19, 45, 110, .7);
}
.action-icon--lightning-storm::after {
  content: "ϟϟ";
  position: absolute;
  left: 5px; top: 12px;
  color: #f7ffff;
  font: 1000 21px/22px system-ui, sans-serif;
  letter-spacing: -8px;
  text-shadow: 0 0 4px #fff, 0 0 9px #28c6ff;
}

.action-icon--lightning-dark-step::before {
  content: "";
  position: absolute;
  left: 1px; top: 12px;
  width: 27px; height: 9px;
  border-top: 3px solid #55dcff;
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: 0 -4px 0 -2px #dfffff, 0 0 7px #278cff;
}
.action-icon--lightning-dark-step::after {
  content: "ϟ";
  position: absolute;
  right: 2px; top: 1px;
  color: #f5ffff;
  font: 1000 25px/27px system-ui, sans-serif;
  transform: rotate(11deg);
  text-shadow: 0 0 4px #fff, 0 0 10px #2acaff;
}

.action-icon--lightning-double-strike::before,
.action-icon--lightning-double-strike::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 6px; height: 23px;
  border: 1px solid #efffff;
  border-radius: 70% 70% 20% 20%;
  background: linear-gradient(90deg, #2476ff, #f3ffff 49%, #3ed8ff 54%);
  box-shadow: 0 0 7px #39ceff;
}
.action-icon--lightning-double-strike::before { left: 8px; transform: rotate(35deg); }
.action-icon--lightning-double-strike::after { right: 8px; transform: rotate(-35deg); }

.action-icon--lightning-execution::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid #eaffff;
  background:
    linear-gradient(45deg, transparent 44%, rgba(68, 216, 255, .86) 46% 54%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(46, 116, 255, .82) 46% 54%, transparent 56%);
  box-shadow: 0 0 8px #35d1ff, inset 0 0 7px rgba(38, 102, 255, .65);
  transform: rotate(8deg);
}
.action-icon--lightning-execution::after {
  content: "ϟ";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 1000 24px/28px system-ui, sans-serif;
  text-shadow: 0 0 4px #fff, 0 0 10px #2ccaff;
}

.action-icon--empty::before {
  content: "+";
  position: absolute;
  inset: 2px 0 0;
  display: grid;
  place-items: center;
  color: rgba(225, 235, 225, 0.34);
  font-size: 24px;
  font-weight: 800;
}


/* V36.10.41 — Mobile 60 FPS performance pass.
   Backdrop blur forces expensive recomposition over the constantly changing game canvas
   on several Android GPUs. Keep the same translucent surfaces, without live background blur. */
@media (pointer: coarse) {
  html.mobile-performance .game-shell *,
  html.mobile-performance .game-frame *,
  html.mobile-performance .mobile-controls *,
  html.mobile-performance .mobile-dpad * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* V36.10.45 Knight Provocação */
.action-icon--taunt::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px;
  width: 18px; height: 18px;
  border: 3px solid #ff6657;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,73,54,.18), 0 0 10px rgba(255,62,43,.45);
}
.action-icon--taunt::after {
  content: "!";
  position: absolute;
  left: 16px; top: 5px;
  font: 900 24px/1 sans-serif;
  color: #ffd8bd;
  text-shadow: 0 1px 0 #641b18, 0 0 5px #ff3b2f;
}

/* V36.10.47 — mobile click-to-move: o direcional fica exclusivo do desktop/WASD. */
@media (hover: none) and (pointer: coarse) {
  .touch-dpad { display: none !important; }
}


/* V36.10.54 — Menu viewport rework ---------------------------------------
   Todos os menus passam a usar a mesma linguagem de cards da Configuração,
   ocupam somente a viewport útil e nunca dependem de scroll para operar. */
.menu-overlay {
  box-sizing: border-box;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
}

.game-menu-window,
.menu-window {
  --menu-fit-scale: 1;
  box-sizing: border-box;
  width: min(1180px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
  height: min(760px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))));
  min-height: 0;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  padding: clamp(10px, 2.1vmin, 28px);
  overflow: hidden;
  place-items: center;
  border-radius: clamp(12px, 2vmin, 18px);
  background:
    linear-gradient(180deg, rgba(13, 22, 28, .94), rgba(6, 12, 17, .96));
}

.menu-page {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  transform: scale(var(--menu-fit-scale, 1));
  transform-origin: center center;
  transition: transform 100ms ease-out;
}

/* Estrutura visual unificada: qualquer seção importante vira um card. */
.settings-card,
.status-card,
.attribute-panel,
.attribute-summary,
.equipment-panel,
.backpack-panel,
.inventory-details,
.account-card,
.credits-card,
.merchant-buy-panel,
.merchant-sell-panel,
.merchant-selection,
.bank-gold-panel,
.bank-storage-panel,
.bank-inventory-panel,
.admin-inventory-toolbar,
.admin-item-card {
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(29, 39, 45, .82), rgba(15, 24, 30, .88));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .34);
}

.menu-page > h2,
.menu-title-block {
  flex: 0 0 auto;
}

/* V36.10.54 default: compact backpack grids may fit without a nested scroll.
   Data-heavy catalogs (Admin since V36.10.55; NPC shops/bank since V36.10.67)
   intentionally own their vertical scroll regions instead of shrinking the page. */
.game-menu-window .inventory-grid {
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

/* Banco: os 20 espaços cabem como uma grade fixa, sem scroll. */
.bank-grid {
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  gap: clamp(4px, .7vmin, 7px);
}

/* Mercador ganha densidade horizontal em viewports baixas. */
.merchant-buy-grid,
.merchant-sell-grid {
  align-content: start;
}

/* Admin é ferramenta de desenvolvimento, mas ainda respeita a viewport. */
.admin-inventory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

@media (max-width: 900px), (max-height: 700px) {
  .game-menu-window,
  .menu-window {
    width: calc(100vw - max(10px, env(safe-area-inset-left)) - max(10px, env(safe-area-inset-right)));
    height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
    max-height: none;
    padding: clamp(7px, 1.45vmin, 14px);
    border-radius: 12px;
  }

  .menu-back-button {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    width: clamp(36px, 7vmin, 48px);
    height: clamp(36px, 7vmin, 48px);
    font-size: clamp(1.5rem, 5vmin, 2.2rem);
  }

  .menu-page h2 {
    margin-bottom: clamp(6px, 1.6vmin, 11px);
    font-size: clamp(1.05rem, 4.2vmin, 1.65rem);
  }

  .settings-stack,
  .status-dashboard,
  .account-layout {
    gap: clamp(5px, 1.2vmin, 9px);
  }

  .settings-card,
  .status-card,
  .account-card,
  .equipment-panel,
  .backpack-panel,
  .inventory-details,
  .merchant-buy-panel,
  .merchant-sell-panel,
  .bank-storage-panel,
  .bank-inventory-panel {
    padding: clamp(6px, 1.3vmin, 10px);
  }

  .inventory-layout-v16 {
    grid-template-columns: minmax(205px, .82fr) minmax(215px, 1fr) minmax(150px, .66fr);
    gap: clamp(5px, 1vmin, 8px);
  }

  .equipment-grid {
    grid-template-rows: repeat(4, minmax(35px, 1fr));
    gap: 4px;
    margin-top: 5px;
  }

  .equipment-slot { min-height: 35px; }
  .inventory-layout-v16 .inventory-slot { min-height: 31px; }

  .merchant-layout,
  .bank-layout {
    gap: 7px;
  }

  .merchant-buy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .merchant-product {
    min-height: 44px;
    margin-top: 0;
  }

  .bank-gold-panel {
    padding: 7px;
    gap: 5px;
  }

  .bank-grid { gap: 4px; }
  .bank-slot { border-radius: 6px; }

  .attribute-panel--qol { padding: 7px; }
  .attribute-panel--qol .attribute-row {
    min-height: 39px;
    padding: 3px 5px;
  }
  .attribute-summary--qol { gap: 4px; padding: 5px; }

  .credits-card { min-height: 0; padding: clamp(14px, 4vmin, 24px); }
}

/* Em portrait usamos mais largura útil antes de empilhar conteúdo; isso evita
   que "responsivo" signifique simplesmente criar uma coluna enorme. */
@media (orientation: portrait) and (max-width: 700px) {
  .status-dashboard,
  .account-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merchant-layout,
  .bank-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-layout-v16 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-layout-v16 .inventory-details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .menu-window { padding: 7px; }
  .status-card h3 { font-size: .62rem; }
  .status-group dt,
  .status-group dd { font-size: .61rem; }
  .account-card { padding: 7px; }
  .attribute-row small,
  .attribute-balance-note,
  .attribute-lock-note { font-size: .62rem; }
}

/* V36.10.55 — Admin inventory catalog rework ----------------------------
   O menu Admin é a exceção intencional à regra "sem scroll": a janela nunca
   cresce além da viewport, enquanto somente o catálogo de itens pode rolar. */
.admin-inventory-page {
  width: min(100%, 1120px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.admin-inventory-heading,
.admin-inventory-toolbar {
  flex: 0 0 auto;
}

.admin-inventory-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(138px, 168px) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.admin-inventory-categories {
  min-height: 0;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 2px solid rgba(255, 255, 255, .13);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(29, 39, 45, .82), rgba(15, 24, 30, .88));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .34);
}

.admin-inventory-category {
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 7px;
  background: rgba(7, 15, 21, .72);
  color: #dce7ed;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.admin-inventory-category small {
  min-width: 23px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #aebfca;
  font-size: .61rem;
  text-align: center;
}

.admin-inventory-category:hover {
  border-color: rgba(106, 211, 224, .36);
  background: rgba(14, 42, 50, .88);
}

.admin-inventory-category.is-active {
  border-color: rgba(106, 211, 224, .62);
  background: linear-gradient(180deg, rgba(19, 77, 91, .98), rgba(13, 54, 65, .98));
  color: #f3fdff;
  box-shadow: inset 0 0 0 1px rgba(147, 231, 240, .12);
}

.admin-inventory-category.is-active small {
  background: rgba(173, 240, 247, .16);
  color: #eaffff;
}

/* Sobrescreve apenas no Admin a regra V36.10.54 que retirava scroll interno. */
.game-menu-window .admin-inventory-grid,
.admin-inventory-grid {
  min-height: 0;
  height: 100%;
  max-height: none;
  display: block;
  padding: 0 7px 8px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.admin-inventory-grid::-webkit-scrollbar,
.admin-inventory-categories::-webkit-scrollbar {
  width: 8px;
}

.admin-inventory-grid::-webkit-scrollbar-track,
.admin-inventory-categories::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .16);
  border-radius: 999px;
}

.admin-inventory-grid::-webkit-scrollbar-thumb,
.admin-inventory-categories::-webkit-scrollbar-thumb {
  background: rgba(135, 177, 193, .42);
  border-radius: 999px;
}

.admin-item-section {
  margin: 0 0 10px;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, .10);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(18, 28, 35, .83), rgba(9, 17, 23, .88));
}

.admin-item-section:last-child { margin-bottom: 0; }

.admin-item-section-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 29px;
  margin: -2px -2px 7px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 7px;
  background: rgba(10, 21, 28, .96);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .22);
}

.admin-item-section-heading strong {
  color: #edf8fb;
  font-size: .74rem;
  letter-spacing: .015em;
}

.admin-item-section-heading small {
  color: #9eb5c1;
  font-size: .62rem;
}

.admin-item-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-item-empty {
  min-height: 120px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255, 255, 255, .12);
  border-radius: 11px;
  color: #becbd4;
  text-align: center;
}

@media (max-width: 1120px), (max-height: 720px) {
  .admin-inventory-heading { margin-bottom: 7px; }
  .admin-inventory-heading p { font-size: .72rem; }
  .admin-inventory-toolbar { gap: 7px; margin-bottom: 7px; }
  .admin-inventory-toolbar input { min-height: 32px; }
  .admin-gold-button, .admin-diamond-button, .admin-xp-button { min-height: 32px; }
  .admin-inventory-content { grid-template-columns: minmax(118px, 145px) minmax(0, 1fr); gap: 7px; }
  .admin-inventory-category { min-height: 27px; padding: 3px 6px; font-size: .62rem; }
  .admin-item-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .admin-item-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .admin-item-icon { width: 41px; height: 41px; }
  .admin-item-card strong { font-size: .72rem; }
  .admin-item-card small { font-size: .59rem; }
  .admin-item-card em { font-size: .56rem; }
  .admin-item-card button { min-height: 29px; padding: 0 7px; font-size: .61rem; }
}

@media (max-width: 720px) {
  .admin-inventory-heading p { display: none; }
  .admin-inventory-toolbar { grid-template-columns: minmax(0, 1fr) minmax(105px, .35fr); }
  .admin-inventory-content { grid-template-columns: minmax(94px, 116px) minmax(0, 1fr); }
  .admin-item-section { padding: 6px; }
  .admin-item-section-grid { grid-template-columns: 1fr; }
  .admin-inventory-category { font-size: .57rem; }
  .admin-inventory-heading { align-items: flex-start; gap: 8px; }
  .admin-resource-actions { gap: 5px; flex-wrap: nowrap; }
  .admin-gold-button, .admin-diamond-button, .admin-xp-button { min-height: 30px; padding-inline: 9px; font-size: .68rem; }
}

/* V36.10.56 — Attribute pages + dedicated quiver storage ------------------
   Atributos deixam de competir por altura: distribuição e status derivados
   ocupam páginas independentes. A aljava deixa o inventário principal e abre
   seu próprio armazenamento, com scroll restrito apenas aos compartimentos. */
.attribute-page-heading {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(9px, 1.8vh, 16px);
}

.attribute-page-heading > div {
  min-width: 0;
  text-align: center;
}

.attribute-page-heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
}

.attribute-page-heading small {
  display: block;
  margin-top: 2px;
  color: rgba(219, 232, 238, .66);
  font-size: clamp(.62rem, 1vw, .76rem);
  font-weight: 850;
  letter-spacing: .04em;
}

.attribute-page-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border: 2px solid rgba(255, 231, 132, .32);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(65, 76, 82, .92), rgba(29, 38, 44, .96));
  color: #ffe786;
  font: inherit;
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .36);
}

.attribute-page-arrow:hover,
.attribute-page-arrow:focus-visible {
  background: linear-gradient(180deg, rgba(84, 98, 104, .96), rgba(38, 50, 57, .98));
  border-color: rgba(255, 231, 132, .62);
}

.attribute-page-arrow[hidden] {
  visibility: hidden;
  display: grid;
  pointer-events: none;
}

.attribute-subpage[hidden] {
  display: none;
}

.attributes-page .attribute-panel {
  margin-bottom: 8px;
}

.attribute-derived-subpage {
  display: grid;
  gap: 10px;
}

.attribute-derived-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(20, 31, 38, .76);
  text-align: left;
}

.attribute-derived-heading strong {
  color: #ffe786;
  font-size: clamp(.86rem, 1.4vw, 1.05rem);
}

.attribute-derived-heading small {
  color: rgba(225, 236, 241, .66);
  font-size: clamp(.62rem, .95vw, .76rem);
  text-align: right;
}

/* A mochila e a aljava compartilham o mesmo card central, mas nunca aparecem
   juntas. Isso devolve espaço ao inventário principal. */
.backpack-panel {
  min-height: 0;
  overflow: hidden;
}

.inventory-storage-view[hidden],
.quiver-panel--standalone[hidden] {
  display: none;
}

.quiver-panel--standalone {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiver-view-heading {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.quiver-back-button {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(143, 224, 199, .3);
  border-radius: 8px;
  background: rgba(15, 43, 43, .86);
  color: #a8ead6;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  cursor: pointer;
}

.quiver-back-button:hover,
.quiver-back-button:focus-visible {
  border-color: rgba(143, 224, 199, .62);
  background: rgba(22, 59, 58, .96);
}

.quiver-heading-copy {
  min-width: 0;
  text-align: right;
}

.quiver-heading-copy h3 {
  margin: 0;
  color: #d9fff2;
  font-size: clamp(.9rem, 1.55vw, 1.25rem);
}

.quiver-heading-copy strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #8fe0c7;
  font-size: clamp(.58rem, .86vw, .76rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiver-equipped-card {
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(143, 224, 199, .22);
  border-radius: 9px;
  background: rgba(13, 33, 36, .72);
  color: #e5fff7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quiver-equipped-card:hover:not(:disabled),
.quiver-equipped-card:focus-visible:not(:disabled) {
  border-color: rgba(143, 224, 199, .55);
  background: rgba(18, 48, 50, .9);
}

.quiver-equipped-card:disabled {
  opacity: .52;
  cursor: default;
}

.quiver-equipped-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.quiver-equipped-card small {
  color: rgba(211, 238, 231, .58);
  font-size: .56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quiver-equipped-card strong {
  overflow: hidden;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiver-equipped-card b {
  color: #8fe0c7;
  font-size: .62rem;
}

.quiver-equipped-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.quiver-equipped-icon .inventory-item-icon {
  width: 31px;
  height: 31px;
}

/* Exceção intencional à política geral de menus sem scroll: só os slots
   INTERNOS da aljava rolam, mantendo cabeçalho, equipamento e detalhes fixos. */
.game-menu-window .quiver-panel--standalone .quiver-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 3px 4px 3px 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 211, 185, .58) rgba(7, 14, 19, .5);
}

.game-menu-window .quiver-panel--standalone .quiver-grid::-webkit-scrollbar {
  width: 7px;
}

.game-menu-window .quiver-panel--standalone .quiver-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(111, 211, 185, .5);
}

@media (max-width: 760px), (max-height: 610px) {
  .attribute-page-heading {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 7px;
    margin-bottom: 7px;
  }

  .attribute-page-arrow {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1.6rem;
  }

  .attribute-page-heading h2 {
    font-size: clamp(1.05rem, 4.2vmin, 1.55rem);
  }

  .attribute-page-heading small {
    font-size: .58rem;
  }

  .attribute-derived-heading {
    padding: 7px 9px;
  }

  .quiver-equipped-card {
    min-height: 42px;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    padding: 4px 6px;
  }

  .quiver-equipped-icon,
  .quiver-equipped-icon .inventory-item-icon {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 500px) {
  .attribute-derived-heading {
    display: grid;
    gap: 2px;
  }

  .attribute-derived-heading small {
    text-align: left;
  }

  .game-menu-window .quiver-panel--standalone .quiver-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.attributes-page .attribute-derived-subpage .attribute-summary--qol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.equipment-slot--quiver.storage-open {
  border-color: rgba(143, 224, 199, .9);
  box-shadow:
    inset 0 0 0 2px rgba(3, 7, 11, .62),
    0 0 0 3px rgba(111, 211, 185, .2),
    0 0 12px rgba(111, 211, 185, .18);
}

@media (max-width: 390px) {
  .attributes-page .attribute-derived-subpage .attribute-summary--qol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V36.10.57 — PvP / PK HUD ------------------------------------------------ */
.pvp-mode-button {
  position: absolute;
  z-index: 9;
  top: max(8px, env(safe-area-inset-top));
  right: calc(max(10px, env(safe-area-inset-right)) + clamp(96px, 9.4vw, 140px));
  display: grid;
  place-items: center;
  width: clamp(42px, 4.1vw, 62px);
  height: clamp(42px, 4.1vw, 62px);
  border: 0;
  background: transparent;
  color: #f5f7f9;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.82));
  transition: color .14s ease, filter .14s ease, transform .12s ease;
}
.pvp-mode-button:hover { filter: brightness(1.18) drop-shadow(0 2px 2px rgba(0,0,0,.82)); }
.pvp-mode-button:active { transform: translateY(1px) scale(.97); }
.pvp-sword-icon { width: 72%; height: 72%; transform: rotate(-5deg); overflow: visible; }
.pvp-mode-badge {
  position: absolute;
  left: 50%; bottom: -1px; transform: translateX(-50%);
  min-width: 30px; padding: 1px 4px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 7px;
  background: rgba(4,9,13,.88); color: currentColor;
  font: 900 clamp(.48rem,.55vw,.62rem)/1.15 system-ui,sans-serif;
  letter-spacing: .05em; text-align: center; white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}
.pvp-mode-button--peace { color: #f2f5f7; }
.pvp-mode-button--hunter { color: #ffd84d; filter: drop-shadow(0 0 7px rgba(255,216,77,.38)) drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
.pvp-mode-button--open { color: #ff4e55; filter: drop-shadow(0 0 9px rgba(255,55,65,.56)) drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
.pvp-mode-button--open::before {
  content:""; position:absolute; inset:5px; border:1px solid rgba(255,65,75,.34); border-radius:50%;
  animation:pvp-open-pulse 1.4s ease-out infinite; pointer-events:none;
}
@keyframes pvp-open-pulse { 0%{transform:scale(.72);opacity:.85} 75%,100%{transform:scale(1.22);opacity:0} }

.pvp-status-chip {
  position:absolute; z-index:8;
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(48px,4.7vw,70px));
  right: calc(max(10px, env(safe-area-inset-right)) + clamp(88px,8.8vw,132px));
  display:grid; grid-template-columns:auto auto auto; align-items:center; gap:6px;
  max-width:min(270px,46vw); padding:5px 8px 5px 6px;
  border:1px solid rgba(255,255,255,.16); border-radius:9px;
  background:linear-gradient(180deg,rgba(13,17,21,.90),rgba(5,8,11,.91));
  box-shadow:0 6px 18px rgba(0,0,0,.34); color:#f4f6f8;
  pointer-events:none;
}
.pvp-status-chip[hidden] { display:none !important; }
.pvp-status-skull { font:900 1.25rem/1 Georgia,serif; color:#f4f4ef; text-shadow:0 1px 2px #000,0 0 6px currentColor; }
.pvp-status-chip > span:nth-child(2) { display:grid; line-height:1.05; }
.pvp-status-chip strong { font:900 .68rem/1.05 system-ui,sans-serif; letter-spacing:.03em; }
.pvp-status-chip small { margin-top:2px; color:rgba(255,255,255,.7); font:800 .61rem/1 system-ui,sans-serif; }
.pvp-status-chip em { padding:3px 5px; border-radius:5px; background:rgba(255,255,255,.06); color:#f4dca3; font:800 .59rem/1 system-ui,sans-serif; font-style:normal; white-space:nowrap; }
.pvp-status-chip[data-pk="yellow"] .pvp-status-skull { color:#ffd84d; }
.pvp-status-chip[data-pk="orange"] .pvp-status-skull { color:#ff952f; }
.pvp-status-chip[data-pk="red"] .pvp-status-skull { color:#ff4650; }
.pvp-status-chip[data-pk="black"] .pvp-status-skull { color:#111318; -webkit-text-stroke:1px rgba(255,255,255,.58); text-shadow:0 0 7px rgba(255,38,48,.72); }
.game-frame.menu-open .pvp-mode-button,
.game-frame.menu-open .pvp-status-chip { display:none !important; }

@media (max-height:620px) {
  .pvp-mode-button { top:max(5px,env(safe-area-inset-top)); right:calc(max(7px,env(safe-area-inset-right)) + 96px); width:38px; height:38px; }
  .pvp-status-chip { top:44px; right:calc(max(7px,env(safe-area-inset-right)) + 82px); transform:scale(.88); transform-origin:top right; }
}

/* V36.10.60 — escolha de controle desktop -------------------------------- */
.settings-card--control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.control-mode-select {
  min-width: 170px;
  max-width: 48%;
  padding: 9px 12px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 9px;
  background: rgba(8,18,23,.94);
  color: #f3fbf7;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.control-mode-select:focus-visible {
  outline: 3px solid rgba(155,228,255,.42);
  outline-offset: 2px;
}
html.mobile-performance .desktop-control-card { display: none !important; }
@media (max-width: 620px) {
  .settings-card--control { align-items: stretch; flex-direction: column; }
  .control-mode-select { width: 100%; max-width: none; }
}

/* V36.10.62 — Mage hotbar: linguagem visual arcana própria. */
.action-icon--arcane-shields::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 2px solid rgba(155, 238, 255, .96);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(112, 205, 255, .75), inset 0 0 8px rgba(159, 106, 255, .42);
}
.action-icon--arcane-shields::after {
  content: "✦ ✦ ✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c5f4ff;
  font-size: .56em;
  letter-spacing: .08em;
  text-shadow: 0 0 6px #7752e8;
}
.action-icon--arcane-lance::before {
  content: "";
  position: absolute;
  left: 18%; top: 44%;
  width: 65%; height: 12%;
  border-radius: 999px;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, rgba(112,92,255,.15), #a877ff 38%, #d7f8ff 82%);
  box-shadow: 0 0 9px #7adfff;
}
.action-icon--arcane-lance::after {
  content: "◇";
  position: absolute;
  left: 12%; top: 12%;
  color: #aeeeff;
  font-size: 1.08em;
  text-shadow: 0 0 7px #8b62ff;
}
.action-icon--arcane-rupture::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.96) 0 8%, transparent 10%),
    radial-gradient(circle at center, transparent 0 28%, rgba(167,242,255,.96) 29% 31%, transparent 33%),
    radial-gradient(circle at center, transparent 0 48%, rgba(199,134,255,.92) 49% 51%, transparent 53%),
    radial-gradient(circle at center, transparent 0 67%, rgba(164,238,255,.92) 68% 70%, transparent 72%);
  box-shadow: 0 0 9px rgba(122,225,255,.68), inset 0 0 10px rgba(168,103,255,.42);
}
.action-icon--arcane-rupture::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #eefbff;
  font-size: .98em;
  text-shadow:
    0 0 8px #7be6ff,
    0 -10px 0 rgba(214,169,255,.92),
    0 10px 0 rgba(214,169,255,.92),
    -10px 0 0 rgba(160,234,255,.88),
    10px 0 0 rgba(160,234,255,.88);
}

/* V36.10.83 — Paladin: ouro quente, marfim e pulsos da Primeira Luz. */
.action-icon--restoring-light::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fffde2 0 13%, #ffd86a 15% 25%, transparent 28%),
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,232,135,.95) 9% 14%, transparent 15% 33%, rgba(255,232,135,.95) 34% 39%, transparent 40% 58%, rgba(255,232,135,.95) 59% 64%, transparent 65% 83%, rgba(255,232,135,.95) 84% 89%, transparent 90%);
  filter: drop-shadow(0 0 5px rgba(255,210,83,.88));
}
.action-icon--restoring-light::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffef0;
  font-size: .92em;
  font-weight: 1000;
  text-shadow: 0 0 7px #d68d24;
}
.action-icon--consecrated-strike::before {
  content: "";
  position: absolute;
  left: 43%; top: 5%;
  width: 15%; height: 82%;
  border: 2px solid #6b471f;
  border-radius: 45% 45% 24% 24%;
  transform: rotate(43deg);
  background: linear-gradient(#fff5b0 0 18%, #cf8d35 20% 42%, #6e4427 44% 100%);
  box-shadow: 0 0 8px rgba(255,218,93,.88);
}
.action-icon--consecrated-strike::after {
  content: "✦";
  position: absolute;
  right: 5%; top: 3%;
  color: #fff7ba;
  font-size: 1.02em;
  text-shadow: 0 0 7px #e39a31, -12px 14px 0 rgba(255,219,100,.48);
}
.action-icon--dawn-sanctuary::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 2px solid #ffe596;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,251,211,.96) 0 9%, rgba(255,195,60,.5) 11% 16%, transparent 18%),
    radial-gradient(circle, transparent 0 41%, rgba(255,227,129,.88) 43% 47%, transparent 49%),
    conic-gradient(from 22.5deg, rgba(255,225,124,.88) 0 5%, transparent 6% 20%, rgba(255,225,124,.88) 21% 26%, transparent 27% 45%, rgba(255,225,124,.88) 46% 51%, transparent 52% 70%, rgba(255,225,124,.88) 71% 76%, transparent 77%);
  box-shadow: 0 0 9px rgba(255,192,58,.72), inset 0 0 8px rgba(255,247,191,.42);
}
.action-icon--dawn-sanctuary::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffef0;
  font-size: .86em;
  text-shadow: 0 0 7px #d88e23;
}

/* V36.10.90 — ícones exclusivos do Assassino, desenhados sem assets externos. */
.action-icon--dark-step::before {
  content: "";
  position: absolute;
  inset: 18% 12%;
  border: 3px solid #cdbbff;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-22deg) skewX(-12deg);
  filter: drop-shadow(0 0 4px rgba(144, 89, 255, 0.9));
}
.action-icon--dark-step::after {
  content: "";
  position: absolute;
  width: 28%; height: 46%;
  right: 14%; top: 23%;
  border-radius: 55% 55% 38% 38%;
  background: linear-gradient(180deg, #ebe3ff, #7c4ccc 62%, transparent 63%);
  box-shadow: -12px 4px 0 -5px rgba(154, 102, 255, 0.68), -21px 8px 0 -7px rgba(154, 102, 255, 0.38);
  transform: rotate(28deg);
}
.action-icon--double-strike::before,
.action-icon--double-strike::after {
  content: "";
  position: absolute;
  width: 9%; height: 72%;
  top: 11%;
  border: 2px solid #171824;
  border-radius: 70% 70% 25% 25%;
  background: linear-gradient(90deg, #69747d, #f1f5ec 48%, #7b858b 52%);
  box-shadow: 0 0 5px rgba(183, 157, 255, 0.65);
}
.action-icon--double-strike::before { left: 32%; transform: rotate(35deg); }
.action-icon--double-strike::after { right: 32%; transform: rotate(-35deg); }
.action-icon--execution::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 3px solid #ffcf8f;
  border-top-color: #ff607b;
  border-bottom-color: #8f5eff;
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255, 92, 125, 0.5), 0 0 6px rgba(151, 92, 255, 0.65);
  transform: rotate(36deg);
}
.action-icon--execution::after {
  content: "";
  position: absolute;
  width: 10%; height: 70%;
  left: 45%; top: 12%;
  border-radius: 60% 60% 20% 20%;
  background: linear-gradient(90deg, #7b4a76, #fff0b6 45%, #cf5671 52%, #55234e);
  transform: rotate(44deg);
  filter: drop-shadow(0 0 4px #ff6b87);
}

.class-card[data-character-class="assassin"] .class-card__crest {
  color: #e6d9ff;
  border-color: rgba(162, 112, 255, 0.48);
  background: linear-gradient(180deg, rgba(89, 49, 115, 0.72), rgba(24, 22, 45, 0.92));
  box-shadow: inset 0 0 18px rgba(164, 94, 255, 0.16);
}


/* V36.10.67 — Merchant / NPC viewport repair -----------------------------
   Data-heavy NPC windows must stay readable. Lists scroll inside their cards;
   the whole page is never crushed to 45% just to satisfy the viewport. */
/* The old overlay used touch-action:none, which also suppressed finger scrolling
   on mobile. While the menu is open, vertical panning belongs to the menu UI. */
.menu-overlay {
  touch-action: pan-y;
}

.menu-page--scroll-fallback {
  max-height: 100%;
  padding-right: 6px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.menu-page--scroll-fallback::-webkit-scrollbar,
.merchant-buy-grid::-webkit-scrollbar,
.merchant-sell-grid::-webkit-scrollbar,
.bank-grid::-webkit-scrollbar {
  width: 8px;
}

.menu-page--scroll-fallback::-webkit-scrollbar-track,
.merchant-buy-grid::-webkit-scrollbar-track,
.merchant-sell-grid::-webkit-scrollbar-track,
.bank-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .18);
  border-radius: 999px;
}

.menu-page--scroll-fallback::-webkit-scrollbar-thumb,
.merchant-buy-grid::-webkit-scrollbar-thumb,
.merchant-sell-grid::-webkit-scrollbar-thumb,
.bank-grid::-webkit-scrollbar-thumb {
  background: rgba(147, 181, 194, .46);
  border-radius: 999px;
  border: 2px solid rgba(5, 12, 17, .55);
}

/* Merchant and blacksmith share this page. Keep heading/detail controls fixed
   and give only the changing item collections their own scroll region. */
.merchant-page {
  width: min(100%, 1060px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.merchant-page > h2 {
  flex: 0 0 auto;
  margin: 0 0 clamp(7px, 1.5vmin, 13px);
  padding-inline: 2px;
  text-align: center;
}

.merchant-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(300px, .76fr);
  gap: clamp(8px, 1.3vmin, 14px);
  align-items: stretch;
  overflow: hidden;
}

.merchant-buy-panel,
.merchant-sell-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.35vmin, 13px);
  overflow: hidden;
}

.merchant-heading,
.merchant-buy-panel > h3,
.merchant-sell-panel > h3 {
  flex: 0 0 auto;
}

.merchant-buy-panel h3,
.merchant-sell-panel h3 {
  margin: 0 0 7px;
  font-size: clamp(.86rem, 1.6vmin, 1.1rem);
}

/* Explicitly override the old V36.10.54 no-scroll rule. */
.game-menu-window .merchant-buy-grid,
.game-menu-window .merchant-sell-grid,
.merchant-buy-grid,
.merchant-sell-grid {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.merchant-buy-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  padding: 1px 5px 5px 1px;
}

.merchant-product {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 8px;
  border-width: 1px;
}

.merchant-product > .inventory-item-icon {
  width: 32px;
  height: 32px;
  justify-self: center;
}

.merchant-product > span:nth-child(2) {
  min-width: 0;
  gap: 1px;
}

.merchant-product > span:nth-child(2) b,
.merchant-product > span:nth-child(2) small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.merchant-product > span:nth-child(2) b {
  font-size: clamp(.68rem, 1.25vmin, .84rem);
  line-height: 1.12;
}

.merchant-product small {
  font-size: clamp(.57rem, 1.02vmin, .7rem);
  line-height: 1.17;
}

.merchant-product .merchant-product-effect {
  margin-top: 2px;
  color: #d9c77c;
}

.merchant-buy-actions {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 4px;
}

.merchant-buy-actions button {
  min-width: 0;
  min-height: 26px;
  padding: 3px 5px;
  font-size: clamp(.58rem, 1.02vmin, .69rem);
  line-height: 1.08;
  white-space: normal;
}

.merchant-sell-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  grid-auto-rows: minmax(52px, 64px);
  align-content: start;
  gap: 6px;
  padding: 1px 5px 5px 1px;
}

.merchant-sell-slot {
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

.merchant-selection {
  flex: 0 0 auto;
  min-height: 76px;
  margin-top: 8px;
  padding: 8px;
  gap: 4px;
}

.merchant-selection strong {
  font-size: clamp(.72rem, 1.2vmin, .86rem);
}

.merchant-selection small {
  font-size: clamp(.6rem, 1.05vmin, .73rem);
  line-height: 1.22;
}

.merchant-sell-actions {
  gap: 5px;
}

.merchant-sell-actions > button {
  min-height: 32px;
  margin: 0;
  font-size: clamp(.64rem, 1.1vmin, .78rem);
}

/* Banker gets the same resilience: gold controls stay visible and item grids
   become independently scrollable if a small viewport cannot fit 20 slots. */
.bank-page {
  width: min(100%, 1040px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.bank-page > h2,
.bank-gold-panel {
  flex: 0 0 auto;
}

.bank-page > h2 {
  margin: 0 0 8px;
  text-align: center;
}

.bank-gold-panel {
  margin-bottom: 8px;
}

.bank-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.bank-storage-panel,
.bank-inventory-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.game-menu-window .bank-grid,
.bank-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-height: 700px) and (min-width: 721px) {
  .merchant-page > h2,
  .bank-page > h2 {
    font-size: clamp(.96rem, 2.6vmin, 1.35rem);
    margin-bottom: 5px;
  }

  .merchant-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(285px, .7fr);
    gap: 6px;
  }

  .merchant-buy-panel,
  .merchant-sell-panel {
    padding: 6px;
  }

  .merchant-buy-grid {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 5px;
  }

  .merchant-product {
    padding: 5px 6px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 3px 6px;
  }

  .merchant-product > .inventory-item-icon {
    width: 27px;
    height: 27px;
  }

  .merchant-buy-actions button {
    min-height: 23px;
    padding: 2px 4px;
  }

  .merchant-sell-grid {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    grid-auto-rows: minmax(46px, 54px);
    gap: 4px;
  }

  .merchant-selection {
    min-height: 64px;
    margin-top: 5px;
    padding: 6px;
  }

  .bank-gold-panel {
    padding: 6px;
    gap: 4px;
  }

  .bank-gold-panel input,
  .bank-gold-panel button {
    min-height: 31px;
  }
}

/* Narrow/portrait screens should scroll naturally instead of squeezing two
   full merchant columns into an unreadable sliver. */
@media (max-width: 720px) {
  .merchant-page,
  .bank-page {
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .merchant-layout,
  .bank-layout {
    flex: 0 0 auto;
    min-height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .merchant-buy-panel,
  .merchant-sell-panel,
  .bank-storage-panel,
  .bank-inventory-panel {
    overflow: hidden;
  }

  .merchant-buy-grid {
    flex: none;
    max-height: min(44dvh, 390px) !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .merchant-sell-grid,
  .bank-grid {
    flex: none;
    max-height: min(35dvh, 300px) !important;
  }

  .bank-gold-panel {
    grid-template-columns: 1fr 1fr;
  }

  .bank-gold-summary,
  .bank-gold-presets {
    grid-column: 1 / -1;
  }
}


/* V36.11.0 — Party Experience ------------------------------------------ */
.party-hud {
  position: absolute;
  z-index: 7;
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(62px, 4.35vw, 74px));
  left: max(8px, env(safe-area-inset-left));
  width: clamp(210px, 19vw, 292px);
  padding: 7px;
  border: 1px solid rgba(140, 199, 239, .32);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(5, 14, 22, .88), rgba(4, 10, 16, .82));
  box-shadow: 0 8px 20px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(6px);
  color: #edf7ff;
}
.party-hud[hidden] { display: none !important; }
.party-hud__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px;
}
.party-hud__header > div { display: flex; align-items: baseline; gap: 6px; }
.party-hud__header strong {
  color: #d9efff; font-size: .61rem; font-weight: 1000; letter-spacing: .13em;
}
.party-hud__header small, .party-hud__header > span {
  color: rgba(198,225,243,.65); font-size: .53rem; font-weight: 900; letter-spacing: .08em;
}
.party-hud__header > span { color: #f3d477; }
.party-hud__members { display: grid; gap: 4px; }
.party-member-card {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  gap: 6px;
  min-height: 42px;
  padding: 5px 6px;
  border: 1px solid rgba(129, 179, 213, .18);
  border-radius: 6px;
  background: rgba(12, 26, 38, .78);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}
button.party-member-card {
  width: 100%; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
button.party-member-card:hover, button.party-member-card:focus-visible {
  border-color: rgba(121,201,255,.58); background: rgba(18, 43, 61, .9); outline: none;
}
.party-member-card.is-support-target {
  border-color: rgba(255, 221, 111, .82);
  box-shadow: inset 0 0 0 1px rgba(255,221,111,.16);
}
.party-member-card.is-low-health { border-color: rgba(244, 91, 100, .55); }
.party-member-card.is-dead { opacity: .56; filter: saturate(.55); }
.party-member-card.is-other-map { opacity: .72; }
.party-member-emblem {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  align-self: center;
  border: 1px solid rgba(177, 213, 237, .3);
  border-radius: 7px;
  background: rgba(23, 47, 66, .9);
  color: #e8f6ff;
  font-size: .57rem; font-weight: 1000; letter-spacing: .03em;
}
.party-member-emblem[data-class="knight"] { border-color: rgba(187,203,217,.52); }
.party-member-emblem[data-class="archer"] { border-color: rgba(129,206,139,.58); }
.party-member-emblem[data-class="mage"] { border-color: rgba(123,174,255,.68); }
.party-member-emblem[data-class="paladin"] { border-color: rgba(255,218,107,.68); }
.party-member-emblem[data-class="assassin"] { border-color: rgba(193,133,238,.64); }
.party-member-main { min-width: 0; display: grid; gap: 3px; }
.party-member-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.party-member-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #f4f9fd; font-size: .63rem; font-weight: 950;
}
.party-member-level { flex: none; color: rgba(210,228,241,.68); font-size: .49rem; font-weight: 900; }
.party-member-leader { flex:none; color:#f1cf63; font-size:.57rem; line-height:1; }
.party-member-state {
  margin-left: auto; flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(196,219,234,.64); font-size: .47rem; font-weight: 850;
}
.party-member-resources { display: grid; gap: 2px; }
.party-mini-bar {
  position: relative; height: 6px; overflow: hidden; border-radius: 3px;
  background: rgba(0,0,0,.48); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.party-mini-bar > span { display:block; height:100%; width:0; transition:width 110ms linear; }
.party-mini-bar--health > span { background: #d92c40; }
.party-mini-bar--mana > span { background: #1eadd0; }
.party-mini-bar > small {
  position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.39rem; font-weight:1000;
  text-shadow:1px 1px 0 #000; line-height:1;
}
.party-hud__hint {
  display:block; margin:5px 2px 0; color:rgba(177,207,227,.5); font-size:.45rem; font-weight:800;
}
.party-hud.has-support-target .party-hud__hint { color:rgba(255,222,113,.78); }
.game-frame.menu-open .party-hud { opacity: .34; pointer-events:none; }

@media (max-width: 700px), (max-height: 620px) {
  .party-hud {
    top: calc(max(5px, env(safe-area-inset-top)) + 51px);
    width: min(184px, 38vw);
    padding: 5px;
    border-radius: 7px;
  }
  .party-hud__header { padding-bottom:4px; }
  .party-hud__header strong { font-size:.53rem; }
  .party-member-card { grid-template-columns:25px minmax(0,1fr); min-height:34px; padding:3px 4px; gap:4px; }
  .party-member-emblem { width:24px; height:24px; border-radius:5px; font-size:.47rem; }
  .party-member-name { font-size:.54rem; }
  .party-member-level, .party-member-state { font-size:.41rem; }
  .party-mini-bar { height:5px; }
  .party-mini-bar > small { display:none; }
  .party-hud__hint { display:none; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .party-hud { width:min(168px, 46vw); }
}
/* V36.12.5 — entrada do beta online */
.login-overlay{position:absolute;inset:0;z-index:1200;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 18px;background:radial-gradient(circle at 50% 25%,rgba(53,77,91,.55),transparent 40%),rgba(3,10,15,.94);backdrop-filter:blur(8px)}
.login-overlay[hidden]{display:none}.login-card{width:min(390px,92vw);padding:28px;border:1px solid rgba(203,174,101,.48);border-radius:16px;background:linear-gradient(155deg,rgba(24,38,46,.98),rgba(8,16,22,.99));box-shadow:0 24px 80px #000, inset 0 0 45px rgba(172,126,49,.06);color:#eef5f7;text-align:center}
.login-emblem{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border:2px solid #d1ad59;transform:rotate(45deg);background:#152631;color:#ffe39c;font:900 30px Georgia}.login-emblem::first-letter{transform:rotate(-45deg)}
.login-kicker{color:#d9b866;font-size:.68rem;font-weight:900;letter-spacing:.16em}.login-card h1{margin:10px 0 6px;font:800 clamp(1.35rem,5vw,1.8rem) Georgia}.login-card p{margin:0 0 20px;color:#aebdc5;font-size:.82rem}
.login-card form,.login-card label{display:grid;gap:8px}.login-card form{gap:14px}.login-card label{text-align:left;color:#d5e0e5;font-size:.7rem;font-weight:800}.login-card input{height:44px;padding:0 13px;border:1px solid #52646d;border-radius:8px;background:#071117;color:#fff;font:700 1rem system-ui;outline:none}.login-card input:focus{border-color:#d5b159;box-shadow:0 0 0 3px rgba(213,177,89,.14)}
.login-card .login-consent{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:9px;line-height:1.35}.login-card .login-consent input{width:18px;height:18px;padding:0}.login-card .login-consent a{color:#e6c873}
.login-card form button{height:46px;border:1px solid #f0cf79;border-radius:9px;background:linear-gradient(#d5a848,#9a6b23);color:#171005;font-weight:1000;cursor:pointer}.login-card form button:disabled{opacity:.55}.login-mode{margin:14px 0 8px;border:0;background:none;color:#e3c573;font-weight:850;text-decoration:underline;cursor:pointer}.login-feedback{display:block;min-height:20px;color:#ff9b92;font-size:.72rem;font-weight:800}.login-feedback.is-ok{color:#8fe1a8}.login-card>small{display:block;margin-top:9px;color:#71858f;font-size:.62rem}

/* V36.12.7: o login é modal de verdade. Nenhuma camada do jogo ou da seleção
   de classe pode receber hit-test antes da autenticação terminar. */
.game-frame.login-open > :not(.login-overlay){pointer-events:none!important}
.game-frame.login-open .class-selection-overlay{display:none!important;pointer-events:none!important}
.game-frame.login-open .login-overlay{position:fixed;z-index:2147483647;pointer-events:auto!important;touch-action:auto;isolation:isolate}
.game-frame.login-open .login-card,.game-frame.login-open .login-card *{pointer-events:auto!important}

/* V36.18.2 — isolamento do Ferreiro e menus móveis legíveis. */
.menu-page.blacksmith-page:not([hidden]) {
  width: min(100%, 1120px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.menu-page.blacksmith-page .blacksmith-header h2 {
  margin: 2px 0 3px;
  font-size: clamp(1rem, 2.4vmin, 1.55rem);
}

/* Em celular a interface mantém o tamanho real e passa a rolar. O ajuste por
   transform continua disponível no desktop, mas nunca achata controles touch. */
@media (max-width: 720px) {
  .menu-overlay {
    place-items: stretch;
    padding:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
  }

  .menu-overlay > .game-menu-window {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 5px;
    place-items: stretch;
    align-content: stretch;
    border-radius: 10px;
  }

  .menu-back-button {
    z-index: 3;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(5, 13, 18, .88);
    font-size: 1.75rem;
  }

  .game-menu-window > .menu-page:not([hidden]) {
    --menu-fit-scale: 1 !important;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding-top: 44px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: none;
    -webkit-overflow-scrolling: touch;
  }

  .game-menu-window > .admin-inventory-page:not([hidden]) {
    overflow: hidden;
  }

  .game-menu-window > .menu-page:not([hidden]) button,
  .game-menu-window > .menu-page:not([hidden]) input {
    min-height: 44px;
  }

  .attribute-page-arrow {
    width: 44px;
    height: 44px;
  }

  .menu-page.blacksmith-page:not([hidden]) {
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .blacksmith-header {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .blacksmith-wallet {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    justify-items: start;
    gap: 3px 10px;
  }

  .blacksmith-wallet span { justify-self: end; }
  .blacksmith-wallet small { grid-column: 1 / -1; }

  .blacksmith-layout {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel {
    min-height: 0;
    overflow: visible;
  }

  .blacksmith-equipment-grid {
    flex: none;
    max-height: min(40dvh, 320px);
  }

  .blacksmith-recipe-grid {
    flex: none;
    max-height: none;
    overflow: visible;
  }

  .blacksmith-selection {
    min-height: 0;
  }

  .blacksmith-band-tab,
  .blacksmith-craft-button,
  .blacksmith-primary-action,
  .merchant-buy-actions button,
  .merchant-sell-actions > button,
  .bank-gold-panel input,
  .bank-gold-panel button,
  .admin-gold-button,
  .admin-diamond-button,
  .admin-xp-button,
  .admin-item-card button {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .status-dashboard,
  .account-layout,
  .inventory-layout-v16 {
    grid-template-columns: 1fr;
  }

  .inventory-layout-v16 .inventory-details {
    grid-column: auto;
  }

  .equipment-panel {
    min-height: 0;
  }

  .admin-inventory-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .admin-resource-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .admin-gold-button,
  .admin-diamond-button,
  .admin-xp-button {
    min-width: 0;
    padding-inline: 6px;
    font-size: .62rem;
    line-height: 1.05;
  }

  .admin-inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-inventory-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-inventory-categories {
    min-width: 0;
    padding: 5px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-inventory-category {
    flex: 0 0 auto;
    width: auto;
    min-width: 108px;
    min-height: 44px;
  }

  .admin-item-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .admin-item-card button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .blacksmith-section-heading {
    display: grid;
    justify-items: start;
  }

  .blacksmith-band-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blacksmith-equipment-grid,
  .blacksmith-recipe-grid,
  .blacksmith-ingredients {
    grid-template-columns: 1fr;
  }

  .blacksmith-recipe-card.ascension {
    grid-column: auto;
  }

  .blacksmith-selection {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 7px;
  }

  .blacksmith-selected-icon .inventory-item-icon {
    width: 38px;
    height: 38px;
  }

  .blacksmith-power-preview {
    grid-template-columns: 1fr;
  }

  .blacksmith-power-preview > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .bank-gold-panel {
    grid-template-columns: 1fr;
  }

  .bank-gold-summary,
  .bank-gold-presets {
    grid-column: auto;
  }

  .bank-gold-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bank-gold-presets button {
    min-width: 0;
    padding-inline: 5px;
  }

  .identity-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .material-pouch-grid {
    grid-template-columns: 1fr;
  }
}

/* Telefones em paisagem são largos, mas baixos: preservamos as duas colunas
   úteis e removemos apenas espaçamento decorativo, nunca controles. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .menu-overlay > .game-menu-window {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 5px;
    place-items: stretch;
    align-content: stretch;
  }

  .menu-back-button {
    z-index: 3;
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: rgba(5, 13, 18, .88);
    font-size: 1.55rem;
  }

  .game-menu-window > .menu-page:not([hidden]) {
    --menu-fit-scale: 1 !important;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 0 0 42px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) and (min-width: 721px) {
  .blacksmith-header {
    gap: 7px;
    padding: 5px 8px;
  }

  .blacksmith-header p { display: none; }
  .blacksmith-wallet { padding: 5px 8px; }
  .blacksmith-layout { gap: 5px; }

  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel {
    gap: 4px;
    padding: 5px;
  }

  .blacksmith-rule { padding: 3px 5px; }
  .blacksmith-selection { min-height: 82px; padding: 5px; }
  .blacksmith-recipe-card { gap: 3px; padding: 5px; }
}

/* Invariante final: nenhuma regra visual de página pode neutralizar hidden. */
.game-menu-window > .menu-page[hidden] {
  display: none !important;
}

/* V36.58.0 — o Ferreiro usa duas páginas reais. Esta regra final vence os
   layouts históricos de duas colunas que estouravam a viewport em PC/mobile. */
.menu-page.blacksmith-page:not([hidden]) {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0;
  overflow: visible;
}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-view:not([hidden]) {
  min-width: 0;
  min-height: 0;
}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-equipment-grid,
.menu-page.blacksmith-page:not([hidden]) .blacksmith-recipe-grid {
  max-height: min(46dvh, 390px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
@media (max-width: 720px), (max-height: 620px) {
  .blacksmith-page-tabs { position: sticky; top: 0; z-index: 2; padding: 3px 0; background: #071116; }
  .blacksmith-page-tabs button { min-height: 44px; }
  .menu-page.blacksmith-page:not([hidden]) .blacksmith-equipment-grid,
  .menu-page.blacksmith-page:not([hidden]) .blacksmith-recipe-grid {
    max-height: min(42dvh, 320px) !important;
  }
}

/* V36.34.4 — Mobile UI consolidation -------------------------------------
   One responsive contract for gameplay overlays, dialogues and menu pages.
   Mobile never relies on global scale-to-fit: content keeps readable sizes,
   uses safe areas/dynamic viewport units and scrolls only where necessary. */
.orientation-warning { display: none !important; }
@media (orientation: portrait) and (max-width: 900px) {
  .orientation-warning { display: none !important; }
}

.npc-dialogue__card {
  max-height: min(54dvh, 440px);
}
.npc-dialogue__content { min-height: 0; }
.npc-dialogue__text {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.npc-dialogue__page-indicator {
  align-self: flex-end;
  margin: 0 2px 7px;
  padding: 3px 8px;
  border: 1px solid rgba(226, 188, 105, .24);
  border-radius: 999px;
  color: #d8c28b;
  background: rgba(5, 11, 15, .46);
  font: 800 9px/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
}
.npc-dialogue__page-indicator[hidden] { display: none; }
.npc-dialogue[data-paged="true"] .npc-dialogue__text p {
  animation: npc-dialogue-page-enter .16s ease-out both;
}
@keyframes npc-dialogue-page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Touch devices keep physical control sizes. The visual density comes from
   tighter spacing, not from shrinking the whole menu below legibility. */
@media (pointer: coarse) {
  .game-menu-window > .menu-page:not([hidden]) {
    --menu-fit-scale: 1 !important;
    transform: none !important;
  }

  .game-menu-window > .menu-page:not([hidden]) button,
  .game-menu-window > .menu-page:not([hidden]) input,
  .game-menu-window > .menu-page:not([hidden]) select,
  .game-menu-window > .menu-page:not([hidden]) textarea,
  .npc-dialogue button,
  .chat-dock.open button,
  .chat-dock.open input,
  .login-card button,
  .login-card input,
  .class-selection-window button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .fullscreen-button { display: none; }

  .login-overlay,
  .class-selection-overlay {
    box-sizing: border-box;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .login-card,
  .class-selection-window {
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .npc-dialogue {
    box-sizing: border-box;
    align-items: flex-end;
    padding:
      0
      max(7px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left));
  }
  .npc-dialogue__veil { inset: 34% 0 0; }
  .npc-dialogue__card {
    grid-template-columns: 74px minmax(0, 1fr);
    width: min(760px, 100%);
    min-height: 0;
    max-height: min(46dvh, 350px);
    border-radius: 13px 4px 13px 4px;
  }
  .npc-dialogue__portrait {
    min-height: 0;
    height: 100%;
  }
  .npc-portrait__face { top: 30px; transform: translateX(-50%) scale(.64); }
  .npc-portrait__hair { top: 17px; transform: translateX(-50%) scale(.64); }
  .npc-portrait__body { bottom: -33px; transform: translateX(-50%) scale(.66); }
  .npc-portrait__accent { bottom: -11px; transform: translateX(-50%) scale(.66); }
  .npc-dialogue__content {
    padding: 11px 12px 10px;
  }
  .npc-dialogue__content header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 9px;
    padding: 0 38px 7px 0;
  }
  .npc-dialogue__content header > div { min-width: 0; }
  .npc-dialogue__content header span {
    overflow: hidden;
    font-size: 8px;
    letter-spacing: .11em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .npc-dialogue__content h2 {
    overflow: hidden;
    margin-top: 2px;
    font-size: clamp(16px, 4.7vw, 20px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .npc-dialogue__content header em {
    display: block;
    align-self: center;
    max-width: min(34vw, 150px);
    padding: 4px 7px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .npc-dialogue__text {
    flex: 1 1 auto;
    padding: 8px 2px 5px 0;
  }
  .npc-dialogue__text p {
    margin: 0 0 6px;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.38;
  }
  .npc-dialogue__choices {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 6px;
    width: 100%;
  }
  .npc-dialogue__choice {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px 2px;
    font-size: 10px;
  }
  .npc-dialogue__close {
    top: 7px;
    right: 7px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2, 7, 10, .72);
    font-size: 22px;
  }
  .npc-dialogue__page-indicator {
    margin-bottom: 5px;
    font-size: 8px;
  }
}

/* Phones / narrow portrait: every standard page becomes a natural vertical
   document. Complex collections keep local scrolling caps to avoid nested
   infinite pages and all controls remain inside the safe viewport. */
@media (max-width: 720px) {
  .menu-overlay {
    place-items: stretch;
    padding:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
  }
  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 5px;
    place-items: stretch;
    align-content: stretch;
    border-radius: 12px;
  }
  .game-menu-window > .menu-page:not([hidden]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 100%;
    min-height: 0;
    padding: 48px 4px max(8px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .menu-back-button {
    position: fixed;
    z-index: 24;
    top: max(9px, env(safe-area-inset-top));
    left: max(9px, env(safe-area-inset-left));
    width: 40px;
    height: 40px;
    border: 1px solid rgba(231, 241, 238, .20);
    border-radius: 11px;
    background: rgba(5, 13, 18, .94);
    box-shadow: 0 5px 15px rgba(0,0,0,.30);
    font-size: 1.7rem;
  }
  .menu-page > h2,
  .menu-title-block {
    margin-top: 0;
  }
  .menu-title-block { margin-bottom: 10px; }
  .menu-title-block small { font-size: .58rem; }
  .menu-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .menu-tile {
    min-width: 0;
    min-height: 70px;
    gap: 8px;
    padding: 9px 10px;
    border-width: 2px;
    border-radius: 10px;
  }
  .menu-tile-icon { width: 34px; height: 34px; }
  .menu-tile strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(.78rem, 4vw, 1rem);
  }

  .settings-card-heading,
  .settings-card--toggle,
  .settings-card--control {
    min-width: 0;
    gap: 10px;
  }
  .settings-card,
  .status-card,
  .account-card,
  .equipment-panel,
  .backpack-panel,
  .inventory-details,
  .merchant-buy-panel,
  .merchant-sell-panel,
  .bank-storage-panel,
  .bank-inventory-panel {
    border-radius: 10px;
  }
  .account-card input,
  .account-card textarea,
  .control-mode-select,
  .bank-gold-panel input,
  .admin-inventory-toolbar input {
    max-width: 100%;
    font-size: 16px; /* avoids browser zoom on focus */
  }

  .merchant-page,
  .bank-page,
  .menu-page.blacksmith-page:not([hidden]) {
    height: auto;
    overflow: visible;
  }
  .merchant-layout,
  .bank-layout,
  .blacksmith-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .merchant-buy-grid {
    grid-template-columns: 1fr;
    max-height: min(43dvh, 360px) !important;
  }
  .merchant-sell-grid,
  .game-menu-window .bank-grid,
  .bank-grid,
  .blacksmith-equipment-grid,
  .blacksmith-recipe-grid {
    max-height: min(38dvh, 310px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel { min-height: 0; }
  .blacksmith-recipe-grid { grid-template-columns: 1fr; }
  .blacksmith-recipe-card.ascension { grid-column: auto; }

  .bank-gold-panel { grid-template-columns: 1fr; }
  .bank-gold-summary,
  .bank-gold-presets { grid-column: auto; }
  .bank-gold-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-inventory-page:not([hidden]) {
    height: 100%;
    overflow: hidden !important;
  }
  .admin-inventory-content {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .admin-inventory-categories {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .admin-inventory-category {
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
  }
  .game-menu-window .admin-inventory-grid { height: 100%; overflow-y: auto; }

  .login-overlay { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .login-card {
    width: min(390px, 100%);
    padding: clamp(15px, 5vw, 22px);
    border-radius: 13px;
  }
  .login-emblem { width: 46px; height: 46px; margin-bottom: 8px; font-size: 24px; }
  .login-card p { margin-bottom: 13px; }
  .login-card form { gap: 10px; }

  .class-selection-window { max-width: 100%; }
  .class-selection-header { padding: 14px 14px 10px; }
  .class-selection-layout { padding: 10px; }

  .chat-dock.open {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
  }
  .chat-form { min-width: 0; }
  .chat-send { min-width: 76px; }

  .player-interaction-panel,
  .party-invite-panel {
    max-width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
  }
}

/* Portrait gameplay is supported instead of being blocked. HUD groups reserve
   separate zones so the three top-right controls do not collide with HP/Mana. */
@media (pointer: coarse) and (orientation: portrait) {
  .resource-panel {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    width: min(250px, calc(100vw - 154px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  .health-bar { height: 25px; }
  .mana-bar { height: 16px; }
  .experience-bar { height: 5px; }
  .resource-bar strong { font-size: .68rem; }
  .menu-button,
  .chat-button,
  .pvp-mode-button {
    top: max(6px, env(safe-area-inset-top));
    width: 42px;
    height: 42px;
  }
  .menu-button { right: max(6px, env(safe-area-inset-right)); font-size: 1.85rem; }
  .chat-button { right: calc(max(6px, env(safe-area-inset-right)) + 44px); font-size: 1.35rem; }
  .pvp-mode-button { right: calc(max(6px, env(safe-area-inset-right)) + 88px); }
  .pvp-status-chip {
    top: calc(max(6px, env(safe-area-inset-top)) + 45px);
    right: max(7px, env(safe-area-inset-right));
    max-width: min(180px, 48vw);
    transform: scale(.88);
    transform-origin: top right;
  }
  .quest-tracker {
    top: calc(max(6px, env(safe-area-inset-top)) + 92px);
    right: max(7px, env(safe-area-inset-right));
    width: min(220px, 52vw);
    padding: 10px 11px 11px 14px;
  }
  .quest-tracker[data-collapsed="true"] { width: 44px; padding: 8px; }
  .party-hud {
    top: calc(max(6px, env(safe-area-inset-top)) + 52px);
    left: max(6px, env(safe-area-inset-left));
    width: min(172px, 44vw);
  }
  .action-hotbar {
    max-width: calc(100vw - 10px - env(safe-area-inset-left) - env(safe-area-inset-right));
    gap: 3px;
  }
  .action-slot {
    width: clamp(44px, 13vw, 54px);
    height: clamp(44px, 13vw, 54px);
    border-radius: 9px;
  }
  .arrow-ammo-hud,
  .assassin-combo-hud {
    max-width: calc(100vw - 18px);
    white-space: nowrap;
  }
  .toast,
  .quest-notification,
  .attribute-level-announcement {
    max-width: calc(100vw - 18px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .npc-dialogue__card {
    max-height: min(42dvh, 360px);
  }
}

/* Low landscape phones: dialogue is a compact bottom strip and menu pages use
   horizontal space without becoming tiny. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  .npc-dialogue {
    padding:
      0
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }
  .npc-dialogue__card {
    grid-template-columns: 64px minmax(0, 1fr);
    width: min(820px, 94vw);
    max-height: min(62dvh, 270px);
  }
  .npc-dialogue__content { padding: 8px 10px 8px; }
  .npc-dialogue__content header { padding-bottom: 5px; }
  .npc-dialogue__content h2 { font-size: 16px; }
  .npc-dialogue__content header em { max-width: 160px; }
  .npc-dialogue__text { padding-top: 5px; }
  .npc-dialogue__text p { font-size: 11px; line-height: 1.3; }
  .npc-dialogue__choice { min-height: 44px; padding-block: 6px; }
  .npc-dialogue__close { width: 32px; height: 32px; }

  .game-menu-window > .menu-page:not([hidden]) {
    max-height: 100%;
    padding: 2px 4px 2px 44px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .menu-back-button {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    width: 36px;
    height: 36px;
  }
  .menu-title-block,
  .menu-page > h2 { margin-bottom: 6px; }
  .menu-tile { min-height: 58px; padding: 6px 9px; }
  .settings-card,
  .status-card,
  .account-card,
  .equipment-panel,
  .backpack-panel,
  .inventory-details { padding: 6px 8px; }

  .login-card {
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100dvh - 12px);
    padding: 12px 18px;
  }
  .login-emblem { display: none; }
  .login-card h1 { margin-top: 4px; }
  .login-card p { margin-bottom: 8px; }
  .login-card form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
  .login-card .login-consent,
  .login-card form button { grid-column: 1 / -1; }
  .login-mode { margin: 7px 0 3px; min-height: 34px; }
}

@media (max-width: 420px) {
  .menu-tile-grid { grid-template-columns: 1fr; }
  .menu-tile { min-height: 58px; }
  .npc-dialogue__card { grid-template-columns: 62px minmax(0, 1fr); }
  .npc-dialogue__content header em { max-width: 105px; }
  .npc-dialogue__choices { grid-template-columns: 1fr; }
  .merchant-buy-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-group > div { grid-template-columns: minmax(72px, 1fr) minmax(0, 1.1fr); gap: 7px; }
}

/* Final hidden invariant stays after every responsive override. */
.game-menu-window > .menu-page[hidden],
.npc-dialogue[hidden],
.login-overlay[hidden],
.class-selection-overlay[hidden] {
  display: none !important;
}

/* V36.34.11 — o catálogo do Mercado é uma exceção rolável em landscape.
   Cabeçalho, Gold e colunas permanecem fixos; somente as grades de itens rolam. */
@media (pointer: coarse) and (orientation: landscape) {
  .game-menu-window > .merchant-page:not([hidden]) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    transform: none !important;
  }

  .merchant-page .merchant-layout,
  .merchant-page .merchant-buy-panel,
  .merchant-page .merchant-sell-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .game-menu-window .merchant-buy-grid,
  .game-menu-window .merchant-sell-grid {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch;
  }

  .merchant-buy-grid::-webkit-scrollbar,
  .merchant-sell-grid::-webkit-scrollbar {
    display: block !important;
    width: 7px;
  }
}



/* V36.34.6 — Conta compacta + Social/Suporte ----------------------------- */
.account-layout--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.account-layout--compact .account-card { min-height: 0; }
.account-danger-fields, .support-password-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.social-party-summary { display: grid; place-items: center; min-height: 58px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.035); color: #e9f7ee; text-align: center; }
.support-action-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.support-page textarea { resize: none; min-height: 58px; }
.social-page, .support-page { width: min(100%, 820px); }

/* V36.34.5 — Landscape mobile contract -----------------------------------
   Hirodill mobile gameplay is intentionally landscape-first. Regular gameplay
   menus and NPC conversations never require finger scrolling. Admin/chat remain
   the explicit exceptions because they are unbounded tools/feeds. */
.orientation-warning {
  display: none !important;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  .orientation-warning {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    background: radial-gradient(circle at 50% 42%, rgba(34, 59, 67, .96), rgba(3, 9, 14, .985) 68%);
    text-align: center;
    pointer-events: auto;
  }
  .orientation-warning strong {
    color: #ffe296;
    font-size: clamp(1.35rem, 6vw, 2rem);
    text-shadow: 0 2px 4px #000;
  }
  .orientation-warning span {
    max-width: 360px;
    color: #d6e0e5;
    font-size: clamp(.88rem, 4vw, 1.05rem);
    line-height: 1.45;
  }
}

/* Dialogue text is paged by JS; it must never become a second scroll surface. */
.npc-dialogue__text {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
}
.npc-dialogue__text::-webkit-scrollbar { display: none !important; }

@media (pointer: coarse) and (orientation: landscape) {
  /* Restore the explicit fullscreen affordance removed by V36.34.4. */
  .fullscreen-button {
    z-index: 14;
    display: grid !important;
    place-items: center;
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    min-width: 96px;
    min-height: 36px;
    padding: 0 10px;
    border-color: rgba(255, 226, 122, .34);
    background: rgba(5, 12, 19, .9);
    font-size: .68rem;
    line-height: 1;
    white-space: nowrap;
  }

  .menu-overlay {
    place-items: center;
    padding:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 5px;
    overflow: hidden !important;
    place-items: center;
    align-content: center;
    border-radius: 10px;
  }

  /* Normal game pages expose their natural size to the fitter; the outer menu
     clips nothing after the fit. Admin is intentionally excluded. */
  .game-menu-window > .menu-page:not([hidden]):not(.admin-inventory-page) {
    width: min(100%, 1120px);
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    min-width: 0;
    min-height: 0;
    padding: 2px 5px 2px 46px;
    overflow: visible !important;
    touch-action: manipulation !important;
    transform: scale(var(--menu-fit-scale, 1)) !important;
    transform-origin: center center !important;
  }

  .game-menu-window > .menu-home:not([hidden]) {
    width: min(100%, 760px);
    padding-left: 46px;
  }

  .menu-page--scroll-fallback:not(.admin-inventory-page) {
    overflow: visible !important;
    padding-right: 5px !important;
  }

  .menu-back-button {
    position: absolute;
    z-index: 24;
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    width: 36px;
    height: 36px;
    border: 1px solid rgba(231, 241, 238, .2);
    border-radius: 9px;
    background: rgba(5, 13, 18, .94);
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
    font-size: 1.55rem;
  }

  /* Compact landscape density: preserve touchability without wasting vertical
     room. The page fitter handles exceptional devices instead of scroll. */
  .game-menu-window > .menu-page:not([hidden]):not(.admin-inventory-page) button,
  .game-menu-window > .menu-page:not([hidden]):not(.admin-inventory-page) input,
  .game-menu-window > .menu-page:not([hidden]):not(.admin-inventory-page) select {
    min-height: 34px;
  }
  .menu-title-block,
  .menu-page > h2 { margin-bottom: 5px !important; }
  .menu-title-block small { font-size: .56rem; }
  .menu-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .menu-tile { min-height: 58px; gap: 6px; padding: 6px 9px; }
  .menu-tile-icon { width: 31px; height: 31px; }

  .settings-stack { gap: 6px; }
  .settings-card,
  .status-card,
  .attribute-panel,
  .attribute-summary,
  .equipment-panel,
  .backpack-panel,
  .inventory-details,
  .account-card,
  .credits-card { padding: 6px 8px; }

  /* Gameplay item collections show as complete compact grids, not scroll panes. */
  .merchant-page,
  .bank-page,
  .menu-page.blacksmith-page:not([hidden]) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .merchant-layout,
  .bank-layout,
  .blacksmith-layout,
  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .game-menu-window .merchant-buy-grid,
  .game-menu-window .merchant-sell-grid,
  .game-menu-window .bank-grid,
  .merchant-buy-grid,
  .merchant-sell-grid,
  .bank-grid,
  .quiver-grid,
  .blacksmith-equipment-grid,
  .blacksmith-recipe-grid {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
  }
  .merchant-buy-grid::-webkit-scrollbar,
  .merchant-sell-grid::-webkit-scrollbar,
  .bank-grid::-webkit-scrollbar,
  .quiver-grid::-webkit-scrollbar,
  .blacksmith-equipment-grid::-webkit-scrollbar,
  .blacksmith-recipe-grid::-webkit-scrollbar { display: none !important; }

  .merchant-page > h2,
  .bank-page > h2 { margin-bottom: 4px !important; }
  .merchant-layout { grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 6px; }
  .merchant-buy-panel,
  .merchant-sell-panel { padding: 6px; }
  .merchant-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .merchant-product { padding: 5px 6px; gap: 3px 6px; }
  .merchant-sell-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .merchant-selection { min-height: 58px; margin-top: 5px; gap: 4px; }
  .merchant-sell-actions { gap: 4px; }

  .bank-gold-panel { margin-bottom: 6px; padding: 6px; gap: 5px; }
  .bank-gold-presets { gap: 4px; }
  .bank-layout { grid-template-columns: 1fr 1fr; gap: 7px; }
  .bank-storage-panel,
  .bank-inventory-panel { padding: 6px; }
  .game-menu-window .bank-grid,
  .bank-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }

  .blacksmith-page { gap: 5px; }
  .blacksmith-header { gap: 7px; padding: 5px 7px; }
  .blacksmith-header p { display: none; }
  .blacksmith-wallet { padding: 4px 7px; }
  .blacksmith-layout { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 5px; }
  .blacksmith-upgrade-panel,
  .blacksmith-refinery-panel { gap: 4px; padding: 5px; }
  .blacksmith-rule { padding: 3px 5px; }
  .blacksmith-equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .blacksmith-selection { min-height: 78px; padding: 5px; gap: 4px 6px; }
  .blacksmith-band-tabs { gap: 3px; }
  .blacksmith-recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .blacksmith-recipe-card,
  .blacksmith-recipe-card.ascension { grid-column: auto; gap: 3px; padding: 4px; }
  .blacksmith-refinery-note { padding: 4px 6px; }

  /* Inventory/status use landscape width rather than stacking into a long page. */
  .inventory-layout-v16 { grid-template-columns: minmax(230px, .9fr) minmax(240px, 1fr) minmax(180px, .68fr) !important; gap: 7px; }
  .equipment-panel,
  .backpack-panel { padding: 6px; }
  .equipment-grid { gap: 4px; margin-top: 5px; grid-template-rows: repeat(4, minmax(42px, 1fr)); }
  .equipment-slot { min-height: 42px; }
  .inventory-layout-v16 .inventory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .inventory-layout-v16 .inventory-slot { min-height: 38px; }
  .backpack-heading { margin-bottom: 5px; }
  .inventory-action-row { gap: 4px; margin-bottom: 5px; }
  .inventory-action-button { min-height: 34px; margin-bottom: 5px; }
  .inventory-details p { margin: 5px 0; line-height: 1.25; }

  .status-dashboard { gap: 6px; }
  .status-group { gap: 2px; }
  .status-group > div { min-height: 0; padding-block: 2px; }

  /* Dialogue is a compact bottom card; pagination guarantees no text scrolling. */
  .npc-dialogue__card {
    grid-template-columns: 64px minmax(0, 1fr);
    width: min(860px, 94vw);
    max-height: min(66dvh, 272px);
  }
  .npc-dialogue__content { padding: 8px 10px 7px; }
  .npc-dialogue__content header { padding-bottom: 4px; }
  .npc-dialogue__text { padding: 4px 0 2px; }
  .npc-dialogue__text p { margin: 0 0 4px; font-size: 11px; line-height: 1.28; }
  .npc-dialogue__choices { gap: 5px; }
  .npc-dialogue__choice { min-height: 38px !important; padding: 6px 9px; }
  .npc-dialogue__close { width: 32px; height: 32px; }
}

/* Admin inventory and chat are intentionally scrollable exceptions. */
.admin-inventory-page:not([hidden]),
.admin-inventory-content,
.game-menu-window .admin-inventory-grid,
.admin-inventory-categories,
.chat-messages {
  overscroll-behavior: contain;
}

/* Final hidden invariant after the landscape policy. */
.game-menu-window > .menu-page[hidden],
.npc-dialogue[hidden],
.login-overlay[hidden],
.class-selection-overlay[hidden] {
  display: none !important;
}


@media (pointer: coarse) and (orientation: landscape) {
  .account-page, .social-page, .support-page { width: min(100%, 900px) !important; }
  .account-layout--compact { gap: 7px; }
  .account-layout--compact .account-card { gap: 6px; padding: 7px 9px; }
  .account-layout--compact .account-state strong { font-size: .86rem; }
  .account-layout--compact .account-state small { font-size: .62rem; }
  .account-layout--compact label { font-size: .66rem; }
  .account-layout--compact input,
  .account-layout--compact textarea { margin-top: 3px; padding: 6px 7px; }
  .account-layout--compact button { min-height: 34px; padding: 5px 8px; }
  .account-layout--compact .account-feedback { min-height: 14px; }
  .account-layout--compact .account-legal-links { gap: 8px; }
  .support-page textarea { min-height: 44px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .account-layout--compact .account-state small,
  .account-layout--compact .account-card--danger p { display: none; }
  .social-party-summary { min-height: 42px; padding: 6px; }
  .support-page textarea { min-height: 36px; }
}

/* V36.34.11 final cascade: Mercado é a exceção rolável dos menus mobile. */
@media (pointer: coarse) and (orientation: landscape) {
  .game-menu-window > .merchant-page:not([hidden]) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    transform: none !important;
  }
  .merchant-page .merchant-layout,
  .merchant-page .merchant-buy-panel,
  .merchant-page .merchant-sell-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .game-menu-window .merchant-buy-grid,
  .game-menu-window .merchant-sell-grid {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch;
  }
  .merchant-buy-grid::-webkit-scrollbar,
  .merchant-sell-grid::-webkit-scrollbar { display: block !important; width: 7px; }
}

/* V36.34.12 final cascade — uma única superfície nativa de rolagem.
   Evita nested scroll e funciona ao arrastar sobre cards ou botões no Android. */
@media (pointer: coarse) and (orientation: landscape) {
  .game-menu-window > .merchant-page:not([hidden]) {
    display: block !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch;
    transform: scale(var(--menu-fit-scale, 1)) !important;
    transform-origin: center center !important;
  }
  .merchant-page .merchant-layout {
    display: grid;
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
  }
  .merchant-page .merchant-buy-panel,
  .merchant-page .merchant-sell-panel,
  .game-menu-window .merchant-buy-grid,
  .game-menu-window .merchant-sell-grid {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
  .merchant-page button,
  .merchant-page article {
    touch-action: pan-y !important;
  }
  .merchant-page::-webkit-scrollbar { display: block !important; width: 8px; }
}

/* V36.34.13 — fallback visível independente do gesto do navegador. */
.merchant-scroll-controls { display: none; }

@media (pointer: coarse) and (orientation: landscape) {
  .merchant-scroll-controls {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(120px, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 5px;
    border: 1px solid rgba(255, 226, 122, .28);
    border-radius: 8px;
    background: rgba(5, 13, 18, .97);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
  }
  .merchant-scroll-controls button {
    min-height: 34px !important;
    padding: 5px 9px;
    border: 1px solid rgba(255, 226, 122, .4);
    border-radius: 7px;
    color: #fff0b7;
    background: rgba(83, 82, 48, .78);
    touch-action: manipulation !important;
  }
  .merchant-scroll-controls button:disabled { opacity: .38; }
  .merchant-scroll-controls span {
    overflow: hidden;
    color: #dbe7ea;
    font-size: .68rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* V36.34.15 — catálogo completo do Mercado.
   Salvaguarda final: no touch landscape, compra e venda não criam rolagem nem
   exibem os controles de paginação aposentados. A folha mobile detalha a grade. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 700px) {
  .merchant-scroll-controls { display: none !important; }
  .game-menu-window > .merchant-page:not([hidden]),
  .merchant-page .merchant-layout,
  .merchant-page .merchant-buy-panel,
  .merchant-page .merchant-sell-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .game-menu-window .merchant-buy-grid,
  .game-menu-window .merchant-sell-grid {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: manipulation !important;
    scrollbar-width: none !important;
  }
  .merchant-buy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--merchant-buy-row-count, 5), minmax(0, 1fr)) !important;
  }
  .merchant-sell-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* V36.35.1 — Quadros de Contratos da Cidade */
.city-contract-board[hidden] { display: none !important; }
.city-contract-board { position: absolute; z-index: 92; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: clamp(10px,2.4vw,34px); font-family: system-ui,sans-serif; }
.city-contract-board__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%,rgba(20,30,30,.5),rgba(2,6,8,.91)); backdrop-filter: blur(4px) saturate(.72); }
.city-contract-board__window { position: relative; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 12px; width: min(1180px,96vw); max-height: min(820px,94dvh); box-sizing: border-box; padding: 22px 24px 16px; overflow: hidden; border: 2px solid #9b733b; border-radius: 8px 2px 10px 3px; color: #342515; background: linear-gradient(90deg,rgba(91,55,25,.08) 1px,transparent 1px) 0 0/28px 100%,radial-gradient(circle at 20% 10%,rgba(255,255,255,.4),transparent 26%),linear-gradient(155deg,#ead7a7,#c8a76c 58%,#ae874e); box-shadow: 0 28px 80px rgba(0,0,0,.72),inset 0 0 0 5px rgba(92,56,27,.2),inset 0 0 70px rgba(74,39,18,.18); animation: contract-board-enter .22s ease-out both; }
.city-contract-board__window::before { content:""; position:absolute; inset:8px; border:1px solid rgba(83,51,25,.34); pointer-events:none; }
@keyframes contract-board-enter { from { opacity:0; transform:scale(.97) translateY(12px); } to { opacity:1; transform:none; } }
.city-contract-board__close { position:absolute; z-index:5; top:12px; right:13px; width:38px; height:38px; border:1px solid rgba(65,38,17,.35); border-radius:50%; color:#f2ddb0; background:#5a351c; font:500 25px/1 serif; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.city-contract-board__header { position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; padding:0 48px 12px 0; border-bottom:2px solid rgba(80,47,21,.25); }
.city-contract-board__seal { display:grid; place-items:center; width:66px; height:66px; border:4px double rgba(255,226,156,.55); border-radius:50%; color:#ffe9ae; background:radial-gradient(circle at 38% 30%,#b44435,#74251e 72%); font:900 16px/1 Georgia,serif; box-shadow:0 5px 12px rgba(66,30,16,.36),inset 0 0 0 4px rgba(82,19,15,.28); transform:rotate(-5deg); }
.city-contract-board__header span { color:#745029; font:900 10px/1.2 system-ui,sans-serif; letter-spacing:.2em; }
.city-contract-board__header h2 { margin:3px 0 2px; color:#352313; font:900 clamp(24px,3vw,39px)/1 Georgia,serif; letter-spacing:-.025em; }
.city-contract-board__header p { margin:0; color:#725436; font:italic 700 12px/1.3 Georgia,serif; }
.city-contract-board__header aside { display:grid; min-width:125px; padding:8px 12px; border:1px solid rgba(79,44,20,.26); text-align:right; background:rgba(255,245,213,.28); }
.city-contract-board__header aside small { color:#76542f; font:800 9px/1.2 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.city-contract-board__header aside strong { color:#543019; font:900 20px/1.2 ui-monospace,monospace; }
.city-contract-active { position:relative; z-index:2; display:grid; grid-template-columns:minmax(190px,.9fr) minmax(220px,1.1fr) auto; align-items:center; gap:14px; padding:10px 12px; border:1px solid rgba(95,55,24,.34); border-left:5px solid #8a3b27; background:linear-gradient(90deg,rgba(116,48,32,.13),rgba(255,250,225,.25)); }
.city-contract-active[hidden] { display:none; }
.city-contract-active__copy { display:grid; gap:2px; }
.city-contract-active__kicker { color:#8a3b27; font:900 9px/1.2 system-ui,sans-serif; letter-spacing:.15em; }
.city-contract-active__title { color:#3a2515; font:900 16px/1.15 Georgia,serif; }
.city-contract-active__route { color:#715338; font:700 10px/1.2 system-ui,sans-serif; }
.city-contract-active__progress { display:grid; gap:5px; color:#51341f; font:900 11px/1.2 system-ui,sans-serif; }
.city-contract-active__track { display:block; height:8px; overflow:hidden; border:1px solid rgba(70,39,17,.35); background:rgba(66,39,21,.18); }
.city-contract-active__fill { display:block; height:100%; background:linear-gradient(90deg,#8f3927,#cf8c39); box-shadow:0 0 8px rgba(153,65,33,.35); }
.city-contract-active__actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.city-contract-active__return { max-width:190px; color:#704122; font:800 10px/1.2 system-ui,sans-serif; text-align:right; }
.city-contract-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-height:0; }
.city-contract-card { position:relative; display:grid; grid-template-rows:auto minmax(44px,1fr) auto auto auto; gap:9px; min-width:0; padding:14px; border:1px solid rgba(74,43,20,.32); border-radius:3px 1px 5px 2px; background:rgba(255,247,220,.5); box-shadow:0 4px 12px rgba(70,39,18,.12),inset 0 0 22px rgba(134,90,43,.08); }
.city-contract-card::after { content:""; position:absolute; inset:5px; pointer-events:none; border:1px dashed rgba(103,67,32,.16); }
.city-contract-card[data-difficulty="3"],.city-contract-card[data-difficulty="4"] { border-color:rgba(126,45,30,.5); }
.city-contract-card--active { outline:3px solid rgba(139,58,38,.28); background:rgba(255,239,198,.7); }
.city-contract-card--discipline { border-color:rgba(30,131,139,.7); background:linear-gradient(145deg,rgba(235,253,246,.72),rgba(224,244,239,.58)); box-shadow:0 5px 16px rgba(25,98,103,.17),inset 0 0 24px rgba(70,204,208,.10); }
.city-contract-card--discipline::before { content:"SELO"; position:absolute; z-index:2; top:7px; right:8px; padding:3px 6px; border:1px solid rgba(30,121,128,.36); border-radius:999px; background:#245b62; color:#bff9f6; font:900 7px/1 system-ui,sans-serif; letter-spacing:.12em; }
.city-contract-card__heading { position:relative; z-index:1; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:9px; }
.city-contract-card__icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(74,43,20,.24); border-radius:50%; background:rgba(110,68,30,.1); font-size:20px; }
.city-contract-card__heading small { display:block; color:#8c4b30; font:900 8px/1.2 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.city-contract-card__heading h3 { margin:2px 0 0; color:#382313; font:900 18px/1.08 Georgia,serif; }
.city-contract-card__story { position:relative; z-index:1; margin:0; color:#65482e; font:italic 600 11px/1.42 Georgia,serif; }
.city-contract-card__meta { position:relative; z-index:1; display:grid; gap:3px; padding:8px 0; border-block:1px solid rgba(87,53,25,.18); color:#50351f; font:800 10px/1.25 system-ui,sans-serif; }
.city-contract-card__reward { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; }
.city-contract-card__reward small { grid-row:1/3; align-self:stretch; display:grid; place-items:center; padding-right:8px; border-right:1px solid rgba(81,47,20,.22); color:#80532d; font:900 8px/1.1 system-ui,sans-serif; writing-mode:vertical-rl; letter-spacing:.08em; }
.city-contract-card__reward strong { color:#704015; font:900 14px/1.1 system-ui,sans-serif; }
.city-contract-card__reward span { color:#705037; font:700 9px/1.2 system-ui,sans-serif; }
.city-contract-card__discipline-badge { grid-column:2; color:#1d7278; font:900 7px/1.15 system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.city-contract-button { position:relative; z-index:2; min-height:38px; padding:8px 12px; border:1px solid #6d3f22; border-radius:3px 1px; font:900 10px/1.1 system-ui,sans-serif; cursor:pointer; }
.city-contract-button--accept,.city-contract-button--claim { color:#fff0c5; background:linear-gradient(#91472f,#642a20); box-shadow:0 3px 8px rgba(63,28,18,.27); }
.city-contract-button--abandon { color:#67442a; background:rgba(255,248,222,.44); }
.city-contract-button:hover:not(:disabled),.city-contract-button:focus-visible { filter:brightness(1.13); transform:translateY(-1px); outline:none; }
.city-contract-button:disabled { color:#856e55; border-color:rgba(91,59,31,.24); background:rgba(89,61,35,.1); cursor:default; box-shadow:none; }
.city-contract-board__footer { position:relative; z-index:2; display:flex; justify-content:space-between; gap:15px; color:#765536; font:800 9px/1.2 system-ui,sans-serif; letter-spacing:.04em; }
.city-contract-board__footer strong { color:#57341e; }
@media (pointer:coarse) { .city-contract-board button { min-height:44px; touch-action:manipulation; } }
@media (orientation:landscape) and (max-height:700px) {
  .city-contract-board { padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .city-contract-board__window { width:min(1060px,98vw); height:min(620px,98dvh); max-height:none; gap:5px; padding:8px 12px 7px; }
  .city-contract-board__close { top:5px; right:6px; width:34px; height:34px; }
  .city-contract-board__header { gap:8px; padding:0 39px 5px 0; }
  .city-contract-board__seal { width:40px; height:40px; border-width:2px; font-size:11px; }
  .city-contract-board__header h2 { margin-top:1px; font-size:clamp(18px,4.5dvh,27px); }
  .city-contract-board__header p { font-size:9px; }
  .city-contract-board__header aside { min-width:105px; padding:4px 7px; }
  .city-contract-board__header aside strong { font-size:14px; }
  .city-contract-active { grid-template-columns:minmax(150px,.9fr) minmax(180px,1.1fr) auto; gap:7px; padding:5px 8px; }
  .city-contract-active__title { font-size:12px; }
  .city-contract-active__route,.city-contract-active__progress { font-size:8px; }
  .city-contract-active__track { height:6px; }
  .city-contract-grid { gap:6px; }
  .city-contract-card { grid-template-rows:auto minmax(0,1fr) auto auto auto; gap:4px; padding:7px; }
  .city-contract-card__heading { grid-template-columns:28px minmax(0,1fr); gap:5px; }
  .city-contract-card__icon { width:27px; height:27px; font-size:14px; }
  .city-contract-card__heading small { font-size:6px; }
  .city-contract-card__heading h3 { font-size:clamp(12px,3dvh,15px); }
  .city-contract-card__story { font-size:clamp(8px,1.8dvh,10px); line-height:1.25; }
  .city-contract-card__meta { gap:1px; padding:3px 0; font-size:7px; }
  .city-contract-card__reward { gap:0 5px; }
  .city-contract-card__reward small { font-size:6px; }
  .city-contract-card__reward strong { font-size:10px; }
  .city-contract-card__reward span { font-size:7px; }
  .city-contract-button { min-height:32px!important; padding:5px 7px; font-size:8px; }
  .city-contract-board__footer { font-size:7px; }
}
@media (orientation:portrait) {
  .city-contract-board { place-items:stretch; padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)); }
  .city-contract-board__window { width:100%; max-height:100%; padding:12px 10px 10px; overflow-y:auto; }
  .city-contract-board__header { grid-template-columns:44px minmax(0,1fr); padding-right:38px; }
  .city-contract-board__seal { width:40px; height:40px; font-size:10px; }
  .city-contract-board__header aside { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; text-align:left; }
  .city-contract-active { grid-template-columns:1fr; }
  .city-contract-active__actions { justify-content:stretch; }
  .city-contract-active__actions>* { flex:1; }
  .city-contract-grid { grid-template-columns:1fr; }
  .city-contract-card { grid-template-rows:auto auto auto auto auto; }
}
@media (orientation:landscape) and (max-height:700px) and (max-width:1000px) {
  .city-contract-board__window { width:100%; height:100%; max-height:100%; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; }
  .city-contract-board__header { min-height:0; }
  .city-contract-board__header aside { min-width:88px; padding:3px 6px; }
  .city-contract-active { grid-template-columns:minmax(118px,.8fr) minmax(145px,1fr) auto; min-height:0; gap:5px; padding:3px 6px; }
  .city-contract-active__copy { gap:0; }
  .city-contract-active__actions { gap:4px; }
  .city-contract-active__return { max-width:135px; font-size:7px; }
  .city-contract-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:5px; overflow:hidden; }
  .city-contract-card { grid-template-rows:auto auto auto auto; gap:2px; min-height:0; padding:5px 6px; overflow:hidden; }
  .city-contract-card:nth-child(3) { grid-column:1 / -1; width:calc(50% - 2.5px); box-sizing:border-box; justify-self:center; }
  .city-contract-card__heading { grid-template-columns:24px minmax(0,1fr); gap:4px; }
  .city-contract-card__icon { width:23px; height:23px; font-size:12px; }
  .city-contract-card__heading h3 { font-size:clamp(10px,2.8dvh,13px); }
  .city-contract-card__story { display:none; }
  .city-contract-card__meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 5px; padding:2px 0; font-size:clamp(6px,1.65dvh,8px); }
  .city-contract-card__reward { grid-template-columns:auto auto minmax(0,1fr); gap:0 5px; }
  .city-contract-card__reward small { grid-row:auto; align-self:center; display:block; padding-right:0; border-right:0; font-size:6px; writing-mode:horizontal-tb; }
  .city-contract-card__reward strong { font-size:9px; }
  .city-contract-card__reward span { overflow:hidden; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
  .city-contract-button { min-height:28px!important; padding:3px 6px; font-size:7px; }
}
.material-commerce-panel,.bank-material-panel{margin-top:14px;padding:12px;border:1px solid rgba(220,190,125,.28);border-radius:10px;background:rgba(18,24,29,.58)}
.material-commerce-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.material-commerce-grid article{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(0,0,0,.22)}
.material-commerce-grid .item-icon{width:42px;height:42px}.material-commerce-grid span{display:grid}.material-commerce-grid small{opacity:.78}.material-commerce-grid button,.material-pouch-item button{grid-column:2/-1;min-height:32px;border-radius:7px;border:1px solid rgba(237,203,122,.5);background:#44351f;color:#fff4cf;cursor:pointer}

/* V36.58.0 final responsive authority for the paged Blacksmith. */
.blacksmith-view[hidden]{display:none!important}
.menu-page.blacksmith-page:not([hidden]){max-width:100%;min-width:0;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-layout{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;overflow:visible!important}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-view:not([hidden]){min-width:0!important;min-height:0!important;overflow:visible}
.menu-page.blacksmith-page:not([hidden]) .blacksmith-equipment-grid,
.menu-page.blacksmith-page:not([hidden]) .blacksmith-recipe-grid{max-height:min(46dvh,390px)!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin!important}
@media (max-width:720px),(max-height:620px){
  .blacksmith-page-tabs{position:sticky;top:0;z-index:2;padding:3px 0;background:#071116}
  .blacksmith-page-tabs button{min-height:44px}
  .menu-page.blacksmith-page:not([hidden]) .blacksmith-equipment-grid,
  .menu-page.blacksmith-page:not([hidden]) .blacksmith-recipe-grid{max-height:min(42dvh,320px)!important}
}

/* V36.58.8 — Dunacervo do Eclipse na coleção de montarias. */
.store-mount-view{display:grid;align-content:start;gap:12px}
.cosmetic-product{min-height:230px}
.cosmetic-product--eclipse{border-color:rgba(179,108,255,.58);background:radial-gradient(circle at 19% 46%,rgba(103,57,172,.31),transparent 39%),radial-gradient(circle at 72% 18%,rgba(71,222,255,.08),transparent 27%),linear-gradient(138deg,rgba(12,8,33,.99),rgba(24,14,48,.98) 57%,rgba(7,15,31,.99));box-shadow:inset 0 0 44px rgba(127,76,226,.11)}
.cosmetic-product--eclipse .cosmetic-product-copy small{color:#c78cff}
.cosmetic-product--eclipse .cosmetic-product-copy h3{color:#edf5ff}
.cosmetic-product--eclipse .cosmetic-product-copy p{color:#c8c7e4}
.cosmetic-product--eclipse .cosmetic-product-copy ul{color:#d9c5ff}
.cosmetic-product--eclipse .cosmetic-product-copy li::before{color:#72f0ff}
.cosmetic-product--eclipse .cosmetic-product-copy>span{border-left-color:#a66cff;color:#d8e8ff;background:rgba(145,93,230,.12)}
.cosmetic-product--eclipse .cosmetic-product-buy{border-color:rgba(179,108,255,.42);background:rgba(7,7,24,.78)}
.cosmetic-product--eclipse .cosmetic-product-buy button{border-color:#b985ff;color:#f6f2ff;background:linear-gradient(#7042ad,#30215f)}
.eclipse-store-preview{position:relative;min-height:230px;overflow:hidden;border:1px solid rgba(179,108,255,.42);border-radius:13px;background:radial-gradient(circle at 55% 44%,rgba(120,76,194,.31),transparent 25%),radial-gradient(circle at 50% 74%,rgba(66,221,255,.1),transparent 31%),linear-gradient(180deg,#0b0920,#100a26 62%,#070a19);box-shadow:inset 0 0 48px rgba(111,64,190,.17)}
.eclipse-store-preview::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 25%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 82% 31%,#72f0ff 0 1px,transparent 1.8px),radial-gradient(circle at 28% 77%,#b36cff 0 1px,transparent 1.8px),radial-gradient(circle at 69% 12%,#fff5c7 0 1px,transparent 1.7px),radial-gradient(circle at 90% 72%,#d9e8ff 0 1px,transparent 1.8px);opacity:.75}
.eclipse-store-preview::after{content:"";position:absolute;z-index:1;left:50%;top:45%;width:122px;height:122px;border:2px solid rgba(179,108,255,.2);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 25px rgba(138,79,224,.22),inset 0 0 18px rgba(114,240,255,.06)}
.eclipse-store-orbit{position:absolute;z-index:2;left:50%;bottom:18px;width:190px;height:46px;border:2px solid rgba(179,108,255,.55);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 14px rgba(179,108,255,.26),inset 0 0 8px rgba(114,240,255,.12);animation:eclipse-store-orbit 4.8s linear infinite}
.eclipse-store-orbit::after{content:"";position:absolute;inset:7px 21px;border:1px solid rgba(114,240,255,.72);border-radius:50%;transform:rotate(-8deg)}
.eclipse-store-body{position:absolute;z-index:5;left:45%;top:55%;width:112px;height:53px;border:3px solid #0b0716;border-radius:55% 52% 48% 58%;background:radial-gradient(circle at 44% 42%,rgba(179,108,255,.55),transparent 28%),linear-gradient(155deg,#17143b 4%,#30266d 42%,#6a3fa1 78%,#a55bd0);transform:translate(-50%,-50%);box-shadow:inset 0 -10px rgba(10,7,27,.43),0 0 16px rgba(160,91,217,.31)}
.eclipse-store-body::before{content:"";position:absolute;right:7px;top:-47px;width:29px;height:63px;border:3px solid #0b0716;border-radius:68% 38% 35% 54%;background:linear-gradient(110deg,#17143b,#453080 64%,#7c48ad);transform:rotate(24deg);transform-origin:50% 100%}
.eclipse-store-body::after{content:"☾";position:absolute;left:38px;top:9px;color:#ecf8ff;font:1000 23px/1 serif;text-shadow:0 0 7px #72f0ff,8px -8px 0 #b36cff;transform:rotate(-18deg)}
.eclipse-store-head{position:absolute;z-index:8;left:66%;top:30%;width:49px;height:33px;border:3px solid #0b0716;border-radius:56% 66% 48% 58%;background:radial-gradient(circle at 64% 35%,#fff 0 2%,#72f0ff 3% 7%,transparent 8%),linear-gradient(135deg,#6a3fa1,#272057 58%,#100b24);transform:rotate(5deg);box-shadow:0 0 13px rgba(114,240,255,.22)}
.eclipse-store-head::before{content:"";position:absolute;right:-17px;top:15px;width:25px;height:13px;border:2px solid #0b0716;border-radius:50% 70% 55% 45%;background:#17143b}
.eclipse-store-head::after{content:"";position:absolute;left:1px;top:-14px;width:42px;height:24px;background:linear-gradient(135deg,#9bacd0,#29245f 60%);clip-path:polygon(8% 100%,0 6%,35% 68%,62% 0,70% 74%,100% 20%,88% 100%)}
.eclipse-store-antler{position:absolute;z-index:4;top:7%;width:79px;height:105px;background:linear-gradient(165deg,#72f0ff 0 10%,#b36cff 26% 48%,#f4fbff 50% 71%,#9bacd0 75%);clip-path:polygon(48% 100%,43% 66%,17% 47%,37% 45%,29% 28%,50% 41%,50% 12%,58% 39%,82% 17%,69% 49%,96% 42%,67% 61%,61% 100%);filter:drop-shadow(0 0 4px rgba(179,108,255,.72))}
.eclipse-store-antler--left{left:49%;transform:rotate(-7deg)}
.eclipse-store-antler--right{left:55%;transform:scaleX(-1) rotate(-13deg);opacity:.74}
.eclipse-store-tail{position:absolute;z-index:3;left:11%;top:48%;width:105px;height:73px;background:linear-gradient(90deg,rgba(114,240,255,0),#6a3fa1 36%,#b36cff 67%,#72f0ff);clip-path:polygon(100% 42%,63% 5%,65% 37%,18% 20%,54% 51%,0 65%,55% 65%,24% 100%,71% 74%);filter:drop-shadow(0 0 7px rgba(179,108,255,.58));animation:eclipse-store-tail 2.3s ease-in-out infinite}
.eclipse-store-hooves{position:absolute;z-index:4;left:36%;top:64%;width:7px;height:60px;border:2px solid #0b0716;border-radius:4px;background:linear-gradient(#34266e,#171127);box-shadow:29px 1px 0 -1px #29245f,59px -1px 0 -1px #29245f,84px -3px 0 -1px #201b4d}
.eclipse-store-hooves::after{content:"";position:absolute;left:-8px;bottom:-4px;width:20px;height:8px;border:2px solid #c9f8ff;border-radius:50%;box-shadow:29px 1px 0 -2px #72f0ff,59px -1px 0 -2px #c9f8ff,84px -3px 0 -2px #72f0ff,0 0 7px #72f0ff}
.eclipse-store-preview i{position:absolute;z-index:9;width:5px;height:5px;background:#f4fbff;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 0 4px #72f0ff);animation:eclipse-store-star 2.6s ease-in-out infinite}
.eclipse-store-preview i:nth-of-type(1){left:14%;top:26%;animation-delay:-.2s}.eclipse-store-preview i:nth-of-type(2){left:30%;top:73%;animation-delay:-1.3s}.eclipse-store-preview i:nth-of-type(3){left:49%;top:19%;animation-delay:-2.1s}.eclipse-store-preview i:nth-of-type(4){left:72%;top:62%;animation-delay:-.8s}.eclipse-store-preview i:nth-of-type(5){left:87%;top:37%;animation-delay:-1.7s}.eclipse-store-preview i:nth-of-type(6){left:58%;top:82%;animation-delay:-2.4s}
@keyframes eclipse-store-orbit{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes eclipse-store-tail{50%{transform:skewY(5deg) scaleX(1.06)}}
@keyframes eclipse-store-star{0%,100%{opacity:.3;transform:scale(.65) rotate(0)}50%{opacity:1;transform:scale(1.35) rotate(90deg)}}
@media(max-width:820px),(max-height:620px){.eclipse-store-preview{min-height:150px}.eclipse-store-body{transform:translate(-50%,-50%) scale(.82)}.eclipse-store-head{transform:rotate(5deg) scale(.82)}.eclipse-store-tail{transform:scale(.82);transform-origin:right center}.eclipse-store-antler{transform-origin:bottom center;scale:.82}.eclipse-store-hooves{scale:.82;transform-origin:top center}}

/* V36.59.0 — primeira coleção de outfits de player. */
.store-player-view{display:grid;align-content:start;gap:10px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:9px}
.player-outfit-store-preview{display:block;width:100%;height:auto;min-width:0;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:#171421;box-shadow:inset 0 0 34px rgba(255,255,255,.04)}
.cosmetic-product--sunset-knight{border-color:rgba(239,151,62,.62);background:radial-gradient(circle at 17% 43%,rgba(246,118,43,.26),transparent 38%),radial-gradient(circle at 78% 12%,rgba(255,216,107,.08),transparent 26%),linear-gradient(138deg,rgba(48,19,29,.99),rgba(84,31,37,.97) 57%,rgba(30,17,29,.99));box-shadow:inset 0 0 45px rgba(238,102,43,.1)}
.cosmetic-product--sunset-knight .cosmetic-product-copy small{color:#ffb75a}
.cosmetic-product--sunset-knight .cosmetic-product-copy h3{color:#ffe19a}
.cosmetic-product--sunset-knight .cosmetic-product-copy p{color:#e7c7b7}
.cosmetic-product--sunset-knight .cosmetic-product-copy ul{color:#ffd486}
.cosmetic-product--sunset-knight .cosmetic-product-copy li::before{color:#ff7434}
.cosmetic-product--sunset-knight .cosmetic-product-copy>span{border-left-color:#ee7434;color:#ffe0b0;background:rgba(227,91,37,.11)}
.cosmetic-product--sunset-knight .cosmetic-product-buy{border-color:rgba(239,151,62,.44);background:rgba(25,10,20,.78)}
.cosmetic-product--sunset-knight .cosmetic-product-buy button{border-color:#f4b557;color:#fff4d4;background:linear-gradient(#c65a2d,#712633)}
.cosmetic-product--ancestral-archmage{border-color:rgba(103,213,224,.55);background:radial-gradient(circle at 17% 44%,rgba(72,152,184,.22),transparent 38%),radial-gradient(circle at 80% 14%,rgba(207,174,91,.1),transparent 28%),linear-gradient(138deg,rgba(14,19,47,.99),rgba(44,36,88,.98) 59%,rgba(35,20,50,.99));box-shadow:inset 0 0 45px rgba(93,198,217,.08)}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy small{color:#83e0e8}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy h3{color:#f0edff}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy p{color:#d4cee4}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy ul{color:#d9e8ee}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy li::before{color:#74d9df}
.cosmetic-product--ancestral-archmage .cosmetic-product-copy>span{border-left-color:#69cbd5;color:#d9f8ff;background:rgba(81,176,194,.1)}
.cosmetic-product--ancestral-archmage .cosmetic-product-buy{border-color:rgba(104,210,220,.36);background:rgba(10,12,35,.8)}
.cosmetic-product--ancestral-archmage .cosmetic-product-buy button{border-color:#73d9df;color:#f4ffff;background:linear-gradient(#3a7799,#31366c)}
.cosmetic-product--blood-crimson-assassin{border-color:rgba(224,55,83,.62);background:radial-gradient(circle at 17% 44%,rgba(191,31,58,.25),transparent 38%),radial-gradient(circle at 80% 14%,rgba(214,166,92,.08),transparent 27%),linear-gradient(138deg,rgba(23,8,16,.99),rgba(67,13,30,.98) 58%,rgba(13,8,14,.99));box-shadow:inset 0 0 45px rgba(215,33,64,.1)}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy small{color:#ff687c}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy h3{color:#ffe0d4}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy p{color:#dfc1c7}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy ul{color:#f1c2ca}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy li::before{color:#ec3858}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-copy>span{border-left-color:#dd304f;color:#ffd9dd;background:rgba(202,37,68,.1)}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-buy{border-color:rgba(224,55,83,.38);background:rgba(17,7,14,.82)}
.cosmetic-product--blood-crimson-assassin .cosmetic-product-buy button{border-color:#e84964;color:#fff0ed;background:linear-gradient(#971f3c,#3b1022)}
.cosmetic-product--ancestral-elven-warden{border-color:rgba(184,137,73,.58);background:radial-gradient(circle at 17% 44%,rgba(74,119,91,.25),transparent 39%),radial-gradient(circle at 81% 14%,rgba(225,194,119,.08),transparent 28%),linear-gradient(138deg,rgba(13,27,24,.99),rgba(28,58,47,.98) 58%,rgba(24,17,25,.99));box-shadow:inset 0 0 45px rgba(102,143,94,.09)}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy small{color:#d4b06a}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy h3{color:#f1ead3}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy p{color:#cbd3c7}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy ul{color:#dfd5b5}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy li::before{color:#82a86e}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-copy>span{border-left-color:#b88949;color:#eee5ca;background:rgba(81,119,89,.12)}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-buy{border-color:rgba(184,137,73,.4);background:rgba(9,20,18,.82)}
.cosmetic-product--ancestral-elven-warden .cosmetic-product-buy button{border-color:#c39b58;color:#fff8df;background:linear-gradient(#4e7157,#263f35)}
.cosmetic-product--stained-glass-hierophant{border-color:rgba(83,217,221,.58);background:radial-gradient(circle at 17% 44%,rgba(83,217,221,.2),transparent 39%),radial-gradient(circle at 80% 16%,rgba(216,82,107,.12),transparent 27%),radial-gradient(circle at 66% 78%,rgba(239,169,75,.1),transparent 32%),linear-gradient(138deg,rgba(6,25,33,.99),rgba(12,59,68,.98) 58%,rgba(24,17,39,.99));box-shadow:inset 0 0 48px rgba(83,217,221,.08)}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy small{color:#64dfe0}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy h3{color:#fff7df}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy p{color:#d7ded9}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy ul{color:#e7dcae}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy li::before{color:#efa94b}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-copy>span{border-left-color:#53d9dd;color:#ecffff;background:rgba(83,217,221,.1)}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-buy{border-color:rgba(83,217,221,.38);background:rgba(4,21,29,.82)}
.cosmetic-product--stained-glass-hierophant .cosmetic-product-buy button{border-color:#72dcda;color:#fffce9;background:linear-gradient(#17727a,#183c58)}
@media(max-width:820px),(max-height:620px){.store-player-view{gap:6px;padding:6px}.player-outfit-store-preview{max-height:160px}.store-player-view .cosmetic-product{min-height:150px}}

/* V36.64.0 — Mercado de Volkaris e Trade Seguro. */
.trade-invite-panel{position:absolute;z-index:42;left:50%;top:max(72px,calc(env(safe-area-inset-top) + 60px));transform:translateX(-50%);display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;width:min(540px,calc(100% - 24px));padding:10px 12px;border:1px solid rgba(244,195,76,.62);border-radius:12px;background:linear-gradient(135deg,rgba(18,15,11,.98),rgba(31,24,13,.97));box-shadow:0 16px 40px rgba(0,0,0,.52),inset 0 0 22px rgba(235,178,54,.07);color:#fff7dd}.trade-invite-emblem{display:grid;place-items:center;width:40px;height:40px;border:1px solid #d9a943;border-radius:50%;background:radial-gradient(circle,#77551e,#241a0e 72%);color:#ffe49a;font:1000 21px/1 system-ui;box-shadow:0 0 13px rgba(238,181,58,.26)}.trade-invite-panel strong,.trade-invite-panel span{display:block}.trade-invite-panel strong{font-size:.82rem;color:#ffe09a}.trade-invite-panel span{margin-top:3px;color:#d8cbaa;font-size:.68rem}.trade-invite-actions{display:flex;gap:6px}.trade-invite-actions button{min-height:34px;padding:0 13px;border:1px solid rgba(242,197,91,.45);border-radius:7px;background:linear-gradient(#8c6523,#5c3d14);color:#fff6d8;font:900 .68rem system-ui;cursor:pointer}.trade-invite-actions #tradeInviteDecline{border-color:rgba(227,108,101,.42);background:linear-gradient(#783c38,#4e2524);color:#ffe6e3}

.exchange-modal{position:absolute;z-index:80;inset:0;display:grid;place-items:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));font-family:system-ui,sans-serif}.exchange-modal__backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(70,50,20,.15),rgba(2,6,9,.86));backdrop-filter:blur(5px)}.exchange-window{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1040px,97vw);height:min(760px,94vh);overflow:hidden;border:1px solid rgba(226,183,83,.5);border-radius:16px;background:linear-gradient(150deg,rgba(10,14,18,.99),rgba(18,16,13,.99));box-shadow:0 26px 90px rgba(0,0,0,.72),inset 0 0 44px rgba(229,178,57,.045);color:#f8f1df}.exchange-header{position:relative;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(224,177,65,.22);background:linear-gradient(90deg,rgba(79,52,17,.42),rgba(26,22,16,.25),transparent)}.exchange-header__sigil{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(243,199,90,.72);border-radius:11px;background:radial-gradient(circle at 50% 38%,#936a24,#35230e 68%);box-shadow:0 0 18px rgba(229,177,57,.17);color:#ffe5a0;font:1000 24px/1 serif}.exchange-header__sigil--stall{border-radius:50%}.exchange-header small{display:block;color:#d9a947;font:900 .59rem/1 system-ui;letter-spacing:.15em}.exchange-header h2{margin:3px 0 1px;color:#fff0bd;font:1000 1.15rem/1.15 system-ui;text-shadow:0 2px #3a260e}.exchange-header p{margin:0;color:#bfb6a1;font:700 .64rem/1.25 system-ui}.exchange-close{align-self:start;width:34px;height:34px;border:1px solid rgba(232,204,139,.25);border-radius:8px;background:rgba(35,29,23,.88);color:#e9dbc1;font:1000 1.25rem/1 system-ui;cursor:pointer}.exchange-close:hover{border-color:#dbb45a;color:#fff}.exchange-button{min-height:38px;padding:0 18px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font:900 .71rem system-ui;cursor:pointer}.exchange-button:disabled{filter:grayscale(.55);opacity:.55;cursor:not-allowed}.exchange-button--gold{border-color:#e1b451;background:linear-gradient(#9f7428,#684515);color:#fff2c4;box-shadow:inset 0 1px rgba(255,255,255,.14)}.exchange-button--danger{border-color:rgba(220,102,95,.42);background:linear-gradient(#723b38,#452523);color:#ffe8e4}.exchange-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid rgba(225,179,71,.2);background:rgba(12,12,12,.76)}

.secure-trade-window{grid-template-rows:auto auto minmax(0,1fr) auto auto}.trade-countdown-banner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px;padding:6px 16px;border-bottom:1px solid rgba(255,210,90,.35);background:linear-gradient(90deg,rgba(87,58,13,.88),rgba(143,99,23,.78),rgba(87,58,13,.88));color:#fff0b5;text-align:center}.trade-countdown-banner span{justify-self:end;font:1000 .62rem system-ui;letter-spacing:.12em}.trade-countdown-banner strong{min-width:56px;font:1000 1.35rem/1 system-ui}.trade-countdown-banner small{justify-self:start;color:#f0dca7;font:750 .62rem system-ui}.trade-offers{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:8px;min-height:0;padding:10px 12px 6px}.trade-offer{display:grid;grid-template-rows:auto minmax(70px,1fr) auto;min-width:0;overflow:hidden;border:1px solid rgba(125,160,184,.25);border-radius:11px;background:linear-gradient(155deg,rgba(16,25,31,.92),rgba(10,14,17,.93))}.trade-offer--self{border-color:rgba(77,163,212,.38)}.trade-offer--other{border-color:rgba(209,166,75,.38);background:linear-gradient(155deg,rgba(34,28,16,.91),rgba(14,14,13,.94))}.trade-offer>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}.trade-offer>header small,.trade-offer>header strong{display:block}.trade-offer>header small{color:#829cb0;font:900 .52rem system-ui;letter-spacing:.1em}.trade-offer--other>header small{color:#c1a562}.trade-offer>header strong{margin-top:2px;font-size:.77rem}.trade-confirm-chip{padding:4px 7px;border:1px solid rgba(145,160,171,.25);border-radius:999px;background:rgba(92,103,111,.15);color:#9ba8b0;font:900 .48rem system-ui;letter-spacing:.07em}.trade-confirm-chip.is-confirmed{border-color:rgba(91,213,139,.48);background:rgba(43,128,76,.25);color:#91e7af}.trade-offer-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));align-content:start;gap:6px;min-height:0;overflow:auto;padding:8px}.trade-offer-empty{grid-column:1/-1;display:grid;place-items:center;min-height:62px;border:1px dashed rgba(255,255,255,.12);border-radius:8px;color:#717e86;font:750 .61rem system-ui}.trade-line{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:5px;min-width:0;padding:5px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.035)}.trade-line .item-icon{width:32px;height:32px}.trade-line strong,.trade-line small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trade-line strong{font-size:.59rem}.trade-line small{color:#b8a978;font-size:.52rem}.trade-wallet-offer{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:7px 9px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}.trade-wallet-offer div{display:flex;justify-content:space-between;gap:5px}.trade-wallet-offer div+div{padding-left:8px;border-left:1px solid rgba(255,255,255,.1)}.trade-wallet-offer dt{color:#9faab1;font-size:.57rem}.trade-wallet-offer dd{margin:0;color:#f6cf68;font:900 .65rem system-ui}.trade-swap-mark{align-self:center;color:#d9b45e;font:1000 1.45rem serif;text-align:center;text-shadow:0 0 11px rgba(232,182,62,.25)}
.trade-builder{margin:0 12px 8px;padding:8px 9px;border:1px solid rgba(94,143,174,.21);border-radius:10px;background:rgba(10,18,23,.88)}.trade-builder>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.trade-builder>header small,.trade-builder>header strong{display:block}.trade-builder>header small{color:#74b8dd;font:900 .51rem system-ui;letter-spacing:.1em}.trade-builder>header strong{font-size:.7rem}.trade-builder>header>span{color:#84939c;font-size:.55rem}.trade-inventory-grid{display:flex;gap:6px;min-height:58px;overflow-x:auto;padding:1px 1px 5px}.trade-inventory-item{position:relative;display:grid;grid-template-columns:37px 72px;align-items:center;gap:5px;flex:0 0 122px;min-width:0;padding:5px;border:1px solid rgba(120,163,190,.18);border-radius:8px;background:rgba(26,39,48,.75);color:#e8f4fa;text-align:left;cursor:pointer}.trade-inventory-item:hover,.trade-inventory-item.is-offered{border-color:#d6ac50;background:rgba(87,67,28,.45)}.trade-inventory-item .item-icon{width:36px;height:36px}.trade-inventory-item strong,.trade-inventory-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trade-inventory-item strong{font-size:.56rem}.trade-inventory-item small{color:#9cb0bb;font-size:.49rem}.trade-inventory-item em{position:absolute;right:3px;bottom:3px;padding:1px 4px;border-radius:6px;background:#b78229;color:#fff4cb;font:900 .46rem system-ui}.trade-currency-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}.trade-currency-editor label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:5px 8px;border:1px solid rgba(224,180,75,.15);border-radius:7px;background:rgba(0,0,0,.17)}.trade-currency-editor span{color:#d9b45b;font:900 .58rem system-ui}.trade-currency-editor input{min-width:0;border:0;background:transparent;color:#fff0b9;font:900 .67rem system-ui;text-align:right;outline:none}.trade-footer p{margin:0;color:#a79d89;font-size:.58rem;text-align:center}.trade-footer p strong{color:#e2bd63}

.player-shop-window{width:min(980px,97vw)}.player-shop-body{min-height:0;overflow:auto;padding:13px}.player-shop-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;padding:10px 12px;border:1px solid rgba(230,180,66,.25);border-radius:11px;background:linear-gradient(90deg,rgba(86,56,16,.37),rgba(31,25,17,.48))}.player-shop-hero small,.player-shop-hero strong,.player-shop-hero span{display:block}.player-shop-hero small{color:#d8a840;font:900 .52rem system-ui;letter-spacing:.1em}.player-shop-hero strong{margin-top:2px;color:#fff0bd;font-size:.88rem}.player-shop-hero span{margin-top:2px;color:#aaa18e;font-size:.58rem}.player-shop-timer{min-width:110px;padding:7px 9px;border:1px solid rgba(225,181,73,.22);border-radius:8px;background:rgba(0,0,0,.25);text-align:center}.player-shop-timer b{display:block;color:#f1ca67;font-size:.8rem}.player-shop-timer small{color:#9f9684;letter-spacing:0}.player-shop-listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:9px}.player-shop-listing{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:linear-gradient(145deg,rgba(30,34,36,.9),rgba(16,18,19,.94));box-shadow:inset 0 1px rgba(255,255,255,.03)}.player-shop-listing .item-icon{width:46px;height:46px}.player-shop-listing__copy{min-width:0}.player-shop-listing strong,.player-shop-listing small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-shop-listing strong{font-size:.66rem}.player-shop-listing small{margin-top:2px;color:#9fa8aa;font-size:.53rem}.player-shop-listing__price{display:flex;align-items:baseline;gap:4px;margin:6px 0;color:#f2ca62}.player-shop-listing__price b{font-size:.82rem}.player-shop-listing__price span{font-size:.5rem}.player-shop-buy{grid-column:1/-1;display:grid;grid-template-columns:66px 1fr;gap:6px}.player-shop-buy input,.player-shop-form input,.player-shop-form select,.player-shop-sale-row input{min-width:0;min-height:32px;border:1px solid rgba(219,179,86,.22);border-radius:7px;background:rgba(3,7,9,.58);color:#f7e9bd;font:800 .64rem system-ui;padding:0 8px}.player-shop-buy button,.player-shop-primary,.player-shop-secondary{min-height:32px;border:1px solid rgba(229,184,76,.46);border-radius:7px;background:linear-gradient(#916822,#5c3c13);color:#fff1c2;font:900 .61rem system-ui;cursor:pointer}.player-shop-secondary{border-color:rgba(136,174,197,.3);background:linear-gradient(#38576a,#253b49);color:#e8f6ff}.player-shop-danger{border-color:rgba(219,104,97,.4);background:linear-gradient(#783c38,#4d2725);color:#ffe7e3}.player-shop-empty{display:grid;place-items:center;min-height:180px;border:1px dashed rgba(226,181,73,.24);border-radius:11px;color:#9b927f;text-align:center}.player-shop-empty strong{display:block;color:#e8d49e;font-size:.75rem}.player-shop-empty span{display:block;margin-top:4px;font-size:.6rem}.player-shop-form{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;margin-bottom:10px}.player-shop-form label{display:grid;gap:4px;color:#bfae84;font:900 .54rem system-ui}.player-shop-rent-summary{align-self:end;display:grid;place-items:center;min-height:32px;padding:0 11px;border:1px solid rgba(227,181,72,.25);border-radius:7px;background:rgba(87,59,19,.28);color:#f2cc6b;font:900 .61rem system-ui}.player-shop-sale-list{display:grid;gap:6px}.player-shop-sale-row{display:grid;grid-template-columns:42px minmax(110px,1fr) 82px 110px;align-items:center;gap:7px;padding:6px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.025)}.player-shop-sale-row .item-icon{width:40px;height:40px}.player-shop-sale-row strong,.player-shop-sale-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-shop-sale-row strong{font-size:.61rem}.player-shop-sale-row small{margin-top:2px;color:#939e9f;font-size:.5rem}.player-shop-sale-row label{display:grid;gap:3px;color:#aa9f86;font:800 .48rem system-ui}.player-shop-sale-row.is-selected{border-color:rgba(226,181,71,.45);background:rgba(92,68,25,.28)}.player-shop-sale-toggle{position:relative;display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(229,190,95,.32);border-radius:6px;background:#222;color:transparent;cursor:pointer}.player-shop-sale-row.is-selected .player-shop-sale-toggle{background:#a77a29;color:#fff}.player-shop-form-actions{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:10px}.player-shop-form-actions p{margin:0;color:#968d7b;font-size:.55rem}.player-shop-form-actions>div{display:flex;gap:7px}.player-shop-trustbar{display:flex;justify-content:center;gap:22px;padding:8px 13px;border-top:1px solid rgba(225,178,66,.17);background:rgba(7,9,10,.78);color:#9e947f;font:800 .52rem system-ui}.player-shop-trustbar span::first-letter{color:#e3b856}

@media(max-width:760px),(max-height:620px){.trade-invite-panel{top:48px;grid-template-columns:34px 1fr auto;padding:7px 8px}.trade-invite-emblem{width:32px;height:32px;font-size:16px}.trade-invite-actions button{min-height:29px;padding:0 8px}.exchange-window{width:98vw;height:96vh;border-radius:11px}.exchange-header{grid-template-columns:39px 1fr auto;gap:8px;padding:7px 9px}.exchange-header__sigil{width:36px;height:36px;font-size:18px}.exchange-header h2{font-size:.91rem}.exchange-header p{font-size:.52rem}.exchange-close{width:29px;height:29px}.trade-offers{grid-template-columns:1fr 20px 1fr;gap:4px;padding:5px 6px 3px}.trade-swap-mark{font-size:1rem}.trade-offer>header{padding:5px 6px}.trade-offer-items{grid-template-columns:1fr;gap:3px;padding:4px}.trade-line{grid-template-columns:26px minmax(0,1fr);padding:3px}.trade-line .item-icon{width:25px;height:25px}.trade-builder{margin:0 6px 4px;padding:5px}.trade-builder>header{margin-bottom:4px}.trade-builder>header>span{display:none}.trade-inventory-grid{min-height:45px}.trade-inventory-item{grid-template-columns:29px 56px;flex-basis:96px;padding:3px}.trade-inventory-item .item-icon{width:28px;height:28px}.trade-currency-editor{margin-top:3px}.trade-currency-editor label{padding:3px 6px}.exchange-footer{padding:5px 7px}.exchange-button{min-height:31px;padding:0 10px}.player-shop-body{padding:7px}.player-shop-hero{margin-bottom:6px;padding:6px 8px}.player-shop-listings{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.player-shop-listing{grid-template-columns:36px minmax(0,1fr);gap:5px;padding:5px}.player-shop-listing .item-icon{width:34px;height:34px}.player-shop-form{grid-template-columns:1fr 96px;gap:5px}.player-shop-rent-summary{grid-column:1/-1;min-height:25px}.player-shop-sale-row{grid-template-columns:30px minmax(76px,1fr) 58px 79px;gap:4px;padding:4px}.player-shop-sale-row .item-icon{width:29px;height:29px}.player-shop-sale-row input{padding:0 4px}.player-shop-trustbar{gap:8px;padding:5px;font-size:.43rem}}

.player-shop-sale-row{grid-template-columns:24px 42px minmax(110px,1fr) 82px 110px}
@media(max-width:760px),(max-height:620px){.player-shop-sale-row{grid-template-columns:22px 30px minmax(68px,1fr) 58px 79px}}
.player-interaction-actions button.trade{border-color:rgba(230,185,76,.48);background:linear-gradient(rgba(133,94,28,.96),rgba(83,55,18,.96));color:#fff0bd}
.exchange-modal[hidden],.trade-invite-panel[hidden]{display:none!important}

/* V36.64.0 — paginação compacta: as trocas e bancas cabem sem prompt nativo ou rolagem de menu. */
.trade-builder{position:relative}.trade-inventory-grid{justify-content:center;overflow:hidden}.trade-page-button{align-self:stretch;flex:0 0 26px;border:1px solid rgba(220,180,84,.3);border-radius:7px;background:rgba(73,54,23,.58);color:#f4d681;font:1000 1rem system-ui;cursor:pointer}.trade-page-button:disabled{opacity:.3;cursor:not-allowed}.trade-page-indicator{align-self:center;flex:0 0 26px;color:#ad9d78;font:900 .48rem system-ui;text-align:center}.trade-quantity-editor{position:absolute;z-index:4;left:50%;bottom:42px;transform:translateX(-50%);display:grid;grid-template-columns:minmax(130px,1fr) 74px auto auto;align-items:center;gap:7px;width:min(560px,calc(100% - 14px));padding:8px;border:1px solid rgba(231,186,78,.62);border-radius:10px;background:linear-gradient(145deg,rgba(28,24,16,.99),rgba(11,16,19,.99));box-shadow:0 12px 35px rgba(0,0,0,.72)}.trade-quantity-editor>div small,.trade-quantity-editor>div strong,.trade-quantity-editor>div span{display:block}.trade-quantity-editor>div small{color:#d7a942;font:900 .48rem system-ui;letter-spacing:.08em}.trade-quantity-editor>div strong{font-size:.64rem}.trade-quantity-editor>div span{color:#929ca0;font-size:.5rem}.trade-quantity-editor input{min-width:0;height:32px;border:1px solid rgba(222,181,85,.3);border-radius:7px;background:#090c0e;color:#ffe9a8;font:900 .7rem system-ui;text-align:center}.trade-quantity-editor button{height:32px;padding:0 10px;border:1px solid rgba(125,157,176,.3);border-radius:7px;background:#2b424f;color:#eaf7ff;font:900 .56rem system-ui}.trade-quantity-editor #tradeQuantityConfirm{border-color:#d4a946;background:#76531b;color:#fff1bd}.trade-quantity-editor[hidden]{display:none!important}.trade-offer-items{overflow:hidden}.player-shop-body{overflow:hidden}.player-shop-listings{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.player-shop-sale-list{grid-template-columns:repeat(2,minmax(0,1fr))}.exchange-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:7px}.exchange-pagination button{min-height:25px;padding:0 10px;border:1px solid rgba(129,163,184,.28);border-radius:7px;background:#263d4a;color:#e8f6ff;font:900 .52rem system-ui}.exchange-pagination button:disabled{opacity:.3}.exchange-pagination span{color:#aa9f83;font:900 .5rem system-ui}
@media(max-width:760px),(max-height:620px){.trade-page-button{flex-basis:21px}.trade-page-indicator{flex-basis:20px}.trade-quantity-editor{bottom:35px;grid-template-columns:minmax(90px,1fr) 58px auto auto;padding:5px}.trade-quantity-editor input,.trade-quantity-editor button{height:27px}.trade-offer-items{grid-template-columns:repeat(2,minmax(0,1fr))}.player-shop-listings{grid-template-columns:repeat(4,minmax(0,1fr))}.player-shop-form{grid-template-columns:minmax(0,1fr) 82px 88px}.player-shop-rent-summary{grid-column:auto;min-height:32px;padding:0 4px}.player-shop-sale-list{grid-template-columns:repeat(2,minmax(0,1fr))}.exchange-pagination{margin-top:4px}.exchange-pagination button{min-height:21px}}

/* Invariante final: nenhuma regra responsiva pode reabrir uma tela oculta. */
.game-menu-window > .menu-page[hidden],
.npc-dialogue[hidden],
.login-overlay[hidden],
.class-selection-overlay[hidden],
.exchange-modal[hidden],
.trade-invite-panel[hidden],
.trade-quantity-editor[hidden] {
  display: none !important;
}

/* V36.67.0 — painel GM de observabilidade e diagnóstico. */
.gm-debug-launcher{position:absolute;z-index:260;right:max(12px,env(safe-area-inset-right));bottom:max(154px,calc(env(safe-area-inset-bottom) + 142px));min-height:36px;padding:0 13px;border:1px solid rgba(93,219,226,.54);border-radius:9px;background:linear-gradient(145deg,rgba(15,75,84,.96),rgba(12,35,47,.98));box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.1);color:#dffeff;font:900 .68rem system-ui;letter-spacing:.04em;cursor:pointer}.gm-debug-launcher[hidden]{display:none!important}.gm-debug-panel{position:absolute;z-index:720;inset:0;display:grid;place-items:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 12%,rgba(26,91,101,.24),rgba(2,7,10,.91));backdrop-filter:blur(7px);font-family:system-ui,sans-serif}.gm-debug-panel[hidden]{display:none!important}.gm-debug-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr);width:min(1480px,99vw);height:min(920px,98vh);overflow:hidden;border:1px solid rgba(92,215,222,.38);border-radius:17px;background:linear-gradient(150deg,rgba(12,22,28,.995),rgba(7,12,17,.997));box-shadow:0 28px 100px rgba(0,0,0,.76),inset 0 0 50px rgba(55,199,207,.035);color:#e8f4f6}.gm-debug-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(102,203,210,.2);background:linear-gradient(90deg,rgba(30,112,119,.34),rgba(19,34,42,.2))}.gm-debug-header p,.gm-debug-header h2,.gm-debug-header small{display:block;margin:0}.gm-debug-header p{color:#5ddbe0;font:900 .52rem/1 system-ui;letter-spacing:.16em;text-transform:uppercase}.gm-debug-header h2{margin-top:3px;color:#efffff;font:1000 1.1rem/1.1 system-ui}.gm-debug-header small{margin-top:4px;color:#90a9ad;font-size:.59rem}.gm-debug-header-actions{display:flex;gap:7px}.gm-debug-header-actions button,.gm-debug-actions button,.gm-debug-report-tools button{min-height:32px;padding:0 11px;border:1px solid rgba(95,199,207,.35);border-radius:8px;background:linear-gradient(#275b64,#183a45);color:#e8fdff;font:900 .59rem system-ui;cursor:pointer}.gm-debug-header-actions [data-debug-close]{width:34px;padding:0;border-color:rgba(224,117,111,.36);background:linear-gradient(#613b3b,#3e272a);font-size:1.15rem}.gm-debug-tabs{display:flex;gap:3px;overflow-x:auto;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(3,9,13,.64)}.gm-debug-tabs button{flex:0 0 auto;min-height:29px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#82989c;font:900 .54rem system-ui;cursor:pointer}.gm-debug-tabs button[data-active=true]{border-color:rgba(80,215,221,.37);background:rgba(37,133,140,.22);color:#a9ffff;box-shadow:inset 0 -2px #48cbd1}.gm-debug-content{min-height:0;overflow:auto;padding:11px}.gm-debug-loading,.gm-debug-empty{display:grid;place-items:center;min-height:100px;margin:0;color:#809499;font-size:.66rem;text-align:center}.gm-debug-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.gm-debug-metric{display:grid;gap:3px;min-width:0;padding:10px;border:1px solid rgba(102,177,183,.18);border-radius:10px;background:linear-gradient(145deg,rgba(28,49,57,.72),rgba(15,26,32,.8))}.gm-debug-metric span{overflow:hidden;color:#79989d;font:900 .5rem system-ui;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.gm-debug-metric strong{overflow:hidden;color:#eaffff;font-size:.83rem;text-overflow:ellipsis;white-space:nowrap}.gm-debug-metric small{overflow:hidden;color:#8ca1a5;font-size:.52rem;text-overflow:ellipsis;white-space:nowrap}.gm-debug-section{margin-top:10px;padding:10px;border:1px solid rgba(113,164,169,.16);border-radius:11px;background:rgba(9,18,23,.72)}.gm-debug-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.gm-debug-section-title h3{margin:0;color:#dbf5f3;font-size:.75rem}.gm-debug-section-title span{padding:3px 7px;border-radius:99px;background:rgba(64,175,181,.15);color:#75dce0;font:900 .51rem system-ui}.gm-debug-alerts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.gm-debug-alerts article{display:grid;gap:3px;padding:8px;border-left:3px solid #d8ae51;border-radius:7px;background:rgba(112,82,25,.17)}.gm-debug-alerts article[data-severity=critical]{border-left-color:#ef706a;background:rgba(128,44,40,.2)}.gm-debug-alerts b{font-size:.61rem}.gm-debug-alerts small{color:#9aabad;font-size:.49rem}.gm-debug-log{display:grid;gap:4px}.gm-debug-log article{display:grid;grid-template-columns:160px 220px minmax(0,1fr);gap:7px;padding:6px 8px;border-left:2px solid #4c8991;border-radius:5px;background:rgba(255,255,255,.022);font-size:.55rem}.gm-debug-log article[data-level=warn]{border-left-color:#d5aa4d}.gm-debug-log article[data-level=error]{border-left-color:#e56864;background:rgba(131,41,39,.13)}.gm-debug-log time{color:#6e898e}.gm-debug-log b{overflow:hidden;color:#d8eef0;text-overflow:ellipsis}.gm-debug-log small{overflow:hidden;color:#92a3a6;text-overflow:ellipsis;white-space:nowrap}.gm-debug-split{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:10px;height:100%;min-height:0}.gm-debug-split>div{min-height:0}.gm-debug-list{display:grid;align-content:start;gap:5px;max-height:calc(98vh - 180px);overflow:auto}.gm-debug-list button{display:grid;gap:3px;width:100%;padding:8px;border:1px solid rgba(105,164,171,.16);border-radius:8px;background:rgba(25,42,49,.72);color:#e8f5f6;text-align:left;cursor:pointer}.gm-debug-list button:hover{border-color:rgba(73,213,219,.46);background:rgba(32,72,78,.72)}.gm-debug-list b{font-size:.64rem}.gm-debug-list small,.gm-debug-list em{overflow:hidden;color:#94a8ac;font-size:.51rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.gm-debug-list em{color:#76cfd3}.gm-debug-inspector{min-height:0;overflow:auto;padding:10px;border:1px solid rgba(104,165,171,.17);border-radius:10px;background:rgba(5,12,16,.63)}.gm-debug-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.gm-debug-content pre{max-width:100%;margin:0;overflow:auto;padding:9px;border-radius:8px;background:#050b0f;color:#a9c8cb;font:500 .56rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.gm-debug-table{overflow:auto}.gm-debug-table table{width:100%;border-collapse:collapse;font-size:.56rem}.gm-debug-table th,.gm-debug-table td{padding:7px;border-bottom:1px solid rgba(255,255,255,.065);text-align:left;white-space:nowrap}.gm-debug-table th{position:sticky;top:0;background:#102129;color:#62ccd1;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase}.gm-debug-table td{color:#b4c6c8}.gm-debug-report-tools{display:grid;gap:10px;max-width:920px;margin:0 auto}.gm-debug-report-tools p{margin:0;color:#91a5a8;font-size:.61rem}.gm-debug-report-tools label{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:8px;color:#9eb3b6;font:900 .57rem system-ui}.gm-debug-report-tools input{min-width:0;min-height:34px;border:1px solid rgba(103,186,192,.25);border-radius:8px;padding:0 9px;background:#071015;color:#e8ffff;font:700 .61rem system-ui}.gm-debug-report-result{min-height:38px;padding:9px;border:1px dashed rgba(94,194,201,.27);border-radius:8px;color:#9eb9bb;font-size:.6rem}.gm-debug-report-result a{color:#74e7eb;font-weight:900}
@media(max-width:900px),(max-height:650px){.gm-debug-panel{padding:0}.gm-debug-shell{width:100%;height:100%;border:0;border-radius:0}.gm-debug-header{padding:7px 9px}.gm-debug-header h2{font-size:.9rem}.gm-debug-header p{display:none}.gm-debug-tabs{padding:4px 6px}.gm-debug-tabs button{min-height:25px;padding:0 7px;font-size:.49rem}.gm-debug-content{padding:7px}.gm-debug-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.gm-debug-metric{padding:7px}.gm-debug-alerts{grid-template-columns:1fr 1fr}.gm-debug-log article{grid-template-columns:120px 150px minmax(0,1fr);padding:4px 6px}.gm-debug-split{grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:6px}.gm-debug-list{max-height:calc(100vh - 140px)}.gm-debug-report-tools label{grid-template-columns:80px minmax(0,1fr) auto}}
@media(max-width:620px){.gm-debug-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gm-debug-alerts{grid-template-columns:1fr}.gm-debug-split{grid-template-columns:1fr;grid-template-rows:minmax(150px,.8fr) minmax(0,1.2fr)}.gm-debug-list{max-height:32vh}.gm-debug-log article{grid-template-columns:1fr}.gm-debug-log small{white-space:normal}.gm-debug-report-tools label{grid-template-columns:1fr}.gm-debug-launcher{right:7px;bottom:145px}}

/* V36.67.17 — catálogo de skins por categoria e página, sem rolagem. */
.store-page .store-mount-view,
.store-page .store-player-view {
  display: block;
  padding: 0;
  overflow: hidden;
}

.store-skin-browser {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(99, 162, 193, .2);
  border-radius: 11px;
  background: rgba(5, 17, 29, .74);
}

.skin-category-tabs {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.skin-category-tabs--mounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skin-category-tabs--players { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.skin-category-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid rgba(111, 164, 190, .35);
  border-radius: 8px;
  background: rgba(9, 24, 37, .92);
  color: #abc3d1;
  font-size: .72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.skin-category-tabs button.active {
  border-color: #68e5ff;
  background: linear-gradient(180deg, rgba(28, 129, 171, .92), rgba(26, 56, 91, .96));
  color: #efffff;
  box-shadow: inset 0 -3px rgba(126, 235, 255, .45), 0 0 9px rgba(51, 193, 255, .12);
}

.skin-carousel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.skin-card-frame {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
}

.skin-card-frame > .cosmetic-product {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.skin-card-frame > .cosmetic-product[hidden] { display: none !important; }

.skin-carousel-arrow {
  align-self: center;
  width: 46px;
  height: min(118px, 42%);
  min-height: 72px;
  padding: 0;
  border: 1px solid rgba(104, 224, 255, .52);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 129, 168, .88), rgba(18, 53, 85, .96));
  color: #eaffff;
  font: 1000 2rem/1 system-ui, sans-serif;
  text-shadow: 0 0 8px rgba(111, 232, 255, .8);
  cursor: pointer;
}

.skin-carousel-arrow:disabled {
  border-color: rgba(106, 139, 153, .22);
  background: rgba(12, 29, 40, .72);
  color: rgba(176, 202, 213, .3);
  text-shadow: none;
  cursor: default;
}

.skin-browser-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 22px;
  color: #91adbb;
  font-size: .62rem;
  text-align: center;
}

.skin-browser-footer > span {
  padding: 3px 8px;
  border: 1px solid rgba(101, 218, 245, .25);
  border-radius: 999px;
  color: #c9f8ff;
  background: rgba(27, 106, 137, .18);
  font-weight: 1000;
}