/* ============================================================
   REMINISCE MU / NABIN - MOBILE FRIENDLY OVERRIDE
   Desktop layout is intentionally untouched. 2026-08-17
   ============================================================ */

@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }


  /* HARD FIX: original Nabin sets body.home-page overflow:hidden !important.
     Force native page scrolling on phones/tablets/touch devices. */
  html,
  body,
  body.home-page,
  html.mobile-native-scroll,
  body.mobile-native-scroll {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.home-page {
    position: static !important;
  }

  body.home-page .container-snap,
  body.home-page .content-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.home-page .section-nav,
  html.mobile-native-scroll .section-nav,
  body.mobile-native-scroll .section-nav {
    display: none !important;
    pointer-events: none !important;
  }

  *, *::before, *::after { box-sizing: border-box !important; }
  img, video, iframe, canvas, svg { max-width: 100%; }

  /* ---------- NAVBAR ---------- */
  .navbar,
  body .navbar,
  body.internal-page .navbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    padding: 4px 0 !important;
    z-index: 100000 !important;
  }

  .navbar > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 12px !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
  }

  .navbar-brand img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    margin-left: auto !important;
    border: 1px solid rgba(232,163,79,.55) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(232,163,79,.22) !important; }

  .navbar-collapse {
    flex-basis: 100% !important;
    width: 100% !important;
    max-height: calc(100svh - 70px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin: 6px 0 8px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .navbar-nav,
  .navbar-nav.ms-auto {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .navbar-nav.ms-auto { margin-top: 6px !important; }
  .navbar-nav .nav-item { width: 100% !important; min-width: 0 !important; }
  .navbar .nav-link,
  .navbar-nav .nav-link {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    touch-action: manipulation !important;
  }

  /* ---------- HOME: normal vertical flow on phones/tablets ---------- */
  #contenidoWeb,
  .content-wrapper,
  .container-snap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .container-snap .panel,
  .panel.main-section,
  .panel.noticias,
  .panel.rankings,
  .panel.class-section,
  #inicio, #noticias, #rankings, #class-showcase {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    clip-path: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    display: flex !important;
  }

  .panel .panel-content,
  #inicio .panel-content,
  #noticias .panel-content,
  #rankings .panel-content,
  #class-showcase .panel-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    padding: 82px 12px 48px !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .section-nav { display: none !important; }
  #videoBg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100svh !important;
    object-fit: cover !important;
  }

  /* ---------- HERO ---------- */
  #inicio .fade-in-down {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #inicio .hero-logo-img {
    width: min(58vw, 220px) !important;
    max-width: min(58vw, 220px) !important;
    height: auto !important;
    margin: 0 auto 4px !important;
  }

  #inicio .text-main-section {
    width: min(92vw, 560px) !important;
    margin: 6px auto 12px !important;
    padding: 0 8px !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.35 !important;
  }

  /* News preview: swipe cards horizontally instead of squeezing 3 cards. */
  #inicio .hero-quick-news-container,
  .hero-quick-news-container {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(220px, 78vw) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 4px 4px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .hero-quick-news-container::-webkit-scrollbar { display: none !important; }

  #inicio .hero-quick-news-card,
  .hero-quick-news-card {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: clamp(160px, 50vw, 230px) !important;
    scroll-snap-align: center !important;
  }

  .hero-quick-news-thumb { width: 100% !important; height: 100% !important; }
  .hero-quick-news-overlay { padding: 10px 12px 8px !important; }
  .hero-quick-news-title {
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .hero-quick-news-date { font-size: 8px !important; }

  /* Keep floating server/Discord widgets from covering the logo/news. */
  .server-info-glass,
  .discord-hero-widget {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    transform-origin: center !important;
    width: min(94vw, 390px) !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
  }

  .discord-hero-widget { display: flex !important; }
  #inicio .h2-main-section { display: none !important; }

  /* ---------- NEWS / RANKINGS HOME SECTIONS ---------- */
  #noticias .newsSwiper,
  #noticia .newsSwiper,
  #rankings .rankingsSwiper,
  #ranking .rankingsSwiper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 8px 34px !important;
    overflow: hidden !important;
  }

  .newsSwiper .swiper-slide,
  .rankingsSwiper .swiper-slide { padding: 0 !important; }

  .news-card {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(330px, 105vw, 470px) !important;
  }

  #rankings .rankings-card,
  #ranking .rankings-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 10px !important;
    margin: 0 auto !important;
  }

  #rankings .rankings-table,
  #ranking .rankings-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    white-space: normal !important;
  }
  #rankings .rankings-table th,
  #rankings .rankings-table td,
  #ranking .rankings-table th,
  #ranking .rankings-table td {
    padding: 8px 4px !important;
    font-size: clamp(10px, 3vw, 13px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* ---------- CLASSES ---------- */
  #class-showcase .panel-content {
    justify-content: flex-start !important;
    padding-bottom: 64px !important;
  }
  #class-showcase .class-main-container,
  .class-main-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  #class-showcase .class-character,
  .class-character {
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  #class-showcase .class-character img,
  .class-character img {
    width: auto !important;
    max-width: min(90vw, 430px) !important;
    height: auto !important;
    max-height: 50svh !important;
    object-fit: contain !important;
  }
  #class-showcase .class-info-box,
  .class-info-box {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    align-items: center !important;
    text-align: center !important;
  }
  #class-showcase .chart-container-compact,
  .chart-container-compact {
    width: min(92vw, 390px) !important;
    max-width: 100% !important;
    height: 240px !important;
    margin: 6px auto 0 !important;
  }
  .class-nav-arrow { width: 44px !important; height: 44px !important; }

  /* ---------- INTERNAL PAGES / WEBENGINE MODULES ---------- */
  body.internal-page .internal-content-wrapper,
  body.usercp-page .internal-content-wrapper,
  body.page-news .internal-content-wrapper {
    width: 100% !important;
    min-height: calc(100svh - 58px) !important;
    padding: 18px 0 42px !important;
    overflow-x: hidden !important;
  }
  body.internal-page .internal-content-wrapper > .container,
  body.usercp-page .internal-content-wrapper > .container,
  body.page-news .internal-content-wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
  }
  body.internal-page .internal-content-wrapper > .container > div,
  .premium-cartel-square,
  .usercp-page-content,
  .news-page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-title, h1, h2, h3, h4 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Forms: no fixed width, no iOS zoom on inputs. */
  form, fieldset, .form-group, .input-group { max-width: 100% !important; }
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea,
  .form-control, .form-select {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  button, .btn, input[type="submit"], input[type="button"] {
    min-height: 42px;
    touch-action: manipulation !important;
  }

  /* Legacy Bootstrap 3 grids used by WebEngine. */
  .row > [class*="col-xs-"],
  .row > [class*="col-sm-"],
  .row > [class*="col-md-"] {
    min-width: 0 !important;
  }

  /* Tables scroll inside their own box, not the entire page. */
  .table-responsive,
  .market-v2-tablewrap,
  .market-v2-modal-tablewrap,
  body.internal-page table.table,
  body.internal-page .rankings-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.internal-page table.table,
  body.internal-page .rankings-table {
    width: 100% !important;
  }

  /* UserCP cards: 2 columns on normal phones/tablets. */
  body.usercp-page .usercp-page-content {
    padding: 16px 12px !important;
  }
  body.usercp-page .usercp-page-content > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.usercp-page .usercp-page-content > .row > .col-xs-3 > a {
    min-height: 118px !important;
    padding: 12px 8px !important;
  }

  /* News articles/images. */
  body.page-news .panel.panel-news,
  body.page-news .news-page-content { overflow: hidden !important; }
  body.page-news .panel-news .panel-heading,
  body.page-news .panel-news .panel-body,
  body.page-news .panel-news .panel-footer,
  .news-detail-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .news-detail-content img,
  body.page-news .panel-news .panel-body img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* Floating UI should stay reachable without covering content. */
  .rrss-icon-premium { display: none !important; }
  .events-fab {
    position: fixed !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    transform: none !important;
    z-index: 99990 !important;
  }
  .events-fab-text { display: none !important; }
  .events-fab-icon { width: 48px !important; height: 48px !important; }

  .events-modal-custom .modal-content,
  #events-modal .modal-content {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 88svh !important;
    overflow: auto !important;
  }
  #events-modal table { min-width: 520px !important; }

  footer,
  footer.footer-visible {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .footer-main { margin: 0 !important; padding: 8px !important; text-align: center !important; }
}

