/*
 * PokeUltraz UI Theme
 * Camada visual carregada depois do CSS legado. Mantém IDs, eventos e sistemas
 * intactos e concentra aqui a identidade visual e os ajustes responsivos.
 */

:root {
  --rush-orange: #ff5714;
  --rush-orange-bright: #ff7a1a;
  --rush-orange-soft: rgba(255, 87, 20, .16);
  --rush-yellow: #ffc928;
  --rush-yellow-soft: rgba(255, 201, 40, .14);
  --rush-green: #36c58a;
  --rush-green-soft: rgba(54, 197, 138, .14);
  --rush-red: #f04438;
  --rush-ink: #080907;
  --rush-ink-2: #0d100d;
  --rush-panel: rgba(10, 12, 10, .94);
  --rush-panel-strong: rgba(7, 9, 7, .98);
  --rush-surface: rgba(255, 255, 255, .045);
  --rush-surface-hover: rgba(255, 255, 255, .075);
  --rush-line: rgba(255, 132, 54, .24);
  --rush-line-soft: rgba(255, 255, 255, .085);
  --rush-text: #f6f5ef;
  --rush-muted: #a8aaa2;
  --rush-radius: 15px;
  --rush-shadow: 0 16px 44px rgba(0, 0, 0, .48);
  --rush-safe-top: env(safe-area-inset-top, 0px);
  --rush-safe-right: env(safe-area-inset-right, 0px);
  --rush-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rush-safe-left: env(safe-area-inset-left, 0px);
}

body {
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  background: var(--rush-ink);
  color: var(--rush-text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--rush-yellow) !important;
  outline-offset: 2px;
}

#game {
  position: fixed;
  inset: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 87, 20, .09), transparent 32%),
    var(--rush-ink);
}

#world {
  filter: saturate(1.06) contrast(1.025);
}

#game::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .23), transparent 16%, transparent 78%, rgba(0, 0, 0, .28)),
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .22) 100%);
}

/* Superfícies principais */
.panel,
#modal,
.gx-win,
.mk2-win,
.dp-win,
.wk-win,
.gd-win,
.rr-box,
.pkhb,
.cv2-pkdet {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .025), transparent 34%),
    var(--rush-panel) !important;
  border: 1px solid var(--rush-line) !important;
  border-radius: var(--rush-radius) !important;
  box-shadow: var(--rush-shadow), inset 0 1px rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.panel.hud {
  overflow: visible;
}

.btn,
.gx-btn,
.adm-btn,
.mk2-cta,
.gd-b,
.rank-tab,
.ct,
.gx-item,
.gx-tab {
  border-radius: 10px !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:hover,
.gx-btn:hover,
.adm-btn:hover,
.mk2-cta:hover,
.gd-b:hover {
  border-color: rgba(255, 122, 26, .7) !important;
  background-color: var(--rush-surface-hover) !important;
}

.btn:active,
.gx-btn:active,
.adm-btn:active,
.mk2-cta:active,
.gd-b:active {
  transform: translateY(1px);
}

.btn.gold,
.gx-btn.gold,
.mk2-cta {
  color: #1b1005 !important;
  border-color: rgba(255, 201, 40, .72) !important;
  background: linear-gradient(135deg, var(--rush-yellow), var(--rush-orange-bright)) !important;
  box-shadow: 0 8px 22px rgba(255, 87, 20, .19);
}

.tag {
  color: #d7d8d1;
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .11);
}

/* HUD do treinador */
#player-panel {
  top: 16px;
  left: 16px;
  width: 258px;
  padding: 12px 13px 11px;
  border-color: rgba(255, 201, 40, .34) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .48),
    inset 0 3px var(--rush-orange),
    inset 0 1px rgba(255, 255, 255, .05) !important;
}

#player-panel::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 12px;
  top: 12px;
  border-radius: 50%;
  background: var(--rush-green);
  box-shadow: 0 0 0 4px rgba(54, 197, 138, .11), 0 0 14px rgba(54, 197, 138, .48);
}

.pp-head {
  padding-right: 16px;
}

#pp-name {
  color: var(--rush-yellow);
  font-size: 15px;
  letter-spacing: .01em;
}

#pp-sub,
.dim {
  color: var(--rush-muted);
}

.pp-poke {
  margin-top: 9px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .055);
}

#pp-sprite {
  background:
    radial-gradient(circle, rgba(255, 201, 40, .12), transparent 68%),
    #0a0c0a;
  border-color: rgba(255, 132, 54, .28);
  border-radius: 11px;
}

