/*====================================
    MOBILE CORE & LAYOUT
====================================*/
@media screen and (max-width: 1100px) {
body { overflow-x: hidden; }
.background-image { background-attachment: scroll; }
.navbar.mobile-active { background: #0a0a0b !important; height: 100vh !important; flex-direction: column !important; justify-content: flex-start !important; padding: 0 !important; overflow-y: overlay; }
.form-scroll-area { flex: 1; overflow-y: auto; padding-right: 1.5rem; margin-bottom: 2rem; scrollbar-gutter: stable; }
.form-scroll-area::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.05); }
.form-scroll-area::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); }
}
/*====================================
    NAVBAR & HAMBURGER (MOBILE)
====================================*/
.navbar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 1.5rem !important; height: 75px !important; transition: background 0.3s ease; }
.navbar.mobile-active { background: #0a0a0b !important; height: 100vh !important; flex-direction: column !important; justify-content: flex-start !important; padding: 0 !important; overflow-y: auto; }
.nav-spacer { display: block !important; flex: 1 !important; }
.navbar.mobile-active .nav-spacer { display: none !important; }
.nav-logo-container { flex: 1 !important; display: flex !important; justify-content: center !important; padding: 0 !important; width: auto !important; }
.navbar.mobile-active .nav-logo-container { flex: none; height: 75px; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.05); order: 1; }
.nav-brand { height: 55px !important; width: auto !important; position: static !important; transform: none !important; filter: none !important; }
.hamburger { display: flex !important; flex: 1 !important; justify-content: flex-end !important; cursor: pointer; z-index: 1100; }
.navbar.mobile-active .hamburger { position: absolute; top: 27px; right: 1.5rem; flex: none; }
.hamburger-box { width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger span { width: 30px; height: 3px; background: var(--text); transition: 0.3s; display: block; }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-group.left, .nav-group.right { display: none; width: 100%; background: transparent; flex-direction: column; align-items: center; z-index: 1050; }
.navbar.mobile-active .nav-group.left { display: flex; order: 2; margin-top: 50px; }
.navbar.mobile-active .nav-group.right { display: flex; order: 3; margin-top: 1.5rem; padding-bottom: 100px; }
.nav-group a { font-size: 1.5rem !important; opacity: 1 !important; letter-spacing: 4px; font-weight: 800; text-transform: uppercase; text-decoration: none; color: var(--text); }
.nav-group { gap: 1.5rem !important; }
@keyframes mobileFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.navbar.mobile-active .nav-group a { animation: mobileFade 0.4s ease forwards; opacity: 0; }
.navbar.mobile-active .nav-group a:nth-child(1) { animation-delay: 0.1s; }
.navbar.mobile-active .nav-group a:nth-child(2) { animation-delay: 0.2s; }
.navbar.mobile-active .nav-group a:nth-child(3) { animation-delay: 0.3s; }
.navbar.mobile-active .nav-group a:nth-child(4) { animation-delay: 0.4s; }
.nav-group a.current { border-left: 3px solid #fff; padding-left: 10px; }
.nav-group a.nav-staff { margin-top: 1rem; width: 80%; text-align: center; border: 1px solid var(--text); padding: 1rem; border-radius: 4px; font-size: 1.1rem !important; }

/*====================================
    FOOTER (MOBILE)
====================================*/
.footer {  position: static;  display: flex;  flex-direction: column;  height: auto;  padding: 3rem 1.5rem;  gap: 2rem;  overflow-x: hidden;  }
.footer-left { order: 2; flex-direction: column; text-align: center; }
.footer-center { order: 1; justify-self: center; }
.footer-links {  order: 3;  align-items: center;  text-align: center;  width: 100%;  }
.footer-right {  font-size: 0.7rem;  line-height: 2;  white-space: normal !important; display: flex; flex-wrap: wrap;  justify-content: center; gap: 8px;  color: rgba(233,236,248,.4); }
.footer-right a { white-space: nowrap; }
.footer-legal {  margin-top: 1.5rem;  font-size: .7rem;  display: flex; justify-content: center; gap: 15px; }

/*====================================
    HOMEPAGE (MOBILE)
====================================*/
.content { padding: 100px 20px; }
.main-logo { width: 85vw; margin-bottom: 2rem; }
.btn-apply { padding: 1rem 2rem; width: 100%; text-align: center; letter-spacing: 2px; }
.stats-container { flex-direction: column; width: 100%; gap: 1.5rem; margin-top: 3rem; }
.stat-card { width: 100%; height: 120px; }
.stat-value { font-size: 2rem; }

/*====================================
    ABOUT US (MOBILE)
====================================*/
.about-content { margin-top: 100px; padding-bottom: 100px; gap: 80px; padding-left: 20px; padding-right: 20px; }
.about-section, .about-section.reverse { flex-direction: column; position: static; }
.image-wrapper { width: 100%; height: 250px; }
.text-card { width: 95%; position: relative; margin-top: -60px; padding: 2rem 1.5rem; right: auto; left: auto; margin-left: auto; margin-right: auto; }
.card-header, .about-section.reverse .card-header { text-align: center; }
.heading-line { width: 60px; }
.text-card p { font-size: 0.85rem; text-align: center; }

/*====================================
    RECRUITMENT (MOBILE)
====================================*/
.recruitment-content { margin-top: 110px; padding: 0 20px; }
.recruitment-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
.recruitment-header p { font-size: 0.85rem; opacity: 0.5; }
.carousel-fade-wrapper { mask-image: none !important; -webkit-mask-image: none !important; overflow: visible; }
.carousel-btn { display: none !important; }
.carousel-container { padding: 20px 0; gap: 1.2rem; }
.role-card { flex: 0 0 82%; padding: 3.5rem 1.5rem; min-height: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.role-card h3 { font-size: 1.4rem; letter-spacing: 2px; }
.role-card p { font-size: 0.85rem; margin-bottom: 2.5rem; opacity: 0.5; }
.status-indicator { font-size: 0.5rem; padding: 0.5rem 1rem; top: 1.2rem; right: 1.2rem; letter-spacing: 1px; }
.modal-overlay { padding: 15px; align-items: center; justify-content: center; }
.modal-card { padding: 2.5rem 1.5rem 2rem; width: 100%; max-height: 92vh; display: flex !important; flex-direction: column !important; }
.modal-card h2 { font-size: 1.3rem; letter-spacing: 3px; margin-bottom: 1.5rem; line-height: 1.3; flex-shrink: 0; }
.modal-close { top: 1rem; right: 1rem; font-size: 1.8rem; }
.app-form { display: flex !important; flex-direction: column !important; flex: 1 !important; overflow: hidden !important; }
.form-scroll-area { flex: 1 !important; overflow-y: auto !important; padding-right: 8px; margin-bottom: 1.5rem; }
.question-block { margin-bottom: 2rem; }
.app-form label { font-size: 0.6rem; margin-bottom: 0.8rem; opacity: 0.4; font-weight: 800; }
.app-form input[type="text"], .app-form textarea { padding: 1rem; font-size: 0.85rem; margin-bottom: 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); color: #fff; width: 100%; }
.app-form textarea { min-height: 100px; }
.option-item { display: flex !important; align-items: center !important; gap: 0.8rem; background: rgba(255, 255, 255, 0.03); padding: 1.1rem; border: 1px solid var(--card-border); margin-bottom: 0.5rem; }
.option-item:active { background: rgba(255, 255, 255, 0.1); }
.option-item:has(input:checked) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.option-item span { font-size: 0.85rem; opacity: 0.7; }
.app-form .btn-role { flex-shrink: 0 !important; margin-top: auto !important; background: #fff !important; color: #000 !important; width: 100% !important; padding: 1.2rem !important; font-weight: 800; border: none; letter-spacing: 2px; }
#app-status { font-size: 0.6rem; text-align: center; margin-top: 10px; font-weight: 800; }

/*====================================
    PARTNERS PAGE (MOBILE)
====================================*/
.partners-content { margin-top: 110px; padding: 0 20px; }
.partners-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.partner-card { min-height: auto; border-radius: 10px; }
.partner-cover { height: 85px; }
.partner-logo { width: 55px; height: 55px; top: -28px; left: 1.5rem; }
.partner-info { padding: 2.2rem 1.2rem 1.2rem; }
.partner-card h3 { font-size: 1rem; }
.partner-card p { font-size: 0.8rem; margin-bottom: 0.5rem; }
.p-date { margin-bottom: 1rem; padding-top: 0.6rem; }
@media screen and (max-width: 1100px) { .partner-badge { font-size: 0.62rem; padding: 0.28rem 0.5rem; } .partner-badge-container { top: 0.9rem; right: 0.9rem; gap: 0.35rem; } }

/*====================================
    EVENTS PAGE (MOBILE)
====================================*/
.events-content { padding-top: 100px; }
.events-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
.events-grid { grid-template-columns: 1fr; }
.event-card { padding: 3rem 1.5rem; min-height: auto; }

/*====================================
    HOSTED EVENTS (MOBILE)
====================================*/
@media screen and (max-width: 1100px) {
.hosted-content { padding: 100px 20px 20px; }
.hosted-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
 .hosted-grid { grid-template-columns: 1fr; gap: 1.2rem; }
 .hosted-card { min-height: auto; padding: 0; }
 .hosted-banner { height: 130px; }
 .hosted-body { padding: 0.9rem 0.9rem; }
 .hosted-body h3 { font-size: 1rem; margin: 0.6rem 0 0.7rem; }
 .route-info { grid-template-columns: 1fr auto 1fr; padding: 0.6rem 0.8rem; }
 .event-stats { margin-top: 0.2rem; gap: 0.9rem; }
 .dlc-container { margin: 0.25rem 0 0.45rem; gap: 0.35rem; line-height: 1.1; }
 .dlc-pill { font-size: 0.56rem; padding: 0.16rem 0.5rem; }
 .card-footer { flex-direction: column; gap: 0.5rem; align-items: stretch; }
 .server-info { font-size: 0.75rem; text-align: left; }
 .btn-join { width: 100%; text-align: center; }
.carousel-container { gap: 1.2rem; padding: 0 0 1.5rem; }
.carousel-btn { width: 36px; height: 36px; } }
@media screen and (max-width: 1100px) {
.hosted-card { flex: 0 0 88%; min-width: 280px; } }

/*====================================
    CONTACT PAGE (MOBILE)
====================================*/
.contact-content { margin: 120px auto 140px; padding: 0 20px; gap: 1.5rem; }
.contact-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
.contact-header p { font-size: 0.85rem; }
.contact-card { padding: 2rem 1.2rem; }

/*====================================
    STAFF PAGE (MOBILE)
====================================*/
@media screen and (max-width: 1100px) {
.staff-page { margin: 110px auto 120px; padding: 0 20px; }
.staff-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
.staff-header p { font-size: 0.85rem; letter-spacing: 2px; }
.staff-roles { gap: 2.25rem; }
.staff-role-title h2 { font-size: 1.1rem; letter-spacing: 4px; }
.staff-role-count { font-size: 0.7rem; letter-spacing: 2px; }
.staff-carousel-track { padding: 8px 54px 18px 8px; gap: 0.85rem; }
.staff-carousel-btn { width: 38px; height: 38px; border-width: 1px; }
.staff-carousel-btn.prev { left: -6px; }
.staff-carousel-btn.next { right: -6px; }
.staff-card { flex: 0 0 82%; padding: 1rem 0.9rem 0.95rem; border-radius: 12px; }
.staff-card-avatar { width: 52px; height: 52px; }
.staff-card-username { font-size: 0.92rem; letter-spacing: 1.6px; }
.staff-card-join { font-size: 0.68rem; }
.staff-role-pill { font-size: 0.62rem; letter-spacing: 1px; padding: 0.32rem 0.55rem; } }
@media screen and (max-width: 1100px) { .staff-carousel-track { -webkit-mask-image: none; mask-image: none; } }



/*====================================
    NEWS  (MOBILE)
====================================*/
@media screen and (max-width: 1100px) {
    .news-grid { grid-template-columns: 1fr; gap: 1rem; padding: 0 20px 2.5rem; }
.news-card { padding: 1rem; border-radius: 12px; min-height: auto; }
.card-title { font-size: 1rem; letter-spacing: 1.8px; }
.card-summary { -webkit-line-clamp: 4; font-size: 0.95rem; }
.card-date-footer { font-size: 0.72rem; opacity: 0.65; }
.btn-view { padding: 0.65rem 0.9rem; font-size: 0.9rem; border-radius: 8px; }
.modal-overlay#news-modal .modal-card { padding: 1rem; max-height: 92vh; border-radius: 12px; }
#modal-title { font-size: 1.05rem; letter-spacing: 2px; } #modal-body { font-size: 0.96rem; line-height: 1.65; } }
@media screen and (max-width: 420px) { .card-title { font-size: 0.96rem; } .card-summary { font-size: 0.9rem; } .card-author { font-size: 0.82rem; } .card-date-footer { font-size: 0.68rem; } .btn-view { padding: 0.6rem 0.85rem; font-size: 0.86rem; } }
@media screen and (max-width: 1100px) { .card-summary { flex: 1 1 auto; margin-bottom: 0.8rem; } .card-tags { margin-bottom: 0.35rem; } .card-footer { padding-top: 0.6rem; } .card-title { text-align: left; } }
@media screen and (max-width: 900px) { #news-modal a { text-shadow: 0 3px 12px rgba(255,255,255,0.05); } #news-modal a:hover { text-shadow: 0 5px 18px rgba(255,255,255,0.12); } }

/*====================================
    GALLERY PAGE (MOBILE)
====================================*/
@media screen and (max-width: 1100px) {
    .gallery-content { margin-top: 100px; padding: 0 20px; }
    .gallery-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
    .potm-section { margin-bottom: 3rem; }
    .potm-image-wrapper { height: 250px; }
    .potm-badge { top: 1rem; right: 1rem; font-size: 0.55rem; padding: 0.4rem 0.8rem; }
    .potm-info { padding: 1.5rem; }
    .potm-info h2 { font-size: 1.3rem; }
    .potm-info p { font-size: 0.9rem; }
    .gallery-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .grid-item { height: 220px; }
    .lightbox { padding: 10px; }
    .lightbox-close { top: 20px; right: 20px; font-size: 2.5rem; }
}


/*====================================
    NAVBAR PRIORITY (MOBILE)
====================================*/
.navbar.mobile-active { z-index: 9999 !important;  position: fixed !important; top: 0; left: 0; width: 100vw; height: 100dvh !important;  overflow-y: auto; }
.hamburger { z-index: 10000 !important; }
.footer { position: static;  z-index: 1;  }
.overlay { z-index: -1; }









/*====================================
    STAFF PANEL (MOBILE)
====================================*/
@media screen and (max-width: 1100px) {
.staff-page { margin: 110px auto 120px; padding: 0 20px; }
.staff-header h1 { font-size: 2.2rem; letter-spacing: 6px; }
.staff-header p { font-size: 0.85rem; letter-spacing: 2px; }
.staff-roles { gap: 2.25rem; }
.staff-role-title { margin-bottom: 0.95rem; }
.staff-role-title h2 { font-size: 1.15rem; letter-spacing: 4px; }
.staff-role-count { font-size: 0.7rem; letter-spacing: 2px; }
.staff-carousel-track { padding: 8px 54px 18px 8px; gap: 0.85rem; }
.staff-carousel-btn { width: 38px; height: 38px; border-radius: 999px; }
.staff-carousel-btn.prev { left: -6px; }
.staff-carousel-btn.next { right: -6px; }
.staff-card { flex: 0 0 82%; padding: 1rem 0.9rem 0.95rem; border-radius: 12px; }
.staff-card-avatar { width: 52px; height: 52px; }
.staff-card-username { font-size: 0.92rem; letter-spacing: 1.6px; }
.staff-card-join { font-size: 0.68rem; }
.staff-card-roles { margin-top: 0.75rem; gap: 0.45rem; }
.staff-role-pill { font-size: 0.62rem; letter-spacing: 1px; padding: 0.32rem 0.55rem; }
.external-team-badge { font-size: 0.62rem; letter-spacing: 1px; padding: 0.28rem 0.55rem; margin-bottom: 0.35rem; } }
#section-external-partners { margin-top: 1.2rem; }
#external-partners-list { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.external-partner-card { padding: 0.85rem; border-radius: 8px; min-height: auto; }
.external-partner-row { gap: 0.6rem; }
.external-partner-logo { width: 55px; height: 55px; border-radius: 8px; }
.external-partner-name { font-size: 1rem; }
.external-partner-slogan { font-size: 0.82rem; }
.external-partner-controls { width: 100%; display: flex; gap: 0.5rem; margin-top: 0.5rem; justify-content: flex-start; }
.external-partner-edit { padding-top: 0.6rem; }

/*====================================
    TOASTS (MOBILE)
====================================*/
#toast-container { top: 85px; right: 0; width: 100%; padding: 0 1rem; align-items: center; }
.toast { width: 100%; min-width: auto; padding: 1rem; translate: 0 -20px; opacity: 0; animation: toastInMob 0.4s ease forwards; }
@keyframes toastInMob { to { translate: 0 0; opacity: 1; } }
.toast-msg { font-size: 0.65rem; letter-spacing: 1px; }



/*====================================
    ZOOM FIX (MOBILE)
====================================*/
@media screen and (max-width: 1250px) {.navbar { display: flex !important;  justify-content: space-between !important; padding: 0 1.5rem !important; }
.nav-group.left, .nav-group.right { display: none;  width: 100%; }}

/*====================================
    STAFF HUB FIX (MOBILE)
====================================*/
@media screen and (max-width: 1100px) { .welcome-card { padding: 2rem 1rem !important; }
.hub-content { padding: 100px 10px !important; overflow-x: hidden;} }
@media screen and (max-width: 768px) { #partner-badges-list > div {  flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
#partner-badges-list > div > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem !important; width: 100%; }
#partner-badges-list label { font-size: 0.65rem; white-space: nowrap; } }
@media screen and (max-width: 768px) { #section-external-partners .admin-grid > div > div:first-of-type { grid-template-columns: 1fr !important; }
#section-external-partners .hub-btn { min-width: 0 !important; flex: 1; font-size: 0.7rem; padding: 0.8rem 0.5rem !important; }
#section-external-partners .admin-grid > div > div:nth-of-type(2) { flex-direction: column; } }
@media screen and (max-width: 768px) { #potm-manager > div { flex-direction: column !important; }
#potm-preview-container { width: 100% !important; flex: none !important; }
#mgmt-slots-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } }
@media screen and (max-width: 1100px) { #section-external-partners .admin-grid > div > div:first-of-type { grid-template-columns: 1fr !important;  width: 100% !important; }
#section-external-partners .admin-grid > div > div:nth-of-type(2) { flex-direction: column !important;  align-items: stretch !important; gap: 0.5rem !important; }
#section-external-partners .hub-btn,  #section-external-partners .hub-input { min-width: 0 !important;  width: 100% !important; } }
@media screen and (max-width: 1100px) { #potm-manager > div { flex-direction: column !important;  gap: 1rem !important; }
#potm-preview-container { width: 100% !important; height: 150px !important; flex: none !important; }
#mgmt-slots-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 10px !important; width: 100% !important; }
#section-gallery-mgmt > div:first-of-type { flex-direction: column !important; align-items: flex-start !important; padding: 1rem !important; } }
@media screen and (max-width: 1100px) { .welcome-card { padding: 2rem 1.25rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; }
.hub-input, .hub-btn { max-width: 100% !important; box-sizing: border-box !important; } }
@media screen and (max-width: 1100px) { .welcome-card { width: 100% !important; max-width: 100vw !important; padding: 2.5rem 1rem !important;  margin: 0 !important; box-sizing: border-box !important; border-radius: 0 !important;  }
#section-external-partners .admin-grid > div > div:first-of-type { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0.8rem !important; }
#section-external-partners .hub-input { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 0 0.5rem 0 !important; }
#section-external-partners div[style*="grid-column: span 1"] { grid-column: auto !important; width: 100% !important; } }
@media screen and (max-width: 1100px) { .hub-content { padding: 80px 10px 20px 10px !important;  align-items: flex-start !important;  overflow-x: hidden !important; }
.hub-note, .hub-section-title { text-align: center !important; width: 100% !important; white-space: normal !important; word-wrap: break-word !important; } }
@media screen and (max-width: 1100px) {
.hub-content { padding: 80px 10px 40px !important; display: block !important; }
.welcome-card { width: 100% !important; max-width: 100vw !important; padding: 2rem 15px !important; box-sizing: border-box !important; margin: 0 !important; overflow-x: hidden !important; }
.hub-input, .hub-btn, .admin-grid, .admin-grid > div, .app-form input, .app-form textarea,  #external-partners-list, #section-external-partners div[style*="grid-column"] {  width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; display: block !important;  }
#section-external-partners div[style*="display:grid"] { display: flex !important; flex-direction: column !important; }
#mgmt-slots-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; }
.hub-section-title, .hub-note { width: 100% !important; text-align: left !important; white-space: normal !important; margin: 0 0 1rem 0 !important; }
#potm-manager > div { flex-direction: column !important; }
#potm-preview-container { width: 100% !important; height: 120px !important; flex: none !important; } }