/* Global responsive safety layer for legacy/static pages. */
:root {
  --responsive-safe-x: max(12px, env(safe-area-inset-left));
  --responsive-safe-r: max(12px, env(safe-area-inset-right));
  --responsive-tap: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
picture,
video,
iframe,
embed,
object {
  max-width: 100%;
}

img,
picture,
video {
  height: auto;
}

svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

button,
a,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  touch-action: manipulation;
}

textarea {
  resize: vertical;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

pre,
code,
kbd,
samp {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table-wrap,
.table-container,
.responsive-table,
.data-table,
.admin-table,
.ranking-table,
.history-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.container,
.page-container,
.main-container,
.content,
.main-content,
.dashboard-container,
.profile-container,
.settings-container,
.feed-container,
.chat-container,
.cards-grid,
.grid,
.panel,
.dashboard-card,
.card {
  min-width: 0;
}

.cards-grid,
.card-grid,
.grid,
.dashboard-grid,
.stats-grid,
.tools-grid,
.games-grid,
.skills-grid,
.missions-grid,
.market-grid,
.inventory-grid,
.feed-grid,
.profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.navbar,
.nav,
.topbar,
.toolbar,
.actions,
.button-group,
.tabs,
.filters,
.search-bar,
.header-actions,
.quick-actions {
  min-width: 0;
}

.navbar,
.nav,
.topbar,
.toolbar,
.actions,
.button-group,
.tabs,
.filters,
.header-actions,
.quick-actions {
  flex-wrap: wrap;
}

.modal,
.modal-content,
.dialog,
.popup,
.ctx-menu,
.context-menu {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

.modal-content,
.dialog,
.popup {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.leaflet-container,
#map,
#mapa,
#leaflet-map {
  min-height: 120px;
}

@media (max-width: 900px) {
  body {
    min-width: 0 !important;
  }

  h1 {
    font-size: clamp(1.45rem, 7vw, 2.4rem);
    line-height: 1.08;
  }

  h2 {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  h3 {
    font-size: clamp(1rem, 4vw, 1.35rem);
  }

  p,
  li,
  label,
  input,
  select,
  textarea,
  button {
    overflow-wrap: anywhere;
  }

  main,
  section,
  article,
  aside,
  header,
  footer {
    max-width: 100%;
  }

  .container,
  .page-container,
  .main-container,
  .content,
  .main-content,
  .dashboard-container,
  .profile-container,
  .settings-container,
  .feed-container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--responsive-safe-x);
    padding-right: var(--responsive-safe-r);
  }

  .layout,
  .app-layout,
  .dashboard-layout,
  .profile-layout,
  .settings-layout,
  .content-layout,
  .main-grid,
  .dashboard-grid,
  .profile-grid,
  .feed-layout,
  .chat-layout {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .side-panel,
  .left-panel,
  .right-panel,
  .dashboard-sidebar,
  .profile-sidebar,
  .chat-sidebar,
  .admin-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sidebar:not(.drawer):not(.open),
  .side-panel:not(.open) {
    max-height: 45dvh;
    overflow: auto;
  }

  .card,
  .dashboard-card,
  .panel,
  .glass,
  .window,
  .module,
  .widget {
    max-width: 100%;
  }

  .toolbar,
  .topbar,
  .header,
  .page-header,
  .profile-header,
  .chat-header,
  .admin-header {
    gap: 8px;
  }

  .toolbar button,
  .topbar button,
  .actions button,
  .button-group button,
  .tabs button,
  .nav a,
  .navbar a {
    min-height: var(--responsive-tap);
  }

  .hide-mobile,
  .desktop-only {
    display: none !important;
  }

  .mobile-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .container,
  .page-container,
  .main-container,
  .content,
  .main-content,
  .dashboard-container,
  .profile-container,
  .settings-container,
  .feed-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cards-grid,
  .card-grid,
  .grid,
  .dashboard-grid,
  .stats-grid,
  .tools-grid,
  .games-grid,
  .skills-grid,
  .missions-grid,
  .market-grid,
  .inventory-grid,
  .feed-grid,
  .profile-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .toolbar,
  .topbar,
  .actions,
  .button-group,
  .tabs,
  .filters,
  .header-actions,
  .quick-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar > *,
  .topbar > *,
  .actions > *,
  .button-group > *,
  .tabs > *,
  .filters > *,
  .header-actions > *,
  .quick-actions > * {
    flex: 0 0 auto;
  }

  .modal,
  .modal-content,
  .dialog,
  .popup {
    width: calc(100vw - 20px) !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .btn,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: var(--responsive-tap);
  }

  .form-row,
  .field-row,
  .input-row,
  .search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .status-bar,
  .footer-bar,
  .bottom-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .tooltip,
  [data-tooltip]::after,
  [data-tip]::after {
    pointer-events: none;
  }
}

/* Super Regras de Sobrescrita Mobile Global (Larga Escala) */
@media (max-width: 1024px) {
  .dashboard-container,
  .profile-container,
  .column-left,
  .column-right,
  .grid-2-col,
  .grid-3-col,
  .dashboard-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow-y: visible !important;
  }
  
  .welcome-banner {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
  
  .welcome-stats {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .market-widget-body {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
}