.bar {
  height: 8px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .085);
}

.bar.hp > div {
  background: linear-gradient(90deg, #20a970, #55e6a5);
}

.bar.exp > div {
  background: linear-gradient(90deg, var(--rush-orange), var(--rush-yellow));
}

.pp-cash {
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .055);
}

#btn-bonus {
  border-color: rgba(255, 201, 40, .34);
  color: var(--rush-yellow);
  background: linear-gradient(135deg, rgba(255, 201, 40, .10), rgba(255, 87, 20, .08));
}

#btn-bonus:hover {
  border-color: var(--rush-yellow);
  background: linear-gradient(135deg, rgba(255, 201, 40, .18), rgba(255, 87, 20, .14));
}

/* Dock principal: duas linhas, categorias diferenciadas por cor */
#topbar {
  top: 38px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  display: grid;
  grid-template-columns: repeat(11, 42px);
  gap: 6px;
  padding: 10px;
  border-color: rgba(255, 87, 20, .31) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .46),
    inset 0 1px rgba(255, 255, 255, .055),
    inset 0 -2px rgba(255, 87, 20, .14) !important;
  z-index: 46;
}

.rush-dock-brand {
  position: absolute;
  left: 50%;
  top: -29px;
  transform: translateX(-50%);
  height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 4px 7px;
  border: 1px solid rgba(255, 87, 20, .34);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: rgba(8, 9, 7, .94);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .22);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

.rush-dock-brand img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

#topbar .tb {
  --nav-accent: var(--rush-orange);
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 11px;
  color: var(--rush-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018));
  box-shadow: inset 0 -2px color-mix(in srgb, var(--nav-accent) 45%, transparent);
  scroll-snap-align: center;
}

#topbar .tb:is(
  [data-modal="team"],
  [data-modal="expshare"],
  [data-modal="bag"],
  [data-modal="gifts"],
  [data-modal="boost"],
  [data-modal="reroll"]
) {
  --nav-accent: var(--rush-yellow);
}

/* Amigos pertence ao menu Social e segue o mesmo Laranja Neon da interface. */
#topbar .tb[data-modal="gifts"] { --nav-accent: var(--rush-orange); }

#topbar .tb:is(
  [data-modal="rank"],
  [data-modal="market"],
  [data-modal="affiliate"],
  [data-modal="polls"],
  [data-modal="guild"],
  [data-modal="streamers"]
) {
  --nav-accent: var(--rush-green);
}

#topbar .tb:is(
  [data-modal="brokes"],
  [data-modal="updates"],
  [data-modal="settings"],
  [data-modal="profile"]
),
#topbar #btn-logout {
  --nav-accent: var(--rush-red);
}

#topbar .tb:hover {
  z-index: 3;
  border-color: color-mix(in srgb, var(--nav-accent) 72%, white 8%);
  color: #fff;
  background: color-mix(in srgb, var(--nav-accent) 18%, #111 82%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .3),
    inset 0 -2px var(--nav-accent);
  transform: translateY(-2px);
}

#topbar .tb:active {
  transform: translateY(0) scale(.96);
}

#topbar .tb.ic img {
  width: 27px;
  height: 27px;
  opacity: .96;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .72));
}

#topbar .tb::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  transform: translate(-50%, -3px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 48%, transparent);
  border-radius: 9px;
  background: rgba(7, 8, 7, .98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  color: #f5f4ef;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

#topbar .tb:hover::after,
#topbar .tb:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Auto-Helper */
#auto-panel {
  top: 16px;
  right: 16px;
  width: 270px;
  padding: 11px;
  max-height: calc(100dvh - 32px);
  border-color: rgba(54, 197, 138, .26) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .48),
    inset 0 3px var(--rush-green),
    inset 0 1px rgba(255, 255, 255, .045) !important;
}

.ap-title {
  min-height: 34px;
  margin: 0 -2px 8px;
  padding: 0 3px 8px;
  border-bottom-color: rgba(255, 255, 255, .08);
  color: #effdf7;
  font-size: 13px;
  letter-spacing: .02em;
}

#ah-min,
.cp-mgr,
#mm-hide {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: var(--rush-muted);
  background: rgba(255, 255, 255, .045);
}

#ah-min:hover,
.cp-mgr:hover,
#mm-hide:hover {
  border-color: var(--rush-orange);
  color: #fff;
  background: var(--rush-orange-soft);
}

.ah-top {
  gap: 7px;
  margin-bottom: 7px;
}