@media (max-width: 575.98px) {
  .navbar > .container { padding-left: 8px !important; padding-right: 8px !important; }
  .panel .panel-content,
  #inicio .panel-content,
  #noticias .panel-content,
  #rankings .panel-content,
  #class-showcase .panel-content { padding-left: 8px !important; padding-right: 8px !important; }

  #inicio .hero-logo-img { width: min(64vw, 205px) !important; max-width: min(64vw, 205px) !important; }
  .hero-quick-news-container { grid-auto-columns: minmax(210px, 86vw) !important; }
  .hero-quick-news-card { height: clamp(155px, 58vw, 215px) !important; }

  .section-premium-title,
  #rankings .section-premium-title,
  #noticias .section-premium-title,
  #class-showcase .section-premium-title {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
  }

  body.usercp-page .usercp-page-content > .row { grid-template-columns: 1fr !important; }
  body.usercp-page .usercp-page-content > .row > .col-xs-3 > a { min-height: 104px !important; }

  body.internal-page .market-v2 { padding: 10px !important; width: 100% !important; max-width: 100% !important; }
  body.internal-page .market-v2-title h2 { font-size: 20px !important; }
  body.internal-page .market-v2-statrow,
  body.internal-page .market-v2-levelrow > button { min-height: 46px !important; }
  body.internal-page .market-v2-modal-head { padding: 13px !important; }
  body.internal-page .market-v2-modal-head h3 { font-size: 17px !important; }
}

@media (max-width: 374px) {
  .navbar .nav-link { font-size: 11px !important; }
  #inicio .text-main-section { font-size: 13px !important; }
  .hero-quick-news-container { grid-auto-columns: 88vw !important; }
  .events-fab-icon { width: 44px !important; height: 44px !important; }
}