/* ═══════════════════════════════════════════════════════════════
   BOXING IN SHADOW — MOBILE ENHANCEMENTS
   Complete professional mobile experience
   Works alongside existing CSS — no desktop styles changed
   ═══════════════════════════════════════════════════════════════ */

/* ─── GLOBAL MOBILE BASE ─── */
@media (max-width: 860px) {
  html { font-size: 15px; }
  body { overflow-x: hidden; }

  /* ─── NAV ─── */
  #nav { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .nav-inner { padding: .65rem 1rem; gap: .5rem; }
  .nav-logo img { width: 54px; height: 54px; }
  .nav-wordmark span:first-child { font-size: .9rem; }
  .nav-wordmark span:last-child { font-size: .58rem; letter-spacing: .14em; }

  /* Mobile nav drawer */
  .nav-links {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(13,13,13,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 1rem 1.25rem 1.5rem;
    gap: .35rem;
    border-bottom: 1px solid var(--border);
    z-index: 998;
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav-links.mobile-open { display: flex !important; }
  .nav-page-tab {
    font-size: .82rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    border-bottom: 1px solid var(--border) !important;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
    gap: .6rem;
    background: rgba(255,255,255,.02);
    transition: all .2s;
  }
  .nav-page-tab.tab-active {
    border-color: var(--gold) !important;
    background: rgba(201,146,10,.08);
    color: var(--gold);
  }
  .nav-cta {
    margin-top: .5rem;
    width: 100%;
    padding: .85rem 1.2rem;
    font-size: .88rem;
    clip-path: none !important;
    border-radius: 3px;
    text-align: center;
  }

  /* ─── HERO ─── */
  section.hero { min-height: 100svh; min-height: 100vh; }
  .hero-content { padding: 5.5rem 1.2rem 4rem; }
  .hero-eyebrow { font-size: .65rem; margin-bottom: 1.1rem; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3.6rem) !important; line-height: .95; }
  .hero-sub { font-size: .95rem; margin-bottom: 2rem; max-width: 100%; }
  .hero-actions { flex-direction: column; gap: .8rem; width: 100%; }
  .btn-primary, .btn-ghost {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 1.2rem !important;
    font-size: .9rem !important;
    clip-path: none !important;
    border-radius: 3px;
  }
  .hero-stats {
    margin-top: 2.5rem;
    grid-template-columns: repeat(3,1fr) !important;
    width: 100%;
  }
  .stat-item { padding: .9rem .6rem; }
  .stat-num { font-size: 1.4rem; }
  .stat-lbl { font-size: .55rem; letter-spacing: .1em; }

  /* ─── SECTION BASE ─── */
  section { padding: 3.5rem 1.2rem; }
  .inner { padding: 0; }
  .sec-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .sec-desc { font-size: .88rem; }

  /* ─── COACH ─── */
  #coach .coach-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .coach-avatar-ring {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto;
  }
  .coach-avatar-ring img { width: 92px !important; height: 92px !important; }
  #coach .coach-wrap > div:first-child { align-items: center; }
  .quote-block { margin: 1rem 0; padding: .75rem 1rem; }
  .quote-block p { font-size: .95rem; }

  /* Coach credential pills */
  .cred-pill { font-size: .65rem; padding: .22rem .55rem; }

  /* Coach stats row */
  #coach .coach-wrap > div:last-child > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: .5rem !important;
  }

  /* ─── PHILOSOPHY / PILL FAN ─── */
  .hand-stage {
    padding: 1.5rem 1rem 2rem;
    min-height: 340px;
  }
  .fan-wrap {
    min-height: 250px !important;
    height: 250px !important;
  }
  /* Pill cards get tighter on mobile */
  .pill-card { width: 86px !important; }
  .pill-num { font-size: 1.2rem; }
  .pill-name { font-size: .72rem; }
  .pill-body { font-size: .62rem; }
  .pill-tag { font-size: .52rem; }

  /* Pill fan left positions — tighter spread */
  .fingers-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .8rem;
  }
  .finger-card { padding: 1.2rem .9rem; }
  .finger-num { font-size: 2rem; }

  /* ─── STANDARDS ─── */
  #standards .std-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }
  .std-card { padding: 1.25rem; }

  /* ─── SPONSORS ─── */
  .sp-two-col { grid-template-columns: 1fr !important; gap: 2.5rem; }
  .sp-vert-div { display: none !important; }
  .sp-flip-row { justify-content: flex-start; overflow-x: auto; padding-bottom: .5rem; flex-wrap: nowrap; }
  .flip-outer { min-width: 148px; }

  /* Society grid — 2 col on tablet */
  .society-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
  .sm-card { height: 230px; }

  /* ─── BMI SECTION ─── */
  #bmi .bmi-grid { grid-template-columns: 1fr !important; }
  .bmi-form { padding: 1.2rem; }
  .form-row2 { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .form-input, .form-select {
    font-size: 1rem !important; /* prevent iOS zoom */
    padding: .7rem .75rem;
  }
  .calc-btn { padding: .9rem; font-size: .95rem; }
  .res-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
  .res-val { font-size: 1.3rem; }
  .wt-tables { grid-template-columns: 1fr !important; gap: 1rem; }
  .sport-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1rem;
  }
  .body-types-row { gap: .5rem; overflow-x: auto; padding-bottom: .5rem; flex-wrap: nowrap; }
  .body-type-item { min-width: 100px; }

  /* ─── FEES ─── */
  .fees-grid { grid-template-columns: 1fr !important; gap: 1.2rem; }
  .fee-card { padding: 1.5rem 1.2rem; }
  .fee-card.featured { transform: none; }
  .fee-card h3 { font-size: 1.8rem; }
  .fees-info { grid-template-columns: 1fr !important; gap: 1rem; }
  .commitment { padding: 1.4rem 1.1rem; }
  /* Payment buttons stack on mobile */
  .commitment > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .85rem !important;
  }
  .commitment > div[style*="display:flex"] > a,
  .commitment > div[style*="display:flex"] > button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    clip-path: none !important;
    border-radius: 4px !important;
    padding: 1rem 1.2rem !important;
    font-size: .9rem !important;
  }

  /* ─── GEAR ─── */
  .gear-item {
    grid-template-columns: 44px 1fr !important;
    gap: .9rem;
    padding: 1rem;
  }
  .gear-icon { width: 36px; height: 36px; font-size: 1rem; }
  .gear-spec { display: none; } /* hide spec badge on mobile — shown in desc */
  .gear-name { font-size: .88rem; }
  .gear-desc { font-size: .8rem; }

  /* ─── APPLICATION / CONTACT ─── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .contact-form { padding: 1.25rem; }
  .form-row2 { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .map-wrap iframe { height: 200px; }
  .info-block { padding: 1.1rem; }
  .info-val { font-size: .88rem; }

  /* Application payment buttons */
  .commitment .whatsapp-btn,
  .contact-form a[href*="phonepe"],
  .contact-form a[href*="upi"],
  .contact-form a[href*="wa.me"] {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 4px !important;
  }
  .style-pills { gap: .35rem; }
  .pill { font-size: .62rem; padding: .35rem .65rem; }

  /* ─── FOOTER ─── */
  footer { padding: 1.75rem 1.2rem 2.5rem; }
  .ft-inner {
    flex-direction: column !important;
    text-align: center;
    gap: 1.2rem;
    align-items: center !important;
  }
  .ft-inner > div:last-child { font-size: .82rem; text-align: center; }

  /* ─── STUDENTS MORPH GALLERY ─── */
  .morph-card { width: 165px; height: 220px; }

  /* ─── MISC OVERFLOW ─── */
  .sp-scroll-track { gap: .9rem; }
  .sp-card { width: 145px; height: 120px; }
}

