/* ===================================================
   POKEWORLD – Mobile / Responsive UI
   Breakpoints: 768px (tablet), 480px (phone)
   =================================================== */

/* ══════════════════════════════════════════════════
   HAMBURGER BUTTON (visible only on mobile)
   ══════════════════════════════════════════════════ */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  padding: 0;
  margin-inline-start: auto; /* push to left edge in RTL */
}
.mobile-menu-btn:hover { background: rgba(0, 212, 255, 0.14); }
.mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--neon-blue);
  border-radius: 2px;
  transition: all 0.25s;
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════
   MOBILE DRAWER (slide from right in RTL)
   ══════════════════════════════════════════════════ */
.mobile-drawer {
  display: none; /* shown only via CSS on mobile */
  position: fixed;
  top: 0;
  right: 0; /* RTL: drawer slides in from right */
  width: 280px;
  height: 100%;
  background: rgba(8, 12, 24, 0.98);
  border-left: 1px solid var(--border-glow);
  backdrop-filter: blur(24px);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 0 0 80px 0;
}
.mobile-drawer.open { transform: translateX(0); }

/* Drawer header: user info */
.mobile-drawer-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(168,85,247,0.06));
}
.mobile-drawer-username {
  font-size: 16px;
  font-weight: 700;
  color: var(--neon-cyan);
  margin-bottom: 8px;
}
.mobile-drawer-currencies {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mobile-drawer-currency {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  color: var(--neon-yellow);
}
.mobile-drawer-currency.silver {
  background: rgba(100,140,200,0.08);
  border-color: rgba(100,140,200,0.2);
  color: var(--text-muted);
}
.mobile-drawer-currency img { width: 14px; height: 14px; vertical-align: middle; }

/* Drawer nav links */
.mobile-drawer-nav { padding: 12px 10px; }
.mobile-drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 10px 4px;
}
.mobile-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  margin-bottom: 2px;
}
.mobile-drawer-link:hover,
.mobile-drawer-link:active {
  color: var(--neon-blue);
  background: rgba(0, 212, 255, 0.08);
}
.mobile-drawer-link .icon { font-size: 18px; width: 24px; text-align: center; }

/* Drawer close button inside drawer */
.mobile-drawer-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay behind drawer */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.25s;
}
.mobile-overlay.open { opacity: 1; }

