/**
 * WebPortal Mobile Styles
 *
 * Mobile-only enhancements that don't affect desktop experience.
 * Uses additive approach via media queries.
 *
 * Breakpoints:
 *   - 768px: Tablet and below
 *   - 480px: Phone
 *   - (hover: none) and (pointer: coarse): Touch devices
 */

/* ==================== Touch Device Detection ==================== */
/* Applied via JS: document.body.classList.add('touch-device') */
body.touch-device {
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

/* ==================== Tap Target Sizing ==================== */
/* Ensure all interactive elements meet 44px minimum for touch */
@media (hover: none) and (pointer: coarse) {
  button,
  .pixel-button,
  input[type="submit"],
  input[type="button"],
  a.pixel-button,
  .tab-button,
  .hex-nav-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent iOS zoom on input focus - must be 16px+ */
  input,
  select,
  textarea,
  .pixel-input,
  .pixel-select,
  .pixel-textarea {
    font-size: 16px;
  }
}

/* ==================== Tablet Styles (768px and below) ==================== */
@media (max-width: 768px) {
  /* Hide HexUI footer on mobile - pages use simpler mobile footer or no footer */
  #hex-footer,
  .hex-site-footer {
    display: none !important;
  }

  /* Base adjustments */
  body {
    font-size: 14px;
    overflow-x: hidden;
  }

  /* Header adjustments - constrain width */
  .hex-site-header {
    padding: 4px 8px;
    max-width: 100vw;
    overflow: hidden;
  }

  .hex-site-header .hex-component,
  .hex-site-header canvas {
    max-width: 100% !important;
    width: 100% !important;
  }

  .hex-header-content {
    padding: 4px 8px;
  }

  .hex-logo {
    font-size: 16px;
  }

  /* Page content */
  .page-content {
    padding: 0 8px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Footer - constrain width */
  .hex-site-footer {
    padding: 4px 8px;
    max-width: 100vw;
    overflow: hidden;
  }

  .hex-site-footer .hex-component,
  .hex-site-footer canvas {
    max-width: 100% !important;
    width: 100% !important;
  }

  .hex-footer-content {
    font-size: 11px;
    flex-direction: column;
    gap: 4px;
  }

  /* Modals */
  .modal-content {
    width: 95%;
    max-height: 90vh;
    margin: 16px;
  }

  /* Form groups */
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  /* Tables - add horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==================== Phone Styles (480px and below) ==================== */
@media (max-width: 480px) {
  /* Smaller base font */
  body {
    font-size: 13px;
  }

  h1 { font-size: 16px; }
  h2 { font-size: 14px; }
  h3 { font-size: 13px; }

  /* Header compact */
  .hex-logo {
    font-size: 14px;
    letter-spacing: 1px;
  }

  /* Full-width buttons on mobile */
  .pixel-button.mobile-full {
    width: 100%;
    display: block;
  }

  /* Stack elements */
  .hex-user-info {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Inputs full width */
  input,
  select,
  textarea,
  .pixel-input,
  .pixel-select,
  .pixel-textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px;
  }

  /* Button sizes */
  button,
  .pixel-button {
    padding: 10px 16px;
    min-height: 44px;
  }

  /* Toast positioning */
  .toast {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }

  /* Panels reduce padding */
  .pixel-panel {
    padding: 12px;
  }

  /* Home page grid */
  .home-grid {
    grid-template-columns: 1fr;
  }

  .quick-links {
    grid-template-columns: 1fr;
  }

  /* Tab buttons scroll horizontally */
  .tab-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .tab-button {
    flex-shrink: 0;
  }
}

/* ==================== Simple Mobile Header ==================== */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-dark);
  border-bottom: 2px solid var(--border-dark);
}

.mobile-header .hex-logo {
  font-size: 14px;
  flex: 1;
  text-align: center;
}

.mobile-header-user {
  display: flex;
  align-items: center;
}

.mobile-header-user .hex-avatar {
  width: 32px;
  height: 32px;
}

.mobile-header-login {
  color: var(--gold);
  font-size: 12px;
  padding: 8px 12px;
}

/* ==================== Simple Mobile Footer ==================== */
.mobile-footer {
  display: none;
  text-align: center;
  padding: 12px;
  background: var(--bg-dark);
  border-top: 2px solid var(--border-dark);
  color: var(--text-secondary);
  font-size: 11px;
}

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }

  .mobile-footer {
    display: block;
  }
}