.ah-go {
  min-height: 48px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 11px;
  color: #f1f3ec;
  background: rgba(255, 255, 255, .04);
}

.ah-go:hover {
  border-color: rgba(255, 122, 26, .58);
  color: var(--rush-yellow);
  background: var(--rush-orange-soft);
  transform: translateY(-1px);
}

.ah-cat {
  color: var(--rush-orange-bright);
  letter-spacing: .09em;
}

.ah-cat::after {
  background: linear-gradient(90deg, rgba(255, 87, 20, .42), transparent);
}

.ah-row {
  padding: 7px 8px;
  margin: 5px 0;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 11px;
  background: rgba(255, 255, 255, .032);
}

.ah-row:hover {
  border-color: rgba(255, 122, 26, .33);
  background: rgba(255, 255, 255, .05);
}

.ah-row.on {
  border-color: rgba(54, 197, 138, .43);
  background: linear-gradient(135deg, rgba(54, 197, 138, .13), rgba(54, 197, 138, .04));
}

.ah-row.on .ah-txt b {
  color: #dffbef;
}

#auto-panel .ah-row input[type=checkbox]:checked + .ah-sw {
  border-color: var(--rush-green);
  background: rgba(54, 197, 138, .38);
  box-shadow: 0 0 13px rgba(54, 197, 138, .18);
}

#auto-panel .ah-row input[type=checkbox]:checked + .ah-sw::after {
  background: #ecfff6;
}

.ah-bottom {
  border-top-color: rgba(255, 255, 255, .08);
}

.ah-body {
  scrollbar-color: rgba(255, 87, 20, .42) transparent;
}

/* Captura, chat, minimapa e informações contextuais */
#capture-panel {
  right: 16px;
  bottom: 16px;
  width: 282px;
  padding: 11px;
  border-color: rgba(255, 87, 20, .28) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .48),
    inset 0 3px var(--rush-orange),
    inset 0 1px rgba(255, 255, 255, .045) !important;
}

.cp-head {
  min-height: 32px;
  border-bottom-color: rgba(255, 255, 255, .08);
}

.cp-title,
.mm-head {
  color: #fff;
  font-weight: 800;
}

#cp-count.has {
  color: var(--rush-yellow);
  border-color: rgba(255, 201, 40, .46);
  background: var(--rush-yellow-soft);
}

.cp-ball,
.cp-row,
.task-row,
.zone-row,
.poke-row,
.dex-cell,
.ha-card,
.ha-loot-row,
.bonus-row,
.upd-card,
.off-rep .or-card {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  border-radius: 11px !important;
}

.cp-row:hover,
.task-row:hover,
.zone-row:hover,
.poke-row:hover,
.dex-cell:hover {
  border-color: rgba(255, 122, 26, .36) !important;
}

#chat {
  left: 16px;
  bottom: 16px;
  width: 360px;
  height: 220px;
  border-color: rgba(255, 201, 40, .25) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .48),
    inset 0 3px var(--rush-yellow),
    inset 0 1px rgba(255, 255, 255, .045) !important;
}

.chat-tabs,
.cv2-tabs {
  gap: 5px;
  padding: 9px 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-tabs::-webkit-scrollbar,
.cv2-tabs::-webkit-scrollbar {
  display: none;
}

.ct,
.cv2-ct {
  color: var(--rush-muted);
  border-color: transparent;
  background: transparent;
}

.ct:hover,
.cv2-ct:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
}

.ct.active,
.cv2-ct.on {
  color: var(--rush-yellow);
  border-color: rgba(255, 201, 40, .30);
  background: var(--rush-yellow-soft);
}

.chat-input {
  padding: 8px;
  border-top-color: rgba(255, 255, 255, .075);
}

.chat-input input,
.cv2-input input,
.gx-code,
input,
select,
textarea {
  color: var(--rush-text);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .32);
}

.chat-input input:focus,
.cv2-input input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 122, 26, .72);
  box-shadow: 0 0 0 3px rgba(255, 87, 20, .10);
}

#minimap {
  left: 16px;
  top: 276px;
  border-color: rgba(255, 255, 255, .11) !important;
}

#mm-canvas {
  border-color: rgba(255, 132, 54, .22);
  border-radius: 10px;
}

