* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Barras de rolagem combinando com as janelas escuras. */
* {
  scrollbar-color: #4b5b66 #101820;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #101820; border-radius: 6px; }
*::-webkit-scrollbar-thumb { background: #4b5b66; border: 2px solid #101820; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #647984; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background: #18202a;
  color: #f5f7fa;
}

body { min-height: 100vh; }
body.login-screen { background: #18202a url('/wallpaper/login.png') center / 100% 100% no-repeat fixed; }
body.character-creation-screen { background: #101820 url('/wallpaper/login.png') center / 100% 100% no-repeat fixed; }
.creation-panel { width: min(90%, 520px); margin: 15vh auto 0; padding: 2.5rem; text-align: center; background: #253342; border: 1px solid #3b4e62; border-radius: 12px; box-shadow: 0 12px 35px rgb(0 0 0 / 25%); }
.login-panel-enter { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity 650ms ease, transform 650ms ease; }
.login-panel-enter.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .login-panel-enter { transition: none; } }
@media (max-width: 700px) {
  body.login-screen {
    background-image: url('/wallpaper/login_mobile.png');
    background-size: 100% 100%;
    background-attachment: scroll;
  }
  body.login-screen #login-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(90vw, 520px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
    margin: 0;
    padding: 1.5rem;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    background: rgb(37 51 66 / 90%);
    border-radius: 12px;
    overscroll-behavior: contain;
  }
  body.login-screen #login-panel.login-panel-enter { transform: translate(-50%, calc(-50% + 18px)) scale(.98); }
  body.login-screen #login-panel.login-panel-enter.is-visible { transform: translate(-50%, -50%) scale(1); }
  body.character-creation-screen {
    background-color: #101820;
    background-image: url('/wallpaper/login_mobile.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  body.character-creation-screen #character-creation {
    position: fixed;
    z-index: 40;
    top: 50%;
    left: 50%;
    width: min(90vw, 520px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
    margin: 0;
    padding: 1.25rem;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    background: rgb(37 51 66 / 84%);
    border-radius: 12px;
    overscroll-behavior: contain;
  }
  .game-container { width: 100vw; height: 100vh; height: 100dvh; min-height: 100dvh; }
  #game, #game canvas { height: 100vh !important; height: 100dvh !important; }
  html:fullscreen, html:fullscreen body { width: 100%; height: 100%; }
  html:fullscreen .game-container { width: 100vw; height: 100vh; height: 100dvh; min-height: 100dvh; }
  html:fullscreen #game, html:fullscreen #game canvas { width: 100vw !important; height: 100vh !important; height: 100dvh !important; }
  body.character-creation-screen .gender-options { gap: 0.5rem; }
  body.character-creation-screen .gender-option { flex: 1; min-width: 0; padding: 0.6rem 0.4rem; }
}
h1 { margin-top: 0; }
.name-field { display: block; margin-top: 1.5rem; color: #c9dce8; font-size: 0.9rem; text-align: left; }
.name-input { width: 100%; margin-top: 0.45rem; padding: 0.8rem 0.9rem; border: 1px solid #526b80; border-radius: 6px; background: #101b27; color: #f5f7fa; font-size: 1rem; outline: none; }
.remember-login { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; color: #c9dce8; font-size: .82rem; cursor: pointer; }
.remember-login input { width: 15px; height: 15px; accent-color: #55d982; cursor: pointer; }
.name-input:focus { border-color: #55d982; box-shadow: 0 0 0 3px rgb(85 217 130 / 15%); }
.choice-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; }
.gender-options { display: flex; justify-content: center; gap: 1rem; margin: 1.25rem 0 1rem; }
.gender-option { display: grid; place-items: center; gap: 0.25rem; min-width: 120px; padding: 0.7rem 1rem; border: 1px solid #526b80; background: #172535; }
.gender-option.selected { border-color: #55d982; background: #214b3b; box-shadow: 0 0 16px rgb(85 217 130 / 25%); }
.gender-character-image {
  display: block;
  width: 108px;
  height: 112px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 324px 448px;
  image-rendering: pixelated;
  animation: gender-walk 500ms steps(3) infinite;
}
.gender-character-image.male { background-image: url('/player/male/movi.png'); }
.gender-character-image.female { background-image: url('/player/female/movi.png'); }
@keyframes gender-walk { to { background-position-x: -324px; } }
@media (prefers-reduced-motion: reduce) { .gender-character-image { animation: none; } }
.create-character-button { width: 100%; margin-top: 0.2rem; }
button { padding: 0.8rem 1.1rem; border: 0; border-radius: 6px; background: #4cae68; color: white; font-size: 1rem; cursor: pointer; }
button:hover:not(:disabled) { background: #61c77d; }
button:disabled { cursor: wait; opacity: 0.55; }
.status { min-height: 1.25rem; color: #b8c5d2; }

.game-container { position: relative; display: grid; place-items: center; min-height: 100vh; }
.game-container[hidden] { display: none !important; }
.session-replaced-notice { position: fixed; z-index: 2201; top: max(1rem, env(safe-area-inset-top)); left: 50%; width: min(92vw, 480px); padding: .8rem 1rem; transform: translateX(-50%); border: 1px solid #d4b34b; border-radius: 6px; background: rgb(17 24 30 / 96%); color: #fff1b9; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); font-size: .9rem; font-weight: 700; text-align: center; }
#game, #game canvas { width: 100vw !important; height: 100vh !important; display: block; }
#game canvas { touch-action: none; }
.fps-counter { position: absolute; top: 3.25rem; right: max(0.75rem, env(safe-area-inset-right)); z-index: 20; padding: 0.35rem 0.55rem; border: 1px solid rgb(158 196 173 / 35%); border-radius: 4px; background: rgb(8 15 13 / 78%); color: #b9efc6; font: 600 12px/1.2 monospace; pointer-events: none; user-select: none; }

.game-loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background-color: #000; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.is-game-loading #tutorial-arrow, .is-game-loading #tutorial-message, .is-game-loading #tutorial-drag-orb, .is-game-loading #admin-sqm-coordinates { display: none !important; }
.game-loading-card { display: grid; justify-items: center; gap: .8rem; min-width: 220px; padding: 1.1rem 1.3rem; border: 1px solid #4e7391; border-radius: 14px; background: rgb(10 18 28 / 94%); box-shadow: 0 0 30px rgb(31 186 255 / 18%); color: #d8efff; text-align: center; }
.game-loading-card strong { font-size: 1rem; color: #bcecff; }
.game-loading-card span { font-size: .82rem; color: #95adbe; }
.game-loading-spinner { width: 34px; height: 34px; border: 3px solid rgb(188 236 255 / 18%); border-top-color: #65d98a; border-radius: 50%; animation: game-loading-spin 850ms linear infinite; }
@keyframes game-loading-spin { to { transform: rotate(360deg); } }

.player-hud { position: fixed; left: 1rem; top: 1rem; z-index: 6; width: 350px; padding: 0.8rem 1rem 0.6rem; display: flex; flex-direction: column; background: rgb(9 17 27 / 94%); border: 1px solid #4e7391; border-radius: 10px; box-shadow: 0 0 18px rgb(0 0 0 / 45%); }
.player-hud-label { display: flex; justify-content: space-between; margin-bottom: 0.45rem; color: #c9dce8; font-size: 0.95rem; font-weight: 700; }
.player-hud-label strong { color: #e9fff0; }
#player-level-text { font-size: 1.4rem; }
.player-level-group { display: inline-flex; align-items: center; gap: .3rem; }
.vip-info-button { display: grid; width: 25px; height: 25px; padding: 0; place-items: center; border: 1px solid #9a7a31; border-radius: 50%; color: #ffe28a; background: #302813; font-size: 14px; line-height: 1; }
.vip-info-button:hover { border-color: #ffe28a; background: #59451a; }
#player-hp-text { display: none; }
.player-hud-label span { color: #ffd76a; }
.vip-info-modal { z-index: 2100; padding: 1rem; }
.vip-info-card { width: min(460px, calc(100vw - 2rem)); max-height: min(82vh, 680px); overflow-y: auto; padding: 1rem; border: 1px solid #b3903e; border-radius: 12px; color: #e8edf2; background: linear-gradient(145deg, rgb(29 35 45 / 99%), rgb(9 15 24 / 99%)); box-shadow: 0 0 32px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 5%); }
.vip-info-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding-bottom: .65rem; border-bottom: 1px solid #51452b; }
.vip-info-header h2 { margin: 0; color: #ffdf86; font-size: 1.15rem; }
.vip-info-header button { width: 30px; height: 30px; padding: 0; border: 1px solid #63563a; border-radius: 6px; color: #f0d99c; background: #28251c; font-size: 1.35rem; line-height: 1; }
.vip-info-status { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .8rem; padding: .65rem .75rem; border: 1px solid #51452b; border-radius: 7px; background: rgb(79 61 24 / 24%); }
.vip-info-status span { color: #f5dc9a; font-weight: 700; }
.vip-info-status strong { color: #fff1c5; font: 700 .9rem/1.2 monospace; }
.vip-benefit-groups { display: grid; gap: .6rem; }
.vip-benefit-group { padding: .65rem .75rem; border: 1px solid #344454; border-radius: 7px; background: rgb(19 29 40 / 85%); }
.vip-benefit-group h3 { margin: 0 0 .35rem; color: #bcecff; font-size: .9rem; }
.vip-benefit-group ul { display: grid; gap: .28rem; margin: 0; padding-left: 1.15rem; color: #d3dce3; font-size: .82rem; line-height: 1.4; }
.currency-row { display: inline-flex; align-items: center; gap: 0.55rem; margin-left: auto; }
.gold-display, .cash-display { display: inline-flex; align-items: center; gap: .2rem; color: #ffe45c !important; }
.gold-display img, .cash-display img { width: 18px; height: 18px; }
.gold-display { color: #ffe45c !important; }
.cash-display { color: #9ad7ff !important; }
.inline-gold-display, .inline-cash-display { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.inline-gold-display img, .inline-cash-display img { width: 16px; height: 16px; object-fit: contain; }
.inline-gold-display span, .inline-cash-display span { line-height: 1; }
.inline-gold-display { color: #ffe45c; }
.inline-cash-display { color: #9ad7ff; }
.player-hp-track { width: 100%; height: 17px; overflow: hidden; background: #281b24; border: 1px solid #6c3444; border-radius: 999px; }
.player-hp-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #1ba957, #55ed7b); border-radius: inherit; transition: width 180ms ease; }
.player-hp-track { position: relative; }
.target-window {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 8;
  width: min(270px, calc(100vw - 32px));
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 6px 9px 7px 21px;
  transform: translateX(-50%);
  border: 1px solid #4e7391;
  border-radius: 7px 13px 7px 13px;
  background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%));
  box-shadow: 0 0 18px rgb(31 186 255 / 16%), 0 0 12px rgb(0 0 0 / 45%), inset 0 0 18px rgb(45 119 170 / 12%);
  pointer-events: none;
}
.target-window[hidden] { display: none !important; }
.target-window-frame { width: 100%; min-width: 0; }
.target-name {
  display: block;
  max-width: 100%;
  margin: -4px 2px 4px;
  overflow: hidden;
  color: #bcecff;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.target-level-badge {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 31px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 2px solid #6f9bb5;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #31566d, #122234 68%);
  box-shadow: 0 0 0 2px #101923, 0 1px 4px #000;
  color: #dcecf3;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.target-hp-track {
  position: relative;
  width: 100%;
  height: 15px;
  overflow: hidden;
  border: 2px solid #9a6f60;
  border-radius: 999px;
  background: #29161b;
  box-shadow: inset 0 1px 3px #000;
}
.target-hp-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ff6a56, #b92525 58%, #811b20);
  transition: width 180ms linear;
}
.target-hp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.player-hp-overlay { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #ffffff; font-size: .72rem; line-height: 1; text-shadow: 0 1px 2px #000000, 0 0 3px #000000; pointer-events: none; }
.player-mana-track { position: relative; width: 100%; height: 12px; margin-top: 0.35rem; overflow: hidden; background: #14243b; border: 1px solid #2f5f9d; border-radius: 999px; }
.player-mana-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #1f6bff, #4ec5ff); border-radius: inherit; transition: width 180ms ease; }
.player-mana-overlay { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #ffffff; font-size: .65rem; line-height: 1; text-shadow: 0 1px 2px #000000, 0 0 3px #000000; pointer-events: none; }
.player-status-effects { position: fixed; left: 1rem; z-index: 7; display: flex; align-items: center; gap: .35rem; }
.player-bleeding-status { position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: visible; border: 1px solid #8e3541; border-radius: 6px; background: rgb(12 20 29 / 92%); box-shadow: inset 0 0 10px rgb(185 35 53 / 22%); cursor: help; }
.player-bleeding-status::before { content: attr(data-tooltip); position: absolute; top: calc(100% + 5px); left: 0; z-index: 8; padding: .28rem .45rem; border: 1px solid #8e3541; border-radius: 5px; background: rgb(9 17 27 / 96%); color: #ffe4e6; font-size: .72rem; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.player-bleeding-status:hover::before { opacity: 1; visibility: visible; }
.player-bleeding-status.bleeding-cooldown::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgb(9 15 24 / 22%); animation: potion-cooldown-clock-wipe var(--bleeding-cooldown-duration, 20000ms) linear forwards; animation-delay: var(--bleeding-cooldown-delay, 0s); pointer-events: none; }
.bleeding-drop-icon { width: 23px; height: 25px; fill: #e21b2d; filter: drop-shadow(0 0 4px rgb(255 30 50 / 70%)); }
.player-bleeding-status .potion-cooldown-timer { font-size: .65rem; }
.player-paralysis-status { position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: visible; border: 1px solid #7953a8; border-radius: 6px; background: rgb(18 13 29 / 94%); box-shadow: inset 0 0 10px rgb(151 76 221 / 25%); cursor: help; }
.player-paralysis-status::before { content: attr(data-tooltip); position: absolute; top: calc(100% + 5px); left: 0; z-index: 8; padding: .28rem .45rem; border: 1px solid #7953a8; border-radius: 5px; background: rgb(9 17 27 / 96%); color: #ead9ff; font-size: .72rem; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.player-paralysis-status:hover::before { opacity: 1; visibility: visible; }
.player-paralysis-status.paralysis-cooldown::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgb(9 15 24 / 22%); animation: potion-cooldown-clock-wipe var(--paralysis-cooldown-duration, 2500ms) linear forwards; pointer-events: none; }
.paralysis-icon { color: #d3a6ff; font-size: 1.45rem; line-height: 1; text-shadow: 0 0 7px rgb(181 117 255 / 90%); }
.player-paralysis-status .potion-cooldown-timer { font-size: .65rem; }
.player-burning-status { position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: visible; border: 1px solid #a34a24; border-radius: 6px; background: rgb(29 17 12 / 94%); box-shadow: inset 0 0 10px rgb(239 91 31 / 25%); cursor: help; }
.player-burning-status::before { content: attr(data-tooltip); position: absolute; top: calc(100% + 5px); left: 0; z-index: 8; padding: .28rem .45rem; border: 1px solid #a34a24; border-radius: 5px; background: rgb(9 17 27 / 96%); color: #ffe0c4; font-size: .72rem; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.player-burning-status:hover::before { opacity: 1; visibility: visible; }
.player-burning-status.burning-cooldown::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgb(9 15 24 / 22%); animation: potion-cooldown-clock-wipe var(--burning-cooldown-duration, 10000ms) linear forwards; pointer-events: none; }
.burning-flame-icon { width: 23px; height: 25px; fill: #ff6a1a; filter: drop-shadow(0 0 5px rgb(255 104 25 / 75%)); }
.player-burning-status .potion-cooldown-timer { font-size: .65rem; }
.player-exp-track { width: 100%; height: 8px; margin-bottom: 0.35rem; overflow: hidden; background: #20252b; border: 1px solid #59616a; border-radius: 999px; position: relative; }
.player-exp-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #777f88, #c4c9ce); border-radius: inherit; transition: width 180ms ease; }
.player-exp-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.65rem; color: #fff; font-weight: 600; text-shadow: 1px 1px 2px #000; pointer-events: none; white-space: nowrap; }
.target-filter-panel { position: fixed; left: 50%; bottom: 6.8rem; z-index: 7; display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; transform: translateX(-50%); background: rgb(8 14 22 / 92%); border: 1px solid #4e7391; border-radius: 10px; box-shadow: 0 0 18px rgb(0 0 0 / 45%); }
.target-filter-button { min-width: 64px; padding: .38rem .5rem; border: 1px solid #50728f; border-radius: 7px; background: rgb(24 31 42 / 90%); color: #dfeaf6; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: all 120ms ease; }
.target-filter-button:hover:not(:disabled) { border-color: #89d9ff; box-shadow: 0 0 12px rgb(96 212 255 / 42%); }
.target-filter-button.active { background: linear-gradient(180deg, rgba(50, 128, 87, .9), rgba(18, 72, 48, .9)); border-color: #61ef9a; color: #f4fff9; box-shadow: 0 0 12px rgb(74 255 124 / 55%); }
.target-filter-button:disabled { opacity: .45; cursor: not-allowed; }

.summon-target-panel { position: fixed; left: 50%; bottom: 10.4rem; z-index: 12; display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; transform: translateX(-50%); background: rgb(13 20 29 / 96%); border: 1px solid #5d8bd6; border-radius: 10px; box-shadow: 0 0 18px rgb(18 94 255 / 25%); }
.summon-target-button { min-width: 74px; padding: .38rem .65rem; border: 1px solid #5f7aa6; border-radius: 7px; background: rgb(29 37 50 / 90%); color: #eaf3ff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: all 120ms ease; }
.summon-target-button:hover:not(:disabled) { border-color: #93c7ff; box-shadow: 0 0 12px rgb(157 219 255 / 42%); }
.summon-target-button.active { background: linear-gradient(180deg, rgba(84, 110, 255, .95), rgba(36, 57, 138, .95)); border-color: #88a5ff; color: #f2f6ff; box-shadow: 0 0 12px rgb(120 152 255 / 55%); }
.summon-target-button:disabled { opacity: .45; cursor: not-allowed; }
.shortcut-bar { position: fixed; left: 50%; bottom: 2rem; z-index: 6; display: flex; gap: .35rem; padding: .35rem; transform: translateX(-50%); background: rgb(9 17 27 / 94%); border: 1px solid #4e7391; border-radius: 9px; box-shadow: 0 0 18px rgb(0 0 0 / 45%); }
.shortcut-slot { display: grid; place-items: center; align-content: center; gap: .05rem; width: 54px; height: 54px; overflow: hidden; border: 1px solid #526b80; border-radius: 6px; background: rgb(12 20 29 / 75%); color: #d7e6ef; font-size: .55rem; text-align: center; }
.shortcut-slot:first-child, .shortcut-slot:nth-child(2), .shortcut-slot:nth-child(n) { border-color: #4f8fc4; box-shadow: inset 0 0 10px rgb(54 139 185 / 22%); }
.shortcut-icon { color: #62e884; font-size: 1.35rem; font-weight: 700; }
.item-icon-image { width: 32px; height: 32px; object-fit: contain; display: block; filter: drop-shadow(0 0 4px rgb(255 228 92 / 65%)); }
.equipment-slot .item-icon-image { width: 34px; height: 34px; }
.shortcut-name { max-width: 100%; overflow: hidden; color: #b9d3df; white-space: nowrap; text-overflow: ellipsis; }
.shortcut-slot b { color: #ffffff; font-size: .7rem; }
.shortcut-slot { position: relative; }
.mobile-game-nav { height: 0; }
.shortcut-slot.potion-cooldown { pointer-events: auto; }
.shortcut-slot.potion-cooldown::after, .shortcut-slot.skill-cooldown::after, .orb-item.potion-cooldown::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgb(9 15 24 / 68%);
  animation-name: potion-cooldown-clock-wipe;
  animation-duration: var(--potion-cooldown-duration, 5000ms);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: var(--potion-cooldown-delay, 0s);
  pointer-events: none;
}
.shortcut-slot.potion-cooldown .item-icon-image, .shortcut-slot.skill-cooldown .item-icon-image { filter: grayscale(1) brightness(.65); }
.shortcut-slot .item-icon-image, .orb-item .orb-icon-image, .orb-item .item-icon-image, .brain-slot .orb-icon-image, .passive-slot .orb-icon-image, .equipment-slot .item-icon-image, .equipment-slot img { pointer-events: none; }
.shortcut-slot.shortcut-selected { border-color: #8fe7ff; box-shadow: 0 0 14px rgb(91 211 255 / 75%), inset 0 0 10px rgb(54 139 185 / 35%); }
.potion-cooldown-timer { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; color: #fff; font-size: .95rem; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 5px #000; pointer-events: none; }
.orb-item.potion-cooldown .orb-icon-image { filter: grayscale(1) brightness(.65); }
@keyframes potion-cooldown-clock-wipe {
  0% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0); }
  12.5% { clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0); }
  25% { clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0); }
  37.5% { clip-path: polygon(50% 50%, 100% 100%, 0 100%, 0 0); }
  50% { clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0); }
  62.5% { clip-path: polygon(50% 50%, 0 100%, 0 0); }
  75% { clip-path: polygon(50% 50%, 0 50%, 0 0); }
  87.5% { clip-path: polygon(50% 50%, 0 0); }
  100% { clip-path: polygon(50% 50%, 50% 50%); }
}
.connection-lost-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgb(0 0 0 / 72%); }
#connection-lost-modal { background: #000; }
.connection-lost-card { width: min(360px, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid #4e7391; border-radius: 12px; background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); box-shadow: 0 0 30px rgb(0 0 0 / 65%); text-align: center; }
.connection-lost-card h2 { margin: 0 0 .6rem; color: #ff9b9b; }
.connection-lost-card p { margin: 0 0 1.2rem; color: #c9dce8; }
.connection-lost-card button { min-width: 140px; }
.account-takeover-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.split-stack-card { display: grid; gap: .8rem; }
.split-stack-card input[type="range"] { width: 100%; accent-color: #55d982; }
.split-stack-card input[type="number"] { width: 90px; margin: auto; padding: .35rem; color: #ffe45c; background: #101820; border: 1px solid #526b80; border-radius: 5px; font-size: 1.1rem; font-weight: 700; text-align: center; }
.split-stack-actions { display: flex; justify-content: center; gap: .6rem; }
.death-card h2 { color: #ff5f5f; text-shadow: 0 0 12px rgb(255 55 55 / 55%); }

/* Painel MLP do cérebro: os nós .brain-slot são os únicos pontos de drop. */
.brain-ui, .inventory-panel {
  position: fixed;
  right: 1rem;
  z-index: 5;
  padding: 0.8rem 1rem 1rem;
  background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%));
  border: 1px solid #4e7391;
  border-radius: 14px;
  box-shadow: 0 0 22px rgb(31 186 255 / 16%), inset 0 0 18px rgb(45 119 170 / 12%);
}

.brain-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.admin-players-toggle { position: fixed; right: 1rem; bottom: 4.75rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.35rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.equipment-toggle { position: fixed; right: 4.75rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 1.35rem; }
.orb-evolution-toggle { position: fixed; right: 8.5rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.minimap-toggle { position: fixed; right: 12.25rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 1.25rem; }
.profession-toggle { position: fixed; right: 19.75rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.friends-toggle { position: fixed; right: 16rem; bottom: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.shop-toggle { position: fixed; left: 27.55rem; top: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.game-settings-toggle { position: fixed; left: 31.3rem; top: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); cursor: pointer; }
.mailbox-toggle { position: fixed; left: 23.8rem; top: 1rem; z-index: 7; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #4e7391; border-radius: 50%; background: #122234; color: #bcecff; font-size: 1.45rem; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.mailbox-toggle.has-unread {
  animation: mailbox-pulse 0.45s ease-in-out infinite;
  background: linear-gradient(180deg, #ff7a59, #d92d2d);
  border-color: #ffd4a8;
  box-shadow: 0 0 0 3px rgba(255, 145, 86, 0.35), 0 0 20px rgba(255, 90, 60, 0.95), 0 0 30px rgba(255, 55, 55, 0.7);
}
.mailbox-toggle.has-unread::after { content: ''; position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #ffd630; box-shadow: 0 0 12px rgba(255, 214, 48, 1), 0 0 18px rgba(255, 90, 60, 0.9); }
@keyframes mailbox-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1) saturate(1); }
  50% { transform: scale(1.12); filter: brightness(1.6) saturate(1.4); }
}
.brain-toggle.active, .friends-toggle.active, .shop-toggle.active, .game-settings-toggle.active, .orb-evolution-toggle.active, .equipment-toggle.active, .minimap-toggle.active, .profession-toggle.active, .mailbox-toggle.active, .admin-players-toggle.active {
  background: linear-gradient(180deg, rgba(19, 66, 38, 0.96), rgba(13, 41, 26, 0.96));
  border-color: #3fe07d;
  color: #dfffee;
  box-shadow: 0 0 16px rgba(63, 224, 125, 0.5), inset 0 0 10px rgba(95, 255, 165, 0.18);
}
.brain-toggle.ready {
  background: linear-gradient(180deg, rgba(83, 68, 18, 0.98), rgba(54, 44, 8, 0.98));
  border-color: #ffc857;
  color: #fff4d6;
  box-shadow: 0 0 18px rgba(255, 208, 87, 0.7), inset 0 0 10px rgba(255, 204, 92, 0.22);
}
.brain-toggle.has-ready {
  animation: mailbox-pulse 0.45s ease-in-out infinite;
  background: linear-gradient(180deg, #ff7a59, #d92d2d);
  border-color: #ffd4a8;
  color: #fff7f0;
  box-shadow: 0 0 0 3px rgba(255, 145, 86, 0.35), 0 0 20px rgba(255, 90, 60, 0.95), 0 0 30px rgba(255, 55, 55, 0.7);
}
.brain-toggle.has-ready::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd630;
  box-shadow: 0 0 12px rgba(255, 214, 48, 1), 0 0 18px rgba(255, 90, 60, 0.9);
}
.brain-orbs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 120px;
  padding: 0.5rem 0.8rem;
  margin-left: auto;
  margin-right: 0.35rem;
  border: 1px solid #4ad07d;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(29 88 56 / 95%), rgb(16 51 34 / 96%));
  color: #ebfff3;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgb(74 208 125 / 30%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.brain-orbs-toggle::before {
  content: '';
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #dfffee, #6df7a3 42%, #14863a 100%);
  box-shadow: 0 0 0 2px rgb(173 255 202 / 45%), 0 0 10px rgb(109 247 163 / 75%);
}
.brain-orbs-toggle.off {
  border-color: #e36a76;
  background: linear-gradient(180deg, rgb(93 26 35 / 95%), rgb(57 19 25 / 96%));
  color: #ffeaf0;
  box-shadow: 0 0 16px rgb(227 106 118 / 24%);
}
.brain-orbs-toggle.off::before {
  background: radial-gradient(circle at 35% 35%, #ffe9ee, #ff7c8a 42%, #8a2539 100%);
  box-shadow: 0 0 0 2px rgb(255 181 191 / 42%), 0 0 10px rgb(255 124 138 / 65%);
}
.brain-orbs-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
  box-shadow: none;
}
.brain-orbs-toggle:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.08);
}
.brain-orbs-toggle:disabled:hover {
  transform: none;
  filter: saturate(0.6);
}
.mailbox-ui {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0.9rem 0.9rem;
  background: linear-gradient(145deg, rgba(25, 36, 51, 0.97), rgba(8, 15, 24, 0.97));
  border: 1px solid #4e7391;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
}
.mailbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.mailbox-header h2 {
  margin: 0;
  color: #bcecff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mailbox-close {
  padding: 0.15rem 0.45rem;
  background: transparent;
  color: #ff9b9b;
  font-size: 1.2rem;
  line-height: 1;
}
.mailbox-close:hover {
  background: #562c38;
  color: #ffffff;
}
.mailbox-ui.dragging {
  opacity: 0.92;
  box-shadow: 0 0 30px rgb(85 217 130 / 30%), inset 0 0 18px rgb(45 119 170 / 12%);
}
.mailbox-ui.dragging, .mailbox-ui.dragging * {
  user-select: none !important;
}
.mailbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  max-height: calc(min(70vh, 560px) - 40px);
}
.mailbox-item {
  padding: 0.8rem;
  border: 1px solid #425d77;
  border-radius: 8px;
  background: rgba(17, 31, 46, 0.7);
}
.mailbox-item.unread {
  border-color: #6ec5ff;
  box-shadow: inset 0 0 0 1px rgba(110, 197, 255, 0.35);
}
.mailbox-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  color: #9fc2d8;
}
.mailbox-item-title {
  color: #f2fbff;
  font-weight: 700;
}
.mailbox-item-body {
  color: #dbeaf5;
  font-size: 0.8rem;
  line-height: 1.5;
}
.mailbox-item-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.mailbox-item-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(13, 25, 37, 0.75);
  border: 1px solid rgba(110, 197, 255, 0.35);
  overflow: hidden;
}
.mailbox-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mailbox-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.mailbox-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.mailbox-item-actions button {
  padding: 0.45rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mailbox-empty {
  padding: 1rem;
  border: 1px dashed #526b80;
  border-radius: 8px;
  color: #9bafc4;
  text-align: center;
  font-size: 0.8rem;
}

.shop-ui {
  --shop-item-row-height: 190px;
  --shop-grid-gap: 0.65rem;
  --shop-fixed-width: 860px;
  --shop-fixed-height: 550px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  display: flex;
  align-items: stretch;
  width: var(--shop-fixed-width);
  height: var(--shop-fixed-height);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 6rem);
  overflow: hidden;
  padding: 0;
  background: linear-gradient(145deg, rgba(25, 36, 51, 0.97), rgba(8, 15, 24, 0.97));
  border: 1px solid #4e7391;
  border-radius: 14px;
  box-shadow: 0 0 22px rgba(31, 186, 255, 0.16), inset 0 0 18px rgba(45, 119, 170, 0.12);
}
.shop-sidebar {
  display: flex;
  flex-direction: column;
  width: 132px;
  padding: 0.7rem 0.5rem 0.7rem 0.6rem;
  border-right: 1px solid rgba(92, 124, 150, 0.6);
  background: rgba(12, 20, 29, 0.9);
}
.shop-tab {
  width: 100%;
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(92, 124, 150, 0.7);
  border-radius: 8px 0 0 8px;
  background: rgba(23, 34, 45, 0.9);
  color: #dfeef7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.shop-tab.active {
  background: linear-gradient(180deg, rgba(27, 79, 63, 0.95), rgba(18, 51, 39, 0.98));
  border-color: #3fe07d;
  box-shadow: inset 0 0 12px rgba(95, 255, 165, 0.18);
  color: #ebfff3;
}
.auction-subtabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.auction-subtab {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(92, 124, 150, 0.7);
  border-radius: 6px;
  background: rgba(23, 34, 45, 0.9);
  color: #dfeef7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.auction-subtab.active {
  background: linear-gradient(180deg, rgba(27, 79, 63, 0.95), rgba(18, 51, 39, 0.98));
  border-color: #3fe07d;
  box-shadow: inset 0 0 10px rgba(95, 255, 165, 0.15);
  color: #ebfff3;
}
.shop-content {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem 1rem;
}
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  color: #bcecff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.shop-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.shop-header h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-player-gold, .shop-player-cash {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.shop-player-gold {
  color: #ffe45c;
}
.shop-player-cash {
  color: #9ad7ff;
}
.shop-player-gold img, .shop-player-cash img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.shop-player-gold b, .shop-player-cash b {
  font-weight: 700;
}
.shop-player-gold b { color: #ffe45c; }
.shop-player-cash b { color: #9ad7ff; }
.shop-item-description {
  margin: 0.2rem 0 0;
  color: #a9bac8;
  font-size: 0.72rem;
}
.shop-header button {
  padding: 0.12rem 0.45rem;
  background: transparent;
  color: #ff9b9b;
  font-size: 1.25rem;
  line-height: 1;
}
.shop-catalog {
  display: block;
  height: calc(var(--shop-fixed-height) - 76px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.2rem;
}
.shop-table {
  border: 1px solid #425d7d;
  border-radius: 10px;
  background: rgba(11, 18, 27, 0.7);
  overflow: hidden;
}
.shop-table h3 {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #425d7d;
  background: rgba(24, 38, 52, 0.95);
  color: #dfeef7;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-table-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--shop-grid-gap);
  padding: 0.65rem;
  align-items: stretch;
}
.shop-item-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.55rem;
  border: 1px solid rgba(92, 124, 150, 0.45);
  border-radius: 8px;
  background: rgba(18, 28, 38, 0.8);
  min-height: var(--shop-item-row-height);
}
.auction-item {
  min-height: 200px;
}
.shop-item-subtext {
  color: #aac5d8;
  font-size: 0.72rem;
  line-height: 1.4;
}
.shop-item-bid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #7fff7f;
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(92, 124, 150, 0.4);
}
.auction-bid-value {
  color: #00ff00;
  font-size: 1.2rem;
  font-weight: 700;
}
.auction-bid-count {
  color: #00ff00;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auction-bid-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.auction-bid-form label {
  color: #bcecff;
  font-weight: 700;
  font-size: 0.9rem;
}
.auction-bid-input-field {
  padding: 0.6rem 0.8rem;
  border: 1px solid #4e7391;
  border-radius: 6px;
  background: rgba(11, 18, 27, 0.9);
  color: #ebfff3;
  font-size: 1rem;
  font-weight: 700;
}
.auction-bid-input-field:focus {
  outline: none;
  border-color: #6ec5ff;
  box-shadow: 0 0 8px rgba(110, 197, 255, 0.35);
}
.auction-bid-error {
  color: #ff9b9b;
  font-size: 0.75rem;
  font-weight: 700;
}
.auction-search-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  position: relative;
}
.auction-search-input {
  flex: 0 0 220px;
  width: 220px;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid #4e7391;
  border-radius: 8px;
  background: rgba(10, 17, 25, 0.9);
  color: #ecf8ff;
  font-size: 0.8rem;
  font-weight: 700;
}
.auction-search-input:focus {
  outline: none;
  border-color: #6ec5ff;
  box-shadow: 0 0 8px rgba(110, 197, 255, 0.35);
}
.auction-search-button {
  width: auto !important;
  min-width: 58px;
  max-width: 90px;
  height: 38px;
  padding: 0.2rem 0.55rem;
  margin-top: 0;
  font-size: 0.65rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auction-filter-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.auction-filter-toggle {
  width: 38px !important;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.auction-filter-icon {
  display: inline-block;
  transform: translateY(-1px);
}
.auction-filter-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 170px;
  padding: 0.65rem 0.65rem 0.5rem;
  border: 1px solid rgba(110, 197, 255, 0.5);
  border-radius: 9px;
  background: rgba(12, 18, 26, 0.98);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  z-index: 30;
}
.auction-filter-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(12, 18, 26, 0.98);
  border-left: 1px solid rgba(110, 197, 255, 0.5);
  border-top: 1px solid rgba(110, 197, 255, 0.5);
  transform: translateX(-50%) rotate(45deg);
}

.auction-filter-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #ebf5ff;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.auction-filter-option input {
  accent-color: #6ec5ff;
}
.auction-filter-apply,
.auction-filter-clear {
  height: 30px;
  font-size: 0.68rem;
  padding: 0.3rem 0.7rem;
}
.auction-filter-clear {
  background: rgba(78, 115, 145, 0.25);
  border-color: #4e7391;
}
.auction-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(92, 124, 150, 0.35);
}
.auction-pagination-button {
  min-width: 38px;
  height: 32px;
  padding: 0 0.8rem;
  border: 1px solid #4e7391;
  border-radius: 8px;
  background: rgba(10, 17, 25, 0.9);
  color: #dff6ff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.auction-pagination-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.auction-pagination-label {
  min-width: 28px;
  text-align: center;
  color: #f1fbff;
  font-size: 0.95rem;
  font-weight: 800;
}
.shop-item-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(18, 35, 50, 0.9);
  border: 1px solid #567696;
  box-sizing: border-box;
}
.shop-item-icon.rarity-incomum { border: 3px solid #53f08d; box-shadow: 0 0 14px rgb(83 240 141 / 90%), 0 0 18px rgb(83 240 141 / 50%); }
.shop-item-icon.rarity-raro { border: 3px solid #6ab4ff; box-shadow: 0 0 14px rgb(106 180 255 / 90%), 0 0 18px rgb(106 180 255 / 50%); }
.shop-item-icon.rarity-epico { border: 3px solid #ff84c4; box-shadow: 0 0 14px rgb(255 132 196 / 90%), 0 0 18px rgb(255 132 196 / 50%); }
.shop-item-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.auction-item-you-bid {
  border-color: #55d982 !important;
  box-shadow: 0 0 14px rgb(85 217 130 / 38%);
  background: rgba(20, 64, 38, 0.4) !important;
}
.auction-item-you-bid .shop-item-icon {
  box-shadow: 0 0 0 2px rgb(85 217 130 / 32%), 0 0 12px rgb(85 217 130 / 38%), 0 0 18px rgb(85 217 130 / 18%);
}
.shop-item-meta {
  min-width: 0;
  width: 100%;
  text-align: center;
}
.shop-item-name {
  margin: 0 0 0.2rem;
  color: #f0f7fb;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}
.shop-item-desc {
  margin: 0;
  color: #9eb3c5;
  font-size: 0.7rem;
  line-height: 1.3;
}
.shop-item-buy-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(92, 124, 150, 0.4);
}
.shop-quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.shop-auto-buy-option {
  min-height: 24px;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(92, 124, 150, 0.45);
  border-radius: 5px;
  background: rgba(10, 17, 25, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  color: #c5d5df;
  font-size: 0.62rem;
  cursor: pointer;
}
.shop-auto-buy-option .shop-auto-buy-checkbox {
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  opacity: 1;
  visibility: visible;
  accent-color: #3fe07d;
}
.shop-auto-buy-option input:disabled {
  cursor: not-allowed;
}
.shop-auto-buy-vip-badge {
  color: #80909b;
  font-size: 0.55rem;
}
.shop-quantity-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #5c7d96;
  border-radius: 6px;
  background: rgba(12, 20, 29, 0.9);
  color: #dfeef7;
  font-size: 0.9rem;
  line-height: 1;
}
.shop-quantity-input {
  width: 50px;
  height: 30px;
  border: 1px solid #5c7d96;
  border-radius: 6px;
  background: rgba(10, 17, 25, 0.9);
  color: #ffe45c;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.shop-quantity-input::-webkit-outer-spin-button,
.shop-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.shop-item-total {
  text-align: center;
  color: #ffe45c;
  font-size: 0.75rem;
  font-weight: 700;
}
.shop-buy-button {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1px solid #d9a64f;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(118, 76, 26, 0.95), rgba(73, 48, 15, 0.98));
  color: #ffe9b8;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: auto;
}
.shop-buy-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.orb-evolution-ui, .profession-ui { position: fixed; z-index: 102; top: 50%; left: 50%; display: flex; align-items: stretch; width: min(520px, calc(100vw - 2rem)); height: min(420px, calc(100vh - 6rem)); padding: 0; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); transform: translate(-50%, -50%); overflow: hidden; }
.orb-evolution-sidebar, .profession-sidebar { display: flex; flex-direction: column; gap: .4rem; width: 118px; padding: .8rem .5rem .8rem .6rem; border-right: 1px solid rgba(92, 124, 150, 0.6); background: rgba(12, 20, 29, 0.9); }
.orb-evolution-tab, .profession-tab { width: 100%; padding: .65rem .4rem; border: 1px solid rgba(92, 124, 150, 0.7); border-radius: 8px 0 0 8px; background: rgba(23, 34, 45, 0.9); color: #dfeef7; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; cursor: pointer; }
.orb-evolution-tab.active, .profession-tab.active { background: linear-gradient(180deg, rgba(27, 79, 63, 0.95), rgba(18, 51, 39, 0.98)); border-color: #3fe07d; box-shadow: inset 0 0 12px rgba(95, 255, 165, 0.18); color: #ebfff3; }
.orb-evolution-content, .profession-content { flex: 1; min-width: 0; padding: .85rem 1rem 1rem; overflow-y: auto; }
.orb-evolution-pane, .profession-pane { display: none; }
.orb-evolution-pane.active, .profession-pane.active { display: block; }
.orb-fusion-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .5rem 0; }
.orb-fusion-slot { display: grid; place-items: center; width: 50px; height: 50px; border: 1px dotted #526b80; border-radius: 5px; background: rgb(12 20 29 / 55%); color: #94aabd; font-size: .55rem; text-align: center; cursor: default; }
.orb-fusion-slot.drag-over { border-color: #55f47b; background: #246b3c; box-shadow: 0 0 16px rgb(85 244 123 / 45%); }
.orb-fusion-slot.filled { border-style: solid; border-color: #6fd3ff; }
.orb-fusion-slot.invalid { border-color: #ff8f8f; background: rgb(90 26 26 / 55%); box-shadow: inset 0 0 10px rgb(255 90 90 / 25%); }
.orb-fusion-slot.valid { border-color: #3fe07d; background: rgb(24 74 46 / 65%); box-shadow: inset 0 0 10px rgb(63 224 125 / 25%); }
.orb-fusion-slot img { width: 46px; height: 46px; object-fit: contain; }
.orb-fusion-result { display: grid; place-items: center; gap: .15rem; width: 64px; height: 64px; margin: .4rem auto; border: 1px solid #c99a45; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgb(107 74 32 / 65%), rgb(12 20 29 / 85%)); box-shadow: 0 0 18px rgb(201 154 69 / 35%); color: #ffe5a3; font-size: .55rem; text-align: center; }
.orb-fusion-result img { width: 56px; height: 56px; object-fit: contain; }
.orb-fusion-result.ready { border-color: #3fe07d; box-shadow: 0 0 22px rgb(63 224 125 / 55%); }
.orb-fusion-available { display: none; }
.orb-evolution-ui.dragging, .profession-ui.dragging { opacity: .92; } .orb-evolution-header, .profession-header { display: flex; align-items: center; justify-content: space-between; color: #bcecff; cursor: grab; user-select: none; touch-action: none; } .orb-evolution-header h2, .profession-header h2 { margin: 0; font-size: 1rem; } .orb-evolution-header button, .profession-header button { padding: .1rem .4rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; }
.orb-evolution-help, .orb-evolution-info, .orb-evolution-fragments { color: #dcecf3; font-size: .75rem; text-align: center; } .orb-evolution-help { margin: .6rem 0; }

.profession-exp-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.7rem;
}

.profession-exp-bar {
  position: relative;
  flex: 1;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 168, 181, 0.7);
  border-radius: 999px;
  background: rgba(88, 103, 116, 0.45);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.28);
}

.profession-exp-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb85f 0%, #ff8f2b 48%, #ff6d00 100%);
  box-shadow: 0 0 12px rgba(255, 145, 55, 0.45);
}

.profession-level-badge {
  min-width: 54px;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(255, 170, 83, 0.8);
  border-radius: 999px;
  background: rgba(82, 44, 14, 0.5);
  color: #ffd8a5;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.orb-evolution-slot { display: grid; place-items: center; width: 54px; height: 54px; margin: .5rem auto; border: 1px dotted #526b80; border-radius: 5px; background: rgb(12 20 29 / 55%); color: #94aabd; font-size: .6rem; text-align: center; }
.orb-evolution-slot.drag-over { border-color: #55f47b; background: #246b3c; box-shadow: 0 0 16px rgb(85 244 123 / 45%); }
.orb-evolution-slot img { width: 50px; height: 50px; object-fit: contain; } .orb-evolution-fragments { margin: .5rem 0; color: #ffe45c; font-weight: 700; }
.orb-evolution-available { display: none; }
#orb-evolution-confirm, #orb-fusion-confirm { display: block; width: auto; min-width: 150px; margin: .55rem auto 0; padding: .45rem .8rem; background: #6b4a20; border: 1px solid #c99a45; color: #ffe5a3; }
#orb-fusion-confirm:disabled { opacity: .55; cursor: not-allowed; }
.profession-maintenance { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 1rem; color: #dcecf3; text-align: center; }
.profession-maintenance span { display: block; margin-bottom: .35rem; font-size: 1.05rem; font-weight: 700; color: #bcecff; }
.profession-maintenance p { margin: 0; color: #94aabd; font-size: .8rem; }
.equipment-toggle, .minimap-toggle { border: 1px solid #4e7391; background: #122234; color: #bcecff; box-shadow: 0 0 16px rgb(31 186 255 / 28%); }
.brain-toggle:hover, .orb-evolution-toggle:hover, .equipment-toggle:hover, .minimap-toggle:hover, .profession-toggle:hover, .friends-toggle:hover, .admin-players-toggle:hover { background: #1d4058; }
.tutorial-overlay { position: fixed; inset: 0; pointer-events: none; }
.tutorial-overlay::before { content: ''; position: fixed; inset: 0; z-index: 8; background: rgb(0 0 0 / 68%); }
.tutorial-message { position: fixed; right: 0.8rem; bottom: 9.2rem; z-index: 1000; width: min(300px, calc(100vw - 2rem)); padding: 0.9rem 1rem; color: #ffffff; background: rgb(9 17 27 / 96%); border: 1px solid #65d98a; border-radius: 10px; box-shadow: 0 0 22px rgb(85 217 130 / 32%); font-size: 0.95rem; text-align: center; pointer-events: none; }
.tutorial-arrow { position: fixed; right: 3.7rem; bottom: 4.4rem; z-index: 1000; color: #65ff8e; font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 12px #65ff8e); transform: rotate(25deg); pointer-events: none; animation: tutorial-arrow-pulse 850ms ease-in-out infinite; }
@keyframes tutorial-arrow-pulse { 0%, 100% { opacity: 0.35; transform: var(--tutorial-base-transform, rotate(25deg)) scale(0.9); } 50% { opacity: 1; transform: var(--tutorial-base-transform, rotate(25deg)) scale(1.15); } }
.tutorial-drag-orb { position: fixed; z-index: 1000 !important; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; filter: drop-shadow(0 0 12px rgb(255 228 92 / 85%)); pointer-events: none; }
.tutorial-drag-orb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tutorial-drag-orb.is-animating { animation: tutorial-drag-orb-path 2200ms ease-in-out infinite; }
@keyframes tutorial-drag-orb-path { 0%, 100% { left: var(--from-x); top: var(--from-y); opacity: 0.45; } 52% { left: var(--to-x); top: var(--to-y); opacity: 1; } }
.brain-ui.tutorial-focus { z-index: 11; }
.brain-toggle.tutorial-focus { z-index: 12; }
.orb-evolution-toggle.tutorial-focus { z-index: 12; outline: 3px solid #65ff8e; box-shadow: 0 0 24px rgb(101 255 142 / 85%); }
#orb-inventory-panel.tutorial-focus { border-color: #65ff8e; box-shadow: 0 0 18px rgb(101 255 142 / 65%); }
.orb-evolution-slot.tutorial-focus { border-color: #65ff8e; box-shadow: 0 0 20px rgb(101 255 142 / 85%); }
.orb-evolution-ui.tutorial-focus { border-color: #65ff8e; }
#orb-evolution-confirm.tutorial-focus { outline: 3px solid #65ff8e; box-shadow: 0 0 24px rgb(101 255 142 / 85%); }
#drop-inventory-panel.tutorial-fusion-focus, #orb-inventory-panel.tutorial-fusion-focus,
.equipment-ui.tutorial-fusion-focus, .brain-ui.tutorial-fusion-focus,
.orb-evolution-ui.tutorial-fusion-focus,
.orb-fusion-slots.tutorial-fusion-focus, .orb-evolution-tab.tutorial-fusion-focus,
.orb-evolution-toggle.tutorial-fusion-focus, #orb-fusion-confirm.tutorial-fusion-focus {
  z-index: 11;
  outline: 3px solid #65ff8e;
  box-shadow: 0 0 22px rgb(101 255 142 / 75%);
}
.orb-evolution-toggle.tutorial-fusion-focus, .orb-evolution-tab.tutorial-fusion-focus { z-index: 12; }
.equipment-ui.tutorial-bow-focus, #drop-inventory-panel.tutorial-bow-focus,
#item-inventory-panel.tutorial-bow-focus, .equipment-slot.tutorial-bow-focus,
.equipment-toggle.tutorial-bow-focus {
  z-index: 12;
  outline: 3px solid #65ff8e;
  box-shadow: 0 0 22px rgb(101 255 142 / 75%);
}
.brain-ui { top: 1rem; width: 460px; overflow: hidden; }
.brain-header { cursor: grab; user-select: none; touch-action: none; }
.brain-close { padding: 0.15rem 0.45rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; line-height: 1; }
.brain-close:hover { background: #562c38; color: #ffffff; }
.brain-minimize { width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid #4f7180; border-radius: 3px; background: #162e39; color: #dcecf3; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; margin-right: 0.3rem; }
.brain-minimize:hover { background: #245165; }
.brain-ui.dragging { opacity: 0.92; box-shadow: 0 0 30px rgb(85 217 130 / 30%), inset 0 0 18px rgb(45 119 170 / 12%); }
.brain-ui.dragging, .brain-ui.dragging * { user-select: none !important; }
.brain-header { display: flex; align-items: center; margin-bottom: 0.5rem; }
.brain-ui h2, .inventory-panel h2 { margin: 0; color: #bcecff; font-size: 1rem; letter-spacing: 0.08em; text-align: center; }
.brain-status { font-size: 0.62rem; letter-spacing: 0.08em; }
.brain-status.online { color: #54e39a; }
.brain-status.offline { color: #ff7f8a; }
.brain-header small { color: #94aabd; font-size: 0.7rem; }
.brain-ui h2, .inventory-panel h2, .equipment-header h2 { /* Aplica a todos os títulos de inventário */
  margin: 0;
  color: #bcecff;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-align: left; /* Alinha o texto do título à esquerda */
}
.brain-ui h2 .inventory-count, h2 .inventory-count { margin-right: .5rem; color: #94aabd; font-size: .8rem; font-weight: normal; }
.inventory-header { display: flex; align-items: center; justify-content: space-between; /* Distribui o título e botões */ gap: .5rem; margin-bottom: .4rem; }
.inventory-header-button { padding: .2rem .4rem; border: 1px solid #4f7180; border-radius: 5px; background: #162e39; color: #dcecf3; font-size: .8rem; line-height: 1; }
.inventory-header-button:hover { background: #245165; }

.mlp-diagram { position: relative; width: 560px; height: 320px; margin-left: -40px; margin-bottom: -45px; transform: scale(0.78); transform-origin: top left; overflow: visible; background: radial-gradient(circle at center, rgb(39 112 153 / 18%), transparent 58%); }
.connection-map { position: absolute; left: 0; top: 0; width: 560px; height: 300px; z-index: 0; overflow: visible; pointer-events: none; }
.connection line { fill: none; stroke-width: 1.2; }
.connection.black line { stroke: #05070a; }
.connection-map .connection:not(.organized-network) line { display: none; }
.connection.yellow line { stroke: #f4d33e; stroke-width: 2.2; filter: drop-shadow(0 0 3px #f4d33e); }

.layer-label { position: absolute; z-index: 3; color: #d8e9f3; font-size: 0.68rem; text-align: center; white-space: nowrap; }
.input-label { top: 0; left: 20px; width: 100px; }
.hidden-label { top: 0; left: 190px; width: 185px; }
.output-label { top: 0; left: 455px; width: 90px; }

.network-node { position: absolute; z-index: 2; width: 32px; height: 32px; border: 3px solid #252b30; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8eef1, #777f86); box-shadow: 0 2px 5px rgb(0 0 0 / 75%), inset 0 0 4px rgb(255 255 255 / 50%); }
.hidden-node { background: radial-gradient(circle at 35% 30%, #ff756b, #a9272b); border-color: #4b181b; }
.second-hidden-1, .second-hidden-2, .second-hidden-3, .second-hidden-4 { display: none; }
.node-input-2 { display: none; }
.connection-map .neural-route line[x1="355"],
.connection-map .neural-route line[x2="355"] { display: none; }
.passive-slot { display: grid; place-items: center; width: 64px; height: 64px; margin-left: -16px; margin-top: -16px; border-color: #8d252c; background: radial-gradient(circle at 35% 30%, #ff756b, #a9272b); cursor: grab; font-size: .55rem; }
.passive-slot:not(.filled)::after { content: '+'; color: #ffcbc7; font-size: 1.8rem; line-height: 1; font-weight: 700; text-shadow: 0 0 7px #8d252c; }
.output-slot:not(.filled)::after { content: '+'; color: #baffce; font-size: 1.8rem; font-weight: 700; line-height: 1; text-shadow: 0 0 7px #39d978; }
.output-slot:not(.filled) .slot-number { display: none; }
.passive-slot.filled { border-color: #ff4e57; box-shadow: 0 0 14px rgb(255 55 65 / 70%); }
.passive-slot.drag-over { border-color: #ffffff; box-shadow: 0 0 22px rgb(85 244 123 / 90%); transform: scale(1.12); }
.output-node { left: 486px; top: 116px; }
.output-slot { left: 468px; width: 64px; height: 64px; border-color: #198846; background: radial-gradient(circle at 35% 30%, #caffda, #219653); box-shadow: 0 0 10px rgb(42 220 105 / 35%); cursor: default; }
.output-slot-1 { top: 0; }
.output-slot-2 { top: 64px; }
.output-slot-3 { top: 128px; }
.output-slot-4 { top: 192px; }
.output-slot-5 { top: 256px; }
.node-input-1 { left: 54px; top: 116px; }
.node-input-2 { left: 54px; top: 204px; }
.node-hidden-1 { left: 189px; top: 46px; }
.node-hidden-2 { left: 189px; top: 111px; }
.node-hidden-3 { left: 189px; top: 176px; }
.node-hidden-4 { left: 189px; top: 241px; }
.second-hidden-1 { left: 339px; top: 19px; }
.second-hidden-2 { left: 339px; top: 84px; }
.second-hidden-3 { left: 339px; top: 149px; }
.second-hidden-4 { left: 339px; top: 214px; }

.brain-slot { position: absolute; display: grid; place-items: center; padding: 1px; color: #fff; font-size: 0.42rem; text-align: center; cursor: default; overflow: hidden; }
.brain-slot[draggable="true"] { cursor: grab; }
.brain-slot.filled { border-color: #45f28a; box-shadow: 0 0 12px rgb(69 242 138 / 70%); }
.brain-slot.selected-drop { border-color: #55f47b; box-shadow: 0 0 16px rgb(85 244 123 / 80%); }
.brain-slot.drag-over { border-color: #ffffff; background: #246b3c; box-shadow: 0 0 22px rgb(74 208 125 / 90%); transform: scale(1.12); }

/* Preset Modal - positioned next to brain UI, draggable, no backdrop blocking */
.preset-modal { position: fixed; z-index: 100; top: 1rem; left: 1rem; background: transparent; display: block; }
.preset-modal-card { width: 320px; max-height: 80vh; overflow-y: auto; background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); border: 1px solid #4e7391; border-radius: 12px; box-shadow: 0 12px 35px rgb(0 0 0 / 60%), 0 0 0 1px rgb(85 217 130 / 10%), inset 0 1px 0 rgb(255 255 255 / 5%); padding: 1rem; }
.preset-modal-card.dragging { opacity: 0.95; box-shadow: 0 16px 45px rgb(85 217 130 / 35%), 0 0 0 1px rgb(85 217 130 / 20%), inset 0 1px 0 rgb(255 255 255 / 8%); }
.preset-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #3b4e62; cursor: grab; }
.preset-modal-header:active { cursor: grabbing; }
.preset-modal-header h2 { margin: 0; color: #bcecff; font-size: 1rem; font-weight: 600; text-shadow: 0 0 10px rgb(85 217 130 / 30%); }
.preset-modal-header button { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: #ff9b9b; font-size: 1.4rem; line-height: 1; cursor: pointer; border: 1px solid transparent; border-radius: 6px; transition: all 0.15s ease; }
.preset-modal-header button:hover { background: #562c38; color: #ffffff; border-color: #7d2020; transform: scale(1.1); }

.preset-form { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.preset-form label { color: #94aabd; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.preset-form input { padding: 0.5rem 0.7rem; border: 1px solid #526b80; border-radius: 6px; background: #0d1621; color: #f5f7fa; font-size: 0.85rem; outline: none; transition: all 0.15s ease; }
.preset-form input:focus { border-color: #55d982; box-shadow: 0 0 0 3px rgb(85 217 130 / 20%), inset 0 0 10px rgb(85 217 130 / 5%); }
.preset-form input::placeholder { color: #5a7a94; }
.preset-save-btn { padding: 0.55rem; border: 1px solid #4cae68; border-radius: 6px; background: linear-gradient(180deg, #4cae68, #3d9658); color: white; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-shadow: 0 1px 2px rgb(0 0 0 / 30%); }
.preset-save-btn:hover:not(:disabled) { background: linear-gradient(180deg, #61c77d, #4cae68); box-shadow: 0 4px 15px rgb(76 174 104 / 40%); transform: translateY(-1px); }
.preset-save-btn:active:not(:disabled) { transform: translateY(0); }
.preset-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.preset-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 350px; overflow-y: auto; padding-right: 0.25rem; }
.preset-list::-webkit-scrollbar { width: 6px; }
.preset-list::-webkit-scrollbar-track { background: #0d1621; border-radius: 3px; }
.preset-list::-webkit-scrollbar-thumb { background: #3b4e62; border-radius: 3px; }
.preset-list::-webkit-scrollbar-thumb:hover { background: #4e7391; }
.preset-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid #4f7180; border-radius: 8px; background: linear-gradient(180deg, #162e39, #102230); cursor: pointer; transition: all 0.15s ease; position: relative; overflow: hidden; }
.preset-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.15s ease; }
.preset-item:hover { border-color: #55d982; background: linear-gradient(180deg, #1a5c42, #144a35); transform: translateX(2px); }
.preset-item:hover::before { background: #55d982; }
.preset-item-name { flex: 1; color: #e8f4fa; font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgb(0 0 0 / 40%); }
.preset-item-delete { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #7d2020; border-radius: 6px; background: linear-gradient(180deg, #7d2020, #6b1a1a); color: #ffe0e0; font-size: 0.9rem; line-height: 1; cursor: pointer; flex-shrink: 0; transition: all 0.15s ease; }
.preset-item-delete:hover { background: linear-gradient(180deg, #a62828, #8b1f1f); border-color: #ff5f5f; color: #fff; transform: scale(1.05); box-shadow: 0 2px 8px rgb(166 40 40 / 40%); }

.preset-limit-info { margin: 0.75rem 0 0; color: #94aabd; font-size: 0.65rem; text-align: center; font-style: italic; }

/* Preset Delete Confirmation Modal */
.preset-delete-modal { position: fixed; z-index: 200; inset: 0; background: rgb(0 0 0 / 70%); display: grid; place-items: center; animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.preset-delete-card { width: min(340px, 90vw); background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); border: 1px solid #4e7391; border-radius: 12px; box-shadow: 0 16px 45px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 105 145 / 15%), inset 0 1px 0 rgb(255 255 255 / 5%); padding: 1.25rem; animation: presetModalIn 0.2s ease-out; }
.preset-delete-card h2 { margin: 0 0 0.75rem; color: #ff9b9b; font-size: 1.1rem; font-weight: 600; text-align: center; }
.preset-delete-card p { margin: 0 0 1.25rem; color: #dcecf3; font-size: 0.85rem; line-height: 1.5; text-align: center; }
.preset-delete-card strong { color: #ffd6d6; }
.preset-delete-actions { display: flex; gap: 0.5rem; justify-content: center; }
.preset-delete-btn { padding: 0.55rem 1.25rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; min-width: 100px; }
.preset-delete-cancel { background: linear-gradient(180deg, #4a5d6e, #3b4e62); color: #dcecf3; border: 1px solid #526b80; }
.preset-delete-cancel:hover { background: linear-gradient(180deg, #5a7084, #4a5d6e); transform: translateY(-1px); box-shadow: 0 4px 12px rgb(0 0 0 / 30%); }
.preset-delete-confirm { background: linear-gradient(180deg, #a62828, #8b1f1f); color: #fff; border: 1px solid #7d2020; }
.preset-delete-confirm:hover { background: linear-gradient(180deg, #c03030, #a62828); transform: translateY(-1px); box-shadow: 0 4px 15px rgb(166 40 40 / 50%); }
.preset-delete-btn:active { transform: translateY(0); }

.brain-slot .orb-icon { color: #ffe45c; font-size: 0.65rem; line-height: 0.55rem; }
.brain-slot .orb-icon-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; opacity: .95; z-index: 0; filter: drop-shadow(0 0 5px rgb(117 215 255 / 85%)); }
.passive-slot .orb-icon-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; opacity: .95; z-index: 0; filter: drop-shadow(0 0 5px rgb(255 105 145 / 85%)); }
.brain-slot .slot-number { color: #d3dce2; font-size: 0.4rem; }
.brain-slot small { display: block; color: #d9f6df; font-size: 0.34rem; line-height: 0.45rem; }
.neural-route line { stroke: transparent; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.passive-link-connected { stroke: #e34b4b; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px #b92e2e); pointer-events: none; }
.passive-link-connected.passive-link-active { stroke: #4dff70; stroke-width: 5; filter: drop-shadow(0 0 7px #39ff61); }
.mlp-diagram.route-slot-1-active .route-slot-1 line,
.mlp-diagram.route-slot-2-active .route-slot-2 line,
.mlp-diagram.route-slot-3-active .route-slot-3 line,
.mlp-diagram.route-slot-4-active .route-slot-4 line,
.mlp-diagram.route-slot-5-active .route-slot-5 line { stroke: #4dff70; filter: drop-shadow(0 0 6px #39ff61); }
.neural-route.route-active line { stroke: #4dff70; filter: drop-shadow(0 0 6px #39ff61); }
.output-slot.combat-active { background: radial-gradient(circle at 35% 30%, #dffff0, #24d957); border-color: #effff1; box-shadow: 0 0 26px 9px #23ff53; }

.brain-legend { margin-top: 0.45rem; color: #9fb2bf; font-size: 0.65rem; text-align: center; }
.legend-yellow, .legend-black { display: inline-block; width: 18px; height: 3px; margin: 0 3px 2px 8px; background: #f4d33e; }
.legend-black { background: #05070a; }

.inventory-panel { position: static; width: auto; min-height: 105px; margin-top: 0.4rem; padding: 0.55rem 0.75rem 0.7rem; box-shadow: none; transition: border-color 150ms, box-shadow 150ms; }
.equipment-main-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(250px, 1fr); gap: 0.7rem; align-items: start; }
.equipment-left-column { display: flex; flex-direction: column; gap: 0.5rem; }
#drop-inventory-panel { margin-top: -0.15rem; }
.equipment-ui { position: fixed; left: 1rem; right: auto; top: 1rem; bottom: auto; z-index: 6; width: 600px; max-width: calc(100vw - 2rem); height: fit-content; box-sizing: border-box; padding: .5rem .7rem .6rem; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); border: 1px solid #4e7391; border-radius: 14px; box-shadow: 0 0 22px rgb(31 186 255 / 16%), inset 0 0 18px rgb(45 119 170 / 12%); }
.equipment-ui.dragging { opacity: .96; box-shadow: 0 0 30px rgb(85 217 130 / 30%), inset 0 0 18px rgb(45 119 170 / 12%); }
.equipment-ui.minimized { width: 250px; }
.minimap-ui { position: fixed; left: 50%; top: 50%; z-index: 100; width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: .9rem; box-sizing: border-box; transform: translate(-50%, -50%); background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); border: 1px solid #57a3b8; border-radius: 14px; box-shadow: 0 0 30px rgb(0 0 0 / 72%), 0 0 20px rgb(74 201 237 / 20%); }
.minimap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; cursor: grab; user-select: none; touch-action: none; }
.minimap-header h2 { margin: 0; color: #bdeeff; font-size: 1rem; }
.minimap-header button { padding: .1rem .4rem; color: #ff9b9b; background: transparent; font-size: 1.2rem; }
.minimap-ui img { display: block; width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border: 1px solid #426b7c; border-radius: 8px; }
.minimap-map { position: relative; }
.minimap-map img { position: relative; z-index: 0; }
#minimap-points { position: absolute; inset: 0; z-index: 1; }
.minimap-point { position: absolute; display: grid; justify-items: center; padding: 0; border: 0; background: transparent; color: #fff1a8; transform: translate(-50%, -50%); text-shadow: 0 1px 3px #000; }
.minimap-point, .minimap-point img { user-select: none; -webkit-user-drag: none; }
.minimap-point span { grid-row: 2; font-size: 1.55rem; line-height: 1; color: #ffdc58; filter: drop-shadow(0 0 5px #8d5900); }
.minimap-point img { grid-row: 2; width: 42px; height: 42px; object-fit: contain; border: 0; border-radius: 0; background: transparent; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #000); transition: transform 140ms ease; }
.minimap-point small { grid-row: 1; min-width: max-content; margin-bottom: 2px; padding: 2px 4px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 4px; background: rgb(6 12 18 / 82%); color: #fff; font-size: .6rem; font-weight: 700; line-height: 1.15; text-align: center; }
.minimap-point small span { display: block; color: #ff3434; font-size: .6rem; filter: none; }
.minimap-point:hover:not(:disabled) { background: transparent !important; }
.minimap-point:hover small { background: rgb(30 138 77 / 88%); border-color: #6eed9d; }
.minimap-point:hover img { transform: scale(1.12); }
.minimap-ui.dragging, .area-info-ui.dragging { opacity: .92; }
.area-info-ui { position: fixed; z-index: 101; top: 50%; left: 50%; width: min(92vw, 620px); max-height: min(78vh, 650px); overflow: auto; padding: 1rem; border: 1px solid #4d7181; border-radius: 10px; background: #10202a; box-shadow: 0 12px 32px rgb(0 0 0 / 55%); transform: translate(-50%, -50%); }
.area-info-ui.compact { width: min(92vw, 380px); }
.area-info-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 1.7rem; margin-bottom: .8rem; cursor: grab; user-select: none; touch-action: none; } .area-info-header h2 { width: 100%; margin: 0; color: #bdeeff; font-size: 1.1rem; text-align: center; } .area-info-header button { position: absolute; right: 0; top: 50%; padding: .1rem .4rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; transform: translateY(-50%); }
.area-enemy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.area-info-ui.compact .area-enemy-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); justify-items: center; justify-content: center; }
.area-info-ui.compact .area-enemy-card { max-width: 200px; width: 100%; } .area-enemy-card { margin: 0; padding: .6rem; border: 1px solid #355262; border-radius: 7px; background: rgb(5 15 21 / 70%); } .area-enemy-top { display: grid; justify-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: #fff; text-align: center; } .area-enemy-sprite { width: 42px; height: 42px; background-repeat: no-repeat; background-position: left top; background-size: 400% 400%; image-rendering: pixelated; } .area-enemy-sprite.slime-sprite { background-size: 800% 400%; } .area-enemy-sprite.balrog-sprite { background-size: 1000% 400%; } .area-enemy-stats { margin-top: .35rem; color: #ffb1b1; font-size: .78rem; text-align: center; }
.area-drop-title { margin: .6rem 0 .25rem; color: #bdeeff; font-size: .78rem; font-weight: 700; } .area-drops { display: flex; flex-wrap: wrap; gap: .3rem; } .area-drop { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .35rem; border: 1px solid transparent; border-radius: 4px; background: #1d3541; color: #dcecf3; font: inherit; font-size: .7rem; cursor: help; } .area-drop:hover, .area-drop:focus-visible { border-color: #65d98a; background: #274957; outline: none; } .area-drop img { width: 18px; height: 18px; object-fit: contain; }
.area-teleport-actions { display: flex; gap: .6rem; justify-content: center; margin-top: .6rem; }
.area-teleport-actions button { flex: 1; padding: .35rem .7rem; font-size: .8rem; }
.area-enemy-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem; margin-top: .35rem; font-size: .78rem; text-align: center; }
.area-enemy-stats span { color: #dcecf3; }
.area-enemy-stats span:first-child { color: #ffb1b1; } /* HP */
.enemy-type-stat { font-weight: 700; }
.enemy-type-stat.type-comum { color: #ffffff; }
.enemy-type-stat.type-elite { color: #ffe38a; }
.enemy-type-stat.type-boss { color: #e54848; }
.chat-ui { position: fixed; z-index: 4; left: 12px; bottom: 12px; display: flex; flex-direction: column; width: min(320px, calc(100vw - 24px)); height: 220px; border: 1px solid #4d7181; border-radius: 9px; background: rgb(8 18 25 / 92%); box-shadow: 0 8px 22px rgb(0 0 0 / 45%); overflow: hidden; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: .25rem .45rem .25rem .55rem; border-bottom: 1px solid #355262; color: #bdeeff; font-size: .85rem; font-weight: 700; }
.chat-toggle { width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid #4f7180; border-radius: 3px; background: #162e39; color: #dcecf3; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.chat-toggle:hover { background: #245165; }
.chat-messages { flex: 1; padding: .45rem .55rem; overflow-y: auto; color: #dcecf3; font-size: .75rem; line-height: 1.35; }
.chat-message { overflow-wrap: anywhere; }
.chat-message strong { color: #8ee7ff; }
.chat-player-name { cursor: pointer; transition: color .15s; }
.chat-player-name:hover { color: #ffd76a; text-decoration: underline; }
.chat-message.damage-dealt strong, .damage-dealt-text { color: #22c55e !important; font-weight: 700; }
.chat-message.damage-taken strong, .damage-taken-text { color: #eab308 !important; font-weight: 700; }
.chat-message.player-death strong, .death-text { color: #ef4444 !important; font-weight: 700; }
.party-system-message { text-align: center; color: #7ab8e8; font-size: .7rem; font-style: italic; padding: .15rem 0; }
#chat-messages-party .chat-message { color: #7ab8e8; }
#chat-messages-party .chat-message strong { color: #a0d4ff; }
.chat-form { display: flex; gap: .3rem; padding: .35rem; border-top: 1px solid #355262; }
.chat-form input { min-width: 0; flex: 1; padding: .35rem .45rem; border: 1px solid #456979; border-radius: 4px; background: #101f28; color: #fff; font: inherit; font-size: .75rem; }
.chat-form button { padding: .35rem .5rem; border: 1px solid #4f9bba; border-radius: 4px; background: #1d566d; color: #fff; font: inherit; font-size: .72rem; cursor: pointer; }
.chat-form button:hover { background: #286f89; }
.chat-ui.minimized { height: auto; }
.chat-ui.minimized .chat-messages { display: none; }
.brain-ui.minimized { height: auto; }
.brain-ui.minimized .mlp-diagram, /* Diagrama do cérebro */
.brain-ui.minimized .passive-brain, /* Slots passivos */
.brain-ui.minimized #orb-inventory-panel, /* Inventário de orbs */
.brain-ui.minimized .brain-legend /* Legenda do cérebro */ {
  display: none;
}
.equipment-ui.minimized { height: auto; }
.equipment-ui.minimized .equipment-grid, /* Grade de equipamentos */
.equipment-ui.minimized #item-inventory-panel, /* Inventário de itens */
.equipment-ui.minimized #drop-inventory-panel, /* Inventário de drops */
.equipment-ui.minimized .drop-inventory-actions, /* Botões de vender/quebrar */
.equipment-ui.minimized .sell-drop-countdown /* Contagem para venda */ {
  display: none;
}
.chat-tabs { display: flex; gap: 0; border-bottom: 1px solid #355262; }
.chat-tab { flex: 1; padding: .4rem .5rem; border: none; border-bottom: 2px solid transparent; background: #0f1f2a; color: #8ee7ff; font-size: .75rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.chat-tab:hover { background: #1a2d39; }
.chat-tab.active { background: #162e39; border-bottom-color: #4ba9d1; }
.system-message { color: #a7d8f0; }
.system-label { color: #7cb8d8; font-weight: 600; font-size: .7rem; }
.boss-kill-overlay { position: fixed; top: 15%; left: 50%; transform: translateX(-50%); z-index: 9999; padding: .8rem 1.5rem; background: linear-gradient(145deg, rgba(255, 50, 0, 0.95), rgba(180, 30, 0, 0.9)); border: 2px solid #ff8844; border-radius: 8px; box-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 0 60px rgba(255, 50, 0, 0.4), inset 0 0 20px rgba(255, 200, 100, 0.2); color: #fff; font-size: 1.1rem; font-weight: 800; text-align: center; text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff8800; white-space: nowrap; pointer-events: none; }
@keyframes bossKillOverlay { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 10% { opacity: 1; transform: translateX(-50%) scale(1.1); } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
@media (max-width: 560px) { .area-enemy-list { grid-template-columns: 1fr; } }
.equipment-header { display: flex; align-items: center; margin-bottom: .35rem; cursor: grab; user-select: none; touch-action: none; }
.equipment-header h2 { margin: 0; color: #bcecff; font-size: .9rem; }
.equipment-header button { padding: .1rem .4rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; }
.equipment-header .equipment-minimize { margin-left: auto; margin-right: 0.3rem; width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid #4f7180; border-radius: 3px; background: #162e39; color: #dcecf3; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.equipment-header .equipment-minimize:hover { background: #245165; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(4, 34px); gap: .2rem; justify-content: center; grid-template-areas: '. helmet .' 'glove chest weapon' '. pants .' '. boots .'; margin-bottom: .15rem; }
.equipment-slot { position: relative; display: grid; place-items: center; align-content: center; gap: .15rem; min-width: 0; border: 2px solid #34383d; border-radius: 3px; background: linear-gradient(145deg, #25282b, #101214 55%, #303338); box-shadow: inset 0 0 0 2px #151719, inset 0 0 14px #050607, 0 1px 2px #000; color: #d8c49b; font-size: .65rem; text-align: center; cursor: grab; overflow: hidden; }
.drop-lock-modal { position: fixed; z-index: 10; width: min(380px, 90vw); padding: .8rem 1rem; background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); border: 1px solid #4e7391; border-radius: 10px; box-shadow: 0 8px 25px rgb(0 0 0 / 55%); }
.drop-lock-modal h2 { margin: 0 0 .6rem; color: #bcecff; font-size: 1rem; text-align: center; }
.drop-lock-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.drop-lock-column h3 { margin: 0 0 .4rem; color: #94aabd; font-size: .8rem; text-align: center; }
.drop-lock-options { display: grid; gap: .5rem; }
.drop-lock-option { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.drop-lock-option input {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid #7ec7ff;
  background: rgb(10 20 28 / 90%);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  accent-color: transparent;
}
.drop-lock-option input[type="radio"],
.drop-lock-option input[type="checkbox"] { border-radius: 50%; }
.drop-lock-option input:checked {
  border-color: #55d982;
  background: #1a5c42;
  box-shadow: 0 0 0 2px rgb(85 217 130 / 22%);
}
.drop-lock-option input::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
}
.drop-lock-option input:checked::after {
  background: #dfffe9;
}
.drop-lock-option input:disabled { opacity: .55; cursor: not-allowed; }
.drop-lock-actions { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid #3b4e62; text-align: center; }
.drop-lock-actions button { padding: .4rem .8rem; font-size: .8rem; }
.drop-lock-actions { display: flex; justify-content: center; gap: .5rem; }
.button-secondary { background: #294252; border: 1px solid #68c5df; color: #c9f5ff; }
.button-cancel { background: #7d2020; border: 1px solid #ff5f5f; color: #ffe0e0; }

.equipment-icon-frame { position: absolute; inset: 0; display: grid; place-items: center; }

.equipment-slot strong { max-width: 100%; overflow: hidden; color: #fff0b1; font-size: .52rem; }
.equipment-slot small { color: #9ee9af; font-size: .45rem; }

.equipment-slot.drag-over {
  border-color: #4ade80;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.4), inset 0 0 10px rgba(74, 222, 128, 0.2);
  transform: scale(1.02);
}

.equipment-placeholder-icon { position: relative; display: block; width: 36px; height: 36px; opacity: .28; filter: grayscale(1); }
.inventory-header-button.vip-feature-button { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 46px; padding: 0 .2rem; }
.vip-feature-badge { color: #ffd879; font-size: .48rem; font-weight: 800; line-height: 1; }
.inventory-header-button.vip-feature-button.vip-locked { border-color: #3a4650; background: #171d22; color: #66717a; filter: grayscale(1); opacity: .72; cursor: not-allowed; }
.inventory-header-button.vip-feature-button.vip-locked .vip-feature-badge { color: #899198; }

.equipment-placeholder-emoji {
  font-size: 26px; /* Adjust size as needed */
  line-height: 1;
  opacity: 0.5;
  filter: grayscale(1);
}

.sell-drop-countdown { width: 100%; margin-top: .45rem; padding: .45rem .4rem; border: 1px dashed #c99a45; border-radius: 6px; color: #ffe9bc; background: rgb(107 74 32 / 26%); font-size: .72rem; text-align: center; }

.helmet { grid-area: helmet; } .chest { grid-area: chest; } .glove { grid-area: glove; } .weapon { grid-area: weapon; } .pants { grid-area: pants; } .boots { grid-area: boots; }
.inventory-panel.drag-over { border-color: #55f47b; box-shadow: 0 0 18px rgb(85 244 123 / 45%); }
.inventory-panel p { margin: 0.35rem 0 0.7rem; color: #94aabd; font-size: 0.72rem; text-align: center; }
.inventory-grid { display: grid; grid-template-columns: repeat(5, 54px); grid-auto-rows: 54px; justify-content: center; gap: 0.4rem; height: 126px; max-height: 126px; padding: 0.35rem; box-sizing: border-box; border: 1px dotted #526b80; border-radius: 8px; overflow-y: auto; overflow-x: hidden; }
#orb-inventory-panel .inventory-grid { grid-template-columns: repeat(5, 54px); height: 190px; max-height: 190px; }
#item-inventory-panel .inventory-grid { grid-template-columns: repeat(5, 42px); grid-auto-rows: 42px; height: 150px; max-height: 150px; padding: 0.25rem; gap: 0.25rem; }
#drop-inventory-panel .inventory-grid { grid-template-columns: repeat(5, 42px); grid-auto-rows: 42px; height: 228px; max-height: 228px; }
.drop-inventory-actions { display: flex; gap: .4rem; margin-top: .45rem; } .sell-drop-button, .break-drop-weapons-button { flex: 1; padding: .4rem; font-size: .72rem; } .sell-drop-button { background: #6b4a20; border: 1px solid #c99a45; color: #ffe5a3; } .break-drop-weapons-button { background: #294252; border: 1px solid #68c5df; color: #c9f5ff; }
.orb-fusion-elite-transfer { display: none; }
.orb-drop-transfer { display: none; }
.inventory-slot { display: grid; place-items: center; width: 54px; height: 54px; min-width: 54px; min-height: 54px; border: 1px dotted #526b80; border-radius: 5px; background: rgb(12 20 29 / 55%); }
#item-inventory-panel .inventory-slot { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
#drop-inventory-panel .inventory-slot { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
.inventory-slot.locked-slot { border-style: solid; border-color: #3a4650; background: rgb(8 13 18 / 72%); color: #78838b; cursor: not-allowed; opacity: .58; }
.inventory-slot.locked-slot.buyable-slot { border-color: #b98535; color: #ffe0a0; cursor: pointer; opacity: .9; }
.inventory-slot.locked-slot.buyable-slot:hover { background: rgb(82 57 23 / 55%); }
.orb-item { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; padding: 0.2rem; border: 1px dotted #39d978; border-radius: 6px; background: #174d31; color: #d9ffe6; cursor: grab; font-size: 0.62rem; text-align: center; user-select: none; }
.orb-item.regular-item { border: 1px dotted #526b80; background: rgb(12 20 29 / 55%); color: #d7e6ef; }
.orb-item.passive-orb { border-color: #ff4e57; background: #5b2028; color: #ffe0e2; }
.orb-item.active-orb { border-color: #39d978; background: #174d31; color: #d9ffe6; }
.orb-item.rarity-comum, .brain-slot.rarity-comum, .passive-slot.rarity-comum { border-color: transparent; box-shadow: none; }
.orb-item.rarity-incomum { border: 2px solid #53f08d; box-shadow: 0 0 12px rgb(83 240 141 / 85%), 0 0 2px rgb(255 255 255 / 18%) inset; }
.orb-item.rarity-raro { border: 2px solid #6ab4ff; box-shadow: 0 0 12px rgb(106 180 255 / 85%), 0 0 2px rgb(255 255 255 / 18%) inset; }
.orb-item.rarity-epico { border: 2px solid #ff84c4; box-shadow: 0 0 12px rgb(255 132 196 / 85%), 0 0 2px rgb(255 255 255 / 18%) inset; }
.orb-item.rarity-lendario { border: 2px solid #ff9d2e; box-shadow: 0 0 12px rgb(255 157 46 / 85%), 0 0 2px rgb(255 255 255 / 18%) inset; }
.brain-slot.rarity-incomum, .passive-slot.rarity-incomum { border: 4px solid #53f08d; box-shadow: 0 0 18px rgb(83 240 141 / 92%), 0 0 4px rgb(255 255 255 / 20%) inset; }
.brain-slot.rarity-raro, .passive-slot.rarity-raro { border: 4px solid #6ab4ff; box-shadow: 0 0 18px rgb(106 180 255 / 92%), 0 0 4px rgb(255 255 255 / 20%) inset; }
.brain-slot.rarity-lendario, .passive-slot.rarity-lendario { border: 4px solid #ff9d2e; box-shadow: 0 0 18px rgb(255 157 46 / 92%), 0 0 4px rgb(255 255 255 / 20%) inset; }

/* Estilos da interface de amigos */
.friends-ui { position: fixed; z-index: 102; top: 50%; left: 50%; width: min(340px, calc(100vw - 2rem)); padding: .85rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); transform: translate(-50%, -50%); }
.friends-ui.dragging { opacity: .92; }
.friends-header { display: flex; align-items: center; justify-content: space-between; color: #bcecff; cursor: grab; user-select: none; touch-action: none; margin-bottom: .8rem; }
.friends-header h2 { margin: 0; font-size: 1rem; }
.friends-count { color: #94aabd; font-size: .8rem; font-weight: normal; }
.friends-header button { padding: .1rem .4rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; cursor: pointer; }
.friends-header button:hover { background: #562c38; color: #ffffff; }
.friends-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; margin-bottom: .8rem; }
.friend-item { display: flex; align-items: center; justify-content: space-between; padding: .6rem .7rem; border: 1px solid #526b80; border-radius: 6px; background: #0f1a25; color: #dcecf3; cursor: pointer; transition: all .2s ease; }
.friend-item:hover { background: #1a2a3a; border-color: #6b8fa3; }
.friend-item.selected { background: #255566; border-color: #55d982; box-shadow: 0 0 12px rgb(85 217 130 / 25%); }
.friend-info { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.friend-name { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-level { font-size: .7rem; color: #94aabd; white-space: nowrap; }
.friend-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friend-status-dot.online { background: #55d982; box-shadow: 0 0 6px rgb(85 217 130 / 60%); }
.friend-status-dot.offline { background: #556677; }
.friend-party-btn { padding: .2rem .5rem; font-size: .7rem; background: #3a6b5a; border: 1px solid #4a8b6a; color: #dcecf3; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: all .2s ease; flex-shrink: 0; }
.friend-party-btn:hover { background: #4a8b6a; border-color: #5aab7a; }
.friends-actions { display: flex; gap: .4rem; }
.friends-action-button { flex: 1; padding: .45rem .6rem; font-size: .75rem; background: #4a6b8a; border: 1px solid #5a7b9a; color: #dcecf3; border-radius: 6px; cursor: pointer; transition: all .2s ease; }
.friends-action-button:hover:not(:disabled) { background: #5a7b9a; border-color: #7a9bba; }
.friends-action-button:disabled { opacity: .4; cursor: not-allowed; }
.friends-action-button.friends-remove { background: #6b4a4a; border-color: #8b6a6a; }
.friends-action-button.friends-remove:hover:not(:disabled) { background: #8b6a6a; border-color: #ab8a8a; }
.admin-players-ui { position: fixed; z-index: 102; top: 50%; left: 50%; width: min(360px, calc(100vw - 2rem)); padding: .85rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); transform: translate(-50%, -50%); }
.admin-players-ui.dragging { opacity: .92; }
.admin-players-header { display: flex; align-items: center; justify-content: space-between; color: #bcecff; cursor: grab; user-select: none; touch-action: none; margin-bottom: .8rem; }
.admin-players-title { display: flex; align-items: center; gap: .55rem; }
.admin-players-header h2 { margin: 0; font-size: 1rem; }
.admin-online-count { padding: .2rem .45rem; border: 1px solid rgb(85 217 130 / 40%); border-radius: 999px; background: rgb(34 91 58 / 40%); color: #8cf0ae; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.admin-players-header button { padding: .1rem .4rem; background: transparent; color: #ff9b9b; font-size: 1.2rem; cursor: pointer; }
.admin-players-header button:hover { background: #562c38; color: #ffffff; }
.admin-players-search-input { width: 100%; padding: .6rem .7rem; margin-bottom: .7rem; border: 1px solid #526b80; border-radius: 6px; background: #0f1a25; color: #dcecf3; font-size: .9rem; outline: none; }
.admin-players-search-input:focus { border-color: #55d982; box-shadow: 0 0 8px rgb(85 217 130 / 20%); }
.admin-players-list { display: flex; flex-direction: column; gap: .4rem; max-height: 340px; overflow-y: auto; }
.admin-player-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem .7rem; border: 1px solid #526b80; border-radius: 6px; background: #0f1a25; color: #dcecf3; font: inherit; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.admin-player-item:hover, .admin-player-item:focus-visible { background: #1a2a3a; border-color: #6b8fa3; outline: none; }
.admin-player-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-player-status-dot.online { background: #55d982; box-shadow: 0 0 6px rgb(85 217 130 / 60%); }
.admin-player-status-dot.offline { background: #556677; }
.admin-player-name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-player-status { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.admin-player-status.online { color: #55d982; }
.admin-player-status.offline { color: #94aabd; }
.admin-players-empty { text-align: center; color: #94aabd; font-size: .85rem; margin: .5rem 0; }
.admin-player-details-ui { position: fixed; z-index: 120; top: 50%; left: 50%; width: min(720px, calc(100vw - 2rem)); max-height: 90vh; overflow-y: auto; padding: .8rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 98%), rgb(8 15 24 / 98%)); box-shadow: 0 10px 32px rgb(0 0 0 / 72%), 0 0 22px rgb(31 186 255 / 18%); transform: translate(-50%, -50%); }
.admin-player-details-ui.dragging { opacity: .94; }
.admin-player-details-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; color: #bcecff; cursor: grab; user-select: none; touch-action: none; }
.admin-player-details-header h2 { margin: 0; font-size: 1.1rem; }
.admin-player-details-header button { padding: .1rem .45rem; background: transparent; color: #ff9b9b; font-size: 1.35rem; cursor: pointer; }
.admin-player-details-header button:hover { background: #562c38; color: #ffffff; }
.admin-player-details-content { display: grid; gap: .65rem; }
.admin-player-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.admin-player-stat { display: grid; gap: .1rem; padding: .45rem .55rem; border: 1px solid #354e63; border-radius: 7px; background: rgb(10 22 33 / 85%); }
.admin-player-stat span { color: #94aabd; font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.admin-player-stat strong { color: #eaf7ff; font-size: .95rem; overflow-wrap: anywhere; }
.admin-player-detail-section { display: grid; gap: .4rem; padding-top: .55rem; border-top: 1px solid rgb(78 115 145 / 45%); }
.admin-player-detail-section h3 { margin: 0; color: #bcecff; font-size: .82rem; }
.admin-detail-slots { display: grid; gap: .3rem; }
.admin-detail-slots.equipment { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.admin-detail-slots.orbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-detail-slot { display: grid; align-content: start; justify-items: center; gap: .2rem; min-width: 0; min-height: 68px; padding: .3rem .2rem; border: 1px solid #354e63; border-radius: 7px; background: rgb(10 22 33 / 85%); text-align: center; }
.admin-detail-slot.filled { border-color: #526b80; }
.admin-detail-slot.filled, .admin-detail-item { cursor: help; }
.admin-detail-slot:focus-visible, .admin-detail-item:focus-visible { outline: 2px solid #55d982; outline-offset: 2px; }
.admin-detail-slot-title { color: #94aabd; font-size: .6rem; }
.admin-detail-slot-icon, .admin-detail-item-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: #8ca6b8; font-size: 1rem; }
.admin-detail-slot-icon img, .admin-detail-item-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.admin-detail-slot-empty { color: #71899a; font-size: .58rem; }
.admin-detail-item-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; max-height: 150px; overflow-y: auto; }
.admin-detail-item { position: relative; display: grid; place-items: center; min-width: 0; min-height: 40px; padding: .25rem; border: 1px solid #354e63; border-radius: 6px; background: rgb(10 22 33 / 85%); }
.admin-detail-item-icon { width: 28px; height: 28px; }
.admin-detail-item-quantity { position: absolute; right: .2rem; bottom: .1rem; color: #dcecf3; font-size: .58rem; text-shadow: 0 1px 3px #000; }
.admin-detail-item.rarity-comum, .admin-detail-slot.rarity-comum { border-color: #526b80; }
.admin-detail-item.rarity-incomum, .admin-detail-slot.rarity-incomum { border: 2px solid #53f08d; box-shadow: 0 0 8px rgb(83 240 141 / 55%); }
.admin-detail-item.rarity-raro, .admin-detail-slot.rarity-raro { border: 2px solid #6ab4ff; box-shadow: 0 0 8px rgb(106 180 255 / 55%); }
.admin-detail-item.rarity-epico, .admin-detail-slot.rarity-epico { border: 2px solid #ff84c4; box-shadow: 0 0 8px rgb(255 132 196 / 55%); }
.admin-detail-item.rarity-lendario, .admin-detail-slot.rarity-lendario { border: 2px solid #ff9d2e; box-shadow: 0 0 8px rgb(255 157 46 / 55%); }
.admin-detail-empty { margin: .35rem 0; color: #94aabd; font-size: .8rem; text-align: center; }

/* Modal de busca de amigos */
.add-friend-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgb(0 0 0 / 60%); }
.add-friend-card { width: min(380px, calc(100vw - 2rem)); padding: 1.2rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); }
.add-friend-card h2 { margin: 0 0 1rem; color: #bcecff; font-size: 1.1rem; text-align: center; }
.add-friend-search-input { width: 100%; padding: .7rem .8rem; margin-bottom: .8rem; border: 1px solid #526b80; border-radius: 6px; background: #0f1a25; color: #dcecf3; font-size: .95rem; outline: none; }
.add-friend-search-input:focus { border-color: #55d982; box-shadow: 0 0 8px rgb(85 217 130 / 20%); }
.add-friend-results { max-height: 300px; overflow-y: auto; margin-bottom: 1rem; }
.add-friend-result { padding: .6rem .7rem; margin-bottom: .4rem; border: 1px solid #526b80; border-radius: 6px; background: #0f1a25; color: #dcecf3; cursor: pointer; transition: all .2s ease; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.add-friend-result:hover { background: #1a2a3a; border-color: #6b8fa3; }
.add-friend-result > div { flex: 1; min-width: 0; }
.add-friend-result-name { font-size: .85rem; font-weight: 500; }
.add-friend-result-level { font-size: .7rem; color: #94aabd; }
.add-friend-result-btn { width: 110px; min-width: 110px; padding: .35rem .5rem; font-size: .7rem; background: #4a6b8a; border: 1px solid #5a7b9a; color: #dcecf3; border-radius: 4px; cursor: pointer; transition: all .2s ease; }
.add-friend-result-btn:hover { background: #5a7b9a; border-color: #7a9bba; }
.add-friend-actions { display: flex; gap: .4rem; }
.add-friend-modal button { flex: 1; padding: .5rem .7rem; font-size: .8rem; border: 1px solid #526b80; border-radius: 6px; background: #122234; color: #bcecff; cursor: pointer; transition: all .2s ease; }
.add-friend-modal button:hover { background: #1d4058; border-color: #6b8fa3; }
.add-friend-modal .cancel-btn { background: #4a3a3a; border-color: #6a5a5a; color: #e0a0a0; }
.add-friend-modal .cancel-btn:hover { background: #6a5a5a; border-color: #8a7a7a; }
.friend-request-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: rgb(0 0 0 / 60%); }
.friend-request-card { width: min(360px, calc(100vw - 2rem)); padding: 1.1rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); }
.friend-request-card h2 { margin: 0 0 .7rem; color: #bcecff; font-size: 1.05rem; text-align: center; }
.friend-request-card p { margin: 0 0 1rem; color: #dcecf3; text-align: center; font-size: .9rem; }
.friend-request-actions { display: flex; gap: .5rem; }
.friend-request-actions button { flex: 1; padding: .6rem .8rem; border-radius: 6px; border: 1px solid #526b80; background: #122234; color: #dcecf3; cursor: pointer; }
.friend-request-accept { background: #214832 !important; border-color: #3b7a59 !important; }
.friend-request-cancel { background: #4a3a3a !important; border-color: #6a5a5a !important; color: #e0a0a0 !important; }
.friend-request-actions button:hover { filter: brightness(1.08); }
.shop-confirm-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgb(0 0 0 / 60%); }
.shop-confirm-card { width: min(360px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #4e7391; border-radius: 14px; background: linear-gradient(145deg, rgb(25 36 51 / 97%), rgb(8 15 24 / 97%)); box-shadow: 0 10px 28px rgb(0 0 0 / 60%); }
.game-settings-card { width: min(400px, calc(100vw - 2rem)); }
.game-settings-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.game-settings-header h2 { margin: 0; color: #bcecff; font-size: 1rem; }
#game-settings-close { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid #526b80; border-radius: 6px; background: #122234; color: #dcecf3; font-size: 1.25rem; cursor: pointer; }
.game-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: .7rem; border: 1px solid #425d7d; border-radius: 8px; background: rgb(11 18 27 / 70%); cursor: pointer; }
.game-settings-copy { display: grid; gap: .25rem; }
.game-settings-copy strong { color: #dcecf3; font-size: .85rem; }
.game-settings-copy small { color: #9fb2bf; font-size: .72rem; line-height: 1.35; }
#visual-effects-toggle { appearance: none; flex: 0 0 46px; width: 46px; height: 26px; margin: 0; border: 1px solid #607080; border-radius: 99px; background: #33404b; cursor: pointer; transition: background-color 140ms, border-color 140ms; }
#visual-effects-toggle::after { display: block; width: 20px; height: 20px; margin: 2px; border-radius: 50%; background: #dcecf3; content: ''; transition: transform 140ms; }
#visual-effects-toggle:checked { border-color: #3fe07d; background: #1c6b3b; }
#visual-effects-toggle:checked::after { transform: translateX(20px); }
#visual-effects-toggle:focus-visible, #game-settings-close:focus-visible, #game-settings-logout:focus-visible { outline: 2px solid #9ad7ff; outline-offset: 3px; }
.game-settings-status { min-height: 1rem; margin: .55rem 0 0; color: #9fb2bf; font-size: .72rem; }
.game-settings-actions { display: flex; justify-content: flex-end; margin-top: .75rem; }
#game-settings-logout { min-height: 38px; padding: .5rem .85rem; border: 1px solid #a34a4a; border-radius: 6px; background: #512727; color: #ffdada; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
#game-settings-logout:hover:not(:disabled) { background: #713232; }
#game-settings-logout:disabled { opacity: .6; cursor: wait; }
.cash-deposit-card { width: min(400px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.cash-deposit-status { margin: 0 0 .75rem; color: #dbeaf5; font-size: .82rem; line-height: 1.4; }
.cash-deposit-qr { display: block; width: min(280px, 100%); aspect-ratio: 1; object-fit: contain; margin: 0 auto .8rem; padding: .5rem; border-radius: 8px; background: #fff; }
.cash-deposit-code-label { display: block; margin-bottom: .35rem; color: #bcecff; font-size: .75rem; font-weight: 700; }
.cash-deposit-code { display: block; width: 100%; resize: vertical; padding: .55rem; border: 1px solid #425d7d; border-radius: 6px; background: rgba(11, 18, 27, 0.9); color: #dcecf3; font: .7rem/1.4 monospace; overflow-wrap: anywhere; }
.cash-deposit-unavailable { margin-top: .6rem; }
.cash-credit-card { text-align: center; }
.cash-credit-card > p { margin: .55rem 0 1rem; color: #dbeaf5; font-size: .82rem; }
.cash-credit-line, .cash-credit-total { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.cash-credit-line img { width: 44px; height: 44px; object-fit: contain; }
.cash-credit-line strong { color: #9ad7ff; font-size: 1.5rem; }
.cash-credit-total { padding: .65rem; border: 1px solid #425d7d; border-radius: 8px; color: #dcecf3; font-size: .8rem; }
.cash-credit-total img { width: 20px; height: 20px; object-fit: contain; }
.cash-credit-total strong { color: #9ad7ff; }
.shop-confirm-card h2 { margin: 0 0 .8rem; color: #bcecff; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.shop-confirm-details { display: grid; gap: .45rem; padding: .65rem .75rem; border: 1px solid #425d7d; border-radius: 8px; background: rgba(11, 18, 27, 0.7); color: #dcecf3; font-size: .8rem; line-height: 1.4; }
.shop-confirm-details strong { color: #ffe45c; }
.shop-confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .85rem; }
.shop-confirm-actions button { flex: 1; padding: .6rem .8rem; border-radius: 6px; border: 1px solid #526b80; background: #122234; color: #dcecf3; cursor: pointer; }
.shop-confirm-buy { background: #214832 !important; border-color: #3b7a59 !important; color: #d4ffe0 !important; }
.player-context-menu { position: fixed; z-index: 1200; min-width: 160px; padding: .4rem; border: 1px solid #4e7391; border-radius: 8px; background: rgba(15, 26, 37, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.player-context-header { padding: .5rem .6rem; color: #bcecff; font-size: .8rem; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.player-context-menu button { width: 100%; margin-top: .4rem; padding: .5rem .6rem; border: 1px solid #526b80; border-radius: 6px; background: #122234; color: #dcecf3; cursor: pointer; font-size: .75rem; }
.player-context-menu button#player-context-cancel { background: #1a1a2a; border-color: #3a3a5a; color: #99aabb; margin-top: .6rem; }

/* Auction/Sell tab styles */
.auction-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1rem;
}

.auction-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.auction-form-label {
  color: #bcecff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.auction-form-limit {
  color: #9ad7ff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.auction-slot {
  display: grid;
  place-items: center;
  min-height: 100px;
  padding: 1rem;
  border: 2px dashed #4e7391;
  border-radius: 10px;
  background: rgba(15, 26, 37, 0.7);
  color: #9eb3c5;
  font-size: 0.9rem;
  cursor: grab;
  transition: all 0.2s ease;
}

.auction-slot.drag-over {
  border-color: #55d982;
  background: rgba(83, 240, 141, 0.1);
  box-shadow: 0 0 18px rgba(83, 240, 141, 0.3), inset 0 0 12px rgba(83, 240, 141, 0.1);
}

.auction-slot-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.auction-slot-placeholder {
  margin: 0;
  font-size: 0.9rem;
  color: #9eb3c5;
  text-align: center;
}

.auction-slot-item-display {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.5rem;
}

.auction-slot-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(85, 217, 130, 0.3));
}

.auction-slot-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.auction-slot-name {
  color: #d4ffe0;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}

.auction-slot-qty {
  color: #a0b5c7;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auction-item-picker {
  margin-top: 0.5rem;
  padding: 0.65rem;
  border: 1px solid #425d7d;
  border-radius: 6px;
  background: rgba(11, 18, 27, 0.85);
}
.auction-item-picker[hidden] { display: none; }
.auction-item-picker-title { margin-bottom: 0.5rem; color: #bcecff; font-size: 0.8rem; font-weight: 700; }
.auction-item-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.45rem; max-height: 260px; overflow-y: auto; }
.auction-item-picker-option { display: flex; min-width: 0; min-height: 86px; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.4rem; border: 1px solid #425d7d; border-radius: 5px; background: #122234; color: #dcecf3; font-size: 0.72rem; cursor: pointer; }
.auction-item-picker-option img { display: block; flex: 0 0 36px; width: 36px; height: 36px; max-width: 100%; object-fit: contain; }
.auction-item-picker-option span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

.auction-slot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4ffe0;
  font-weight: 700;
}

.auction-bid-input,
.auction-qty-input {
  padding: 0.6rem 0.8rem;
  border: 1px solid #526b80;
  border-radius: 8px;
  background: #0f1a25;
  color: #9ad7ff;
  font-size: 0.95rem;
  font-weight: 700;
  outline: none;
  transition: all 0.2s ease;
}

.auction-bid-input:focus,
.auction-qty-input:focus {
  border-color: #55d982;
  box-shadow: 0 0 12px rgba(85, 217, 130, 0.25);
}

.auction-bid-input:disabled,
.auction-qty-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auction-qty-container {
  display: flex;
  gap: 0.6rem;
}

.auction-qty-input {
  flex: 1;
  width: 100%;
}

.auction-duration-buttons {
  display: flex;
  gap: 0.6rem;
}

.auction-duration-btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid #526b80;
  border-radius: 6px;
  background: #122234;
  color: #bcecff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auction-duration-btn:hover:not(.active) {
  border-color: #6b8fa3;
  background: #1d4058;
}

.auction-duration-btn.active {
  background: linear-gradient(180deg, rgba(27, 79, 63, 0.95), rgba(18, 51, 39, 0.98));
  border-color: #3fe07d;
  color: #d4ffe0;
  box-shadow: 0 0 12px rgba(63, 224, 125, 0.3), inset 0 0 8px rgba(95, 255, 165, 0.15);
}

.auction-form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.auction-form-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: #d8f7ff;
  font-weight: 700;
  letter-spacing: 0.03em;
  min-height: 1.5rem;
}

.auction-form-cost .inline-gold-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  vertical-align: middle;
}

.auction-place-button {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #3b7a59;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(27, 79, 63, 0.95), rgba(18, 51, 39, 0.98));
  color: #d4ffe0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auction-place-button:hover:not(:disabled) {
  border-color: #55d982;
  box-shadow: 0 0 16px rgba(85, 217, 130, 0.4);
  transform: translateY(-2px);
}

.auction-place-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.my-auctions-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #526b80;
}

.my-auctions-title {
  margin: 0 0 1rem 0;
  color: #bcecff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.my-auctions-list {
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.my-auction-item {
  background: rgba(18, 34, 52, 0.6);
  border: 1px solid #3b4e62;
  border-radius: 8px;
  justify-content: space-between;
}

.my-auction-item:hover {
  border-color: #55d982;
  background: rgba(27, 79, 63, 0.3);
}

.my-auction-status {
  color: #55d982 !important;
  font-weight: 600;
  margin-top: 0.3rem;
}

.auction-inventory-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #526b80;
}

.auction-inventory-title {
  margin: 0 0 1rem 0;
  color: #bcecff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auction-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(18, 34, 52, 0.4);
  border: 1px solid #3b4e62;
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.auction-inventory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  background: rgba(18, 34, 52, 0.8);
  border: 1px solid #2d3f52;
  border-radius: 6px;
  cursor: move;
  transition: all 0.2s ease;
  user-select: none;
}

.auction-inventory-item:hover {
  border-color: #55d982;
  background: rgba(27, 79, 63, 0.3);
  transform: scale(1.05);
}

.auction-inventory-item[draggable="true"] {
  cursor: grab;
}

.auction-inventory-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.auction-item-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  color: #bcecff;
  font-size: 1.8rem;
}

.auction-item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.auction-item-label {
  font-size: 0.7rem;
  color: #bcecff;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

.auction-item-qty {
  font-size: 0.65rem;
  color: #7ca8c4;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

.auction-recover-button {
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: auto;
  border: 1px solid #5a7a9a;
  border-top: 1px solid rgba(122, 159, 187, 0.85);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(27, 79, 63, 0.8), rgba(18, 51, 39, 0.9));
  color: #d4ffe0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.auction-recover-button:hover {
  border-color: #7a9fbb;
  background: linear-gradient(180deg, rgba(35, 99, 79, 0.95), rgba(25, 61, 49, 0.98));
  box-shadow: 0 0 12px rgba(85, 217, 130, 0.3);
  transform: translateY(-1px);
}

.auction-recover-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inventory-full-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.inventory-full-modal-content {
  padding: 1.5rem 2rem;
  border: 1px solid #c84a4a;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(40, 20, 20, 0.98), rgba(25, 10, 10, 0.98));
  box-shadow: 0 0 30px rgba(200, 74, 74, 0.3);
  text-align: center;
  min-width: 320px;
  max-width: 450px;
}

.inventory-full-modal-content h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  color: #ff9999;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inventory-full-modal-content p {
  margin: 0 0 1.2rem 0;
  color: #c9dce8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.inventory-full-close-btn {
  padding: 0.6rem 1.5rem;
  border: 1px solid #c84a4a;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(100, 30, 30, 0.9), rgba(60, 15, 15, 0.9));
  color: #ff9999;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inventory-full-close-btn:hover {
  border-color: #ff9999;
  background: linear-gradient(180deg, rgba(120, 40, 40, 0.95), rgba(80, 20, 20, 0.95));
  box-shadow: 0 0 16px rgba(200, 74, 74, 0.4);
}

.auction-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.65rem;
}

.auction-item {
  min-height: 220px;
}

.shop-item-subtext {
  color: #aac5d8;
  font-size: 0.72rem;
  line-height: 1.4;
}

.player-context-menu button:hover { background: #1d4058; }
.friend-remove-modal { display: none; }
.brain-slot.rarity-epico, .passive-slot.rarity-epico { border: 4px solid #ff84c4; box-shadow: 0 0 18px rgb(255 132 196 / 92%), 0 0 4px rgb(255 255 255 / 20%) inset; }
.orb-item:active { cursor: grabbing; }
.orb-item.dragging { opacity: .42; }
.regular-item { border-color: #7fa6c9; background: #203449; color: #d3eaff; }
  .orb-icon { color: #ffe45c; font-size: 1.1rem; }
  .orb-icon-image { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 0 4px rgb(117 215 255 / 70%)); }
.orb-item small { color: #d9f6df; font-size: 0.55rem; }
.orb-item > small { position: absolute; right: 2px; bottom: 2px; z-index: 2; padding: 1px 3px; border-radius: 4px; background: rgb(5 12 18 / 82%); color: #fff; font-size: 0.58rem; line-height: 1; text-shadow: 0 1px 2px #000; }
.orb-item .orb-icon-image { display: block; position: static; width: 100%; height: 100%; object-fit: fill; }    
.orb-item.evolution-ready .orb-icon-image,
.brain-slot.evolution-ready .orb-icon-image,
.passive-slot.evolution-ready .orb-icon-image {
  animation: orb-evolution-pulse 1.2s ease-in-out infinite;
}

@keyframes orb-evolution-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 100, 0.8));
  }
  50% {
    transform: scale(1.12);
    filter: brightness(2.5) drop-shadow(0 0 22px #ffffff) drop-shadow(0 0 12px #fff59d);
  }
}
.orb-tooltip { position: fixed; z-index: 1100; width: min(270px, calc(100vw - 24px)); box-sizing: border-box; padding: 0.8rem 0.9rem; color: #eaf7ff; background: linear-gradient(145deg, rgb(18 31 45 / 99%), rgb(6 13 22 / 99%)); border: 1px solid #65d98a; border-radius: 10px; box-shadow: 0 0 22px rgb(0 0 0 / 65%), inset 0 0 12px rgb(101 217 138 / 8%); font-size: 0.75rem; line-height: 1.45; pointer-events: none; }
.orb-tooltip strong { display: block; margin-bottom: 0.45rem; padding-bottom: 0.35rem; color: #ffe45c; border-bottom: 1px solid rgb(101 217 138 / 30%); font-size: 0.88rem; line-height: 1.2; }
.orb-tooltip span { display: block; margin-top: 0.18rem; color: #c1d4df; }
.orb-tooltip .orb-tooltip-damage { color: #ff7777; }
.orb-tooltip .orb-tooltip-divider { display: block; height: 1px; margin: 0.42rem 0 0.28rem; background: linear-gradient(90deg, rgb(101 217 138 / 15%), rgb(101 217 138 / 55%), rgb(101 217 138 / 15%)); }
.orb-tooltip .orb-rarity { color: #c1d4df; }
.orb-tooltip .orb-rarity-incomum { color: #53f08d; }
.orb-tooltip .orb-rarity-raro { color: #6ab4ff; }
.orb-tooltip .orb-rarity-epico { color: #ff84c4; }
.orb-tooltip .orb-rarity-lendario { color: #ff9d2e; }

.mobile-craft-available { display: none; }

@media (max-width: 700px) {
  .brain-minimize,
  .equipment-minimize { display: none !important; }
  .player-hud {
    top: max(0.5rem, env(safe-area-inset-top));
    left: 50%;
    width: 100vw;
    max-width: none;
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    border-radius: 0 0 8px 8px;
    transform: translateX(-50%);
  }
  .fps-counter { display: none !important; }
  .chat-ui {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(92vw, 380px);
    height: min(72dvh, 420px);
    transform: translate(-50%, -50%);
  }
  .chat-ui.minimized {
    top: auto;
    right: auto;
    bottom: calc(var(--mobile-game-nav-height, 0px) + 4.5rem);
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    height: auto;
    transform: none;
  }
  .drop-lock-modal {
    z-index: 2100;
    top: 50% !important;
    left: 50% !important;
    width: min(92vw, 420px);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }
  .brain-ui {
    position: fixed;
    inset: 0;
    z-index: 25;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    overflow-y: auto;
    border-radius: 0;
  }
  .brain-ui .brain-header { cursor: default; touch-action: auto; }
  body .mailbox-ui,
  body .shop-ui,
  body .orb-evolution-ui,
  body .profession-ui,
  body .equipment-ui,
  body .minimap-ui,
  body .friends-ui {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    box-sizing: border-box;
    border-radius: 0;
    transform: none;
    overflow: auto;
  }
  body .mailbox-ui { flex-direction: column; }
  body .mailbox-list { flex: 1; min-height: 0; max-height: none; }
  body .shop-ui { overflow: hidden; }
  body .shop-ui { flex-direction: column; }
  body .equipment-header { justify-content: space-between; }
  body button[aria-label^="Fechar"],
  body .mailbox-close,
  body #equipment-close {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #53687a;
    border-radius: 5px;
    background: #263747;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
  }
  body .shop-sidebar {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.3rem;
    width: auto;
    padding: 0.35rem;
    border-right: 0;
    border-bottom: 1px solid rgba(92, 124, 150, 0.6);
  }
  body .shop-tab { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.2rem; border-radius: 5px; font-size: 0.62rem; letter-spacing: 0; }
  body .shop-content { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; padding: 0.6rem; overflow: hidden; }
  body .shop-header { flex: 0 0 auto; margin-bottom: 0.45rem; }
  body .shop-title-wrap { min-width: 0; flex-wrap: wrap; gap: 0.3rem; }
  body .shop-header h2 { font-size: 0.9rem; }
  body .shop-catalog { flex: 1 1 auto; height: auto; min-height: 0; padding-right: 0.15rem; overflow-y: auto; }
  body .shop-table-items,
  body .auction-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 0.5rem; padding: 0.35rem; }
  body .shop-item-row { display: flex; min-width: 0; min-height: 0; padding: 0.55rem 0.4rem; gap: 0.45rem; overflow-wrap: anywhere; }
  body .shop-item-row:not(.auction-item) { height: auto; }
  body .shop-item-buy-box { margin-top: 0; }
  body .shop-item-icon { width: 48px; height: 48px; flex: 0 0 48px; }
  body .shop-item-name,
  body .shop-item-desc,
  body .shop-item-subtext { overflow-wrap: anywhere; }
  body .cash-deposit-card { width: min(92vw, 400px); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 2rem); box-sizing: border-box; padding: 0.75rem; }
  body .auction-search-row { gap: 0.35rem; }
  body .auction-search-input { flex: 1 1 0; width: 0; min-width: 0; padding: 0.55rem 0.45rem; }
  body .auction-search-button { flex: 0 0 auto; min-width: 50px; max-width: none; padding: 0.2rem 0.35rem; }
  body .auction-filter-toggle { flex: 0 0 36px; width: 36px !important; min-width: 36px; max-width: 36px; }
  body .auction-filter-panel { right: 0; left: auto; width: max-content; min-width: min(170px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); transform: none; }
  body .auction-filter-panel::before { right: 13px; left: auto; transform: rotate(45deg); }
  body .auction-form { gap: 0.85rem; padding: 0.4rem; }
  body .auction-slot { min-height: 72px; padding: 0.55rem; }
  body .auction-item-picker { margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #425d7d; border-radius: 6px; background: rgba(11, 18, 27, 0.85); }
  body .auction-item-picker[hidden] { display: none; }
  body .auction-item-picker-title { margin-bottom: 0.4rem; color: #bcecff; font-size: 0.75rem; font-weight: 700; }
  body .auction-item-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; max-height: 28dvh; overflow-y: auto; }
  body .auction-item-picker-option { display: flex; min-width: 0; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.25rem; border: 1px solid #425d7d; border-radius: 5px; background: #122234; color: #dcecf3; font-size: 0.62rem; }
  body .auction-item-picker-option img { width: 28px; height: 28px; object-fit: contain; }
  body .auction-item-picker-option span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  body .friends-ui { display: flex; flex-direction: column; }
  body .friends-list { flex: 1; min-height: 0; max-height: none; }
  body .minimap-ui { display: flex; flex-direction: column; overflow: hidden; }
  body .minimap-header { flex: 0 0 auto; }
  body .minimap-map {
    flex: 0 0 auto;
    width: min(100%, calc(100dvh - var(--mobile-game-nav-height, 0px) - 5.5rem));
    max-width: 100%;
    max-height: calc(100dvh - var(--mobile-game-nav-height, 0px) - 5.5rem);
    aspect-ratio: 1;
    min-height: 0;
    margin: auto;
    overflow: hidden;
  }
  body .minimap-map img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  body .minimap-point small { width: max-content; max-width: min(38vw, 150px); min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  body .minimap-point small span { font-size: 0.5rem; }
  body .minimap-point img { width: 24px; height: 24px; }
  body .minimap-point span { font-size: 1rem; }
  body .mobile-craft-available { display: block; margin-top: 0.9rem; }
  body .mobile-craft-available h3 { margin: 0 0 0.45rem; color: #bcecff; font-size: 0.75rem; text-align: center; }
  body .mobile-craft-inventory.inventory-panel { min-height: 0; margin: 0; padding: 0.25rem; }
  body .mobile-craft-inventory .inventory-grid { grid-template-columns: repeat(4, 40px); grid-auto-rows: 40px; justify-content: center; align-content: start; gap: 0.25rem; height: auto; max-height: 22dvh; padding: 0.25rem; }
  body .mobile-craft-inventory .inventory-slot { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  body .mobile-craft-inventory .inventory-slot.locked-slot { display: none; }
  body .mobile-craft-inventory .orb-item { cursor: grab; }
  body .craft-slots { gap: 0.45rem; margin: 0.5rem 0; }
  body .craft-slot { width: 50px; height: 50px; min-width: 50px; padding: 0; border-radius: 5px; font-size: 0.55rem; }
  body .craft-slot img { width: 46px; height: 46px; object-fit: contain; }
  body .orb-fusion-elite-transfer,
  body .orb-drop-transfer {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(var(--mobile-game-nav-height) + 0.6rem);
    z-index: 50;
    width: min(88vw, 320px);
    min-height: 42px;
    margin: 0;
    padding: 0.45rem;
    transform: translateX(-50%);
    border: 1px dashed #65ff8e;
    border-radius: 6px;
    background: rgb(26 64 48 / 75%);
    color: #c8ffd8;
    font-size: 0.8rem;
    font-weight: 700;
    touch-action: none;
  }
  body .orb-fusion-elite-transfer.drag-over,
  body .orb-drop-transfer.drag-over { border-style: solid; background: #246b3c; box-shadow: 0 0 16px rgb(85 244 123 / 45%); }
  body .equipment-ui.fusion-transfer-active { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  body .mailbox-header,
  body .shop-header,
  body .orb-evolution-header,
  body .profession-header,
  body .minimap-header,
  body .friends-header { cursor: default; touch-action: auto; }
  body .orb-evolution-available { display: block; margin-top: 0.75rem; }
  body .orb-evolution-available h3 { margin: 0 0 0.35rem; color: #bcecff; font-size: 0.75rem; text-align: center; }
  body .orb-evolution-available .inventory-panel,
  body .orb-fusion-available .inventory-panel { min-height: 0; margin: 0; padding: 0.25rem; }
  body .orb-evolution-available .inventory-grid,
  body .orb-fusion-available .inventory-grid {
    grid-template-columns: repeat(4, 40px);
    grid-auto-rows: 40px;
    height: auto;
    max-height: 24dvh;
    gap: 0.25rem;
    padding: 0.25rem;
    align-content: start;
  }
  body .orb-evolution-available .inventory-slot,
  body .orb-fusion-available .inventory-slot { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  body .orb-evolution-empty { margin: 0.4rem 0; color: #94aabd; font-size: 0.72rem; text-align: center; }
  body .orb-fusion-available { display: block; margin-top: 0.65rem; }
  body .orb-fusion-available h3 { margin: 0 0 0.35rem; color: #bcecff; font-size: 0.75rem; text-align: center; }
  body .game-settings-modal { place-items: stretch; padding: 0; }
  body .game-settings-modal .game-settings-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    box-sizing: border-box;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    border-radius: 0;
    overflow-y: auto;
  }
  .mlp-diagram { margin-left: max(-40px, calc((100vw - 1rem - 560px) / 2)); }
}

/* ── Party System ─────────────────────────────────────────────────────────── */
.party-invite-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1500; }
.party-invite-card { padding: 1.2rem 1.5rem; background: rgba(15, 26, 37, .97); border: 1px solid #4e7391; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, .6), 0 0 15px rgba(78, 115, 145, .3); text-align: center; min-width: 240px; }
.party-invite-card p { margin: 0 0 1rem; color: #dcecf3; font-size: .85rem; font-weight: 600; line-height: 1.4; }
.party-invite-actions { display: flex; gap: .6rem; }
.party-invite-actions button { flex: 1; padding: .55rem .8rem; border-radius: 6px; border: 1px solid #526b80; cursor: pointer; font-size: .8rem; font-weight: 700; transition: background .15s, border-color .15s; }
.party-invite-accept { background: #1a4030; border-color: #3b7a59; color: #a8ffc0; }
.party-invite-accept:hover { background: #245a3f; border-color: #4ea872; }
.party-invite-decline { background: #3a1a1a; border-color: #8b3a3a; color: #ffb0b0; }
.party-invite-decline:hover { background: #4d2222; border-color: #a84444; }

/* Party invite sent confirmation */
.party-invite-sent-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1500; }
.party-invite-sent-card { padding: 1.2rem 1.5rem; background: rgba(15, 26, 37, .97); border: 1px solid #4e7391; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, .6), 0 0 15px rgba(78, 115, 145, .3); text-align: center; min-width: 240px; }
.party-invite-sent-card p { margin: 0 0 1rem; color: #dcecf3; font-size: .85rem; font-weight: 600; line-height: 1.4; }
.party-invite-sent-ok { padding: .55rem 1.5rem; border-radius: 6px; border: 1px solid #526b80; background: #1a3050; color: #dcecf3; cursor: pointer; font-size: .8rem; font-weight: 700; transition: background .15s, border-color .15s; }
.party-invite-sent-ok:hover { background: #2a4a6a; border-color: #6b8fa3; }

/* --- Pot Config Popup --- */
.pot-config-popup { position: fixed; top: 0; left: 0; z-index: 1600; pointer-events: none; }
.pot-config-popup[hidden] { display: none !important; }
.pot-config-card { padding: 1.2rem 1.4rem; background: rgba(15, 26, 37, .97); border: 1px solid #4e7391; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, .6), 0 0 15px rgba(78, 115, 145, .3); min-width: 300px; max-width: 360px; pointer-events: auto; position: fixed; }
.pot-config-title { margin: 0 0 .8rem; color: #a0d4ff; font-size: .9rem; font-weight: 700; text-align: center; }
.pot-config-section { display: flex; flex-direction: column; gap: .7rem; }
.pot-config-row { display: flex; align-items: center; gap: .6rem; }
.pot-config-label { color: #8ab4d8; font-size: .78rem; font-weight: 700; min-width: 28px; }
.pot-config-slot { width: 36px; height: 36px; border: 2px solid #3a5570; border-radius: 6px; background: rgba(10, 20, 30, .7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, box-shadow .15s; position: relative; }
.pot-config-slot:hover { border-color: #6b8fa3; box-shadow: 0 0 8px rgba(107, 143, 163, .4); }
.pot-config-slot img { width: 28px; height: 28px; pointer-events: none; }
.pot-config-slot-name { color: #dcecf3; font-size: .75rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-config-empty-icon { font-size: 1rem; font-weight: 700; color: #6b8fa3; line-height: 1; pointer-events: none; }
.pot-config-percent { padding: .3rem .4rem; border-radius: 4px; border: 1px solid #3a5570; background: #0d1b26; color: #dcecf3; font-size: .78rem; font-weight: 600; cursor: pointer; min-width: 55px; }
.pot-config-percent:hover { border-color: #6b8fa3; }
.pot-config-potion-picker { margin-top: .6rem; padding: .5rem; border: 1px solid #3a5570; border-radius: 6px; background: rgba(10, 20, 30, .8); }
.pot-config-picker-title { color: #8ab4d8; font-size: .72rem; font-weight: 700; margin-bottom: .4rem; text-align: center; }
.pot-config-picker-list { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 120px; overflow-y: auto; }
.pot-config-picker-item { width: 36px; height: 36px; border: 2px solid #3a5570; border-radius: 6px; background: rgba(10, 20, 30, .7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .1s; }
.pot-config-picker-item:hover { border-color: #6b8fa3; transform: scale(1.08); }
.pot-config-picker-item img { width: 28px; height: 28px; pointer-events: none; }
.pot-config-picker-item.selected { border-color: #4caf88; box-shadow: 0 0 8px rgba(76, 175, 136, .5); }
.pot-config-buttons { display: flex; gap: .5rem; margin-top: .8rem; justify-content: center; }
.pot-config-btn { padding: .45rem 1.2rem; border-radius: 6px; border: 1px solid #526b80; background: #1a3050; color: #dcecf3; cursor: pointer; font-size: .78rem; font-weight: 700; transition: background .15s, border-color .15s; }
.pot-config-btn-confirm { background: #1a4a30; border-color: #4caf88; }
.pot-config-btn-confirm:hover { background: #2a6a48; }
.pot-config-btn-cancel:hover { background: #2a4a6a; border-color: #6b8fa3; }

/* --- Pot Display (ao lado da barra de atalho) --- */
.pot-display { position: fixed; bottom: 2rem; z-index: 6; display: flex; gap: .35rem; padding: .35rem; background: rgb(9 17 27 / 94%); border: 1px solid #4e7391; border-radius: 9px; box-shadow: 0 0 18px rgb(0 0 0 / 45%); }
.pot-display[hidden] { display: none !important; }
.pot-display-slot { width: 38px; height: 38px; border: 1px solid #3a5570; border-radius: 6px; background: rgba(10, 20, 30, .7); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.pot-display-slot[data-pot-type="hp"] { border-color: #5a3a3a; }
.pot-display-slot[data-pot-type="mana"] { border-color: #3a3a5a; }
.pot-display-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.pot-display-icon img { width: 22px; height: 22px; pointer-events: none; }
.pot-display-qty { position: absolute; bottom: 1px; right: 2px; font-size: .55rem; font-weight: 700; color: #dcecf3; text-shadow: 0 0 3px #000, 0 0 3px #000; line-height: 1; }
.pot-display-empty { color: #4a5a6a; font-size: .5rem; font-weight: 700; }
.pot-display-slot.potion-cooldown { pointer-events: auto; }
.pot-display-slot.potion-cooldown::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: conic-gradient(rgba(0, 0, 0, .65) var(--potion-cooldown-angle, 0deg), transparent var(--potion-cooldown-angle, 0deg));
  animation: potion-cooldown-clock-wipe var(--potion-cooldown-duration, 5000ms) linear forwards;
  animation-delay: var(--potion-cooldown-delay, 0s);
  pointer-events: none;
}
.pot-display-slot.potion-cooldown .pot-display-icon img { filter: grayscale(1) brightness(.65); }
.pot-display-slot .potion-cooldown-timer { font-size: .6rem; }

/* Party HUD panel */
.party-hud { position: fixed; left: 1rem; z-index: 5; width: 350px; padding: .5rem .7rem; display: flex; flex-direction: column; background: rgb(9 17 27 / 92%); border: 1px solid #4e7391; border-radius: 10px; box-shadow: 0 0 14px rgb(0 0 0 / 40%); }
.party-hud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; cursor: grab; user-select: none; touch-action: none; }
.party-hud.dragging { opacity: .92; }
.party-hud.dragging, .party-hud.dragging * { user-select: none !important; }
.party-hud-header span { color: #bcecff; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.party-hud-leave { background: none; border: 1px solid #5a3030; border-radius: 4px; color: #e08080; cursor: pointer; font-size: .7rem; padding: .15rem .4rem; line-height: 1; transition: background .15s; }
.party-hud-leave:hover { background: rgba(180, 50, 50, .3); border-color: #a04040; color: #ff9090; }
.party-members-list { display: flex; flex-direction: column; gap: .3rem; }
.party-member-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.party-member-row.party-member-leader { border-color: rgba(255, 215, 100, .25); }
.party-member-name { color: #e0f0ff; font-size: .72rem; font-weight: 700; min-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-member-name.party-member-self { color: #80ffaa; }
.party-member-name.party-member-dead { color: #888; text-decoration: line-through; }
.party-member-bars { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.party-member-hp-track { width: 100%; height: 7px; background: #281b24; border: 1px solid #6c3444; border-radius: 999px; overflow: hidden; }
.party-member-hp-fill { height: 100%; background: linear-gradient(90deg, #c0392b, #e74c3c); border-radius: 999px; transition: width .3s ease; }
.party-member-mp-track { width: 100%; height: 5px; background: #14243b; border: 1px solid #2f5f9d; border-radius: 999px; overflow: hidden; }
.party-member-mp-fill { height: 100%; background: linear-gradient(90deg, #2471a3, #5dade2); border-radius: 999px; transition: width .3s ease; }
.party-member-level { color: #ffd76a; font-size: .65rem; font-weight: 700; min-width: 22px; text-align: right; }
.party-member-kick { background: none; border: 1px solid #5a3030; border-radius: 3px; color: #e08080; cursor: pointer; font-size: .55rem; padding: .1rem .3rem; line-height: 1; opacity: 0; transition: opacity .15s; }
.party-member-row:hover .party-member-kick { opacity: 1; }
.party-member-kick:hover { background: rgba(180, 50, 50, .3); color: #ff9090; }
.party-chat-msg { font-size: .7rem; padding: .2rem .5rem; color: #a0c8e0; text-align: center; }

/* ---------------------------------------------------------------------------
   MODO CELULAR (RETRATO / EM P�)
   Adapta o HUD para telas de celular em modo retrato sem alterar o layout desktop.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) and (orientation: portrait) {
  :root { --mobile-game-nav-height: calc(50px + env(safe-area-inset-bottom)); }

  .target-window { top: 6.5rem; }

  /* -- Player HUD: menor e compacto -- */
  .player-hud {
    left: 50%;
    top: max(0.5rem, env(safe-area-inset-top));
    width: 100vw;
    max-width: none;
    padding: 0.5rem 0.6rem 0.45rem;
  }
  .player-hud-label { font-size: 0.8rem; margin-bottom: 0.3rem; }
  #player-level-text { font-size: 1.1rem; }
  .gold-display img, .cash-display img { width: 14px; height: 14px; }
  .player-hp-track { height: 13px; }
  .player-mana-track { height: 9px; }
  .player-exp-track { height: 6px; }

  /* -- Chat: centralizado acima do target filter -- */
  .chat-ui {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(92vw, 380px);
    height: min(72dvh, 420px);
    transform: translate(-50%, -50%);
  }
  /* No mobile, o botão de minimizar fica ACIMA das abas */
  .chat-header { order: -1; }
  .chat-tabs { order: 0; }
  /* No mobile, quando minimizado, esconde abas, mensagens e campo de digitação (mostra só o +) */
  .chat-ui.minimized {
    top: auto;
    right: auto;
    bottom: calc(var(--mobile-game-nav-height) + 4.5rem);
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    padding: 0.2rem;
    height: auto;
    transform: none;
  }
  .chat-ui.minimized .chat-tabs { display: none; }
  .chat-ui.minimized .chat-form { display: none; }
  .chat-ui.minimized .chat-header {
    border-bottom: none;
    justify-content: center;
    padding: 0;
  }
  .chat-ui.minimized .chat-toggle {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.1rem;
  }
  .chat-messages { font-size: 0.68rem; padding: 0.3rem 0.4rem; }
  .chat-form input { font-size: 0.68rem; padding: 0.25rem 0.35rem; }
  .chat-form button { font-size: 0.65rem; padding: 0.25rem 0.4rem; }
  .chat-tab { font-size: 0.68rem; padding: 0.3rem 0.4rem; }

  /* -- Barra de atalho: menor -- */
  .shortcut-bar {
    bottom: calc(var(--mobile-game-nav-height) + 0.6rem);
    gap: 0.2rem;
    padding: 0.25rem;
  }
  .shortcut-slot {
    width: 38px;
    height: 38px;
    font-size: 0.45rem;
    border-radius: 5px;
  }
  .shortcut-icon { font-size: 1rem; }
  .item-icon-image { width: 24px; height: 24px; }
  .shortcut-slot b { font-size: 0.55rem; }

  /* -- Pot display: menor e acima da barra de atalho -- */
  .pot-display {
    bottom: calc(var(--mobile-game-nav-height) + 4.6rem);
    gap: 0.2rem;
    padding: 0.25rem;
  }
  .pot-display-slot { width: 30px; height: 30px; }
  .pot-display-icon { width: 20px; height: 20px; }
  .pot-display-icon img { width: 18px; height: 18px; }

  /* -- Target filter: acima do pot display -- */
  .target-filter-panel { bottom: calc(var(--mobile-game-nav-height) + 7.2rem); gap: 0.25rem; padding: 0.3rem; }
  .summon-target-panel { bottom: calc(var(--mobile-game-nav-height) + 10.4rem); }
  .target-filter-button { min-width: 48px; padding: 0.3rem 0.35rem; font-size: 0.6rem; }

  /* -- Navegacao inferior, com rolagem em telas muito estreitas -- */
  .mobile-game-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    height: var(--mobile-game-nav-height);
    padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background: rgb(9 17 27 / 96%);
    border-top: 1px solid #4e7391;
    box-shadow: 0 -4px 14px rgb(0 0 0 / 35%);
    scrollbar-width: none;
  }
  .mobile-game-nav::-webkit-scrollbar { display: none; }
  .mobile-game-nav > button {
    position: relative;
    inset: auto;
    display: grid;
    flex: 1 0 34px;
    place-items: center;
    min-width: 34px;
    max-width: 48px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #dcecf3;
    box-shadow: none;
    font-size: 1.15rem;
    line-height: 1;
    touch-action: manipulation;
  }
  .mobile-game-nav > button:active { background: rgb(188 236 255 / 12%); color: #bcecff; }

  /* -- Party HUD: ajustar -- */
  .party-hud {
    left: 0.5rem;
    width: min(240px, calc(100vw - 1rem));
    padding: 0.4rem 0.5rem;
  }

  /* -- Painéis laterais: ocupar a tela no mobile -- */
  .inventory-panel {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: none;
  }
  /* Cérebro: reduzir o diagrama para caber na tela do celular */
  .brain-ui .brain-header {
    margin-bottom: 0.3rem;
  }
  .brain-ui h2, .brain-ui .inventory-panel h2 {
    font-size: 0.85rem;
  }
  .mlp-diagram {
    transform: scale(0.5);
    transform-origin: top left;
    margin-left: 0;
    /* Compensa o espaço morto: o layout box é 560x320, mas o visual é 280x160 */
    margin-bottom: -160px;
  }
  .brain-ui #orb-inventory-panel {
    padding: 0.4rem 0.3rem 0.5rem;
  }
  .brain-ui #orb-inventory-panel .inventory-grid {
    grid-template-columns: repeat(4, 44px);
    grid-auto-rows: 44px;
    height: 300px;
    max-height: 300px;
    gap: 0.3rem;
    padding: 0.3rem;
    align-content: start;
    justify-content: center;
  }
  .brain-ui #orb-inventory-panel .inventory-slot { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .equipment-ui {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: none;
  }
  .equipment-main-layout {
    grid-template-columns: 1fr;
  }
  .equipment-left-column {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .equipment-left-column .equipment-grid {
    flex: 0 0 auto;
  }
  #drop-inventory-panel .inventory-grid {
    grid-template-columns: repeat(4, 42px);
    height: auto;
    max-height: 180px;
  }

  /* -- Painéis centralizados: manter centralização, ajustar largura -- */
  .mailbox-ui { width: min(92vw, 380px); }
  .shop-ui { width: min(96vw, 860px); height: min(88vh, 550px); }
  .friends-ui { width: min(92vw, 340px); }
  .admin-players-ui { width: min(92vw, 360px); }
  .admin-player-details-ui { width: 94vw; max-height: 92vh; padding: .65rem; }
  .admin-player-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-slots.equipment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-detail-slots.orbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-detail-item-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .minimap-ui { width: min(96vw, 720px); }
  .area-info-ui { width: min(94vw, 620px); }

  .brain-ui,
  body .mailbox-ui,
  body .shop-ui,
  body .orb-evolution-ui,
  body .profession-ui,
  body .equipment-ui,
  body .minimap-ui,
  body .friends-ui {
    inset: 0 0 var(--mobile-game-nav-height);
    height: calc(100vh - var(--mobile-game-nav-height));
    height: calc(100dvh - var(--mobile-game-nav-height));
  }
  body .game-settings-modal { inset: 0 0 var(--mobile-game-nav-height); }
  body .game-settings-modal .game-settings-card {
    height: calc(100vh - var(--mobile-game-nav-height));
    height: calc(100dvh - var(--mobile-game-nav-height));
  }

  /* -- Tutorial: ajustar posio -- */
  .tutorial-message { right: 0.5rem; bottom: 8rem; width: min(260px, calc(100vw - 1rem)); }
  .tutorial-arrow { right: 3rem; bottom: 3.6rem; }
}

/* ===== Craft Tab ===== */
.craft-slots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.8rem 0;
  flex-wrap: wrap;
}

.craft-slot {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px dotted #526b80;
  border-radius: 5px;
  background: rgb(12 20 29 / 55%);
  color: #94aabd;
  font-size: 0.6rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.craft-slot.drag-over {
  border-color: #55f47b;
  background: #246b3c;
  box-shadow: 0 0 16px rgb(85 244 123 / 45%);
}

.craft-slot.filled {
  border-style: solid;
  border-color: #4e7391;
  background: rgb(23 34 45 / 0.9);
}

.craft-slot img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.craft-result {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0.8rem auto;
  border: 2px solid #4e7391;
  border-radius: 8px;
  background: rgb(12 20 29 / 55%);
  color: #94aabd;
  font-size: 0.6rem;
  text-align: center;
}

.craft-result.ready {
  border-color: #3fe07d;
  box-shadow: 0 0 16px rgb(63 224 125 / 30%);
}

.craft-result.refinement-result,
.orb-item.regular-item.alto-refinamento-item {
  border-color: #5aa9ff;
  background: #173b67;
  color: #d9efff;
}

.craft-result img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.craft-quantity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.8rem 0;
  color: #dcecf3;
  font-size: 0.75rem;
}

.craft-quantity-input {
  width: 70px;
  padding: 0.3rem 0.5rem;
  border: 1px solid #4e7391;
  border-radius: 4px;
  background: rgb(12 20 29 / 80%);
  color: #dcecf3;
  font-size: 0.75rem;
  text-align: center;
}

.craft-max-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid #4e7391;
  border-radius: 4px;
  background: #1d4058;
  color: #bcecff;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s;
}

.craft-max-btn:hover {
  background: #2a5a7a;
}

#craft-confirm, #ferreiro-craft-confirm {
  display: block;
  width: auto;
  min-width: 150px;
  margin: 0.55rem auto 0;
  padding: 0.45rem 0.8rem;
  background: #6b4a20;
  border: 1px solid #c99a45;
  color: #ffe5a3;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

#craft-confirm:hover:not(:disabled), #ferreiro-craft-confirm:hover:not(:disabled) {
  background: #8b5a2a;
  box-shadow: 0 0 12px rgb(201 154 69 / 40%);
}

#craft-confirm:disabled, #ferreiro-craft-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ===== Contador do resultado do Craft ===== */
.craft-result { position: relative; }
.craft-result-count {
  position: absolute;
  right: -8px;
  bottom: -8px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #1d4058;
  border: 1px solid #4e7391;
  color: #bcecff;
  font-size: 0.62rem;
  font-weight: 700;
}