:root {
  --app-surface: rgba(30, 14, 22, .95);
  --app-text: #fff1f2;
  --app-muted: #cbd5e1;
  --app-nav: rgba(15, 7, 11, .97);
}

@media (max-width: 768px) {
  html, body { min-height: 100%; }
  body { background: linear-gradient(160deg, #351014 0%, #140b12 48%, #07090e 100%) !important; color: var(--app-text) !important; padding-bottom: 100px !important; -webkit-font-smoothing: antialiased; }
  .container { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 12px 14px 112px !important; }
  header { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 8px !important; margin-bottom: 10px !important; }
  header h1 { color: var(--app-text) !important; font-size: 20px !important; }
  header p { color: var(--app-muted) !important; font-size: 14px !important; }
  .header-logo { gap: 10px !important; }
  .header-logo img, .club-logo { width: 56px !important; height: 56px !important; border-radius: 10px; }
  nav { position: fixed !important; inset: auto 0 0; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42px; gap: 3px !important; max-height: 94px; overflow-y: auto; overflow-x: hidden; margin: 0 !important; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important; background: var(--app-nav) !important; border-top: 1px solid rgba(248, 113, 113, .2) !important; border-radius: 0 !important; box-shadow: 0 -12px 28px rgba(0, 0, 0, .3) !important; z-index: 9999 !important; }
  nav a, nav > button { min-width: 0; }
  nav button { width: 100% !important; height: 42px !important; min-height: 0 !important; padding: 5px 4px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #cbd5e1 !important; font-size: 11px !important; line-height: 1.2; white-space: normal; }
  nav button.active, nav a:first-child button { background: rgba(185, 28, 28, .42) !important; color: #fff1f2 !important; }
  nav button:hover { transform: none !important; box-shadow: none !important; }
  .section, .event-card, .match-result, .tournament-card, .video-card { background: var(--app-surface) !important; border: 1px solid rgba(248, 113, 113, .16) !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .25) !important; padding: 14px !important; margin-bottom: 12px !important; }
  h2 { color: var(--app-text) !important; font-size: 1.45rem !important; }
  button, select, input, textarea { min-height: 46px; font-size: 16px !important; }
  .login-container { width: calc(100% - 28px) !important; max-width: 420px !important; margin: 12vh auto 0 !important; padding: 24px 18px !important; background: var(--app-surface) !important; border: 1px solid rgba(248, 113, 113, .16) !important; border-radius: 18px !important; }
  .modal-content { max-width: 100% !important; width: 100% !important; max-height: calc(100vh - 80px) !important; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .player-card { min-height: 90px !important; padding: 10px !important; }
}