/* Mobile companion to the reference HUD. Native actions, geometry preferences,
   visibility states and touch/movement handlers remain owned by the game. */
@media (max-width:780px), (hover:none) and (pointer:coarse) {
  html:not(.reference-hud) {
    --mr-bg:#03172b; --mr-card:#062039; --mr-line:#258ecb;
    --mr-cyan:#46d3ff; --mr-gold:#ffd04d; --mr-text:#edf7ff; --mr-muted:#a9ddf2;
    --mr-surface:linear-gradient(135deg,#0b2b41,#041523 78%);
  }
  /* One scrollable menu, with readable names and touch-sized targets. */
  html:not(.reference-hud) body #stage .unified-client-actions.mainbar {
    left:max(8px,env(safe-area-inset-left))!important;
    top:max(8px,env(safe-area-inset-top))!important; right:auto!important;
    width:48px!important; height:48px!important; min-height:48px!important;
    padding:0!important; margin:0!important; transform:none!important;
    background:var(--mr-surface)!important; border:1px solid var(--mr-line)!important;
    border-radius:4px 14px 4px 14px!important; box-shadow:0 4px 16px #0006!important;
    transition:none!important; overflow:visible!important;
  }
  html:not(.reference-hud) body #stage .mainbar .mobile-menu-toggle {
    display:grid!important; position:absolute!important; inset:1px auto auto 1px!important;
    width:44px!important; min-width:44px!important; max-width:44px!important;
    height:44px!important; min-height:44px!important; max-height:44px!important;
    border:0!important; border-radius:4px 12px!important; margin:0!important;
    background:transparent!important; color:var(--mr-cyan)!important; font:24px/1 Arial!important;
    box-shadow:none!important; touch-action:manipulation;
  }
  html:not(.reference-hud) body #stage .mainbar .mobile-menu-toggle::after {content:none!important}
  html:not(.reference-hud) body #stage .mainbar.menu-open {
    width:min(480px,calc(100vw - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))))!important;
    height:auto!important; padding:54px 10px 10px!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - env(safe-area-inset-bottom))!important;
    display:block!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open::before {
    content:'POKÉ IDLE  /  MENU'; display:block!important; position:absolute!important;
    left:58px!important; top:18px!important; right:52px!important;
    color:var(--mr-gold)!important; font:700 12px/18px Arial,sans-serif!important;
    letter-spacing:1px!important; background:none!important; border:0!important;
    pointer-events:none!important; opacity:1!important; transform:none!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons {
    position:static!important; inset:auto!important; display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important; align-content:start!important;
    width:100%!important; height:auto!important; min-width:0!important; margin:0!important;
    padding:2px!important; gap:6px!important; transform:none!important;
    max-height:calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow:auto!important; overscroll-behavior:contain; touch-action:pan-y;
    scrollbar-width:thin; scrollbar-color:#258ecb #03172b;
  }
  html:not(.reference-hud) body #stage .mainbar:not(.menu-open) #mainbar-buttons {display:none!important}
  html:not(.reference-hud) body #stage .mainbar #patch-notes-open {
    position:absolute!important; inset:1px 1px auto auto!important; width:44px!important;
    min-width:44px!important; height:44px!important; min-height:44px!important;
    background:transparent!important; border:0!important; color:var(--mr-cyan)!important;
  }
  html:not(.reference-hud) body #stage .mainbar:not(.menu-open) #patch-notes-open {display:none!important}
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button::before {content:none!important}
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button {
    display:flex!important; flex-direction:column!important; align-items:center!important;
    justify-content:center!important; gap:6px!important; position:relative!important;
    width:100%!important; min-width:0!important; max-width:none!important;
    height:76px!important; min-height:76px!important; max-height:none!important;
    padding:8px 3px!important; margin:0!important; flex:none!important;
    border:1px solid #24516a!important; border-radius:4px 10px!important;
    background:#062039!important; color:var(--mr-text)!important;
    box-shadow:none!important; transform:none!important; animation:none!important;
    overflow:hidden!important; touch-action:manipulation;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button::after {
    content:attr(data-label)!important; display:block!important; position:static!important;
    color:var(--mr-text)!important; font:700 9px/12px Arial,sans-serif!important;
    letter-spacing:0!important; text-align:center!important; white-space:normal!important;
    overflow-wrap:anywhere!important; pointer-events:none!important;
    width:100%!important; height:auto!important; transform:none!important;
    background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button>img {
    position:static!important; inset:auto!important; display:block!important;
    width:30px!important; min-width:30px!important; max-width:30px!important;
    height:30px!important; min-height:30px!important; max-height:30px!important;
    margin:0!important; object-fit:contain!important; transform:none!important;
    filter:none!important; animation:none!important; flex:none!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button:active {
    background:#0c3854!important; border-color:var(--mr-cyan)!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button[aria-disabled=true] {
    opacity:.45!important; filter:grayscale(1)!important;
  }
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons :is(.hidden,[hidden]) {display:none!important}
  html:not(.reference-hud) body #stage .mainbar .mainbar-group {
    position:static!important; width:100%!important; min-width:0!important;
    height:auto!important; flex:none!important; display:block!important;
  }
  html:not(.reference-hud) body #stage .mainbar .mainbar-group-label,
  html:not(.reference-hud) body #stage .mainbar .mainbar-group-chevron {display:none!important}
  html:not(.reference-hud) body #stage .mainbar .mainbar-submenu {
    position:fixed!important; left:max(8px,env(safe-area-inset-left))!important;
    top:calc(64px + env(safe-area-inset-top))!important; right:auto!important;
    width:min(480px,calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;
    max-height:calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    transform:none!important; background:var(--mr-bg)!important; border:1px solid var(--mr-line)!important;
    border-radius:4px 14px!important; overflow:auto!important; animation:none!important;
  }
  html:not(.reference-hud) body #stage .mainbar .mainbar-submenu-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons .mainbar-button[data-id=settings]::after {content:'AJUSTES'!important}
  html:not(.reference-hud) body .panel.client-open:not(.collapsed) {z-index:45000!important}
  /* Surfaces share the desktop frame palette without replacing item artwork. */
  html:not(.reference-hud) body :is(.panel.client-open,.system-window,#game-chat.game-chat,#stage #pokemon-team-bar,#stage #pokemon-skills-window.skills-window>.skills-bar) {
    background:var(--mr-surface)!important; border-color:var(--mr-line)!important;
    border-radius:4px 14px!important; color:var(--mr-text)!important;
    box-shadow:inset 0 0 0 2px #082238,0 5px 18px #0005!important;
    scrollbar-color:#258ecb #03172b; scrollbar-width:thin;
  }
  html:not(.reference-hud) body :is(.panel-title,.inventory-title,.auto-helper-head,.hunt-analyzer-head,.system-window>header,#game-chat-handle) {
    background:linear-gradient(110deg,#10344c,#0a2031)!important;
    border-color:#285b77!important; color:var(--mr-text)!important;
  }
  html:not(.reference-hud) body :is(.panel-title,.system-window>header) :is(strong,h2) {color:#fff0b1!important}
  html:not(.reference-hud) body :is(.panel.client-open,.system-window) :is(input,select,textarea) {
    background-color:#041523!important; border-color:#285b77!important; color:var(--mr-text)!important;
    font-size:16px!important;
  }
  html:not(.reference-hud) body :is(.panel.client-open,.system-window) :is(button,input,select):focus-visible,
  html:not(.reference-hud) body #stage .mainbar button:focus-visible {
    outline:2px solid var(--mr-gold)!important; outline-offset:-3px!important;
  }
  html:not(.reference-hud) body :is(.client-panel-close,.system-window>header>button,.inventory-minimize) {
    min-width:36px!important; min-height:36px!important;
    border:1px solid #286184!important; background:#062039!important; color:var(--mr-cyan)!important;
  }
  html:not(.reference-hud) body :is(.inventory-category-tabs,.pet-tabs,.system-tabs) {
    background:#03172b!important; border-color:#285b77!important;
  }
  html:not(.reference-hud) body :is(.inventory-category-tabs,.pet-tabs,.system-tabs) button {
    min-height:40px!important; color:var(--mr-muted)!important;
    background:#062039!important; border-color:#24516a!important; font-size:11px!important;
  }
  html:not(.reference-hud) body :is(.inventory-category-tabs,.pet-tabs,.system-tabs) button.active {
    background:#10384b!important; color:var(--mr-gold)!important; border-color:var(--mr-cyan)!important;
  }
  html:not(.reference-hud) body .inventory-panel .inventory-title {
    grid-template-columns:28px minmax(0,1fr) auto 36px 36px!important; gap:5px!important;
    padding:9px!important; min-height:60px!important;
  }
  html:not(.reference-hud) body .inventory-panel.client-open {z-index:45000!important}
  html:not(.reference-hud) body .inventory-panel .inventory-title strong {font-size:13px!important;letter-spacing:1px!important}
  html:not(.reference-hud) body .inventory-panel #ball-total {font-size:9px!important;white-space:nowrap!important}
  html:not(.reference-hud) body .inventory-panel #inventory-category-tabs {
    display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important;
    flex:0 0 auto!important; position:relative!important; height:auto!important;
    min-height:88px!important; padding:4px!important; gap:3px!important; overflow:visible!important;
  }
  html:not(.reference-hud) body .inventory-panel #inventory-category-tabs button {min-width:0!important;min-height:40px!important;padding:4px 1px!important;font-size:10px!important;background:#062039!important;color:var(--mr-muted)!important;border-color:#24516a!important}
  html:not(.reference-hud) body .inventory-panel #inventory-category-tabs button.active {background:#10384b!important;color:var(--mr-gold)!important;border-color:var(--mr-cyan)!important}
  html:not(.reference-hud) body .inventory-panel.inventory-minimized #inventory-category-tabs {display:none!important}
  html:not(.reference-hud) body :is(.helper-module,.hunt-analyzer-card,.analyzer-card,.inventory-team-section) {
    background:#03182c!important; border-color:#24516a!important;
  }
  html:not(.reference-hud) body #stage #pokemon-team-bar .team-slot {border-color:#24516a!important;background:linear-gradient(110deg,#062039,#001222)!important}
  html:not(.reference-hud) body #stage #pokemon-team-bar .team-slot.active {border-color:var(--mr-cyan)!important}
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window:not(.is-minimized) {
    width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;
    max-width:640px!important; height:64px!important; min-height:64px!important; max-height:64px!important;
  }
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window>.skills-bar {position:relative!important;display:block!important;padding:6px 42px!important; width:100%!important; min-width:0!important; max-width:none!important; height:100%!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important}
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window #pokemon-moves {
    position:static!important; inset:auto!important; transform:none!important; margin:0!important; padding:0!important;
    width:100%!important; height:100%!important; max-width:none!important;
    display:flex!important; gap:4px!important; overflow-x:auto!important; overflow-y:hidden!important;
    touch-action:pan-x; scrollbar-width:thin;
  }
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window .move-slot {
    min-width:48px!important; width:48px!important; height:48px!important; flex:0 0 48px!important;
    border:1px solid #24516a!important; border-radius:5px!important;
    background-color:#062039!important; box-shadow:none!important;
  }
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window :is(.config-button,.skills-minimize) {
    width:34px!important; min-width:34px!important; max-width:34px!important;
    height:40px!important; min-height:40px!important; max-height:40px!important; color:var(--mr-cyan)!important;
    transform:none!important; margin:0!important; padding:0!important;
    background-color:#062039!important; border-color:#24516a!important;
  }
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window .config-button {position:absolute!important;left:4px!important;top:10px!important}
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window .skills-minimize {position:absolute!important;right:4px!important;left:auto!important;top:10px!important}
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window.is-minimized :is(#pokemon-moves,.config-button) {display:none!important}
  html:not(.reference-hud) body #stage #pokemon-skills-window.skills-window.is-minimized .skills-minimize {top:2px!important}
  html:not(.reference-hud) body #mailbox-floating-letter {background:var(--mr-surface)!important;border:1px solid var(--mr-line)!important;color:var(--mr-gold)!important;box-shadow:0 4px 12px #0005!important}
  html:not(.reference-hud) body #shiny-global-next {background:var(--mr-surface)!important;border-color:var(--mr-line)!important;color:var(--mr-muted)!important;box-shadow:0 4px 12px #0005!important}
  html:not(.reference-hud) body #mobile-joystick[data-touch-enabled=true] {border-color:#46d3ff;background:radial-gradient(circle,#08334780 0 43%,#03172bc9 44% 66%,#258ecb99 67% 70%,#03172bc9 71%)}
}
@media (max-width:350px) {
  html:not(.reference-hud) body #stage .mainbar.menu-open #mainbar-buttons {grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html:not(.reference-hud) body .inventory-panel .inventory-title {grid-template-columns:minmax(0,1fr) auto 36px 36px!important}
  html:not(.reference-hud) body .inventory-panel .inventory-title-icon {display:none!important}
}
