/* ============================================================
   RESPONSIVE SCALING FIX
   Makes CSS work on mobile, desktop, and browsers at 75-85% zoom
   ============================================================ */

/* CSS custom properties for responsive design */
:root {
  --mobile-map-min-height: 30rem;
}

/* Reset and base responsive setup */
* {
  box-sizing: border-box;
}

html {
  /* Use 62.5% for easy rem calculations (1rem = 10px at 100% zoom) */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  /* Base font size in rem (16px equivalent) */
  font-size: 1.6rem;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  /* Smooth font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   VIEWPORT BASED RESPONSIVE CONTAINERS
   ============================================================ */

.pipboy-root {
  width: 100vw;
  height: 100vh;
  /* Use dvh for better mobile support (dynamic viewport height) */
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.pipboy-bezel {
  width: 100%;
  height: 100%;
  /* Responsive padding using viewport units */
  padding: clamp(0.5rem, 1vw, 1.2rem);
}

.pipboy-frame {
  width: 100%;
  height: 100%;
  /* Responsive border radius */
  border-radius: clamp(0.8rem, 1.5vw, 1.8rem);
  border-width: clamp(2px, 0.3vw, 3px);
}

/* ============================================================
   HEADER - RESPONSIVE
   ============================================================ */

.pipboy-header {
  padding: clamp(0.8rem, 1.5vw, 1.5rem);
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  flex-wrap: wrap;
  gap: 1rem;
}

.pipboy-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  letter-spacing: clamp(0.1rem, 0.3vw, 0.4rem);
}

.pipboy-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.4rem) !important;
}

/* Wallet HUD - responsive, minimal dApp-style connect */
.wallet-hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.3rem, 0.8vw, 0.5rem);
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  max-width: 100%;
}

.wallet-hud span {
  font-size: clamp(0.8rem, 0.9vw, 1rem);
  opacity: 0.9;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(200px, 40vw);
}

.wallet-hud button {
  padding: clamp(0.3rem, 0.6vw, 0.4rem) clamp(0.6rem, 1.2vw, 0.8rem);
  font-size: clamp(0.8rem, 0.9vw, 1rem);
  min-width: auto;
  min-height: 32px;
  border-radius: 3px;
  white-space: nowrap;
  touch-action: manipulation;
}

/* ============================================================
   TABS - RESPONSIVE
   ============================================================ */

.pipboy-tabs {
  padding: clamp(0.5rem, 1vw, 1rem);
  gap: clamp(0.3rem, 0.8vw, 0.8rem);
  flex-wrap: wrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* Enable smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
}