#zone-label {
  top: 145px;
  margin-top: 0;
  max-width: min(520px, 45vw);
  padding: 6px 12px;
  border: 1px solid rgba(255, 87, 20, .20);
  border-radius: 99px;
  color: #f2f3ed;
  background: rgba(7, 9, 7, .68);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  backdrop-filter: blur(7px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#coords {
  bottom: 13px;
  border-color: rgba(54, 197, 138, .24);
  border-radius: 99px;
  color: #a9f3d0;
  background: rgba(7, 9, 7, .74);
}

/* Modais e janelas dos sistemas */
#modal-bg,
#gx-bg,
.mk2-ov,
.dp-ov,
.gx-ov,
.wk-ov,
.gd-ov,
.pkhb-ov,
.cv2-pkov {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 87, 20, .12), transparent 32%),
    rgba(3, 4, 3, .78) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#modal {
  width: min(820px, 92vw);
  border-color: rgba(255, 87, 20, .32) !important;
}

.modal-head,
.gx-head {
  min-height: 54px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255, 87, 20, .14), transparent 46%);
}

.modal-head::before,
.gx-head::before {
  content: "";
  width: 4px;
  height: 22px;
  margin-right: 9px;
  border-radius: 99px;
  background: linear-gradient(var(--rush-yellow), var(--rush-orange));
  box-shadow: 0 0 14px rgba(255, 87, 20, .28);
}

.modal-head > span,
.gx-head > span {
  flex: 1;
}

#modal-close,
.gx-x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 10px !important;
  color: var(--rush-muted) !important;
  background: rgba(255, 255, 255, .035) !important;
}

#modal-close:hover,
.gx-x:hover {
  color: #fff !important;
  border-color: rgba(240, 68, 56, .48) !important;
  background: rgba(240, 68, 56, .13) !important;
}

#modal-body,
.gx-body {
  padding: 16px;
}

.gx-tabs,
.settings-tabs-nav {
  gap: 6px !important;
  padding: 5px !important;
  border-color: rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .025) !important;
}

.gx-tab,
.settings-tabs-nav [role="tab"] {
  border-radius: 9px !important;
  color: var(--rush-muted) !important;
}

.gx-tab:hover,
.settings-tabs-nav [role="tab"]:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .05) !important;
}

.gx-tab.on,
.settings-tabs-nav [role="tab"].is-active {
  color: #fff4d0 !important;
  border-color: rgba(255, 122, 26, .44) !important;
  background: linear-gradient(135deg, rgba(255, 87, 20, .19), rgba(255, 201, 40, .07)) !important;
  box-shadow: inset 0 -2px rgba(255, 122, 26, .48);
}

.gx-sec,
.adm-sec,
.aff-h,
.mk2-title {
  color: var(--rush-orange-bright) !important;
}

.gx-item {
  border-color: rgba(255, 255, 255, .075) !important;
  background: rgba(255, 255, 255, .032) !important;
}

.gx-item:hover {
  border-color: rgba(255, 122, 26, .43) !important;
  background: var(--rush-orange-soft) !important;
  transform: translateY(-1px);
}

.settings-language-option {
  border-color: rgba(255, 255, 255, .09) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .035) !important;
}

.settings-language-option:hover {
  border-color: rgba(255, 122, 26, .46) !important;
}

.settings-language-option.is-selected {
  border-color: var(--rush-orange) !important;
  background: linear-gradient(145deg, rgba(255, 87, 20, .17), rgba(255, 201, 40, .055)) !important;
  box-shadow: 0 0 0 1px rgba(255, 87, 20, .10), 0 12px 30px rgba(0, 0, 0, .22) !important;
}

.settings-language-globe {
  border-color: rgba(255, 122, 26, .38) !important;
  background: var(--rush-orange-soft) !important;
}

.rank-tab.sel,
.zone-row.current,
.task-row.done,
.dex-cell.caught {
  border-color: rgba(54, 197, 138, .52) !important;
  color: #dffff0 !important;
  background: var(--rush-green-soft) !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: linear-gradient(var(--rush-orange), #9d370f);
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .025);
}

/* A experiência móvel funciona também em retrato. */
#rotate-hint {
  display: none !important;
}

#mob-fabs {
  right: calc(var(--rush-safe-right) + 10px);
  bottom: calc(var(--rush-safe-bottom) + 78px);
  gap: 9px;
  z-index: 82;
}

.fab {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 122, 26, .31);
  border-radius: 16px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 87, 20, .14), rgba(255, 255, 255, .035)),
    rgba(8, 10, 8, .96);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
}