/* ─── SMALL PHONE ─── */
@media (max-width: 480px) {
  html { font-size: 14px; }

  .nav-inner { padding: .55rem .85rem; }
  .nav-logo img { width: 46px; height: 46px; }
  .nav-wordmark span:first-child { font-size: .82rem; letter-spacing: .04em; }

  .hero-content { padding: 5rem .85rem 3rem; }
  .hero-title { font-size: clamp(1.95rem, 9.5vw, 2.8rem) !important; }
  .hero-stats { grid-template-columns: repeat(3,1fr) !important; }
  .stat-item { padding: .75rem .4rem; }
  .stat-num { font-size: 1.25rem; }
  .stat-lbl { font-size: .5rem; letter-spacing: .06em; }

  section { padding: 3rem .85rem; }

  .fingers-grid { grid-template-columns: 1fr 1fr !important; gap: .7rem; }
  .finger-card { padding: 1rem .75rem; }

  .society-grid { grid-template-columns: 1fr 1fr !important; gap: .85rem; }
  .sm-card { height: 200px; }
  .sm-ribbon-name { font-size: .72rem; }
  .sm-ribbon-desg { font-size: .52rem; }
  .sm-overlay-name { font-size: .88rem; }

  .form-row2 { grid-template-columns: 1fr; gap: 0; }
  .form-input, .form-select {
    margin-bottom: .75rem;
    font-size: 1rem !important;
  }

  /* Fan pills even smaller */
  .fan-wrap { min-height: 220px !important; height: 220px !important; }
  .pill-card { width: 72px !important; }

  .fee-card h3 { font-size: 1.6rem; }

  .flip-outer { width: 135px; height: 205px; }
  .morph-card { width: 145px; height: 195px; }
}