.pipboy-tab {
  padding: clamp(0.6rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  white-space: nowrap;
  /* Prevent tabs from being too small on mobile */
  min-width: clamp(6rem, 10vw, 10rem);
}

/* ============================================================
   MAIN PANELS - RESPONSIVE
   ============================================================ */

.pipboy-main {
  padding: clamp(0.8rem, 1.5vw, 1.5rem);
  /* Adjust height to account for header/footer */
  height: calc(100% - clamp(12rem, 20vh, 20rem));
  overflow-y: auto;
  overflow-x: hidden;
  /* Smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
}

.pipboy-panel {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

.panel-header {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  padding: clamp(0.5rem, 1vw, 1rem) 0;
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
}

.panel-body {
  padding: clamp(0.5rem, 1vw, 1rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

.panel-row {
  padding: clamp(0.5rem, 0.8vw, 0.8rem) 0;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

/* ============================================================
   BUTTONS - RESPONSIVE
   ============================================================ */

.pipboy-button,
.pipboy-button-small {
  padding: clamp(0.6rem, 1vw, 1rem) clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  border-width: clamp(1px, 0.2vw, 2px);
  /* Prevent buttons from being too narrow */
  min-width: clamp(8rem, 15vw, 12rem);
}

.pipboy-button-small {
  padding: clamp(0.4rem, 0.8vw, 0.8rem) clamp(0.8rem, 1.5vw, 1.2rem);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  min-width: clamp(6rem, 12vw, 10rem);
}

/* ============================================================
   FOOTER - RESPONSIVE
   ============================================================ */

.pipboy-footer {
  padding: clamp(0.8rem, 1.5vw, 1.5rem);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   MAP CONTAINER - RESPONSIVE - FILLS AVAILABLE SPACE
   ============================================================ */

.pipboy-map {
  height: 100%;
  min-height: 40rem;
  max-height: none;
  border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
}

/* Map panel body should fill available space */
#panel-map .panel-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#panel-map #mapContainer {
  /* fill whatever space the panel-body allocates; parent has height:100% */
  width: 100%;
  height: 100%;
  position: relative;
}

.map-overlay {
  padding: clamp(0.5rem, 1vw, 1rem);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 255, 65, 0.3);
  z-index: 1000;
  pointer-events: none;
}

.gps-badge {
  padding: clamp(0.4rem, 0.8vw, 0.8rem);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  bottom: clamp(0.5rem, 1vw, 1rem);
  right: clamp(0.5rem, 1vw, 1rem);
}

/* Map Controls - Responsive, matches GPS badge */
.map-controls {
  bottom: clamp(0.5rem, 1vw, 1rem);
  left: clamp(0.5rem, 1vw, 1rem);
}

.map-control-btn {
  padding: clamp(0.4rem, 0.8vw, 0.8rem);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
}

.explore-dot {
  width: clamp(6px, 0.8vw, 8px);
  height: clamp(6px, 0.8vw, 8px);
}

/* ============================================================
   SPECIAL STATS - RESPONSIVE
   ============================================================ */

.special-row {
  padding: clamp(0.4rem, 0.8vw, 0.8rem) 0;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

.special-label {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  width: clamp(2rem, 3vw, 3rem);
}

.special-bar {
  margin: 0 clamp(0.8rem, 1.5vw, 1.5rem);
  height: clamp(1.4rem, 2vw, 2rem);
}

/* ============================================================
   MOBILE SPECIFIC (phones and small tablets)
   ============================================================ */

@media screen and (max-width: 768px) {
  html {
    font-size: 55%; /* Slightly smaller base for mobile */
  }

  .pipboy-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pipboy-tabs {
    justify-content: flex-start;
    padding-bottom: 1rem;
  }

  .pipboy-tab {
    flex: 0 0 auto;
  }

  .pipboy-main {
    /* More vertical space on mobile */
    height: calc(100% - 18rem);
  }

  .pipboy-footer {
    font-size: 1rem;
    text-align: center;
  }

  /* Stack elements vertically on mobile */
  .panel-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Make buttons full-width on mobile */
  .pipboy-button,
  .pipboy-button-small {
    width: 100%;
    min-width: unset;
  }

  /* Adjust map height on mobile.
     NOTE: do NOT set an explicit height here.  #mapContainer uses
     position:absolute with top/bottom:0 to fill its parent, so an
     explicit height on .pipboy-map creates an over-constrained layout
     where `bottom` is ignored and the container may be clipped.
     min-height is enough to prevent total collapse on very short viewports. */
  .pipboy-map {
    min-height: var(--mobile-map-min-height);
  }

  /* MOBILE MAP FIX - ensure panel-body and mapContainer have minimum height */
  #panel-map .panel-body {
    min-height: calc(100vh - 140px);
  }

  #mapContainer {
    min-height: var(--mobile-map-min-height) !important;
  }

  /* MOBILE MAP TOUCH FIX - enable map gestures while preventing page scroll */
  #mapContainer,
  .pipboy-map,
  #panel-map .panel-body {
    /* Let Leaflet control its own touch behavior - don't override */
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Leaflet handles its own gestures - allow pan and pinch-zoom */
  #mapContainer .leaflet-container {
    touch-action: none !important;
    pointer-events: auto !important;
  }

  /* Ensure map markers remain clickable on touch devices */
  .leaflet-marker-icon,
  .leaflet-marker-pane {
    touch-action: auto !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   TABLET SPECIFIC (tablets in portrait/landscape)
   ============================================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 58%; /* Medium base for tablets */
  }

  .pipboy-main {
    height: calc(100% - 16rem);
  }
}

/* ============================================================
   DESKTOP SPECIFIC (large screens)
   ============================================================ */

@media screen and (min-width: 1025px) {
  html {
    font-size: 62.5%; /* Standard base for desktop */
  }

  .pipboy-bezel {
    max-width: 140rem;
    max-height: 90rem;
    margin: auto;
  }
}

/* ============================================================
   ULTRA-WIDE SCREENS
   ============================================================ */

@media screen and (min-width: 1920px) {
  .pipboy-bezel {
    max-width: 160rem;
  }
}

/* ============================================================
   LANDSCAPE MOBILE (phones in landscape)
   ============================================================ */

@media screen and (max-width: 768px) and (orientation: landscape) {
  .pipboy-main {
    height: calc(100% - 14rem);
  }

  /* Same rationale as portrait: let position:absolute inset fill the parent.
     A fixed height would over-constrain the layout in landscape too. */
  .pipboy-map {
    min-height: 25rem;
  }
}

/* ============================================================
   BROWSER ZOOM COMPENSATION (75-85% zoom)
   ============================================================ */

/* These rules help maintain readability at different zoom levels */
@media screen and (min-width: 1400px) {
  /* Assume user might be zoomed out */
  html {
    font-size: 65%;
  }
}

@media screen and (max-width: 600px) {
  /* Assume user might be zoomed in on mobile */
  html {
    font-size: 52%;
  }
}

/* ============================================================
   WALLET BROWSER SPECIFIC (Phantom, MetaMask mobile)
   ============================================================ */