/* ══════════════════════════════════════════════════
   BOTTOM NAV BAR
   ══════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none; /* shown on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(6, 9, 20, 0.97);
  border-top: 1px solid var(--border-glow);
  backdrop-filter: blur(20px);
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.mobile-bottom-nav-inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  transition: all 0.15s;
  padding: 4px 2px;
  border: none;
  background: none;
  cursor: pointer;
}
.mobile-nav-item:hover,
.mobile-nav-item.active { color: var(--neon-blue); }
.mobile-nav-item .nav-icon { font-size: 20px; line-height: 1; }
.mobile-nav-item.battle-btn { color: var(--neon-red); }
.mobile-nav-item.battle-btn:hover { color: #ff8099; }

/* ══════════════════════════════════════════════════
   768px BREAKPOINT — MAIN LAYOUT
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Show mobile controls */
  .mobile-menu-btn    { display: flex; }
  .mobile-bottom-nav  { display: block; }
  .mobile-drawer      { display: block; }

  /* Topbar: compact — just logo + hamburger */
  .topbar {
    padding: 10px 14px;
    gap: 10px;
  }
  .topbar-user    { display: none !important; }
  .topbar-nav     { display: none !important; }
  .topbar-logo-text { font-size: 18px; }
  .topbar-logo img  { height: 38px; }

  /* Game shell: single column, no sidebar */
  .game-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topbar"
      "main" !important;
  }
  .sidebar      { display: none !important; }
  .right-panel  { display: none !important; }

  /* Main content: full width, pad bottom for bottom nav */
  .main-content {
    padding: 14px 10px 76px !important;
    min-height: calc(100vh - 58px);
  }

  /* Cards: less padding on small screens */
  .card { padding: 14px 12px; }
  .card-title { font-size: 14px; }

  /* Buttons: slightly larger tap target */
  .btn { padding: 9px 16px; font-size: 13px; }
  .btn-sm { padding: 7px 12px; font-size: 12px; }

  /* Tables: horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Data tables: adjust */
  .data-table th,
  .data-table td { padding: 8px 10px; font-size: 12px; }

  /* Battle screen */
  .battle-screen { border-radius: 10px; }
  .battle-arena  { min-height: 260px; }

  .pokemon-player-wrap { bottom: 6px; left: 8%; }
  .pokemon-enemy-wrap  { bottom: 0px; right: 8%; }
  .pokemon-sprite       { width: 72px; height: 72px; }
  .pokemon-sprite.enemy { width: 82px; height: 82px; }

  .battle-status-player { top: 8px; left: 6px; min-width: 140px; max-width: 160px; }
  .battle-status-enemy  { top: 8px; right: 6px; min-width: 140px; max-width: 160px; }
  .battle-status-box    { padding: 7px 10px; }

  /* Battle actions row: 2 columns on mobile */
  .battle-actions-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* Party strip in sidebar (shown in drawer) */
  .party-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Auth pages */
  .auth-wrapper { padding: 20px 12px; }
  .auth-box { padding: 24px 16px; }

  /* Forms */
  .form-control { font-size: 16px; } /* prevent iOS zoom */

  /* Pokedex grid */
  .pokedex-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  /* Items bag grid */
  .bag-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  /* Profile / trainer card */
  .trainer-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide legacy fixed-width tables column overflow gracefully */
  .normal_first_td,
  .normal_td,
  .top_first_td,
  .top_td {
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════
   480px BREAKPOINT — PHONE ADJUSTMENTS
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .topbar-logo-text { display: none; } /* logo image only, no text */
  .topbar { padding: 8px 12px; }

  .main-content { padding: 10px 8px 76px !important; }
  .card { padding: 12px 10px; margin-bottom: 10px; }

  .battle-arena  { min-height: 220px; }
  .pokemon-player-wrap { bottom: 4px; }
  .pokemon-enemy-wrap  { bottom: 0px; }
  .pokemon-sprite       { width: 60px; height: 60px; }
  .pokemon-sprite.enemy { width: 68px; height: 68px; }
  .battle-status-player,
  .battle-status-enemy  { min-width: 120px; max-width: 140px; }

  /* Battle action buttons text smaller */
  .battle-action-btn { font-size: 11px !important; padding: 6px 8px !important; }

  /* Bottom nav text hidden, icons only on tiny screens */
  .mobile-nav-item { font-size: 9px; }
  .mobile-nav-item .nav-icon { font-size: 22px; }

  /* Make drawer full-width on very small phones */
  .mobile-drawer { width: 100%; border-left: none; }

  .bag-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}

/* ══════════════════════════════════════════════════
   LANDSCAPE PHONE — battle screen
   Targets phones in landscape (height < 500px)
   ══════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

  /* Topbar compact */
  .topbar { padding: 4px 12px; min-height: 40px; }
  .topbar-logo-text { display: none; }

  /* Main content: no bottom padding for nav, tighter sides */
  .main-content { padding: 4px 8px 8px !important; }

  /* Battle screen: fill viewport height, side-by-side layout */
  .battle-screen {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    height: calc(100vh - 52px);
    border-radius: 8px;
    overflow: hidden;
  }

  /* Arena takes left ~55% */
  .battle-arena {
    flex: 0 0 55%;
    min-height: unset;
    height: 100%;
  }

  /* UI bottom takes right ~45% */
  .battle-ui-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
  }

  /* Smaller sprites */
  .pokemon-player-wrap { bottom: 8px; left: 6%; }
  .pokemon-enemy-wrap  { bottom: 2px; right: 6%; }
  .pokemon-sprite       { width: 56px; height: 56px; }
  .pokemon-sprite.enemy { width: 64px; height: 64px; }

  /* Compact status boxes */
  .battle-status-player { top: 4px; left: 4px; min-width: 120px; max-width: 145px; }
  .battle-status-enemy  { top: 4px; right: 4px; min-width: 120px; max-width: 145px; }
  .battle-status-box    { padding: 5px 8px; }
  .battle-status-name   { font-size: 12px; }
  .battle-hp-text       { font-size: 10px; }

  /* Battle log compact */
  .battle-log { max-height: 44px; min-height: 36px; }
  .battle-log-text { font-size: 12px; }

  /* Action grid: 2 cols */
  .battle-attacks-grid  { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .battle-actions-grid  { grid-template-columns: 1fr 1fr !important; }
  .battle-action-btn    { font-size: 11px !important; padding: 6px 8px !important; }

  /* Tab bar compact */
  .battle-tab { padding: 6px 4px; font-size: 10px; }
  .battle-tab .tab-icon { font-size: 14px; }

  /* Hide mobile bottom nav in landscape (not enough vertical space) */
  .mobile-bottom-nav { display: none; }
}