body.show-auto .fab[data-show="auto"],
body.show-cap .fab[data-show="cap"],
body.show-chat .fab[data-show="chat"] {
  border-color: var(--rush-yellow);
  color: var(--rush-yellow);
  background: rgba(255, 87, 20, .22);
  box-shadow: 0 0 0 3px rgba(255, 87, 20, .10), 0 12px 26px rgba(0, 0, 0, .38);
}

/* Notebook compacto e tablets: dock rolável na base, sem colisão com a HUD. */
@media (max-width: 1180px), (pointer: coarse) {
  #topbar {
    top: auto;
    left: calc(var(--rush-safe-left) + 8px);
    right: calc(var(--rush-safe-right) + 8px);
    bottom: calc(var(--rush-safe-bottom) + 8px);
    width: auto;
    max-width: none;
    transform: none;
    display: flex;
    gap: 7px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 16px !important;
  }

  #topbar::-webkit-scrollbar {
    display: none;
  }

  .rush-dock-brand,
  #topbar .tb::after {
    display: none;
  }

  #topbar .tb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  #topbar .tb.ic img {
    width: 29px;
    height: 29px;
  }

  #chat,
  #capture-panel {
    bottom: calc(var(--rush-safe-bottom) + 76px);
  }

  #zone-label {
    top: auto;
    bottom: calc(var(--rush-safe-bottom) + 76px);
    max-width: min(560px, calc(100vw - 170px));
  }

  #coords {
    display: none;
  }
}

/* Tablet e smartphone: painéis acionados pelos três botões contextuais. */
@media (max-width: 980px), (pointer: coarse) {
  #mob-fabs {
    display: flex;
  }

  #player-panel {
    top: calc(var(--rush-safe-top) + 8px);
    left: calc(var(--rush-safe-left) + 8px);
    width: min(272px, calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - 76px));
    padding: 9px 10px;
    transform: none;
  }

  .pp-poke {
    margin: 6px -2px 4px;
    padding: 3px;
  }

  .pp-cash {
    margin-top: 5px;
    padding: 5px 7px;
  }

  #btn-bonus {
    margin-top: 5px;
    padding: 5px;
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    z-index: 80;
    left: calc(var(--rush-safe-left) + 8px);
    right: calc(var(--rush-safe-right) + 70px);
    width: auto !important;
    max-width: 430px;
    bottom: calc(var(--rush-safe-bottom) + 76px);
    top: auto;
  }

  body.show-auto #auto-panel {
    max-height: min(62dvh, 560px);
  }

  body.show-cap #capture-panel {
    max-height: min(58dvh, 500px);
    overflow-y: auto;
  }

  body.show-chat #chat {
    height: min(48dvh, 420px) !important;
  }

  #zone-label {
    left: calc(var(--rush-safe-left) + 8px);
    right: calc(var(--rush-safe-right) + 70px);
    width: auto;
    max-width: none;
    transform: none;
    text-align: center;
  }

  #modal,
  .gx-set .gx-win {
    width: calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - 16px) !important;
    max-width: 720px !important;
    max-height: calc(100dvh - var(--rush-safe-top) - var(--rush-safe-bottom) - 16px) !important;
    border-radius: 17px !important;
  }

  .gx-tabs,
  .settings-tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .gx-tab,
  .settings-tabs-nav [role="tab"] {
    flex: 0 0 auto !important;
    min-width: max-content;
    min-height: 44px;
  }

  .settings-language-options {
    grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
  }

  .settings-language-option {
    scroll-snap-align: start;
  }
}