/* Wallet browsers often have navigation bars */
@supports (padding: max(0px)) {
  .pipboy-root {
    /* Account for safe areas (notches, nav bars) */
    padding-top: max(env(safe-area-inset-top), 1rem);
    padding-bottom: max(env(safe-area-inset-bottom), 1rem);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================
   SCROLLBAR STYLING (webkit browsers)
   ============================================================ */

.pipboy-main::-webkit-scrollbar,
.pipboy-tabs::-webkit-scrollbar {
  width: clamp(0.6rem, 1vw, 1rem);
  height: clamp(0.6rem, 1vw, 1rem);
}

.pipboy-main::-webkit-scrollbar-track,
.pipboy-tabs::-webkit-scrollbar-track {
  background: rgba(0, 20, 0, 0.3);
  border-radius: 0.5rem;
}

.pipboy-main::-webkit-scrollbar-thumb,
.pipboy-tabs::-webkit-scrollbar-thumb {
  background: rgba(159, 232, 141, 0.5);
  border-radius: 0.5rem;
}

.pipboy-main::-webkit-scrollbar-thumb:hover,
.pipboy-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(159, 232, 141, 0.7);
}

/* ============================================================
   TOUCH FRIENDLY (increase tap targets)
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  .pipboy-tab,
  .pipboy-button,
  .pipboy-button-small,
  button {
    /* Minimum tap target size: 44x44px (Apple) / 48x48px (Android) */
    min-height: 4.4rem;
    min-width: 4.4rem;
  }

  /* Add more spacing between interactive elements */
  .pipboy-tabs {
    gap: 1rem;
  }

  .panel-row button,
  .panel-body button {
    margin: 0.5rem 0;
  }

  /* Larger POI markers for easier tapping on touch devices */
  .leaflet-marker-icon {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Larger touch targets for map controls */
  .map-control-btn {
    min-height: 4.4rem;
    padding: 0.8rem 1.2rem;
  }

  .gps-badge {
    min-height: 4.4rem;
    padding: 0.8rem 1.2rem;
  }
}

/* ============================================================
   HIGH DPI / RETINA DISPLAYS
   ============================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Sharper text rendering on high DPI */
  .pipboy-crt * {
    text-rendering: optimizeLegibility;
  }
}

/* ============================================================
   PRINT (disable for print)
   ============================================================ */

@media print {
  .pipboy-noise,
  .pipboy-scanlines,
  .pipboy-bezel {
    display: none !important;
  }
}

/* ============================================================
   REDUCED MOTION (accessibility)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   DARK MODE SUPPORT (system preference)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  /* Already dark, but ensure consistency */
  .pipboy-crt {
    background: radial-gradient(circle at center, #0a1a0a 0%, #020502 60%, #000000 100%);
  }
}

/* ============================================================
   SMARTWATCH SUPPORT (Apple Watch, Wear OS)
   Small circular/square displays ~38-45mm (150-200px)
   ============================================================ */

@media screen and (max-width: 250px), 
       screen and (max-height: 250px) {
  html {
    font-size: 45%;
  }

  /* Hide non-essential UI for watches */
  .pipboy-header,
  .pipboy-tabs,
  .pipboy-footer,
  .wallet-hud,
  .pipboy-noise,
  .pipboy-scanlines,
  .map-overlay,
  .panel-header {
    display: none !important;
  }

  .pipboy-root,
  .pipboy-bezel,
  .pipboy-frame,
  .pipboy-crt {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
  }

  .pipboy-main {
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }

  .pipboy-panel {
    padding: 2px;
    border-radius: 0;
  }

  /* Map fills entire watch screen */
  .pipboy-map,
  #mapContainer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: unset;
    border: none;
    border-radius: 0;
  }

  /* Larger touch targets for watch */
  .leaflet-marker-icon {
    min-width: 30px !important;
    min-height: 30px !important;
  }

  /* GPS badge compact for watch */
  .gps-badge {
    padding: 2px 4px;
    font-size: 8px;
    bottom: 2px;
    right: 2px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
  }

  /* Map controls compact for watch - uniform with GPS badge */
  .map-controls {
    bottom: 2px;
    left: 2px;
  }

  .map-control-btn {
    padding: 2px 4px;
    font-size: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
  }

  .explore-dot {
    width: 6px;
    height: 6px;
  }

  .acc-dot {
    width: 6px;
    height: 6px;
  }

  /* POI markers larger for watch touch */
  .poi-marker img,
  .poi-marker svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================================
   SMALL MOBILE / VERY SMALL SCREENS (< 360px width)
   ============================================================ */

@media screen and (max-width: 360px) {
  html {
    font-size: 50%;
  }

  .pipboy-header {
    padding: 4px 8px;
  }

  .pipboy-title {
    font-size: 1.4rem !important;
  }

  .pipboy-tabs {
    padding: 2px 4px;
    gap: 2px;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .pipboy-tab {
    padding: 4px 8px;
    font-size: 1rem;
    min-width: 4rem;
  }

  .pipboy-main {
    height: calc(100% - 10rem);
    padding: 4px;
  }

  .pipboy-map {
    min-height: 15rem;
  }
}

/* ============================================================
   BATTLE OPTIONS — STACK ON MOBILE (BUG-016)
   ============================================================ */
@media (max-width: 768px) {
  .battle-options {
    flex-direction: column;
  }
}