/* ─── PAGE TAB BAR (bottom navigation bar for mobile) ─── */
@media (max-width: 860px) {
  .mobile-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(13,13,13,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    z-index: 997;
    padding: 0;
    height: 60px;
    overflow: hidden;
  }
  .mtb-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: #666;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s;
    padding: 0 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .mtb-tab .mtb-icon { font-size: 1.3rem; line-height: 1; }
  .mtb-tab.mtb-active { color: var(--gold); }
  .mtb-tab.mtb-active .mtb-icon { filter: drop-shadow(0 0 4px rgba(201,146,10,.6)); }

  body { padding-bottom: 60px; }
}

@media (min-width: 861px) {
  .mobile-tab-bar { display: none !important; }
}

/* ─── TOUCH INTERACTION IMPROVEMENTS ─── */
@media (pointer: coarse) {
  /* Increase tap targets */
  .nav-page-tab, .mtb-tab, .btn-primary, .btn-ghost,
  .calc-btn, .pill, .whatsapp-btn { min-height: 44px; }

  /* Remove hover effects that don't work on touch */
  .morph-card:hover { transform: none; }
  .morph-card:active { transform: scale(1.04) translateY(-3px); }
  .sm-card:hover .sm-photo { transform: none; filter: none; }
  .sm-card:hover .sm-overlay { opacity: 0; }
  .sm-card:active .sm-photo { transform: scale(1.04); filter: brightness(.45) saturate(.7); }
  .sm-card:active .sm-overlay { opacity: 1; transform: translateY(0); }
  .flip-outer:hover .flip-inner { transform: none; }

  /* Tap to flip on mobile */
  .flip-outer.flipped .flip-inner { transform: rotateY(180deg); }

  /* Spider cursor hidden on touch */
  #spiderContainer { display: none !important; }
  * { cursor: auto !important; }
}

/* ─── SAFE AREA (iPhone notch/home bar) ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ─── HERO RING CANVAS — mobile optimization ─── */
@media (max-width: 860px) {
  #ringCanvas3D { opacity: .55 !important; }
  .hero-ring-art { display: none; }
}

/* ─── SCROLL REVEAL — faster on mobile ─── */
@media (max-width: 860px) {
  .sec-title, .sec-eyebrow, h2.sec-title,
  .coach-wrap, .fingers-grid, .std-grid,
  .bmi-grid, .gear-list, .fees-grid,
  .contact-grid, .bmi-result {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }
}

/* ─── MOBILE CARD TOUCH FEEDBACK ─── */
@media (pointer: coarse) {
  .fee-card:active { transform: scale(.985); }
  .std-card:active { transform: scale(.985); }
  .gear-item:active { background: #1e1e1e; }
  .finger-card:active {
    background: #1e1a10;
    border-top-color: var(--gold);
  }
  .pill:active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,146,10,.05);
  }
}

/* ─── MORPH GALLERY — mobile pause on tap ─── */
@media (max-width: 860px) {
  .morph-track { animation-duration: 45s; }
}

/* ─── SPORT BANNER — mobile fix ─── */
@media (max-width: 860px) {
  .sport-anim-area { width: 60px; height: 60px; }
  #sportSVG { width: 60px !important; height: 60px !important; }
  .sport-name { font-size: 1.1rem; }
  .sport-desc { font-size: .78rem; }
}

/* ─── PILL DETAIL PANEL — mobile ─── */
@media (max-width: 860px) {
  .pill-detail-panel {
    flex-direction: column;
    gap: .9rem;
    padding: 1rem;
  }
  .pill-detail-icon { width: 38px; height: 38px; font-size: .95rem; }
  .pill-detail-name { font-size: .9rem; }
  .pill-detail-desc { font-size: .8rem; }
}

/* ─── FINGER LABELS IN FAN — hide on very small ─── */
@media (max-width: 400px) {
  .pill-finger-label { display: none; }
  .pill-body { display: none; }
  .pill-tag { font-size: .5rem; }
}

/* ─── APPLICATION FORM payment block ─── */
@media (max-width: 860px) {
  /* payment block inside application */
  [style*="background:rgba(95,37,159"] {
    padding: 1.1rem !important;
  }
  [style*="display:flex;gap:.75rem;justify-content:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .7rem !important;
  }
  [style*="display:flex;gap:.75rem;justify-content:center"] > a {
    justify-content: center !important;
    text-align: center !important;
    border-radius: 4px !important;
    padding: .85rem 1.2rem !important;
  }
}

/* ─── BODY TYPE VISUALIZATION ─── */
@media (max-width: 480px) {
  .body-types-row { gap: .35rem; }
  .body-type-item { min-width: 85px; max-width: 110px; }
}