/* Smartphones: modal em folha, dock e controles ao alcance do polegar. */
@media (max-width: 600px) {
  #game::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 24%, rgba(0, 0, 0, .21));
  }

  #player-panel {
    width: min(258px, calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - 72px));
    border-radius: 13px !important;
  }

  #pp-name {
    max-width: 142px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #topbar {
    left: calc(var(--rush-safe-left) + 5px);
    right: calc(var(--rush-safe-right) + 5px);
    bottom: calc(var(--rush-safe-bottom) + 5px);
    padding: 6px;
    border-radius: 14px !important;
  }

  #topbar .tb {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #mob-fabs {
    right: calc(var(--rush-safe-right) + 8px);
    bottom: calc(var(--rush-safe-bottom) + 68px);
  }

  .fab {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    left: calc(var(--rush-safe-left) + 6px);
    right: calc(var(--rush-safe-right) + 64px);
    bottom: calc(var(--rush-safe-bottom) + 67px);
    max-width: none;
    border-radius: 15px !important;
  }

  body.show-chat #chat {
    height: min(52dvh, 430px) !important;
  }

  #zone-label {
    left: calc(var(--rush-safe-left) + 6px);
    right: calc(var(--rush-safe-right) + 64px);
    bottom: calc(var(--rush-safe-bottom) + 68px);
    padding: 5px 9px;
    font-size: 10px;
  }

  #modal-bg,
  #gx-bg,
  .mk2-ov,
  .dp-ov,
  .gx-ov,
  .wk-ov,
  .gd-ov,
  .pkhb-ov {
    align-items: flex-end !important;
    padding: var(--rush-safe-top) var(--rush-safe-right) var(--rush-safe-bottom) var(--rush-safe-left) !important;
  }

  #modal,
  .gx-set .gx-win {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(92dvh - var(--rush-safe-bottom)) !important;
    border-radius: 19px 19px 0 0 !important;
    border-bottom: 0 !important;
  }

  .modal-head,
  .gx-head {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 52px;
    background:
      linear-gradient(90deg, rgba(255, 87, 20, .15), transparent 52%),
      rgba(8, 10, 8, .97);
    backdrop-filter: blur(14px);
  }

  #modal-body,
  .gx-body {
    padding: 12px;
  }

  .settings-language-options {
    grid-template-columns: 1fr !important;
    overflow: visible;
  }

  .settings-language-option {
    min-height: 86px !important;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  #player-panel {
    transform: scale(.82);
    transform-origin: top left;
  }

  #mob-fabs {
    flex-direction: row;
    right: calc(var(--rush-safe-right) + 8px);
    bottom: calc(var(--rush-safe-bottom) + 68px);
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    left: auto;
    right: calc(var(--rush-safe-right) + 8px);
    width: min(410px, 46vw) !important;
    max-height: calc(100dvh - var(--rush-safe-top) - var(--rush-safe-bottom) - 78px);
  }

  body.show-chat #chat {
    top: calc(var(--rush-safe-top) + 6px);
    bottom: calc(var(--rush-safe-bottom) + 67px);
    height: auto !important;
    border-radius: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #topbar .tb,
  .fab,
  .ah-row,
  .gx-item,
  .settings-language-option {
    transition: none !important;
  }
}

/* ==========================================================================
   HUD LAYOUT V2 — organização estrutural
   Desktop: navegação lateral e quatro zonas fixas.
   Touch: dock completo em duas linhas, sem rolagem e sem ocultar botões.
   ========================================================================== */

#topbar .tb {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: visible;
}

#topbar .tb img {
  flex: 0 0 auto;
}

#topbar .tb-label {
  display: block;
  width: 100%;
  min-width: 0;
  color: #d8d9d2;
  font-size: 8px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.015em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

#topbar .tb:hover .tb-label,
#topbar .tb:focus-visible .tb-label {
  color: #fff;
}

#topbar .tb-symbol {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 201, 40, .72);
  border-radius: 8px;
  color: #2b1705;
  background: linear-gradient(145deg, var(--rush-yellow), var(--rush-orange-bright));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
}

#topbar .tb-emoji-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
}

/* Capturas Globais usa emoji (não PNG). Mantém a mesma área visual dos
   demais ícones da dock, sem ficar maior ou deslocado para baixo. */
#topbar #tb-gcap .tb-emoji-icon {
  font-size: 16px;
  transform: translateY(-1px);
}

/* O sistema antigo criava um botão para recolher os menus em telas de toque.
   O V2 mantém todos visíveis e ignora preferências antigas de menu fechado. */
#topbar #tb-toggle {
  display: none !important;
}

html body.menus-off #game #topbar .tb {
  display: flex !important;
}

