/* Responsive Hardening for Pixel Hub */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Bloc services accueil (8 cartes) : grille fluide tablette / mobile */
@media (max-width: 1200px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .services {
    grid-template-columns: 1fr !important;
  }
}

/* Focus clavier visible (sans changer le look au clic souris) */
:focus-visible {
  outline: 2px solid rgba(169, 188, 224, 0.85);
  outline-offset: 3px;
}

[data-theme="light"] :focus-visible {
  outline-color: rgba(61, 99, 224, 0.9);
}

/* Base Fixes */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  max-width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body {
  min-height: calc(var(--vh, 1vh) * 100);
  /* NE PAS mettre overflow-x:hidden sur body — bloque le scroll vertical dans Chrome/Safari */
}


/* Force Reveal visibility on mobile/forced modes */
html:not([data-device="pc"]) .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Force Touch Targets — uniquement sur les boutons et CTAs, pas sur les liens de nav */
.ph-btn, button.btn, a.btn, input[type="submit"], 
button[type="submit"], .btn-primary, .cta-btn {
  min-height: 48px;
  min-width: 44px;
}

html[data-input="coarse"] button,
html[data-input="coarse"] a,
html[data-input="coarse"] input,
html[data-input="coarse"] select,
html[data-input="coarse"] textarea {
  touch-action: manipulation;
}

/* Improved touch feedback */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .chip:active,
  a.card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  
  /* Larger touch targets for small screens */
  .service-card,
  .feature-card,
  .mini {
    min-height: 44px;
  }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-card {
    min-height: auto;
    padding: 16px;
  }
  
  .hero-copy {
    gap: 8px;
  }
  
  .title {
    font-size: clamp(24px, 8vw, 36px);
  }
  
  .pills {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .pill {
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Extra small screens (< 360px) */
@media (max-width: 359px) {
  .shell {
    width: calc(100% - 8px);
    margin: 0 4px;
  }
  
  .actions .btn {
    padding: 12px 16px;
    font-size: 13px;
  }
  
  .service-card,
  .feature-card,
  .reason-card,
  .mini {
    padding: 12px;
  }
  
  .head h3 {
    font-size: 15px;
  }
}

/* Mobile Layout Fixes */
@media (max-width: 600px) {
  .ph-topbar-inner {
    gap: 6px;
  }
}

/* Card & Content Scaling */
@media (max-width: 768px) {
  .ph-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  
  /* Profile Page Mobile */
  .profile-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix overlaps — exclu les pages IA qui ont leur propre layout fixe */
  body:not(.ph-ai-fullscreen) {
    padding-bottom: calc(80px + var(--safe-bottom));
  }

  .shell,
  .wrap {
    width: min(100%, calc(100% - 20px)) !important;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  body {
    padding-top: calc(8px + var(--safe-top));
    padding-left: calc(8px + var(--safe-left));
    padding-right: calc(8px + var(--safe-right));
  }
}

/* Custom Scrollbars for Mobile */
::-webkit-scrollbar {
  width: 4px;
}

/* Prevent zoom on input on iOS */
input, select, textarea {
  font-size: 16px !important;
}

canvas {
  max-width: 100%;
}

/* Global overflow fixes for messages/long texts */
.ph-ai-message, .ph-cc-item .name, .card p, .line span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Safe area padding globally */
@media (max-width: 768px) {
  body:not(.ph-ai-fullscreen) {
    padding-bottom: calc(90px + var(--safe-bottom)) !important;
  }
}

/* Accueil Pixel Hub : filtres genre scrollables, grille catalogue fluide */
#genre-filters.filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 6px;
  margin-inline: 0;
  max-width: 100%;
  scrollbar-width: thin;
}

#genre-filters.filters .chip {
  flex: 0 0 auto;
}

main.shell.home #games-grid.games {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
}

@media (max-width: 520px) {
  main.shell.home {
    width: min(100%, calc(100% - 16px)) !important;
  }

  main.shell.home .search {
    min-height: 52px;
  }
}