/* ==================== Mobile Navigation (Hamburger) ==================== */
/* Hamburger menu button */
.mobile-menu-btn {
  display: flex;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn:hover {
  color: var(--gold);
}

/* Hamburger icon (three lines) */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
}

.hamburger-icon span {
  display: block;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Hamburger animation when open */
.mobile-menu-btn.open .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.open .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--bg-dark);
  border-right: 4px solid var(--border-dark);
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mobile-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-header {
  padding: 16px;
  border-bottom: 2px solid var(--border-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav-header .hex-logo {
  font-size: 16px;
}

.mobile-nav-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}

.mobile-nav-links {
  padding: 16px 0;
}

.mobile-nav-link {
  display: block;
  padding: 14px 20px;
  color: var(--text-primary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
  background: var(--bg-medium);
  text-decoration: none;
}

.mobile-nav-link.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: var(--bg-medium);
}

.mobile-nav-divider {
  height: 1px;
  background: var(--border-dark);
  margin: 8px 16px;
}

.mobile-nav-user {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--border-dark);
}

.mobile-nav-user .hex-avatar {
  width: 40px;
  height: 40px;
}

.mobile-nav-user .hex-username {
  font-size: 14px;
}

/* Show mobile nav elements on mobile */
@media (max-width: 768px) {
  .mobile-nav-drawer,
  .mobile-nav-overlay {
    display: block;
  }
}

/* ==================== Utility Classes ==================== */
/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline {
    display: inline !important;
  }
}

/* Hide on phone */
@media (max-width: 480px) {
  .hide-phone {
    display: none !important;
  }
}

/* ==================== Safe Area (Notch) Support ==================== */
@supports (padding: env(safe-area-inset-left)) {
  .page-content {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .mobile-nav-drawer {
    padding-left: env(safe-area-inset-left);
  }
}

/* ==================== Prevent Text Selection on Touch ==================== */
@media (hover: none) and (pointer: coarse) {
  button,
  .pixel-button,
  .tab-button,
  .hex-nav-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ==================== Landscape Phone Adjustments ==================== */
@media (max-height: 480px) and (orientation: landscape) {
  .hex-site-header {
    padding: 2px 8px;
  }

  .hex-site-footer {
    padding: 2px 8px;
  }

  .modal-content {
    max-height: 95vh;
  }
}

/* ==================== Page-Specific Min-Width Overrides ==================== */
/* Remove min-width constraints that cause horizontal scrolling on mobile */

@media (max-width: 768px) {
  /* Inventory page */
  .inventory-page,
  .inventory-layout-container {
    min-width: auto !important;
  }

  /* Fairy Circle (HexBingo) pages */
  .hexbingo-lobby-page,
  .hexbingo-layout-container,
  .hexbingo-game-page,
  .hexbingo-lists-page {
    min-width: auto !important;
  }

  /* Crafting, Alchemy, Enhancement pages */
  .alchemy-page,
  .alchemy-layout-container,
  .crafting-page,
  .crafting-layout-container,
  .enhancement-page,
  .enhancement-layout-container {
    min-width: auto !important;
  }

  /* Profile page */
  .profile-page,
  .profile-layout-container,
  .profile-columns {
    min-width: auto !important;
  }

  /* Quest log */
  .quest-log-page,
  .quest-log-layout-container {
    min-width: auto !important;
  }

  /* Trade page */
  .trade-page {
    min-width: auto !important;
  }

  /* Admin pages */
  .admin-page,
  .admin-layout-container {
    min-width: auto !important;
  }
}

/* ==================== Canvas Game Scaling ==================== */
/* Make canvas games responsive - but NOT HexUI canvases */
@media (max-width: 480px) {
  /* Only apply to non-HexUI game canvases */
  .game-container canvas,
  .game-canvas-container canvas,
  .minigame-canvas-container canvas {
    max-width: 100%;
  }

  /* Minigame containers */
  .game-container,
  .game-canvas-container,
  .minigame-canvas-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==================== HexUI Panel Stacking ==================== */
/* Stack HexUI panels vertically on mobile */
@media (max-width: 768px) {
  .hex-layout-container {
    flex-direction: column !important;
  }

  /* Only apply to layout-managed hex components, not standalone panels */
  .hex-layout-container .hex-component {
    width: 100% !important;
    max-width: none !important;
  }

  /* Allow panels to shrink - only in layout containers */
  .hex-layout-container [class*="hex-panel"] {
    min-width: auto !important;
    width: 100% !important;
  }
}