/* ------------------------------ desktop / notebook */
@media (min-width: 1360px) and (pointer: fine) {
  #topbar {
    top: 47px !important;
    right: auto !important;
    bottom: auto !important;
    left: 14px !important;
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    max-height: calc(100dvh - 62px);
    display: grid !important;
    grid-template-columns: repeat(2, 56px) !important;
    grid-auto-rows: 44px;
    gap: 5px !important;
    padding: 9px !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 18px !important;
  }

  .rush-dock-brand {
    display: inline-flex !important;
    top: -33px;
    height: 33px;
    width: 112px;
    justify-content: center;
    padding: 4px 8px;
  }

  #topbar .tb {
    width: 56px !important;
    height: 44px !important;
    min-width: 56px !important;
    min-height: 44px !important;
    padding: 4px 3px 3px !important;
    border-radius: 10px !important;
  }

  #topbar .tb.ic img {
    width: 23px !important;
    height: 23px !important;
    object-fit: contain;
  }

  #topbar .tb::after {
    top: 50% !important;
    left: calc(100% + 9px) !important;
    transform: translate(4px, -50%) !important;
    text-align: left;
  }

  #topbar .tb:hover::after,
  #topbar .tb:focus-visible::after {
    transform: translate(0, -50%) !important;
  }

  /* Zonas fixas: regras !important impedem posições salvas antigas de
     empurrarem um painel por cima de outro após a atualização. */
  #player-panel,
  #pk-hud {
    top: 16px !important;
    right: auto !important;
    bottom: auto !important;
    left: 160px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto;
    transform: none !important;
  }

  #mini-hunt {
    top: 244px !important;
    right: auto !important;
    bottom: auto !important;
    left: 442px !important;
    transform: none !important;
  }

  #minimap,
  #mm-show {
    top: 56px !important;
    right: auto !important;
    bottom: auto !important;
    left: 442px !important;
    transform: none !important;
  }

  #chat {
    top: auto !important;
    right: auto !important;
    bottom: 16px !important;
    left: 442px !important;
    width: 360px !important;
    height: 220px !important;
    transform: none !important;
  }

  #auto-panel {
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: 270px !important;
    max-height: calc(100dvh - 326px) !important;
    transform: none !important;
  }

  #capture-panel {
    top: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;
    width: 282px !important;
    max-height: 278px;
    overflow-y: auto;
    transform: none !important;
  }

  #zone-label {
    top: 16px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    max-width: calc(100vw - 900px);
    transform: translateX(-50%) !important;
  }

  #gain-feed {
    top: 278px !important;
    right: auto !important;
    bottom: auto !important;
    left: 442px !important;
  }
}

/* Notebooks baixos: mantém todos os botões, reduzindo cada célula.
   O minimapa recolhe para preservar o espaço vertical entre status e chat. */
@media (min-width: 1360px) and (pointer: fine) and (max-height: 690px) {
  #topbar {
    top: 41px !important;
    grid-auto-rows: 37px;
    gap: 3px !important;
    padding: 7px !important;
    max-height: calc(100dvh - 50px);
  }

  .rush-dock-brand {
    top: -28px;
    height: 28px;
  }

  #topbar .tb {
    height: 37px !important;
    min-height: 37px !important;
    padding-block: 2px !important;
  }

  #topbar .tb.ic img,
  #topbar .tb-symbol,
  #topbar .tb-emoji-icon {
    width: 20px !important;
    height: 20px !important;
  }

  #topbar .tb-label {
    font-size: 7.2px;
  }

  #minimap {
    display: none !important;
  }

  #mm-show:not(.hidden) {
    display: block !important;
  }

  #chat {
    height: 196px !important;
  }

  #auto-panel {
    max-height: calc(100dvh - 292px) !important;
  }

  #capture-panel {
    max-height: 244px;
  }
}

/* ------------------------------ notebook compacto / tablet / touch */
@media (max-width: 1359px), (pointer: coarse) {
  #topbar {
    top: auto !important;
    right: calc(var(--rush-safe-right) + 6px) !important;
    bottom: calc(var(--rush-safe-bottom) + 6px) !important;
    left: calc(var(--rush-safe-left) + 6px) !important;
    width: auto !important;
    max-width: none !important;
    height: 100px !important;
    max-height: 100px !important;
    display: grid !important;
    grid-template-columns: repeat(13, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 42px) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    padding: 6px !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 16px !important;
  }

  #topbar .tb {
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 3px 2px 2px !important;
    border-radius: 9px !important;
  }

  #topbar .tb.ic img {
    width: 23px !important;
    height: 23px !important;
    object-fit: contain;
  }

  #topbar .tb-label {
    font-size: clamp(6.7px, 1.15vw, 8.5px);
  }

  #topbar .tb-symbol,
  #topbar .tb-emoji-icon {
    width: 22px;
    height: 22px;
  }

  #topbar .tb::after,
  .rush-dock-brand {
    display: none !important;
  }

  #player-panel,
  #pk-hud {
    top: calc(var(--rush-safe-top) + 7px) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(var(--rush-safe-left) + 7px) !important;
    max-height: calc(100dvh - var(--rush-safe-bottom) - 126px) !important;
    overflow-y: auto;
    transform: none !important;
  }

  #zone-label {
    top: calc(var(--rush-safe-top) + 8px) !important;
    right: calc(var(--rush-safe-right) + 76px) !important;
    bottom: auto !important;
    left: calc(var(--rush-safe-left) + 290px) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  #mob-fabs {
    right: calc(var(--rush-safe-right) + 8px) !important;
    bottom: calc(var(--rush-safe-bottom) + 112px) !important;
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    top: auto !important;
    right: calc(var(--rush-safe-right) + 70px) !important;
    bottom: calc(var(--rush-safe-bottom) + 112px) !important;
    left: calc(var(--rush-safe-left) + 8px) !important;
    width: auto !important;
    max-width: 440px !important;
    transform: none !important;
  }
}

