/* Acabamento comum das partes do jogo que ainda usavam o tema marrom. */
#screen-game {
  --hud-navy: #061c28;
  --hud-navy-light: #103b48;
  --hud-gold: #d8ad58;
  --hud-gold-light: #ffe19a;
  --hud-cyan: #45dce9;
}

/* Retrato, nome e recursos. Mantem o retrato original de cada classe. */
#screen-game .mobile-hud-art {
  background: linear-gradient(145deg, #eac574, #8c6226 44%, #dfb964 75%, #6d4a20);
  box-shadow: 0 6px 20px #000b;
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
}
#screen-game .mobile-hud-art::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, #103f4a, #041722 62%, #092c38);
  box-shadow: inset 0 0 0 1px #327282, inset 0 0 24px #001018;
  clip-path: inherit;
}
#screen-game .mobile-hud-art::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle, #e4ffff 0 20%, #2adbe8 28% 48%, #ae8439 55% 69%, transparent 75%) 0 50% / 14px 14px no-repeat,
    radial-gradient(circle, #e4ffff 0 20%, #2adbe8 28% 48%, #ae8439 55% 69%, transparent 75%) 100% 50% / 14px 14px no-repeat,
    linear-gradient(#e9ca79, #8b6229) 12px 2px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(#8b6229, #e9ca79) 12px calc(100% - 2px) / calc(100% - 24px) 2px no-repeat;
}
#screen-game .mobile-head-back,
#screen-game .mobile-frame,
#screen-game .mobile-badge { display: none; }
#screen-game .mobile-portrait {
  left: 17px;
  top: 18px;
  z-index: 2;
  border: 2px solid #d6ac55;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #103945, 0 0 13px #30d0e456;
}
#screen-game .mobile-name {
  left: 113px;
  top: 20px;
  max-width: 238px;
  color: #ffe3a0;
  font: bold 21px/26px Georgia, serif;
  text-shadow: 0 2px 4px #000;
}
#screen-game .mobile-level {
  left: 38px;
  top: 106px;
  width: 41px;
  height: 27px;
  color: #ffe59e;
  font: bold 17px/26px Georgia, serif;
  background: linear-gradient(180deg, #17434e, #061b27);
  box-shadow: inset 0 0 0 1px #d9b05d;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
#screen-game .mobile-vital {
  left: 113px;
  width: 239px;
  overflow: hidden;
  background: #03121b;
  box-shadow: inset 0 0 0 1px #a47d3b, inset 0 1px 5px #000;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
#screen-game .mobile-hp { top: 60px; height: 18px; }
#screen-game .mobile-mp { top: 87px; height: 12px; }
#screen-game .mobile-sp { top: 109px; height: 9px; }
#screen-game .mobile-vital i { width: 100% !important; height: 100% !important; background-position: 0 0 !important; background-size: 100% 100% !important; }
#screen-game .mobile-hp i { background-image: linear-gradient(180deg, #ff9d80, #c43f34 55%, #691a1b) !important; }
#screen-game .mobile-mp i { background-image: linear-gradient(180deg, #a0e6ff, #3387c8 55%, #19436e) !important; }
#screen-game .mobile-sp i { background-image: linear-gradient(180deg, #fff0a7, #e6ad38 55%, #8d5d17) !important; }
#screen-game .mobile-open { left: 12px; top: 13px; z-index: 6; }
#screen-game .mobile-open:focus-visible { outline-color: #4be1ed; }

/* Mapa: preserva o canvas e os marcadores do servidor. */
#screen-game .minimap-art {
  background: linear-gradient(145deg, #efd183, #896126 46%, #d8ab53);
  box-shadow: inset 0 0 0 3px #d8ae5d, inset 0 0 0 5px #103946, 0 7px 18px #000b;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
#screen-game .minimap-frame { display: none; }
#screen-game .minimap-name,
#screen-game .minimap-mode {
  color: #ffe4a3;
  background: linear-gradient(180deg, #103b48ef, #041b28ef);
  box-shadow: inset 0 0 0 1px #b88d44;
  font-family: Georgia, serif;
}
#screen-game .minimap-name { top: 6px; left: 8px; width: 182px; }
#screen-game .minimap-mode { bottom: 6px; left: 6px; width: 186px; }
#screen-game .minimap-clock,
#screen-game .minimap-coords { color: #fff0c5; text-shadow: 0 1px 3px #000, 0 0 5px #00131f; }
#screen-game .minimap-toggle:focus-visible { outline-color: #49dce9; }

/* Area, alvo e ultimos drops. */
#screen-game .zone-bar,
#screen-game .hud > .fight,
#screen-game .log-dock,
#screen-game #win-menu,
#screen-game #win-ranking {
  border: 2px solid #cba054;
  border-radius: 0;
  background: linear-gradient(155deg, #103b48ef, #041923f5 56%, #082a36f2);
  box-shadow: inset 0 0 0 2px #164754, 0 7px 20px #000b;
  color: #ebdfc3;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
#screen-game .zone-name { display: flex; align-items: center; gap: 9px; }
#screen-game .zone-name > div { min-width: 0; }
#screen-game .zone-icon { width: 26px; height: 26px; color: #f3c76d; filter: drop-shadow(0 0 5px #3de0e077); }
#screen-game .zone-name h3,
#screen-game .win-head h3 { color: #ffe09a; font: bold 15px Georgia, serif; letter-spacing: 1px; }
#screen-game .zone-name h3,
#screen-game .zone-name p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-game .zone-name p { color: #a9c5c8; }
#screen-game .world-status { border-top-color: #8c7139; color: #b8d0d1; }
#screen-game .world-actions { display: grid; grid-template-columns: 1fr 1fr; }
#screen-game .world-actions .btn { min-width: 0; padding: 7px 4px; }
#screen-game .hud > .fight { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; min-height: 88px; }
#screen-game .hud > .fight.empty { display: block; min-height: 0; color: #c4d0cc; font-family: Georgia, serif; }
#screen-game .foe-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid #c89d4d;
  background: radial-gradient(circle, #195363, #061b27 75%);
  color: #f2ce77;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
#screen-game .foe-mark .ic { width: 27px; height: 27px; }
#screen-game .foe-info { min-width: 0; }
#screen-game .foe-kicker { display: block; color: #5bd9e2; font: bold 9px Georgia, serif; letter-spacing: 1.2px; }
#screen-game .foe-name { color: #ffe2a0; font: bold 15px Georgia, serif; }
#screen-game .foe-name .lvl,
#screen-game .foe-meta { color: #b7ccce; }
#screen-game .bar.mob { border-color: #b48442; background: #031722; }
#screen-game .log-dock h4 { display: flex; align-items: center; gap: 6px; color: #ffe09a; font: bold 11px Georgia, serif; letter-spacing: 1px; }
#screen-game .log-dock h4 .ic { width: 15px; height: 15px; }
#screen-game .log-dock .cell { border-color: #a88443; background: #082633; }

/* Botoes que ainda eram marrons em paineis e janelas. */
#screen-game .btn,
#modal-zones .btn {
  border-color: #a98440;
  border-radius: 2px;
  background: linear-gradient(180deg, #16424e, #061c29);
  color: #f0dba7;
  font-family: Georgia, serif;
}
#screen-game .btn:hover,
#screen-game .btn:focus-visible,
#modal-zones .btn:hover,
#modal-zones .btn:focus-visible { border-color: #4bdfeb; color: #fff0bd; box-shadow: 0 0 8px #39d8e068; }
#screen-game .btn.primary,
#screen-game .btn.on { border-color: #d8ad58; background: linear-gradient(180deg, #4c522e, #1b2e1d); color: #ffe39c; }
#screen-game .btn:disabled { opacity: .48; box-shadow: none; }
#screen-game :is(.btn, .plate-btn, .aba, .ficha-x):focus-visible,
#modal-zones button:focus-visible { outline: 2px solid #4ce4ee; outline-offset: 2px; }

/* Janela de personagem e blocos internos. A mochila ja tem este tema. */
#screen-game #win-char .ficha-quadro {
  color: #eadfc6;
  background: linear-gradient(145deg, #ffe49b, #956920 40%, #ddb361 74%, #704b1c);
  filter: drop-shadow(0 10px 24px #000c);
}
#screen-game #win-char .ficha-quadro::before { background: linear-gradient(150deg, #0d3643, #041923 58%, #082a35); box-shadow: inset 0 0 0 1px #32717e; }
#screen-game #win-char .ficha-quadro.ornate::after {
  opacity: 1;
  background:
    radial-gradient(circle, #e2ffff 0 20%, #32d9e9 27% 48%, #ae8132 55% 68%, transparent 74%) 0 50% / 14px 14px no-repeat,
    radial-gradient(circle, #e2ffff 0 20%, #32d9e9 27% 48%, #ae8132 55% 68%, transparent 74%) 100% 50% / 14px 14px no-repeat,
    linear-gradient(#e9c472, #8d6427) 12px 2px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(#8d6427, #e9c472) 12px calc(100% - 2px) / calc(100% - 24px) 2px no-repeat;
}
#screen-game #win-char .ficha-topo { border-bottom-color: #a47e3d; }
#screen-game #win-char .ficha-x { background: #092b39; box-shadow: inset 0 0 0 1px #d1a557; }
#screen-game #win-char .slot { background: linear-gradient(180deg, #113743, #061b27); box-shadow: inset 0 0 0 2px #8f713b; }
#screen-game #win-char .ficha-retrato { background: radial-gradient(ellipse at 50% 80%, #185062, #051a25 75%); box-shadow: inset 0 0 0 1px #ad8743; }
#screen-game #win-char .ficha-resumo,
#screen-game #win-char .ficha-bloco { background: linear-gradient(180deg, #0f3541, #061c27); box-shadow: inset 0 0 0 1px #977b42; }
#screen-game #win-char .ficha-resumo span,
#screen-game #win-char .derived span { color: #a9c5c7; }
#screen-game #win-char .ficha-resumo b { color: #ffe2a0; }
#screen-game #win-char .ficha-bloco-topo { border-bottom-color: #806935; }
#screen-game #win-char .stat-row,
#screen-game #win-char .sessao .rate { background: #082531; }
#screen-game #win-char .derived div + div { border-top-color: #204553; }
#screen-game #win-char .plate-btn { background: linear-gradient(180deg, #16404c, #061b27); box-shadow: inset 0 0 0 1px #b58c44; }
#screen-game #win-char .plate-btn:hover { box-shadow: inset 0 0 0 1px #4fdfeb, 0 0 8px #3bdbe370; }
#screen-game #win-char .plate-btn.on { background: linear-gradient(180deg, #4b522e, #1b2d1d); }

/* Automatico, menu, ranking e mapas. */
#screen-game .autoconf-quadro { background: linear-gradient(145deg, #ffeba2, #91641f 38%, #e4b965 72%, #724d1c); }
#screen-game .autoconf-quadro::before { background: linear-gradient(150deg, #0e3845, #041923 60%, #092c37); box-shadow: inset 0 0 0 1px #316c79; }
#screen-game .autoconf .plate-btn { background: linear-gradient(180deg, #16424e, #061b27); box-shadow: inset 0 0 0 1px #a98944; color: #f1daa2; }
#screen-game .autoconf .plate-btn:hover,
#screen-game .autoconf .plate-btn:focus-visible { background: linear-gradient(180deg, #1c5260, #0a3040); box-shadow: inset 0 0 0 1px #4adddf, 0 0 8px #45dce870; }
#screen-game .autoconf .plate-btn.on { background: linear-gradient(180deg, #4a5330, #1c2d1e); box-shadow: inset 0 0 0 1px #e4b963; }
#screen-game .autoconf-coluna,
#screen-game .autoconf-info { border-color: #a48443; border-radius: 2px; background: linear-gradient(150deg, #103743, #061b27); }
#screen-game .autoconf-coluna h3 { border-bottom-color: #8f733b; }
#screen-game .autoconf-slot b,
#screen-game .autoconf-escolher,
#screen-game .autoconf-tirar,
#screen-game .autoconf-lista { border-color: #a58343; background: #082733; }
#screen-game .autoconf-opcao:hover,
#screen-game .autoconf-opcao:focus-visible { background: #164454; border-color: #49dbe8; }
#screen-game .autoconf-info b,
#screen-game .autoconf-faixa label b { color: #ffe39b; }
#screen-game .autoconf-check input,
#screen-game .autoconf-faixa input[type=range] { accent-color: #40c7d8; }
#screen-game .win-head { border-bottom: 1px solid #99753b; padding-bottom: 8px; }
#screen-game .win-head h3 { display: flex; align-items: center; gap: 7px; }
#screen-game .win-head .ic { width: 19px; height: 19px; color: #f2c76c; }
#screen-game .menu-lista .btn { display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 10px; text-decoration: none; }
#screen-game .menu-lista .ic { width: 18px; height: 18px; color: #f4c970; }
#screen-game .menu-lista kbd { margin-left: auto; border-color: #b78a42; color: #ffe4a0; }
#screen-game .ranking-lista { color: #c7d3cc; }
#screen-game .ranking-lista b,
#screen-game .ranking-lista .eu { color: #ffe4a4; }

#modal-zones { background: #020b11d9; }
#modal-zones .modal-box {
  border: 2px solid #d3a856;
  border-radius: 2px;
  background: linear-gradient(150deg, #103844, #041923 62%, #0a2b36);
  box-shadow: inset 0 0 0 2px #225969, 0 14px 36px #000d;
  color: #eadfc6;
}
#modal-zones .modal-head { border-bottom: 1px solid #94733b; padding-bottom: 9px; }
#modal-zones .modal-head h3 { display: flex; align-items: center; gap: 8px; color: #ffe09a; font: bold 21px Georgia, serif; }
#modal-zones .modal-head .ic { width: 23px; height: 23px; fill: currentColor; }
#modal-zones .zone-card { border-color: #a78746; border-radius: 2px; background: #082632; }
#modal-zones .zone-card:hover { border-color: #51dce7; box-shadow: 0 0 9px #36dce566; }
#modal-zones .zone-card.current { border-color: #f0cc79; }
#modal-zones .zone-card .thumb { background-color: #061b26; }
#modal-zones .zone-card b { color: #ffe0a0; }
#modal-zones .zone-card small { color: #b3c9cc; }

.tooltip,
.toast {
  border-color: #bb914b;
  border-radius: 2px;
  background: linear-gradient(150deg, #0e3542f5, #061922f8);
  box-shadow: inset 0 0 0 1px #286274, 0 7px 22px #000b;
  color: #eee1c2;
}
.tooltip h5 { color: #ffe09a; }
.tooltip .line { color: #bad0d1; }

@media (max-width: 620px) {
  #screen-game .topbar .mobile-minimap { width: 104px; height: 104px; }
  #screen-game .topbar .minimap-art { transform: scale(.525); }
  #screen-game .topbar .atalhos-topo { width: min(220px, 100%); }
  #screen-game .atalhos-topo .icone { width: 34px; height: 34px; }
  #screen-game .atalhos-topo .icone .ic { width: 21px; height: 21px; }
  #screen-game .zone-bar { gap: 5px; }
  #screen-game .zone-icon { width: 21px; height: 21px; }
  #screen-game .zone-name h3 { font-size: 13px; }
  #screen-game .zone-name p { font-size: 10px; }
  #screen-game .zone-bar .world-status { padding-top: 4px; }
  #screen-game .world-actions .btn { font-size: 11px; }
  #screen-game .hud > .fight { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; min-height: 0; padding: 6px 8px; }
  #screen-game .foe-mark { width: 34px; height: 34px; }
  #screen-game .foe-mark .ic { width: 22px; height: 22px; }
  #screen-game .foe-meta { display: none; }
  #screen-game .foe-name { margin: 0 0 3px; font-size: 13px; }
  #screen-game .bar.mob { height: 15px; }
  #screen-game .chat-linhas { height: 64px; }
}

@media (max-width: 620px) and (max-height: 760px) {
  #screen-game .topbar .mobile-minimap { width: 90px; height: 90px; }
  #screen-game .topbar .minimap-art { transform: scale(.455); }
  #screen-game .topbar .atalhos-topo { width: min(205px, 100%); gap: 3px; }
  #screen-game .atalhos-topo .icone { width: 32px; height: 32px; }
  #screen-game .atalhos-topo .icone .ic { width: 19px; height: 19px; }
  #screen-game .zone-name p { display: none; }
  #screen-game .chat-painel { gap: 6px; }
  #screen-game .chat-linhas { height: 32px; }
}