/* ============================================================
   DUEL BOXING — Responsive rules
   Mobile-first: base styles in style.css already work on mobile.
   These rules hide/show nav variants and adjust for breakpoints.
   ============================================================ */

/* ---- Mobile default: hide desktop sidebar & right panel, show bottom nav ---- */
.sidebar{ display:none; }
.right-panel{ display:none; }
.bottom-nav{
  display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
  background: #0a0e1c;
  background-image: linear-gradient(0deg, #0a0e1c, #0b1020);
  border-top: 1px solid var(--border-soft);
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom));
  justify-content:space-around;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
}
.bottom-nav::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(53,230,255,0.35), rgba(168,117,255,0.35), transparent);
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; color: var(--text-faint); letter-spacing:.02em;
  padding: 7px 10px; border-radius: var(--radius-sm); min-width:56px;
  transition: color .18s ease, background .18s ease, transform .18s var(--ease-snap);
}
.bn-item span{ font-size:19px; }
.bn-item:active{ transform: scale(0.92); }
.bn-item.active{ color: var(--blue); background: var(--blue-dim); box-shadow: inset 0 0 0 1px rgba(53,230,255,0.25); }

.mobile-only{ display:inline-flex; }
.topbar-user-info strong{ font-size:13px; }
.content{ padding: 16px 14px 100px; }
.auth-card{ padding: 30px 22px; }
.auth-badges{ gap:6px; }

/* Small phones */
@media (max-width: 380px){
  .topbar-stats{ display:none; }
  .match-found-title{ font-size:32px; }
  .auth-badge{ font-size:10px; padding:4px 9px; }
}

/* ---- Tablet ---- */
@media (min-width: 640px){
  .matches-list{ grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
  .swipe-stage{ max-width:400px; }
}

/* ---- Medium / tablet-landscape: switch to sidebar nav, but the right
   "Player Info" rail stays off until there's genuinely enough width for
   all three columns (sidebar + content + rail) to breathe. Showing it too
   early — e.g. right at 960px, which is also what Chrome's "Request
   Desktop Site" reports on many phones — squeezed the map/content column
   down to almost nothing. ---- */
@media (min-width: 880px){
  .sidebar{ display:flex; }
  .bottom-nav{ display:none; }
  .mobile-only{ display:none; }
  .content{ padding: 28px 32px 44px; }
  .view-head h1{ font-size:28px; }
  .swipe-stage{ max-width:440px; }
  .app{ align-items:stretch; }

  .auth-showcase{
    display:block; flex:1; max-width:480px; color: var(--text); padding-bottom:12px;
    animation: floatIn .6s var(--ease);
  }
  .showcase-kicker{
    font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; color: var(--blue);
    background: var(--blue-dim); display:inline-block; padding:7px 15px; border-radius: var(--radius-pill);
    margin-bottom:24px; border:1px solid rgba(53,230,255,0.3);
  }
  .showcase-title{
    font-family: var(--font-display); font-size:38px; font-weight:700; line-height:1.16; margin-bottom:18px; letter-spacing:.01em;
  }
  .showcase-title span{
    background: linear-gradient(120deg, var(--blue), var(--purple));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .showcase-sub{ color: var(--text-dim); font-size:14.5px; line-height:1.65; max-width:420px; margin-bottom:32px; }
  .showcase-features{ display:flex; flex-direction:column; gap:18px; }
  .showcase-feature{ display:flex; align-items:flex-start; gap:15px; }
  .sf-ico{
    width:42px; height:42px; border-radius:13px; background: var(--glass); border:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
  }
  .showcase-feature b{ display:block; font-size:14px; font-weight:700; margin-bottom:3px; }
  .showcase-feature small{ color: var(--text-faint); font-size:12.5px; line-height:1.5; display:block; max-width:300px; }
}

/* ---- Full desktop: enough room to also show the right rail ---- */
@media (min-width: 1240px){
  .right-panel{ display:block; }
  .content{ padding: 30px 34px 44px; }
  .view-head h1{ font-size:29px; }
  .swipe-stage{ max-width:460px; }
  .showcase-title{ font-size:44px; }
  .showcase-sub{ font-size:15px; margin-bottom:38px; }
  .showcase-features{ gap:20px; }
}

@media (min-width: 1400px){
  .auth-layout{ gap:88px; }
  .showcase-title{ font-size:50px; }
}

@media (min-width: 1200px){
  .content{ max-width: 1200px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}