/* ─── TABLE MOBILE SCROLL ─── */
@media (max-width: 860px) {
  .wt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wt-wrap table { min-width: 240px; }
}

/* ─── SECTION DIVIDERS — hide on mobile ─── */
@media (max-width: 860px) {
  .gold-div, .sec-div { display: block; height: 1px; margin: 0; }
}

/* ─── NAV LOGO link to prevent double tap ─── */
@media (max-width: 860px) {
  .nav-logo { cursor: pointer; }
}

/* ─── HERO SCROLL HINT ─── */
@media (max-width: 860px) {
  .scroll-hint { bottom: 4.5rem; }
}

/* ─── PILL FAN — mobile responsive positions ─── */
@media (max-width: 860px) {
  .fan-wrap {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto;
    position: relative;
  }
  /* Override JS-set absolute left positions on mobile */
  .pill-card:nth-child(1) { left: 4% !important; }
  .pill-card:nth-child(2) { left: 22% !important; }
  .pill-card:nth-child(3) { left: 40% !important; }
  .pill-card:nth-child(4) { left: 58% !important; }
  .pill-card:nth-child(5) { left: 76% !important; }
}

@media (max-width: 480px) {
  .fan-wrap { max-width: 340px !important; }
  .pill-card:nth-child(1) { left: 2% !important; }
  .pill-card:nth-child(2) { left: 21% !important; }
  .pill-card:nth-child(3) { left: 40% !important; }
  .pill-card:nth-child(4) { left: 59% !important; }
  .pill-card:nth-child(5) { left: 78% !important; }
  .pill-card { width: 64px !important; }
}

/* ─── GLOVE CURSOR — hide on touch ─── */
@media (pointer: coarse) {
  #glove-cursor { display: none !important; }
  #spiderContainer { display: none !important; }
  .click-ring { display: none !important; }
}

/* ─── HERO STATS — always 3 col on all mobile ─── */
@media (max-width: 480px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .stat-item { padding: .7rem .3rem; }
  .stat-num { font-size: 1.15rem; }
  .stat-lbl { font-size: .45rem; letter-spacing: .05em; }
}

/* ─── FEES — payment button blocks ─── */
@media (max-width: 860px) {
  #upiInfo, #upiInfo2 {
    text-align: center;
  }
  #upiInfo > div[style*="display:flex"],
  #upiInfo2 > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .65rem !important;
  }
  #upiInfo a, #upiInfo2 a {
    justify-content: center !important;
    text-align: center !important;
    border-radius: 4px !important;
  }
}

/* ─── MOBILE: MORPH GALLERY slow down ─── */
@media (max-width: 480px) {
  .morph-track { animation-duration: 40s; }
}

/* ─── MOBILE: SECTION INNER PADDING ─── */
@media (max-width: 860px) {
  #philosophy .inner,
  #coach .inner,
  #standards .inner,
  #bmi .inner,
  #gear .inner,
  #application .inner,
  #students .inner,
  #sponsors .inner {
    padding: 0 !important;
  }
}

/* ─── ACTIVE CARD STATES FOR MOBILE ─── */
@media (pointer: coarse) {
  .sp-card:active {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(201,146,10,.4);
  }
  .morph-card:active {
    transform: scale(1.04) translateY(-4px);
    z-index: 5;
  }
}

/* ─── MOBILE: COACH CREDENTIAL PILLS ─── */
@media (max-width: 480px) {
  .cred-pill { font-size: .6rem; margin: .15rem; }
}

/* ─── MOBILE: CONTACT FORM ─── */
@media (max-width: 480px) {
  .style-pills { gap: .3rem; }
  .pill { font-size: .6rem; padding: .3rem .55rem; }
  .form-textarea { font-size: 16px !important; }
}

/* ─── BOTTOM NAV ACTIVE INDICATOR ─── */
.mtb-tab.mtb-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
}
.mtb-tab { position: relative; }

/* ─── MOBILE: HERO BACKGROUND RING CANVAS ─── */
@media (max-width: 860px) {
  #ringCanvas3D {
    opacity: 0.45 !important;
  }
}

/* ─── 3D RING CANVAS — disable on very small for performance ─── */
@media (max-width: 480px) {
  #ringCanvas3D { opacity: 0.3 !important; }
}

/* ─── MOBILE: SPACING FIXES ─── */
@media (max-width: 860px) {
  .hand-stage-title { margin-bottom: 1.5rem; font-size: .6rem; }
  .sec-eyebrow { font-size: .75rem; }
  .age-row { padding: .5rem .65rem; }
  .age-label { font-size: .8rem; }
  .age-sub { font-size: .62rem; }
  .alloc-lbl { font-size: .65rem; width: 80px; }
  .alloc-score { font-size: .82rem; width: 32px; }
}