.mobile-only-nav-item {
  display: none;
}

@media (max-width: 1024px) {
  /* Header / nav mobile
     - close/hide desktop nav, show mobile toggle
  */
  header { padding: 0; }
  header .header-content { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.78rem 1rem 0; gap: 0.75rem; }
  header .logo-wrapper { justify-content: flex-start; align-items: center; min-width: 0; flex: 1 1 auto; }
  header .logo { display: block; }
  header .server-name { display: block; line-height: 1; }
  .mobile-menu-button { line-height: 1; }
  header nav {
    display: block;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
  }
  header nav.mobile-open {
    max-height: 28rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  header nav { order: 3; flex-basis: 100%; }
  header nav ul { flex-direction: column; gap: 0.75rem; padding: 0.25rem 0 0.5rem; width: 100%; justify-content: flex-start; }
  header nav ul li a { display: block; width: 100%; padding: 0.85rem 1rem; border-radius: 14px; background: rgba(26,30,38,0.4); }
  .mobile-menu-button { display: flex; margin-left: auto; order: 2; }
  .header-auth { width: 100%; display:flex; justify-content:center; order: 4; }
  .mobile-only-nav-item { display: block; }
}

@media (max-width: 768px) {
  /* Mobile performance: disable the most expensive glass/parallax effects */
  .parallax-bg {
    display: none !important;
    will-change: auto !important;
    filter: none !important;
    transform: none !important;
  }

  header,
  footer,
  .feature-card,
  .step-card,
  .rule-card,
  .rules-category,
  .auth-card,
  .profile-card,
  .setting-card,
  .music-track-card,
  .mobile-nav-tabs,
  .mobile-server-card,
  .music-section,
  .ban-section,
  .notif-item,
  .notif-detail,
  .gallery-modal,
  .gallery-modal-content,
  .modal,
  .modal-overlay,
  .server-busy-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .feature-card,
  .step-card,
  .rule-card,
  .rules-category,
  .profile-card,
  .setting-card,
  .music-track-card,
  .mobile-server-card,
  .music-section,
  .ban-section,
  .gallery-modal-content,
  .modal {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
  }

  .feature-card:hover,
  .step-card:hover,
  .rule-card:hover,
  .profile-card:hover,
  .setting-card:hover,
  .music-track-card:hover {
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
  }

  .hero-section,
  .how-to-play,
  .page-rise {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  /* Global page paddings */
  main, .gallery-page, .about-page, .rules-page, .server-page, .settings-page, .profile-page, .notifications-page { padding: 0 1rem; }

  .about-page,
  .rules-page,
  .gallery-page {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .about-page .content-area,
  .rules-page .content-area,
  .gallery-page .content-area,
  .about-page .tab-content,
  .rules-page .tab-content,
  .gallery-page .tab-content,
  .about-page .info-block,
  .rules-page .info-block,
  .rules-page .rule-card,
  .gallery-page .gallery-grid,
  .gallery-page .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Cards/full-width elements */
  .feature-card, .step-card, .rules-category, .rule-card, .profile-card, .setting-card, .music-track-card, .gallery-modal-content, .app-card { width: 100% !important; max-width: 100% !important; }

  /* Tabs and navs */
  .tab-btn { padding: 0.4rem 0.8rem; font-size: 0.95rem; }

  /* Gallery grid */
  .gallery-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }

  /* Server page adjustments */
  .server-header { display:flex; flex-direction:column; gap:1rem; }
  .nickname-section { width:100%; }
  .music-upload-grid { display:flex; flex-direction:column; gap:0.75rem; }

  /* Notifications */
  .notifications-grid { flex-direction: column; }
  .notif-list { width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--card-border); }
  .notif-detail { padding: 1rem; }
  #detail-content { max-width: 100%; margin: 0; }

  /* Admin */
  .admin-layout { flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
  .admin-sidebar, .sidebar { width: 100% !important; min-width: auto; order: 1; }
  .admin-main, .main-content { width: 100% !important; order: 2; }

  /* Forms and modals */
  .modal, .gallery-modal-content { max-width: 100%; margin: 0.5rem; }

  /* Misc */
  .auth-btn { width: 100%; max-width: 320px; }
  header .header-content { align-items: center; }
  header nav ul { justify-content: flex-start; }
  .tab-nav { justify-content: center; }
  .header-auth { display: none; }
  /* Login/Register centering */
  .auth-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 1rem 0 0.35rem;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: center;
  }

  .auth-container-register {
    padding-bottom: 1rem;
  }

  .auth-container-login {
    padding-bottom: 0.6rem;
  }
  .auth-card {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  .auth-card h2 {
    margin-top: 0.35rem;
  }
  /* Rules/footer spacing */
  .rules-section { margin-bottom: 1.2rem; }

  /* Ensure cards have spacing from footer and between each other */
  .feature-card, .step-card, .rule-card, .profile-card, .setting-card { margin-bottom: 1.1rem; }

  /* Prevent content touching screen edges */
  .container, .content-wrapper, .page-wrapper { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }

  /* Footer safe area: give main area space so footer doesn't overlap */
  main { padding-bottom: 2.2rem; }

  /* Forms: keep inputs within viewport and responsive */
  .form-group input, .form-group textarea, .auth-card input { max-width: 100%; width: 100%; box-sizing: border-box; }

  .privacy-checkbox input[type="checkbox"] {
    width: 22px !important;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0.15rem 0 0;
    box-sizing: border-box;
  }

  /* Cloudflare widget / external iframes should not expand layout */
  .auth-card form,
  .auth-card .form-group,
  .auth-card .privacy-checkbox {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .auth-card form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .auth-footer {
    margin-top: 1.1rem;
  }

  .privacy-checkbox {
    margin-top: 0;
    gap: 0.65rem;
  }

  .privacy-checkbox input {
    margin-top: 0.1rem;
  }

  .turnstile-group {
    margin-top: 0.04rem;
    margin-bottom: 0.08rem;
  }

  .turnstile-group + .privacy-checkbox {
    margin-top: 0;
  }

  .auth-container-login .turnstile-group {
    margin-top: 0;
    margin-bottom: 0.04rem;
  }

  .auth-container-login .turnstile-wrap {
    min-height: 58px;
  }

  .auth-container-register .turnstile-group {
    margin-top: 0;
    margin-bottom: 0.04rem;
  }

  .auth-container-register .turnstile-wrap {
    min-height: 58px;
  }

  iframe[src*="cloudflare"], .cf-turnstile, .cf-widget, .captcha, .g-recaptcha {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .turnstile-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60px;
  }

  .cf-turnstile {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 65px;
    width: min(100%, 300px) !important;
    max-width: 100% !important;
    transform-origin: center top;
  }

  .turnstile-wrap .cf-turnstile,
  .turnstile-wrap .cf-turnstile > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cf-turnstile > div,
  .cf-turnstile iframe {
    width: min(100%, 300px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Password: try to prevent peek of last char with platform-prefixed rules */
  input[type="password"] {
    -webkit-text-security: disc !important;
    -moz-text-security: disc;
    text-security: disc;
  }

  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear {
    display: none;
  }

  /* Profile layout: stack sidebar and main content */
  .profile-layout { display: flex; flex-direction: column; gap: 0.75rem; }
  .profile-sidebar { width: 100% !important; min-width: auto !important; order: 1; }
  .profile-main { width: 100% !important; order: 2; }

  /* Make sidebar panel a full-width touch-friendly list */
  .profile-sidebar .panel { width: 100% !important; padding: 0.6rem; }

  /* Modals: fullscreen experience on mobile */
  .modal, .modal-backdrop { position: fixed !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; z-index: 99999 !important; }
  .modal .modal-content { height: 100% !important; overflow: auto !important; border-radius: 0 !important; }

  /* Avoid internal clipping: ensure modal container sits above other positioned containers */
  .modal-root, #modal-root, .app-root { position: static !important; }

  .hero-section,
  .hero-content,
  .server-description,
  .gallery-page,
  .rules-page,
  .about-page,
  .tab-content,
  .info-block,
  .world-block,
  .step-block,
  .chat-block,
  .command-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-section h1,
  .server-description,
  .tab-content h2,
  .tab-content h3,
  .tab-content p,
  .feature-card p,
  .step-card p,
  .command-block span,
  .info-block p,
  .world-block p,
  .chat-content p,
  .step-content p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .features-container,
  .steps-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-section {
    justify-content: center;
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .hero-content {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 32rem;
    padding-inline: 0;
  }

  .gallery-grid {
    width: 100%;
    max-width: 100%;
  }

  .features-container,
  .how-to-play,
  .gallery-page,
  .about-page,
  .rules-page {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
  }

  .tab-nav-wrapper,
  .content-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tab-nav {
    max-width: 100%;
  }

  .tab-nav-wrapper {
    margin-top: 0.9rem;
  }

  .how-to-play h2 {
    font-size: 1.85rem;
  }

  .rules-hero,
  .about-page > .tab-nav-wrapper,
  .gallery-page > .tab-nav-wrapper {
    margin-top: 1.1rem;
  }

  .rules-hero {
    margin-top: 1.85rem;
  }

  .rules-page > .tab-nav-wrapper,
  .rules-page.tabs-open > .tab-nav-wrapper {
    margin-top: 1.1rem;
  }

  .about-page #about,
  .about-page #about .info-block,
  .about-page #about .tab-content,
  .about-page #about .content-area {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .about-page #about {
    overflow-x: hidden;
  }

  .about-page #about *,
  .about-page #about .info-block p,
  .about-page #about .info-block h3 {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gallery-page,
  .rules-page,
  .about-page {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
}

/* Force no horizontal scroll on narrow devices */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  main { overflow-x: hidden; }
  img, iframe, video { max-width: 100%; height: auto; display: block; }
  .content-area, .profile-layout, .admin-layout { box-sizing: border-box; }
}

/* Additional defensive rules for tiny devices */
@media (max-width: 420px) {
  .auth-card { padding: 0.8rem; }
  .header .brand { max-width: 70%; }
  .tab-btn { font-size: 0.92rem; padding: 0.36rem 0.7rem; }
}