/* Tablet em retrato continua utilizável; o dock tem espaço suficiente para
   duas fileiras completas e os painéis abrem como folhas acima dele. */
@media (orientation: portrait) and (pointer: coarse) and (min-width: 701px) {
  #player-panel {
    width: 272px !important;
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    right: calc(var(--rush-safe-right) + 76px) !important;
    max-width: 520px !important;
  }
}

/* Em toque, painéis abertos funcionam como uma única gaveta. O HUD do jogador
   e o nome da zona somem temporariamente para nunca ficarem por baixo dela. */
@media (max-width: 1359px) and (pointer: coarse) {
  body.show-auto #pk-hud,
  body.show-cap #pk-hud,
  body.show-chat #pk-hud,
  body.show-auto #zone-label,
  body.show-cap #zone-label,
  body.show-chat #zone-label {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Smartphone: jogo somente em paisagem, como solicitado. */
#rotate-hint {
  display: none !important;
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 700px) {
  #rotate-hint {
    display: flex !important;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
  #topbar {
    height: 88px !important;
    max-height: 88px !important;
    grid-template-rows: repeat(2, 36px) !important;
    gap: 3px !important;
    padding: 5px !important;
  }

  #topbar .tb {
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px 1px 1px !important;
  }

  #topbar .tb.ic img,
  #topbar .tb-symbol,
  #topbar .tb-emoji-icon {
    width: 19px !important;
    height: 19px !important;
  }

  #topbar .tb-label {
    font-size: clamp(6.2px, 1vw, 7.4px);
  }

  #player-panel {
    top: calc(var(--rush-safe-top) + 5px) !important;
    left: calc(var(--rush-safe-left) + 5px) !important;
    width: 250px !important;
    padding: 8px 9px !important;
    transform: scale(.82) !important;
    transform-origin: top left !important;
  }

  #zone-label {
    top: calc(var(--rush-safe-top) + 6px) !important;
    right: calc(var(--rush-safe-right) + 172px) !important;
    left: calc(var(--rush-safe-left) + 258px) !important;
    padding: 4px 8px;
    font-size: 9px;
  }

  #mob-fabs {
    display: flex !important;
    flex-direction: row !important;
    right: calc(var(--rush-safe-right) + 7px) !important;
    bottom: calc(var(--rush-safe-bottom) + 99px) !important;
    gap: 6px !important;
  }

  .fab {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 13px;
    font-size: 19px;
  }

  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    top: calc(var(--rush-safe-top) + 5px) !important;
    right: auto !important;
    bottom: calc(var(--rush-safe-bottom) + 99px) !important;
    left: calc(var(--rush-safe-left) + 258px) !important;
    width: min(410px, calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - 435px)) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }

  body.show-auto #zone-label,
  body.show-cap #zone-label,
  body.show-chat #zone-label {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.show-auto #auto-panel {
    display: flex !important;
  }

  body.show-cap #capture-panel {
    display: block !important;
    overflow-y: auto;
  }

  body.show-chat #chat {
    display: flex !important;
    border-radius: 15px !important;
  }

  #mini-hunt,
  #minimap,
  #mm-show,
  #coords {
    display: none !important;
  }
}

/* Celulares muito estreitos em paisagem ainda mantêm as 12 colunas; apenas
   ocultam os rótulos longos por elipse, nunca os botões. */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 740px) {
  body.show-auto #auto-panel,
  body.show-cap #capture-panel,
  body.show-chat #chat {
    right: auto !important;
    left: calc(var(--rush-safe-left) + 5px) !important;
    width: min(410px, calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - 170px)) !important;
  }

  body.show-auto #pk-hud,
  body.show-cap #pk-hud,
  body.show-chat #pk-hud,
  body.show-auto #zone-label,
  body.show-cap #zone-label,
  body.show-chat #zone-label {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #topbar .tb-label {
    font-size: 6px;
  }

  #topbar .tb {
    gap: 0;
  }
}