/* =====================================================================
   Celular — tudo aqui vale com <body class="mobile"> (mobile.js liga em
   telas estreitas ou de toque baixas). No PC só o primeiro bloco conta:
   barra de abas, menu geral e direcional ficam escondidos.
   ===================================================================== */
.m-bar, .m-joy, .m-sheet { display: none; }
.m-dot { display: none; }
/* card "Baixar o jogo" da tela de login */
.dl-card { width: min(400px, 100%); display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(18,21,29,.92); border: 2px solid #2b3550; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.dl-card.hidden { display: none; }
.dl-ic { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.dl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-txt b { font: 700 16px "Nunito", var(--font); color: #fff; letter-spacing: .3px; }
.dl-txt small { font-size: 11.5px; color: #9aa3b8; }
.dl-btn { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px; border: 2px solid #b8860b; background: linear-gradient(180deg, #ffd95a, var(--dq-yellow, #FFC833)); color: #2a1d00; font: 700 14px "Nunito", var(--font); cursor: pointer; box-shadow: 0 3px 0 #9a6f00, 0 6px 14px rgba(255,200,51,.25); }
.dl-btn:hover { filter: brightness(1.07); }
.dl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a6f00; }
.dl-arrow { display: inline-block; animation: dl-bob 1.6s ease-in-out infinite; }
@keyframes dl-bob { 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .dl-arrow { animation: none; } }

body.mobile { --m-bar: calc(64px + env(safe-area-inset-bottom)); --m-top: env(safe-area-inset-top); touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.mobile .stage-canvas { touch-action: none; }

/* ---------------- telas de entrada ---------------- */
body.mobile .create-wrap { padding: calc(14px + var(--m-top)) 12px 40px; }
body.mobile .create-body { grid-template-columns: 1fr; gap: 12px; }
body.mobile .voc-detail { order: -1; }
body.mobile .voc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
body.mobile .create-footer { flex-direction: column; align-items: stretch; gap: 10px; }
body.mobile .create-footer > .btn-ghost { order: 9; }
body.mobile .login-wrap { padding-top: var(--m-top); }

/* ---------------- barra de baixo: equipe + abas ---------------- */
body.mobile .dock { height: auto; padding: 4px 6px; gap: 0; }
body.mobile .dock-map, body.mobile .dock-bag, body.mobile .dock-grid, body.mobile .dock-sign { display: none !important; }
body.mobile .dock-team, body.mobile.theme-gba .dock-team { flex: 1 1 auto; min-width: 0; margin-left: 0; gap: 4px; }
body.mobile .dock-lead, body.mobile.theme-gba .dock-lead { flex: 0 0 33%; min-width: 0; max-width: none; gap: 4px; padding: 2px 6px 2px 2px; }
body.mobile.theme-gba .dock-lead .lead-name { font-size: 12px; }
body.mobile.theme-gba .dock-lead .lead-row:nth-child(2) > span:first-child { width: 20px; height: 11px; background-size: 20px 11px; }
body.mobile .dock-lead .lead-sprite { zoom: .68; width: 64px; height: 68px; }
body.mobile .dock-lead .lead-name { font-size: 11px; margin-bottom: 1px; }
body.mobile .dock-lead .lead-row { margin-top: 3px; gap: 4px; font-size: 8px; }
body.mobile .dock-lead .lead-row > span, body.mobile .dock-lead .lead-row .val { display: none !important; }   /* líder: só as barras (verde = HP, azul = exp) */
body.mobile .dock-slots { flex: 1; min-width: 0; gap: 3px; }
body.mobile .dock-slot, body.mobile.theme-gba .dock-slot { flex: 1 1 0; width: auto !important; min-width: 0; height: 58px; overflow: hidden; gap: 2px; padding: 0; }
/* 6 vagas sempre à mostra (vazias com cadeado), sem a Pokébola do canto */
body.mobile .dock-slot::before { display: none !important; }
body.mobile .dock-slot, body.mobile.theme-gba .dock-slot { justify-content: center; padding: 2px 0 !important; }
body.mobile .dock-slots .dock-slot.locked, body.mobile.theme-gba .dock-slots .dock-slot.locked { display: flex; }
body.mobile .dock-slot .lock-ic { zoom: .5; }
body.mobile .dock-slot .mon-icon { margin: -4px 0 -3px; flex-shrink: 0; }   /* sprite no tamanho cheio (48px) */
body.mobile .dock-slot .slot-hp, body.mobile.theme-gba .dock-slot .slot-hp { margin-top: 0 !important; height: 6px; flex-shrink: 0; }   /* HP logo abaixo do Pokémon (sem encolher a barra) */
body.mobile .dock-slot .slot-hp > div { height: 100%; }
body.mobile .dock-slot, body.mobile.theme-gba .dock-slot { justify-content: center !important; }
body.mobile .dock-lead .lead-sprite { position: relative; }
body.mobile .dock-lead .lead-sprite > :not(.lead-lv):not(.lead-held) { transform: translateY(-14px); }   /* sprite do líder mais para cima (o "Lv" fica no lugar) */   /* líder um pouco mais para cima */
body.mobile .dock-slot .slot-xp { display: none !important; }   /* reserva: só a barra de HP, sprite maior */
body.mobile .dock-slot .slot-hp, body.mobile .dock-slot .slot-xp, body.mobile.theme-gba .dock-slot .slot-hp, body.mobile.theme-gba .dock-slot .slot-xp { width: 80% !important; }
body.mobile .dock-slot .slot-lv { top: 1px; right: 3px; font-size: 8px; }
body.mobile .dock-slot .slot-xs, body.mobile .dock-slot .slot-held { transform: scale(.75); }

body.mobile .m-bar { display: flex; flex-shrink: 0; height: var(--m-bar); padding-bottom: env(safe-area-inset-bottom); background: #121620; border-top: 1px solid #2c3444; position: relative; z-index: 6; }
.m-tab:not(.m-auto) { margin: 5px 3px; padding: 5px 0 4px; gap: 1px; border-radius: 10px; background: linear-gradient(180deg, #232b3a, #171c27) !important; border: 1px solid #364055 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 rgba(0,0,0,.35); }
.m-tab { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: #aeb7c9; font: 700 10px var(--font); cursor: pointer; padding: 0; }
.m-tab img { width: 26px; height: 26px; image-rendering: pixelated; }
.m-tab.active { color: var(--accent); }
.m-tab.active:not(.m-auto) { border-color: var(--accent) !important; }
.m-tab:active { transform: translateY(1px); box-shadow: none; }
.m-tab.active img { filter: drop-shadow(0 0 4px rgba(245,197,24,.6)); }
.m-auto { flex: 0 0 66px; align-self: center; height: 66px; margin-top: -18px; border-radius: 50%; background: linear-gradient(180deg, #2a3242, #171c27); border: 3px solid #3c4658; color: #cfd6e6; box-shadow: 0 -2px 10px rgba(0,0,0,.5); }
.m-auto b { font: 900 13px var(--font); letter-spacing: .5px; }
.m-auto small { font: 800 10px var(--mono); color: #ff8a95; }
.m-auto.on { border-color: #3ad35b; box-shadow: 0 0 14px rgba(58,211,91,.45); }
.m-auto.on small { color: #7ff0a4; }
.m-burger { width: 22px; height: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; margin: 9px 0 10px; }
.m-dot { position: absolute; top: 6px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; border: 2px solid #fff; }
.ready > .m-dot { display: block; }

/* ---------------- menu geral (abre de baixo para cima) ---------------- */
body.mobile .m-sheet { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: var(--m-bar); z-index: 40; background: rgba(4,6,10,.55); }
body.mobile .m-sheet.hidden { display: none; }
.m-sheet-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 40px - var(--m-top)); display: flex; flex-direction: column; background: #121620; border-top: 2px solid var(--accent); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.6); animation: m-up .18s ease-out; }
@keyframes m-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; font-size: 15px; }
.m-close { width: 32px; height: 32px; border-radius: 8px; background: #3a1d22; border: 1px solid #6b2a33; color: #ffb3bb; font-weight: 800; cursor: pointer; }
.m-sheet-body { overflow-y: auto; padding: 0 10px 14px; -webkit-overflow-scrolling: touch; }
.m-sheet-body h4 { margin: 10px 4px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); }
.m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.m-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 7px; background: #1a2030; border: 1px solid #2c3444; border-radius: 10px; color: #dfe5f0; font: 700 10.5px/1.15 var(--font); text-align: center; cursor: pointer; }
.m-item img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.m-item.active { border-color: var(--accent); color: var(--accent); }
.m-item.m-danger { color: #ff9aa5; }
.m-item .m-dot { top: 4px; right: 6px; }
.m-item.ready { border-color: #ffd166; box-shadow: 0 0 10px #ffd16655; }

/* ---------------- joystick (aparece onde o dedo arrasta) ---------------- */
body.mobile .m-joy { display: block; position: absolute; z-index: 6; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0 55%, rgba(255,255,255,.12) 56% 100%); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35); animation: m-joy-in .12s ease-out; }
body.mobile .m-joy.hidden { display: none; }
.m-joy-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; opacity: .7;   /* bolinha = Pokébola */
  background: radial-gradient(circle at 50% 50%, #fff 0 5px, #2a2a2a 5.5px 8.5px, transparent 9px), linear-gradient(180deg, #ee3b3b 0 calc(50% - 3px), #2a2a2a calc(50% - 3px) calc(50% + 3px), #f4f4f4 calc(50% + 3px));
  border: 3px solid #2a2a2a; box-shadow: inset -4px -4px 0 rgba(0,0,0,.15), inset 3px 3px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.4); }
@keyframes m-joy-in { from { transform: scale(.6); opacity: 0; } to { transform: none; } }

/* ---------------- HUD em cima do mapa ---------------- */
body.mobile .hud-top-center, body.mobile .hud-clockbox, body.mobile .hud-rank, body.mobile .hud-objective, body.mobile #hud-objective,
body.mobile #hud-track, body.mobile .hud-btns-row, body.mobile .hud-tr > .elo, body.mobile .hud-quick, body.mobile .hud-account { display: none !important; }
body.mobile .hud-tl { top: calc(6px + var(--m-top)); left: 6px; width: auto; max-width: 52%; gap: 4px; }
body.mobile .hud-tr { top: calc(6px + var(--m-top)); right: 6px; gap: 4px; }
body.mobile .hud-trainer { padding: 2px 8px 2px 2px; gap: 5px; }
body.mobile .hud-portrait { width: 30px; height: 30px; }
body.mobile .hud-tinfo { min-width: 0; }
body.mobile .hud-tname { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .hud-vip { display: none; }
body.mobile .hud-money { flex-direction: column; align-items: flex-end; gap: 4px; }
body.mobile .money-pill { font-size: 12px; padding: 2px 9px 2px 4px; gap: 4px; }
body.mobile .money-pill img { width: 18px; height: 18px; }
body.mobile .gems-plus { display: none; }
body.mobile #hud-status { display: none; }
body.mobile.m-show-status #hud-status { display: block; width: 220px; }
body.mobile #hud-event { max-width: 220px; font-size: 11px; }

/* chat: barrinha fina embaixo; aberto ocupa a parte de baixo do mapa */
body.mobile .hud-chat { left: 6px; bottom: 6px; border-width: 1px; }
body.mobile .hud-chat.open { right: 6px; width: auto; }
body.mobile .chat-bubble { width: 44px; height: 44px; }
body.mobile .hud-chat.open { z-index: 7; }
body.mobile .chat-msgs, body.mobile .hud-chat .combat-log { height: 34vh; font-size: 13px; }
body.mobile .chat-form input { font-size: 16px; padding: 7px 9px; }   /* 16px: o iPhone não dá zoom ao digitar */
body.mobile .chat-tabs { overflow-x: auto; }

/* golpes e nível: canto de baixo à esquerda (o direcional fica à direita) */
body.mobile .hud-bottom-center { left: 6px; right: 6px; bottom: 8px; transform: none; align-items: center; }
body.mobile .lvl-row { justify-content: center; }
body.mobile .move-bar { justify-content: center; }
body.mobile .lvl-bar { width: 220px; padding: 3px 10px; }
body.mobile .move-bar { flex-wrap: wrap; max-width: calc(100vw - 12px); }
body.mobile .move-bar .jutsu-cd, body.mobile .move-bar .jutsu-cd .ic { width: 44px; }
body.mobile .move-bar .jutsu-cd .ic { height: 44px; }
body.mobile .battle-ui, body.mobile .battle-scene { width: calc(100vw - 12px); min-width: 0; align-self: center; }
body.mobile .battle-scene .pv-field { height: 190px; }
body.mobile .battle-scene .pv-mon, body.mobile .battle-scene .pv-mon img { width: 104px; height: 104px; }
body.mobile .hud-bottom-center:has(#battle-ui:not(.hidden)), body.mobile .hud-bottom-center:has(#bt-hud:not(.hidden)) { align-items: center; }
body.mobile .bt-hud { gap: 4px; max-width: calc(100vw - 12px); }
body.mobile .bt-hud .hpp-big { zoom: .7; }

/* ---------------- janelas em tela cheia ---------------- */
body.mobile .win { place-items: stretch; background: none; }
body.mobile .win-box, body.mobile .win.small .win-box, body.mobile .win.win-narrow .win-box { width: 100%; max-width: none; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
body.mobile .win-head { padding: calc(6px + var(--m-top)) 10px 6px; font-size: 14px; }
body.mobile .win-close { width: 36px; height: 36px; }
body.mobile .win-nav { display: none; }
body.mobile .win-body { padding: 10px 10px 18px; -webkit-overflow-scrolling: touch; }
body.mobile .modal-box { width: 94vw; max-height: 86vh; }
body.mobile .toasts { left: 8px; right: 8px; bottom: calc(var(--m-bar) + 74px); align-items: center; }
body.mobile .pmenu { max-width: calc(100vw - 16px); }
body.mobile .tooltip { max-width: calc(100vw - 16px) !important; }
body.mobile input, body.mobile select, body.mobile textarea { font-size: 16px; }

/* celular deitado: a tela é baixa, a equipe sai da barra (fica na aba Pokémon) */
@media (orientation: landscape) {
  body.mobile .dock { display: none; }
  body.mobile { --m-bar: calc(50px + env(safe-area-inset-bottom)); }
  body.mobile .m-tab img { width: 24px; height: 24px; }
  body.mobile .m-auto { flex-basis: 58px; height: 58px; margin-top: -14px; }
  body.mobile .chat-msgs, body.mobile .hud-chat .combat-log { height: 40vh; }
  body.mobile .battle-ui, body.mobile .battle-scene { width: min(560px, calc(100vw - 12px)); }
  body.mobile .hud-chat.open { right: auto; width: 340px; }
  body.mobile .hud-tl, body.mobile .hud-tr { top: 6px; }
  body.mobile .hud-tl { left: calc(6px + env(safe-area-inset-left)); }
  body.mobile .hud-tr { right: calc(6px + env(safe-area-inset-right)); }
}

/* ---------------- interface GBA ---------------- */
body.mobile.theme-gba .m-bar { background: repeating-linear-gradient(180deg, #c8d078 0 2px, #b0b058 2px 4px); border-top: 3px solid var(--gba-line); }
.theme-gba .m-tab:not(.m-auto) { background: var(--gba-white) !important; border: 2px solid var(--gba-line) !important; box-shadow: inset -2px -2px 0 var(--gba-shadow), 0 2px 0 rgba(0,0,0,.25); }
.theme-gba .m-tab.active:not(.m-auto) { background: var(--gba-sel-2) !important; border-color: var(--gba-orange) !important; }
.theme-gba .m-tab { color: var(--gba-text); font-family: var(--gba-font); font-size: 11px; text-shadow: 0 1px 0 #fff8; }
.theme-gba .m-tab.active { color: var(--gba-orange); }
.theme-gba .m-auto { background: var(--gba-white); border-color: var(--gba-line); color: var(--gba-text); }
.theme-gba .m-auto.on { border-color: #38a048; }
.theme-gba .m-auto.on small { color: #208030; }
.theme-gba .m-auto small { color: #d03040; }
.theme-gba .m-sheet-box { background: #f8f0d8; border-top: 3px solid var(--gba-line); }
.theme-gba .m-sheet-head { color: var(--gba-text); font-family: var(--gba-font); }
.theme-gba .m-sheet-body h4 { color: var(--gba-orange); font-family: var(--gba-font); }
.theme-gba .m-item { background: var(--gba-white); border: 2px solid var(--gba-line); color: var(--gba-text); font-family: var(--gba-font); box-shadow: inset -2px -2px 0 var(--gba-shadow); }
.theme-gba .m-item.active { background: var(--gba-sel-2); border-color: var(--gba-orange); color: var(--gba-text); }
.theme-gba .m-item.m-danger { color: #c03040; }

.m-howto ol { margin: 8px 0 10px 18px; line-height: 1.6; }
body.mobile .night-tint { mix-blend-mode: normal; background: rgba(12,20,70,.3); }   /* blend em tela cheia pesa no celular */
/* líder no celular: barras mais grossas e verde mais forte (o verde claro do GBA sumia na tela pequena) */
body.mobile .dock-lead .lead-row .bar { height: 10px; flex-shrink: 0; }
body.mobile .dock-lead .lead-row .bar.hp > div, body.mobile.theme-gba .dock-lead .lead-row .bar.hp > div { background: linear-gradient(180deg, #5be37a 0 50%, #2fb352 50%); }
/* aviso "conectado em outro lugar" (main.js kickedOut) */
.kick-box { text-align: center; }
.kick-box p { margin: 6px 0; line-height: 1.45; }
.kick-ic { font-size: 34px; margin: 4px 0 8px; }

/* guildas no celular: tabela vira cartão */
body.mobile .gd-stats { grid-template-columns: 1fr 1fr; }
body.mobile .gd-stat { border-left: 0; border-top: 1px solid var(--gd-line); }
body.mobile .gd-stat.gd-leader { grid-column: 1 / -1; border-top: 0; }
body.mobile .gd-thead { display: none; }
body.mobile .gd-row { grid-template-columns: 22px 34px minmax(0, 1fr) 96px; row-gap: 2px; }
body.mobile .gd-row .gd-c-lv, body.mobile .gd-row .gd-c-ct { display: none; }
body.mobile .gd-row .gd-c-st { grid-column: 3 / -1; }
body.mobile .gd-app { grid-template-columns: 34px minmax(0, 1fr) auto; }
body.mobile .gd-app .gd-c-lv, body.mobile .gd-app .gd-c-st { display: none; }
body.mobile .gd-tab, body.mobile .gd-sub { padding: 7px 10px; font-size: 12px; }
body.mobile .gd-boss-card { flex-direction: column; text-align: center; }
body.mobile .gd-boss-img { width: 120px; height: 120px; }
body.mobile .gd-boss-btn { align-self: stretch; }
body.mobile .gd-don { grid-template-columns: 1fr; }
body.mobile .gd-filter { flex: 1 1 100%; }
body.mobile .gd-filter .gd-select { flex: none; width: 104px; }
body.mobile .gd-dhead { display: none; }
body.mobile .gd-drow { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 2px; }
body.mobile .gd-drow .gd-c-n { grid-column: 1; grid-row: 1 / 3; }
body.mobile .gd-drow .gd-c-name { grid-column: 2; grid-row: 1; }
body.mobile .gd-drow .gd-d-gold { grid-column: 2; grid-row: 2; text-align: left; }
body.mobile .gd-drow .gd-d-pts { grid-column: 3; grid-row: 1; }
body.mobile .gd-drow .gd-d-gems { grid-column: 3; grid-row: 2; }
body.mobile .gd-drow .gd-d-n { display: none; }
body.mobile .gd-rname { flex: 1 1 100%; }
body.mobile .gd-rbtns { margin-left: 0; }